formation numérique

2026-09-23 08:48:37 +02:00
parent a489298897
commit d92d043f9d
13 changed files with 7199 additions and 61 deletions
@@ -0,0 +1,565 @@
+# Feuille de route — créer un module de cours pour la plateforme « Mes cours »
+
+> **À l'attention de Claude (claude.ai).** Ce document décrit comment produire
+> les pages d'un module de cours pour une plateforme existante. Les pages que tu
+> produis seront déposées telles quelles dans le dépôt. Respecte les règles à la
+> lettre : tout écart (chemin absolu, couleur en dur, bibliothèque externe…) casse
+> le site ou son unité visuelle.
+>
+> **Conseil à l'enseignant :** joins à la conversation `assets/theme.css`, ainsi
+> que la feuille du gabarit choisi (`assets/exercices-commune.css` ou
+> `assets/atelier-texte.css`). Claude connaîtra ainsi les classes réelles.
+
+---
+
+## 1. Le contexte en bref
+
+- Site **statique** : HTML, CSS et JavaScript natifs. Aucun framework, aucune
+  bibliothèque, aucun CDN, aucun outil de construction.
+- Il doit fonctionner **hors ligne**, y compris ouvert depuis une clé USB
+  (`file://`). Aucun appel réseau, sauf la feuille Google Fonts déjà prévue dans
+  le gabarit (elle échoue sans dommage si le réseau la bloque).
+- Public : élèves du secondaire (12-18 ans), en local informatique, souvent
+  devant un TBI. Textes courts, consignes directes, tutoiement.
+- Langue : **français correctement accentué** partout dans le texte affiché.
+- Toutes les couleurs, polices et composants de base existent déjà dans
+  `assets/theme.css`. **Tu ne crées pas de charte : tu utilises la sienne.**
+
+> **Aperçu dans le chat :** les pages chargent leurs feuilles de style par des
+> chemins relatifs (`../../assets/…`) qui n'existent pas dans ton aperçu. La
+> page y apparaîtra donc sans mise en forme. C'est normal. **N'intègre pas le
+> thème dans la page pour « corriger » l'aperçu.**
+
+---
+
+## 2. Arborescence
+
+```
+index.html                         aiguillage général (ne pas toucher)
+assets/                            ressources communes (ne pas toucher)
+<classe>/index.html                liste des modules de la classe
+<classe>/images/                   images de la classe, partagées par ses modules
+<classe>/<module>/index.html       accueil du module (ou le module entier)
+<classe>/<module>/bloc2.html …     pages supplémentaires éventuelles
+```
+
+### Les classes
+
+| Dossier | Classe du `<body>` | Nom affiché | Cours |
+|---|---|---|---|
+| `1re-numerique` | `classe-tc` | 1re tronc commun | Numérique |
+| `2e-differenciee` | `classe-diff` | 2e différenciée | Initiation à l'informatique |
+| `2e-commune` | `classe-comm` | 2e commune | Informatique |
+| `3tq-technique-sociale` | `classe-ts` | 3e TQ Technique sociale | Traitement de texte |
+| `4tq-agent-education` | `classe-ae` | 4e TQ Agent d'éducation | Traitement de texte |
+
+### Nommage
+
+- Dossier du module : `module1`, `module2`… (ou `module-a`, `module-b`). Minuscules,
+  sans accent, sans espace.
+- Pages : `index.html` obligatoire. Pages suivantes : `bloc2.html`, `seance2.html`…
+- Images : `m<numéro>-<sujet>.png|jpg`, par exemple `m3-menu-format.png`,
+  rangées dans `<classe>/images/`.
+
+---
+
+## 3. Règles absolues
+
+1. **Chemins relatifs uniquement.** Depuis une page de module :
+   `../../assets/theme.css`, `../index.html`, `../images/m3-menu.png`.
+   Jamais `/assets/…`, jamais `https://…` vers le site lui-même.
+2. **Liens explicites vers `index.html`** : écrire `../index.html`, pas `../`
+   (sinon le lien ne marche pas depuis une clé USB).
+3. **Aucune couleur en dur** (`#1f4e79`, `blue`, `rgb(…)`) dans le HTML, le CSS
+   ou les SVG. Utiliser les variables de la section 5. Seule exception tolérée :
+   `#fff` pour un texte posé sur `var(--juste)` ou `var(--erreur)`.
+4. **Ne jamais redéfinir `:root`, `body`, `h1`, `h2`, `h3`, `.action`,
+   `.encadre`** ni aucune classe de `theme.css`.
+5. **Un seul `<h1>`**, dans l'en-tête. Le contenu commence à `<h2>`.
+6. **Toute action se fait sur un `<button type="button">`**, jamais sur un
+   `<div onclick>`. Si un élément non-bouton doit être cliquable (zone SVG,
+   conteneur qui reçoit des étiquettes), lui donner `tabindex="0"`,
+   `role="button"`, un `aria-label` et gérer Entrée et Espace.
+7. **Les retours de correction** (« Juste », « Non… ») vont dans un élément
+   `role="status" aria-live="polite"`.
+8. **Pas de `localStorage` obligatoire** : la page doit fonctionner entièrement
+   sans lui.
+9. **Pas de texte qui repose sur la couleur seule** : un verdict dit « Juste » ou
+   « Non », il ne se contente pas de verdir.
+
+---
+
+## 4. Choisir un gabarit
+
+| Besoin | Gabarit | Exemple existant |
+|---|---|---|
+| Théorie courte + série d'exercices corrigés automatiquement, avec compteur de score | **A — Exercices** | `2e-commune/module1/` |
+| Cours à lire, long, avec démonstrations, quiz et exercices intégrés au texte | **B — Document long** | `3tq-technique-sociale/module1/` |
+
+Le gabarit **A** est à privilégier : ses exercices sont décrits en données, sans
+code à écrire. Le gabarit **B** convient au traitement de texte et à tout
+contenu surtout textuel.
+
+---
+
+## 5. Jetons et composants disponibles (`assets/theme.css`)
+
+### Variables de couleur
+
+| Variable | Usage |
+|---|---|
+| `--encre` | texte principal, contours |
+| `--encre-douce` | texte secondaire |
+| `--papier` | fond de page |
+| `--blanc` | fond des cartes et champs |
+| `--trait`, `--trait-fort` | bordures neutres |
+| `--accent` | couleur vive de la classe : **fonds et filets seulement, jamais du texte** |
+| `--accent-fond` | aplat pâle de la classe |
+| `--accent-encre` | couleur de la classe **lisible en texte** |
+| `--juste`, `--juste-fond` | bonne réponse |
+| `--erreur`, `--erreur-fond` | mauvaise réponse |
+| `--cible`, `--cible-fond` | surlignage, élément actif |
+
+Polices : `--police-titre` (JetBrains Mono), `--police-texte` (Inter),
+`--police-doc` (Cambria, pour imiter un document Word/Writer).
+Mesures : `--lecture` (largeur de paragraphe), `--page`, `--gouttiere`.
+
+### Composants
+
+| Classe | Rôle |
+|---|---|
+| `.chapeau` | paragraphe d'introduction, plus grand, gris |
+| `.encadre` | encadré neutre coloré à la classe |
+| `.encadre.encadre--theorie` | « Ce qu'il faut savoir » |
+| `.encadre.encadre--cle` | la règle à retenir (jaune) |
+| `.encadre.encadre--attention` | piège fréquent (rouge) |
+| `.action` | bouton principal ; `.action--secondaire` pour le bouton blanc |
+| `.actions` | rangée de boutons |
+| `table`, `th`, `td` | tableaux déjà stylés, rien à ajouter |
+| `figure`, `figcaption` | images légendées |
+| `.manque` | cadre « image à ajouter » (voir section 8) |
+| `code`, `kbd` | raccourcis clavier, noms de fichiers |
+| `.modules` / `.module` | cartes de liste (pour l'accueil d'un module à plusieurs pages) |
+
+---
+
+## 6. Gabarit A — Module d'exercices
+
+### 6.1 Squelette d'une page
+
+Remplacer les `{{…}}`. Ne rien retirer d'autre.
+
+```html
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>{{Bloc 2}} — {{Module 3}} — {{2e commune}}</title>
+<meta name="robots" content="noindex">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="../../assets/theme.css">
+<link rel="stylesheet" href="../../assets/exercices-commune.css">
+</head>
+<body class="{{classe-comm}}">
+
+<header class="entete">
+  <div class="entete__interieur">
+    <nav class="ariane" aria-label="Fil d'Ariane">
+      <a href="../../index.html">Mes cours</a><span aria-hidden="true">/</span><a href="../index.html">{{2e commune}}</a><span aria-hidden="true">/</span><strong>{{Module 3}}</strong>
+    </nav>
+    <h1>{{Titre de la page}}</h1>
+    <p class="entete__meta">{{Bloc 2 du module 3, titre du module · cours papier, chapitre 7}}</p>
+  </div>
+</header>
+
+<!-- Uniquement si le module a plusieurs pages. aria-current="page" sur la page courante. -->
+<nav class="sommaire" aria-label="Blocs du module">
+  <div class="sommaire__interieur">
+    <a href="index.html">Accueil</a>
+    <a href="bloc2.html" aria-current="page">Bloc 2</a>
+    <a href="bloc3.html">Bloc 3</a>
+  </div>
+</nav>
+
+<main class="contenu">
+
+  <div class="encadre encadre--theorie">
+    <h3>Ce qu'il faut savoir avant de jouer</h3>
+    <ul>
+      <li>{{Notion 1}}</li>
+      <li>{{Notion 2}}</li>
+    </ul>
+  </div>
+
+  <h2>Exercices et jeux</h2>
+  <div id="exercices"></div>
+
+</main>
+
+<footer class="pied">
+  <div class="pied__interieur">
+    Support d'exercices hors ligne, utilisable depuis une clé USB.
+    Toute la théorie utilisée ici figure dans le cours papier, chapitre {{7}}.
+  </div>
+</footer>
+
+<script>window.DATA = [ /* exercices, voir 6.2 */ ];</script>
+<script src="../../assets/exercices-commune.js"></script>
+</body>
+</html>
+```
+
+Le moteur construit tout seul le compteur de score, les cartes d'exercice et les
+corrections. **N'écris aucun JavaScript** pour ce gabarit : seulement `window.DATA`.
+
+### 6.2 Format des exercices
+
+> **Les clés sont sans accent** (`enonce`, `reponse`, `acceptees`, `etapes`…) :
+> ce sont des identifiants lus par le moteur. **Les valeurs sont du français
+> accentué.** Ne jamais traduire ni accentuer une clé.
+
+Champs communs à tous les types :
+
+| Clé | Obligatoire | Contenu |
+|---|---|---|
+| `type` | oui | un des dix types ci-dessous |
+| `consigne` | oui | titre court de l'exercice |
+| `enonce` | selon le type | la question ou l'instruction |
+| `explication` | non, conseillé | affichée à la fin, dit **pourquoi** |
+
+#### `qcm` — une seule bonne réponse
+
+```json
+{"type": "qcm", "consigne": "La pièce qui travaille",
+ "enonce": "Où se font les calculs de l'ordinateur ?",
+ "options": ["dans l'écran", "dans le clavier", "dans le processeur"],
+ "reponse": 2,
+ "explication": "L'écran affiche, il ne calcule pas."}
+```
+`reponse` = index de la bonne option, **en partant de 0**.
+
+#### `vf` — vrai ou faux
+
+```json
+{"type": "vf", "consigne": "Vrai ou faux",
+ "enonce": "Un smartphone n'est pas un ordinateur.",
+ "reponse": false,
+ "explication": "C'est un ordinateur dont l'écran et le clavier ont fusionné."}
+```
+
+#### `assoc` — relier deux colonnes
+
+```json
+{"type": "assoc", "consigne": "Chaque élément son rôle",
+ "enonce": "Associe chaque élément à ce qu'il fait.",
+ "paires": [["écran", "afficher"], ["clavier", "entrer du texte"], ["processeur", "calculer"]]}
+```
+La colonne de droite est mélangée automatiquement. 3 à 6 paires.
+
+#### `tri` — classer dans des paniers
+
+```json
+{"type": "tri", "consigne": "Entrée ou sortie",
+ "enonce": "Choisis un objet, puis clique sur le panier qui convient.",
+ "paniers": ["Entrée", "Sortie", "Les deux"],
+ "items": [["clavier", 0], ["écran", 1], ["écran tactile", 2]]}
+```
+Dans `items`, le nombre est l'index du bon panier (à partir de 0). 2 à 4 paniers, 6 à 12 étiquettes.
+
+#### `ordre` — remettre des étapes dans l'ordre
+
+```json
+{"type": "ordre", "consigne": "Retirer une clé USB",
+ "etapes": ["Cliquer sur l'icône de retrait", "Choisir d'éjecter", "Attendre la confirmation", "Retirer la clé"]}
+```
+Écrire les étapes **dans le bon ordre** : le moteur les mélange.
+
+#### `texte` — réponse courte tapée
+
+```json
+{"type": "texte", "consigne": "Réponse courte",
+ "enonce": "Comment appelle-t-on la pièce qui effectue les calculs ?",
+ "acceptees": ["processeur", "le processeur", "cpu"],
+ "indice": "Relis le point 1.4 du cours."}
+```
+Majuscules, accents et ponctuation sont ignorés à la comparaison. Lister les
+variantes raisonnables. `indice` s'affiche après une erreur.
+
+#### `calcul` — réponse numérique
+
+```json
+{"type": "calcul", "consigne": "Calcul de capacité",
+ "enonce": "Combien de photos de 4 Mo tiennent sur une clé de 32 Go ?",
+ "reponse": 8000, "tolerance": 50,
+ "indice": "Convertis d'abord les Go en Mo."}
+```
+`tolerance` = écart accepté (0 par défaut). La virgule décimale est acceptée.
+
+#### `intrus` — trouver les affirmations fausses
+
+```json
+{"type": "intrus", "consigne": "Chasse aux affirmations fausses",
+ "enonce": "Clique uniquement sur les affirmations fausses.",
+ "items": [["L'écran fait les calculs", true], ["Le clavier est un périphérique d'entrée", false]]}
+```
+`true` = cette affirmation est **fausse** (c'est un intrus à cliquer). Au moins un `true`.
+
+#### `chrono` — série chronométrée
+
+```json
+{"type": "chrono", "consigne": "Série chronométrée",
+ "enonce": "Huit questions, une minute.", "secondes": 60,
+ "questions": [
+   {"enonce": "Fait les calculs :", "options": ["écran", "processeur", "souris"], "reponse": 1}
+ ]}
+```
+Réussite à 70 % de bonnes réponses. 6 à 10 questions de 3 options courtes.
+Compter environ 7 secondes par question.
+
+#### `hotspot` — cliquer sur un schéma
+
+```json
+{"type": "hotspot", "consigne": "Les éléments du poste",
+ "enonce": "Clique sur l'élément demandé.",
+ "svg": "<svg viewBox=\"0 0 400 220\" width=\"100%\" style=\"max-width:400px\"><rect x=\"20\" y=\"20\" width=\"90\" height=\"160\" rx=\"6\" fill=\"var(--accent-fond)\" stroke=\"var(--encre)\"/><rect class=\"zone\" data-zone=\"unité centrale\" x=\"20\" y=\"20\" width=\"90\" height=\"160\" rx=\"6\"/><text x=\"26\" y=\"200\">unité centrale</text></svg>",
+ "zones": ["unité centrale"]}
+```
+- Le dessin et la zone cliquable sont deux formes superposées : la forme
+  visible avec ses couleurs, puis la même forme avec `class="zone"` et
+  `data-zone`, **sans** `fill` ni `stroke` (le thème s'en charge).
+- Chaque valeur de `zones` doit être **identique, accents compris**, à un `data-zone`.
+- Couleurs du dessin : uniquement `var(--accent-fond)`, `var(--encre)`,
+  `var(--papier)`, `var(--blanc)`.
+- Guillemets du SVG échappés en `\"` puisqu'il est dans une chaîne JSON.
+
+### 6.3 Composition d'une page
+
+- 12 à 20 exercices par page, en variant les types.
+- Ordre conseillé : repérage (`hotspot`, `assoc`), classement (`tri`),
+  vérification (`qcm`, `vf`), production (`texte`, `calcul`), piège (`intrus`),
+  et un `chrono` en fin de page.
+- Toute notion utilisée dans un exercice doit figurer dans l'encadré théorie de
+  la page ou dans le cours papier cité en pied de page.
+
+### 6.4 Accueil d'un module à plusieurs pages
+
+L'`index.html` du module présente le module et liste ses pages avec les cartes
+`.modules` (même balisage que la section 9), puis un encadré « Comment ça
+marche ». Il charge `exercices-commune.css` mais **pas** le script, et n'a pas
+de `<div id="exercices">`. Modèle : `2e-commune/module1/index.html`.
+
+---
+
+## 7. Gabarit B — Document long (traitement de texte)
+
+### 7.1 Squelette
+
+```html
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>{{Module 3}} — {{3e TQ Technique sociale}}</title>
+<meta name="robots" content="noindex">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="../../assets/theme.css">
+<link rel="stylesheet" href="../../assets/atelier-texte.css">
+</head>
+<body class="{{classe-ts}}">
+
+<header class="entete">
+  <div class="entete__interieur">
+    <nav class="ariane" aria-label="Fil d'Ariane">
+      <a href="../../index.html">Mes cours</a><span aria-hidden="true">/</span><a href="../index.html">{{3e TQ Technique sociale}}</a><span aria-hidden="true">/</span><strong>{{Module 3}}</strong>
+    </nav>
+    <h1>{{Titre du module}}</h1>
+    <p class="entete__meta">{{Traitement de texte · sous-titre}}</p>
+  </div>
+</header>
+
+<div class="wrap">
+
+<nav class="sommaire-lat" aria-label="Sommaire">
+  <a class="top" href="#haut">{{Module 3}}</a>
+  <h2>{{Module 3, titre}}</h2>
+  <a href="#m3-{{section}}">{{Section}}</a>
+  <!-- une entrée par <h2 id="…"> du contenu -->
+  <h2>Autres modules</h2>
+  <a href="../index.html">Tous les modules de la classe</a>
+</nav>
+
+<main class="feuille" id="haut">
+<div class="regle" aria-hidden="true"></div>
+<div class="inner">
+
+  <p class="chapeau">{{Introduction}}</p>
+
+  <h2 id="m3-{{section}}"><span class="module-tag">Module 3</span><br>{{Première section}}</h2>
+  <p>…</p>
+
+  <h2 id="m3-quiz">Teste-toi, module 3</h2>
+  <div class="quiz" id="quiz3"></div>
+
+</div>
+</main>
+</div>
+
+<footer class="pied">
+  <div class="pied__interieur">
+    <p>Cours de traitement de texte, {{3e année Techniques sociales et d'animation}}. M. Courcelle, 2026-2027.</p>
+  </div>
+</footer>
+
+<script src="../../assets/atelier-texte.js"></script>
+<script>
+"use strict";
+quiz(document.getElementById('quiz3'), [ /* voir 7.3 */ ]);
+</script>
+</body>
+</html>
+```
+
+Les `id` des sections sont préfixés par le module (`m3-…`) et correspondent
+exactement aux liens du sommaire latéral, qui se surligne tout seul à la lecture.
+
+### 7.2 Composants propres au gabarit B
+
+| Balisage | Rôle |
+|---|---|
+| `<span class="module-tag">Module 3</span><br>` | étiquette au-dessus du premier `<h2>` |
+| `<div class="regle-cle"><p>…</p></div>` | la règle à retenir |
+| `<div class="specimen">…</div>` | extrait de document, en police de document |
+| `<span class="pil">¶</span>` | marque de paragraphe |
+| `<details><summary>Question</summary><p>Réponse</p></details>` | FAQ « Quand ça coince » |
+| `<table>` | tableaux de raccourcis, de règles |
+
+### 7.3 Outils JavaScript fournis (`assets/atelier-texte.js`)
+
+**Quiz** — `quiz(element, questions)`
+
+```js
+quiz(document.getElementById('quiz3'), [
+  {q: "Quel raccourci enregistre le document&nbsp;?",
+   r: ["Ctrl+S", "Ctrl+E", "Ctrl+P"],
+   b: 0,
+   e: "S comme Save. À faire toutes les quelques minutes."}
+]);
+```
+`b` = index de la bonne réponse (à partir de 0), `e` = explication.
+
+**Chasse aux fautes** — `chasse(conteneur, score, boutonReset, boutonSolution, jetons, total, messageFinal)`
+
+```html
+<div class="chasse" id="chasse-m3"></div>
+<p class="score" id="score-m3" role="status" aria-live="polite"></p>
+<div class="actions">
+  <button type="button" id="reset-m3">Recommencer</button>
+  <button type="button" id="sol-m3">Voir la solution</button>
+</div>
+```
+```js
+const T_M3 = [{t:"Les"}, {t:"enfants"}, {t:"son", f:true}, {t:"arrivés."}];
+chasse(document.getElementById('chasse-m3'), document.getElementById('score-m3'),
+  document.getElementById('reset-m3'), document.getElementById('sol-m3'),
+  T_M3, T_M3.filter(j => j.f).length, "Le correcteur n'en a souligné aucune.");
+```
+Un jeton par mot ; `f: true` marque une faute.
+
+Pour tout autre élément interactif, voir la section 10.
+
+---
+
+## 8. Images
+
+- Rangées dans `<classe>/images/`, appelées en `../images/nom.png` depuis un module.
+- Tu ne peux pas fournir les images : **prévois-les** et donne leur liste
+  (section 11). En attendant, chaque image affiche un cadre explicite grâce à
+  ce balisage, à reproduire tel quel :
+
+```html
+<figure>
+  <img src="../images/m3-menu-format.png" alt="Menu Format de Writer, ouvert"
+       onerror="this.outerHTML='&lt;div class=\'manque\'&gt;Capture à ajouter : &lt;code&gt;{{dossier-classe}}/images/m3-menu-format.png&lt;/code&gt;&lt;br&gt;{{Ce que la capture doit montrer.}}&lt;/div&gt;'">
+  <figcaption>{{Légende courte.}}</figcaption>
+</figure>
+```
+
+- `alt` décrit ce que l'image montre, pas « image de… ».
+- Pas de schéma en image quand un SVG ou un tableau fait l'affaire.
+
+---
+
+## 9. La carte à ajouter dans l'index de la classe
+
+Pour chaque module livré, fournis ce bloc, prêt à coller dans
+`<classe>/index.html`, dans la liste `<ul class="modules">` :
+
+```html
+<li class="module">
+  <a class="module__lien" href="{{module3}}/index.html">
+    <span class="module__num">{{Module 3}}</span>
+    <span class="module__titre">{{Titre du module}}</span>
+    <span class="module__resume">{{Ce qu'on y apprend, en une phrase.}}</span>
+    <span class="module__meta">{{4 blocs · cours papier, chapitres 6 à 9 · 62 exercices}}</span>
+  </a>
+</li>
+```
+
+---
+
+## 10. Si un besoin sort des gabarits
+
+Un jeu ou une démonstration que les outils existants ne couvrent pas est
+possible, à ces conditions :
+
+- Code dans **un seul** `<style>` et **un seul** `<script>` en fin de page, chacun
+  commençant par un commentaire `/* SPÉCIFIQUE : … */` qui dit ce qu'il fait.
+- Toutes ses classes CSS sont **préfixées** par le module : `.m3-…`. Aucun
+  sélecteur de balise nu (`button {}`, `p {}`) : ils déborderaient sur le thème.
+- Couleurs et polices exclusivement par les variables de la section 5.
+- JavaScript : `"use strict"`, aucune variable globale hors d'une fonction
+  d'initialisation, aucune dépendance.
+- Accessibilité : section 3, points 6, 7 et 9.
+- Signale-le dans ta livraison (section 11, point 5) : s'il est réutilisable, il
+  sera intégré aux outils communs.
+
+---
+
+## 11. Format de livraison
+
+Rends ta réponse dans cet ordre :
+
+1. **Récapitulatif** : classe, dossier du module, gabarit utilisé, liste des
+   fichiers avec leur chemin complet depuis la racine
+   (`3tq-technique-sociale/module3/index.html`).
+2. **Chaque fichier en entier**, dans un bloc de code précédé de son chemin.
+   Jamais d'extrait, jamais de « … reste inchangé ».
+3. **La carte d'index** (section 9).
+4. **Les images attendues** : tableau nom de fichier / ce qu'elle doit montrer.
+5. **Les points d'attention** : code spécifique (section 10), notion supposée
+   connue, renvoi à un chapitre du cours papier à vérifier.
+
+---
+
+## 12. Liste de vérification avant de livrer
+
+- [ ] Chemins tous relatifs, `../../assets/` depuis un module, liens finissant par `index.html`.
+- [ ] `<body class="classe-…">` correspond à la classe (section 2).
+- [ ] Fil d'Ariane : Mes cours / classe / module, avec les bons liens.
+- [ ] Un seul `<h1>`, dans l'en-tête.
+- [ ] Aucune couleur en dur, SVG compris.
+- [ ] Aucune règle CSS sur une classe ou une balise du thème.
+- [ ] Gabarit A : `window.DATA` est un JSON valide, clés sans accent, valeurs accentuées.
+- [ ] Gabarit A : chaque `reponse` et chaque index de panier existe bien (on compte à partir de 0).
+- [ ] Gabarit A : chaque entrée de `zones` a son `data-zone` identique.
+- [ ] Gabarit B : chaque lien du sommaire latéral a son `id` dans la page.
+- [ ] Tout élément cliquable est un `<button type="button">` ou a `tabindex`, `role` et le clavier.
+- [ ] Texte en français accentué, tutoiement, phrases courtes.
+- [ ] Chaque image a son `alt` et son cadre « Capture à ajouter ».
+- [ ] La carte d'index et la liste des images sont fournies.