/* ============================================================
   CBD Shop Paris — site multi-pages · DA « Bulle » (Olipop)
   Palette crème #FFFBF2 · orange #E8622C · encre #33302B
   ============================================================ */
:root{
  /* KRYPTONIC (28/07) — shell CBDSP CONSERVÉ (fond crème, cartes, typo, structure : inchangés).
     Seul le THÈME est transvasé : jaune #efc100 (le jaune d'Allan) = APLATS (bouton/badge/filet)
     avec le navy #030E16 écrit dessus. Source : marla-data/KRYPTONIC_recensement_et_grille.md §6.
     ⚠ --forest RESTE navy : dans ce shell c'est le token TEXTE (titres, prix, PDP, footer) —
     le passer en jaune donne 1,5:1 sur crème (illisible). Les SURFACES qui l'utilisaient comme
     fond sont passées en jaune une par une dans le bloc KRYPTONIC en fin de fichier. */
  --bg:#F6F1E7; --bg2:#EFE7D6; --card:#FBF8F1; --ink:#14231A; --soft:#5E6B5E;
  --accent:#efc100; --accent-d:#030E16; --line:#E3DCCC; --line2:#D8CFBB;
  --forest:#030E16; --forest-2:#0D2129; --rust:#C0603A; --gold:#C49A2B;
  --lime:#efc100; --lime-d:#d4ab00; --green-soft:#FBF0CC; --mint:#FBF0CC; --mol:#efc100; /* CBD+ */
  --cream:#F6F1E7; --cream2:#FBF8F1; /* crème canonique olipop (manquait → bloc RETRAIT SIGNATURE + labels boutons étaient morts) */
  --r:18px; --r-lg:24px; --nav-h:70px; --wrap:1120px;
  --shadow:0 18px 44px -22px rgba(20,48,31,.5); --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{font-family:'DM Sans',system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:clip}
h1,h2,h3,h4{font-family:'DM Serif Display',Georgia,serif;font-weight:400;letter-spacing:-.01em;line-height:1.08}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.sr{position:absolute;left:-9999px}
button{font-family:inherit;cursor:pointer}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:13px 24px;border-radius:999px;font-weight:800;font-size:14.5px;border:0;white-space:nowrap;transition:transform .16s var(--ease),background .16s,box-shadow .16s}
.btn-primary{background:var(--forest);color:#F6F1E7;box-shadow:0 12px 26px -12px rgba(20,48,31,.55)}
.btn-primary:hover{background:var(--forest-2);transform:translateY(-2px)}
.btn-ghost{background:var(--card);color:var(--ink);box-shadow:0 6px 16px rgba(51,48,43,.08)}
.btn-ghost:hover{transform:translateY(-2px)}
.btn:disabled{background:var(--bg2);color:var(--soft);box-shadow:none;cursor:not-allowed;transform:none!important}
.demobar{background:var(--ink);color:var(--bg);text-align:center;font-size:11.5px;font-weight:700;padding:6px 14px;letter-spacing:.02em}

/* ---------- navbar — UNE nav, pas de double système ----------
   Desktop (>900px) : liens plats dans la barre + panier.
   Mobile  (≤900px) : logo + burger -> menu-drawer (bottom sheet, seule nav mobile). */
.nav{position:sticky;top:0;z-index:100;background:rgba(246,241,231,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--wrap);margin:0 auto;height:var(--nav-h);padding:0 22px;display:flex;align-items:center;gap:20px}
.nav-logo img{height:26px;width:auto}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-link{padding:9px 14px;border-radius:999px;font-weight:700;font-size:14px;color:var(--ink)}
.nav-link:hover{background:var(--green-soft)}
/* logo + nav groupés à gauche ; compte + panier poussés à droite */
.nav-right{display:flex;align-items:center;gap:10px;margin-left:auto}
.nav-account{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:999px;font-weight:700;font-size:14px;color:var(--ink);border:1.5px solid var(--line2,#eadfce)}
.nav-account:hover{background:var(--green-soft)}
.nav-cart{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:var(--bg);padding:9px 16px;border-radius:999px;font-weight:800;font-size:14px;flex:none}
.nav-cart .cc{background:var(--lime);color:var(--ink);border-radius:999px;min-width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;padding:0 5px}
.nav-burger{display:none;margin-left:auto;background:none;border:0;color:var(--ink);padding:8px}
@media(max-width:900px){
  /* mobile : la nav plate se cache, le burger ouvre le menu-drawer (seule nav mobile) */
  .nav-links{display:none}
  .nav-account{display:none}
  .nav-burger{display:inline-flex;margin-left:auto}
  .nav-right{margin-left:0}
  /* mobile : le panier reste la bulle flottante (cart-fab), pas de doublon dans la barre */
  .nav-cart{display:none}
}

/* ---------- ruban catégories (nav par type, scroll horizontal) ---------- */
.catnav{display:none}
.catnav-in{max-width:var(--wrap);margin:0 auto;display:flex;gap:7px;overflow-x:auto;padding:10px 22px;scrollbar-width:none}
.catnav-in::-webkit-scrollbar{display:none}
.catnav-in a{flex:none;min-height:38px;display:inline-flex;align-items:center;gap:5px;padding:8px 15px;border-radius:999px;font-weight:800;font-size:13.5px;background:var(--bg2);white-space:nowrap;transition:.15s}
.catnav-in a:hover{background:var(--line2)}
.catnav-in a.on{background:var(--lime);color:var(--ink)}

/* ---------- hero ---------- */
/* hero : vraie photo de champ de chanvre (Unsplash, licence libre usage commercial) en fond
   plein cadre + simple overlay teinte jaune par-dessus (retour Allan 16/07 : "fait juste en
   overlay teinte le jaune sur la photo" — pas de vignette/incrustation, un aplat translucide
   uni). .hero-bgphoto reste prêt à devenir un <video> si Allan envoie un fichier vidéo réel. */
/* test "cercle coloré" à la Bulle/Olipop (retour Allan 17/07) : fond de page neutre,
   la couleur vit dans le cercle produit — inverse de la version pleine-page verte. */
.hero{position:relative;padding:64px 0 92px;overflow:hidden;background:var(--bg)}

/* pointillé + ondulation (retour Allan 16/07 : "même effet que le hero du karpe") */
.hero-dots{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(58,50,20,.28) 1.4px,transparent 1.6px);
  background-size:24px 24px;animation:heroDotsPan 14s linear infinite}
@keyframes heroDotsPan{0%{background-position:0 0}100%{background-position:24px 24px}}
.hero-wave{position:absolute;left:0;right:0;bottom:-1px;z-index:2;line-height:0;pointer-events:none}
.hero-wave svg{display:block;width:200%;height:64px;animation:heroWaveMove 16s linear infinite}
@keyframes heroWaveMove{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.hero-dots,.hero-wave svg{animation:none}}
@keyframes heroKenBurns{0%{transform:scale(1.04) translate(0,0)}100%{transform:scale(1.14) translate(-1.2%,-1%)}}
@media(prefers-reduced-motion:reduce){.hero-bgphoto{animation:none}}

/* card glass blanche derrière le texte (retour Allan 16/07) — lisibilité sur la photo de champ */
.hero-glass{background:rgba(255,255,255,.55);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border:1px solid rgba(255,255,255,.6);border-radius:28px;padding:34px 36px;box-shadow:0 18px 44px rgba(58,47,10,.16)}
@media(max-width:820px){.hero-glass{padding:24px 22px;border-radius:22px}}
.hero #heroFx{position:absolute;inset:0;z-index:2;pointer-events:none}
.hero .wrap{position:relative;z-index:3}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
.hero .kick{display:inline-block;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 15px;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--rust);box-shadow:0 6px 18px rgba(51,48,43,.06);margin-bottom:14px}
.hero h1{font-size:clamp(38px,6vw,68px);color:var(--ink)}
.hero h1 span{color:var(--rust)}
.hero p{color:var(--soft);font-size:16px;margin:14px 0 22px;max-width:440px;font-weight:600}
.hero .cta{display:flex;gap:10px;flex-wrap:wrap}
.hero-art{position:relative;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 38% 34%,var(--lime),var(--accent) 78%);box-shadow:0 22px 55px rgba(20,122,69,.30);display:flex;align-items:center;justify-content:center;max-width:420px;margin:0 auto;animation:heroFloat 5.5s ease-in-out infinite;will-change:transform}
.hero-art img{max-width:78%;max-height:78%;object-fit:contain;filter:drop-shadow(0 18px 26px rgba(51,48,43,.3));will-change:transform}
@keyframes heroFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-16px) rotate(1.2deg)}}
@media(prefers-reduced-motion:reduce){.hero-art{animation:none}}
/* cercle coloré remis sur mobile (retour Allan 17/07) — plus petit, centré, sous la carte texte */
@media(max-width:820px){.hero-grid{grid-template-columns:1fr}.hero-art{max-width:260px;margin-top:26px}}

/* rayons curatés (homepage — 5-6 max, brief 16/07) */
.rayons-curated{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
@media(max-width:900px){.rayons-curated{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.rayons-curated{grid-template-columns:repeat(2,1fr)}}

/* sections vedettes (Meilleures ventes / Promos) — format validé Allan, poussé plus loin
   côté couleur/layout (retour 17/07 : « le Mis en avant est bon, travaille la couleur pour
   qu'il ressorte ») : chaque bloc = bande teintée + titre coloré + pill « Voir tout ». */
.featured-sec{margin:28px 0;padding:22px 20px 10px;border-radius:var(--r-lg);border:1px solid var(--line)}
.featured-sec.best{background:linear-gradient(180deg,#eaf6ee,rgba(234,246,238,0));border-color:#cfe9d8}
.featured-sec.promo{background:linear-gradient(180deg,#fdecec,rgba(253,236,236,0));border-color:#f3d2d2}
.featured-sec .chead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.featured-sec .chead h2{display:flex;align-items:center;gap:9px;font-size:clamp(21px,3.4vw,27px)}
.featured-sec.best .chead h2{color:var(--accent-d)}
.featured-sec.promo .chead h2{color:#c0343a}
.featured-sec .chead a{color:var(--accent-d);font-weight:800;font-size:13px;white-space:nowrap;background:#fff;border:1.5px solid var(--line2);border-radius:999px;padding:7px 14px;transition:transform .15s var(--ease),border-color .2s}
.featured-sec .chead a:hover{transform:translateY(-2px);border-color:var(--accent)}
.featured-sec.promo .chead a{color:#c0343a;border-color:#f3d2d2}
.featured-sec.promo .chead a:hover{border-color:#c0343a}

/* bloc explication en bas de page — "le bas de page EXPLIQUE" (brief pt.5) */
.explainer{background:var(--ink);color:var(--bg);padding:64px 0 70px;margin-top:20px}
.explainer .head{text-align:center;max-width:640px;margin:0 auto 40px}
.explainer .head span{color:var(--lime);font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.explainer .head h2{font-size:clamp(24px,3.6vw,36px);margin-top:8px}
.explainer-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 40px;max-width:900px;margin:0 auto}
@media(max-width:720px){.explainer-grid{grid-template-columns:1fr}}
.explainer-item h3{font-size:16px;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.explainer-item p{font-size:13.5px;color:rgba(255,251,242,.65);line-height:1.65;font-weight:500}

/* menu mobile plein écran, pas une petite dropdown (brief pt.10) */
.menu-drawer{max-height:100vh;height:100vh;border-radius:0}

/* zoom produit / bannière rayon — CTA argumenté, réutilisable par rayon (retour Allan 16/07 :
   même traitement que le hero, rond blanc autour du produit sur fond vert ; "tu peux faire une
   bannière rayon vapes etc" → composant générique .spotlight, un par rayon possible). */
.spotlight{background:linear-gradient(135deg,#1c4a2e,#0f3320);border-radius:var(--r-lg);margin:40px 0;overflow:hidden}
.spotlight-grid{display:grid;grid-template-columns:.85fr 1.15fr;align-items:stretch}
@media(max-width:760px){.spotlight-grid{grid-template-columns:1fr}}
.spotlight-media{display:flex;align-items:center;justify-content:center;padding:34px;min-height:280px}
.spotlight-media .halo{position:relative;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 42%,#fffdf7,#efe8d6);box-shadow:0 20px 50px rgba(0,0,0,.28);display:flex;align-items:center;justify-content:center;width:100%;max-width:280px;animation:heroFloat 5.5s ease-in-out infinite}
.spotlight-media img{max-width:76%;max-height:76%;object-fit:contain;filter:drop-shadow(0 16px 22px rgba(51,48,43,.3))}
@media(prefers-reduced-motion:reduce){.spotlight-media .halo{animation:none}}
.spotlight-body{padding:36px 40px;color:#fff}
.spotlight-body span.kick{color:var(--lime);font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.spotlight-body h2{color:#fff;font-size:clamp(22px,3.2vw,30px);margin:8px 0 12px}
.spotlight-body p{color:rgba(255,251,242,.75);font-size:14.5px;line-height:1.7;font-weight:500;max-width:520px}
.spotlight-foot{display:flex;align-items:center;gap:16px;margin-top:20px;flex-wrap:wrap}
.spotlight-price{color:#fff;font-size:20px;font-weight:800}

/* FAQ — accordéon informatif, favorise la lecture/engagement avant conversion */
.faq{margin:44px 0}
.faq-list{max-width:760px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;text-align:left;background:none;border:0;padding:18px 4px;font-size:15.5px;font-weight:700;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--ink);font-family:inherit}
.faq-q .x{transition:transform .2s var(--ease);flex:0 0 auto;color:var(--accent-d);font-size:20px;font-weight:800}
.faq-item.on .faq-q .x{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s var(--ease)}
.faq-a p{padding:0 4px 18px;color:var(--soft);font-size:14px;line-height:1.7;font-weight:500;max-width:640px}
.faq-item.on .faq-a{max-height:220px}

/* ---------- sections ---------- */
.sec{padding:44px 0}
.sec-h{font-size:clamp(24px,4vw,34px);margin-bottom:6px}
.sec-sub{color:var(--soft);font-weight:500;margin-bottom:22px}
.rayons{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.rayon{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;min-height:150px;display:flex;flex-direction:column;transition:transform .16s var(--ease),box-shadow .16s;overflow:hidden}
.rayon:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.rayon .emo{font-size:30px}
.rayon h3{font-size:20px;margin:10px 0 4px}
.rayon .n{margin-top:auto;align-self:flex-start;background:var(--bg2);border-radius:999px;padding:6px 13px;font-size:12px;font-weight:800}
.rayon .subs{font-size:12px;color:var(--soft);font-weight:600;margin-top:8px;line-height:1.5}

/* ---------- homepage vendeuse : bandeau confiance défilant / pitch / CTA final ---------- */
/* bandeau défilant en continu, en haut de page (retour Allan 16/07 — remplace les 4 bandeaux
   empilés par un ticker, plus vivant, une seule version desktop+mobile) */
.ticker{background:var(--ink);overflow:hidden;white-space:nowrap;padding:13px 0}
.ticker-track{display:inline-flex;animation:tickerScroll 65s linear infinite}
.ticker-track span{display:inline-flex;align-items:center;color:#fff;font-weight:700;font-size:13.5px;padding:0 26px;white-space:nowrap;text-shadow:2px 0 5px rgba(255,255,255,.16),5px 0 9px rgba(255,255,255,.07)}
.ticker-track span:not(:last-child)::after{content:'';position:relative}
@keyframes tickerScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none;flex-wrap:wrap}}
.ticker:hover .ticker-track{animation-play-state:paused}
/* placé avant "Nos rayons", légèrement de travers (retour Allan) — déborde un peu de chaque
   côté pour que la rotation ne laisse pas de vide aux bords */
.ticker-tilt{width:108%;margin-left:-4%;transform:rotate(-4deg);margin-top:60px;margin-bottom:60px;box-shadow:0 10px 24px rgba(0,0,0,.16)}
@media(max-width:600px){.ticker-tilt{margin-top:46px;margin-bottom:46px}}
.pitch{padding:50px 0 10px}
.pitch-head{text-align:center;max-width:560px;margin:0 auto 30px}
.pitch-head h2{font-size:clamp(22px,3.2vw,30px)}
.pitch-head p{color:var(--soft);font-weight:500;margin-top:8px;font-size:14px}
/* 2x2, belle illu (badge rond dégradé) + phrase courte (retour Allan 16/07) */
.pitch-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:640px;margin:0 auto}
@media(max-width:560px){.pitch-grid{gap:12px}}
.pitch-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;text-align:center}
.pitch-card .ico{width:56px;height:56px;margin:0 auto 12px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;background:radial-gradient(circle at 35% 30%,#eaf6e2,#c8e8bd);box-shadow:0 8px 18px rgba(20,122,69,.16)}
.pitch-card h3{font-size:15px;margin-bottom:4px}
.pitch-card p{font-size:12.5px;color:var(--soft);font-weight:500;line-height:1.5}
.cta-banner{background:linear-gradient(135deg,var(--accent),var(--accent-d));color:#fff;border-radius:var(--r-lg);padding:clamp(28px,5vw,46px);text-align:center;margin:50px 0}
.cta-banner h2{font-size:clamp(22px,3.4vw,32px);color:#fff}
.cta-banner p{opacity:.9;margin:10px 0 20px;font-size:14px}
.cta-banner .btn-primary{background:#fff;color:var(--accent-d)}
.cta-banner .btn-primary:hover{background:#fff;opacity:.92;transform:translateY(-2px)}

/* ---------- carrousels horizontaux (accueil) ---------- */
.carousel{margin:44px 0 26px}
.carousel .chead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.carousel .chead h2{font-size:clamp(20px,3.4vw,26px)}
.carousel .chead a{color:var(--accent);font-weight:800;font-size:13.5px;white-space:nowrap}
.crow{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 14px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.crow::-webkit-scrollbar{height:7px}
.crow::-webkit-scrollbar-thumb{background:var(--line2);border-radius:99px}
.crow .pcard{flex:0 0 210px;scroll-snap-align:start}
@media(max-width:560px){.crow .pcard{flex:0 0 66vw;max-width:260px}}
/* tuiles rayons en scroll (shop classique, jamais de 2+1 bancal) */
.rtile{flex:0 0 150px;scroll-snap-align:start;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;display:flex;flex-direction:column;gap:4px;transition:transform .16s var(--ease),box-shadow .16s}
.rtile:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.rtile .emo{font-size:28px}
.rtile b{font-size:15.5px;margin-top:4px}
.rtile span{font-size:12px;color:var(--soft);font-weight:700}
@media(max-width:560px){.rtile{flex:0 0 40vw;max-width:170px}}

/* ---------- mini-hero contextuel (unique par page/rayon) ---------- */
.minihero{position:relative;border-radius:var(--r-lg);padding:30px 26px;margin:18px 0 8px;overflow:hidden;isolation:isolate;background:var(--mh,var(--bg2))}
.minihero::after{content:var(--mh-emo,"");position:absolute;right:-10px;bottom:-28px;font-size:150px;opacity:.16;line-height:1;z-index:-1;transform:rotate(-8deg)}
.minihero .mh-kick{display:inline-block;background:rgba(255,255,255,.65);border-radius:999px;padding:5px 12px;font-size:11px;font-weight:800;letter-spacing:.05em;color:var(--mh-ink,#33302B);margin-bottom:8px}
.minihero h1{font-size:clamp(26px,5vw,42px);color:var(--mh-ink,#33302B);line-height:1.02}
.minihero p{color:var(--mh-ink,#33302B);opacity:.78;font-weight:600;font-size:14px;margin-top:8px;max-width:520px}
/* T26 — PNG produit détouré à droite du bandeau (texte garde la priorité de lisibilité) */
.minihero.has-prod{padding-right:min(46%,320px)}
.minihero.has-prod::after{display:none} /* pas de watermark emoji quand un produit est affiché */
.minihero .mh-txt{position:relative;z-index:2}
.minihero .mh-prod{position:absolute;right:14px;top:50%;transform:translateY(-50%);height:88%;max-height:210px;width:auto;max-width:44%;object-fit:contain;object-position:right center;z-index:1;pointer-events:none;filter:drop-shadow(0 14px 26px rgba(20,30,20,.28))}
@media(max-width:640px){
  .minihero.has-prod{padding-right:26px;padding-bottom:22px}
  .minihero .mh-prod{height:auto;width:38%;max-width:150px;max-height:130px;right:10px;bottom:8px;top:auto;transform:none;opacity:.92}
  .minihero.has-prod h1,.minihero.has-prod p{max-width:62%}
}

/* ---------- catalogue (2 niveaux) ---------- */
.cat-head{padding:8px 0 6px}
.crumb{font-size:12.5px;color:var(--soft);font-weight:700;margin-bottom:8px}
.crumb a{color:var(--accent)}
/* barre de filtres collée sous la nav (retour Allan 17/07 : pages fusionnées très longues
   — ex. accessoires.html 124 produits — le filtre doit rester joignable en scrollant) */
.subchips{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 6px;position:sticky;top:var(--nav-h);z-index:40;background:var(--bg);padding:10px 0 8px}
.subchips button{min-height:38px;border:1.5px solid var(--line2);background:var(--card);border-radius:999px;padding:8px 15px;font-weight:800;font-size:13px;white-space:nowrap;transition:.15s}
.subchips button:hover{border-color:var(--accent)}
.subchips button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.subchips button span{opacity:.55;font-weight:700;font-size:11.5px;margin-left:3px}
.molchip{margin-left:auto}
/* évite le grand vide quand les chips passent à la ligne sur mobile (retour QA 16/07) */
@media(max-width:560px){.molchip{margin-left:0}}
.subsec{scroll-margin-top:120px}
.catbar{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 18px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.catbar a{min-height:38px;display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:7px 14px;font-weight:800;font-size:13.5px;background:var(--card);box-shadow:0 4px 10px rgba(51,48,43,.05)}
.catbar a.on{background:var(--accent);color:var(--cream)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
/* 2 colonnes sur mobile — retour Allan 17/07 : 1 seule colonne + pages fusionnées (accessoires
   = 124 produits) donnait des pages de 60 000px, illisible/interminable */
@media(max-width:480px){
  .grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .pcard .body{padding:10px}
  .pcard .body h3{font-size:13px;line-height:1.25}
  .pcard .sub{font-size:10.5px;margin:2px 0 6px}
  .pcard .foot{flex-wrap:wrap;gap:6px}
  .price{font-size:13px}
  .add{padding:7px 10px;font-size:11px;min-height:32px}
}
.pcard{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:transform .16s var(--ease),box-shadow .16s}
.pcard:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
/* cards v3 (Allan 03:25) : tuile photo BLANCHE uniforme, sans blend/ombre bud — normalise détourées ET fonds baked, zéro vignettage */
.pcard .media{aspect-ratio:1;background:#fff;border-bottom:1px solid var(--line);padding:16px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
/* skeleton shimmer tant que l'image lazy-load n'est pas chargée (retour QA 16/07 :
   rectangle crème vide pendant le scroll, impression de catalogue cassé) */
.pcard .media::before{content:'';position:absolute;inset:0;background:linear-gradient(100deg,var(--bg2) 30%,#fff 50%,var(--bg2) 70%);background-size:200% 100%;animation:cardShimmer 1.4s linear infinite}
.pcard .media img{max-width:100%;max-height:100%;object-fit:contain;position:relative;z-index:1;opacity:0;transition:opacity .25s}
.pcard .media img.loaded{opacity:1}
.pcard .media:has(img.loaded)::before{display:none}
@keyframes cardShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.pcard .media::before{animation:none}}
.pcard .tags{position:absolute;top:10px;left:10px;display:flex;gap:6px;flex-wrap:wrap}
.badge{border-radius:999px;padding:5px 10px;font-size:11px;font-weight:800;line-height:1}
.badge.promo{background:var(--lime);color:var(--ink)}
.badge.mol{background:var(--mol);color:#fff}
.badge.out{background:#fbe2de;color:#c0343a}
.pcard.inactive{opacity:.55}
.pcard.inactive .add{background:var(--soft);pointer-events:none}
.pcard .body{padding:14px;display:flex;flex-direction:column;flex:1}
.pcard .body h3{font-size:16px}
.pcard .sub{font-size:12px;color:var(--soft);font-weight:600;margin:2px 0 8px}
.gauges{margin:4px 0 10px}
.gauges .grow{display:flex;align-items:center;gap:7px;padding:4px 0;border-bottom:1px solid var(--line)}
.gauges .grow:last-child{border-bottom:0}
.gauges .gico{font-size:13px;flex:none;line-height:1}
.gauges .glabel{flex:1;font-size:12px;font-weight:700;color:var(--soft)}
.gauges .gval{font-size:13px;font-weight:900;color:var(--ink)}
.gauges .grow:nth-child(1) .gval{color:var(--accent)}
.gauges .grow:nth-child(2) .gval{color:#c98a1e}
.gauges .grow:nth-child(3) .gval{color:#d0402e}
.pcard .foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px}
.price{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:16px;display:flex;flex-direction:column;line-height:1.05}
.price .from{font-size:10px;color:var(--soft);text-transform:uppercase;letter-spacing:.05em;font-family:'Archivo'}
.price .strike{font-size:11px;color:var(--soft);text-decoration:line-through;font-weight:700}
.add{min-height:40px;border:0;border-radius:999px;padding:9px 16px;background:var(--accent);color:var(--cream);font-weight:800;font-size:13px}
.empty{padding:50px 20px;text-align:center;color:var(--soft);font-weight:700}
/* T44(a) — état vide rayon (recherche/filtre sans résultat) */
.rf-empty{grid-column:1/-1}
.rf-empty .empty{display:flex;flex-direction:column;align-items:center;gap:6px}
.rf-empty .empty b{font-size:17px;color:var(--forest)}
.rf-empty .empty span{font-weight:600}
.rf-empty .empty .btn{margin-top:10px}

/* ---------- switch 3 tuiles (test A/B/C, même DA Bulle) ---------- */
.tilesw{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:6px 0 16px}
.tilesw .lbl{font-size:12px;font-weight:800;color:var(--soft);text-transform:uppercase;letter-spacing:.06em;margin-right:2px}
.tilesw button{min-height:36px;border:1.5px solid var(--line2);background:var(--card);border-radius:999px;padding:7px 14px;font-weight:800;font-size:12.5px;display:inline-flex;gap:6px;align-items:center}
.tilesw button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* --- Tuile B « Étiquette » : bandeau catégorie + prix en pastille tag --- */
.grid[data-tile="etiquette"]{gap:18px}
.grid[data-tile="etiquette"] .pcard{border:0;border-radius:18px;box-shadow:0 8px 22px rgba(51,48,43,.08);background:var(--card)}
.grid[data-tile="etiquette"] .pcard .media{margin:0;border-radius:18px 18px 0 0;border-bottom:3px solid var(--accent)}
.grid[data-tile="etiquette"] .pcard .body{padding:14px 14px 16px}
.grid[data-tile="etiquette"] .pcard h3{font-size:16px}
.grid[data-tile="etiquette"] .pcard .foot{margin-top:12px;align-items:flex-end}
.grid[data-tile="etiquette"] .pcard .price{background:var(--accent);color:var(--cream);border-radius:10px;padding:6px 12px;font-size:15px;box-shadow:3px 3px 0 var(--ink)}
.grid[data-tile="etiquette"] .pcard .price .from{color:rgba(255,255,255,.85)}
.grid[data-tile="etiquette"] .pcard .price .strike{color:rgba(255,255,255,.7)}
.grid[data-tile="etiquette"] .pcard .add{background:var(--ink)}

/* --- Tuile C « Vitrine » : photo plein cadre + infos en overlay dégradé --- */
.grid[data-tile="vitrine"] .pcard{position:relative;aspect-ratio:3/4;border:0;border-radius:20px;overflow:hidden;background:var(--ink)}
.grid[data-tile="vitrine"] .pcard>a{position:absolute;inset:0;z-index:1}
.grid[data-tile="vitrine"] .pcard .media{position:absolute;inset:0;aspect-ratio:auto;height:64%;border-radius:0}
.grid[data-tile="vitrine"] .pcard .media img{max-width:82%;max-height:82%}
.grid[data-tile="vitrine"] .pcard .body{position:absolute;left:0;right:0;bottom:0;z-index:2;background:linear-gradient(transparent,rgba(28,20,12,.9));color:#fff;padding:52px 14px 14px}
.grid[data-tile="vitrine"] .pcard h3{color:#fff;font-size:17px}
.grid[data-tile="vitrine"] .pcard .sub{color:rgba(255,255,255,.7)}
.grid[data-tile="vitrine"] .pcard .gauges{display:none}
.grid[data-tile="vitrine"] .pcard .price{color:#fff}
.grid[data-tile="vitrine"] .pcard .price .strike{color:rgba(255,255,255,.6)}
.grid[data-tile="vitrine"] .pcard .add{position:relative;z-index:3;background:var(--accent)}

/* ---------- fiche produit ---------- */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:34px;padding:30px 0}
.pdp .ph{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);aspect-ratio:1;display:flex;align-items:center;justify-content:center;padding:18px}
.pdp .ph img{max-width:88%;max-height:88%}
.pdp h1{font-size:clamp(26px,4vw,40px)}
/* sélecteur de poids — segmented cards (retour Allan 17/07 : « fais un petit effort sur le
   sélecteur de grammage, on est presque ») : grammage en gros, prix total + tarif/g dessous,
   état sélectionné = anneau vert + coche. */
.pdp .optlabel{font-weight:800;font-size:13px;margin:16px 0 4px;color:var(--ink)}
.pdp .optlabel span{color:var(--soft);font-weight:700}
.pdp .opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(94px,1fr));gap:10px;margin:6px 0 4px}
.pdp .opts button{position:relative;min-height:62px;text-align:center;border:1.6px solid var(--line2);background:var(--card);border-radius:14px;padding:10px 8px;font-weight:900;font-size:16px;line-height:1.3;color:var(--ink);transition:transform .14s var(--ease),border-color .18s,box-shadow .18s}
.pdp .opts button span{font-weight:700}
.pdp .opts button:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 8px 20px rgba(20,122,69,.12)}
.pdp .opts button.on{border-color:var(--accent);background:var(--green-soft);box-shadow:0 0 0 3px rgba(20,122,69,.16)}
.pdp .opts button.on::after{content:'✓';position:absolute;top:6px;right:8px;font-size:11px;font-weight:900;color:var(--accent-d)}
.pdp .opts button.on span{color:var(--accent-d);opacity:1!important}
@media(max-width:820px){.pdp{grid-template-columns:1fr}}
.pdp .ph{position:relative;overflow:hidden}
.pdp .ph .phbadges{position:absolute;top:14px;left:14px;display:flex;gap:6px;flex-wrap:wrap}
.pdp-sub{color:var(--soft);font-weight:600;margin:6px 0 2px}
.specs{margin:16px 0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.specs .row{display:flex;justify-content:space-between;gap:10px;padding:11px 15px;font-size:13.5px;border-bottom:1px solid var(--line)}
.specs .row:last-child{border-bottom:0}
.specs .row span{color:var(--soft);font-weight:700}
.specs .row b{font-weight:800;text-align:right}
.qtyrow{display:flex;align-items:center;gap:12px;margin:16px 0;flex-wrap:wrap}
.qtyrow .q{display:flex;align-items:center;gap:6px;border:1.5px solid var(--line2);border-radius:12px;padding:4px}
.qtyrow .q button{width:38px;height:38px;border:0;background:var(--card);border-radius:8px;font-weight:900;font-size:18px;cursor:pointer}
.qtyrow .q b{min-width:26px;text-align:center}
.trust{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:16px 0}
.trust div{background:var(--bg2);border-radius:12px;padding:10px 12px;font-size:12.5px;font-weight:700;display:flex;gap:8px;align-items:center}
/* barre CTA fixe mobile sur la fiche produit (retour QA 16/07 : prix + bouton hors du 1er
   écran, la photo prenant ~40% de la hauteur) */
.pdp-sticky{display:none}
@media(max-width:760px){
  .pdp-sticky{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:140;background:var(--card);
    border-top:1px solid var(--line);padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    align-items:center;gap:12px;box-shadow:0 -8px 20px rgba(51,48,43,.12)}
  .pdp-sticky .price{font-size:19px;font-weight:900;flex:none}
  .pdp-sticky .btn{flex:1;min-height:44px}
  body:has(#pdp) .cart-fab{bottom:74px} /* le FAB ne doit pas recouvrir cette barre */
  body:has(#pdp){padding-bottom:70px}
}
.related{margin:34px 0}
.related h2{font-size:22px;margin-bottom:12px}

/* ---------- cart drawer + age-gate ---------- */
.ov{position:fixed;inset:0;background:rgba(51,48,43,.45);z-index:200;opacity:0;pointer-events:none;transition:.25s}
.ov.on{opacity:1;pointer-events:auto}
/* panier = bulle flottante (FAB) bas-droite */
.cart-fab{position:fixed;right:16px;bottom:16px;z-index:150;display:inline-flex;align-items:center;gap:9px;
  background:var(--ink);color:var(--bg);border:0;border-radius:999px;padding:14px 20px;font-weight:800;font-size:15px;
  box-shadow:0 12px 30px rgba(51,48,43,.32);transition:transform .16s var(--ease),opacity .16s var(--ease)}
.cart-fab:hover{transform:translateY(-3px)}
/* évitement de collision : quand un bouton + Panier / Payer passe sous le FAB pendant le
   scroll, on le réduit à une bulle discrète le temps que ça dégage (retour QA 16/07 —
   14/113 boutons interceptés en scan complet d'une page catégorie) */
.cart-fab.fab-yield{transform:scale(.7) translateY(10px);opacity:.4;pointer-events:none}
.cart-fab .cc{background:var(--lime);color:var(--ink);border-radius:999px;min-width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:900;padding:0 6px}
.cart-fab.empty .cc{display:none}
@media(min-width:901px){
  /* desktop : panier dans la navbar, plus de bulle flottante en double */
  .cart-fab{display:none}
}
/* réserve un espace sous le contenu pour que le FAB (panier flottant) ne recouvre jamais
   un bouton/texte en fin de page (retour QA 16/07 : recouvrait "+ Panier", prix, CTA...) */
@media(max-width:900px){
  body:not([data-nofab]){padding-bottom:78px}
}
/* drawer fullscreen */
.drawer{position:fixed;inset:0;width:100vw;background:var(--bg);z-index:201;transform:translateY(101%);transition:transform .32s var(--ease);display:flex;flex-direction:column}
.drawer.on{transform:none}
@media(min-width:721px){.drawer{left:auto;width:min(460px,100vw);transform:translateX(101%)}.drawer.on{transform:none}}
.drawer h3{padding:20px 22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-size:20px}
.drawer h3 .dx{border:0;background:var(--bg2);width:40px;height:40px;border-radius:50%;font-size:22px}
.dlist{flex:1;overflow:auto;padding:8px 22px}
.dli{display:flex;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.dli img{width:60px;height:60px;object-fit:contain;background:var(--bg2);border-radius:12px}
.dfoot{padding:18px 22px;border-top:1px solid var(--line);background:var(--bg2)}
.dfoot .tot{display:flex;justify-content:space-between;font-weight:900;font-size:22px;margin-bottom:12px}
.dfoot .acts{display:flex;gap:10px}
.dfoot .acts .btn{flex:1}
.dempty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 24px;gap:8px}
.dempty .big{font-size:56px;opacity:.5}
.dempty h4{font-size:20px}
.dempty p{color:var(--soft);font-weight:600;margin-bottom:14px}
.agegate{position:fixed;inset:0;background:var(--bg);z-index:300;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center}
.agegate.hide{display:none}
.agegate .card{max-width:380px}
.agegate img{height:34px;margin:0 auto 18px}
.footer{background:var(--ink);color:var(--bg);padding:40px 0 26px;margin-top:40px}
/* footer collé direct au bloc "explainer" (retour Allan) : même fond --ink, le margin-top
   laissait passer le fond crème de <body> entre les deux -> liseré moche visible */
.explainer+.footer{margin-top:0}
/* liens footer collés + cibles tactiles <24px (retour QA 16/07, doublon confirmé) */
.footer a{color:rgba(246,241,231,.82);display:block;padding:6px 0;min-height:24px}
.footer .lg~a,.footer div>a:first-of-type{margin-top:2px}
/* logo noir quasi invisible sur fond --ink très sombre (retour QA 16/07) */
.footer .cols img{filter:brightness(0) invert(1);opacity:.92}
/* skip-link (retour QA 16/07) — invisible sauf au focus clavier */
.skip-link{position:fixed;top:-60px;left:12px;z-index:999;background:var(--ink);color:#fff;font-weight:800;font-size:13px;padding:10px 18px;border-radius:10px;transition:top .15s}
.skip-link:focus{top:12px}
.footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:26px}
.footer h4{font-size:13px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px;color:rgba(255,251,242,.5)}
.footer .lg{font-family:'Bricolage Grotesque';font-weight:800;font-size:20px}
.footer .legal{font-size:11px;color:rgba(255,251,242,.5);margin-top:22px;line-height:1.5;border-top:1px solid rgba(255,251,242,.12);padding-top:16px}
@media(max-width:720px){.footer .cols{grid-template-columns:1fr}}

/* ---------- NAV UNIQUE = bottom drawer (menu -> vraies pages) ---------- */
.menu-ov{position:fixed;inset:0;background:rgba(35,35,39,.5);backdrop-filter:blur(2px);z-index:200;opacity:0;pointer-events:none;transition:.25s}
.menu-ov.on{opacity:1;pointer-events:auto}
.menu-drawer{position:fixed;left:0;right:0;bottom:0;z-index:201;background:var(--bg);border-radius:26px 26px 0 0;max-height:86vh;overflow:auto;transform:translateY(101%);transition:transform .32s var(--ease);padding:6px 20px calc(28px + env(safe-area-inset-bottom));box-shadow:0 -16px 44px rgba(35,35,39,.26)}
.menu-drawer.on{transform:none}
.menu-grab{width:44px;height:5px;border-radius:99px;background:var(--line2);margin:10px auto 6px}
.menu-drawer .mh{display:flex;align-items:center;justify-content:space-between;padding:6px 2px 2px}
.menu-drawer .mh img{height:22px}
.menu-drawer .mx{width:40px;height:40px;border:0;background:var(--bg2);border-radius:50%;font-size:22px}
.menu-drawer h3{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--soft);margin:16px 4px 8px;font-family:'Archivo'}
.menu-links{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.menu-links a{display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);border-radius:15px;padding:13px 14px;font-weight:800;font-size:14px;min-height:56px;transition:.15s}
.menu-links a:hover{border-color:var(--lime);transform:translateY(-1px)}
.menu-links a .emo{font-size:20px}
.menu-links a .n{margin-left:auto;font-size:12px;color:var(--soft);font-weight:700}
.menu-links.mols a{border-color:var(--green-soft);background:var(--green-soft)}
/* WeedAdvisor — perk compte (retour Allan) */
.wa2-box{background:var(--card);border:1px solid var(--line2);border-radius:16px;padding:16px}
.wa2-head{display:flex;align-items:baseline;gap:8px;font-size:15px;margin-bottom:12px}
.wa2-head span{color:var(--soft);font-weight:600;font-size:12.5px}
.wa2-steps{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;font-size:11px;font-weight:800;color:var(--soft)}
.wa2-steps span{padding:3px 9px;border-radius:99px;background:var(--bg2)}
.wa2-steps span.on{background:var(--accent);color:#fff}
.wa2-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.wa2-opt{border:1.5px solid var(--line2);background:var(--card);border-radius:12px;padding:12px 8px;font-weight:700;font-size:13px;text-align:center;cursor:pointer;transition:.15s}
.wa2-opt:hover{border-color:var(--accent);transform:translateY(-1px)}
.wa2-back,.wa2-restart{background:none;border:0;color:var(--soft);font-weight:700;font-size:12.5px;cursor:pointer;text-decoration:underline;margin-top:10px}
.wa2-reco{text-align:center}
.wa2-reco img{width:120px;height:120px;object-fit:contain;background:var(--bg2);border-radius:14px;margin:0 auto 10px}
.wa2-rname{font-weight:800;font-size:16px}
.wa2-rprice{font-weight:900;margin-top:8px;color:var(--accent-d)}
.wa2-rbtn{margin-top:12px;width:100%}
.wa2-legal{font-size:10.5px;color:var(--soft);margin-top:12px;text-align:center;line-height:1.5}

/* ════════════════════════════════════════════════════════════════════
   SIGNATURE RICHE — montée en volume DA (retour BRAIN 18/07 : « trop sobre »)
   Texture papier/cendre · néon vert végétal · cartes de travers + stickers
   ombre dure · bento · marquees tiltés · séparateurs texturés.
   Reste sur le MÊME socle (crème/vert/jaune/encre), on monte le contraste.
   La version sobre est figée dans site.sobre.css (thème showcase à part).
   ════════════════════════════════════════════════════════════════════ */
:root{
  --ink-green:#0d2a1a; --ink-green2:#123a24; --neon:#5ef08a; --neon-d:#27c65f;
  --paper:#f3ecd9; --ash:#e7dcc4; --sticker-sh:4px 4px 0 var(--ink);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
/* 1 — TEXTURE PAPIER/CENDRE partout (plus de fond plat) */
body{background-color:var(--paper)}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:var(--grain);background-size:200px 200px;opacity:.09;mix-blend-mode:multiply}
.wrap,.nav,.hero,.footer,.explainer,.ticker,section,main{position:relative;z-index:1}
h1,h2,h3,h4{letter-spacing:-.03em}

/* 2 — HERO : mur végétal + néon vert (fini l'orbe seul sur fond plat) */
.hero{background:radial-gradient(120% 120% at 78% 8%,var(--ink-green2) 0%,var(--ink-green) 55%,#0a2015 100%);padding:70px 0 104px}
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='140' viewBox='0 0 120 140'%3E%3Cg fill='none' stroke='%235ef08a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='0.5'%3E%3Cpath d='M30 128 C30 96 30 70 30 44 M30 60 C16 54 8 40 8 26 C24 30 30 42 30 56 M30 60 C44 54 52 40 52 26 C36 30 30 42 30 56 M30 86 C16 80 6 66 4 50 C22 54 30 68 30 82 M30 86 C46 80 56 66 58 50 C40 54 30 68 30 82'/%3E%3Cpath d='M92 132 C92 104 92 82 92 60 M92 74 C80 68 74 56 72 44 C86 48 92 60 92 72 M92 74 C104 68 110 56 112 44 C98 48 92 60 92 72 M92 98 C80 92 72 80 70 68 C86 72 92 84 92 96 M92 98 C106 92 112 80 114 68 C98 72 92 84 92 96'/%3E%3C/g%3E%3C/svg%3E");
  background-size:150px 175px;background-position:center}
.hero::after{content:"";position:absolute;right:-8%;top:12%;width:min(560px,70vw);aspect-ratio:1;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(94,240,138,.45),rgba(94,240,138,0) 62%);filter:blur(6px)}
.hero-wave svg path{fill:var(--paper)}
.hero-glass{background:rgba(15,42,26,.42);border:1px solid rgba(94,240,138,.3);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 22px 60px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.08)}
.hero .kick{background:var(--neon);color:var(--ink-green);box-shadow:var(--sticker-sh);transform:rotate(-2deg);font-weight:900;letter-spacing:.08em}
.hero h1{color:#fff;font-size:clamp(42px,7vw,80px);text-shadow:0 2px 30px rgba(0,0,0,.35)}
.hero h1 span{color:var(--neon);position:relative}
.hero h1 span::after{content:"";position:absolute;left:0;right:-4px;bottom:2px;height:.28em;background:rgba(94,240,138,.28);z-index:-1;transform:rotate(-1deg)}
.hero p{color:rgba(255,255,255,.82);font-size:16.5px}
.hero p strong,.hero .cta+p{color:var(--neon)!important}
.hero .btn-primary{background:var(--neon);color:var(--ink-green);box-shadow:var(--sticker-sh)}
.hero .btn-primary:hover{background:#fff;transform:translate(-1px,-3px);box-shadow:6px 7px 0 var(--ink)}
.hero .btn-ghost{background:rgba(255,255,255,.1);color:#fff;border:1.5px solid rgba(94,240,138,.4);box-shadow:none}
.hero .btn-ghost:hover{background:rgba(255,255,255,.18);transform:translateY(-2px)}
/* le cercle produit validé Allan reste, mais posé sur un halo néon plutôt qu'un aplat */
.hero-art{background:radial-gradient(circle at 38% 32%,#fff8dc,var(--neon) 46%,var(--accent) 92%);box-shadow:0 0 0 10px rgba(94,240,138,.14),0 30px 70px rgba(0,0,0,.5)}
.hero-art::after{content:"";position:absolute;inset:-22px;border-radius:50%;border:2px dashed rgba(94,240,138,.5);animation:heroSpin 32s linear infinite}
@keyframes heroSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.hero-art::after{animation:none}}
.hero-dots{opacity:.22;background-image:radial-gradient(rgba(94,240,138,.5) 1.3px,transparent 1.6px)}

/* ink illustration Jean Jullien — trait main levée, encre, posée dans le hero/sections */
.ink{stroke:var(--ink);fill:none;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;display:block}
.ink.on-dark{stroke:var(--neon)}
.hero-ink{position:absolute;z-index:1;pointer-events:none}
.hero-ink.h1{right:6%;bottom:16%;width:130px;opacity:.9;animation:inkFloat 7s ease-in-out infinite}
.hero-ink.h2{left:3%;top:14%;width:96px;opacity:.55;transform:rotate(-12deg)}
@keyframes inkFloat{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-14px) rotate(3deg)}}
@media(prefers-reduced-motion:reduce){.hero-ink.h1{animation:none}}
@media(max-width:820px){.hero-ink{display:none}}

/* 3 — CARTES SIGNATURE : de travers + tilt hover, stickers ombre dure */
/* cards v3 (Allan 03:25) : override du thème SIGNATURE — cartes DROITES, bord fin, ombre au HOVER sur la card (pas de sticker/tilt/ombre dure) */
.pcard{border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:none;transition:transform .16s var(--ease),box-shadow .16s}
.grid .pcard:nth-child(3n+1),.grid .pcard:nth-child(3n+2),.grid .pcard:nth-child(3n+3){transform:none}
.pcard:hover{transform:translateY(-3px)!important;box-shadow:var(--shadow)}
.crow .pcard:nth-child(even),.crow .pcard:nth-child(odd){transform:none}
.badge{border:1.5px solid var(--ink);box-shadow:2.5px 2.5px 0 var(--ink);transform:rotate(-4deg);font-weight:900;letter-spacing:.01em}
.badge.promo{background:var(--lime)}
.pcard .tags .badge:nth-child(2){transform:rotate(3deg)}
.add{border:2px solid var(--ink);box-shadow:2.5px 2.5px 0 var(--ink);font-weight:900}
.add:hover{transform:translate(-1px,-1px);box-shadow:3.5px 3.5px 0 var(--ink)}

/* 4 — BENTO : la section « Pourquoi » en grille asymétrique, contrastes francs */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(120px,auto);gap:14px;margin:12px 0 8px}
.bento .bx{border:2px solid var(--ink);border-radius:20px;padding:22px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden;box-shadow:5px 6px 0 rgba(35,35,39,.13)}
.bento .bx h3{font-size:clamp(19px,2.4vw,26px);line-height:1.02;margin-bottom:4px;padding-right:46px}
.bento .bx p{font-size:13px;font-weight:600;line-height:1.45}
.bento .bx .big{position:absolute;top:14px;right:16px;font-size:40px;line-height:1}
.bx.green{background:var(--ink-green);color:#fff;grid-column:span 2;grid-row:span 2;justify-content:space-between}
.bx.green h3{color:#fff;font-size:clamp(26px,3.6vw,40px)}
.bx.green p{color:rgba(255,255,255,.72)}
.bx.green .neon{color:var(--neon)}
.bx.lime{background:var(--lime);color:var(--ink);grid-column:span 2}
.bx.cream{background:#fff;color:var(--ink)}
.bx.ink{background:var(--ink);color:#fff}
.bx.ink h3{color:#fff}.bx.ink p{color:rgba(255,255,255,.66)}
.bx svg.ink{position:absolute;bottom:-6px;right:-4px;width:88px;opacity:.9}
@media(max-width:820px){.bento{grid-template-columns:repeat(2,1fr)}.bx.green{grid-column:span 2;grid-row:span 1}.bx.lime{grid-column:span 2}}
@media(max-width:480px){.bento{grid-template-columns:1fr}.bx.green,.bx.lime{grid-column:span 1}}

/* 5 — MARQUEE promo tilté (2e bandeau, en plus du ticker) + séparateurs texturés */
.marquee{background:var(--lime);color:var(--ink);border-top:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);overflow:hidden;white-space:nowrap;padding:11px 0;transform:rotate(-2.4deg);width:106%;margin-left:-3%;box-shadow:0 8px 22px rgba(0,0,0,.14)}
.marquee.alt{background:var(--ink);color:var(--lime);transform:rotate(1.8deg)}
.marquee-track{display:inline-flex;animation:tickerScroll 42s linear infinite}
.marquee-track span{padding:0 22px;font-weight:900;font-size:15px;letter-spacing:.01em;display:inline-flex;align-items:center;gap:8px}
.marquee.alt .marquee-track{animation-duration:36s;animation-direction:reverse}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}
.marquee-wrap{margin:56px 0;position:relative;z-index:1}
/* séparateur déchiré/texturé entre sections */
.rip{display:block;width:100%;height:26px;color:var(--ink);margin:6px 0}
.rip svg{display:block;width:100%;height:100%}

/* section headers éditoriaux + surlignage encre */
.sec-h,.pitch-head h2,.faq .sec-h{position:relative;display:inline-block}
.mark-neon{background:linear-gradient(transparent 62%,rgba(94,240,138,.55) 0);padding:0 .06em}
.mark-lime{background:linear-gradient(transparent 62%,var(--lime) 0);padding:0 .06em}

/* pitch cards → look sticker de travers */
.pitch-card{border:2px solid var(--ink);box-shadow:5px 6px 0 rgba(35,35,39,.13);transition:transform .18s var(--ease),box-shadow .18s}
.pitch-card:nth-child(odd){transform:rotate(-1.2deg)}
.pitch-card:nth-child(even){transform:rotate(1deg)}
.pitch-card:hover{transform:rotate(0) translateY(-4px);box-shadow:8px 10px 0 var(--ink)}
.pitch-card .ico{border:2px solid var(--ink);box-shadow:2.5px 2.5px 0 var(--ink)}

/* rayons curatés → cartes bordées de travers */
.rayon{border:2px solid var(--ink);box-shadow:4px 5px 0 rgba(35,35,39,.12)}
.rayon:hover{box-shadow:7px 9px 0 var(--ink)}
.rayon .n{border:1.5px solid var(--ink)}

/* featured sections : titres plus francs, cadre encre */
.featured-sec{border:2px solid var(--ink);box-shadow:6px 7px 0 rgba(35,35,39,.1)}
.featured-sec.best{background:linear-gradient(180deg,#dff3e6,#fffdf7)}
.featured-sec.promo{background:linear-gradient(180deg,#ffe6e0,#fffdf7)}

/* CTA banner : néon */
.cta-banner{background:var(--ink-green);border:2px solid var(--ink);box-shadow:8px 9px 0 var(--ink)}
.cta-banner h2 .mark-neon{color:#fff}
.cta-banner .btn-primary{background:var(--neon);color:var(--ink-green);box-shadow:var(--sticker-sh)}

/* explainer : garde le fond ink mais ajoute la texture + accent néon */
.explainer .head span{color:var(--neon)}
.explainer-item h3{color:#fff}

/* ════════════════════════════════════════════════════════════════════
   LANDINGS SÉPARÉES — Nos boutiques + Affiliation (brief pt.4, 18/07)
   Pages autonomes hors boutique principale : header slim (pas de nav
   produit ni panier), même DA Signature riche.
   ════════════════════════════════════════════════════════════════════ */
.lnav .nav-right{margin-left:auto}
.lnav .nav-account{border-color:var(--ink);box-shadow:2.5px 2.5px 0 var(--ink);font-weight:800}
.lnav .nav-account:hover{background:var(--lime);transform:translate(-1px,-1px);box-shadow:3.5px 3.5px 0 var(--ink)}
/* hero landing : réutilise .hero (mur végétal néon) ; l'art devient une pastille emoji */
.hero-emo{display:flex;align-items:center;justify-content:center;font-size:clamp(90px,16vw,150px);line-height:1;filter:drop-shadow(0 18px 26px rgba(0,0,0,.4))}
/* étapes numérotées (affiliation « comment ça marche ») */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:14px 0}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
.step{position:relative;background:#fff;border:2px solid var(--ink);border-radius:20px;padding:26px 20px 20px;box-shadow:5px 6px 0 rgba(35,35,39,.13);transition:transform .18s var(--ease),box-shadow .18s}
.step:nth-child(odd){transform:rotate(-1deg)}.step:nth-child(even){transform:rotate(1deg)}
.step:hover{transform:rotate(0) translateY(-4px);box-shadow:8px 10px 0 var(--ink)}
.step .no{position:absolute;top:-16px;left:18px;width:38px;height:38px;border-radius:50%;background:var(--lime);border:2px solid var(--ink);box-shadow:2.5px 2.5px 0 var(--ink);display:flex;align-items:center;justify-content:center;font-family:'Bricolage Grotesque';font-weight:800;font-size:18px}
.step h3{font-size:19px;margin:6px 0 6px}
.step p{font-size:13.5px;color:var(--soft);font-weight:600;line-height:1.5}
/* cartes boutique (Nos boutiques) */
.store-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin:14px 0}
.store{background:#fff;border:2px solid var(--ink);border-radius:20px;overflow:hidden;box-shadow:5px 6px 0 rgba(35,35,39,.13);transition:transform .18s var(--ease),box-shadow .18s}
.store:nth-child(odd){transform:rotate(-.8deg)}.store:nth-child(even){transform:rotate(.8deg)}
.store:hover{transform:rotate(0) translateY(-4px);box-shadow:8px 10px 0 var(--ink)}
.store .top{background:linear-gradient(150deg,var(--ink-green2),var(--ink-green));color:#fff;padding:18px 18px 14px;position:relative}
.store .top .pin{position:absolute;top:12px;right:14px;font-size:26px}
.store .top h3{color:#fff;font-size:20px}
.store .top .tag{display:inline-block;margin-top:6px;background:var(--neon);color:var(--ink-green);border:1.5px solid var(--ink);box-shadow:2px 2px 0 var(--ink);border-radius:999px;padding:3px 10px;font-size:11px;font-weight:900;transform:rotate(-3deg)}
.store .body{padding:16px 18px}
.store .body .row{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;font-weight:600;color:var(--ink);padding:5px 0}
.store .body .row .i{flex:none;font-size:15px}
.store .body .todo{color:var(--soft);font-style:italic}
/* formulaire affiliation (fake proto) */
.aff-form{background:#fff;border:2px solid var(--ink);border-radius:24px;box-shadow:6px 7px 0 var(--ink);padding:26px;max-width:560px;margin:14px auto 0}
.aff-form .fld{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.aff-form label{font-size:12px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;color:var(--soft)}
.aff-form input,.aff-form select{border:1.6px solid var(--line2);border-radius:12px;padding:12px 14px;font:inherit;font-size:14px;font-weight:600;color:var(--ink);background:var(--paper)}
.aff-form input:focus,.aff-form select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(20,122,69,.15)}
.aff-form .btn{width:100%}
.aff-note{font-size:11.5px;color:var(--soft);text-align:center;margin-top:12px;line-height:1.5}
/* bandeau intro landing (rappel : page séparée) */
.land-crumb{font-size:12.5px;font-weight:800;color:var(--soft);padding:14px 0 0}
.land-crumb a{color:var(--accent)}

/* ── Cohérence Signature riche : mini-hero catégorie + image fiche produit (18/07) ── */
/* mini-hero : garde la couleur par catégorie mais ajoute le cadre signature + sticker */
.minihero{border:2px solid var(--ink);box-shadow:5px 6px 0 rgba(35,35,39,.13)}
.minihero .mh-kick{border:1.5px solid var(--ink);box-shadow:2px 2px 0 var(--ink);transform:rotate(-2deg);font-weight:900}
.minihero::after{opacity:.2;transform:rotate(-10deg) scale(1.05)}
/* fiche produit : image posée sur un halo néon + cadre encre (signature) */
.pdp .ph{background:radial-gradient(circle at 50% 40%,rgba(94,240,138,.20),var(--bg2) 68%);border:2px solid var(--ink);box-shadow:6px 7px 0 rgba(35,35,39,.12)}
.pdp .ph img{filter:none}
/* jauges : léger cadre pour ressortir */
.gauges{border:2px solid var(--ink);border-radius:14px;padding:6px 12px;box-shadow:3px 3px 0 rgba(35,35,39,.1)}

/* ── Barre de facettes taxonomie + Promos (câblage catalogue réf, 18/07) ── */
.facetbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:2px 0 14px;padding-bottom:12px;border-bottom:1px dashed var(--line2)}
.facetbar .flabel{font-size:11.5px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;color:var(--soft);margin-right:2px}
.facetbar button{min-height:36px;border:1.6px solid var(--line2);background:var(--card);border-radius:999px;padding:7px 13px;font-weight:800;font-size:12.5px;white-space:nowrap;display:inline-flex;align-items:center;gap:5px;transition:transform .14s var(--ease),border-color .18s,background .18s}
.facetbar button span{opacity:.55;font-weight:700;font-size:11px}
.facetbar button:hover{border-color:var(--accent);transform:translateY(-1px)}
.facetbar button.on{background:var(--accent);color:#fff;border-color:var(--ink);box-shadow:2.5px 2.5px 0 var(--ink)}
.facetbar button.on span{opacity:.85}
.facetbar button.fpromo{border-color:#e9b200}
.facetbar button.fpromo.on{background:var(--lime);color:var(--ink);border-color:var(--ink)}
.facetbar button[hidden]{display:none}
.facetbar .fclear{border:0;background:none;color:var(--soft);font-weight:800;font-size:12px;text-decoration:underline;box-shadow:none;padding:7px 8px}
.facetbar .fclear:hover{color:var(--ink);transform:none}
/* rayon desktop : capsule filtres latérale STICKY (retour Tisanerie canonique) — mobile = pile horizontale (règles ci-dessus) */
@media(min-width:901px){
  .cat-wrap{display:grid;grid-template-columns:250px minmax(0,1fr);gap:30px;align-items:start}
  .cat-wrap>.facetbar{position:sticky;top:calc(var(--nav-h) + 14px);flex-direction:column;align-items:stretch;gap:9px;margin:0;padding:16px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);box-shadow:var(--shadow)}
  .cat-wrap>.facetbar .flabel{margin:0 0 4px}
  .cat-wrap>.facetbar button{width:100%;justify-content:flex-start}
  .cat-wrap>.facetbar .fclear{width:100%;justify-content:center;margin-top:2px}
  .cat-main{min-width:0}
}

/* ── Fidélité : barre de paliers + cadeau au seuil dans le drawer panier (18/07) ── */
.dtiers{padding:14px 22px 6px;background:var(--card);border-bottom:1px solid var(--line)}
.dtiers .msg{font-size:12.5px;font-weight:800;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:baseline}
.dtiers .msg b{color:var(--accent-d)}
.dtiers .msg .pts{color:var(--accent-d);white-space:nowrap;background:var(--green-soft);border:1.5px solid var(--accent);border-radius:999px;padding:2px 9px;font-weight:900;font-size:11.5px}
.dtiers .track{position:relative;height:10px;border-radius:999px;background:var(--bg2);margin:16px 8px 30px}
.dtiers .fill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--neon-d));transition:width .35s var(--ease)}
.dtiers .mark{position:absolute;top:50%;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;font-size:12px;box-shadow:2px 2px 0 rgba(35,35,39,.15)}
.dtiers .mark.hit{background:var(--lime);box-shadow:2px 2px 0 var(--ink)}
.dtiers .mark small{position:absolute;top:26px;left:50%;transform:translateX(-50%);font-size:10px;font-weight:800;color:var(--soft);white-space:nowrap}
.dtiers .mark.hit small{color:var(--accent-d)}
.dgift{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px dashed var(--accent);background:linear-gradient(90deg,rgba(94,240,138,.16),transparent)}
.dgift .gemo{font-size:26px;width:56px;text-align:center;flex:none}
.dgift b{font-size:14px}
.dgift .free{color:var(--accent-d);font-weight:900;font-size:12px}

/* ═══ RETRAIT thème SIGNATURE — alignement 100% chrome cbdsf-shell (GO Brain 24/07 03:xx) ═══
   Hero clean cream/forest/gold SANS filigrane ni grain papier ni neon. */
body{background-color:var(--cream)!important}
body::before{display:none!important}
.hero{background:var(--cream)!important;padding:52px 0 40px!important}
.hero::before,.hero::after{display:none!important}
.hero-dots,.hero-ink{display:none!important}
.hero-glass{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border:0!important;box-shadow:none!important;padding:0!important}
.hero .kick{background:var(--card)!important;color:var(--rust)!important;box-shadow:0 6px 18px rgba(51,48,43,.06)!important;transform:none!important;font-weight:700!important;letter-spacing:.08em!important}
.hero h1{color:var(--forest)!important;text-shadow:none!important}
.hero h1 span{color:var(--rust)!important}
.hero h1 span::after{display:none!important}
.hero p{color:var(--soft)!important}
.hero p strong,.hero .cta+p{color:var(--forest)!important}
.hero .btn-primary{background:var(--forest)!important;color:var(--cream)!important;box-shadow:0 12px 26px -12px rgba(20,48,31,.55)!important;border-radius:14px!important}
.hero .btn-primary:hover{background:var(--forest-2)!important;transform:translateY(-2px)!important;box-shadow:0 14px 30px -12px rgba(20,48,31,.6)!important}
.hero .btn-ghost{background:var(--gold)!important;color:var(--cream)!important;border:0!important;box-shadow:0 10px 22px -12px rgba(196,154,43,.6)!important;border-radius:14px!important}
.hero .btn-ghost:hover{filter:brightness(1.05)!important;transform:translateY(-2px)!important}
.hero-art{background:radial-gradient(circle at 42% 34%,#fff,var(--mint) 72%)!important;box-shadow:0 24px 55px -20px rgba(20,48,31,.4)!important}
.hero-art::after{display:none!important}
.hero-wave svg path{fill:var(--cream)!important}
/* fix overflow-x mobile (QA Brain) : le marquee tilté SIGNATURE dépassait le viewport → droit + clippé */
.ticker-tilt{width:100%!important;margin-left:0!important;transform:none!important}
/* ── CCSM-A 24/07 — PURGE restes SIGNATURE sur sous-pages (classes hors produit/PDP : store/bento/cta-banner/marquee/hero-wave/step/pitch-card/minihero/mark-neon) ── */
.hero-wave{display:none!important}
.marquee,.marquee.alt{transform:none!important;width:100%!important;margin-left:0!important;background:var(--cream2)!important;color:var(--forest)!important;border-top:1px solid var(--line)!important;border-bottom:1px solid var(--line)!important;box-shadow:none!important}
.store,.store:nth-child(odd),.store:nth-child(even),.step,.step:nth-child(odd),.step:nth-child(even),.pitch-card,.pitch-card:nth-child(odd),.pitch-card:nth-child(even),.store .top .tag,.minihero .mh-kick,.minihero::after{transform:none!important}
.store,.step,.pitch-card,.bento .bx,.minihero{border:1px solid var(--line)!important;box-shadow:0 12px 30px -18px rgba(20,48,31,.28)!important}
.store .top .tag{background:var(--lime)!important;color:var(--forest)!important;box-shadow:none!important;border:1px solid var(--line)!important}
.minihero .mh-kick,.step .no{box-shadow:none!important;border:1px solid var(--line)!important}
.cta-banner{background:var(--forest)!important;border:0!important;box-shadow:0 18px 44px -22px rgba(20,48,31,.5)!important}
.mark-neon{background:linear-gradient(transparent 62%,rgba(182,211,48,.55) 0)!important}
/* équipement card v3 (validé Allan/shell) : badge molécule (badges) + dropdown grammes + Panier */
.pcard .cadd{display:flex;gap:8px;align-items:center;padding:0 14px 14px}
.pcard .cgram{flex:1;min-width:0;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--ink);background:var(--card);border:1px solid var(--line2);border-radius:10px;padding:9px 10px;cursor:pointer;-webkit-appearance:menulist}
.pcard .cadd .add{flex:none;white-space:nowrap}
.pcard .foot{padding:12px 14px 8px}

/* QA-BRAIN clip ticker — overflow-x:CLIP (pas hidden) : clippe l'horizontal du ticker SANS
   faire du body un scroll-container (hidden cassait position:sticky du header, T25/CCSM-D 24/07). */
body{overflow-x:clip}
[class*='ticker']{max-width:100vw}
.ticker,.tickerwrap,.marquee{overflow:hidden}

/* QA-BRAIN contraste */
button.add,.pcard .add,.add{color:#F6F1E7 !important}

/* ============================================================================
   COMPOSANT CARD CANONIQUE — verbatim /demo/cbdsf-shell/ (composant validé
   « le plus réussi », retour Allan 24/07). Remplace l'anatomie .pcard des rayons.
   ============================================================================ */
:root{--cream2:#FBF8F1;--muted:#5c6b5c}
.pc{background:var(--cream2);border:1px solid var(--line);border-radius:18px;overflow:hidden;text-decoration:none;color:var(--forest);display:flex;flex-direction:column;transition:transform .15s, box-shadow .15s}
.pc:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(20,48,31,.10)}
/* T51 — media-box = tuile blanche ASSUMÉE avec CONTOUR MARQUÉ (décision Allan : contraste franc
   avec le fond crème, plus le gris pâle). Tuile encadrée insérée (marge + border net + radius),
   propagée partout via .pim (cards rayon, populaires, promos, cards PDP « À tester aussi »). */
.pim{position:relative;height:150px;margin:16px 16px 0;background:#fff;border:1.5px solid #8E8572;border-radius:16px;display:grid;place-items:center;padding:12px;overflow:hidden}
.pim img{max-width:100%;max-height:118px;object-fit:contain}
.pbadge{position:absolute;top:10px;left:10px;background:var(--lime);color:var(--forest);font-size:10.5px;font-weight:700;letter-spacing:.1em;border-radius:999px;padding:4px 10px;z-index:1}
.pdiscount,.pflag{position:absolute;top:10px;right:10px;background:var(--rust);color:var(--cream);font-size:11px;font-weight:700;letter-spacing:.06em;border-radius:999px;padding:4px 10px;z-index:1}
.pflag.team{background:var(--gold)}
.pbody{padding:14px 16px 18px;display:flex;flex-direction:column;flex:1}
/* boutons alignés en bas des cards (consigne Allan) : le bloc achat pousse vers le bas */
.pc>a{display:block}
.selwrap,.pfix{margin-top:auto}
/* mini-description 2 lignes clampée (produits non fleur/résine) */
.pdesc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;color:var(--muted);margin-top:5px;line-height:1.4}
/* intensité en pastilles (fleur/résine) — verbatim réf card Guava+ home */
.pint{display:inline-flex;align-items:center;gap:3px;margin-left:6px}
.pint i{width:8px;height:8px;border-radius:50%;background:var(--lime);display:inline-block}
.pint i.off{background:#dcd6c4}
.pk{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:700}
.pn{display:block;font-family:'DM Serif Display',serif;font-size:20px;margin:2px 0 6px;line-height:1.15}
.pt{display:block;font-size:13px;color:var(--muted)}
.des{font-size:13px;color:var(--muted)}.des b{color:var(--rust);font-size:15px}
.selwrap{position:relative;margin:10px 0 8px}
/* T77-CBDbatch (Allan 24/07) : variante sur DEUX lignes propres (ligne 1 « 1 g — 12 € », ligne 2
   « 12 €/g »), chacune white-space:nowrap → JAMAIS de symbole € orphelin en 2e ligne, même à 390. */
.seldisplay{border:1.5px solid var(--forest);border-radius:10px;padding:8px 34px 8px 12px;background:#fff;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;line-height:1.22;min-width:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2314301F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center}
.seldisplay b{font-weight:700;font-size:14px;color:var(--forest);white-space:nowrap;max-width:100%}
.seldisplay small{font-size:11.5px;color:var(--muted);white-space:nowrap}
.selwrap select{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}
.pfix{margin:10px 0 8px;font-weight:800;font-size:19px;color:var(--forest)}
.pfix s{font-weight:600;font-size:14px;color:var(--muted);margin-left:8px}
.addbtn{display:block;width:100%;border:0;border-radius:10px;background:var(--forest);color:var(--cream);font-family:inherit;font-size:14px;font-weight:700;padding:12px;cursor:pointer;margin-top:2px}
.addbtn:active{transform:scale(.98)}
.addbtn:disabled{background:var(--soft);cursor:not-allowed}
.pc.inactive{opacity:.6}
/* carrousels horizontaux (PDP « vous aimerez aussi », etc.) */
.crow .pc{flex:0 0 210px;scroll-snap-align:start}
@media(max-width:560px){.crow .pc{flex:0 0 66vw;max-width:260px}}

/* ============================================================================
   FICHE PRODUIT (PDP) CANONIQUE — verbatim /demo/cbdsf-guava/ (Allan 24/07 :
   « Canonique = la fiche qu'on a faite à part »). Scopé sous #pdp = zéro collision.
   ============================================================================ */
:root{--cream-2:#FBF8F1}
#pdp{display:block}
#pdp .fiche{display:grid;grid-template-columns:1fr 1fr;gap:44px;padding:20px 0 0;align-items:stretch}
@media(max-width:880px){#pdp .fiche{grid-template-columns:1fr;gap:24px}}
#pdp .gallery{display:flex;flex-direction:column;gap:12px}
#pdp .media{position:relative;background:radial-gradient(120% 90% at 50% 30%,#fff 0%,var(--mint) 70%,#dbe8d6 100%);border-radius:26px;padding:26px;border:1.5px solid #8E8572;box-shadow:var(--shadow);flex:1;display:flex;align-items:center;justify-content:center;min-height:320px;max-height:min(68vh,620px)}/* T51 — vignette PDP : contour marqué cohérent avec les cards (.pim), teinte ≥3:1 vs crème */
#pdp .media img{filter:drop-shadow(0 30px 30px rgba(20,48,31,.32));max-height:100%;max-width:100%;width:auto;object-fit:contain}
@media(max-width:880px){#pdp .media{flex:none;height:min(46vh,420px);min-height:280px}}
#pdp .tag-new{position:absolute;top:18px;left:18px;background:var(--rust);color:#fff;font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:7px 13px;border-radius:999px}
#pdp .tag-flag{position:absolute;top:18px;right:18px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600;color:var(--forest)}
#pdp .eyebrow{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--rust)}
#pdp .pname{font-family:'DM Serif Display',serif;font-size:52px;line-height:1;margin:8px 0 6px;color:var(--forest)}
@media(max-width:880px){#pdp .pname{font-size:40px}}
#pdp .lede{color:var(--muted);font-size:16px;margin:0 0 18px;line-height:1.5}
#pdp .specs{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 20px;border:0;border-radius:0;overflow:visible}
#pdp .chip{display:inline-flex;align-items:center;gap:7px;background:var(--cream-2);border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:14px;font-weight:600;color:var(--forest)}
#pdp .chip small{color:var(--muted);font-weight:500}
#pdp .gauge{display:flex;gap:4px}
#pdp .dot{width:9px;height:9px;border-radius:50%;background:#d7d0be}
#pdp .dot.on{background:var(--lime)}
#pdp .buy{background:var(--cream-2);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow)}
#pdp .buy h3{font-size:20px;margin:0 0 4px;color:var(--forest)}
#pdp .buy .hint{font-size:13px;color:var(--muted);margin:0 0 14px}
#pdp .stepper{display:inline-flex;align-items:center;border:1.5px solid var(--forest);border-radius:999px;overflow:hidden}
#pdp .stepper button{width:44px;height:46px;border:0;background:transparent;font-size:22px;color:var(--forest);cursor:pointer;font-weight:700}
#pdp .stepper button:hover{background:var(--mint)}
#pdp .stepper input{width:64px;height:46px;border:0;text-align:center;font-size:18px;font-weight:700;color:var(--forest);background:transparent;font-family:'DM Sans'}
#pdp .buyfix{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:6px 0 4px}
#pdp .bigprice{font-family:'DM Serif Display',serif;font-size:38px;color:var(--forest)}
#pdp .bigprice s{font-family:'DM Sans';font-size:18px;color:var(--muted);font-weight:600;margin-left:8px}
#pdp .savings{font-size:13px;color:#2f7d4e;font-weight:600;min-height:18px;margin:10px 0 2px;line-height:1.7}
#pdp .savings .sdot{color:#b9c4b9;font-weight:400}
#pdp .addcart{margin-top:14px;width:100%;border:0;background:var(--forest);color:#fff;font-size:16px;font-weight:700;padding:16px;border-radius:12px;cursor:pointer;transition:.15s;font-family:inherit}
#pdp .addcart:hover{background:var(--forest-2)}
#pdp .addcart:active{transform:scale(.99)}
#pdp .addcart.done{background:#2f7d4e}
#pdp .addcart:disabled{background:var(--soft);cursor:not-allowed}
#pdp .section{padding:36px 0 0}
#pdp .section h2{font-size:30px;color:var(--forest);margin:0 0 6px}
#pdp .section .sub{color:var(--muted);margin:0 0 22px}
#pdp .simbanner{display:flex;gap:8px;align-items:center;color:var(--muted);padding:4px 2px;font-size:12px;margin:0 0 30px;opacity:.75}
#pdp .tech-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
@media(max-width:820px){#pdp .tech-grid{grid-template-columns:1fr;gap:22px}}
#pdp .tech-desc{background:var(--cream-2);border:1px solid var(--line);border-radius:16px;padding:24px}
#pdp .tech-desc h2{font-size:30px;color:var(--forest);margin:0 0 12px}
#pdp .tech-desc p{color:#3d4a3d;margin:0 0 12px;line-height:1.6}
#pdp .vibes{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 4px}
#pdp .vibe{font-size:12.5px;font-weight:600;border-radius:999px;padding:5px 11px;background:#fff;border:1px solid var(--line);color:var(--forest)}
#pdp .jauges{margin-top:22px;display:flex;flex-direction:column;gap:20px}
#pdp .jrow{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:16px;font-size:14px}
@media(max-width:520px){#pdp .jrow{grid-template-columns:110px 1fr}}
#pdp .jlabel{font-weight:700;color:var(--ct)}
#pdp .bar{height:10px;background:#eae3d2;border-radius:999px;position:relative;overflow:visible}
#pdp .bar i{display:block;height:100%;background:var(--c);border-radius:999px;position:relative;font-style:normal}
#pdp .jbadge{position:absolute;right:0;top:50%;transform:translate(50%,-50%);width:30px;height:30px;border-radius:50%;background:#fff;border:2.5px solid var(--ct);display:grid;place-items:center;font-size:15px;box-shadow:0 3px 9px rgba(20,48,31,.18);z-index:2}
#pdp .tech-specs{background:var(--cream-2);border:1px solid var(--line);border-radius:16px;padding:22px}
#pdp .tech-specs h3{font-family:'DM Serif Display',serif;font-weight:400;font-size:22px;color:var(--forest);margin:0 0 14px}
#pdp .spectable{width:100%;border-collapse:collapse;font-size:14px}
#pdp .spectable td{padding:10px 4px;border-bottom:1px solid var(--line);vertical-align:top}
#pdp .spectable td:first-child{color:var(--muted);width:50%}
#pdp .spectable td:last-child{color:var(--forest);font-weight:600;text-align:right}
#pdp .spectable tr:last-child td{border-bottom:0}
#pdp .simtag{font-size:10px;font-weight:700;color:#b08a3a;background:#FBEFD8;border:1px solid #E7C98A;border-radius:5px;padding:1px 5px;margin-left:6px;vertical-align:middle;text-transform:uppercase;letter-spacing:.04em}
#pdp .simnote{font-size:12px;color:#b08a3a;margin:12px 0 0}
#pdp .trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media(max-width:760px){#pdp .trust{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
/* T39b : le tcard doit rester en colonne (icône / titre / sous-titre) — la règle générale
   .trust div{display:flex} le forçait en rangée horizontale → min-content large → débordement
   à droite au viewport 390. On restaure la mise en page voulue par .tcard b/small ci-dessous. */
#pdp .tcard{display:block;min-width:0;background:var(--cream-2);border:1px solid var(--line);border-radius:14px;padding:18px}
#pdp .tcard b,#pdp .tcard small{overflow-wrap:anywhere}
#pdp .tcard .ic{font-size:22px}
#pdp .tcard b{display:block;margin:8px 0 2px;color:var(--forest)}
#pdp .tcard small{color:var(--muted)}
#pdp .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:760px){#pdp .cards{grid-template-columns:1fr}}
#pdp .optin{background:var(--mint);color:var(--ink);border:1px solid #cfe0c8;border-radius:22px;padding:30px;display:grid;grid-template-columns:1.3fr 1fr;gap:24px;align-items:center;position:relative;overflow:hidden}
#pdp .optin::before{content:"🌿";position:absolute;right:-24px;bottom:-56px;font-size:230px;line-height:1;opacity:.09;pointer-events:none;z-index:0}
#pdp .optin>*{position:relative;z-index:1}
@media(max-width:760px){#pdp .optin{grid-template-columns:1fr}}
#pdp .optin h2{color:var(--forest);font-size:26px;margin:0 0 8px}
#pdp .optin p{margin:0;color:#3d4a3d;font-size:15px}
#pdp .optin .fine{font-size:12px;color:var(--muted);margin-top:8px}
#pdp .optin .form{display:flex;gap:10px;flex-wrap:wrap}
#pdp .optin .phone{flex:1;min-width:210px;display:flex;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
#pdp .optin .phone:focus-within{border-color:var(--forest)}
#pdp .optin .ccode{border:0;border-right:1px solid var(--line);background:var(--cream-2);padding:0 22px 0 12px;font-weight:600;color:var(--forest);font-family:inherit;cursor:pointer}
#pdp .optin .pnum{flex:1;min-width:0;border:0;padding:14px;font-size:15px;font-family:inherit}
#pdp .optin input:focus{outline:none}
#pdp .optin .go{border:0;background:var(--forest);color:#fff;font-weight:700;padding:14px 20px;border-radius:10px;cursor:pointer;font-family:inherit}
#pdp .crumb{font-size:12.5px;color:var(--muted);margin:0 0 6px}
#pdp .crumb a{color:var(--muted)}

/* ============================================================================
   T13 — FILTRES RAYON GROUPÉS PAR FAMILLE (Allan : « tout sur une ligne, DA olipop »)
   1 ligne recherche + tri, puis rangées de chips par famille. DA CBDSP crème/forest/rust.
   ============================================================================ */
.rf-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:6px 0 14px}
.rf-search{flex:1;min-width:220px;display:flex;align-items:center;gap:9px;background:var(--card);border:1.5px solid var(--line2);border-radius:12px;padding:10px 14px}
.rf-search svg{width:17px;height:17px;color:var(--soft);flex:none}
.rf-search input{border:0;background:transparent;font-family:inherit;font-size:14px;color:var(--forest);width:100%;outline:none}
.rf-sort{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--soft);white-space:nowrap}
.rf-sort select{font-family:inherit;font-weight:700;font-size:13px;color:var(--forest);background:var(--card);border:1.5px solid var(--line2);border-radius:12px;padding:10px 30px 10px 12px;cursor:pointer}
.rf-facets{display:flex;flex-direction:column;gap:10px;margin:0 0 14px}
.rf-grp{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.rf-lbl{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--rust);min-width:62px}
.rf-emo{display:inline-block;margin-right:5px;font-size:12px;letter-spacing:0;vertical-align:-1px;filter:saturate(.9)}
.rf-pill{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line2);background:var(--cream2);border-radius:999px;padding:7px 14px;font-weight:700;font-size:13px;color:var(--forest);cursor:pointer;transition:.15s}
.rf-pill:hover{border-color:var(--forest)}
.rf-pill.on{background:var(--forest);color:var(--cream);border-color:var(--forest)}
.rf-pill b{font-weight:700;font-size:11px;opacity:.5}
.rf-pill.on b{opacity:.8}
.rf-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
/* T77-CBDbatch (Allan 24/07) — page CBD+ : barre STICKY recherche + chips d'ancrage par groupe.
   Tap chip = scroll au groupe (scroll-margin-top compense header + barre sticky). */
.cbp-nav{position:sticky;position:-webkit-sticky;top:var(--nav-h);z-index:40;background:var(--bg);padding:12px 0 10px;margin:0 0 10px;border-bottom:1px solid var(--line)}
.cbp-search{display:flex;align-items:center;gap:9px;background:var(--card);border:1.5px solid var(--line2);border-radius:12px;padding:10px 14px;margin:0 0 10px}
.cbp-search svg{width:17px;height:17px;color:var(--soft);flex:none}
.cbp-search input{border:0;background:transparent;font-family:inherit;font-size:14px;color:var(--forest);width:100%;outline:none}
.cbp-anchors{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px;scrollbar-width:none}
.cbp-anchors::-webkit-scrollbar{display:none}
.cbp-anchor{flex:none;display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line2);background:var(--cream2);border-radius:999px;padding:7px 14px;font-family:inherit;font-weight:700;font-size:13px;color:var(--forest);cursor:pointer;white-space:nowrap;transition:.15s}
.cbp-anchor:hover{border-color:var(--forest);background:var(--forest);color:var(--cream)}
.cbp-anchor b{font-weight:800;font-size:11px;opacity:.55}
.cbp-anchor:hover b{opacity:.9}
.cbp-grp{scroll-margin-top:calc(var(--nav-h) + 116px)}
.rf-chip{border:0;background:var(--forest);color:var(--cream);border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:700;cursor:pointer}
.rf-reset{border:0;background:transparent;color:var(--rust);font-weight:700;font-size:12.5px;cursor:pointer;padding:6px 4px;align-self:center}
@media(max-width:560px){.rf-lbl{min-width:100%;margin-bottom:-2px}}

/* ============================================================================
   CCSM-CSSBTN 24/07 — retour Allan (design-lead) : « tous les boutons full
   width en mobile ». Portée = tout ce qui charge assets/site.css (hero CTA
   boutiques/affiliation/demo, cta-banner, checkout commande.html, age-gate,
   drawer panier, confirmation.html CTA isolées). .addbtn (cartes produit) est
   DÉJÀ width:100% inconditionnel (ligne ~788) → rien à faire, non re-listé ici.
   Exclusions volontaires (bon sens, hors périmètre "CTA") : icônes header
   (.cnico/.cnburger/.cnlogo — absentes de ce site, n/a), steppers qty
   (.qtyrow .q button), chips/pills de filtre (.subchips/.catbar/.facetbar/
   .tilesw/.rf-pill), badges (.badge/.pbadge/.pflag), sélecteurs segmentés
   (.pdp .opts button, .wa2-opt) — ce sont des pickers, pas des CTA.
   NOTÉ POUR CCSM-D (hors lane site.css, inatteignable d'ici) : le bouton
   opt-in newsletter ".ob" et le lien "Lire l'article →" (.blogcard .ob) sont
   stylés en inline <style> DANS index.html (qui ne charge même pas site.css) ;
   idem pour les paires ".cf-artefact .btnrow .btn" et ".bl-actions .btn" dans
   le <style> inline de confirmation.html (bon de livraison / PDF+Fermer) —
   ces 2 dernières restent CÔTE À CÔTE sur mobile, hors de portée ici.
   ============================================================================ */
@media(max-width:760px){
  .btn{width:100%}
  .hero .cta{flex-direction:column}
  .hero .cta .btn{width:100%}
  .dfoot .acts{flex-direction:column}
  .dfoot .acts .btn{flex:none;width:100%}
}

/* ============================================================================
   KRYPTONIC — déclinaison du shell CBDSP (Brain 28/07, CORRIGÉ) : base CRÈME conservée,
   seul l'accent vert forest → JAUNE #ECBF29 (fond de bouton/badge/filet, TEXTE NAVY #030E16
   dessus). Le jaune ne sert JAMAIS de couleur de texte sur clair. Navy = texte + logo. ============================================================================ */
.btn-primary,.addbtn,.addcart,.go,#pdpadd,.cta.p{background:#efc100!important;color:#030E16!important;border-color:#efc100!important}
.btn-primary:hover,.addbtn:hover,.addcart:hover,.go:hover,#pdpadd:hover{background:#d4ab00!important}
/* badges/pastilles jaune : texte navy (AA) */
.badge.mol,.pbadge,.badge.promo,.pflag,.mh-kick,.nav-cart .cc,.cc,.rf-pill.on,.cta.s{color:#030E16!important}
.cta.s{background:transparent!important;color:#030E16!important;border:1.6px solid #efc100!important}

/* --- APLATS qui utilisaient --accent/--forest comme FOND : jaune + texte navy ---------------
   (le shell écrivait var(--cream)/#fff dessus → illisible sur jaune, on repasse tout en navy) */
button.add,.pcard .add,.add,.catbar a.on,.facetbar button.on,.wa2-steps span.on,
.grid[data-tile="etiquette"] .pcard .price,.grid[data-tile="vitrine"] .pcard .add,
.facetbar button.fpromo.on,.dtiers .mark.hit{background:#efc100!important;color:#030E16!important}
.cta-banner{background:#efc100!important;color:#030E16!important;border:0!important}
.cta-banner h2,.cta-banner p,.cta-banner *{color:#030E16!important}
.cta-banner .btn-primary{background:#030E16!important;color:#efc100!important;border-color:#030E16!important}
.cta-banner .btn-primary:hover{background:#0D2129!important}
/* jauge fidélité + encart cadeau : le dégradé vert du shell repasse en jaune */
.dtiers .fill{background:linear-gradient(90deg,#efc100,#d4ab00)!important}
.dgift{border-bottom-color:#efc100!important;background:linear-gradient(90deg,rgba(239,193,0,.16),transparent)!important}
/* focus/hover : halos verts du shell -> jaune */
.pdp .opts button.on{box-shadow:0 0 0 3px rgba(239,193,0,.30)!important}
.aff-form input:focus,.aff-form select:focus{box-shadow:0 0 0 3px rgba(239,193,0,.30)!important}

/* --- TEXTES qui héritaient du jaune sur fond clair : repassés en navy (jaune = 1,5:1) ------- */
.crumb a,.carousel .chead a,.gauges .grow:nth-child(1) .gval,
.explainer .head span,.spotlight-body span.kick{color:#030E16!important}
/* header anchor hardening */
[id]{scroll-margin-top:86px}

/* ===== Footer unifié .ftr (noir --forest, complet) — aligné sur la home, ajouté 20/09 ===== */
.ftr{background:var(--forest);color:#C9D3DA;margin-top:46px;padding:44px 0 26px;font-size:14px}
.ftr-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:28px}
.ftr-logo{height:30px;width:auto;filter:brightness(0) invert(1);margin-bottom:10px;display:block}
.ftr-brand p{color:#9FB0BC;margin:0 0 14px;max-width:340px;line-height:1.6}
.ftr-pay{font-size:13px;color:#C9D3DA}
.ftr-col h4{color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.1em;margin:0 0 12px}
.ftr-col a{display:block;color:#9FB0BC;padding:5px 0}
.ftr-col a:hover{color:var(--lime)}
.ftr-bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.12);margin-top:28px;padding-top:18px;font-size:13px;color:#8B9AA6}
@media(max-width:860px){.ftr-top{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ftr-top{grid-template-columns:1fr}}

/* ===== A11y + contraste (audit DA 20/09) ===== */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#pdp .optin input:focus-visible{outline:2px solid var(--forest);outline-offset:2px}
.nav-burger{min-width:44px;min-height:44px}
.crumb a{color:var(--ink)}
.carousel .chead a{color:var(--ink)}