/* Aurige : l’instrumentation de l’Altière. Dossier de création, sections 2 à 4, 11 et 12. */

:root{
  --canvas:#201F1E;
  --canvas-deep:#191817;
  --panel:#2A2927;
  --panel-raised:#34332F;
  --text-primary:#DCDFE3;
  --text-secondary:#A0A7AF;
  --accent:#C01B2F;
  --accent-hover:#CC2437;
  --on-accent:#F4F5F6;
  --accent-text:#F26B76;
  --accent-muted:#4A1C23;
  --light:#EEF1F4;
  --line:#3B3936;
  --line-strong:#76736E;

  --f-disp:"Saira","Arial Narrow",system-ui,sans-serif;
  --f-text:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"Chivo Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;

  --ease-brake:cubic-bezier(0.16,1,0.3,1);
  --ease-sweep:cubic-bezier(0.65,0,0.35,1);
  --ease-gauge:cubic-bezier(0.34,0,0.12,1);
  --ease-snap:cubic-bezier(0.2,0,0,1);

  --top:36px;
  --strip:40px;
  --bars:64px;
  --stage-top:calc(var(--top) + var(--bars));
  --m:clamp(20px,5vw,88px);
  --gut:24px;
  --maxw:1680px;
  --screen:calc(100svh - var(--top) - var(--bars));
  --readout:0px;
  --veil:16,15,14;
  --tshadow:0 1px 2px rgba(16,15,14,.95),0 3px 12px rgba(16,15,14,.78),0 10px 44px rgba(16,15,14,.8);
}
@media (pointer:coarse){:root{--strip:44px}}
@media (max-width:1023px){:root{--bars:calc(52px + var(--strip));--stage-top:calc(var(--top) + 52px)}}
@media (max-width:759px){:root{--readout:calc(32px + env(safe-area-inset-bottom))}}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--canvas);color:var(--text-primary);overflow-x:hidden;overflow-x:clip;overflow-anchor:none;scrollbar-gutter:stable;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--top) + var(--bars) + 12px);color-scheme:dark}
body{margin:0;min-height:100vh;background:var(--canvas);color:var(--text-primary);font:400 17px/1.6 var(--f-text);overflow-x:hidden;overflow-x:clip;padding-top:calc(var(--top) + var(--bars));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
@media (min-width:1280px){body{font-size:18px}}
img,picture,svg,video,canvas{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure,dl,dd,fieldset,legend{margin:0;padding:0}
fieldset{border:0;min-width:0}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
b,strong{font-weight:500}
::selection{background:var(--accent-muted);color:var(--light)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.nobr{white-space:nowrap}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}
main:focus{outline:none}

/* ---------- L’écran de mise sous tension (accueil, mode vidéo seulement) ----------
   Posé avant le premier rendu par le script de tête (html.booting) : le combiné s’allume pendant que la vidéo d’ouverture
   se charge. Le cadran monte avec les octets reçus ; à la première image, la ligne de feu s’allume, puis une bande
   de lumière balaie l’écran de gauche à droite et découvre la vidéo (780 ms, courbe de balayage). */
.boot{display:none}
html.booting{background:var(--canvas-deep)}
html.booting,html.booting body{overflow:hidden;overscroll-behavior:none}
html.booting .boot{display:block;position:fixed;left:0;right:0;top:var(--top);bottom:0;z-index:900;touch-action:none;-webkit-user-select:none;user-select:none;--bt-top:64px;--hz:62%}
html.booting .ring{display:none}
html.booting .hero-video{transition:none}
/* Sortie : la face glisse vers la droite pendant que son contenu glisse d’autant vers la gauche (il reste immobile
   à l’écran et se découvre derrière la bande), et la bande suit le bord : trois transformations, même courbe. */
.boot-face{position:absolute;inset:0;overflow:hidden;background:var(--canvas-deep);transition:transform 780ms var(--ease-sweep)}
.boot-in{position:absolute;inset:0;transition:transform 780ms var(--ease-sweep)}
.boot-env{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.boot-band{position:absolute;inset:0;pointer-events:none;opacity:0;transition:transform 780ms var(--ease-sweep)}
.boot-band::before{content:"";position:absolute;top:0;bottom:0;left:-28px;width:56px;background:linear-gradient(90deg,rgba(238,241,244,.6) 0 1px,rgba(238,241,244,.32) 1px calc(100% - 1px),rgba(238,241,244,.6) calc(100% - 1px))}
.boot.out .boot-face{transform:translateX(100%)}
.boot.out .boot-in{transform:translateX(-100%)}
.boot.out .boot-band{opacity:1;transform:translateX(100%)}

.boot-top{position:absolute;left:0;right:0;top:0;height:var(--bt-top);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 var(--m)}
.boot-top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:7px;pointer-events:none;background:
  repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 8px) left bottom/100% 3px no-repeat,
  repeating-linear-gradient(90deg,var(--line-strong) 0 1px,transparent 1px 64px) left bottom/100% 7px no-repeat,
  linear-gradient(var(--line),var(--line)) left bottom/100% 1px no-repeat}
.boot-state{display:flex;align-items:center;gap:10px;white-space:nowrap}
.boot-state .temoin{width:10px;height:10px}
.boot-state .temoin::after{animation:bootLamp 1600ms ease-in-out infinite}
.boot.done .boot-state .temoin::after{animation:none;opacity:1}
@keyframes bootLamp{0%,100%{opacity:0}50%{opacity:.75}}

.boot-horizon{position:absolute;left:var(--m);right:var(--m);top:var(--hz);height:1px;background:linear-gradient(90deg,var(--line),rgba(59,57,54,0) 70%)}
.boot-gauge{position:absolute;right:var(--m);top:var(--hz);width:min(640px,36vw,58svh);transform:translateY(-63.69%)}
.boot-gauge svg{display:block;width:100%;height:auto;overflow:visible}
.bt-t{stroke:var(--line);stroke-width:1.6;transition:stroke 160ms var(--ease-snap)}
.bt-t.maj{stroke:var(--line-strong);stroke-width:2.6}
.bt-t.on{stroke:var(--light)}
.bt-track{fill:none;stroke:var(--line);stroke-width:2}
.bt-fill{fill:none;stroke:var(--text-secondary);stroke-width:5;stroke-dasharray:100 100;stroke-dashoffset:100;transition:stroke-dashoffset 260ms linear}
.boot.done .bt-fill{stroke:var(--text-primary)}
.bt-needle{transform-box:view-box;transform-origin:200px 200px;transform:rotate(-120deg);transition:transform 280ms linear}
.bt-n1{stroke:var(--text-primary);stroke-width:4.4}
.bt-n2{stroke:var(--accent);stroke-width:4.4}
.bt-hub{fill:var(--panel-raised);stroke:var(--line-strong);stroke-width:2}
.bt-glint{fill:rgba(238,241,244,.1);transform-box:view-box;transform:translateX(-276px);animation:bootGlint 3400ms var(--ease-sweep) 500ms infinite}
@keyframes bootGlint{0%{transform:translateX(-276px)}26%,100%{transform:translateX(276px)}}
.boot-val{position:absolute;left:0;right:0;top:71%;text-align:center;font:400 clamp(28px,2.6vw,46px)/1 var(--f-mono);letter-spacing:.02em;color:var(--text-primary);white-space:nowrap}
.boot-pc{font-size:.46em;letter-spacing:.06em;color:var(--text-secondary)}
.boot-mo{position:absolute;left:0;right:0;top:calc(71% + clamp(28px,2.6vw,46px) + 12px);text-align:center;font:400 11px/1.4 var(--f-mono);letter-spacing:.12em;color:var(--text-secondary);white-space:nowrap}

.boot-head{position:absolute;left:var(--m);bottom:calc(100% - var(--hz) + 20px);max-width:min(46vw,680px)}
.boot-kicker{margin-bottom:16px}
.boot-title{font-family:var(--f-disp);font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:500;font-size:clamp(34px,3.6vw,64px);line-height:1.06;letter-spacing:-.012em;color:var(--text-primary);text-wrap:balance}
.boot-foot{position:absolute;left:var(--m);top:calc(var(--hz) + 22px);max-width:min(40vw,540px)}
.boot-sub{font:400 clamp(17px,1.25vw,20px)/1.5 var(--f-text);color:var(--text-secondary);max-width:38ch;text-wrap:pretty}
.boot-skip{margin-top:12px;padding:0;border:0;background:none;cursor:pointer;opacity:0;transition:opacity 420ms var(--ease-snap)}
.boot-skip[hidden]{display:none}
.boot-skip.shown{opacity:1}
.boot-head > *,.boot-foot > .boot-sub{animation:bootIn 600ms var(--ease-brake) both}
.boot-head > .boot-title{animation-delay:70ms}
.boot-foot > .boot-sub{animation-delay:140ms}
@keyframes bootIn{from{opacity:0;transform:translateX(-48px)}to{opacity:1;transform:none}}
@media (max-width:1023px){html.booting .boot{--bt-top:52px}}
@media (orientation:portrait),(max-width:759px){
  html.booting .boot{--hz:68%}
  .boot-gauge{left:50%;right:auto;top:calc(var(--bt-top) + clamp(20px,7svh,72px));width:min(440px,86vw,40svh);transform:translateX(-50%)}
  .boot-head{right:var(--m);bottom:calc(100% - var(--hz) + 16px);max-width:none}
  .boot-foot{right:var(--m);top:calc(var(--hz) + 18px);max-width:none}
  .boot-title{font-size:clamp(26px,7vw,46px)}
  .boot-sub{font-size:clamp(16px,4.2vw,20px)}
  .boot-band::before{left:-20px;width:40px}
}
@media (max-width:374px){.boot-state{font-size:0;gap:0}}

.skip{position:fixed;left:16px;top:calc(var(--top) + 10px);z-index:1100;padding:12px 18px;background:var(--panel-raised);color:var(--text-primary);border:1px solid var(--line-strong);border-radius:2px;font:500 15px/1 var(--f-text);text-decoration:none;transform:translateY(-220%);transition:transform 180ms var(--ease-snap)}
.skip:focus{transform:none}

/* ---------- Typographie ---------- */
.disp,.title,.giant,.band-title,.hs-title,.brand-word,.btn{font-family:var(--f-disp);font-stretch:125%;font-variation-settings:"wdth" 125}
.title{font-weight:500;font-size:clamp(34px,calc(2.6vw + 22px),72px);line-height:1.08;letter-spacing:-.012em;text-wrap:balance;color:var(--text-primary)}
.title--m{font-size:clamp(30px,calc(1.8vw + 20px),52px)}
.giant{font-weight:300;font-size:clamp(88px,16vw,240px);line-height:.9;letter-spacing:-.02em;color:var(--text-primary)}
.unit{font:400 14px/1 var(--f-mono);letter-spacing:.06em;color:var(--text-secondary);margin-left:.6em}
.label{font:400 12px/1.4 var(--f-mono);letter-spacing:.12em;color:var(--text-secondary)}
.txt{font:400 1em/1.6 var(--f-text);color:var(--text-secondary);max-width:60ch;text-wrap:pretty}
.txt--hi{color:var(--text-primary)}
.mono{font-family:var(--f-mono);letter-spacing:.02em}
.title + .txt,.label + .title{margin-top:18px}
.txt + .txt{margin-top:1em}

/* ---------- Grille ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--m)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut)}
.screen{position:relative;min-height:var(--screen)}
.pad{padding-block:clamp(72px,11vh,132px)}

/* ---------- Règles graduées ---------- */
.rule{height:12px;background:
  repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 8px) left bottom/100% 5px no-repeat,
  repeating-linear-gradient(90deg,var(--line-strong) 0 1px,transparent 1px 64px) left bottom/100% 11px no-repeat,
  linear-gradient(var(--line),var(--line)) left bottom/100% 1px no-repeat}
.vrule{width:12px;background:
  repeating-linear-gradient(180deg,var(--line) 0 1px,transparent 1px 8px) left top/5px 100% no-repeat,
  repeating-linear-gradient(180deg,var(--line-strong) 0 1px,transparent 1px 64px) left top/11px 100% no-repeat,
  linear-gradient(var(--line),var(--line)) left top/1px 100% no-repeat}

/* ---------- Boutons ---------- */
.btn{--rf-core:.38;--rf-edge:.6;position:relative;display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 26px;border:0;border-radius:2px;background:var(--accent);color:var(--on-accent);font-weight:600;font-size:13px;line-height:1;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.34);overflow:hidden;isolation:isolate;transition:background-color 180ms var(--ease-snap),box-shadow 180ms var(--ease-snap),transform 120ms var(--ease-snap);-webkit-tap-highlight-color:transparent}
.btn::after{content:"";position:absolute;top:-4px;bottom:-4px;left:0;width:100%;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,transparent calc(50% - 14px),rgba(255,255,255,var(--rf-edge)) calc(50% - 14px) calc(50% - 13px),rgba(255,255,255,var(--rf-core)) calc(50% - 13px) calc(50% + 13px),rgba(255,255,255,var(--rf-edge)) calc(50% + 13px) calc(50% + 14px),transparent calc(50% + 14px));
  transform:translateX(calc(-50% - 44px)) skewX(-24deg)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.2);opacity:0;pointer-events:none;transition:opacity 280ms var(--ease-snap)}
.btn:hover{background-color:var(--accent-hover)}
.btn:hover::after,.btn.swept::after{animation:btnSweep 700ms var(--ease-sweep) 1}
.btn:active{transform:translateY(1px)}
.btn:active::before{opacity:1;transition-duration:0s}
.btn:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}
@keyframes btnSweep{from{transform:translateX(calc(-50% - 44px)) skewX(-24deg)}to{transform:translateX(calc(50% + 44px)) skewX(-24deg)}}
.btn--ghost{--rf-core:.18;--rf-edge:.3;background:transparent;color:var(--text-primary);box-shadow:inset 0 0 0 1px var(--line-strong)}
.btn--ghost:hover{background:transparent;box-shadow:inset 0 0 0 1px var(--text-primary)}
.btn-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center}

.lnk{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:500 16px/1.4 var(--f-text);color:var(--text-primary);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:var(--line-strong);transition:text-decoration-color 180ms var(--ease-snap)}
.lnk::before{content:"";flex:none;width:6px;height:6px;border-radius:1px;background:var(--line-strong);transition:background-color 180ms var(--ease-snap)}
.lnk:hover{text-decoration-color:var(--text-primary)}
.lnk:hover::before,.lnk:focus-visible::before{background:var(--accent)}

/* ---------- Fond d’ambiance fixe ---------- */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.env-b{position:absolute;left:0;right:0;top:0;height:120px;background:linear-gradient(180deg,rgba(238,241,244,.05) 0 1px,rgba(238,241,244,.03) 1px calc(100% - 1px),rgba(238,241,244,.05) calc(100% - 1px));transform:translateY(-160px);animation:envDown 90s linear infinite;will-change:transform}
.env-b.b1{height:80px;animation-delay:-8s}
.env-b.b2{height:120px;animation-delay:-38s}
.env-b.b3{height:140px;animation-delay:-68s}
@keyframes envDown{from{transform:translateY(-160px)}to{transform:translateY(calc(100vh + 20px))}}
.env::after{content:"";position:absolute;inset:0;opacity:.03;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='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
.dust{position:fixed;inset:0;width:100vw;height:100vh;z-index:1;pointer-events:none}
main,.foot{position:relative;z-index:2}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* ---------- Barres (menu) ---------- */
.bars{position:fixed;top:var(--top);left:0;right:0;z-index:50}
.bar{position:relative;isolation:isolate;height:64px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:24px;padding:0 var(--m)}
.bar::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(42,41,39,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.bar::after,.seg-nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:7px;pointer-events:none;background:
  repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 8px) left bottom/100% 3px no-repeat,
  repeating-linear-gradient(90deg,var(--line-strong) 0 1px,transparent 1px 64px) left bottom/100% 7px no-repeat,
  linear-gradient(var(--line),var(--line)) left bottom/100% 1px no-repeat}
.brand{justify-self:start;display:inline-flex;align-items:center;gap:12px;min-height:44px;text-decoration:none;color:var(--text-primary)}
.cadran{width:30px;height:30px;flex:none;overflow:visible}
.cadran .cd-arc{fill:none;stroke:var(--text-primary);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:0}
.cadran .cd-bar{stroke:var(--light);stroke-width:2.2;stroke-linecap:butt}
.cadran .cd-dot{fill:var(--accent)}
html.js .cadran .cd-arc{stroke-dashoffset:1;transition:stroke-dashoffset 600ms var(--ease-gauge)}
html.js .cadran .cd-bar{transform:translateX(-30px);opacity:0;transition:transform 520ms var(--ease-brake) 420ms,opacity 120ms linear 420ms}
html.js .cadran .cd-dot{opacity:0;transition:opacity 160ms var(--ease-snap) 900ms}
html.ready .cadran .cd-arc{stroke-dashoffset:0}
html.ready .cadran .cd-bar{transform:none;opacity:1}
html.ready .cadran .cd-dot{opacity:1}
.brand-word{font-weight:600;font-size:15px;line-height:1;letter-spacing:.22em}

.seg-nav{position:relative;justify-self:center}
.seg-scroll{position:relative}
.seg{display:flex;height:40px;border:1px solid var(--line-strong);border-radius:2px;background:rgba(25,24,23,.35)}
.seg li{display:flex}
.seg li + li{border-left:1px solid var(--line)}
.seg a{position:relative;display:flex;align-items:center;gap:9px;padding:0 18px;font:500 14px/1 var(--f-text);letter-spacing:.02em;color:var(--text-secondary);text-decoration:none;white-space:nowrap;transition:color 180ms var(--ease-snap),background-color 180ms var(--ease-snap)}
.seg a::before{content:"";flex:none;width:4px;height:4px;border-radius:1px;background:var(--accent);opacity:0;transform:scale(.3);transition:opacity 180ms var(--ease-snap),transform 180ms var(--ease-snap)}
.seg a:hover{color:var(--text-primary);background:var(--panel-raised)}
.seg a[aria-current]{color:var(--text-primary)}
.seg a[aria-current]::before{opacity:1;transform:none}
.seg a:focus-visible{outline-offset:-3px}
.seg-index{position:absolute;left:0;top:37px;width:1px;height:2px;background:var(--accent);transform-origin:0 0;transform:translateX(var(--ix,0px)) scaleX(var(--iw,0));transition:transform 420ms var(--ease-brake);pointer-events:none}
.btn--bar{justify-self:end}
.b-short{display:none}
@media (min-width:1024px) and (max-width:1199px){
  .seg a{padding:0 13px}
  .btn--bar{padding:0 18px}
}

@media (max-width:1023px){
  .bar{height:52px;grid-template-columns:minmax(0,1fr) auto;column-gap:12px}
  .seg-nav{position:absolute;left:0;right:0;top:52px;height:var(--strip);z-index:-2;justify-self:stretch;transition:transform 420ms var(--ease-brake)}
  .seg-nav::before{content:"";position:absolute;inset:0;background:rgba(42,41,39,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  .seg-scroll{height:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .seg-scroll::-webkit-scrollbar{display:none}
  .seg{height:100%;width:max-content;border:0;background:none;padding:0 calc(var(--m) - 14px)}
  .seg li + li{border-left:0}
  .seg a{padding:0 14px}
  .seg-index{top:calc(var(--strip) - 9px)}
  html.hero-run .seg-nav{transform:translateY(calc(-1 * var(--strip)))}
  .btn--bar{height:36px;padding:0 16px}
  .b-long{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .b-short{display:inline}
}
@media (max-width:1023px) and (pointer:coarse){.btn--bar{height:44px}}

/* ---------- Panneau de données ---------- */
.panel{position:fixed;left:24px;bottom:24px;z-index:60;width:248px;height:72px;display:flex;align-items:center;gap:10px;padding:0 12px 0 8px;background:rgba(42,41,39,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line-strong);border-radius:2px;pointer-events:none;transition:opacity 360ms var(--ease-snap),transform 360ms var(--ease-brake)}
.panel.away,.panel.veil{opacity:0;transform:translateY(12px)}
.pn-g{width:56px;height:56px;flex:none}
.pn-t{min-width:0;flex:1;display:flex;flex-direction:column;gap:5px}
.pn-l,.pn-v{position:relative;display:block;overflow:hidden;white-space:nowrap}
.pn-l{height:14px;font:400 11px/14px var(--f-mono);letter-spacing:.12em;color:var(--text-secondary)}
.pn-v{height:23px;font:400 18px/23px var(--f-mono);color:var(--text-primary)}
.pn-v.fit{font-size:15px}
.pn-sep{display:none}
.pn-line{position:absolute;left:0;top:0;white-space:pre}
.pn-ch{display:inline-block;transition:transform 360ms var(--ease-brake),opacity 240ms var(--ease-snap)}
.pn-line.enter .pn-ch{transform:translateY(100%);opacity:0}
.pn-line.leave .pn-ch{transform:translateY(-100%);opacity:0}
@media (max-width:759px){
  .panel{left:0;right:0;bottom:0;width:auto;height:var(--readout);padding:0 var(--m) env(safe-area-inset-bottom);border:0;border-top:1px solid var(--line-strong);border-radius:0;gap:10px}
  .panel.away{transform:translateY(100%)}
  .pn-g{width:16px;height:16px}
  .pn-t{flex-direction:row;align-items:center;gap:0}
  .pn-l,.pn-v{height:16px;font-size:11px;line-height:16px}
  .pn-l{flex:none;width:50%}
  .pn-v{flex:1;letter-spacing:.06em}
  .pn-v.fit{font-size:11px}
  .pn-sep{display:block;flex:none;font:400 11px/16px var(--f-mono);color:var(--line-strong);padding:0 .6em}
}
@media (max-height:559px){.panel{display:none}}

/* ---------- Jauges (signature) ---------- */
.gauge svg{width:100%;height:auto;overflow:visible}
.g-track{fill:none;stroke:var(--line);stroke-width:1.4}
.g-fill{fill:none;stroke:var(--text-secondary);stroke-width:1.4;stroke-dasharray:100 100;stroke-dashoffset:100}
.g-t{stroke:var(--line);stroke-width:1}
.g-t.maj{stroke:var(--line-strong);stroke-width:1.4}
.g-lab{fill:var(--text-secondary);font:400 11px var(--f-mono);letter-spacing:.08em}
.g-needle{transform-box:view-box}
.g-n1{stroke:var(--text-primary);stroke-linecap:butt}
.g-n2{stroke:var(--accent);stroke-linecap:butt}
.g-hub{fill:var(--panel-raised);stroke:var(--line-strong);stroke-width:1}
.g-glint{fill:rgba(238,241,244,.10);transform-box:view-box}
.g-glint-e{fill:rgba(238,241,244,.22)}
.gauge.traced .g-fill{transition:stroke-dashoffset 1200ms var(--ease-gauge)}
.gauge.glint .g-glint{animation:glassSweep 820ms var(--ease-sweep) 1 both}
@keyframes glassSweep{from{transform:translateX(calc(var(--gr) * -1.6px))}to{transform:translateX(calc(var(--gr) * 1.6px))}}

/* ---------- Témoins ---------- */
.temoin{position:relative;flex:none;width:14px;height:14px;border-radius:2px;background:var(--accent-muted);box-shadow:inset 0 0 0 1px var(--line-strong)}
.temoin::after{content:"";position:absolute;inset:0;border-radius:2px;background:var(--light);box-shadow:0 0 0 1px rgba(238,241,244,.5),0 0 12px rgba(238,241,244,.35);opacity:0;transition:opacity 160ms var(--ease-snap)}
.lit .temoin::after,.temoin.on::after{opacity:1}
.lit .temoin.breath::after{animation:breath 5s ease-in-out infinite;animation-delay:-1.6s}
@keyframes breath{0%,100%{opacity:1}50%{opacity:.45}}

/* ---------- Ligne de feu ---------- */
.feu{position:absolute;left:0;right:0;bottom:0;height:2px;pointer-events:none;overflow:hidden}
.feu::before,.feu::after{content:"";position:absolute;top:0;bottom:0;transform:scaleX(0);transform-origin:50% 50%}
.feu::before{left:0;right:0;background:var(--accent-muted);transition:transform 900ms var(--ease-brake)}
.feu::after{left:36%;right:36%;background:var(--accent);transition:transform 700ms var(--ease-brake) 160ms}
.feu.on::before,.feu.on::after{transform:scaleX(1)}

/* ---------- Entrées nommées ---------- */
html.js [data-e="f"]{opacity:0;transform:translateX(-48px);transition:opacity 560ms var(--ease-brake),transform 600ms var(--ease-brake);transition-delay:calc(var(--i,0) * 70ms)}
html.js .in [data-e="f"],html.js [data-e="f"].in{opacity:1;transform:none}
html.js [data-e="a"]{opacity:.06}
html.js .in [data-e="a"],html.js [data-e="a"].in{animation:ignite 340ms linear both;animation-delay:calc(var(--i,0) * 60ms)}
@keyframes ignite{0%{opacity:.06}38%{opacity:.92}52%{opacity:.46}70%{opacity:.95}100%{opacity:1}}
html.js .settled [data-e="f"],html.js [data-e="f"].settled{transition-delay:0s}
/* Balayage : l’image se découvre derrière une bande de lumière verticale */
.sweep{position:relative;overflow:hidden;background:var(--cover,var(--canvas))}
.sweep-cover{position:absolute;inset:0;z-index:2;background:var(--cover,var(--canvas));pointer-events:none;display:none}
.sweep-cover::before{content:"";position:absolute;top:0;bottom:0;left:-56px;width:56px;background:linear-gradient(90deg,rgba(238,241,244,.55) 0 1px,rgba(238,241,244,.3) 1px calc(100% - 1px),rgba(238,241,244,.55) calc(100% - 1px))}
html.js .sweep-cover{display:block;transform:translateX(0)}
html.js .in .sweep-cover,html.js .sweep.in .sweep-cover{transform:translateX(calc(100% + 60px));transition:transform 720ms var(--ease-brake)}
.sweep img,.sweep picture{width:100%;height:100%;object-fit:cover}
.vignette::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 80% 75% at 50% 50%,rgba(var(--veil),0) 55%,rgba(var(--veil),.38) 100%)}

/* ---------- Pied de page ---------- */
.foot{border-top:1px solid var(--line);background:var(--canvas-deep);padding:64px 0 calc(40px + var(--readout))}
.foot-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px}
.foot-nav ul{display:flex;flex-wrap:wrap;gap:4px 28px}
.foot-nav a{display:inline-flex;align-items:center;min-height:44px;font:500 15px/1 var(--f-text);color:var(--text-primary);text-decoration:none}
.foot-nav a:hover{text-decoration:underline;text-underline-offset:5px}
.foot-tel{display:flex;flex-wrap:wrap;gap:4px 32px;margin-top:28px}
.foot-tel a{display:inline-flex;align-items:center;min-height:44px;font:400 14px/1 var(--f-mono);letter-spacing:.04em;color:var(--text-primary);text-decoration:none}
.foot-tel a:hover{text-decoration:underline;text-underline-offset:5px}
.foot .rule{margin:32px 0 28px}
.foot-legal{display:grid;gap:10px;max-width:120ch}
.foot-legal p{font:400 11px/1.7 var(--f-mono);letter-spacing:.03em;color:var(--text-secondary)}
.foot-fict{margin-top:22px;font:500 14px/1.5 var(--f-text);color:var(--text-secondary)}
.foot-fict a{color:var(--text-primary)}

/* =================================================================
   ACCUEIL : la vidéo d’ouverture
   ================================================================= */
html.scrub .p-accueil .hero{margin-top:calc(var(--stage-top) - var(--top) - var(--bars))}
.hero{position:relative}
.stage{display:none}
/* Hauteurs stables : la grande hauteur d’écran (lvh, repli vh), puis la valeur mesurée une fois par largeur (--vhs,
   posée par le moteur) : la barre d’adresse du téléphone qui se cache ou revient ne change plus la plage de défilement. */
html.scrub .hero{height:1100vh;height:1100lvh}
html.scrub.vhs .hero{height:calc(var(--vhs) * 11)}
html.scrub .stage{display:block;position:sticky;top:var(--stage-top);height:calc(100vh - var(--stage-top));height:calc(100lvh - var(--stage-top));overflow:hidden;background:var(--canvas-deep)}
html.scrub.vhs .stage{height:calc(var(--vhs) - var(--stage-top))}
html.scrub .hero-static{display:none}
.stage-media{position:absolute;inset:0}
.poster{position:absolute;inset:0;background:var(--canvas-deep) center/cover no-repeat;transition:opacity 700ms var(--ease-snap)}
.poster-end{opacity:0}
.stage.video-failed.late .poster-end{opacity:1}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 800ms var(--ease-snap);will-change:transform;transform:translateZ(0)}
.stage.video-ready .hero-video{opacity:1}
.stage.video-failed .hero-video{display:none}
.scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 120% 95% at 55% 48%,rgba(var(--veil),0) 40%,rgba(var(--veil),.55) 100%)}
@media (orientation:portrait){
  .scrim{background:linear-gradient(180deg,rgba(var(--veil),.68) 0%,rgba(var(--veil),.58) 26%,rgba(var(--veil),.22) 44%,rgba(var(--veil),0) 58%),radial-gradient(ellipse 130% 90% at 50% 55%,rgba(var(--veil),0) 45%,rgba(var(--veil),.5) 100%)}
  /* Canopée dans la zone des phrases au plan 1 et à l’allumage rubis : voiles renforcés (audit au pire pixel) */
  .band[data-fx="allumage"]::before{--sa:.8}
  .band[data-fx="ailes"]::before{--sa:.74}
}
.ring{position:absolute;left:50%;bottom:calc(28px + var(--readout));width:44px;height:44px;margin-left:-22px;color:var(--light);opacity:.9;transition:opacity 600ms var(--ease-snap)}
.ring .rg-track{fill:none;stroke:rgba(238,241,244,.18);stroke-width:2}
.ring .rg-arc{fill:none;stroke:currentColor;stroke-width:2.4;stroke-dasharray:100 100;stroke-dashoffset:var(--ld,100);transition:stroke-dashoffset 150ms linear}
.ring .rg-dot{fill:var(--accent)}
.stage.video-ready .ring,.stage.video-failed .ring{opacity:0}
.chevron{position:absolute;left:50%;bottom:calc(30px + var(--readout));width:28px;height:28px;margin-left:-14px;color:var(--text-primary);opacity:.8}

.bands{position:absolute;left:0;right:0;top:0;height:calc(100svh - var(--stage-top));pointer-events:none}
.band{position:absolute;left:6%;top:10%;width:34%;opacity:0;isolation:isolate;text-shadow:var(--tshadow);--k:0}
.band::before{content:"";position:absolute;inset:-46% -34% -46% -38%;z-index:-1;pointer-events:none;opacity:calc(.3 + .7 * var(--k,1));background:radial-gradient(closest-side,rgba(var(--veil),var(--sa,.66)) 0%,rgba(var(--veil),calc(var(--sa,.66) * .78)) 52%,rgba(var(--veil),0) 100%)}
.band--end{width:26%;pointer-events:auto}
.band-kicker{font:400 12px/1.4 var(--f-mono);letter-spacing:.12em;color:var(--text-primary);margin-bottom:16px;opacity:clamp(0,calc(var(--k) * 3),1)}
.band-title{font-weight:500;font-size:clamp(32px,3.4vw,60px);line-height:1.07;letter-spacing:-.012em;margin:0 0 .42em;color:var(--text-primary);text-wrap:balance}
.band-sub{font:400 clamp(17px,1.25vw,20px)/1.5 var(--f-text);color:var(--text-primary);max-width:34ch;text-wrap:pretty}
.band:not(.band--end) .band-sub{opacity:clamp(0,calc((var(--k) - .45) * 3),1)}
.sub-p{display:none}
.band-cta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin-top:26px}
.band .btn{text-shadow:none}
.band-lnk{text-shadow:var(--tshadow)}
@media (orientation:portrait){
  .band{left:var(--m);right:var(--m);width:auto;top:13%}
  .band::before{inset:-40% -12% -46% -12%}
  .band-title{font-size:clamp(28px,7.4vw,46px)}
  .band-sub{font-size:clamp(16px,4.2vw,20px)}
  .band--end{top:13%;bottom:0;height:auto}
  .band--end::before{inset:-18% -12% 50% -12%}
  .band-cta{position:absolute;left:0;right:0;top:82.8%;margin:0}
  .band-cta .btn{width:100%}
  .band-lnk{display:none}
  .sub-l{display:none}
  .sub-p{display:inline}
}
.split-vis{position:relative;display:inline}
.w{display:inline-block;position:relative;white-space:nowrap}
.c{display:inline-block;position:relative}

/* Phrase 1 : Allumage (les lettres se mettent sous tension dans l’ordre de lecture) */
.band[data-fx="allumage"] .c{--kc:clamp(0,calc((var(--k) - var(--th,0)) * 9),1);opacity:calc(.05 + .95 * var(--kc))}
/* Phrase 2 : Balayage (une bande nette passe et révèle les lettres) + tambour */
.band[data-fx="balayage"]{--kb:calc(var(--k) * 1.12 - .06)}
.band[data-fx="balayage"] .c{opacity:clamp(0,calc((var(--kb) - var(--th,0)) * 16),1)}
.band-title{position:relative}
.sweep-bar{position:absolute;left:0;top:-.08em;bottom:-.06em;width:46px;pointer-events:none;text-shadow:none;background:linear-gradient(90deg,rgba(238,241,244,.62) 0 1px,rgba(238,241,244,.3) 1px calc(100% - 1px),rgba(238,241,244,.62) calc(100% - 1px));transform:translateX(calc(var(--tx0,0px) + var(--kb) * var(--tw,400px) - 23px));opacity:clamp(0,calc(min(var(--kb),1 - var(--kb)) * 30),1)}
.dg{display:inline-block;height:1.07em;line-height:1.07em;overflow:hidden;vertical-align:bottom}
.dg-s{display:block;transform:translateY(calc(var(--n) * -1.07em * var(--kde,1)))}
.dg-s span{display:block;height:1.07em;text-align:center}
.drum-s span{text-align:center}
.band .dg{--kd:clamp(0,calc(var(--k) * 1.5),1);--kde:calc(1 - (1 - var(--kd)) * (1 - var(--kd)) * (1 - var(--kd)))}
/* Phrase 3 : Coulée (les mots freinent, un reflet court glisse sur chacun) */
.band[data-fx="coulee"] .w{--kc:clamp(0,calc((var(--k) - var(--th,0)) * 3.2),1);--e:calc(1 - (1 - var(--kc)) * (1 - var(--kc)) * (1 - var(--kc)));--kr:clamp(0,calc((var(--kc) - .5) * 2.2),1);opacity:var(--kc);transform:translateX(calc((1 - var(--e)) * -48px))}
.band[data-fx="coulee"] .w::after{content:"";position:absolute;left:0;right:0;top:.06em;bottom:.04em;pointer-events:none;background:linear-gradient(90deg,transparent calc(50% - 9px),rgba(238,241,244,.7) calc(50% - 9px) calc(50% - 8px),rgba(238,241,244,.34) calc(50% - 8px) calc(50% + 8px),rgba(238,241,244,.7) calc(50% + 8px) calc(50% + 9px),transparent calc(50% + 9px));transform:translateX(calc((var(--kr) - .5) * 100%));opacity:clamp(0,calc(min(var(--kr),1 - var(--kr)) * 10),1)}
/* Phrase 4 : Tambour (418 roule, le reste s’allume dans la pénombre) */
.band[data-fx="tambour"] .c{--kc:clamp(0,calc((var(--k) - var(--th,0)) * 7),1);opacity:calc(.08 + .92 * var(--kc))}
/* Phrase 5 : du centre vers les ailes, avec une lueur rubis qui retombe en argent */
.band[data-fx="ailes"] .c{--kg:clamp(0,calc((var(--k) - var(--th,0)) * 5),1);--kf:clamp(0,calc((var(--k) - var(--th,0) - .16) * 3.6),1);opacity:var(--kg)}
.band[data-fx="ailes"] .c::after{content:attr(data-c);position:absolute;left:0;top:0;color:var(--accent-text);text-shadow:0 0 16px rgba(192,27,47,.95),0 0 4px rgba(242,107,118,.7);opacity:calc(var(--kg) * (1 - var(--kf)))}
/* Phrase 6 : Arrivée freinée, puis le sous-titre, puis le bouton */
.band[data-fx="freinee"] .w{--kc:clamp(0,calc((var(--k) - var(--th,0)) * 3),1);--e:calc(1 - (1 - var(--kc)) * (1 - var(--kc)) * (1 - var(--kc)));opacity:var(--kc);transform:translateX(calc((1 - var(--e)) * -48px))}
.band--end .band-sub{--ks:clamp(0,calc((var(--k) - .5) * 3.4),1);opacity:var(--ks);transform:translateX(calc((1 - var(--ks)) * -24px))}
.band--end .band-cta{--kb:clamp(0,calc((var(--k) - .72) * 4.2),1);opacity:var(--kb)}

/* Le haut de page fixe : réduire les animations, économie de données, téléphone tenu à l’horizontale */
.hero-static{position:relative;min-height:var(--screen);display:flex;align-items:flex-start;overflow:hidden;background:var(--canvas-deep)}
.hero-static picture,.hero-static img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-static::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(var(--veil),.82) 0%,rgba(var(--veil),.55) 34%,rgba(var(--veil),0) 58%)}
.hs-inner{position:relative;z-index:2;padding:clamp(48px,9vh,110px) var(--m) calc(64px + var(--readout));max-width:640px;text-shadow:var(--tshadow)}
.hs-title{font-weight:500;font-size:clamp(34px,3.6vw,64px);line-height:1.06;letter-spacing:-.012em;margin:16px 0 20px;text-wrap:balance}
.hs-sub{font-size:clamp(17px,1.3vw,20px);line-height:1.55;max-width:36ch;margin-bottom:28px}
.hs-inner .btn{text-shadow:none}
@media (orientation:portrait){
  .hero-static{min-height:calc(100svh - var(--top) - var(--bars))}
  .hero-static::before{background:linear-gradient(180deg,rgba(var(--veil),.8) 0%,rgba(var(--veil),.6) 30%,rgba(var(--veil),0) 50%,rgba(var(--veil),0) 72%,rgba(var(--veil),.6) 100%)}
  .hs-inner{display:flex;flex-direction:column;min-height:calc(100svh - var(--top) - var(--bars));padding-top:8svh}
  .hs-inner .btn{margin-top:auto;width:100%}
}

/* ---------- 2. La ligne ne casse pas ---------- */
.s-arete{min-height:var(--screen);display:flex;align-items:flex-end}
.arete-fig{position:absolute;inset:0;--cover:var(--canvas)}
.arete-fig img{width:100%;height:100%;object-fit:cover}
.arete-svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:hidden}
.arete-line{stroke:var(--light);stroke-width:3;stroke-linecap:butt;opacity:0;transition:opacity 90ms linear}
.arete-halo{stroke:rgba(238,241,244,.28);stroke-width:9;opacity:0;transition:opacity 90ms linear}
.lit-line .arete-line,.lit-line .arete-halo{opacity:1}
.arete-glint{fill:rgba(238,241,244,.95);opacity:0}
.live .lit-line .arete-glint{animation:glintRun 8s var(--ease-sweep) infinite;animation-delay:-3s}
@keyframes glintRun{0%{transform:translateX(0);opacity:0}2%{opacity:1}13%{opacity:1}15%{transform:translateX(560px);opacity:0}100%{transform:translateX(560px);opacity:0}}
.arete-band{position:absolute;top:0;bottom:0;left:0;width:56px;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(238,241,244,.5) 0 1px,rgba(238,241,244,.26) 1px calc(100% - 1px),rgba(238,241,244,.5) calc(100% - 1px));transform:translateX(var(--bx,-80px));opacity:var(--bo,0)}
.arete-text{position:relative;z-index:3;padding:0 var(--m) calc(128px + var(--readout));max-width:calc(var(--m) + 660px);isolation:isolate}
.arete-text::before{content:"";position:absolute;inset:-30% -24% 0 -30%;z-index:-1;background:radial-gradient(closest-side,rgba(var(--veil),.8) 0%,rgba(var(--veil),.55) 55%,rgba(var(--veil),0) 100%)}
.arete-text .txt{color:var(--text-primary);max-width:46ch}
@media (max-width:759px){
  .s-arete{display:block;min-height:0}
  .arete-fig{position:relative;inset:auto;aspect-ratio:1600/893}
  .arete-text{padding:32px var(--m) 72px;max-width:none}
  .arete-text::before{display:none}
  .arete-text .txt{color:var(--text-secondary)}
}

/* ---------- 3. Cinq chiffres (épinglé) ---------- */
.s-cinq{height:300vh;position:relative}
.cinq-pin{position:sticky;top:calc(var(--top) + var(--bars));height:var(--screen);overflow:hidden}
.cinq-pin > .wrap{position:relative;height:100%}
.cinq-head{position:absolute;left:var(--m);top:clamp(28px,6vh,64px)}
.cinq-list{position:absolute;left:var(--m);right:var(--m);top:0;bottom:0}
.cinq-item{position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none}
.giant-line{position:absolute;left:0;top:62%;transform:translateY(-100%);display:flex;align-items:baseline;white-space:nowrap}
.gn{display:inline-block;overflow:hidden;padding:.08em .04em .14em 0;margin:-.08em 0 -.14em}
.gch{display:inline-block;transform:translateY(110%);opacity:0;transition:transform 560ms var(--ease-brake),opacity 260ms var(--ease-snap);transition-delay:calc(var(--i,0) * 45ms)}
.cinq-item.on .gch{transform:none;opacity:1}
.cinq-item.out .gch{transform:translateY(-110%);opacity:0}
.gu{opacity:0;transition:opacity 300ms var(--ease-snap)}
.cinq-item.on .gu{opacity:1;transition-delay:220ms}
.gcap{position:absolute;left:0;top:calc(62% + 22px);max-width:34ch;font:400 clamp(17px,1.35vw,21px)/1.45 var(--f-text);color:var(--text-primary);opacity:0;transform:translateX(-24px);transition:opacity 420ms var(--ease-brake),transform 520ms var(--ease-brake)}
.cinq-item.on .gcap{opacity:1;transform:none;transition-delay:160ms}
.cinq-gauge{position:absolute;right:var(--m);top:50%;width:min(520px,36vw,62svh);transform:translateY(-50%)}
.cinq-horizon{position:absolute;left:var(--m);right:var(--m);top:62%;height:1px;background:linear-gradient(90deg,var(--line),rgba(59,57,54,0) 70%)}
.live .gauge.breath .g-needle-b{animation:needleBreath 5s ease-in-out infinite;animation-delay:-2s}
.g-needle-b,.g-rotg{transform-box:view-box}
@keyframes needleBreath{0%,100%{transform:rotate(-.6deg)}50%{transform:rotate(.6deg)}}
@media (max-width:759px){
  .s-cinq{height:300vh}
  .cinq-gauge{right:auto;left:50%;top:clamp(56px,11svh,110px);width:min(300px,74vw,40svh);transform:translateX(-50%)}
  .giant-line{top:66%}
  .gcap{top:calc(66% + 14px);right:0}
  .cinq-horizon{top:66%}
}

/* ---------- 4. Deux autonomies ---------- */
.s-auto .grid{row-gap:40px}
.auto-head{grid-column:1 / span 7}
.auto-txt{grid-column:9 / span 4;align-self:end}
.hg-stack{grid-column:1 / -1;display:grid;gap:44px;margin-top:12px}
.hg-lab{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 24px;margin-bottom:14px;font:500 clamp(16px,1.2vw,19px)/1.4 var(--f-text)}
.hg-lab b{font:400 clamp(22px,2vw,30px)/1 var(--f-mono);letter-spacing:.02em;white-space:nowrap}
.hg-track{position:relative;height:34px;background:
  repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px calc(100% / 70)) left bottom/100% 8px no-repeat,
  repeating-linear-gradient(90deg,var(--line-strong) 0 1px,transparent 1px calc(100% / 7)) left bottom/100% 16px no-repeat,
  linear-gradient(var(--line),var(--line)) left bottom/100% 1px no-repeat}
.hg-track::after{content:"";position:absolute;right:0;bottom:0;width:1px;height:16px;background:var(--line-strong)}
.hg-fill{position:absolute;left:0;bottom:20px;height:10px;width:calc(var(--v) / 700 * 100%);background:linear-gradient(90deg,rgba(160,167,175,.25),rgba(220,223,227,.7));transform-origin:0 50%;transform:scaleX(0);transition:transform 1200ms var(--ease-gauge)}
.hg--mes .hg-fill{background:linear-gradient(90deg,rgba(238,241,244,.3),rgba(238,241,244,.95))}
.hg-tip{position:absolute;bottom:14px;left:calc(var(--v) / 700 * 100%);width:3px;height:22px;margin-left:-1.5px;background:var(--text-primary);opacity:0;transition:opacity 200ms linear 1100ms}
.hg--mes .hg-tip{background:var(--accent)}
.hg--mes .hg-tip::after{content:"";position:absolute;inset:-4px -5px;border-radius:2px;background:rgba(192,27,47,.45);opacity:0}
.in .hg-fill{transform:scaleX(1)}
.in .hg-tip{opacity:1}
.in .hg--mes .hg-tip::after{animation:tipPulse 6s ease-in-out infinite;animation-delay:-2.4s}
@keyframes tipPulse{0%,100%{opacity:0}45%{opacity:.9}60%{opacity:.2}}
.hg-scale{display:flex;justify-content:space-between;margin-top:8px;font:400 11px/1 var(--f-mono);letter-spacing:.06em;color:var(--text-secondary)}
.hg-scale span{width:0;display:flex;justify-content:center;white-space:nowrap}
.hg-scale span:first-child{justify-content:flex-start}
.hg-scale span:last-child{justify-content:flex-end}
.hg + .hg{margin-top:0}
@media (max-width:759px){
  .auto-head,.auto-txt{grid-column:1 / -1}
  .hg-scale span:nth-child(even){visibility:hidden}
}

/* ---------- 5. L’intérieur ---------- */
.s-int .grid{align-items:center;min-height:var(--screen)}
.int-text{grid-column:1 / span 4;padding-block:48px}
.int-fig{grid-column:6 / span 7;aspect-ratio:1600/893}
.wave{display:block;width:min(280px,100%);height:18px;margin:18px 0 6px;overflow:hidden}
.wave path{fill:none;stroke:var(--line-strong);stroke-width:1.2}
.live .wave path{animation:waveRun 7s linear infinite;animation-delay:-2.6s}
@keyframes waveRun{from{transform:translateX(0)}to{transform:translateX(-80px)}}
@media (max-width:959px){
  .int-text{grid-column:1 / -1;order:2;padding-top:32px}
  .int-fig{grid-column:1 / -1;order:1;margin-top:64px}
}

/* ---------- 6. Les teintes ---------- */
.teintes-head{grid-column:1 / span 6}
.teintes-txt{grid-column:8 / span 5;align-self:end}
.swatches{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gut);margin-top:48px}
.swatch{position:relative;display:flex;flex-direction:column;text-decoration:none;color:var(--text-primary);border:1px solid var(--line);border-radius:2px;background:var(--panel);overflow:hidden;transition:border-color 180ms var(--ease-snap)}
.swatch:hover,.swatch:focus-visible{border-color:var(--line-strong)}
.sw-paint{position:relative;height:36px;background:var(--c);overflow:hidden}
.sw-paint::after{content:"";position:absolute;top:0;bottom:0;left:0;width:100%;background:linear-gradient(90deg,transparent calc(50% - 22px),rgba(255,255,255,.55) calc(50% - 22px) calc(50% - 21px),rgba(255,255,255,.3) calc(50% - 21px) calc(50% + 21px),rgba(255,255,255,.55) calc(50% + 21px) calc(50% + 22px),transparent calc(50% + 22px));transform:translateX(-80%)}
.live .sw-paint::after{animation:paintSweep 24s var(--ease-sweep) infinite}
.live .swatch:nth-child(1) .sw-paint::after{animation-delay:-23s}
.live .swatch:nth-child(2) .sw-paint::after{animation-delay:-17s}
.live .swatch:nth-child(3) .sw-paint::after{animation-delay:-11s}
.live .swatch:nth-child(4) .sw-paint::after{animation-delay:-5s}
@keyframes paintSweep{0%{transform:translateX(-80%)}3.75%{transform:translateX(80%)}100%{transform:translateX(80%)}}
.sw-img{aspect-ratio:900/502;background:var(--canvas-deep)}
.sw-img img{width:100%;height:100%;object-fit:cover}
.sw-meta{display:flex;flex-direction:column;gap:6px;padding:16px 16px 18px}
.sw-name{font:500 17px/1.3 var(--f-text)}
.sw-price{font:400 11px/1.3 var(--f-mono);letter-spacing:.12em;color:var(--text-secondary)}
.teintes-cta{grid-column:1 / -1;margin-top:40px}
@media (max-width:959px){
  .teintes-head,.teintes-txt{grid-column:1 / -1}
  .teintes-txt{margin-top:20px}
  .swatches{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
}

/* ---------- 7. L’essai ---------- */
.essai-head{grid-column:1 / span 6;align-self:center}
.essai-dial{grid-column:8 / span 5;justify-self:end;width:min(360px,100%)}
.steps3{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:56px}
.step3{position:relative;padding:22px 32px 8px 0}
.step3 + .step3{padding-left:32px}
.step3 + .step3::before{content:"";position:absolute;left:0;top:0;bottom:0;width:12px;background:
  repeating-linear-gradient(180deg,var(--line) 0 1px,transparent 1px 8px) left top/5px 100% no-repeat,
  linear-gradient(var(--line-strong),var(--line-strong)) left top/1px 100% no-repeat}
.step3 .label{display:block;margin-bottom:14px}
.step3 h3{font:500 clamp(19px,1.5vw,23px)/1.35 var(--f-text);color:var(--text-primary);margin-bottom:10px}
.essai-cta{grid-column:1 / -1;margin-top:44px}
.dial48 .g-lab{font-size:12px}
.dial48 .g-center{font-size:26px;letter-spacing:.04em;fill:var(--text-primary)}
.dial48 .g-rot{fill:rgba(238,241,244,.06)}
.live .dial48 .g-rotg{animation:rot48 10s linear infinite;animation-delay:-3s;transform-box:view-box}
@keyframes rot48{from{transform:rotate(-120deg)}to{transform:rotate(240deg)}}
@media (max-width:859px){
  .essai-head,.essai-dial{grid-column:1 / -1}
  .essai-dial{justify-self:start;width:min(300px,80%);margin-top:32px}
  .steps3{grid-template-columns:1fr}
  .step3,.step3 + .step3{padding:24px 0 20px}
  .step3 + .step3::before{left:0;right:0;top:0;bottom:auto;width:auto;height:12px;background:
    repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 8px) left top/100% 5px no-repeat,
    linear-gradient(var(--line-strong),var(--line-strong)) left top/100% 1px no-repeat}
}

/* ---------- 8. Le bon de commande ---------- */
.bon-head{grid-column:1 / span 5}
.bon-list{grid-column:7 / span 6;display:grid}
.bon-item{display:flex;align-items:center;gap:20px;padding:20px 0;border-bottom:1px solid var(--line);font:500 clamp(17px,1.35vw,21px)/1.4 var(--f-text);color:var(--text-primary)}
.bon-item:first-child{border-top:1px solid var(--line)}
.bon-item .temoin{width:16px;height:16px}
@media (max-width:959px){.bon-head,.bon-list{grid-column:1 / -1}.bon-list{margin-top:36px}}

/* ---------- 9. L’écran final ---------- */
.s-final{min-height:var(--screen);display:flex;align-items:center;overflow:hidden}
.final-fig{position:absolute;inset:0}
.final-fig img{width:100%;height:100%;object-fit:cover}
.final-fig::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(var(--veil),.86) 0%,rgba(var(--veil),.62) 30%,rgba(var(--veil),0) 52%)}
.final-glow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}
.final-glow .fg{opacity:.35}
.live .final-glow .fg{animation:tailBreath 5s ease-in-out infinite;animation-delay:-1.2s}
@keyframes tailBreath{0%,100%{opacity:.25}50%{opacity:.85}}
.final-glow--p{display:none}
.final-text{position:relative;z-index:2;padding:72px var(--m) calc(120px + var(--readout));max-width:calc(var(--m) * 2 + 560px);text-shadow:var(--tshadow)}
.final-text .txt{color:var(--text-primary)}
.final-text .btn{margin-top:30px;text-shadow:none}
.final-tel{display:flex;flex-wrap:wrap;gap:0 18px;margin-top:22px;font:400 14px/1 var(--f-mono);letter-spacing:.04em}
.final-tel a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--text-primary)}
.final-tel a:hover{text-decoration:underline;text-underline-offset:5px}
.final-tel span[aria-hidden]{display:inline-flex;align-items:center;color:var(--line-strong)}
@media (orientation:portrait){
  .final-glow--l{display:none}
  .final-glow--p{display:block}
  .final-fig::after{background:linear-gradient(180deg,rgba(var(--veil),.88) 0%,rgba(var(--veil),.7) 34%,rgba(var(--veil),.1) 56%,rgba(var(--veil),0) 68%,rgba(var(--veil),.35) 84%,rgba(var(--veil),.7) 100%)}
  .s-final{align-items:stretch}
  .final-text{display:flex;flex-direction:column;align-items:flex-start;width:100%;min-height:var(--screen);padding:40px var(--m) calc(28px + var(--readout))}
  .final-text > div[data-e]{margin-top:auto}
}
@media (orientation:portrait) and (max-width:759px){
  .final-text > div[data-e],.final-text .btn{width:100%}
}
@media (max-width:480px){
  .final-tel span[aria-hidden]{display:none}
  .final-tel{gap:0 22px;margin-top:10px}
}

/* =================================================================
   PAGES INTERNES
   ================================================================= */
.fin{background:var(--canvas-deep);min-height:calc(var(--screen) * .7);display:flex;align-items:center}
.fin .btn-row{margin-top:36px}
.fin .txt{margin-top:18px}

/* ---------- Le modèle : écran titre épinglé ---------- */
.s-mtitle{height:200vh;position:relative}
.mt-pin{position:sticky;top:calc(var(--top) + var(--bars));height:var(--screen);display:flex;flex-direction:column;padding-top:clamp(20px,4vh,44px);overflow:hidden}
.mt-pin .label{padding-inline:var(--m)}
.mt-word{display:block;padding-inline:var(--m);margin-top:6px;font-weight:300;font-size:var(--fit,18vw);line-height:.86;letter-spacing:0;text-transform:uppercase;white-space:nowrap;color:var(--text-primary)}
.mt-fig{position:relative;flex:1;min-height:0;margin:clamp(12px,2.4vh,24px) var(--m) calc(clamp(16px,3vh,32px) + var(--readout));--cover:var(--canvas)}
.mt-fig img{width:100%;height:100%;object-fit:cover;object-position:50% 66%}
.mt-foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 40px;padding:clamp(6px,1.4vh,14px) var(--m) 0}
.mt-foot .txt{color:var(--text-primary);max-width:44ch}
.mt-cote{flex:1;min-width:min(420px,100%);max-width:620px}
.mt-cote-line{position:relative;height:14px}
.mt-cote-line i{position:absolute;left:0;top:6px;height:1px;width:100%;background:var(--text-secondary);transform-origin:0 50%;transform:scaleX(var(--cq,0))}
.mt-cote-line::before,.mt-cote-line::after{content:"";position:absolute;top:0;width:1px;height:14px;background:var(--line-strong)}
.mt-cote-line::before{left:0}.mt-cote-line::after{right:0}
.mt-cote-val{display:flex;justify-content:space-between;margin-top:8px;font:400 12px/1 var(--f-mono);letter-spacing:.1em;color:var(--text-secondary)}
.mt-cote-val output{color:var(--text-primary)}
@media (max-width:759px){
  .s-mtitle{height:170vh}
  .mt-fig{flex:none;aspect-ratio:1600/893;margin-inline:0}
  .mt-foot{flex-direction:column;align-items:stretch}
}

/* ---------- Le modèle : le dessin ---------- */
.dessin-fig{position:relative;aspect-ratio:1600/893;max-height:calc(var(--screen) * .9);width:100%;--cover:var(--canvas)}
.dessin-fig img{width:100%;height:100%;object-fit:cover}
.dessin-body{padding-block:48px 110px}
.dessin-body .title{grid-column:1 / span 5}
.dessin-body .txt{grid-column:7 / span 6;color:var(--text-primary)}
@media (max-width:859px){.dessin-body .title,.dessin-body .txt{grid-column:1 / -1}.dessin-body .txt{margin-top:18px}}

/* ---------- Le modèle : trois détails ---------- */
.drow{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:center;padding-block:clamp(40px,7vh,80px)}
.drow + .drow{border-top:1px solid var(--line)}
.drow-fig{grid-column:1 / span 6;position:relative;aspect-ratio:1072/603;max-width:1072px;--cover:var(--canvas)}
.drow-text{grid-column:8 / span 5}
.drow--r .drow-fig{grid-column:7 / span 6;order:2}
.drow--r .drow-text{grid-column:1 / span 5;order:1}
.drow-text h3{font:500 clamp(24px,2vw,32px)/1.2 var(--f-disp);font-stretch:125%;font-variation-settings:"wdth" 125;margin-bottom:16px}
.draw{aspect-ratio:640/400;background:var(--canvas-deep);border:1px solid var(--line);border-radius:2px}
.draw svg{width:100%;height:100%}
.dw{fill:none;stroke:var(--text-secondary);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dw-light{fill:none;stroke:var(--light);stroke-width:2}
.dw-ref{fill:none;stroke:var(--line-strong);stroke-width:1;stroke-dasharray:4 5}
.dw-cote{fill:none;stroke:var(--text-primary);stroke-width:1}
.dw-ruby{stroke:var(--accent);stroke-width:3;stroke-linecap:butt;fill:none}
.dw-txt{fill:var(--text-primary);font:400 13px var(--f-mono);letter-spacing:.06em}
.dw-air{fill:none;stroke:rgba(238,241,244,.42);stroke-width:1.2}
html.js .draw .dw,html.js .draw .dw-air,html.js .draw .dw-light,html.js .draw .dw-cote,html.js .draw .dw-txt{opacity:.08;transition:opacity 340ms linear;transition-delay:calc(var(--i,0) * 60ms + 200ms)}
html.js .in .draw .dw,html.js .in .draw .dw-air,html.js .in .draw .dw-light,html.js .in .draw .dw-cote,html.js .in .draw .dw-txt{opacity:1}
@media (max-width:859px){
  .drow-fig,.drow--r .drow-fig,.drow-text,.drow--r .drow-text{grid-column:1 / -1;order:0}
  .drow-text{margin-top:24px}
}

/* ---------- Le modèle : dimensions ---------- */
.dims{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,6vw,120px);margin-top:48px}
.dim{display:flex;align-items:baseline;justify-content:space-between;gap:8px 20px;padding:18px 0 20px;background:
  repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 8px) left bottom/100% 5px no-repeat,
  repeating-linear-gradient(90deg,var(--line-strong) 0 1px,transparent 1px 64px) left bottom/100% 9px no-repeat,
  linear-gradient(var(--line),var(--line)) left bottom/100% 1px no-repeat}
.dim-k{flex:none;font:500 16px/1.3 var(--f-text);color:var(--text-secondary)}
.dim-v{margin:0;font:400 clamp(17px,1.4vw,22px)/1.3 var(--f-mono);color:var(--text-primary);text-align:right}
@media (max-width:759px){.dims{grid-template-columns:1fr}.dim-v{font-size:16px}}
.drum{display:inline-block;height:1.3em;line-height:1.3em;overflow:hidden;vertical-align:bottom}
.drum-s{display:block;transform:translateY(calc(var(--n) * -1.3em));transition:transform 1100ms var(--ease-brake);transition-delay:calc(var(--i,0) * 40ms)}
.drum-s span{display:block;height:1.3em}
html.js .drums-wait .drum-s{transform:translateY(0);transition:none}
.giant .drum{height:1em;line-height:1em}
.giant .drum-s{transform:translateY(calc(var(--n) * -1em))}
.giant .drum-s span{height:1em}
html.js .giant .drums-wait .drum-s,html.js .drums-wait .giant .drum-s{transform:translateY(0)}

/* ---------- Le modèle : intérieur ---------- */
.s-mint{position:relative;min-height:var(--screen);display:flex;align-items:flex-end;overflow:hidden}
.mint-fig{position:absolute;inset:0;--cover:var(--canvas)}
.mint-fig img{width:100%;height:100%;object-fit:cover}
.mint-fig::after{content:"";position:absolute;inset:0;z-index:3;background:linear-gradient(0deg,rgba(var(--veil),.88) 0%,rgba(var(--veil),.6) 30%,rgba(var(--veil),0) 58%),linear-gradient(90deg,rgba(var(--veil),.5),rgba(var(--veil),0) 50%)}
.mint-text{position:relative;z-index:4;padding:48px var(--m) calc(120px + var(--readout));max-width:calc(var(--m) + 700px);text-shadow:var(--tshadow)}
.mint-text .txt{color:var(--text-primary)}
@media (max-width:759px){
  .s-mint{display:block;min-height:0}
  .mint-fig{position:relative;aspect-ratio:1600/893}
  .mint-fig::after{display:none}
  .mint-text{padding:32px var(--m) 72px;text-shadow:none}
  .mint-text .txt{color:var(--text-secondary)}
}

/* ---------- Le modèle : trois intérieurs ---------- */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut);margin-top:44px}
.trio-item figure{aspect-ratio:900/502;background:var(--canvas-deep);overflow:hidden;border-radius:2px}
.trio-item img{width:100%;height:100%;object-fit:cover}
.trio-item h3{display:flex;align-items:center;gap:12px;margin:18px 0 8px;font:500 19px/1.3 var(--f-text)}
.trio-item h3 i{width:12px;height:12px;border-radius:2px;border:1px solid var(--line-strong);background:var(--c)}
.trio-note{margin-top:36px;padding-top:18px;border-top:1px solid var(--line);font:400 12px/1.6 var(--f-mono);letter-spacing:.06em;color:var(--text-secondary)}
@media (max-width:859px){.trio{grid-template-columns:1fr;gap:36px}}

/* ---------- Technologie ---------- */
.s-ttitle{min-height:var(--screen);display:flex;align-items:center}
.s-ttitle .grid{align-items:center;width:100%}
.tt-text{grid-column:1 / span 6}
.tt-text .txt{margin-top:22px;color:var(--text-primary)}
.tt-canopy{grid-column:8 / span 5}
.canopy line{stroke:var(--light);stroke-linecap:butt}
html.js .canopy line{opacity:.07}
html.js .in .canopy line{animation:barOn 420ms linear both;animation-delay:calc(var(--i,0) * 90ms + 200ms)}
@keyframes barOn{0%{opacity:.07}35%{opacity:.95}50%{opacity:.4}100%{opacity:var(--o,.9)}}
@media (max-width:859px){.tt-text,.tt-canopy{grid-column:1 / -1}.tt-canopy{margin-top:40px}}

.s-autonomie{height:250vh;position:relative}
.au-pin{position:sticky;top:calc(var(--top) + var(--bars));min-height:var(--screen);display:flex;align-items:center;padding-block:clamp(24px,5vh,56px)}
.au-pin .grid{width:100%;align-items:center;row-gap:28px}
.au-text{grid-column:1 / span 5}
.au-text .txt{margin-top:20px}
.au-right{grid-column:7 / span 6}
.au-gauges{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.au-g{text-align:center}
.au-g .gauge{width:min(100%,300px,34svh);margin-inline:auto}
.au-g p{margin-top:6px;font:400 11px/1.5 var(--f-mono);letter-spacing:.1em;color:var(--text-secondary)}
.au-g b{display:block;font:400 clamp(24px,2.2vw,34px)/1.2 var(--f-mono);letter-spacing:0;color:var(--text-primary);margin-top:4px}
.au-table{margin-top:clamp(18px,3vh,32px)}
.au-row{display:flex;align-items:center;gap:16px;padding:clamp(8px,1.4vh,13px) 0;border-bottom:1px solid var(--line);font:500 clamp(15px,1.1vw,17px)/1.35 var(--f-text);opacity:.18;transform:translateX(-24px);transition:opacity 360ms var(--ease-snap),transform 520ms var(--ease-brake)}
.au-row:first-child{border-top:1px solid var(--line)}
.au-row.lit{opacity:1;transform:none}
.au-row .temoin{flex:none;width:12px;height:12px}
.au-row span:not(.temoin){flex:1}
.au-row b{font:400 clamp(15px,1.2vw,18px)/1 var(--f-mono);white-space:nowrap}
.au-row.mes b{color:var(--accent-text)}
@media (max-width:959px),(max-height:699px){
  .s-autonomie{height:auto}
  .au-pin{position:relative;top:auto;min-height:0;padding-block:clamp(72px,11vh,132px)}
  .au-text,.au-right{grid-column:1 / -1}
  .au-g .gauge{width:min(100%,260px)}
}

.s-recharge .grid{row-gap:24px}
.s-recharge.pad{padding-block:clamp(72px,11vh,120px)}
.rc-num .unit{position:relative;top:calc(clamp(88px,16vw,240px) * -.045)}
.rc-head{grid-column:1 / span 6}
.rc-num{grid-column:1 / span 7;display:flex;align-items:baseline;margin-top:clamp(12px,4vh,48px)}
.rc-num .giant{display:flex;align-items:baseline}
.rc-txt{grid-column:8 / span 5;align-self:end;padding-bottom:10px}
.rc-scale{grid-column:1 / -1;margin-top:8px}
.rc-track{position:relative;height:40px;background:
  repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 1%) left bottom/100% 8px no-repeat,
  repeating-linear-gradient(90deg,var(--line-strong) 0 1px,transparent 1px 10%) left bottom/100% 16px no-repeat,
  linear-gradient(var(--line),var(--line)) left bottom/100% 1px no-repeat}
.rc-fill{position:absolute;left:10%;width:70%;bottom:20px;height:12px;background:linear-gradient(90deg,rgba(238,241,244,.25),rgba(238,241,244,.9));transform-origin:0 50%;transform:scaleX(var(--rq,0))}
.rc-mark{position:absolute;bottom:14px;width:3px;height:24px;margin-left:-1.5px;background:var(--text-primary)}
.rc-mark.m10{left:10%}.rc-mark.m80{left:80%;background:var(--accent)}
.rc-labs{position:relative;height:18px;margin-top:8px;font:400 11px/1 var(--f-mono);letter-spacing:.08em;color:var(--text-secondary)}
.rc-labs span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.rc-labs span:first-child{transform:none}
.rc-labs span:last-child{transform:translateX(-100%)}
@media (max-width:859px){.rc-head,.rc-num,.rc-txt{grid-column:1 / -1}.rc-txt{padding-bottom:0}}
@media (max-width:599px){.rc-labs span:first-child{display:none}}

.s-chassis{position:relative;min-height:var(--screen);display:flex;align-items:flex-end;justify-content:flex-end;overflow:hidden}
.ch-fig{position:absolute;inset:0;--cover:var(--canvas)}
.ch-fig img{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.ch-fig::after{content:"";position:absolute;inset:0;z-index:3;background:linear-gradient(270deg,rgba(var(--veil),.86) 0%,rgba(var(--veil),.6) 32%,rgba(var(--veil),0) 56%),linear-gradient(0deg,rgba(var(--veil),.6),rgba(var(--veil),0) 40%)}
.ch-text{position:relative;z-index:4;padding:56px var(--m) calc(96px + var(--readout));width:min(100%,calc(var(--m) + 620px));text-shadow:var(--tshadow)}
.ch-text .txt{color:var(--text-primary)}
@media (max-width:759px){
  .s-chassis{display:block;min-height:0}
  .ch-fig{position:relative;aspect-ratio:1344/752}
  .ch-fig::after{display:none}
  .ch-text{width:auto;padding:32px var(--m) 72px;text-shadow:none}
  .ch-text .txt{color:var(--text-secondary)}
}

.aides-head{grid-column:1 / span 5}
.aides-body{grid-column:7 / span 6}
.aides-list{display:grid;margin-bottom:28px}
.aides-list li{display:flex;align-items:center;gap:18px;padding:18px 0 14px;font:500 clamp(18px,1.4vw,22px)/1.3 var(--f-text);background:
  repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 8px) left bottom/100% 5px no-repeat,
  linear-gradient(var(--line),var(--line)) left bottom/100% 1px no-repeat}
.aides-body .txt{color:var(--text-primary)}
@media (max-width:959px){.aides-head,.aides-body{grid-column:1 / -1}.aides-body{margin-top:32px}}

.gar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut);margin-top:40px}
.gar-item{padding:22px 0 0;border-top:1px solid var(--line-strong)}
.gar-item .temoin{display:block;margin-bottom:18px}
.gar-item .label{margin-bottom:8px;font:400 12px/1.4 var(--f-mono);letter-spacing:.12em;color:var(--text-secondary)}
.gar-item p{font:500 clamp(18px,1.4vw,22px)/1.4 var(--f-text);color:var(--text-primary)}
.gar-item .gar-bar{position:relative;height:6px;margin-top:22px;background:var(--line)}
.gar-item .gar-bar i{position:absolute;left:0;top:0;bottom:0;width:var(--v);background:var(--text-secondary);transform-origin:0 50%;transform:scaleX(0);transition:transform 1200ms var(--ease-gauge) 300ms}
.in .gar-item .gar-bar i{transform:scaleX(1)}
.gar-item .gar-bar b{position:absolute;top:-5px;bottom:-5px;left:var(--m70,70%);width:2px;background:var(--accent)}
@media (max-width:859px){.gar{grid-template-columns:1fr;gap:28px}}

/* ---------- Configurer ---------- */
.s-cfg{position:relative;background:var(--canvas-deep);min-height:calc(var(--screen) + 30vh)}
.cfg-pin{position:sticky;top:calc(var(--top) + var(--bars));min-height:var(--screen);display:flex;align-items:center;padding-block:clamp(20px,4vh,44px)}
.cfg-pin > .grid{width:100%;row-gap:clamp(16px,3vh,28px);align-items:center}
.cfg-head{grid-column:1 / span 8}
.cfg-head .txt{margin-top:12px;color:var(--text-primary)}
.cfg-stage{grid-column:1 / span 8;position:relative;aspect-ratio:1600/893;overflow:hidden;background:var(--canvas-deep);user-select:none;-webkit-user-select:none}
.cfg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cfg-rev{position:absolute;inset:0;overflow:hidden;will-change:transform}
.cfg-rev-in{position:absolute;inset:0;will-change:transform}
.cfg-band{position:absolute;top:0;bottom:0;left:0;width:56px;margin-left:-28px;z-index:3;pointer-events:none;will-change:transform;mix-blend-mode:screen;background:linear-gradient(90deg,rgba(238,241,244,.62) 0 1px,rgba(238,241,244,.3) 1px calc(100% - 1px),rgba(238,241,244,.62) calc(100% - 1px))}
.cfg-band::before{content:"";position:absolute;top:0;bottom:0;left:-32px;width:120px;background:rgba(255,255,255,.12)}
.cfg-ctrl{grid-column:9 / span 4;grid-row:1 / span 2;align-self:center;display:flex;flex-direction:column;align-items:center;gap:18px}
.seg--mode{height:40px;width:max-content}
.seg--mode label{position:relative;display:flex;align-items:center;gap:9px;padding:0 20px;font:500 14px/1 var(--f-text);letter-spacing:.02em;color:var(--text-secondary);cursor:pointer;transition:color 180ms var(--ease-snap),background-color 180ms var(--ease-snap);min-height:38px}
.seg--mode label::before{content:"";width:4px;height:4px;border-radius:1px;background:var(--accent);opacity:0;transform:scale(.3);transition:opacity 180ms var(--ease-snap),transform 180ms var(--ease-snap)}
.seg--mode label:hover{color:var(--text-primary);background:var(--panel-raised)}
.seg--mode input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.seg--mode input:checked + label{color:var(--text-primary)}
.seg--mode input:checked + label::before{opacity:1;transform:none}
.seg--mode input:focus-visible + label{outline:2px solid var(--accent-text);outline-offset:-3px}
.mode-wrap{position:relative}
.mode-wrap .seg-index{top:37px}
.dial{position:relative;width:100%;display:flex;flex-direction:column;align-items:center}
.dial legend{font:400 12px/1.4 var(--f-mono);letter-spacing:.12em;color:var(--text-secondary);text-align:center;margin:0 auto 4px;text-transform:uppercase}
.dial-box{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:grab;width:100%;max-width:var(--dw,400px)}
.dial-box.drag{cursor:grabbing}
.dial-svg{width:100%;height:auto;overflow:visible}
.d-t{stroke:var(--line);stroke-width:1.2}
.d-big{stroke:var(--line-strong);stroke-width:2;transition:stroke 140ms var(--ease-snap)}
.d-big.on{stroke:var(--accent)}
.d-sw{stroke:var(--line-strong);stroke-width:1}
.d-name{fill:var(--text-secondary);font:400 11px var(--f-mono);letter-spacing:.12em;transition:fill 180ms var(--ease-snap)}
.d-name.on{fill:var(--text-primary)}
.d-det{transition:opacity 240ms var(--ease-snap)}
.d-det.gone{opacity:0}
.d-names.relight{animation:ignite 340ms linear both}
.d-knob{fill:var(--panel-raised);stroke:var(--line-strong);stroke-width:1}
.d-edge{fill:none;stroke:rgba(238,241,244,.38);stroke-width:1}
.d-code{fill:var(--text-primary);font:400 18px var(--f-mono);letter-spacing:.06em}
.d-sup{fill:var(--text-secondary);font:400 11px var(--f-mono);letter-spacing:.1em}
.d-index{transform-box:view-box}
.d-index.turn{transition:transform 420ms var(--ease-brake)}
.d-index.snap{transition:transform 140ms var(--ease-snap)}
.d-i1{stroke:var(--text-primary);stroke-width:3}
.d-i2{stroke:var(--accent);stroke-width:3}
.d-focus{fill:none;stroke:var(--accent-text);stroke-width:2;opacity:0}
.dial:has(input:focus-visible) .d-focus{opacity:1}
.d-glint{fill:rgba(238,241,244,.16);transform:translateX(-200px)}
.dial.live .d-glint{animation:knobGlint 9s var(--ease-sweep) infinite;animation-delay:-4s}
@keyframes knobGlint{0%{transform:translateX(-200px)}9%{transform:translateX(200px)}100%{transform:translateX(200px)}}
.dial-hit{position:absolute;display:block;min-width:44px;min-height:44px;transform:translate(-50%,-50%);cursor:pointer;border-radius:2px}
.dial input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.consigne{min-height:1.5em;font:500 15px/1.45 var(--f-text);color:var(--text-secondary);text-align:center;max-width:32ch;transition:opacity 420ms var(--ease-snap)}
.consigne.gone{opacity:0}
@media (max-width:1179px){
  .cfg-head,.cfg-stage{grid-column:1 / -1}
  .cfg-ctrl{grid-column:1 / -1;grid-row:auto}
}
@media (max-width:759px){
  .s-cfg{min-height:0}
  .cfg-pin{position:relative;top:auto;min-height:0;display:block;padding-block:28px 40px}
  .cfg-pin > .grid{display:block}
  .cfg-stage{position:sticky;top:calc(var(--top) + var(--bars));z-index:5;margin:18px calc(-1 * var(--m)) 0;box-shadow:0 1px 0 var(--line)}
  .cfg-ctrl{margin-top:16px;gap:12px}
  .dial legend{margin-bottom:0}
  .cfg-band{width:44px;margin-left:-22px}
}
.seg--mode label + input + label{border-left:1px solid var(--line)}
@media (pointer:coarse){.seg--mode{height:46px}.seg--mode label{min-height:44px}.mode-wrap .seg-index{top:43px}}

.recap-head{grid-column:1 / span 5}
.recap{grid-column:1 / span 7;margin-top:36px}
.recap-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;gap:6px 18px;padding:16px 0 12px;border-bottom:1px solid var(--line)}
.recap-row:first-child{border-top:1px solid var(--line)}
.recap-row .temoin{width:10px;height:10px;align-self:center}
.recap-row.flash .temoin::after{animation:flashT 1200ms var(--ease-snap) both}
@keyframes flashT{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
.rk{font:400 11px/1.4 var(--f-mono);letter-spacing:.12em;color:var(--text-secondary);grid-column:2;grid-row:1}
.rv{font:500 clamp(17px,1.3vw,20px)/1.35 var(--f-text);grid-column:2;grid-row:2}
.rp{font:400 clamp(15px,1.2vw,18px)/1 var(--f-mono);grid-column:3;grid-row:1 / span 2;align-self:center;white-space:nowrap}
.recap-row .temoin{grid-column:1;grid-row:1 / span 2}
.recap-row.total .rv,.recap-row.total .rp{font-size:clamp(20px,1.7vw,26px)}
.recap-aside{grid-column:9 / span 4;grid-row:1 / span 2;align-self:center}
.price-gauge{width:min(100%,320px);margin-inline:auto}
.recap-foot{grid-column:1 / span 7}
.recap-note{margin-top:22px;font-size:15px}
.recap-follow{margin-top:14px;color:var(--text-primary)}
.recap-cta{margin-top:26px}
@media (max-width:959px){
  .recap-head,.recap,.recap-aside,.recap-foot{grid-column:1 / -1;grid-row:auto}
  .recap-aside{margin-top:36px}
}
.serie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--gut);margin-top:36px}
.serie li{display:flex;align-items:center;gap:16px;padding:20px 0 16px;font:500 clamp(17px,1.3vw,20px)/1.35 var(--f-text);background:
  repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 8px) left bottom/100% 5px no-repeat,
  linear-gradient(var(--line),var(--line)) left bottom/100% 1px no-repeat}
@media (max-width:859px){.serie{grid-template-columns:1fr}}

/* ---------- Essai ---------- */
.s-etitle{min-height:var(--screen);display:flex;align-items:center}
.s-etitle .grid{width:100%;align-items:center}
.et-text{grid-column:1 / span 6}
.et-text .txt{margin-top:22px;color:var(--text-primary)}
.et-dial{grid-column:8 / span 5;width:min(100%,460px);justify-self:end}
@media (max-width:859px){.et-text,.et-dial{grid-column:1 / -1}.et-dial{justify-self:center;width:min(100%,320px);margin-top:36px}}

.durees{display:grid;grid-template-columns:minmax(0,1fr) 12px minmax(0,1fr);gap:0 clamp(28px,5vw,72px);margin-top:40px}
.duree h3{font-weight:300;font-size:clamp(56px,7vw,112px);line-height:.95;letter-spacing:-.02em;margin-bottom:22px}
.duree .txt{color:var(--text-primary)}
.durees .vrule{align-self:stretch}
@media (max-width:759px){.durees{grid-template-columns:1fr;row-gap:40px}.durees .vrule{display:none}}

.demande{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut);margin-top:40px}
.demande li{display:flex;gap:16px;align-items:flex-start;padding:22px 0;border-top:1px solid var(--line-strong);font:500 clamp(17px,1.3vw,20px)/1.4 var(--f-text)}
.demande .temoin{margin-top:5px}
.demande-note{margin-top:28px;font:400 13px/1.6 var(--f-mono);letter-spacing:.06em;color:var(--text-primary)}
@media (max-width:859px){.demande{grid-template-columns:1fr;gap:0}}

.show-fig{position:relative;aspect-ratio:1344/752;max-height:calc(var(--screen) * .8);width:100%;margin-top:40px;--cover:var(--canvas)}
.show-fig img{width:100%;height:100%;object-fit:cover}
.shows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gut);margin-top:28px}
.show{padding:26px 28px;border:1px solid var(--line);border-radius:2px;background:var(--panel)}
.show h3{font:500 22px/1.2 var(--f-disp);font-stretch:125%;font-variation-settings:"wdth" 125;margin-bottom:12px}
.show p{color:var(--text-primary)}
.show a{display:inline-flex;align-items:center;min-height:44px;font:400 15px/1 var(--f-mono);letter-spacing:.04em;text-decoration:none;color:var(--text-primary)}
.show a:hover{text-decoration:underline;text-underline-offset:5px}
.show-notes{margin-top:24px;display:grid;gap:6px}
.show-notes p{color:var(--text-primary)}
@media (max-width:759px){.shows{grid-template-columns:1fr}}

.s-form{background:var(--canvas-deep)}
.form-head{grid-column:1 / span 4}
.form-g{width:min(220px,70%);margin-top:32px}
.form{grid-column:6 / span 7;position:relative}
.f-fields{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;transition:opacity 500ms var(--ease-snap)}
.form{min-width:0}
.form.off .f-fields{opacity:0;pointer-events:none}
.f-row{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;align-content:start;min-width:0}
.f-row--2{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px var(--gut)}
.f-lab,.f-row legend{font:400 12px/1.4 var(--f-mono);letter-spacing:.1em;color:var(--text-secondary);text-transform:uppercase;padding:0}
.f-row legend{margin-bottom:10px}
.f-in{width:100%;height:50px;padding:0 16px;background:var(--panel);border:1px solid var(--line-strong);border-radius:2px;color:var(--text-primary);font:400 17px/1 var(--f-text);transition:border-color 180ms var(--ease-snap),box-shadow 180ms var(--ease-snap)}
.f-in:hover{border-color:var(--text-secondary)}
.f-in:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}
.f-in::placeholder{color:#8B9199}
.f-in[aria-invalid="true"]{border-color:var(--accent-text)}
select.f-in{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text-secondary) 50%),linear-gradient(135deg,var(--text-secondary) 50%,transparent 50%);background-position:calc(100% - 22px) 22px,calc(100% - 16px) 22px;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
input[type="date"].f-in{color-scheme:dark}
.f-hint{font-size:14px;color:var(--text-secondary)}
.f-err{min-height:0;font:500 14px/1.4 var(--f-text);color:var(--accent-text)}
.f-err:empty{display:none}
.f-seg{display:flex;flex-wrap:wrap;border:1px solid var(--line-strong);border-radius:2px;width:max-content;max-width:100%}
.f-seg label{position:relative;display:flex;align-items:center;gap:9px;min-height:44px;padding:0 18px;font:500 15px/1.2 var(--f-text);color:var(--text-secondary);cursor:pointer;transition:color 180ms var(--ease-snap),background-color 180ms var(--ease-snap)}
.f-seg label + input + label,.f-seg input + label ~ label{border-left:1px solid var(--line)}
.f-seg label::before{content:"";width:4px;height:4px;border-radius:1px;background:var(--accent);opacity:0;transform:scale(.3);transition:opacity 180ms,transform 180ms}
.f-seg input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.f-seg input:checked + label{color:var(--text-primary);background:var(--panel-raised);box-shadow:inset 0 -2px 0 var(--accent)}
.f-seg input:checked + label::before{opacity:1;transform:none}
.f-seg input:focus-visible + label{outline:2px solid var(--accent-text);outline-offset:-3px}
.f-seg label:hover{color:var(--text-primary)}
.f-seg--col{flex-direction:column;width:100%}
.f-seg--col input + label ~ label{border-left:0;border-top:1px solid var(--line)}
.f-config{padding:16px 18px;border:1px dashed var(--line-strong);border-radius:2px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 18px}
.f-config p{font:500 16px/1.45 var(--f-text);color:var(--text-primary)}
.f-submit{justify-self:start;margin-top:6px}
.f-ok{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:24px 0;opacity:0;transform:translateX(-24px);pointer-events:none;transition:opacity 520ms var(--ease-brake),transform 600ms var(--ease-brake)}
.f-ok[hidden]{display:none}
.form.off .f-ok{opacity:1;transform:none;pointer-events:auto;transition-delay:700ms}
.f-ok .txt{margin-top:16px;color:var(--text-primary);max-width:46ch}
.f-ok .lnk{margin-top:18px}
.f-ok h3:focus{outline:none}
@media (max-width:959px){.form-head,.form{grid-column:1 / -1}.form{margin-top:40px}}
@media (max-width:559px){.f-row--2{grid-template-columns:1fr}}

.faq{max-width:980px;margin-top:36px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;gap:18px;min-height:64px;padding:14px 0;cursor:pointer;list-style:none;font:500 clamp(17px,1.35vw,21px)/1.35 var(--f-text)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .temoin{width:12px;height:12px}
.faq details[open] summary .temoin::after{opacity:1}
.faq summary:hover{color:var(--light)}
.faq .faq-a{padding:0 0 24px 30px;max-width:66ch;color:var(--text-secondary)}
.faq summary:focus-visible{outline-offset:2px}

.mentions{max-width:84ch;margin-top:24px;display:grid;gap:12px}
.mentions p{color:var(--text-secondary)}

/* ---------- En-têtes de section communs ---------- */
.sec-head{display:grid;gap:0}
.sec-head .label{margin-bottom:0}

/* ---------- Réduire les animations ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:1ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .env-b{animation:none!important;transform:translateY(30vh)}
  .env-b.b2{transform:translateY(60vh)}.env-b.b3{transform:translateY(85vh)}
  html.js [data-e="f"]{opacity:1;transform:none}
  html.js [data-e="a"]{opacity:1;animation:none!important}
  html.js .sweep-cover{display:none}
  html.js .draw .dw,html.js .draw .dw-air,html.js .draw .dw-light,html.js .draw .dw-cote,html.js .draw .dw-txt{opacity:1}
  html.js .canopy line{opacity:var(--o,.9);animation:none!important}
  .hg-fill{transform:scaleX(1)}.hg-tip{opacity:1}
  .gar-item .gar-bar i{transform:scaleX(1)}
  .feu::before,.feu::after{transform:scaleX(1)}
  .temoin::after{opacity:1}
  .au-row{opacity:1;transform:none}
  .live .lit-line .arete-glint,.live .sw-paint::after,.dial.live .d-glint,.live .final-glow .fg,.live .wave path,.live .dial48 .g-rotg,.gauge.breath .g-needle-b,.lit .temoin.breath::after,.in .hg--mes .hg-tip::after{animation:none!important}
  .btn:hover::after,.btn.swept::after{animation:none!important}
  .cadran .cd-arc{stroke-dashoffset:0!important}.cadran .cd-bar{transform:none!important;opacity:1!important}.cadran .cd-dot{opacity:1!important}
}

@media print{.bars,.panel,.env,.dust,.xw-bandeau{display:none}body{padding-top:0}}