/* Hauteclaire, champagne de vigneron : feuille commune des six pages.
   Direction : l’étiquette (dossier de création, parties 2, 3, 4 et 12).
   Mécanique de la vidéo au défilement : scrub-pipeline.md, reprise du moteur d’Externam Web. */

/* ---------- Jetons ---------- */
:root{
  --canvas:#F1F0EA;
  --panel:#E6E4DC;
  --text-primary:#17181C;
  --text-secondary:#55565B;
  --accent:#C4AC6C;
  --accent-hover:#B0944F;
  --accent-muted:#E3D6B0;
  --accent-ink:#725D26;
  --line:#CFCBBF;
  --line-strong:#7F7B6C;
  --veil:241,240,234;

  --ease-bulle:cubic-bezier(.2,.7,.2,1);
  --ease-nacre:cubic-bezier(.4,0,.2,1);
  --ease-filet:cubic-bezier(.65,0,.35,1);

  --tglow:0 0 1px rgba(241,240,234,.9),0 1px 10px rgba(241,240,234,.75),0 0 36px rgba(241,240,234,.6);

  --f-titre:'Bodoni Moda','Bodoni 72','Didot',Georgia,serif;
  --f-texte:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-lib:'Tenor Sans','Optima','Candara',sans-serif;

  --bandeau:36px;
  --barre:64px;
  --haut:calc(var(--bandeau) + var(--barre));
  --marge:40px;
  --gout:24px;
  --maxw:1360px;
  --sec:80px;
  --col:calc((min(100vw - 2*var(--marge),var(--maxw)) - 11*var(--gout))/12);
  --bord:max(var(--marge),calc((100vw - var(--maxw))/2));
  --fond:var(--canvas);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .09 0 0 0 0 .09 0 0 0 0 .11 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
}
@media (max-width:760px){
  :root{--barre:56px;--marge:20px;--gout:16px;--sec:48px;--col:calc((100vw - 2*var(--marge) - 5*var(--gout))/6)}
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--canvas);color:var(--text-primary);-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden;overflow-x:clip;overflow-anchor:none;scroll-padding-top:calc(var(--haut) + 24px)}
body{margin:0;font:400 17px/1.65 var(--f-texte);font-variant-numeric:lining-nums tabular-nums;overflow-x:hidden;overflow-x:clip;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
html.menu-ouvert{overflow:hidden}
html.menu-ouvert .barre{padding-right:calc(var(--marge) + var(--sb,0px))}
img,svg,video{display:block;max-width:100%}
picture{display:contents}
a{color:inherit}
p{max-width:58ch;margin:0 0 1em;text-wrap:pretty}
h1,h2,h3,h4{font-family:var(--f-titre);font-weight:400;font-optical-sizing:auto;line-height:1.06;margin:0;text-wrap:balance;letter-spacing:-.004em}
ul,ol{margin:0;padding:0;list-style:none}
dl,dd{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
strong{font-weight:500}
::selection{background:var(--accent-muted);color:var(--text-primary)}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--text-primary);outline-offset:3px;box-shadow:0 0 0 3px var(--canvas),0 0 0 7px var(--accent)}
main:focus,main:focus-visible{outline:none;box-shadow:none}
main,.pied{animation:page 900ms var(--ease-nacre) both}
@keyframes page{from{opacity:0}to{opacity:1}}

.evitement{position:fixed;left:16px;top:calc(var(--bandeau) + 10px);z-index:1100;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;background:var(--canvas);color:var(--text-primary);border:1px solid var(--text-primary);font:400 12.5px/1 var(--f-lib);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;opacity:0;pointer-events:none;transform:translateY(-8px);transition:opacity 300ms var(--ease-nacre),transform 400ms var(--ease-bulle)}
.evitement:focus{opacity:1;pointer-events:auto;transform:none}

/* ---------- Fond d’ambiance fixe : lumière du jour qui dérive, grain de craie, bulles ---------- */
.ambiance{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.ambiance__jour{position:absolute;left:-34vw;top:-38vh;width:112vw;height:112vh;background:radial-gradient(closest-side,rgba(255,253,245,.9),rgba(255,252,242,.42) 55%,rgba(255,252,242,0));animation:jour 90s var(--ease-nacre) -18s infinite alternate;will-change:transform}
@keyframes jour{0%{transform:translate(0,0) scale(1)}50%{transform:translate(9vw,6vh) scale(1.08)}100%{transform:translate(16vw,11vh) scale(.95)}}
.ambiance__grain{position:absolute;inset:0;background-image:var(--grain);opacity:.04}
.bulles-fond{position:absolute;inset:0;width:100%;height:100%;transition:opacity 700ms var(--ease-nacre)}
.bulles-fond.cache{opacity:0}

/* ---------- Grille : 12 colonnes, 1 360 px ---------- */
.g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gout);width:min(100% - 2*var(--marge),var(--maxw));margin-inline:auto}
.g > *{min-width:0}
@media (max-width:760px){.g{grid-template-columns:repeat(6,minmax(0,1fr))}}
.sec{position:relative;padding-block:var(--sec)}

/* ---------- Typographie ---------- */
.t-page{font-size:clamp(40px,5.6vw,86px);line-height:1.02}
.t-sec{font-size:clamp(34px,4.2vw,64px);line-height:1.04;margin-bottom:.5em}
.lib{font:400 12.5px/1.45 var(--f-lib);letter-spacing:.2em;text-transform:uppercase;color:var(--text-secondary)}
.chapeau{font:italic 400 clamp(21px,1.9vw,26px)/1.38 var(--f-titre);max-width:36ch}
.evin{font-size:13px;line-height:1.55;color:var(--text-secondary);max-width:64ch}
.num-rom{font-family:var(--f-titre);font-style:italic}
.tel{white-space:nowrap}
@media (max-width:760px){.lib{font-size:12px}}

/* ---------- Barre du haut et menu plein écran ---------- */
.barre{position:fixed;left:0;right:0;top:var(--bandeau);height:var(--barre);z-index:950;display:flex;align-items:center;justify-content:space-between;padding:0 var(--marge);isolation:isolate}
.barre::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(241,240,234,.94);border-bottom:1px solid var(--line);opacity:0;transition:opacity 500ms var(--ease-nacre)}
.barre.solide::before{opacity:1}
.logo{display:inline-flex;align-items:center;gap:11px;min-height:44px;color:var(--text-primary);text-decoration:none}
.logo .muselet{width:26px;height:26px;--msw:2.6}
.logo__nom{font:italic 500 22px/1 var(--f-titre);letter-spacing:.005em}
.btn-menu{display:inline-flex;align-items:center;gap:14px;min-height:44px;min-width:44px;margin-right:-6px;padding:0 6px 0 10px;background:none;border:0;cursor:pointer;color:var(--text-primary)}
.btn-menu__txt{display:inline-grid;justify-items:end;font:400 12.5px/1 var(--f-lib);letter-spacing:.2em;text-transform:uppercase;margin-right:-.2em}
.btn-menu__txt > span{grid-area:1/1;transition:opacity 400ms var(--ease-nacre),transform 600ms var(--ease-bulle)}
.btn-menu__txt .f{opacity:0;transform:translateY(7px)}
.btn-menu[aria-expanded="true"] .o{opacity:0;transform:translateY(-7px)}
.btn-menu[aria-expanded="true"] .f{opacity:1;transform:none}
.btn-menu__traits{position:relative;width:18px;height:10px;flex:none}
.btn-menu__traits i{position:absolute;left:0;width:18px;height:1px;background:currentColor;transition:transform 700ms var(--ease-filet)}
.btn-menu__traits i:first-child{top:2px}
.btn-menu__traits i:last-child{top:7px}
.btn-menu[aria-expanded="true"] .btn-menu__traits i:first-child{transform:translateY(2.5px) rotate(45deg)}
.btn-menu[aria-expanded="true"] .btn-menu__traits i:last-child{transform:translateY(-2.5px) rotate(-45deg)}
.btn-menu:hover .btn-menu__traits i:last-child{transform:scaleX(.66)}
.btn-menu[aria-expanded="true"]:hover .btn-menu__traits i:last-child{transform:translateY(-2.5px) rotate(-45deg)}

.menu{position:fixed;left:0;right:0;top:var(--bandeau);bottom:0;z-index:900;background:var(--canvas);overflow-y:auto;overscroll-behavior:contain;opacity:0;transition:opacity 600ms var(--ease-nacre)}
.menu[hidden]{display:none}
.menu.ouvert{opacity:1}
.menu::before{content:"";position:fixed;inset:0;background-image:var(--grain);opacity:.04;pointer-events:none}
.menu__in{min-height:100%;padding-top:calc(var(--barre) + 7vh);padding-bottom:36px;align-content:start;row-gap:44px}
.menu__nav{grid-column:2/9}
.menu__nav a{display:flex;align-items:baseline;gap:.42em;padding:.06em 0;color:var(--text-primary);text-decoration:none;font:400 clamp(40px,6vw,88px)/1.08 var(--f-titre)}
.menu__num{flex:none;min-width:1.9em;font-style:italic;font-size:.4em;color:var(--text-secondary)}
.menu__t{position:relative;transition:transform 700ms var(--ease-bulle)}
.menu__nav a:hover .menu__t{transform:translateX(8px)}
.menu__nav a[aria-current="page"] .menu__t::after{content:"";position:absolute;right:-.36em;top:.18em;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.menu__infos{grid-column:10/13;align-self:end;font-size:15px}
.menu__infos p{margin:0 0 14px}
.menu__infos .lib{margin-bottom:10px}
.menu__infos .btn-p{margin-top:10px}
.menu__evin{grid-column:2/13;margin:0;padding-top:18px;border-top:1px solid var(--line);font-size:13px;color:var(--text-secondary);max-width:none}
.menu li,.menu__infos,.menu__evin{opacity:0;transform:translateY(24px);transition:opacity 700ms var(--ease-nacre),transform 900ms var(--ease-bulle);transition-delay:calc(var(--i,0)*90ms + 100ms)}
.menu.ouvert li,.menu.ouvert .menu__infos,.menu.ouvert .menu__evin{opacity:1;transform:none}
.menu__infos{--i:5}.menu__evin{--i:6}
@media (max-width:1080px){.menu__nav{grid-column:1/-1}.menu__infos{grid-column:1/-1;align-self:start}.menu__evin{grid-column:1/-1}}
@media (max-width:760px){.menu__in{padding-top:calc(var(--barre) + 28px);row-gap:36px}.menu__nav a{font-size:clamp(34px,10vw,44px)}}

/* ---------- Boutons ---------- */
.btn-p{position:relative;display:inline-flex;align-items:center;gap:14px;min-height:48px;padding:0;background:none;border:0;cursor:pointer;color:var(--text-primary);text-decoration:none;font:italic 400 22px/1.25 var(--f-titre);text-shadow:none;text-align:left;-webkit-tap-highlight-color:transparent}
.btn-p__txt{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-skip-ink:none;transition:transform 700ms var(--ease-bulle)}
.btn-p__pastille{position:relative;flex:none;width:7px;height:7px;transition:transform 700ms var(--ease-bulle)}
.btn-p__pastille::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--accent);animation:respire 4s ease-in-out -1.6s infinite alternate}
.btn-p__pastille i{position:absolute;left:50%;top:50%;border:1px solid var(--accent-hover);border-radius:50%;opacity:0}
.btn-p__pastille i:first-child{width:4px;height:4px;margin:-2px 0 0 -2px}
.btn-p__pastille i:last-child{width:3px;height:3px;margin:-1.5px 0 0 -1.5px}
.btn-p:hover .btn-p__pastille,.btn-p:focus-visible .btn-p__pastille{transform:translateY(-5px)}
.btn-p:hover .btn-p__txt,.btn-p:focus-visible .btn-p__txt{transform:translateX(2px)}
.btn-p:hover .btn-p__pastille i:first-child,.btn-p:focus-visible .btn-p__pastille i:first-child{animation:bulle-a 700ms var(--ease-bulle) both}
.btn-p:hover .btn-p__pastille i:last-child,.btn-p:focus-visible .btn-p__pastille i:last-child{animation:bulle-b 700ms var(--ease-bulle) 90ms both}
.btn-p:active .btn-p__pastille{transform:translateY(-3px);transition-duration:140ms}
.btn-p[disabled]{opacity:.5;cursor:default}
@keyframes respire{from{transform:scale(1)}to{transform:scale(1.15)}}
@keyframes bulle-a{0%{opacity:0;transform:translate(0,0)}20%{opacity:1}100%{opacity:0;transform:translate(-3px,-22px)}}
@keyframes bulle-b{0%{opacity:0;transform:translate(0,0)}20%{opacity:1}100%{opacity:0;transform:translate(4px,-30px)}}
@media (max-width:760px){.btn-p{font-size:20px}}

.lien-s{display:inline-flex;align-items:center;min-height:44px;font:400 12.5px/1.3 var(--f-lib);letter-spacing:.2em;text-transform:uppercase;color:var(--text-primary);text-decoration:underline;text-decoration-color:var(--line-strong);text-decoration-thickness:1px;text-underline-offset:7px;transition:text-decoration-color 400ms var(--ease-nacre)}
.lien-s:hover{text-decoration-color:var(--text-primary)}
.liens{display:flex;flex-wrap:wrap;align-items:center;gap:4px 28px}

/* ---------- La collerette : la signature ---------- */
.collerette{overflow:visible}
.collerette circle{fill:none;stroke:var(--accent);stroke-width:1.1}
.bw{animation:scint var(--tw,7s) ease-in-out var(--td,0s) infinite alternate;animation-play-state:paused}
.vis .bw{animation-play-state:running}
@keyframes scint{from{opacity:.55}to{opacity:1}}
.anneau{position:relative;display:inline-grid;place-items:center;width:78px;height:56px;flex:none}
.anneau > .collerette{position:absolute;inset:0;width:100%;height:100%}
.anneau .num{position:relative;font:italic 400 22px/1 var(--f-titre);color:var(--text-primary)}
.anneau .num--point{width:7px;height:7px;border-radius:50%;background:var(--accent)}
@media (max-width:760px){.anneau{width:64px;height:46px}.anneau .num{font-size:19px}}

/* ---------- Le muselet, vu de dessus ---------- */
.muselet{overflow:visible}
.muselet .m{fill:none;stroke:currentColor;stroke-width:var(--msw,2.6);stroke-linecap:round;stroke-linejoin:round}

/* ---------- Folio : filet, libellé, numéro dans son anneau ---------- */
.folio{display:flex;align-items:center;width:min(100% - 2*var(--marge),var(--maxw));margin:0 auto 56px}
.folio .anneau{margin-right:max(14px,calc(var(--col) + var(--gout) - 78px))}
.folio__lib{flex:1;display:flex;align-items:center;gap:20px;margin:0;max-width:none;font:400 12.5px/1.45 var(--f-lib);letter-spacing:.2em;text-transform:uppercase;color:var(--text-secondary)}
.folio__lib > span:first-child{flex:none}
.folio__lib .filet{flex:1}
.folio--in{width:auto;margin:0 0 40px}
@media (max-width:760px){.folio{margin-bottom:36px}.folio .anneau{margin-right:14px}.folio__lib{font-size:12px;gap:14px;min-width:0}.folio__lib > span:first-child{flex:0 1 auto;min-width:0}}

.filet{display:block;height:1px;background:var(--line);transform-origin:0 50%}
.filet--or{background:var(--accent);height:1px}

/* ---------- Planches ---------- */
.planche{position:relative;margin:0}
.planche__cadre{position:relative;overflow:hidden;background:var(--panel);isolation:isolate}
.planche__cadre img{width:100%;height:100%;object-fit:cover}
.planche__cadre::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background-image:var(--grain);opacity:.08;mix-blend-mode:multiply}
.planche figcaption{margin-top:14px}
.r45{aspect-ratio:4/5}
.r169{aspect-ratio:16/9}

/* ---------- Étiquettes : double filet aux coins coupés ---------- */
.etq{position:relative;display:block;color:var(--text-primary);text-decoration:none}
.etq__cadre{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.etq__cadre path{fill:none;stroke:var(--text-primary);stroke-width:1}
.etq__cadre path + path{stroke:var(--line-strong)}
.mini-regle{position:relative;display:block;height:14px;margin:20px 0 6px}
.mini-regle__trait{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line-strong)}
.mini-regle__trait::before,.mini-regle__trait::after{content:"";position:absolute;top:-3px;width:1px;height:7px;background:var(--line-strong)}
.mini-regle__trait::before{left:0}
.mini-regle__trait::after{right:0}
.mini-regle .pastille{position:absolute;top:50%;left:calc(var(--x,0)*100%);width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--accent)}

/* ---------- Rangs à filets ---------- */
.rang{position:relative}
.rang::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform-origin:0 50%}

/* ---------- Entrées (seuls transform et opacity bougent) ---------- */
.t-bulle .tw{display:inline-block}
@media (prefers-reduced-motion:no-preference){
  .js .t-bulle:not(.pret){opacity:0}
  .js .t-bulle .tw{opacity:0;transform:translateY(24px)}
  .js .t-bulle.in .tw{animation:monte-bulle 900ms var(--ease-bulle) both;animation-delay:calc(var(--o,0)*90ms + var(--l,0)*90ms)}
  .js .t-bulle.fait .tw{animation:none;opacity:1;transform:none}

  .js .nacre{position:relative;opacity:0;transition:opacity 900ms var(--ease-nacre);transition-delay:calc(var(--o,0)*90ms)}
  .js .nacre::after{content:"";position:absolute;inset:-8px -12px;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(241,240,234,.96) 0%,rgba(227,214,176,.78) 42%,rgba(214,215,212,.55) 72%,rgba(214,215,212,0) 100%);transition:opacity 1200ms var(--ease-nacre),transform 1200ms var(--ease-nacre);transition-delay:calc(var(--o,0)*90ms + 120ms)}
  .js .nacre.in{opacity:1}
  .js .nacre.in::after{opacity:0;transform:translateY(-42%)}
  .js .nacre.fait,.js .nacre.fait::after{transition-delay:0s}

  .js .filet{transform:scaleX(0);transition:transform 1000ms var(--ease-filet);transition-delay:calc(var(--o,0)*90ms)}
  .js .filet.in{transform:none}

  .js .rang::before{transform:scaleX(0);transition:transform 1000ms var(--ease-filet);transition-delay:calc(var(--o,0)*90ms)}
  .js .rang > *{opacity:0;transform:translateY(10px);transition:opacity 900ms var(--ease-nacre),transform 900ms var(--ease-bulle);transition-delay:calc(var(--o,0)*90ms + 220ms)}
  .js .rang.in::before{transform:none}
  .js .rang.in > *{opacity:1;transform:none}
  .js .rang.fait::before,.js .rang.fait > *{transition-delay:0s}

  .js .planche__cadre::after{content:"";position:absolute;inset:-1px;z-index:2;background:var(--fond,var(--canvas));transition:transform 1100ms var(--ease-filet);transition-delay:calc(var(--o,0)*90ms)}
  .js .planche.in .planche__cadre::after{transform:translateY(-101%)}
  .js .planche__cadre img{transform:scale(1.04);transition:transform 1700ms var(--ease-nacre);transition-delay:calc(var(--o,0)*90ms + 250ms)}
  .js .planche.in .planche__cadre img{transform:none}
  .js .planche figcaption{opacity:0;transition:opacity 900ms var(--ease-nacre);transition-delay:calc(var(--o,0)*90ms + 700ms)}
  .js .planche.in figcaption{opacity:1}
  .js .planche.fait .planche__cadre::after,.js .planche.fait .planche__cadre img,.js .planche.fait figcaption{transition-delay:0s}

  .js .etq__cadre path{stroke-dasharray:1.02 1.02;stroke-dashoffset:1.02;transition:stroke-dashoffset 900ms var(--ease-filet);transition-delay:calc(var(--o,0)*90ms)}
  .js .etq__cadre path + path{transition-delay:calc(var(--o,0)*90ms + 120ms)}
  .js .etq.in .etq__cadre path{stroke-dashoffset:0}
  .js .etq .pastille{opacity:0;transform:translateY(7px) scale(.4);transition:opacity 500ms var(--ease-nacre),transform 800ms var(--ease-bulle);transition-delay:calc(var(--o,0)*90ms + 900ms)}
  .js .etq.in .pastille{opacity:1;transform:none}
  .js .etq.fait .etq__cadre path,.js .etq.fait .pastille{transition-delay:0s}

  .js .col-box .collerette circle{opacity:0;transform:scale(.3);transform-box:fill-box;transform-origin:center;transition:opacity 420ms var(--ease-nacre),transform 700ms var(--ease-bulle);transition-delay:calc(var(--i,0)*18ms)}
  .js .col-box.forme .collerette circle{opacity:1;transform:none}
  .js .col-box .num{opacity:0;transform:translateY(8px);transition:opacity 700ms var(--ease-nacre) 680ms,transform 900ms var(--ease-bulle) 680ms}
  .js .col-box.forme .num{opacity:1;transform:none}
  .js .col-box.fait .collerette circle,.js .col-box.fait .num{transition-delay:0s}

  .js .muselet .m{stroke-dasharray:1.02 1.02;stroke-dashoffset:1.02;transition:stroke-dashoffset 1200ms var(--ease-filet);transition-delay:calc(var(--i,0)*55ms)}
  .js .muselet.trace .m{stroke-dashoffset:0}
}
@keyframes monte-bulle{0%{opacity:0;transform:translate(0,24px)}35%{opacity:1}55%{transform:translate(2px,9px)}80%{transform:translate(-1px,2px)}100%{opacity:1;transform:none}}

/* ---------- La vidéo d’ouverture ---------- */
.hero{position:relative}
.scene{display:none}
html.scrub .hero{height:1000vh}
/* Hauteurs fixes pendant le défilement : 1000vh et 100lvh ne bougent pas quand la barre d’adresse du téléphone
   se cache ou revient (jamais de dvh ici). --sous : la part de la scène cachée sous les barres du navigateur
   quand elles sont visibles ; ce qui s’ancre en bas de la scène s’en écarte d’autant. */
html.scrub .scene{display:block;position:sticky;top:var(--bandeau);height:calc(100vh - var(--bandeau));height:calc(100lvh - var(--bandeau));overflow:hidden;background:#C8C6BF;--sous:0px}
@supports (height:100lvh) and (height:100svh){html.scrub .scene{--sous:calc(100lvh - 100svh)}}
html.scrub .hero-fixe{display:none}
.scene__media{position:absolute;inset:0}
.scene__poster,.scene__fin{position:absolute;inset:0;background:center/cover no-repeat}
.scene__fin{opacity:0;transition:opacity 1200ms var(--ease-nacre)}
.scene.fin-visible .scene__fin{opacity:1}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 900ms var(--ease-nacre);will-change:transform;transform:translateZ(0)}
.scene.video-ready .hero-video{opacity:1}
.scene.sans-fondu .hero-video{transition:none}
.scene.video-failed .hero-video{display:none}
.scene__media::after{content:"";position:absolute;left:0;right:0;top:0;height:160px;pointer-events:none;background:linear-gradient(rgba(241,240,234,.6),rgba(241,240,234,0))}

.charge{position:absolute;left:50%;bottom:calc(20px + var(--sous,0px));width:64px;height:44px;margin-left:-32px;pointer-events:none;transition:opacity 700ms var(--ease-nacre)}
.charge .collerette{width:100%;height:100%}
.charge .bw{animation:none}
.charge circle{stroke:var(--accent-ink);stroke-width:1.1;opacity:clamp(.2,calc(var(--ld,0)*36 - var(--a,0)),1)}
.scene.video-ready .charge,.scene.bas-occupe .charge{opacity:0}
.defile{position:absolute;left:50%;bottom:calc(22px + var(--sous,0px));width:26px;height:26px;margin-left:-13px;color:var(--text-primary);opacity:.8;transition:opacity 600ms var(--ease-nacre);animation:defile 2.6s var(--ease-bulle) infinite}
.scene.bas-occupe .defile{opacity:0}
@keyframes defile{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media (max-height:560px){.charge,.defile{display:none}}

.bandes{position:absolute;inset:0;pointer-events:none}
.bande{position:absolute;left:6%;width:38%;top:55%;transform:translateY(-50%);opacity:0;isolation:isolate;--k:0;color:var(--text-primary);text-shadow:var(--tglow)}
.bande::before{content:"";position:absolute;inset:-34% -22% -40% -44%;z-index:-1;pointer-events:none;opacity:calc(.5 + .5*var(--k,1));background:radial-gradient(closest-side,rgba(var(--veil),var(--va,.55)) 0%,rgba(var(--veil),calc(var(--va,.55)*.95)) 44%,rgba(var(--veil),calc(var(--va,.55)*.76)) 64%,rgba(var(--veil),calc(var(--va,.55)*.44)) 80%,rgba(var(--veil),calc(var(--va,.55)*.14)) 92%,rgba(var(--veil),0) 100%)}
.b-lib{font:400 12.5px/1.4 var(--f-lib);letter-spacing:.2em;text-transform:uppercase;margin:0 0 18px;max-width:none}
.b-titre{font-size:clamp(44px,min(6.2vw,10.4svh),96px);line-height:1.02;margin:0 0 .3em}
.b-sous{font:500 clamp(16px,1.3vw,19px)/1.55 var(--f-texte);max-width:36ch;margin:0}
.b-cta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 30px;margin-top:22px;pointer-events:auto}
.bande .btn-p,.bande .lien-s{text-shadow:none}
.sous-court{display:none}

.bande .w{display:inline-block;white-space:nowrap}
.bande .c{display:inline-block}
[data-fx="montee"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.4,1);opacity:var(--kc);transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*28px))}
[data-fx="gravure"] .w{clip-path:inset(-.7em -.5em -.24em -.5em)}
[data-fx="gravure"] .c{--kc:clamp(0,(var(--k,0) - var(--th,0))*4,1);opacity:clamp(0,var(--kc)*1.6,1);transform:translateY(calc((1 - var(--kc))*1.08em))}
[data-fx="verse"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*-24px))}
[data-fx="effervescence"] .c{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.4,1);opacity:var(--kc);transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px))) rotate(calc((1 - var(--kc))*var(--jr,0deg)))}
[data-fx="ronde"] .c{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);transform-origin:50% 240%;transform:rotate(calc((1 - var(--kc))*var(--jr,0deg)))}
[data-fx="decantation"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*14px))}
[data-fx="decantation"] .b-sous{--ks:clamp(0,(var(--k,0) - .62)*4,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*10px))}
[data-fx="decantation"] .b-cta{--kb:clamp(0,(var(--k,0) - .8)*5,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*10px))}
.bande:not([data-fx="decantation"]) .b-sous{--ks:clamp(0,(var(--k,0) - .45)*3,1);opacity:var(--ks)}
.bande .b-lib{opacity:clamp(0,var(--k,0)*3,1)}

@media (orientation:portrait){
  .bande{left:var(--marge);right:var(--marge);width:auto;top:calc(var(--barre) + 1.4svh);transform:none}
  .bande--bas{top:auto;bottom:calc(3% + var(--sous,0px));--va:.72!important}
  /* 9:16 : une bande horizontale de craie, pleine largeur, fondue en haut et en bas (dossier, partie 8) */
  .bande::before{inset:calc(-1*var(--vt,72px)) calc(-1*var(--marge) - 24px) calc(-1*var(--vb,56px));background:linear-gradient(to bottom,rgba(var(--veil),0) 0,rgba(var(--veil),calc(var(--va,.55)*.1)) calc(var(--vt,72px)*.22),rgba(var(--veil),calc(var(--va,.55)*.42)) calc(var(--vt,72px)*.5),rgba(var(--veil),calc(var(--va,.55)*.82)) calc(var(--vt,72px)*.78),rgba(var(--veil),var(--va,.55)) var(--vt,72px),rgba(var(--veil),var(--va,.55)) calc(100% - var(--vb,56px)),rgba(var(--veil),calc(var(--va,.55)*.82)) calc(100% - var(--vb,56px)*.78),rgba(var(--veil),calc(var(--va,.55)*.42)) calc(100% - var(--vb,56px)*.5),rgba(var(--veil),calc(var(--va,.55)*.1)) calc(100% - var(--vb,56px)*.22),rgba(var(--veil),0) 100%)}
  .bande:not(.bande--bas){--va:.56!important}
  .bande--fin{--vb:26px;--va:.62!important}
  .b-titre{font-size:clamp(28px,min(8.6vw,5svh),48px);line-height:1.04;margin-bottom:.26em}
  .bande--bas .b-titre{font-size:clamp(26px,min(7.6vw,4.4svh),42px)}
  .b-lib{font-size:12px;margin-bottom:10px}
  .b-sous{font-size:15.5px;line-height:1.5}
  .bande--bas .b-sous{font-size:14.5px}
  .sous-long{display:none}
  .sous-court{display:inline}
  .b-cta{margin-top:8px}
  .b-cta .lien-s{display:none}
}

/* Haut de page fixe : mouvement réduit, économie de données, téléphone couché */
.hero-fixe{position:relative;display:flex;align-items:center;min-height:100vh;min-height:100svh;padding:calc(var(--haut) + 3vh) 0 8vh;background:#C8C6BF center/cover no-repeat;isolation:isolate}
html:not(.scrub) .hero-fixe{background-image:url("/demos/champagne/assets/video/hero-ending-16x9.webp")}
.hero-fixe__txt{position:relative;isolation:isolate;margin-left:6%;width:min(40%,640px);text-shadow:var(--tglow)}
.hero-fixe__txt::before{content:"";position:absolute;inset:-30% -24%;z-index:-1;background:radial-gradient(closest-side,rgba(var(--veil),.62) 0%,rgba(var(--veil),.56) 52%,rgba(var(--veil),.28) 80%,rgba(var(--veil),0) 100%)}
.hero-fixe h1,.hero-fixe h2{font-size:clamp(40px,min(5.4vw,9svh),84px);line-height:1.03;margin-bottom:.36em}
.hero-fixe p{font-weight:500;max-width:40ch}
.hero-fixe .btn-p{text-shadow:none;margin-top:6px}
/* 9:16 : même composition que la phrase 6, texte sur la craie haute, la coupe entière dessous */
@media (orientation:portrait){
  .hero-fixe{--ih:calc(100vw*1.7917);align-items:flex-start;padding:calc(var(--haut) + 12px) 0 calc(var(--ih)*.62);background-color:var(--canvas)}
  html:not(.scrub) .hero-fixe{background-image:linear-gradient(to bottom,var(--canvas) calc(100% - var(--ih)),rgba(241,240,234,.9) calc(100% - var(--ih)*.86),rgba(241,240,234,.45) calc(100% - var(--ih)*.72),rgba(241,240,234,0) calc(100% - var(--ih)*.62)),url("/demos/champagne/assets/video/hero-ending-9x16.webp");background-size:100% 100%,100% auto;background-position:0 0,50% 100%;background-repeat:no-repeat}
  .hero-fixe__txt{margin:0 var(--marge);width:auto}
  .hero-fixe__txt::before{inset:-40px calc(-1*var(--marge) - 24px) -30px;background:linear-gradient(to bottom,rgba(var(--veil),0) 0,rgba(var(--veil),.5) 40px,rgba(var(--veil),.5) calc(100% - 30px),rgba(var(--veil),0) 100%)}
  .hero-fixe h1,.hero-fixe h2{font-size:clamp(28px,min(8vw,5svh),48px)}
  .hero-fixe p{font-size:15px;line-height:1.5;margin-bottom:.6em}
}

/* ---------- Accueil, IV · Le temps ---------- */
.temps__g{align-items:start}
.temps__img{grid-column:1/7;margin-left:calc(-1*var(--bord))}
.temps__img figcaption{padding-left:var(--bord)}
.temps__txt{grid-column:8/12;padding-top:120px}
.reperes{margin-top:44px}
.reperes .rang{padding:16px 0 18px}
.reperes .rang:last-child{border-bottom:1px solid var(--line)}
.reperes p{margin:0;font-size:16px}
.rep-n{font:400 30px/1.1 var(--f-titre);margin-right:.06em}
@media (max-width:1080px){.temps__txt{grid-column:8/13;padding-top:48px}}
@media (max-width:760px){
  .temps__img{grid-column:1/-1;justify-self:start;margin-left:calc(-1*var(--marge));width:calc(84% + var(--marge))}
  .temps__img figcaption{padding-left:var(--marge)}
  .temps__txt{grid-column:1/-1;padding-top:40px}
}

/* ---------- Accueil, V · Les cuvées (six étiquettes) ---------- */
.cuv__tete{align-items:end;margin-bottom:64px}
.cuv__tete h2{grid-column:2/8;margin:0}
.cuv__tete p{grid-column:8/12;margin:0 0 .4em}
.etiquettes{grid-column:2/13;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px var(--gout);counter-reset:none}
.etiquettes > li:nth-child(3n+2){margin-top:48px}
.etiquettes > li:nth-child(3n){margin-top:24px}
.etiquettes .etq{padding:28px 28px 24px;min-height:100%}
.etq__haut{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.etq__num{font:italic 400 22px/1 var(--f-titre)}
.etq__prix{font:400 22px/1 var(--f-titre)}
.etq__nom{display:block;margin:30px 0 10px;font:italic 500 clamp(32px,2.9vw,44px)/1.05 var(--f-titre);transition:transform 700ms var(--ease-bulle)}
.etq:hover .etq__nom{transform:translateX(3px)}
.etq__mention{display:block;min-height:3em;font:400 11.5px/1.5 var(--f-lib);letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary)}
.etq__dos{display:block;font-size:14px;color:var(--text-secondary)}
.cuv__pied{margin-top:56px;align-items:baseline}
.cuv__pied .lien-s{grid-column:2/7;justify-self:start}
.cuv__pied .evin{grid-column:8/13;margin:0}
@media (max-width:1080px){.etiquettes{grid-template-columns:repeat(2,minmax(0,1fr))}.etiquettes > li:nth-child(n){margin-top:0}.etiquettes > li:nth-child(2n){margin-top:40px}}
@media (max-width:760px){
  .cuv__tete h2,.cuv__tete p{grid-column:1/-1}
  .cuv__tete p{margin-top:18px}
  .etiquettes{grid-column:1/-1;grid-template-columns:1fr;gap:24px}
  .etiquettes > li:nth-child(n){margin:0}
  .etiquettes > li:nth-child(2n){margin-left:28px}
  .etiquettes > li:nth-child(2n+1){margin-right:28px}
  .cuv__pied .lien-s,.cuv__pied .evin{grid-column:1/-1}
  .cuv__pied .evin{margin-top:12px}
}

/* ---------- Accueil, VI · Votre dosage ---------- */
.dosage{align-items:start}
.dosage__coupe{grid-column:2/7;position:sticky;top:calc(var(--haut) + 40px)}
.dosage__droite{grid-column:8/13}
.dosage__droite .t-sec{margin-bottom:.45em}
.coupe{width:min(74%,300px);height:auto;margin-left:10%}
.coupe .verre{fill:none;stroke:var(--text-primary);stroke-width:1.2;stroke-linejoin:round;stroke-linecap:round}
.coupe .reflet{fill:none;stroke:#FFFFFF;stroke-width:2.2;stroke-linecap:round;opacity:.85}
.coupe .ombre{fill:var(--panel)}
.coupe .vin path,.coupe .vin ellipse{opacity:0;transition:opacity 700ms var(--ease-nacre)}
.coupe .vin .on{opacity:1}
.coupe .v0{fill:#EFE7C4}.coupe .v1{fill:#EADDAA}.coupe .v2{fill:#E3CE8C}.coupe .v3{fill:#D8B562}
.coupe .s0{fill:#F4EED6}.coupe .s1{fill:#F1E8C6}.coupe .s2{fill:#EDE0B2}.coupe .s3{fill:#E6CF8F}
.coupe .fil circle{fill:none;stroke:var(--accent-hover);stroke-width:.8;animation:fil-monte var(--d,3s) linear var(--dl,0s) infinite;animation-play-state:paused}
[data-dosage].vis .coupe .fil circle{animation-play-state:running}
@keyframes fil-monte{0%{opacity:0;transform:translateY(0)}14%{opacity:.95}82%{opacity:.8}100%{opacity:0;transform:translateY(-68px)}}
.coupe .col circle{fill:none;stroke:var(--accent-hover);stroke-width:.9;opacity:0;transition:opacity 160ms var(--ease-nacre)}
.coupe .col.forme circle{opacity:1;transition:opacity 260ms var(--ease-bulle);transition-delay:calc(var(--i,0)*14ms)}
.coupe .goutte{fill:#D9BE78;opacity:0}
.coupe .goutte.tombe{animation:goutte 400ms cubic-bezier(.55,0,1,.45) both}
@keyframes goutte{0%{opacity:0;transform:translateY(0)}12%{opacity:1}88%{opacity:1;transform:translateY(106px)}100%{opacity:0;transform:translateY(110px)}}
.coupe .onde{fill:none;stroke:var(--accent-hover);stroke-width:.9;opacity:0;transform-box:fill-box;transform-origin:center}
.coupe .onde.touche{animation:onde 650ms var(--ease-nacre) both}
@keyframes onde{0%{opacity:.95;transform:scale(.18)}100%{opacity:0;transform:scale(1.25)}}

.regle{position:relative;margin:34px 0 6px;user-select:none;-webkit-user-select:none;touch-action:pan-y;cursor:pointer}
.regle__zones{position:relative;height:72px}
.zone{position:absolute;left:calc(var(--a)*100%);width:calc((var(--b) - var(--a))*100%);bottom:calc(var(--r)*24px);height:22px}
.zone::before{content:"";position:absolute;left:0;right:0;bottom:3px;height:5px;border:1px solid var(--line-strong);border-bottom:0}
.zone span{position:absolute;left:0;bottom:12px;white-space:nowrap;font:400 10.5px/1 var(--f-lib);letter-spacing:.14em;color:var(--text-secondary)}
.zone--d span{left:auto;right:0}
.regle__piste{position:relative;height:44px}
.regle__trait{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line-strong)}
.regle__grad-t{position:absolute;top:50%;left:calc(var(--x)*100%);width:1px;height:9px;margin-top:-4px;background:var(--line-strong)}
.regle__cran{position:absolute;top:50%;left:calc(var(--x)*100%);width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border:1px solid var(--text-primary);border-radius:50%;background:var(--canvas)}
.regle input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:none}
.regle__poignee{position:absolute;left:0;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--accent);transition:transform 600ms var(--ease-bulle)}
.regle__poignee.glisse{transition:none}
.regle input:focus-visible ~ .regle__poignee{outline:2px solid var(--text-primary);outline-offset:3px;box-shadow:0 0 0 3px var(--canvas),0 0 0 7px var(--accent)}
.regle__bulle{position:absolute;top:50%;width:0;height:0;pointer-events:none}
.regle__bulle i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border:1px solid var(--accent-hover);border-radius:50%;animation:regle-bulle 900ms var(--ease-bulle) both}
@keyframes regle-bulle{0%{opacity:.95;transform:translate(0,-6px) scale(.6)}100%{opacity:0;transform:translate(var(--dx,2px),-46px) scale(1)}}
.regle__grad{position:relative;height:20px;font-size:12px;line-height:20px;color:var(--text-secondary)}
.regle__grad span{position:absolute;left:calc(var(--x)*100%);transform:translateX(-50%)}
.regle__grad span:first-child{transform:none}
.regle__grad span:last-child{transform:translateX(-100%)}
.regle__noms{position:relative;height:30px;margin-top:6px}
.regle__noms span{position:absolute;left:calc(var(--x)*100%);transform:translateX(-50%);font:italic 400 17px/30px var(--f-titre);white-space:nowrap;transition:opacity 400ms var(--ease-nacre);opacity:.72}
.regle__noms span:first-child{transform:none}
.regle__noms span.actif{opacity:1}
.consigne{font-size:14px;color:var(--text-secondary);margin:6px 0 0}

.fd{margin-top:30px;min-height:420px}
.fd__nom{font:italic 400 44px/1.05 var(--f-titre);margin:0 0 8px}
.fd__dos{font-size:15px;line-height:1.5;color:var(--text-secondary);margin:0 0 18px}
.fd__notes > div{display:grid;grid-template-columns:96px 1fr;gap:16px;padding:12px 0;border-top:1px solid var(--line)}
.fd__notes > div:last-child{border-bottom:1px solid var(--line)}
.fd__notes dt{font:400 12px/1.8 var(--f-lib);letter-spacing:.2em;text-transform:uppercase;color:var(--text-secondary)}
.fd__serv{margin:16px 0 4px;font-size:15px}
.fd__prix{font:400 30px/1.2 var(--f-titre);margin:0}
.fd__prix [data-f="vol"]{font:400 14px/1 var(--f-texte);color:var(--text-secondary);margin-left:12px}
.fd .liens{margin-top:8px}
.fd-l.sort{opacity:0;transform:translateY(-12px);transition:opacity 250ms var(--ease-nacre),transform 250ms var(--ease-nacre)}
.fd-l.entre{animation:fd-entre 750ms var(--ease-bulle) both;animation-delay:calc(var(--j,0)*70ms)}
@keyframes fd-entre{0%{opacity:0;transform:translateY(16px)}60%{opacity:1;transform:translate(1px,2px)}100%{opacity:1;transform:none}}
.dosage .evin{margin-top:22px}
@media (max-width:1080px){.dosage__coupe{grid-column:1/6}.dosage__droite{grid-column:7/13}}
@media (max-width:760px){
  .dosage__coupe{grid-column:1/-1;position:relative;top:auto}
  .coupe{width:150px;margin:0 auto 12px 18%}
  .dosage__droite{grid-column:1/-1}
  .zone span{font-size:9.5px;letter-spacing:.1em}
  .regle__noms span{font-size:15px}
  .fd{min-height:0}
  .fd__nom{font-size:38px}
  .fd__notes > div{grid-template-columns:80px 1fr}
}

/* ---------- Accueil, VII · Les caves ---------- */
.caves__img .planche__cadre{aspect-ratio:21/9;max-height:78vh;width:100%}
.caves__img .planche__cadre img{object-position:50% 40%}
.caves__img figcaption{width:min(100% - 2*var(--marge),var(--maxw));margin:14px auto 0;padding-left:calc(var(--col) + var(--gout))}
.caves__g{margin-top:72px;align-items:start}
.caves__txt{grid-column:2/7}
.caves__tab{grid-column:8/13}
.formules{width:100%;border-collapse:collapse}
.formules th,.formules td{padding:16px 0;border-top:1px solid var(--line);vertical-align:baseline;text-align:left}
.formules tr:last-child th,.formules tr:last-child td{border-bottom:1px solid var(--line)}
.formules th{font:italic 400 21px/1.3 var(--f-titre);padding-right:18px}
.formules td{white-space:nowrap;font-size:15px;text-align:right;padding-left:16px}
.caves__lignes{margin-top:24px}
.caves__lignes p{font-size:16px;margin:0 0 12px}
.caves__tab .btn-p{margin-top:14px}
@media (max-width:760px){
  .caves__img .planche__cadre{aspect-ratio:4/3;max-height:none}
  .caves__img figcaption{padding-left:0}
  .caves__g{margin-top:44px}
  .caves__txt,.caves__tab{grid-column:1/-1}
  .caves__tab{margin-top:18px}
  .formules th{font-size:19px}
}

/* ---------- Accueil, VIII · Coffrets ---------- */
.cof{align-items:start}
.cof__grand{grid-column:2/7;grid-row:1/4}
.cof__txt{grid-column:8/13;grid-row:1}
.cof__petits{grid-column:8/13;grid-row:2;display:grid;grid-template-columns:1fr 1fr;gap:var(--gout);margin-top:36px}
.cof__petits .planche:nth-child(2){margin-top:64px}
.cof__liste{grid-column:8/13;grid-row:3;margin-top:40px}
.cof__liste li{padding:14px 0 16px}
.cof__ligne{display:grid;grid-template-columns:1fr auto;gap:2px 18px;align-items:baseline}
.cof__nom{font:italic 400 21px/1.3 var(--f-titre)}
.cof__det{grid-column:1;font-size:15px;color:var(--text-secondary)}
.cof__prix{grid-column:2;grid-row:1;font:400 22px/1.2 var(--f-titre);white-space:nowrap}
.cof__liste .cof__liv{margin:18px 0 4px;font-size:16px}
@media (max-width:760px){
  .cof__grand,.cof__txt,.cof__petits,.cof__liste{grid-column:1/-1;grid-row:auto}
  .cof__grand{margin-right:12%}
  .cof__txt{margin-top:36px}
  .cof__petits{margin-top:20px}
  .cof__petits .planche:nth-child(2){margin-top:40px}
}

/* ---------- Accueil, IX · Carnet de cave ---------- */
.cl-liste{grid-column:1/-1}
.cl-liste > li:last-child{border-bottom:1px solid var(--line)}
.cl{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gout);align-items:baseline;padding:34px 0 38px;color:inherit;text-decoration:none}
.cl__n{grid-column:1;font:italic 400 24px/1 var(--f-titre);color:var(--text-secondary)}
.cl__t{grid-column:2/8;font-size:40px;line-height:1.1;transition:transform 700ms var(--ease-bulle)}
.cl__c{grid-column:9/13;margin:0;color:var(--text-secondary)}
.cl:hover .cl__t{transform:translateX(4px)}
.carnet-l .lien-s{grid-column:2/8;margin-top:28px;justify-self:start}
@media (max-width:760px){
  .cl{grid-template-columns:repeat(6,minmax(0,1fr));padding:24px 0 26px}
  .cl__n{grid-column:1/-1;margin-bottom:10px}
  .cl__t{grid-column:1/-1;font-size:28px}
  .cl__c{grid-column:1/-1;margin-top:10px}
  .carnet-l .lien-s{grid-column:1/-1}
}

/* ---------- Accueil, X · Venir ---------- */
.venir{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;isolation:isolate;overflow:hidden}
.venir__fond{position:absolute;inset:0;z-index:-2;background:#C8C6BF center/cover no-repeat}
.venir.proche .venir__fond{background-image:url("/demos/champagne/assets/video/hero-ending-16x9.webp")}
.venir__g{width:min(100% - 2*var(--marge),var(--maxw))}
.venir__txt{grid-column:1/7;position:relative;isolation:isolate;text-shadow:var(--tglow)}
.venir__txt::before{content:"";position:absolute;inset:-26% -22% -26% -30%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(var(--veil),.74) 0%,rgba(var(--veil),.66) 55%,rgba(var(--veil),.3) 82%,rgba(var(--veil),0) 100%)}
.venir__txt .folio__lib{color:var(--text-primary)}
.venir__txt p{font-weight:500}
.venir__txt .btn-p{text-shadow:none;margin:6px 0 10px}
.venir__tel{font-size:16px}
/* 9:16 : le texte sur la craie haute, qui se fond dans la page ; la coupe entière dessous, jamais sous le texte */
@media (orientation:portrait){
  .venir{--ih:calc(100vw*1.7917);min-height:0;justify-content:flex-start}
  .venir__g{padding-bottom:calc(var(--ih)*.62)}
  .venir__fond{background-color:var(--canvas)}
  .venir.proche .venir__fond{background-image:linear-gradient(to bottom,var(--canvas) calc(100% - var(--ih)),rgba(241,240,234,.9) calc(100% - var(--ih)*.86),rgba(241,240,234,.5) calc(100% - var(--ih)*.72),rgba(241,240,234,0) calc(100% - var(--ih)*.6)),url("/demos/champagne/assets/video/hero-ending-9x16.webp");background-size:100% 100%,100% auto;background-position:0 0,50% 100%;background-repeat:no-repeat}
  .venir__txt{grid-column:1/-1}
  .venir__txt::before{inset:-12% -12% -6%}
}

/* ---------- Pied de page ---------- */
.pied{position:relative;background:var(--panel);border-top:1px solid var(--accent);padding:80px 0 36px;--fond:var(--panel)}
.pied__g{align-items:start;row-gap:40px}
.pied__muselet{grid-column:1/5;position:relative;width:min(100%,420px);aspect-ratio:7/6;color:var(--text-primary)}
.pied__muselet .collerette{position:absolute;inset:0;width:100%;height:100%}
.pied__muselet .muselet{position:absolute;left:50%;top:50%;width:76%;height:auto;aspect-ratio:1;transform:translate(-50%,-50%);--msw:.3}
.pied__maison{grid-column:6/9;font-size:15px}
.pied__maison p{margin:0 0 10px}
.pied__maison .logo{margin-bottom:18px}
.pied__nav{grid-column:10/13;font-size:15px}
.pied__nav ul{margin-bottom:18px}
.pied__nav a:not(.btn-p){display:inline-flex;align-items:center;min-height:40px;text-decoration:none}
.pied__nav a:not(.btn-p):hover{text-decoration:underline;text-underline-offset:5px}
.pied__nav .num-rom{display:inline-block;min-width:2.1em;color:var(--text-secondary)}
.pied__mentions{grid-column:1/-1;border-top:1px solid var(--line);padding-top:22px;margin-top:8px;font-size:13px;line-height:1.6;color:var(--text-secondary)}
.pied__mentions p{margin:0 0 4px;max-width:none}
@media (max-width:1080px){.pied__muselet{grid-column:1/5}.pied__maison{grid-column:5/9}.pied__nav{grid-column:9/13}}
@media (max-width:760px){
  .pied{padding-top:48px}
  .pied__muselet{grid-column:1/-1;width:260px}
  .pied__maison,.pied__nav{grid-column:1/-1}
}

/* ---------- Pages intérieures : en-têtes ---------- */
.tete{padding:calc(var(--haut) + 72px) 0 var(--sec)}
.tete .t-page{margin:0 0 .45em}
@media (max-width:760px){.tete{padding-top:calc(var(--haut) + 40px)}}

/* Les cuvées */
.tete-cuv__g{align-items:start}
.tete-cuv__txt{grid-column:2/9}
.tete-cuv__txt .filet--or{width:min(46%,280px);margin:0 0 34px}
.tete-cuv__txt p{margin-bottom:1.2em}
.tete-cuv__img{grid-column:9/13;margin-top:120px}
.fiche__g{align-items:start}
.fiche__etq{grid-column:2/7}
.fiche__det{grid-column:8/13}
.fiche--inv .fiche__etq{grid-column:8/13;grid-row:1}
.fiche--inv .fiche__det{grid-column:2/7;grid-row:1}
.etq--grande{padding:40px 40px 34px}
.etq--grande .lib{margin:0 0 30px}
.etq--grande .etq__nom{font-size:clamp(44px,4.8vw,74px);margin:0 0 14px}
.etq--grande .etq__mention{min-height:0;margin-bottom:26px}
.etq--grande .mini-regle{margin-top:6px}
.etq__pied{display:flex;justify-content:space-between;gap:16px;font-size:14px;color:var(--text-secondary);margin-top:6px}
.fiche__dl > div{display:grid;grid-template-columns:132px 1fr;gap:18px;padding:13px 0}
.fiche__dl > div:last-child{border-bottom:1px solid var(--line)}
.fiche__dl dt{font:400 12px/1.9 var(--f-lib);letter-spacing:.2em;text-transform:uppercase;color:var(--text-secondary)}
.fiche__dl dd{font-size:16px}
.fiche__serv{margin:20px 0 6px}
.fiche__prix{font:400 32px/1.2 var(--f-titre);margin:0}
.fiche__prix span{font:400 14px/1 var(--f-texte);color:var(--text-secondary);margin-left:10px}
.fiche__rose{font-size:15px;color:var(--text-secondary);margin:10px 0 0}
.gouter__g .gouter__in{grid-column:5/10}
@media (max-width:760px){
  .tete-cuv__txt,.tete-cuv__img{grid-column:1/-1}
  .tete-cuv__img{margin:28px 0 0 22%}
  .fiche__etq,.fiche__det,.fiche--inv .fiche__etq,.fiche--inv .fiche__det{grid-column:1/-1;grid-row:auto}
  .fiche__det{margin-top:32px}
  .etq--grande{padding:30px 26px 26px}
  .fiche__dl > div{grid-template-columns:120px minmax(0,1fr);gap:12px}
  .fiche__dl dt{font-size:11px;letter-spacing:.12em}
  .gouter__g .gouter__in{grid-column:1/-1}
}

/* La maison */
.tete-mai__g h1{grid-column:2/11}
.tete-mai__g p{grid-column:5/11}
.plein{margin-top:56px}
.plein .planche__cadre{aspect-ratio:21/9;max-height:80vh;width:100%}
.plein figcaption{width:min(100% - 2*var(--marge),var(--maxw));margin:14px auto 0;padding-left:calc(var(--col) + var(--gout))}
.craie__g{align-items:start}
.craie__txt{grid-column:2/7}
.craie__img{grid-column:8/12;margin-top:-80px}
.m-caves__g{align-items:start}
.m-caves__g h2{grid-column:5/12;grid-row:1}
.m-caves__petit{grid-column:2/5;grid-row:2;margin-top:24px}
.m-caves__txt{grid-column:5/8;grid-row:2;margin-top:24px}
.m-caves__grand{grid-column:8/13;grid-row:2;margin-right:calc(-1*var(--bord));margin-top:24px}
.m-caves__grand figcaption{padding-right:var(--bord)}
.vend__g{align-items:start}
.vend__a{grid-column:2/6}
.vend__b{grid-column:6/10;margin-top:56px}
.vend__b img{object-position:61% 50%}
.vend__txt{grid-column:8/12;margin-top:48px}
.annee__g{align-items:start}
.annee__g > .annee__col{grid-column:2/8}
.annee__img{grid-column:9/13;position:sticky;top:calc(var(--haut) + 32px)}
.annee li{display:grid;grid-template-columns:64px 1fr;gap:12px;padding:13px 0}
.annee li:last-child{border-bottom:1px solid var(--line)}
.annee__m{font:italic 400 22px/1.3 var(--f-titre);color:var(--text-secondary)}
.annee li > span:last-child{font-size:17px}
.annee__fin{margin-top:28px}
.fin__g .fin__in{grid-column:5/12}
@media (max-width:760px){
  .tete-mai__g h1,.tete-mai__g p{grid-column:1/-1}
  .plein .planche__cadre{aspect-ratio:4/3;max-height:none}
  .plein figcaption{padding-left:0}
  .craie__txt,.craie__img{grid-column:1/-1}
  .craie__img{margin:32px 0 0 20%}
  .m-caves__g h2,.m-caves__petit,.m-caves__txt,.m-caves__grand{grid-column:1/-1;grid-row:auto;margin-top:0}
  .m-caves__grand{margin:8px calc(-1*var(--marge)) 28px 0}
  .m-caves__grand figcaption{padding-right:var(--marge)}
  .m-caves__petit{width:62%;margin-top:28px}
  .vend__a{grid-column:1/4}
  .vend__b{grid-column:4/7;margin-top:40px}
  .vend__txt{grid-column:1/-1;margin-top:32px}
  .annee__g > .annee__col,.annee__img{grid-column:1/-1}
  .annee__img{position:relative;top:auto;margin:36px 18% 0 0}
  .fin__g .fin__in{grid-column:1/-1}
}

/* Visites et dégustations */
.tete-vis__g h1{grid-column:2/10}
.tete-vis__g p{grid-column:5/11}
.escalier{display:grid;row-gap:56px}
.fv{align-items:start}
.fv__in{display:grid;grid-template-columns:1fr;row-gap:0}
.fv:nth-child(1) .fv__in{grid-column:2/7}
.fv:nth-child(2) .fv__in{grid-column:5/10}
.fv:nth-child(3) .fv__in{grid-column:8/13}
.fv .etq{padding:30px 30px 26px;margin-top:-1px}
.fv__nom{font:italic 500 clamp(26px,2.4vw,34px)/1.12 var(--f-titre);margin:0 0 10px}
.fv__meta{font:500 15px/1.5 var(--f-texte);color:var(--text-secondary);margin:0 0 14px}
.fv .etq p:last-child{margin:0}
.fv__note{margin-top:48px}
.fv__note p{grid-column:5/11;margin:0}
.horaires{grid-column:2/9}
.horaires li{padding:18px 0 20px}
.horaires li:last-child{border-bottom:1px solid var(--line)}
.horaires p{margin:0;font:italic 400 clamp(21px,1.9vw,26px)/1.4 var(--f-titre);max-width:44ch}
.acces__g{align-items:start}
.carte{grid-column:1/7}
.acces__txt{grid-column:8/12}
.acces__txt ul li{padding:14px 0 16px}
.acces__txt ul li:last-child{border-bottom:1px solid var(--line)}
.acces__txt ul p{margin:0}
.carte svg{width:100%;height:auto;overflow:visible}
.carte .riviere{fill:none;stroke:var(--line-strong);stroke-width:1.1}
.carte .coteau{fill:none;stroke:var(--line-strong);stroke-width:.9}
.carte .rangs{fill:none;stroke:var(--line);stroke-width:1}
.carte .route-fond{fill:none;stroke:var(--line);stroke-width:1;stroke-dasharray:3 4}
.carte .route{fill:none;stroke:var(--text-primary);stroke-width:1.7;stroke-linecap:round;stroke-dasharray:1 1}
.carte .ville{fill:var(--canvas);stroke:var(--text-primary);stroke-width:1.2}
.carte .nom{font-family:var(--f-titre);font-style:italic;font-size:20px;fill:var(--text-primary)}
.carte .nom--grand{font-size:26px}
.carte .petit{font-family:var(--f-lib);font-size:11px;letter-spacing:.2em;fill:var(--text-secondary)}
.carte .point{fill:var(--accent);transform-box:fill-box;transform-origin:50% 100%}
.carte .point-anneau{fill:none;stroke:var(--accent-hover);stroke-width:1}
@media (prefers-reduced-motion:no-preference){
  .js .carte .point,.js .carte .point-anneau{opacity:0;transform:translateY(-16px) scale(.4);transform-box:fill-box;transform-origin:50% 100%;transition:opacity 500ms var(--ease-nacre),transform 900ms var(--ease-bulle)}
  .js .carte .point-anneau{transition-delay:250ms}
  .js .carte.arrive .point,.js .carte.arrive .point-anneau{opacity:1;transform:none}
}
.faq{grid-column:5/12}
.faq > li:last-child{border-bottom:1px solid var(--line)}
.faq h3{margin:0;font:inherit}
.faq__b{display:flex;justify-content:space-between;align-items:baseline;gap:24px;width:100%;min-height:60px;padding:18px 0;background:none;border:0;cursor:pointer;text-align:left;color:var(--text-primary);font:italic 400 clamp(21px,1.8vw,26px)/1.3 var(--f-titre)}
.faq__plus{position:relative;flex:none;width:14px;height:14px;transform:translateY(-3px)}
.faq__plus::before,.faq__plus::after{content:"";position:absolute;left:0;top:50%;width:14px;height:1px;background:currentColor;transition:transform 600ms var(--ease-filet)}
.faq__plus::after{transform:rotate(90deg)}
.faq__b[aria-expanded="true"] .faq__plus::after{transform:rotate(0)}
.faq__r{padding:0 0 22px}
.faq__r p{margin:0}
.faq__r.ouvre{animation:faq-in 650ms var(--ease-bulle) both}
@keyframes faq-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.reserver{background:var(--panel);--fond:var(--panel)}
.reserver__g h2{grid-column:2/12}
.reserver__g .forme-zone{grid-column:5/12}
@media (max-width:760px){
  .tete-vis__g h1,.tete-vis__g p{grid-column:1/-1}
  .fv:nth-child(n) .fv__in{grid-column:1/-1}
  .fv:nth-child(2) .fv__in{margin-left:24px}
  .fv:nth-child(3) .fv__in{margin-left:48px}
  .fv__note p{grid-column:1/-1}
  .horaires{grid-column:1/-1}
  .carte,.acces__txt{grid-column:1/-1}
  .carte{margin:0}
  .carte .petit{font-size:15px;letter-spacing:.14em}
  .carte .petit--cote{font-size:12px}
  .carte .nom{font-size:25px}
  .carte .nom--grand{font-size:31px}
  .acces__txt{margin-top:28px}
  .faq{grid-column:1/-1}
  .reserver__g h2,.reserver__g .forme-zone{grid-column:1/-1}
}

/* Commander */
.tete-cmd__g h1{grid-column:2/9}
.tete-cmd__g p{grid-column:8/12}
.cmd{align-items:stretch}
.cmd__g{grid-column:1/9}
.cmd__d{grid-column:9/13;display:flex;flex-direction:column}
.bloc{padding-left:calc(var(--col) + var(--gout))}
.cmd__part + .cmd__part{margin-top:calc(var(--sec)*2)}
.cp{display:grid;grid-template-columns:var(--wi,45%) 1fr;gap:var(--gout);align-items:end;padding:26px 0 30px}
.cp:last-child{border-bottom:1px solid var(--line)}
.cp--1{--wi:52%}
.cp--2{--wi:40%;grid-template-columns:1fr var(--wi)}
.cp--2 .planche{order:2}
.cp--3{--wi:32%}
.cp__nom{font:italic 500 clamp(26px,2.3vw,34px)/1.1 var(--f-titre);margin:0 0 10px}
.cp__cont{font-size:16px;margin:0 0 16px}
.cp__bas{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px}
.cp__prix{font:400 30px/1 var(--f-titre)}
.qte{display:inline-flex;align-items:center;border-bottom:1px solid var(--line-strong)}
.qte button{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;font:400 20px/1 var(--f-texte);color:var(--text-primary);transition:transform 300ms var(--ease-bulle)}
.qte button:active{transform:translateY(1px)}
.qte input{width:40px;height:44px;border:0;background:transparent;text-align:center;font:500 17px/1 var(--f-texte);-moz-appearance:textfield;appearance:textfield}
.qte input::-webkit-inner-spin-button,.qte input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.bon{width:100%;border-collapse:collapse}
.bon thead th{padding:12px 8px 12px 0;border-top:3px double var(--text-primary);border-bottom:1px solid var(--text-primary);text-align:left;font:400 11.5px/1.3 var(--f-lib);letter-spacing:.2em;text-transform:uppercase;color:var(--text-secondary)}
.bon td,.bon tbody th{padding:14px 8px 14px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.bon .n{width:52px;font:italic 400 19px/1 var(--f-titre);color:var(--text-secondary)}
.bon tbody th{font:italic 400 22px/1.25 var(--f-titre)}
.bon tbody th span{display:block;font:400 13px/1.5 var(--f-texte);color:var(--text-secondary);font-style:normal}
.bon .p{white-space:nowrap;font-size:16px}
.bon .q,.bon thead .q{text-align:right;padding-right:0}
.bon + .evin{margin-top:18px}
.livr li{padding:14px 0 16px}
.livr li:last-child{border-bottom:1px solid var(--line)}
.livr p{margin:0}
.recap-wrap{flex:1;position:relative;padding-top:8px}
.recap{position:sticky;top:calc(var(--haut) + 24px);padding:26px 0 8px;border-top:3px double var(--text-primary)}
.recap h2{font-size:clamp(30px,2.6vw,40px);margin:0 0 16px}
.recap__lignes li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:7px 0;font-size:15px}
.recap__lignes li span:last-child{white-space:nowrap}
.recap__vide{margin:0 0 8px;font-size:15px;color:var(--text-secondary)}
.recap__tot{margin-top:10px}
.recap__tot > div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.recap__tot dt{font:400 12px/1.5 var(--f-lib);letter-spacing:.2em;text-transform:uppercase;color:var(--text-secondary)}
.recap__tot dd{font-size:16px;text-align:right}
.recap__tot .total dd{font:400 32px/1 var(--f-titre)}
.cmd__form{padding-top:48px}
.cmd__form h3{font-size:30px;margin:0 0 24px}
@media (max-width:1080px){.cmd__g{grid-column:1/8}.cmd__d{grid-column:8/13}.cp,.cp--2{grid-template-columns:1fr}.cp--2 .planche{order:0}.cp .planche{width:min(100%,var(--wmax,420px))}.cp--2{--wmax:340px}.cp--3{--wmax:280px}}
@media (max-width:760px){
  .tete-cmd__g h1,.tete-cmd__g p{grid-column:1/-1}
  .cmd__g,.cmd__d{grid-column:1/-1}
  .bloc{padding-left:0}
  .cmd__d{margin-top:calc(var(--sec)*2)}
  .recap{position:relative;top:auto}
  .bon .n{display:none}
  .bon tbody th{font-size:19px}
  .bon td,.bon tbody th{padding-right:6px}
  .qte input{width:34px}
}

/* Carnet de cave */
.tete-car__g h1{grid-column:2/9}
.tete-car__g .chapeau{grid-column:5/11;margin-top:8px}
.sommaire{grid-column:5/12;margin-top:36px}
.sommaire li{padding:10px 0 12px}
.sommaire li:last-child{border-bottom:1px solid var(--line)}
.sommaire a{display:flex;gap:16px;align-items:baseline;min-height:44px;text-decoration:none;font:italic 400 21px/1.35 var(--f-titre)}
.sommaire a:hover span:last-child{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.sommaire .num-rom{min-width:2em;color:var(--text-secondary)}
.art__g{align-items:start}
.art__tete{grid-column:2/10}
.art__tete h2{margin-bottom:.3em}
.art__tete .chapeau{margin:0 0 40px}
.art__corps{grid-column:5/11}
.art__corps h3{font-size:clamp(24px,2.1vw,30px);margin:40px 0 14px}
.art__corps > p:first-child{margin-top:0}
.art--1 .art__img{grid-column:2/10;margin-bottom:48px}
.art--2 .art__img{grid-column:8/12;grid-row:2;margin-top:8px}
.art--2 .art__corps{grid-column:2/7;grid-row:2}
.art--3 .art__img{grid-column:2/5;grid-row:2;margin-top:8px}
.art--3 .art__corps{grid-column:6/12;grid-row:2}
.art__fin{margin-top:36px}
.echelle{margin:22px 0 10px;width:100%;border-collapse:collapse}
.echelle th,.echelle td{padding:11px 0;border-top:1px solid var(--line);text-align:left;vertical-align:baseline}
.echelle tr:last-child th,.echelle tr:last-child td{border-bottom:1px solid var(--line)}
.echelle th{font:400 12px/1.6 var(--f-lib);letter-spacing:.18em;text-transform:uppercase;padding-right:16px;white-space:nowrap}
.echelle td{font-size:16px}
.six{margin:30px 0 28px}
.six__regle{position:relative;display:block;padding-top:58px}
.six .mini-regle{margin:0 0 8px}
.six .mini-regle .pastille{margin:-4px 0 0 -4px}
.six__c{position:absolute;left:calc(var(--x)*100%);top:32px;transform:translateX(-50%);font:italic 400 18px/1 var(--f-titre);white-space:nowrap}
.six__c--h{top:6px}
.six__c:first-child{transform:none}
.six__grad{display:flex;justify-content:space-between;font-size:12px;color:var(--text-secondary)}
.six__leg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 24px;margin-top:18px;font-size:15px;line-height:1.6;color:var(--text-secondary)}
.six__leg .num-rom{display:inline-block;min-width:2.3em;color:var(--text-primary)}
@media (prefers-reduced-motion:no-preference){
  .js .six .pastille{opacity:0;transform:translateY(8px) scale(.4);transition:opacity 500ms var(--ease-nacre),transform 800ms var(--ease-bulle);transition-delay:calc(var(--n,0)*90ms + 300ms)}
  .js .six.in .pastille{opacity:1;transform:none}
  .js .six.fait .pastille{transition-delay:0s}
  .js .six__c{opacity:0;transition:opacity 700ms var(--ease-nacre) 200ms}
  .js .six.in .six__c{opacity:1}
}
.lettres > div{display:grid;grid-template-columns:64px 1fr;gap:16px;padding:14px 0}
.lettres > div:last-child{border-bottom:1px solid var(--line)}
.lettres dt{font:400 30px/1.1 var(--f-titre)}
.points{counter-reset:pt}
.points li{display:grid;grid-template-columns:52px 1fr;gap:12px;padding:16px 0}
.points li:last-child{border-bottom:1px solid var(--line)}
.points .num-rom{font-size:22px;line-height:1.35;color:var(--text-secondary)}
.points p{margin:0}
.points strong{font-weight:500}
@media (max-width:760px){
  .tete-car__g h1,.tete-car__g .chapeau,.sommaire{grid-column:1/-1}
  .art__tete,.art__corps,.art--1 .art__img,.art--2 .art__img,.art--2 .art__corps,.art--3 .art__img,.art--3 .art__corps{grid-column:1/-1;grid-row:auto}
  .art--2 .art__img{margin:0 0 32px 24%}
  .art--3 .art__img{margin:0 24% 32px 0}
  .art--1 .art__img{margin-bottom:32px}
  .six__c{font-size:15px}
}

/* ---------- Formulaires ---------- */
.champs{display:grid;grid-template-columns:1fr 1fr;column-gap:32px}
.champ{display:flex;flex-direction:column;gap:6px;margin:0 0 26px;padding:0;border:0;min-width:0}
.champ--l{grid-column:1/-1}
.champ > label,.champ > legend,.champ__lib{padding:0;font:400 12px/1.4 var(--f-lib);letter-spacing:.2em;text-transform:uppercase;color:var(--text-secondary)}
.champ > legend{margin-bottom:6px}
.champ input:not([type="checkbox"]):not([type="radio"]),.champ select,.champ textarea{width:100%;min-height:48px;padding:10px 0 9px;background:transparent;border:0;border-bottom:1px solid var(--line-strong);border-radius:0;font:400 17px/1.4 var(--f-texte);color:var(--text-primary);-webkit-appearance:none;appearance:none}
.champ select{padding-right:28px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2317181C' stroke-width='1.2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 4px center;cursor:pointer}
.champ textarea{min-height:112px;resize:vertical}
.champ [aria-invalid="true"]{border-bottom:2px solid var(--text-primary)!important}
.champ__aide{font-size:14px;color:var(--text-secondary);margin:2px 0 0}
.champ__err{display:flex;align-items:baseline;gap:10px;margin:4px 0 0;font:italic 400 18px/1.3 var(--f-titre);color:var(--text-primary)}
.champ__err::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--accent-ink);transform:translateY(-3px)}
.champ__err[hidden]{display:none}
.choix{display:flex;flex-wrap:wrap;gap:4px 28px}
.choix label,.case{display:inline-flex;align-items:center;gap:12px;min-height:44px;cursor:pointer;font-size:16px}
.champ > label.case{font:400 16px/1.4 var(--f-texte);letter-spacing:0;text-transform:none;color:var(--text-primary)}
.choix input,.case input{width:20px;height:20px;margin:0;accent-color:var(--text-primary);flex:none;cursor:pointer}
.form-bas{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:6px}
.form-mention{grid-column:1/-1;font-size:14px;color:var(--text-secondary);margin:0 0 18px}
.succes{padding:12px 0 8px;outline:none}
.succes .collerette{width:132px;height:88px;margin:0 0 22px -10px}
.succes p{font:italic 400 clamp(22px,2vw,28px)/1.4 var(--f-titre);max-width:30ch;margin:0}
.recap__err{margin:14px 0 0}
@media (max-width:760px){.champs{grid-template-columns:1fr}}

/* ---------- Petits écrans et touch ---------- */
@media (pointer:coarse){.lien-s,.btn-p{min-height:48px}.pied__nav a:not(.btn-p){min-height:44px}}

/* ---------- Onglet caché : tout s’arrête ---------- */
body.pause *,body.pause *::before,body.pause *::after{animation-play-state:paused!important}

/* ---------- Réduire les animations : état final, rien ne bouge ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .bw,.btn-p__pastille::before,.ambiance__jour,.coupe .fil circle,.defile{animation:none!important}
  .btn-p__pastille i{display:none}
  .coupe .col circle{opacity:1!important}
  .coupe .fil circle{opacity:.85;transform:translateY(calc(var(--k,0)*-13px - 4px))}
  .coupe .goutte,.coupe .onde{display:none}
}

@media print{.ambiance,.barre,.menu,.scene{display:none!important}.hero-fixe{min-height:0}}