# GAB-062 · StoryBeforeAfterNarrative — « Transformation avant/après »

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

## Pack (structure officielle par-GAB)
```
GAB-062/
  renderer.html            ← moteur avant/après (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` · `story_before_after_id` · `before_text` · `after_text`

Optionnels : `title`, `kicker`, `before_label`, `before_emoji`, `after_label`, `after_emoji`, `arrow_symbol`, `primary_cta{label,action}`.

## Ce qui vient du JSON vs HTML
- **JSON** : labels des colonnes, emojis, textes avant/après, symbole de flèche, libellé du bouton CTA.
- **HTML** : grille 2 colonnes, flèche centrale, styles DS V2, responsive, moteur de validation.

## Garde-fous (child_safety)
- `before_text` : état incomplet/naïf, jamais une erreur factuelle à corriger (→ GAB-061 pour les erreurs fréquentes).
- `after_text` : état enrichi, jamais un résumé seul (→ GAB-059 pour les résumés).
- **BLOCKED** si `before_text`, `after_text` ou `story_before_after_id` absent.
- Aucun contenu pédagogique hardcodé dans le HTML.

## QA à vérifier
1. Modifier `before_text`/`after_text` → rendu change sans toucher au HTML (critère d'or).
2. `before_text` absent → BLOCKED propre affiché.
3. `after_text` absent → BLOCKED propre affiché.
4. `init(ext)` avec instance externe → rendu change.
5. Responsive 375px → grille passe en colonne unique, flèche pivote à 90°.
6. 768/1024px → grille 2 colonnes, aucun débordement.

## Source
`INDEX-300-storylearning-GAB-060-064-PLAYABLE.html` (stage `data-tpl="62"`, bloc `.ba-card`).


## external_refs / dependencies
Réfs à d'autres GAB présentes dans le contenu de CET écran (navigation/prérequis pédagogiques extraits de la source, PAS des GAB à convertir ici) :
- GAB-059
- GAB-061