# GAB-145 · InteractiveBeforeAfterToggle — « Comparaison avant/après interactive »

**Archétype / renderer_key :** `text_cta` (cartographie) · **module :** EdTechInteractiveLearning
**Critère validé :** changer le JSON change les états, libellés et onglets sans modifier le HTML. ✅ check.py 12/12.

## Pack (structure officielle par-GAB)
```
GAB-145/
  renderer.html            ← moteur avant/après toggle (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` · `toggle_id` · `before_tab_label` · `after_tab_label` · `before_state_label` · `before_state_content` · `after_state_label` · `after_state_content`

Optionnels : `title`, `slider_label`, `primary_cta{label,action}`.

## Ce qui vient du JSON vs HTML
- **JSON** : libellés des onglets, contenu HTML des deux états, label du slider, texte du CTA.
- **HTML** : structure tabs, frame, slider, bouton CTA, transitions CSS, layout — rien de pédagogique.

## Comportement moteur
- **Onglets** : clic onglet `before` → frame violet, slider = 0. Clic `after` → frame mint, slider = 100.
- **Slider** : valeur ≥ 50 → état `after` ; valeur < 50 → état `before`. Onglet actif suit.
- **CTA** : bascule entre les deux états (toggle `before` ↔ `after`).
- **init(ext)** : si appelé avec un objet externe, celui-ci prend priorité sur `window.GAB_INSTANCE`.

## Garde-fous (child_safety)
- **BLOCKED** si `toggle_id`, `before_state_content`, `after_state_content`, `before_tab_label` ou `after_tab_label` absents.
- Les contenus `*_state_content` acceptent `<em>` uniquement — le renderer injecte via `innerHTML` ; pas de script.
- Jamais de troisième état — archétype strictement binaire.

## QA à vérifier
1. Modifier `before_state_content`/`after_state_content` → rendu change sans toucher au HTML (critère d'or).
2. `before_state_content` absent → BLOCKED propre avec message.
3. Slider à 0 → état before (violet). Slider à 100 → état after (mint).
4. Clic CTA → bascule d'état à chaque clic.
5. Responsive 375/768/1024 — aucun débordement.

## external_refs / dependencies
- **GAB-088** (DocumentLearning) : alternative pour before/after statique visuel (image fixe).
- **GAB-097** : progression multi-étapes (>2 états) — hors périmètre GAB-145.
- Lot parent : `LOT-interactivelearning-GAB-141-145`.

## Source
`INDEX-300-interactivelearning-GAB-141-145-PLAYABLE.html` (stage `data-tpl="145"`, `BA_DATA` const + handlers `baSwitch`/`baSlide`/`baApply`).