# GAB-091 · VisualFormulaBreakdown — « Décomposition de formule »

**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-091/
  renderer.html            ← moteur décomposition de formule (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` · `formula_id` · `formula_display` · `formula_parts[]{sym, token, label, description}`

Optionnels : `title`, `condition`, `primary_cta{label,action}`, `use_when[]`, `do_not_use_when[]`, `_note_dev`.

## Ce qui vient du JSON vs HTML
- **JSON** : texte de la formule, chaque partie (symbole, token, label, définition), la condition d'application, le libellé du bouton CTA.
- **HTML** : moteur de rendu, layout carte, surlignage interactif, accessibilité clavier, slots slot-chip.

## Archétype interactif
Cliquer un token dans `formula_display` ou une ligne de la légende déclenche un `pick(sym)` qui synchronise les états actifs formule ↔ légende. Le moteur reconstruit automatiquement le HTML de la formule en insérant des `<span class="sym">` autour de chaque `token` déclaré dans `formula_parts`.

## Garde-fous
- **Anti-invention** : `formula_parts` et `condition` doivent être extraits de la source pédagogique réelle ; ne jamais inventer une formule ou une définition.
- **BLOCKED** si `formula_id` absent, `formula_display` absent ou `formula_parts` vide.
- **token doit être exact** : chaque `token` doit être un fragment littéral de `formula_display` ; sinon la substitution échoue silencieusement.

## QA à vérifier
1. Modifier `description` d'un formula_parts → rendu change sans toucher au HTML (critère d'or).
2. `formula_parts:[]` → BLOCKED propre.
3. Clic token formule → légende correspondante surlignée (et inversement).
4. CTA → panel confirmation affiché.
5. Responsive 375/768/1024.

## Source
`INDEX-300-visuallearning-GAB-091-095-PLAYABLE.html` (stage `data-tpl="91"`, handler `fbPick`, styles `.fb-card`, `.fb-formula`, `.fb-legend`, `.fb-leg`, `.fb-condition`).

## external_refs / dependencies
- **GAB-075** : fiche formule typée simple (alternative si pas de décomposition symbole par symbole).
- **GAB-086** : méthode d'application (alternative si on veut montrer les étapes de calcul, pas seulement les symboles).