:root{
  --bg:#000; --ink:#f2f2f2; --muted:#a8a8a8; --line:#121212;
  --scan-alpha:.12; --grain-alpha:.12;
  --font: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --tr: 220ms cubic-bezier(.2,.6,.2,1);
}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important; transition:none!important; scroll-behavior:auto!important;}
  .fx-canvas{display:none!important;}
}

html{background:var(--bg); color:var(--ink); scroll-behavior:smooth;}
body{margin:0; font-family:var(--font); line-height:1.5; text-rendering:optimizeLegibility;}

/* Nav fixe */
header{
  position:fixed; inset:0 0 auto 0; z-index:10;
  height:56px; border-bottom:1px solid var(--line);
  background:linear-gradient(#000c,#0008);
  backdrop-filter: blur(6px) saturate(1.05);
}
.nav{height:56px; display:flex; align-items:center; gap:20px; padding:0 16px;}
.brand{letter-spacing:.14em; font-weight:700; display:flex; align-items:center; gap:10px;}
.mark{width:16px;height:16px;border:1px solid #2a2a2a; background:conic-gradient(#000,#0c0c0c,#000);}
nav ul{display:flex; gap:14px; list-style:none; margin:0; padding:0;}
nav a{color:#9b9b9b; text-decoration:none; padding:6px 8px; border:1px solid transparent;}
nav a:hover, nav a:focus-visible{color:var(--ink); border-color:#1a1a1a; outline:none;}

/* Scroll plein écran */
main{position:relative; z-index:1;}
.stack{height:100svh; overflow-y:auto; scroll-snap-type:y mandatory;}
section.snap{position:relative; height:100svh; scroll-snap-align:start; display:grid; place-items:center; padding:64px 5vw 5vw;}

/* Canvas de fond par section */
.bg-wrap{position:absolute; inset:0; z-index:0; overflow:hidden;}
.fx-canvas{position:absolute; inset:0; width:100%; height:100%; display:block;}

/* Overlays globaux (scanlines + grain) */
.scanlines{position:fixed; inset:0; pointer-events:none; z-index:2;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,var(--scan-alpha)) 0 1px, transparent 1px 3px);}
.grain{position:fixed; inset:0; pointer-events:none; z-index:1; opacity:var(--grain-alpha); mix-blend-mode:overlay;}

/* Cadre + grille */
.frame{position:absolute; inset:0; border:1px solid #0f0f0f; z-index:0;}
.grid-bg{position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.12;
  background:
    linear-gradient(to right, transparent 0 63px, rgba(255,255,255,.05) 63px 64px),
    linear-gradient(to bottom, transparent 0 63px, rgba(255,255,255,.05) 63px 64px);
  background-size:64px 64px;
  mix-blend-mode:overlay;
}

/* Titres */
.t{
  position:relative; z-index:3;
  text-transform:uppercase; font-weight:800;
  font-size:clamp(1.8rem, 6vw + .5rem, 5.2rem);
  letter-spacing:.04em; line-height:1.04; color:var(--ink);
}
.t[data-glitch="true"]::before,
.t[data-glitch="true"]::after{
  content:attr(data-text); position:absolute; left:0; right:0; color:var(--ink); pointer-events:none; opacity:.9;
  clip-path:inset(0 0 55% 0);
}
.t[data-glitch="true"]::after{ clip-path:inset(55% 0 0 0); }
.t[data-deform="true"]{ transform:skewX(-0.6deg) translateY(-0.5px); }

.muted{color:var(--muted)}

.panel{
  position:relative; z-index:3;
  background:linear-gradient(#060606,#020202);
  border:1px solid #151515; padding:18px 18px 14px;
  box-shadow:0 0 0 1px #000 inset, 0 16px 36px rgba(0,0,0,.6);
}
.hr{height:1px; background:linear-gradient(90deg,transparent,#1a1a1a,transparent); margin:18px 0;}

.btn{display:inline-block; color:var(--ink); text-decoration:none; border:1px solid #2a2a2a; padding:10px 12px;}
.btn:hover{border-color:#3a3a3a;}
.inline{color:var(--ink); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(255,255,255,.25);}
.inline:hover{ text-decoration-color:#fff; }

.side-note{
  position:absolute; right:1rem; top:72px; z-index:3;
  writing-mode:vertical-rl; text-orientation:mixed;
  color:#8a8a8a; letter-spacing:.22em; font-size:.72rem;
}

footer{position:relative; z-index:4; padding:16px 5vw 40px; color:#888; border-top:1px solid #0e0e0e;}