/* Polices hébergées localement (licence SIL OFL, voir assets/fonts). */
@font-face { font-family: 'Instrument Sans'; font-weight: 400; font-display: swap; src: url('/assets/fonts/instrument-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-weight: 500; font-display: swap; src: url('/assets/fonts/instrument-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-weight: 600; font-display: swap; src: url('/assets/fonts/instrument-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-weight: 700; font-display: swap; src: url('/assets/fonts/instrument-sans-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Unbounded'; font-weight: 700; font-display: swap; src: url('/assets/fonts/unbounded-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Unbounded'; font-weight: 800; font-display: swap; src: url('/assets/fonts/unbounded-latin-800-normal.woff2') format('woff2'); }

:root {
  --nuit: #191420;
  --plaque: #221b2a;
  --plaque-haute: #2c2436;
  --filet: #3b3146;
  --argent: #b9bcc8;
  --argent-pale: #8d8a9a;
  --blanc: #f4f1f7;
  --magenta: #f0328c;
  --magenta-sombre: #b81f68;
  --vert: #5bd6a0;
  --ambre: #f2b544;
  --rouge: #ff6b6b;

  --chrome: linear-gradient(176deg, #ffffff 0%, #d9dbe3 28%, #8e93a3 50%, #eef0f5 64%, #a7abb9 100%);
  --chrome-bord: linear-gradient(135deg, #f7f8fb, #8b90a0 40%, #e7e9ef 60%, #6f7485);

  --display: 'Unbounded', 'Arial Black', sans-serif;
  --texte: 'Instrument Sans', system-ui, -apple-system, sans-serif;

  --r-petit: 6px;
  --r-moyen: 10px;
  --r-grand: 16px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--texte);
  font-size: 15px;
  line-height: 1.45;
  color: var(--blanc);
  background: var(--nuit);
  font-variant-numeric: tabular-nums;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--magenta);
  outline-offset: 2px;
}

.chrome-texte {
  background: var(--chrome);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}