> ⚠️ **GAB SENSIBLE — VALIDATION BOSS OBLIGATOIRE avant tout usage.** (child-safety / RGPD / orientation / career). Contenu extrait sans invention ; à relire par un humain.

# GAB-331 · MetacognitionLearningIntro — « Comment as-tu appris aujourd'hui ? »

**Archétype / renderer_key :** `text_cta` (cartographie) · **module :** EdTechMetacognitionLearning
**Critère validé :** changer le JSON change l'écran d'intro sans modifier le HTML. ✅ check.py.

## 🚨 FLAG REVUE BOSS — GAB SENSIBLE (child-safety / RGPD)
Cet écran ouvre un **temps de réflexion privé** sur la façon d'apprendre. Données et garde-fous sensibles :
- **Réflexion PRIVÉE** : visible par l'élève seul, jamais exposée.
- **Aucun profil psychologique** ne doit être établi/stocké (`child_safety.no_psych_profile=true`).
- **Non-jugement** : sans note, sans jugement.
- **Passable sans pénalité** : le skip est un droit (`skippable_no_penalty=true`).

➡️ **Toute évolution des champs `child_safety`, du cadre `framing_items` ou des feedbacks DOIT passer par une revue Boss avant mise en prod.** Extraction faite STRICTEMENT depuis le HTML source — aucune invention.

## Pack (structure officielle par-GAB)
```
GAB-331/
  renderer.html            ← moteur écran intro (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` · `intro_id` · `title` · `body` · `framing_items[]{icon,label,text}` · `primary_cta{label,action,started_label}`
Optionnels : `doc_kind`, `skip_cta{label,action}`, `start_feedback`, `skip_feedback`, `child_safety{private,no_psych_profile,non_judgment,skippable_no_penalty}`.

## Ce qui vient du JSON vs HTML
- **JSON** : la mention privée (`doc_kind`), le titre, le corps, les 3 items de cadre (Objectif / Privé / Action), les **libellés** des boutons (commencer / passer / en réflexion), les feedbacks après clic.
- **HTML** : la carte « papier », la grille des items de cadre, les 2 boutons structurels, le layout, le révéle animé.

## Garde-fous (child_safety) — extraits du source
- **Privé** : « visible par moi seul, pas de profil psychologique. »
- **Non-jugement** : « C'est privé, sans note, sans jugement. »
- **Skip permis** : « Passer (c'est permis) » → feedback « c'est permis, aucune pénalité. »
- **BLOCKED** si `title` / `body` / `primary_cta.label` absents ou `framing_items` vides.

## QA à vérifier
1. Modifier `title`/`body`/un `framing_items` → rendu change sans toucher au HTML (critère d'or). 2. `framing_items:[]` → BLOCKED propre. 3. Clic « Commencer » → cadre révélé + `start_feedback`, bouton désactivé. 4. Clic « Passer » → `skip_feedback` sans pénalité. 5. Responsive 375/768/1024.

## Source
`INDEX-300-metacognitionlearning-GAB-331-335-PLAYABLE.html` (stage `data-tpl="331"`, handlers `d331Start` / `d331Skip`).

## external_refs / dependencies
- `do_not_use_when` du source renvoie vers d'autres GAB du lot (hors périmètre de CE pack) :
  - confiance détaillée → **GAB-332** (MetacognitionLearningConfidenceCheck)
  - (réflexion d'erreur → GAB-334 ; objectif → GAB-335 dans le même module)
- Aucune dépendance de code : ce renderer est autonome.