# GAB-083 · VisualAnnotatedImage — « Image annotée »

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

## Pack (structure officielle par-GAB)
```
GAB-083/
  renderer.html            ← moteur image annotée (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` · `visual_annotated_id` · `image{src,alt,kind}` · `items[]{id,label,caption,position}` · `default_caption`

Optionnels : `title`, `_note_dev`

## Ce qui vient du JSON vs HTML
- **JSON** : chaque label (texte + position CSS), chaque caption révélée au clic, le texte par défaut, l'alt de l'image.
- **HTML** : cadre visuel CSS (cellule végétale illustrative), logique de sélection/activation, layout, aria-live, fallback BLOCKED.

## Garde-fous (child_safety / anti-invention)
- L'image de fond est un schéma CSS illustratif (cellule végétale). Elle ne remplace **pas** un vrai asset pédagogique : `image.src` porte `_TODO:assets/cellule-vegetale.svg` → à remplacer par un fichier SVG/PNG réel avant usage en production.
- **BLOCKED** si `image` absent · `items` vide · `default_caption` absent.
- Aucun label ni caption n'est hardcodé dans le HTML : tout vient de `items[]`.

## _TODO / contenus manquants
- `image.src` → `_TODO:assets/cellule-vegetale.svg` — l'écran source utilise une image CSS pur (aucun fichier asset). Un vrai fichier SVG ou PNG du schéma de cellule doit être fourni.

## external_refs / dependencies
- Le schéma de cellule végétale utilisé dans l'instance exemple est issu du rendu CSS de `INDEX-300-visuallearning-GAB-081-085-PLAYABLE.html` (stage `data-tpl="83"`, handler `annShow`).
- Aucune dépendance externe hors-lot. Rendu autonome, pas de librairie JS.

## QA à vérifier
1. Clic label → caption du label affiché, label visuel actif (background sky). 2. `items:[]` → BLOCKED propre. 3. `image` absent → BLOCKED propre. 4. Instance externe injectée via `ENGINE.init(ext)` → rendu change sans toucher au HTML. 5. Navigation clavier (Tab + Entrée/Espace sur chaque label). 6. Responsive 375/768/1024 : labels lisibles, pas de débordement.

## Source
`INDEX-300-visuallearning-GAB-081-085-PLAYABLE.html` (stage `data-tpl="83"`, handler `annShow`).