# 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. --- ## 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 `

`**, dans l'en-tête. Le contenu commence à `

`. 6. **Toute action se fait sur un `