/* 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;
  }
}

/* Menu de langue (régie, dock, connexion). */
.langue { display: inline-flex; align-items: center; gap: 4px; color: var(--argent); }
.langue svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.langue select {
  appearance: none; padding: 3px 18px 3px 4px; border: 1px solid transparent; border-radius: 6px; background: transparent
    url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 10 6%22%3E%3Cpath d=%22M1 1l4 4 4-4%22 fill=%22none%22 stroke=%22%23a3a3aa%22 stroke-width=%221.4%22/%3E%3C/svg%3E') no-repeat right 4px center / 9px;
  color: var(--argent); font-size: 13px; cursor: pointer;
}
.langue select:hover, .langue select:focus { border-color: var(--filet); color: var(--blanc); }
.langue option { background: var(--plaque); color: var(--blanc); }