# GAB-055 · StoryImageScene — « Scène centrée sur une image »

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

## Pack (structure officielle par-GAB)
```
GAB-055/
  renderer.html            ← moteur scène image (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` · `scene_id` · `scene_emoji` · `caption` · `hotspots[]{id,style_top,style_left,label,detail}`
Optionnels : `title`, `primary_cta{label,action}`.

## Ce qui vient du JSON vs HTML
- **JSON** : émoji de la scène, légende, chaque hotspot (position + texte révélé au clic), libellé du bouton CTA.
- **HTML** : zone image, positionnement dynamique des hotspots, panneau de détail, bouton structurel, layout.

## Archétype pédagogique
`StoryImageScene` — scène narrative centrée sur une image (ou représentation visuelle) enrichie de points d'intérêt interactifs. L'élève observe puis clique pour découvrir des tensions / détails contextuels. Usage typique : Histoire, Géographie, Sciences, entrée visuelle d'un épisode narratif.

## Garde-fous (child_safety)
- **Anti-invention** : le contenu de chaque hotspot vient exclusivement du JSON — le moteur n'ajoute jamais de texte pédagogique.
- **BLOCKED** si `scene_emoji`, `caption`, `hotspots` absents ou `hotspots` tableau vide.
- **hotspots[].detail** ne doit jamais être vide si le hotspot est déclaré.
- **Ombres** : exclusivement colorées (DS V2) — aucun `rgba(0,0,0,...)`.

## QA à vérifier
1. Modifier `caption` / `scene_emoji` → rendu change sans toucher au HTML (critère d'or).
2. `hotspots:[]` → BLOCKED propre.
3. Clic hotspot → `detail` s'affiche dans le panneau `#scene-detail`.
4. `caption` absent → BLOCKED.
5. Responsive 375/768/1024 — aucun débordement horizontal.
6. Instance externe injectée via `ENGINE.init(data)` → rendu change dynamiquement.

## Source
`INDEX-300-storylearning-GAB-055-059-PLAYABLE.html` (stage `data-tpl="55"`, handler `imgHotspot()`).