# GAB-287 · WritingLearningTransitionBuilder — « Construire une transition fluide »

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

## Pack (structure officielle par-GAB)
```
GAB-287/
  renderer.html            ← moteur transition builder (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` · `transition_builder_id` · `previous_idea` · `next_idea` · `relation_type` · `transition_goal`

Optionnels : `title`, `intro_text`, `relation_label`, `connector_options[]{label,selected}`, `output_example`, `bad_transition_examples[]{connector,reason}`, `pedagogical_note`, `primary_cta{label,action}`, `secondary_cta{label,reveal_text}`.

## Ce qui vient du JSON vs HTML
- **JSON** : les deux idées (previous/next), la relation logique, les connecteurs et leur sélection initiale, l'exemple de sortie, les mauvaises transitions et leurs raisons, la note pédagogique, les libellés des boutons.
- **HTML** : structure de la fiche (blocs idées, flèches, relation, chips connecteurs, zone output, zone bad, zone raison), moteur de sélection de connecteur, affichage de l'output.

## Archétype pédagogique
TransitionBuilder : l'élève voit deux idées à lier, identifie la relation logique (opposition, addition, conséquence…), choisit parmi des connecteurs adaptés, et constate le résultat dans l'exemple de sortie. Les mauvaises transitions sont listées avec explication du défaut.

## Garde-fous (child_safety)
- **Anti-invention** : tout le contenu est extrait du HTML source (stage `data-tpl="287"`). Aucun contenu pédagogique inventé.
- **BLOCKED** si `previous_idea`, `next_idea`, `relation_type`, ou `transition_builder_id` absent.
- La section connecteurs est masquée si `connector_options` est absent/vide (pas d'erreur bloquante).
- La section bad examples est masquée si `bad_transition_examples` est absent/vide.
- `secondary_cta` est optionnel : le bouton est masqué si absent.

## QA à vérifier
1. Modifier `previous_idea`/`next_idea` → rendu change sans toucher au HTML (critère d'or).
2. `previous_idea` absent → BLOCKED propre.
3. Clic sur un connecteur → état `selected` change visuellement + output affiché.
4. `secondary_cta` cliqué → `reveal_text` affiché dans le panneau.
5. Responsive 375/768/1024 — aucun débordement.

## Source
`INDEX-300-writinglearning-GAB-286-290-PLAYABLE.html` (stage `data-tpl="287"`, bloc `<!-- GAB-287 TRANSITIONBUILDER -->`).