# GAB-098 · VisualConceptCardGrid — « Grille de cartes concepts »

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

## Pack (structure officielle par-GAB)
```
GAB-098/
  renderer.html            ← moteur grille de concepts (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` · `card_grid_id` · `title` · `items[]{emoji, term, color_index}`
Optionnels : `cta_label`, `caption`.

## Ce qui vient du JSON vs HTML
- **JSON** : chaque carte (emoji + terme + couleur), le titre du header, le libellé du bouton CTA, la légende.
- **HTML** : grille CSS, palette 6 couleurs (sky/gold/coral/mint/violet/magenta), interactions hover/focus/clic, layout responsive.

## Archétype & usage
Gabarit **V1_CORE · M · P0** (EdTechVisualLearning, vague 5 — CAP DES 100).
- Utiliser quand : organiser plusieurs concepts courts, vue d'ensemble en cartes, grille visuelle d'une notion.
- Ne pas utiliser quand : vocabulaire avec définitions (→ GAB-092), carte mentale hiérarchisée (→ GAB-077), un seul concept.

## Garde-fous (child_safety)
- **BLOCKED** si `items` vide/absent, `card_grid_id` absent ou `title` absent.
- `color_index` borné à 0–5 (modulo 6) — jamais d'erreur d'affichage même si valeur hors-plage.
- `term` affiché tel quel sans interprétation HTML (textContent, pas innerHTML).
- Aucune métadonnée inventée : les items proviennent exclusivement de l'instance.

## QA à vérifier
1. Modifier un `term`/`emoji` → rendu change sans toucher au HTML (critère d'or).
2. `items:[]` → BLOCKED propre.
3. `card_grid_id` absent → BLOCKED avec message explicite.
4. Clic sur une carte → carte mise en avant (border violet + panel info).
5. Bouton CTA → panel comptage items.
6. Responsive 375/768/1024 — grille 2 colonnes sur mobile.

## Source
`INDEX-300-visuallearning-GAB-096-100-PLAYABLE.html` (stage `data-tpl="98"`, bloc `.ccg-grid`, 6 cartes concept Révolution française hardcodées).

## external_refs / dependencies
- Palette DS V2 : `--sky-soft`, `--gold-soft`, `--coral-soft`, `--mint-soft`, `--violet-soft`, `--magenta-soft` (6 couleurs rotate).
- Google Fonts optionnel (Nunito + DM Sans + JetBrains Mono) — fallback système inclus.
- Aucune dépendance Common module externe.