/* ==========================================================================
   typography.css — hiérarchie et éléments de texte (tailles en rem/clamp).
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: -0.01em;
  color: var(--text);
  text-wrap: balance;
  /* Coupe aux espaces uniquement : pas de mot coupé, pas de débordement */
  overflow-wrap: break-word;
  hyphens: none;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { text-wrap: pretty; }

/* Mesure de ligne confortable pour le texte courant */
.prose,
.measure { max-width: var(--max-text); }

/* Chapô */
.lead {
  font-size: var(--fs-lead);
  color: var(--muted);
  max-width: var(--max-text);
}

/* Texte secondaire */
.text-muted { color: var(--muted); }
.text-faint { color: var(--faint); }

/* Sur-titre technique (numéro + intitulé de section) */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
}

/* Élément technique court en chasse fixe (métadonnée, niveau, extrait) */
.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-tag);
}