# GAB-051 · StoryRevealMoment — « Moment de révélation »

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

## Pack (structure officielle par-GAB)
```
GAB-051/
  renderer.html            ← moteur carte révélation (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
```

## Archétype

Un **rideau coloré** (gradient violet) masque l'idée clé. Au tap/clic :
1. Le rideau se lève (animation translate + opacity).
2. Un burst de 16 particules colorées éclate depuis le centre.
3. Le texte révélé apparaît sur fond sombre, avec un mot mis en évidence en doré (`highlight_word`).
4. Un bouton "Re-cacher" permet de réinitialiser.

Cas d'usage : dévoiler l'idée clé après un moment de suspense narratif, ancrer fortement une notion, créer un "aha moment".

## Champs requis (instance, à plat)

`gab_id` · `reveal_id` · `curtain_cta` · `reveal_label` · `reveal_body` · `highlight_word`

Optionnels : `title`, `curtain_icon`, `replay_label`, `accessibility{aria_curtain_label, aria_replay_label}`, `child_safety`.

## Ce qui vient du JSON vs HTML

- **JSON** : libellé du rideau (`curtain_cta`), icône rideau (`curtain_icon`), tag révélation (`reveal_label`), texte de l'idée clé (`reveal_body`), mot mis en valeur (`highlight_word`), libellé replay (`replay_label`), aria-labels accessibilité.
- **HTML** : layout carte sombre, animation rideau, burst particules, polices, couleurs DS V2. Ne change pas entre instances.

## Garde-fous

- **highlight_word** doit être une sous-chaîne exacte de `reveal_body` (case-sensitive) — sinon aucun surlignage doré. BLOCKED si absent.
- **reveal_body** court (< 200 chars) pour rester lisible sur la carte mobile.
- **curtain_cta** court (< 60 chars) — affiché en une ligne sur le rideau.
- `BLOCKED` si `reveal_id`, `curtain_cta`, `reveal_label`, `reveal_body`, ou `highlight_word` absents.
- **Ombres** : uniquement colorées (`rgba(178,60,224,0.55)`, `rgba(123,97,255,0.28)`) — jamais `rgba(0,0,0,...)`.

## QA à vérifier

1. Modifier `reveal_body`/`highlight_word` → rendu change sans toucher au HTML (critère d'or).
2. `reveal_body` absent → BLOCKED propre dans le panneau erreur.
3. `highlight_word` absent → BLOCKED.
4. `highlight_word` présent mais pas sous-chaîne de `reveal_body` → texte s'affiche sans surlignage (pas de crash).
5. Tap rideau → animation lift + particules burst.
6. Clic "Re-cacher" → rideau revient.
7. Responsive 375/768/1024 — aucun débordement.
8. `prefers-reduced-motion` → animations réduites à 0.01ms.

## Source

`INDEX-300-storylearning-GAB-050-054-PLAYABLE.html` (stage `data-tpl="51"`, handlers `revealLift`/`revealReset`, styles `.reveal-*`).

## Références externes

Aucune dépendance hors-lot. Le renderer est autonome (0 import externe sauf Google Fonts optionnel via `<link>` supprimé volontairement pour autonomie standalone).