# GAB-081 · VisualDataTable — « Tableau de données »

**Archétype / renderer_key :** `text_cta` (cartographie) · **module :** EdTechVisualLearning
**Critère validé :** changer le JSON change le tableau sans modifier le HTML.

## Pack (structure officielle par-GAB)
```
GAB-081/
  renderer.html            ← moteur tableau de données (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` · `table_id` · `columns[string,string]` · `items[]{key,value}`
Optionnels : `title`, `caption`, `accessibility{keyboard_navigable,focus_visible,prefers_reduced_motion}`.

## Ce qui vient du JSON vs HTML
- **JSON** : libellés des colonnes (header), contenu de chaque ligne (key + value), titre affiché, caption.
- **HTML** : structure de la table sémantique, styles DS V2, layout, fallback BLOCKED.

## Garde-fous (child_safety)
- **Anti-invention** : contenu extrait strictement du source HTML GAB-081. Aucune ligne ni colonne inventée.
- **BLOCKED** si `columns` absent/vide, `items` absent/vide, `gab_id` absent.
- Tableau accessible : `<table role="table">` + `<th scope="col">` + `<thead>`/`<tbody>` sémantiques.

## QA à vérifier
1. Modifier un `value` dans items → cellule change sans toucher au HTML (critère d'or).
2. `items:[]` → BLOCKED propre.
3. `columns` absent → BLOCKED propre.
4. `caption:null` → zone caption absente du DOM.
5. Instance externe injectée via `GAB081.init(ext)` → rendu change.
6. Responsive 375/768/1024 : aucun débordement horizontal.

## Source
`INDEX-300-visuallearning-GAB-081-085-PLAYABLE.html` (stage `data-tpl="81"`, classe `.dt-table`).
Contenu extrait :
- Header col-1 : "Type de cause" / col-2 : "Exemple"
- Ligne 1 : Économique → Faim, prix du pain, dette de l'État
- Ligne 2 : Sociale → Privilèges de la noblesse et du clergé
- Ligne 3 : Politique → Roi absolu, peuple sans représentation