# GAB-139 · InteractiveClickableDiagram — « Schéma cliquable »

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

## Pack (structure officielle par-GAB)
```
GAB-139/
  renderer.html            ← moteur schéma cliquable (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
```

## Champs requis (instance, à plat)
`gab_id` · `diagram_id` · `title` · `items[]{id, label, title, description, position{top, left}}`

Optionnels : `instruction`, `_note_dev`.

## Ce qui vient du JSON vs HTML
- **JSON** : titre du hero, instruction d'invite, chaque point chaud (label, titre, description, position CSS).
- **HTML** : canvas 16:10, shapes CSS decoratives (brain/heart), boutons dynamiquement injectés, zone d'explication.

## Archétype
Schéma avec points chauds cliquables/navigables au clavier. L'apprenant explore librement un diagramme ; chaque clic révèle le titre et la description du point sélectionné. Pas de scoring — exploration pure.

## Garde-fous (child_safety / anti-erreur)
- **BLOCKED** si `items` vide ou absent, ou si `gab_id` absent.
- Boutons injectés dynamiquement via `items[]` — aucune classe positionnelle (`h1`/`h2`/`h3`) codée en dur : le JSON contrôle tout.
- `position.top` / `position.left` : valeurs CSS en `%` pour positionnement absolu dans le canvas.
- Animation ping (`cd-ping`) et transition hover suspendues si `prefers-reduced-motion`.
- `aria-label` posé sur chaque bouton depuis `item.title`.

## QA à vérifier
1. Modifier `items[0].description` → rendu change sans toucher au HTML (critère d'or).
2. `items:[]` → BLOCKED propre dans le moteur.
3. Navigation clavier Tab + Entrée → description affichée, focus visible.
4. `ENGINE.init(monInstance)` → rendu change (injection externe).
5. Responsive 375/768/1024 — canvas 16:10 respecté.

## Source
`INDEX-300-interactivelearning-GAB-136-140-PLAYABLE.html` (stage `data-tpl="139"`, handler `cdShow`, données `CD_DATA`).

## external_refs / dependencies
- Shapes CSS décoratives (`brain` / `heart`) intégrées directement dans le HTML renderer — pas d'image externe.
- Les positions des points dans l'instance reproduisent fidèlement les classes CSS `.h1 / .h2 / .h3` du source hardcodé (top/left identiques).