/* ============================================================================
   TODECO — DESIGN-SYSTEM DE PRODUCTION (extrait fidèlement de Todeco_fiche_demo_v4.html).
   Valeurs recopiées de la maquette v4 validée. NE PAS réinventer : si ça diverge, c'est un bug.
   Deux couches :
     - MARQUE FIXE (logo/header/CTA/échelle/typo/ink/soft) — stable cross-produit.
     - IDENTITÉ produit (--identity-*) — injectée par page (le Media Plan fournit primary/accent/tint ;
       le système dérive le reste, ex. --identity-primary-dark via color-mix).
   Polices self-hébergées (woff2 local, preload côté page, font-display:swap) — zéro FOUC, zéro réseau.
   ========================================================================== */

@font-face{font-family:'Bricolage Grotesque';src:url('/assets/fonts/bricolage.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/assets/fonts/inter.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap}

:root{
  /* ---- MARQUE FIXE (ne consomme JAMAIS --identity-*) ---- */
  --ink:#181a11;
  --bg:#ffffff;
  --soft:#f2f4ee;
  --line:#e6e7e1;
  --muted:#6c6f64;
  --brand:#181a11;                 /* CTA marque, stable cross-produit */
  --space:clamp(48px,6vw,88px);
  --inner-max:1520px; --hero-max:1640px; --header-max:1440px;
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;

  /* ---- IDENTITÉ PRODUIT (défaut = palette forêt de la v4 ; surchargée par page) ---- */
  --identity-primary:#1a3c2b;      /* ex --forest */
  --identity-accent:#5e7c62;       /* ex --sage */
  --identity-tint:#e9efe8;         /* ex --sage-soft */
  --identity-mood:light;
  --identity-primary-dark:color-mix(in srgb, var(--identity-primary) 70%, #000); /* ex --forest-2, dérivé */
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{font-family:var(--body);color:var(--ink);background:var(--bg);line-height:1.65;font-size:16.5px;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.inner{max-width:var(--inner-max);margin:0 auto;padding:0 32px}
.eyebrow{font-family:var(--body);font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--identity-accent)}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.04;color:var(--ink)}

.section-head{display:flex;align-items:center;gap:18px;margin-bottom:clamp(24px,3vw,40px)}
.section-head h2{font-size:clamp(1.9rem,3.4vw,2.9rem)}
.section-head .num{font-family:var(--display);font-size:1rem;color:var(--identity-accent);font-weight:600;padding-bottom:.5rem;white-space:nowrap}
.tick{width:34px;height:2px;background:var(--identity-primary);margin-bottom:.85rem}

/* ---------- HEADER (marque fixe) ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.header-in{max-width:var(--header-max);margin:0 auto;padding:0 32px;height:64px;display:flex;align-items:center;gap:22px}
.brand{font-family:var(--display);font-weight:800;font-size:1.4rem;letter-spacing:-.03em;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:7px;white-space:nowrap}
.brand-mk{color:var(--identity-primary)}
.header-right{margin-left:auto;display:flex;align-items:center;gap:16px}
/* MÉGA-MENU Univers (CSS-only : hover + focus-within) */
.nav{display:flex;align-items:center}
.nav-mega{position:relative}
.mega-btn{font:inherit;font-weight:600;font-size:.95rem;color:var(--ink);background:transparent;border:0;cursor:pointer;padding:8px 2px;display:flex;align-items:center;gap:6px;white-space:nowrap}
.mega-btn .chev{color:var(--muted);transition:transform .2s}
.nav-mega:hover .chev,.nav-mega:focus-within .chev,.nav-mega.open .chev{transform:rotate(180deg)}
.mega-panel{position:absolute;top:calc(100% + 12px);left:0;width:min(680px,92vw);background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.14);padding:16px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.16s;z-index:60}
.nav-mega:hover .mega-panel,.nav-mega:focus-within .mega-panel,.nav-mega.open .mega-panel{opacity:1;visibility:visible;transform:translateY(0)}
.mega-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.mega-card{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:12px;text-decoration:none;color:var(--ink);transition:background .14s}
.mega-card:hover{background:var(--soft)}
.mega-ic{width:38px;height:38px;flex:none;display:flex;align-items:center;justify-content:center;font-size:1.2rem;border-radius:10px;background:linear-gradient(150deg,hsl(var(--h,145) 32% 93%),hsl(var(--h,145) 28% 85%))}
.mega-txt{display:flex;flex-direction:column;line-height:1.18;min-width:0}
.mega-name{font-weight:700;font-size:.9rem;letter-spacing:-.01em}
.mega-n{font-size:.72rem;color:var(--muted)}
.mega-foot{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);text-align:center}
.mega-soon{font-size:.74rem;color:var(--muted)}
/* 4 univers visibles (avant "Tous les univers") */
.nav{gap:20px}
.nav-quick{font-weight:600;font-size:.9rem;color:var(--ink);text-decoration:none;padding:6px 2px;white-space:nowrap;opacity:.82;transition:opacity .15s}
.nav-quick:hover,.nav-quick[aria-current]{opacity:1}
/* RECHERCHE (barre) — le plus gros levier de revenu, visible */
.hd-search{display:flex;align-items:center;margin-left:auto;width:min(300px,28vw);background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:2px 4px 2px 14px}
.hd-search input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:.9rem;color:var(--ink);outline:none}
.hd-search input::placeholder{color:var(--muted)}
.hd-search button{border:0;background:transparent;cursor:pointer;color:var(--muted);display:flex;padding:6px;border-radius:50%}
.hd-search button:hover{color:var(--identity-primary)}
.hd-search svg{width:18px;height:18px}
.header-right{margin-left:14px}
.mnav-search{display:none}
@media(max-width:1120px){ .nav-quick{display:none} .hd-search{width:min(240px,24vw)} }
/* droite : sélecteurs + panier + burger */
.store-select{display:flex;gap:8px}
.store-select select{font:inherit;font-size:.82rem;padding:5px 8px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);cursor:pointer}
/* Deux axes distincts : 🌐 langue de lecture · 🚚 pays de livraison (= le prix). Icône = repère anti-confusion. */
.sel-grp{display:inline-flex;align-items:center;gap:5px}
.sel-ic{width:15px;height:15px;flex:none;color:var(--muted)}
.sel-grp.sel-ship .sel-ic{color:var(--identity-primary)}
.cart-link{position:relative;color:var(--ink);display:flex}
.cart-link svg{width:22px;height:22px}
.cart-count{position:absolute;top:-6px;right:-8px;background:var(--identity-primary);color:#fff;font-size:.65rem;font-weight:700;min-width:16px;height:16px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 3px}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px}
.burger span{width:22px;height:2px;background:var(--ink);border-radius:2px;transition:.2s}
.mnav-panel{display:none}
@media(max-width:920px){
  .nav-mega{display:none}
  .header-right .store-select{display:none}
  .hd-search{display:none}
  .burger{display:flex}
  .header-in{gap:10px;padding:0 18px}
  .mnav-search{display:flex;align-items:center;margin:14px 18px 6px;background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:2px 4px 2px 14px}
  .mnav-search input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:1rem;color:var(--ink);outline:none}
  .mnav-search button{border:0;background:transparent;color:var(--muted);display:flex;padding:8px;cursor:pointer}
  .mnav-search svg{width:19px;height:19px}
  .mnav-toggle:checked ~ .header-in .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .mnav-toggle:checked ~ .header-in .burger span:nth-child(2){opacity:0}
  .mnav-toggle:checked ~ .header-in .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .mnav-panel{display:block;max-height:0;overflow:hidden;transition:max-height .25s ease;background:#fff;border-top:1px solid var(--line)}
  .mnav-toggle:checked ~ .mnav-panel{max-height:82vh;overflow:auto}
  .mnav-title{padding:14px 18px 4px;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
  .mnav-panel>a{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:600}
  .mnav-panel>a em{margin-left:auto;font-style:normal;font-size:.78rem;color:var(--muted)}
  .mnav-store{display:flex;gap:8px;padding:14px 18px}
  .mnav-store select{flex:1;font:inherit;padding:9px;border:1px solid var(--line);border-radius:8px;background:#fff}
}
/* Sélecteurs langue (contenu) + pays (prix) — toujours visibles, mobile inclus */
.store-select{display:flex;gap:10px;align-items:center}
.store-select select{font:inherit;font-size:.85rem;padding:4px 8px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);cursor:pointer;line-height:1.2}
.cta.is-disabled,.cta:disabled{opacity:.5;cursor:not-allowed}
.cart-link{position:relative;display:inline-flex;color:var(--ink)}
.cart-count{position:absolute;top:-8px;right:-9px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:var(--brand,#181a11);color:#fff;font-size:.66rem;line-height:16px;text-align:center;font-weight:700}

/* ---------- HERO ---------- */
.hero{max-width:var(--hero-max);margin:0 auto;display:grid;grid-template-columns:1.04fr .96fr;min-height:min(88vh,820px);position:relative;background:var(--bg);border-bottom:1px solid var(--line)}
/* A6 — GALERIE : colonne = zone image (hero-stage) + rail de vignettes DESSOUS (jamais en overlay). */
.hero-visual{position:relative;display:flex;flex-direction:column;background:var(--bg)}
.hero-stage{position:relative;flex:1;min-height:0;overflow:hidden;background:var(--bg)}
/* PACKSHOT = produit ENTIER (object-fit:contain, fond neutre autour). cover UNIQUEMENT pour une bannière
   (hero généré) via .is-banner. Règle template globale : un packshot ne doit JAMAIS être rogné. */
.hero-stage>img{width:100%;height:100%;object-fit:contain}
.hero-visual.is-banner .hero-stage>img{object-fit:cover}
/* FIX hero « géant » — BORNE la hauteur du média. Cause : rien ne cappe la hauteur, donc une image PORTRAIT
   (ex. 713×1500) fait grossir la ligne du grid jusqu'à ~1400px (effet bugué), alors qu'un carré/paysage passe.
   Cap = hauteur cible du hero ; object-fit:contain letterbox proprement. Couvre les pages récentes (.hero-stage)
   ET les anciennes générations où l'image principale est un <img> nu enfant direct de .hero-visual (pré-wrapper).
   Pur CSS = LIVE sur les 277 × langues, zéro régénération. */
.hero-stage{max-height:min(88vh,820px)}
.hero-visual>img{width:100%;height:auto;max-height:min(88vh,820px);object-fit:contain;background:var(--bg)}
/* GALERIE HERO RICHE (média de PRODUCTION) : slides = set d'infographies, chacun un .ig2-stage (image + plaques
   localisées, overlay géré par window.igRefresh). Un seul slide visible ; overlay auto-fit + auto-contraste. */
.hero-slide{display:none;width:100%}
.hero-slide.active{display:block}
.hero-visual.is-ig .hero-stage .ig2-stage{border-radius:0;box-shadow:none;width:100%;max-width:min(88vh,820px);margin:0 auto;background:var(--bg)}
.hero-visual.is-ig .hero-stage .ig2-stage>img{object-fit:contain}
/* HERO PACKSHOT PORTRAIT : le 1er slide est souvent le packshot (photo Amazon), qui peut être PORTRAIT (ex.
   925×1500 pour un étendoir) -> à width:100% il déborde la hauteur du hero-stage et sort du cadre. Le packshot
   n'a AUCUN overlay -> on peut le mettre en contain SANS risque d'alignement (contrairement aux figures f2 à
   overlay). `container-type:normal` = pas de containment (pas de cqw ici) -> aucun collapse. Ciblé .packshot only. */
.hero-visual.is-ig .hero-stage .hero-slide .f2fig.packshot{container-type:normal;text-align:center}
.hero-visual.is-ig .hero-stage .hero-slide .f2fig.packshot>img{width:auto;max-width:100%;max-height:min(88vh,820px);margin:0 auto;display:inline-block}
/* A4 : utilitaires de FIT par type d'image (émis par assembly imgFit(role)) — priment sur le défaut du
   conteneur. Une image lifestyle routée dans une carte reste immersive ; un packshot reste entier. */
.mod-img img.fit-cover,.vcard-media img.fit-cover{object-fit:cover;object-position:50% 25%}   /* cadrage haut : les têtes sont en haut d'une photo -> jamais rognées (le bas, moins clé, part sous le texte) */
.mod-img img.fit-contain,.vcard-media img.fit-contain{object-fit:contain}
/* vignettes SOUS l'image : rangée statique centrée, style léger (PAS une carte de feature) */
.hero-thumbs{display:flex;flex-flow:row wrap;gap:10px;justify-content:center;align-items:center;padding:14px 16px;background:var(--bg)}
.hero-thumbs img{width:58px;height:58px;object-fit:cover;border-radius:10px;border:2px solid transparent;cursor:pointer;opacity:.72;transition:opacity .2s,border-color .2s}
.hero-thumbs img:hover{opacity:1}
/* pastilles de position — MOBILE (swipe), masquées en desktop */
.gallery-dots{position:absolute;left:0;right:0;bottom:14px;display:none;justify-content:center;gap:8px;z-index:3}
.gdot{width:8px;height:8px;border-radius:50%;border:none;padding:0;background:rgba(0,0,0,.25);cursor:pointer;transition:background .2s}
.gdot.active{background:var(--identity-primary)}
.hero-thumbs img.active{border-color:var(--identity-primary);opacity:1}
.hero-thumbs:empty{display:none}   /* robustesse "1 seule image" : pas de bande de vignettes vide */
.hero-panel{display:flex;align-items:center;background:var(--bg);position:relative;z-index:2}
.hero-panel-in{padding:clamp(40px,5vw,76px) clamp(40px,5.5vw,88px);max-width:640px}
.hero-panel-in .eyebrow{display:block;margin-bottom:20px}
.hero h1{font-size:clamp(2.4rem,3.8vw,3.5rem);margin-bottom:18px;text-wrap:balance;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.rating{display:flex;align-items:center;gap:8px;font-size:.86rem;color:var(--muted);margin-bottom:22px}
.rating strong{color:var(--ink,#1d1f17);font-weight:700}
.rating .rating-src{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.rating .rating-src:hover{color:var(--ink,#1d1f17)}
.stars{color:#caa53a;letter-spacing:1px;font-size:.95rem}
.lede{font-size:1.06rem;color:#4a4d43;margin-bottom:30px;max-width:46ch}
.price-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px;margin-bottom:28px}
.price{font-family:var(--display);font-size:2.1rem;font-weight:700}
.price-old{color:var(--muted);font-size:1.15rem;text-decoration:line-through}
.price-save{font-size:.82rem;font-weight:700;color:#b0241a;background:#fdecea;border-radius:999px;padding:2px 10px}
.price-note{font-size:.82rem;color:var(--muted)}
.stock{font-size:.82rem;font-weight:600;color:#1a7f37;margin:-12px 0 22px}
.stock.is-out{color:#b0241a}
.notify{margin:0 0 22px;gap:10px}
/* display:flex UNIQUEMENT quand pas [hidden] — sinon flex écrasait l'attribut hidden -> notify visible même en stock. */
.notify:not([hidden]){display:flex;flex-wrap:wrap}
.notify-intro{flex:0 0 100%;font-size:.85rem;color:var(--muted);margin:0 0 2px}
.notify input{flex:1;min-width:180px;height:52px;padding:0 18px;border:1.5px solid var(--line);border-radius:999px;font-family:var(--body);font-size:.95rem;background:#fff;color:var(--ink)}
.notify input:focus{outline:none;border-color:var(--identity-primary)}
.notify button{height:52px;padding:0 26px;border:1.5px solid var(--ink);border-radius:999px;background:var(--ink);color:#fff;font-family:var(--body);font-size:.95rem;font-weight:600;cursor:pointer;transition:opacity .16s}
.notify button:hover{opacity:.85}
.opt-label{font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.swatches{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.swatch{padding:9px 18px;border:1.5px solid var(--line);border-radius:999px;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .18s;white-space:nowrap}
.swatch.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.buy-row{display:flex;gap:14px;margin-bottom:26px}
.qty{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:999px;overflow:hidden}
.qty button{width:44px;height:52px;background:none;border:none;font-size:1.2rem;cursor:pointer;color:var(--ink)}
.qty span{width:34px;text-align:center;font-weight:600}
.cta{flex:1;background:var(--brand);color:#fff;border:none;border-radius:999px;padding:0 32px;height:54px;font-family:var(--body);font-size:1.02rem;font-weight:600;cursor:pointer;transition:transform .16s,box-shadow .16s;box-shadow:0 10px 26px rgba(24,26,17,.22)}
.cta:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(24,26,17,.28)}
.minibens{display:flex;gap:10px;margin-bottom:22px}
.miniben{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 8px;background:var(--identity-tint);border-radius:14px;text-align:center}
.miniben svg{width:22px;height:22px;color:var(--identity-primary)}
.miniben span{font-size:.76rem;font-weight:600;line-height:1.25;color:var(--identity-primary-dark)}
.ship{display:flex;align-items:center;gap:9px;font-size:.85rem;color:#4a4d43;background:#fff;border:1px dashed var(--line);border-radius:12px;padding:11px 15px;margin-bottom:20px}
.ship svg{width:18px;height:18px;color:var(--identity-primary);flex:none}
.trust{display:flex;flex-wrap:wrap;gap:18px;font-size:.8rem;color:var(--muted)}
.trust span{display:flex;align-items:center;gap:6px}
.trust svg{width:15px;height:15px;color:var(--identity-accent)}

/* ---------- BENEFITS ---------- */
.benefits{padding:var(--space) 0}   /* fond piloté par la ZÉBRURE (.stripe-*), pas codé en dur */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;grid-auto-flow:dense} /* v4: 1 large + 4 = 2 lignes pleines */
/* Repli robuste à N quelconque (LOT 3 ajoute .bento--uniform quand N ne complète pas les lignes) :
   grille auto-fit sans card large => jamais de trou, quel que soit le nombre de bénéfices. */
.bento--uniform{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.bento--uniform .card.wide{grid-column:auto;background:#fff;border-color:var(--line)}
.bento--uniform .card.wide *{color:inherit}
.bento--uniform .card.wide .ico{background:var(--identity-tint)}
.bento--uniform .card.wide .ico svg{color:var(--identity-primary)}
.bento--uniform .card.wide h3{font-size:1.18rem;font-weight:600}
.bento--uniform .card.wide p{color:var(--muted);font-size:.95rem;max-width:none}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px 28px;transition:transform .2s,box-shadow .2s,border-color .2s}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(20,30,22,.08);border-color:#cdd6cd}
.card.wide{grid-column:span 2;display:flex;flex-direction:column;justify-content:center;background:var(--identity-primary);border-color:var(--identity-primary)}
.card.wide *{color:#eef3ee}
.card.wide .ico{background:rgba(255,255,255,.12)}
.card.wide .ico svg{color:#dfeee0}
.ico{width:50px;height:50px;border-radius:14px;background:var(--identity-tint);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.ico svg{width:24px;height:24px;color:var(--identity-primary)}
.card h3{font-size:1.18rem;margin-bottom:9px;font-weight:600;letter-spacing:-.01em}
.card.wide h3{font-size:1.7rem;font-weight:700}
.card p{font-size:.95rem;color:var(--muted);line-height:1.6}
.card.wide p{color:#cfe0d1;font-size:1.02rem;max-width:34ch}

/* ---------- FULL-BLEED (lifestyle + A+) ---------- */
.bleed{position:relative;height:54vh;max-height:520px;min-height:380px;display:flex;align-items:flex-end;overflow:hidden}
/* Bannière allongée : le texte est EN BAS (sous le dégradé) -> on biaise le cadrage vers le HAUT de l'image pour
   garder le sujet/la tête (une photo carrée écrasée en bande large coupait la tête au bord haut). */
.bleed img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;z-index:0}
.bleed::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,20,15,.12) 0%,rgba(10,20,15,0) 35%,rgba(10,20,15,.78) 100%);z-index:1}
.bleed.is-visual-only::after{display:none}
.bleed .inner{position:relative;z-index:2;padding-bottom:clamp(40px,5vw,72px);color:#fff;width:100%}
.bleed .eyebrow{color:#9dc3a3}
.bleed h2{color:#fff;font-size:clamp(2rem,4vw,3.4rem);max-width:16ch;margin-top:10px}
.bleed p{color:rgba(255,255,255,.86);max-width:42ch;margin-top:14px;font-size:1.05rem}

/* ---------- STORY ---------- */
.story{padding:var(--space) 0}
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4vw,56px);align-items:center}
.story-copy h2{font-size:clamp(1.9rem,3.4vw,2.9rem);margin-bottom:24px}
.story-copy p{color:#4a4d43;margin-bottom:18px;font-size:1.04rem;max-width:48ch}
.story-img{border-radius:20px;overflow:hidden;aspect-ratio:5/4;max-height:420px;box-shadow:0 24px 56px rgba(20,40,28,.13);margin-left:auto;max-width:520px;background:var(--bg)}
.story-img img{width:100%;height:100%;object-fit:contain}

/* ---------- SPECS ---------- */
.specs{padding:var(--space) 0}   /* fond piloté par la ZÉBRURE (.stripe-*) */
/* FICHE TECHNIQUE = vraie carte tableau (zébrée, encadrée) : casse la monotonie des sections + scan des specs = réassurance. */
.spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 8px 26px rgba(20,30,22,.06)}
.spec-row{display:flex;align-items:baseline;gap:14px;padding:13px 22px;border-bottom:1px solid var(--line)}
.spec-row:nth-child(2n){border-left:1px solid var(--line)}                     /* séparateur vertical entre les 2 colonnes */
.spec-row:nth-child(4n+1),.spec-row:nth-child(4n+2){background:#faf9f6}        /* zébrure PAR RANGÉE (2 items/rangée) */
.spec-row dt{color:var(--muted);font-size:.86rem;font-weight:500;flex:0 0 42%;letter-spacing:.01em}
.spec-row dt::after{content:""}
.spec-row dd{font-weight:600;font-size:.94rem;text-align:left;flex:1;min-width:0;overflow-wrap:anywhere}
.spec-more{margin-top:14px;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.spec-more summary{padding:15px 18px;font-family:var(--body);font-size:.94rem;font-weight:750;color:var(--ink)}
.spec-more summary span{font-weight:600;color:var(--muted)}
.spec-more[open] summary{border-bottom:1px solid var(--line)}
.spec-more .spec-grid{border:0;border-radius:0;box-shadow:none}

/* ---------- FAQ ---------- */
.faq{padding:var(--space) 0}
.faq .inner{max-width:820px;margin-inline:auto}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;padding:24px 0;font-family:var(--display);font-size:1.12rem;font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:20px}
summary::-webkit-details-marker{display:none}
summary .pm{flex:none;width:24px;height:24px;position:relative}
summary .pm::before,summary .pm::after{content:"";position:absolute;background:var(--identity-primary);border-radius:2px;transition:transform .2s}
summary .pm::before{top:11px;left:3px;width:18px;height:2px}
summary .pm::after{top:3px;left:11px;width:2px;height:18px}
details[open] summary .pm::after{transform:scaleY(0)}
details p{padding:0 0 24px;color:#4a4d43;max-width:64ch}

/* ---------- FINAL CTA (bande sombre identité) ---------- */
.final{background:var(--identity-primary-dark);padding:clamp(56px,7vw,92px) 0;text-align:center}
.final h2{color:#fff;font-size:clamp(2rem,4vw,3.2rem);max-width:18ch;margin:0 auto 16px}
.final p{color:#bcd2bf;margin-bottom:32px}
.final .cta{display:inline-flex;align-items:center;justify-content:center;background:var(--brand);color:#fff;flex:none;padding:0 40px;height:58px;font-size:1.05rem}
/* A1 : sur une bande SOMBRE (cas courant), bouton BLANC + texte sombre = contraste garanti (WCAG >= 4,5:1),
   choisi par luminance côté pipeline (final_cta_class). Sinon défaut = noir plein + texte blanc. */
.final .cta.cta--invert{background:#fff;color:var(--ink)}
.final .cta.cta--invert:hover{background:#f2f2f2}
.final .cta:hover{transform:translateY(-2px)}

/* ---------- FOOTER (marque fixe, sombre) ---------- */
footer{background:var(--ink);color:#c9cbc2;padding:64px 0 40px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
footer .brand{color:#fff;margin-bottom:14px;display:block}
footer p{font-size:.9rem;max-width:34ch;line-height:1.6}
.foot-col h4{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:#8a8d82;margin-bottom:16px;font-family:var(--body);font-weight:600}
.foot-col a{display:block;font-size:.92rem;padding:6px 0;color:#c9cbc2;opacity:.85}
.foot-col a:hover{opacity:1}
.foot-bot{border-top:1px solid #2c2e24;margin-top:48px;padding-top:24px;font-size:.82rem;color:#8a8d82}

/* ---------- AVIS (dormant : codé, masqué tant que vide) ---------- */
.reviews{background:var(--soft);padding:var(--space) 0}
.is-hidden{display:none!important}   /* slots dormants (reviews, hero-rating sans avis) */

/* ---------- MOBILE ---------- */
@media(max-width:920px){
  .nav,.header-ico{display:none}
  .store-select{gap:6px}
  .store-select select{font-size:.8rem;padding:3px 6px}
  .hero{grid-template-columns:1fr;min-height:auto}
  /* MOBILE CONVERSION : GRANDE image (l'image vend) ; SWIPE primaire + dots ; vignettes scrollables dessous */
  .hero-stage{aspect-ratio:4/5}
  .gallery-dots{display:flex}
  .hero-thumbs{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;-webkit-overflow-scrolling:touch;padding:10px 14px}
  .hero-thumbs img{width:48px;height:48px;flex:0 0 auto}
  .hero-panel-in{padding:28px 22px 40px;max-width:none}
  .hero h1{font-size:clamp(2.1rem,8.5vw,2.7rem);line-height:1.06;text-wrap:balance}
  .hero-panel-in .lede{font-size:1rem}
  body{padding-bottom:72px}   /* dégagement pour la sticky bar fixe (ne couvre pas le footer) */
  .bento{grid-template-columns:1fr}
  .card.wide{grid-column:span 1}
  .story-grid{grid-template-columns:1fr;gap:36px}
  .story-img{order:-1}
  .spec-grid{grid-template-columns:1fr;gap:0}
  .spec-row:nth-child(2n){border-left:0}                                        /* 1 colonne : pas de séparateur vertical */
  .spec-row{background:#fff}
  .spec-row:nth-child(2n){background:#faf9f6}                                   /* zébrure simple 1 ligne / 2 en mono-colonne */
  .foot-grid{grid-template-columns:1fr;gap:32px}
  .inner{padding:0 22px}
}
@media(max-width:380px){
  .inner{padding:0 16px}
  .hero h1{font-size:1.95rem}
  .hero-panel-in{padding:28px 16px 36px}
  .minibens{gap:7px}
  .miniben span{font-size:.7rem}
}
/* word-break guard: never let a long unbreakable token blow out a column */
h1,h2,h3,p,dd,dt,summary,.lede{overflow-wrap:anywhere}

/* STICKY mobile add-to-cart */
.sticky-atc{display:none}
@media(max-width:920px){
  /* VISIBLE en permanence dès le chargement (plus de masquage au scroll) : prix + CTA toujours sous les yeux */
  .sticky-atc{display:flex;position:fixed;left:0;right:0;bottom:var(--cmp-h,0px);z-index:60;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:9px 14px;gap:12px;align-items:center;box-shadow:0 -6px 22px rgba(0,0,0,.1)}
  .sticky-atc .sp{display:flex;flex-direction:column;line-height:1.18;min-width:0;flex:1}
  .sticky-atc .sticky-name{font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .sticky-atc .sp b{font-family:var(--display);font-size:1.12rem}
  .sticky-atc .cta{flex:0 0 auto;width:auto;min-width:150px;height:48px;font-size:.98rem;box-shadow:none}
}
/* RUPTURE : le sticky bascule en capture d'email (.is-oos ajouté par JS) — cache prix/CTA/réassurance, montre le form
   notify -> lead différé sur les 24% de fiches en rupture, au lieu d'un sticky masqué. Mobile ET desktop. */
.sticky-notify{display:none;align-items:center;gap:10px;flex:1;min-width:0}
.sticky-atc.is-oos .sp,.sticky-atc.is-oos>.cta,.sticky-atc.is-oos .sticky-reassure{display:none}   /* rupture : on cache nom+prix+cta+réassurance -> le form notify prend toute la barre (fini la collision mobile) */
.sticky-atc.is-oos .sticky-notify{display:flex}
.sticky-notify-lbl{font-weight:600;white-space:nowrap;color:var(--ink);font-size:.9rem}
.sticky-notify input{flex:1;min-width:110px;max-width:280px;height:42px;padding:0 12px;border:1px solid var(--line);border-radius:9px;font:inherit;background:#fff}
.sticky-notify .cta{flex:0 0 auto;min-width:150px}
@media(max-width:520px){.sticky-notify-lbl{display:none}}   /* mobile serré : on garde juste champ + bouton */
/* DESKTOP (>=921px) : barre d'achat sticky RÉVÉLÉE AU SCROLL (quand le CTA du hero sort de l'écran) — sur une page
   longue, "Ajouter" reste toujours atteignable = gros levier conversion. Cachée par défaut (translateY), révélée par
   .is-visible (JS IntersectionObserver). Respecte [hidden] (indispo/rupture -> jamais affichée). */
@media(min-width:921px){
  .sticky-atc{display:flex;position:fixed;left:0;right:0;bottom:var(--cmp-h,0px);z-index:60;align-items:center;gap:22px;padding:11px clamp(20px,5vw,80px);background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-top:1px solid var(--line);box-shadow:0 -6px 22px rgba(0,0,0,.1);transform:translateY(115%);transition:transform .28s ease;pointer-events:none}
  .sticky-atc.is-visible{transform:translateY(0);pointer-events:auto}
  .sticky-atc[hidden]{display:none}
  .sticky-atc .sp{display:flex;align-items:baseline;gap:16px;min-width:0;flex:1}
  .sticky-atc .sticky-name{font-size:1rem;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:62ch}
  .sticky-atc .sp b{font-family:var(--display);font-size:1.3rem}
  .sticky-atc .cta{flex:0 0 auto;width:auto;min-width:220px;height:50px;font-size:1rem;box-shadow:none}
  /* Réassurance dans le sticky (desktop) : livraison incluse + retours 30j -> lève l'objection au moment de l'achat.
     Scopé .sticky-atc pour battre le display:none de base quel que soit l'ordre source. */
  .sticky-atc .sticky-reassure{display:flex;gap:20px;align-items:center;flex:0 0 auto}
  .sticky-atc .sticky-reassure span{font-size:.86rem;color:var(--muted);white-space:nowrap;display:flex;align-items:center;gap:6px}
  .sticky-atc .sticky-reassure span::before{content:"✓";color:var(--primary,#2f6f4e);font-weight:800}
}
.sticky-reassure{display:none}   /* masqué par défaut (mobile : barre serrée) ; affiché en desktop via la règle scopée ci-dessus */

/* Conversion handoff after Add to cart: unmistakable success feedback plus
   one dominant path to checkout. Keep shopping remains available without a
   competing "Buy now" button that would split intent before the cart exists. */
.cta.is-added{background:#18794e!important;color:#fff!important;border-color:#18794e!important}
.cart-nudge{position:fixed;right:24px;bottom:24px;z-index:80;width:min(420px,calc(100vw - 32px));display:grid;grid-template-columns:1fr auto;gap:12px 16px;align-items:center;padding:18px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 50px rgba(0,0,0,.22);opacity:0;transform:translateY(14px);transition:.2s ease}
.cart-nudge.is-visible{opacity:1;transform:translateY(0)}
.cart-nudge>div{display:flex;flex-direction:column;gap:3px}.cart-nudge>div span{color:var(--muted)}
.cart-nudge .cart-nudge-checkout{grid-row:1/3;grid-column:2;white-space:nowrap;text-decoration:none;padding:13px 18px}
.cart-nudge .cart-nudge-keep{grid-column:1;background:none;border:0;padding:0;text-align:left;text-decoration:underline;color:var(--muted);cursor:pointer;font:inherit}
@media(max-width:620px){.cart-nudge{left:12px;right:12px;bottom:calc(var(--cmp-h,0px) + 78px);width:auto;grid-template-columns:1fr}.cart-nudge .cart-nudge-checkout{grid-row:auto;grid-column:1;text-align:center}.cart-nudge .cart-nudge-keep{text-align:center}}

/* ============== COUCHE NAVIGATION (accueil, catégories, cartes) — grammaire v4 ============== */
.brand{text-decoration:none}
a.brand{color:var(--ink)}
.nav a{cursor:pointer;text-decoration:none}
.home-hero{max-width:var(--inner-max);margin:0 auto;padding:64px 32px 24px;text-align:center}
.home-hero .eyebrow{display:inline-block;margin-bottom:10px}
.home-hero h1{font-family:var(--display);font-weight:800;font-size:clamp(2rem,4vw,3.1rem);letter-spacing:-.03em;line-height:1.05;margin:0 0 14px}
.home-hero p{color:var(--muted);font-size:1.05rem;max-width:560px;margin:0 auto}
.home-cats,.home-products{max-width:var(--inner-max);margin:0 auto;padding:28px 32px}
.home-cats h2,.home-products h2{font-family:var(--display);font-size:1.5rem;letter-spacing:-.02em;margin:0 0 18px}
.cat-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.cat-tile{display:flex;align-items:flex-end;min-height:120px;padding:16px;border-radius:16px;background:var(--soft);border:1px solid var(--line);text-decoration:none;color:var(--ink);font-weight:700;font-size:1.1rem;transition:transform .15s,box-shadow .15s}
.cat-tile:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.07)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.pcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;text-decoration:none;color:var(--ink);transition:transform .15s,box-shadow .15s}
.pcard:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,.08)}
.pcard-img{aspect-ratio:4/5;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}   /* PORTRAIT 4:5 (colle au catalogue vertical : étendoirs/échelles) */
/* contain : le produit ENTIER est visible, JAMAIS coupé/hors-frame (cover rognait tout produit non-portrait). Le fond de
   carte est déjà #fff = même fond que les packshots -> le « letterbox » est INVISIBLE (pas de bande colorée). Padding = respiration. */
.pcard-img img{width:100%;height:100%;object-fit:contain;object-position:center;padding:6%;box-sizing:border-box}
.pcard-body{padding:14px 16px;display:flex;flex-direction:column;gap:10px;flex:1}
.pcard-body h3{font-size:1rem;font-weight:600;line-height:1.3;margin:0;flex:1}
.pcard-foot{display:flex;align-items:center;justify-content:space-between}
.pcard-price{font-weight:800;font-size:1.1rem}
.pcard-cta{font-size:.82rem;opacity:.7}
/* ============================================================================
   HOMEPAGE (vitrine) — cohérente avec les fiches (mêmes tokens/typo/esprit).
   Images hero + cartes univers = PLACEHOLDERS propres (prêts à recevoir la vraie image).
   ============================================================================ */
.home{background:var(--bg)}
/* HERO — média placeholder travaillé + texte (structurellement prêt pour la vraie image) */
.hero-home{position:relative;max-width:var(--hero-max);margin:0 auto;min-height:clamp(400px,56vh,600px);display:flex;align-items:center;overflow:hidden}
.hero-home-media{position:absolute;inset:0;background:radial-gradient(120% 95% at 80% 15%,var(--identity-tint),transparent 62%),linear-gradient(135deg,#eef2ea,#e3ebdf 55%,#dde6d8)}
.hero-home-media::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(26,60,43,.06) 1.2px,transparent 1.2px);background-size:26px 26px;opacity:.6}
.hero-ph-note{position:absolute;right:16px;bottom:12px;font-size:.72rem;color:var(--muted);opacity:.55;letter-spacing:.02em}
/* HERO avec image GÉNÉRÉE : image plein cadre + SCRIM de contraste (zone texte garantie lisible sur n'importe
   quelle image — dégradé blanc côté gauche/texte, comme le CTA des fiches calé par luminance). */
.hero-home-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.72) 38%,rgba(255,255,255,.25) 60%,rgba(255,255,255,0) 78%)}
.hero-home.has-img .hero-home-media::after{display:none}   /* pas de motif placeholder sur une vraie image */
.hero-home.has-img .hero-home-in{z-index:2}
/* Tuiles univers : image générée (nom en surimpression via .uni-body en dessous, pas sur l'image -> pas de scrim requis) */
.uni-media{position:relative;overflow:hidden}
.uni-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.uni-card.has-img .uni-emoji{display:none}
/* image pleine + nom en OVERLAY (scrim bas) — lisible sur n'importe quel fond coloré de tuile */
.uni-card.has-img .uni-media{aspect-ratio:4/3}
.uni-scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(15,17,11,.88) 0%,rgba(15,17,11,.62) 30%,rgba(15,17,11,.16) 56%,rgba(15,17,11,0) 74%)}
.uni-caption{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:12px 14px}
.uni-caption .uni-name{color:#fff;font-family:var(--display);font-weight:700;font-size:1.06rem;letter-spacing:-.01em;line-height:1.14;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.uni-caption .uni-count{color:rgba(255,255,255,.9);font-size:.78rem;white-space:nowrap;flex:none;text-shadow:0 1px 2px rgba(0,0,0,.5)}
/* Icône menu : image générée (petit carré) */
.mega-ic{overflow:hidden}
.mega-ic.has-img img{width:100%;height:100%;object-fit:cover}
.hero-home-in{position:relative;z-index:2;max-width:620px;padding:clamp(30px,5vw,64px);margin-left:clamp(6px,4vw,44px)}
.hero-home-in .eyebrow{color:var(--identity-primary);font-weight:700}
.hero-home-in h1{font-family:var(--display);font-weight:800;font-size:clamp(2.05rem,4.4vw,3.35rem);letter-spacing:-.03em;line-height:1.03;margin:12px 0 14px;color:var(--ink)}
.hero-home-in .lede{color:var(--muted);font-size:clamp(1rem,1.35vw,1.16rem);max-width:520px;margin:0 0 26px;line-height:1.5}
.cta-primary{display:inline-flex;align-items:center;gap:8px;background:var(--identity-primary);color:#fff;font-weight:700;font-size:1rem;padding:14px 26px;border-radius:999px;text-decoration:none;transition:transform .15s,filter .15s}
.cta-primary:hover{transform:translateY(-2px);filter:brightness(1.09)}
/* RÉASSURANCE — bande sous le hero (comme les fiches) */
.reassure-band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--soft)}
.reassure{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 44px;list-style:none;margin:0 auto;padding:16px 32px}
.reassure li{display:flex;align-items:center;gap:9px;font-size:.92rem;font-weight:600;color:var(--ink)}
.reassure svg{width:20px;height:20px;color:var(--identity-primary);flex:none}
/* UNIVERS — cartes (le nouveau menu visuel) */
.home-univers{padding:var(--space) 0}
.home .section-head{display:flex;align-items:baseline;gap:14px;margin:0 0 22px}
.home .section-head h2{font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2.05rem);letter-spacing:-.02em;margin:0}
.uni-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:18px}
.uni-card{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:#fff;text-decoration:none;color:var(--ink);transition:transform .16s,box-shadow .16s}
.uni-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.09)}
.uni-media{position:relative;aspect-ratio:5/4;display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,hsl(var(--h,145) 30% 92%),hsl(var(--h,145) 26% 83%))}
.uni-media::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(0,0,0,.045) 1px,transparent 1px);background-size:18px 18px}
.uni-emoji{font-size:2.7rem;opacity:.92}
.uni-body{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:14px 16px}
.uni-name{font-family:var(--display);font-weight:700;font-size:1.07rem;letter-spacing:-.01em;line-height:1.15}
.uni-count{font-size:.8rem;color:var(--muted);white-space:nowrap;flex:none}
/* PRODUITS PHARES (legacy, non utilisé sur l'accueil) */
.home-featured{padding:0 0 var(--space)}

/* SÉLECTION PAR UNIVERS — mini-rangées homogènes (anti-fouillis) */
.home-selection{padding:0 0 var(--space);border-top:1px solid var(--line)}
.home-selection{padding-top:var(--space)}
.uni-rows{display:flex;flex-direction:column;gap:clamp(28px,3.4vw,46px)}
.pgrid-4{grid-template-columns:repeat(4,1fr)}
/* ZONE-RAYON (B2) : bandeau teinté par univers -> casse le « fourre-tout » sans doubler le scroll */
.sel-zone{--hh:var(--h,145)}
.sel-band{position:relative;display:flex;align-items:center;gap:18px;padding:15px 20px;border-radius:14px;overflow:hidden;margin:0 0 16px;background:hsl(var(--hh) 45% 96%);border:1px solid hsl(var(--hh) 40% 87%)}
.sel-band::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:hsl(var(--hh) 48% 55%)}
.sel-band-media{position:absolute;right:0;top:0;bottom:0;width:min(42%,380px);z-index:0}
.sel-band-media img{width:100%;height:100%;object-fit:cover}
.sel-band-media .sel-band-scrim{position:absolute;inset:0;background:linear-gradient(90deg,hsl(var(--hh) 45% 96%) 2%,hsl(var(--hh) 45% 96% / .55) 40%,transparent)}
.sel-band-txt{position:relative;z-index:1;flex:1;padding-left:8px;min-width:0}
.sel-kicker{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:hsl(var(--hh) 42% 40%)}
.sel-band-txt h3{font-family:var(--display);font-weight:800;font-size:clamp(1.12rem,1.7vw,1.5rem);letter-spacing:-.02em;margin:2px 0 3px;color:hsl(var(--hh) 45% 21%);line-height:1.1}
.sel-promise{margin:0;font-size:.9rem;line-height:1.35;color:hsl(var(--hh) 22% 36%)}
.sel-all{position:relative;z-index:1;flex:none;font-size:.86rem;font-weight:700;color:hsl(var(--hh) 45% 28%);text-decoration:none;border:1.5px solid hsl(var(--hh) 40% 68%);border-radius:999px;padding:8px 15px;background:rgba(255,255,255,.72);white-space:nowrap}
.sel-all:hover{background:#fff}
.sel-all span{transition:transform .15s;display:inline-block}
.sel-all:hover span{transform:translateX(3px)}

/* POURQUOI TODECO — différenciateurs */
.home-why{padding:var(--space) 0;background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.why-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,30px)}
.why-item{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 20px}
.why-ic{display:inline-flex;width:44px;height:44px;align-items:center;justify-content:center;border-radius:12px;background:var(--identity-tint);color:var(--identity-primary);margin-bottom:14px}
.why-ic svg{width:23px;height:23px}
.why-item h3{font-family:var(--display);font-weight:700;font-size:1.08rem;margin:0 0 6px;letter-spacing:-.01em}
.why-item p{margin:0;font-size:.92rem;line-height:1.5;color:var(--muted)}

/* NEWSLETTER — capture e-mail */
.home-news{padding:var(--space) 0}
.news-card{display:flex;align-items:center;justify-content:space-between;gap:clamp(24px,4vw,56px);flex-wrap:wrap;
  background:linear-gradient(135deg,var(--identity-primary),#12281c);color:#fff;border-radius:24px;padding:clamp(28px,4vw,48px)}
.news-copy{flex:1 1 320px;max-width:560px}
.news-copy .eyebrow{color:#9dc3a3;display:block;margin-bottom:10px}
.news-copy h2{font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2.05rem);letter-spacing:-.02em;margin:0 0 10px;color:#fff}
.news-copy p{margin:0;color:rgba(255,255,255,.82);line-height:1.5;font-size:1rem}
.news-form{flex:1 1 320px;max-width:440px;display:flex;flex-wrap:wrap;gap:12px}
.news-form input[type=email]{flex:1 1 200px;min-width:0;border:none;border-radius:999px;padding:14px 20px;font-size:1rem;color:var(--ink)}
.news-form input[type=email]::placeholder{color:#8a938c}
.news-form .cta-primary{background:#fff;color:var(--identity-primary);flex:none}
.news-form .cta-primary:hover{filter:brightness(.94)}
.news-note{flex:1 1 100%;font-size:.78rem;color:rgba(255,255,255,.62)}
.news-ok{flex:1 1 100%;font-size:.9rem;font-weight:600;color:#bfe6c5}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

@media(max-width:960px){
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .pgrid-4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
  .hero-home{min-height:auto;padding:8px 0}
  .hero-home-in{margin:0;max-width:none}
  .uni-cards{grid-template-columns:repeat(2,1fr);gap:12px}
  .uni-emoji{font-size:2.1rem}
  .sel-band{flex-wrap:wrap;gap:10px}
  .sel-band-media{width:55%}
  .sel-band-txt h3{font-size:1.12rem}
  .sel-all{order:3}
  .news-card{flex-direction:column;align-items:flex-start;text-align:left}
}

/* fil d'Ariane + catégorie */
.crumb{max-width:var(--inner-max);margin:0 auto;padding:22px 32px 0;font-size:.85rem;color:var(--muted)}
.crumb a{color:var(--muted);text-decoration:none}.crumb a:hover{color:var(--ink)}
.crumb span{margin:0 4px}
.cat-main{padding-bottom:40px}
.cat-head{max-width:var(--inner-max);margin:0 auto;padding:8px 32px 24px}
.cat-head h1{font-family:var(--display);font-weight:800;font-size:2rem;letter-spacing:-.02em;margin:6px 0 0}
.cat-main .pgrid{max-width:var(--inner-max);margin:0 auto;padding:0 32px}
.cat-empty{max-width:var(--inner-max);margin:0 auto;padding:0 32px;color:var(--muted)}
/* "Vous aimerez aussi" (fiche produit) */
.see-also{max-width:var(--inner-max);margin:0 auto;padding:30px 32px 50px}
/* fond NEUTRE forcé (spécificité > .stripe-a) : override la zébrure verte bakée sur les fiches existantes -> plus de
   « bande verte + marges blanches des photos Amazon » ; rendu uniforme (comme la fiche que Dav valide). */
section.see-also{background:var(--bg);border-top:1px solid var(--line)}
/* ============================ ACCESSIBILITÉ (EAA 2025 / WCAG 2.2 AA) ============================
   Anneau de focus CLAVIER visible partout (placé APRÈS les `outline:none` -> gagne à égalité de spécificité au clavier,
   sans polluer le clic souris grâce à :focus-visible). Cibles tactiles ≥24px sur les contrôles primaires mobiles. */
:focus-visible{outline:2px solid var(--identity-primary,#1a3c2b);outline-offset:2px;border-radius:3px}
.hd-search input:focus-visible,.hd-msearch input:focus-visible,.notify input:focus-visible,.sel-grp select:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--identity-primary,#1a3c2b);outline-offset:2px}
.gdot{position:relative}
.gdot::after{content:"";position:absolute;inset:-9px}            /* cible ≥24px sans grossir le point 8px visible */
.cart-qty button,.qty-stepper button{min-width:40px;min-height:40px}
/* Menu mobile CLAVIER : la checkbox reste focusable (sr-only, plus `hidden`) -> Tab l'atteint, Espace ouvre. L'anneau de
   focus s'affiche sur le burger visible (la checkbox est invisible). Corrige le blocage clavier/lecteur d'écran mobile. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mnav-toggle:focus-visible ~ .header-in .burger{outline:2px solid var(--identity-primary,#1a3c2b);outline-offset:3px}
.see-also h2{font-family:var(--display);font-size:1.4rem;letter-spacing:-.02em;margin:0 0 18px}
.crumb-product{max-width:var(--hero-max);margin:0 auto;padding:16px 32px 0}
@media(max-width:920px){
  .home-hero{padding:40px 20px 16px}
  .home-cats,.home-products,.see-also{padding:22px 20px}
  .cat-head,.crumb,.cat-main .pgrid,.cat-empty{padding-left:20px;padding-right:20px}
  .pgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
}

/* Sélecteur de variants (fiche) — pills, grammaire v4 */
.variants{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.variant-pill{padding:9px 16px;border:1.5px solid var(--line);border-radius:999px;font-size:.9rem;font-weight:600;color:var(--ink);text-decoration:none;transition:all .18s;white-space:nowrap}
.variant-pill:hover{border-color:var(--ink)}
.variant-pill.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.variants.variants-large{display:grid;grid-template-columns:minmax(0,1fr) minmax(210px,1.15fr);align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--paper,#fff)}
.variant-picker-copy{display:grid;gap:2px;min-width:0}
.variant-picker-copy>span{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.variant-picker-copy>strong{font-size:.95rem;line-height:1.3;overflow-wrap:anywhere}
.variant-picker-copy>small{font-size:.76rem;color:var(--muted)}
.variant-select{width:100%;min-height:46px;padding:0 40px 0 13px;border:1.5px solid var(--ink);border-radius:10px;background:#fff;color:var(--ink);font:600 .9rem var(--body);cursor:pointer}
@media(max-width:620px){.variants.variants-large{grid-template-columns:1fr}}

/* Lot 6 — VIDÉO PRODUIT en SLIDE du carrousel hero (style Amazon). */
/* Lecteur dans la ZONE PRINCIPALE : centré (object-fit:contain -> letterbox propre), fond noir. */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;z-index:2}
.hero-video[hidden]{display:none}
/* Vignette VIDÉO : voile sombre + icône play blanche au centre (UNIQUEMENT la vidéo, pas les images). */
.hero-thumb-vid{position:relative;width:62px;height:62px;padding:0;border:2px solid #fff;border-radius:12px;overflow:hidden;cursor:pointer;background:#000;box-shadow:0 6px 18px rgba(0,0,0,.18);opacity:.92;transition:transform .2s,opacity .2s}
.hero-thumb-vid:hover{transform:scale(1.06);opacity:1}
.hero-thumb-vid.active{outline:2px solid var(--identity-primary);outline-offset:2px;opacity:1}
.hero-thumb-vid img{width:100%;height:100%;object-fit:cover}
.hero-thumb-vid .vplay{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.38)}
.hero-thumb-vid .vplay i{width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.55);display:grid;place-items:center}
.hero-thumb-vid .vplay i::before{content:"";margin-left:2px;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent #fff}
@media(max-width:600px){.hero-thumb-vid{width:48px;height:48px}.hero-thumb-vid .vplay i{width:20px;height:20px}}

/* ================= P3 — modules SEO + conversion (usage/install/choose/compare/care/reassure) ================= */
.usecases{padding:var(--space) 0}
.uc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.uc-grid--six{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.uc-grid--six{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.uc-grid--six{grid-template-columns:1fr}}
.uc{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 20px}
.uc .ico{width:38px;height:38px;border-radius:10px;background:var(--identity-tint);display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.uc .ico svg{width:20px;height:20px;color:var(--identity-primary)}
.uc h3{font-size:1.05rem;font-weight:600;margin-bottom:6px}
.uc p{font-size:.9rem;color:var(--muted);line-height:1.5}
.guide{padding:var(--space) 0}
.guide--soft{background:var(--soft)}
/* ZÉBRURE SYSTÉMIQUE (BUG 2) : deux sections de CONTENU consécutives ne partagent JAMAIS le même fond.
   Alternance beige/blanc appliquée par renderPage sur l'ordre RÉELLEMENT rendu (robuste aux modules omis :
   un nth-child CSS casserait dès qu'un module est omis). Les sections spéciales (hero/stat-row/lifestyle/
   final) gardent leur fond propre et ne participent pas. */
/* Beige CLAIREMENT VISIBLE (le --soft #f2f4ee ≈ blanc à l'œil = alternance imperceptible). Sage doux mais net. */
.stripe-a{background:#e8ecdf}
.stripe-b{background:var(--bg)}
/* FILET à chaque jonction de sections de contenu -> jamais deux sections qui se lisent comme un seul pavé. */
.stripe-a+.stripe-b,.stripe-b+.stripe-a,.stripe-a+.stripe-a,.stripe-b+.stripe-b{border-top:1px solid var(--line)}
.guide .inner{max-width:var(--inner-max)}
.steps{counter-reset:st;list-style:none;display:grid;gap:14px}
.steps li{counter-increment:st;position:relative;padding-left:52px;font-size:1rem;color:#3a3d34;line-height:1.55}
.steps li::before{content:counter(st);position:absolute;left:0;top:-2px;width:34px;height:34px;border-radius:50%;background:var(--identity-primary);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center}
.checklist{list-style:none;display:grid;gap:12px}
.checklist li{position:relative;padding-left:32px;font-size:1rem;color:#3a3d34;line-height:1.55}
.checklist li::before{content:"";position:absolute;left:2px;top:6px;width:15px;height:9px;border-left:2.5px solid var(--identity-primary);border-bottom:2.5px solid var(--identity-primary);transform:rotate(-45deg)}
.compare{padding:var(--space) 0}
.compare .lead{color:#4a4d43;margin-bottom:26px;max-width:60ch;font-size:1.04rem}
.cmp{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
@media(min-width:641px) and (max-width:920px){.cmp{grid-template-columns:repeat(2,1fr)}}   /* tablette : 2 colonnes nettes (fini la colonne orpheline pleine largeur de auto-fit) */
.cmp-col{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 20px}
.cmp-col h3{font-size:1rem;font-weight:600;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.cmp-col ul{list-style:none;display:grid;gap:9px}
.cmp-col li{font-size:.9rem;color:var(--muted);line-height:1.45;padding-left:20px;position:relative}
.cmp-col li::before{content:"–";position:absolute;left:0;color:var(--muted)}
.cmp-ours{background:var(--identity-tint);border-color:var(--identity-primary)}
.cmp-ours li{color:var(--identity-primary-dark)}
.cmp-ours li::before{content:"✓";color:var(--identity-primary);font-weight:700}
.reassure{padding:clamp(28px,4vw,44px) 0;background:var(--soft)}
.reassure-row{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.pill{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 20px;min-width:220px}
.pill .ico{width:34px;height:34px;flex:none;border-radius:9px;background:var(--identity-tint);display:flex;align-items:center;justify-content:center}
.pill .ico svg{width:19px;height:19px;color:var(--identity-primary)}
.pill b{display:block;font-size:.92rem;color:var(--identity-primary-dark)}
.pill span{display:block;font-size:.78rem;color:var(--muted)}
@media(max-width:640px){.steps li{padding-left:46px}.cmp{grid-template-columns:1fr}}

/* ---- P3 images de module (système visuel Flow 1 : diagramme/ambiance dans sa section) ---- */
.mod-img{margin:0 0 22px;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#fff}
.mod-img img{display:block;width:100%;height:auto;max-height:420px;object-fit:contain}
.mod-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px);align-items:start}
.mod-split .mod-img{margin:0}
.mod-split .steps,.mod-split .checklist{margin:0}
@media(max-width:720px){.mod-split{grid-template-columns:1fr}}

/* ---- P3 bénéfices ENTRELACÉS (image↔texte alterné ; sizing fin = chantier UI/UX) ---- */
.featrows{display:grid;gap:clamp(22px,3vw,44px)}
.feat-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,44px);align-items:center}
.feat-row--rev .mod-img{order:2}
.feat-row--text{grid-template-columns:1fr}
.feat-row .mod-img{margin:0}
.feat-txt h3{font-size:1.15rem;font-weight:600;margin-bottom:8px}
.feat-txt p{color:var(--muted);line-height:1.6}
@media(max-width:720px){.feat-row,.feat-row--rev .mod-img{grid-template-columns:1fr;order:0}}

/* ---- P3 système visuel : bannière wide (Flow 2) + dimensionnement stretch/cover ---- */
/* Bannière large (cas d'usage / lifestyle) : pleine largeur, recadrage cover 16:9 (l'image générée peut être ~carrée). */
.wide-banner{display:block;width:100%;margin:0 0 clamp(22px,3vw,38px);border-radius:18px;overflow:hidden;aspect-ratio:16/9;box-shadow:0 20px 50px rgba(20,30,22,.12)}
.wide-banner img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
/* Rangées bénéfices : image ~45% de la LARGEUR PLEINE (fini la colonne centrale étroite) ; diagramme = contain (jamais rogné). */
.feat-row{grid-template-columns:1.2fr 1fr}
.feat-row .mod-img{max-height:none}
.feat-row .mod-img img{max-height:340px}
/* "En détail" (photo) : image ENTIÈRE (contain, fond neutre), PLAFONNÉE en hauteur -> un produit PORTRAIT (desserte,
   échelle, paravent…) ne déborde PLUS de sa zone. align-items:center (PAS stretch : un portrait ne doit pas imposer la
   hauteur de rangée et étirer le texte). aspect-ratio:auto = pas de boîte forcée (jamais de crop), juste un cap hauteur. */
.story-grid{align-items:center}
.story-img{aspect-ratio:auto;max-height:clamp(320px,40vw,520px);max-width:560px;margin-left:auto}
.story-img img{width:100%;height:auto;max-height:clamp(320px,40vw,520px);object-fit:contain;display:block}

/* ---- P3 stat-row : bandeau chiffres phares (scan 2s) — hiérarchie fine = session pixel ---- */
.statrow{padding:clamp(20px,3vw,34px) 0;background:var(--identity-tint)}
.stat-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(20px,5vw,64px)}
.stat{text-align:center;min-width:110px}
.stat-num{font-family:var(--display);font-size:clamp(1.7rem,3.6vw,2.6rem);font-weight:700;color:var(--identity-primary-dark);line-height:1}
.stat-lbl{margin-top:6px;font-size:.8rem;font-weight:600;letter-spacing:.02em;color:var(--muted);text-transform:uppercase}

/* ==== BUG A : grille de cartes bénéfices homogènes (hauteur égale, avec/sans image) ==== */
.benefit-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;align-items:stretch}
.benefit-grid .bcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 24px;display:flex;flex-direction:column}
.bcard .ico{width:40px;height:40px;border-radius:11px;background:var(--identity-tint);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.bcard .ico svg{width:22px;height:22px;color:var(--identity-primary)}
.bcard h3{font-size:1.08rem;font-weight:600;margin-bottom:8px}
.bcard p{font-size:.92rem;color:var(--muted);line-height:1.55}
.bcard--img{padding:0;overflow:hidden}
.bcard--img .bcard-media{aspect-ratio:4/3;overflow:hidden;background:var(--bg)}
.bcard--img .bcard-media img{width:100%;height:100%;object-fit:contain;display:block}
.bcard--img .bcard-body{padding:20px 24px}
@media(max-width:640px){.benefit-grid{grid-template-columns:1fr}}
/* ==== BUG B : blocs texte-seul alignés à gauche, puces 2 colonnes, tick inline ==== */
.tick{display:inline-block}
.checklist--cols{max-width:1240px;text-align:left}
.checklist--cols li{margin-bottom:12px;break-inside:avoid}
@media(min-width:641px){.checklist--cols{columns:2;column-gap:72px;display:block}}
.steps--wide{max-width:680px}

/* ==== TICKET 1 : atouts en 2 sous-blocs (jamais icône + image sur la même rangée) ==== */
.benefits-split{display:grid;gap:clamp(24px,3vw,40px)}
/* grille VISUELS : bénéfices AVEC image (toutes des images -> stretch OK) */
.ben-visuals{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;align-items:stretch}
.vcard{margin:0;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.vcard-media{aspect-ratio:4/3;overflow:hidden;background:var(--bg)}
.vcard-media img{width:100%;height:100%;object-fit:contain;display:block;object-position:left center}
.vcard figcaption{padding:14px 18px;font-size:.95rem;font-weight:600;color:var(--identity-primary-dark);text-align:left}
.vcard--wide{grid-column:1 / -1}
.vcard--wide .vcard-media{aspect-ratio:21/9}
/* bande CARACTÉRISTIQUES : bénéfices SANS image (petites pastilles, hauteur naturelle, jamais étirées) */
/* A2 : flex + wrap + CENTRE -> la dernière rangée (N non-multiple de 4) est centrée, jamais de cellule
   vide béante. flex:0 1 basis = 4 par rangée sans grandir (le rang incomplet reste centré). */
.ben-specs{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.ben-specs .scard{flex:0 1 calc(25% - 12px)}
.scard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 18px}
.scard .ico{width:34px;height:34px;border-radius:9px;background:var(--identity-tint);display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.scard .ico svg{width:19px;height:19px;color:var(--identity-primary)}
.scard h3{font-size:.98rem;font-weight:600;margin-bottom:5px;line-height:1.25}
.scard p{font-size:.85rem;color:var(--muted);line-height:1.5}
@media(max-width:860px){.ben-specs .scard{flex-basis:calc(50% - 8px)}}
@media(max-width:560px){.ben-visuals{grid-template-columns:1fr}.ben-specs .scard{flex-basis:100%}}

/* ==== PASSE TYPO : prose alignée à gauche + largeur lisible (~680px = 65-75 car/ligne), template-level ==== */
/* (freeze : story/benefits/comparatif/hero/specs NON touchés — ils ont déjà leur largeur validée) */
.faq details p{max-width:680px;text-align:left}
.faq summary{text-align:left}
.steps li,.checklist li{text-align:left}

/* ==== FIX 1 : séparer visuellement les sections (filet fin) — la fiche technique ressort du beige continu ==== */
/* freeze : benefits / story / comparatif NON bordés (déjà délimités par leur fond) */
.usecases,.guide,.specs,.faq,.reassure{border-top:1px solid var(--line)}
.specs{padding-top:calc(var(--space) + 8px)}   /* un poil plus d'air en tête -> la fiche technique saute aux yeux */
/* Chips VARIANTS (front) — rendu groupé par axe (Couleur/Taille…) */
.variant-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:6px 0}
.variant-row .variant-axis{font-size:.78rem;color:var(--muted);min-width:96px;flex:none;font-weight:600}
.variant-pill .vsw{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:5px;vertical-align:middle;border:1px solid rgba(0,0,0,.15)}

/* ===== INFOGRAPHIE MAISON (base image IA text-free + overlay texte HTML/SVG localisé) ===== */
.ig-section{padding:0;margin:0}
.ig{position:relative;margin:0 auto;max-width:1180px;padding:8px 16px 24px}
.ig-head{text-align:center;margin:10px 0 14px}
.ig-head .ig-eb{display:block;font-size:.74rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#6b7280);margin-bottom:3px}
.ig-head h2{margin:0;font-size:clamp(1.15rem,2.4vw,1.6rem);font-weight:700}
.ig-stage{position:relative;border-radius:18px;overflow:hidden;background:#0c0e12}
.ig-stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ig-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ig-dot{position:absolute;width:10px;height:10px;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 4px rgba(255,255,255,.12)}
.ig-co{position:absolute;transform:translateY(-50%);display:flex;gap:10px;align-items:flex-start;max-width:32%;pointer-events:none}
.ig-co .ig-ic{flex:none;width:34px;height:34px;border-radius:10px;border:1px solid;display:flex;align-items:center;justify-content:center}
.ig-co .ig-ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7}
.ig-co .ig-tx b{display:block;font-size:.92rem;font-weight:700;line-height:1.25}
.ig-co .ig-tx span{display:block;font-size:.78rem;opacity:.72;margin-top:1px}
.ig-co .ig-badge{display:inline-block;font-size:.62rem;font-weight:800;letter-spacing:.04em;border:1px solid;border-radius:4px;padding:0 5px;margin-top:4px;opacity:1}
.ig-dark .ig-co .ig-tx b{color:#fff}
.ig-dark .ig-co .ig-tx span{color:#c7ccd3;opacity:1}
@media(max-width:680px){.ig-co{max-width:44%}.ig-co .ig-tx b{font-size:.8rem}.ig-co .ig-tx span{display:none}}

/* ---- Moteur d'infographies v2 (PLAQUES localisées : overlay auto-fit + auto-contraste) ---- */
.ig2{margin:0 auto;max-width:1180px;padding:8px 16px 24px}
.ig2-head{text-align:center;margin:10px 0 16px}
.ig2-head .ig2-eb{display:block;font-size:.74rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#6b7280);margin-bottom:3px}
.ig2-head h2{margin:0;font-size:clamp(1.15rem,2.4vw,1.6rem);font-weight:700}
.ig2-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.ig2-fig{margin:0}
.ig2-stage{position:relative;width:100%;container-type:inline-size;border-radius:16px;overflow:hidden;background:#0c0e12;box-shadow:0 3px 14px rgba(0,0,0,.10)}
.ig2-stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ig2-tb{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1.12;padding:0 1.4cqw;box-sizing:border-box;overflow:hidden;font-size:3.5cqw;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;pointer-events:none}
.ig2-tb b{font-family:'Bricolage Grotesque','Inter',sans-serif;font-weight:800;letter-spacing:.005em}
.ig2-tb .ig2-s{font-weight:500;opacity:.85;margin-top:.35cqw;letter-spacing:.01em}
.ig2-title b{text-transform:uppercase;letter-spacing:.03em}
.ig2-egg{flex-direction:row;gap:.5cqw}
.ig2-caption b{text-transform:none}
@media(max-width:680px){.ig2-grid{grid-template-columns:1fr}}


/* ============ MOTEUR D'INFOGRAPHIES — templates bulletproof (photo IA + design CSS déterministe, 6 layouts) ============
   L'IA ne fournit QUE la photo (composée pour réserver la zone). Tout le mobilier est CSS/SVG -> pixel-perfect,
   identique à l'échelle, texte localisable qui reflow. Thème = variables (accent/palette), layout = structure. */
.igx{position:relative;width:100%;aspect-ratio:1/1;margin:0;overflow:hidden;container-type:inline-size;border-radius:14px;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
.igx>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* JAMAIS de coupure en plein mot : les mots ne se cassent pas -> ils débordent -> l'auto-fit (site.js) réduit la
   police jusqu'à ce que le mot entier rentre. Neutralise tout overflow-wrap:anywhere hérité. */
.igx h2,.igx p,.igx b,.igx span,.igx .ig-big,.igx .ig-lbl,.igx .ig-eb,.igx .ig-li{overflow-wrap:normal;word-break:normal;hyphens:none}
/* -- Thèmes (variables) -- */
.th-warm{--acc:#c0392b;--band:#c0392b;--bandT:#fff;--cream:245,241,233;--ink:#241f1b;--muted:#7a6f68;--icbg:#fbeae6}
.th-cool{--acc:#2e6f9e;--band:#28323d;--bandT:#fff;--cream:233,240,246;--ink:#1c2530;--muted:#69757f;--icbg:#e8f0f6}
.igx .ig-ic{border-radius:50%;background:var(--icbg);display:flex;align-items:center;justify-content:center;flex:none}
.igx .ig-ic svg,.lay-editorial svg{fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.igx .ig-ic svg{stroke:var(--acc)}
/* Bandeau titre partagé (cards, box) */
.ig-top{position:absolute;top:0;left:0;right:0}
.ig-band{background:var(--band);text-align:center;padding:3cqw 5cqw 2.4cqw}
.ig-band h2{margin:0;color:var(--bandT);font-family:'Bricolage Grotesque','Inter',sans-serif;font-weight:800;font-size:4.3cqw;line-height:1.05;text-transform:uppercase;letter-spacing:.01em}
.ig-sub{text-align:center;font-weight:600;font-size:2.4cqw;padding:1.5cqw 6cqw;background:rgba(var(--cream),.97);color:var(--muted)}
/* -- Layout CARDS : cartes sur la zone propre du bas -- */
.lay-cards .ig-feats{position:absolute;left:0;right:0;bottom:0;display:flex;gap:1.8cqw;padding:2.6cqw}
.lay-cards .ig-card{flex:1;background:#fff;border-radius:2.3cqw;padding:2.2cqw 1.3cqw 2.5cqw;text-align:center;box-shadow:0 1cqw 3cqw rgba(40,30,25,.16);display:flex;flex-direction:column;align-items:center;gap:1cqw}
.lay-cards .ig-ic{width:7cqw;height:7cqw}.lay-cards .ig-ic svg{width:4cqw;height:4cqw}
.lay-cards .ig-card b{font-family:'Bricolage Grotesque','Inter',sans-serif;font-weight:800;font-size:2.1cqw;color:var(--ink);line-height:1.1}
.lay-cards .ig-card .ig-s{font-size:1.65cqw;color:var(--muted)}
/* -- Layout HERO : texte dans le tiers gauche, sur VOILE crème dégradé (contraste garanti, quelle que soit la photo) -- */
.lay-hero .ig-hbox{position:absolute;left:0;top:0;bottom:0;width:50%;display:flex;flex-direction:column;justify-content:center;padding:0 10cqw 0 6cqw;background:linear-gradient(90deg,rgba(var(--cream),.97) 0,rgba(var(--cream),.97) 80%,rgba(var(--cream),0) 100%)}
.lay-hero .ig-eb{color:var(--acc);font-weight:800;font-size:2.1cqw;letter-spacing:.16em;text-transform:uppercase;margin-bottom:1.6cqw}
.lay-hero h2{margin:0;font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:5.4cqw;line-height:1.02;color:var(--ink)}
.lay-hero p{margin:2.2cqw 0 0;font-size:2.5cqw;color:var(--muted);line-height:1.3}
/* -- Layout SIDE : liste de features dans la zone gauche, sur VOILE crème dégradé -- */
.lay-side .ig-sbox{position:absolute;left:0;top:0;bottom:0;width:52%;padding:5cqw 11cqw 5cqw 6cqw;display:flex;flex-direction:column;justify-content:center;gap:2.6cqw;background:linear-gradient(90deg,rgba(var(--cream),.97) 0,rgba(var(--cream),.97) 80%,rgba(var(--cream),0) 100%)}
.lay-side h2{margin:0 0 .6cqw;font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:4.3cqw;color:var(--ink);line-height:1.05}
.lay-side .ig-sr{display:flex;gap:2cqw;align-items:center}
.lay-side .ig-ic{width:7cqw;height:7cqw}.lay-side .ig-ic svg{width:3.9cqw;height:3.9cqw}
.lay-side .ig-sr b{display:block;font-family:'Bricolage Grotesque','Inter',sans-serif;font-weight:800;font-size:2.4cqw;color:var(--ink);line-height:1.1}
.lay-side .ig-sr span{display:block;font-size:1.95cqw;color:var(--muted);margin-top:.4cqw}
/* -- Layout STAT : gros chiffre dans la zone droite, sur VOILE crème dégradé -- */
.lay-stat .ig-stbox{position:absolute;right:0;top:0;bottom:0;width:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:4cqw 5cqw;background:linear-gradient(270deg,rgba(var(--cream),.97) 0,rgba(var(--cream),.97) 84%,rgba(var(--cream),0) 100%)}
.lay-stat .ig-eb{color:var(--muted);font-weight:800;font-size:2.1cqw;letter-spacing:.1em;text-transform:uppercase;margin-bottom:1cqw}
.lay-stat .ig-big{font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:12cqw;color:var(--acc);line-height:.9}
.lay-stat .ig-lbl{font-family:'Bricolage Grotesque','Inter',sans-serif;font-weight:800;font-size:2.9cqw;color:var(--ink);margin-top:1cqw}
.lay-stat p{font-size:2.25cqw;color:var(--muted);margin:2.2cqw 0 0;line-height:1.3}
/* -- Layout BOX : flat-lay + légende en bas -- */
.lay-box .ig-legend{position:absolute;left:0;right:0;bottom:0;background:rgba(var(--cream),.96);padding:2.4cqw 3cqw;display:flex;flex-wrap:wrap;justify-content:center;gap:1.4cqw 3cqw}
.lay-box .ig-li{font-size:2cqw;color:var(--ink);font-weight:600;display:flex;align-items:center;gap:.9cqw}
.lay-box .ig-li::before{content:'';width:1.6cqw;height:1.6cqw;border-radius:50%;background:var(--acc);flex:none}
/* -- Layout EDITORIAL : titre serif sur scrim + barre translucide -- */
.lay-editorial .ig-ed-top{position:absolute;top:0;left:0;right:0;padding:5cqw 6cqw 9cqw;background:linear-gradient(180deg,rgba(24,17,13,.66),rgba(24,17,13,0))}
.lay-editorial .ig-ed-top h2{margin:0;color:#fff;font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:5cqw;line-height:1.02;letter-spacing:-.01em}
.lay-editorial .ig-ed-top p{margin:1.4cqw 0 0;color:#f4ece2;font-size:2.5cqw;font-weight:500;max-width:80%}
.lay-editorial .ig-ed-bar{position:absolute;left:0;right:0;bottom:0;display:flex;background:rgba(20,14,11,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:3cqw 2cqw}
.lay-editorial .ig-fc{flex:1;display:flex;flex-direction:column;align-items:center;gap:1.2cqw;text-align:center;padding:0 1.5cqw;color:#fff}
.lay-editorial .ig-fc.dv{border-left:1px solid rgba(255,255,255,.22)}
.lay-editorial .ig-fc svg{width:5cqw;height:5cqw;stroke:#f0a58c}
.lay-editorial .ig-fc span{font-size:1.95cqw;font-weight:600;line-height:1.14}

/* Galerie hero en mode set v3 (.igx) + A+ scroll (même set en pile). */
.hero-visual.is-ig .hero-stage .igx{border-radius:0;box-shadow:none;width:100%;max-width:min(88vh,820px);margin:0 auto}
.ig-aplus{max-width:1180px;margin:0 auto;padding:8px 16px 28px;display:flex;flex-direction:column;gap:16px}
.ig-aplus .igx{max-width:760px;width:100%;margin:0 auto}

/* A+ (scroll) : infographies complètes en grille 2/ligne (re-délivre le pitch aux non-swipeurs). */
.ig-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;max-width:1040px;margin:0 auto;padding:10px 0}   /* aéré (gap 16->30) : les visuels A+ respirent, meilleur scan */
.ig-grid .igx{border-radius:14px}
/* Nombre IMPAIR de cartes : la dernière (seule sur sa rangée) est CENTRÉE à largeur d'une colonne -> plus de cellule
   vide béante à droite. */
.ig-grid>*:last-child:nth-child(odd){grid-column:1 / -1;justify-self:center;width:100%;max-width:calc(50% - 8px)}
@media(max-width:680px){.ig-grid{grid-template-columns:1fr}.ig-grid>*:last-child:nth-child(odd){max-width:100%}}

/* Packshot : produit ENTIER sur blanc (jamais rogné) — image de flux + 1re image nette de galerie. */
.lay-packshot>img{object-fit:contain;background:#fff}

/* Story avec nos photos 1:1 : cover -> remplit le cadre, pas de bandes blanches (letterbox). */
.story-img img.sfit-cover{object-fit:cover}
/* Repli PACKSHOT (aucune scène lifestyle propre) : carte produit BLANCHE encadrée -> le packshot fond-blanc ne FLOTTE
   plus, étroit, sur la bande colorée (défaut « découpé/lévitation, tout petit »). Fond blanc = continuité avec le
   fond du packshot ; padding = respiration ; contain = jamais rogné. :has() cible le conteneur depuis la classe de l'img. */
.story-img:has(img.sfit-pad){background:#fff;border:1px solid rgba(20,40,28,.08);aspect-ratio:4/5;max-height:clamp(360px,42vw,520px)}
.story-img img.sfit-pad{object-fit:contain;padding:8%;width:100%;height:100%}

/* LIFESTYLE : image pleine, titre en bas sur dégradé sombre (émotionnel, sans cartes). */
.lay-lifestyle .ig-life{position:absolute;left:0;right:0;bottom:0;padding:7cqw 6cqw 5cqw;background:linear-gradient(0deg,rgba(22,16,12,.8) 0%,rgba(22,16,12,.42) 52%,transparent 100%)}
.lay-lifestyle .ig-life h2{margin:0;color:#fff;font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:5.4cqw;line-height:1.03;letter-spacing:-.01em;max-width:80%}
.lay-lifestyle .ig-life p{margin:1.6cqw 0 0;color:#f4ece2;font-size:2.6cqw;font-weight:500;max-width:72%}
/* DETAIL : macro d'une feature + légende compacte bas-gauche sur voile crème. */
.lay-detail .ig-detail{position:absolute;left:0;bottom:0;max-width:64%;padding:4cqw 6cqw 4.5cqw;background:linear-gradient(120deg,rgba(var(--cream),.96) 46%,rgba(var(--cream),0))}
.lay-detail .ig-detail b{display:block;font-family:'Bricolage Grotesque','Inter',sans-serif;font-weight:800;font-size:3.4cqw;color:var(--ink);line-height:1.08}
.lay-detail .ig-detail span{display:block;margin-top:1cqw;font-size:2.2cqw;color:var(--muted);font-weight:500}

/* OVERLAY INTELLIGENT : panneau texte flippé à l'OPPOSÉ du produit détecté (défaut = comportement d'origine, 0466 inchangé). */
.lay-hero.ig-pos-right .ig-hbox,.lay-side.ig-pos-right .ig-sbox{left:auto;right:0;padding-left:11cqw;padding-right:6cqw;background:linear-gradient(270deg,rgba(var(--cream),.97) 0,rgba(var(--cream),.97) 80%,rgba(var(--cream),0) 100%)}
.lay-stat.ig-pos-left .ig-stbox{right:auto;left:0;background:linear-gradient(90deg,rgba(var(--cream),.97) 0,rgba(var(--cream),.97) 84%,rgba(var(--cream),0) 100%)}

/* ===== FLOW 2 — images existantes localisées (base nettoyée + texte overlay) ===== */
.f2fig{position:relative;margin:0;container-type:inline-size;overflow:hidden;border-radius:14px}
.f2fig>img{display:block;width:100%;height:auto}
.f2ov{position:absolute;inset:0}
.f2b{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.08;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;overflow:hidden;padding:0 .3cqw;overflow-wrap:break-word;hyphens:auto}
.f2b[style*="text-align:left"]{align-items:flex-start}
.f2b[style*="text-align:right"]{align-items:flex-end}
.hero-visual.is-ig .hero-stage .f2fig{width:100%;max-width:min(88vh,820px);margin:0 auto;background:var(--bg)}
.ig-grid .f2fig{width:100%}

/* Customer account: intentionally small, storefront-native and mobile first. */
.account-wrap{min-height:65vh;padding:clamp(28px,6vw,72px) 18px;background:var(--bg,#faf8f4)}
.account-card{max-width:760px;margin:auto;padding:clamp(22px,5vw,48px);background:#fff;border:1px solid rgba(20,40,28,.1);border-radius:18px;box-shadow:0 16px 50px rgba(20,40,28,.07)}
.account-card h1{margin-top:0}.account-card label{display:grid;gap:8px;max-width:480px;font-weight:700}
.account-card input[type=email]{width:100%;padding:13px 14px;border:1px solid #a9b3aa;border-radius:9px;font:inherit;margin-bottom:14px}
.account-head,.account-order header{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}
.account-head form{margin:0}.account-head button{border:0;background:none;text-decoration:underline;cursor:pointer}
.account-order{margin:18px 0;padding:18px;border:1px solid rgba(20,40,28,.11);border-radius:12px}
.account-order p,.account-order ul{margin-bottom:0}.account-card aside{margin-top:28px;padding-top:20px;border-top:1px solid rgba(20,40,28,.11)}
.notice{padding:12px 14px;border-radius:9px;background:#edf7ef;color:#174b27}