/* ============================================================
   Sublizme — base.css
   Fondations : police, tokens, reset, curseur, grain.
   Chargé par TOUTES les pages.
   ============================================================ */

/* ── Police Articulat CF ──────────────────────────────────── */
@font-face{font-family:'Articulat CF';src:url('../fonts/ArticulatCF-Light.otf')      format('opentype');font-weight:300;font-display:swap}
@font-face{font-family:'Articulat CF';src:url('../fonts/ArticulatCF-Normal.otf')     format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:'Articulat CF';src:url('../fonts/ArticulatCF-Medium.otf')     format('opentype');font-weight:500;font-display:swap}
@font-face{font-family:'Articulat CF';src:url('../fonts/ArticulatCF-DemiBold.otf')   format('opentype');font-weight:600;font-display:swap}
@font-face{font-family:'Articulat CF';src:url('../fonts/ArticulatCF-Bold.otf')       format('opentype');font-weight:700;font-display:swap}
@font-face{font-family:'Articulat CF';src:url('../fonts/ArticulatCF-ExtraBold.otf')  format('opentype');font-weight:800;font-display:swap}
@font-face{font-family:'Articulat CF';src:url('../fonts/ArticulatCF-Heavy.otf')      format('opentype');font-weight:900;font-display:swap}

/* ── Design tokens ────────────────────────────────────────── */
:root{
  /* Couleurs */
  --bg:        #0a0a0a;
  --ink:       #ededeb;
  --ink-dim:   #6a6a66;
  --ink-mute:  #3a3a36;
  --line:      #1f1f1c;
  --accent:    #ff1f1f;
  --surface:   rgba(255,255,255,.025);
  --surface-h: rgba(255,255,255,.18);

  /* Typographie */
  --sans: 'Articulat CF', -apple-system, sans-serif;

  /* Espacements */
  --pad: clamp(24px, 3vw, 56px);

  /* Rayons */
  --radius-sm:   8px;
  --radius-md:  14px;
  --radius-lg:  22px;
  --radius-xl:  32px;
  --radius-pill:999px;

  /* Ombres réutilisables */
  --shadow-card: 0 6px 20px rgba(0,0,0,.22), inset 0 1px 1px rgba(255,255,255,.45);
  --shadow-elev: 0 12px 24px rgba(0,0,0,.45), inset 0 0 20px -5px rgba(255,255,255,.9);
  --shadow-stack:0 40px 90px rgba(0,0,0,.55), 0 8px 24px rgba(0,0,0,.4);

  /* Easings & durées */
  --ease:    cubic-bezier(.2, .8, .2, 1);
  --ease-out:cubic-bezier(.22, 1, .36, 1);
  --t-fast: .2s;
  --t-med:  .35s;
  --t-slow: .6s;
}

/* ── Reset ────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
/* overscroll-behavior:none → supprime le « rebond » élastique quand on
   est déjà tout en haut / tout en bas (plus de saut). */
html{scroll-behavior:smooth;overscroll-behavior:none}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:15px;
  line-height:1.45;
  letter-spacing:-.005em;
  overflow-x:hidden;
  overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
::selection{background:var(--accent);color:#fff}

/* ── Grain ────────────────────────────────────────────────── */
body::before{
  content:'';
  position:fixed;inset:0;
  pointer-events:none;z-index:1000;
  mix-blend-mode:overlay;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.85'/></svg>");
}