# GAB-018 · SessionNavigationControls — « Barre de contrôles navigation »

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

## Pack (structure officielle par-GAB)
```
GAB-018/
  renderer.html            ← moteur barre de navigation (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` · `nav_id` · `context_step_label` · `context_module_label` · `continue_cta{label,icon,enabled,feedback}`

## Champs optionnels
`back_cta{label,icon,enabled,feedback}` · `retry_cta{label,icon,enabled,feedback}` · `skip_cta{label,icon,enabled,feedback}` · `quit_cta{label,enabled,feedback}` · `nav_note`

## Ce qui vient du JSON vs HTML
- **JSON** : libellé de chaque bouton, icône, état activé/masqué, texte de feedback au clic, contexte d'étape, note contextuelle.
- **HTML** : structure de la barre, couleurs, layout, animations, logique de rendu conditionnel.

## Garde-fous
- **BLOCKED** si `continue_cta` absent, `context_step_label` absent, ou `context_module_label` absent.
- Boutons optionnels non présents dans le JSON = non rendus (pas de placeholder vide).
- `enabled:false` masque le bouton sans casser le layout.
- `skip_cta` doit être absent ou `enabled:false` si l'étape n'est pas optionnelle.
- `retry_cta` doit être absent ou `enabled:false` avant toute tentative.

## external_refs / dependencies
- **GAB-016 (SessionExitConfirm)** : déclenché par `quit_cta` dans un flow réel — le renderer affiche ici le feedback texte, sans monter la modale.
- **GAB-017 (SessionSkipStepConfirm)** : déclenché par `skip_cta` dans un flow réel — même principe, feedback texte dans ce renderer.

## QA à vérifier
1. Modifier un `feedback` / `label` → rendu change sans toucher au HTML (critère d'or).
2. `continue_cta` absent → BLOCKED propre.
3. `skip_cta` absent → bouton « Passer » non rendu, les autres intacts.
4. `retry_cta enabled:false` → bouton masqué, layout stable.
5. Responsive 375px → barre en colonne, aucun débordement.

## Source
`INDEX-300-playengine-GAB-016-020-PLAYABLE.html` (stage `data-tpl="18"`, handler `navAct`, styles `.navctl-*`).