# GAB-099 · VisualPosterHero — « Affiche pédagogique »

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

## Pack (structure officielle par-GAB)
```
GAB-099/
  renderer.html            ← moteur affiche pédagogique (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` · `poster_id` · `highlight_plain` · `highlight_em`

Optionnels : `title`, `icon` (emoji, défaut 📢), `subtitle`.

## Ce qui vient du JSON vs HTML
- **JSON** : icône emoji, texte principal plain + partie em (couleur or), sous-titre.
- **HTML** : layout carte violette dégradée, animation flottante icône, split em/plain structurel, responsive.

## Archétype
**VisualPosterHero** — affiche pédagogique pour ancrer une idée forte / règle d'or.
Le message est découpé en deux parties : `highlight_plain` (texte normal blanc) + `highlight_em` (mise en valeur couleur or #FFB73D). Ce split est **structurel** : ne pas fusionner en un seul champ.

## Garde-fous (child_safety)
- **Une seule idée par affiche** : ne pas empiler plusieurs messages dans `highlight_em`.
- **BLOCKED** si `poster_id`, `highlight_plain` ou `highlight_em` absent.
- **icon** = emoji unique (1 seul caractère graphique). Ne pas mettre d'URL ou de HTML.
- **Pas de contenu inventé** : les champs de l'instance d'exemple sont extraits strictement du HTML source.

## QA à vérifier
1. Modifier `highlight_plain`/`highlight_em`/`icon` → rendu change sans toucher au HTML (critère d'or).
2. `poster_id` absent → BLOCKED propre.
3. `subtitle` absent → rendu valide (champ optionnel, zone non affichée).
4. `icon` absent → fallback emoji 📢, pas d'erreur.
5. Instance externe injectée via `ENGINE.init(ext)` → rendu change.
6. Responsive 375px → `font-size` highlight réduit à 22px, pas de débordement.

## Source
`INDEX-300-visuallearning-GAB-096-100-PLAYABLE.html` (stage `data-tpl="99"`, classes CSS `.po-card`, `.po-icon`, `.po-highlight`, `.po-sub`).