/* ============================================================
   OTTOM4T3 — base : tokens, reset, typographie, chrome
   Palette derivee des rendus de reference : aluminium / verre /
   noir. Aucun neon. Les contrastes texte sont verifies AA.
   ============================================================ */

@font-face{font-family:"Cabinet";src:url("../assets/fonts/cabinet-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Cabinet";src:url("../assets/fonts/cabinet-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Cabinet";src:url("../assets/fonts/cabinet-800.woff2") format("woff2");font-weight:800;font-display:swap}

:root{
  /* --- matiere --- */
  --ink-900:#08090a;      /* fond absolu */
  --ink-800:#0d0f11;
  --ink-700:#15181b;
  --alu-600:#3b4045;
  --alu-400:#6e7377;
  --alu-200:#a9afb5;
  --alu-100:#cdd2d6;      /* reflet aluminium */
  --glass:rgba(210,220,232,.07);
  --line:rgba(190,205,225,.16);
  --line-strong:rgba(200,215,235,.34);

  /* --- texte (AA sur --ink-900) --- */
  --fg:#f1f3f5;           /* 18.2:1 */
  --fg-2:#a7aeb5;         /* 7.9:1  */
  --fg-3:#767d84;         /* 4.6:1  — labels seulement */

  /* --- signal technique, jamais decoratif --- */
  --tech:#8fb4f2;
  --tech-dim:rgba(143,180,242,.42);

  /* --- rythme --- */
  --gut:clamp(20px,4.2vw,72px);
  --r:2px;

  /* --- durees --- */
  --t-fast:.24s; --t:.5s; --t-slow:.9s;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink-900); color:var(--fg);
  font-family:"Cabinet",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:500; line-height:1.45;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overscroll-behavior-y:none;
}
img{display:block;max-width:100%}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
::selection{background:rgba(143,180,242,.28)}

.skip{
  position:fixed;top:-100px;left:12px;z-index:9999;padding:10px 16px;
  background:var(--fg);color:var(--ink-900);border-radius:var(--r);font-weight:700;
}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--tech);outline-offset:3px}

/* ---------- typographie utilitaire ---------- */
.eyebrow{
  font-size:clamp(9px,.78vw,11px); letter-spacing:.3em; text-transform:uppercase;
  color:var(--fg-3); font-weight:700;
}
.mono,.ticker,.pin,.poster__meta,.book__kicker,.tags li,.outs li{
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
}

/* ============================================================
   CHROME (barres haut / bas)
   ============================================================ */
.chrome{
  position:fixed; left:0; right:0; z-index:60;
  display:flex; align-items:center; gap:18px;
  padding:0 var(--gut); pointer-events:none;
  mix-blend-mode:normal;
}
.chrome > *{pointer-events:auto}
.chrome--top{top:0; height:74px; justify-content:space-between}
.chrome--bottom{bottom:0; height:60px; justify-content:space-between}

.wordmark{
  font-weight:800; font-size:15px; letter-spacing:.24em;
  color:var(--fg); opacity:.92;
}
.chip{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:700;
  padding:9px 16px; border:1px solid var(--line-strong); border-radius:999px;
  color:var(--fg); background:rgba(10,12,14,.32);
  backdrop-filter:blur(6px); transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.chip:hover{background:rgba(230,238,248,.1);border-color:var(--fg-2)}

.ticker{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--fg-3)}
.ticker--num b{color:var(--fg-2);font-weight:700}
.progress{
  flex:1; max-width:min(42vw,520px); height:1px; background:var(--line);
  position:relative; overflow:hidden;
}
.progress i{
  position:absolute; inset:0; transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg,var(--alu-400),var(--alu-100));
}

/* ============================================================
   GRADE : vignette + grain (un seul calque, compose une fois)
   ============================================================ */
.grade{
  position:fixed; inset:0; z-index:50; pointer-events:none;
  background:
    radial-gradient(130% 100% at 50% 42%, transparent 38%, rgba(0,0,0,.42) 78%, rgba(0,0,0,.72) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.34) 0%, transparent 16%, transparent 84%, rgba(0,0,0,.44) 100%);
}
.grain{
  /* pas de mix-blend-mode : un mode de fusion casse le chemin rapide du
     compositeur et coute ~16 ms par image sur la moitie des frames */
  position:absolute; inset:-120px; opacity:.042;
  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='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(6) infinite;
  will-change:transform;
}
@keyframes grain{
  0%{transform:translate3d(0,0,0)} 20%{transform:translate3d(-14px,8px,0)}
  40%{transform:translate3d(9px,-12px,0)} 60%{transform:translate3d(-7px,-6px,0)}
  80%{transform:translate3d(12px,10px,0)} 100%{transform:translate3d(0,0,0)}
}
body.tier-low .grain{animation:none;opacity:.035}

/* ============================================================
   SCROLL
   ============================================================ */
.scroll-space{height:var(--scroll-h,900vh);width:1px;pointer-events:none}
.stage{position:fixed;inset:0;overflow:hidden;z-index:10}

/* ============================================================
   NOSCRIPT
   ============================================================ */
.noscript{
  position:relative;z-index:100;max-width:60ch;margin:0 auto;padding:18vh var(--gut);
  background:var(--ink-900);
}
.noscript h2{font-size:42px;letter-spacing:.14em;margin-bottom:16px}
.noscript p{color:var(--fg-2);margin-bottom:12px}

/* ============================================================
   PANNEAU DEBUG (?debug=true)
   ============================================================ */
.dbg{
  position:fixed; right:12px; top:86px; z-index:9000; width:268px;
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:10.5px; line-height:1.7;
  color:#cfe0ff; background:rgba(6,9,14,.9); border:1px solid rgba(143,180,242,.28);
  border-radius:4px; padding:10px 12px; pointer-events:auto;
  backdrop-filter:blur(8px);
}
.dbg h4{margin:0 0 6px;font-size:10px;letter-spacing:.2em;color:#8fb4f2;text-transform:uppercase}
.dbg__row{display:flex;justify-content:space-between;gap:10px}
.dbg__row b{font-weight:500;color:#fff}
.dbg__bar{height:22px;position:relative;margin-top:8px;border:1px solid rgba(143,180,242,.25);border-radius:2px;overflow:hidden}
.dbg__seg{position:absolute;top:0;bottom:0;border-right:1px solid rgba(143,180,242,.35);font-size:8px;color:#9fc0ff;padding-left:2px;overflow:hidden;white-space:nowrap}
.dbg__head{position:absolute;top:0;bottom:0;width:2px;background:#fff}
.dbg__warn{color:#ffcf7a}
.dbg__ok{color:#8ce3a8}

@media (prefers-reduced-motion:reduce){
  .grain{animation:none}
  *{scroll-behavior:auto !important}
}