:root{
  --bg:#050403; --ink:#ece2d2; --muted:rgba(236,226,210,.58); --faint:rgba(236,226,210,.32);
  --amber:#f0a04b; --amber-hi:#ffc477; --amber-deep:#c2651a; --bronze:#a68558;
  --line:rgba(240,160,75,.16);
  --display:"Oxanium",ui-sans-serif,sans-serif; --sans:"Sora",ui-sans-serif,system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
  --gutter:clamp(16px,4vw,56px);
  --chamfer:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:300 16px/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
::selection{background:var(--amber);color:var(--bg)}

/* ---------- en-tête ---------- */
.top{position:fixed;inset:0 0 auto;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:22px var(--gutter);pointer-events:none}
.top>*{pointer-events:auto}
.top::before{content:"";position:absolute;inset:0 0 -28px;z-index:-1;background:linear-gradient(#050403 0,#050403 50%,rgba(5,4,3,.8) 75%,rgba(5,4,3,0));pointer-events:none} /* le texte qui défile ne se mêle pas au logo */
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;justify-self:start}
.brand svg{width:34px;height:auto;display:block}
.wm{font:600 17px/1 var(--display);letter-spacing:.14em;color:var(--bronze)}
.wm span{color:var(--amber);font-weight:400}
.top nav{display:flex;gap:40px;font:400 11.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase}
.top nav a{text-decoration:none;color:var(--muted);position:relative;padding:8px 0;transition:color .3s}
.top nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--amber);transform:scaleX(0);transition:transform .45s cubic-bezier(.2,.7,.1,1)}
.top nav a:hover,.top nav a.on{color:var(--amber-hi)}
.top nav a.on::after{transform:scaleX(1)}
.btn{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 24px;text-decoration:none;font:500 12.5px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--bg);background:var(--amber);border:0;cursor:pointer;clip-path:var(--chamfer);transition:background .25s}
.btn:hover{background:var(--amber-hi)}
.btn.line{background:rgba(240,160,75,.08);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn.line:hover{background:rgba(240,160,75,.16)}
.top .btn{justify-self:end;height:38px;padding:0 16px;font-size:11.5px}
@media (max-width:860px){.top{grid-template-columns:1fr auto}.top nav{display:none}}

/* ---------- scène (comme la stèle : collante, derrière les chapitres) ---------- */
.scene{position:sticky;top:0;height:100vh;height:100svh;margin-bottom:-100vh;margin-bottom:-100svh;overflow:hidden;cursor:grab;touch-action:pan-y}
.scene:active{cursor:grabbing}
.scene canvas{display:block;width:100%!important;height:100%!important}
/* [staging] la pluie binaire vit désormais dans le fond WebGL (profondeur de champ) : plus de canvas 2D */
.scene .vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 75% at 64% 50%,transparent 45%,rgba(5,4,3,.85))}
@media (max-width:860px){.scene .vig{background:radial-gradient(85% 55% at 50% 30%,transparent 45%,rgba(5,4,3,.85))}} /* [staging] la vignette suit la goutte */
.cartel{position:absolute;right:var(--gutter);bottom:32px;width:280px;padding:16px 0 0;border-top:1px solid var(--amber);font-size:13px;color:var(--muted);pointer-events:none}
.cartel small{font:500 10.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--amber)}
.cartel b{display:block;font:500 21px/1.15 var(--display);letter-spacing:.02em;color:var(--ink);margin:8px 0 6px}
.dial{display:flex;gap:6px;margin-top:14px}
.dial i{flex:1;height:2px;background:var(--line);transition:background .4s}
.dial i.on{background:var(--amber);box-shadow:0 0 8px rgba(240,160,75,.7)}
.hint{position:absolute;right:calc(var(--gutter) + 310px);bottom:34px;font:400 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);pointer-events:none;display:flex;gap:22px}
.hint span::before{content:"◆ ";color:var(--amber);font-size:8px;vertical-align:1px}

/* ---------- chapitres ---------- */
.story{position:relative}
.chap{position:relative;z-index:2;min-height:120vh;display:flex;align-items:center;padding:120px var(--gutter) 120px clamp(16px,6vw,100px);pointer-events:none}
.chap .in{max-width:460px;pointer-events:auto}
.chap.hero{min-height:110vh}
.kick{font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--amber)}
.kick b{color:var(--faint);font-weight:400;margin-right:10px}
h1,h2,h3{font-family:var(--display);font-weight:500;letter-spacing:-.01em;margin:0}
h1{font-size:clamp(46px,6.4vw,100px);line-height:.94;margin:22px 0 26px}
h1 em,h2 em,h3 em{font-style:normal;font-weight:300;color:var(--amber);text-shadow:0 0 28px rgba(240,140,40,.35)}
.chap h2{font-size:clamp(36px,4.2vw,62px);line-height:.98;margin:16px 0 18px}
.chap p{color:var(--muted);margin:0 0 16px;max-width:44ch}
.list{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--line)}
.list li{display:grid;grid-template-columns:38px 1fr;gap:10px;padding:13px 0;border-bottom:1px solid var(--line)}
.list li i{font:400 11px/1.9 var(--mono);color:var(--amber);font-style:normal}
.list li b{display:block;font:500 15px/1.4 var(--sans);color:var(--ink)}
.list li span{color:var(--muted);font-size:14px}
.ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
@media (max-width:1200px){.hint{display:none}}
@media (max-width:520px){.top .btn{display:none}}
@media (max-width:860px){
  .chap{align-items:flex-end;padding-bottom:70px}
  .chap .in{background:linear-gradient(transparent,rgba(5,4,3,.95) 14%);margin:0 -16px;padding:48px 16px 0}
  .cartel,.hint{display:none}
}

/* ---------- après la goutte ---------- */
.after{position:relative;z-index:3;background:var(--bg)}
.wrap{padding:clamp(90px,12vw,170px) clamp(16px,6vw,100px)}
.cta{border-top:1px solid var(--line);text-align:center;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;left:50%;top:0;width:min(900px,120vw);aspect-ratio:1;transform:translate(-50%,-55%);background:radial-gradient(closest-side,rgba(240,140,40,.13),transparent);pointer-events:none}
.cta h3{font-size:clamp(40px,5.6vw,88px);line-height:.95;margin:18px auto 26px;max-width:13ch}
.cta p{color:var(--muted);max-width:46ch;margin:0 auto 34px}
.cta .ctas{justify-content:center}
footer{border-top:1px solid var(--line);padding:28px clamp(16px,6vw,100px) 40px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;font:400 11px/1.4 var(--mono);letter-spacing:.08em;color:var(--faint)}
footer .brand svg{width:26px}
footer .wm{font-size:13px}
footer a{text-decoration:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ================================================================ site : compléments */
.hd-r{justify-self:end;display:flex;align-items:center;gap:10px}
.top .hd-r .btn{justify-self:auto}
.m-btn{display:none;align-items:center;gap:10px;height:38px;padding:0 14px;border:0;cursor:pointer;color:var(--ink);background:rgba(240,160,75,.08);
  box-shadow:inset 0 0 0 1px var(--line);font:500 11.5px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;clip-path:var(--chamfer)}
.m-btn i{position:relative;width:16px;height:7px}
.m-btn i::before,.m-btn i::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--amber);transition:transform .35s}
.m-btn i::before{top:0}.m-btn i::after{bottom:0;left:5px}
.m-btn[aria-expanded=true] i::before{transform:translateY(3px) rotate(12deg)}
.m-btn[aria-expanded=true] i::after{transform:translate(-5px,-3px) rotate(-12deg)}
.m-menu{position:fixed;inset:0;z-index:60;visibility:hidden;opacity:0;transition:opacity .4s ease,visibility 0s .4s;
  background:linear-gradient(rgba(5,4,3,.82),rgba(5,4,3,.97) 40%);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.m-menu.open{visibility:visible;opacity:1;transition:opacity .4s ease}
.m-menu ol{list-style:none;margin:0;padding:110px 24px 40px;display:flex;flex-direction:column;gap:6px}
.m-menu a{--svc:#ffc477;display:grid;grid-template-columns:40px 1fr;align-items:baseline;padding:10px 0;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line)}
.m-menu a i{font:400 11px/1 var(--mono);letter-spacing:.14em;color:var(--svc);font-style:normal}
.m-menu a b{font:300 28px/1.1 var(--display)}
.m-menu a small{grid-column:2;font:400 10.5px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--svc);opacity:.85}
@media (max-width:860px){.m-btn{display:inline-flex}}
body.m-open{overflow:hidden}

footer .legal{display:flex;gap:22px;flex-wrap:wrap}
footer .legal a:hover{color:var(--amber-hi)}

/* pages simples (mentions légales, 404) */
.page{max-width:760px;margin:0 auto;padding:150px clamp(16px,6vw,40px) 100px}
.page h1{font-size:clamp(38px,5vw,64px);line-height:1;margin:18px 0 34px}
.page h2{font:500 20px/1.3 var(--display);letter-spacing:.02em;margin:42px 0 12px;color:var(--ink)}
.page p,.page li{color:var(--muted)}
.page a{color:var(--amber-hi)}
.page .todo{color:var(--amber);font-family:var(--mono);font-size:.9em}
.page .ctas{margin-top:36px}

/* lien vers les réalisations, au bas de chaque service (il paraît avec le bloc, comme les boutons de l'accueil) */
.rea-go{display:inline-flex;align-items:center;gap:14px;padding:12px 0;position:relative;text-decoration:none;font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--svc,var(--amber-hi))}
.rea-go::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:1px;background:linear-gradient(90deg,var(--svc,var(--amber)),transparent);transform-origin:left;transform:scaleX(.4);transition:transform .5s cubic-bezier(.2,.7,.1,1)}
.rea-go:hover::after,.rea-go:focus-visible::after{transform:scaleX(1)}
.rea-go i{font-style:normal;transition:transform .35s cubic-bezier(.2,.7,.1,1)}
.rea-go:hover i,.rea-go:focus-visible i{transform:translateX(6px)}
.rea-go:focus-visible{outline:1px solid var(--svc,var(--amber));outline-offset:6px}


/* le logo garde sa taille sur toutes les pages du site (sans height, le svg prendrait 150 px de haut) */
.top .brand svg{height:26px}
footer .brand svg{height:20px}

/* les impulsions de code : le titre s'allume quand une impulsion en part vers la goutte (assets/impulsions.js) */
.fl-pin b,.fl-pin span{transition:color .35s,text-shadow .35s,opacity .35s}
html.fl-js .fl-pin.imp{color:var(--ink)}
html.fl-js .fl-pin.imp b{opacity:1;text-shadow:0 0 10px var(--svc)}
html[data-theme=light].fl-js .fl-pin.imp b{text-shadow:none}

/* le logo (goutte, courbe de code, accolades) est presque carré : sa largeur suit sa hauteur */
.brand svg{aspect-ratio:344/315;width:auto!important}
.top .brand svg{height:30px!important}
footer .brand svg{height:22px!important}
/* [fx] les gestes de la goutte, sous son reflet (placés par assets/goutte.js, site-src/goutte_fx.py) */
.fx-hint{position:absolute;left:0;top:0;z-index:1;display:flex;gap:18px;white-space:nowrap;font:400 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);pointer-events:none;opacity:0;transition:opacity .6s}
.fx-hint.on{opacity:1}
.fx-hint span{transition:color .3s}
.fx-hint span::before{content:"◆ ";color:var(--amber);font-size:7px;vertical-align:1px}
.fx-hint b{font-weight:500;color:var(--muted);margin-right:7px;transition:color .3s}
.fx-hint span.hit,.fx-hint span.hit b{color:var(--amber)}
@media (max-width:860px){.fx-hint{gap:12px;font-size:9px;letter-spacing:.08em}}