# Typographie Corelia

Système à **deux familles** : une sans pour l'interface, une serif pour les titres affichés en grand. Les deux sont gratuites, libres de droits, et chargées via `next/font/google`.

## Inter (sans-serif, font-sans)

> Famille principale. Tout le UI, body, labels, boutons.

- **Source** : [Google Fonts — Inter](https://fonts.google.com/specimen/Inter)
- **Variable** : oui (poids 100 à 900)
- **Optical features activées** dans `globals.css` : `cv11`, `ss01`, `ss03`
- **Tabular numbers** : utilisable via `tabular-nums` (Tailwind `tabular-nums`)

### Hiérarchie

| Usage | Taille | Poids | Tracking | Exemple |
|---|---|---|---|---|
| Body principal | `text-sm` (14px) | 400 | normal | Texte de paragraphe |
| Body important | `text-sm` | 500 | normal | Items navigation, données |
| Labels uppercase | `text-[10px]` | 600 | `wider` | EYE-BROW, ÉTATS, KPI LABELS |
| Sous-titres panel | `text-sm` | 600 | normal | Titre de panel, ligne d'item |
| Titre intermédiaire | `text-xl` (20px) | 600 | `tight` | Topbar h1, subtitle de page admin |

### Notes

- Inter est **excellente en petite taille** mais ne brille pas à grande taille. À partir de 3xl, on bascule sur Fraunces.
- Pour les chiffres alignés (factures, KPIs), toujours `tabular-nums`.

## Fraunces (serif, font-display)

> Réservée aux titres display et aux chiffres KPI affichés en grand.

- **Source** : [Google Fonts — Fraunces](https://fonts.google.com/specimen/Fraunces)
- **Variable** : oui, avec axes spéciaux **SOFT** (humanisation des courbes) et **opsz** (optical size).
- **Style éditorial** : pensée pour les magazines numériques, parfaite pour l'esprit « atelier français ».
- **Italique** très typée, qui sert d'accent sur certains mots-clés des titres.

### Quand l'utiliser

**OUI** :
- Hero h1 des pages marketing (`text-5xl`+).
- Titres de section h2 sur les pages marketing.
- Chiffres KPI dans les `StatCard` (`text-3xl`+).
- Total mensuel sur la page abonnement (`text-3xl`+).
- Total CA sur le `RevenuePanel` (`text-4xl`+).
- Prix dans les cartes plans (`text-4xl`).

**NON** :
- En dessous de `text-2xl`, Fraunces devient bavarde.
- Pour le body : Inter est fait pour ça.
- Pour les labels UI (boutons, items menu).

### Application

Utiliser la classe utilitaire **`.font-editorial`** (définie dans `globals.css`) :

```css
.font-editorial {
  font-family: var(--font-display);
  font-feature-settings: "ss01", "ss02";
  letter-spacing: -0.015em;
}
```

Exemples concrets dans le code :

```tsx
<h1 className="font-editorial text-5xl md:text-7xl font-medium text-text">
  Un site sur-mesure,
  <br />
  <span className="italic text-accent-hi">en abonnement mensuel.</span>
</h1>
```

```tsx
<span className="font-editorial text-3xl font-medium tabular-nums">
  {formatEuros(total)}
</span>
```

### L'italique amber, signature visuelle

Pour les hero des pages marketing, on alterne **regular** (texte principal) et **italic + amber-300** (mot ou groupe mis en valeur). C'est la signature « atelier français » du projet.

Exemple :
> Un site sur-mesure,
> *en abonnement mensuel.*

> Tout ce dont votre site a besoin,
> *déjà dans l'abonnement.*

> Votre projet mérite mieux
> *qu'un devis automatique.*

## Tokens et fallbacks

Définis dans `globals.css` :

```css
--font-sans: var(--font-inter), "Inter", system-ui, -apple-system, sans-serif;
--font-display: var(--font-fraunces), "Source Serif Pro", Georgia, serif;
```

Si Fraunces ne charge pas (offline, cache vide), le fallback `Source Serif Pro` puis `Georgia` garantit qu'il y aura toujours un serif lisible.

## Règles d'usage

1. **Inter par défaut**. Pas besoin d'ajouter `font-sans`, c'est hérité du body.
2. **Fraunces seulement via `.font-editorial`**. Jamais en `font-family: serif` direct.
3. **Tabular numbers obligatoires** pour les chiffres alignés en colonne (KPIs, factures, totaux).
4. **Letter-spacing** : `tracking-tight` (-0.025em) pour les très gros titres, normal partout ailleurs. La classe `.font-editorial` applique déjà -0.015em.
5. **Italique** : réservée aux mots clés mis en avant dans les titres marketing. Ne pas l'utiliser sur le body ou les labels.
6. **Pas de drop caps**, pas de small caps customisés, pas d'effets typographiques exotiques. Sobriété éditoriale.