# GAB-027 · SessionTransitionCard — « Carte de transition de phase »

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

## Pack (structure officielle par-GAB)
```
GAB-027/
  renderer.html            ← moteur carte de transition (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_id` · `phase_from{icon,label}` · `phase_to{icon,label}` · `body` · `primary_cta{label,action}`

Optionnels : `title`, `next_action`.

## Ce qui vient du JSON vs HTML
- **JSON** : icône et libellé des deux phases, texte de transition, libellé du bouton CTA.
- **HTML** : layout phases + flèche animée, bouton structurel, styles tcard, responsive mobile.

## Archétype
Carte utilisée entre deux activités pédagogiques pour signaler le changement de phase. S'insère dans un parcours PlayKit. La flèche animée guide visuellement de la phase « from » vers la phase « to ».

## Garde-fous (child_safety)
- **BLOCKED** si `phase_from`, `phase_to`, `body` ou `primary_cta` absents.
- Le CTA ne fait jamais progresser le moteur directement ; il émet un signal (`action`) que le moteur parent consomme.
- Aucun contenu pédagogique en dur dans le renderer.

## QA à vérifier
1. Modifier `body` ou les `label` de phase → rendu change sans toucher au HTML (critère d'or).
2. `phase_from` absent → BLOCKED propre.
3. CTA → panel de confirmation visible.
4. Responsive 375px → phases empilées verticalement, flèche pivotée 90°.
5. `prefers-reduced-motion` → flèche sans animation.

## external_refs / dependencies
- **GAB-026** (CalloutLearningNote) : note pédagogique transverse — ne pas confondre avec une transition.
- **GAB-028** (CompletionBlock) : fin de session/étape — utiliser à la place de GAB-027 pour clore.
- **ENG-005** : transition runtime moteur (hors périmètre PlayKit).

## Source
`INDEX-300-playkit-GAB-026-030-PLAYABLE.html` (stage `data-tpl="27"`, styles `.tcard*`, handler `peConfirm`).