/* ============================================================
   AL FAKHER FRANCE — feuille de style centrale
   Une seule source de vérité pour toutes les pages du site.
   Aucun JavaScript requis : accordéons <details>, filtres et
   menu mobile fonctionnent en CSS pur.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Palette réelle de la marque, relevée dans le thème alfakher.fr :
     brique #9C2E26 (couleur dominante), #872720 en appui, neutres froids. */
  --ink:#111111; --ink-2:#3A3A3A; --muted:#6B6B6B;
  --bg:#FFFFFF; --cream:#F9F9F9; --sand:#F1F1F1;
  --red:#9C2E26; --red-dk:#872720; --red-lt:#B3372D;
  --gold:#9C2E26; --gold-lt:#D9B3AE; --gold-bg:#F7EDEC;
  --star:#E0A03A;
  --line:#E6E6E6; --line-2:#D4D4D4; --ok:#175553;
  --r-s:10px; --r:14px; --r-l:22px; --r-xl:28px; --pill:999px;
  --sh-s:0 1px 2px rgba(17,17,17,.05);
  --sh:0 1px 2px rgba(17,17,17,.05),0 10px 28px -16px rgba(17,17,17,.26);
  --sh-l:0 2px 6px rgba(17,17,17,.05),0 30px 60px -30px rgba(17,17,17,.32);
  --max:1280px; --gut:34px;
}
@media(max-width:760px){:root{--gut:18px;}}

/* ---------- 2. RESET ---------- */
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip;}
body{background:var(--bg);color:var(--ink);line-height:1.6;font-size:16px;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;}
img,svg,video{max-width:100%;}
img{height:auto;display:block;}
a{color:inherit;}
table{border-collapse:collapse;}
:focus-visible{outline:2.5px solid var(--red);outline-offset:3px;border-radius:4px;}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important;}}

/* ---------- 3. LE NOM DE MARQUE ----------
   Dans une grotesque comme Inter, le « l » minuscule est un simple
   fût vertical : « Al Fakher » se lit « AI Fakher ». Le nom de marque
   est donc toujours composé dans la serif, où le « l » est empatté
   et sans ambiguïté possible. Utiliser <span class="brand">Al Fakher</span>
   pour CHAQUE occurrence du nom dans le contenu.                     */
.brand{font-family:'Fraunces','Iowan Old Style','Georgia',serif;
  font-weight:600;font-style:normal;letter-spacing:.004em;}
h1 .brand,h2 .brand,h3 .brand{font-weight:600;}

/* ---------- 4. MISE EN PAGE ---------- */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);}
.wrap-narrow{max-width:860px;margin-inline:auto;padding-inline:var(--gut);}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.sec{padding-block:76px;}
.sec-sm{padding-block:52px;}
.sec-cream{background:var(--cream);}
.sec-ink{background:var(--ink);color:#EFEFEF;}
@media(max-width:760px){.sec{padding-block:50px;}.sec-sm{padding-block:38px;}}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:300;border-radius:0 0 var(--r-s) 0;}
.skip:focus{left:0;}

/* ---------- 5. TYPOGRAPHIE ---------- */
h1,h2,h3,h4{line-height:1.14;letter-spacing:-.025em;font-weight:800;text-wrap:balance;}
h1{font-size:clamp(31px,4.6vw,52px);}
h2{font-size:clamp(26px,3.4vw,42px);}
h3{font-size:19px;letter-spacing:-.015em;}
h4{font-size:16px;letter-spacing:-.01em;}
.lead{color:var(--muted);font-size:17px;max-width:62ch;}
.eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:9px;}
.eyebrow::before{content:"";width:22px;height:1.5px;background:var(--gold-lt);display:block;flex:none;}
.sec-ink .eyebrow{color:var(--gold-lt);} .sec-ink .eyebrow::before{background:var(--gold);}
.sec-ink h1,.sec-ink h2,.sec-ink h3{color:#fff;} .sec-ink .lead{color:#A8A8A8;}

.prose h2{font-size:26px;margin:32px 0 12px;}
.prose h3{font-size:18px;margin:26px 0 8px;}
.prose p{color:var(--ink-2);font-size:15.5px;margin-bottom:12px;max-width:80ch;}
.prose p.lead{color:var(--muted);font-size:17px;}
.prose ul,.prose ol{margin:0 0 14px 20px;color:var(--ink-2);font-size:15.5px;max-width:80ch;}
.prose li{margin-bottom:7px;}
.prose a{color:var(--red);text-decoration:underline;text-underline-offset:3px;}
.prose strong{font-weight:700;color:var(--ink);}

/* ---------- 6. BOUTONS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--ink);color:#fff;padding:15px 26px;font-size:14.5px;font-weight:600;
  text-decoration:none;border:1.5px solid var(--ink);border-radius:var(--pill);
  cursor:pointer;font-family:inherit;line-height:1.2;
  transition:background .18s,color .18s,transform .18s,border-color .18s;}
.btn:hover{background:var(--red);border-color:var(--red);transform:translateY(-1px);}
.btn-red{background:var(--red);border-color:var(--red);}
.btn-red:hover{background:var(--red-dk);border-color:var(--red-dk);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2);}
.btn-ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink);}
.btn-light{background:#fff;color:var(--ink);border-color:#fff;}
.btn-light:hover{background:var(--ink);color:#fff;border-color:var(--ink);}
.btn-sm{padding:10px 17px;font-size:13px;}
.btn-block{width:100%;}
.btn svg{width:16px;height:16px;flex:none;}
.link-more{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;
  text-decoration:none;border-bottom:1.5px solid var(--gold-lt);padding-bottom:3px;flex:none;}
.link-more:hover{border-color:var(--red);color:var(--red);}
.link-more svg{width:15px;height:15px;}

/* ---------- 7. PORTAIL D'ÂGE (CSS pur) ---------- */
.gate{position:fixed;inset:0;z-index:200;background:rgba(17,17,17,.93);
  display:flex;align-items:center;justify-content:center;padding:20px;}
#agegate:checked ~ .gate{display:none;}
.gate-box{background:var(--bg);border-radius:var(--r-xl);max-width:450px;width:100%;
  padding:38px 30px;text-align:center;box-shadow:var(--sh-l);}
.gate-box .logo-mark{width:54px;height:54px;margin:0 auto 18px;}
.gate-box h2{font-size:25px;margin-bottom:10px;}
.gate-box p{font-size:14px;color:var(--muted);margin-bottom:22px;}
.gate-acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.gate-warn{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--muted);line-height:1.55;}

/* ---------- 8. BANDEAU + EN-TÊTE ---------- */
.announce{background:var(--ink);color:#EDEDED;font-size:12px;font-weight:500;}
.announce .wrap{display:flex;align-items:center;justify-content:center;gap:24px;
  padding-block:9px;flex-wrap:wrap;text-align:center;}
.announce b{color:var(--gold-lt);font-weight:700;}
.announce .dot{width:3px;height:3px;border-radius:50%;background:#4A4A4A;flex:none;}
@media(max-width:880px){.announce .wrap>*:nth-child(n+4){display:none;}}

header.site{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line);}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:13px;}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none;min-width:0;}
.logo-mark{width:44px;height:44px;flex:none;}
.logo-txt{display:flex;flex-direction:column;line-height:1;min-width:0;}
.logo-name{font-family:'Fraunces','Iowan Old Style','Georgia',serif;font-weight:700;
  font-size:20px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink);white-space:nowrap;}
.logo-sub{font-size:8.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--gold);margin-top:5px;white-space:nowrap;}
.nav-links{display:flex;align-items:center;gap:2px;list-style:none;}
.nav-links a{display:block;padding:9px 12px;font-size:14.5px;font-weight:500;
  text-decoration:none;border-radius:var(--pill);color:var(--ink-2);white-space:nowrap;}
.nav-links a:hover{background:var(--sand);color:var(--ink);}
.nav-links a[aria-current="page"]{background:var(--sand);color:var(--ink);font-weight:600;}
.nav-acts{display:flex;align-items:center;gap:2px;flex:none;}
.icon-btn{position:relative;display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;background:none;border:none;border-radius:var(--pill);
  cursor:pointer;color:var(--ink);text-decoration:none;}
.icon-btn:hover{background:var(--sand);}
.icon-btn svg{width:21px;height:21px;}
.cart-count{position:absolute;top:4px;right:3px;background:var(--red);color:#fff;
  border-radius:var(--pill);min-width:17px;height:17px;padding:0 4px;font-size:10px;
  font-weight:700;display:flex;align-items:center;justify-content:center;}
.burger{display:none;}
@media(max-width:1100px){
  .burger{display:flex;}
  .nav-links{position:absolute;top:100%;left:0;right:0;background:var(--bg);
    border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;
    padding:6px var(--gut) 16px;box-shadow:var(--sh);display:none;}
  header.site:has(#navtoggle:checked) .nav-links{display:flex;}
  .nav-links a{padding:13px 4px;font-size:16px;border-radius:0;border-bottom:1px solid var(--line);}
}
@media(max-width:560px){
  .logo-sub{display:none;}
  .hide-sm{display:none;}
  .icon-btn{width:38px;height:38px;}
  .icon-btn svg{width:19px;height:19px;}
}

/* ---------- 9. FIL D'ARIANE ---------- */
.crumbs{border-bottom:1px solid var(--line);background:var(--cream);}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding-block:12px;font-size:12.5px;color:var(--muted);}
.crumbs a{text-decoration:none;color:var(--muted);}
.crumbs a:hover{color:var(--red);text-decoration:underline;text-underline-offset:3px;}
.crumbs li+li::before{content:"›";margin-right:8px;color:var(--line-2);}
.crumbs [aria-current="page"]{color:var(--ink);font-weight:600;}

/* ---------- 10. EN-TÊTE DE SECTION ---------- */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  flex-wrap:wrap;margin-bottom:36px;}
.sec-head-txt{max-width:640px;min-width:0;}
.sec-head h2{max-width:22ch;margin-top:14px;}
.sec-head .lead{margin-top:12px;}

/* ---------- 11. HÉROS ---------- */
.hero{background:var(--cream);border-bottom:1px solid var(--line);}
.hero .wrap{display:grid;grid-template-columns:1.06fr .94fr;gap:44px;align-items:center;padding-block:60px;}
.hero .wrap>*{min-width:0;}
@media(max-width:940px){.hero .wrap{grid-template-columns:1fr;gap:26px;padding-block:38px;}}
.hero h1{margin:16px 0;}
.hero h1 em{font-style:normal;font-weight:800;color:var(--red);}
.hero-sub{font-size:17px;color:var(--ink-2);max-width:54ch;margin-bottom:24px;}
.hero-cta{display:flex;gap:11px;flex-wrap:wrap;margin-bottom:24px;}
.hero-proof{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13.5px;color:var(--muted);}
.hero-proof b{color:var(--ink);font-weight:700;}
.sep-v{width:1px;height:16px;background:var(--line-2);}
.hero-media{position:relative;display:flex;align-items:center;justify-content:center;min-height:400px;}
.halo{position:absolute;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(156,46,38,.24),rgba(156,46,38,0) 68%);}
.halo-ring{position:absolute;width:296px;height:296px;border:1px solid var(--line-2);border-radius:50%;}
.halo-ring.two{width:372px;height:372px;border-style:dashed;opacity:.6;}
.chip-float{position:absolute;background:#fff;border:1px solid var(--line);border-radius:var(--pill);
  padding:9px 15px;font-size:12.5px;font-weight:600;box-shadow:var(--sh);
  display:flex;align-items:center;gap:7px;white-space:nowrap;}
.chip-float svg{width:15px;height:15px;color:var(--gold);flex:none;}
.cf-1{top:6%;right:0;} .cf-2{bottom:20%;left:0;} .cf-3{bottom:3%;right:8%;}
@media(max-width:620px){
  .chip-float{display:none;}
  .hero-media{min-height:310px;}
  .halo{width:232px;height:232px;} .halo-ring{width:214px;height:214px;} .halo-ring.two{width:272px;height:272px;}
}

/* ---------- 12. LE DISPOSITIF (dessin CSS) ---------- */
.device{position:relative;width:116px;height:300px;border-radius:26px;flex:none;
  background:linear-gradient(145deg,var(--c1,#4A4046),var(--c2,#111111));
  box-shadow:0 26px 56px -22px rgba(17,17,17,.55),inset 0 1px 0 rgba(255,255,255,.26);}
.device::before{content:"";position:absolute;top:-15px;left:50%;transform:translateX(-50%);
  width:42px;height:25px;border-radius:12px 12px 5px 5px;background:linear-gradient(180deg,#2C2528,#191315);}
.device::after{content:"";position:absolute;bottom:12px;left:50%;transform:translateX(-50%);
  width:24px;height:5px;border-radius:3px;background:rgba(255,255,255,.3);}
.dev-screen{position:absolute;top:28px;left:50%;transform:translateX(-50%);width:74px;height:92px;
  border-radius:12px;background:rgba(8,6,6,.5);border:1px solid rgba(255,255,255,.14);
  display:flex;flex-direction:column;justify-content:center;gap:9px;padding:0 11px;}
.dev-bar{height:7px;border-radius:4px;background:rgba(255,255,255,.2);overflow:hidden;}
.dev-bar i{display:block;height:100%;background:var(--gold-lt);border-radius:4px;}
.dev-shine{position:absolute;top:8px;bottom:8px;left:13px;width:13px;border-radius:20px;
  background:linear-gradient(90deg,rgba(255,255,255,.24),rgba(255,255,255,0));}
.dev-brand{position:absolute;bottom:40px;left:0;right:0;text-align:center;
  font-family:'Fraunces','Georgia',serif;font-size:8px;letter-spacing:.1em;
  color:rgba(255,255,255,.6);text-transform:uppercase;}
@media(max-width:620px){.hero-media .device{width:100px;height:258px;}}

/* ---------- 13. BARRE DE RÉASSURANCE ---------- */
.usp{border-bottom:1px solid var(--line);background:#fff;}
.usp .wrap{display:grid;grid-template-columns:repeat(4,1fr);}
.usp .wrap>*{min-width:0;}
.usp-item{display:flex;gap:13px;align-items:flex-start;padding:24px 20px;border-right:1px solid var(--line);}
.usp-item:first-child{padding-left:0;}
.usp-item:last-child{border-right:none;padding-right:0;}
.usp-item svg{width:24px;height:24px;color:var(--red);flex:none;margin-top:2px;}
.usp-item b{display:block;font-size:14px;font-weight:700;margin-bottom:2px;}
.usp-item span{font-size:12.8px;color:var(--muted);line-height:1.45;}
@media(max-width:980px){
  .usp .wrap{grid-template-columns:repeat(2,1fr);}
  .usp-item{padding:18px 14px;}
  .usp-item:nth-child(2n){border-right:none;padding-right:0;}
  .usp-item:nth-child(2n+1){padding-left:0;}
  .usp-item:nth-child(-n+2){border-bottom:1px solid var(--line);}
}
@media(max-width:520px){
  .usp .wrap{grid-template-columns:1fr;}
  .usp-item{border-right:none;padding-inline:0;border-bottom:1px solid var(--line);}
  .usp-item:last-child{border-bottom:none;}
}

/* ---------- 14. BADGES, ÉTOILES, PASTILLES ---------- */
.badge{position:absolute;top:13px;left:13px;background:var(--ink);color:#fff;font-size:10.5px;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border-radius:var(--pill);}
.badge-red{background:var(--red);}
.badge-gold{background:var(--gold-bg);color:var(--gold);border:1px solid var(--gold-lt);}
.badge-r{left:auto;right:13px;}
.stars{--pct:100%;font-size:14px;letter-spacing:2.5px;flex:none;
  background:linear-gradient(90deg,var(--star) var(--pct),#D4D4D4 var(--pct));
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.pillule{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:var(--pill);
  background:var(--gold-bg);color:var(--gold);border:1px solid var(--gold-lt);}
.stock{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--ok);}
.stock::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none;}
.stock.low{color:#A9681B;} .stock.low::before{background:#A9681B;}
.stock.out{color:var(--muted);} .stock.out::before{background:var(--muted);}

/* ---------- 15. FICHES MODÈLE ---------- */
.models{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.models>*{min-width:0;}
@media(max-width:1060px){.models{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.models{grid-template-columns:1fr;}}
.mcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;
  display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s,border-color .2s;}
.mcard:hover{box-shadow:var(--sh-l);transform:translateY(-3px);border-color:var(--line-2);}
.mcard-media{position:relative;height:212px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--t1,#F1F1F1),var(--t2,#EAEAEA));}
.mcard-media .device{width:66px;height:168px;border-radius:16px;}
.mcard-media .device::before{width:26px;height:15px;top:-9px;border-radius:7px 7px 3px 3px;}
.mcard-media .device::after{width:15px;height:3px;bottom:8px;}
.mcard-media .dev-screen{width:44px;height:54px;top:16px;gap:5px;padding:0 7px;border-radius:7px;}
.mcard-media .dev-bar{height:4px;}
.mcard-media .dev-brand{font-size:6px;bottom:24px;letter-spacing:.08em;}
.mcard-media .dev-shine{left:8px;width:8px;}
.mcard-body{padding:20px;display:flex;flex-direction:column;flex:1;}
.mcard-body h3{margin-bottom:7px;}
.mcard-body h3 a{text-decoration:none;}
.mcard-body h3 a:hover{color:var(--red);}
.mcard-rate{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);margin-bottom:13px;}
.specs{list-style:none;display:flex;flex-direction:column;gap:7px;margin-bottom:17px;}
.specs li{display:flex;justify-content:space-between;gap:10px;font-size:13px;
  border-bottom:1px dashed var(--line);padding-bottom:7px;}
.specs li:last-child{border-bottom:none;padding-bottom:0;}
.specs li span{color:var(--muted);} .specs li b{font-weight:600;}
.mcard-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.price{display:flex;align-items:baseline;gap:7px;}
.price b{font-size:20px;font-weight:800;letter-spacing:-.02em;}
.price s{font-size:13px;color:var(--muted);}

/* ---------- 16. FILTRES DE SAVEUR (CSS pur) ---------- */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px;}
.chips label{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;
  border:1.5px solid var(--line-2);border-radius:var(--pill);font-size:13.5px;font-weight:600;
  cursor:pointer;background:#fff;transition:.16s;}
.chips label:hover{border-color:var(--ink);}
.chips label i{font-style:normal;font-size:11.5px;color:var(--muted);font-weight:600;}
.flavours:has(#fl-all:checked) .chips label[for="fl-all"],
.flavours:has(#fl-fruit:checked) .chips label[for="fl-fruit"],
.flavours:has(#fl-menthe:checked) .chips label[for="fl-menthe"],
.flavours:has(#fl-chicha:checked) .chips label[for="fl-chicha"],
.flavours:has(#fl-gourmand:checked) .chips label[for="fl-gourmand"]{background:var(--ink);color:#fff;border-color:var(--ink);}
.flavours:has(#fl-all:checked) .chips label[for="fl-all"] i,
.flavours:has(#fl-fruit:checked) .chips label[for="fl-fruit"] i,
.flavours:has(#fl-menthe:checked) .chips label[for="fl-menthe"] i,
.flavours:has(#fl-chicha:checked) .chips label[for="fl-chicha"] i,
.flavours:has(#fl-gourmand:checked) .chips label[for="fl-gourmand"] i{color:rgba(255,255,255,.6);}
.flavours:has(#fl-fruit:checked) .fcard:not(.t-fruit),
.flavours:has(#fl-menthe:checked) .fcard:not(.t-menthe),
.flavours:has(#fl-chicha:checked) .fcard:not(.t-chicha),
.flavours:has(#fl-gourmand:checked) .fcard:not(.t-gourmand){display:none;}

/* ---------- 17. FICHES SAVEUR ---------- */
.fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.fgrid>*{min-width:0;}
.fgrid-3{grid-template-columns:repeat(3,1fr);}
@media(max-width:1060px){.fgrid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:840px){.fgrid{grid-template-columns:repeat(2,1fr);gap:12px;}}
.fcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;
  display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s,border-color .2s;}
.fcard:hover{box-shadow:var(--sh-l);transform:translateY(-3px);border-color:var(--line-2);}
.fmedia{position:relative;height:236px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(158deg,var(--c1),var(--c2));}
.fmedia .device{width:64px;height:164px;border-radius:15px;
  background:linear-gradient(150deg,rgba(255,255,255,.34),rgba(0,0,0,.34));
  box-shadow:0 18px 34px -16px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.4);}
.fmedia .device::before{width:25px;height:14px;top:-9px;border-radius:7px 7px 3px 3px;background:rgba(0,0,0,.42);}
.fmedia .device::after{width:14px;height:3px;bottom:8px;}
.fmedia .dev-screen{width:42px;height:52px;top:15px;gap:5px;padding:0 7px;border-radius:7px;background:rgba(0,0,0,.3);}
.fmedia .dev-bar{height:4px;background:rgba(255,255,255,.32);}
.fmedia .dev-brand{font-size:6px;bottom:23px;letter-spacing:.06em;color:rgba(255,255,255,.8);}
.fmedia .dev-shine{left:8px;width:8px;top:6px;bottom:6px;}
.rank{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.94);color:var(--ink);
  font-size:11px;font-weight:800;padding:6px 10px;border-radius:var(--pill);box-shadow:var(--sh-s);}
.fbadge{position:absolute;top:12px;right:12px;background:rgba(17,17,17,.8);color:#fff;font-size:10px;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 9px;border-radius:var(--pill);}
.fbody{padding:16px 16px 18px;display:flex;flex-direction:column;flex:1;gap:6px;}
.fbody h3{font-size:16.5px;}
.fbody h3 a{text-decoration:none;}
.fbody h3 a:hover{color:var(--red);}
.fprof{font-size:12.8px;color:var(--muted);line-height:1.45;}
.ftags{display:flex;gap:5px;flex-wrap:wrap;margin-top:2px;}
.ftag{font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);
  background:var(--sand);border:1px solid var(--line);padding:3px 8px;border-radius:var(--pill);}
.frate{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);}
.fbuy{margin-top:auto;padding-top:12px;display:flex;align-items:center;justify-content:space-between;gap:8px;}
@media(max-width:840px){
  .fmedia{height:190px;}
  .fmedia .device{width:52px;height:132px;}
  .fmedia .dev-screen{width:34px;height:42px;top:12px;}
  .fbody h3{font-size:14.5px;} .fprof{font-size:11.8px;}
  .price b{font-size:17px;}
  .fbuy .btn-sm{padding:9px 12px;font-size:12px;}
}

/* ---------- 18. GRILLE 2 COLONNES ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;}
.split>*{min-width:0;}
@media(max-width:940px){.split{grid-template-columns:1fr;gap:30px;}}

/* ---------- 19. TABLEAUX ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-l);background:#fff;min-width:0;}
table.cmp{width:100%;font-size:13.5px;min-width:480px;}
table.cmp caption{text-align:left;padding:16px 14px 2px;font-size:13px;color:var(--muted);caption-side:top;}
table.cmp th,table.cmp td{padding:13px 12px;text-align:left;border-bottom:1px solid var(--line);}
table.cmp thead th{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  font-weight:700;background:var(--cream);}
table.cmp tbody th{font-weight:700;font-size:13.5px;}
table.cmp tbody tr:last-child th,table.cmp tbody tr:last-child td{border-bottom:none;}
table.cmp tbody tr:hover{background:var(--cream);}

/* ---------- 20. LISTES À COCHES ---------- */
.checklist{list-style:none;display:flex;flex-direction:column;gap:11px;margin:18px 0 0;}
.checklist li{display:flex;gap:11px;font-size:15px;color:var(--ink-2);}
.checklist li svg{width:19px;height:19px;color:var(--ok);flex:none;margin-top:3px;}

/* ---------- 21. CARTES DE CONFIANCE (fond sombre) ---------- */
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:34px;}
.trust-grid>*{min-width:0;}
@media(max-width:940px){.trust-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.trust-grid{grid-template-columns:1fr;}}
.tcard{background:#1A1A1A;border:1px solid #2C2C2C;border-radius:var(--r-l);padding:24px 22px;}
.tcard svg{width:26px;height:26px;color:var(--gold-lt);margin-bottom:14px;}
.tcard h3{color:#fff;font-size:16.5px;margin-bottom:8px;}
.tcard p{font-size:13.5px;color:#9B9B9B;line-height:1.55;}
.tcard a{color:var(--gold-lt);text-decoration:underline;text-underline-offset:3px;}

/* ---------- 22. AVIS ---------- */
.rev-top{display:flex;align-items:center;gap:24px;flex-wrap:wrap;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-l);padding:22px 26px;margin-bottom:20px;}
.rev-score{display:flex;align-items:baseline;gap:5px;}
.rev-score b{font-size:40px;font-weight:800;letter-spacing:-.03em;line-height:1;}
.rev-score span{font-size:15px;color:var(--muted);}
.rev-meta{font-size:13.5px;color:var(--muted);} .rev-meta b{color:var(--ink);}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.rev-grid>*{min-width:0;}
@media(max-width:940px){.rev-grid{grid-template-columns:1fr;}}
.rcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:22px;
  display:flex;flex-direction:column;gap:10px;}
.rcard blockquote{font-size:15px;color:var(--ink-2);line-height:1.6;}
.rcard footer{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted);
  margin-top:auto;padding-top:6px;flex-wrap:wrap;}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--sand);color:var(--gold);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;
  flex:none;border:1px solid var(--line-2);}
.verified{display:inline-flex;align-items:center;gap:4px;color:var(--ok);font-weight:600;font-size:11.5px;}
.verified svg{width:13px;height:13px;}

/* ---------- 23. FAQ (accordéon natif) ---------- */
.faq{display:grid;gap:10px;max-width:880px;}
details.q{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;}
details.q[open]{border-color:var(--line-2);box-shadow:var(--sh-s);}
details.q summary{list-style:none;cursor:pointer;padding:18px 54px 18px 20px;font-size:16px;
  font-weight:600;position:relative;}
details.q summary::-webkit-details-marker{display:none;}
details.q summary::after{content:"";position:absolute;right:20px;top:50%;width:13px;height:13px;margin-top:-6px;
  background:linear-gradient(var(--ink),var(--ink)) center/13px 1.8px no-repeat,
             linear-gradient(var(--ink),var(--ink)) center/1.8px 13px no-repeat;}
details.q[open] summary::after{background:linear-gradient(var(--red),var(--red)) center/13px 1.8px no-repeat;}
details.q summary:hover{background:var(--cream);}
details.q .a{padding:0 20px 20px;font-size:15px;color:var(--ink-2);line-height:1.65;}
details.q .a p+p{margin-top:10px;}
details.q .a a{color:var(--red);text-decoration:underline;text-underline-offset:3px;}

/* ---------- 24. BANDEAU D'APPEL ---------- */
.band{background:linear-gradient(135deg,var(--red-dk),var(--red));color:#fff;border-radius:var(--r-xl);
  padding:44px 40px;display:grid;grid-template-columns:1.4fr auto;gap:26px;align-items:center;}
.band>*{min-width:0;}
@media(max-width:820px){.band{grid-template-columns:1fr;padding:30px 22px;}}
.band h2{color:#fff;font-size:clamp(24px,3vw,34px);margin-bottom:10px;}
.band p{color:rgba(255,255,255,.82);font-size:15px;max-width:52ch;}

/* ---------- 25. BLOC SEO DE BAS DE PAGE ---------- */
.seotext{background:var(--cream);border-top:1px solid var(--line);}
.seotext .wrap{padding-block:56px;}
.seotext h2{font-size:26px;margin-bottom:16px;}
.seotext h3{font-size:17px;margin:24px 0 8px;}
.seotext p{font-size:14.5px;color:var(--ink-2);line-height:1.72;margin-bottom:11px;max-width:86ch;}
.seotext a{color:var(--red);text-decoration:underline;text-underline-offset:3px;}

/* ---------- 26. PIED DE PAGE ---------- */
footer.site{background:var(--ink);color:#A8A8A8;padding-top:54px;}
footer.site .fgrid-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:30px;
  padding-bottom:42px;border-bottom:1px solid #292929;}
footer.site .fgrid-top>*{min-width:0;}
@media(max-width:1060px){footer.site .fgrid-top{grid-template-columns:1fr 1fr 1fr;}}
@media(max-width:700px){footer.site .fgrid-top{grid-template-columns:1fr 1fr;gap:24px;}}
@media(max-width:430px){footer.site .fgrid-top{grid-template-columns:1fr;}}
footer.site .logo-name{color:#fff;}
footer.site .logo-sub{display:block;}
footer.site .fabout p{font-size:13.5px;line-height:1.65;margin:16px 0;max-width:40ch;}
footer.site h3{color:#fff;font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  margin-bottom:15px;font-weight:700;}
footer.site ul{list-style:none;display:flex;flex-direction:column;gap:10px;}
footer.site ul a{font-size:13.5px;text-decoration:none;color:#A8A8A8;}
footer.site ul a:hover{color:var(--gold-lt);}
.socials{display:flex;gap:9px;}
.socials a{width:36px;height:36px;border:1px solid #2C2C2C;border-radius:var(--pill);
  display:flex;align-items:center;justify-content:center;color:#A8A8A8;}
.socials a:hover{border-color:var(--gold);color:var(--gold-lt);}
.socials svg{width:17px;height:17px;}
.pay{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px;}
.pay span{border:1px solid #2C2C2C;border-radius:6px;padding:5px 9px;font-size:10.5px;
  font-weight:700;letter-spacing:.05em;color:#808080;}
.fwarn{border:1px solid #3B2D2B;background:#1B1B1B;border-radius:var(--r);padding:16px 20px;
  margin:28px 0;font-size:12.5px;color:#BDBDBD;line-height:1.6;display:flex;gap:12px;align-items:flex-start;}
.fwarn svg{width:20px;height:20px;color:var(--gold-lt);flex:none;margin-top:1px;}
.fbottom{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding-bottom:32px;font-size:12.5px;color:#808080;}
footer.site .fbottom ul{flex-direction:row;gap:18px;flex-wrap:wrap;}
footer.site .fbottom a{color:#808080;text-decoration:none;}
footer.site .fbottom a:hover{color:var(--gold-lt);}

/* ============================================================
   PAGES INTERNES
   ============================================================ */

/* ---------- 27. EN-TÊTE DE PAGE CATÉGORIE ---------- */
.pagehead{background:linear-gradient(168deg,var(--cream),#fff 70%);border-bottom:1px solid var(--line);}
.pagehead .wrap{padding-block:44px;}
.pagehead h1{margin:14px 0 14px;max-width:20ch;}
.pagehead .lead{font-size:17px;}
.pagehead-meta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:18px;
  font-size:13.5px;color:var(--muted);}
.pagehead-meta b{color:var(--ink);}

/* ---------- 28. BARRE DE TRI / FILTRES CATÉGORIE ---------- */
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding:16px 0;border-bottom:1px solid var(--line);margin-bottom:26px;}
.toolbar p{font-size:13.5px;color:var(--muted);}
.toolbar p b{color:var(--ink);}
.sortbox{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--muted);}
.sortbox select{font-family:inherit;font-size:13.5px;font-weight:600;color:var(--ink);
  padding:9px 14px;border:1.5px solid var(--line-2);border-radius:var(--pill);background:#fff;cursor:pointer;}
.layout-cat{display:grid;grid-template-columns:250px 1fr;gap:34px;align-items:start;}
.layout-cat>*{min-width:0;}
@media(max-width:980px){.layout-cat{grid-template-columns:1fr;gap:22px;}}
.facets{border:1px solid var(--line);border-radius:var(--r-l);padding:6px 18px 12px;background:#fff;
  position:sticky;top:86px;}
@media(max-width:980px){.facets{position:static;}}
.facets details{border-bottom:1px solid var(--line);}
.facets details:last-child{border-bottom:none;}
.facets summary{list-style:none;cursor:pointer;padding:15px 22px 15px 0;font-size:13.5px;
  font-weight:700;letter-spacing:.04em;text-transform:uppercase;position:relative;}
.facets summary::-webkit-details-marker{display:none;}
.facets summary::after{content:"";position:absolute;right:2px;top:50%;width:9px;height:9px;
  margin-top:-6px;border-right:1.8px solid var(--ink);border-bottom:1.8px solid var(--ink);
  transform:rotate(45deg);}
.facets details[open] summary::after{transform:rotate(-135deg);margin-top:-2px;}
.facets ul{list-style:none;padding-bottom:14px;display:flex;flex-direction:column;gap:9px;}
.facets label{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink-2);cursor:pointer;}
.facets label input{width:16px;height:16px;accent-color:var(--red);flex:none;}
.facets label span{color:var(--muted);font-size:12px;margin-left:auto;}

/* ---------- 29. PAGINATION ---------- */
.pager{display:flex;gap:7px;justify-content:center;align-items:center;margin-top:38px;flex-wrap:wrap;}
.pager a,.pager span{min-width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  border:1.5px solid var(--line-2);border-radius:var(--pill);font-size:14px;font-weight:600;
  text-decoration:none;padding:0 12px;}
.pager a:hover{border-color:var(--ink);}
.pager [aria-current="page"]{background:var(--ink);color:#fff;border-color:var(--ink);}
.pager .disabled{color:var(--line-2);border-color:var(--line);}

/* ---------- 30. PAGE PRODUIT ---------- */
.pdp{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:start;padding-block:40px;}
.pdp>*{min-width:0;}
@media(max-width:960px){.pdp{grid-template-columns:1fr;gap:28px;}}
.gallery{display:grid;grid-template-columns:76px 1fr;gap:14px;align-items:start;}
.gallery>*{min-width:0;}
@media(max-width:520px){.gallery{grid-template-columns:1fr;}}
.thumbs{display:flex;flex-direction:column;gap:10px;}
@media(max-width:520px){.thumbs{flex-direction:row;order:2;}}
.thumb{border:1.5px solid var(--line);border-radius:var(--r);height:76px;width:100%;
  display:flex;align-items:center;justify-content:center;background:var(--cream);cursor:pointer;overflow:hidden;}
.thumb[aria-current="true"]{border-color:var(--ink);}
.thumb .device{width:22px;height:54px;border-radius:6px;}
.thumb .device::before{width:9px;height:5px;top:-3px;border-radius:3px 3px 1px 1px;}
.thumb .device::after,.thumb .dev-screen,.thumb .dev-brand,.thumb .dev-shine{display:none;}
.stage{position:relative;border:1px solid var(--line);border-radius:var(--r-l);height:470px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--t1,#F1F1F1),var(--t2,#EAEAEA));overflow:hidden;}
@media(max-width:520px){.stage{height:340px;order:1;}}
.stage .device{width:104px;height:270px;border-radius:22px;}
.pdp-info h1{font-size:clamp(26px,3.4vw,38px);margin:10px 0 12px;}
.pdp-brandline{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);}
.pdp-rate{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--muted);margin-bottom:16px;flex-wrap:wrap;}
.pdp-rate a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;}
.pdp-short{font-size:15.5px;color:var(--ink-2);margin-bottom:20px;max-width:58ch;}
.pdp-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px;}
.pdp-price b{font-size:32px;font-weight:800;letter-spacing:-.03em;}
.pdp-price s{font-size:17px;color:var(--muted);}
.pdp-price .save{background:var(--red);color:#fff;font-size:12px;font-weight:700;
  padding:4px 10px;border-radius:var(--pill);}
.pdp-vat{font-size:12.5px;color:var(--muted);margin-bottom:20px;}
.optgroup{margin-bottom:20px;}
.optgroup h2,.optgroup h3{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:11px;}
.swatches{display:flex;gap:9px;flex-wrap:wrap;}
.swatch{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line-2);
  border-radius:var(--pill);padding:8px 15px;font-size:13.5px;font-weight:600;
  text-decoration:none;background:#fff;cursor:pointer;}
.swatch:hover{border-color:var(--ink);}
.swatch[aria-pressed="true"],.swatch[aria-current="true"]{border-color:var(--ink);background:var(--ink);color:#fff;}
.swatch i{width:15px;height:15px;border-radius:50%;flex:none;
  background:linear-gradient(140deg,var(--c1),var(--c2));border:1px solid rgba(0,0,0,.12);}
.qtyrow{display:flex;gap:10px;align-items:stretch;margin-bottom:14px;flex-wrap:wrap;}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line-2);border-radius:var(--pill);overflow:hidden;}
.qty button{width:42px;height:48px;border:none;background:none;font-size:18px;cursor:pointer;
  font-family:inherit;color:var(--ink);}
.qty button:hover{background:var(--sand);}
.qty input{width:44px;height:48px;border:none;text-align:center;font-family:inherit;
  font-size:15px;font-weight:700;background:none;color:var(--ink);}
.qtyrow .btn{flex:1;min-width:190px;}
.pdp-assur{list-style:none;display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);
  margin-top:22px;padding-top:20px;}
.pdp-assur li{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:var(--ink-2);}
.pdp-assur svg{width:18px;height:18px;color:var(--red);flex:none;margin-top:2px;}

/* ---------- 31. PANIER ---------- */
.cart-layout{display:grid;grid-template-columns:1fr 360px;gap:32px;align-items:start;padding-block:36px;}
.cart-layout>*{min-width:0;}
@media(max-width:960px){.cart-layout{grid-template-columns:1fr;}}
.cart-list{border:1px solid var(--line);border-radius:var(--r-l);background:#fff;overflow:hidden;}
.cart-row{display:grid;grid-template-columns:92px 1fr auto;gap:16px;padding:18px;
  border-bottom:1px solid var(--line);align-items:center;}
.cart-row>*{min-width:0;}
.cart-row:last-child{border-bottom:none;}
@media(max-width:620px){.cart-row{grid-template-columns:70px 1fr;}.cart-row .cart-line-end{grid-column:1/-1;
  display:flex;justify-content:space-between;align-items:center;}}
.cart-thumb{height:100px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;
  background:linear-gradient(158deg,var(--c1,#F1F1F1),var(--c2,#EAEAEA));}
.cart-thumb .device{width:30px;height:74px;border-radius:8px;}
.cart-thumb .device::before{width:12px;height:7px;top:-4px;border-radius:4px 4px 2px 2px;}
.cart-thumb .dev-screen,.cart-thumb .dev-brand,.cart-thumb .device::after{display:none;}
@media(max-width:620px){.cart-thumb{height:80px;}.cart-thumb .device{width:24px;height:58px;}}
.cart-name{font-size:15.5px;font-weight:700;letter-spacing:-.01em;margin-bottom:4px;}
.cart-name a{text-decoration:none;} .cart-name a:hover{color:var(--red);}
.cart-var{font-size:12.8px;color:var(--muted);margin-bottom:8px;}
.cart-acts{display:flex;gap:14px;align-items:center;font-size:12.5px;flex-wrap:wrap;}
.cart-acts button,.cart-acts a{background:none;border:none;padding:0;font-family:inherit;font-size:12.5px;
  color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.cart-acts button:hover,.cart-acts a:hover{color:var(--red);}
.cart-line-end{text-align:right;}
.cart-line-end b{font-size:16px;font-weight:800;display:block;}
.cart-line-end s{font-size:12.5px;color:var(--muted);}
.summary{border:1px solid var(--line);border-radius:var(--r-l);background:#fff;padding:22px;
  position:sticky;top:86px;}
@media(max-width:960px){.summary{position:static;}}
.summary h2{font-size:18px;margin-bottom:16px;}
.sumline{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:9px 0;color:var(--ink-2);}
.sumline.total{border-top:1px solid var(--line);margin-top:8px;padding-top:15px;font-size:18px;font-weight:800;color:var(--ink);}
.sumline .free{color:var(--ok);font-weight:700;}
.promo{display:flex;gap:8px;margin:14px 0;}
.promo input{flex:1;min-width:0;padding:12px 14px;border:1.5px solid var(--line-2);border-radius:var(--pill);
  font-family:inherit;font-size:13.5px;}
.shipbar{background:var(--gold-bg);border:1px solid var(--gold-lt);border-radius:var(--r);
  padding:12px 14px;font-size:12.8px;color:#7A3A33;margin-bottom:16px;}
.shipbar .track{height:6px;border-radius:3px;background:#E8D6D3;margin-top:9px;overflow:hidden;}
.shipbar .track i{display:block;height:100%;background:var(--gold);border-radius:3px;}
.trustrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;padding-top:16px;border-top:1px solid var(--line);}
.trustrow span{border:1px solid var(--line);border-radius:6px;padding:5px 9px;font-size:10.5px;
  font-weight:700;letter-spacing:.05em;color:var(--muted);}
.empty-cart{text-align:center;padding:60px 20px;border:1px dashed var(--line-2);border-radius:var(--r-l);}
.empty-cart svg{width:44px;height:44px;color:var(--line-2);margin:0 auto 16px;}

/* ---------- 32. COMMANDE (checkout) ---------- */
.steps{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;
  padding-block:22px;border-bottom:1px solid var(--line);}
.steps li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);list-style:none;}
.steps li+li::before{content:"";width:26px;height:1.5px;background:var(--line-2);display:block;}
.steps b{width:24px;height:24px;border-radius:50%;background:var(--sand);color:var(--muted);
  display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;}
.steps [aria-current="step"]{color:var(--ink);font-weight:700;}
.steps [aria-current="step"] b{background:var(--ink);color:#fff;}
.steps .done b{background:var(--ok);color:#fff;}
.fieldset{border:1px solid var(--line);border-radius:var(--r-l);background:#fff;padding:22px;margin-bottom:16px;}
.fieldset h2{font-size:17px;margin-bottom:16px;display:flex;align-items:center;gap:10px;}
.fieldset h2 b{width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none;}
.fgrid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.fgrid2>*{min-width:0;}
@media(max-width:620px){.fgrid2{grid-template-columns:1fr;}}
.field{display:flex;flex-direction:column;gap:6px;}
.field.wide{grid-column:1/-1;}
.field label{font-size:12.5px;font-weight:600;color:var(--ink-2);}
.field input,.field select,.field textarea{padding:12px 14px;border:1.5px solid var(--line-2);
  border-radius:var(--r-s);font-family:inherit;font-size:14.5px;background:#fff;color:var(--ink);}
.field input:focus,.field select:focus{border-color:var(--ink);}
.field small{font-size:11.5px;color:var(--muted);}
.radio-card{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--line-2);
  border-radius:var(--r);padding:14px 16px;cursor:pointer;margin-bottom:10px;}
.radio-card:hover{border-color:var(--ink);}
.radio-card input{margin-top:3px;accent-color:var(--red);width:17px;height:17px;flex:none;}
.radio-card b{display:block;font-size:14.5px;}
.radio-card span{font-size:12.8px;color:var(--muted);}
.radio-card .rc-price{margin-left:auto;font-weight:700;font-size:14.5px;white-space:nowrap;}

/* ---------- 33. BLOG ---------- */
.postgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.postgrid>*{min-width:0;}
@media(max-width:940px){.postgrid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:620px){.postgrid{grid-template-columns:1fr;}}
.pcard{border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;background:#fff;
  display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s;}
.pcard:hover{box-shadow:var(--sh-l);transform:translateY(-3px);}
.pcard .pmedia{height:168px;background:linear-gradient(150deg,var(--t1,#F1F1F1),var(--t2,#E8E8E8));}
.pcard-body{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1;}
.pcat{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);}
.pcard h3{font-size:17px;}
.pcard h3 a{text-decoration:none;} .pcard h3 a:hover{color:var(--red);}
.pcard p{font-size:13.5px;color:var(--muted);line-height:1.55;}
.pmeta{margin-top:auto;padding-top:8px;font-size:12px;color:var(--muted);}
.article{max-width:760px;margin-inline:auto;}
.article .artmeta{display:flex;gap:12px;flex-wrap:wrap;align-items:center;font-size:13px;
  color:var(--muted);padding-bottom:20px;margin-bottom:24px;border-bottom:1px solid var(--line);}
.toc{background:var(--cream);border:1px solid var(--line);border-radius:var(--r-l);padding:20px 24px;margin:24px 0;}
.toc h2{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;}
.toc ol{margin:0 0 0 18px;font-size:14.5px;}
.toc li{margin-bottom:6px;}
.toc a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-2);}
.toc a:hover{color:var(--red);border-color:var(--red);}

/* ---------- 34. PAGES SIMPLES / 404 / PLAN DU SITE ---------- */
.simple{padding-block:56px;}
.simple h1{margin-bottom:16px;}
.err{text-align:center;padding-block:80px;}
.err .code{font-family:'Fraunces','Georgia',serif;font-size:clamp(76px,14vw,150px);
  font-weight:700;line-height:1;color:var(--red);letter-spacing:-.04em;}
.err h1{margin:10px 0 12px;}
.err p{color:var(--muted);max-width:46ch;margin-inline:auto;margin-bottom:26px;}
.searchbox{display:flex;gap:8px;max-width:440px;margin:0 auto 30px;}
.searchbox input{flex:1;min-width:0;padding:14px 18px;border:1.5px solid var(--line-2);
  border-radius:var(--pill);font-family:inherit;font-size:14.5px;}
.sitemap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
.sitemap-grid>*{min-width:0;}
@media(max-width:940px){.sitemap-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.sitemap-grid{grid-template-columns:1fr;}}
.sitemap-grid h2{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:12px;}
.sitemap-grid ul{list-style:none;display:flex;flex-direction:column;gap:9px;}
.sitemap-grid a{font-size:14px;text-decoration:none;color:var(--ink-2);}
.sitemap-grid a:hover{color:var(--red);text-decoration:underline;text-underline-offset:3px;}

/* ============================================================
   35. MÉDIAS PRODUIT (photos réelles du catalogue)
   ============================================================ */
.fmedia-link{display:block;text-decoration:none;}
.fmedia-img{position:relative;aspect-ratio:1/1;background:var(--cream);
  display:flex;align-items:center;justify-content:center;overflow:hidden;}
.fmedia-img img{width:100%;height:100%;object-fit:contain;padding:12px;
  transition:transform .3s ease;mix-blend-mode:multiply;}
.fcard:hover .fmedia-img img{transform:scale(1.045);}
.fcat{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gold);margin-bottom:2px;}
.fbody h3{font-size:16px;line-height:1.25;}

.mcard-media-img{display:block;height:auto;aspect-ratio:4/3;padding:14px;background:var(--cream);}
.mcard-media-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;}
.mcard-body .fprof{font-size:13px;color:var(--muted);margin-bottom:14px;line-height:1.5;}
.models-3{grid-template-columns:repeat(3,1fr);}
@media(max-width:940px){.models-3{grid-template-columns:1fr;}}

.hero-img{position:relative;z-index:1;width:min(340px,80%);height:auto;object-fit:contain;mix-blend-mode:multiply;
  filter:drop-shadow(0 30px 45px rgba(17,17,17,.28));}
@media(max-width:620px){.hero-img{width:min(240px,68%);}}

.stage-img{padding:26px;}
.stage-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;}
.thumb img{width:100%;height:100%;object-fit:contain;padding:6px;mix-blend-mode:multiply;}

/* ---------- profil aromatique ---------- */
.profile-card{border:1px solid var(--line);border-radius:var(--r-l);background:#fff;padding:22px;}
.profile-card h2{font-size:15px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-bottom:16px;}
.pbar{display:grid;grid-template-columns:118px 1fr 44px;gap:10px;align-items:center;
  font-size:13px;margin-bottom:11px;}
.pbar>span{color:var(--ink-2);}
.pbar i{display:block;height:8px;border-radius:4px;background:var(--sand);overflow:hidden;}
.pbar i b{display:block;height:100%;border-radius:4px;
  background:linear-gradient(90deg,var(--red-lt),var(--red));}
.pbar em{font-style:normal;font-weight:700;font-size:12.5px;text-align:right;color:var(--ink);}
.pbar-note{font-size:11.5px;color:var(--muted);margin-top:14px;padding-top:12px;
  border-top:1px solid var(--line);line-height:1.5;}
@media(max-width:420px){.pbar{grid-template-columns:96px 1fr 38px;font-size:12px;}}

/* ---------- divers ---------- */
.filterset{border:0;padding:0;margin:0;}
.linklist{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:8px 20px;}
.linklist a{font-size:13.5px;text-decoration:none;color:var(--ink-2);}
.linklist a:hover{color:var(--red);text-decoration:underline;text-underline-offset:3px;}
@media(max-width:940px){.linklist{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.linklist{grid-template-columns:1fr;}}
.shop-intro{margin-top:14px;max-width:70ch;}
.facets ul a{text-decoration:none;color:var(--ink-2);display:flex;justify-content:space-between;gap:10px;}
.facets ul a:hover{color:var(--red);}
.facets ul a span{color:var(--muted);font-size:12px;}

/* ============================================================
   36. AFFINAGE MOBILE
   ============================================================ */
@media(max-width:840px){
  .fgrid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .fbody{padding:13px 13px 15px;gap:5px;}
  .fbody h3{font-size:14px;}
  .fprof{font-size:11.5px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
  .fmedia-img img{padding:8px;}
  .ftags .ftag:nth-child(n+2){display:none;}
  .fbuy{flex-direction:column;align-items:stretch;gap:8px;}
  .fbuy .btn-sm{width:100%;}
  .price b{font-size:16px;}
}
@media(max-width:520px){
  .fgrid{gap:10px;}
  .sec-head{margin-bottom:24px;}
  .sec-head h2{max-width:none;}
  .pagehead .wrap{padding-block:30px;}
  .pdp{padding-block:22px;}
  .pdp-info h1{font-size:23px;}
  .qtyrow{flex-direction:column;}
  .qtyrow .btn{min-width:0;width:100%;}
  .qty{align-self:flex-start;}
  .toolbar{padding:12px 0;margin-bottom:18px;}
  .toolbar p{font-size:12.5px;}
  .sortbox{width:100%;}
  .sortbox select{flex:1;}
  .chips{gap:6px;margin-bottom:18px;overflow-x:auto;flex-wrap:nowrap;
    padding-bottom:6px;scrollbar-width:none;}
  .chips::-webkit-scrollbar{display:none;}
  .chips label{white-space:nowrap;padding:8px 13px;font-size:12.5px;}
  .band{padding:26px 20px;}
  .rev-top{padding:18px;gap:16px;}
  .seotext .wrap{padding-block:38px;}
  .seotext h2{font-size:21px;}
  .seotext p{font-size:14px;}
  .gate-box{padding:28px 22px;}
  .gate-box h2{font-size:21px;}
  .gate-acts .btn{width:100%;}
}

/* ============================================================
   37. NOTES RÉELLES + MARQUEURS À COMPLÉTER
   ============================================================ */
/* Fiche « produit le mieux noté » : remplace les faux témoignages.
   Les notes affichées proviennent du catalogue réel. */
.rcard-prod{display:grid;grid-template-columns:86px 1fr;gap:16px;align-items:start;}
.rcard-prod>*{min-width:0;}
.rcard-media{display:block;border-radius:var(--r);background:var(--cream);padding:8px;
  border:1px solid var(--line);}
.rcard-media img{width:100%;height:auto;object-fit:contain;mix-blend-mode:multiply;}
.rcard-prod .cart-name{margin:2px 0 6px;}
.rcard-prod .frate{margin-bottom:8px;}
.rcard-prod .fprof{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
@media(max-width:420px){.rcard-prod{grid-template-columns:64px 1fr;gap:12px;}}

/* Marqueur visible pour les données commerciales que l'exploitant doit renseigner
   (tarifs de port, mentions légales). Volontairement voyant. */
.todo{background:#FDF3F2;color:#872720;border:1px dashed #D9B3AE;border-radius:5px;
  padding:1px 7px;font-size:.88em;font-weight:600;white-space:nowrap;}
footer.site .todo{background:#3B2D2B;color:#E3BDB8;border-color:#6B5522;}

/* ============================================================
   38. LOGO RÉEL DE LA MARQUE
   Le fichier fourni est blanc sur fond transparent (conçu pour un
   en-tête sombre). Sur fond clair on le passe en noir via un filtre,
   ce qui préserve la forme exacte du logo sans le recolorer.
   ============================================================ */
.logo-img{height:34px;width:auto;display:block;filter:brightness(0);}
.logo{gap:12px;align-items:center;}
.logo-tag{font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);border-left:1px solid var(--line-2);padding-left:11px;white-space:nowrap;}
.logo-img-gate{height:54px;margin:0 auto 20px;filter:brightness(0);}
footer.site .logo-img{filter:none;}          /* fond sombre : logo blanc d'origine */
footer.site .logo{margin-bottom:4px;}
@media(max-width:560px){
  .logo-img{height:28px;}
  .logo-tag{display:none;}
}

/* ============================================================
   39. GRILLE PRODUIT MOBILE — 2 COLONNES GARANTIES
   ============================================================ */
@media(max-width:840px){
  .fgrid,.fgrid-3{grid-template-columns:repeat(2,1fr)!important;gap:12px;}
}
@media(max-width:400px){
  .fgrid,.fgrid-3{gap:9px;}
  .fbody{padding:11px 11px 13px;}
  .fbody h3{font-size:13.2px;}
  .fcat{font-size:9.5px;}
  .fprof{-webkit-line-clamp:2;}
  .price b{font-size:15px;}
  .price s{font-size:11.5px;}
  .fbuy .btn-sm{padding:8px 10px;font-size:11.5px;}
  .rank,.fbadge{font-size:9.5px;padding:4px 7px;top:8px;}
  .rank{left:8px;} .fbadge{right:8px;}
}

/* ============================================================
   40. VISUEL DU HÉROS
   Les photos du catalogue sont détourées sur fond blanc. Plutôt que
   de tenter de les fondre dans le fond crème, on les présente
   volontairement dans un cadre produit blanc arrondi.
   ============================================================ */
.hero-img{mix-blend-mode:normal;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-xl);padding:18px;width:min(330px,78%);
  box-shadow:0 2px 6px rgba(17,17,17,.05),0 34px 60px -30px rgba(17,17,17,.40);
  filter:none;}
@media(max-width:620px){.hero-img{width:min(250px,72%);padding:14px;border-radius:var(--r-l);}}

/* ============================================================
   41. PIED DE PAGE — fond brique foncé de la marque (#872720)
   remplace le quasi-noir neutre.
   ============================================================ */
footer.site{background:#872720;color:rgba(255,255,255,.80);}
footer.site .fgrid-top{border-bottom-color:rgba(255,255,255,.18);}
footer.site h3{color:#fff;}
footer.site ul a{color:rgba(255,255,255,.80);}
footer.site ul a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px;}
footer.site .fabout p{color:rgba(255,255,255,.82);}
footer.site .fabout p strong{color:#fff;}
.socials a{border-color:rgba(255,255,255,.30);color:rgba(255,255,255,.85);}
.socials a:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.10);}
.fwarn{border-color:rgba(255,255,255,.22);background:rgba(0,0,0,.20);color:rgba(255,255,255,.88);}
.fwarn svg{color:#fff;}
.fwarn strong{color:#fff;}
.fbottom{color:rgba(255,255,255,.70);border-top:1px solid rgba(255,255,255,.14);padding-top:22px;}
footer.site .fbottom a{color:rgba(255,255,255,.70);}
footer.site .fbottom a:hover{color:#fff;}
footer.site .todo{background:rgba(0,0,0,.28);color:#F6DAD6;border-color:rgba(255,255,255,.34);}

/* illustrations d'articles du blog */
.pmedia-img{display:block;padding:0;overflow:hidden;background:var(--sand);}
.pmedia-img img{width:100%;height:100%;object-fit:contain;padding:14px;mix-blend-mode:multiply;}

/* ============================================================
   42. PIED DE PAGE SUR FOND BLANC
   Remplace le fond brique : le pied de page passe en blanc,
   séparé du contenu par un filet, avec un texte sombre.
   ============================================================ */
footer.site{background:#fff;color:var(--ink-2);border-top:1px solid var(--line);}
footer.site .logo-img{filter:brightness(0);}      /* logo blanc -> noir sur fond clair */
footer.site .fgrid-top{border-bottom-color:var(--line);}
footer.site h3{color:var(--ink);}
footer.site ul a{color:var(--ink-2);}
footer.site ul a:hover{color:var(--red);text-decoration:underline;text-underline-offset:3px;}
footer.site .fabout p{color:var(--muted);}
footer.site .fabout p strong{color:var(--ink);}
.socials a{border-color:var(--line-2);color:var(--ink-2);background:none;}
.socials a:hover{border-color:var(--red);color:var(--red);background:none;}
.fwarn{border:1px solid var(--line-2);background:var(--sand);color:var(--ink-2);}
.fwarn svg{color:var(--red);}
.fwarn strong{color:var(--ink);}
.fbottom{color:var(--muted);border-top:1px solid var(--line);padding-top:22px;}
footer.site .fbottom a{color:var(--muted);}
footer.site .fbottom a:hover{color:var(--red);}
footer.site .todo{background:#FDF3F2;color:#872720;border:1px dashed #D9B3AE;}

/* ============================================================
   43. VISUEL DU HÉROS — produit détouré, sans cadre
   Les photos ont un fond blanc opaque : `mix-blend-mode:multiply`
   le fond dans le gris clair du héros, ce qui ne laisse voir que
   le produit. On retire donc le cadre blanc et les cercles
   décoratifs, qui transparaîtraient à travers le fond détouré.
   Pas de `drop-shadow` ici : l'alpha étant opaque, l'ombre
   dessinerait le rectangle de l'image.
   ============================================================ */
.hero .halo,.hero .halo-ring{display:none;}
.hero-media{min-height:0;}
.hero-img{
  background:none;border:0;border-radius:0;padding:0;box-shadow:none;filter:none;
  mix-blend-mode:multiply;
  width:min(540px,100%);height:auto;
}
@media(max-width:940px){.hero-img{width:min(460px,86%);}}
@media(max-width:620px){.hero-img{width:min(340px,88%);}}

/* ============================================================
   44. RANGÉES DÉFILABLES SUR MOBILE
   La barre de réassurance et les cartes de catégorie défilent
   horizontalement au doigt plutôt que de s'empiler. Les cartes
   font ~78 % de la largeur : la suivante dépasse, ce qui indique
   qu'il y a du contenu à faire défiler. Aucun JavaScript.
   ============================================================ */
@media(max-width:840px){

  /* ---- barre de réassurance ---- */
  .usp .wrap{
    display:flex;flex-wrap:nowrap;gap:0;overflow-x:auto;
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }
  .usp .wrap::-webkit-scrollbar{display:none;}
  .usp .wrap>.usp-item:nth-child(n){
    flex:0 0 auto;width:min(76%,290px);scroll-snap-align:start;
    border-right:1px solid var(--line);border-bottom:none;
    padding:18px 18px 18px 0;margin-right:18px;
  }
  .usp .wrap>.usp-item:nth-child(n):last-child{
    border-right:none;margin-right:0;
    padding-right:var(--gut);
  }

  /* ---- cartes de catégorie / de gamme ---- */
  .models,.models-3{
    display:flex;flex-wrap:nowrap;gap:12px;overflow-x:auto;
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    margin-inline:calc(var(--gut) * -1);
    padding-inline:var(--gut);padding-bottom:4px;
  }
  .models::-webkit-scrollbar,.models-3::-webkit-scrollbar{display:none;}
  .models>.mcard,.models-3>.mcard{
    flex:0 0 auto;width:min(78%,310px);scroll-snap-align:start;
  }
}

/* ============================================================
   45. VISUELS DÉTOURÉS (alpha réel)
   Les 285 photos ont désormais un fond réellement transparent
   (voir _data/cutout.js). `mix-blend-mode` n'a donc plus lieu
   d'être — il ne servait qu'à masquer le blanc opaque et
   assombrissait légèrement le produit. Une ombre portée devient
   possible : elle épouse la silhouette et non un rectangle.
   ============================================================ */
.fmedia-img img,.mcard-media-img img,.stage-img img,.thumb img,
.rcard-media img,.pmedia-img img,.hero-img{mix-blend-mode:normal;}

.hero-img{filter:drop-shadow(0 22px 26px rgba(17,17,17,.22));}
.stage-img img{filter:drop-shadow(0 16px 20px rgba(17,17,17,.16));}
.fmedia-img img{filter:drop-shadow(0 8px 10px rgba(17,17,17,.10));}
.mcard-media-img img{filter:drop-shadow(0 8px 12px rgba(17,17,17,.12));}

/* Les médias peuvent repasser sur du blanc : le produit est détouré. */
.fmedia-img,.mcard-media-img,.stage-img{background:var(--cream);}

/* ============================================================
   46. CARTE PRODUIT ÉPURÉE — nom et prix uniquement
   Les descriptions, familles aromatiques et notes ont été
   retirées de la grille : elles restent sur la fiche produit.
   ============================================================ */
.fbody{gap:10px;padding:15px 16px 17px;justify-content:space-between;}
.fbody h3{font-size:16.5px;line-height:1.3;}
.fbuy{padding-top:0;align-items:center;}
@media(max-width:840px){
  .fbody{padding:12px 13px 14px;gap:9px;}
  .fbody h3{font-size:14.5px;}
}

/* ============================================================
   47. TAILLE DU VISUEL DU HÉROS
   Les photos sont au format portrait (≈515×930). Les dimensionner
   par la largeur faisait exploser leur hauteur (540×975, soit plus
   haut que l'écran). On les contraint donc par la HAUTEUR, pour que
   le héros tienne dans la fenêtre quelle que soit sa taille.
   ============================================================ */
.hero-img{
  width:auto;height:auto;
  max-width:min(100%,340px);
  max-height:min(60vh,520px);
}
@media(max-width:940px){
  .hero-img{max-width:min(100%,300px);max-height:min(46vh,420px);}
}
@media(max-width:620px){
  .hero-img{max-width:min(82%,300px);max-height:min(50vh,390px);}
}

/* ============================================================
   48. VISUEL DES CARTES DE CATÉGORIE
   Depuis le détourage, les photos sont rognées au plus près du
   produit et remplissaient tout le cadre. On les recentre et on
   les réduit pour laisser respirer la carte.
   ============================================================ */
.mcard-media-img{
  display:flex;align-items:center;justify-content:center;padding:18px;
}
.mcard-media-img img{
  width:auto;height:auto;max-width:62%;max-height:72%;object-fit:contain;
}
@media(max-width:840px){
  .mcard-media-img{padding:14px;}
  .mcard-media-img img{max-width:58%;max-height:70%;}
}

/* ============================================================
   49. CORRECTIF — hauteur des cadres de carte catégorie
   `max-height` en pourcentage ne se résout pas contre une boîte
   dimensionnée par `aspect-ratio` (hauteur indéfinie) : il était
   ignoré et chaque photo étirait sa carte, d'où des cartes de
   hauteurs différentes. On fixe donc une hauteur explicite.
   ============================================================ */
.mcard-media-img{aspect-ratio:auto;height:250px;overflow:hidden;}
.mcard-media-img img{max-width:66%;max-height:78%;}
@media(max-width:1060px){.mcard-media-img{height:225px;}}
@media(max-width:840px){
  .mcard-media-img{height:200px;}
  .mcard-media-img img{max-width:62%;max-height:76%;}
}

/* ============================================================
   50. FICHE PRODUIT — bloc d'achat remonté sous le nom
   Prix, quantité et boutons viennent désormais juste après le
   titre ; notes, variantes et description suivent.
   ============================================================ */
.pdp-price{margin-top:16px;margin-bottom:4px;}
.pdp-info h1{margin-bottom:6px;}
.pdp-rate{margin-top:20px;margin-bottom:0;padding-top:18px;border-top:1px solid var(--line);}
.pdp-info .optgroup{margin-top:20px;}
.pdp-short{margin-top:18px;margin-bottom:0;}

/* ============================================================
   51. PORTAIL D'ÂGE — mémorisé d'une page à l'autre
   Le script inline de head-common pose data-age="ok" lorsque la
   majorité a déjà été confirmée (30 jours). La case à cocher reste
   le mécanisme de repli si JavaScript est indisponible.
   ============================================================ */
html[data-age="ok"] .gate{display:none;}

/* ============================================================
   52. VISUEL DU HÉROS — agrandi sans dépasser la première page
   La colonne de texte mesure ~493 px de haut : tant que l'image
   reste sous cette valeur, l'agrandir n'allonge pas le héros du
   tout. On vise donc cette hauteur plutôt qu'une largeur.
   ============================================================ */
.hero-img{
  max-width:min(100%,380px);
  max-height:min(66vh,560px);
}
@media(max-width:940px){
  .hero-img{max-width:min(100%,340px);max-height:min(52vh,460px);}
}
@media(max-width:620px){
  .hero-img{max-width:min(86%,320px);max-height:min(54vh,420px);}
}

/* ============================================================
   53. HÉROS SUR ÉCRAN PEU HAUT (type 1366×768)
   Là, ce n'est pas l'image qui dépasse mais la colonne de texte
   (~492 px) : même réduite, l'image ne changeait rien. On resserre
   donc le rembourrage et la titraille quand la fenêtre est basse.
   ============================================================ */
@media(min-width:941px) and (max-height:820px){
  .hero .wrap{padding-block:34px;}
  .hero h1{font-size:clamp(28px,3.2vw,40px);margin:12px 0;}
  .hero-sub{font-size:15.5px;margin-bottom:18px;}
  .hero-cta{margin-bottom:18px;}
  /* on remplit la place libérée : hauteur dispo = fenêtre - bandeau/en-tête - rembourrage */
  .hero-img{max-height:min(calc(100vh - 200px),560px);max-width:min(100%,380px);}
}

/* ============================================================
   54. BANDEAU DÉFILANT (ruban)
   Deux groupes identiques se suivent dans la piste ; l'animation
   translate de -50 % à 0, soit exactement la largeur d'un groupe.
   Au terme du cycle, le second groupe occupe la place du premier :
   la boucle est invisible. Défilement de la GAUCHE vers la DROITE.
   Pure CSS, aucun script.
   ============================================================ */
.announce{overflow:hidden;}
.announce-track{
  display:flex;width:max-content;
  animation:af-ruban 30s linear infinite;
  will-change:transform;
}
@keyframes af-ruban{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
.announce-group{
  display:flex;align-items:center;gap:26px;
  padding-block:9px;padding-right:26px;
  flex:0 0 auto;white-space:nowrap;
}
/* lecture confortable : on fige au survol */
.announce:hover .announce-track,
.announce:focus-within .announce-track{animation-play-state:paused;}
/* mouvement réduit : bandeau fixe, contenu toujours lisible */
@media(prefers-reduced-motion:reduce){
  .announce-track{transform:translateX(0);}
}

/* ============================================================
   56. MENTION LÉGALE SOUS LE CHAPÔ DU HÉROS
   ============================================================ */
.hero-note{
  font-size:13px;color:var(--muted);margin:-14px 0 22px;
  padding-left:13px;border-left:2px solid var(--red);line-height:1.5;
}
@media(min-width:941px) and (max-height:820px){
  .hero-note{font-size:12.5px;margin:-12px 0 16px;}
}

/* ============================================================
   57. HÉROS SUR ÉCRAN TRÈS BAS (720p, 768p)
   Le chapô institutionnel est plus long : la colonne de texte est
   passée de 367 à 442 px, ce qui faisait déborder le héros sous la
   ligne de flottaison. On resserre davantage à partir de 700 px
   de hauteur utile.
   ============================================================ */
@media(min-width:941px) and (max-height:700px){
  .hero .wrap{padding-block:22px;}
  .hero h1{font-size:clamp(25px,2.6vw,33px);margin:9px 0;}
  .hero-sub{font-size:14.5px;margin-bottom:14px;}
  .hero-note{font-size:12px;margin:-9px 0 13px;}
  .hero-cta{margin-bottom:14px;}
  .hero-cta .btn{padding:12px 20px;font-size:13.5px;}
  .hero-proof{font-size:12.5px;}
  .hero-img{max-height:min(calc(100vh - 170px),430px);}
}

/* ============================================================
   58. HÉROS — TITRE PLEINE LARGEUR
   Le H1 était enfermé dans la colonne de gauche (~590 px) et se
   cassait en trois lignes. Il occupe désormais toute la largeur,
   au-dessus des deux colonnes : il peut être bien plus gros tout
   en tenant sur moins de lignes.
   ============================================================ */
.hero .wrap{display:block;}
.hero-head{margin-bottom:30px;}
.hero h1{
  font-size:clamp(33px,5.6vw,72px);
  letter-spacing:-.032em;line-height:1.05;
  margin:14px 0 0;max-width:none;
}
.hero-body{
  display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;
}
.hero-body>*{min-width:0;}
.hero-sub{max-width:58ch;}

@media(max-width:940px){
  .hero-head{margin-bottom:20px;}
  .hero-body{grid-template-columns:1fr;gap:24px;}
}
/* écrans peu hauts : le titre reste grand mais tient dans la page */
@media(min-width:941px) and (max-height:820px){
  .hero h1{font-size:clamp(30px,4.8vw,56px);margin:12px 0 0;}
  .hero-head{margin-bottom:22px;}
}
@media(min-width:941px) and (max-height:700px){
  .hero h1{font-size:clamp(27px,4vw,46px);margin:10px 0 0;}
  .hero-head{margin-bottom:16px;}
}

/* ============================================================
   59. HÉROS PLEINE LARGEUR — ÉQUILIBRAGE VERTICAL
   Titre et visuel ne se partagent plus la même bande : leurs
   hauteurs s'additionnent. On plafonne le corps du titre à 2 lignes
   et on dimensionne l'image sur la place qui reste réellement.
   ============================================================ */
.hero .wrap{padding-block:44px;}
.hero h1{font-size:clamp(33px,5vw,64px);}
.hero-head{margin-bottom:26px;}
.hero-img{max-height:min(calc(100vh - 340px),480px);}

@media(min-width:941px) and (max-height:820px){
  .hero .wrap{padding-block:30px;}
  .hero h1{font-size:clamp(30px,4.4vw,50px);}
  .hero-head{margin-bottom:18px;}
  .hero-img{max-height:min(calc(100vh - 300px),400px);}
}
@media(min-width:941px) and (max-height:700px){
  .hero .wrap{padding-block:20px;}
  .hero h1{font-size:clamp(27px,3.7vw,42px);}
  .hero-head{margin-bottom:14px;}
  .hero-img{max-height:min(calc(100vh - 288px),330px);}
}

/* ============================================================
   60. H1 SUR TROIS LIGNES
   Le titre est plus long (verbe d'achat + France) et doit tenir sur
   trois lignes : on relève la taille pour provoquer la coupure, et
   on reprend la hauteur nécessaire sur le visuel.
   ============================================================ */
.hero h1{font-size:clamp(31px,5.3vw,68px);text-wrap:pretty;}
.hero-img{max-height:min(calc(100vh - 430px),400px);}
@media(min-width:941px) and (max-height:820px){
  .hero h1{font-size:clamp(29px,4.1vw,46px);}
  .hero-img{max-height:min(calc(100vh - 370px),330px);}
}
@media(min-width:941px) and (max-height:700px){
  .hero h1{font-size:clamp(26px,3.4vw,38px);}
  .hero-img{max-height:min(calc(100vh - 330px),280px);}
}

/* ============================================================
   61. TITRE SUR 3 LIGNES + VISUEL À SA TAILLE PRÉCÉDENTE
   Les paliers « écran bas » rabaissaient trop le titre : il
   retombait à 2 lignes. On relève leurs valeurs pour obtenir
   3 lignes partout, et on restaure les plafonds d'image
   d'avant le passage au titre pleine largeur.
   ============================================================ */
.hero h1{font-size:clamp(31px,5.3vw,68px);}
.hero-img{max-height:min(calc(100vh - 340px),480px);}
@media(min-width:941px) and (max-height:820px){
  .hero h1{font-size:clamp(29px,4.4vw,62px);}
  .hero-img{max-height:min(calc(100vh - 300px),400px);}
}
@media(min-width:941px) and (max-height:700px){
  .hero h1{font-size:clamp(26px,4vw,54px);}
  .hero-img{max-height:min(calc(100vh - 288px),330px);}
}

/* ============================================================
   62. HÉROS SOMBRE — VISUEL GRAND FORMAT
   Fond sombre dégradé (CSS, aucune image de fond), produit détouré
   en grand qui déborde volontairement du cadre : la section est en
   overflow:hidden, le visuel est donc rogné haut et bas, ce qui lui
   donne de l'ampleur sans allonger la page.
   ============================================================ */
.hero-dark{
  background:
    radial-gradient(118% 96% at 76% 46%, #6E211B 0%, #38120F 46%, #170A09 100%),
    #170A09;
  color:#fff;border-bottom:none;overflow:hidden;
}
.hero-dark .wrap{
  display:grid;grid-template-columns:1.04fr .96fr;gap:40px;
  align-items:center;padding-block:56px;
}
.hero-dark .wrap>*{min-width:0;}

.hero-badge{
  display:inline-block;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.26);color:#fff;
  font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:7px 15px;border-radius:var(--pill);margin-bottom:20px;
}
.hero-dark h1{
  color:#fff;font-size:clamp(29px,3.8vw,49px);line-height:1.1;
  letter-spacing:-.028em;margin:0 0 20px;max-width:20ch;
}
.hero-dark h1 em{font-style:normal;font-weight:800;color:#E8564B;}
.hero-dark .hero-sub{
  color:rgba(255,255,255,.80);font-size:15.8px;line-height:1.68;
  max-width:62ch;margin-bottom:26px;
}
.hero-dark .hero-sub strong{color:#fff;font-weight:700;}
.hero-dark .hero-cta{margin-bottom:0;}
.hero-dark .btn-red{background:#B3372D;border-color:#B3372D;}
.hero-dark .btn-red:hover{background:#9C2E26;border-color:#9C2E26;transform:translateY(-1px);}
.hero-dark .hero-proof{margin-top:24px;color:rgba(255,255,255,.62);}
.hero-dark .hero-proof b{color:#fff;}
.hero-dark .sep-v{background:rgba(255,255,255,.26);}

/* visuel : grand, débordant, avec halo chaud derrière */
.hero-dark .hero-media{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;}
.hero-glow{
  position:absolute;width:112%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(232,86,75,.38),rgba(232,86,75,0) 62%);
  pointer-events:none;
}
.hero-dark .hero-img{
  position:relative;z-index:1;
  width:auto;max-width:none;
  height:min(76vh,640px);max-height:none;
  margin-block:-34px;
  filter:drop-shadow(0 28px 48px rgba(0,0,0,.62));
  mix-blend-mode:normal;background:none;border:0;padding:0;border-radius:0;
}

@media(max-width:940px){
  .hero-dark .wrap{grid-template-columns:1fr;gap:26px;padding-block:38px;}
  .hero-dark h1{max-width:none;}
  .hero-dark .hero-media{order:-1;}
  .hero-dark .hero-img{height:min(46vh,380px);margin-block:-10px;}
}
@media(max-width:620px){
  .hero-dark .hero-img{height:min(40vh,300px);}
  .hero-badge{font-size:10.5px;padding:6px 12px;margin-bottom:16px;}
}

/* ============================================================
   63. HÉROS SUR FOND BLANC + COLONNE DE TEXTE ÉLARGIE
   Le fond rouge sombre est remplacé par du blanc ; la colonne de
   texte gagne ~2 cm pour que le paragraphe respire.
   ============================================================ */
.hero-dark{
  background:#fff;color:var(--ink);
  border-bottom:1px solid var(--line);
}
.hero-dark .wrap{grid-template-columns:1.18fr .82fr;}
.hero-badge{
  background:var(--sand);border:1px solid var(--line-2);color:var(--ink-2);
}
.hero-dark h1{color:var(--ink);max-width:22ch;}
.hero-dark h1 em{color:var(--red);}
.hero-dark .hero-sub{color:var(--ink-2);max-width:74ch;}
.hero-dark .hero-sub strong{color:var(--ink);}
.hero-dark .hero-proof{color:var(--muted);}
.hero-dark .hero-proof b{color:var(--ink);}
.hero-dark .sep-v{background:var(--line-2);}
.hero-dark .btn-red{background:var(--red);border-color:var(--red);}
.hero-dark .btn-red:hover{background:var(--red-dk);border-color:var(--red-dk);}
/* halo très discret sur fond clair */
.hero-glow{background:radial-gradient(circle,rgba(156,46,38,.10),rgba(156,46,38,0) 64%);}
.hero-dark .hero-img{filter:drop-shadow(0 26px 40px rgba(17,17,17,.24));}
@media(max-width:940px){.hero-dark .wrap{grid-template-columns:1fr;}}

/* ============================================================
   64. TITRES DE PAGE SUR UNE LIGNE + CONTENU CENTRÉ
   Les H1 de catégorie étaient bridés à 20ch et se cassaient en
   plusieurs lignes. On libère la largeur et on ajuste la taille
   pour qu'ils tiennent sur une ligne au format bureau.
   Le pied de page conserve son alignement à gauche.
   ============================================================ */
.pagehead h1{max-width:none;font-size:clamp(25px,3.3vw,43px);text-wrap:nowrap;}
@media(max-width:1100px){.pagehead h1{text-wrap:balance;font-size:clamp(24px,3.4vw,34px);}}

/* intitulé de la boutique (le vrai H1 est en bas de page, cf. brief SEO) */
.shop-h{font-size:clamp(25px,3.3vw,43px);font-weight:800;letter-spacing:-.025em;
  line-height:1.14;margin:14px 0 0;color:var(--ink);}

/* ---- centrage général (hors pied de page) ---- */
.pagehead .wrap{text-align:center;}
.pagehead .eyebrow,.pagehead .pagehead-meta{justify-content:center;}
.pagehead .lead{margin-inline:auto;}

.sec-head{flex-direction:column;align-items:center;text-align:center;}
.sec-head-txt{margin-inline:auto;}
.sec-head .eyebrow{justify-content:center;}
.sec-head h2{max-width:26ch;margin-inline:auto;}
.sec-head .lead{margin-inline:auto;}

.band{text-align:center;justify-items:center;}
.band p{margin-inline:auto;}

/* Bloc SEO : colonne centrée, titres centrés. Les paragraphes longs
   restent alignés à gauche — du texte justifié au centre sur 80
   caractères devient pénible à lire. */
.seotext .wrap{max-width:900px;}
.seotext h2,.seotext h3{text-align:center;}
.seotext p{margin-inline:auto;}

/* le héros et le pied de page gardent leur alignement d'origine */
.hero-dark .wrap,footer.site .wrap{text-align:left;}
.hero-dark .eyebrow{justify-content:flex-start;}


/* ============================================================
   65. CENTRAGE RESTREINT
   Seul l'en-tête de page (le grand titre) reste centré. Les
   intitulés de section, la bande d'appel et les blocs de texte
   reviennent à un alignement à gauche : plus lisible, et le centrage
   systématique effaçait la hiérarchie entre les niveaux de titre.
   ============================================================ */
.sec-head{flex-direction:row;align-items:flex-end;text-align:left;justify-content:space-between;}
.sec-head-txt{margin-inline:0;}
.sec-head .eyebrow{justify-content:flex-start;}
.sec-head h2{max-width:22ch;margin-inline:0;}
.sec-head .lead{margin-inline:0;}
.band{text-align:left;justify-items:stretch;}
.band p{margin-inline:0;}
.seotext h2,.seotext h3{text-align:left;}
.seotext p{margin-inline:0;}
.seotext .wrap{max-width:var(--max);}
@media(max-width:760px){.sec-head{flex-direction:column;align-items:flex-start;}}

/* ---- FAQ de section ---- */
.faq-sec{max-width:880px;}
.faq-sec .faq{margin-top:4px;}

/* ============================================================
   66. BLOCS RÉDACTIONNELS CENTRÉS
   Le centrage s'applique aux zones de texte long — bloc SEO de bas
   de page, intro de catégorie, section FAQ — et à leurs titres.
   Les intitulés de section courants (au-dessus des grilles) gardent
   leur alignement à gauche.
   ============================================================ */
.seotext .wrap{max-width:900px;text-align:center;}
.seotext h2,.seotext h3{text-align:center;}
.seotext p{margin-inline:auto;text-align:center;max-width:78ch;}
.seotext ul,.seotext ol{display:inline-block;text-align:left;}

/* intro de page catégorie */
/* Ce centrage vise l intro des pages categorie. Les rayons de
   l accueil alternent fond blanc et fond creme : sans cette
   exception, un rayon sur deux se retrouvait centre au lieu d etre
   justifie. */
.sec-cream > .wrap > .prose:not(.rayon-prose){text-align:center;}
.sec-cream > .wrap > .prose:not(.rayon-prose) h2,
.sec-cream > .wrap > .prose:not(.rayon-prose) p{text-align:center;margin-inline:auto;}

/* section FAQ : bloc et titres centrés */
.wrap:has(.faq-sec) .sec-head{flex-direction:column;align-items:center;text-align:center;}
.wrap:has(.faq-sec) .sec-head .eyebrow{justify-content:center;}
.wrap:has(.faq-sec) .sec-head h2{margin-inline:auto;max-width:34ch;}
.faq-sec{margin-inline:auto;}
/* L'intérieur des accordéons reste aligné à gauche : le marqueur +/−
   est à droite, et une réponse de plusieurs lignes centrée se lit mal. */
.faq-sec details.q summary,.faq-sec details.q .a{text-align:left;}

/* ============================================================
   67. HÉROS MOBILE — TEXTE AVANT LA PHOTO
   Le visuel était remonté au-dessus du texte (order:-1) : sur
   mobile, le titre, le chapô et le bouton passent désormais en
   premier, la photo vient ensuite.
   ============================================================ */
@media(max-width:940px){
  .hero-dark .hero-media{order:0;}
  .hero-dark .hero-txt{order:-1;}
  .hero-dark .hero-img{margin-block:0;}
}

/* ============================================================
   68. TITRE DU HÉROS EN UNE SEULE COULEUR
   La seconde partie du H1 passe du rouge au ton sombre du texte.
   ============================================================ */
.hero-dark h1 em{color:var(--ink);}

/* ============================================================
   69. TEXTE JUSTIFIÉ, INTERLIGNE 1,5
   S'applique aux paragraphes de contenu. La césure automatique est
   activée (le document est en lang="fr") : sans elle, la
   justification creuse de larges blancs entre les mots, les termes
   français étant longs.
   ============================================================ */
.seotext p,
.prose p,
.prose li,
.faq .a p,
.pdp-short,
.hero-sub,
.lead,
.rcard blockquote,
.article p{
  text-align:justify;
  text-justify:inter-word;
  line-height:1.5;
  hyphens:auto;
  -webkit-hyphens:auto;
}
/* Les listes à puces et les libellés courts restent au fer à gauche :
   justifier une ligne unique produit des espacements aberrants. */
.checklist li,.specs li,.pagehead-meta,.hero-proof,.fbody .fprof,
.usp-item span,.tcard p,.rcard footer,.pbar,.fbottom{
  text-align:left;hyphens:manual;
}

/* ============================================================
   70. TIROIR PANIER (ouverture par la droite)
   ============================================================ */
.tiroir-fond{position:fixed;inset:0;z-index:150;background:rgba(17,17,17,.45);
  opacity:0;pointer-events:none;transition:opacity .25s;}
.tiroir{position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);z-index:151;
  background:#fff;border-left:1px solid var(--line);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);
  box-shadow:-18px 0 44px -24px rgba(17,17,17,.4);}
html[data-panier="ouvert"] .tiroir{transform:translateX(0);}
html[data-panier="ouvert"] .tiroir-fond{opacity:1;pointer-events:auto;}
html[data-panier="ouvert"]{overflow:hidden;}

.tiroir-tete{display:flex;align-items:center;justify-content:space-between;
  padding:20px 22px;border-bottom:1px solid var(--line);flex:none;}
.tiroir-tete h2{font-size:18px;}
.tiroir-x{width:38px;height:38px;border:none;background:none;cursor:pointer;
  border-radius:var(--pill);display:flex;align-items:center;justify-content:center;color:var(--ink);}
.tiroir-x:hover{background:var(--sand);}
.tiroir-x svg{width:20px;height:20px;}
.tiroir-corps{flex:1;overflow-y:auto;padding:18px 22px;}
.tiroir-pied{flex:none;padding:18px 22px;border-top:1px solid var(--line);background:var(--cream);}
.tiroir .cart-list{border:none;}
.tiroir .cart-row{padding:14px 0;grid-template-columns:64px 1fr auto;}
.tiroir .cart-thumb{height:64px;}
.cart-vide{color:var(--muted);font-size:14.5px;text-align:center;padding:30px 0;}
.cart-alert{background:var(--gold-bg);border:1px solid var(--gold-lt);border-radius:var(--r-s);
  padding:10px 12px;font-size:12.8px;color:#7A3A33;margin:10px 0;text-align:left;}
.qty-sm button{width:30px;height:30px;font-size:15px;}
.qty-sm input{width:32px;height:30px;font-size:13px;}
.cart-count[hidden]{display:none;}
@media(prefers-reduced-motion:reduce){.tiroir{transition:none;}.tiroir-fond{transition:none;}}

/* ============================================================
   71. PASTILLE « VENTE RÉSERVÉE AUX MAJEURS » PLUS DISCRÈTE
   Mention légale : elle doit rester lisible, sans concurrencer le
   titre. Taille et interlettrage réduits, nettement plus sur mobile
   où elle occupait presque toute la largeur.
   ============================================================ */
.hero-badge{
  font-size:10px;letter-spacing:.09em;padding:5px 11px;margin-bottom:16px;
}
@media(max-width:620px){
  .hero-badge{font-size:8.8px;letter-spacing:.06em;padding:4px 9px;margin-bottom:12px;}
}
@media(max-width:400px){
  .hero-badge{font-size:8.2px;padding:4px 8px;}
}

/* ============================================================
   72. CONFORMITÉ — RANGÉES HORIZONTALES
   Remplace la grille de cartes sombres. Chaque ligne oppose la
   référence légale (à gauche) à ce qu'elle implique (à droite) :
   pour du contenu réglementaire, le texte de loi fait un meilleur
   point d'ancrage qu'une icône.
   ============================================================ */
.conform{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);}
.conform-row{
  display:grid;grid-template-columns:260px 1fr;gap:34px;align-items:start;
  padding:26px 0;border-bottom:1px solid var(--line);
}
.conform-row>*{min-width:0;}
.conform-ref{display:flex;align-items:baseline;gap:14px;}
.conform-num{
  font-family:'Fraunces','Georgia',serif;font-size:26px;font-weight:700;
  color:var(--line-2);line-height:1;flex:none;
}
.conform-law{
  display:flex;flex-direction:column;gap:3px;
  font-size:14.5px;font-weight:700;color:var(--red);letter-spacing:-.01em;
}
.conform-law small{font-size:11.5px;font-weight:500;color:var(--muted);letter-spacing:0;}
.conform-txt h3{font-size:18px;margin-bottom:7px;}
.conform-txt p{font-size:15px;color:var(--ink-2);line-height:1.6;max-width:72ch;
  text-align:justify;hyphens:auto;}
.conform-txt a{color:var(--red);text-decoration:underline;text-underline-offset:3px;}

@media(max-width:820px){
  .conform-row{grid-template-columns:1fr;gap:10px;padding:20px 0;}
  .conform-num{font-size:21px;}
  .conform-txt p{font-size:14.5px;}
}

/* ============================================================
   73. FAQ ALIGNÉE À GAUCHE PARTOUT
   Le bloc FAQ de l'accueil est resté au fer à gauche alors que
   celui des autres gabarits avait été centré : les deux ne se
   ressemblaient plus. On revient à l'alignement de l'accueil.
   ============================================================ */
.wrap:has(.faq-sec) .sec-head{flex-direction:row;align-items:flex-end;text-align:left;
  justify-content:space-between;}
.wrap:has(.faq-sec) .sec-head .eyebrow{justify-content:flex-start;}
.wrap:has(.faq-sec) .sec-head h2{margin-inline:0;max-width:22ch;}
.faq-sec{margin-inline:0;}
@media(max-width:760px){
  .wrap:has(.faq-sec) .sec-head{flex-direction:column;align-items:flex-start;}
}

/* ============================================================
   74. RANGÉE « MIEUX NOTÉS » — DÉFILEMENT MOBILE
   Une carte occupe 88 % de la largeur : elle s'affiche en entier et
   la suivante dépasse juste assez pour signaler qu'on peut faire
   défiler. L'accroche (scroll-snap) cale chaque carte au doigt.
   ============================================================ */
@media(max-width:940px){
  .rev-grid{
    display:flex;flex-wrap:nowrap;gap:12px;overflow-x:auto;
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    margin-inline:calc(var(--gut) * -1);
    padding-inline:var(--gut);padding-bottom:4px;
  }
  .rev-grid::-webkit-scrollbar{display:none;}
  .rev-grid>.rcard{
    flex:0 0 88%;max-width:420px;scroll-snap-align:center;
  }
  /* la fiche garde sa mise en page image + texte */
  .rcard-prod{grid-template-columns:78px 1fr;}
}
@media(max-width:420px){
  .rev-grid>.rcard{flex:0 0 90%;}
  .rcard-prod{grid-template-columns:64px 1fr;gap:12px;}
}

/* ============================================================
   75. H1 EN CAPITALES
   Transformation par CSS plutôt que dans le balisage : le texte
   source reste en casse normale (lisible par les moteurs, les
   lecteurs d'écran l'épellent correctement, et il reste éditable).
   Les capitales demandent un interlettrage moins serré que les bas
   de casse, d'où l'ajustement du letter-spacing.
   ============================================================ */
h1{
  text-transform:uppercase;
  letter-spacing:-.005em;
  word-spacing:.02em;
}
/* en capitales, le texte occupe ~12 % de largeur en plus :
   on resserre légèrement les tailles pour préserver les retours */
.hero-dark h1{font-size:clamp(26px,3.4vw,44px);letter-spacing:0;max-width:26ch;}
.pagehead h1{font-size:clamp(22px,2.9vw,38px);letter-spacing:0;}
.pdp-info h1{font-size:clamp(23px,3vw,33px);letter-spacing:0;}
.err .code{text-transform:none;}
@media(max-width:620px){
  .hero-dark h1{font-size:clamp(22px,6vw,30px);}
  .pagehead h1{font-size:clamp(20px,5.4vw,27px);}
}

/* ============================================================
   76. RESSERRER L'ESPACE ENTRE LE TITRE ET LES PRODUITS
   L'en-tête de page et la première section additionnaient leurs
   rembourrages verticaux, ce qui creusait un vide entre le H1 et la
   grille. On réduit les deux et on supprime le doublon d'intertitre.
   ============================================================ */
.pagehead .wrap{padding-block:30px 24px;}
.pagehead + .sec,
.pagehead + section > .wrap > .layout-cat,
.pagehead + div.wrap{padding-top:26px;}
.pagehead + .sec{padding-top:26px;}
.pagehead + div.wrap .pdp{padding-top:22px;}
@media(max-width:760px){
  .pagehead .wrap{padding-block:22px 18px;}
  .pagehead + .sec,.pagehead + div.wrap{padding-top:18px;}
}

/* 77. TITRE DE FICHE PRODUIT : REMPLIR LA LIGNE AVANT DE PASSER À LA SUIVANTE
   text-wrap:balance égalise la longueur des lignes, ce qui fait retomber
   « Grape Mint » à la ligne alors qu'il restait de la place. Sur la fiche
   produit on veut le comportement normal : la ligne est remplie jusqu'au
   bord, la coupure se fait entre deux mots, jamais à l'intérieur d'un mot. */
.pdp-info h1{text-wrap:wrap;overflow-wrap:normal;word-break:normal;hyphens:none;}

/* 78. TITRE DE PAGE CATÉGORIE : CENTRÉ, JAMAIS JUSTIFIÉ, LIBRE DE PASSER
   À LA LIGNE
   text-wrap:nowrap tenait le titre sur une seule ligne et poussait les
   intitulés longs jusqu'à déborder. On rend la coupure possible : la
   ligne se remplit jusqu'au bord, ce qui dépasse continue en dessous,
   et la coupure se fait entre deux mots, jamais à l'intérieur d'un mot.
   text-align-last neutralise tout héritage de text-align:justify, qui
   mettrait la dernière ligne au fer à gauche. */
.pagehead .wrap{text-align:center;}
.pagehead h1,
.pagehead .shop-h{
  text-align:center;
  text-align-last:center;
  text-wrap:pretty;
  white-space:normal;
  max-width:none;
  margin-inline:auto;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}

/* 79. TITRES LONGS : DEUX LIGNES PLUTÔT QUE TROIS LIGNES SERRÉES
   Le H1 de la boutique fait 91 caractères. Dans le conteneur de texte,
   large de 900 px, il retombait sur trois lignes tassées. Deux leviers
   le ramènent à deux lignes : le titre reprend toute la largeur utile
   de la page au lieu de celle de la colonne de texte (marge négative
   calculée, donc toujours centré), et sa taille est plafonnée. */
.seotext h1{
  width:min(1160px, calc(100vw - 40px));
  max-width:none;
  margin:0 0 22px calc((100% - min(1160px, calc(100vw - 40px))) / 2);
  font-size:clamp(23px,2.4vw,32px);
  line-height:1.22;
  text-wrap:balance;
  text-align:center;
  text-align-last:center;
}
.pagehead h1,.pagehead .shop-h{line-height:1.2;}
@media(max-width:760px){
  .seotext h1{font-size:clamp(20px,5.2vw,25px);line-height:1.26;}
  .pagehead h1,.pagehead .shop-h{line-height:1.22;}
}

/* 80. ACCROCHE DE SECTION
   Le paragraphe commercial de chaque page de section, posé sous la
   grille de produits et avant les blocs de contenu. Il est justifié et
   aligné sur la largeur du contenu de la page, comme les autres textes
   longs du site, et non centré : au-delà de trois lignes, un texte
   centré devient pénible à lire. text-align-last remet la dernière
   ligne au fer à gauche, sinon la justification l'étire.
   Pas de césure : la coupure se fait entre deux mots. */
.pitch{background:#fff;border-top:1px solid var(--line);}
.pitch .wrap{padding-block:28px 32px;}
.pitch p{
  max-width:none;
  margin-inline:0;
  text-align:justify;
  text-align-last:left;
  hyphens:none;
  overflow-wrap:normal;
  word-break:normal;
  font-size:15.5px;
  line-height:1.78;
  color:var(--ink-2);
}
.pitch strong{color:var(--ink);font-weight:700;}
.pitch a{color:var(--red);text-decoration:underline;text-underline-offset:3px;}
@media(max-width:760px){
  .pitch .wrap{padding-block:20px 24px;}
  /* En colonne étroite la justification creuse des rivières blanches :
     on repasse au fer à gauche. */
  .pitch p{font-size:14.5px;line-height:1.72;text-align:left;}
}

/* 81. BLOC DE CONCLUSION COMMERCIAL DES PAGES DE GUIDE
   Les guides et les pages d'aide restent informatifs : c'est ce qui
   leur permet de capter des recherches qu'aucune fiche produit
   n'atteint. Ils se terminent en revanche par une proposition d'achat,
   visuellement détachée du corps du texte pour qu'on la distingue du
   contenu éditorial. */
.cta-buy{background:var(--cream);border-top:1px solid var(--line);}
.cta-buy .wrap{padding-block:34px 38px;}
.cta-buy h2{font-size:23px;margin-bottom:14px;}
.cta-buy p{
  max-width:92ch;
  font-size:15.5px;
  line-height:1.78;
  color:var(--ink-2);
  text-align:justify;
  text-align-last:left;
  hyphens:none;
  margin-bottom:12px;
}
.cta-buy strong{color:var(--ink);font-weight:700;}
.cta-buy a{color:var(--red);text-decoration:underline;text-underline-offset:3px;}
@media(max-width:760px){
  .cta-buy .wrap{padding-block:26px 28px;}
  .cta-buy h2{font-size:20px;}
  .cta-buy p{font-size:14.5px;text-align:left;}
}

/* 82. CHOIX DE LIVRAISON ET RÉFÉRENCE DE COMMANDE
   Le mode de livraison se choisit avant tout le reste : il est rendu
   en tête du panier, du tiroir et du formulaire de commande, et le
   total se recalcule au changement. La référence émise à la
   validation doit se lire sans ambiguïté et se copier d'un clic. */
.livchoix{margin:14px 0 4px;}
.livchoix-t{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:9px;}
.livchoix .radio-card{margin-bottom:8px;}
.radio-card-sm{padding:10px 12px;gap:10px;}
.radio-card-sm b{font-size:13.5px;}
.radio-card-sm span span{font-size:12.5px;}
.livchoix .rc-price{margin-left:auto;font-weight:800;font-size:14px;white-space:nowrap;align-self:center;}
.livchoix .rc-price .free{color:var(--ok);}
.livchoix-sm .radio-card{padding:8px 10px;}
.livchoix-sm .livchoix-t{font-size:11px;}
.livchoix-note{font-size:12.5px;color:var(--muted);margin-top:4px;}

/* la commande validée : référence lisible, copiable, et rappel du total */
.confirm{border:1.5px solid var(--line-2);border-radius:var(--r);padding:26px 24px;background:var(--cream);}
.confirm-eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ok);}
.confirm h2{font-size:22px;margin:8px 0 16px;}
.refbox{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:12px;}
.refbox code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:clamp(18px,3.4vw,25px);font-weight:700;letter-spacing:.08em;
  background:#fff;border:1.5px dashed var(--line-2);border-radius:var(--r-sm);
  padding:11px 16px;user-select:all;color:var(--ink);
}
.confirm-note{font-size:13px;color:var(--ink-2);margin-bottom:14px;}
@media(max-width:760px){
  .refbox{gap:9px;}
  .refbox code{width:100%;text-align:center;}
  .refbox .btn{width:100%;}
}

/* 83. TIROIR PANIER SUR MOBILE : LES ARTICLES D'ABORD
   Le pied du tiroir (barre de port offert, totaux, boutons) occupait
   490 px sur un écran de 844 px : on ajoutait un produit et on ne le
   voyait pas. Le corps reprend la priorité, le pied est borné, et les
   deux défilent séparément.
   min-height:0 est indispensable : sans lui, un enfant en flex refuse
   de descendre sous la hauteur de son contenu et ne défile jamais. */
.tiroir-corps{min-height:0;overscroll-behavior:contain;}
.tiroir-pied{max-height:56vh;overflow-y:auto;overscroll-behavior:contain;}

/* La barre de progression se resserre dans le tiroir. */
.tiroir .shipbar{padding:9px 11px;font-size:12.5px;margin-bottom:10px;}
.tiroir .shipbar .track{height:5px;margin-top:7px;}
.tiroir .sumline{padding:7px 0;font-size:13.5px;}
.tiroir .sumline.total{padding-top:12px;margin-top:6px;font-size:17px;}

/* Un intitulé de produit sur trois lignes chassait l'article suivant
   hors du tiroir : deux lignes suffisent à le reconnaître. */
.tiroir .cart-name a{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;line-height:1.3;
}

@media(max-width:620px){
  /* Le tiroir prend toute la largeur : une colonne de 31 px de page
     visible derrière ne sert à rien et vole de la place au contenu. */
  .tiroir{width:100vw;}
  .tiroir-corps{padding:14px 16px;}
  .tiroir-pied{padding:14px 16px;max-height:48vh;}
  .tiroir .cart-row{grid-template-columns:56px 1fr auto;gap:12px;padding:11px 0;}
  .tiroir .cart-thumb{height:56px;}
  .tiroir .cart-row .cart-line-end{grid-column:auto;text-align:right;}
  .tiroir .cart-line-end b{font-size:14.5px;}
  .tiroir .btn{padding:13px 16px;}
}

/* 84. VIGNETTES DU PANIER : TENIR DANS LEUR CADRE
   La règle globale img{height:auto} laissait les visuels de produits,
   plus hauts que larges, dépasser leur cadre : la vignette faisait
   90 px dans une case de 56 px et déformait la ligne. On borne les
   deux dimensions et on laisse l'image se centrer sans se déformer. */
.cart-thumb img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
}

/* 85. CARTES DE RUBRIQUE
   La page cartouches n'explique pas, elle montre : une photo, un nom,
   un bouton. Deux colonnes sur mobile comme demandé, trois dès qu'il y
   a la place. Toute la carte est cliquable, le bouton n'étant qu'un
   repère visuel à l'intérieur du lien. */
.secgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
@media(min-width:761px){.secgrid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;}}

.seccard{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  border:1.5px solid var(--line-2);border-radius:var(--r-l);
  padding:16px 14px 18px;background:#fff;
  text-decoration:none;color:inherit;text-align:center;
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
.seccard:hover{border-color:var(--ink);box-shadow:0 16px 38px -24px rgba(17,17,17,.45);transform:translateY(-3px);}
.seccard:focus-visible{outline:2px solid var(--red);outline-offset:3px;}

.seccard-media{
  width:100%;height:210px;border-radius:var(--r);
  background:linear-gradient(158deg,var(--sand),#EFEFEF);
  display:flex;align-items:center;justify-content:center;padding:12px;
}
.seccard-media img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;}

.seccard-h{
  font-size:16px;font-weight:800;letter-spacing:-.02em;line-height:1.25;
  color:var(--ink);text-wrap:balance;
}
.seccard-go{
  margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1.5px solid var(--line-2);border-radius:var(--pill);
  padding:9px 18px;font-size:13.5px;font-weight:700;color:var(--red);
  transition:background .18s,border-color .18s,color .18s;
}
.seccard-go svg{width:16px;height:16px;transition:transform .18s;}
.seccard:hover .seccard-go{background:var(--red);border-color:var(--red);color:#fff;}
.seccard:hover .seccard-go svg{transform:translateX(3px);}

@media(max-width:760px){
  .seccard{padding:12px 10px 14px;gap:10px;}
  .seccard-media{padding:8px;height:132px;}
  .seccard-h{font-size:14px;}
  .seccard-go{padding:8px 14px;font-size:12.5px;}
}

/* ===========================================================
   86. Rayons de l'accueil
   Chaque catégorie y est annoncée par la requête que les
   acheteurs tapent, centrée au-dessus de ses quatre produits,
   puis développée dans un texte justifié.
   =========================================================== */
/* En-tete de rayon : au fer a gauche, comme le reste du site.
   Le lien  Voir la gamme  reste a droite, suivant la disposition
   par defaut de .sec-head. */
.rayon-head .sec-head-txt{text-align:left;}
.rayon-head h2{max-width:none;}

.rayon-prose{
  margin-top:30px;
  max-width:none;
  text-align:justify;
  /* la dernière ligne reste à gauche : justifier un reliquat de
     trois mots creuse des blancs énormes entre eux */
  text-align-last:left;
  hyphens:none;
  overflow-wrap:normal;
}
.rayon-prose p{max-width:none;}
.rayon-prose p + p{margin-top:14px;}

/* Sur mobile, la justification produit des rivières de blanc dans
   une colonne étroite : on y revient au fer à gauche. */
@media(max-width:700px){
  .rayon-prose{text-align:left;}
}

/* Intitulés des rayons en capitales.
   Le passage en majuscules se fait en CSS et non dans le texte :
   la source garde « La puff Al Fakher 25K », ce qui reste la forme
   lisible pour les moteurs et pour les lecteurs d'écran, qui
   épellent souvent un mot écrit en capitales dans le HTML. */
.rayon-prose h3{
  text-transform:uppercase;
  letter-spacing:.02em;
  font-size:19px;
  margin:0 0 12px;
}