/* ============================================================
   VINS MARTIN-GIRAUD
   Structure demandée : rail fixe à gauche, gros logo encadré,
   filets à angles droits, texte géant fantôme derrière les
   photos, bouteilles détourées qui lévitent au survol.
   ============================================================ */

:root{
  --creme:#f0eee6; --creme-2:#e7e4d9;
  --vert:#264c41; --vert-clair:#4a6f63;
  --terracotta:#864928; --brique:#a45242;
  --filet:rgba(38,76,65,.26);
  --verze:#18549c; --saint-veran:#c03c24; --rouge:#842430; --villages:#549084;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --rail:222px;            /* colonne fixe de gauche */
  --entete:150px;          /* hauteur de l'en-tête */
  --marge:clamp(1.5rem,3.4vw,3.6rem);
  --entree:cubic-bezier(.16,1,.3,1);
}
@media (max-width:1280px){ :root{ --rail:180px; --entete:128px; } }
@media (max-width:900px){ :root{ --rail:0px; --entete:84px; --marge:1.25rem; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%;
  /* le mot géant en fond déborde volontairement : on coupe à l'horizontale
     sans créer de conteneur de défilement (clip, pas hidden). */
  overflow-x:clip; }
body{ margin:0; padding-left:var(--rail); background:var(--creme); color:var(--vert);
  font-family:var(--sans); font-size:clamp(1.0625rem,1rem + .4vw,1.25rem); line-height:1.65;
  font-weight:300; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
body.verrouille{ overflow:hidden; }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

h1,h2,h3{ font-family:var(--serif); font-weight:300; margin:0; text-wrap:balance; }
h1{ font-size:clamp(2.4rem,1rem + 5vw,5rem); line-height:1.08; letter-spacing:-.015em; }
h2{ font-size:clamp(2.05rem,1rem + 3.5vw,4.1rem); line-height:1.1; letter-spacing:-.01em; }
h3{ font-size:clamp(1.42rem,1rem + 1.3vw,2.1rem); line-height:1.16; }
p{ margin:0 0 1.2em; max-width:60ch; }
.sourdine{ font-size:.78rem; letter-spacing:.26em; text-transform:uppercase; font-weight:300;
  color:var(--terracotta); margin:0 0 1.6rem; }
.enveloppe{ padding-inline:var(--marge); max-width:1500px; }
.section{ position:relative; padding-block:clamp(5rem,11vw,11rem); overflow-x:clip; }
.bloc{ max-width:56rem; position:relative; z-index:1; }

/* ---------- boutons : capsules, comme sur leurs captures ---------- */
.bouton{ display:inline-flex; align-items:center; justify-content:center; white-space:nowrap;
  padding:1.05rem 2.5rem; border-radius:999px; font-size:.86rem; letter-spacing:.1em;
  text-transform:none; text-decoration:none; border:1px solid var(--vert); background:transparent;
  color:var(--vert); transition:background .4s var(--entree), color .4s var(--entree); }
.bouton:hover{ background:var(--vert); color:var(--creme); }
.bouton--plein{ background:var(--vert); color:var(--creme); }
.bouton--plein:hover{ background:var(--terracotta); border-color:var(--terracotta); }
.bouton--photo{ border-color:var(--creme); color:var(--creme); }
.bouton--photo:hover{ background:var(--creme); color:var(--vert); }
.bouton--photo-plein{ background:var(--creme); color:var(--vert); border-color:var(--creme); }
.bouton--photo-plein:hover{ background:var(--brique); border-color:var(--brique); color:var(--creme); }
a:focus-visible,.bouton:focus-visible,button:focus-visible{ outline:2px solid var(--brique); outline-offset:4px; }

/* ============ RAIL FIXE À GAUCHE ============ */
.rail{ position:fixed; inset:0 auto 0 0; width:var(--rail); z-index:320;
  border-right:1px solid var(--filet); display:flex; flex-direction:column;
  align-items:center; background:var(--creme); }
@media (max-width:900px){ .rail{ display:none; } }

/* le logo, beaucoup plus gros, dans sa case carrée */
.rail__logo{ width:100%; height:var(--entete); border-bottom:1px solid var(--filet);
  display:grid; place-items:center; text-decoration:none; }
.rail__logo img{ width:82%; }

.rail__vertical{ writing-mode:vertical-rl; text-orientation:mixed;
  font-size:.74rem; letter-spacing:.3em; text-transform:uppercase; color:var(--vert-clair);
  padding-block:2rem; }
.rail__milieu{ margin-block:auto; display:grid; justify-items:center; gap:.9rem; }
.rail__bas{ padding-bottom:2rem; }

.declencheur{ display:grid; justify-items:center; gap:.7rem; background:none; border:none;
  color:var(--vert); cursor:pointer; padding:.4rem; font:inherit; }
.declencheur__mot{ font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; }
.declencheur__traits{ display:grid; gap:7px; width:34px; }
.declencheur__traits span{ display:block; height:1px; background:currentColor;
  transition:transform .5s var(--entree); }
.declencheur[aria-expanded="true"] .declencheur__traits span:first-child{ transform:translateY(4px) rotate(8deg); }
.declencheur[aria-expanded="true"] .declencheur__traits span:last-child{ transform:translateY(-4px) rotate(-8deg); }

/* ============ EN-TÊTE ============ */
.entete{ position:fixed; top:0; left:var(--rail); right:0; z-index:310; height:var(--entete);
  display:flex; align-items:center; border-bottom:1px solid var(--filet);
  background:var(--creme); color:var(--vert); }
.entete--transparent{ background:transparent; border-bottom-color:rgba(240,238,230,.28); color:var(--creme); }
.entete__interieur{ width:100%; padding-inline:var(--marge); display:flex; align-items:center;
  justify-content:space-between; gap:2rem; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; }
.entete__centre{ transition:opacity .4s var(--entree); }
.entete__cta{ display:inline-flex; align-items:center; white-space:nowrap;
  padding:.82rem 1.6rem; border-radius:999px; text-decoration:none;
  font-size:.76rem; letter-spacing:.12em; text-transform:uppercase;
  background:var(--vert); color:var(--creme); border:1px solid var(--vert);
  transition:background .4s var(--entree), color .4s var(--entree), border-color .4s var(--entree); }
.entete__cta:hover{ background:var(--terracotta); border-color:var(--terracotta); }
.entete--transparent .entete__cta{ background:var(--creme); color:var(--vert); border-color:var(--creme); }
.entete--transparent .entete__cta:hover{ background:var(--brique); border-color:var(--brique); color:var(--creme); }
.entete__logo-mobile{ display:none; }
@media (max-width:900px){
  .entete__logo-mobile{ display:block; }
  .entete__logo-mobile img{ height:58px; width:auto; }
  .entete--transparent .entete__logo-mobile img{ filter:brightness(0) invert(1); }
  .entete__centre{ display:none; }
  .entete .declencheur{ display:flex; align-items:center; gap:.8rem; }
  .entete .declencheur__traits{ width:28px; }
  .entete__interieur{ gap:.9rem; }
  .entete__cta{ padding:.6rem 1rem; font-size:.6rem; letter-spacing:.1em; }
}
@media (max-width:480px){
  .entete__cta{ display:none; }   /* le menu porte alors les deux actions */
}
.entete__progression{ position:absolute; bottom:-1px; left:0; height:1px; background:currentColor;
  transform-origin:0 50%; transform:scaleX(0); opacity:.55; }
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: scroll()){
    .entete__progression{ animation:progression linear both; animation-timeline:scroll(root); }
    @keyframes progression{ to{ transform:scaleX(1); } }
  }
}

/* ============ CURSEUR ============ */
.curseur{ position:fixed; top:0; left:0; z-index:900; pointer-events:none; width:36px; height:36px;
  margin:-18px 0 0 -18px; border-radius:50%; border:1px solid currentColor; color:var(--vert);
  opacity:0; transition:width .4s var(--entree),height .4s var(--entree),margin .4s var(--entree),
  background .4s,opacity .4s,color .45s; }
.curseur[data-actif="true"]{ opacity:.7; }
.curseur[data-survol="true"]{ width:74px; height:74px; margin:-37px 0 0 -37px; background:currentColor; opacity:.14; }
.curseur[data-sombre="true"]{ color:var(--creme); }
@media (hover:none),(pointer:coarse){ .curseur{ display:none; } }

/* ============ LOADER : LE VERRE QUI SE REMPLIT ============ */
/* Le niveau du liquide est une translation strictement linéaire (--p).
   L'ondulation est une mise à l'échelle séparée (--amp) appliquée à la
   seule crête, autour de la ligne de surface : faire varier la vague ne
   déplace jamais le niveau. Une seule variable pilote tout : --p. */
.loader{
  --p:0;
  --amp:calc(4 * var(--p) * (1 - var(--p)));
  position:fixed; inset:0; z-index:1000; min-height:100dvh;
  display:grid; grid-template-rows:auto 1fr auto; justify-items:center; align-items:center;
  padding:clamp(1.8rem,4vw,2.6rem) var(--marge);
  background:var(--vert); color:var(--creme); pointer-events:none;
  transition:opacity .55s var(--entree), visibility .55s; }
.loader[data-sortie="true"]{ opacity:0; visibility:hidden; }

/* le logo passe tout en haut */
.loader__logo{ width:clamp(140px,22vw,210px); }

/* le verre occupe le centre */
.loader__centre{ display:grid; justify-items:center; gap:1.6rem; align-self:center; }
.loader__verre{ display:block; width:clamp(64px,9vw,92px); height:auto; overflow:visible; }

/* p=0 → fond du calice (y=58) ; p=0.5 → moitié (y=33) ; p=1 → buvant (y=8) */
.loader__niveau{ transform:translateY(calc(58px - var(--p) * 50px)); }
.loader__crete{ fill:currentColor; transform-box:view-box; transform-origin:0 0;
  transform:scaleY(var(--amp)); }
.loader__corps{ fill:currentColor; }
.loader__vague{ animation:vague 1400ms ease-in-out infinite; }
@keyframes vague{ from{ transform:translateX(0); } to{ transform:translateX(40px); } }

.loader__pct{ font-size:.82rem; letter-spacing:.22em; font-variant-numeric:tabular-nums;
  min-width:4ch; text-align:center; opacity:.72; }
.loader__phrase{ font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; opacity:.5; }

@media (prefers-reduced-motion: reduce){ .loader__vague{ animation:none; } }

/* ============ MENU PLEIN ÉCRAN ============ */
.menu{ position:fixed; inset:0 0 0 var(--rail); z-index:305; background:var(--vert); color:var(--creme);
  display:grid; align-content:center; padding:calc(var(--entete) + 3rem) var(--marge) 3rem;
  clip-path:inset(0 0 100% 0); transition:clip-path 1.05s var(--entree); pointer-events:none; }
.menu[data-ouvert="true"]{ clip-path:inset(0 0 0 0); pointer-events:auto; }
.menu__item{ display:block; text-decoration:none; padding:clamp(.4rem,1.2vw,.85rem) 0;
  border-bottom:1px solid rgba(240,238,230,.2); overflow:hidden; }
.menu__item span{ display:block; font-family:var(--serif); font-size:clamp(2rem,1rem + 4.6vw,4.4rem);
  line-height:1.16; font-weight:300; transform:translateY(110%);
  transition:transform .9s var(--entree), color .35s; }
.menu[data-ouvert="true"] .menu__item span{ transform:none; }
.menu[data-ouvert="true"] .menu__item:nth-child(1) span{ transition-delay:.18s; }
.menu[data-ouvert="true"] .menu__item:nth-child(2) span{ transition-delay:.24s; }
.menu[data-ouvert="true"] .menu__item:nth-child(3) span{ transition-delay:.30s; }
.menu[data-ouvert="true"] .menu__item:nth-child(4) span{ transition-delay:.36s; }
.menu[data-ouvert="true"] .menu__item:nth-child(5) span{ transition-delay:.42s; }
.menu__item:hover span{ color:var(--brique); }
.menu__actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:clamp(2rem,4vw,3rem); }
.menu__pied{ margin-top:clamp(1.6rem,3vw,2.4rem); display:flex; flex-wrap:wrap; gap:1rem 3rem;
  font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; opacity:.75; }
.menu__pied a{ text-decoration:none; }
.menu__apercu{ position:fixed; z-index:306; width:clamp(200px,20vw,290px); aspect-ratio:4/5;
  pointer-events:none; overflow:hidden; opacity:0; transform:translate(-50%,-50%) scale(.92);
  transition:opacity .45s var(--entree), transform .65s var(--entree); }
.menu__apercu[data-visible="true"]{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.menu__apercu img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:900px),(pointer:coarse){ .menu__apercu{ display:none; } }

/* ============ RÉVÉLATIONS ============ */
.mot{ display:inline-block; overflow:hidden; vertical-align:bottom; }
.mot i{ display:inline-block; font-style:inherit; transform:translateY(110%); transition:transform 1s var(--entree); }
.est-visible .mot i{ transform:none; }
.filet{ height:1px; background:var(--filet); transform:scaleX(0); transform-origin:0 50%;
  transition:transform 1.3s var(--entree); }
.filet.est-visible{ transform:scaleX(1); }
.monte{ opacity:0; transform:translateY(30px); transition:opacity 1s var(--entree), transform 1s var(--entree); }
.monte.est-visible{ opacity:1; transform:none; }
.grossit{ opacity:0; transform:scale(1.07); transition:opacity 1.1s var(--entree), transform 1.5s var(--entree); }
.grossit.est-visible{ opacity:1; transform:none; }
[data-retard="1"]{ transition-delay:.12s; }
[data-retard="2"]{ transition-delay:.24s; }
[data-retard="3"]{ transition-delay:.36s; }
@media (prefers-reduced-motion: reduce){
  .mot i,.filet,.monte,.grossit,.menu__item span{ transform:none !important; opacity:1 !important; transition:none !important; }
}

/* ============ HERO ============ */
.hero{ position:relative; min-height:100dvh; display:grid; align-items:center; overflow:hidden; }
.hero__fond{ position:absolute; inset:0; }
.hero__fond img{ width:100%; height:100%; object-fit:cover; }
.hero__voile{ position:absolute; inset:0; background:
  linear-gradient(97deg, rgba(18,31,26,.82) 0%, rgba(18,31,26,.62) 38%, rgba(18,31,26,.24) 72%, rgba(18,31,26,.1) 100%),
  linear-gradient(180deg, rgba(18,31,26,.5) 0%, rgba(18,31,26,.18) 40%, rgba(18,31,26,.62) 100%); }
.hero__contenu{ position:relative; z-index:2; color:var(--creme);
  padding:calc(var(--entete) + 4rem) var(--marge) 5rem; max-width:64rem; }
.hero h1{ color:var(--creme); }
.hero h1 em{ font-style:italic; }
.hero__contenu .sourdine{ color:rgba(240,238,230,.82); margin-bottom:1.4rem; }
.hero__sous{ margin:1.8rem 0 2.6rem; max-width:44ch; color:rgba(240,238,230,.92); }
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; }

/* ============ TEXTE GÉANT FANTÔME ============ */
.fantome{ position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  font-family:var(--serif); font-weight:300; text-transform:uppercase;
  font-size:clamp(4.5rem,15vw,15rem); line-height:.82; letter-spacing:.01em;
  color:rgba(38,76,65,.07); white-space:nowrap; pointer-events:none; user-select:none;
  z-index:0; text-align:center; }

/* ============ SCÈNE PHOTO (photo + fantôme + pastille d'angle) ============ */
.scene{ position:relative; display:grid; place-items:center;
  padding:clamp(3rem,7vw,6rem) var(--marge); }
.scene__cadre{ position:relative; z-index:1; width:min(58rem,100%); }
.scene__photo{ overflow:hidden; }
/* le mot géant chevauche le bas de la photo, moitié caché, moitié lisible */
.scene .fantome{ top:auto; bottom:0; transform:translateY(42%); }
.scene__photo img{ width:100%; }
/* la pastille mord sur l'angle bas droit de la photo */
.scene__cadre .scene__pastille{ position:absolute; right:-1rem; bottom:-1rem; z-index:3;
  background:var(--creme); border-radius:50%; }
@media (max-width:620px){
  .scene__cadre .scene__pastille{ right:.5rem; bottom:.5rem; width:clamp(92px,24vw,116px); }
}

/* ============ PARALLAXE ============ */
.cadre{ overflow:hidden; position:relative; }
.cadre img{ width:100%; }
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .cadre img{ animation:parallaxe linear both; animation-timeline:view();
      animation-range:entry 0% exit 100%; will-change:transform; }
    @keyframes parallaxe{ from{ transform:translateY(-8%) scale(1.18);} to{ transform:translateY(8%) scale(1.18);} }
  }
}

/* ============ PASTILLE TOURNANTE ============ */
.pastille{ position:relative; display:grid; place-items:center; width:clamp(118px,13vw,160px);
  aspect-ratio:1; text-decoration:none; color:var(--vert); flex:none; }
.pastille__anneau{ position:absolute; inset:0; animation:tourner 22s linear infinite; }
.pastille__anneau text{ font-family:var(--sans); font-size:5.2px; letter-spacing:.38em;
  text-transform:uppercase; fill:currentColor; }
.pastille__fleche{ width:26%; transition:transform .4s var(--entree); }
.pastille:hover .pastille__fleche{ transform:translateX(5px); }
@media (prefers-reduced-motion: reduce){ .pastille__anneau{ animation:none; } }

/* ============ DUO ============ */
.duo{ display:grid; gap:clamp(2.5rem,6vw,5rem); align-items:center; position:relative; z-index:1; }
@media (min-width:960px){
  .duo{ grid-template-columns:1fr 1fr; }
  .duo--inverse .duo__media{ order:-1; }
  .duo__media{ margin-top:clamp(2rem,5vw,4.5rem); }
}

/* ============ BOUTEILLES QUI LÉVITENT ============ */
.vitrine{ position:relative; display:grid; gap:clamp(2rem,4vw,3.5rem);
  margin-top:clamp(3rem,6vw,5rem); padding-block:clamp(2rem,5vw,4rem); }
@media (min-width:820px){ .vitrine{ grid-template-columns:repeat(3,1fr); align-items:end; } }
.flacon{ position:relative; z-index:1; display:grid; justify-items:center; gap:1.2rem;
  text-align:center; }
/* l'amplitude du flottement est une propriete animable : la bouteille
   s'eleve doucement au survol et redescend sans a-coup a la sortie */
@property --flot{ syntax:"<length>"; inherits:true; initial-value:0px; }
.flacon{ --flot:0px; transition:--flot .8s var(--entree); }
.flacon__image{ position:relative; width:min(100%,clamp(120px,15vw,186px)); }
.flacon__image img{ width:100%;
  transition:transform 1s var(--entree), filter 1s var(--entree);
  filter:drop-shadow(0 18px 26px rgba(38,76,65,.18)); }
@media (hover:hover){
  .flacon:hover{ --flot:11px; }
  .flacon:hover .flacon__image img{
    transform:translateY(-26px) rotate(-1.4deg);
    filter:drop-shadow(0 52px 52px rgba(38,76,65,.3)); }
}
@media (prefers-reduced-motion: no-preference){
  .flacon__image{ animation:leviter 3.8s ease-in-out infinite; will-change:transform; }
  @keyframes leviter{
    0%,100%{ transform:translateY(calc(var(--flot) * -1)); }
    50%    { transform:translateY(var(--flot)); }
  }
}
.flacon__type{ margin:0; }
.flacon__nom{ margin:0; font-family:var(--serif); font-size:clamp(1.42rem,1rem + 1.15vw,2.05rem); font-weight:300; }
.flacon__type{ font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; color:var(--terracotta); }

/* ============ CUVÉES ============ */
.cuvees{ display:grid; gap:1px; background:var(--filet); border-block:1px solid var(--filet);
  margin-top:clamp(3rem,6vw,5rem); position:relative; z-index:1; }
@media (min-width:880px){ .cuvees{ grid-template-columns:1fr 1fr; } }
.cuvee{ --teinte:var(--terracotta); background:var(--creme); padding:clamp(2rem,4vw,3.2rem);
  display:grid; gap:1.8rem; align-content:start; }
@media (min-width:560px){ .cuvee{ grid-template-columns:auto 1fr; align-items:start; } }
.cuvee__visuel{ width:clamp(130px,16vw,190px); }
.cuvee__nom{ color:var(--teinte); }
.cuvee__millesime{ font-size:.76rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--vert-clair); margin-top:.5rem; }
.cuvee__note{ margin:1.3rem 0 1.5rem; font-size:1.06rem; max-width:40ch; }
.cuvee__faits{ margin:0; display:grid; gap:.6rem; font-size:.96rem; }
.cuvee__faits div{ display:flex; gap:.8rem; }
.cuvee__faits dt{ color:var(--vert-clair); min-width:10.5rem; }
.cuvee__faits dd{ margin:0; }
.medaille{ display:inline-block; margin-top:1.2rem; font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; padding:.5rem 1rem; border-radius:999px;
  border:1px solid var(--teinte); color:var(--teinte); }
.cuvee__prix{ margin-top:1.4rem; padding-top:1.1rem; border-top:1px solid var(--filet);
  font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; color:var(--vert-clair); }

/* ============ PHOTO PLEINE HAUTEUR ============ */
.plein{ position:relative; min-height:100vh; display:grid; place-items:center; overflow:hidden; }
.plein__fond{ position:absolute; inset:0; }
.plein__fond img{ width:100%; height:100%; object-fit:cover; }
.plein__voile{ position:absolute; inset:0; background:rgba(20,34,29,.42); }
.plein__mot{ position:relative; z-index:2; color:var(--creme); text-align:center;
  padding-inline:var(--marge); max-width:26ch; font-family:var(--serif);
  font-size:clamp(1.9rem,1rem + 3.2vw,3.6rem); line-height:1.2; font-weight:300; }

/* ============ ÉTAPES ============ */
.etapes{ display:grid; gap:0; margin-top:clamp(3rem,6vw,4.5rem); position:relative; z-index:1; }
@media (min-width:880px){ .etapes{ grid-template-columns:repeat(3,1fr); } }
.etape{ padding:clamp(1.6rem,3vw,2.4rem) 0; }
@media (min-width:880px){ .etape{ padding-inline:clamp(1rem,2.6vw,2.4rem); }
  .etape:first-child{ padding-left:0; } .etape:last-child{ padding-right:0; } }
.etape h3{ margin:1.4rem 0 .8rem; }
.etape p{ font-size:1.04rem; margin:0; }

/* ============ FAQ ============ */
.faq{ margin-top:clamp(3rem,6vw,4.5rem); border-top:1px solid var(--filet); position:relative; z-index:1; }
.faq details{ border-bottom:1px solid var(--filet); }
.faq summary{ cursor:pointer; list-style:none; padding:clamp(1.3rem,2.4vw,1.9rem) 0;
  font-family:var(--serif); font-size:clamp(1.15rem,1rem + .85vw,1.65rem); font-weight:300;
  display:flex; justify-content:space-between; gap:2rem; align-items:baseline; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--sans); font-size:1.3rem; color:var(--brique);
  transition:transform .4s var(--entree); }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq p{ margin:0 0 1.6rem; max-width:64ch; }

/* ============ PIED ============ */
.pied{ background:var(--vert); color:var(--creme); padding-block:clamp(4rem,8vw,6.5rem); position:relative; }
.pied__grille{ display:grid; gap:3rem; }
@media (min-width:820px){ .pied__grille{ grid-template-columns:1.4fr 1fr 1fr; } }
.pied__logo{ width:180px; margin-bottom:1.6rem; }
.pied h4{ margin:0 0 1rem; font-size:.76rem; letter-spacing:.2em; text-transform:uppercase;
  font-weight:300; opacity:.65; }
.pied a{ text-decoration:none; border-bottom:1px solid rgba(240,238,230,.3); }
.pied a:hover{ border-bottom-color:var(--creme); }
.pied address{ font-style:normal; line-height:2; }
.pied p{ max-width:34ch; }
.pied__bas{ margin-top:clamp(3rem,6vw,4.5rem); padding-top:1.8rem;
  border-top:1px solid rgba(240,238,230,.22); display:flex; flex-wrap:wrap; gap:1rem 2.5rem;
  justify-content:space-between; font-size:.84rem; opacity:.75; }
.mention-sante{ max-width:62ch; }

/* ============ POP-UP SALON ============ */
.salon{ position:fixed; inset:0; z-index:400; display:grid; place-items:center; padding:var(--marge);
  background:rgba(20,34,29,.7); opacity:0; visibility:hidden;
  transition:opacity .45s var(--entree), visibility .45s; }
.salon[data-ouvert="true"]{ opacity:1; visibility:visible; }
.salon__boite{ position:relative; background:var(--creme); max-width:36rem; width:100%;
  padding:clamp(2.2rem,5vw,3.6rem); transform:translateY(18px); transition:transform .55s var(--entree); }
.salon[data-ouvert="true"] .salon__boite{ transform:none; }
.salon__date{ font-family:var(--serif); font-size:clamp(1.3rem,1rem + 1.2vw,1.9rem);
  color:var(--brique); margin:.8rem 0 1.2rem; font-weight:300; line-height:1.24; }
.salon__fermer{ position:absolute; top:.8rem; right:.8rem; width:2.8rem; height:2.8rem;
  display:grid; place-items:center; background:none; border:none; cursor:pointer;
  color:var(--vert-clair); font-size:1.5rem; line-height:1; }

.saut-contenu{ position:absolute; left:-9999px; background:var(--vert); color:var(--creme);
  padding:.9rem 1.4rem; z-index:500; }
.saut-contenu:focus{ left:var(--marge); top:.6rem; }

/* ============ HERO COURT (pages intérieures) ============ */
.hero--court{ min-height:min(78vh,680px); }
.hero--court h1{ font-size:clamp(2.2rem,1rem + 3.9vw,4.2rem); }

/* ============ BANDE D'APPEL (vert plein, très visible) ============ */
.appel{ display:grid; gap:2rem 3.5rem; align-items:center;
  margin-top:clamp(3rem,6vw,5rem);
  padding:clamp(2.2rem,4.5vw,3.6rem); background:var(--vert); color:var(--creme);
  position:relative; z-index:1; }
.appel .sourdine{ color:var(--brique); }
.appel h2{ font-size:clamp(1.5rem,1rem + 2vw,2.5rem); max-width:20ch; margin-top:.2rem; }
.appel p{ margin:1rem 0 0; max-width:42ch; color:rgba(240,238,230,.86); font-size:1rem; }
@media (min-width:1060px){ .appel{ grid-template-columns:minmax(0,1fr) auto; } }
.appel__actions{ display:flex; flex-wrap:wrap; gap:.9rem; }
.appel__actions .bouton{ padding:.95rem 1.9rem; }

/* ============ BOUTONS DE FIN DE SECTION ============ */
.actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.4rem; }

/* ============ BLOC DÉCALÉ (libellé à gauche, texte à droite) ============ */
.bloc--decale{ max-width:none; display:grid; gap:1rem clamp(2rem,5vw,4.5rem); }
@media (min-width:900px){
  .bloc--decale{ grid-template-columns:minmax(10rem,14rem) minmax(0,56rem); }
  .bloc--decale .sourdine{ margin:.6rem 0 0; text-align:right; }
}

/* ============ FORMULAIRE ============ */
.formulaire{ display:grid; gap:clamp(2.5rem,5vw,4.5rem); position:relative; z-index:1; }
@media (min-width:960px){ .formulaire{ grid-template-columns:1fr 1fr; align-items:start; } }
.formulaire__champs{ display:grid; gap:1.4rem; }
.champ{ display:grid; gap:.5rem; margin:0; max-width:none; }
.champ label{ font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; color:var(--vert-clair); }
.champ input,.champ select,.champ textarea{ font:inherit; font-size:1.05rem; color:var(--vert);
  background:transparent; border:1px solid var(--filet); border-radius:0;
  padding:.85rem 1rem; width:100%; transition:border-color .3s var(--entree); }
.champ input:focus,.champ select:focus,.champ textarea:focus{ outline:none; border-color:var(--vert); }
.champ textarea{ resize:vertical; }
.champ--mention{ font-size:.88rem; color:var(--vert-clair); max-width:52ch; }
.formulaire__champs .bouton{ justify-self:start; }

/* ============ PAGES LÉGALES ============ */
.legal{ max-width:56rem; position:relative; z-index:1; }
.legal h2{ font-size:clamp(1.4rem,1rem + 1.4vw,2.1rem); margin-top:clamp(2.6rem,5vw,3.6rem); }
.legal h2:first-of-type{ margin-top:2rem; }
.legal .filet{ margin:1.2rem 0 1.8rem; }
.legal p{ font-size:1.06rem; }

/* boutons du pied de page */
.pied__actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.8rem; }
.pied__actions .bouton{ padding:.9rem 1.7rem; font-size:.78rem; }

/* ============ NAVIGATION VISIBLE DANS L'EN-TÊTE ============ */
.entete__nav{ display:flex; gap:clamp(1rem,2.2vw,2.4rem); margin-right:auto;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; }
.entete__nav a{ text-decoration:none; padding-block:.4rem; position:relative;
  opacity:.82; transition:opacity .3s var(--entree); }
.entete__nav a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:0 50%;
  transition:transform .45s var(--entree); }
.entete__nav a:hover{ opacity:1; }
.entete__nav a:hover::after,.entete__nav a[aria-current="page"]::after{ transform:scaleX(1); }
.entete__nav a[aria-current="page"]{ opacity:1; }
.entete__droite{ display:flex; align-items:center; gap:clamp(1rem,2vw,2rem); }
@media (max-width:1100px){ .entete__nav{ display:none; } }

/* ============ SECTION SANS HERO ============ */
.section--haut{ padding-top:calc(var(--entete) + clamp(2.5rem,5vw,4.5rem)); }
.fil{ font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--vert-clair); margin-bottom:clamp(2rem,4vw,3rem); }
.fil a{ text-decoration:none; border-bottom:1px solid var(--filet); }
.fil [aria-current]{ color:var(--vert); }

/* ============ FICHE PRODUIT ============ */
.fiche{ display:grid; gap:clamp(2.5rem,5vw,5rem); align-items:start; position:relative; z-index:1; }
@media (min-width:960px){ .fiche{ grid-template-columns:minmax(0,.85fr) minmax(0,1fr); } }
.fiche__visuel{ display:grid; justify-items:center; gap:2rem;
  padding:clamp(2rem,4vw,3.5rem); background:var(--creme-2); }
.fiche__flacon img{ height:clamp(300px,44vh,520px); width:auto;
  filter:drop-shadow(0 26px 34px rgba(38,76,65,.2)); }
.fiche__etiquette{ width:min(100%,220px); }
.fiche__infos h1{ font-size:clamp(2.2rem,1rem + 3.5vw,3.7rem); margin-top:.3rem; }
.fiche__note{ margin:1.8rem 0 1.4rem; max-width:46ch; }
.fiche__faits{ margin-top:2.6rem; padding-top:2rem; border-top:1px solid var(--filet); }

/* ---- bloc de commande ---- */
.commande{ margin-top:2.4rem; padding:clamp(1.5rem,3vw,2.2rem);
  border:1px solid var(--filet); display:grid; gap:1.2rem; }
.commande__ligne{ display:flex; flex-wrap:wrap; gap:1.2rem 2rem; }
.commande__ligne .champ{ flex:1 1 12rem; }
.champ--qte{ flex:0 0 auto; }
.compteur{ display:inline-flex; align-items:stretch; border:1px solid var(--filet); }
.compteur__bouton{ width:2.8rem; background:none; border:none; cursor:pointer; color:var(--vert);
  font:inherit; font-size:1.1rem; line-height:1; transition:background .3s var(--entree); }
.compteur__bouton:hover{ background:var(--creme-2); }
.compteur input{ width:3.4rem; text-align:center; border:none; border-inline:1px solid var(--filet);
  background:transparent; font:inherit; color:var(--vert); padding:.85rem 0;
  -moz-appearance:textfield; appearance:textfield; }
.compteur input::-webkit-outer-spin-button,
.compteur input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.commande__prix{ margin:0; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--vert-clair); }
.commande__actions{ display:flex; flex-wrap:wrap; gap:.8rem; }
.commande__mention{ margin:0; font-size:.9rem; color:var(--vert-clair); max-width:48ch; }

/* ---- bouton compact, sous les bouteilles ---- */
.bouton--mini{ padding:.8rem 1.7rem; font-size:.78rem; }

/* ---- vitrine : les bouteilles cliquables ---- */
@media (min-width:820px){ .vitrine{ grid-template-columns:repeat(4,1fr); } }
@media (min-width:820px){ .vitrine--trois{ grid-template-columns:repeat(3,1fr); } }
.flacon__image{ display:block; }
.flacon__nom{ margin:0; }
.flacon__nom a{ text-decoration:none; transition:color .3s var(--entree); }
.flacon:hover .flacon__nom a{ color:var(--brique); }
.cuvee__nom a{ text-decoration:none; }
.cuvee__nom a:hover{ border-bottom:1px solid currentColor; }
.cuvee .bouton{ margin-top:1.6rem; }

/* ============ POP-UP ÉVÈNEMENT ============ */
.salon__boite{ display:grid; max-width:54rem; padding:0; overflow:hidden; }
@media (min-width:720px){ .salon__boite{ grid-template-columns:.72fr 1fr; } }
.salon__photo{ display:none; }
@media (min-width:720px){
  .salon__photo{ display:block; position:relative; }
  .salon__photo img{ width:100%; height:100%; object-fit:cover; }
}
.salon__texte{ padding:clamp(2rem,4vw,3rem); }
.salon__texte h2{ font-size:clamp(1.5rem,1rem + 1.8vw,2.2rem); }
.salon__date time{ display:block; }
.salon__actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }
.salon__fermer{ z-index:2; }

/* ============ RESPIRATION ENTRE DEUX BLOCS D'UNE MÊME SECTION ============
   Sans cela, le libellé du bloc suivant vient coller au bouton du précédent. */
.section > .enveloppe + .enveloppe{ margin-top:clamp(3.5rem,8vw,7rem); }
.section > .enveloppe + .scene,
.section > .scene + .enveloppe{ margin-top:clamp(2rem,5vw,4rem); }
.bloc--decale + .bloc,
.bloc + .bloc--decale{ margin-top:clamp(3.5rem,8vw,7rem); }

/* ============ PANIER DANS L'EN-TÊTE ============ */
.entete__panier{ position:relative; display:inline-flex; align-items:center; gap:.55rem;
  text-decoration:none; font-size:.76rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.5rem 0; opacity:.85; transition:opacity .3s var(--entree); }
.entete__panier:hover{ opacity:1; }
.entete__panier svg{ width:18px; height:18px; }
.entete__panier[data-vide="true"] .entete__pastille{ display:none; }
.entete__pastille{ min-width:1.5rem; height:1.5rem; padding:0 .4rem; border-radius:999px;
  background:var(--brique); color:var(--creme); display:grid; place-items:center;
  font-size:.7rem; letter-spacing:0; font-variant-numeric:tabular-nums; }
.entete--transparent .entete__pastille{ background:var(--creme); color:var(--vert); }
@media (max-width:620px){ .entete__panier span:not(.entete__pastille){ display:none; } }

/* ============ PARCOURS DE RÉSERVATION ============ */
.jalons{ display:flex; flex-wrap:wrap; gap:.7rem 2rem; list-style:none; margin:0 0 clamp(2.5rem,5vw,4rem);
  padding:0; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--vert-clair); }
.jalons li{ display:flex; align-items:center; gap:.7rem; }
.jalons li::before{ content:attr(data-num); width:1.7rem; height:1.7rem; border-radius:50%;
  border:1px solid var(--filet); display:grid; place-items:center; font-size:.68rem; letter-spacing:0; }
.jalons li[data-etat="actif"]{ color:var(--vert); }
.jalons li[data-etat="actif"]::before{ background:var(--vert); border-color:var(--vert); color:var(--creme); }
.jalons li[data-etat="fait"]::before{ content:"\2713"; background:var(--vert-clair);
  border-color:var(--vert-clair); color:var(--creme); }

.panneau[hidden]{ display:none; }
.panier{ display:grid; gap:0; border-top:1px solid var(--filet); }
.panier__ligne{ display:grid; gap:1rem 1.6rem; align-items:center;
  grid-template-columns:auto 1fr; padding:clamp(1.2rem,2.5vw,1.8rem) 0;
  border-bottom:1px solid var(--filet); }
@media (min-width:760px){ .panier__ligne{ grid-template-columns:auto 1fr auto auto; } }
.panier__vignette{ width:54px; }
.panier__nom{ margin:0; font-family:var(--serif); font-size:1.45rem; font-weight:300; }
.panier__nom a{ text-decoration:none; }
.panier__format{ margin:.35rem 0 0; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--vert-clair); }
.panier__retirer{ background:none; border:none; cursor:pointer; color:var(--vert-clair);
  font:inherit; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:underline; text-underline-offset:3px; padding:.4rem 0; }
.panier__retirer:hover{ color:var(--brique); }
.panier__vide{ padding:clamp(2.5rem,5vw,4rem) 0; border-bottom:1px solid var(--filet); }

.encadre{ margin-top:2.5rem; padding:clamp(1.4rem,3vw,2rem); border:1px solid var(--filet);
  background:var(--creme-2); max-width:60ch; }
.encadre p{ margin:0; font-size:1.02rem; }
.encadre strong{ font-weight:400; color:var(--terracotta); }

.recap{ margin:0 0 2.5rem; padding:0; list-style:none; border-top:1px solid var(--filet); }
.recap li{ display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between;
  padding:.9rem 0; border-bottom:1px solid var(--filet); }
.recap dt{ color:var(--vert-clair); }
.recap__cle{ font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--vert-clair); }

.merci{ display:grid; gap:1.4rem; justify-items:start; max-width:52rem; }
.merci__pastille{ width:3.6rem; height:3.6rem; border-radius:50%; background:var(--vert);
  color:var(--creme); display:grid; place-items:center; font-size:1.5rem; }

/* ---- d'une page à l'autre : le logo seul, très bref ---- */
.loader[data-bref="true"]{ grid-template-rows:1fr; transition:opacity .3s ease, visibility .3s; }
.loader[data-bref="true"] .loader__centre,
.loader[data-bref="true"] .loader__phrase{ display:none; }
.loader[data-bref="true"] .loader__logo{ align-self:center; animation:logoParait .26s var(--entree) both; }
@keyframes logoParait{ from{ opacity:0; transform:scale(.97); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .loader[data-bref="true"] .loader__logo{ animation:none; } }
.commande__ajout{ margin:0; font-size:.94rem; color:var(--terracotta); }
.commande__ajout a{ text-decoration:underline; text-underline-offset:3px; }

/* ============================================================
   RESPONSIVE — passe complète
   Le rail disparaît sous 900px, l'en-tête se compacte, et les
   grilles retombent sur une colonne sans jamais faire déborder
   la page horizontalement.
   ============================================================ */

/* ---- tablette ---- */
@media (max-width:1100px){
  .entete__interieur{ gap:1rem; }
  .entete__gauche{ display:none; }          /* la nav visible a pris sa place */
  .cuvee__faits dt{ min-width:9rem; }
}

/* ---- sous 900px : plus de rail, en-tête à trois éléments ---- */
@media (max-width:900px){
  .entete__interieur{ justify-content:space-between; }
  .entete__logo-mobile{ margin-right:auto; }
  .entete__droite{ gap:1rem; }
  .menu{ inset:0; padding:calc(var(--entete) + 2rem) var(--marge) 2.5rem; align-content:start; }
  .menu__item span{ font-size:clamp(1.9rem,1rem + 6vw,3rem); }
  .menu__actions .bouton{ flex:1 1 14rem; }
  .loader__logo{ width:clamp(130px,42vw,190px); }
  .hero__contenu{ padding-top:calc(var(--entete) + 3rem); }
  .hero--court{ min-height:min(68vh,520px); }
  .appel{ text-align:left; }
  .appel__actions .bouton{ flex:1 1 15rem; }
  .fiche__visuel{ padding:2rem 1.2rem; }
  .fiche__flacon img{ height:clamp(260px,42vh,380px); }
  .salon__boite{ max-height:88dvh; overflow:auto; }
}

/* ---- téléphone ---- */
@media (max-width:640px){
  :root{ --entete:74px; }
  h1{ font-size:clamp(2.1rem,1rem + 8.5vw,3rem); }
  h2{ font-size:clamp(1.85rem,1rem + 7vw,2.6rem); }
  .enveloppe{ padding-inline:1.15rem; }
  .entete__logo-mobile img{ height:44px; }

  /* les boutons prennent toute la largeur : plus faciles à viser */
  .actions,.hero__actions,.commande__actions,.appel__actions,
  .pied__actions,.menu__actions,.salon__actions{ gap:.7rem; }
  .actions .bouton,.hero__actions .bouton,.commande__actions .bouton,
  .appel__actions .bouton,.menu__actions .bouton,.salon__actions .bouton{
    flex:1 1 100%; width:100%; }

  .vitrine{ gap:2.5rem; }
  .flacon__image{ width:min(60%,160px); }
  .cuvee{ padding:1.6rem 1.15rem; }
  .cuvee__visuel{ width:min(60%,150px); }
  .cuvee__faits div{ flex-direction:column; gap:.15rem; }
  .cuvee__faits dt{ min-width:0; font-size:.82rem; letter-spacing:.06em; }

  .faq summary{ gap:1rem; }
  .duo__media{ margin-top:0; }
  .etapes{ gap:.5rem; }
  .plein{ min-height:70vh; }
  .fantome{ font-size:clamp(3.4rem,20vw,7rem); }

  /* fiche produit */
  .fiche__visuel{ padding:1.6rem 1rem; gap:1.4rem; }
  .fiche__etiquette{ width:min(70%,180px); }
  .commande{ padding:1.2rem; }
  .commande__ligne{ gap:1rem; }
  .commande__ligne .champ{ flex:1 1 100%; }
  .champ--qte{ flex:1 1 100%; }
  .compteur{ width:100%; justify-content:space-between; }
  .compteur input{ flex:1; width:auto; }

  /* panier */
  .panier__ligne{ grid-template-columns:auto 1fr; row-gap:1.1rem; }
  .panier__ligne .compteur{ grid-column:1 / -1; width:100%; justify-content:space-between; }
  .panier__retirer{ grid-column:1 / -1; justify-self:start; }
  .panier__vignette{ width:44px; }
  .recap li{ flex-direction:column; gap:.2rem; }

  /* parcours */
  .jalons{ gap:.6rem 1.2rem; font-size:.72rem; letter-spacing:.1em; }
  .jalons li::before{ width:1.5rem; height:1.5rem; }

  /* pied de page */
  .pied__bas{ flex-direction:column; gap:1rem; }
  .fiche__faits dt{ min-width:0; }
}

/* ---- très petit écran : on ne garde que l'essentiel dans l'en-tête ---- */
@media (max-width:420px){
  .entete__logo-mobile img{ height:38px; }
  .entete__droite{ gap:.7rem; }
  .declencheur__mot{ display:none; }
  .entete .declencheur__traits{ width:26px; }
  .jalons li span,.jalons li{ font-size:.68rem; }
}

/* ---- écran bas de plafond (paysage sur téléphone) ---- */
@media (max-height:520px) and (orientation:landscape){
  .hero,.hero--court{ min-height:auto; padding-block:calc(var(--entete) + 2rem) 3rem; }
  .plein{ min-height:auto; padding-block:4rem; }
  .menu{ align-content:start; overflow:auto; }
}

/* ---- confort tactile : pas de survol, cibles plus grandes ---- */
@media (pointer:coarse){
  .bouton,.entete__cta{ min-height:48px; }
  .compteur__bouton{ min-width:3rem; min-height:48px; }
  .panier__retirer,.faq summary{ min-height:44px; }
  .menu__item{ padding-block:.7rem; }
}

/* ---- vitrine : deux colonnes dès 560px, quatre à partir de 820px ---- */
@media (min-width:560px) and (max-width:819px){
  .vitrine,.vitrine--trois{ grid-template-columns:repeat(2,1fr); }
  .flacon__image{ width:min(70%,170px); }
}
@media (min-width:560px){
  .fiche__visuel{ padding-block:clamp(2rem,4vw,3.5rem); }
}

/* ---- fiche technique : le libellé passe au-dessus quand la carte est étroite
        (requête de conteneur : la carte décide, pas la fenêtre) ---- */
.cuvee,.fiche__infos{ container-type:inline-size; }
@container (max-width:36rem){
  .cuvee__faits div{ flex-direction:column; gap:.15rem; }
  .cuvee__faits dt{ min-width:0; font-size:.86rem; letter-spacing:.04em; }
  .cuvee__faits dd{ padding-bottom:.35rem; }
}
@supports not (container-type:inline-size){
  @media (max-width:1240px){
    .cuvee__faits div{ flex-direction:column; gap:.15rem; }
    .cuvee__faits dt{ min-width:0; }
  }
}


/* ============================================================
   SÉPARATEUR — le trait EST le fil de palissage, la grappe y pend.
   Il ne décore pas un vide : il marque un changement de sujet, à
   l'endroit précis où le regard doit reprendre son souffle.
   ============================================================ */
.separateur{ display:flex; align-items:center; gap:clamp(1rem,2.5vw,1.6rem);
  color:var(--vert-clair); }
.separateur__fil{ flex:1; height:1px; background:var(--filet);
  transform:scaleX(0); transition:transform 1.1s var(--entree); }
.separateur__fil--g{ transform-origin:100% 50%; }   /* part du centre vers la gauche */
.separateur__fil--d{ transform-origin:0 50%; }      /* et vers la droite */
.separateur.est-visible .separateur__fil{ transform:scaleX(1); }

.separateur__grappe{ flex:none; display:block; width:112px; height:109px;
  opacity:0; transform:translateY(-7px);
  transition:opacity .75s .3s var(--entree), transform .95s .3s var(--entree); }
.separateur.est-visible .separateur__grappe{ opacity:1; transform:none; }
.separateur__fil-svg{ stroke:var(--filet); }

@media (max-width:640px){
  .separateur{ margin-block:clamp(2.5rem,9vw,4rem); }
  .separateur__grappe{ width:86px; height:83px; }
}
@media (prefers-reduced-motion: reduce){
  .separateur__fil{ transform:none !important; transition:none; }
  .separateur__grappe{ opacity:1 !important; transform:none !important; transition:none; }
}

/* deux blocs séparés par une grappe n'ont plus besoin de la grande marge */

.pied__signature{ border-bottom:1px solid rgba(240,238,230,.35); }