/* =========================================================================
   CAP ALCOOL — Feuille de style principale
   Livraison nocturne de boissons — Capbreton, Landes (40)
   ========================================================================= */

/* ---------------------------------------------------------------- TOKENS */
:root{
  color-scheme: dark;
  /* Encres */
  --ink:        #05070C;
  --ink-2:      #0A0E17;
  --ink-3:      #111722;
  --night:      #0C1B2C;
  --ocean:      #10344C;
  --ocean-lite: #1B5375;

  /* Lumières — orange repris du logo Cap Alcool (#FDB030, echantillonne
     sur le croissant de lune et le liquide de la bouteille). */
  --amber:      #FDB030;
  --amber-hot:  #FFC862;
  --amber-deep: #C9860F;

  /* Autres couleurs de la marque, disponibles pour les declinaisons */
  --marque-cyan:  #01C3D4;
  --marque-navy:  #06275B;
  --bone:       #F1EBDE;
  --bone-dim:   #CFC7B7;
  --mist:       #8E9AAB;
  --tail:       #E4442E;

  /* Sémantique */
  --bg:         var(--ink);
  --fg:         var(--bone);
  --muted:      var(--mist);
  --accent:     var(--amber);
  --line:       rgba(241,235,222,.14);
  --line-soft:  rgba(241,235,222,.07);

  /* Typo */
  --display: 'Anton', 'Arial Narrow', 'Haettenschweiler', Impact, sans-serif;
  --sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono:    ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Menlo, Consolas, monospace;

  /* Échelle fluide */
  --step--2: clamp(.69rem, .67rem + .10vw, .75rem);
  --step--1: clamp(.80rem, .76rem + .18vw, .92rem);
  --step-0:  clamp(.95rem, .90rem + .25vw, 1.10rem);
  --step-1:  clamp(1.15rem, 1.05rem + .48vw, 1.50rem);
  --step-2:  clamp(1.45rem, 1.24rem + 1.02vw, 2.20rem);
  --step-3:  clamp(2.00rem, 1.70rem + 1.10vw, 3.00rem);
  --step-4:  clamp(2.80rem, 2.20rem + 2.10vw, 4.00rem);
  --step-5:  clamp(3.60rem, 2.60rem + 3.20vw, 6.00rem);
  --step-6:  clamp(4.20rem, 2.50rem + 6.00vw, 12.0rem);

  /* Rythme */
  --gutter:  clamp(1.15rem, .70rem + 2.2vw, 3.25rem);
  --section: clamp(4.5rem, 2.5rem + 8vw, 11rem);
  --radius:  2px;
  --radius-lg: 6px;

  /* Mouvement */
  --ease:      cubic-bezier(.22,1,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur:  .6s;
  --dur-l: 1.1s;

  --nav-h: 76px;
}

/* ----------------------------------------------------------------- RESET */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 1rem);
  /* clip plutot que hidden : ne cree pas de conteneur de defilement, donc
     position:sticky (barre de filtres du catalogue) continue de fonctionner. */
  overflow-x:clip;
}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:var(--step-0);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}
body.is-locked{ overflow:hidden; }
img,svg,video,canvas{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,figure,blockquote{ margin:0; }
input,select,textarea{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; border-radius:2px; }
::selection{ background:var(--amber); color:var(--ink); }

/* --------------------------------------------------------------- TYPO UI */
/* ---------------------------------------------------------------------------
   Capitales accentuees et interlignage
   Anton place l'accent d'un È/Ê/É a ~1,27 em au-dessus de la ligne de base,
   alors que la capitale nue culmine a ~0,99 em. Sous line-height 1,27 environ,
   l'accent d'une ligne vient se peindre DANS les lettres de la ligne du dessus
   et devient invisible — un piege classique sur un site francophone.
   Parti pris : on garde un interlignage serre (.93) pour l'impact, et on place
   les capitales accentuees sur la premiere ligne des titres. Les blocs dont le
   retour a la ligne n'est pas maitrisable recoivent .display--airy.

   L'interlettrage negatif ci-dessous ne vaut que pour ces grands corps. En
   dessous de ~1,5 rem il ferme les mots : voir le bloc INTERLETTRAGE en fin de
   feuille, qui l'inverse pour les petits titres.
   --------------------------------------------------------------------------- */
.display{
  font-family:var(--display);
  font-weight:400;
  text-transform:uppercase;
  line-height:.93;
  letter-spacing:-.015em;
  font-feature-settings:'kern' 1;
}
.display--airy{ line-height:1.28; }
.d-1{ font-size:var(--step-3); }
.d-2{ font-size:var(--step-4); }
.d-3{ font-size:var(--step-5); }
.d-4{ font-size:var(--step-6); }

.outline{
  color:transparent;
  -webkit-text-stroke:1.5px var(--bone);
  paint-order:stroke fill;
}
.outline-amber{ color:transparent; -webkit-text-stroke:1.5px var(--amber); }
.amber{ color:var(--amber); }
.ocean{ color:var(--ocean-lite); }

.eyebrow{
  font-family:var(--mono);
  font-size:var(--step--2);
  text-transform:uppercase;
  letter-spacing:.22em;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:.7em;
}
.eyebrow::before{
  content:'';
  width:1.8em; height:1px;
  background:var(--amber);
  flex:none;
}
.eyebrow--plain::before{ display:none; }

.lede{
  font-size:var(--step-1);
  line-height:1.45;
  color:var(--bone-dim);
  max-width:44ch;
  font-weight:300;
}
.muted{ color:var(--muted); }
.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* -------------------------------------------------------------- LAYOUT */
.shell{
  width:100%;
  max-width:1560px;
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.shell--narrow{ max-width:1080px; }
section{ position:relative; }
.section{ padding-block:var(--section); }
.section--tight{ padding-block:calc(var(--section) * .55); }
.rule{ height:1px; background:var(--line-soft); border:0; margin:0; }

.grid{ display:grid; gap:var(--gutter); }
.g-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.g-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.g-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.g-12{ grid-template-columns:repeat(12,minmax(0,1fr)); }
@media (max-width:1000px){
  .g-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .g-3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px){
  .g-4,.g-3,.g-2{ grid-template-columns:minmax(0,1fr); }
}

/* --------------------------------------------------------- GRAIN & VOILE */
.grain{
  position:fixed; inset:-60%;
  z-index:9000;
  pointer-events:none;
  opacity:.30;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  animation:grain 5s steps(6) infinite;
}
/* Le grain anime est un tres grand calque en mix-blend-mode : sur mobile son
   repaint permanent coute cher (batterie, INP). On fige le grain sur les
   pointeurs grossiers, l'effet reste present sans animation. */
@media (hover:none),(pointer:coarse){
  .grain{ animation:none; }
}
@keyframes grain{
  0%,100%{ transform:translate(0,0); }
  10%{ transform:translate(-4%,-3%); }
  20%{ transform:translate(-9%,2%); }
  30%{ transform:translate(4%,-8%); }
  40%{ transform:translate(-3%,9%); }
  50%{ transform:translate(-6%,4%); }
  60%{ transform:translate(7%,0); }
  70%{ transform:translate(0,7%); }
  80%{ transform:translate(3%,-4%); }
  90%{ transform:translate(-2%,-6%); }
}
.vignette{
  position:fixed; inset:0; z-index:8999; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%, transparent 45%, rgba(0,0,0,.55) 100%);
}

/* --------------------------------------------------------- CURSEUR CUSTOM */
.cursor,.cursor-dot{
  position:fixed; top:0; left:0; z-index:9500;
  pointer-events:none;
  border-radius:50%;
  mix-blend-mode:difference;
  will-change:transform;
}
.cursor{
  width:34px; height:34px;
  border:1px solid var(--bone);
  transform:translate(-50%,-50%);
  transition:width .3s var(--ease), height .3s var(--ease), background .3s var(--ease), opacity .3s;
}
.cursor-dot{
  width:5px; height:5px;
  background:var(--bone);
  transform:translate(-50%,-50%);
}
.cursor.is-hot{ width:64px; height:64px; background:rgba(241,235,222,.9); border-color:transparent; }
@media (hover:none),(pointer:coarse){ .cursor,.cursor-dot{ display:none; } }

/* ------------------------------------------------------------- PRELOADER */
.preloader{
  position:fixed; inset:0; z-index:9800;
  background:var(--ink);
  display:grid; place-items:center;
  transition:opacity .7s var(--ease), visibility .7s;
}
.preloader.is-done{ opacity:0; visibility:hidden; }
.preloader__inner{ text-align:center; padding:var(--gutter); }
.preloader__mark{
  font-family:var(--display); text-transform:uppercase;
  font-size:var(--step-3); line-height:.9; letter-spacing:-.02em;
  color:var(--bone);
}
.preloader__mark span{ color:var(--amber); }
.preloader__bar{
  margin-top:1.6rem; height:2px; width:min(340px,60vw);
  background:var(--line); position:relative; overflow:hidden;
}
.preloader__bar i{
  position:absolute; inset:0 auto 0 0; width:0%;
  background:var(--amber);
  transition:width .25s linear;
}
.preloader__pct{
  margin-top:.85rem; font-family:var(--mono);
  font-size:var(--step--2); letter-spacing:.2em; color:var(--muted);
}

/* -------------------------------------------------------------- AGE GATE */
.agegate{
  position:fixed; inset:0; z-index:9700;
  background:
    linear-gradient(180deg, rgba(5,7,12,.94), rgba(5,7,12,.98)),
    radial-gradient(70% 60% at 50% 0%, rgba(245,165,36,.18), transparent 70%);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  display:grid; place-items:center;
  padding:var(--gutter);
  transition:opacity .55s var(--ease), visibility .55s;
}
.agegate[hidden]{ display:none; }
.agegate.is-out{ opacity:0; visibility:hidden; }
.agegate__card{
  width:min(560px,100%);
  border:1px solid var(--line);
  background:linear-gradient(160deg, rgba(16,52,76,.35), rgba(10,14,23,.85));
  padding:clamp(1.75rem,1rem + 3vw,3.25rem);
  text-align:center;
  position:relative;
}
.agegate__card::before,
.agegate__card::after{
  content:''; position:absolute; width:14px; height:14px;
  border:1px solid var(--amber);
}
.agegate__card::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.agegate__card::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; }
.agegate__mark{ font-family:var(--mono); font-size:var(--step--2); letter-spacing:.3em; color:var(--amber); text-transform:uppercase; }
.agegate__title{ font-family:var(--display); text-transform:uppercase; font-size:var(--step-3); line-height:.9; margin-block:1.1rem .9rem; }
.agegate__text{ color:var(--muted); font-size:var(--step--1); max-width:42ch; margin-inline:auto; }
.agegate__actions{ display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; margin-top:1.9rem; }
.agegate__deny{ font-size:var(--step--1); color:var(--muted); text-decoration:underline; text-underline-offset:4px; }
.agegate__legal{ margin-top:1.6rem; font-size:var(--step--2); color:rgba(142,154,171,.75); line-height:1.5; }

/* --------------------------------------------------------------- BOUTONS */
.btn{
  --btn-bg:var(--amber);
  --btn-fg:var(--ink);
  position:relative;
  display:inline-flex; align-items:center; gap:.7em;
  padding:1.05em 1.9em;
  font-family:var(--mono);
  font-size:var(--step--1);
  text-transform:uppercase;
  letter-spacing:.12em;
  background:var(--btn-bg);
  color:var(--btn-fg);
  border:1px solid var(--btn-bg);
  overflow:hidden;
  isolation:isolate;
  transition:color .4s var(--ease), border-color .4s var(--ease);
  white-space:nowrap;
}
.btn::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--bone);
  transform:translateY(101%);
  transition:transform .5s var(--ease);
}
.btn:hover::before,.btn:focus-visible::before{ transform:translateY(0); }
.btn svg{ width:1.05em; height:1.05em; flex:none; transition:transform .45s var(--ease); }
.btn:hover svg{ transform:translateX(4px); }

.btn--ghost{
  --btn-bg:transparent;
  --btn-fg:var(--bone);
  border-color:var(--line);
}
.btn--ghost::before{ background:var(--amber); }
.btn--ghost:hover{ color:var(--ink); border-color:var(--amber); }

.btn--lg{ padding:1.25em 2.4em; font-size:var(--step-0); letter-spacing:.1em; }
.btn--block{ display:flex; width:100%; justify-content:center; }

/* Lien souligne anime */
.ulink{
  position:relative; display:inline-block;
  padding-bottom:2px;
}
.ulink::after{
  content:''; position:absolute; left:0; bottom:0;
  width:100%; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.ulink:hover::after{ transform:scaleX(1); transform-origin:left; }

/* ------------------------------------------------------------ NAVIGATION */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:900;
  height:var(--nav-h);
  display:flex; align-items:center;
  transition:background .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(5,7,12,.82);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line-soft);
}
.nav.is-hidden{ transform:translateY(-100%); }
.nav__inner{
  width:100%; max-width:1560px; margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.brand{ display:flex; align-items:center; gap:.6rem; flex:none; }
.brand__logo{ width:auto; height:clamp(46px, 4.0vw, 76px); flex:none; }
.brand__txt{
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(1.35rem, 1.9vw, 1.85rem); letter-spacing:-.01em; line-height:1;
}
.brand__txt span{ color:var(--amber); }

.nav__links{ display:flex; align-items:center; gap:clamp(1rem,2vw,2.25rem); }
.nav__links a{
  font-family:var(--mono); font-size:var(--step--2);
  text-transform:uppercase; letter-spacing:.16em; color:var(--bone-dim);
  transition:color .3s var(--ease);
}
.nav__links a:hover,.nav__links a[aria-current="page"]{ color:var(--amber); }
.nav__right{ display:flex; align-items:center; gap:1rem; flex:none; }
.nav__tel{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--mono); font-size:var(--step--2);
  letter-spacing:.1em; padding:.7em 1.1em;
  border:1px solid var(--line);
  transition:border-color .35s var(--ease), color .35s var(--ease), background .35s var(--ease);
}
.nav__tel:hover{ border-color:var(--amber); color:var(--amber); }
.nav__burger{
  display:none; width:42px; height:42px;
  border:1px solid var(--line);
  place-items:center;
}
.nav__burger i{
  display:block; width:17px; height:1px; background:var(--bone);
  position:relative; transition:background .3s;
}
.nav__burger i::before,.nav__burger i::after{
  content:''; position:absolute; left:0; width:17px; height:1px; background:var(--bone);
  transition:transform .4s var(--ease);
}
.nav__burger i::before{ top:-5px; }
.nav__burger i::after{ top:5px; }
body.menu-open .nav__burger i{ background:transparent; }
body.menu-open .nav__burger i::before{ transform:translateY(5px) rotate(45deg); }
body.menu-open .nav__burger i::after{ transform:translateY(-5px) rotate(-45deg); }

@media (max-width:1080px){
  .nav__links{ display:none; }
  .nav__burger{ display:grid; }
  .nav__tel span{ display:none; }
}

/* Menu plein ecran mobile */
.menu{
  position:fixed; inset:0; z-index:890;
  background:var(--ink-2);
  padding:calc(var(--nav-h) + 2rem) var(--gutter) 2rem;
  display:flex; flex-direction:column; justify-content:space-between;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .8s var(--ease);
  visibility:hidden;
}
body.menu-open .menu{ clip-path:inset(0 0 0 0); visibility:visible; }
.menu__list a{
  display:block;
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(2.2rem,10vw,4rem); line-height:1.05;
  padding-block:.15em;
  border-bottom:1px solid var(--line-soft);
  transform:translateY(30px); opacity:0;
  transition:transform .7s var(--ease), opacity .7s var(--ease), color .3s;
}
body.menu-open .menu__list a{ transform:none; opacity:1; }
.menu__list li:nth-child(1) a{ transition-delay:.10s; }
.menu__list li:nth-child(2) a{ transition-delay:.16s; }
.menu__list li:nth-child(3) a{ transition-delay:.22s; }
.menu__list li:nth-child(4) a{ transition-delay:.28s; }
.menu__list li:nth-child(5) a{ transition-delay:.34s; }
.menu__list a:hover{ color:var(--amber); }
.menu__foot{ display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between; align-items:flex-end; color:var(--muted); font-size:var(--step--1); }

/* --------------------------------------------------------------- MARQUEE */
.marquee{
  --speed:34s;
  position:relative;
  display:flex; overflow:hidden;
  border-block:1px solid var(--line-soft);
  background:var(--ink-2);
  padding-block:.85rem;
  user-select:none;
}
.marquee--amber{ background:var(--amber); color:var(--ink); border-color:transparent; }
.marquee--ocean{ background:var(--ocean); color:var(--bone); border-color:transparent; }
.marquee__track{
  display:flex; flex:none; gap:2.5rem; padding-right:2.5rem;
  align-items:center;
  animation:slide var(--speed) linear infinite;
  will-change:transform;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee--rev .marquee__track{ animation-direction:reverse; }
.marquee__item{
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(1.05rem,1.4vw,1.5rem); line-height:1;
  letter-spacing:-.005em;
  display:flex; align-items:center; gap:2.5rem;
  white-space:nowrap;
}
.marquee__item::after{
  content:''; width:.42em; height:.42em; border-radius:50%;
  background:currentColor; opacity:.55; flex:none;
}
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-100%); } }

/* ============================================================ HERO */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-top:calc(var(--nav-h) + 2rem);
  padding-bottom:clamp(1.5rem,3vw,3rem);
  overflow:hidden;
  isolation:isolate;
}
.hero__bg{
  position:absolute; inset:0; z-index:-2;
  overflow:hidden;
}
.hero__bg img,.hero__bg .artwork{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.08);
  will-change:transform;
}
.hero__bg::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(5,7,12,.72) 0%, rgba(5,7,12,.35) 35%, rgba(5,7,12,.88) 82%, var(--ink) 100%),
    radial-gradient(80% 60% at 20% 15%, rgba(245,165,36,.16), transparent 60%);
}
/* Le titre doit rester spectaculaire sans chasser le bloc CTA hors de
   l'ecran : on plafonne sur la hauteur autant que sur la largeur.        */
.hero__title{
  font-size:clamp(2.6rem, min(6.6vw, 9.2vh), 6.4rem);
  max-width:15ch;
  /* .86 fait entrer l'accent de « ARRÊTE » dans la ligne du dessus. */
  line-height:.95;
}
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line > span{ display:block; }
.hero__bottom{
  margin-top:clamp(1.75rem,4vw,3.25rem);
  display:flex; flex-wrap:wrap; gap:1.5rem 2.5rem;
  align-items:flex-end; justify-content:space-between;
}
.hero__pitch{ max-width:38ch; color:var(--bone-dim); font-size:var(--step-0); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.75rem; }
.hero__scroll{
  position:absolute; left:var(--gutter); bottom:1.25rem;
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--mono); font-size:var(--step--2);
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}
.hero__scroll i{
  width:1px; height:34px; background:linear-gradient(var(--amber),transparent);
  animation:drop 1.9s var(--ease-in-out) infinite;
}
@keyframes drop{ 0%{ transform:scaleY(0); transform-origin:top; } 50%{ transform:scaleY(1); transform-origin:top; } 51%{ transform:scaleY(1); transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }

/* Pastille statut live */
.status{
  display:inline-flex; align-items:center; gap:.65rem;
  padding:.55em 1.05em;
  border:1px solid var(--line);
  background:rgba(5,7,12,.55);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  font-family:var(--mono); font-size:var(--step--2);
  letter-spacing:.13em; text-transform:uppercase;
  white-space:nowrap;
}
.status__dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--muted); flex:none;
  position:relative;
}
.status.is-open .status__dot{ background:#5BD98A; }
.status.is-open .status__dot::after{
  content:''; position:absolute; inset:-4px; border-radius:50%;
  border:1px solid #5BD98A; animation:ping 1.8s var(--ease-out) infinite;
}
.status.is-soon .status__dot{ background:var(--amber); }
.status.is-closed .status__dot{ background:var(--tail); }
@keyframes ping{ 0%{ transform:scale(.6); opacity:1; } 100%{ transform:scale(1.9); opacity:0; } }
.status__label{ color:var(--bone); }
.status__sub{ color:var(--muted); }

/* ======================================================== MANIFESTE */
.manifesto__text{
  font-family:var(--display);
  text-transform:uppercase;
  font-size:var(--step-3);
  line-height:1.02;
  letter-spacing:-.012em;
  max-width:22ch;
}
.manifesto__text em{ font-style:normal; color:var(--amber); }
.manifesto__text .dim{ color:rgba(241,235,222,.28); }

/* ======================================================= PILIERS 4 COL */
.pillar{
  padding:clamp(1.4rem,2vw,2.1rem) 0;
  border-top:1px solid var(--line-soft);
  display:flex; flex-direction:column; gap:.7rem;
}
.pillar__n{ font-family:var(--mono); font-size:var(--step--2); color:var(--amber); letter-spacing:.2em; }
.pillar__t{
  font-family:var(--display); text-transform:uppercase;
  font-size:var(--step-1); line-height:1; letter-spacing:-.01em;
}
.pillar__d{ color:var(--muted); font-size:var(--step--1); line-height:1.55; }

/* ==================================================== CARROUSEL PRODUIT */
.carousel{ position:relative; padding-block:clamp(2rem,4vw,4rem); }
.carousel__meta{
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:var(--step--2);
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
  padding-bottom:1.5rem;
}
.carousel__index{ display:flex; gap:.9rem; }
.carousel__index button{
  color:rgba(142,154,171,.45);
  font-family:var(--mono); letter-spacing:.1em;
  transition:color .3s var(--ease);
  padding:.6rem .5rem;
  min-width:2.4rem; min-height:2.4rem;
}
.carousel__index button[aria-selected="true"]{ color:var(--amber); }
.carousel__stage{
  position:relative;
  min-height:clamp(320px,52vh,560px);
  display:grid;
  place-items:center;
}
.slide{
  grid-area:1 / 1;
  display:flex; flex-direction:column; align-items:center; gap:1.25rem;
  opacity:0; visibility:hidden;
  transform:translateY(24px) scale(.97);
  transition:opacity .7s var(--ease), transform .7s var(--ease), visibility .7s;
  text-align:center;
}
.slide.is-active{ opacity:1; visibility:visible; transform:none; }
.slide__art{
  width:clamp(160px,22vw,280px);
  aspect-ratio:1/1.9;
  position:relative;
}
.slide__name{
  font-family:var(--display); text-transform:uppercase;
  font-size:var(--step-2); line-height:.95;
}
.slide__price{ font-family:var(--mono); color:var(--amber); font-size:var(--step-0); letter-spacing:.08em; }
.carousel__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:54px; height:54px; border:1px solid var(--line);
  display:grid; place-items:center; border-radius:50%;
  transition:border-color .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
  z-index:2;
}
.carousel__nav:hover{ border-color:var(--amber); background:var(--amber); color:var(--ink); }
.carousel__nav--prev{ left:0; }
.carousel__nav--next{ right:0; }
@media (max-width:640px){ .carousel__nav{ width:44px; height:44px; } }

/* Halo derriere la bouteille */
.halo{
  position:absolute; inset:-25% -35%;
  background:radial-gradient(50% 50% at 50% 50%, var(--halo,rgba(245,165,36,.30)), transparent 70%);
  filter:blur(28px);
  z-index:-1;
}

/* ======================================================= CATEGORIES */
.cats{ display:grid; gap:1px; background:var(--line-soft); border-block:1px solid var(--line-soft); }
.cat{
  position:relative;
  background:var(--ink);
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  align-items:center; gap:clamp(1rem,3vw,2.5rem);
  padding:clamp(1.35rem,2.6vw,2.4rem) 0;
  overflow:hidden;
  transition:background .5s var(--ease), padding-inline .5s var(--ease);
}
.cat:hover{ background:var(--ink-3); padding-inline:clamp(.6rem,1.6vw,1.6rem); }
.cat__n{ font-family:var(--mono); font-size:var(--step--2); color:var(--amber); letter-spacing:.2em; }
.cat__name{
  font-family:var(--display); text-transform:uppercase;
  font-size:var(--step-3); line-height:.9; letter-spacing:-.015em;
  transition:color .45s var(--ease), transform .55s var(--ease);
}
.cat:hover .cat__name{ color:var(--cat,var(--amber)); transform:translateX(10px); }
.cat__meta{ font-family:var(--mono); font-size:var(--step--2); color:var(--muted); letter-spacing:.14em; text-align:right; white-space:nowrap; }
.cat__arrow{
  width:46px; height:46px; border-radius:50%; border:1px solid var(--line);
  display:grid; place-items:center; flex:none;
  transition:background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease);
}
.cat:hover .cat__arrow{ background:var(--amber); color:var(--ink); border-color:var(--amber); transform:rotate(-45deg); }
@media (max-width:760px){
  .cat{ grid-template-columns:auto 1fr auto; }
  .cat__meta{ grid-column:2 / -1; text-align:left; }
}

/* ========================================================= CATALOGUE */
.cat-toolbar{
  position:sticky; top:var(--nav-h); z-index:80;
  background:rgba(5,7,12,.88);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
  padding-block:.9rem;
}
.cat-toolbar__inner{ display:flex; gap:1rem; align-items:center; flex-wrap:wrap; justify-content:space-between; }
.chips{ display:flex; gap:.45rem; flex-wrap:wrap; }
.chip{
  font-family:var(--mono); font-size:var(--step--2);
  text-transform:uppercase; letter-spacing:.12em;
  padding:.55em 1em; border:1px solid var(--line);
  color:var(--bone-dim);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  white-space:nowrap;
}
.chip:hover{ border-color:var(--bone-dim); }
.chip[aria-pressed="true"]{ background:var(--amber); color:var(--ink); border-color:var(--amber); }
.search{
  display:flex; align-items:center; gap:.6rem;
  border:1px solid var(--line); padding:.55em .95em;
  min-width:min(280px,100%);
}
.search input{
  background:none; border:0; outline:none; width:100%;
  font-family:var(--mono); font-size:var(--step--2); letter-spacing:.08em;
}
.search input::placeholder{ color:rgba(142,154,171,.6); text-transform:uppercase; }
.search svg{ width:15px; height:15px; color:var(--muted); flex:none; }

.famille{ padding-block:clamp(1.6rem,2.6vw,2.4rem); border-bottom:1px solid var(--line-soft); }
.famille[hidden]{ display:none; }
.famille__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap; margin-bottom:clamp(.9rem,1.6vw,1.4rem);
}
.famille__title{
  font-family:var(--display); text-transform:uppercase;
  font-size:var(--step-3); line-height:.9; letter-spacing:-.015em;
  color:var(--fam,var(--bone));
}
.famille__base{ color:var(--muted); font-size:var(--step--1); max-width:34ch; }

/* La grille .produits et les cartes .pcard sont definies dans le bloc
   « CARTES PRODUIT » en fin de feuille. */

.cat-empty{ padding-block:5rem; text-align:center; color:var(--muted); }
.cat-empty[hidden]{ display:none; }

/* ==================================================== PANIER / COMMANDE */
.panier{
  position:fixed; right:var(--gutter); bottom:var(--gutter); z-index:880;
  width:min(420px, calc(100vw - var(--gutter) * 2));
  background:var(--ink-2);
  border:1px solid var(--line);
  box-shadow:0 24px 70px rgba(0,0,0,.6);
  transform:translateY(calc(100% + var(--gutter) + 20px));
  transition:transform .65s var(--ease);
}
.panier.is-up{ transform:none; }
.panier__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.25rem; border-bottom:1px solid var(--line-soft);
  font-family:var(--mono); font-size:var(--step--2); letter-spacing:.18em; text-transform:uppercase;
}
.panier__count{ color:var(--amber); }
.panier__list{ max-height:min(38vh,320px); overflow-y:auto; padding:.5rem 1.25rem; }
.panier__row{
  display:flex; align-items:center; gap:.75rem;
  padding-block:.6rem; border-bottom:1px solid var(--line-soft);
  font-size:var(--step--1);
}
.panier__row:last-child{ border-bottom:0; }
.panier__row b{ font-weight:500; }
.panier__row small{ color:var(--muted); font-family:var(--mono); font-size:var(--step--2); }
.panier__qty{ margin-left:auto; display:flex; align-items:center; gap:.6rem; font-family:var(--mono); }
.panier__qty button{ width:32px; height:32px; border:1px solid var(--line); display:grid; place-items:center; line-height:1; font-size:1rem; }
.panier__qty button:hover{ border-color:var(--amber); color:var(--amber); }
.panier__foot{ padding:1rem 1.25rem 1.25rem; border-top:1px solid var(--line-soft); }
.panier__total{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--display); text-transform:uppercase; font-size:var(--step-1);
  margin-bottom:.9rem;
}
.panier__total b{ color:var(--amber); font-weight:400; }
.panier__note{ font-size:var(--step--2); color:var(--muted); margin-top:.7rem; line-height:1.5; }

/* ======================================================== POURQUOI 01/02 */
.why{ border-top:1px solid var(--line-soft); }
.why__row{
  display:grid; grid-template-columns:auto minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(1rem,3vw,3rem);
  padding-block:clamp(1.8rem,3.5vw,3rem);
  border-bottom:1px solid var(--line-soft);
  align-items:start;
}
.why__n{ font-family:var(--mono); font-size:var(--step--1); color:var(--amber); letter-spacing:.2em; padding-top:.4em; }
.why__t{ font-family:var(--display); text-transform:uppercase; font-size:var(--step-2); line-height:.95; letter-spacing:-.015em; }
.why__d{ color:var(--muted); font-size:var(--step-0); line-height:1.6; max-width:52ch; }
@media (max-width:860px){ .why__row{ grid-template-columns:auto 1fr; } .why__d{ grid-column:2; } }

/* ============================================================== ZONE */
.zone{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(2rem,5vw,5rem); align-items:center; }
@media (max-width:900px){ .zone{ grid-template-columns:minmax(0,1fr); } }
.zone__list{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.75rem; }
.zone__tag{
  font-family:var(--mono); font-size:var(--step--2);
  letter-spacing:.12em; text-transform:uppercase;
  padding:.5em .95em; border:1px solid var(--line); color:var(--bone-dim);
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.zone__tag:hover{ border-color:var(--amber); color:var(--amber); }
.zone__map{ position:relative; }
.zone__map svg{ width:100%; height:auto; }
.zone__warn{
  margin-top:1.5rem; padding:1rem 1.15rem;
  border-left:2px solid var(--tail);
  background:rgba(228,68,46,.07);
  font-size:var(--step--1); color:var(--bone-dim);
}

/* ========================================================== HORAIRES */
.horaires{ display:grid; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
.horaire{
  background:var(--ink);
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:clamp(.85rem,1.6vw,1.25rem) clamp(1rem,2vw,1.6rem);
  transition:background .35s var(--ease);
}
.horaire__j{ font-family:var(--display); text-transform:uppercase; font-size:var(--step-1); line-height:1; }
.horaire__h{ font-family:var(--mono); font-size:var(--step--1); color:var(--bone-dim); letter-spacing:.1em; }
.horaire.is-today{ background:linear-gradient(90deg, rgba(245,165,36,.12), transparent); }
.horaire.is-today .horaire__j{ color:var(--amber); }
.horaire.is-today .horaire__h{ color:var(--amber); }

/* =============================================================== FAQ */
.faq__item{ border-bottom:1px solid var(--line-soft); }
.faq__q{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; text-align:left;
  padding-block:clamp(1.1rem,2vw,1.6rem);
  font-family:var(--display); text-transform:uppercase;
  font-size:var(--step-1); line-height:1.05; letter-spacing:-.005em;
  transition:color .3s var(--ease);
}
.faq__q:hover{ color:var(--amber); }
.faq__sign{ position:relative; width:16px; height:16px; flex:none; }
.faq__sign::before,.faq__sign::after{
  content:''; position:absolute; inset:50% 0 auto 0; height:1px; background:currentColor;
  transition:transform .45s var(--ease);
}
.faq__sign::after{ transform:rotate(90deg); }
.faq__item.is-open .faq__sign::after{ transform:rotate(0); }
.faq__a{
  overflow:hidden; height:0;
  visibility:hidden;
  transition:height .5s var(--ease), visibility .5s var(--ease);
}
/* Replie : visibility:hidden retire le contenu de l'ordre de tabulation et de
   l'arbre d'accessibilite (liens de reponse non focusables tant que ferme). */
.faq__item.is-open .faq__a{ visibility:visible; }
.faq__a p{ padding-bottom:1.5rem; color:var(--muted); max-width:64ch; line-height:1.65; }

/* ============================================================ CTA FINAL */
.cta{
  position:relative; overflow:hidden;
  text-align:center;
  padding-block:clamp(5rem,11vw,10rem);
  border-top:1px solid var(--line-soft);
}
.cta::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(60% 70% at 50% 100%, rgba(245,165,36,.18), transparent 70%);
}
.cta__title{ font-size:var(--step-4); max-width:16ch; margin-inline:auto; }
.cta__tel{
  display:inline-block; margin-top:1.5rem;
  font-family:var(--display); font-size:var(--step-3);
  color:var(--amber); letter-spacing:.01em; line-height:1;
  transition:transform .5s var(--ease);
}
.cta__tel:hover{ transform:scale(1.03); }

/* ============================================================== FOOTER */
.footer{ background:var(--ink-2); border-top:1px solid var(--line-soft); padding-top:clamp(3rem,6vw,5rem); }
.footer__grid{
  display:grid; grid-template-columns:1.4fr repeat(3,minmax(0,1fr));
  gap:clamp(1.75rem,4vw,3.5rem);
  padding-bottom:clamp(2.5rem,5vw,4rem);
}
@media (max-width:900px){ .footer__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .footer__grid{ grid-template-columns:minmax(0,1fr); } }
.footer__h{
  font-family:var(--mono); font-size:var(--step--2);
  letter-spacing:.2em; text-transform:uppercase; color:var(--amber);
  margin-bottom:1.1rem;
}
.footer__list li{ margin-bottom:.55rem; }
.footer__list a,.footer__list span{ color:var(--bone-dim); font-size:var(--step--1); }
.footer__list a:hover{ color:var(--amber); }
.footer__word{
  font-family:var(--display); text-transform:uppercase;
  font-size:var(--step-6); line-height:.78; letter-spacing:-.03em;
  color:rgba(241,235,222,.055);
  text-align:center;
  padding-bottom:.05em;
  user-select:none;
  overflow:hidden;
}
.footer__bar{
  border-top:1px solid var(--line-soft);
  padding-block:1.35rem;
  display:flex; flex-wrap:wrap; gap:.75rem 1.75rem;
  justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:var(--step--2);
  letter-spacing:.1em; color:var(--muted);
}
.footer__bar a:hover{ color:var(--amber); }

/* Bandeau prevention */
.prevent{
  background:var(--ink-3);
  border-top:1px solid var(--line-soft);
  padding-block:1.1rem;
  text-align:center;
  font-size:var(--step--2);
  color:var(--muted);
  letter-spacing:.04em;
  line-height:1.6;
}
.prevent strong{ color:var(--bone-dim); font-weight:500; }

/* Bouton appel flottant mobile */
.callfab{
  position:fixed; left:var(--gutter); bottom:var(--gutter); z-index:870;
  display:none; align-items:center; gap:.6rem;
  padding:.95em 1.4em; background:var(--amber); color:var(--ink);
  font-family:var(--mono); font-size:var(--step--2);
  letter-spacing:.12em; text-transform:uppercase;
  box-shadow:0 14px 40px rgba(245,165,36,.25);
}
@media (max-width:760px){
  .callfab{ display:inline-flex; }
  /* Degager le bouton d'appel flottant, qui recouvrait le CTA du hero. */
  .hero{ padding-bottom:calc(var(--gutter) + 4.75rem); }
  .hero__scroll{ display:none; }
  .cta{ padding-bottom:calc(var(--section) + 3rem); }
}

/* ====================================================== PAGE INTERIEURE */
.pagehead{
  padding-top:calc(var(--nav-h) + clamp(3rem,8vw,7rem));
  padding-bottom:clamp(2rem,5vw,4rem);
  position:relative; overflow:hidden;
}
.pagehead::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(70% 90% at 15% 0%, rgba(16,52,76,.55), transparent 65%);
}
.pagehead__title{ font-size:var(--step-5); max-width:14ch; line-height:.95; }
.crumb{
  font-family:var(--mono); font-size:var(--step--2);
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
  margin-bottom:1.5rem;
}
.crumb a:hover{ color:var(--amber); }

.prose{ max-width:74ch; }
.prose h2{
  font-family:var(--display); text-transform:uppercase;
  font-size:var(--step-2); line-height:.95; letter-spacing:-.015em;
  margin-top:clamp(2.5rem,5vw,4rem); margin-bottom:1rem;
}
.prose h3{
  font-family:var(--mono); font-size:var(--step--1);
  text-transform:uppercase; letter-spacing:.16em; color:var(--amber);
  margin-top:2rem; margin-bottom:.6rem;
}
.prose p,.prose li{ color:var(--bone-dim); line-height:1.75; margin-bottom:1rem; }
.prose ul{ list-style:none; padding-left:0; }
.prose ul li{ position:relative; padding-left:1.4rem; }
.prose ul li::before{
  content:''; position:absolute; left:0; top:.72em;
  width:.42rem; height:1px; background:var(--amber);
}
.prose a{ color:var(--amber); text-decoration:underline; text-underline-offset:3px; }
.prose strong{ color:var(--bone); font-weight:600; }

/* ============================================================= REVEALS */
[data-reveal]{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay:var(--d,0s);
}
[data-reveal].is-in{ opacity:1; transform:none; }
[data-reveal="mask"]{ transform:none; opacity:1; clip-path:inset(0 0 100% 0); transition:clip-path 1.1s var(--ease-out); transition-delay:var(--d,0s); }
[data-reveal="mask"].is-in{ clip-path:inset(0 0 0 0); }
[data-reveal="right"]{ transform:translateX(-28px); }
[data-reveal="scale"]{ transform:scale(.94); }

/* Les capitales accentuees (Ê, É, À) montent au-dessus de la hauteur de
   capitale : avec line-height .86 et overflow:hidden, l'accent se faisait
   rogner. On ouvre le masque vers le haut sans decaler la mise en page. */
.line-mask{ display:block; overflow:hidden; padding-top:.18em; margin-top:-.18em; }
.line-mask > span{
  display:block;
  transform:translateY(102%);
  transition:transform 1s var(--ease-out);
  transition-delay:var(--d,0s);
}
.is-in .line-mask > span,
.line-mask.is-in > span{ transform:none; }

/* ===================================================== ACCESSIBILITE */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:.5rem; top:-100px; z-index:9999;
  background:var(--amber); color:var(--ink);
  padding:.7em 1.2em; font-family:var(--mono); font-size:var(--step--2);
  transition:top .3s var(--ease);
}
.skip:focus{ top:.5rem; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1 !important; transform:none !important; clip-path:none !important; }
  .line-mask > span{ transform:none !important; }
  .grain{ display:none; }
}

@media print{
  .nav,.menu,.grain,.vignette,.cursor,.cursor-dot,.preloader,.agegate,.panier,.callfab,.marquee{ display:none !important; }
  body{ background:#fff; color:#000; }
}

/* --------------------------------------------------- INTERLIGNAGE ACCENTS
   Blocs dont le retour a la ligne depend de la largeur de l'ecran : on leur
   garantit la place necessaire aux accents des capitales. Voir la note
   detaillee au niveau de la classe .display.                              */
.manifesto__text{ line-height:1.20; }
.agegate__title { line-height:1.18; }
.faq__q         { line-height:1.24; }
.why__t         { line-height:1.16; }
.prose h2       { line-height:1.14; }
.famille__title { line-height:1.00; }
.cat__name      { line-height:1.00; }
.horaire__j     { line-height:1.05; }
.pillar__t      { line-height:1.10; }
.slide__name    { line-height:1.05; }
.produit__nom   { line-height:1.10; }

/* =========================================================================
   CARTES PRODUIT
   Structure empruntee aux cartes Bucks Sauce : aplat colore, liseré
   pointille, titre en haut, packshot au centre, deux barres d'action en bas.
   Transposee a la palette nocturne : chaque famille porte sa teinte, melangee
   a l'encre de nuit pour rester dans l'univers du site.
   ========================================================================= */
.produits{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(.6rem,1vw,.9rem);
  background:none;
}
@media (max-width:1180px){ .produits{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:980px){  .produits{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:860px){  .produits{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

.pcard{
  --tint:var(--fam,var(--amber));
  --skin:color-mix(in oklab, var(--tint) 84%, #10131A);
  position:relative;
  display:flex; flex-direction:column;
  padding:clamp(.7rem,1.1vw,1rem);
  border-radius:10px;
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in oklab, var(--tint) 88%, #FFFFFF) 0%, transparent 62%),
    var(--skin);
  isolation:isolate;
  overflow:hidden;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.pcard[hidden]{ display:none; }
.pcard::before{
  content:'';
  position:absolute; inset:9px;
  border:1px dashed rgba(255,255,255,.42);
  border-radius:5px;
  pointer-events:none;
  z-index:3;
}
@media (hover:hover){
  .pcard:hover{ transform:translateY(-6px); box-shadow:0 22px 48px rgba(0,0,0,.45); }
}

.pcard__nom{
  /* Titre en tete de carte. */
  order:1;
  position:relative; z-index:2;
  font-family:var(--display);
  text-transform:uppercase;
  font-size:clamp(1.18rem,1.75vw,1.75rem);
  line-height:1.04;
  letter-spacing:-.005em;
  text-align:center;
  color:#FFF6E9;
  text-wrap:balance;
  hyphens:none;

  /* Le degrade de la carte eclaircit le haut — exactement la ou se trouve le
     titre. Sur la teinte des bieres, le creme y tombait a 3,16 de contraste,
     au ras du seuil AA. Ce voile sombre, deborde jusqu'aux bords de la carte
     par des marges negatives egales au padding de .pcard, le remonte au-dela
     de 6 sur toutes les familles. */
  --bleed:clamp(.7rem,1.1vw,1rem);
  margin:calc(var(--bleed) * -1) calc(var(--bleed) * -1) 0;
  padding:calc(var(--bleed) + .3rem) .7rem .4rem;
  border-radius:10px 10px 0 0;
  background:linear-gradient(180deg,
              rgba(8,10,15,.62) 0%,
              rgba(8,10,15,.50) 55%,
              rgba(8,10,15,0) 100%);
  text-shadow:0 1px 3px rgba(0,0,0,.55), 0 2px 14px rgba(0,0,0,.40);
}

.pcard__fmt{
  /* Contenance et gamme, juste au-dessus du bouton Ajouter. L'ordre du DOM
     (nom -> infos -> prix) est deja le bon ordre de lecture. */
  order:3;
  position:relative; z-index:2;
  margin-top:.35rem;
  display:flex; align-items:center; justify-content:center; gap:.15em;
  min-height:2.1em;
  padding:.6em .8em;
  border-radius:5px;
  border:1px solid rgba(255,246,233,.55);
  font-family:var(--mono);
  font-size:var(--step--2);
  letter-spacing:.18em;
  text-transform:uppercase;
  text-align:center;
  color:rgba(255,246,233,.92);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.pcard:hover .pcard__fmt{ background:#FFF6E9; color:#14171F; border-color:#FFF6E9; }

/* Scene du packshot ------------------------------------------------------- */
.pcard__scene{
  order:2;
  position:relative;
  flex:1 1 auto;
  display:grid; place-items:center;
  min-height:clamp(150px,17vw,240px);
  padding:.35rem;
}
/* Rayons de nuit : l'equivalent des bois de cerf de la reference. */
.pcard__rays{
  position:absolute; inset:0;
  display:grid; place-items:center;
  pointer-events:none;
}
.pcard__rays svg{ width:88%; height:88%; opacity:.42; }

.pcard__shot{
  position:relative;
  max-height:clamp(140px,16vw,230px);
  width:auto; max-width:92%;
  object-fit:contain;
  /* Les packshots sont detoures en amont (canal alpha) : ils se posent
     directement sur l'aplat de la carte, avec une ombre pour l'assise. */
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.42)) drop-shadow(0 2px 4px rgba(0,0,0,.3));
  transition:transform .6s var(--ease);
}
.pcard:hover .pcard__shot{ transform:scale(1.05) rotate(-1.5deg); }
.pcard__shot--svg{ filter:none; width:62%; max-width:62%; }

/* Barres d'action --------------------------------------------------------- */
.pcard__actions{ order:4; position:relative; z-index:2; display:grid; gap:.3rem; padding-top:.25rem; }

.pcard__add{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  width:100%;
  padding:.6em 1em;
  border-radius:5px;
  background:#F3E7D3;
  color:#14171F;
  font-family:var(--display);
  text-transform:uppercase;
  font-size:clamp(.82rem,.95vw,.98rem);
  letter-spacing:.01em;
  line-height:1;
  transition:background .3s var(--ease), color .3s var(--ease), transform .2s var(--ease);
}
.pcard__add:hover{ background:#FFFFFF; }
.pcard__add.is-added{ background:#5BD98A; }
.pcard__add.is-added .pcard__label::after{ content:' ✓'; }
.pcard__prix{ font-variant-numeric:tabular-nums; white-space:nowrap; }


.pcard__tag{
  display:inline-block;
  margin-left:.45em;
  font-size:.92em; letter-spacing:.16em;
  color:inherit;
  background:rgba(0,0,0,.26);
  border-radius:99px;
  padding:.18em .6em;
  transition:background .3s var(--ease);
}
.pcard:hover .pcard__tag{ background:rgba(20,23,31,.12); }

/* Repli quand le navigateur ne connait pas color-mix() */
@supports not (background:color-mix(in oklab, red 50%, blue)){
  .pcard{ background:var(--tint); }
  .pcard__shot{ mix-blend-mode:normal; }
}


/* Packshot du carrousel d'accueil : photo ou silhouette, meme emprise. */
.slide__art .shot{
  position:absolute; inset:0; margin:auto;
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit:contain;
}
.slide__shot--svg{ width:100%; height:100%; }
.slide__shot--svg svg{ width:100%; height:100%; }

/* Photo et silhouette occupent la meme case : la photo se revele une fois
   chargee, la silhouette reste visible tant qu'elle ne l'est pas. */
.pcard__scene > .shot{ grid-area:1 / 1; }
img.shot[data-shot]{ opacity:0; transition:opacity .4s var(--ease); }
img.shot[data-shot].is-ready{ opacity:1; }
@media (prefers-reduced-motion:reduce){
  img.shot[data-shot]{ transition:none; }
}

/* ------------------------------------------- NUMERO DU CLIENT (panier) */
.panier__champ{
  display:block;
  margin:.9rem 0 .35rem;
}
.panier__label{
  display:block;
  font-family:var(--mono);
  font-size:var(--step--2);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:.4rem;
}
.panier__champ input,
.panier__champ textarea{
  width:100%;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius:4px;
  padding:.75em .9em;
  font-family:var(--mono);
  font-size:var(--step--1);
  letter-spacing:.1em;
  color:var(--bone);
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.panier__champ textarea{ resize:vertical; min-height:3.6em; line-height:1.45; letter-spacing:.02em; font-family:var(--sans); }
.panier__champ input::placeholder,
.panier__champ textarea::placeholder{ color:rgba(142,154,171,.55); }
.panier__champ input:focus,
.panier__champ textarea:focus{ outline:none; border-color:var(--amber); background:rgba(255,255,255,.07); }
.panier__champ input.is-ok,
.panier__champ textarea.is-ok{ border-color:#5BD98A; }
.panier__champ input.is-ko,
.panier__champ textarea.is-ko{ border-color:var(--tail); }
.panier__erreur{
  display:block; margin-top:.35rem;
  font-family:var(--mono); font-size:var(--step--2);
  letter-spacing:.1em; color:var(--tail);
}
.panier__erreur[hidden]{ display:none; }
.panier__aide{
  font-size:var(--step--2);
  color:var(--muted);
  line-height:1.5;
  margin-bottom:.9rem;
}

/* ------------------------------------------- ZONE : TAGS COMMUNES */
.zone__tag{
  display:inline-flex; align-items:baseline; gap:.5em;
}
.zone__tag i{
  font-style:normal;
  font-size:.85em;
  letter-spacing:.06em;
  color:var(--muted);
  transition:color .3s var(--ease);
}
.zone__tag:hover i{ color:inherit; }

/* ------------------------------------------- PALIERS DE LIVRAISON (zone) */
.paliers{
  display:grid;
  gap:.6rem;
  margin:1.5rem 0 0;
}
.palier{
  display:flex; align-items:flex-start; gap:.85rem;
  padding:.85rem 1rem;
  border-radius:5px;
  border:1px solid color-mix(in oklab, var(--palier) 30%, transparent);
  background:color-mix(in oklab, var(--palier) 7%, transparent);
}
.palier__pastille{
  flex:none;
  width:12px; height:12px; margin-top:.35em;
  border-radius:50%;
  border:2px solid var(--palier);
  background:color-mix(in oklab, var(--palier) 22%, transparent);
}
.palier__corps{ display:block; }
.palier__titre{
  display:block;
  font-family:var(--mono);
  font-size:var(--step--2);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--palier);
  font-weight:400;
  margin-bottom:.25rem;
}
.palier__texte{
  display:block;
  font-size:var(--step--1);
  line-height:1.55;
  color:var(--bone-dim);
}
@supports not (border:1px solid color-mix(in oklab, red 30%, transparent)){
  .palier{ border-color:var(--line); background:rgba(255,255,255,.03); }
  .palier__pastille{ background:transparent; }
}

/* --------------------------------------- ZONE : LES 34 COMMUNES PAR PALIER
   Le palier decide de ce que le client paie : c'est donc lui qui structure la
   liste, le departement restant lisible dans le code postal (40xxx / 64xxx). */
.zone__pal{ --palier:var(--amber); }
.zone__pal + .zone__pal{ margin-top:1.6rem; }
.zone__pal-titre{
  display:flex; align-items:baseline; gap:.6em; flex-wrap:wrap;
  font-family:var(--mono);
  font-size:var(--step--2);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--palier);
  margin-bottom:.75rem;
  padding-bottom:.5rem;
  border-bottom:1px solid color-mix(in oklab, var(--palier) 25%, transparent);
}
.zone__pal-pastille{
  flex:none;
  width:9px; height:9px;
  border-radius:50%;
  border:2px solid var(--palier);
  background:color-mix(in oklab, var(--palier) 25%, transparent);
  transform:translateY(-1px);
}
.zone__pal-titre span{ color:var(--muted); }
.zone__pal-titre b{
  margin-left:auto;
  font-weight:400;
  color:var(--muted);
  letter-spacing:.12em;
}
.zone__pal-titre b.zone__pal-frais{ color:var(--palier); }
.zone__pal .zone__list{ margin-top:0; }
.zone__pal .zone__tag{
  border-color:color-mix(in oklab, var(--palier) 28%, var(--line));
}
.zone__pal .zone__tag:hover{
  border-color:var(--palier);
  color:var(--palier);
}
/* Le compteur de la legende, plus discret que le titre du palier. */
.palier__n{
  margin-left:.6em;
  color:var(--muted);
  letter-spacing:.12em;
}

/* ------------------------------------- PANIER : FRAIS DE BORDURE DE ZONE */
.panier__ligne{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:var(--step--1);
  color:var(--muted);
  margin-bottom:.4rem;
}
.panier__ligne[hidden]{ display:none; }
.panier__ligne b{ font-weight:500; color:var(--bone-dim); }
.panier__ligne--frais b{ color:#FF5A42; }
.panier__alerte{
  margin:0 0 .9rem;
  padding:.8rem .9rem;
  border-left:2px solid #FF5A42;
  background:rgba(255,90,66,.09);
  font-size:var(--step--2);
  line-height:1.55;
  color:var(--bone-dim);
}
.panier__alerte[hidden]{ display:none; }
.panier__alerte b{ color:#FF5A42; font-weight:500; }

@supports not (border:1px solid color-mix(in oklab, red 30%, transparent)){
  .zone__pal-titre{ border-bottom-color:var(--line-soft); }
  .zone__pal-pastille{ background:transparent; }
  .zone__pal .zone__tag{ border-color:var(--line); }
}

/* =========================================================== INTERLETTRAGE
   Anton est une grotesque ultra-condensee : ses approches laterales sont deja
   minimales par dessin. Un interlettrage negatif lui va tres bien en gros —
   c'est ce qui donne aux titres leur bloc compact — mais le meme reglage
   applique en dessous de ~1,5 rem colle les fûts entre eux : les jambages de
   « RÉGLÉ » se touchent, le N et le S de « DANIEL'S » forment une tache, et les
   capitales accentuees, deja hautes, achevent de fermer le mot.

   D'ou une regle inverse de celle des titres : plus le corps est petit, plus on
   ouvre. Les gros titres ne sont pas touches, ils gardent leur serrage.

       corps                        approche
       ------------------------------------------
       step-3 et plus (~2 rem +)    -.015 a -.03em   (inchange)
       step-2 (~1,45-2,2 rem)       +.005 a +.02em
       step-1 (~1,15-1,5 rem)       +.03em
       sous le step-1               +.06em

   Les valeurs sont en em : elles suivent donc les clamp() de l'echelle typo,
   et restent justes de 360 px a 1920 px de large.
   --------------------------------------------------------------------------- */

/* --- Petit : c'est la ou le probleme se voyait --- */
.pillar__t,
.produit__nom,
.produit__prix,
.panier__total,
.horaire__j{ letter-spacing:.03em; }

.faq__q{ letter-spacing:.028em; }

.pcard__nom{ letter-spacing:.035em; }

/* Le plus petit texte en Anton du site : le bouton d'ajout au panier. */
.pcard__add{ letter-spacing:.06em; }

/* --- Intermediaire : on revient a zero, puis legerement positif --- */
.marquee__item{ letter-spacing:.02em; }
.slide__name{ letter-spacing:.015em; }
.why__t,
.prose h2{ letter-spacing:.005em; }

/* --- Le lettrage de marque, entre les deux --- */
.brand__txt{ letter-spacing:.02em; }

/* ============================================================ PHOTOGRAPHIES
   Les images de nuit generees pour le site. Toutes passent sous du texte en
   gros corps : chacune recoit un voile (scrim) calcule pour ramener le fond
   sous 20 % de luminance la ou le texte se pose, sans noyer l'image ailleurs.
   Les fichiers vivent dans assets/img/scenes/.
   --------------------------------------------------------------------------- */

/* --- Bandeau des pages interieures --------------------------------------- */
.pagehead--photo{ isolation:isolate; }
.pagehead__img{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
}
/* Voile en deux temps : un degrade lateral pour le titre a gauche, un degrade
   vertical pour raccorder au fond de page en bas. */
.pagehead--photo::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, rgba(5,7,12,.94) 0%, rgba(5,7,12,.80) 38%, rgba(5,7,12,.42) 70%, rgba(5,7,12,.30) 100%),
    linear-gradient(180deg, rgba(5,7,12,.85) 0%, rgba(5,7,12,.25) 45%, var(--ink) 100%);
}
@media (max-width:760px){
  /* En colonne etroite le titre couvre toute la largeur : voile uniforme. */
  .pagehead--photo::after{
    background:
      linear-gradient(180deg, rgba(5,7,12,.86) 0%, rgba(5,7,12,.70) 50%, var(--ink) 100%);
  }
}

/* --- Fond du bloc d'appel final ------------------------------------------ */
.cta--photo{ isolation:isolate; }
.cta__img{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%;
  object-fit:cover; object-position:center 60%;
}
.cta--photo::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(65% 75% at 50% 55%, rgba(5,7,12,.90), rgba(5,7,12,.70) 60%, rgba(5,7,12,.55) 100%),
    linear-gradient(180deg, var(--ink) 0%, transparent 22%, transparent 78%, var(--ink) 100%);
}

/* --- Fond du controle d'age ---------------------------------------------- */
.agegate{
  background-image:
    linear-gradient(180deg, rgba(5,7,12,.93), rgba(5,7,12,.97)),
    radial-gradient(70% 60% at 50% 0%, rgba(245,165,36,.16), transparent 70%),
    url('../img/scenes/agegate-phare.webp');
  background-size:cover, cover, cover;
  background-position:center, center, center;
}

/* --- Cadre photo dans le flux (manifeste, pourquoi, zone) ---------------- */
.scene{
  position:relative; overflow:hidden;
  border:1px solid var(--line-soft);
  border-radius:4px;
  background:var(--ink-3);
}
.scene img{ display:block; width:100%; height:100%; object-fit:cover; }
.scene--2x3{ aspect-ratio:2/3; }
.scene--16x9{ aspect-ratio:16/9; }
/* Liseré ambre discret, pour raccrocher la photo a la charte. */
.scene::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(253,176,48,.10);
}
.scene__leg{
  position:absolute; left:0; right:0; bottom:0;
  padding:2.5rem .9rem .8rem;
  font-family:var(--mono); font-size:var(--step--2);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--bone-dim);
  background:linear-gradient(180deg, transparent, rgba(5,7,12,.85));
}

/* Colonne photo du manifeste : elle ne doit pas ecraser le texte en mobile. */
.manifesto__scene{ margin-top:2.5rem; }
@media (min-width:900px){
  .manifesto__scene{ margin-top:0; }
}

/* ====================================================== VIDEO DU HERO
   La video de fond se superpose exactement a l'image de repli : memes regles
   de cadrage que .hero__bg img, plus une transition d'opacite pour que le
   passage du poster a la lecture ne clignote pas.
   L'image reste dessous et reapparait seule si la video est retiree
   (animations reduites, mode economie de donnees, <video> non supporte). */
.hero__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transform:scale(1.08);
  will-change:transform;
  opacity:0;
  transition:opacity .8s var(--ease);
}
.hero__video.is-playing{ opacity:1; }
.hero__img--repli{ position:absolute; inset:0; }

/* Sans video, l'image de repli assure seule le fond. */
.hero__bg.is-static .hero__video{ display:none; }

@media (prefers-reduced-motion: reduce){
  .hero__video{ display:none; }
}

/* ------------------------------------------- VOILE DU HERO (fond video)
   Mesure : sur les 12 images de la video, le 95e centile de luminance dans la
   zone du titre demandait 68 % de voile pour atteindre 3:1 (seuil AA en gros
   corps). Un voile uniforme a 68 % aurait noye la video. On le pondere donc
   horizontalement : ~80 % sous le titre a gauche, ~45 % a droite ou passe la
   voiture. Le degrade vertical d'origine est conserve pour le raccord avec la
   barre de navigation en haut et le fond de page en bas. */
.hero__bg::after{
  background:
    linear-gradient(90deg,
      rgba(5,7,12,.80) 0%,
      rgba(5,7,12,.66) 30%,
      rgba(5,7,12,.34) 60%,
      rgba(5,7,12,.24) 100%),
    linear-gradient(180deg,
      rgba(5,7,12,.72) 0%,
      rgba(5,7,12,.20) 35%,
      rgba(5,7,12,.85) 82%,
      var(--ink) 100%),
    radial-gradient(80% 60% at 20% 15%, rgba(245,165,36,.16), transparent 60%);
}

/* En colonne etroite le titre occupe toute la largeur : le voile lateral
   n'a plus de sens, on repasse a un voile uniforme suffisant. */
@media (max-width:760px){
  .hero__bg::after{
    background:
      linear-gradient(180deg,
        rgba(5,7,12,.80) 0%,
        rgba(5,7,12,.62) 30%,
        rgba(5,7,12,.72) 60%,
        rgba(5,7,12,.90) 85%,
        var(--ink) 100%),
      radial-gradient(80% 60% at 20% 15%, rgba(245,165,36,.14), transparent 60%);
  }
}

/* ================================================================== PACKS
   Cartes d'offres groupees. Elles reprennent le bouton .pcard__add des fiches
   produit, et exposent les memes attributs data-* : le panier les traite comme
   n'importe quel article. Les vignettes sont les packshots deja presents dans
   le catalogue — aucun visuel dedie a produire. */
.packs__head{ margin-bottom:clamp(2rem,4vw,3rem); }
.packs{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap:clamp(1rem,2vw,1.5rem);
}
.pack{
  --fam:var(--amber);
  display:flex; flex-direction:column; gap:.9rem;
  padding:clamp(1rem,1.8vw,1.4rem);
  border:1px solid var(--line);
  border-radius:10px;
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in oklab, var(--fam) 16%, transparent), transparent 70%),
    var(--ink-2);
  transition:transform .3s var(--ease), border-color .3s var(--ease);
}
@media (hover:hover){
  .pack:hover{ transform:translateY(-4px); border-color:color-mix(in oklab, var(--fam) 45%, var(--line)); }
}

/* Les packshots alignes, chacun avec sa quantite. */
.pack__shots{
  display:flex; align-items:flex-end; justify-content:center; gap:.4rem;
  min-height:132px; padding-block:.4rem;
}
.pack__nom{
  font-family:var(--display); text-transform:uppercase;
  font-size:var(--step-1); line-height:1.05; letter-spacing:.03em;
  color:var(--bone);
}
.pack__contenu{ display:grid; gap:.3rem; font-size:var(--step--1); color:var(--bone-dim); line-height:1.5; }
.pack__contenu li{ display:block; }
.pack__contenu em{ font-style:normal; color:var(--muted); }
.pack__n{
  display:inline-block; min-width:1.4em;
  font-family:var(--mono); color:var(--fam);
}
.pack__contenu i{ font-style:normal; color:var(--muted); font-size:.92em; }
.pack__eco{
  display:flex; align-items:baseline; gap:.55rem; flex-wrap:wrap;
  margin-top:auto; padding-top:.4rem;
}
.pack__barre{ color:var(--muted); text-decoration:line-through; font-size:var(--step--1); }
.pack__eco b{
  font-family:var(--display); font-size:var(--step-1);
  letter-spacing:.03em; color:var(--amber); font-weight:400;
}
.pack__gain{
  flex:1 0 100%;
  font-family:var(--mono); font-size:var(--step--2);
  letter-spacing:.1em; text-transform:uppercase; color:#6BEE9B;
}
.pack .pcard__add{ margin-top:.2rem; }

@supports not (background:color-mix(in oklab, red 16%, transparent)){
  .pack{ background:var(--ink-2); }
}

/* ------------------------------------------------ GROUPE DE BOUTEILLES
   Un pack se montre avec le nombre reel de bouteilles livrees, une image par
   unite, plutot qu'avec un badge « x3 ». Les images se chevauchent legerement
   pour former un groupe plutot qu'une file, et se retrecissent ensemble quand
   la place manque. */
.groupe{
  display:flex; align-items:flex-end; justify-content:center;
  gap:0;
}
.groupe__shot{
  display:block;
  width:auto; height:auto;
  max-height:118px; max-width:26%;
  object-fit:contain; object-position:bottom;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.55));
}
/* Chevauchement leger, sauf sur la premiere : le groupe se lit d'un bloc. */
.groupe__shot + .groupe__shot{ margin-left:-3%; }

/* Sur la scene du carrousel, le groupe occupe toute la hauteur disponible. */
.groupe--slide{ width:100%; height:100%; align-items:center; }
.groupe--slide .groupe__shot{
  max-height:100%; max-width:22%;
}
.groupe--slide .groupe__shot + .groupe__shot{ margin-left:-2%; }

/* Le prix barre du carrousel, plus discret que le prix courant. */
.slide__price .pack__barre{ font-size:.62em; margin-right:.25em; }
.slide__name a{ color:inherit; }
.slide__name a:hover{ color:var(--amber); }

@media (max-width:520px){
  .groupe__shot{ max-height:96px; }
}

/* La scene du carrousel accueille desormais un groupe de bouteilles et non
   plus une seule : sa largeur suit le nombre d'unites du pack (--n), et sa
   hauteur ne depend plus d'un ratio calcule pour une bouteille isolee. */
.slide__art{
  width:min(92vw, calc(var(--n, 3) * clamp(76px, 9.5vw, 148px)));
  height:clamp(230px, 36vh, 400px);
  aspect-ratio:auto;
}
.groupe--slide{ align-items:flex-end; }
.groupe--slide .groupe__shot{
  max-height:100%;
  max-width:calc(96% / var(--n, 3));
}

/* --------------------------------- CARTES PRODUIT EN COLONNE ETROITE
   A deux colonnes sur telephone, la carte fait environ 160 px : « 70 cl »
   suivi de sa pastille de gamme ne tenait plus sur une ligne, et la carte qui
   passait a deux lignes etirait toute sa rangee. On resserre la ligne de
   format plutot que de masquer l'information. */
@media (max-width:640px){
  .pcard__fmt{
    font-size:var(--step--2);
    padding:.5em .5em;
    gap:.1em;
  }
  .pcard__tag{
    margin-left:.3em;
    font-size:.88em;
    letter-spacing:.06em;
    padding:.16em .45em;
  }
  .pcard__nom{ font-size:clamp(.95rem,3.6vw,1.15rem); }
  .pcard__add{ padding:.55em .7em; font-size:clamp(.72rem,2.6vw,.85rem); }
}