/* ── Design tokens ──────────────────────────────────────────────────────────
   Un seul endroit pour la palette, la typo et le rythme.
   Direction : noir profond, blanc cassé, l'ambre n'est pas une couleur de
   surface mais une LUMIÈRE (elle sort de l'éponge, elle ne la peint pas).
   Le vert abrasif et le rouge REC sont des accents rares — si tu en vois
   plus de deux à l'écran en même temps, c'est trop.
   ───────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Anton';
  src: url('../assets/fonts/anton-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Anton';
  src: url('../assets/fonts/anton-latin-ext-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter Tight';
  src: url('../assets/fonts/inter-tight-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Inter Tight';
  src: url('../assets/fonts/inter-tight-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Inter Tight';
  src: url('../assets/fonts/inter-tight-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Inter Tight';
  src: url('../assets/fonts/inter-tight-latin-900-normal.woff2') format('woff2');
  font-weight: 900;
  font-display: swap;
}

/* Permanent Marker n'est pas utilisée par la page : elle sert uniquement à
   dessiner le lettrage du logo sur un canvas, pour la texture de l'éponge 3D.
   Elle doit malgré tout être déclarée ici — sans @font-face, document.fonts
   ne saurait pas quoi charger et le canvas partirait sur la police de repli. */
@font-face {
  font-family: 'Permanent Marker';
  src: url('../assets/fonts/permanent-marker-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('../assets/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../assets/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

:root {
  /* — Couleurs — */
  --ink: #08090b;          /* noir profond, légèrement froid */
  --ink-1: #0d0f12;
  --ink-2: #14171b;
  --ink-3: #1e2227;
  --smoke: #3a4048;
  --ash: #6b7280;
  --chalk: #9aa1a9;
  --bone: #e9e5dc;         /* blanc cassé, jamais du #fff pur */
  --bone-dim: rgba(233, 229, 220, 0.62);
  --bone-faint: rgba(233, 229, 220, 0.34);
  --bone-ghost: rgba(233, 229, 220, 0.12);

  --amber: #ffb400;        /* la lumière dans l'éponge */
  --amber-hot: #ffd66b;
  --amber-deep: #c07800;
  --abrasive: #0f5c3f;     /* le côté grattoir, très parcimonieux */
  --rec: #ff2d16;          /* le point rouge d'enregistrement, rien d'autre */

  --line: rgba(233, 229, 220, 0.14);
  --line-soft: rgba(233, 229, 220, 0.07);

  /* — Typo — */
  --display: 'Anton', 'Haettenschweiler', 'Arial Narrow Bold', Impact, sans-serif;
  --sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Échelle fluide : tout respire avec la fenêtre, pas de palier brutal. */
  --step--2: clamp(0.65rem, 0.61rem + 0.18vw, 0.75rem);
  --step--1: clamp(0.78rem, 0.73rem + 0.24vw, 0.9rem);
  --step-0: clamp(0.95rem, 0.89rem + 0.3vw, 1.1rem);
  --step-1: clamp(1.15rem, 1.02rem + 0.62vw, 1.5rem);
  --step-2: clamp(1.45rem, 1.16rem + 1.4vw, 2.4rem);
  --step-3: clamp(2rem, 1.3rem + 3.4vw, 4rem);
  --step-4: clamp(2.8rem, 1.2rem + 7.8vw, 7rem);
  --step-5: clamp(3.4rem, 0.4rem + 14vw, 10.5rem);
  --step-6: clamp(4.2rem, -1.5rem + 24vw, 19rem);

  /* — Rythme — */
  --gutter: clamp(1.1rem, 0.6rem + 2.4vw, 3.2rem);
  --section-y: clamp(6rem, 4rem + 12vw, 14rem);
  --maxw: 1680px;

  /* — Mouvement — */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 220ms;
  --dur: 520ms;
  --dur-slow: 900ms;

  /* Ordre de peinture. Le canvas est au milieu de la pile, pas au fond :
     c'est ce qui permet à un mot du hero de passer DERRIÈRE l'éponge
     (couche 1) pendant que le reste du contenu passe devant (couche 3). */
  --z-backdrop: 0;
  --z-behind: 1;
  --z-canvas: 2;
  --z-content: 3;
  --z-menu: 60;
  /* La barre doit rester AU-DESSUS du menu plein écran : sinon le bouton
     qui sert à fermer se retrouve recouvert par ce qu'il a ouvert. */
  --z-nav: 70;
  --z-cursor: 90;
  --z-loader: 100;

  /* Grain : SVG feTurbulence en data-URI. Zéro requête, zéro fichier binaire,
     et ça reste net quel que soit le zoom ou la densité d'écran. */
  --grain-src: 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='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");

  color-scheme: dark;
}