# GAB-022 · RewardVisualCelebration — « Célébration visuelle de réussite »

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

## Pack (structure officielle par-GAB)
```
GAB-022/
  renderer.html            ← moteur célébration (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` · `reward_id` · `kicker` · `title` · `body`

Optionnels : `icon`, `highlight`, `primary_cta{label,icon,action}`, `footer_note`.

## Ce qui vient du JSON vs HTML
- **JSON** : kicker (surtitre), icône du trophée, titre principal, message corps, libellé + icône du bouton replay, note de bas de carte.
- **HTML** : carte sombre, animation confettis, pop trophée, layout, gestion BLOCKED.

## Garde-fous
- **PlayKit affiche uniquement** : GAB-022 n'écrit aucun XP, badge ou progression. Le GamificationAdapter est le seul responsable de l'écriture.
- **BLOCKED** si `title` absent / `body` absent / `gab_id` absent → la carte masquée, panneau d'erreur affiché.
- **Ombres colorées uniquement** (DS V2 : pas de `rgba(0,0,0,...)` en `box-shadow`).
- **Animation structurelle** : confettis et pop trophée sont câblés dans le moteur JS — ils ne peuvent pas être désactivés par l'instance (hors `prefers-reduced-motion`).

## QA à vérifier
1. Modifier `title`/`body`/`kicker` → rendu change sans toucher au HTML (critère d'or).
2. `title` absent → BLOCKED propre, carte masquée.
3. Clic bouton replay → animation confettis + pop trophée rejouée.
4. `primary_cta` absent → libellé par défaut `Rejouer`.
5. Responsive 375/768/1024 — trophée réduit sur mobile.
6. `prefers-reduced-motion` → animations réduites.

## Source
`INDEX-300-playkit-GAB-021-025-PLAYABLE.html` — bloc `<!-- GAB-022 -->`, styles `.reward-*`, handler `rewardReplay()`, slots : `title`, `body`, `icon`, `highlight`, `primary_cta`.