# GAB-090 · VisualMistakesPanel — « Panneau des erreurs fréquentes »

**Archétype / renderer_key :** `text_cta` (cartographie) · **module :** EdTechVisualLearning
**Critère validé :** changer le JSON change le panneau sans modifier le HTML. ✅ check.py 12/12.

## Pack (structure officielle par-GAB)
```
GAB-090/
  renderer.html            ← moteur panneau erreurs (ne pas modifier par instance)
  instance.example.json    ← SOURCE DE VÉRITÉ (contenu réel, à plat)
  schema.contract.json     ← contrat de validation
  README-contract.md       ← ce fichier
```

## Archétype

**VisualMistakesPanel** : panneau expand/collapse listant des erreurs fréquentes et leurs corrections. Chaque item comporte un `wrong_text` (l'erreur, visible par défaut) et un `fix_text` (la correction, dévoilée au clic). Usage typique : révision avant contrôle, récapitulatif de pièges, consolidation d'une notion.

## Champs requis (instance, à plat)

`gab_id` · `mistakes_panel_id` · `title` · `items[]{id, wrong_text, fix_text}`

Optionnels : `tip` (string|null — conseil affiché en bas, ignoré si null/absent).

## Ce qui vient du JSON vs HTML

- **JSON** : titre du panneau, chaque paire erreur/correction, tip optionnel.
- **HTML** : structure expand/collapse, icônes ✕/✓, animations, layout, fallback BLOCKED.

## Garde-fous (child_safety)

- **Anti-invention** : seul le contenu extrait fidèlement de la source HTML est présent dans l'instance. `tip` est `null` car aucun tip n'était présent dans la source — il n'a pas été inventé.
- **BLOCKED** si `items` absent/vide ou `gab_id` absent.
- Expand/collapse : `aria-expanded` mis à jour dynamiquement pour l'accessibilité.
- `prefers-reduced-motion` : transitions réduites à 0.12s.

## QA à vérifier

1. Modifier un `wrong_text`/`fix_text` → rendu change sans toucher au HTML.
2. `items:[]` → BLOCKED propre dans le panneau.
3. Clic sur `.mp-wrong` → item bascule `open`, `fix_text` visible ; re-clic → ferme.
4. Navigation clavier (Tab + Enter/Space) → expand/collapse accessible.
5. Responsive 375/768/1024 — aucun débordement horizontal.

## Source

`INDEX-300-visuallearning-GAB-086-090-PLAYABLE.html` (stage `data-tpl="90"`, handler `mpToggle`, styles `.mp-*`).

## external_refs / dependencies

Aucune dépendance externe. Polices Google Fonts (Nunito, DM Sans, JetBrains Mono) optionnelles — dégradation gracieuse sur les polices système.