# 03 — `text-wrap: balance` absent des headings

> **Spec** : Balanced text wrapping — tier **recommended**
> **Verdict** : 🔴 **FAIL** · **Priorité : P3 — mais fix de 5 minutes, à prendre en premier**
> **Effort estimé** : 5 min (2 lignes de CSS)

## Constat

- **0 occurrence** de `text-wrap` (ni `balance` ni `pretty`) dans les ~40 Ko de CSS du site (22 feuilles de style scannées).
- L'accueil seul compte **16 `<h2>`** avec de longs intitulés français — exactement le cas cible de `balance` :
  - « Ne tentez surtout pas de détruire vous-même des nids ! »
  - « Pourquoi faire appel à ABC GUEPES ? »
  - « Tarifs destruction nid de guêpes et frelons »…

Sur mobile (le gros du trafic pour une urgence guêpes), ces titres cassent avec un mot orphelin sur la dernière ligne.

## Correctif

```css
h1, h2, h3 { text-wrap: balance; }
p          { text-wrap: pretty; }
```

- `balance` : le navigateur équilibre les lignes des titres (pas de mot orphelin), recalculé à chaque largeur — supprime tout besoin de `<br>` manuels ou de `&nbsp;`.
- `pretty` : évite les orphelins en fin de paragraphe.
- **Zéro risque** : propriété ignorée par les navigateurs qui ne la supportent pas (dégradation = comportement actuel), aucun layout shift, aucun JS.

Note : `balance` est limité à ~6 lignes par les moteurs — sans objet pour des headings. Ne pas l'appliquer au body text long (coût de calcul), d'où le `pretty` pour les paragraphes.

## Vérification

- `getComputedStyle(document.querySelector('h2')).textWrap` → `"balance"`.
- Contrôle visuel mobile (375 px) : plus de mot seul en dernière ligne sur les H2 de l'accueil.