# GAB-261 · ComprehensionLearningIntro — « Cadre d'une activité de compréhension »

**Archétype / renderer_key :** `text_cta` (cartographie) · **module :** EdTechComprehensionLearning
**Critère validé :** changer le JSON change le rendu (niveau actif, étapes, CTA) sans modifier le HTML.

## Pack (structure officielle par-GAB)
```
GAB-261/
  renderer.html            ← moteur sélecteur de niveaux (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` · `subtitle` · `comprehension_level` · `levels[]{key,icon,name,description,title,subtitle,estimated_duration,steps_heading,steps:string[4],primary_cta:{label,action}}`

Optionnels : `icon`, `estimated_duration`, `subject`, `reason_title`, `reason_body`, `secondary_cta{label,action}`.

## Ce qui vient du JSON vs HTML
- **JSON** : titre et sous-titre par niveau, icônes et noms des 3 niveaux, 4 étapes par niveau, libellé du CTA primaire, niveau actif par défaut, raison pédagogique (reason_title/reason_body), CTA secondaire.
- **HTML** : grille des boutons de niveau, liste d'étapes, bloc raison, boutons structurels, layout.

## Archétype pédagogique
GAB-261 est un **écran d'introduction de compréhension** : il cadre l'activité AVANT que l'élève lise/écoute/observe. Il expose les 3 niveaux (littéral / inférentiel / critique) et les 4 étapes du niveau choisi. C'est la porte d'entrée de la chaîne 261→262→263→264→265.

## Garde-fous (child_safety)
- **Aucun contenu inventé** : tous les titres, étapes, libellés viennent strictement du source HTML source (CMI_TYPES + demo-content du GAB INDEX-300).
- **3 niveaux fixes** : literal, inferential, critical — toute instance doit fournir les 3 (enum contraint).
- **4 étapes par niveau** : la contrainte est explicite dans schema.contract.json.
- **BLOCKED** si `levels` absent/vide, `intro_id` absent, ou `title` absent.

## QA à vérifier
1. Modifier le `title` d'un level → hero-title change sans toucher au HTML (critère d'or).
2. `levels:[]` → BLOCKED propre.
3. Clic niveau `inferential` → titre, sous-titre, durée, étapes et CTA se mettent à jour.
4. CTA primaire → panel de confirmation.
5. Responsive 375/768/1024 — boutons de niveaux lisibles.

## Références externes (dependencies)
- Fait partie de la chaîne `EdTechComprehensionLearning` : GAB-261 (Intro) → GAB-262 (TextReading) → GAB-263 (KeyIdeas) → GAB-264 (QuestionAnswer) → GAB-265 (SelfCheck).
- Contenu source extrait de : `INDEX-300-comprehensionlearning-GAB-261-265-PLAYABLE.html` (stage `data-tpl="261"`, handlers `cmiPick`, objet `CMI_TYPES`).

## Source
`INDEX-300-comprehensionlearning-GAB-261-265-PLAYABLE.html` (stage `data-tpl="261"`, handlers `cmiPick`, objet `CMI_TYPES`).