# 07 — Hiérarchie des headings : sauts de niveaux

> **Spec** : Heading hierarchy — tier **required**
> **Verdict** : 🟠 **PARTIAL** · **Priorité : P2**
> **Effort estimé** : < 1 h (3 corrections de template)

## Ce qui est conforme

- **Exactement un `<h1>` sur les 17 pages échantillonnées** ✓, descriptifs et tous distincts.
- Le H1 de l'accueil (`Destruction nid de guêpes et frelons en Île-de-France`) correspond au title sans la marque ✓ (pattern recommandé par la spec).
- Outlines propres sur les pages départements (`1-2-2-2-2-2-2-2-3-3-3-2`), le blog et les pages villes.
- Les headings sont pré-rendus dans le HTML serveur ✓.

## Problèmes & preuves

Trois sauts de niveau détectés :

| Page | Défaut | Détail |
|---|---|---|
| `/` (accueil) | **H2 → H4** | Dernier heading du DOM : `H4 「🍪 Gestion des cookies」` (widget de consentement) après une séquence de H2/H3 |
| `/galerie` | **H1 → H3** | Séquence `1-3-3-3-3-2-2-2` : `H1 「Galerie de nos Interventions」` directement suivi de `H3 「🐝 Guêpes & Frelons」` |
| `/liens-divers` | **H1 → H3** | Séquence `1-3-3-2-2-2` |

Note non bloquante : sur l'accueil, `H3 「Questions / Réponses et fausses idées…」` est intercalé entre deux H2 de tarifs — placement sémantiquement étrange mais pas une violation.

## Impact

- Les headings forment le plan de page que consomment lecteurs d'écran (navigation par titres), moteurs et agents IA. Un saut de niveau casse la table des matières implicite : un utilisateur de lecteur d'écran qui parcourt les H2 ne découvrira jamais les sections en H3 orphelines de `/galerie`.
- Item *required* : c'est un des deux seuls points *required* encore non conformes (avec la redirection apex).

## Correctif

1. **Widget cookies (accueil et probablement toutes les pages)** : le titre « 🍪 Gestion des cookies » est du chrome d'interface, pas du contenu — le sortir du plan de page. Deux options :
   - Remplacer le `<h4>` par un `<p>` ou `<div>` stylé (recommandé : une bannière cookies n'a pas à apparaître dans l'outline) ;
   - ou, si le widget doit garder un heading pour l'accessibilité de sa boîte de dialogue, utiliser `role="dialog"` + `aria-labelledby` vers un élément non-heading.
2. **`/galerie`** : promouvoir les `H3` (« 🐝 Guêpes & Frelons », etc.) en `H2` — ce sont les sections directes du H1.
3. **`/liens-divers`** : idem, premiers `H3` → `H2`.

Règle de template à retenir : le niveau d'un heading traduit **l'imbrication logique**, jamais la taille visuelle voulue (ça se règle en CSS).

## Vérification

Sur le build (`public/`), extraire les séquences de headings et détecter les sauts :

```bash
for f in public/index.html public/galerie/index.html public/liens-divers/index.html; do
  echo "== $f"; grep -oP '<h[1-6]' "$f" | grep -oP '[1-6]' | tr -d '\n'; echo
done
# attendu : aucune progression n'augmente de plus de +1 (ex. 1-2-2-3-3-2, jamais 1-3 ni 2-4)
```

Contrôle assistif : navigation par titres avec VoiceOver (rotor) — toutes les sections atteignables.