/**
 * Typographie.
 *
 * Deux familles, embarquées localement — aucune requête réseau, ce qui permet
 * à la fois le fonctionnement hors ligne et une CSP stricte en 'self'.
 *
 *   Spectral (Production Type, Paris) porte l'énoncé : dessinée pour la lecture
 *     longue à l'écran, avec une couverture complète des diacritiques français.
 *   Archivo porte l'interface, le minuteur et les scores : grotesque étroite,
 *     dotée de chiffres tabulaires — indispensable pour qu'un compte à rebours
 *     ne fasse pas sautiller la mise en page à chaque seconde.
 *
 * La police Marianne, caractère officiel de l'État, n'est délibérément pas
 * utilisée : sa licence est réservée à la communication de l'État.
 */

/* Archivo — fichier variable unique couvrant les graisses 400 à 700. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/archivo-var-latin.woff2') format('woff2');
  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: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/archivo-var-latin-ext.woff2') format('woff2');
  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;
}

/* Spectral — deux graisses seulement : régulière pour l'énoncé, demi-grasse pour les titres. */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/spectral-400-latin.woff2') format('woff2');
  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: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/spectral-400-latin-ext.woff2') format('woff2');
  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: 'Spectral';
  font-style: normal;
  font-weight: 600;
  /* 'optional' rather than 'swap': this weight sets large heading text, and
     a late swap reflows the whole page (CLS 0.988 measured). 'optional'
     only uses the custom font if it's already cached/ready near-instantly
     — otherwise the fallback serif is kept for the rest of this page view,
     so there's no visible swap and nothing shifts. Preloading (index.html)
     still keeps the odds of getting the real font high on a fast repeat
     visit; this stops the punishing first-visit shift regardless. */
  font-display: optional;
  src: url('../fonts/spectral-600-latin.woff2') format('woff2');
  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: 'Spectral';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url('../fonts/spectral-600-latin-ext.woff2') format('woff2');
  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;
}

/* --- Rôles typographiques --- */

.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.t-display {
  font-family: var(--font-serif);
  font-size: var(--text-display);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.t-question {
  font-family: var(--font-serif);
  font-size: var(--text-question);
  font-weight: 400;
  line-height: 1.3;
  text-wrap: pretty;
}

.t-lead {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--color-ink-muted);
  max-inline-size: var(--measure);
}

/* Chiffres tabulaires : le minuteur et les scores ne doivent jamais changer de largeur. */
.t-numeral {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}