@charset "utf-8";
/* ==========================================================================
   Vape & Conseil, piste finale de direction artistique, VERSION 2.
   Retours Jean du 09/09 : ambiance rechauffee (moutarde des fauteuils, bois du
   comptoir), Fraunces + Instrument Sans, mega-menu par rayon, hero reduit,
   packshots sur blanc pur, disponibilite hors des cartes, affluence contrastee.
   Une seule bande sombre par page au maximum.
   Aucune logique commerciale : les montants sont des chaines statiques.
   Aucun tiret cadratin ni demi-cadratin dans le rendu (consigne Jean 09/09).
   ========================================================================== */

/* ---------- 1. Jetons ---------------------------------------------------- */
:root{
  /* couleurs de marque */
  --foret:#004838;        /* vert du logo : titres, boutons, chrome */
  --profond:#012a22;      /* unique bande sombre d'une page, pied de page */
  --sapin:#1f6b64;        /* vert des murs de la boutique */

  /* fonds chauds (v2 : creme plus doree, papier plus chaud) */
  --creme:#f6efe2;
  --papier:#fdf9f1;
  --blanc:#ffffff;

  /* chaleur : fauteuils moutarde et comptoir bois */
  --moutarde:#d9a21b;
  --moutarde-fond:#fbf0d5;   /* aplat d'encart */
  --moutarde-pale:#f5e2b0;   /* filet, chant */
  --bois:#855b3e;      /* bois du comptoir, assombri pour tenir AA sur creme */
  --bois-clair:#b98a5c;

  /* encre et traits */
  --encre:#14201c;
  --encre-douce:#4a5850;
  --trait:#ddd0ba;
  --trait-fort:#bfae92;

  /* signaux (froid, rare) */
  --turquoise:#30c0a8;
  --menthe:#d9f2ea;
  --menthe-bord:#9ed3c1;

  /* avertissement */
  --ambre-texte:#6b5605;
  --ambre-fond:#f7ecd0;

  /* familles de gout */
  --fam-fruite:#a8492c;
  --fam-frais:#276f8a;
  --fam-gourmand:#8a5c15;
  --fam-classic:#6b5b45;

  /* typographie v2 */
  --titre:"Fraunces","Bodoni MT","Didot",Georgia,serif;
  --texte:"Instrument Sans","Helvetica Neue",Arial,sans-serif;

  --t11:0.6875rem; --t12:0.75rem; --t13:0.8125rem; --t15:0.9375rem;
  --t17:1.0625rem; --t19:1.1875rem; --t22:1.375rem; --t27:1.6875rem;
  --t34:2.125rem; --t44:2.75rem; --t58:3.625rem;

  --e4:4px; --e8:8px; --e12:12px; --e16:16px; --e24:24px; --e32:32px;
  --e48:48px; --e64:64px; --e96:96px;

  --enveloppe:1240px;
  --gouttiere:20px;
  --duree:.18s;
}
@media (min-width:760px){ :root{ --gouttiere:32px; } }
@media (min-width:1200px){ :root{ --gouttiere:48px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--creme); color:var(--encre);
  font-family:var(--texte); font-size:var(--t17); line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--foret); text-underline-offset:.18em; text-decoration-thickness:1px; }
a:hover{ color:var(--sapin); }

/* Fraunces porte l'enseigne (h1, h2, prix, chiffres). SOFT 30 epaissit les
   deliés : sans lui, le trait d'union de « Villefranche-de-Rouergue » et la
   barre oblique de « PG/VG » tombent sous le pixel a 16 px. En dessous de
   28 px on ne descend jamais sous 600 de graisse, et les sous-titres (h3, h4)
   restent en grotesque : c'est la ou la lisibilite des chiffres se joue. */
h1,h2{ font-family:var(--titre); font-weight:700; line-height:1.08;
  letter-spacing:-.014em; margin:0 0 var(--e16); color:var(--foret);
  font-optical-sizing:auto; font-variation-settings:"SOFT" 30; }
h1{ font-size:var(--t44); font-weight:800; }
h2{ font-size:var(--t34); }
h3,h4{ font-family:var(--texte); font-weight:700; letter-spacing:-.012em;
  line-height:1.26; margin:0 0 var(--e16); color:var(--foret); }
h3{ font-size:var(--t22); }
h4{ font-size:var(--t19); }
p{ margin:0 0 var(--e16); max-width:68ch; }
ul,ol{ margin:0 0 var(--e16); padding-left:1.15em; }
li{ margin-bottom:var(--e4); }
strong,b{ font-weight:600; }
hr{ border:0; border-top:1px solid var(--trait); margin:var(--e48) 0; }
:focus-visible{ outline:3px solid var(--foret); outline-offset:3px; border-radius:2px; }
.sombre :focus-visible,.tete__bandeau :focus-visible,.plan :focus-visible{ outline-color:var(--turquoise); }
[hidden]{ display:none !important; }

/* ---------- 2. Utilitaires ---------------------------------------------- */
.enveloppe{ width:100%; max-width:var(--enveloppe); margin-inline:auto;
  padding-inline:var(--gouttiere); }
.invisible{ position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.evitement{ position:absolute; left:-9999px; top:0; z-index:80; background:var(--foret);
  color:var(--creme); padding:var(--e12) var(--e16); font-weight:600; }
.evitement:focus{ left:var(--e8); top:var(--e8); }
.enseigne{ font-family:var(--texte); font-size:var(--t11); font-weight:700;
  letter-spacing:.19em; text-transform:uppercase; color:var(--bois);
  display:block; margin-bottom:var(--e12); }
.sombre .enseigne,.hero .enseigne{ color:var(--moutarde-pale); }
.micro{ font-size:var(--t13); line-height:1.5; }
.sourdine{ color:var(--encre-douce); }
.sombre{ background:var(--profond); color:var(--creme); }
.sombre h1,.sombre h2,.sombre h3,.sombre h4{ color:var(--creme); }
.sombre a{ color:var(--moutarde-pale); }
.chaud{ background:var(--moutarde-fond); border-block:1px solid var(--moutarde-pale); }
.section{ padding-block:var(--e48); }
@media (min-width:760px){ .section{ padding-block:var(--e96); } }
.section--serree{ padding-block:var(--e32); }
@media (min-width:760px){ .section--serree{ padding-block:var(--e64); } }
.picto{ width:22px; height:22px; flex:none; }
.picto--chevron{ width:14px; height:14px; }

.bouton{ display:inline-flex; align-items:center; justify-content:center; gap:var(--e8);
  min-height:48px; padding:var(--e12) var(--e24); border:1.5px solid var(--foret);
  background:var(--foret); color:var(--creme); font-family:var(--texte);
  font-size:var(--t15); font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  text-decoration:none; border-radius:0; cursor:pointer;
  transition:background var(--duree) ease,color var(--duree) ease; }
.bouton:hover{ background:var(--profond); border-color:var(--profond); color:var(--creme); }
.bouton--ligne{ background:transparent; color:var(--foret); }
.bouton--ligne:hover{ background:var(--foret); color:var(--creme); }
.bouton--clair{ background:var(--creme); border-color:var(--creme); color:var(--foret); }
.bouton--clair:hover{ background:var(--blanc); border-color:var(--blanc); color:var(--profond); }
.bouton--fantome{ background:transparent; border-color:var(--creme); color:var(--creme); }
.bouton--fantome:hover{ background:var(--creme); color:var(--profond); border-color:var(--creme); }
.bouton--large{ width:100%; }
.lien-fort{ font-weight:600; }

.note-maquette{ background:var(--ambre-fond); border-top:2px solid var(--moutarde);
  border-bottom:1px solid var(--trait); color:var(--ambre-texte);
  font-size:var(--t13); line-height:1.55; }
.note-maquette p{ margin:0; padding-block:var(--e12); max-width:none; }

/* ---------- 3. Bandeau +18 (v2 : deux lignes, plus d'air) ---------------- */
.gate{ background:var(--profond); color:var(--creme); border-bottom:3px solid var(--moutarde); }
html[data-age="ok"] .gate{ display:none; }
.gate__int{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--e16) var(--e32);
  padding-block:var(--e24); }
.gate__texte{ flex:1 1 320px; }
.gate p{ margin:0; font-size:var(--t15); line-height:1.6; max-width:74ch; color:#e6dfd2; }
.gate__titre{ font-family:var(--titre); font-optical-sizing:auto;
  font-variation-settings:"SOFT" 30; font-weight:700; font-size:var(--t22);
  color:var(--creme) !important; line-height:1.2; margin-bottom:var(--e8) !important; }
.gate__bouton{ min-height:52px; padding-inline:var(--e32); font-size:var(--t13); flex:none; }

/* ---------- 4. En-tete --------------------------------------------------- */
.tete{ position:relative; z-index:40; background:var(--creme); }
.tete__bandeau{ background:var(--profond); color:var(--creme); }
.tete__bandeau .enveloppe{ display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--e8) var(--e24); padding-block:var(--e8); font-size:var(--t12); }
.tete__bandeau a{ color:var(--creme); }
.tete__bandeau__adresse{ display:none; }
@media (min-width:760px){ .tete__bandeau__adresse{ display:inline; } }
.tete__bandeau .majeur{ margin-left:auto; color:var(--moutarde-pale); font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; font-size:var(--t11); }
.etat-jour{ display:inline-flex; align-items:center; gap:var(--e8); font-weight:600; }
.pastille{ width:9px; height:9px; border-radius:999px; background:var(--turquoise);
  flex:none; box-shadow:0 0 0 3px rgba(48,192,168,.22); }
.pastille[data-etat="ferme"]{ background:var(--moutarde); box-shadow:0 0 0 3px rgba(217,162,27,.22); }

.tete__principal{ border-bottom:1px solid var(--trait); position:relative; }
/* v2 : le logo respire, en-tete comme pied de page */
.tete__grille{ display:grid; grid-template-columns:auto 1fr; align-items:center;
  gap:var(--e16); padding-block:var(--e24); }
.logo{ display:block; padding:var(--e8) var(--e16) var(--e8) 0; }
.logo img{ width:158px; height:auto; }
@media (min-width:760px){ .logo img{ width:196px; } .logo{ padding-right:var(--e32); } }
.tete__actions{ display:flex; align-items:center; gap:var(--e4); justify-self:end; }
.icone-bouton{ width:44px; height:44px; display:inline-flex; align-items:center;
  justify-content:center; color:var(--foret); background:transparent; border:0;
  cursor:pointer; position:relative; text-decoration:none; }
.icone-bouton svg{ width:21px; height:21px; }
.icone-bouton:hover{ color:var(--sapin); }
.compteur{ position:absolute; top:5px; right:3px; min-width:18px; height:18px;
  padding:0 4px; border-radius:999px; background:var(--foret); color:var(--creme);
  font-size:10px; font-weight:700; line-height:18px; text-align:center; }

/* hamburger v2 : libelle + icone, fond plein, fort contraste */
.bascule-menu{ display:inline-flex; align-items:center; gap:var(--e8); min-height:44px;
  padding:0 var(--e12) 0 var(--e8); margin-left:var(--e4); border:1.5px solid var(--foret);
  background:var(--foret); color:var(--creme); font-family:var(--texte);
  font-size:var(--t13); font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  cursor:pointer; }
.bascule-menu:hover{ background:var(--profond); border-color:var(--profond); }

.nav-principale{ display:none; }
@media (min-width:1120px){
  .tete__grille{ grid-template-columns:auto 1fr auto auto; }
  .nav-principale{ display:block; }
  .bascule-menu{ display:none; }
}
.nav-principale ul,.nav-mobile ul{ list-style:none; margin:0; padding:0; }
.nav-principale ul{ display:flex; flex-wrap:nowrap; align-items:center; gap:var(--e4); }
.nav-rayon{ display:flex; align-items:center; border-bottom:2px solid transparent; }
.nav-principale .nav-simple,.nav-rayon__lien,.nav-rayon__bouton{ display:inline-flex;
  align-items:center; font-family:var(--texte); font-size:var(--t15); font-weight:500;
  color:var(--encre); white-space:nowrap; text-decoration:none; background:transparent;
  border:0; cursor:pointer; padding:var(--e8) 6px 6px; line-height:1.3; }
.nav-principale .nav-simple{ border-bottom:2px solid transparent; }
.nav-rayon__lien{ padding-left:var(--e8); }
.nav-rayon__bouton{ padding-right:var(--e8); color:var(--bois); }
.nav-principale .nav-simple:hover,.nav-rayon:hover{ border-bottom-color:var(--moutarde); }
.nav-rayon:hover .nav-rayon__lien,.nav-rayon:hover .nav-rayon__bouton{ color:var(--foret); }
.nav-principale .nav-simple[aria-current="page"]{ color:var(--foret); font-weight:600;
  border-bottom-color:var(--foret); }
.nav-rayon:has(.nav-rayon__lien[aria-current="true"]){ border-bottom-color:var(--foret); }
.nav-rayon__lien[aria-current="true"]{ color:var(--foret); font-weight:600; }
.nav-rayon:has([aria-expanded="true"]){ border-bottom-color:var(--moutarde); }
.nav-rayon:has([aria-expanded="true"]) .nav-rayon__lien{ color:var(--foret); font-weight:600; }
.nav-rayon__bouton[aria-expanded="true"] .picto--chevron{ transform:rotate(180deg); }
.picto--chevron{ transition:transform var(--duree) ease; }

/* ---------- 4 bis. Mega-menu -------------------------------------------- */
.megamenu{ display:none; }
@media (min-width:1120px){
  .megamenu{ display:block; position:absolute; left:0; right:0; top:100%;
    background:var(--papier); border-top:3px solid var(--moutarde);
    border-bottom:1px solid var(--trait); box-shadow:0 18px 32px -22px rgba(20,32,28,.45);
    z-index:50; }
}
.megamenu__grille{ display:grid; gap:var(--e32); padding-block:var(--e24) var(--e32);
  grid-template-columns:1fr 300px; align-items:start; }
.megamenu__colonnes{ display:grid; gap:var(--e32);
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.megamenu__colonne h3{ font-size:var(--t11); font-weight:700; letter-spacing:.19em;
  text-transform:uppercase; color:var(--bois); margin-bottom:var(--e12);
  padding-bottom:6px; border-bottom:1px solid var(--moutarde-pale); }
.megamenu__colonne ul{ list-style:none; margin:0; padding:0; }
.megamenu__colonne li{ margin:0; }
.megamenu__colonne a{ display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--e12); padding:7px 0; font-size:var(--t15); text-decoration:none;
  color:var(--encre); border-bottom:1px dotted var(--trait); }
.megamenu__colonne a:hover{ color:var(--foret); border-bottom-color:var(--foret); }
.megamenu__nb{ font-size:var(--t12); color:var(--encre-douce); font-variant-numeric:tabular-nums; }
.megamenu__aparte{ border-left:1px solid var(--trait); padding-left:var(--e32); }
.megamenu__aparte img{ width:100%; max-width:118px; background:var(--blanc);
  border:1px solid var(--trait); padding:var(--e12); margin-bottom:var(--e16); }
.megamenu__debut{ display:block; background:var(--moutarde-fond);
  border-left:3px solid var(--moutarde); padding:var(--e12) var(--e16);
  text-decoration:none; color:var(--encre); margin-bottom:var(--e16); }
.megamenu__debut strong{ display:block; color:var(--foret); font-size:var(--t17); }
.megamenu__debut span{ font-size:var(--t13); color:var(--encre-douce); }
.megamenu__tout{ font-size:var(--t13); font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; }

/* ---------- 4 ter. Menu mobile ------------------------------------------ */
.nav-mobile{ border-top:1px solid var(--trait); display:none; background:var(--papier); }
.nav-mobile[data-ouvert="true"]{ display:block; }
@media (min-width:1120px){ .nav-mobile{ display:none !important; } }
.nav-mobile > ul{ padding:var(--e8) var(--gouttiere) var(--e24); }
.nav-mobile > ul > li{ margin:0; }
.nav-mobile__simple{ display:block; padding:var(--e16) 0; font-size:var(--t19);
  font-weight:600; color:var(--foret); text-decoration:none;
  border-bottom:1px solid var(--trait); }
.nav-mobile__rayon{ border-bottom:1px solid var(--trait); }
.nav-mobile__rayon summary{ padding:var(--e16) var(--e32) var(--e16) 0; font-size:var(--t19);
  font-weight:600; color:var(--foret); cursor:pointer; list-style:none; position:relative; }
.nav-mobile__rayon summary::-webkit-details-marker{ display:none; }
.nav-mobile__rayon summary::after{ content:"+"; position:absolute; right:4px; top:var(--e12);
  font-size:var(--t22); font-weight:700; color:var(--moutarde); line-height:1.4; }
.nav-mobile__rayon[open] summary::after{ content:"\2212"; }
.nav-mobile__sous{ padding:0 0 var(--e16) var(--e12);
  border-left:2px solid var(--moutarde-pale); margin-bottom:var(--e12); }
.nav-mobile__groupe{ font-size:var(--t11); font-weight:700; letter-spacing:.17em;
  text-transform:uppercase; color:var(--bois); margin:var(--e12) 0 var(--e4); }
.nav-mobile__sous ul{ list-style:none; padding:0; margin:0; }
.nav-mobile__sous a{ display:block; padding:9px 0; font-size:var(--t17); color:var(--encre);
  text-decoration:none; }
.nav-mobile__groupe a{ display:inline; color:var(--foret); text-decoration:underline;
  letter-spacing:.06em; }

/* selecteur retrait / livraison */
.mode{ display:flex; border:1.5px solid var(--foret); background:var(--papier); }
.mode button{ appearance:none; border:0; background:transparent; cursor:pointer;
  font-family:var(--texte); color:var(--foret); padding:var(--e8) var(--e12);
  text-align:left; line-height:1.25; min-height:48px; }
.mode button + button{ border-left:1.5px solid var(--foret); }
.mode b{ display:block; font-size:var(--t13); font-weight:700; letter-spacing:.03em; }
.mode span{ display:block; font-size:var(--t11); color:var(--encre-douce); }
.mode button[aria-pressed="true"]{ background:var(--foret); color:var(--creme); }
.mode button[aria-pressed="true"] span{ color:var(--menthe); }
.tete__grille .mode{ display:none; }
@media (min-width:760px){ .tete__grille .mode{ display:flex; } }

/* rail de reassurance : une seule ligne compacte sur mobile (retour Jean) */
.rail-mode{ background:var(--sapin); color:var(--blanc); }
.rail-mode .enveloppe{ display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--e8) var(--e16); padding-block:var(--e12); font-size:var(--t13); }
.rail-mode b{ font-weight:700; }
.rail-mode .sep{ width:1px; height:14px; background:rgba(255,255,255,.42); flex:none; }
@media (max-width:759px){
  .rail-mode .enveloppe{ padding-block:7px; font-size:var(--t12); flex-wrap:nowrap;
    white-space:nowrap; overflow:hidden; }
  .rail-mode .sep,.rail-mode__suite{ display:none; }
}
html[data-mode="retrait"] .si-livraison{ display:none; }
html[data-mode="livraison"] .si-retrait{ display:none; }

/* ---------- 5. Hero (v2 : hauteur reduite d'environ un tiers) ------------ */
.hero{ position:relative; background:var(--profond); display:grid; }
.hero__photo{ grid-area:1/1; position:relative; }
/* v2 : hauteur explicite. En v1 l'image portait height:100% dans une ligne de
   grille de hauteur indeterminee : le pourcentage retombait sur auto et c'est
   le rapport intrinseque de la photo (2200x1467) qui fixait le hero, soit
   960 px a 1440. D'ou un hero « trop grand » malgre le min-height. */
.hero__photo img{ width:100%; height:clamp(220px,40vw,560px); object-fit:cover; }
.hero__voile{ position:absolute; inset:0;
  background:
    linear-gradient(180deg,rgba(1,42,34,.30) 0%,rgba(1,42,34,.18) 45%,rgba(1,42,34,.66) 100%),
    linear-gradient(96deg,rgba(1,42,34,.89) 0%,rgba(1,42,34,.85) 40%,rgba(1,42,34,.42) 68%,rgba(1,42,34,.04) 100%); }
@media (max-width:899px){
  .hero__voile{ background:linear-gradient(180deg,rgba(1,42,34,.82) 0%,rgba(1,42,34,.76) 45%,rgba(1,42,34,.90) 100%); }
}
.hero__texte{ grid-area:1/1; position:relative; display:flex; align-items:center;
  padding-block:var(--e32); }
.hero__bloc{ max-width:41rem; color:var(--creme); }
.hero__bloc h1{ color:var(--creme); font-size:clamp(1.875rem,5.4vw,var(--t44));
  margin-bottom:var(--e12); }
.hero__bloc p{ font-size:var(--t17); max-width:36ch; color:#f1ece1; margin-bottom:0; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:var(--e12); margin-top:var(--e16); }
.hero__marque{ width:152px; margin-bottom:var(--e16); }
@media (min-width:760px){ .hero__marque{ width:210px; } }

/* ---------- 5 bis. Reassurance classique -------------------------------- */
.reassurance{ background:var(--papier); border-block:1px solid var(--trait); }
.reassurance ul{ list-style:none; margin:0; padding:0; display:grid; gap:var(--e16);
  padding-block:var(--e24); grid-template-columns:1fr; }
@media (min-width:560px){ .reassurance ul{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .reassurance ul{ grid-template-columns:repeat(4,1fr);
  gap:var(--e32); } }
.reassurance li{ display:flex; align-items:flex-start; gap:var(--e12); margin:0; }
@media (min-width:1000px){ .reassurance li + li{ border-left:1px solid var(--moutarde-pale);
  padding-left:var(--e32); } }
.reassurance .picto{ color:var(--bois); margin-top:3px; }
.reassurance strong{ display:block; font-weight:700; color:var(--foret); font-size:var(--t15); }
.reassurance span{ display:block; font-size:var(--t13); color:var(--encre-douce);
  line-height:1.45; }

/* ---------- 5 ter. Panneau horaires ------------------------------------- */
.horaires-panneau{ background:var(--papier); border:1px solid var(--trait);
  border-top:4px solid var(--moutarde); padding:var(--e24); position:relative;
  margin-top:calc(var(--e24) * -1); }
@media (min-width:760px){ .horaires-panneau{ margin-top:calc(var(--e48) * -1); padding:var(--e32); } }
.horaires-panneau__grille{ display:grid; gap:var(--e24); }
@media (min-width:760px){ .horaires-panneau__grille{ grid-template-columns:1.15fr 1fr 1fr; } }
.horaires-panneau h2{ font-size:var(--t27); margin-bottom:var(--e8); }
.horaires-panneau dl{ margin:0; font-size:var(--t15); }
.horaires-panneau dl div{ display:flex; justify-content:space-between; gap:var(--e16);
  padding-block:var(--e4); border-bottom:1px dotted var(--trait); }
.horaires-panneau dt{ color:var(--encre-douce); }
.horaires-panneau dd{ margin:0; font-weight:600; }
.horaires-panneau dl div[data-aujourdhui="oui"]{ background:var(--menthe);
  margin-inline:-6px; padding-inline:6px; border-bottom-color:var(--menthe-bord); }
.grand-nombre{ font-family:var(--titre); font-weight:800; font-size:var(--t34);
  color:var(--foret); line-height:1; display:block; font-optical-sizing:auto;
  font-variation-settings:"SOFT" 30; font-feature-settings:"tnum" 1; }

/* ---------- 6. Etiquette de gondole -------------------------------------- */
/* v2 : deux colonnes des 375 px (retour Jean), plus de ligne de disponibilite,
   packshot sur blanc pur sans mix-blend-mode. */
.rayon{ display:grid; gap:var(--e16) var(--e12);
  grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:620px){ .rayon{ gap:var(--e24) var(--e16);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,215px),1fr)); } }
.etagere{ position:relative; }
.etagere::after{ content:""; display:block; height:8px; margin-top:var(--e16);
  background:linear-gradient(180deg,var(--bois-clair),var(--bois) 55%,#6f4c33); }
.etiquette{ display:flex; flex-direction:column; background:var(--papier);
  border:1px solid var(--trait); border-radius:0; }
.etiquette__visuel{ background:var(--blanc); border-bottom:1px solid var(--trait);
  aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; padding:var(--e12); }
@media (min-width:620px){ .etiquette__visuel{ padding:var(--e16); } }
.etiquette__visuel img{ width:100%; height:100%; object-fit:contain; }
.etiquette__corps{ padding:var(--e12); display:flex; flex-direction:column; flex:1;
  border-top:3px solid var(--fam, var(--foret)); }
@media (min-width:620px){ .etiquette__corps{ padding:var(--e16); } }
.etiquette__marque{ font-size:var(--t11); font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--fam, var(--encre-douce)); margin:0 0 var(--e4); }
.etiquette__nom{ font-family:var(--texte); font-size:var(--t17); font-weight:700;
  line-height:1.22; margin:0 0 var(--e8); letter-spacing:-.014em; }
@media (min-width:620px){ .etiquette__nom{ font-size:var(--t19); } }
.etiquette__nom a{ text-decoration:none; color:var(--foret); }
.etiquette__nom a:hover{ text-decoration:underline; }
.etiquette__gout{ font-size:var(--t13); color:var(--encre-douce); margin:0 0 var(--e12);
  min-height:2.8em; }
.specs{ margin:0 0 var(--e12); font-size:var(--t12); display:grid; gap:2px; }
.specs div{ display:flex; justify-content:space-between; gap:var(--e8);
  border-bottom:1px dotted var(--trait); padding-bottom:2px; }
.specs dt{ color:var(--encre-douce); }
.specs dd{ margin:0; font-weight:600; }
.etiquette__pied{ margin-top:auto; display:flex; align-items:baseline;
  justify-content:space-between; gap:var(--e8); padding-top:var(--e8);
  border-top:2px solid var(--moutarde-pale); }
.prix{ font-family:var(--titre); font-weight:700; font-size:var(--t22); color:var(--foret);
  font-optical-sizing:auto; font-variation-settings:"SOFT" 30;
  font-feature-settings:"tnum" 1; }
.prix__mention{ font-size:var(--t11); color:var(--encre-douce); }
.dispo{ margin:0; font-size:var(--t13); font-weight:600; color:var(--foret);
  display:flex; align-items:center; gap:7px; }
.dispo::before{ content:""; width:8px; height:8px; border-radius:999px;
  background:var(--turquoise); flex:none; }
.dispo--exp::before{ background:var(--sapin); }

/* ---------- 7. Fiche de conseil (v2.1 : fond papier, chant moutarde fin) - */
.conseil{ background:var(--papier); border:1px solid var(--moutarde-pale);
  border-top:3px solid var(--moutarde); padding:var(--e16); container-type:inline-size; }
@media (min-width:620px){ .conseil{ padding:var(--e24); } }
@media (min-width:1000px){ .conseil{ padding:var(--e32); } }
.conseil h3{ margin-bottom:var(--e12); }
.conseil__visuel{ background:var(--blanc); border:1px solid var(--trait);
  aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;
  padding:var(--e12); margin-bottom:var(--e16); }
.conseil__visuel img{ max-height:100%; width:auto; object-fit:contain; }
.conseil__lignes{ display:grid; gap:var(--e12); }
.conseil__ligne{ display:grid; gap:2px; grid-template-columns:1fr;
  padding-top:var(--e8); border-top:1px solid var(--moutarde-pale); }
@container (min-width:440px){ .conseil__ligne{ grid-template-columns:7.5rem 1fr; gap:var(--e16); } }
.conseil__ligne dt{ font-size:var(--t11); font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--bois); padding-top:.3em; }
.conseil__ligne dd{ margin:0; font-size:var(--t15); color:var(--encre); line-height:1.5; }

/* ---------- 8. Blocs de contenu ------------------------------------------ */
.titre-section{ display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between; gap:var(--e8) var(--e24); margin-bottom:var(--e24);
  padding-bottom:var(--e12); border-bottom:3px solid var(--moutarde); }
.titre-section h2{ margin:0; }
.titre-section a{ font-size:var(--t13); font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; }
.sombre .titre-section{ border-bottom-color:var(--moutarde); }

.portes{ display:grid; gap:var(--e16); grid-template-columns:1fr; }
@media (min-width:560px){ .portes{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .portes--4{ grid-template-columns:repeat(4,1fr); }
  .portes--3{ grid-template-columns:repeat(3,1fr); } }
.porte{ display:block; background:var(--papier); border:1px solid var(--trait);
  border-left:4px solid var(--moutarde); padding:var(--e24); text-decoration:none;
  color:var(--encre); transition:border-left-color var(--duree) ease,background var(--duree) ease; }
.porte:hover{ background:var(--blanc); border-left-color:var(--foret); }
.porte h3{ font-size:var(--t22); margin-bottom:var(--e8); }
.porte p{ margin:0; font-size:var(--t15); color:var(--encre-douce); }

/* rangee compacte « entrer par votre situation » (v2 : reduite) */
.situations{ display:flex; flex-wrap:wrap; gap:var(--e8); list-style:none;
  margin:0 0 var(--e32); padding:0; }
.situations li{ margin:0; }
.situations a{ display:inline-flex; align-items:center; gap:var(--e8);
  padding:var(--e8) var(--e16); background:var(--papier);
  border:1px solid var(--trait); border-left:3px solid var(--moutarde);
  font-size:var(--t15); font-weight:600; color:var(--encre); text-decoration:none; }
.situations a:hover{ background:var(--moutarde-fond); color:var(--foret); }
.situations span{ font-weight:400; color:var(--encre-douce); font-size:var(--t13); }

.etapes{ display:grid; gap:var(--e32); counter-reset:etape; }
@media (min-width:760px){ .etapes{ grid-template-columns:repeat(3,1fr); } }
.etape{ position:relative; padding-top:var(--e32); border-top:2px solid var(--moutarde); }
.etape::before{ counter-increment:etape; content:counter(etape); position:absolute; top:var(--e16);
  right:0; font-family:var(--titre); font-weight:800; font-size:var(--t44);
  color:rgba(217,162,27,.34); line-height:1; font-optical-sizing:auto; }
.etape h3{ font-size:var(--t22); margin-bottom:var(--e8); }
.etape p{ margin:0; font-size:var(--t15); color:#e2dccf; }
.etape img{ width:52px; height:52px; margin-bottom:var(--e12);
  filter:brightness(0) invert(1); opacity:.92; }

.duo{ display:grid; gap:var(--e32); align-items:start; }
@media (min-width:900px){ .duo{ grid-template-columns:1fr 1fr; gap:var(--e48); } }
.equipe{ display:grid; gap:var(--e24); }
@media (min-width:760px){ .equipe{ grid-template-columns:1fr 1fr; } }
.conseiller{ background:var(--papier); border:1px solid var(--trait);
  border-top:3px solid var(--bois-clair); padding:var(--e24); }
.conseiller h3{ margin-bottom:var(--e4); }
.conseiller__specialites{ font-size:var(--t13); color:var(--encre-douce); margin:0;
  padding-top:var(--e12); border-top:1px solid var(--trait); }
.portrait{ width:100%; aspect-ratio:16/10; object-fit:cover; margin-bottom:var(--e16); }
.portrait--absent{ display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:var(--e8);
  background:var(--moutarde-fond); border:1px dashed var(--moutarde); color:var(--bois);
  font-family:var(--titre); font-size:var(--t44); font-weight:800; aspect-ratio:16/10;
  margin-bottom:var(--e16); line-height:1; font-optical-sizing:auto; }
.portrait--absent__note{ font-family:var(--texte); font-size:var(--t11); font-weight:700;
  letter-spacing:.17em; text-transform:uppercase; color:var(--encre-douce); }

/* services de la boutique, avec pictos (v2 : fond chaud, plus de bande sombre) */
.services{ display:grid; gap:var(--e16); list-style:none; margin:0; padding:0;
  grid-template-columns:1fr; }
@media (min-width:760px){ .services{ grid-template-columns:repeat(3,1fr); gap:var(--e24); } }
.services li{ margin:0; background:var(--papier); border:1px solid var(--moutarde-pale);
  border-top:3px solid var(--moutarde); padding:var(--e24); }
.services .picto{ width:30px; height:30px; color:var(--bois); margin-bottom:var(--e12); }
.services h3{ font-size:var(--t19); margin-bottom:var(--e4); }
.services p{ margin:0; font-size:var(--t15); color:var(--encre-douce); }

/* ---------- 9. Affluence -------------------------------------------------- */
.affluence{ background:var(--papier); border:1px solid var(--trait);
  border-top:3px solid var(--moutarde); padding:var(--e24); }
.affluence__jours{ display:flex; flex-wrap:wrap; gap:var(--e4); margin-bottom:var(--e24);
  padding:0; list-style:none; }
.affluence__jours li{ margin:0; }
.affluence__jours button{ appearance:none; cursor:pointer; font-family:var(--texte);
  font-size:var(--t13); font-weight:600; padding:var(--e8) var(--e12); min-height:40px;
  background:transparent; border:1px solid var(--trait-fort); color:var(--encre); }
.affluence__jours button[aria-pressed="true"]{ background:var(--foret); border-color:var(--foret);
  color:var(--creme); }
.affluence__barres{ display:grid; grid-template-columns:repeat(9,1fr); gap:var(--e4);
  align-items:end; height:150px; margin-bottom:var(--e8);
  border-bottom:2px solid var(--trait-fort); }
.affluence__barre{ display:flex; flex-direction:column; justify-content:flex-end;
  height:100%; }
.affluence__barre i{ display:block; background:var(--sapin); min-height:2px; }
.affluence__barre[data-niveau="calme"] i{ background:var(--turquoise); }
.affluence__barre[data-niveau="moyen"] i{ background:var(--bois-clair); }
.affluence__barre[data-niveau="plein"] i{ background:var(--profond); }
.affluence__heures{ display:grid; grid-template-columns:repeat(9,1fr); gap:var(--e4);
  font-size:var(--t11); color:var(--encre-douce); text-align:center;
  padding-top:var(--e4); font-variant-numeric:tabular-nums; }
.affluence__phrase{ margin:var(--e16) 0 var(--e8); font-size:var(--t15); font-weight:600;
  color:var(--foret); }
.affluence__cle{ display:flex; flex-wrap:wrap; gap:var(--e8) var(--e16); list-style:none;
  margin:0 0 var(--e8); padding:0; font-size:var(--t12); color:var(--encre-douce); }
.affluence__cle li{ display:flex; align-items:center; gap:6px; margin:0; }
.affluence__cle b{ width:12px; height:12px; flex:none; }
.affluence__legende{ margin:0; font-size:var(--t11); color:var(--encre-douce); }
.squelette{ background:linear-gradient(90deg,var(--trait) 25%,#ece2d0 50%,var(--trait) 75%);
  background-size:200% 100%; animation:glisse 1.3s linear infinite; height:150px; }
@keyframes glisse{ to{ background-position:-200% 0; } }
.etat-erreur{ background:var(--ambre-fond); border:1px solid var(--moutarde);
  color:var(--ambre-texte); padding:var(--e16); font-size:var(--t15); }
.etat-vide{ background:var(--papier); border:1px dashed var(--trait-fort);
  padding:var(--e32); text-align:center; }
.etat-vide h3{ margin-bottom:var(--e8); }

/* ---------- 10. Catalogue ------------------------------------------------- */
.fil{ font-size:var(--t12); color:var(--encre-douce); padding-block:var(--e16); }
.fil ol{ list-style:none; display:flex; flex-wrap:wrap; gap:var(--e8); margin:0; padding:0; }
.fil li{ margin:0; }
.fil li + li::before{ content:"/"; margin-right:var(--e8); color:var(--trait-fort); }
.catalogue{ display:grid; gap:var(--e24); }
@media (min-width:1000px){ .catalogue{ grid-template-columns:250px 1fr; gap:var(--e48); } }
/* tiroir « Filtrer » sur mobile : les facettes ne mangent plus la page */
.tiroir{ border:1.5px solid var(--foret); background:var(--papier); }
.tiroir > summary{ display:flex; align-items:center; justify-content:space-between;
  gap:var(--e8); padding:var(--e12) var(--e16); min-height:48px; cursor:pointer;
  font-weight:700; color:var(--foret); font-size:var(--t15); letter-spacing:.04em;
  text-transform:uppercase; list-style:none; }
.tiroir > summary::-webkit-details-marker{ display:none; }
.tiroir > summary::after{ content:"+"; font-size:var(--t22); color:var(--moutarde);
  line-height:1; }
.tiroir[open] > summary::after{ content:"\2212"; }
.tiroir__corps{ padding:0 var(--e16) var(--e16); }
@media (min-width:1000px){
  .tiroir{ border:0; background:transparent; }
  .tiroir > summary{ display:none; }
  .tiroir__corps{ padding:0; }
}
.facettes{ font-size:var(--t15); }
.facettes fieldset{ border:0; border-top:1px solid var(--trait); margin:0 0 var(--e16);
  padding:var(--e12) 0 0; }
.facettes legend{ font-size:var(--t11); font-weight:700; letter-spacing:.17em;
  text-transform:uppercase; color:var(--bois); padding:0; }
.facettes label{ display:flex; align-items:center; gap:var(--e8); padding-block:6px;
  cursor:pointer; min-height:32px; }
.facettes input{ width:17px; height:17px; accent-color:var(--foret); flex:none; }
.barre-tri{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--e12); padding-bottom:var(--e16); border-bottom:1px solid var(--trait);
  margin-bottom:var(--e24); }
.barre-tri label{ font-size:var(--t13); font-weight:600; margin-right:var(--e8); }
select{ font-family:var(--texte); font-size:var(--t15); padding:var(--e8) var(--e12);
  min-height:44px; border:1.5px solid var(--foret); background:var(--papier);
  color:var(--encre); border-radius:0; max-width:100%; }
.sous-rayon{ margin-bottom:var(--e48); }
.sous-rayon > h3{ font-family:var(--titre); font-weight:700; font-size:var(--t22);
  letter-spacing:-.01em; line-height:1.16; padding-bottom:var(--e8);
  border-bottom:2px solid var(--moutarde-pale); margin-bottom:var(--e24);
  font-optical-sizing:auto; font-variation-settings:"SOFT" 30; }
@media (min-width:620px){ .sous-rayon > h3{ font-size:var(--t27); } }

/* ---------- 11. Fiche produit --------------------------------------------- */
.produit{ display:grid; gap:var(--e32); }
@media (min-width:900px){ .produit{ grid-template-columns:1fr 1fr; gap:var(--e48); } }
/* v2 : blanc pur derriere le packshot, aucun retraitement (retour Jean) */
.produit__visuel{ background:var(--blanc); border:1px solid var(--trait); padding:var(--e24); }
@media (min-width:760px){ .produit__visuel{ padding:var(--e32); } }
.produit__visuel img{ width:100%; max-width:420px; margin-inline:auto; }
.produit__marque{ font-size:var(--t11); font-weight:700; letter-spacing:.19em;
  text-transform:uppercase; color:var(--bois); margin-bottom:var(--e8); }
.produit h1{ font-size:var(--t34); margin-bottom:var(--e12); }
.produit__prix{ font-family:var(--titre); font-weight:800; font-size:var(--t34);
  color:var(--foret); display:block; margin-bottom:var(--e4); font-optical-sizing:auto;
  font-variation-settings:"SOFT" 30; font-feature-settings:"tnum" 1; }
.produit__prix small{ font-family:var(--texte); font-size:var(--t15); font-weight:600;
  letter-spacing:.04em; color:var(--encre-douce); margin-left:var(--e8); }
.prix-barre{ font-family:var(--texte); font-size:var(--t17); color:var(--encre-douce);
  text-decoration:line-through; margin-left:var(--e8); font-weight:400; }
.etat-cse{ background:var(--moutarde-fond); border:1px solid var(--moutarde-pale);
  border-left:4px solid var(--moutarde); padding:var(--e16); margin-block:var(--e16); }
.etat-cse p{ margin:0 0 var(--e8); font-size:var(--t13); color:var(--ambre-texte); }
.etat-cse p:last-child{ margin-bottom:0; }
.badge-cse{ display:inline-block; background:var(--foret); color:var(--creme);
  font-size:var(--t11); font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:3px 9px; margin-bottom:var(--e8); }
.variantes{ margin:var(--e24) 0; }
.variantes__titre{ font-size:var(--t11); font-weight:700; letter-spacing:.17em;
  text-transform:uppercase; color:var(--bois); margin-bottom:var(--e12); }
.variantes__choix{ display:flex; flex-wrap:wrap; gap:var(--e8); }
.variantes__choix button{ appearance:none; cursor:pointer; font-family:var(--texte);
  font-size:var(--t15); font-weight:600; min-height:48px; min-width:64px;
  padding:var(--e8) var(--e16); background:var(--papier); border:1.5px solid var(--trait-fort);
  color:var(--encre); }
.variantes__choix button[aria-pressed="true"]{ background:var(--foret); border-color:var(--foret);
  color:var(--creme); }
.dispo-double{ display:grid; gap:var(--e8); margin:var(--e24) 0; padding:var(--e16);
  background:var(--papier); border:1px solid var(--trait);
  border-left:4px solid var(--turquoise); }
.onglets{ margin-top:var(--e48); }
.onglets__barre{ display:flex; flex-wrap:wrap; gap:var(--e4); border-bottom:2px solid var(--trait); }
.onglets__barre button{ appearance:none; cursor:pointer; background:transparent; border:0;
  border-bottom:3px solid transparent; margin-bottom:-2px; font-family:var(--texte);
  font-size:var(--t15); font-weight:600; color:var(--encre-douce);
  padding:var(--e12) var(--e16); min-height:48px; }
.onglets__barre button[aria-selected="true"]{ color:var(--foret); border-bottom-color:var(--moutarde); }
.onglets__panneau{ padding-top:var(--e24); }
.composition{ width:100%; border-collapse:collapse; font-size:var(--t15); }
.composition th,.composition td{ text-align:left; padding:var(--e8) var(--e12);
  border-bottom:1px solid var(--trait); }
.composition th{ font-weight:600; color:var(--encre-douce); width:42%; }
.avert{ background:var(--ambre-fond); border-left:4px solid var(--moutarde);
  color:var(--ambre-texte); padding:var(--e16); font-size:var(--t13); line-height:1.55; }
.avert p{ margin:0; max-width:none; }

/* ---------- 12. Panier ---------------------------------------------------- */
.panier{ display:grid; gap:var(--e32); }
@media (min-width:1000px){ .panier{ grid-template-columns:1fr 360px; gap:var(--e48); } }
.ligne-panier{ display:grid; grid-template-columns:88px 1fr; gap:var(--e16);
  padding-block:var(--e24); border-bottom:1px solid var(--trait); }
@media (min-width:560px){ .ligne-panier{ grid-template-columns:104px 1fr auto; } }
.ligne-panier img{ width:100%; background:var(--blanc); border:1px solid var(--trait); }
.ligne-panier h3{ font-size:var(--t19); margin-bottom:var(--e4); }
.ligne-panier .prix{ font-size:var(--t19); }
.quantite{ display:inline-flex; border:1.5px solid var(--trait-fort); background:var(--papier); }
.quantite button{ width:40px; min-height:40px; appearance:none; border:0; background:transparent;
  cursor:pointer; font-size:var(--t17); color:var(--foret); }
.quantite span{ min-width:40px; text-align:center; line-height:40px; font-weight:600; }
.livraisons{ display:grid; gap:var(--e12); margin:var(--e24) 0; }
.livraison{ display:grid; grid-template-columns:auto 1fr auto; gap:var(--e12);
  align-items:start; padding:var(--e16); background:var(--papier);
  border:1.5px solid var(--trait); cursor:pointer; }
.livraison input{ width:19px; height:19px; margin-top:3px; accent-color:var(--foret); }
.livraison h3{ font-size:var(--t17); margin:0 0 var(--e4); font-family:var(--texte);
  font-weight:700; color:var(--encre); }
.livraison p{ margin:0; font-size:var(--t13); color:var(--encre-douce); }
.livraison__prix{ font-family:var(--titre); font-weight:700; color:var(--foret);
  font-optical-sizing:auto; font-variation-settings:"SOFT" 30; }
.livraison:has(input:checked){ background:var(--menthe); border-color:var(--foret); }
.recap{ background:var(--papier); border:1px solid var(--trait); border-top:4px solid var(--moutarde);
  padding:var(--e24); position:sticky; top:var(--e16); }
.recap dl{ margin:0 0 var(--e16); font-size:var(--t15); }
.recap dl div{ display:flex; justify-content:space-between; gap:var(--e16);
  padding-block:var(--e8); border-bottom:1px solid var(--trait); }
.recap dt{ color:var(--encre-douce); } .recap dd{ margin:0; font-weight:600; }
.recap .total{ border-bottom:0; padding-top:var(--e16); }
.recap .total dd{ font-family:var(--titre); font-weight:800; font-size:var(--t27);
  color:var(--foret); font-optical-sizing:auto; font-variation-settings:"SOFT" 30;
  font-feature-settings:"tnum" 1; }

/* ---------- 13. Guides ---------------------------------------------------- */
.guides-liste{ display:grid; gap:var(--e24); }
@media (min-width:760px){ .guides-liste{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1200px){ .guides-liste{ grid-template-columns:repeat(3,1fr); } }
.guide-carte{ display:flex; flex-direction:column; background:var(--papier);
  border:1px solid var(--trait); border-top:3px solid var(--moutarde);
  padding:var(--e24); text-decoration:none; color:var(--encre); }
.guide-carte:hover{ background:var(--blanc); }
.guide-carte h3{ font-size:var(--t22); margin-bottom:var(--e8); }
.guide-carte p{ font-size:var(--t15); color:var(--encre-douce); margin:0 0 var(--e16); }
.guide-carte span{ margin-top:auto; font-size:var(--t12); font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--bois); }

.article{ display:grid; gap:var(--e32); }
@media (min-width:1000px){ .article{ grid-template-columns:250px 1fr; gap:var(--e64); } }
/* v2 : le sommaire n'est colle qu'en deux colonnes. En dessous de 1000 px il
   restait en position:sticky dans une grille a une colonne : son bloc collant
   passait par-dessus le texte du guide (retour Jean, mobile n°1). */
.sommaire{ position:static; font-size:var(--t15); background:var(--papier);
  border:1px solid var(--trait); border-left:3px solid var(--moutarde); padding:var(--e16); }
@media (min-width:1000px){
  .sommaire{ position:sticky; top:var(--e16); align-self:start; background:transparent;
    border:0; border-left:0; padding:0; }
}
.sommaire ol{ list-style:none; margin:0; padding:0; }
@media (min-width:1000px){ .sommaire ol{ border-left:2px solid var(--moutarde-pale); } }
.sommaire li{ margin:0; }
.sommaire a{ display:block; padding:6px var(--e12); text-decoration:none;
  color:var(--encre); border-left:2px solid transparent; margin-left:-2px; }
.sommaire a:hover{ border-left-color:var(--moutarde); color:var(--foret); }
.prose h2{ font-size:var(--t27); margin-top:var(--e48); }
.prose h2:first-child{ margin-top:0; }
.prose table{ width:100%; border-collapse:collapse; font-size:var(--t15);
  margin-bottom:var(--e24); }
.prose th,.prose td{ text-align:left; padding:var(--e8) var(--e12);
  border-bottom:1px solid var(--trait); }
.prose thead th{ background:var(--moutarde-fond); color:var(--foret); font-weight:600; }
.table-defilante{ overflow-x:auto; }
.faq details{ border-bottom:1px solid var(--trait); }
.faq summary{ cursor:pointer; padding:var(--e16) var(--e32) var(--e16) 0; font-weight:600;
  font-size:var(--t17); list-style:none; position:relative; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:0; top:var(--e12);
  font-family:var(--texte); font-weight:700; font-size:var(--t22); color:var(--moutarde);
  line-height:1.3; }
.faq details[open] summary::after{ content:"\2212"; }
.faq p{ margin:0 0 var(--e16); color:var(--encre-douce); }
.demandez{ background:var(--moutarde-fond); border-left:4px solid var(--moutarde);
  padding:var(--e24); margin-block:var(--e32); }
.demandez h3{ margin-bottom:var(--e8); }
.demandez p{ margin:0; }

/* ---------- 14. Plan et acces (v2 : carte chargee d'office) -------------- */
.plan{ border:1px solid var(--trait); background:var(--papier); }
.plan iframe{ width:100%; border:0; display:block; }
/* L'iframe Google est focalisable, mais le focus part dans son document interne :
   l'element exterieur ne matche jamais :focus. L'anneau est donc porte par le
   cadre, via :focus-within. */
.plan:focus-within,.plan--focus{ outline:3px solid var(--foret); outline-offset:2px; }
.plan iframe:focus,.plan iframe:focus-visible{ outline:3px solid var(--foret);
  outline-offset:-3px; }
.plan__pied{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--e12);
  margin:var(--e12) 0 0; font-size:var(--t13); }
.acces-liste{ margin:0; font-size:var(--t15); }
.acces-liste div{ display:flex; justify-content:space-between; gap:var(--e16);
  padding-block:var(--e8); border-bottom:1px dotted var(--trait); }
.acces-liste div:last-child{ border-bottom:0; }
.acces-liste dt{ color:var(--encre-douce); }
.acces-liste dd{ margin:0; font-weight:600; text-align:right; }
.acces-atouts{ display:grid; gap:var(--e16); list-style:none; margin:var(--e24) 0;
  padding:0; }
@media (min-width:560px){ .acces-atouts{ grid-template-columns:repeat(2,1fr); } }
.acces-atouts li{ display:flex; gap:var(--e12); margin:0; }
.acces-atouts .picto{ color:var(--bois); margin-top:3px; }
.acces-atouts strong{ display:block; color:var(--foret); font-size:var(--t15); }
.acces-atouts span{ font-size:var(--t13); color:var(--encre-douce); line-height:1.45; }

/* ---------- 15. Pied de page ---------------------------------------------- */
.pied{ background:var(--profond); color:#e0dacd; padding-block:var(--e32) var(--e32);
  font-size:var(--t15); }
.pied a{ color:var(--moutarde-pale); }
.pied__reassurance{ display:grid; gap:var(--e12); list-style:none; margin:0 0 var(--e32);
  padding:0 0 var(--e24); border-bottom:1px solid rgba(217,162,27,.35);
  grid-template-columns:repeat(2,1fr); }
@media (min-width:900px){ .pied__reassurance{ grid-template-columns:repeat(4,1fr);
  gap:var(--e24); } }
.pied__reassurance li{ display:flex; align-items:center; gap:var(--e8); margin:0;
  font-size:var(--t13); font-weight:600; color:var(--creme); }
.pied__reassurance .picto{ width:20px; height:20px; color:var(--moutarde); }
.pied__grille{ display:grid; gap:var(--e32); margin-bottom:var(--e32); }
@media (min-width:760px){ .pied__grille{ grid-template-columns:1.4fr 1fr 1fr 1fr; } }
.pied h2{ font-size:var(--t13); font-family:var(--texte); font-weight:700;
  letter-spacing:.17em; text-transform:uppercase; color:var(--moutarde-pale);
  margin-bottom:var(--e16); }
.pied ul{ list-style:none; margin:0; padding:0; }
.pied li{ margin-bottom:var(--e8); }
.pied img{ width:190px; margin-bottom:var(--e16); }
.pied__legal{ border-top:1px solid rgba(244,239,230,.24); padding-top:var(--e24);
  font-size:var(--t12); color:#cac4b6; }
.pied__legal p{ max-width:none; }
.pied__age{ display:inline-block; border:1px solid var(--moutarde); color:#f3dfab;
  padding:2px 8px; font-weight:700; letter-spacing:.08em; }

/* ---------- 16. Page legale ----------------------------------------------- */
.legal{ display:grid; gap:var(--e32); }
@media (min-width:1000px){ .legal{ grid-template-columns:250px 1fr; gap:var(--e64); } }
.legal .prose h2{ font-size:var(--t22); }
.legal .prose h3{ font-size:var(--t17); margin-top:var(--e24); }
.identite{ background:var(--papier); border:1px solid var(--trait);
  border-top:3px solid var(--moutarde); padding:var(--e24); margin-bottom:var(--e32); }
.identite dl{ margin:0; font-size:var(--t15); }
.identite div{ display:grid; gap:2px; padding-block:var(--e8);
  border-bottom:1px dotted var(--trait); }
@media (min-width:560px){ .identite div{ grid-template-columns:12rem 1fr; gap:var(--e16); } }
.identite div:last-child{ border-bottom:0; }
.identite dt{ color:var(--encre-douce); }
.identite dd{ margin:0; font-weight:600; }

/* ---------- 17. Mouvement reduit ------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .squelette{ animation:none; background:var(--trait); }
}

/* ---- 18. Durcissement grille : un enfant de grille ne deborde pas ------- */
.duo > *, .catalogue > *, .produit > *, .article > *, .panier > *, .legal > *,
.portes > *, .equipe > *, .etapes > *, .rayon > *, .pied__grille > *,
.services > *, .reassurance li > *, .megamenu__grille > *, .megamenu__colonnes > *,
.horaires-panneau__grille > *{ min-width:0; }

/* ---- 19. Ilots clairs poses sur la bande sombre -------------------------- */
.sombre a.bouton{ color:var(--creme); }
.sombre a.bouton--clair{ color:var(--foret); }
.sombre a.bouton--clair:hover{ color:var(--profond); }
.sombre .etiquette, .sombre .porte, .sombre .conseil{ color:var(--encre); }
.sombre .etiquette h3, .sombre .porte h3, .sombre .conseil h3,
.sombre .etiquette__nom a, .sombre .prix{ color:var(--foret); }
.sombre .porte p, .sombre .specs dt, .sombre .etiquette__gout,
.sombre .prix__mention, .sombre .conseil__ligne dd{ color:var(--encre-douce); }
.sombre .etiquette a{ color:var(--foret); }
.sombre .etiquette__marque{ color:var(--fam, var(--encre-douce)); }

/* ---------- 20. Complements v2 -------------------------------------------- */
/* Carte Google du panneau horaires, chargee d'office (decision Jean) */
.horaires-panneau__carte{ margin-top:var(--e24); padding-top:var(--e24);
  border-top:1px solid var(--trait); }
.horaires-panneau__carte .plan iframe{ height:200px; }
@media (min-width:760px){ .horaires-panneau__carte .plan iframe{ height:260px; } }

/* Les six produits du moment : deux colonnes des 375 px (retour Jean) */
.grille-conseils{ display:grid; gap:var(--e12); grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:620px){ .grille-conseils{ gap:var(--e24); } }
@media (min-width:1000px){ .grille-conseils{ grid-template-columns:repeat(3,1fr); } }
.grille-conseils > *{ min-width:0; }
.grille-conseils .conseil h3{ font-size:var(--t19); }
@media (min-width:620px){ .grille-conseils .conseil h3{ font-size:var(--t22); } }
.conseil__prix{ margin:0 0 var(--e12); display:flex; align-items:baseline; gap:6px; }
.conseil__action{ margin:var(--e16) 0 0; }
.conseil__action .bouton{ width:100%; padding-inline:var(--e12); font-size:var(--t12); }
@media (min-width:620px){ .conseil__action .bouton{ width:auto; font-size:var(--t15);
  padding-inline:var(--e24); } }

.liste-liens{ list-style:none; padding:0; margin:0; }
.liste-liens li{ border-bottom:1px solid var(--moutarde-pale); padding-block:var(--e12);
  margin:0; }