# GAB-086 · VisualMethodSteps — « Fiche méthode »

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

## Pack (structure officielle par-GAB)
```
GAB-086/
  renderer.html            ← moteur fiche méthode (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` · `method_steps_id` · `title` · `steps[]{order,text}`

Optionnels : `icon`, `show_progress`, `cta_label`, `_note_dev`.

## Ce qui vient du JSON vs HTML
- **JSON** : titre de la fiche, icône emoji, liste des étapes avec leur texte et numéro d'ordre, libellé du CTA, activation de la barre de progression.
- **HTML** : layout de la carte méthode, barre de progression, cases à cocher, animation done/undone, logique moteur — aucun contenu en dur.

## Garde-fous (child_safety)
- **BLOCKED** si `gab_id`, `method_steps_id`, `title` absent ou `steps` vide.
- Anti-invention : aucune étape n'est générée si elle n'est pas dans l'instance JSON.
- Les numéros d'ordre (`order`) dans les étapes sont indicatifs — l'index de tableau détermine l'ordre d'affichage réel.

## Comportement interactif
- Clic (ou Entrée/Espace clavier) sur une étape la bascule en état « done » (texte barré, fond mint, check vert).
- La barre de progression (si `show_progress: true`) se met à jour en temps réel.
- Un message de complétion s'affiche quand toutes les étapes sont cochées.

## QA à vérifier
1. Modifier `title` / `steps` → rendu change sans toucher au HTML (critère d'or).
2. `steps:[]` → BLOCKED propre.
3. Cocher toutes les étapes → barre 100% + message ok.
4. `show_progress: false` → barre absente, reste fonctionnel.
5. Responsive 375/768/1024.

## Source
`INDEX-300-visuallearning-GAB-086-090-PLAYABLE.html` (stage `data-tpl="86"`, handler `mthToggle`).

## external_refs / dependencies
- Aucune référence à un autre GAB hors de ce lot.
- Usage contextuel noté dans la source : GAB-082 (flux processus), GAB-064 (critères d'objectif), GAB-078 (chronologie) — ces GABs sont des alternatives, non des dépendances.