:root{--black:#070707;--white:#efefeb;--red:#e30613;--muted:#8c8c88;--h:72px;font-family:Arial,Helvetica,sans-serif;color:var(--white);background:var(--black);font-synthesis:none}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--h)}
body{margin:0;background:var(--black)}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{color:inherit;background:none;border:0;cursor:pointer}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--red);outline-offset:4px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.skip{position:fixed;top:-100px;z-index:30;padding:15px;background:var(--white);color:var(--black)}
.skip:focus{top:0}

/* Header */
header{position:sticky;top:0;z-index:10;height:var(--h);display:flex;align-items:center;padding:0 4%;background:var(--black)}
.brand{font-size:12px;font-weight:700;letter-spacing:.11em}
nav{margin-left:auto;display:flex;gap:36px;align-items:center;font-size:12px;letter-spacing:.08em}
.languages{display:flex;gap:9px;align-items:center}
.languages button{padding:12px 0;font-size:12px;color:#777}
.languages button[aria-pressed=true]{color:var(--white)}

/* Chapters — sticky stage driven by scroll */
.chapter{position:relative;height:260svh;--p:0;--lift:0}
.stage{position:sticky;top:var(--h);height:calc(100svh - var(--h));min-height:480px;padding:26px 4% 28px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.chapter+.chapter .stage{border-top:1px solid #1d1d1d}
.meta,.bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:12px;letter-spacing:.08em}
.meta{color:var(--muted)}
.bottom{font-size:11px}
.bottom a{border-bottom:1px solid #666;padding:8px 0}
.track{flex:1;max-width:150px;height:2px;background:#303030}
.track i{display:block;height:100%;background:currentColor;transform-origin:left;transform:scaleX(var(--p))}

.kinetic{flex:1;display:flex;flex-direction:column;justify-content:center;
  transform:translateY(calc((1 - var(--lift)) * 11svh))}
.question{margin:0;font-size:clamp(48px,10.5vw,178px);font-weight:700;letter-spacing:-.065em;line-height:.9}
.line{display:block}
.answer{margin:.3em 0 0;font-size:clamp(40px,9vw,152px);font-weight:700;letter-spacing:-.065em;line-height:.95;white-space:nowrap}
.answer strong{font-weight:inherit;color:var(--red)}

/* Letters */
.w{display:inline-block;white-space:nowrap}
.ch{display:inline-block;will-change:transform,opacity}
.question .ch{opacity:0;transform:translateY(.55em);
  transition:opacity .6s ease,transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i) * 32ms)}
.chapter.in .question .ch{opacity:1;transform:none}
.answer .ch{opacity:0;transform:translateY(.45em)}

/* Reel */
.reel-section{padding:100px 4% 50px}
.section-meta h2{font-size:clamp(32px,5vw,72px);letter-spacing:-.05em;margin:0 0 25px;font-weight:500}
.section-meta h2 span,.craft span{color:var(--red)}
.reel-frame{position:relative;aspect-ratio:16/9;background:#0d0d0d;display:flex;align-items:center;justify-content:center;overflow:hidden}
#reel{width:100%;height:100%;object-fit:contain;display:block;background:#000}
#big-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;font-size:20px;border:1px solid #ffffff70;border-radius:50%;background:#0005;backdrop-filter:blur(6px)}
.player-controls{position:absolute;z-index:2;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;padding:20px 18px 4px;background:linear-gradient(transparent,rgba(0,0,0,.6));transition:opacity .3s;opacity:.9}
.player-controls button{display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex-shrink:0;padding:0}
.player-controls svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.player-controls input{flex:1;min-width:30px;height:28px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer;--seek:0%}
#seek::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,#eee var(--seek),#ffffff40 var(--seek))}
#seek::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:8px;height:8px;margin-top:-3px;background:#eee;border-radius:50%}
#seek::-moz-range-track{height:2px;background:#ffffff40}
#seek::-moz-range-progress{height:2px;background:#eee}
#seek::-moz-range-thumb{width:8px;height:8px;border:0;border-radius:50%;background:#eee}
#time{font-size:11px;color:#ddd;white-space:nowrap;font-variant-numeric:tabular-nums;margin-left:6px}
.reel-frame.is-playing:not(.awake):not(:has(:focus-visible)) .player-controls{opacity:0;pointer-events:none}
.reel-frame:fullscreen{width:100vw;height:100vh;aspect-ratio:auto;background:#000}

/* Signature + footer */
.signature{padding:65px 4% 90px}
.craft{font-size:clamp(40px,7vw,110px);letter-spacing:-.055em;line-height:1.02;font-weight:500;margin:0 0 40px}
.fade{opacity:0;transform:translateY(30px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.fade.in{opacity:1;transform:none}
.signature-bottom{display:flex;justify-content:space-between;gap:30px;font-size:11px;color:var(--muted);line-height:1.7;letter-spacing:.04em}
footer{padding:55px 4% 25px;border-top:1px solid #303030}
.footer-top{display:flex;align-items:center;justify-content:space-between;gap:35px}
.footer-logo{width:140px;height:auto;filter:brightness(0) invert(.94)}
.footer-contact{text-align:right}
.footer-contact>a{font-size:clamp(32px,5.4vw,78px);letter-spacing:-.055em}
.footer-contact p{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:9px;margin:10px 0 0;font-size:12px}
.footer-contact p a{color:var(--muted);border-bottom:1px solid #444;padding-bottom:2px}
.footer-contact p span{color:#555}
.footer-facts{padding:40px 0 20px;font-size:12px;line-height:1.8}
.footer-facts p{margin:0;letter-spacing:.025em}
.footer-bottom{border-top:1px solid #242424;padding-top:25px;display:flex;justify-content:space-between;gap:20px;font-size:11px;color:var(--muted);letter-spacing:.04em}

html[lang=fr] .question{font-size:clamp(44px,9vw,148px)}
html[lang=fr] .answer{font-size:clamp(34px,7.4vw,120px)}

@media(max-width:650px){
  :root{--h:64px}
  header{padding:0 6%}
  nav{gap:18px;font-size:11px}
  nav>a:nth-child(2){display:none}
  .chapter{height:230svh}
  .stage{padding:22px 6%;min-height:440px}
  .meta{font-size:10px}
  .bottom{font-size:10px;gap:14px}
  .bottom>span:first-child{max-width:170px;line-height:1.6}
  .track{max-width:55px}
  .question{font-size:clamp(40px,12vw,73px);line-height:.95}
  .answer{font-size:clamp(34px,10vw,62px)}
  html[lang=fr] .question{font-size:clamp(36px,10.2vw,64px)}
  html[lang=fr] .answer{font-size:clamp(30px,8.4vw,52px)}
  .reel-section{padding:65px 6% 20px}
  .reel-frame{aspect-ratio:4/3}
  .player-controls{padding:18px 6px 0;gap:0}
  .player-controls button{width:40px}
  #time{font-size:10px;margin-left:8px}
  .signature{padding:50px 6% 65px}
  .craft{font-size:clamp(34px,8.4vw,54px)}
  .signature-bottom{display:block;font-size:10px}
  .signature-bottom span{display:block;margin-top:12px}
  footer{padding:40px 6% 20px}
  .footer-top{flex-direction:column;align-items:flex-start}
  .footer-logo{width:90px}
  .footer-contact{text-align:left}
  .footer-contact p{justify-content:flex-start}
  .footer-contact>a{font-size:38px}
}

/* Reduced motion: everything visible, no scroll-jacking */
.static .chapter{height:auto}
.static .stage{position:relative;top:0;height:auto;min-height:80svh}
.static .kinetic{transform:none}
.static .ch,.static .fade{opacity:1!important;transform:none!important;transition:none}
.static .track{display:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}