/* Qaro Wine — site public.
   Deux mécaniques portent la page : l'étiquette qu'on balaie, et la bouteille
   qui se remplit par paliers. Tout est piloté par une seule variable, --p,
   calculée par le navigateur quand il sait le faire, par app.js sinon. */

@property --p { syntax:"<number>"; inherits:true; initial-value:0 }
@property --f { syntax:"<number>"; inherits:true; initial-value:0 }

:root{
  --bg:#F7F2EA; --ink:#1A1010; --muted:#6B5B54; --line:#E4D9C9;
  --burgundy:#6E1E2E; --burgundy-deep:#2A0A11; --gold:#C9973E; --cream:#F7F2EA;
  --paper:#EFE6D6;
  --sys:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Inter,"Segoe UI",Roboto,sans-serif;
  /* Seule exception : une vraie étiquette de vin ne s'écrit pas en bâton.
     Empattements du système, donc toujours rien à télécharger. */
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --max:1240px; --pad:clamp(20px,5vw,64px);
  --ease:cubic-bezier(.22,1,.36,1);
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#140D0C; --ink:#F4EDE4; --muted:#A3948C; --line:#33211F; --gold:#E0B25A; --burgundy:#9B3044; --paper:#241715 }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink); overflow-x:hidden;
  font:16px/1.6 var(--sys); -webkit-font-smoothing:antialiased;
}
body.loading{overflow:hidden}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:4; opacity:.04; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.defs{position:absolute; width:0; height:0}
/* Les titres se distinguent par la graisse et le crénage, pas par la famille. */
h1,h2,h3,.display{font-family:var(--sys); font-weight:600; letter-spacing:-.035em; line-height:1; margin:0}
.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--pad)}
.muted{color:var(--muted)}
a{color:inherit}

/* ————— Chargement ————— */
#loader{
  position:fixed; inset:0; z-index:60; display:grid; place-items:center;
  background:radial-gradient(120% 90% at 50% 40%, #5A1726 0%, var(--burgundy-deep) 62%, #190508 100%);
  transition:opacity .7s ease, visibility .7s;
}
body.ready #loader{opacity:0; visibility:hidden}
.loader-in{display:grid; justify-items:center; gap:26px}
.bottle{width:clamp(96px,17vw,140px); height:auto; filter:drop-shadow(0 34px 44px rgba(0,0,0,.55))}
#loader .wine{transform:translateY(300px); animation:pour 1.5s cubic-bezier(.5,0,.2,1) .15s forwards}
@keyframes pour{to{transform:translateY(24px)}}
.bottle .outline{fill:none; stroke:rgba(247,242,234,.55); stroke-width:2.4}
.bottle .cap{fill:rgba(247,242,234,.9)}
.bottle .shine{fill:none; stroke:rgba(255,255,255,.4); stroke-width:4; stroke-linecap:round; opacity:.5}
.loader-word{font-size:.8rem; letter-spacing:.34em; text-transform:uppercase; color:rgba(247,242,234,.72); opacity:0; animation:fade .8s .5s ease forwards}
.loader-in::after{content:""; width:clamp(96px,17vw,140px); height:1px; background:rgba(247,242,234,.25)}

/* ————— En-tête ————— */
header{position:fixed; top:0; left:0; right:0; z-index:20; color:var(--ink); border-bottom:1px solid transparent;
  transition:background .4s ease, border-color .4s ease, color .4s ease}
header.on-dark{color:var(--cream)}
header.solid{background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:blur(14px); border-bottom-color:var(--line)}
header.solid.on-dark{background:color-mix(in srgb, var(--burgundy-deep) 78%, transparent); border-bottom-color:rgba(247,242,234,.16)}
header .wrap{display:flex; align-items:center; justify-content:space-between; height:70px; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase}
header a{text-decoration:none}
.mark-logo span{opacity:.62}
header .links{display:flex; gap:clamp(14px,3vw,26px)}
header .links a{opacity:.7; transition:opacity .25s}
header .links a:hover{opacity:1}
@media (max-width:560px){ header .links a:not(:last-child){display:none} }

/* ————— Page d'entrée ————— */
.hero{position:relative; min-height:100svh; display:grid; align-items:center; padding:110px 0; overflow:hidden;
  background:linear-gradient(170deg, var(--burgundy-deep) 0%, #4A1320 52%, #2E0B13 100%); color:var(--cream)}
.hero-glow{position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 55% at 78% 30%, rgba(201,151,62,.20), transparent 62%),
             radial-gradient(60% 50% at 12% 88%, rgba(155,48,68,.45), transparent 66%)}
.hero-grid{position:relative; display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(24px,5vw,60px); align-items:center}
.eyebrow{display:inline-flex; align-items:center; gap:12px; font-size:.74rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); margin-bottom:clamp(16px,3vw,28px)}
.hero .eyebrow{color:rgba(247,242,234,.66); opacity:0; animation:fade .9s .35s ease forwards}
.eyebrow i{width:26px; height:1px; background:var(--gold)}
.hero h1{font-size:clamp(3rem,11vw,9.5rem)}
.hero h1 em{font-style:italic; font-weight:300; color:#E9C27E}
.hero h1 .line{display:block; overflow:hidden; padding-bottom:.04em}
.hero h1 .line span{display:block; transform:translateY(105%); animation:rise 1.1s var(--ease) forwards}
body.loading .hero h1 .line span{animation-play-state:paused}
.hero h1 .line:nth-child(2) span{animation-delay:.12s}
.hero h1 .line:nth-child(3) span{animation-delay:.24s}
@keyframes rise{to{transform:none}}
.hero-foot{margin-top:clamp(26px,5vw,48px); opacity:0; animation:fade .9s .6s ease forwards}
@keyframes fade{to{opacity:1}}
.hero-foot p{max-width:38ch; margin:0 0 26px; color:rgba(247,242,234,.72); font-size:clamp(1rem,1.5vw,1.15rem)}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px}
.hero-art{position:relative; justify-self:center; width:min(248px,58vw); opacity:0; animation:artIn 1.2s .45s var(--ease) forwards}
@keyframes artIn{from{opacity:0; transform:translateY(40px) rotate(-6deg) scale(.94)} to{opacity:1; transform:rotate(-4deg)}}
.hero-art img{width:100%; display:block; border-radius:36px; border:1px solid rgba(247,242,234,.18); box-shadow:0 70px 90px -50px rgba(0,0,0,.8)}
.scroll-hint{position:absolute; left:var(--pad); bottom:34px; font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(247,242,234,.6); display:flex; align-items:center; gap:10px; opacity:0; animation:fade .9s 1s ease forwards}
.scroll-hint i{display:block; width:34px; height:1px; background:currentColor; transform-origin:left; animation:slide 2.4s ease-in-out infinite}
@keyframes slide{0%,100%{transform:scaleX(.3)}50%{transform:scaleX(1)}}

.btn{display:inline-flex; align-items:center; gap:10px; padding:15px 26px; border-radius:999px;
  background:var(--burgundy); color:#FFF6EC; text-decoration:none; font-size:.92rem;
  transition:transform .35s var(--ease), box-shadow .35s}
.btn:hover{transform:translateY(-3px); box-shadow:0 16px 30px -16px rgba(110,30,46,.9)}
.hero .btn{background:#F7F2EA; color:var(--burgundy-deep)}
.btn.ghost{background:transparent; color:inherit; border:1px solid currentColor; opacity:.8}
.btn.ghost:hover{opacity:1; box-shadow:none}

/* ————— ① Le scan : la ligne descend, la fiche se remplit ————— */
.scan{height:340svh; position:relative}
.scan-sticky{position:sticky; top:0; height:100svh; display:grid; align-items:center; overflow:hidden}
.scan-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(24px,6vw,80px); align-items:center}
.label-col{display:grid; justify-items:center; gap:18px}
.label{
  font-family:var(--serif);
  position:relative; width:min(300px,72vw); aspect-ratio:3/4; padding:30px 26px; overflow:hidden;
  background:linear-gradient(160deg, var(--paper), color-mix(in srgb,var(--paper) 86%, #C9B99B));
  border:1px solid color-mix(in srgb,var(--line) 70%, #000 6%); border-radius:3px;
  box-shadow:0 40px 60px -40px rgba(42,10,17,.55), inset 0 0 40px rgba(120,90,50,.08);
  display:grid; align-content:start; justify-items:center; text-align:center; gap:4px;
  transform:rotate(-1.6deg);
}
.label::before{content:""; position:absolute; inset:0; filter:url(#paper); opacity:.22; mix-blend-mode:multiply; pointer-events:none}
.lbl-top{font-size:.56rem; letter-spacing:.24em; text-transform:uppercase; color:color-mix(in srgb,var(--ink) 55%, transparent)}
.lbl-dom{font-family:var(--serif); font-weight:400; letter-spacing:0; font-size:clamp(1.3rem,3.2vw,1.7rem); line-height:1.08; margin-top:14px; color:var(--burgundy)}
.lbl-rule{width:44px; height:1px; background:color-mix(in srgb,var(--ink) 30%, transparent); margin:12px 0}
.lbl-cuvee{font-style:italic; font-weight:400; font-size:1.5rem; letter-spacing:0}
.lbl-app{font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:color-mix(in srgb,var(--ink) 60%, transparent); margin-top:6px}
.lbl-year{font-size:2.1rem; font-weight:400; margin-top:auto; letter-spacing:.06em}
.lbl-foot{font-size:.56rem; letter-spacing:.14em; text-transform:uppercase; color:color-mix(in srgb,var(--ink) 45%, transparent); margin-top:8px}
/* la ligne de balayage */
.scanline{
  position:absolute; left:-6%; right:-6%; height:2px; pointer-events:none;
  top:calc(var(--p) * 100%);
  background:linear-gradient(90deg, transparent, var(--burgundy) 12%, #E9C27E 50%, var(--burgundy) 88%, transparent);
  box-shadow:0 0 22px 5px rgba(201,151,62,.45); opacity:clamp(0, calc(var(--p) * 14), 1);
}
.scanline::after{content:""; position:absolute; left:0; right:0; top:-46px; height:46px;
  background:linear-gradient(to top, rgba(201,151,62,.20), transparent)}
.reticle{position:absolute; inset:6px; width:calc(100% - 12px); height:calc(100% - 12px); fill:none;
  stroke:var(--burgundy); stroke-width:1.4; vector-effect:non-scaling-stroke;
  stroke-dasharray:32; stroke-dashoffset:calc(32 - clamp(0, calc(var(--p) * 7), 1) * 32); opacity:.6}
.scan-state{font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.read-col h2{font-size:clamp(1.9rem,4.4vw,3.4rem); margin-bottom:clamp(18px,3vw,30px)}
.fields{margin:0; display:grid; gap:0}
.f{
  --k:clamp(0, calc((var(--p) - var(--t)) * 11), 1);
  display:grid; grid-template-columns:8.5rem 1fr; gap:14px; align-items:baseline;
  padding:12px 0; border-top:1px solid var(--line);
}
.f dt{margin:0; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); opacity:calc(.35 + var(--k) * .65)}
.f dd{margin:0; position:relative; font-size:clamp(.98rem,1.5vw,1.12rem)}
.f dd::before{ /* la barre d'attente, avant que la ligne passe */
  content:""; position:absolute; left:0; top:.35em; height:.7em; width:min(100%,14rem); border-radius:2px;
  background:var(--line); opacity:calc(1 - var(--k));
}
.f dd{opacity:var(--k); translate:0 calc((1 - var(--k)) * 8px); filter:blur(calc((1 - var(--k)) * 3px))}
.f dd::before{filter:none}
.read-note{margin-top:22px; color:var(--muted); font-size:.92rem; opacity:clamp(0, calc((var(--p) - .9) * 12), 1)}
@media (max-width:860px){
  .scan{height:300svh}
  .scan-grid{grid-template-columns:1fr; gap:22px; align-content:center}
  .label{width:min(190px,44vw); padding:18px 14px}
  .lbl-dom{font-size:1.05rem; margin-top:8px} .lbl-cuvee{font-size:1.1rem} .lbl-year{font-size:1.5rem}
  .lbl-rule{margin:8px 0}
  .read-col h2{font-size:clamp(1.6rem,7vw,2.2rem); margin-bottom:14px}
  .f{grid-template-columns:6.5rem 1fr; gap:10px; padding:5px 0}
  .f dd{font-size:.95rem}
  .read-note{margin-top:14px; font-size:.84rem}
  .scan-state{font-size:.64rem}
}

/* ————— La phrase qui se décante ————— */
.statement{min-height:66svh; display:grid; align-content:center; gap:6px; padding-top:60px; padding-bottom:60px}
.statement.short{min-height:48svh}
.statement h2{font-size:clamp(2.2rem,7vw,5.4rem); max-width:18ch}
.statement .mark{color:var(--burgundy)}
@media (prefers-color-scheme:dark){ .statement .mark{color:var(--gold)} }
.decant .w{display:inline-block; white-space:nowrap}
.decant .ch{display:inline-block;
  translate:calc(var(--dx) * 1px) calc(var(--dy) * 1px); rotate:calc(var(--dr) * 1deg); opacity:0; filter:blur(6px)}
.decant.in .ch{animation:settle .9s var(--ease) forwards; animation-delay:calc(var(--i) * 26ms)}
@keyframes settle{to{translate:0 0; rotate:0deg; opacity:1; filter:blur(0)}}
.facts{margin-top:34px; font-size:clamp(.95rem,1.6vw,1.15rem); color:var(--muted)}
.facts b{color:var(--burgundy); font-weight:600; letter-spacing:-.02em; font-size:1.35em}
@media (prefers-color-scheme:dark){ .facts b{color:var(--gold)} }

/* ————— ② La bouteille qui se remplit : c'est la cave ————— */
.cellar{height:300svh; position:relative; background:linear-gradient(180deg,#4A1320,var(--burgundy-deep)); color:var(--cream)}
.cellar-sticky{position:sticky; top:0; height:100svh; display:grid; align-items:center; overflow:hidden}
.cellar-grid{display:grid; grid-template-columns:1fr .9fr; gap:clamp(24px,6vw,70px); align-items:center}
.cellar .eyebrow{color:rgba(247,242,234,.6)}
.cellar h2{font-size:clamp(2rem,5.5vw,4.2rem)}
.cellar-text p{max-width:34ch; color:rgba(247,242,234,.7); margin-top:22px}
.cellar-art{position:relative; justify-self:center; width:min(220px,48vw)}
.bottle.big{width:100%; filter:drop-shadow(0 50px 60px rgba(0,0,0,.55))}
.bottle.big .outline{stroke:rgba(247,242,234,.5)}
.bottle.big .level{translate:0 calc(300px - var(--f) * 184px)}
.ticks{position:absolute; left:100%; margin-left:26px; top:calc(100% - var(--f) * 61.3%); width:max-content; max-width:min(42vw,300px)}
.ticks span{
  /* visible seulement au palier qui vient d'être franchi */
  --k:calc(clamp(0, calc((var(--i) - var(--f) * 8 + 1.5) * 4), 1) * clamp(0, calc((var(--f) * 8 - .5 - var(--i)) * 4), 1));
  position:absolute; left:0; top:-.7em; display:block; white-space:nowrap;
  font-size:clamp(.72rem,1.4vw,.9rem); color:rgba(247,242,234,.72);
  opacity:var(--k); translate:calc((1 - var(--k)) * -10px) 0;
}
.ticks b{font-weight:400; color:#E9C27E}
.ticks::before{content:""; position:absolute; left:-22px; top:0; width:16px; height:1px; background:rgba(233,194,126,.6)}
@media (max-width:860px){
  .cellar{height:260svh}
  .cellar-grid{grid-template-columns:1fr; gap:26px; justify-items:start}
  .cellar-art{justify-self:start; width:min(120px,30vw)}
  .cellar h2{font-size:clamp(1.9rem,8vw,2.6rem)}
  .cellar-text p{margin-top:14px; font-size:.95rem}
  .ticks{margin-left:18px; max-width:52vw}
  .ticks span{white-space:normal}
}

/* ————— Le mur : trois colonnes qui dérivent ————— */
.wall{padding:clamp(60px,10vw,120px) 0 clamp(40px,7vw,90px); overflow:hidden}
.wall .cols{padding-top:clamp(30px,5vw,60px)}
.wall-head{margin-bottom:clamp(26px,5vw,52px)}
.wall-head h2{font-size:clamp(1.8rem,5vw,3.6rem)}
.cols{display:grid; grid-template-columns:repeat(3,minmax(0,220px)); justify-content:center;
  gap:clamp(12px,2.4vw,28px); padding:0 var(--pad); align-items:start}
.col{display:grid; gap:clamp(12px,2.4vw,28px); translate:0 calc((var(--p) - .5) * var(--rate) * -110px)}
.col img{width:100%; display:block; border-radius:26px; border:1px solid var(--line); box-shadow:0 40px 70px -55px rgba(42,10,17,.8)}
@media (max-width:760px){
  .cols{grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding-left:var(--pad); padding-right:var(--pad)}
  .col{gap:8px; translate:0 calc((var(--p) - .5) * var(--rate) * -40px)}
  .col img{border-radius:12px}
}

/* ————— Offres ————— */
.offres-title{font-size:clamp(2rem,5vw,3.4rem); margin-bottom:26px}
.plans{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:22px; overflow:hidden}
@media (max-width:760px){ .plans{grid-template-columns:1fr} }
.plan{background:var(--bg); padding:clamp(26px,4vw,44px); display:flex; flex-direction:column; gap:10px}
.plan.feature{background:linear-gradient(160deg,#4A1320,var(--burgundy-deep)); color:var(--cream)}
.plan.feature .muted{color:rgba(247,242,234,.6)}
.plan.feature ul{color:rgba(247,242,234,.78)}
.plan.feature li{border-top-color:rgba(247,242,234,.18)}
.plan h3{font-size:clamp(1.6rem,3vw,2.2rem)}
.plan .price{font-weight:600; letter-spacing:-.04em; font-size:clamp(2.4rem,6vw,4rem); line-height:1; margin:.1em 0 0}
.plan ul{list-style:none; margin:10px 0 0; padding:0; color:var(--muted)}
.plan li{padding:9px 0; border-top:1px solid var(--line)}
.plan strong{color:inherit}

footer{border-top:1px solid var(--line); margin-top:clamp(60px,10vw,120px)}
footer .wrap{display:flex; flex-wrap:wrap; gap:14px 30px; padding-top:34px; padding-bottom:50px; font-size:.86rem; color:var(--muted)}
footer a{color:var(--burgundy)}
@media (prefers-color-scheme:dark){ footer a{color:var(--gold)} }
footer .sep{flex:1}

/* ————— Révélation par masque, pas par fondu ————— */
.wipe{clip-path:inset(0 100% 0 0); opacity:.999; transition:clip-path 1.1s var(--ease)}
.wipe.in{clip-path:inset(0 0 0 0)}

@media (prefers-reduced-motion:reduce){
  .wipe{clip-path:none; transition:none}
  .decant .ch{opacity:1; translate:none; rotate:none; filter:none; animation:none}
  .hero h1 .line span,.hero-foot,.hero-art,.hero .eyebrow,.scroll-hint,.loader-word{animation:none; opacity:1; transform:none}
  #loader .wine{animation:none; transform:translateY(24px)}
  .scroll-hint i{animation:none}
  .col{translate:none}
  html{scroll-behavior:auto}
}

/* ————— Progression calculée par le navigateur quand il sait ————— */
@supports (animation-timeline: view()){
  @keyframes prog{ from{--p:0} to{--p:1} }
  @keyframes fillSteps{ from{--f:.125} to{--f:1.125} }
  /* Le sujet est la section haute ; --p et --f descendent aux enfants. */
  .scan{ animation:prog linear both; animation-timeline:view(); animation-range:entry 100% exit 0% }
  .wall,.apogee{ animation:prog linear both; animation-timeline:view(); animation-range:entry 20% exit 20% }
  .cellar{ animation:fillSteps linear both; animation-timing-function:steps(8,end);
    animation-timeline:view(); animation-range:entry 100% exit 0% }
}

/* ————— Pages de texte ————— */
.doc{max-width:760px; padding-top:140px}
.doc h1{font-size:clamp(2.2rem,6vw,3.4rem); margin-bottom:.3em}
.doc h2{font-family:inherit; font-size:1.05rem; font-weight:600; letter-spacing:0; margin:2.2em 0 .5em}
.doc p,.doc li{color:var(--muted)}
.doc a{color:var(--burgundy)}
@media (prefers-color-scheme:dark){ .doc a{color:var(--gold)} }

/* ————— Quand l'ouvrir : la fenêtre de dégustation ————— */
.apogee{padding:clamp(70px,12vw,140px) 0}
.apogee h2{font-size:clamp(2rem,6vw,4.4rem); max-width:16ch}
.lead{max-width:52ch; margin:clamp(20px,3vw,30px) 0 0; color:var(--muted); font-size:clamp(1rem,1.6vw,1.2rem)}
.gauge{margin:clamp(40px,6vw,70px) 0 0; max-width:820px}
.gauge-top{font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:44px}
/* pas d'overflow caché ici : le repère « aujourd'hui » dépasse volontairement */
.track{position:relative; display:grid; grid-template-columns:1fr 1.6fr 1fr; height:56px; border-radius:10px; border:1px solid var(--line)}
.zone:first-of-type{border-radius:9px 0 0 9px}
.zone:nth-of-type(3){border-radius:0 9px 9px 0}
.zone{display:grid; place-items:center; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; text-align:center; padding:0 6px}
.young{background:color-mix(in srgb,var(--line) 55%, transparent); color:var(--muted)}
.peak{background:linear-gradient(100deg,#6E1E2E,#9B3044); color:#FFF1E2}
.late{background:color-mix(in srgb,var(--gold) 26%, transparent); color:var(--ink)}
.cursor{position:absolute; top:-14px; bottom:-14px; left:calc(12% + var(--p) * 44%); width:0; pointer-events:none}
.cursor i{position:absolute; inset:0; width:2px; margin-left:-1px; background:var(--ink)}
.cursor b{position:absolute; top:-28px; left:50%; translate:-50% 0; font-size:.66rem; font-weight:400; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink); white-space:nowrap}
.years{display:flex; justify-content:space-between; margin-top:12px; font-size:.76rem; color:var(--muted)}
.benefits{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:clamp(50px,8vw,90px);
  background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
@media (max-width:900px){ .benefits{grid-template-columns:1fr} }
.benefits article{background:var(--bg); padding:clamp(22px,3vw,34px)}
.benefits h3{font-size:clamp(1.15rem,2vw,1.5rem); margin-bottom:10px}
.benefits p{margin:0; color:var(--muted); font-size:.96rem}

/* ————— Questions ————— */
.faq{padding-top:clamp(60px,10vw,110px)}
.faq h2{font-size:clamp(1.8rem,5vw,3.2rem); margin-bottom:clamp(20px,3vw,34px)}
.faq details{border-top:1px solid var(--line)}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; list-style:none; padding:20px 44px 20px 0; position:relative;
  font-size:clamp(1rem,1.8vw,1.22rem); font-weight:500; letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:8px; top:50%; width:11px; height:11px; margin-top:-7px;
  border-right:1px solid var(--muted); border-bottom:1px solid var(--muted); rotate:45deg; transition:rotate .35s var(--ease)}
.faq details[open] summary::after{rotate:225deg; margin-top:-2px}
.faq details p{margin:0 0 22px; max-width:62ch; color:var(--muted)}

/* ————— Garde-fous de largeur —————
   Une grille laisse ses colonnes déborder dès qu'un enfant est plus large
   que la place disponible. On le lui interdit partout. */
.hero,.scan-sticky,.cellar-sticky{grid-template-columns:minmax(0,1fr)}
.hero > .wrap,.scan-sticky > .wrap,.cellar-sticky > .wrap{width:100%; min-width:0}
.hero-grid > *,.scan-grid > *,.cellar-grid > *,.benefits > *,.plans > *{min-width:0}
.cellar-art,.hero-art,.label{max-width:100%}

/* ————— Page d'entrée sur téléphone : une colonne, tenant sur un écran ————— */
@media (max-width:900px){
  .hero{padding:92px 0 0}
  .hero-grid{grid-template-columns:1fr; gap:clamp(18px,5vw,30px)}
  .hero h1{font-size:clamp(2.7rem,12.5vw,4.4rem)}
  .hero-foot{margin-top:20px}
  .hero-foot p{margin-bottom:20px; font-size:1rem}
  .hero-art{width:min(184px,44vw); margin-bottom:-46px; animation-name:artInSmall}
  .hero-cta .btn{padding:13px 20px; font-size:.86rem}
  .scroll-hint{bottom:18px; right:var(--pad); left:auto}
}
@keyframes artInSmall{from{opacity:0; transform:translateY(30px) rotate(-6deg) scale(.94)} to{opacity:1; transform:rotate(-3deg)}}

/* ————— Sur téléphone, les sections épinglées commencent sous l'en-tête ————— */
@media (max-width:860px){
  .scan-sticky,.cellar-sticky{padding-top:58px}
  /* L'étiquette prend la hauteur de son texte : rien n'est rogné. */
  .label{width:min(176px,42vw); aspect-ratio:auto; padding:16px 12px 20px}
  .lbl-year{margin-top:12px}
}