> ⚠️ **GAB SENSIBLE — VALIDATION BOSS OBLIGATOIRE avant tout usage.** (child-safety / RGPD / orientation / career). Contenu extrait sans invention ; à relire par un humain.

# GAB-376 · CareerLearningWorkEnvironmentCompare — « Comparer des environnements »

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

> ⚠️ **GAB SENSIBLE — REVUE BOSS REQUISE.** Domaine orientation/career, public mineur (child-safety + RGPD). Extraction faite SANS aucune invention pédagogique : tous les environnements, critères et feedbacks proviennent strictement de l'écran source GAB-376. Toute évolution du contenu (nouvel environnement, nouveau critère, reformulation des arbitrages) doit être validée par Boss avant mise en prod. Garde-fou de neutralité (`no_absolute_ranking_notice`) non négociable.

## renderer_key à concevoir (pas de moteur kit)
`compare_grid` n'a PAS de moteur kit de référence. Le renderer a été dérivé directement de l'écran source HTML GAB-376 (grille 2 colonnes d'environnements + chips de critères + bandeau de neutralité). Le moteur `ENGINE` est autonome et ne dépend d'aucun kit externe.

## Pack (structure officielle par-GAB)
```
GAB-376/
  renderer.html            ← moteur compare_grid (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` · `compare_id` · `environments[]{kind,body}` · `neutral_criteria[]{label,feedback}` · `no_absolute_ranking_notice`
Optionnels : `title`, `state_label`, `criteria_prompt`, `use_when[]`, `do_not_use_when[]`.

## Ce qui vient du JSON vs HTML
- **JSON** : les 2 environnements comparés (Bureau / Terrain) et leurs descriptifs, la liste des critères neutres et leur feedback d'arbitrage au clic, le bandeau de neutralité, les listes use_when / do_not_use_when.
- **HTML** : grille de comparaison, chips de critères, panneau d'avertissement, layout, neutralité structurelle.

## Garde-fous (child_safety)
- **Neutralité absolue** : aucun environnement n'est « le meilleur ». Chaque critère est présenté comme un arbitrage selon les préférences de l'élève (« Ni mieux ni pire — selon ce que TU préfères »).
- **Bandeau de neutralité obligatoire** : `no_absolute_ranking_notice` s'affiche dès qu'un critère est consulté → BLOCKED si absent.
- **Pas de recommandation / pas de profilage** : on compare des conditions de travail, on n'oriente pas vers un métier ni un choix.
- **BLOCKED** si `environments` < 2 / `neutral_criteria` vide / `no_absolute_ranking_notice` absent.

## QA à vérifier
1. Modifier un `feedback`/`body` → rendu change sans toucher au HTML (critère d'or). 2. Retirer `no_absolute_ranking_notice` → BLOCKED propre. 3. `environments:[1 seul]` → BLOCKED. 4. Clic critère → arbitrage affiché + bandeau neutralité visible. 5. Responsive 375/768/1024.

## external_refs / dependencies
- **GAB-377** (CareerLearningCareerEvolutionMap) référencé dans `do_not_use_when` (« évolution de carrière (→ GAB-377) ») — référence textuelle uniquement, hors lot 376-380 immédiat mais présent dans le même fichier source. Aucune dépendance de code.

## Source
`INDEX-300-careerlearning-GAB-376-380-PLAYABLE.html` (stage `data-tpl="376"`, handler `d376C`, slots : neutral_criteria · tradeoffs · rhythm · autonomy · preferences · no_absolute_ranking).