/* ════════════════════════════════════════════════════════
   TYPOGRAPHY.CSS — Échelle & règles typographiques
   MateXP · Outfit pour le display, Inter pour le corps.
   Titres serrés (letter-spacing négatif), corps aéré.
   ════════════════════════════════════════════════════════ */

/* ─── Titres ─── */
h1,
.h1 {
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 7vw, var(--text-5xl));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.04;
  color: var(--text-1);
}

h2,
.h2 {
  font-family: var(--font-display);
  font-size: clamp(var(--text-xl), 4vw, var(--text-3xl));
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text-1);
}

h3,
.h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--text-1);
}

/* H4 — sous-titres de cartes & sections secondaires */
h4,
.h4 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--text-1);
}

/* ─── Phrase d'accroche (lead) ─── */
.lead {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(var(--text-md), 2vw, var(--text-lg));
  line-height: 1.75;
  color: var(--text-4);
  max-width: 54ch;          /* Confort de lecture optimal */
}

/* ─── Corps de texte ─── */
p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-md);
  line-height: 1.7;
  color: var(--text-3);
}

/* Lien dans un paragraphe : accent + soulignement discret au survol */
p a {
  color: var(--accent);
  transition: color var(--dur-fast, 180ms) var(--ease-out, ease);
}
p a:hover {
  text-decoration: underline;
}

/* ─── Étiquette (label décoratif, majuscules espacées) ─── */
.label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-4);
}

/* ─── Légende (caption) ─── */
.caption {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--text-5);
}

/* ─── Monospace (Riot ID, valeurs techniques) ─── */
.mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  color: var(--accent);
}

/* ─── Modificateurs d'accent ─── */
.text-accent {
  color: var(--accent);
}

/* Dégradé typographique — seule exception autorisée aux gradients */
.text-gradient {
  background: linear-gradient(
    135deg,
    var(--accent) 0%,
    var(--accent-hover) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;       /* Repli si background-clip non supporté */
}

/* ─── Réglages fins ─── */
strong,
b {
  font-weight: 500;
  color: var(--text-2);
}

em,
i {
  font-style: italic;       /* italique synthétisé (Inter sans variante italique) */
}

small {
  font-size: var(--text-sm);
  color: var(--text-4);
}

/* Chiffres tabulaires pour stats & compteurs (alignement vertical) */
.tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* Limiteur de longueur de ligne réutilisable */
.measure {
  max-width: 60ch;
}