/* Valeurs déduites des captures (frame Desktop 1200 / Phone ≤1199). Voir docs/SPECIFICATIONS.md */
@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-variable-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-background: #000;
  --color-header-bg: #fff;
  --color-logo: #808080;
  --color-nav: #a3a3a3;
  --color-text: #fff;
  --color-text-muted: #d4d4d4;

  --font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;

  /* En-tête (mobile par défaut, desktop ≥1200px) */
  --header-gap: 6px;
  --header-height: 57px;
  --header-pad-x: 18px;
  --logo-size: 26px;
  --nav-size: 13.5px;
  --nav-gap: 12px;

  --text-size: 18px;
  --text-leading: 1.2;
  --caption-size: 14px;
  --page-pad-x: 16px;

  --transition-fast: 150ms ease;
}

@media (min-width: 1200px) {
  :root {
    --header-gap: 12px;
    --header-height: 66px;
    --header-pad-x: 38px;
    --logo-size: 42px;
    --nav-size: 25.5px;
    --nav-gap: 39px;
    --text-size: 23px;
    --text-leading: 1.2;
    --page-pad-x: 57px;
  }
}