@charset "utf-8";
/* ==========================================================================
   Vape & Conseil, piste finale de direction artistique.
   Squelette « comptoir » (piste 2), fiche de conseil (piste 1), parcours en
   entree secondaire (piste 3). Aucune logique commerciale : les montants sont
   des chaines statiques, le mode retrait/livraison est un etat d'affichage.
   Aucun tiret cadratin ni demi-cadratin dans le rendu (consigne Jean 09/09).
   ========================================================================== */

/* ---------- 1. Jetons ---------------------------------------------------- */
:root{
  /* couleurs */
  --foret:#004838;        /* vert du logo, chrome et titres */
  --profond:#012a22;      /* sections immersives, pied de page */
  --sapin:#1f6b64;        /* vert des murs de la boutique */
  --creme:#f4efe6;        /* fond de page */
  --papier:#fbf8f2;       /* cartes, encarts */
  --blanc:#ffffff;
  --encre:#14201c;        /* texte courant */
  --encre-douce:#48584f;  /* texte secondaire */
  --turquoise:#30c0a8;    /* accent rare : Drive, esperluette, focus sombre */
  --menthe:#d9f2ea;       /* fond d'encart conseil */
  --menthe-bord:#9ed3c1;
  --moutarde:#d9a21b;     /* fauteuils de la boutique */
  --ambre-texte:#6f5a06;  /* mentions nicotine et +18 */
  --ambre-fond:#f7edd2;
  --bois:#8f6647;         /* chant d'etagere */
  --trait:#d6cdbd;
  --trait-fort:#b9ac95;

  /* familles de gout (bandeau d'etiquette) */
  --fam-fruite:#ad5131;
  --fam-frais:#297590;
  --fam-gourmand:#91631a;
  --fam-classic:#6b5b45;

  /* typographie */
  --titre:"Bodoni Moda","Bodoni MT","Didot","Times New Roman",serif;
  --texte:"Archivo","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;

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

  --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; letter-spacing:.002em;
  -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); }
/* Bodoni Moda est variable sur l'axe opsz : on laisse le navigateur choisir
   le dessin selon la taille (font-optical-sizing:auto). Forcer opsz 96 sur un
   titre de 22 px reduit les traits fins a des cheveux (le trait d'union de
   « E-liquides » devenait invisible). */
h1,h2,h3,h4{ font-family:var(--titre); font-weight:700; line-height:1.06;
  letter-spacing:-.012em; margin:0 0 var(--e16); color:var(--foret);
  font-optical-sizing:auto; }
h1{ font-size:var(--t44); font-weight:800; }
h2{ font-size:var(--t34); }
/* Deux registres : le didone porte l'enseigne (h1, h2, prix, chiffres), le
   grotesque porte le rayon (h3, h4). Ce n'est pas qu'un contraste de style :
   sous 30 px, les deliés de Bodoni Moda reduisent trait d'union et barre
   oblique a moins d'un pixel, et « Villefranche-de-Rouergue » ou « PG/VG »
   deviennent illisibles. */
h3,h4{ font-family:var(--texte); font-weight:700; letter-spacing:-.012em;
  line-height:1.24; }
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{ outline-color:var(--turquoise); }

/* ---------- 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:60; 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(--encre-douce);
  display:block; margin-bottom:var(--e12); }
.sombre .enseigne{ color:var(--menthe); }
.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(--menthe); }
.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); } }
.esperluette{ font-family:var(--titre); font-style:italic; font-weight:500; }

.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%; }

.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 ---------------------------------------------- */
.gate{ background:var(--profond); color:var(--creme); border-bottom:2px solid var(--turquoise); }
html[data-age="ok"] .gate{ display:none; }
.gate__int{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--e16);
  padding-block:var(--e16); }
.gate p{ margin:0; font-size:var(--t13); line-height:1.5; flex:1 1 260px; max-width:76ch; }
.gate .bouton{ min-height:44px; padding-inline:var(--e16); font-size:var(--t12); }

/* ---------- 4. En-tete --------------------------------------------------- */
.tete{ position:relative; z-index:20; 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 .majeur{ margin-left:auto; color:var(--menthe); 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); }
.tete__grille{ display:grid; grid-template-columns:auto 1fr; align-items:center;
  gap:var(--e16); padding-block:var(--e16); }
.logo img{ width:150px; height:auto; }
@media (min-width:760px){ .logo img{ width:186px; } }
.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; }

.nav-principale{ display:none; }
@media (min-width:1180px){
  .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; gap:15px; }
.nav-principale a{ font-size:var(--t15); font-weight:500; color:var(--encre); white-space:nowrap;
  text-decoration:none; padding-block:var(--e8); border-bottom:2px solid transparent; }
.nav-principale a:hover{ color:var(--foret); border-bottom-color:var(--trait-fort); }
.nav-principale a[aria-current="page"]{ color:var(--foret); font-weight:600;
  border-bottom-color:var(--foret); }
.nav-mobile{ border-top:1px solid var(--trait); display:none; }
.nav-mobile[data-ouvert="true"]{ display:block; }
@media (min-width:1180px){ .nav-mobile{ display:none !important; } }
.nav-mobile ul{ padding:var(--e8) var(--gouttiere) var(--e16); }
.nav-mobile a{ display:block; padding:var(--e12) 0; font-size:var(--t17); font-weight:500;
  color:var(--encre); text-decoration:none; border-bottom:1px solid var(--trait); }

/* 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-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 .sep{ display:none; }
  .rail-mode .enveloppe{ flex-direction:column; align-items:flex-start; } }
html[data-mode="retrait"] .si-livraison{ display:none; }
html[data-mode="livraison"] .si-retrait{ display:none; }

/* ---------- 5. Hero ------------------------------------------------------ */
/* Photo et texte occupent la meme cellule de grille : la hauteur du hero suit
   le plus haut des deux. En dessous de 760 px le bloc de texte depassait la
   hauteur fixe de la photo et le logo etait rogne. */
.hero{ position:relative; background:var(--profond); display:grid; }
.hero__photo{ grid-area:1/1; position:relative; }
.hero__photo img{ width:100%; height:100%;
  min-height:clamp(300px,54vw,560px); object-fit:cover; }
/* Deux voiles superposes : un dégradé lateral qui assombrit franchement la
   colonne de texte, et un leger fondu vertical qui rattache la photo au
   panneau horaires. Les valeurs sont calees sur la mesure de contraste des
   pixels reellement rendus (pire cas mesure, pas estime). */
.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(--e48); }
.hero__bloc{ max-width:41rem; color:var(--creme); }
.hero__bloc h1{ color:var(--creme); font-size:clamp(2.25rem,7.2vw,var(--t58));
  margin-bottom:var(--e16); font-variation-settings:"opsz" 96; }
.hero__bloc p{ font-size:var(--t19); max-width:34ch; color:#f1ece1; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:var(--e12); margin-top:var(--e24); }
.hero__marque{ width:200px; margin-bottom:var(--e24); }
@media (min-width:760px){ .hero__marque{ width:270px; } }

/* panneau horaires, chevauche le bas de la photo */
.horaires-panneau{ background:var(--papier); border:1px solid var(--trait);
  border-top:4px solid var(--foret); padding:var(--e24); position:relative;
  margin-top:calc(var(--e32) * -1); }
@media (min-width:760px){ .horaires-panneau{ margin-top:calc(var(--e64) * -1); padding:var(--e32); } }
.horaires-panneau__grille{ display:grid; gap:var(--e24); }
@media (min-width:760px){ .horaires-panneau__grille{ grid-template-columns:1.25fr 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); }
.horaires-panneau .lien-fort{ font-weight:600; }
.grand-nombre{ font-family:var(--titre); font-weight:900; font-size:var(--t34);
  color:var(--foret); line-height:1; display:block; }

/* ---------- 6. Etiquette de gondole -------------------------------------- */
.rayon{ display:grid; 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:7px; margin-top:var(--e16);
  background:linear-gradient(180deg,var(--bois),#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(--e16); }
.etiquette__visuel img{ width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; }
.etiquette__corps{ padding:var(--e16); display:flex; flex-direction:column; flex:1;
  border-top:3px solid var(--fam, var(--foret)); }
.etiquette__marque{ font-size:var(--t11); font-weight:700; letter-spacing:.17em;
  text-transform:uppercase; color:var(--fam, var(--encre-douce)); margin:0 0 var(--e4); }
.etiquette__nom{ font-family:var(--texte); font-size:var(--t19); font-weight:700;
  line-height:1.22; margin:0 0 var(--e8); letter-spacing:-.014em; }
.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:3.1em; }
.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:1px solid var(--trait); }
.prix{ font-family:var(--titre); font-weight:700; font-size:var(--t22); color:var(--foret); }
.prix__mention{ font-size:var(--t11); color:var(--encre-douce); }
.dispo{ margin:var(--e8) 0 0; font-size:var(--t12); font-weight:600; color:var(--foret);
  display:flex; align-items:center; gap:6px; }
.dispo::before{ content:""; width:7px; height:7px; border-radius:999px;
  background:var(--turquoise); flex:none; }
.dispo--exp::before{ background:var(--sapin); }

/* ---------- 7. Fiche de conseil ------------------------------------------ */
.conseil{ background:var(--menthe); border:1px solid var(--menthe-bord); padding:var(--e24);
  container-type:inline-size; }
@media (min-width:760px){ .conseil{ padding:var(--e32); } }
.conseil h3{ margin-bottom:var(--e16); }
.conseil__lignes{ display:grid; gap:var(--e16); }
.conseil__ligne{ display:grid; gap:var(--e4); grid-template-columns:1fr;
  padding-top:var(--e12); border-top:1px solid var(--menthe-bord); }
@container (min-width:440px){ .conseil__ligne{ grid-template-columns:8.5rem 1fr; gap:var(--e16); } }
.conseil__ligne dt{ font-size:var(--t11); font-weight:700; letter-spacing:.17em;
  text-transform:uppercase; color:var(--foret); padding-top:.25em; }
.conseil__ligne dd{ margin:0; font-size:var(--t15); color:var(--encre); }
.conseil__signature{ margin:var(--e16) 0 0; font-family:var(--titre); font-style:italic;
  font-size:var(--t15); color:var(--foret); }

/* ---------- 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:2px solid var(--foret); }
.titre-section h2{ margin:0; }
.titre-section a{ font-size:var(--t13); font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; }

.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(--foret); 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(--turquoise); }
.porte h3{ font-size:var(--t22); margin-bottom:var(--e8); }
.porte p{ margin:0; font-size:var(--t15); color:var(--encre-douce); }

.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 rgba(244,239,230,.35); }
.etape::before{ counter-increment:etape; content:counter(etape); position:absolute; top:var(--e16);
  right:0; font-family:var(--titre); font-weight:900; font-size:var(--t44);
  color:rgba(244,239,230,.22); line-height:1; }
.etape h3{ font-size:var(--t22); margin-bottom:var(--e8); }
.etape p{ margin:0; font-size:var(--t15); color:#e2dccf; }
/* les icones click and collect sont un trait vert fonce : on les repeint en clair
   pour qu'elles restent lisibles sur la section sombre */
.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:center; }
@media (min-width:900px){ .duo{ grid-template-columns:1fr 1fr; gap:var(--e64); } }
.duo--photo-droite img{ width:100%; }
.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); 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(--menthe); border:1px dashed var(--menthe-bord); color:var(--foret);
  font-family:var(--titre); font-size:var(--t44); font-weight:900; aspect-ratio:16/10;
  margin-bottom:var(--e16); line-height:1; }
.portrait--absent__note{ font-family:var(--texte); font-size:var(--t11); font-weight:700;
  letter-spacing:.17em; text-transform:uppercase; color:var(--encre-douce); }

/* ---------- 9. Affluence -------------------------------------------------- */
.affluence{ background:var(--papier); border:1px solid var(--trait); padding:var(--e24); }
.affluence__jours{ display:flex; flex-wrap:wrap; gap:var(--e4); margin-bottom:var(--e24);
  padding:0; list-style:none; }
.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:120px; margin-bottom:var(--e8); }
.affluence__barre{ display:flex; flex-direction:column; justify-content:flex-end;
  height:100%; }
.affluence__barre i{ display:block; background:var(--sapin); border-radius:1px;
  min-height:3px; }
.affluence__barre[data-calme="oui"] i{ background:var(--turquoise); }
.affluence__heures{ display:grid; grid-template-columns:repeat(9,1fr); gap:var(--e4);
  font-size:var(--t11); color:var(--encre-douce); text-align:center;
  border-top:1px solid var(--trait); padding-top:var(--e4); }
.affluence__phrase{ margin:var(--e16) 0 var(--e8); font-size:var(--t15); font-weight:600;
  color:var(--foret); }
.affluence__legende{ margin:0; font-size:var(--t11); color:var(--encre-douce); }
.squelette{ background:linear-gradient(90deg,var(--trait) 25%,#e8e0d1 50%,var(--trait) 75%);
  background-size:200% 100%; animation:glisse 1.3s linear infinite; height:120px; }
@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 + li::before{ content:"/"; margin-right:var(--e8); color:var(--trait-fort); }
.catalogue{ display:grid; gap:var(--e32); }
@media (min-width:1000px){ .catalogue{ grid-template-columns:250px 1fr; gap:var(--e48); } }
.facettes{ font-size:var(--t15); }
.facettes fieldset{ border:0; border-top:1px solid var(--trait); margin:0 0 var(--e24);
  padding:var(--e16) 0 0; }
.facettes legend{ font-size:var(--t11); font-weight:700; letter-spacing:.17em;
  text-transform:uppercase; color:var(--foret); 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; }
.sous-rayon{ margin-bottom:var(--e48); }
.sous-rayon > h3{ font-family:var(--titre); font-weight:700; font-size:var(--t27);
  letter-spacing:-.01em; line-height:1.1; padding-bottom:var(--e8);
  border-bottom:1px solid var(--trait-fort); margin-bottom:var(--e24); }

/* ---------- 11. Fiche produit --------------------------------------------- */
.produit{ display:grid; gap:var(--e32); }
@media (min-width:900px){ .produit{ grid-template-columns:1fr 1fr; gap:var(--e64); } }
.produit__visuel{ background:var(--blanc); border:1px solid var(--trait); padding:var(--e32); }
.produit__visuel img{ width:100%; max-width:420px; margin-inline:auto; mix-blend-mode:multiply; }
.produit__marque{ font-size:var(--t11); font-weight:700; letter-spacing:.19em;
  text-transform:uppercase; color:var(--encre-douce); margin-bottom:var(--e8); }
.produit h1{ font-size:var(--t34); margin-bottom:var(--e12); }
.produit__prix{ font-family:var(--titre); font-weight:900; font-size:var(--t34);
  color:var(--foret); display:block; margin-bottom:var(--e4); }
.variantes{ margin:var(--e24) 0; }
.variantes__titre{ font-size:var(--t11); font-weight:700; letter-spacing:.17em;
  text-transform:uppercase; color:var(--foret); 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); }
.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(--foret); }
.onglets__panneau{ padding-top:var(--e24); }
.onglets__panneau[hidden]{ display:none; }
.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); }
.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(--foret);
  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:900; font-size:var(--t27);
  color:var(--foret); }

/* ---------- 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); 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(--foret); }

.article{ display:grid; gap:var(--e32); }
@media (min-width:1000px){ .article{ grid-template-columns:250px 1fr; gap:var(--e64); } }
.sommaire{ position:sticky; top:var(--e16); align-self:start; font-size:var(--t15); }
.sommaire ol{ list-style:none; margin:0; padding:0; border-left:2px solid var(--trait); }
.sommaire a{ display:block; padding:var(--e8) var(--e16); text-decoration:none;
  color:var(--encre); border-left:2px solid transparent; margin-left:-2px; }
.sommaire a:hover{ border-left-color:var(--foret); 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(--papier); 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(--foret); 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(--menthe); border-left:4px solid var(--foret); padding:var(--e24);
  margin-block:var(--e32); }
.demandez h3{ margin-bottom:var(--e8); }
.demandez p{ margin:0; }

/* ---------- 14. Plan et acces --------------------------------------------- */
.plan{ position:relative; background:var(--sapin); min-height:300px; display:grid;
  place-items:center; border:1px solid var(--trait); }
.plan button{ background:var(--creme); color:var(--foret); border:1.5px solid var(--creme); }
.plan__legende{ color:var(--blanc); font-size:var(--t13); margin-top:var(--e12);
  max-width:34ch; text-align:center; }
.plan iframe{ width:100%; height:380px; border:0; display:block; }
.plan--charge{ padding:0; display:block; min-height:0; }

/* ---------- 15. Pied de page ---------------------------------------------- */
.pied{ background:var(--profond); color:#ded8cb; padding-block:var(--e48) var(--e32);
  font-size:var(--t15); }
.pied a{ color:var(--menthe); }
.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(--creme); margin-bottom:var(--e16); }
.pied ul{ list-style:none; margin:0; padding:0; }
.pied li{ margin-bottom:var(--e8); }
.pied img{ width:180px; margin-bottom:var(--e16); }
.pied__legal{ border-top:1px solid rgba(244,239,230,.24); padding-top:var(--e24);
  font-size:var(--t12); color:#c5bfb2; }
.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. 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); }
}

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

/* ---- 18. Ilots clairs posés sur une section sombre ----------------------
   .sombre impose une couleur de texte claire : tout bloc a fond papier pose
   dedans doit la reprendre, sinon on tombe sous le seuil AA. */
.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); }
.hero .enseigne{ color:var(--menthe); }