/* =============================================================
   Vape & Conseil — Piste 2 « Le comptoir »
   Direction artistique : la boutique de Villefranche transposée
   en rayon. Le composant central est l'« étiquette de gondole » ;
   les rangées de produits reposent sur un filet de bois qui joue
   le chant d'étagère. Chrome vert (les murs), marchandise sur
   crème et papier (les rayonnages), moutarde des fauteuils en
   accent chaud.
   ============================================================= */

/* ---------- 1. Jetons ---------- */
:root{
  /* couleurs */
  --vert-foret:#004838;      /* marque : titres, boutons primaires */
  --vert-profond:#022f26;    /* bandeaux immersifs, pied de page */
  --vert-mur:#1f6b64;        /* murs de la boutique : bandes pleine largeur */
  --creme:#f4efe6;           /* fond de page dominant */
  --papier:#fbf8f2;          /* étiquettes, encarts */
  --encre:#14201c;           /* texte courant */
  --encre-douce:#3f544c;     /* texte secondaire (7,1:1 sur crème) */
  --turquoise:#30c0a8;       /* accent rare, sur fond sombre uniquement */
  --menthe:#d9f2ea;          /* fond d'encart conseil */
  --moutarde:#d9a21b;        /* fauteuils : aplat, jamais de texte dessus < 19px */
  --ambre-texte:#7a5a06;     /* mentions nicotine / +18 (5,6:1 sur crème) */
  --ambre-fond:#f6e9cb;
  --bois:#8f6647;            /* chant d'étagère, décoratif */
  --filet:rgba(20,32,28,.14);
  --filet-fort:rgba(20,32,28,.28);
  --filet-clair:rgba(244,239,230,.22);
  --focus:var(--vert-foret);

  /* typographie */
  --didone:"Playfair Display","Iowan Old Style",Georgia,"Times New Roman",serif;
  --sans:"Manrope","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;

  /* échelle (base 16) */
  --t-micro:.75rem;
  --t-label:.8125rem;
  --t-petit:.9375rem;
  --t-corps:1rem;
  --t-lead:1.125rem;
  --t-h4:1.25rem;
  --t-h3:clamp(1.375rem,1.1rem + 1.1vw,1.75rem);
  --t-h2:clamp(1.75rem,1.25rem + 2.1vw,2.75rem);
  --t-h1:clamp(2.25rem,1.4rem + 3.6vw,4.25rem);
  --t-prix:clamp(1.5rem,1.2rem + 1vw,1.9rem);

  /* espacements */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px;
  --e6:32px; --e7:48px; --e8:64px; --e9:96px; --e10:128px;
  --section:clamp(48px,7vw,96px);

  /* rayons : quasi nuls, ce sont des tickets de papier */
  --r-ticket:2px; --r-champ:4px; --r-puce:999px;

  --largeur:1280px;
  --gouttiere:clamp(20px,4vw,48px);
}

/* ---------- 2. Réinitialisation utile ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--creme);
  color:var(--encre);
  font-family:var(--sans);
  font-size:var(--t-corps);
  line-height:1.6;
  font-weight:450;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
h1,h2,h3,h4{font-family:var(--didone);font-weight:700;line-height:1.06;margin:0;letter-spacing:-.012em}
h1{font-size:var(--t-h1);font-weight:900;letter-spacing:-.022em}
h2{font-size:var(--t-h2);font-weight:800;letter-spacing:-.018em}
h3{font-size:var(--t-h3)}
h4{font-size:var(--t-h4)}
p{margin:0 0 var(--e4)}
a{color:var(--vert-foret);text-decoration-thickness:1px;text-underline-offset:3px}
ul,ol{margin:0 0 var(--e4);padding-left:1.15em}
li{margin-bottom:var(--e2)}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:var(--r-champ)}
.sombre :focus-visible,.tete__bandeau :focus-visible,.pied :focus-visible,
.heros__texte :focus-visible{--focus:var(--turquoise)}
.mur :focus-visible,.cse-heros :focus-visible{--focus:var(--creme)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ---------- 3. Utilitaires ---------- */
.enveloppe{width:100%;max-width:var(--largeur);margin-inline:auto;padding-inline:var(--gouttiere)}
.large{max-width:1480px}
.evitement{position:absolute;left:-9999px;top:0;background:var(--vert-foret);color:var(--creme);
  padding:var(--e3) var(--e5);z-index:200}
.evitement:focus{left:var(--e4);top:var(--e4)}
.invisible{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.enseigne{
  font-family:var(--sans);font-size:var(--t-label);font-weight:700;
  letter-spacing:.19em;text-transform:uppercase;line-height:1.3;
}
.micro{font-size:var(--t-micro);letter-spacing:.02em;line-height:1.45}
.sourdine{color:var(--encre-douce)}
.mesure{max-width:62ch}
.mesure-courte{max-width:46ch}

/* ---------- 4. Boutons ---------- */
.bouton{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);
  min-height:48px;padding:var(--e3) var(--e6);
  font-family:var(--sans);font-size:var(--t-petit);font-weight:700;letter-spacing:.03em;
  border:1.5px solid var(--vert-foret);border-radius:var(--r-champ);
  background:var(--vert-foret);color:var(--creme);text-decoration:none;cursor:pointer;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.bouton:hover{background:#013528;border-color:#013528}
.bouton--ligne{background:transparent;color:var(--vert-foret)}
.bouton--ligne:hover{background:var(--vert-foret);color:var(--creme)}
.bouton--clair{background:var(--creme);color:var(--vert-profond);border-color:var(--creme)}
.bouton--clair:hover{background:#fff;border-color:#fff;color:var(--vert-profond)}
.bouton--large{width:100%}
/* Spécificité : `.sombre a` / `.pied a` ne doivent jamais reprendre la main
   sur la couleur de texte d'un bouton (contraste mesuré à 1,99:1 sinon). */
a.bouton{color:var(--creme)}
a.bouton--ligne{color:var(--vert-foret)}
a.bouton--ligne:hover{color:var(--creme)}
a.bouton--clair,a.bouton--clair:hover{color:var(--vert-profond)}
.bouton[disabled],.bouton[aria-disabled="true"]{opacity:.5;cursor:not-allowed}

/* ---------- 5. Gate +18 (bandeau réel, jamais de fenêtre modale) ---------- */
.gate{background:var(--ambre-fond);border-bottom:2px solid var(--moutarde);color:var(--encre)}
.gate__int{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e3) var(--e5);
  padding-block:var(--e3)}
.gate p{margin:0;font-size:var(--t-petit);max-width:60ch}
.gate strong{font-weight:800}
.gate .bouton{min-height:44px;padding-inline:var(--e5)}
html[data-age="ok"] .gate{display:none}

/* ---------- 6. En-tête ---------- */
.tete__bandeau{background:var(--vert-profond);color:var(--creme)}
.tete__bandeau .enveloppe{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e2) var(--e5);
  padding-block:var(--e2);min-height:38px}
.tete__bandeau a{color:var(--creme)}
.horaire-jour{display:inline-flex;align-items:center;gap:var(--e2)}
.pastille{width:7px;height:7px;border-radius:var(--r-puce);background:var(--turquoise);flex:none}
.tete__bandeau .majeur{margin-left:auto;color:#cfe3db}

.tete__principal{
  position:sticky;top:0;z-index:60;background:var(--creme);
  border-bottom:1px solid var(--filet);
}
.tete__grille{display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--e3);padding-block:var(--e3)}
.logo{flex:0 0 auto;margin-right:auto}
.logo img{width:auto;height:clamp(38px,4.4vw,54px)}
.nav-principale{display:none}
.nav-principale ul{display:flex;gap:var(--e5);list-style:none;margin:0;padding:0}
.nav-principale li{margin:0;white-space:nowrap}
.nav-principale a{
  color:var(--encre);text-decoration:none;font-weight:600;font-size:var(--t-petit);
  padding-block:var(--e2);border-bottom:2px solid transparent;
}
.nav-principale a:hover{border-bottom-color:var(--moutarde)}
.nav-principale a[aria-current="page"]{border-bottom-color:var(--vert-foret);color:var(--vert-foret)}
.tete__actions{display:flex;align-items:center;gap:var(--e2);order:2;flex:0 0 auto}
.icone-bouton{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);
  min-width:44px;min-height:44px;padding:0 var(--e3);
  background:transparent;border:1px solid transparent;border-radius:var(--r-champ);
  color:var(--encre);text-decoration:none;cursor:pointer;font-size:var(--t-petit);font-weight:600;
}
.icone-bouton:hover{border-color:var(--filet);background:var(--papier)}
.icone-bouton svg{width:20px;height:20px;flex:none}
.compteur{
  display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;
  padding:0 5px;border-radius:var(--r-puce);background:var(--vert-foret);color:var(--creme);
  font-size:11px;font-weight:800;line-height:1;
}

/* sélecteur Retrait / Livraison — pièce maîtresse de la piste */
.mode{display:flex;align-items:stretch;border:1.5px solid var(--vert-foret);
  border-radius:var(--r-champ);overflow:hidden;background:var(--papier);
  order:3;flex:1 0 100%}
.mode button{flex:1}
.mode b{white-space:nowrap}
.mode button{
  display:flex;flex-direction:column;justify-content:center;gap:1px;
  min-height:44px;padding:var(--e2) var(--e4);border:0;background:transparent;
  color:var(--vert-foret);cursor:pointer;text-align:left;
}
.mode button + button{border-left:1.5px solid var(--vert-foret)}
.mode b{font-size:var(--t-petit);font-weight:700;line-height:1.2}
.mode span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;opacity:.8}
.mode button[aria-pressed="true"]{background:var(--vert-foret);color:var(--creme)}

/* rail contextuel sous l'en-tête */
.rail-mode{background:var(--vert-mur);color:var(--creme)}
.rail-mode .enveloppe{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e2) var(--e5);
  padding-block:var(--e3);font-size:var(--t-petit)}
.rail-mode b{font-weight:800}
.rail-mode .sep{display:none}
@media (min-width:640px){.rail-mode .sep{display:inline-block;width:1px;height:15px;
  background:var(--filet-clair)}}

/* bascule d'affichage pilotée par le mode */
html[data-mode="retrait"] .si-livraison{display:none!important}
html[data-mode="livraison"] .si-retrait{display:none!important}

/* menu mobile */
.bascule-menu{display:inline-flex}
.nav-mobile{display:none;border-top:1px solid var(--filet);background:var(--papier)}
.nav-mobile[data-ouvert="true"]{display:block}
.nav-mobile ul{list-style:none;margin:0;padding:var(--e3) 0}
.nav-mobile li{margin:0}
.nav-mobile a{display:block;padding:var(--e3) var(--gouttiere);color:var(--encre);
  text-decoration:none;font-weight:600;border-bottom:1px solid var(--filet)}
.nav-mobile a[aria-current="page"]{color:var(--vert-foret);box-shadow:inset 4px 0 0 var(--moutarde)}

/* L'en-tête complet (rayons + sélecteur + actions) ne tient qu'à partir de
   1200 px ; en dessous, menu compact et sélecteur de mode sur toute la largeur. */
@media (min-width:1200px){
  .nav-principale{display:block;order:1;flex:1 1 auto}
  .bascule-menu{display:none}
  .nav-mobile{display:none!important}
  .tete__grille{flex-wrap:nowrap;gap:var(--e6)}
  .mode{order:2;flex:0 0 auto}
  .mode button{flex:0 0 auto}
  .tete__actions{order:3}
}
@media (max-width:639px){
  .rail-mode .enveloppe > :nth-child(n+3){display:none}
}

/* ---------- 7. Étiquette de gondole ---------- */
.rayon{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:0;row-gap:clamp(28px,4vw,44px);
}
@media (min-width:700px){.rayon{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){.rayon--4{grid-template-columns:repeat(4,minmax(0,1fr))}}

.etiquette{
  position:relative;display:flex;flex-direction:column;background:var(--papier);
  border-bottom:3px solid var(--bois);border-left:1px solid var(--filet);
  border-radius:var(--r-ticket) var(--r-ticket) 0 0;
  box-shadow:0 6px 0 -3px rgba(20,32,28,.13);
}
.rayon > .etiquette{border-left:1px solid var(--filet)}
.rayon > .etiquette:nth-child(2n+1){border-left-color:transparent}
@media (min-width:700px){
  .rayon > .etiquette:nth-child(2n+1){border-left-color:var(--filet)}
  .rayon > .etiquette:nth-child(3n+1){border-left-color:transparent}
}
@media (min-width:1100px){
  .rayon--4 > .etiquette:nth-child(3n+1){border-left-color:var(--filet)}
  .rayon--4 > .etiquette:nth-child(4n+1){border-left-color:transparent}
}
@media (max-width:479px){
  .etiquette__corps{padding:var(--e3) var(--e3) var(--e2)}
  .etiquette__nom{font-size:1.0625rem}
  .specs dd{font-size:.8125rem}
  .specs div + div{padding-left:var(--e2)}
}
.etiquette__visuel{
  position:relative;aspect-ratio:4/3;background:var(--menthe);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.etiquette__visuel img{width:100%;height:100%;object-fit:cover}
.etiquette__visuel .monogramme{
  font-family:var(--didone);font-size:clamp(2.2rem,6vw,3.2rem);font-weight:900;
  color:var(--vert-foret);opacity:.28;line-height:1;
}
.etiquette__gamme{
  position:absolute;left:0;bottom:0;background:var(--vert-foret);color:var(--creme);
  padding:5px var(--e3);
}
.etiquette__corps{padding:var(--e4) var(--e4) var(--e3);display:flex;flex-direction:column;flex:1}
.etiquette__nom{font-size:var(--t-h4);line-height:1.14;margin:0 0 var(--e1);
  min-height:2.28em}  /* deux lignes réservées : les prix d'une même rangée s'alignent */
.etiquette__nom a{color:var(--encre);text-decoration:none}
.etiquette__nom a:hover{color:var(--vert-foret);text-decoration:underline}
.etiquette__marque{font-size:var(--t-micro);color:var(--encre-douce);margin:0 0 var(--e3);
  letter-spacing:.02em}
.specs{display:flex;border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);margin-bottom:var(--e3)}
.specs div{flex:1;padding:var(--e2) 0}
.specs div + div{border-left:1px solid var(--filet);padding-left:var(--e3)}
.specs dt{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--encre-douce);
  font-weight:700;margin:0}
.specs dd{margin:1px 0 0;font-size:var(--t-petit);font-weight:700}
.etiquette__pied{margin-top:auto;display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--e2);padding-top:var(--e2)}
.prix{font-family:var(--didone);font-size:var(--t-prix);font-weight:900;line-height:1;
  color:var(--vert-foret);letter-spacing:-.02em}
.prix-unite{font-size:var(--t-micro);color:var(--encre-douce);white-space:nowrap}
.dispo{display:flex;align-items:center;gap:var(--e2);margin-top:var(--e3);
  font-size:var(--t-micro);font-weight:700;color:var(--vert-foret)}
.dispo::before{content:"";width:8px;height:8px;border-radius:var(--r-puce);
  background:var(--vert-foret);flex:none}
.dispo--attente{color:var(--ambre-texte)}
.dispo--attente::before{background:var(--ambre-texte)}

/* ---------- 8. Héros ---------- */
.heros{position:relative;background:var(--vert-profond)}
.heros__photo{position:relative;height:clamp(240px,50vw,600px);overflow:hidden}
.heros__photo img{width:100%;height:100%;object-fit:cover;object-position:58% 58%}
.heros__voile{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(2,47,38,.96) 0%,rgba(2,47,38,.93) 40%,
    rgba(2,47,38,.55) 58%,rgba(2,47,38,.06) 80%,rgba(2,47,38,0) 100%)}
.heros__texte{position:absolute;inset:0;display:flex;align-items:center}
.heros__texte .enveloppe{width:100%}
.heros__bloc{max-width:35rem;color:var(--creme)}
.heros__bloc .enseigne{color:var(--turquoise);margin-bottom:var(--e4);display:block}
.heros__bloc h1{color:var(--creme);margin-bottom:var(--e4)}
.heros__bloc p{font-size:var(--t-lead);color:#e6ded1;margin-bottom:var(--e5)}
.heros__actions{display:flex;flex-wrap:wrap;gap:var(--e3)}
.heros__planche{background:var(--creme)}
.heros__planche .enveloppe{padding-block:0}
.planche{
  margin-top:clamp(-56px,-5vw,-24px);position:relative;z-index:5;
  background:var(--papier);border-top:4px solid var(--vert-foret);
  box-shadow:0 18px 40px -28px rgba(2,47,38,.6);
}
.planche__titre{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:var(--e3);padding:var(--e4) var(--e4) var(--e2)}
.planche__titre .enseigne{color:var(--vert-foret)}
.planche__titre a{font-size:var(--t-petit);font-weight:700}
.planche .rayon{padding:0 var(--e4) var(--e5);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:760px){.planche .rayon{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:699px){.planche{margin-top:0}}

/* ---------- 9. Sections ---------- */
.section{padding-block:var(--section)}
.section--serree{padding-block:clamp(32px,4.5vw,56px)}
.section--papier{background:var(--papier)}
.section--menthe{background:var(--menthe)}
.sombre{background:var(--vert-profond);color:var(--creme)}
.sombre h2,.sombre h3{color:var(--creme)}
.sombre p{color:#dcd4c7}
.sombre a{color:var(--turquoise)}
.mur{background:var(--vert-mur);color:var(--creme)}
.mur h2{color:var(--creme)}
.mur p{color:#e7f0ec}

.entete-section{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:var(--e4);margin-bottom:var(--e6);padding-bottom:var(--e3);
  border-bottom:2px solid var(--vert-foret)}
.entete-section h2{margin:0}
.entete-section p{margin:var(--e2) 0 0;color:var(--encre-douce);max-width:52ch}
.sombre .entete-section,.mur .entete-section{border-bottom-color:var(--filet-clair)}
.sombre .entete-section p{color:#dcd4c7}
.mur .entete-section p{color:#e7f0ec}

/* ---------- 10. Trois étapes / trois rayons ---------- */
.etapes{display:grid;gap:var(--e5);grid-template-columns:1fr;counter-reset:etape}
@media (min-width:760px){.etapes{grid-template-columns:repeat(3,1fr);gap:0}}
.etape{padding:var(--e5) 0;border-top:2px solid var(--filet-clair)}
@media (min-width:760px){
  .etape{padding:var(--e5) var(--e5) var(--e5) 0}
  .etape + .etape{padding-left:var(--e5);border-left:1px solid var(--filet-clair)}
}
.etape__num{
  /* crème et non turquoise : le turquoise sur le vert des murs ne tient pas le
     contraste AA (2,76:1 mesuré). */
  counter-increment:etape;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:var(--r-puce);border:1.5px solid var(--creme);
  color:var(--creme);font-family:var(--didone);font-weight:700;font-size:1.0625rem;
  margin-bottom:var(--e3);
}
.etape__num::before{content:counter(etape)}
.etape h3{font-size:var(--t-h4);margin-bottom:var(--e2)}
.etape p{margin:0;font-size:var(--t-petit)}

.rayons-besoin{display:grid;gap:var(--e5);grid-template-columns:1fr}
@media (min-width:760px){.rayons-besoin{grid-template-columns:repeat(3,1fr);gap:var(--e6)}}
.panneau{display:flex;flex-direction:column;background:var(--papier);
  border-bottom:3px solid var(--vert-foret);text-decoration:none;color:var(--encre)}
.panneau img{aspect-ratio:5/3;object-fit:cover;width:100%}
.panneau__aplat{aspect-ratio:5/3;background:var(--vert-mur);display:flex;align-items:flex-end;padding:var(--e4)}
.panneau__aplat .enseigne{color:var(--creme)}
.panneau__corps{padding:var(--e5);flex:1;display:flex;flex-direction:column}
.panneau h3{margin-bottom:var(--e2)}
.panneau p{font-size:var(--t-petit);color:var(--encre-douce);margin-bottom:var(--e4)}
.panneau .lien-fleche{margin-top:auto;font-weight:700;font-size:var(--t-petit);color:var(--vert-foret)}
.panneau:hover .lien-fleche{text-decoration:underline}
.panneau:hover{background:#fff}

/* ---------- 11. Encart conseil ---------- */
.conseil{background:var(--menthe);border-left:4px solid var(--vert-foret);padding:var(--e5)}
.conseil .enseigne{color:var(--vert-foret);display:block;margin-bottom:var(--e3)}
.conseil p:last-child{margin-bottom:0}
.conseil cite{font-style:normal;font-weight:700;display:block;margin-top:var(--e3);font-size:var(--t-petit)}

.duo{display:grid;gap:var(--e6);grid-template-columns:1fr;align-items:center}
@media (min-width:900px){.duo{grid-template-columns:1.05fr .95fr;gap:var(--e8)}
  .duo--photo-droite > :first-child{order:1}}
.duo img{width:100%}

/* ---------- 12. Avertissements réglementaires ---------- */
.avertissement{
  background:var(--ambre-fond);border-left:4px solid var(--moutarde);color:var(--encre);
  padding:var(--e4) var(--e5);font-size:var(--t-petit);
}
.avertissement strong{color:var(--ambre-texte)}
.avertissement p:last-child{margin-bottom:0}

/* ---------- 13. Pied de page ---------- */
.pied{background:var(--vert-profond);color:#dcd4c7;padding-block:var(--e8) var(--e5);margin-top:0}
.pied__grille{display:grid;gap:var(--e6);grid-template-columns:1fr}
@media (min-width:700px){.pied__grille{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.pied__grille{grid-template-columns:1.4fr 1fr 1fr 1.2fr}}
.pied h3{font-size:var(--t-h4);color:var(--creme);margin-bottom:var(--e4)}
.pied .enseigne{color:var(--turquoise);display:block;margin-bottom:var(--e4)}
.pied ul{list-style:none;padding:0;margin:0}
.pied li{margin-bottom:var(--e3)}
.pied a{color:#dcd4c7;text-decoration:none}
.pied a:hover{color:var(--creme);text-decoration:underline}
.pied__logo{height:52px;width:auto;margin-bottom:var(--e4)}
.pied__legal{border-top:1px solid var(--filet-clair);margin-top:var(--e7);padding-top:var(--e5);
  display:flex;flex-wrap:wrap;gap:var(--e3) var(--e5);align-items:center;font-size:var(--t-micro);
  color:#b9c6c0}
.pied__legal .majeur{display:inline-flex;align-items:center;gap:var(--e2);
  border:1px solid var(--moutarde);color:var(--moutarde);padding:3px var(--e3);
  border-radius:var(--r-puce);font-weight:800;letter-spacing:.06em}
.pied__nicotine{background:rgba(217,162,27,.12);border:1px solid rgba(217,162,27,.4);
  padding:var(--e4);margin-top:var(--e5);color:#f0e6d3;font-size:var(--t-micro);line-height:1.55}

/* ---------- 14. Fil d'Ariane ---------- */
.ariane{padding-block:var(--e4);font-size:var(--t-micro);color:var(--encre-douce)}
.ariane ol{list-style:none;display:flex;flex-wrap:wrap;gap:var(--e2);margin:0;padding:0}
.ariane li + li::before{content:"/";margin-right:var(--e2);color:var(--filet-fort)}
.ariane a{color:var(--encre-douce)}

/* ---------- 15. Catalogue : facettes, tri, états ---------- */
.catalogue{display:grid;gap:var(--e6);grid-template-columns:1fr;align-items:start}
@media (min-width:1024px){.catalogue{grid-template-columns:260px 1fr;gap:var(--e8)}}
.facettes{background:var(--papier);border-top:3px solid var(--vert-foret);padding:var(--e5)}
.facettes h2{font-size:var(--t-h4);margin-bottom:var(--e4)}
.facette{border-top:1px solid var(--filet);padding-block:var(--e4)}
.facette:first-of-type{border-top:0;padding-top:0}
.facette legend{font-family:var(--sans);font-size:var(--t-label);font-weight:700;
  letter-spacing:.19em;text-transform:uppercase;color:var(--vert-foret);padding:0;margin-bottom:var(--e3)}
.facette fieldset{border:0;margin:0;padding:0}
.choix{display:flex;align-items:center;gap:var(--e3);padding:var(--e2) 0;cursor:pointer;
  font-size:var(--t-petit);min-height:36px}
.choix input{width:18px;height:18px;accent-color:var(--vert-foret);flex:none;margin:0}
.choix .nb{margin-left:auto;color:var(--encre-douce);font-size:var(--t-micro)}
.barre-outils{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--e3);padding-bottom:var(--e4);margin-bottom:var(--e5);border-bottom:2px solid var(--vert-foret)}
.barre-outils p{margin:0;font-size:var(--t-petit);color:var(--encre-douce)}
.champ{display:inline-flex;align-items:center;gap:var(--e2);font-size:var(--t-petit)}
select,input[type="text"],input[type="email"],input[type="search"],textarea{
  font-family:var(--sans);font-size:16px;padding:10px var(--e3);min-height:44px;
  border:1.5px solid var(--filet-fort);border-radius:var(--r-champ);background:var(--papier);color:var(--encre)}
.etat{padding:var(--e8) var(--e5);text-align:center;background:var(--papier);
  border-top:3px solid var(--filet-fort)}
.etat h3{margin-bottom:var(--e3)}
.etat p{color:var(--encre-douce);margin-inline:auto;max-width:44ch}
.etat--erreur{border-top-color:var(--ambre-texte);background:var(--ambre-fond)}
.squelette{background:var(--papier);border-bottom:3px solid var(--filet-fort);border-left:1px solid var(--filet)}
.squelette__visuel{aspect-ratio:4/3;background:rgba(20,32,28,.09)}
.squelette__ligne{height:12px;margin:var(--e4) var(--e4) 0;background:rgba(20,32,28,.09)}
.squelette__ligne--court{width:52%}
.squelette__ligne--dernier{margin-bottom:var(--e5)}
@media (prefers-reduced-motion:no-preference){
  .squelette__visuel,.squelette__ligne{animation:pulse 1.4s ease-in-out infinite}
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
.apercu-etats{margin-top:var(--e7);padding:var(--e4);border:1px dashed var(--filet-fort);
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--e3);font-size:var(--t-micro)}
.apercu-etats button{min-height:36px;padding:0 var(--e3);background:var(--papier);
  border:1px solid var(--filet-fort);border-radius:var(--r-champ);cursor:pointer;font-size:var(--t-micro);
  font-weight:700}
.apercu-etats button[aria-pressed="true"]{background:var(--vert-foret);color:var(--creme);
  border-color:var(--vert-foret)}

/* ---------- 16. Fiche produit ---------- */
.fiche{display:grid;gap:var(--e6);grid-template-columns:1fr;align-items:start}
@media (min-width:900px){.fiche{grid-template-columns:1.05fr .95fr;gap:var(--e8)}}
.fiche__galerie img{width:100%;aspect-ratio:4/3;object-fit:cover}
.fiche__vignettes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e2);margin-top:var(--e2)}
.fiche__vignettes img{aspect-ratio:1;object-fit:cover}
.fiche h1{font-size:clamp(1.9rem,1.3rem + 2.4vw,3rem);margin-bottom:var(--e3)}
.fiche__prix{display:flex;align-items:baseline;gap:var(--e3);flex-wrap:wrap;
  padding-block:var(--e4);border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);
  margin-bottom:var(--e5)}
.fiche__prix .prix{font-size:clamp(2rem,1.5rem + 1.6vw,2.6rem)}
.variantes{margin-bottom:var(--e5)}
.variantes fieldset{border:0;margin:0 0 var(--e5);padding:0}
.variantes legend{font-family:var(--sans);font-size:var(--t-label);font-weight:700;
  letter-spacing:.19em;text-transform:uppercase;color:var(--vert-foret);padding:0;margin-bottom:var(--e3)}
.jetons{display:flex;flex-wrap:wrap;gap:var(--e2)}
.jeton{position:relative}
.jeton input{position:absolute;opacity:0;width:1px;height:1px}
.jeton span{display:inline-flex;align-items:center;justify-content:center;min-width:60px;min-height:46px;
  padding:0 var(--e4);border:1.5px solid var(--filet-fort);border-radius:var(--r-champ);
  background:var(--papier);font-size:var(--t-petit);font-weight:700;cursor:pointer}
.jeton input:checked + span{border-color:var(--vert-foret);background:var(--vert-foret);color:var(--creme)}
.jeton input:focus-visible + span{outline:3px solid var(--focus);outline-offset:2px}
.jeton input:disabled + span{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.dispo-double{display:grid;gap:0;grid-template-columns:1fr;margin-bottom:var(--e5);
  border:1px solid var(--filet)}
@media (min-width:520px){.dispo-double{grid-template-columns:1fr 1fr}}
.dispo-double > div{padding:var(--e4);background:var(--papier)}
.dispo-double > div + div{border-top:1px solid var(--filet)}
@media (min-width:520px){.dispo-double > div + div{border-top:0;border-left:1px solid var(--filet)}}
.dispo-double .enseigne{color:var(--encre-douce);display:block;margin-bottom:var(--e2)}
.dispo-double .dispo{margin-top:0}
.dispo-double p{margin:var(--e2) 0 0;font-size:var(--t-micro);color:var(--encre-douce)}
.achat{display:flex;flex-wrap:wrap;gap:var(--e3);align-items:center;margin-bottom:var(--e5)}
.achat .bouton{flex:1 1 200px}
.quantite{display:inline-flex;align-items:stretch;border:1.5px solid var(--filet-fort);
  border-radius:var(--r-champ);background:var(--papier)}
.quantite button{width:44px;border:0;background:transparent;cursor:pointer;font-size:1.1rem;font-weight:700}
.quantite input{width:52px;border:0;text-align:center;background:transparent;min-height:44px;
  border-radius:0;padding:0}
.quantite input:focus-visible{outline-offset:-3px}

.onglets{margin-top:var(--e8)}
.onglets__barre{display:flex;flex-wrap:wrap;gap:0;border-bottom:2px solid var(--vert-foret)}
.onglets__barre button{
  padding:var(--e3) var(--e5);min-height:48px;background:transparent;border:0;cursor:pointer;
  font-weight:700;font-size:var(--t-petit);color:var(--encre-douce);border-bottom:3px solid transparent;
  margin-bottom:-2px;
}
.onglets__barre button[aria-selected="true"]{color:var(--vert-foret);border-bottom-color:var(--vert-foret)}
.onglets__panneau{padding-top:var(--e5)}
.onglets__panneau[hidden]{display:none}
.table-compo{width:100%;border-collapse:collapse;font-size:var(--t-petit)}
.table-compo th,.table-compo td{text-align:left;padding:var(--e3) var(--e4);
  border-bottom:1px solid var(--filet)}
.table-compo th{width:44%;font-weight:700;color:var(--encre-douce);font-size:var(--t-micro);
  letter-spacing:.1em;text-transform:uppercase}
.defilant{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- 17. Panier ---------- */
.panier{display:grid;gap:var(--e6);grid-template-columns:1fr;align-items:start}
@media (min-width:1024px){.panier{grid-template-columns:1fr 380px;gap:var(--e8)}}
.ligne-panier{display:grid;grid-template-columns:88px 1fr;gap:var(--e4);padding-block:var(--e5);
  border-bottom:1px solid var(--filet)}
@media (min-width:640px){.ligne-panier{grid-template-columns:110px 1fr auto;align-items:start}}
.ligne-panier__visuel{aspect-ratio:1;background:var(--menthe);display:flex;align-items:center;
  justify-content:center;overflow:hidden}
.ligne-panier__visuel img{width:100%;height:100%;object-fit:cover}
.ligne-panier h3{font-size:var(--t-h4);margin-bottom:var(--e1)}
.ligne-panier .prix{font-size:1.25rem}
.ligne-panier__prix{text-align:left}
@media (min-width:640px){.ligne-panier__prix{text-align:right}}
.retirer{background:none;border:0;padding:var(--e2) 0;color:var(--encre-douce);cursor:pointer;
  font-size:var(--t-micro);text-decoration:underline;min-height:36px}
.livraison-options{margin-top:var(--e7)}
.option-livraison{display:block;border:1.5px solid var(--filet-fort);background:var(--papier);
  padding:var(--e4) var(--e5);margin-bottom:var(--e3);cursor:pointer;border-radius:var(--r-ticket)}
.option-livraison:has(input:checked){border-color:var(--vert-foret);box-shadow:inset 0 0 0 1px var(--vert-foret)}
.option-livraison--drive{border-color:var(--vert-foret);background:var(--menthe)}
.option-livraison__tete{display:flex;align-items:flex-start;gap:var(--e3)}
.option-livraison input{width:20px;height:20px;accent-color:var(--vert-foret);flex:none;margin:2px 0 0}
.option-livraison b{display:block;font-size:var(--t-corps)}
.option-livraison .prix-port{margin-left:auto;font-weight:800;white-space:nowrap}
.option-livraison p{margin:var(--e2) 0 0 33px;font-size:var(--t-micro);color:var(--encre-douce)}
.recap{background:var(--papier);border-top:3px solid var(--vert-foret);padding:var(--e5);
  position:sticky;top:96px}
.recap h2{font-size:var(--t-h3);margin-bottom:var(--e4)}
.recap dl{display:grid;grid-template-columns:1fr auto;gap:var(--e3) var(--e4);margin:0 0 var(--e4)}
.recap dt{font-size:var(--t-petit);color:var(--encre-douce)}
.recap dd{margin:0;text-align:right;font-weight:700;font-size:var(--t-petit)}
.recap__total{border-top:2px solid var(--vert-foret);padding-top:var(--e4);display:flex;
  align-items:baseline;justify-content:space-between;margin-bottom:var(--e5)}
.recap__total .prix{font-size:1.75rem}
.mention-bff{font-size:var(--t-micro);color:var(--encre-douce);margin-top:var(--e4)}

/* ---------- 18. CSE ---------- */
.cse-heros{background:var(--vert-mur);color:var(--creme);padding-block:var(--section)}
.cse-heros h1{color:var(--creme);max-width:18ch;margin-bottom:var(--e5)}
.cse-heros p{color:#e7f0ec;font-size:var(--t-lead);max-width:52ch}
.liste-marquee{list-style:none;padding:0;margin:0}
.liste-marquee li{position:relative;padding-left:var(--e6);margin-bottom:var(--e4)}
.liste-marquee li::before{content:"";position:absolute;left:0;top:.62em;width:14px;height:2px;
  background:var(--moutarde)}
.partenaires{display:flex;flex-wrap:wrap;gap:var(--e3)}
.partenaires span{border:1px solid var(--filet-fort);padding:var(--e2) var(--e4);
  font-size:var(--t-petit);font-weight:600;background:var(--papier)}

/* ---------- 19. Boutique ---------- */
.carte-placeholder{
  position:relative;aspect-ratio:16/10;background:
    repeating-linear-gradient(45deg,#e7e0d3 0 14px,#eee8dd 14px 28px);
  border:1px solid var(--filet-fort);display:flex;align-items:center;justify-content:center;
  text-align:center;padding:var(--e5);
}
.carte-placeholder .enseigne{color:var(--encre-douce)}
.carte-placeholder p{margin:var(--e2) 0 0;font-size:var(--t-petit);color:var(--encre-douce);max-width:34ch}
.horaires{width:100%;border-collapse:collapse}
.horaires th,.horaires td{padding:var(--e3) 0;border-bottom:1px solid var(--filet);
  font-size:var(--t-petit);text-align:left;vertical-align:top}
.horaires th{font-weight:700;width:42%}
.horaires tr[data-aujourdhui] th,.horaires tr[data-aujourdhui] td{color:var(--vert-foret);font-weight:800}
.equipe{display:grid;gap:var(--e6);grid-template-columns:1fr}
@media (min-width:760px){.equipe{grid-template-columns:1fr 1fr;gap:var(--e7)}}
.membre img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:60% 40%}
.membre__aplat{aspect-ratio:3/2;background:var(--vert-foret);display:flex;align-items:center;
  justify-content:center;padding:var(--e5)}
.membre__aplat .initiale{font-family:var(--didone);font-size:4rem;font-weight:900;color:var(--menthe);
  line-height:1}
.membre h3{margin:var(--e4) 0 var(--e1)}
.membre .enseigne{color:var(--encre-douce);display:block;margin-bottom:var(--e3)}
.infos-cles{display:grid;gap:0;grid-template-columns:1fr;border:1px solid var(--filet);background:var(--papier)}
@media (min-width:640px){.infos-cles{grid-template-columns:repeat(3,1fr)}}
.infos-cles > div{padding:var(--e5)}
.infos-cles > div + div{border-top:1px solid var(--filet)}
@media (min-width:640px){.infos-cles > div + div{border-top:0;border-left:1px solid var(--filet)}}
.infos-cles .enseigne{color:var(--vert-foret);display:block;margin-bottom:var(--e2)}
.infos-cles p{margin:0;font-size:var(--t-petit)}

/* ---------- 20. Divers ---------- */
[hidden]{display:none!important}
.enseigne svg{width:15px;height:15px;vertical-align:-2px}
.etiquette__gamme.enseigne{font-size:11px;letter-spacing:.16em}
.membre p{font-size:var(--t-petit)}
.heros__actions .bouton{min-width:200px}
@media (max-width:520px){.heros__actions .bouton{min-width:0;width:100%}}
.panneau__corps h3{font-size:var(--t-h4)}

/* Héros empilé en dessous de 900 px : le texte ne se pose jamais sur la photo,
   la lisibilité ne dépend donc plus du contenu de l'image. */
@media (max-width:899px){
  .heros__texte{position:static;background:var(--vert-profond);padding-block:var(--e6) var(--e7)}
  .heros__voile{display:none}
  .heros__photo{height:clamp(220px,44vw,340px)}
}

/* Bandeau d'étiquette : la teinte encode la famille de goût, comme la couleur
   du bouchon sur les flacons du rayon. Aucun packshot n'est simulé. */
.etiquette__visuel--aplat{
  aspect-ratio:auto;display:flex;align-items:center;justify-content:flex-start;
  gap:var(--e3);padding:var(--e4);min-height:72px;
  border-bottom:1px solid rgba(0,72,56,.18);
}
.etiquette__visuel--aplat .monogramme{
  font-size:1.7rem;opacity:.45;letter-spacing:.01em;line-height:1;
}
.etiquette__visuel--aplat .etiquette__gamme{
  position:static;background:transparent;color:var(--vert-foret);padding:0;margin-left:auto;
}
.etiquette__visuel--aplat[data-fam="fruite"]{background:#d9f2ea}
.etiquette__visuel--aplat[data-fam="frais"]{background:#dfeef3}
.etiquette__visuel--aplat[data-fam="gourmand"]{background:#f6e9cb}
.etiquette__visuel--aplat[data-fam="classic"]{background:#ece1d2}
.etiquette__visuel--aplat[data-fam="sels"]{background:var(--vert-foret)}
.etiquette__visuel--aplat[data-fam="sels"] .monogramme{color:var(--creme);opacity:.6}
.etiquette__visuel--aplat[data-fam="sels"] .etiquette__gamme{color:var(--creme)}
.etiquette__visuel--aplat + .etiquette__corps{padding-top:var(--e3)}
@media (max-width:479px){
  .etiquette__visuel--aplat{padding:var(--e3);min-height:60px}
  .etiquette__visuel--aplat .monogramme{font-size:1.35rem}
}
@media (max-width:759px){
  .tete__bandeau .enveloppe > :nth-child(2){display:none}
}

/* Encart d'informations empilé (colonne étroite) */
.infos-cles--colonne{grid-template-columns:1fr!important}
.infos-cles--colonne > div + div{border-top:1px solid var(--filet)!important;border-left:0!important}
/* Galerie de la fiche : reste au regard pendant la lecture des variantes */
@media (min-width:900px){.fiche__galerie{position:sticky;top:104px}}

/* Les couleurs de lien des sections sombres ne doivent pas reprendre la main sur
   les boutons : à spécificité égale, c'est l'ordre du fichier qui tranchait, et
   « Comment ça marche » ressortait en turquoise sur crème (1,99:1 mesuré). */
.sombre a.bouton,.mur a.bouton,.cse-heros a.bouton,.pied a.bouton{color:var(--creme)}
.sombre a.bouton--clair,.mur a.bouton--clair,.cse-heros a.bouton--clair,
.sombre a.bouton--clair:hover,.mur a.bouton--clair:hover{color:var(--vert-profond)}
.sombre a.bouton--ligne,.mur a.bouton--ligne,.cse-heros a.bouton--ligne{
  color:var(--creme);border-color:var(--creme);background:transparent}
.sombre a.bouton--ligne:hover,.mur a.bouton--ligne:hover,.cse-heros a.bouton--ligne:hover{
  color:var(--vert-profond);background:var(--creme)}