# GAB-087 · VisualInfographic — « Infographie chiffrée »

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

## Pack (structure officielle par-GAB)
```
GAB-087/
  renderer.html            ← moteur infographie chiffré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` · `infographic_id` · `title` · `summary` · `items[]{icon, value, label}`

Optionnels : `fallback_text_summary`.

## Ce qui vient du JSON vs HTML
- **JSON** : titre principal, sous-titre contextuel, chaque statistique (icône + valeur + légende).
- **HTML** : grille à 2 colonnes, card dégradée sky, rendu visuel, layout responsive.

## Garde-fous (child_safety)
- **Anti-invention** : contenu extrait UNIQUEMENT du fichier source `INDEX-300-visuallearning-GAB-086-090-PLAYABLE.html`, stage `data-tpl="87"`. Aucun contenu pédagogique inventé.
- **BLOCKED** si `items` vide / `title` absent / `summary` absent.
- **items[].value** : chaîne courte (date, nombre, texte synthétique ≤ 12 car.) pour tenir dans la grille visuelle.
- Grille 2 colonnes desktop, 1 colonne mobile (≤ 560 px).

## QA à vérifier
1. Modifier un `value`/`label` → rendu change sans toucher au HTML (critère d'or).
2. `items:[]` → BLOCKED propre.
3. `title` absent → BLOCKED propre.
4. Instance externe injectée via `ENGINE.init(ext)` → rendu change.
5. Responsive 375/768/1024 : grille 1 col / 2 col.

## Source
`INDEX-300-visuallearning-GAB-086-090-PLAYABLE.html` (stage `data-tpl="87"`, section `<!-- GAB-087 -->`).

## external_refs / dependencies
Aucune dépendance externe. DS V2 autonome (palette CSS vars inline). Pas de référence à d'autres GAB dans le code.