# GAB-084 · VisualInteractiveLegend — « Légende interactive »

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

## Pack (structure officielle par-GAB)
```
GAB-084/
  renderer.html            ← moteur légende interactive (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

Gabarit **Visual V1_X (P1)** : affiche un schéma avec des zones cliquables synchronisées avec une liste de légende. Cliquer un item de la liste active la zone correspondante sur le schéma (et vice-versa). Usage privilégié : SVT (cellule, organe), géo (zones d'une carte), toute discipline avec schéma partitionné en zones nommées.

## Champs requis (instance, à plat)
`gab_id` · `legend_id` · `title` · `visual_alt` · `items[]{zone_id, label, color, bullet_class, zone_class, description}`

Optionnels : `visual_description`, `caption_default`.

## Ce qui vient du JSON vs HTML
- **JSON** : titre, alt du schéma, chaque item de légende (label, couleur, classes CSS zone/bullet), description au clic, texte d'instruction par défaut.
- **HTML** : layout grille 2 colonnes, schéma SVG/CSS, moteur d'interaction, logique d'activation active/inactive.

## Garde-fous (child_safety)
- **Anti-invention** : le contenu provient du HTML source INDEX-300 (cellule végétale SVT — schéma canonique). Aucun texte pédagogique ajouté.
- **BLOCKED** si `items` absent ou vide / `legend_id` absent / `visual_alt` absent.
- **Accessibilité** : `aria-label` sur chaque zone et item, `tabindex` + `keydown` (Enter/Espace) pour navigation clavier, `prefers-reduced-motion` respecté.

## QA à vérifier
1. Modifier un `label` ou `description` dans l'instance → rendu change sans toucher au HTML (critère d'or).
2. `items: []` → BLOCKED propre.
3. `legend_id` absent → BLOCKED propre.
4. Clic item liste → zone correspondante surlignée et caption mise à jour.
5. `init(extInstance)` → rendu piloté par l'instance externe.
6. Responsive 375/768/1024 : colonne unique sur mobile.

## Source
`INDEX-300-visuallearning-GAB-081-085-PLAYABLE.html` (stage `data-tpl="84"`, handler `legPick`, const `LEG_TXT`).

## Références externes (lots voisins)
- GAB-083 (VisualAnnotatedImage) : labels fixes sur image — quand interactivité zone non requise.
- GAB-085 (VisualGeoMapStatic) : carte géographique avec points cliquables.