# GAB-028 · CompletionBlock — « Bloc de complétion »

**Archétype / renderer_key :** `text_cta` (cartographie) · **module :** EdTechPlayKit
**Critère validé :** changer le JSON change le titre, le message et le libellé du bouton sans modifier le HTML. ✅ check.py 12/12.

## Pack (structure officielle par-GAB)
```
GAB-028/
  renderer.html            ← moteur CompletionBlock (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` · `completion_block_id` · `title` · `body` · `primary_cta{label, action}`

Optionnels : `icon_symbol` (symbole dans le cercle checkmark, défaut `✓`).

## Ce qui vient du JSON vs HTML
- **JSON** : `title` (ex: "Étape terminée"), `body` (message de confirmation), `primary_cta.label` (libellé du bouton), `icon_symbol` (optionnel).
- **HTML** : cercle checkmark avec animation pop + ring, layout centré, bouton structurel, gestion BLOCKED.

## Archétype
CompletionBlock est un **micro-gabarit transverse** PlayKit. Il signale la fin d'une activité/étape et invite à continuer. Pas de scoring, pas de feedback multi-états — juste confirmation + CTA.

## Garde-fous (child_safety)
- **Aucun contenu pédagogique en dur** : titre, corps et libellé CTA viennent exclusivement du JSON.
- **BLOCKED propre** si `title`, `body` ou `primary_cta` absents — message d'erreur affiché dans la carte.
- **Animation opt-out** : `prefers-reduced-motion` réduit toutes les animations à 0.01 ms.

## Règles d'usage
| ✅ use_when | ⛔ do_not_use_when |
|---|---|
| Une action / étape / activité est terminée | Célébration forte → GAB-022 |
| Confirmer l'accomplissement simplement | Récap complet → GAB-021 |
| Enchaîner vers l'action suivante | Transition de phase → GAB-027 |

## QA à vérifier
1. Modifier `title`/`body`/`primary_cta.label` → rendu change sans toucher au HTML (critère d'or).
2. Supprimer `title` → BLOCKED propre dans la carte.
3. Clic sur le bouton CTA → animation pop rejouée sur le cercle.
4. `init(monInstance)` → rendu change dynamiquement.
5. Responsive 375 / 768 / 1024 — aucun débordement horizontal.

## external_refs / dependencies
Aucune dépendance externe au lot. GAB-028 est autonome (PlayKit utilitaire transverse).

Références voisines (même lot LOT-playkit-GAB-026-030) :
- GAB-027 · SessionTransitionCard — transition de phase (use_when différent)
- GAB-026 · CalloutLearningNote — note pédagogique transverse

## Source
`INDEX-300-playkit-GAB-026-030-PLAYABLE.html` (stage `data-tpl="28"`, handler `compReplay()`).