# GAB-082 · VisualProcessFlow — « Flux de processus »

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

## Pack (structure officielle par-GAB)
```
GAB-082/
  renderer.html            ← moteur flux de processus (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` · `process_flow_id` · `title` · `steps[]{num, title, desc}`
Optionnels : `caption`.

## Ce qui vient du JSON vs HTML
- **JSON** : titre affiché, chaque étape (numéro, titre, description), légende optionnelle.
- **HTML** : layout des étapes, comportement toggle done/undone, fallback BLOCKED, slots.

## Comportement interactif
- Clic sur une étape → bascule `done` (fond mint, numéro → ✓).
- Reclique → revient à l'état initial (fond surface, numéro original).
- Accessible clavier : Enter/Espace pour toggler, `aria-label` sur chaque step.

## Garde-fous (child_safety)
- **BLOCKED** si `title` absent, `steps` absent/vide, ou `steps` < 2 éléments (flux nécessite une séquence).
- Aucun contenu pédagogique en dur dans le HTML — tout vient de l'instance.
- `caption` optionnel : null → pas affiché.

## QA à vérifier
1. Modifier `title` / contenu d'un step → rendu change sans toucher au HTML (critère d'or).
2. `steps:[]` → BLOCKED propre.
3. `steps` avec 1 seul élément → BLOCKED propre.
4. Clic step → done (✓ + fond mint) ; reclique → undone (num + fond surface).
5. `init(extInstance)` → rendu change sans modifier le HTML.
6. Responsive 375/768/1024.

## Source
`INDEX-300-visuallearning-GAB-081-085-PLAYABLE.html` (stage `data-tpl="82"`, handler `pfToggle`).

## external_refs / dependencies
- Aucune dépendance externe hors-lot.
- Palette DS V2 : cohérente avec tous les GABs du lot 081-085 et le gold standard GAB-302.