# Typographie

Quatre voix, une seule gamme. La serif porte le message, tout le reste recule pour la servir. Les valeurs vivent dans `tokens/typographie.json`.

## Les familles

- **Instrument Serif** (`police-titre`) : ce qui porte. Hero, titres, texte long. L'emphase se dit par un fragment en italique vermillon, un seul par titre, jamais par du gras.
- **Geist** (`police-texte`) : l'appui et l'interface. Sous-titres, légendes, boutons, champs.
- **Geist Mono** (`police-mono`) : les étiquettes et mentions, en capitales à interlettrage large.
- **Anton** (`police-choc`) : l'accroche en capitales. Sous-titres vidéo, chiffre-choc, vignette. Jamais pour du texte courant.

## Les rôles

Chaque rôle porte une taille `web` fluide, servie par la classe `.type-<rôle>`, et une fourchette `canvas1080` en pixels pour les visuels à cadre fixe : slides, vidéos, vignettes.

| Rôle | Famille | Usage |
| --- | --- | --- |
| `hero` | titre | le titre qui ouvre un écran |
| `titre` | titre | les têtes de section |
| `corps` | titre | le texte long qui porte |
| `choc` | choc | le hook, le sous-titre vidéo |
| `appui` | texte | sous-titres, légendes, texte d'interface |
| `surtitre` | mono | catégorie au-dessus d'un titre, précédée d'un carré vermillon |
| `meta` | mono | mentions, compteurs, index |

## Règles

1. Une seule voix forte par écran.
2. Aucun texte sous 32 px sur un canvas 1080, ni sous `taille-meta` en web. La discrétion vient du gris, pas d'une taille minuscule.
3. `text-wrap: balance` sur les titres. Sur un visuel composé, les retours à la ligne se posent à la main, par unité de sens.
4. En sous-titres vidéo : Anton en capitales, couleur papier ; le mot en cours passe sur une étiquette vermillon aux angles doux.

Les polices ne voyagent pas avec `tokens.css` : chaque app les charge elle-même (paquets `@fontsource`).