/* =========================================================
   Domaine Benoît Homs — Tourouzelle, Aude
   Palette et marques reprises de l'identité du domaine :
   brun-noir, crème #EFF1E7, sable #CABDA2, carmin de la
   croix occitane « Made in Aquís » (#802030).
   ========================================================= */

:root{
  --nuit:      #171210;   /* fond principal, brun-noir */
  --nuit-2:    #1F1815;   /* surfaces */
  --brun:      #452E22;   /* brun profond du domaine */
  --olive:     #514A38;   /* olive-brun du domaine */
  --creme:     #EFF1E7;   /* crème du domaine */
  --sable:     #CABDA2;   /* sable du domaine */
  --pierre:    #7C7466;   /* texte secondaire sur fond clair */
  --cendre:    #9B8E7D;   /* texte secondaire sur fond sombre */
  --aquis:     #8C2338;   /* carmin de la croix occitane */
  --aquis-viv: #B44A5D;

  --fg: var(--creme);
  --bg: var(--nuit);
  --muted: var(--cendre);
  --rule: rgba(239,241,231,.15);

  --display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "Archivo", system-ui, -apple-system, "Helvetica Neue", sans-serif;

  --maxw: 1440px;
  --gutter: clamp(1.25rem, 4.4vw, 4.5rem);
  --pad-y: clamp(6rem, 13vh, 11rem);

  --ease: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-variation-settings:"wdth" 100;
  font-size:clamp(.95rem,.9rem + .2vw,1.0625rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background-color .7s var(--ease), color .7s var(--ease);
}

body.is-locked{ overflow:hidden; }

/* Bascule de tonalité quand une section claire occupe l'écran */
body.tone-light{
  --bg: var(--creme);
  --fg: var(--nuit);
  --muted: var(--pierre);
  --rule: rgba(23,18,16,.16);
}

img,video{ display:block; max-width:100%; }
a{ color:inherit; }

::selection{ background:var(--aquis); color:#fff; }

:where(a,button,input,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--aquis-viv);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:fixed; top:0; left:0; z-index:200;
  transform:translateY(-120%);
  background:var(--aquis); color:#fff;
  padding:.85rem 1.4rem; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none;
}
.skip:focus{ transform:none; }

.wrap{
  width:100%; max-width:var(--maxw);
  margin-inline:auto; padding-inline:var(--gutter);
}

/* ---------- Typographie ---------- */

.eyebrow{
  margin:0 0 clamp(1.5rem,3vw,2.6rem);
  font-size:.6875rem; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase;
  font-variation-settings:"wdth" 112;
  color:var(--muted);
}
.eyebrow s, .film__meta s, .hero__eyebrow s, .foot__legal s,
.savoir__counter s, .cuvee__type s{
  display:inline-block; width:1.6em; height:1px; vertical-align:middle;
  background:currentColor; opacity:.4; margin-inline:.55em; text-decoration:none;
}

.h2{
  margin:0;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.4rem,6.4vw,5.4rem);
  line-height:1;
  letter-spacing:-.014em;
  font-variation-settings:"opsz" 60;
}
.h2 em{ font-style:italic; color:var(--aquis-viv); }
body.tone-light .h2 em{ color:var(--aquis); }
.h2 > span{ display:block; }

.lede{
  max-width:48ch;
  margin:1.6rem 0 0;
  font-size:clamp(1rem,.95rem + .35vw,1.2rem);
  line-height:1.6;
  color:var(--muted);
}

.link{
  color:var(--aquis-viv);
  text-decoration:none;
  border-bottom:1px solid currentColor;
  padding-bottom:1px;
  transition:opacity .3s;
}
.link:hover{ opacity:.7; }
body.tone-light .link{ color:var(--aquis); }

/* ---------- Boutons ---------- */

.btn{
  --btn-bg: var(--aquis);
  --btn-fg: #F7F2EC;
  display:inline-flex; align-items:center; gap:.7rem;
  padding:1.05rem 1.9rem;
  background:var(--btn-bg); color:var(--btn-fg);
  font-size:.75rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  font-variation-settings:"wdth" 108;
  text-decoration:none;
  border:1px solid var(--btn-bg);
  transition:background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease),
             transform .5s var(--ease);
  will-change:transform;
}
.btn:hover{ --btn-bg: var(--aquis-viv); }

.btn--ghost{
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  border-color:var(--rule);
}
.btn--ghost:hover{ --btn-bg: transparent; --btn-fg: var(--fg); border-color:currentColor; }

.btn--sm{ padding:.75rem 1.25rem; font-size:.6875rem; }

.btn__tri, .playbtn__tri{
  width:0; height:0;
  border-left:7px solid currentColor;
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
}

/* =========================================================
   Courbes de niveau + grain
   ========================================================= */

/* Courbes de niveau des coteaux — se dessinent au chargement, dérivent au scroll */
.topo{
  position:fixed; top:-6%; left:0;
  width:100%; height:112%;
  z-index:6; pointer-events:none;
  color:var(--fg); opacity:.07;
  transition:color .7s var(--ease);
  will-change:transform;
}
.topo path{
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset 2.6s var(--ease);
}
.topo path:nth-child(2){ transition-delay:.12s; }
.topo path:nth-child(3){ transition-delay:.24s; }
.topo path:nth-child(4){ transition-delay:.36s; }
.topo path:nth-child(5){ transition-delay:.48s; }
.topo path:nth-child(6){ transition-delay:.6s; }
.topo path:nth-child(7){ transition-delay:.5s; }
.topo path:nth-child(8){ transition-delay:.65s; }
.topo path:nth-child(9){ transition-delay:.8s; }
body.is-ready .topo path{ stroke-dashoffset:0; }

/* Fil d'avancement de lecture */
.progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:120; pointer-events:none; }
.progress b{
  display:block; height:100%;
  background:linear-gradient(to right, var(--aquis), var(--aquis-viv));
  transform:scaleX(0); transform-origin:left;
}

/* Curseur personnalisé */
.cursor{
  position:fixed; left:0; top:0; z-index:300;
  width:40px; height:40px; margin:-20px 0 0 -20px;
  display:none; align-items:center; justify-content:center;
  border:1px solid color-mix(in srgb, var(--fg) 55%, transparent);
  border-radius:50%;
  pointer-events:none;
  transition:width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease),
             background-color .35s var(--ease), border-color .35s var(--ease), opacity .3s;
}
.cursor::after{
  content:""; position:absolute;
  width:5px; height:5px; border-radius:50%;
  background:var(--aquis-viv);
}
.cursor.is-hover{ width:64px; height:64px; margin:-32px 0 0 -32px; border-color:var(--aquis-viv); }
.cursor.is-label{
  width:88px; height:88px; margin:-44px 0 0 -44px;
  background:color-mix(in srgb, var(--aquis) 82%, transparent);
  border-color:transparent;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.cursor.is-label::after{ display:none; }
.cursor__label{
  font-size:.5625rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase;
  color:#F7F2EC; opacity:0; transition:opacity .3s;
}
.cursor.is-label .cursor__label{ opacity:1; }

@media (pointer:fine) and (prefers-reduced-motion:no-preference){
  body, a, button{ cursor:none; }
  video{ cursor:auto; }
  .cursor{ display:flex; }
}

/* Frise des cuvées en typographie contour */
.marquee{
  position:relative; z-index:4;
  background:var(--nuit);
  border-block:1px solid var(--rule);
  padding:clamp(1.2rem,2.4vw,2.2rem) 0;
  overflow:hidden;
  will-change:transform;
}
.marquee__track{
  display:flex; align-items:center;
  gap:clamp(2.2rem,4.5vw,4.5rem);
  width:max-content;
  animation:mq 44s linear infinite;
}
.marquee span{
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:clamp(2.4rem,6.5vw,6rem); line-height:1.15;
  white-space:nowrap;
  color:transparent;
  -webkit-text-stroke:1px rgba(239,241,231,.32);
}
.marquee i{
  flex:none; width:9px; height:9px;
  background:var(--aquis); transform:rotate(45deg);
}
@keyframes mq{ to{ transform:translateX(-50%); } }

/* Titres révélés mot à mot */
.split{ opacity:1 !important; transform:none !important; }
.w{
  display:inline-block; overflow:hidden; vertical-align:top;
  padding:.18em .08em .12em 0; margin:-.18em -.08em -.12em 0;
}
.w i{
  display:inline-block; font-style:inherit;
  transform:translateY(115%);
  transition:transform .95s var(--ease) calc(var(--wi,0) * 55ms);
}
.split.is-in .w i{ transform:none; }

/* Images révélées au rideau */
.manifeste__portrait img, .visite__media img, .visite__kayak img{
  clip-path:inset(100% 0 0 0);
  transform:scale(1.12);
  transition:clip-path 1.15s var(--ease), transform 1.5s var(--ease);
}
.manifeste__portrait.is-in img, .visite__media.is-in img, .visite__kayak.is-in img{
  clip-path:inset(0 0 0 0);
  transform:none;
}

.grain{
  position:fixed; inset:0; z-index:7; pointer-events:none;
  opacity:.32; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================================================
   Navigation
   ========================================================= */

.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:transform .6s var(--ease), background-color .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  border-bottom-color:var(--rule);
}
.nav.is-hidden{ transform:translateY(-102%); }

.nav__inner{
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(.7rem,1.4vw,1.1rem) var(--gutter);
  display:flex; align-items:center; gap:2rem;
}

.nav__brand{ display:flex; align-items:center; gap:.85rem; text-decoration:none; margin-right:auto; }
.nav__logo{ width:clamp(38px,4vw,52px); }
body.tone-light .nav__logo{ filter:invert(1) brightness(.32) saturate(0); }
.nav__brandtext{
  font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
  font-variation-settings:"wdth" 108;
  white-space:nowrap;
}
.nav__brandtext em{ font-style:normal; font-weight:600; }

.nav__links{ display:flex; gap:clamp(1.1rem,2.2vw,2.2rem); }
.nav__links a{
  position:relative;
  font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
  font-variation-settings:"wdth" 104;
  text-decoration:none;
  color:color-mix(in srgb, var(--fg) 74%, transparent);
  transition:color .35s;
  padding-block:.25rem;
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease);
}
.nav__links a:hover{ color:var(--fg); }
.nav__links a:hover::after{ transform:scaleX(1); }

.burger{
  display:none; width:44px; height:44px; padding:0;
  background:none; border:1px solid var(--rule); cursor:pointer;
  position:relative;
}
.burger span{
  position:absolute; left:12px; right:12px; height:1px; background:var(--fg);
  transition:transform .45s var(--ease), opacity .3s;
}
.burger span:nth-child(1){ top:18px; }
.burger span:nth-child(2){ top:24px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3px) rotate(-45deg); }

.menu[hidden]{ display:none; }
.menu{
  position:fixed; inset:0; z-index:99;
  background:var(--nuit);
  padding:clamp(6rem,16vh,9rem) var(--gutter) var(--gutter);
  display:flex; flex-direction:column; justify-content:space-between;
  opacity:0; transition:opacity .5s var(--ease);
  overflow-y:auto;
}
.menu.is-open{ opacity:1; }
.menu__list{ display:flex; flex-direction:column; }
.menu__list a{
  display:flex; align-items:baseline; gap:1rem;
  padding:.5rem 0;
  font-family:var(--display); font-size:clamp(1.75rem,7.5vw,2.9rem); line-height:1.12;
  color:var(--creme); text-decoration:none;
  border-bottom:1px solid rgba(239,241,231,.1);
}
.menu__list i{
  font-family:var(--sans); font-style:normal;
  font-size:.625rem; letter-spacing:.2em; color:var(--aquis-viv);
}
.menu__foot{
  display:flex; flex-wrap:wrap; gap:1.5rem 3rem;
  margin-top:2rem;
  font-size:.8125rem; color:var(--cendre);
}
.menu__foot a{ text-decoration:none; }

/* =========================================================
   01 — Héros
   ========================================================= */

.hero{
  position:relative; z-index:4;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 0 clamp(1.5rem,3vw,2.5rem);
  overflow:hidden;
}
.hero__media{
  position:absolute; inset:-8% 0 -8%; z-index:-2;
  transition:transform 1.6s var(--ease);
  will-change:transform;
}
.hero__media img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(var(--hs,1.06)) translateY(var(--hy,0px));
  filter:saturate(1.08) contrast(1.06);
  will-change:transform;
}
.hero__gl{ position:absolute; inset:0; width:100%; height:100%; display:none; }
.hero__media.is-gl img{ visibility:hidden; }
.hero__media.is-gl .hero__gl{
  display:block;
  transform:scale(var(--hs,1.06)) translateY(var(--hy,0px));
  filter:saturate(1.08) contrast(1.06);
  will-change:transform;
}
.hero__veil{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to bottom, rgba(23,18,16,.72) 0%, rgba(23,18,16,.32) 13%, rgba(23,18,16,.06) 28%, transparent 44%),
    linear-gradient(to top, var(--nuit) 2%, rgba(23,18,16,.78) 30%, rgba(23,18,16,.38) 54%, rgba(23,18,16,.1) 74%, transparent 88%),
    radial-gradient(135% 105% at 50% 40%, transparent 55%, rgba(12,8,7,.5) 100%),
    radial-gradient(120% 80% at 18% 100%, rgba(140,35,56,.26), transparent 60%);
}

.hero__body{
  max-width:var(--maxw); width:100%;
  margin-inline:auto; padding-inline:var(--gutter);
  padding-bottom:clamp(2.5rem,6vw,4.5rem);
  text-shadow:0 1px 24px rgba(23,18,16,.6), 0 1px 3px rgba(23,18,16,.35);
  will-change:transform, opacity;
}
.hero__eyebrow{ margin-bottom:clamp(1rem,2.2vw,1.6rem); color:var(--sable); }

.hero__title{
  margin:0;
  font-family:var(--display); font-weight:400;
  font-size:clamp(3.1rem,12.2vw,11.5rem);
  line-height:.88; letter-spacing:-.028em;
  font-variation-settings:"opsz" 72;
}
.hero__title em{ font-style:italic; }
/* la boîte de découpe déborde du texte pour ne rogner ni accents ni jambages ;
   les marges négatives annulent l'effet sur la mise en page */
.ln{
  display:block; overflow:hidden;
  padding:.18em 0 .12em;
  margin:-.18em 0 -.12em;
}
.ln > span{
  display:block;
  transform:translateY(110%);
  transition:transform 1.15s var(--ease);
}
body.is-ready .ln:nth-child(1) > span{ transition-delay:.15s; transform:none; }
body.is-ready .ln:nth-child(2) > span{ transition-delay:.28s; transform:none; }

.hero__kicker{
  margin:.9rem 0 0;
  font-family:var(--display); font-style:italic;
  font-size:clamp(1.1rem,2.4vw,1.75rem);
  color:var(--sable);
  opacity:0; transform:translateY(16px);
  transition:opacity .9s var(--ease) .48s, transform .9s var(--ease) .48s;
}

.hero__lede{
  margin:clamp(1.2rem,2.4vw,1.8rem) 0 0;
  max-width:46ch;
  font-size:clamp(.95rem,.9rem + .3vw,1.1rem);
  line-height:1.6;
  color:var(--creme);
  opacity:0; transform:translateY(18px);
  transition:opacity .9s var(--ease) .58s, transform .9s var(--ease) .58s;
}
.hero__lede em{ font-style:italic; color:var(--sable); }

.hero__actions{
  display:flex; flex-wrap:wrap; gap:.85rem;
  margin-top:clamp(1.8rem,3.5vw,2.6rem);
  opacity:0; transform:translateY(18px);
  transition:opacity .9s var(--ease) .7s, transform .9s var(--ease) .7s;
}
body.is-ready .hero__kicker,
body.is-ready .hero__lede,
body.is-ready .hero__actions{ opacity:1; transform:none; }

.hero__facts{
  max-width:var(--maxw); width:100%;
  margin:0 auto; padding-inline:var(--gutter);
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--rule);
  opacity:0; transform:translateY(14px);
  transition:opacity .9s var(--ease) .9s, transform .9s var(--ease) .9s;
}
body.is-ready .hero__facts{ opacity:1; transform:none; }
.hero__facts > div{ padding:1.1rem 1.2rem 0 0; }
.hero__facts dt{
  font-size:.625rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--cendre); font-variation-settings:"wdth" 112;
}
.hero__facts dd{
  margin:.35rem 0 0;
  font-family:var(--display); font-size:clamp(1rem,1.9vw,1.5rem);
  color:var(--creme);
  font-variation-settings:"opsz" 32;
}

.hero__badge{
  position:absolute; top:clamp(6rem,12vh,8.5rem); right:var(--gutter);
  width:clamp(104px,11vw,150px); aspect-ratio:1;
  opacity:0;
  transition:opacity 1s var(--ease) 1s;
}
body.is-ready .hero__badge{ opacity:.94; }
.hero__badge img{
  position:absolute; inset:20%;
  width:60%; height:60%; object-fit:contain;
  background:var(--creme);
  border-radius:50%;
  padding:.6rem;
  box-shadow:0 6px 26px rgba(23,18,16,.5);
}
.hero__ring{
  position:absolute; inset:0; width:100%; height:100%;
  color:var(--sable);
  animation:ringspin 28s linear infinite;
}
.hero__ring text{
  font-family:var(--sans); font-size:9px;
  letter-spacing:.16em; text-transform:uppercase;
  fill:currentColor;
}
@keyframes ringspin{ to{ transform:rotate(1turn); } }

.scrollcue{
  position:absolute; right:var(--gutter); bottom:clamp(7rem,14vh,10rem);
  width:1px; height:clamp(48px,7vh,80px);
  display:block; overflow:hidden;
}
.scrollcue__line{
  display:block; width:100%; height:100%;
  background:var(--creme); opacity:.5;
  transform-origin:top;
  animation:cue 2.6s var(--ease) infinite;
}
@keyframes cue{
  0%{ transform:scaleY(0); transform-origin:top; }
  45%{ transform:scaleY(1); transform-origin:top; }
  55%{ transform:scaleY(1); transform-origin:bottom; }
  100%{ transform:scaleY(0); transform-origin:bottom; }
}

/* =========================================================
   02 — Le domaine
   ========================================================= */

.manifeste{
  position:relative; z-index:4;
  padding-block:var(--pad-y) clamp(4rem,8vw,7rem);
  background:var(--nuit);
}
.manifeste__grid{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2rem,5vw,5rem);
  align-items:start;
}
.manifeste__title{
  margin:0;
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.8rem,4vw,3.4rem);
  line-height:1.1; letter-spacing:-.012em;
  font-variation-settings:"opsz" 48;
}
.manifeste__title > span{ display:block; }
.manifeste__title em{ font-style:italic; color:var(--aquis-viv); }

.manifeste__cols{
  display:grid; gap:1.3rem;
  margin-top:clamp(2rem,4vw,3rem);
  max-width:62ch;
}
.manifeste__cols p{ margin:0; color:var(--cendre); }
.manifeste__cols em{ font-style:italic; color:var(--sable); }

.signe{
  margin:clamp(1.8rem,3vw,2.4rem) 0 0;
  font-family:var(--display); font-style:italic;
  font-size:1.05rem; color:var(--sable);
}

.manifeste__portrait{ margin:0; position:sticky; top:14vh; }
.manifeste__portrait img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  filter:contrast(1.05);
}
.manifeste__portrait figcaption{
  margin-top:.9rem;
  font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cendre); font-variation-settings:"wdth" 108;
}

/* =========================================================
   03 — Le film
   ========================================================= */

/* z-index 8 : au-dessus des courbes de niveau (6) et du grain (7),
   pour que rien ne vienne strier l'image du film */
.film{ position:relative; z-index:8; background:var(--nuit); }
.film__head{ padding-block:clamp(3rem,7vw,6rem) clamp(2rem,4vw,3.5rem); }
.film__meta{
  margin:1.4rem 0 0;
  font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cendre); font-variation-settings:"wdth" 110;
}

.film__track{ height:260vh; }
.film__sticky{
  position:sticky; top:0; height:100svh;
  display:grid; place-items:center;
}
.film__frame{
  --p:0;
  position:relative; margin:0; overflow:hidden;
  width:calc((44 + 56 * var(--p)) * 1vw);
  height:calc((52 + 48 * var(--p)) * 1svh);
  transform:rotate(calc((1 - var(--p)) * 1.4deg));
  border-radius:calc((4 - 4 * var(--p)) * 1px);
  box-shadow:0 calc((40 - 40 * var(--p)) * 1px) calc((90 - 90 * var(--p)) * 1px) rgba(0,0,0,.55);
  background:var(--nuit-2);
}
.film__frame video{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.14) translateY(var(--fy,0%));
  will-change:transform;
}
.film__frame::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to top, rgba(23,18,16,.8), rgba(23,18,16,.1) 48%),
    radial-gradient(46% 40% at 50% 48%, rgba(23,18,16,.42), transparent 70%);
  opacity:calc(1 - var(--p) * .18);
  transition:opacity .3s linear;
}
.film__frame.is-playing::after{ opacity:0; }

.film__overlay{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.9rem;
  transition:opacity .5s var(--ease), visibility .5s;
}
.film__frame.is-playing .film__overlay{ opacity:0; visibility:hidden; }

.playbtn{
  width:clamp(66px,7vw,92px); aspect-ratio:1;
  display:grid; place-items:center;
  border:1px solid rgba(239,241,231,.72);
  border-radius:50%;
  background:rgba(23,18,16,.42);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  color:var(--creme); cursor:pointer;
  transition:background-color .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease);
}
.playbtn:hover{ background:var(--aquis); border-color:var(--aquis); transform:scale(1.06); }
.playbtn__tri{ border-left-width:12px; border-top-width:8px; border-bottom-width:8px; margin-left:4px; }

/* Bouton son — visible seulement quand le film tourne */
.soundbtn{
  position:absolute; z-index:3;
  right:clamp(1rem,2.2vw,2rem); bottom:clamp(1rem,2.2vw,2rem);
  display:flex; align-items:center; gap:.7rem;
  padding:.7rem 1.1rem;
  background:rgba(23,18,16,.5);
  border:1px solid rgba(239,241,231,.4);
  border-radius:999px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:var(--creme); cursor:pointer;
  font-size:.625rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  font-variation-settings:"wdth" 108;
  opacity:0; visibility:hidden;
  transition:opacity .5s var(--ease), visibility .5s,
             background-color .4s var(--ease), border-color .4s var(--ease);
}
.film__frame.is-playing .soundbtn{ opacity:1; visibility:visible; }
.soundbtn:hover{ background:var(--aquis); border-color:var(--aquis); }

.soundbtn__ico{ display:flex; align-items:center; gap:2px; height:13px; }
.soundbtn__ico i{
  width:2px; height:3px; background:currentColor;
  transform-origin:center;
}
.soundbtn[aria-pressed="true"] .soundbtn__ico i{
  animation:eq .9s ease-in-out infinite alternate;
}
.soundbtn[aria-pressed="true"] .soundbtn__ico i:nth-child(1){ animation-delay:-.7s; }
.soundbtn[aria-pressed="true"] .soundbtn__ico i:nth-child(2){ animation-delay:-.45s; }
.soundbtn[aria-pressed="true"] .soundbtn__ico i:nth-child(3){ animation-delay:-.2s; }
.soundbtn[aria-pressed="true"] .soundbtn__ico i:nth-child(4){ animation-delay:-.55s; }
.soundbtn[aria-pressed="true"] .soundbtn__ico i:nth-child(5){ animation-delay:-.3s; }
@keyframes eq{ from{ height:3px; } to{ height:13px; } }

.film__caption{
  margin:0; text-align:center;
  font-size:.6875rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--creme); font-variation-settings:"wdth" 110;
  text-shadow:0 1px 18px rgba(23,18,16,.8);
}

/* =========================================================
   04 — Savoir-faire (section claire)
   ========================================================= */

.savoir{
  position:relative; z-index:4;
  background:var(--creme); color:var(--nuit);
  padding-block:var(--pad-y);
}
.savoir .eyebrow, .savoir .lede{ color:var(--pierre); }
.savoir .h2 em{ color:var(--aquis); }

.savoir__head{ max-width:60ch; margin-bottom:clamp(3rem,7vw,6rem); }

.savoir__grid{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5.5rem);
  align-items:start;
}

.savoir__media{ position:sticky; top:14vh; }
.savoir__stack{
  position:relative; width:100%; aspect-ratio:4/5;
  background:#E3DCCE; overflow:hidden;
}
.savoir__stack img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.06);
  transition:opacity 1s var(--ease), transform 1.6s var(--ease);
}
.savoir__stack img.is-active{ opacity:1; transform:scale(1); }

.savoir__counter{
  margin:1rem 0 0;
  font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--pierre); font-variation-settings:"wdth" 112;
}
.savoir__counter b{ color:var(--aquis); font-weight:600; }

.savoir__list{ list-style:none; margin:0; padding:0; }

.step{
  padding-block:clamp(2.5rem,6vw,4.5rem);
  border-top:1px solid rgba(23,18,16,.14);
  opacity:.42;
  transition:opacity .7s var(--ease);
}
.step:first-child{ border-top:0; padding-top:0; }
.step.is-current{ opacity:1; }

.step__shot{ display:none; }

.step__season{
  margin:0 0 .9rem;
  font-size:.625rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--aquis); font-variation-settings:"wdth" 112; font-weight:600;
}
.step__title{
  margin:0;
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.65rem,3.4vw,2.7rem);
  line-height:1.06; letter-spacing:-.008em;
  font-variation-settings:"opsz" 40;
}
.step__text{ margin:1rem 0 0; max-width:50ch; color:#5B5245; }
.step__tags{
  list-style:none; display:flex; flex-wrap:wrap; gap:.5rem;
  margin:1.4rem 0 0; padding:0;
}
.step__tags li{
  padding:.4rem .85rem;
  border:1px solid rgba(23,18,16,.18);
  font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--pierre); font-variation-settings:"wdth" 104;
}

/* =========================================================
   05 — Les vins
   ========================================================= */

.vins{
  position:relative; z-index:4;
  background:var(--nuit);
  padding-block:var(--pad-y);
}
.vins__head{ max-width:62ch; margin-bottom:clamp(3rem,6vw,5rem); }

/* Galerie des cuvées — verticale sur mobile, traversée horizontale sur grand écran */
.hscroll{ position:relative; }
.hscroll__sticky{ position:relative; }

.cuvees{
  display:flex; flex-direction:column;
  gap:1.2rem;
  padding-inline:var(--gutter);
}

.cuvee{
  position:relative;
  display:flex; flex-direction:column;
  padding:clamp(1.5rem,2vw,2.1rem);
  border:1px solid var(--rule);
  background:linear-gradient(to bottom, color-mix(in srgb, var(--robe) 13%, var(--nuit)), var(--nuit) 58%);
  transition:border-color .5s var(--ease), transform .6s var(--ease);
}
.cuvee:hover{
  border-color:color-mix(in srgb, var(--robe) 45%, transparent);
  transform:translateY(-6px);
}

.cuvee__idx{
  position:absolute; top:1.1rem; right:1.3rem;
  font-family:var(--display); font-style:italic;
  font-size:.9375rem; color:var(--cendre); opacity:.75;
}

.cuvee__shot{
  position:relative;
  height:clamp(170px,24svh,250px);
  display:flex; justify-content:center;
  margin:.4rem 0 1.4rem;
}
.cuvee__shot::before{
  content:""; position:absolute; inset:-18% -28%;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--robe) 55%, transparent), transparent 72%);
  opacity:.22; filter:blur(16px);
  transition:opacity .7s var(--ease);
  pointer-events:none;
}
.cuvee:hover .cuvee__shot::before{ opacity:.55; }
.cuvee__shot img{
  position:relative;
  height:100%; width:auto;
  filter:drop-shadow(0 22px 34px rgba(0,0,0,.62));
  transition:transform .8s var(--ease);
}
.cuvee:hover .cuvee__shot img{ transform:translateY(-8px) rotate(-2.5deg); }

.cuvee__body{ position:relative; flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.cuvee__body > :last-child{ margin-top:auto; }

@media (min-width:1000px){
  .hscroll__sticky{
    position:sticky; top:0;
    height:100svh;
    display:flex; align-items:center;
    overflow:hidden;
  }
  .cuvees{
    flex-direction:row; align-items:stretch;
    gap:clamp(1.2rem,1.8vw,2rem);
    width:max-content;
    will-change:transform;
  }
  .cuvee{ flex:0 0 clamp(330px,26vw,430px); }
}

.cuvee__type{
  margin:0;
  font-size:.625rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cendre); font-variation-settings:"wdth" 110;
}
.cuvee__name{
  margin:.7rem 0 0;
  font-family:var(--display); font-weight:400; font-style:italic;
  font-size:clamp(1.7rem,2.8vw,2.4rem);
  line-height:1.02; letter-spacing:-.01em;
  font-variation-settings:"opsz" 40;
}
.cuvee__price{
  margin:.5rem 0 0;
  font-size:.9375rem; font-weight:600; letter-spacing:.04em;
  color:var(--sable);
}
.cuvee__robe{
  display:block; height:4px; width:2.5rem;
  margin:1.2rem 0;
  background:var(--robe);
  box-shadow:0 0 0 1px rgba(239,241,231,.16);
  transition:width .8s var(--ease);
}
.cuvee:hover .cuvee__robe{ width:100%; }

.cuvee__note{ margin:0 0 1.6rem; color:var(--cendre); font-size:.9375rem; }

.cuvee__todo{
  margin:0;
  padding:.9rem 1rem;
  border:1px dashed var(--rule);
  font-size:.75rem; letter-spacing:.08em;
  color:var(--cendre);
}

.cuvee__specs{ margin:0; border-top:1px solid var(--rule); }
.cuvee__specs > div{
  display:grid; grid-template-columns:7.5rem 1fr; gap:1rem;
  padding:.6rem 0;
  border-bottom:1px solid var(--rule);
}
.cuvee__specs dt{
  font-size:.625rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cendre); font-variation-settings:"wdth" 110;
  padding-top:.2rem;
}
.cuvee__specs dd{ margin:0; font-size:.8125rem; }

.vins__foot{
  margin:clamp(2rem,4vw,3rem) 0 0;
  font-size:.8125rem; letter-spacing:.04em;
  color:var(--cendre);
}

/* =========================================================
   06 — Terroir
   ========================================================= */

.terroir{
  position:relative; z-index:4;
  padding-block:clamp(6rem,13vh,10rem) clamp(4rem,8vw,7rem);
  overflow:hidden;
  background:var(--nuit);
}
.terroir__media{ position:absolute; inset:0; z-index:0; }
.terroir__media img{
  width:100%; height:100%; object-fit:cover;
  opacity:.22; filter:grayscale(.55) contrast(1.05) brightness(.75) sepia(.2);
  transform:scale(1.08) translateY(var(--ty,0px));
  will-change:transform;
}
.terroir::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to bottom, var(--nuit), rgba(23,18,16,.55) 40%, var(--nuit));
}
.terroir__body{ position:relative; z-index:2; }
.terroir__head{ max-width:56ch; }
.terroir__title{ max-width:16ch; }
.terroir .lede{ color:var(--sable); }

/* --- Coupe de terroir --- */
.coupe{ margin:clamp(2.5rem,5vw,4.5rem) 0 0; }
.coupe__svg{
  width:100%; height:auto;
  color:var(--sable);
  overflow:visible;
}
.coupe figcaption{
  margin-top:1rem;
  font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--cendre); font-variation-settings:"wdth" 108;
}

.c-fill{ fill:rgba(23,18,16,.55); }
.c-calc{ opacity:.5; }
.c-brick{ stroke:var(--sable); stroke-width:1; opacity:.3; fill:none; }
.c-limonFill{ fill:color-mix(in srgb, var(--brun) 62%, transparent); }
.c-dot{ fill:var(--sable); opacity:.5; }
.c-strate{ fill:none; stroke:var(--sable); stroke-width:1; opacity:.4; stroke-dasharray:5 7; }

.c-surface{
  fill:none; stroke:var(--creme); stroke-width:2.2; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset 2.4s var(--ease) .2s;
}
.coupe.is-in .c-surface{ stroke-dashoffset:0; }

.c-vines path{
  fill:none; stroke:var(--creme); stroke-width:2; stroke-linecap:round;
  opacity:0; transform-box:fill-box; transform-origin:bottom;
  transform:scaleY(0);
  transition:opacity .5s var(--ease), transform .6s var(--ease);
}
.coupe.is-in .c-vines path{ opacity:.75; transform:none; }
.c-vines path:nth-child(1){ transition-delay:.85s } .c-vines path:nth-child(2){ transition-delay:.92s }
.c-vines path:nth-child(3){ transition-delay:.99s } .c-vines path:nth-child(4){ transition-delay:1.06s }
.c-vines path:nth-child(5){ transition-delay:1.13s } .c-vines path:nth-child(6){ transition-delay:1.2s }
.c-vines path:nth-child(7){ transition-delay:1.27s } .c-vines path:nth-child(8){ transition-delay:1.34s }
.c-vines path:nth-child(9){ transition-delay:1.41s } .c-vines path:nth-child(10){ transition-delay:1.48s }
.c-vines path:nth-child(11){ transition-delay:1.55s } .c-vines path:nth-child(12){ transition-delay:1.62s }
.c-vines path:nth-child(13){ transition-delay:1.69s } .c-vines path:nth-child(14){ transition-delay:1.76s }

.c-veg{ fill:var(--olive); opacity:0; transition:opacity 1s var(--ease) 1.5s; }
.coupe.is-in .c-veg{ opacity:.85; }

.c-sun circle{ fill:none; stroke:var(--aquis-viv); stroke-width:1.6; opacity:.9; }
.c-sun path{ fill:none; stroke:var(--aquis-viv); stroke-width:1.4; stroke-linecap:round; opacity:.7; }
.c-arc{
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset 1.8s var(--ease) .9s;
  opacity:.5 !important;
}
.coupe.is-in .c-arc{ stroke-dashoffset:0; }
.c-sunwash{ color:var(--aquis-viv); opacity:.45; }

.c-label text{
  fill:var(--creme);
  font-family:var(--sans); font-size:19px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
}
.c-label .c-sub{ fill:var(--cendre); letter-spacing:.1em; }
.c-lead{ stroke:var(--sable); stroke-width:1; opacity:.45; }
.c-sun-t{ fill:var(--aquis-viv) !important; }

/* --- Chiffres --- */
.terroir__stats{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px; margin:clamp(3rem,5vw,4.5rem) 0 0;
  background:var(--rule);
  border:1px solid var(--rule);
}
.terroir__stats > div{
  background:rgba(23,18,16,.72);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  padding:1.5rem 1.4rem 1.7rem;
}
.terroir__stats dt{
  font-size:.625rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--aquis-viv); font-variation-settings:"wdth" 112;
}
.terroir__stats dd{
  margin:.7rem 0 0;
  font-family:var(--display); font-size:clamp(1.05rem,1.7vw,1.45rem);
  line-height:1.28; color:var(--creme);
  font-variation-settings:"opsz" 32;
}
.terroir__stats dd s{
  display:inline-block; width:1.1em; height:1px; vertical-align:middle;
  background:currentColor; opacity:.45; margin-inline:.4em; text-decoration:none;
}

/* --- Cépages --- */
.cepages{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:1rem clamp(1.2rem,2.4vw,2.2rem);
  margin-top:clamp(1.8rem,3vw,2.6rem);
}
.cepages__k{
  margin:0;
  font-size:.625rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--cendre); font-variation-settings:"wdth" 112;
}
.cepages__list{ list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; margin:0; padding:0; }
.cepages__list li{
  padding:.45rem 1rem;
  border:1px solid var(--rule); border-radius:999px;
  font-family:var(--display); font-style:italic;
  font-size:.95rem; color:var(--sable);
  transition:border-color .4s var(--ease), color .4s var(--ease);
}
.cepages__list li:hover{ border-color:color-mix(in srgb, var(--aquis-viv) 60%, transparent); color:var(--creme); }

/* =========================================================
   07 — Visiter (section claire)
   ========================================================= */

.visite{
  position:relative; z-index:4;
  background:var(--creme); color:var(--nuit);
  padding-block:var(--pad-y);
}
.visite .eyebrow, .visite .lede{ color:var(--pierre); }
.visite .h2 em{ color:var(--aquis); }

.visite__grid{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5.5rem);
  align-items:start;
}
.visite__media{ margin:0; position:sticky; top:14vh; }
.visite__media img{ width:100%; aspect-ratio:4/5; object-fit:cover; }

.visite__offers{ margin:clamp(2.5rem,5vw,3.5rem) 0 0; }
.visite__offers > div{ padding:1.4rem 0; border-top:1px solid rgba(23,18,16,.14); }
.visite__offers > div:last-child{ border-bottom:1px solid rgba(23,18,16,.14); }
.visite__offers dt{
  font-family:var(--display); font-size:clamp(1.1rem,1.9vw,1.4rem);
  font-variation-settings:"opsz" 24;
}
.visite__offers dd{ margin:.45rem 0 0; color:var(--pierre); font-size:.9375rem; }
.visite__offers dd b{ color:var(--aquis); font-weight:600; white-space:nowrap; }

.visite__kayak{ margin:clamp(2rem,4vw,3rem) 0 0; }
.visite__kayak img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.visite__kayak figcaption{
  margin-top:.8rem;
  font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--pierre); font-variation-settings:"wdth" 106;
}

.visite__actions{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:clamp(2rem,4vw,2.8rem); }

/* Les sections claires ne dépendent pas de la bascule globale de tonalité */
.savoir .btn--ghost, .visite .btn--ghost{
  --btn-fg: var(--nuit);
  border-color:rgba(23,18,16,.24);
}
.savoir .btn--ghost:hover, .visite .btn--ghost:hover{ --btn-fg: var(--nuit); }

/* =========================================================
   08 — Avis Google
   ========================================================= */

.avis{
  position:relative; z-index:4;
  background:var(--nuit);
  padding-block:var(--pad-y) clamp(3rem,6vw,5rem);
  overflow:hidden;
}
.avis__head{ max-width:64ch; }

.score{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:.9rem clamp(1rem,2vw,1.6rem);
  margin-top:clamp(1.8rem,3vw,2.6rem);
}
.score__num{
  font-family:var(--display); font-size:clamp(2.4rem,4.5vw,3.6rem);
  line-height:1; color:var(--creme);
  font-variation-settings:"opsz" 48;
}
.score__stars, .avis__stars{ display:inline-flex; gap:3px; }
.score__stars i, .avis__stars i{
  width:1em; height:1em;
  background:#E3B341;
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.score__stars i{ font-size:1.15rem; }
.avis__stars i{ font-size:.8rem; }
.avis__stars--4 i:last-child{ background:rgba(239,241,231,.22); }
.score__meta{
  font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--cendre); font-variation-settings:"wdth" 110;
}
.score__meta s{
  display:inline-block; width:1.4em; height:1px; vertical-align:middle;
  background:currentColor; opacity:.4; margin-inline:.5em; text-decoration:none;
}

.avis__cols{
  display:grid; grid-template-columns:1fr;
  gap:clamp(1rem,1.6vw,1.5rem);
  max-width:var(--maxw); margin:clamp(3rem,5vw,4.5rem) auto 0;
  padding-inline:var(--gutter);
  height:clamp(400px,58vh,620px);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-image:linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
}
/* une seule colonne par défaut, les suivantes n'apparaissent qu'avec la place */
.avis__col{ position:relative; overflow:hidden; }
.avis__col:nth-child(n+2){ display:none; }
.avis__track{
  display:flex; flex-direction:column;
  gap:clamp(1rem,1.6vw,1.5rem);
  animation:avisUp var(--dur,44s) linear infinite;
  will-change:transform;
}
.avis__col--rev .avis__track{ animation-name:avisDown; }
.avis__cols:hover .avis__track{ animation-play-state:paused; }
@keyframes avisUp{ from{ transform:translateY(0); } to{ transform:translateY(-50%); } }
@keyframes avisDown{ from{ transform:translateY(-50%); } to{ transform:translateY(0); } }

.avis__card{
  padding:clamp(1.5rem,2.2vw,2rem);
  border:1px solid var(--rule);
  border-radius:18px;
  background:linear-gradient(160deg, rgba(239,241,231,.055), rgba(239,241,231,.015));
  box-shadow:0 18px 40px rgba(0,0,0,.3);
}
.avis__text{
  margin:1rem 0 0;
  font-size:.9375rem; line-height:1.62;
  color:var(--sable);
}
.avis__who{
  display:flex; align-items:center; gap:.85rem;
  margin-top:1.4rem; padding-top:1.2rem;
  border-top:1px solid var(--rule);
}
.avis__who img{ width:40px; height:40px; border-radius:50%; flex:none; }
.avis__who span{ display:flex; flex-direction:column; min-width:0; }
.avis__who b{ font-size:.875rem; font-weight:600; color:var(--creme); }
.avis__who i{
  font-style:normal; font-size:.6875rem;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--cendre); font-variation-settings:"wdth" 106;
  margin-top:.15rem;
}
.avis__who i s{
  display:inline-block; width:1em; height:1px; vertical-align:middle;
  background:currentColor; opacity:.5; margin-inline:.4em; text-decoration:none;
}

@media (min-width:700px){
  .avis__cols{ grid-template-columns:repeat(2,1fr); }
  .avis__col:nth-child(2){ display:block; }
}
@media (min-width:1080px){
  .avis__cols{ grid-template-columns:repeat(3,1fr); }
  .avis__col:nth-child(3){ display:block; }
}

/* =========================================================
   Carte de contact
   ========================================================= */

.ccard{
  position:relative;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.95fr);
  gap:clamp(2rem,4vw,4.5rem);
  align-items:center;
  margin-bottom:clamp(3rem,6vw,5rem);
  padding:clamp(2rem,4vw,4rem);
  border-radius:26px;
  overflow:hidden;
  background:
    radial-gradient(120% 140% at 8% 0%, rgba(140,35,56,.22), transparent 58%),
    linear-gradient(155deg, #221A17, #191311 62%);
  isolation:isolate;
}
/* filet dégradé qui tient lieu de bordure */
.ccard::before{
  content:""; position:absolute; inset:0; z-index:2;
  border-radius:inherit; padding:1px;
  background:linear-gradient(150deg,
    color-mix(in srgb, var(--aquis-viv) 70%, transparent),
    rgba(239,241,231,.16) 32%,
    rgba(239,241,231,.05) 60%,
    color-mix(in srgb, var(--sable) 40%, transparent));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}
/* halo qui suit le curseur */
.ccard::after{
  content:""; position:absolute; inset:-1px; z-index:0;
  border-radius:inherit;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),
    color-mix(in srgb, var(--aquis-viv) 24%, transparent), transparent 70%);
  opacity:0; transition:opacity .6s var(--ease);
  pointer-events:none;
}
.ccard:hover::after{ opacity:1; }

.ccard__mark{
  position:absolute; z-index:0;
  right:-4%; bottom:-22%;
  width:min(46%, 420px);
  opacity:.05;
  pointer-events:none;
}

.ccard__body, .ccard__rows{ position:relative; z-index:1; }

.ccard__title{
  margin:0;
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.1rem,4.4vw,3.6rem);
  line-height:1.02; letter-spacing:-.016em;
  font-variation-settings:"opsz" 48;
  color:var(--creme);
}
.ccard__title > span{ display:block; }
.ccard__title em{ font-style:italic; color:var(--aquis-viv); }

.ccard__lede{
  margin:1.3rem 0 0; max-width:42ch;
  color:var(--cendre);
}
.ccard__actions{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:clamp(1.8rem,3vw,2.4rem); }
.ccard .btn--ghost{ border-color:rgba(239,241,231,.24); }

/* --- Petit formulaire de contact --- */
.cform{ margin-top:clamp(1.6rem,2.6vw,2.2rem); max-width:34rem; }
.cform__row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem; }
.cform__f{ display:block; margin-top:.9rem; }
.cform__row .cform__f{ margin-top:0; }
.cform__f > span{
  display:block; margin-bottom:.4rem;
  font-size:.5625rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--cendre); font-variation-settings:"wdth" 112;
}
.cform input, .cform textarea{
  width:100%; display:block;
  padding:.7rem .9rem;
  background:rgba(239,241,231,.04);
  border:1px solid rgba(239,241,231,.14);
  border-radius:8px;
  color:var(--creme);
  font-family:var(--sans); font-size:.9375rem; line-height:1.5;
  transition:border-color .35s var(--ease), background-color .35s var(--ease);
}
.cform textarea{ resize:vertical; min-height:3.4rem; }
.cform input::placeholder, .cform textarea::placeholder{ color:rgba(155,142,125,.65); }
.cform input:hover, .cform textarea:hover{ border-color:rgba(239,241,231,.26); }
.cform input:focus, .cform textarea:focus{
  outline:none;
  border-color:var(--aquis-viv);
  background:rgba(239,241,231,.06);
}
.cform input[aria-invalid="true"], .cform textarea[aria-invalid="true"]{ border-color:var(--aquis-viv); }

.cform__send{ margin-top:1.1rem; }
.cform__note{
  margin:.9rem 0 0; min-height:1.2em;
  font-size:.75rem; letter-spacing:.04em;
  color:var(--sable);
}

.ccard__rows{ list-style:none; margin:0; padding:0; }
.ccard__rows li{
  display:grid; grid-template-columns:7.5rem 1fr;
  gap:.6rem 1.2rem; align-items:baseline;
  padding:1.05rem 0;
  border-bottom:1px solid rgba(239,241,231,.1);
}
.ccard__rows li:first-child{ border-top:1px solid rgba(239,241,231,.1); }
.ccard__k{
  font-size:.625rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--aquis-viv); font-variation-settings:"wdth" 112;
}
.ccard__v{
  display:inline-flex; align-items:baseline; gap:.5rem;
  font-family:var(--display); font-size:clamp(1rem,1.5vw,1.22rem);
  line-height:1.35; color:var(--creme); text-decoration:none;
  font-variation-settings:"opsz" 24;
  transition:color .35s var(--ease), transform .45s var(--ease);
}
a.ccard__v:hover{ color:var(--sable); transform:translateX(4px); }
.ccard__v--plain{ color:var(--sable); }
.ccard__arrow{
  font-size:.7em; opacity:0; transform:translate(-4px,2px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
a.ccard__v:hover .ccard__arrow{ opacity:.7; transform:none; }
.ccard__v s{
  display:inline-block; width:1em; height:1px; vertical-align:middle;
  background:currentColor; opacity:.4; margin-inline:.45em; text-decoration:none;
}

@media (max-width:900px){
  .ccard{ grid-template-columns:1fr; gap:2.5rem; }
  .ccard__mark{ display:none; }
}
@media (max-width:560px){
  .ccard{ padding:1.6rem 1.3rem; border-radius:18px; }
  .ccard__rows li{ grid-template-columns:1fr; gap:.2rem; }
  .cform__row{ grid-template-columns:1fr; gap:0; }
  .cform__row .cform__f + .cform__f{ margin-top:.9rem; }
  .cform__send{ width:100%; justify-content:center; }
}

/* =========================================================
   Pied de page
   ========================================================= */

.foot{
  position:relative; z-index:4;
  background:var(--nuit); color:var(--creme);
  padding-top:clamp(4rem,8vw,7rem);
  overflow:hidden;
}
.foot__grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:2rem clamp(1.5rem,3vw,3rem);
  padding-bottom:clamp(2.5rem,5vw,4rem);
}
.foot__label{
  margin:0 0 1rem;
  font-size:.625rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--aquis-viv); font-variation-settings:"wdth" 112;
}
.foot__col p{ margin:0; font-size:.875rem; line-height:1.8; color:var(--cendre); }
.foot__col a{ text-decoration:none; transition:color .3s; }
.foot__col a:hover{ color:var(--creme); }

.foot__labels{
  display:flex; align-items:center; gap:clamp(1.5rem,3vw,2.5rem);
  padding-bottom:clamp(2rem,4vw,3rem);
}
.foot__labels img{
  height:clamp(46px,5vw,64px); width:auto;
  padding:.5rem .75rem;
  background:#fff;
  object-fit:contain;
}

.foot__word{
  margin:0;
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:clamp(3.5rem,16vw,15rem);
  line-height:.82; letter-spacing:-.03em;
  color:transparent;
  -webkit-text-stroke:1px rgba(239,241,231,.16);
  white-space:nowrap;
  user-select:none;
  transform:translateY(.1em);
}

.foot__legal{
  position:relative; z-index:1; background:var(--nuit);
  border-top:1px solid var(--rule);
  padding-block:1.6rem clamp(1.6rem,3vw,2.4rem);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem 2rem;
}
.foot__legal p{ margin:0; font-size:.6875rem; letter-spacing:.06em; color:var(--cendre); }
.foot__legal a{ text-decoration:none; }
.foot__legal a:hover{ color:var(--creme); }

/* =========================================================
   Révélations au scroll
   ========================================================= */

[data-reveal]{
  opacity:0; transform:translateY(26px);
  transition:opacity .95s var(--ease) var(--d,0ms), transform .95s var(--ease) var(--d,0ms);
}
[data-reveal].is-in{ opacity:1; transform:none; }

/* =========================================================
   Adaptations
   ========================================================= */

@media (max-width:1080px){
  .nav__links{ display:none; }
  .nav__cta{ display:none; }
  .burger{ display:block; }
}

@media (max-width:900px){
  .hero__facts{ grid-template-columns:repeat(2,1fr); }
  .hero__facts > div{ padding-block:.9rem; }
  .hero__facts > div:nth-child(n+3){ border-top:1px solid var(--rule); }
  .hero__badge{ display:none; }
  .manifeste__grid{ grid-template-columns:1fr; }
  .manifeste__portrait{ position:static; order:-1; }
  .savoir__grid, .visite__grid{ grid-template-columns:1fr; }
  .savoir__media{ display:none; }
  .step{ opacity:1; }
  .step__shot{
    display:block; width:100%;
    aspect-ratio:3/2; object-fit:cover;
    margin-bottom:1.6rem;
  }
  .step:first-child .step__shot{ margin-top:.5rem; }
  .visite__media{ position:static; }
  .visite__media img{ aspect-ratio:3/2; }
  .foot__grid{ grid-template-columns:repeat(2,1fr); }
  .film__track{ height:200vh; }
  .film__frame{
    width:calc((86 + 14 * var(--p)) * 1vw);
    height:calc((42 + 38 * var(--p)) * 1svh);
  }
  .terroir__stats{ grid-template-columns:repeat(2,1fr); }
  .c-label text{ font-size:26px; }
  .scrollcue{ display:none; }
}

@media (max-width:560px){
  .terroir__stats{ grid-template-columns:1fr; }
  /* les libellés grossissent quand le schéma rétrécit, les suffixes sautent */
  .c-label text{ font-size:31px; }
  .c-label .c-sub{ display:none; }
  .foot__grid{ grid-template-columns:1fr; }
  .cuvee__specs > div{ grid-template-columns:1fr; gap:.2rem; }
  .hero__actions .btn{ flex:1 1 auto; justify-content:center; }
  .foot__legal{ flex-direction:column; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .ln > span{ transform:none; }
  .hero__kicker, .hero__lede, .hero__actions, .hero__facts{ opacity:1; transform:none; }
  .hero__badge{ opacity:.92; }
  [data-reveal]{ opacity:1; transform:none; }
  .topo path{ stroke-dashoffset:0; }
  .hscroll{ height:auto !important; }
  .hscroll__sticky{ position:static; height:auto; overflow:visible; display:block; }
  .cuvees{ transform:none !important; width:auto; flex-wrap:wrap; }
  .hero__body{ transform:none !important; opacity:1 !important; }
  .film__frame{ transform:none; }
  .marquee__track{ animation:none; }
  .hero__ring{ animation:none; }
  .cursor{ display:none !important; }
  .soundbtn__ico i{ animation:none !important; height:8px; }
  .avis__track{ animation:none !important; }
  .avis__cols{
    height:auto; -webkit-mask-image:none; mask-image:none;
    grid-template-columns:1fr;
  }
  .avis__col--rev, .avis__col:last-child{ display:none; }
  .ccard::after{ display:none; }
  .c-surface, .c-arc{ stroke-dashoffset:0 !important; }
  .c-vines path{ opacity:.75 !important; transform:none !important; }
  .c-veg{ opacity:.85 !important; }
  .w i{ transform:none; }
  .manifeste__portrait img, .visite__media img, .visite__kayak img{ clip-path:none; transform:none; }
  .hero__media img{ transform:none; }
  .film__frame{ transform:none; }
  .film__frame{ --p:1 !important; }
  .step{ opacity:1; }
}