:root {
  --qdc-green: #6B8E23;
  --qdc-green-dark: #4a6318;
  --qdc-green-light: #8ab22f;
  --qma-green: #1a6b3c;
  --qma-red: #8b2020;
  --qma-black: #1a1a1a;
  --gold: #c8a84e;
  --white: #ffffff;
  --off-white: #f5f3ef;
  --gray-100: #f0efe9;
  --gray-200: #e0ddd4;
  --gray-600: #6b6b6b;
  --gray-800: #2d2d2d;
  --text: #1a1a1a;
  --shadow: 0 4px 30px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 50px rgba(0,0,0,0.12);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body { font-family:'Montserrat',sans-serif; color:var(--text); background:var(--off-white); line-height:1.7; overflow-x:hidden; }

/* NAV */
.nav { position:fixed; top:0; left:0; right:0; z-index:1000; background:rgba(255,255,255,0.97); backdrop-filter:blur(20px); box-shadow:0 1px 20px rgba(0,0,0,0.06); }
.nav-inner { max-width:1280px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:0.6rem 2rem; }
.nav-brand { display:flex; align-items:center; gap:0.5rem; text-decoration:none; flex-shrink:0; }
.nav-brand img { height:38px; border-radius:6px; }
.nav-brand span { font-weight:700; font-size:0.65rem; color:var(--qdc-green-dark); letter-spacing:0.8px; text-transform:uppercase; line-height:1.3; }
.nav-links { display:flex; gap:0.2rem; list-style:none; align-items:center; }
.nav-links a { text-decoration:none; color:var(--gray-800); font-size:0.7rem; font-weight:500; letter-spacing:0.5px; padding:0.4rem 0.7rem; border-radius:6px; transition:all 0.3s; text-transform:uppercase; }
.nav-links a:hover, .nav-links a.active { background:var(--qdc-green); color:white; }
.nav-devis-btn { position:relative; background:var(--gold)!important; color:white!important; font-weight:700!important; }
.nav-devis-btn .badge { position:absolute; top:-5px; right:-8px; background:var(--qma-red); color:white; font-size:0.6rem; width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; }
.hamburger { display:none; background:none; border:none; font-size:1.5rem; cursor:pointer; color:var(--gray-800); }

/* PAGE HEADER */
.page-header { padding:7rem 2rem 3rem; text-align:center; color:white; position:relative; overflow:hidden; }
.page-header.qdc-header { background:linear-gradient(135deg, var(--qdc-green-dark), var(--qdc-green)); }
.page-header.qma-header { background:linear-gradient(135deg, var(--qma-black), var(--qma-green), var(--qma-red)); }
.page-header.about-header { background:linear-gradient(135deg, var(--qdc-green-dark), var(--qdc-green)); }
.page-header.contact-header { background:linear-gradient(135deg, var(--qdc-green-dark), var(--qdc-green)); }
.page-header::before { content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23fff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.page-header h1 { font-family:'Playfair Display',serif; font-size:clamp(2rem,5vw,3rem); font-weight:700; position:relative; }
.page-header p { font-size:1rem; opacity:0.85; max-width:600px; margin:0.5rem auto 0; position:relative; }
.breadcrumb { font-size:0.8rem; opacity:0.7; margin-bottom:0.5rem; position:relative; }
.breadcrumb a { color:white; text-decoration:none; }
.breadcrumb a:hover { text-decoration:underline; }

/* SECTIONS */
.section { padding:4rem 2rem; }
.section-inner { max-width:1200px; margin:0 auto; }
.section-title { font-family:'Playfair Display',serif; font-size:clamp(1.6rem,4vw,2.4rem); font-weight:700; margin-bottom:0.6rem; }
.section-sub { font-size:0.95rem; color:var(--gray-600); max-width:650px; margin:0 auto 2.5rem; font-weight:300; }
.divider { width:60px; height:3px; background:var(--gold); margin:0 auto 1.5rem; border-radius:2px; }
.text-center { text-align:center; }

/* BTNS */
.btn { display:inline-flex; align-items:center; gap:0.5rem; padding:0.8rem 1.8rem; border-radius:50px; text-decoration:none; font-weight:600; font-size:0.85rem; letter-spacing:0.5px; transition:all 0.3s; border:none; cursor:pointer; text-transform:uppercase; font-family:'Montserrat',sans-serif; }
.btn-primary { background:var(--qdc-green); color:white; }
.btn-primary:hover { background:var(--qdc-green-dark); transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.btn-gold { background:var(--gold); color:white; }
.btn-gold:hover { background:#b89540; transform:translateY(-2px); }
.btn-outline { background:transparent; color:white; border:2px solid rgba(255,255,255,0.5); }
.btn-outline:hover { border-color:white; background:rgba(255,255,255,0.1); }

/* HERO (index) */
.hero { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, rgba(74,99,24,0.9), rgba(58,78,16,0.92), rgba(26,26,26,0.88)), url('img-devanture.jpg') center/cover no-repeat; position:relative; overflow:hidden; text-align:center; color:white; padding:6rem 2rem 4rem; }
.hero::before { content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23fff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.hero-content { position:relative; z-index:1; max-width:900px; }
.hero-logos { display:flex; justify-content:center; gap:2.5rem; margin-bottom:2.5rem; flex-wrap:wrap; }
.hero-logo-card { width:130px; height:130px; background:white; border-radius:20px; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 40px rgba(0,0,0,0.25); padding:12px; transition:transform 0.4s; }
.hero-logo-card:hover { transform:scale(1.08) rotate(-2deg); }
.hero-logo-card img { max-width:100%; max-height:100%; border-radius:8px; }
.hero h1 { font-family:'Playfair Display',serif; font-size:clamp(2rem,5vw,3.5rem); font-weight:700; margin-bottom:1rem; line-height:1.2; }
.hero h1 .hl { color:var(--gold); }
.hero p { font-size:1.05rem; font-weight:300; opacity:0.9; max-width:620px; margin:0 auto 2.5rem; }
.hero-btns { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* CARDS */
.grid-2 { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:2rem; }
.grid-3 { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:1.5rem; }
.grid-4 { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:1.5rem; }
.card { background:white; border-radius:16px; overflow:hidden; transition:all 0.3s; border:1px solid var(--gray-200); }
.card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:transparent; }
.card-img { height:200px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; color:white; flex-direction:column; gap:0.6rem; }
.card-img img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; z-index:1; transition:transform 0.5s; }
.card:hover .card-img img { transform:scale(1.06); }
.card-img i.ic { font-size:3.2rem; filter:drop-shadow(0 4px 15px rgba(0,0,0,0.2)); position:relative; z-index:1; }
.card-img::after { content:''; position:absolute; right:-15px; bottom:-15px; width:110px; height:110px; border-radius:50%; background:rgba(255,255,255,0.06); }
.card-body { padding:1.5rem; }
.card-body h4 { font-weight:700; font-size:1rem; margin-bottom:0.3rem; }
.card-body p { font-size:0.85rem; color:var(--gray-600); line-height:1.6; }

/* BG colors */
.bg-g1 { background:linear-gradient(135deg,#6B8E23,#4a6318); }
.bg-g2 { background:linear-gradient(135deg,#5a7320,#3d5515); }
.bg-g3 { background:linear-gradient(135deg,#4a6318,#354a10); }
.bg-g4 { background:linear-gradient(135deg,#7a8a28,#5a6a18); }
.bg-qma { background:linear-gradient(135deg,#1a6b3c,#0d4020); }
.bg-qma-dark { background:linear-gradient(135deg,#2a2a2a,#111); }
.bg-qma-red { background:linear-gradient(135deg,#8b2020,#501010); }
.bg-qma-mix { background:linear-gradient(135deg,#1a6b3c,#1a1a1a 50%,#8b2020); }

/* PRODUCT CATALOG */
.product-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:1.5rem; }
.product-item { background:white; border-radius:16px; overflow:hidden; border:1px solid var(--gray-200); transition:all 0.3s; }
.product-item:hover { box-shadow:var(--shadow); border-color:var(--qma-green); }
.product-item-img { height:160px; display:flex; align-items:center; justify-content:center; color:white; font-size:2.8rem; position:relative; overflow:hidden; }
.product-item-img img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; z-index:1; transition:transform 0.5s; }
.product-item-img svg { width:100%; height:100%; position:absolute; inset:0; z-index:1; }
.product-item:hover .product-item-img img, .product-item:hover .product-item-img svg { transform:scale(1.06); }
.product-item-img svg { transition:transform 0.5s; }
.product-item-img::after { content:''; position:absolute; right:-10px; bottom:-10px; width:80px; height:80px; border-radius:50%; background:rgba(255,255,255,0.06); }
.product-item-body { padding:1.2rem; }
.product-item-body h4 { font-size:0.95rem; font-weight:700; margin-bottom:0.2rem; }
.product-item-body .ref { font-size:0.75rem; color:var(--gray-600); margin-bottom:0.5rem; }
.product-item-body .desc { font-size:0.82rem; color:var(--gray-600); margin-bottom:1rem; line-height:1.5; }
.product-actions { display:flex; align-items:center; gap:0.5rem; }
.qty-ctrl { display:flex; align-items:center; border:1px solid var(--gray-200); border-radius:8px; overflow:hidden; }
.qty-ctrl button { width:32px; height:32px; border:none; background:var(--gray-100); cursor:pointer; font-size:1rem; font-weight:700; color:var(--gray-800); transition:background 0.2s; }
.qty-ctrl button:hover { background:var(--gray-200); }
.qty-ctrl input { width:40px; height:32px; border:none; text-align:center; font-family:'Montserrat',sans-serif; font-size:0.85rem; font-weight:600; }
.btn-add-devis { flex:1; padding:0.5rem 1rem; background:var(--qma-green); color:white; border:none; border-radius:8px; font-family:'Montserrat',sans-serif; font-size:0.78rem; font-weight:600; cursor:pointer; transition:all 0.3s; text-transform:uppercase; letter-spacing:0.5px; }
.btn-add-devis:hover { background:var(--qdc-green-dark); }
.btn-add-devis.added { background:var(--gold); }

/* CATEGORY FILTER */
.cat-filter { display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:2rem; justify-content:center; }
.cat-btn { padding:0.5rem 1.2rem; border-radius:30px; border:1px solid var(--gray-200); background:white; font-family:'Montserrat',sans-serif; font-size:0.8rem; font-weight:500; cursor:pointer; transition:all 0.3s; }
.cat-btn:hover, .cat-btn.active { background:var(--qma-green); color:white; border-color:var(--qma-green); }

/* STATS BAR */
.stats-bar { background:var(--qma-black); padding:3rem 2rem; }
.stats-grid { max-width:1000px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:2rem; text-align:center; }
.stat-number { font-family:'Playfair Display',serif; font-size:1.8rem; font-weight:700; color:white; }
.stat-number span { color:var(--gold); }
.stat-label { font-size:0.78rem; color:rgba(255,255,255,0.6); text-transform:uppercase; letter-spacing:1px; margin-top:0.3rem; }

/* STRENGTHS */
.strengths-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.2rem; margin-top:1.5rem; }
.strength-item { display:flex; gap:1rem; align-items:flex-start; padding:1.2rem; background:rgba(255,255,255,0.06); border-radius:12px; border:1px solid rgba(255,255,255,0.08); }
.strength-icon { width:44px; height:44px; border-radius:10px; background:var(--gold); color:white; display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }
.strength-item h5 { font-size:0.9rem; font-weight:700; color:white; margin-bottom:0.2rem; }
.strength-item p { font-size:0.8rem; color:rgba(255,255,255,0.7); line-height:1.5; }

/* CTA */
.cta-band { background:linear-gradient(135deg,var(--qdc-green-dark),var(--qdc-green)); padding:2.5rem 2rem; text-align:center; }
.cta-band h3 { color:white; font-family:'Playfair Display',serif; font-size:1.4rem; margin-bottom:1rem; }
.btn-devis-cta { display:inline-flex; align-items:center; gap:0.5rem; padding:0.8rem 2rem; background:var(--gold); color:white; font-weight:700; border-radius:50px; text-decoration:none; font-size:0.9rem; transition:all 0.3s; }
.btn-devis-cta:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); background:#d4b050; }

/* CONTACT */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start; }
.contact-info h3 { font-family:'Playfair Display',serif; font-size:1.8rem; margin-bottom:1.5rem; }
.contact-item { display:flex; gap:1rem; align-items:flex-start; margin-bottom:1.5rem; }
.contact-item i { width:44px; height:44px; background:rgba(255,255,255,0.15); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }
.contact-item strong { display:block; font-size:0.9rem; margin-bottom:0.2rem; }
.contact-item span { font-size:0.85rem; opacity:0.85; line-height:1.8; }
.contact-form { background:rgba(255,255,255,0.1); border-radius:20px; padding:2.5rem; backdrop-filter:blur(10px); }
.form-group { margin-bottom:1.2rem; }
.form-group label { display:block; font-size:0.8rem; font-weight:600; margin-bottom:0.4rem; letter-spacing:0.5px; text-transform:uppercase; }
.form-group input,.form-group textarea,.form-group select { width:100%; padding:0.8rem 1rem; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.25); border-radius:10px; color:white; font-family:'Montserrat',sans-serif; font-size:0.9rem; outline:none; transition:border-color 0.3s; }
.form-group input::placeholder,.form-group textarea::placeholder { color:rgba(255,255,255,0.5); }
.form-group input:focus,.form-group textarea:focus,.form-group select:focus { border-color:var(--gold); }
.form-group select option { color:var(--text); background:white; }
.form-group textarea { min-height:100px; resize:vertical; }
.btn-submit { width:100%; padding:1rem; background:var(--gold); color:white; border:none; border-radius:10px; font-family:'Montserrat',sans-serif; font-weight:700; font-size:0.9rem; letter-spacing:1px; cursor:pointer; transition:all 0.3s; text-transform:uppercase; }
.btn-submit:hover { background:#b89540; transform:translateY(-2px); }

/* DEVIS BASKET */
.devis-summary { background:white; border-radius:16px; padding:2rem; border:1px solid var(--gray-200); }
.devis-summary h3 { font-family:'Playfair Display',serif; font-size:1.3rem; margin-bottom:1rem; }
.devis-list { list-style:none; }
.devis-list li { display:flex; justify-content:space-between; align-items:center; padding:0.8rem 0; border-bottom:1px solid var(--gray-100); font-size:0.88rem; }
.devis-list li:last-child { border-bottom:none; }
.devis-list .remove-btn { background:none; border:none; color:var(--qma-red); cursor:pointer; font-size:0.8rem; padding:0.3rem; }
.devis-empty { text-align:center; padding:2rem; color:var(--gray-600); font-size:0.9rem; }

/* FOOTER */
.footer { background:var(--qma-black); color:rgba(255,255,255,0.7); padding:3rem 2rem 1.5rem; text-align:center; }
.footer-logos { display:flex; justify-content:center; gap:1.5rem; margin-bottom:1.5rem; }
.footer-logos img { height:50px; border-radius:8px; opacity:0.8; }
.footer p { font-size:0.8rem; }
.footer a { color:var(--gold); text-decoration:none; }
.social-links { display:flex; justify-content:center; gap:0.6rem; margin-top:1rem; flex-wrap:wrap; }
.social-link { min-width:42px; height:42px; padding:0 14px; background:rgba(255,255,255,0.1); border-radius:50px; display:inline-flex; align-items:center; justify-content:center; gap:0.4rem; color:rgba(255,255,255,0.7); text-decoration:none; transition:all 0.3s; font-family:'Montserrat',sans-serif; font-weight:600; font-size:0.65rem; letter-spacing:0.2px; white-space:nowrap; }
.social-link:hover { color:white; transform:translateY(-2px); }
.social-link.fb:hover { background:#1877F2; }
.social-link.ig:hover { background:#E4405F; }

/* ABOUT */
.about-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:2rem; }
.about-card { text-align:center; padding:2.5rem 2rem; border-radius:16px; border:1px solid var(--gray-200); background:white; transition:all 0.3s; }
.about-card:hover { box-shadow:var(--shadow); border-color:transparent; }
.about-icon { font-size:2rem; color:var(--qdc-green); margin-bottom:0.8rem; }
.about-card h4 { font-weight:700; margin-bottom:0.5rem; }
.about-card p { font-size:0.88rem; color:var(--gray-600); }

/* SLOGAN */
.slogan-badge { display:inline-flex; align-items:center; gap:0.5rem; padding:0.6rem 1.2rem; border-radius:30px; font-weight:700; font-size:0.85rem; letter-spacing:0.5px; color:white; }

/* RESPONSIVE — see end of file */

/* Toast notification */
.toast { position:fixed; bottom:2rem; left:50%; transform:translateX(-50%) translateY(100px); background:var(--qma-green); color:white; padding:1rem 1.5rem; border-radius:12px; font-size:0.88rem; font-weight:600; box-shadow:var(--shadow-lg); z-index:10001; opacity:0; transition:all 0.4s; display:flex; align-items:center; gap:0.5rem; white-space:nowrap; }
.toast.show { transform:translateX(-50%) translateY(0); opacity:1; }

/* FLOATING DEVIS BUTTON */
.floating-devis-btn { position:fixed; bottom:2rem; right:2rem; z-index:999; width:60px; height:60px; border-radius:50%; background:var(--gold); color:white; border:none; cursor:pointer; font-size:1.3rem; box-shadow:0 6px 30px rgba(200,168,78,0.4); display:flex; align-items:center; justify-content:center; transition:all 0.3s; animation:pulse 2.5s infinite; }
.floating-devis-btn:hover { transform:scale(1.1); box-shadow:0 8px 40px rgba(200,168,78,0.5); }
.float-badge { position:absolute; top:-4px; right:-4px; background:var(--qma-red); color:white; font-size:0.65rem; font-weight:800; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:2px solid white; }

/* DRAWER OVERLAY */
.drawer-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:9998; opacity:0; pointer-events:none; transition:opacity 0.35s; backdrop-filter:blur(4px); }
.drawer-overlay.active { opacity:1; pointer-events:auto; }

/* DEVIS DRAWER */
.devis-drawer { position:fixed; top:0; right:-440px; width:420px; max-width:92vw; height:100vh; background:white; z-index:9999; box-shadow:-10px 0 50px rgba(0,0,0,0.15); transition:right 0.4s cubic-bezier(0.22,1,0.36,1); display:flex; flex-direction:column; }
.devis-drawer.active { right:0; }

.drawer-header { padding:1.2rem 1.5rem; background:var(--gray-100); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--gray-200); flex-shrink:0; }
.drawer-header h3 { font-family:'Playfair Display',serif; font-size:1.1rem; margin:0; }
.drawer-count { font-size:0.8rem; font-weight:400; color:var(--gray-600); font-family:'Montserrat',sans-serif; }
.drawer-close { background:none; border:none; font-size:1.3rem; cursor:pointer; color:var(--gray-600); padding:0.3rem; transition:color 0.2s; }
.drawer-close:hover { color:var(--qma-red); }

.drawer-body { flex:1; overflow-y:auto; padding:1.2rem 1.5rem; }

.drawer-empty { text-align:center; padding:3rem 1rem; color:var(--gray-600); }
.drawer-empty i { font-size:3rem; opacity:0.2; margin-bottom:1rem; display:block; }
.drawer-empty p { font-weight:600; margin-bottom:0.3rem; }
.drawer-empty span { font-size:0.85rem; opacity:0.7; }

/* Drawer items */
.drawer-store-label { display:flex; align-items:center; gap:0.6rem; font-size:0.78rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--gray-600); padding:0.8rem 0 0.4rem; margin-top:0.5rem; border-bottom:1px solid var(--gray-100); }
.drawer-store-label img { height:24px; border-radius:4px; }
.drawer-item { display:flex; align-items:center; justify-content:space-between; padding:0.7rem 0; border-bottom:1px solid var(--gray-100); gap:0.8rem; }
.drawer-item-info { flex:1; min-width:0; }
.drawer-item-name { font-size:0.85rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.drawer-item-ref { font-size:0.72rem; color:var(--gray-600); }
.drawer-item-actions { display:flex; align-items:center; gap:0.5rem; flex-shrink:0; }
.drawer-qty { display:flex; align-items:center; border:1px solid var(--gray-200); border-radius:6px; overflow:hidden; }
.drawer-qty button { width:28px; height:28px; border:none; background:var(--gray-100); cursor:pointer; font-size:0.9rem; font-weight:700; transition:background 0.2s; }
.drawer-qty button:hover { background:var(--gray-200); }
.drawer-qty span { width:30px; text-align:center; font-size:0.82rem; font-weight:700; }
.drawer-remove { background:none; border:none; color:var(--gray-600); cursor:pointer; font-size:0.85rem; padding:0.3rem; transition:color 0.2s; }
.drawer-remove:hover { color:var(--qma-red); }

/* Drawer form */
.drawer-divider { height:1px; background:var(--gray-200); margin:1.2rem 0; }
.drawer-form-section h4 { font-size:0.88rem; font-weight:700; margin-bottom:1rem; color:var(--gray-800); }
.drawer-form-section h4 i { color:var(--qma-green); margin-right:0.3rem; }
.drawer-form { display:flex; flex-direction:column; gap:0.7rem; }
.drawer-form input, .drawer-form select, .drawer-form textarea {
  width:100%; padding:0.7rem 0.9rem; border:1px solid var(--gray-200); border-radius:10px;
  font-family:'Montserrat',sans-serif; font-size:0.85rem; outline:none; transition:border-color 0.3s, box-shadow 0.3s;
  background:white; color:var(--text);
}
.drawer-form input:focus, .drawer-form select:focus, .drawer-form textarea:focus {
  border-color:var(--gold); box-shadow:0 0 0 3px rgba(200,168,78,0.15);
}
.drawer-form textarea { resize:vertical; min-height:60px; }
.drawer-submit {
  width:100%; padding:0.9rem; background:var(--gold); color:white; border:none; border-radius:10px;
  font-family:'Montserrat',sans-serif; font-weight:700; font-size:0.85rem; cursor:pointer;
  transition:all 0.3s; text-transform:uppercase; letter-spacing:0.5px;
}
.drawer-submit:hover { background:#b89540; transform:translateY(-1px); }
.drawer-clear {
  width:100%; padding:0.6rem; background:transparent; color:var(--gray-600); border:1px solid var(--gray-200);
  border-radius:10px; font-family:'Montserrat',sans-serif; font-weight:500; font-size:0.78rem; cursor:pointer; transition:all 0.3s;
}
.drawer-clear:hover { border-color:var(--qma-red); color:var(--qma-red); }

/* PRODUCT CATEGORY SECTIONS */
.product-cat-section { margin-bottom:2.5rem; }
.product-cat-header { display:flex; align-items:center; gap:1rem; margin-bottom:1.2rem; padding-bottom:0.8rem; border-bottom:2px solid var(--gray-200); }
.product-cat-icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:white; font-size:1.1rem; flex-shrink:0; }
.product-cat-header h3 { font-family:'Playfair Display',serif; font-size:1.2rem; font-weight:700; margin:0; }
.product-cat-header p { font-size:0.82rem; color:var(--gray-600); margin:0; }
.product-cat-count { font-size:0.72rem; background:var(--gray-100); padding:0.2rem 0.6rem; border-radius:20px; color:var(--gray-600); font-weight:600; margin-left:auto; white-space:nowrap; }

/* Subcategory labels */
.subcat-label { font-size:0.82rem; font-weight:700; color:var(--qdc-green-dark); text-transform:uppercase; letter-spacing:0.5px; padding:0.6rem 0 0.4rem; margin-top:0.8rem; display:flex; align-items:center; gap:0.4rem; }
.subcat-label i { font-size:0.7rem; opacity:0.5; }

/* QDC Category overview cards */
.qdc-cat-overview { display:flex; flex-wrap:wrap; gap:0.8rem; justify-content:center; margin-top:1.5rem; }
.qdc-cat-card { display:flex; align-items:center; gap:0.7rem; padding:0.7rem 1.2rem; background:white; border:1px solid var(--gray-200); border-radius:12px; text-decoration:none; color:var(--text); transition:all 0.3s; cursor:pointer; }
.qdc-cat-card:hover { border-color:var(--qdc-green); box-shadow:0 4px 20px rgba(0,0,0,0.08); transform:translateY(-2px); }
.qdc-cat-card .qdc-cat-icon { width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:white; font-size:0.85rem; flex-shrink:0; }
.qdc-cat-card span { font-size:0.78rem; font-weight:600; }
.qdc-cat-card.cat-active { border-color:var(--qdc-green); background:var(--qdc-green); color:white; box-shadow:0 6px 25px rgba(107,142,35,0.25); transform:translateY(-3px); }
.qdc-cat-card.cat-active .qdc-cat-icon { box-shadow:0 0 0 3px rgba(255,255,255,0.4); }
.qdc-cat-card.cat-active span { color:white; }

/* SERVICE BADGE */
.service-badge { display:inline-flex; align-items:center; gap:0.5rem; background:var(--gold); color:white; padding:0.5rem 1.2rem; border-radius:30px; font-size:0.75rem; font-weight:800; letter-spacing:1px; text-transform:uppercase; margin-bottom:1rem; }

/* MINI FEATURES */
.mini-feature { display:inline-flex; align-items:center; gap:0.5rem; background:var(--gray-100); padding:0.5rem 1rem; border-radius:10px; font-size:0.8rem; font-weight:600; color:var(--gray-800); }
.mini-feature i { color:var(--qma-green); font-size:0.9rem; }

/* REAL MAP WITH PIN */
.map-real-wrapper { max-width:420px; margin:0 auto; }
.map-real-container { position:relative; display:inline-block; border-radius:20px; overflow:hidden; box-shadow:0 12px 50px rgba(0,0,0,0.15); border:3px solid var(--gray-200); background:white; }
.map-real-photo { width:100%; height:auto; display:block; }

/* Pin on Le Lamentin */
.map-pin-real { position:absolute; transform:translate(-50%, -50%); z-index:2; }
.map-pin-center { width:20px; height:20px; border-radius:50%; background:var(--gold); border:3px solid white; box-shadow:0 2px 12px rgba(200,168,78,0.6); position:relative; z-index:3; }
.map-pin-ring { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:50px; height:50px; border-radius:50%; border:2px solid var(--gold); opacity:0.4; animation:mapRing 2.5s ease-out infinite; z-index:1; }
.map-pin-ring.ring2 { width:80px; height:80px; opacity:0.2; animation-delay:0.5s; }
@keyframes mapRing { 0%{transform:translate(-50%,-50%) scale(0.5);opacity:0.6} 100%{transform:translate(-50%,-50%) scale(1.5);opacity:0} }
.map-pin-tag { position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%); background:var(--gold); color:white; padding:6px 14px; border-radius:8px; font-family:'Montserrat',sans-serif; font-size:10px; font-weight:800; letter-spacing:0.8px; white-space:nowrap; box-shadow:0 4px 15px rgba(200,168,78,0.4); text-align:center; line-height:1.4; z-index:3; }
.map-pin-tag::before { content:''; position:absolute; top:-5px; left:50%; transform:translateX(-50%); border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:6px solid var(--gold); }
.map-pin-tag span { display:block; font-size:7.5px; font-weight:500; opacity:0.85; letter-spacing:0; margin-top:1px; }

/* Legend */
.mq-legend { display:flex; flex-wrap:wrap; gap:0.8rem; justify-content:center; margin-top:1.2rem; }
.mq-legend-item { display:flex; align-items:center; gap:0.5rem; font-size:0.75rem; color:var(--gray-600); font-weight:500; }
.mq-legend-hover { opacity:0.5; font-style:italic; }
.map-legend { margin-top:1.5rem; display:flex; flex-direction:column; gap:0.5rem; align-items:center; }
.map-legend-item { display:flex; align-items:center; gap:0.6rem; font-size:0.78rem; color:rgba(255,255,255,0.7); font-weight:500; }
.legend-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }

/* ARTISAN VISUAL */
.artisan-visual { padding:2rem; }
.artisan-circle { position:relative; width:280px; height:280px; margin:0 auto; }
.artisan-icon-ring { position:absolute; inset:0; animation:spinSlow 30s linear infinite; }
@keyframes spinSlow { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
.artisan-icon-item {
  position:absolute; width:52px; height:52px; border-radius:14px;
  background:white; box-shadow:0 4px 20px rgba(0,0,0,0.1);
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; color:var(--qma-green);
  top:50%; left:50%;
  transform: rotate(calc(var(--i) * 60deg)) translateY(-120px) rotate(calc(var(--i) * -60deg));
  animation:spinSlow 30s linear infinite reverse;
}
.artisan-center {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:100px; height:100px; border-radius:50%;
  background:linear-gradient(135deg, var(--qma-green), var(--qdc-green));
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:white; box-shadow:0 8px 30px rgba(26,107,60,0.3);
}
.artisan-center i { font-size:1.8rem; margin-bottom:0.2rem; }
.artisan-center span { font-size:0.6rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; }

/* DELIVERY OPTION IN DRAWER */
.delivery-toggle { display:flex; align-items:center; gap:0.8rem; padding:0.8rem; background:var(--gray-100); border-radius:10px; cursor:pointer; transition:all 0.3s; border:1px solid var(--gray-200); }
.delivery-toggle:hover { border-color:var(--qma-green); }
.delivery-toggle.active { border-color:var(--qma-green); background:rgba(26,107,60,0.06); }
.delivery-toggle-check { width:22px; height:22px; border-radius:6px; border:2px solid var(--gray-200); display:flex; align-items:center; justify-content:center; transition:all 0.3s; font-size:0.7rem; color:white; flex-shrink:0; }
.delivery-toggle.active .delivery-toggle-check { background:var(--qma-green); border-color:var(--qma-green); }
.delivery-toggle-text { flex:1; }
.delivery-toggle-text strong { display:block; font-size:0.82rem; }
.delivery-toggle-text span { font-size:0.72rem; color:var(--gray-600); }
.delivery-commune-wrap { margin-top:0.5rem; overflow:hidden; max-height:0; transition:max-height 0.4s ease, opacity 0.3s; opacity:0; }
.delivery-commune-wrap.visible { max-height:80px; opacity:1; }

/* SCROLL ANIMATIONS */
@keyframes fadeUp { from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes slideLeft { from{opacity:0;transform:translateX(-50px)} to{opacity:1;transform:translateX(0)} }
@keyframes slideRight { from{opacity:0;transform:translateX(50px)} to{opacity:1;transform:translateX(0)} }
@keyframes scaleIn { from{opacity:0;transform:scale(0.85)} to{opacity:1;transform:scale(1)} }
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(200,168,78,0.4)} 70%{box-shadow:0 0 0 12px rgba(200,168,78,0)} }

.fade-up { animation:fadeUp 0.8s ease forwards; }

/* Scroll-triggered animations */
.anim { opacity:0; transform:translateY(35px); transition:opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1); }
.anim.anim-left { transform:translateX(-40px); }
.anim.anim-right { transform:translateX(40px); }
.anim.anim-scale { transform:scale(0.88); }
.anim.visible { opacity:1; transform:translateY(0) translateX(0) scale(1); }

/* Staggered children */
.anim-stagger > * { opacity:0; transform:translateY(25px); transition:opacity 0.5s ease, transform 0.5s ease; }
.anim-stagger.visible > *:nth-child(1) { transition-delay:0.05s; }
.anim-stagger.visible > *:nth-child(2) { transition-delay:0.12s; }
.anim-stagger.visible > *:nth-child(3) { transition-delay:0.19s; }
.anim-stagger.visible > *:nth-child(4) { transition-delay:0.26s; }
.anim-stagger.visible > *:nth-child(5) { transition-delay:0.33s; }
.anim-stagger.visible > *:nth-child(6) { transition-delay:0.40s; }
.anim-stagger.visible > *:nth-child(7) { transition-delay:0.47s; }
.anim-stagger.visible > *:nth-child(8) { transition-delay:0.54s; }
.anim-stagger.visible > *:nth-child(9) { transition-delay:0.61s; }
.anim-stagger.visible > *:nth-child(10) { transition-delay:0.68s; }
.anim-stagger.visible > * { opacity:1; transform:translateY(0); }

/* Enhanced card hovers */
.card { will-change:transform; }
.card:hover { transform:translateY(-6px); box-shadow:0 16px 48px rgba(0,0,0,0.13); border-color:transparent; }
.card:hover .card-img img { transform:scale(1.1); }

.product-item { will-change:transform; }
.product-item:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,0.1); }

/* Parallax hero overlay */
.hero::after { content:''; position:absolute; bottom:0; left:0; right:0; height:120px; background:linear-gradient(to top, var(--off-white), transparent); z-index:0; }

/* Floating CTA pulse */
.btn-devis-cta { animation:pulse 2.5s infinite; }
.nav-devis-btn { animation:pulse 3s infinite; }

/* Smooth gradient border on product hover */
.product-item:hover { border-color:var(--qma-green); }

/* Map styling */
.map-container { border-radius:20px; overflow:hidden; box-shadow:var(--shadow-lg); border:3px solid rgba(255,255,255,0.2); }
.map-container iframe { display:block; width:100%; height:100%; min-height:350px; border:none; }

/* Improved stat counter animation */
.stat-item { transition:transform 0.3s; }
.stat-item:hover { transform:translateY(-4px); }
.stat-item:hover .stat-number { color:var(--gold); }

/* Breadcrumb arrow */
.breadcrumb a::after { content:'›'; margin:0 0.4rem; }

/* Section title underline animation */
.section-title { position:relative; }

/* Smooth page transitions */
body { animation:fadeIn 0.4s ease; }

/* About card lift */
.about-card { will-change:transform; }
.about-card:hover { transform:translateY(-8px) scale(1.02); }
.about-card:hover .about-icon { transform:scale(1.15); color:var(--gold); }
.about-icon { transition:all 0.3s; }

/* Strength items glow */
.strength-item { transition:all 0.3s; }
.strength-item:hover { background:rgba(255,255,255,0.12); transform:translateX(6px); }

/* Button ripple effect */
.btn { position:relative; overflow:hidden; }
.btn::after { content:''; position:absolute; inset:0; background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.15) 50%, transparent 70%); background-size:200% 100%; opacity:0; transition:opacity 0.3s; }
.btn:hover::after { opacity:1; animation:shimmer 1.5s ease; }

/* Improved CTA band */
.cta-band { position:relative; overflow:hidden; }
.cta-band::before { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background:radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 60%); animation:float 6s ease-in-out infinite; pointer-events:none; }

/* Contact form focus glow */
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { box-shadow:0 0 0 3px rgba(200,168,78,0.25); }

/* Better mobile nav animation */
.nav-links.open { animation:fadeUp 0.3s ease; }

/* Hero logo floating */
.hero-logo-card { animation:float 4s ease-in-out infinite; }
.hero-logo-card:nth-child(2) { animation-delay:0.5s; }

/* WHATSAPP FLOATING BUTTON */
.whatsapp-float { position:fixed; bottom:2rem; left:2rem; z-index:998; width:56px; height:56px; border-radius:50%; background:#25D366; color:white; display:flex; align-items:center; justify-content:center; font-size:1.6rem; text-decoration:none; box-shadow:0 4px 20px rgba(37,211,102,0.4); transition:all 0.3s; }
.whatsapp-float:hover { transform:scale(1.1); box-shadow:0 6px 30px rgba(37,211,102,0.5); }
.wa-tooltip { position:absolute; bottom:calc(100% + 10px); left:0; background:#25D366; color:white; padding:8px 14px; border-radius:10px; font-family:'Montserrat',sans-serif; font-size:0.72rem; font-weight:600; white-space:nowrap; line-height:1.4; opacity:0; transform:translateY(5px); transition:all 0.3s; pointer-events:none; box-shadow:0 4px 15px rgba(0,0,0,0.15); }
.wa-tooltip::after { content:''; position:absolute; bottom:-5px; left:20px; border-left:6px solid transparent; border-right:6px solid transparent; border-top:6px solid #25D366; }
.whatsapp-float:hover .wa-tooltip { opacity:1; transform:translateY(0); }

/* BACK TO TOP */
.back-to-top { position:fixed; bottom:6rem; right:2rem; z-index:997; width:42px; height:42px; border-radius:50%; background:var(--gray-800); color:white; border:none; cursor:pointer; font-size:0.9rem; opacity:0; transform:translateY(20px); transition:all 0.3s; box-shadow:0 4px 15px rgba(0,0,0,0.2); }
.back-to-top.visible { opacity:0.7; transform:translateY(0); }
.back-to-top:hover { opacity:1; transform:translateY(-2px); }

/* PRODUCT SEARCH BAR */
.product-search { max-width:500px; margin:0 auto 2rem; position:relative; }
.product-search input { width:100%; padding:0.9rem 1.2rem 0.9rem 3rem; border:2px solid var(--gray-200); border-radius:50px; font-family:'Montserrat',sans-serif; font-size:0.9rem; outline:none; transition:all 0.3s; background:white; }
.product-search input:focus { border-color:var(--qdc-green); box-shadow:0 0 0 4px rgba(107,142,35,0.12); }
.product-search i { position:absolute; left:1.2rem; top:50%; transform:translateY(-50%); color:var(--gray-600); font-size:0.95rem; }
.product-search .search-count { position:absolute; right:1.2rem; top:50%; transform:translateY(-50%); font-size:0.75rem; color:var(--gray-600); font-weight:600; }

/* AVIS / TESTIMONIALS */
.avis-section { background:var(--gray-100); }
.avis-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:1.5rem; margin-top:2rem; }
.avis-card { background:white; border-radius:16px; padding:1.8rem; border:1px solid var(--gray-200); transition:all 0.3s; position:relative; }
.avis-card:hover { box-shadow:var(--shadow); border-color:transparent; transform:translateY(-3px); }
.avis-stars { color:#f5a623; font-size:0.9rem; margin-bottom:0.8rem; letter-spacing:2px; }
.avis-text { font-size:0.88rem; color:var(--gray-600); line-height:1.7; font-style:italic; margin-bottom:1rem; }
.avis-author { display:flex; align-items:center; gap:0.8rem; }
.avis-avatar { width:38px; height:38px; border-radius:50%; background:var(--qdc-green); color:white; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.85rem; }
.avis-name { font-weight:700; font-size:0.82rem; }
.avis-date { font-size:0.72rem; color:var(--gray-600); }
.avis-google-badge { display:inline-flex; align-items:center; gap:0.5rem; background:white; border:1px solid var(--gray-200); padding:0.6rem 1.2rem; border-radius:50px; font-size:0.82rem; font-weight:600; margin-top:2rem; }
.avis-google-badge img { height:18px; }

/* GALERIE PHOTOS */
.galerie-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:0.8rem; margin-top:2rem; }
.galerie-item { border-radius:12px; overflow:hidden; aspect-ratio:4/3; background:var(--gray-200); position:relative; cursor:pointer; }
.galerie-item img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s; }
.galerie-item:hover img { transform:scale(1.08); }
.galerie-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--gray-600); font-size:0.8rem; gap:0.5rem; height:100%; }
.galerie-placeholder i { font-size:2rem; opacity:0.3; }

/* NAV OPEN/CLOSED BADGE - Gedimat style */
.nav-open-badge { display:flex; align-items:center; gap:6px; padding:6px 14px; border-radius:25px; font-size:0.72rem; font-weight:700; font-family:'Montserrat',sans-serif; letter-spacing:0.2px; white-space:nowrap; transition:all 0.3s; background:white; box-shadow:0 2px 12px rgba(0,0,0,0.08); margin-left:auto; margin-right:1rem; }
.nav-open-badge.is-open { color:#1a8a4a; }
.nav-open-badge.is-closed { color:#c83232; }
.open-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.is-open .open-dot { background:#25D366; animation:dotPulse 2s infinite; }
.is-closed .open-dot { background:#c83232; }
@keyframes dotPulse { 0%,100%{opacity:1;} 50%{opacity:0.4;} }

/* Offset nav */
.nav { top:0 !important; }

/* ==================== */
/* NEW FEATURES CSS     */
/* ==================== */

/* PAGE LOADER */
.page-loader { position:fixed; inset:0; z-index:99999; background:white; display:flex; flex-direction:column; align-items:center; justify-content:center; transition:opacity 0.5s, visibility 0.5s; }
.page-loader.hidden { opacity:0; visibility:hidden; }
.page-loader img { width:110px; border-radius:18px; animation:loaderPulse 1.2s ease-in-out infinite; }
.page-loader-bar { width:120px; height:3px; background:var(--gray-200); border-radius:3px; overflow:hidden; }
.page-loader-bar::after { content:''; display:block; width:40%; height:100%; background:var(--qdc-green); border-radius:3px; animation:loaderSlide 1s ease-in-out infinite; }
@keyframes loaderPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
@keyframes loaderSlide { 0%{transform:translateX(-100%)} 100%{transform:translateX(350%)} }

/* PROMO BANNER */
.promo-banner { background:linear-gradient(90deg, var(--qdc-green-dark), var(--qdc-green), var(--qdc-green-dark)); color:white; overflow:hidden; height:32px; position:fixed; top:28px; left:0; right:0; z-index:1000; display:flex; align-items:center; }
.promo-scroll { display:flex; animation:promoScroll 20s linear infinite; white-space:nowrap; }
.promo-scroll span { padding:0 3rem; font-size:0.75rem; font-weight:700; letter-spacing:0.5px; display:inline-flex; align-items:center; gap:0.5rem; }
.promo-scroll i { font-size:0.8rem; }
@keyframes promoScroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* Adjust nav & page for promo banner */

/* DARK MODE */

/* FAQ */
.faq-list { max-width:750px; margin:0 auto; }
.faq-item { background:white; border:1px solid var(--gray-200); border-radius:12px; margin-bottom:0.8rem; overflow:hidden; transition:all 0.3s; }
.faq-item:hover { border-color:var(--qdc-green); }
.faq-question { padding:1.2rem 1.5rem; cursor:pointer; display:flex; align-items:center; justify-content:space-between; font-weight:600; font-size:0.9rem; }
.faq-question i { transition:transform 0.3s; color:var(--qdc-green); font-size:0.8rem; }
.faq-item.open .faq-question i { transform:rotate(180deg); }
.faq-answer { max-height:0; overflow:hidden; transition:max-height 0.4s ease, padding 0.3s; padding:0 1.5rem; }
.faq-item.open .faq-answer { max-height:300px; padding:0 1.5rem 1.2rem; }
.faq-answer p { font-size:0.85rem; color:var(--gray-600); line-height:1.7; }

/* FAVORIS HEART */
.fav-btn { position:absolute; top:8px; right:8px; z-index:3; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.85); border:none; cursor:pointer; font-size:0.85rem; color:#ccc; display:flex; align-items:center; justify-content:center; transition:all 0.3s; box-shadow:0 2px 8px rgba(0,0,0,0.1); }
.fav-btn:hover { color:#e74c3c; transform:scale(1.15); }
.fav-btn.active { color:#e74c3c; }
.fav-btn.active i { animation:heartBeat 0.4s ease; }
@keyframes heartBeat { 0%{transform:scale(1)} 30%{transform:scale(1.3)} 60%{transform:scale(0.9)} 100%{transform:scale(1)} }
.product-item-img { position:relative; }

/* LIVRAISON ZONES */
.livraison-zones { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.5rem; }
.zone-card { background:white; border-radius:14px; padding:1.5rem; text-align:center; border:2px solid var(--gray-200); transition:all 0.3s; }
.zone-card:hover { border-color:var(--qdc-green); transform:translateY(-3px); box-shadow:var(--shadow); }
.zone-card .zone-icon { font-size:2rem; margin-bottom:0.5rem; }
.zone-card h4 { font-size:0.95rem; margin-bottom:0.3rem; }
.zone-card .zone-price { font-family:'Playfair Display',serif; font-size:1.4rem; font-weight:700; color:var(--qdc-green); margin:0.5rem 0; }
.zone-card .zone-communes { font-size:0.75rem; color:var(--gray-600); line-height:1.6; }

/* RAPPEL MODAL */
.rappel-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:10000; display:none; align-items:center; justify-content:center; backdrop-filter:blur(4px); }
.rappel-modal-overlay.active { display:flex; }
.rappel-modal { background:white; border-radius:20px; padding:2.5rem; max-width:400px; width:90%; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,0.3); animation:fadeUp 0.4s ease; }
.rappel-modal h3 { font-family:'Playfair Display',serif; margin-bottom:0.5rem; }
.rappel-modal p { font-size:0.85rem; color:var(--gray-600); margin-bottom:1.5rem; }
.rappel-modal input { width:100%; padding:0.8rem 1rem; border:2px solid var(--gray-200); border-radius:10px; font-family:'Montserrat',sans-serif; font-size:0.9rem; margin-bottom:0.8rem; outline:none; }
.rappel-modal input:focus { border-color:var(--qdc-green); }

/* WELCOME POPUP */
.welcome-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:99998; display:none; align-items:center; justify-content:center; backdrop-filter:blur(6px); }
.welcome-overlay.active { display:flex; }
.welcome-popup { background:white; border-radius:24px; max-width:500px; width:92%; overflow:hidden; box-shadow:0 24px 80px rgba(0,0,0,0.3); animation:fadeUp 0.5s ease; }
.welcome-header { background:linear-gradient(135deg, var(--qdc-green-dark), var(--qma-green)); padding:2rem; text-align:center; color:white; }
.welcome-header img { height:50px; border-radius:10px; margin:0 0.5rem; }
.welcome-body { padding:2rem; text-align:center; }
.welcome-body p { font-size:0.9rem; color:var(--gray-600); margin-bottom:1.5rem; line-height:1.7; }
.welcome-btns { display:flex; gap:0.8rem; justify-content:center; flex-wrap:wrap; }
.welcome-close { background:none; border:none; font-size:0.8rem; color:var(--gray-600); cursor:pointer; margin-top:1rem; padding:0.5rem; }
.welcome-close:hover { color:var(--text); }

/* QR CODE */
.qr-section { text-align:center; }
.qr-code-box { display:inline-block; background:white; padding:1.5rem; border-radius:16px; box-shadow:var(--shadow); }
.qr-code-box canvas { display:block; }

/* ==================== */
/* BATCH 2 FEATURES     */
/* ==================== */

/* CREOLE TOUCH */
.creole-badge { display:inline-flex; align-items:center; gap:0.5rem; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.2); padding:0.6rem 1.2rem; border-radius:30px; font-size:0.82rem; font-weight:600; color:rgba(255,255,255,0.9); margin-top:1rem; font-style:italic; letter-spacing:0.3px; }

/* PARTNERS SECTION */
.partners-grid { display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:center; align-items:center; margin-top:2rem; }
.partner-logo { width:120px; height:70px; background:white; border-radius:12px; display:flex; align-items:center; justify-content:center; border:1px solid var(--gray-200); padding:0.8rem; transition:all 0.3s; filter:grayscale(0.5); opacity:0.7; }
.partner-logo:hover { filter:grayscale(0); opacity:1; transform:translateY(-3px); box-shadow:var(--shadow); }
.partner-logo span { font-family:'Montserrat',sans-serif; font-size:0.65rem; font-weight:700; color:var(--gray-600); text-align:center; line-height:1.3; text-transform:uppercase; letter-spacing:0.5px; }

/* COUNTER ANIMATION */
.counter-target { transition:color 0.3s; }

/* ==================== */
/* RESPONSIVE MOBILE    */
/* ==================== */

/* AVIS SLIDER */
.avis-slider-wrap { overflow:hidden; position:relative; }
.avis-slider { display:flex; transition:transform 0.5s ease; }
.avis-slider .avis-card { min-width:320px; max-width:320px; margin:0 0.6rem; flex-shrink:0; }
.avis-slider-controls { display:flex; justify-content:center; gap:0.8rem; margin-top:1.2rem; }
.avis-slider-btn { width:38px; height:38px; border-radius:50%; border:2px solid var(--gray-200); background:white; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--gray-600); font-size:0.85rem; transition:all 0.3s; }
.avis-slider-btn:hover { border-color:var(--qdc-green); color:var(--qdc-green); }
.avis-slider-dots { display:flex; align-items:center; gap:6px; }
.avis-slider-dot { width:8px; height:8px; border-radius:50%; background:var(--gray-200); transition:all 0.3s; }
.avis-slider-dot.active { background:var(--qdc-green); width:20px; border-radius:4px; }

/* HOMEPAGE MAP SECTION */
.home-map-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center; }
.home-map-infos { display:flex; flex-direction:column; gap:1rem; }
.home-map-info { display:flex; align-items:flex-start; gap:1rem; padding:1rem; background:white; border-radius:12px; border:1px solid var(--gray-200); transition:all 0.3s; }
.home-map-info:hover { border-color:var(--qdc-green); box-shadow:var(--shadow); }
.home-map-info i { font-size:1.3rem; color:var(--qdc-green); margin-top:0.2rem; }
.home-map-info h4 { font-size:0.9rem; margin-bottom:0.2rem; }
.home-map-info p { font-size:0.8rem; color:var(--gray-600); }

/* Badge mobile */

/* Clickable emails in contact */
.contact-item a { position:relative; z-index:2; cursor:pointer; transition:all 0.2s; }
.contact-item a:hover { color:white !important; text-decoration:underline !important; }
.contact-item span { opacity:1; }

/* SEASONAL EVENT BANNER */
.seasonal-banner { position:fixed; top:65px; left:50%; transform:translateX(-50%); z-index:997; animation:seasonSlide 0.6s ease; max-width:600px; width:92%; }
.seasonal-inner { display:flex; align-items:center; gap:1rem; padding:0.8rem 1.2rem; background:white; border-radius:16px; box-shadow:0 8px 40px rgba(0,0,0,0.15); border-left:4px solid var(--event-color); }
.seasonal-icon { font-size:1.8rem; flex-shrink:0; }
.seasonal-text { flex:1; }
.seasonal-text strong { display:block; font-size:0.88rem; color:var(--event-color); margin-bottom:2px; }
.seasonal-text span { font-size:0.75rem; color:var(--gray-600); line-height:1.5; }
.seasonal-close { background:none; border:none; cursor:pointer; color:var(--gray-600); font-size:0.8rem; padding:4px; opacity:0.5; transition:opacity 0.2s; flex-shrink:0; }
.seasonal-close:hover { opacity:1; }
@keyframes seasonSlide { from{opacity:0;transform:translateX(-50%) translateY(-20px);} to{opacity:1;transform:translateX(-50%) translateY(0);} }

/* PARTICLE CANVAS */
.particle-canvas { position:fixed; inset:0; z-index:99997; pointer-events:none; }


/* ==========================================
   RESPONSIVE — TABLET (max 900px)
   ========================================== */
@media(max-width:900px) {
  .contact-grid, .grid-2 { grid-template-columns:1fr; }
  .grid-3 { grid-template-columns:1fr 1fr; }
  .home-map-grid { grid-template-columns:1fr; }
}

/* ==========================================
   RESPONSIVE — MOBILE (max 768px)
   ========================================== */
@media(max-width:768px) {

  /* === NAV === */
  .nav-links { display:none; }
  .hamburger { display:block; }
  .nav-links.open {
    display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0;
    background:white; padding:1rem; box-shadow:0 10px 40px rgba(0,0,0,0.1); gap:0.3rem;
    animation:fadeUp 0.3s ease; z-index:100;
  }
  .nav-links.open a { padding:0.8rem 1rem; font-size:0.85rem; border-radius:8px; }
  .nav-links.open a:hover, .nav-links.open a.active { background:var(--qdc-green); color:white; }
  .nav-inner { padding:0.5rem 1rem; }
  .nav-brand img { height:32px; }
  .nav-brand span { display:none; }
  .nav-open-badge { font-size:0.62rem; padding:4px 10px; margin-left:auto; margin-right:0.8rem; }

  /* === HERO === */
  .hero { min-height:auto; padding:4.5rem 1.5rem 2.5rem; }
  .hero h1 { font-size:1.4rem; line-height:1.3; margin-bottom:0.5rem; }
  .hero p { font-size:0.8rem; line-height:1.6; margin-bottom:1.5rem; }
  .hero-btns { flex-direction:column; align-items:stretch; gap:0.6rem; }
  .hero-btns .btn { justify-content:center; font-size:0.82rem; padding:0.9rem 1.5rem; }
  .hero-logos { gap:0.8rem; margin-bottom:1.5rem; }
  .hero-logo-card { width:65px; height:65px; border-radius:14px; }
  .hero-logo-card img { width:45px; }
  .creole-badge { font-size:0.7rem; padding:0.4rem 1rem; margin-top:0.8rem; }

  /* === STORE SELECTOR === */
  .store-selector { padding:1.5rem 1rem; }
  .selector-question { font-size:1rem; margin-bottom:1.2rem; }
  .selector-cards { flex-direction:column; gap:0.8rem; }
  .selector-card { min-width:unset; padding:1.2rem 1rem; border-radius:16px; }
  .selector-card img { width:55px; }
  .selector-card h3 { font-size:0.9rem; }
  .selector-card p { font-size:0.72rem; line-height:1.5; }
  .selector-skip { font-size:0.78rem; margin-top:0.8rem; }

  /* === SECTIONS === */
  .section { padding:2.5rem 1.2rem; }
  .section-inner { max-width:100%; }
  .section-title { font-size:1.3rem; }
  .section-sub { font-size:0.82rem; }
  .divider { width:40px; margin-bottom:1rem; }

  /* === PAGE HEADERS === */
  .page-header { padding:6rem 1.2rem 2rem; }
  .page-header h1 { font-size:1.5rem; }
  .page-header p { font-size:0.85rem; }
  .breadcrumb { font-size:0.7rem; }

  /* === CARDS === */
  .card { border-radius:14px; }
  .card-img { height:150px; }
  .card-body h4 { font-size:1rem; }

  /* === PRODUCT CATALOG === */
  .qdc-cat-overview { gap:0.5rem; }
  .qdc-cat-card { padding:0.5rem 0.8rem; }
  .qdc-cat-card .qdc-cat-icon { width:30px; height:30px; font-size:0.75rem; border-radius:7px; }
  .qdc-cat-card span { font-size:0.68rem; }
  .product-search { margin:0 0 1.5rem; }
  .product-search input { font-size:0.82rem; padding:0.7rem 1rem 0.7rem 2.5rem; }
  .product-search i { left:1rem; font-size:0.85rem; }

  .product-cat-header { flex-wrap:wrap; gap:0.6rem; }
  .product-cat-header h3 { font-size:1rem; }
  .product-cat-icon { width:40px; height:40px; font-size:0.95rem; }
  .product-cat-count { font-size:0.65rem; }

  .product-grid { grid-template-columns:1fr 1fr; gap:0.7rem; }
  .product-item { border-radius:12px; }
  .product-item-img { height:110px; }
  .product-item-body { padding:0.7rem; }
  .product-item-body h4 { font-size:0.78rem; line-height:1.3; }
  .product-item-body .ref { font-size:0.65rem; }
  .product-item-body .desc { font-size:0.7rem; margin-bottom:0.6rem; line-height:1.4; }
  .product-actions { flex-direction:column; gap:0.4rem; }
  .qty-ctrl button { width:26px; height:26px; font-size:0.8rem; }
  .qty-ctrl input { width:30px; height:26px; font-size:0.75rem; }
  .btn-add-devis { font-size:0.65rem; padding:0.35rem 0.6rem; }
  .fav-btn { width:28px; height:28px; font-size:0.75rem; }

  /* === CTA BANDS === */
  .cta-band { padding:1.5rem 1rem; }
  .cta-band h3 { font-size:1rem; }
  .btn-devis-cta { font-size:0.8rem; padding:0.7rem 1.5rem; }

  /* === AVIS SLIDER === */
  .avis-slider .avis-card { min-width:250px; max-width:250px; }
  .avis-card { padding:1.2rem; }
  .avis-text { font-size:0.8rem; }
  .avis-author { gap:0.5rem; }
  .avis-avatar { width:32px; height:32px; font-size:0.75rem; }
  .avis-name { font-size:0.75rem; }
  .avis-date { font-size:0.65rem; }
  .avis-google-badge { font-size:0.68rem; }

  /* === LIVRAISON ZONES === */
  .livraison-zones { grid-template-columns:1fr; gap:0.8rem; }
  .zone-card { padding:1.2rem; }
  .zone-price { font-size:1.1rem; }
  .zone-communes { font-size:0.7rem; }

  /* === MAP SECTION === */
  .home-map-grid { gap:1.5rem; }
  .home-map-info { padding:0.8rem; gap:0.8rem; }
  .home-map-info i { font-size:1rem; }
  .home-map-info h4 { font-size:0.82rem; }
  .home-map-info p { font-size:0.75rem; }

  /* === INSTAGRAM === */
  .grid-2[style*="max-width:700px"] { max-width:100% !important; gap:1rem !important; }

  /* === PARTNERS === */
  .partners-grid { gap:0.8rem; }
  .partner-logo { width:85px; height:50px; }
  .partner-logo span { font-size:0.55rem; }

  /* === STRENGTHS (Pourquoi choisir) === */
  .strengths-grid { grid-template-columns:1fr !important; gap:0.8rem; }
  .strength-item { padding:1rem; }
  .strength-icon { width:38px; height:38px; font-size:0.9rem; }
  .strength-item h5 { font-size:0.82rem; }
  .strength-item p { font-size:0.75rem; }

  /* === ABOUT === */
  .about-grid { grid-template-columns:1fr !important; }
  .about-card { padding:1.5rem; }
  .about-icon { font-size:1.5rem; }

  /* === FAQ === */
  .faq-question { font-size:0.82rem; padding:1rem; }
  .faq-answer p { font-size:0.78rem; }

  /* === SERVICES === */
  .grid-3 { grid-template-columns:1fr; gap:1rem; }
  .service-badge { font-size:0.68rem; padding:0.4rem 1rem; }
  .mini-feature { font-size:0.78rem; }

  /* === CONTACT === */
  .contact-form { padding:1.5rem; border-radius:14px; }

  /* === FOOTER === */
  .footer { padding:2rem 1rem; }
  .footer-logos img { height:35px; }
  .social-links { gap:0.4rem; flex-wrap:wrap; }
  .social-link { font-size:0.58rem; padding:0 8px; height:34px; }

  /* === FLOATING BUTTONS — simplified === */
  .floating-devis-btn { width:46px; height:46px; font-size:0.95rem; bottom:1rem; right:1rem; }
  .whatsapp-float { width:46px; height:46px; font-size:1.2rem; bottom:1rem; left:1rem; }
  .wa-tooltip { display:none; }
  .back-to-top { width:32px; height:32px; font-size:0.7rem; bottom:4rem; right:1rem; }
  /* Hide rappel button on mobile — WhatsApp is enough */
  .floating-devis-btn[style*="right:5rem"] { display:none !important; }

  /* === DRAWER === */
  .devis-drawer { width:100%; max-width:100vw; }

  /* === SEASONAL === */
  .seasonal-banner { top:55px; max-width:95%; }
  .seasonal-icon { font-size:1.4rem; }
  .seasonal-text strong { font-size:0.8rem; }
  .seasonal-text span { font-size:0.68rem; }
  .seasonal-inner { padding:0.7rem 1rem; gap:0.8rem; }

  /* === MAP PIN === */
  .map-real-container { border-radius:14px; }
  .map-pin-tag { font-size:7px; padding:4px 8px; }
  .map-pin-center { width:16px; height:16px; }
  .map-pin-ring { width:40px; height:40px; }
  .map-pin-ring.ring2 { width:60px; height:60px; }

  /* === GALERIE === */
  .galerie-grid { grid-template-columns:1fr 1fr; gap:0.5rem; }

  /* === STATS === */
  .stats-grid { grid-template-columns:1fr 1fr; gap:1rem; padding:0; }
  .stat-number { font-size:1.2rem; }
  .stat-label { font-size:0.65rem; }

  /* === LOADER === */
  .page-loader img { width:80px; }

  /* === WELCOME POPUP === */
  .welcome-popup { max-width:90vw; }
  .welcome-header { padding:1.5rem; }
  .welcome-header img { height:40px; }
  .welcome-header h2 { font-size:1.1rem; }
  .welcome-body { padding:1.5rem; }
  .welcome-body p { font-size:0.82rem; }
  .welcome-btns { flex-direction:column; gap:0.5rem; }
  .welcome-btns .btn { font-size:0.78rem; }

  /* === RAPPEL MODAL === */
  .rappel-modal { padding:2rem; max-width:90vw; }
}

/* ==========================================
   RESPONSIVE — SMALL PHONE (max 400px)
   ========================================== */
@media(max-width:400px) {
  .hero h1 { font-size:1.2rem; }
  .hero p { font-size:0.75rem; }
  .product-grid { grid-template-columns:1fr; }
  .qdc-cat-overview { gap:0.4rem; }
  .qdc-cat-card { padding:0.4rem 0.6rem; }
  .qdc-cat-card span { font-size:0.6rem; }
  .qdc-cat-card .qdc-cat-icon { width:24px; height:24px; font-size:0.6rem; }
  .nav-brand img { height:28px; }
  .nav-open-badge { font-size:0.55rem; padding:3px 7px; }
  .section-title { font-size:1.05rem; }
  .galerie-grid { grid-template-columns:1fr; }
  .avis-slider .avis-card { min-width:220px; max-width:220px; }
  .selector-card img { width:45px; }
  .selector-question { font-size:0.9rem; }
}