# 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`,
> `assets/atelier-texte.css` ou `assets/numerique-1re.css`). Claude connaîtra
> ainsi les classes réelles.
---
## 0. Ce qu'il faut joindre à la conversation
Toujours ce fichier, plus les pièces de la classe concernée. Sans la feuille de
style, Claude invente des classes qui n'existent pas ; sans la page d'exemple,
il invente une structure de page.
| Classe | Gabarit | À joindre, en plus de ce fichier |
|---|---|---|
| **1re tronc commun** `1re-numerique` | C | `assets/theme.css` `assets/numerique-1re.css` `1re-numerique/1TC-NUM_bloc-01_ouvrir-le-cours.html` *(exemple élève)* `1re-numerique/1TC-NUM_bloc-01_pilotage.html` *(exemple enseignant, si la séance en a besoin)* |
| **2e différenciée** `2e-differenciee` | jeux | `assets/theme.css` `assets/jeux-differenciee.css` `2e-differenciee/module-a/index.html` *(exemple : il porte aussi tout le moteur de jeux)* |
| **2e commune** `2e-commune` | A | `assets/theme.css` `assets/exercices-commune.css` `2e-commune/module1/bloc2.html` *(exemple)* |
| **3e TQ Technique sociale** `3tq-technique-sociale` | B | `assets/theme.css` `assets/atelier-texte.css` `assets/atelier-texte.js` `3tq-technique-sociale/module1/index.html` *(exemple)* |
| **4e TQ Agent d'éducation** `4tq-agent-education` | B | les mêmes qu'en 3e TQ : le cours est le même, seule la classe du `` change (`classe-ae`) |
Remarques :
- `assets/exercices-commune.js` n'a pas besoin d'être joint : Claude n'écrit pas
de code pour le gabarit A, seulement les données `window.DATA` décrites en 6.2.
- Pour la 2e différenciée, le moteur de jeux est écrit **dans la page** du
module A. C'est pourquoi on joint la page entière : elle sert à la fois
d'exemple de structure et de bibliothèque de jeux à réutiliser.
- Si la conversation devient longue et que Claude se met à dériver, rouvrir une
conversation neuve et rejoindre les mêmes pièces. C'est plus rapide que de le
corriger.
### La marche à suivre, en cinq temps
1. **Ouvrir une conversation par module.** Un module par conversation : au-delà,
Claude perd le fil et mélange les gabarits.
2. **Joindre les pièces** du tableau ci-dessus.
3. **Décrire la commande** : la classe, le numéro et le titre du module, le
nombre de séances, et le contenu du cours (un extrait du cours papier, le
plan, les notions à couvrir). Plus c'est précis, moins il invente.
4. **Récupérer la livraison** au format imposé en 11 : fichiers complets,
carte d'index, liste des images attendues.
5. **Rapporter le tout ici**, dans Claude Code : mise en place des fichiers,
ajout de la carte dans l'index de la classe, et vérification du rendu réel
dans le navigateur.
---
## 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)
/index.html liste des modules de la classe
/images/ images de la classe, partagées par ses modules
//index.html accueil du module (ou le module entier)
//bloc2.html … pages supplémentaires éventuelles
```
### Les classes
| Dossier | Classe du `` | 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-.png|jpg`, par exemple `m3-menu-format.png`,
rangées dans `/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 `