# GAB-057 · StoryMissionCard — « Carte mission »

**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-057/
  renderer.html            ← moteur carte mission (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` · `mission_card_id` · `title` · `objective` · `primary_cta{label,label_active,action}`

Optionnels : `badge_label`, `meta_chips[]{icon,label}`, `feedback_text`.

## Ce qui vient du JSON vs HTML
- **JSON** : titre de la mission, objectif pédagogique, badge, chips contextuelles (durée/difficulté/épisode), libellé du bouton (avant/après clic), texte du feedback post-activation.
- **HTML** : layout dark card, dégradé fond, décorations visuelles, bouton gold, animation slide-in du feedback.

## Archétype & usage
- **V1_CORE · S · P0** — Carte de lancement de mission narrative.
- Utiliser quand : présenter un objectif + durée + difficulté, lancer une mission narrative, cadrer l'effort attendu.
- Ne pas utiliser quand : intro narrative pure (→ GAB-045), parcours multi-missions (→ PathMap), sans objectif clair.

## Interaction
Le CTA déclenche `ENGINE.cta()` : le bouton se désactive, son libellé passe à `primary_cta.label_active`, et `feedback_text` s'affiche en animation slide-in (mint/vert). Ce comportement est entièrement piloté par les données JSON.

## Garde-fous
- **BLOCKED** si `title`, `objective` ou `primary_cta` est absent.
- `meta_chips` facultatif : si absent ou vide, la zone chips est masquée proprement.
- `feedback_text` facultatif : si absent, aucun feedback affiché après clic.
- Aucun identifiant GAB-056, GAB-058 ou autre ne doit apparaître dans ce renderer.

## QA à vérifier
1. Modifier `title` / `objective` / `meta_chips` → rendu change sans toucher au HTML (critère d'or).
2. Supprimer `primary_cta` → BLOCKED propre, carte masquée, message d'erreur affiché.
3. Clic CTA → bouton désactivé, `label_active` affiché, `feedback_text` visible avec animation.
4. `meta_chips:[]` → zone chips masquée, pas de rendu cassé.
5. Injection externe `ENGINE.init(myInstance)` → rendu change (data-driven confirmé).
6. Responsive 375/768/1024 — chips flex-wrap, bouton pleine largeur mobile.

## Source
`INDEX-300-storylearning-GAB-055-059-PLAYABLE.html` (stage `data-tpl="57"`, handler `missionStart()`).

## Références externes
Aucune dépendance hors-lot. Gabarit autonome dans EdTechStoryLearning.