# GAB-197 · PathMapAlternativeRoute — « Routes alternatives multi-choix »

**Archétype / renderer_key :** `text_cta` (cartographie) · **module :** EdTechPathMap
**Critère validé :** changer le JSON change le sélecteur de routes sans modifier le HTML. check.py 12/12.

## Pack (structure officielle par-GAB)
```
GAB-197/
  renderer.html            ← moteur sélecteur de routes (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
```

## Archétype

GAB-197 est un **sélecteur de routes alternatives** : l'élève choisit parmi 2 à 3 parcours disponibles (guidé, express, challenge) avant de continuer. Le gabarit est déclenché quand plusieurs chemins pédagogiques sont réellement disponibles et validés, avec prérequis respectés.

## Champs requis (instance, à plat)

`gab_id` · `route_selector_id` · `title` · `summary` · `routes[]{route_id, type, tag_label, title, description, duration_label, difficulty_label, nodes_label, cta_label}` · `primary_cta{label, label_selected, action}`

Optionnels : `intro_text`

## Ce qui vient du JSON vs HTML

- **JSON** : titre, sous-titre, texte d'intro pédagogique, toutes les données de chaque route (type, libellés, durée, difficulté, nœuds, libellé CTA), libellé du bouton avant/après sélection, action déclenchée.
- **HTML** : layout de la card, structure des boutons route, bouton CTA structurel, styles colorés par type (guided/fast/challenge), logique de sélection et d'activation.

## Garde-fous

- **BLOCKED** si `routes` absent ou vide / `route_selector_id` absent / `primary_cta` absent.
- **2-3 routes maximum** : un seul chemin réel → utiliser GAB-194 (route conseillée unique).
- **Jamais de route sautant un prérequis** : les routes proposées doivent toutes être pédagogiquement valides.
- **Bouton CTA désactivé** tant qu'aucune route n'est sélectionnée (garde contre clic accidentel).
- **Anti-invention** : aucun contenu pédagogique en dur dans le HTML — tout vient du JSON.

## QA à vérifier

1. Modifier `title`/`summary`/`intro_text` → rendu change sans toucher au HTML (critère d'or).
2. `routes: []` → BLOCKED propre dans le panel.
3. `route_selector_id` absent → BLOCKED propre.
4. Sélectionner une route → bouton CTA activé, libellé = `cta_label` de la route.
5. Confirmer → panel `ok` avec `primary_cta.action`.
6. Instance externe via `init(ext)` → rendu piloté par l'instance externe.
7. Responsive 375/768/1024 → aucun débordement.

## Conditions d'usage (use_when / do_not_use_when)

| use_when | do_not_use_when |
|---|---|
| 2-3 chemins réellement disponibles | route conseillée unique (→ GAB-194) |
| souplesse sans casser la pédagogie | parcours strictement linéaire |
| prérequis critiques respectés | route qui saute un prérequis |

## Source

`INDEX-300-pathmap-GAB-196-200-PLAYABLE.html` — stage `data-tpl="197"`, styles `.ar-*`, handler `arPick()`.


## external_refs / dependencies
Réfs à d'autres GAB présentes dans le contenu de CET écran (navigation/prérequis pédagogiques extraits de la source, PAS des GAB à convertir ici) :
- GAB-194