# GAB-088 · VisualBeforeAfter — « Avant / Après visuel »

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

## Pack (structure officielle par-GAB)
```
GAB-088/
  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
```

## Archétype

Layout 3 colonnes : **colonne AVANT** (surface grise, label mono, emoji, texte) | **flèche centrale** (pastille violet→violet-deep) | **colonne APRÈS** (surface mint-soft, label mono mint, emoji, texte). Sur mobile (≤ 600 px) : empilement vertical, flèche pivotée 90°.

## Champs requis (instance, à plat)

`gab_id` · `before_after_id` · `before_text` · `after_text`

Optionnels : `title`, `before_label`, `after_label`, `before_emoji`, `after_emoji`, `arrow_symbol`.

## Ce qui vient du JSON vs HTML

- **JSON** : libellés colonnes, emojis, textes avant/après, symbole flèche, titre du rendu.
- **HTML** : layout 3 colonnes, styles DS V2, flèche pastille, responsive — jamais de contenu pédagogique en dur.

## Garde-fous (child_safety)

- **BLOCKED** si `before_text` absent / `after_text` absent / `before_after_id` absent.
- Emojis purement décoratifs (`aria-hidden="true"`) — leur absence ne bloque pas le rendu.
- `aria-label` sur chaque colonne région = accessibilité lecteurs d'écran garantie.

## QA à vérifier

1. Modifier `before_text` / `after_text` → rendu change sans toucher au HTML (critère d'or).
2. `before_text: ""` → BLOCKED propre.
3. `after_text` absent → BLOCKED propre.
4. `before_after_id` absent → BLOCKED propre.
5. `init(ext)` avec instance externe → rendu change.
6. Responsive 375 px → colonnes empilées, flèche verticale.

## Source

`INDEX-300-visuallearning-GAB-086-090-PLAYABLE.html` (stage `data-tpl="88"`, bloc `.vba-wrap`).
Pas de handlers JS dédiés GAB-088 dans la source (rendu statique, pas de toggle interactif).

## external_refs / dependencies

Aucune dépendance hors-lot. Palette DS V2 partagée avec GAB-086, GAB-087, GAB-089, GAB-090 (même lot).