# GAB-089 · VisualCauseConsequence — « Cause → Événement → Conséquence »

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

## Pack (structure officielle par-GAB)
```
GAB-089/
  renderer.html            ← moteur schéma cause-événement-conséquence (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` · `cause_consequence_id` · `causes[]` · `effects[]` · `event_title`

Optionnels : `title`, `causes_label`, `effects_label`, `event_subtitle`, `arrow_symbol`.

## Ce qui vient du JSON vs HTML
- **JSON** : liste des causes, titre et sous-titre de l'événement central, liste des conséquences, libellés colonnes, symbole flèche.
- **HTML** : grille 3 colonnes (causes / événement / effets), flèches, layout, responsive, fallback BLOCKED.

## Garde-fous (child_safety)
- **Anti-invention** : aucun texte pédagogique en dur dans le HTML — tout vient de l'instance.
- **BLOCKED** si `causes` vide/absent, `effects` vide/absent, ou `event_title` absent.
- **Responsive** : sur mobile ≤600px, les 3 colonnes s'empilent verticalement, les flèches pivotent à 90°.

## QA à vérifier
1. Modifier une cause ou une conséquence → rendu change sans toucher au HTML (critère d'or).
2. `causes:[]` → BLOCKED propre.
3. `event_title` absent → BLOCKED propre.
4. Instance externe injectée via `ENGINE.init(ext)` → rendu change.
5. Responsive 375/768/1024 — 0 débordement horizontal.

## Source
`INDEX-300-visuallearning-GAB-086-090-PLAYABLE.html` (stage `data-tpl="89"`, CSS `.cc-card`, `.cc-flow`, `.cc-block.causes`, `.cc-block.event`, `.cc-block.effects`, `.cc-arrow`).

## Références lot (same-lot)
- GAB-086 : VisualMethodSteps (fiche méthode à cocher)
- GAB-087 : VisualInfographic (infographie chiffrée)
- GAB-088 : VisualBeforeAfter (avant/après)
- **GAB-089 : VisualCauseConsequence (ce GAB)**
- GAB-090 : VisualMistakesPanel (panneau erreurs fréquentes)