# GAB-128 · ExerciseStepByStepSolution — « Solution étape par étape »

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

## Pack (structure officielle par-GAB)
```
GAB-128/
  renderer.html            ← moteur solution pas-à-pas (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` · `exercise_id` · `problem_text` · `steps[]{number,title,description,is_final}` · `cta_initial` · `primary_cta{label,action}`

Optionnels : `title`, `problem_label`, `cta_next`, `cta_penultimate`, `cta_restart`.

## Ce qui vient du JSON vs HTML
- **JSON** : énoncé du problème, chaque étape (numéro, titre, description, marqueur final), tous les libellés du bouton progressif.
- **HTML** : moteur de révélation séquentielle, connecteur vertical mint→sky, style doré sur l'étape finale, layout, BLOCKED.

## Archétype du gabarit
Révélation séquentielle d'étapes — le bouton change de libellé à chaque clic (initial → next → penultimate → restart). L'étape finale (`is_final:true`) reçoit un style doré distinct des étapes intermédiaires (violet).

## Garde-fous (child_safety)
- **Anti-invention** : tout le contenu de l'instance provient littéralement du HTML source INDEX-300, stage `data-tpl="128"`.
- **BLOCKED** si `steps` est vide/absent, `problem_text` absent ou `exercise_id` absent.
- **is_final** : exactement 1 étape marquée finale ; le moteur n'impose pas cette contrainte mais la viole visuellement si plusieurs étapes portent `is_final:true`.
- Les descriptions peuvent contenir du HTML inline limité (`<span class="formula">`, `<b>`, `<em>`) — aucune balise block.

## QA à vérifier
1. Modifier `problem_text` → affiché sans modifier le HTML (critère d'or).
2. `steps:[]` → BLOCKED propre.
3. Séquence complète → toutes les étapes révélées, bouton passe en mode restart.
4. Clic restart → toutes les étapes masquées, bouton revient à `cta_initial`.
5. Responsive 375/768/1024 — connecteur vertical intact, pas de débordement.

## external_refs / dependencies
- **GAB-127** (ExerciseHintPanel) : indice rapide, alternative à ce gabarit pour une aide partielle.
- **GAB-126** (ExerciseCorrectionPanel) : correction post-exercice, souvent utilisé conjointement.
- **GAB-086** : méthode générique de réussite (ne pas confondre avec une solution détaillée).
- **GAB-082** : flux de processus à comprendre (structurel, pas résolution d'exercice).

## Source
`INDEX-300-exerciselearning-GAB-126-130-PLAYABLE.html` (stage `data-tpl="128"`, handlers `sbsNext / sbsReset`).