Version texte (Markdown) de https://soma.yt/ai/creation-cours, générée automatiquement depuis la page HTML : même contenu, mêmes modèles de code.

RÉFÉRENCE · FORMATEURS ET AGENTS IA

# Créer les pages d’un cours SOMA

Cette page est la référence pour produire un cours SOMA, que vous l’écriviez vous-même ou que vous le fassiez produire par une IA. Les consignes que SOMA donne à une IA renvoient ici : lisez-la en entier avant d’écrire la première page. Un cours SOMA se livre en **un paquet** : les pages HTML des apprenants, un manifeste et, si le formateur en demande une, la présentation HTML du formateur en 16:9. Vous y trouverez le format du paquet, des recommandations pour titrer et construire les pages, un bac à idées de schémas et de composants, l’adaptation au niveau des apprenants, les contraintes du lecteur SOMA, la présentation formateur et un exemple complet. **Seules les contraintes techniques sont obligatoires** (paquet, lecteur, et présentation quand elle est livrée) : tout le reste est une recommandation à adapter au cours, et vous restez libre de concevoir vos propres mises en page, composants et interactions.

**Livraison obligatoire : un ZIP contenant les pages HTML apprenants et le manifeste SOMA, avec la présentation HTML formateur en 16:9 quand le formateur en demande une.**

La présentation est facultative ; demandée, une livraison limitée au cours apprenant est incomplète.

La présentation doit être dérivée du cours livré. Les notions, mots-clés, règles, méthodes et schémas proviennent du cours apprenant.

Seuls les exemples et applications peuvent différer, sans introduire de nouvelles connaissances.

**Le format technique est obligatoire. Le design reste libre. Les composants et schémas SOMA constituent un bac à idées, pas des modèles imposés.**

Mise à jour le 22 octobre 2026 · [Version texte (Markdown) de cette page, pour les agents IA](https://soma.yt/ai/creation-cours.txt)

## Sommaire

1. L’essentiel : obligatoire et recommandé
2. Le paquet d’un cours : pages, présentation et manifeste
3. Titrer les pages, les chapitres et les sections
4. Construire une page : recommandations, repères et métadonnées
5. Bac à idées : illustrations
6. Bac à idées : composants pédagogiques
7. Adapter au niveau et choisir les objectifs (Bloom)
8. Contraintes techniques du lecteur SOMA (obligatoires)
9. Un exemple de page complète
10. La présentation formateur (facultative)
11. Un exemple de paquet complet
12. Check-list avant livraison

## L’essentiel : obligatoire et recommandé

Deux niveaux d’exigence seulement : les **contraintes techniques**, sans lesquelles un paquet ne s’importe pas ou ne fonctionne pas, et des **recommandations**, à adapter librement au cours, au public et au sujet. Un cours sans présentation est un cours complet : la présentation s’ajoute quand le formateur la demande, en réimportant le paquet du cours.

### À respecter : les contraintes techniques

1. **Un seul ZIP complet** : le manifeste `soma-cours.json`, les pages apprenants (un fichier HTML autonome par page, **5 Mo au plus**) et, facultativement, la présentation formateur. Un paquet incomplet ou incorrect est refusé, sans rien modifier au cours (section 1).
2. **Si une présentation est livrée, en 16:9 et dérivée du cours** : chaque diapositive marquée `data-soma-diapo`, conçue pour 1280 × 720 px sans défilement, reliée par `data-soma-sources` aux passages du cours dont elle est tirée. C’est une **synthèse pour l’explication orale**, pas une deuxième version du cours : normalement au plus autant de diapositives que de pages. Elle suit la **charte graphique SOMA** (fond clair, couleurs et polices de SOMA) et laisse la navigation à SOMA (section 9).
3. **Un titre et un chapitre sur chaque page**, dans `<head>` : `<title>`, le titre que l’auteur (ou l’IA) donne à la page, et `<meta name="soma-chapitre" content="…">`, le chapitre auquel elle appartient, dont l’auteur choisit le nom. SOMA regroupe les pages par chapitre à l’import et refuse une page sans titre ou sans chapitre (section 1.5).
4. **Tout est dans le fichier** : CSS, scripts en ligne, images en SVG intégré ou en `data:` (WebP ou JPEG compressé, avec un texte alternatif). Aucune ressource chargée depuis Internet (CDN, police en ligne, image distante), sauf les vidéos YouTube ci-dessous.
5. **Vidéos YouTube seulement, et seulement celles que le formateur a fournies** : l’IA n’intègre une vidéo que si le formateur lui a donné son adresse YouTube ; elle ne cherche, ne devine et n’invente jamais une vidéo (elle peut proposer un emplacement et demander l’adresse). Intégration par `<iframe src="https://www.youtube-nocookie.com/embed/IDENTIFIANT" title="Titre de la vidéo"></iframe>` ; aucune autre `iframe` ni vidéo externe. SOMA affiche une vignette et lit la vidéo dans sa propre fenêtre.
6. **La page s’affiche dans un cadre isolé** : pas d’appel réseau, de cookies, de stockage local, d’`alert()`, de formulaire envoyé, de nouvel onglet ni de lien vers un autre site ou une autre page. Rien ne remonte à SOMA : les évaluations notées se créent dans SOMA.
7. **`<!doctype html>`, `<meta charset="utf-8">` et la balise viewport.** La page défile dans le lecteur (ne bloquez pas le défilement de `body`) et reste **lisible dès 360 px de large**.
8. **Pas de thème sombre maison** (`prefers-color-scheme`) : SOMA adapte lui-même les couleurs de la page. Évitez le texte posé sur une image ou sur un dégradé.
9. **Des `id` uniques dans la page**, y compris ceux des schémas SVG.

### Recommandé : à adapter au cours

1. **Des titres et des chapitres qui parlent** : un titre de page court qui reprend son `<h1>`, des chapitres de quelques pages nommés par ce qu’ils apportent, sans numéro (section 2).
2. **Des pages courtes, découpées selon les unités pédagogiques** (une notion, une méthode, un cas) : durées et nombres de pages sont des repères, pas des quotas (section 3.1).
3. **Des ingrédients choisis, pas une structure imposée** : objectifs, explications, exemples, schémas, activités, synthèse, dans l’ordre qui sert l’apprentissage ; aucun n’est exigé sur chaque page (section 3.2).
4. **Concevez librement** : le socle CSS, les schémas et les composants de ce guide sont un bac à idées. Créez vos propres composants HTML, CSS, SVG et interactions, du moment qu’ils respectent les contraintes ci-dessus.
5. **Adaptez vocabulaire, exemples et difficulté** au niveau de la formation et aux niveaux du cours. N’inventez aucun fait, chiffre ou source.
6. **Formulez les objectifs avec la taxonomie de Bloom**, en retenant les catégories qui correspondent aux objectifs et au niveau attendu, sans quota (section 6.4).
7. **Des repères pour retrouver l’information** : un `id` stable et lisible sur les passages importants, jamais réattribué et conservé quand la page est retravaillée (section 3.6) ; si utile, des métadonnées légères : mots-clés, objectifs, compétences (section 3.7).
8. **Vocabulaire SOMA** : apprenant, formateur, formation, parcours, cours, chapitre, page.

## 1. Le paquet d’un cours : pages, présentation et manifeste

### 1.1 Un cours, des pages et une présentation

Dans SOMA, une formation regroupe des parcours, un parcours contient des cours et un cours se lit page par page. Dans le sommaire du cours, les pages sont regroupées en chapitres. Un cours peut aussi avoir sa **présentation formateur**, facultative : un diaporama en 16:9 que le formateur projette pour expliquer oralement les notions du cours. Elle n’est jamais visible des apprenants.

Chaque page est un **fichier HTML autonome**, importé tel quel. SOMA l’affiche sans la modifier dans son lecteur, pour l’apprenant comme pour l’aperçu du formateur. Le formateur importe **le ZIP du cours**, tel quel, depuis l’assistant « Créer un contenu » (type Cours, étape « Avec une IA », qui fournit aussi les consignes à donner à l’IA) ou depuis la fiche d’un cours existant (« Importer le paquet (.zip) »).

### 1.2 Le contenu du ZIP

```
mon-cours.zip
├── soma-cours.json
├── pages/
│   ├── 01-comprendre-la-sauvegarde.html
│   └── 02-organiser-la-sauvegarde.html
└── presentation/
    └── presentation.html
```

- **Le manifeste `soma-cours.json`** à la racine de l’archive (ou dans un dossier unique qui contient tout le paquet).
- **Les pages apprenants**, un fichier `.html` autonome par page, **5 Mo au plus** chacune, **60 pages au plus**.
- **La présentation formateur, facultative**, un seul fichier `.html` autonome, **15 Mo au plus**, 200 diapositives au plus. Sans présentation, ni dossier `presentation/`, ni champ `presentation` dans le manifeste.
- **Aucun autre fichier**, sauf une note `.md` ou `.txt` pour le formateur ; les fichiers cachés et les dossiers système sont ignorés. Les images sont intégrées aux pages (SVG ou `data:`) : un dossier d’images à côté des pages est refusé. 80 Mo au plus pour l’ensemble.
- Préférez des noms de fichiers simples, en minuscules, sans espace ni accent. Le nom du fichier n’est pas affiché.

### 1.3 Le manifeste soma-cours.json

```json
{
  "format": "soma-cours",
  "version": 1,
  "pages": [
    { "cle": "comprendre-la-sauvegarde", "fichier": "pages/01-comprendre-la-sauvegarde.html" },
    { "cle": "organiser-la-sauvegarde", "fichier": "pages/02-organiser-la-sauvegarde.html" }
  ],
  "presentation": { "fichier": "presentation/presentation.html", "ratio": "16:9" }
}
```

- `"format": "soma-cours"` et `"version": 1`, exactement.
- **L’ordre du tableau `pages` est l’ordre de lecture** du cours, quel que soit le nom des fichiers.
- Chaque page a une **clé** (`cle`) : unique dans le cours, en minuscules sans accent, chiffres et tirets, commençant par une lettre, 60 caractères au plus. Elle décrit le contenu (`comprendre-la-sauvegarde`, jamais `page-2`).
- `presentation` (facultatif) désigne le fichier de la présentation, au ratio `"16:9"`. Omettez-le pour un cours sans présentation ; un fichier de présentation non déclaré, ou déclaré mais absent, est refusé. Réimporter un paquet sans présentation retire celle du cours, après confirmation.
- Le manifeste ne contient ni droits, ni organisme, ni cours cible : SOMA les détermine au moment de l’import.

### 1.4 Mettre à jour un cours : des clés stables

La clé est l’identité durable d’une page. Pour retravailler un cours, le formateur télécharge depuis sa fiche « Paquet du cours pour votre agent IA (.zip) » : le paquet actuel, avec ses clés. L’agent le modifie puis livre **le paquet complet**, même si une seule page change.

- **Conservez la clé de chaque page et ses identifiants** (`id`) : une page retrouvée par sa clé est mise à jour sur place et garde le suivi des apprenants. SOMA ne rapproche jamais deux pages par leur titre.
- Une nouvelle page reçoit une nouvelle clé ; ne réattribuez jamais une clé à un autre contenu.
- Une page absente du nouveau paquet est retirée du cours. SOMA affiche alors le plan des changements et demande une confirmation avant de l’appliquer.
- L’import est **tout ou rien** : tant que le nouveau paquet n’est pas entièrement vérifié et enregistré, l’ancienne version du cours reste en place. Un paquet refusé ne modifie rien.

### 1.5 Titre, chapitre et titre principal

| Élément | Rôle dans SOMA | Règle |
| --- | --- | --- |
| Manifeste `soma-cours.json` | Ordre des pages et clé de chaque page | Ordre du tableau `pages` = ordre de lecture ; clé unique et stable |
| `<title>` | Titre de la page dans le sommaire, donné par l’auteur ou l’IA | **Obligatoire** ; 60 caractères au plus, même texte que le `<h1>` |
| `<meta name="soma-chapitre" content="…">` | Chapitre (groupe) de la page dans le sommaire, nommé par l’auteur ou l’IA | **Obligatoire** ; même orthographe exacte pour toutes les pages du chapitre |
| `<h1>` | Titre affiché en haut de la page | Un seul par page |
| `<html lang="fr">`, `<meta charset="utf-8">`, balise viewport | Langue, accents, affichage sur téléphone | Obligatoires |

**Regroupement à l’import.** SOMA range les pages par chapitre : chaque chapitre prend la place de sa première page dans le manifeste, et ses pages gardent l’ordre du manifeste. Une page d’un chapitre déjà rencontré rejoint donc les siennes, même déclarée plus loin. Déclarez de préférence les pages d’un même chapitre à la suite. Une page sans `<title>` ou sans `soma-chapitre` est refusée, avec un message qui la nomme.

```html
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Appliquez la règle 3-2-1</title>
  <meta name="soma-chapitre" content="Organiser les copies">
</head>
```

### 1.6 Le squelette d’une page

Un squelette minimal : seuls le doctype, la langue, l’encodage, la balise viewport et le titre sont attendus. L’organisation du contenu (ici dans `<main>`) est libre.

```html
<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>🔁 Appliquez la règle 3-2-1</title>
  <meta name="soma-chapitre" content="Comprendre">
  <style>
    /* Vos styles : le socle proposé (section 1.5), adapté ou non, ou votre propre CSS. */
  </style>
</head>
<body>
  <main>
    <p class="repere">Chapitre · Comprendre</p>
    <h1><span aria-hidden="true">🔁</span> Appliquez la règle 3-2-1</h1>
    <!-- Contenu libre : choisissez les éléments utiles à la page (section 3.2). -->
  </main>
</body>
</html>
```

### 1.7 Un socle CSS proposé (facultatif)

Ce socle est **proposé, pas imposé**. Il règle la typographie, la largeur de lecture, l’affichage sur téléphone et les composants du bac à idées (sections 4 et 5 : encadrés, cartes, schémas, tableaux, questions). Reprenez-le tel quel, adaptez-le, n’en gardez qu’une partie ou écrivez votre propre CSS : seules comptent les contraintes du lecteur (section 7). Gardez simplement une apparence cohérente d’une page à l’autre du cours.

```css
/* Socle SOMA proposé : à reprendre, adapter ou remplacer par votre propre CSS. */
:root { --encre: #172033; --texte-doux: #475569; --trait: #e2e8f0; --accent: #4f46e5; --accent-pale: #eef2ff; }
* { box-sizing: border-box; }
body { margin: 0; padding: 32px 20px 48px; font: 17px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: var(--encre); background: #fff; }
main { max-width: 760px; margin: 0 auto; }
h1 { font-size: clamp(1.7rem, 4.6vw, 2.35rem); line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 16px; }
h2 { font-size: 1.4rem; line-height: 1.3; margin: 36px 0 12px; }
h3 { font-size: 1.12rem; line-height: 1.35; margin: 24px 0 8px; }
p, ul, ol { margin: 0 0 14px; }
li { margin: 4px 0; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid #6366f1; outline-offset: 2px; }

/* En-tête de page */
.repere { display: inline-block; margin: 0 0 12px; padding: 5px 12px; border-radius: 999px; background: var(--accent-pale); color: #4338ca; font-size: .85rem; font-weight: 700; }
.chapo { font-size: 1.15rem; color: #334155; }

/* Encadrés */
.encadre { margin: 22px 0; padding: 14px 18px; border-radius: 12px; border-left: 5px solid; }
.encadre > :last-child { margin-bottom: 0; }
.encadre-titre { margin: 0 0 6px; font-weight: 800; }
.objectifs { background: #eef2ff; border-color: #6366f1; }
.definition { background: #faf5ff; border-color: #8b5cf6; }
.exemple { background: #f0f9ff; border-color: #0ea5e9; }
.attention { background: #fff7ed; border-color: #f97316; }
.retenir { background: #ecfdf5; border-color: #10b981; }
.analogie { background: #f8fafc; border: 1px solid var(--trait); }

/* Cartes, étapes et deux colonnes : se réorganisent seules sur téléphone */
.cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 22px 0; }
.carte { padding: 16px; border: 1px solid var(--trait); border-radius: 14px; background: #fff; }
.carte-icone { display: block; margin-bottom: 8px; font-size: 1.9rem; line-height: 1; }
.carte h3 { margin: 0 0 6px; font-size: 1.05rem; }
.carte p { margin: 0; font-size: .95rem; color: var(--texte-doux); }
.etapes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 24px 0; padding: 0; list-style: none; counter-reset: etape; }
.etapes li { flex: 1 1 140px; max-width: 200px; margin: 0; padding: 14px; border: 1px solid #d5dbe5; border-radius: 14px; background: #fff; text-align: center; font-size: .95rem; line-height: 1.4; }
.etapes li::before { counter-increment: etape; content: counter(etape); display: grid; place-items: center; width: 30px; height: 30px; margin: 0 auto 8px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; }
.deux-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin: 22px 0; }
.deux-colonnes > div { padding: 18px; border: 1px solid var(--trait); border-radius: 14px; }
.deux-colonnes h3 { margin-top: 0; }

/* Schémas SVG et tableaux */
.schema { margin: 26px 0; padding: 18px 12px; border: 1px solid var(--trait); border-radius: 16px; background: #f8fafc; text-align: center; }
.schema svg { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.schema figcaption { margin-top: 10px; font-size: .9rem; color: var(--texte-doux); }
.tableau { margin: 22px 0; overflow-x: auto; border: 1px solid var(--trait); border-radius: 12px; }
.tableau table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: .95rem; }
.tableau caption { padding: 10px 14px; text-align: left; font-weight: 700; }
.tableau th, .tableau td { padding: 10px 14px; border-top: 1px solid var(--trait); text-align: left; vertical-align: top; }
.tableau thead th { background: var(--accent-pale); color: #3730a3; }
.tableau tbody tr:nth-child(even) { background: #f8fafc; }

/* Chiffres clés */
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 22px 0; }
.chiffre-cle { display: flex; align-items: center; gap: 16px; padding: 18px; border: 1px solid var(--trait); border-radius: 14px; background: #fff; }
.chiffre-cle svg { flex: none; width: 88px; height: 88px; }
.chiffre-cle p { margin: 4px 0 0; }
.chiffre-cle .chiffre { margin: 0; font-size: 2.4rem; font-weight: 800; line-height: 1; color: var(--accent); }
.source { font-size: .8rem; color: var(--texte-doux); }

/* Mises en situation, auto-vérification, questions à choix */
.situation, .question, .scenario { margin: 24px 0; padding: 18px 20px; border: 1px solid var(--trait); border-radius: 14px; background: #fff; }
.situation-titre { margin: 0 0 10px; font-weight: 800; }
details.verif { margin: 16px 0; padding: 12px 16px; border: 1px solid var(--trait); border-radius: 10px; background: #f8fafc; }
details.verif summary { cursor: pointer; font-weight: 700; color: #4338ca; }
details.verif[open] summary { margin-bottom: 8px; }
details.verif > :last-child { margin-bottom: 0; }
.choix { display: grid; gap: 8px; margin: 12px 0; }
.choix button { min-height: 44px; padding: 12px 14px; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.choix button:hover { border-color: #6366f1; }
.choix button.juste { background: #ecfdf5; border-color: #10b981; }
.choix button.moyen { background: #fff7ed; border-color: #f97316; }
.choix button.faux { background: #fef2f2; border-color: #ef4444; }
.retour { margin: 0; font-weight: 600; }

@media (max-width: 480px) {
  body { padding: 20px 14px 36px; font-size: 16px; }
  .encadre, .situation, .question, .scenario { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}
```

### 1.8 Avant d’écrire, et ce qu’il faut livrer

Si le sujet, le public, le niveau, la durée visée ou les documents de référence ne sont pas clairs, **posez d’abord vos questions** au formateur : périmètre exact du cours, nombre de pages souhaité, exemples attendus (métier, secteur), tutoiement ou vouvoiement, documents sources à suivre.

- Livrez **un fichier `.zip` téléchargeable** qui contient le manifeste, toutes les pages et, si elle est demandée, la présentation, pas seulement du code affiché dans la conversation. Présentation demandée : une livraison limitée aux pages est incomplète.
- Si votre environnement ne permet pas de produire l’archive ou l’un des fichiers, **dites-le honnêtement** : n’annoncez pas un paquet prêt à importer s’il manque un fichier obligatoire.
- Joignez un court message pour le formateur : la liste des pages (titre et chapitre), le nombre de diapositives, les sources utilisées et les points qu’il doit vérifier.

## 2. Titrer les pages, les chapitres et les sections

Ces conseils rendent le sommaire lisible ; adaptez-les au cours. SOMA ne lit techniquement que le `<title>` et le chapitre de chaque page, tous deux obligatoires (section 1.5).

### 2.1 Le titre d’une page

- **Court** : idéalement 60 caractères au plus, pour tenir sur une ligne du sommaire.
- **Orienté action** : un verbe à l’impératif qui dit ce que l’apprenant va faire (« Fixez des objectifs », « Calculez une marge »), ou un nom précis (« La règle 3-2-1 »). Gardez la même forme dans tout le cours.
- **Émoji facultatif**, un seul, en tête, en rapport avec le sens : 🧭 découvrir, 📖 définir, ⚙️ fonctionnement, 🛠️ méthode, ⚖️ comparer, 📊 résultats, 🧩 situation, 🧠 se tester, 🧾 synthèse. Toutes les pages en ont un, ou aucune.
- **Identique** dans `<title>` et dans `<h1>`, émoji compris.
- **Sans numéro ni nom de chapitre** : SOMA affiche l’ordre et le chapitre lui-même.

### 2.2 Exemples

| À éviter | Préférer | Pourquoi |
| --- | --- | --- |
| Introduction | 🧭 Découvrez à quoi sert une sauvegarde | Dit ce que l’apprenant va faire |
| Partie 2 : les supports | 💽 Choisissez un support de sauvegarde | Ni « Partie » ni numéro : SOMA gère l’ordre et les chapitres |
| 03 — La règle 3-2-1 | 🔁 Appliquez la règle 3-2-1 | Le numéro appartient au nom du fichier |
| Les différentes stratégies de sauvegarde, leurs avantages et leurs inconvénients | ⚖️ Comparez trois stratégies de sauvegarde | Trop long pour le sommaire |
| Quiz | 🧠 Testez vos connaissances | Explicite, et ce n’est pas une évaluation notée |
| Conclusion | 🧾 Retenez l’essentiel du cours | Annonce la synthèse |

### 2.3 Les chapitres

- **Chaque page indique son chapitre** et c’est l’auteur, ou l’IA qui produit le cours, qui **donne son nom à chaque chapitre** : jamais « Chapitre 1 » ni un nom générique.
- Des noms courts (1 à 4 mots), sans numéro, en nombre adapté au cours (souvent 2 à 5 chapitres de 2 à 5 pages).
- Deux styles possibles, à ne pas mélanger : les **moments de l’apprentissage** (« Découvrir », « Comprendre », « Pratiquer », « S’évaluer ») ou les **thèmes** du cours (« Les supports », « La restauration »).
- Même orthographe exacte (accents, majuscules) sur toutes les pages du chapitre : une orthographe différente crée un second chapitre. À l’import, SOMA regroupe les pages d’un même chapitre (section 1.5).
- Un repère de chapitre en haut de la page est facultatif ; s’il existe, il reprend le même texte (voir 5.1).

### 2.4 Les sections d’une page

- Les `<h2>` découpent la page en quelques étapes (souvent 2 à 4), sous forme de question ou d’idée courte (« Pourquoi une seule copie ne suffit pas », « La règle 3-2-1 »).
- Les `<h3>` détaillent un sous-point. Ne sautez jamais de niveau et évitez `<h4>` dans une page courte.
- Si vous utilisez des encadrés, gardez des titres constants d’une page à l’autre, par exemple « Objectifs de la page », « Définition », « Exemple », « Attention », « Pour mieux comprendre », « Mise en situation », « À retenir ».

## 3. Construire une page

Cette section rassemble des **recommandations** pour des pages claires et efficaces. Aucune n’est une structure obligatoire : choisissez ce qui sert chaque notion, dans l’ordre qui sert l’apprentissage.

### 3.1 Des pages courtes, découpées selon les unités pédagogiques

- **Une page = une unité pédagogique naturelle** : une notion, une méthode, un cas, une synthèse. C’est le contenu qui fixe le découpage, pas un nombre de pages ou de minutes.
- **Préférez les pages courtes** : elles se lisent mieux, sur téléphone comme sur ordinateur. Repère indicatif : souvent 5 à 10 minutes de lecture (environ 300 à 700 mots), activité comprise. Une étude de cas ou une procédure qu’on ne peut pas couper peut être plus longue ; un rappel, plus court.
- Si une page traite deux notions indépendantes, coupez-la ; si deux pages ne se comprennent pas l’une sans l’autre, réunissez-les.
- Des paragraphes courts et des listes brèves facilitent la lecture.
- **Nombre de pages** : celui qu’exige le contenu (souvent 4 à 12 pour un cours) ; demandez-le au formateur s’il a une attente.

### 3.2 Les ingrédients d’une page, à choisir

Une page de notion contient souvent les éléments ci-dessous. **Aucun n’est obligatoire et l’ordre est libre** : choisissez ceux qui servent l’objectif de la page. Une page de pratique peut commencer par la mise en situation, une page de synthèse se passer d’objectifs ou d’activité.

- **Une entrée en matière** : le titre, éventuellement un repère de chapitre et un chapô qui dit ce que la page apporte.
- **Des objectifs**, formulés avec un verbe observable (expliquer, choisir, calculer…) : utiles sur une page de notion ou de pratique.
- **Des explications** courtes, avec une définition pour chaque terme nouveau.
- **Une illustration** qui porte l’idée (schéma, tableau, cartes, animation), jamais une simple décoration : très souvent utile, sans être exigée sur chaque page.
- **Des exemples concrets**, tirés de l’univers du public visé.
- **Une activité** : mise en situation, auto-vérification, question, manipulation.
- **Une synthèse** : un « À retenir » de quelques phrases, une carte mentale, un tableau récapitulatif.

### 3.3 Les pages d’un cours

Selon le sujet, un cours combine plusieurs types de pages ; aucun n’est imposé.

- **Page d’ouverture** : à quoi sert le cours, ce que l’apprenant saura faire à la fin, une situation d’accroche.
- **Pages de notion** : une notion chacune.
- **Pages de pratique** : mises en situation, cas, méthode à appliquer pas à pas.
- **Page « Testez vos connaissances »** : quelques questions à choix avec correction immédiate, non notées.
- **Page de synthèse**, souvent en fin de cours : l’essentiel, une carte mentale ou un tableau récapitulatif, des pistes pour aller plus loin.

### 3.4 Choisir une illustration

| Vous voulez… | Modèle |
| --- | --- |
| Montrer un ordre, une procédure | Processus en étapes (4.1) ou étapes en HTML (5.4) |
| Montrer une boucle qui se répète | Cycle (4.2) |
| Opposer deux notions | Comparaison (4.3) ou deux colonnes en HTML (5.5) |
| Situer des évènements dans le temps | Frise chronologique (4.4) |
| Organiser des idées autour d’un thème | Carte mentale (4.5) |
| Montrer une hiérarchie, un classement | Arborescence (4.6) ou pyramide (4.7) |
| Montrer une sélection, une perte à chaque étape | Entonnoir (4.8) |
| Comparer selon plusieurs critères | Tableau comparatif (4.9) |
| Mettre un chiffre en valeur | Chiffres clés (4.10) |
| Présenter 2 à 6 éléments de même rang | Cartes (5.3) |

Ces modèles sont des idées de départ : une illustration inventée pour le sujet vaut souvent mieux.

### 3.5 À éviter

- Les murs de texte, plusieurs notions dans une même page, les titres vagues (« Introduction », « Partie 2 »).
- Le jargon non défini, les phrases de plus de deux lignes, les listes à rallonge.
- Les faits, dates, chiffres ou sources inventés : appuyez-vous sur les documents fournis et signalez au formateur ce qui reste à vérifier.
- Les textes ou images protégés recopiés : reformulez, et dessinez vos schémas en SVG.
- Les images décoratives sans information, le texte posé sur une photo ou sur un dégradé, la couleur comme seul porteur de sens.
- Les liens vers d’autres sites ou d’autres pages du cours : ils ne fonctionnent pas dans le lecteur. Citez les sources en texte.
- Les quiz notés, les formulaires à envoyer, une information visible seulement au survol de la souris.

### 3.6 Points de référence : des identifiants stables

SOMA prépare une recherche dans le contenu des cours : un résultat ouvrira la bonne page et la fera défiler jusqu’au passage trouvé, mis en évidence quelques instants. Pour que ce passage soit retrouvé avec précision, et pour permettre demain des liens directs vers une définition, une méthode ou un schéma, **donnez un identifiant stable (attribut `id`) aux éléments pédagogiques importants** de chaque page.

```html
<h2 id="regle-3-2-1">La règle 3-2-1</h2>

<aside class="encadre definition" id="definition-sauvegarde" data-soma-type="definition">
  …
</aside>

<figure class="schema" id="schema-regle-3-2-1" data-soma-type="schema">
  …
</figure>
```

**Ce n’est pas une structure imposée.** Choisissez librement les balises, les styles et les illustrations qui servent le cours : la seule convention est de rendre adressables les informations importantes. Une page sans identifiant reste valable et s’affiche normalement.

**Quels éléments repérer**

- Les titres des notions (`<h2>`, et les `<h3>` utiles).
- Les définitions importantes, les règles et principes essentiels.
- Les méthodes et procédures, et si besoin chacune de leurs étapes ou les étapes d’un raisonnement.
- Les exemples, les schémas et les tableaux importants.
- Les mises en situation, auto-vérifications et questions.
- Les points de vigilance et les confusions fréquentes.

Pas d’identifiant sur chaque phrase : visez des unités cohérentes et assez précises (un encadré, une figure, une étape). Dans un long passage qui réunit plusieurs informations indépendantes, ajoutez des sous-identifiants seulement s’ils aident vraiment à s’y retrouver, par exemple `methode-inventaire-collecter` puis `methode-inventaire-verifier`.

**Écrire l’identifiant**

| Règle | Oui | Non |
| --- | --- | --- |
| Minuscules sans accent, chiffres et tirets ; commence par une lettre ; 60 caractères au plus | `definition-sauvegarde` | `Définition Sauvegarde`, `def_1` |
| Décrit le contenu, jamais la position dans la page | `regle-3-2-1` | `section-2`, `encadre-3` |
| Unique dans la page, y compris face aux `id` techniques d’un SVG (marqueurs, dégradés), à préfixer par `svg-` | `svg-fleche` | deux éléments `id="fleche"` |
| Forme conseillée : nature puis sujet | `methode-inventaire`, `vigilance-mot-de-passe` | `truc-important` |

**Garder les identifiants stables**

- Un identifiant ne change pas lors d’une correction mineure ni d’une reformulation du titre : il désigne la notion, pas son libellé.
- **Ne réattribuez jamais un identifiant à une autre notion.** Si une notion disparaît, son identifiant disparaît avec elle.
- Si une notion est scindée, sa partie principale garde l’identifiant ; les nouvelles parties en reçoivent de nouveaux.
- **Pour retravailler une page existante, conservez tous ses identifiants** : un identifiant perdu casse les liens et les références qui pointent vers le passage (résultats de recherche, questions rattachées à une notion).

**Préciser la nature (facultatif)** : l’attribut `data-soma-type` indique ce qu’est l’élément. Il n’a aucun effet visuel. Valeurs reconnues :

| Valeur | Pour |
| --- | --- |
| `notion` | une partie qui présente une notion |
| `objectifs` | la liste des objectifs affichés de la page (section 3.7) |
| `definition` | une définition |
| `regle` | une règle, un principe essentiel |
| `methode` | une méthode, une procédure |
| `etape` | une étape d’une méthode ou d’un raisonnement |
| `exemple` | un exemple |
| `schema` | un schéma ou une illustration porteuse de sens |
| `tableau` | un tableau important |
| `exercice` | une mise en situation, une auto-vérification, une question |
| `vigilance` | un point de vigilance, une confusion fréquente |
| `synthese` | un encadré « À retenir », une synthèse |

**Un identifiant repère un passage, rien de plus.** Il ne prouve pas qu’un apprenant l’a étudié ou maîtrisé, et un lien direct ne donne aucun accès : SOMA vérifie toujours que la personne a le droit d’ouvrir la formation et le cours.

### 3.7 Métadonnées pédagogiques légères (facultatives)

SOMA connaît déjà, sans rien ajouter à la page, le titre (`<title>`), le chapitre (`soma-chapitre`) et l’ordre (manifeste `soma-cours.json`) ; et, dans ses propres données, la formation et son niveau, le parcours, le cours, ses niveaux de départ et visé, sa durée et son volume horaire. **Ne répétez pas ces informations dans la page.** Trois informations facultatives peuvent s’y ajouter, pour la recherche et pour rattacher demain une question à une notion :

| Information | Où et comment | Règle |
| --- | --- | --- |
| Mots-clés | `<meta name="soma-mots-cles" content="…">` dans `<head>` | 3 à 8 termes séparés par des virgules, ceux qu’un apprenant chercherait ; inutile d’y répéter le titre ou le chapitre |
| Objectifs | Les objectifs **affichés** de la page, avec `data-soma-type="objectifs"` sur leur conteneur ; chaque objectif peut porter `data-soma-bloom="…"` | Aucune copie cachée : le texte visible fait foi. Une page sans objectifs affichés n’ajoute rien. Valeurs de `data-soma-bloom` : `memoriser`, `comprendre`, `appliquer`, `analyser`, `evaluer`, `creer` |
| Compétences | `<meta name="soma-competences" content="…">` dans `<head>` | Seulement celles d’un référentiel fourni par le formateur, code et intitulé recopiés exactement, séparés par un point-virgule ; jamais inventées |

```html
<head>
  …
  <meta name="soma-mots-cles" content="sauvegarde, règle 3-2-1, restauration">
  <meta name="soma-competences" content="B1.1 Gérer le patrimoine informatique">
</head>
…
<section class="encadre objectifs" data-soma-type="objectifs">
  <p class="encadre-titre">Objectifs de la page</p>
  <ul>
    <li data-soma-bloom="comprendre">Expliquer la règle 3-2-1.</li>
    <li data-soma-bloom="analyser">Repérer une sauvegarde mal protégée.</li>
  </ul>
</section>
```

Ces métadonnées ne s’affichent pas et n’imposent rien : une page sans elles reste valable, et les cours existants n’ont rien à changer. Elles complètent les identifiants et `data-soma-type` de la section 3.6, qui restent la base du repérage.

## 4. Bac à idées : illustrations

**Ces modèles sont un bac à idées, pas un catalogue imposé.** Inspirez-vous-en, combinez-les, transformez-les ou dessinez vos propres schémas : le meilleur est souvent celui qui est inventé pour le sujet. Chaque modèle est affiché tel qu’il apparaîtra dans SOMA, puis donné en code. Les schémas sont des **SVG intégrés** dans la page, sans fichier ni ressource externe. Les conseils suivants valent pour tout schéma, repris ou créé :

- **Taille** : un `viewBox` de 520 unités de large au plus (plus il est étroit, plus le texte reste lisible sur téléphone), avec `width` et `height` égaux à ses dimensions : sur ordinateur, 1 unité = 1 pixel ; sur téléphone, une règle comme `.schema svg { max-width: 100%; height: auto }` (présente dans le socle) réduit le schéma à la largeur de l’écran.
- **Texte** : 15 à 19 unités, 3 à 4 mots par forme au plus. Le texte rétrécit avec le schéma : au-delà de 4 éléments côte à côte, préférez la version HTML (cartes, étapes) qui se réorganise sur téléphone.
- **Accessibilité** : `role="img"` et un `aria-label` qui dit tout ce que montre le schéma, plus une `<figcaption>` visible.
- **Couleurs** : texte foncé (`#172033`) sur un fond très pâle, ou texte blanc sur une couleur franche ; jamais de texte sur une teinte moyenne claire. Détail et palette en 7.2.
- **Construction** : formes simples (`rect`, `circle`, `line`, `path`, `polygon`, `text`) ; flèches dessinées avec un `polygon`. Si vous utilisez `<marker>` ou un dégradé, donnez-lui un `id` unique dans toute la page, préfixé par `svg-` pour le distinguer des points de référence (section 3.6).

### 4.1 Processus en étapes

Pour montrer un ordre, une méthode ou une procédure, en 3 ou 4 étapes.

```html
<figure class="schema">
  <svg viewBox="0 0 428 112" width="428" height="112" role="img" aria-label="Processus en quatre étapes : 1. Observer, 2. Analyser, 3. Agir, 4. Vérifier." font-family="system-ui, sans-serif">
    <g fill="#eef2ff" stroke="#6366f1" stroke-width="2">
      <rect x="2" y="30" width="88" height="70" rx="14" />
      <rect x="114" y="30" width="88" height="70" rx="14" />
      <rect x="226" y="30" width="88" height="70" rx="14" />
      <rect x="338" y="30" width="88" height="70" rx="14" />
    </g>
    <g stroke="#64748b" stroke-width="3">
      <line x1="94" y1="65" x2="104" y2="65" />
      <line x1="206" y1="65" x2="216" y2="65" />
      <line x1="318" y1="65" x2="328" y2="65" />
    </g>
    <g fill="#64748b">
      <polygon points="111,65 102,59 102,71" />
      <polygon points="223,65 214,59 214,71" />
      <polygon points="335,65 326,59 326,71" />
    </g>
    <g fill="#4f46e5">
      <circle cx="46" cy="30" r="15" />
      <circle cx="158" cy="30" r="15" />
      <circle cx="270" cy="30" r="15" />
      <circle cx="382" cy="30" r="15" />
    </g>
    <g fill="#ffffff" font-size="15" font-weight="700" text-anchor="middle">
      <text x="46" y="35">1</text>
      <text x="158" y="35">2</text>
      <text x="270" y="35">3</text>
      <text x="382" y="35">4</text>
    </g>
    <g fill="#172033" font-size="17" font-weight="600" text-anchor="middle">
      <text x="46" y="78">Observer</text>
      <text x="158" y="78">Analyser</text>
      <text x="270" y="78">Agir</text>
      <text x="382" y="78">Vérifier</text>
    </g>
  </svg>
  <figcaption>Résoudre un problème en quatre étapes.</figcaption>
</figure>
```

### 4.2 Cycle

Pour une démarche qui se répète : amélioration continue, cycle de vie, saisons, routine de travail.

```html
<figure class="schema">
  <svg viewBox="0 0 400 320" width="400" height="320" role="img" aria-label="Cycle d'amélioration continue en quatre étapes qui se répètent : Planifier, puis Réaliser, puis Vérifier, puis Ajuster, avant de planifier à nouveau." font-family="system-ui, sans-serif">
    <g fill="none" stroke="#64748b" stroke-width="3">
      <path d="M266 62.2 A118 118 0 0 1 303.2 102.8" />
      <path d="M307.8 208 A118 118 0 0 1 274.3 251.7" />
      <path d="M134 257.8 A118 118 0 0 1 96.8 217.2" />
      <path d="M92.2 112 A118 118 0 0 1 125.7 68.3" />
    </g>
    <g fill="#64748b">
      <polygon points="307.8,112 293.1,99.5 304.8,91.9" />
      <polygon points="266,257.8 275.7,241.2 285.2,251.4" />
      <polygon points="92.2,208 106.9,220.5 95.2,228.1" />
      <polygon points="134,62.2 124.3,78.8 114.8,68.6" />
    </g>
    <rect x="144" y="20" width="112" height="44" rx="12" fill="#4f46e5" />
    <rect x="262" y="138" width="112" height="44" rx="12" fill="#0369a1" />
    <rect x="144" y="256" width="112" height="44" rx="12" fill="#047857" />
    <rect x="26" y="138" width="112" height="44" rx="12" fill="#b45309" />
    <g fill="#ffffff" font-size="17" font-weight="700" text-anchor="middle">
      <text x="200" y="48">Planifier</text>
      <text x="318" y="166">Réaliser</text>
      <text x="200" y="284">Vérifier</text>
      <text x="82" y="166">Ajuster</text>
    </g>
    <g fill="#172033" font-size="16" font-weight="600" text-anchor="middle">
      <text x="200" y="155">Amélioration</text>
      <text x="200" y="176">continue</text>
    </g>
  </svg>
  <figcaption>La roue de l'amélioration continue : on recommence à chaque tour.</figcaption>
</figure>
```

### 4.3 Comparaison en deux colonnes

Pour opposer deux notions proches sur les mêmes critères. Pour des phrases plus longues, utilisez les deux colonnes en HTML (5.5).

```html
<figure class="schema">
  <svg viewBox="0 0 480 230" width="480" height="230" role="img" aria-label="Comparaison. Sauvegarde : but restaurer, fréquence élevée, durée courte. Archivage : but conserver, fréquence faible, durée longue." font-family="system-ui, sans-serif">
    <rect x="4" y="4" width="220" height="44" rx="12" fill="#4f46e5" />
    <rect x="256" y="4" width="220" height="44" rx="12" fill="#047857" />
    <rect x="4" y="56" width="220" height="168" rx="12" fill="#eef2ff" stroke="#6366f1" stroke-width="2" />
    <rect x="256" y="56" width="220" height="168" rx="12" fill="#ecfdf5" stroke="#10b981" stroke-width="2" />
    <g fill="#ffffff" font-size="18" font-weight="700" text-anchor="middle">
      <text x="114" y="32">Sauvegarde</text>
      <text x="366" y="32">Archivage</text>
    </g>
    <g fill="#172033" font-size="16" text-anchor="middle">
      <text x="114" y="98"><tspan font-weight="700">But :</tspan> restaurer</text>
      <text x="114" y="146"><tspan font-weight="700">Fréquence :</tspan> élevée</text>
      <text x="114" y="194"><tspan font-weight="700">Durée :</tspan> courte</text>
      <text x="366" y="98"><tspan font-weight="700">But :</tspan> conserver</text>
      <text x="366" y="146"><tspan font-weight="700">Fréquence :</tspan> faible</text>
      <text x="366" y="194"><tspan font-weight="700">Durée :</tspan> longue</text>
    </g>
    <circle cx="240" cy="140" r="18" fill="#ffffff" stroke="#94a3b8" stroke-width="2" />
    <text x="240" y="148" fill="#172033" font-size="22" font-weight="700" text-anchor="middle">≠</text>
  </svg>
  <figcaption>Sauvegarde et archivage : deux besoins différents.</figcaption>
</figure>
```

### 4.4 Frise chronologique

Pour situer 3 à 5 évènements dans le temps. Vérifiez chaque date dans une source fiable.

```html
<figure class="schema">
  <svg viewBox="0 0 520 132" width="520" height="132" role="img" aria-label="Frise chronologique : 1969, premier lien du réseau ARPANET ; 1989, proposition du Web au CERN ; 1993, le Web devient libre d'accès ; 2007, l'Internet mobile s'étend." font-family="system-ui, sans-serif">
    <line x1="20" y1="60" x2="492" y2="60" stroke="#64748b" stroke-width="4" />
    <polygon points="508,60 490,51 490,69" fill="#64748b" />
    <g fill="#4f46e5" stroke="#ffffff" stroke-width="3">
      <circle cx="65" cy="60" r="10" />
      <circle cx="190" cy="60" r="10" />
      <circle cx="315" cy="60" r="10" />
      <circle cx="440" cy="60" r="10" />
    </g>
    <g fill="#4338ca" font-size="19" font-weight="800" text-anchor="middle">
      <text x="65" y="36">1969</text>
      <text x="190" y="36">1989</text>
      <text x="315" y="36">1993</text>
      <text x="440" y="36">2007</text>
    </g>
    <g fill="#172033" font-size="15" text-anchor="middle">
      <text x="65" y="98">Premier lien</text>
      <text x="65" y="118">ARPANET</text>
      <text x="190" y="98">Proposition</text>
      <text x="190" y="118">du Web (CERN)</text>
      <text x="315" y="98">Le Web devient</text>
      <text x="315" y="118">libre d'accès</text>
      <text x="440" y="98">L'Internet</text>
      <text x="440" y="118">mobile s'étend</text>
    </g>
  </svg>
  <figcaption>Quelques jalons de l'histoire d'Internet et du Web.</figcaption>
</figure>
```

### 4.5 Carte mentale

Pour organiser les idées autour d’un thème central : introduction d’un chapitre, page de synthèse.

```html
<figure class="schema">
  <svg viewBox="0 0 480 300" width="480" height="300" role="img" aria-label="Carte mentale : la sécurité informatique repose sur quatre piliers, les sauvegardes, les mots de passe, les mises à jour et la sensibilisation." font-family="system-ui, sans-serif">
    <g stroke-width="4" stroke-linecap="round">
      <line x1="240" y1="150" x2="95" y2="52" stroke="#0369a1" />
      <line x1="240" y1="150" x2="385" y2="52" stroke="#7c3aed" />
      <line x1="240" y1="150" x2="95" y2="248" stroke="#047857" />
      <line x1="240" y1="150" x2="385" y2="248" stroke="#b45309" />
    </g>
    <rect x="15" y="28" width="160" height="48" rx="24" fill="#f0f9ff" stroke="#0369a1" stroke-width="2" />
    <rect x="305" y="28" width="160" height="48" rx="24" fill="#faf5ff" stroke="#7c3aed" stroke-width="2" />
    <rect x="15" y="224" width="160" height="48" rx="24" fill="#ecfdf5" stroke="#047857" stroke-width="2" />
    <rect x="305" y="224" width="160" height="48" rx="24" fill="#fffbeb" stroke="#b45309" stroke-width="2" />
    <rect x="160" y="118" width="160" height="64" rx="32" fill="#4f46e5" />
    <g fill="#172033" font-size="16" font-weight="600" text-anchor="middle">
      <text x="95" y="58">Sauvegardes</text>
      <text x="385" y="58">Mots de passe</text>
      <text x="95" y="254">Mises à jour</text>
      <text x="385" y="254">Sensibilisation</text>
    </g>
    <g fill="#ffffff" font-size="17" font-weight="700" text-anchor="middle">
      <text x="240" y="146">Sécurité</text>
      <text x="240" y="167">informatique</text>
    </g>
  </svg>
  <figcaption>Une idée centrale et ses quatre branches.</figcaption>
</figure>
```

### 4.6 Arborescence

Pour une hiérarchie ou une classification : organisation, familles, plan d’un document.

```html
<figure class="schema">
  <svg viewBox="0 0 520 240" width="520" height="240" role="img" aria-label="Arborescence : un cours contient trois chapitres, Découvrir, Comprendre et Pratiquer ; chaque chapitre contient deux pages." font-family="system-ui, sans-serif">
    <g fill="none" stroke="#94a3b8" stroke-width="2.5">
      <path d="M260 50 V73 H90 V96 M260 73 H430 V96 M260 73 V96" />
      <path d="M90 136 V166 H52 V196 M90 166 H128 V196" />
      <path d="M260 136 V166 H222 V196 M260 166 H298 V196" />
      <path d="M430 136 V166 H392 V196 M430 166 H468 V196" />
    </g>
    <rect x="200" y="6" width="120" height="44" rx="12" fill="#4f46e5" />
    <text x="260" y="34" fill="#ffffff" font-size="18" font-weight="700" text-anchor="middle">Cours</text>
    <g fill="#eef2ff" stroke="#6366f1" stroke-width="2">
      <rect x="20" y="96" width="140" height="40" rx="12" />
      <rect x="190" y="96" width="140" height="40" rx="12" />
      <rect x="360" y="96" width="140" height="40" rx="12" />
    </g>
    <g fill="#ffffff" stroke="#94a3b8" stroke-width="2">
      <rect x="18" y="196" width="68" height="36" rx="10" />
      <rect x="94" y="196" width="68" height="36" rx="10" />
      <rect x="188" y="196" width="68" height="36" rx="10" />
      <rect x="264" y="196" width="68" height="36" rx="10" />
      <rect x="358" y="196" width="68" height="36" rx="10" />
      <rect x="434" y="196" width="68" height="36" rx="10" />
    </g>
    <g fill="#172033" font-size="16" font-weight="600" text-anchor="middle">
      <text x="90" y="122">Découvrir</text>
      <text x="260" y="122">Comprendre</text>
      <text x="430" y="122">Pratiquer</text>
    </g>
    <g fill="#172033" font-size="15" text-anchor="middle">
      <text x="52" y="219">Page 1</text>
      <text x="128" y="219">Page 2</text>
      <text x="222" y="219">Page 3</text>
      <text x="298" y="219">Page 4</text>
      <text x="392" y="219">Page 5</text>
      <text x="468" y="219">Page 6</text>
    </g>
  </svg>
  <figcaption>Un cours, ses chapitres et leurs pages.</figcaption>
</figure>
```

### 4.7 Pyramide

Pour des niveaux qui s’appuient les uns sur les autres, de la base au sommet.

```html
<figure class="schema">
  <svg viewBox="0 0 440 290" width="440" height="290" role="img" aria-label="Pyramide en quatre niveaux, de la base au sommet : données, informations, connaissances, décision. Chaque niveau s'appuie sur celui du dessous." font-family="system-ui, sans-serif">
    <polygon points="160,20 280,20 316.3,83 123.7,83" fill="#b45309" />
    <polygon points="121.3,87 318.7,87 353.8,148 86.2,148" fill="#7c3aed" />
    <polygon points="83.8,152 356.2,152 391.3,213 48.7,213" fill="#4f46e5" />
    <polygon points="46.3,217 393.7,217 430,280 10,280" fill="#0369a1" />
    <g fill="#ffffff" font-size="17" font-weight="700" text-anchor="middle">
      <text x="220" y="57.5">Décision</text>
      <text x="220" y="123.5">Connaissances</text>
      <text x="220" y="188.5">Informations</text>
      <text x="220" y="254.5">Données</text>
    </g>
  </svg>
  <figcaption>Des données à la décision : chaque niveau s'appuie sur celui du dessous.</figcaption>
</figure>
```

### 4.8 Entonnoir

Pour une sélection progressive : recrutement, prospection, tri d’informations. Indiquez si les valeurs sont fictives.

```html
<figure class="schema">
  <svg viewBox="0 0 440 258" width="440" height="258" role="img" aria-label="Entonnoir, exemple fictif : 1 000 visiteurs du site, puis 200 prospects, puis 50 clients, puis 20 clients fidèles." font-family="system-ui, sans-serif">
    <polygon points="20,8 420,8 383.9,64 56.1,64" fill="#4f46e5" />
    <polygon points="60,70 380,70 343.9,126 96.1,126" fill="#4338ca" />
    <polygon points="100,132 340,132 303.9,188 136.1,188" fill="#3730a3" />
    <polygon points="140,194 300,194 263.9,250 176.1,250" fill="#312e81" />
    <g fill="#ffffff" font-size="16" font-weight="600" text-anchor="middle">
      <text x="220" y="42">Visiteurs du site · 1 000</text>
      <text x="220" y="104">Prospects · 200</text>
      <text x="220" y="166">Clients · 50</text>
      <text x="220" y="228">Fidèles · 20</text>
    </g>
  </svg>
  <figcaption>Exemple fictif : à chaque étape, il reste moins de monde.</figcaption>
</figure>
```

### 4.9 Tableau comparatif

Pour comparer plusieurs options selon plusieurs critères. Quatre colonnes au plus ; le conteneur `.tableau` fait défiler le tableau sur un petit écran au lieu de déborder.

```html
<div class="tableau">
  <table>
    <caption>Comparer trois supports de sauvegarde</caption>
    <thead>
      <tr><th scope="col">Critère</th><th scope="col">Disque externe</th><th scope="col">Serveur de stockage (NAS)</th><th scope="col">Service en ligne</th></tr>
    </thead>
    <tbody>
      <tr><th scope="row">Coût de départ</th><td>Faible</td><td>Moyen</td><td>Faible, puis abonnement</td></tr>
      <tr><th scope="row">Copie hors du bâtiment</th><td>Seulement si on l'emporte</td><td>Non</td><td>Oui</td></tr>
      <tr><th scope="row">Sauvegarde automatique</th><td>Souvent manuelle</td><td>Oui</td><td>Oui</td></tr>
      <tr><th scope="row">Besoin d'Internet</th><td>Non</td><td>Non</td><td>Oui</td></tr>
    </tbody>
  </table>
</div>
```

### 4.10 Chiffres clés

Pour mettre en valeur un ou deux chiffres, avec une jauge facultative. Un chiffre réel est toujours accompagné de sa source et de son année.

```html
<div class="chiffres">
  <div class="chiffre-cle">
    <p class="chiffre">3</p>
    <div>
      <p><strong>copies</strong> de chaque fichier important, dont une hors du bâtiment.</p>
      <p class="source">Règle de sauvegarde « 3-2-1 ».</p>
    </div>
  </div>
  <div class="chiffre-cle">
    <svg viewBox="0 0 120 120" width="120" height="120" role="img" aria-label="Jauge : 80 % de l'objectif atteint." font-family="system-ui, sans-serif">
      <circle cx="60" cy="60" r="50" fill="none" stroke="#e0e7ff" stroke-width="12" />
      <circle cx="60" cy="60" r="50" fill="none" stroke="#4f46e5" stroke-width="12" stroke-linecap="round" stroke-dasharray="251.3 314.2" transform="rotate(-90 60 60)" />
      <text x="60" y="68" fill="#172033" font-size="24" font-weight="800" text-anchor="middle">80 %</text>
    </svg>
    <div>
      <p><strong>de l'objectif atteint</strong> à la fin du premier trimestre.</p>
      <p class="source">Valeur d'exemple : citez toujours la source et l'année d'un chiffre réel.</p>
    </div>
  </div>
</div>
```

## 5. Bac à idées : composants pédagogiques

Ces composants reprennent la forme de vrais cours produits pour SOMA : titres avec émoji, encadrés colorés, cartes, schémas, mises en situation et questions à déplier. **Ce sont des idées, pas des passages obligés** : utilisez-les, transformez-les ou inventez les vôtres (frise interactive, carte à retourner, simulateur, tri par glisser-déposer…), en HTML, CSS, SVG et JavaScript en ligne compatibles avec le lecteur (section 7). Ils s’appuient sur le socle CSS proposé (1.5) : avec ce socle, copiez seulement le HTML ; sans lui, reprenez aussi leurs règles CSS ou écrivez les vôtres.

### 5.1 En-tête de page et objectifs

Un début de page possible : repère de chapitre (même texte que `soma-chapitre`), titre, chapô et objectifs, à garder, réordonner ou alléger selon la page.

```html
<p class="repere">Chapitre · Comprendre</p>
<h1><span aria-hidden="true">🔁</span> Appliquez la règle 3-2-1</h1>
<p class="chapo">Une seule copie de vos fichiers ne suffit pas. Découvrez comment organiser vos sauvegardes pour ne jamais tout perdre.</p>
<section class="encadre objectifs" data-soma-type="objectifs">
  <p class="encadre-titre"><span aria-hidden="true">🎯</span> Objectifs de la page</p>
  <ul>
    <li data-soma-bloom="comprendre">Expliquer la règle 3-2-1.</li>
    <li data-soma-bloom="appliquer">Choisir deux supports de sauvegarde différents.</li>
    <li data-soma-bloom="analyser">Repérer une sauvegarde mal protégée.</li>
  </ul>
</section>
```

### 5.2 Encadrés

Définition d’un terme nouveau, exemple concret, mise en garde, analogie, et l’encadré « À retenir » qui peut conclure une page. Un ou deux encadrés par section suffisent en général.

```html
<aside class="encadre definition">
  <p class="encadre-titre"><span aria-hidden="true">📖</span> Définition</p>
  <p><dfn>Sauvegarde</dfn> : copie de données conservée sur un autre support, pour pouvoir les restaurer après un incident.</p>
</aside>

<aside class="encadre exemple">
  <p class="encadre-titre"><span aria-hidden="true">💡</span> Exemple</p>
  <p>Chaque soir, un cabinet comptable copie ses dossiers sur son serveur interne, puis chaque semaine vers un service en ligne.</p>
</aside>

<aside class="encadre attention">
  <p class="encadre-titre"><span aria-hidden="true">⚠️</span> Attention</p>
  <p>Une sauvegarde jamais testée n'est pas une sauvegarde : vérifiez régulièrement que vous savez restaurer un fichier.</p>
</aside>

<aside class="encadre analogie">
  <p class="encadre-titre"><span aria-hidden="true">🔑</span> Pour mieux comprendre</p>
  <p>Une sauvegarde, c'est comme le double de vos clés confié à un voisin : inutile au quotidien, précieux le jour où vous perdez les vôtres.</p>
</aside>

<aside class="encadre retenir">
  <p class="encadre-titre"><span aria-hidden="true">✅</span> À retenir</p>
  <p>3 copies, sur 2 supports différents, dont 1 hors du bâtiment.</p>
</aside>
```

### 5.3 Cartes

Pour présenter 2 à 6 éléments de même rang. La grille passe seule sur une colonne sur téléphone.

```html
<div class="cartes">
  <article class="carte">
    <span class="carte-icone" aria-hidden="true">💽</span>
    <h3>Disque externe</h3>
    <p>Simple et peu coûteux, mais il faut penser à le brancher et à le ranger ailleurs.</p>
  </article>
  <article class="carte">
    <span class="carte-icone" aria-hidden="true">🗄️</span>
    <h3>Serveur de stockage</h3>
    <p>Sauvegarde automatique de tous les postes, mais il reste dans les locaux.</p>
  </article>
  <article class="carte">
    <span class="carte-icone" aria-hidden="true">☁️</span>
    <h3>Service en ligne</h3>
    <p>Copie hors du bâtiment, mais elle dépend d'Internet et d'un abonnement.</p>
  </article>
</div>
```

### 5.4 Étapes (version HTML)

Une procédure numérotée qui se réorganise sur téléphone. À préférer au schéma 4.1 dès que les étapes comptent plus de quatre mots.

```html
<ol class="etapes">
  <li><strong>Lister</strong> les données importantes</li>
  <li><strong>Choisir</strong> deux supports différents</li>
  <li><strong>Programmer</strong> une sauvegarde automatique</li>
  <li><strong>Tester</strong> une restauration chaque mois</li>
</ol>
```

### 5.5 Deux colonnes (version HTML)

Avantages et limites, avant et après, ce qu’il faut faire et ne pas faire. Les colonnes s’empilent sur téléphone.

```html
<div class="deux-colonnes">
  <div>
    <h3><span aria-hidden="true">👍</span> Points forts</h3>
    <ul>
      <li>La copie est hors du bâtiment.</li>
      <li>La sauvegarde peut être automatique.</li>
    </ul>
  </div>
  <div>
    <h3><span aria-hidden="true">👎</span> Limites</h3>
    <ul>
      <li>Il faut une connexion à Internet.</li>
      <li>L'abonnement est payé chaque année.</li>
    </ul>
  </div>
</div>
```

### 5.6 Question d’auto-vérification à déplier

Une question, la réponse cachée sous un clic. Aucun JavaScript : la balise `<details>` suffit.

```html
<details class="verif">
  <summary>Une clé USB rangée à côté de l'ordinateur respecte-t-elle la règle 3-2-1 ?</summary>
  <p>Non : il manque la copie <strong>hors du bâtiment</strong>. Un vol ou un dégât des eaux emporterait l'ordinateur et la clé en même temps.</p>
</details>
```

### 5.7 Mise en situation

Un cas court et réaliste, une question ouverte, une réponse possible à déplier.

```html
<section class="situation">
  <p class="situation-titre"><span aria-hidden="true">🧩</span> Mise en situation</p>
  <p>Léa gère les fichiers d'une petite association. Une fois par mois, elle copie tout sur un disque externe qu'elle laisse branché sur son ordinateur.</p>
  <p><strong>Quels risques voyez-vous ? Que lui conseillez-vous ?</strong></p>
  <details class="verif">
    <summary>Voir une réponse possible</summary>
    <p>Le disque reste dans le même bureau et branché en permanence : un vol, un incendie ou un virus toucherait les deux copies. Léa peut sauvegarder chaque semaine, débrancher le disque après la copie et ajouter une copie hors du bâtiment.</p>
  </details>
</section>
```

### 5.8 Question à choix avec correction (JavaScript)

Correction immédiate et explication. Rien n’est noté ni enregistré : c’est un entraînement. Le script gère toutes les questions de la page, où qu’il soit placé : mettez-le une seule fois, de préférence juste avant `</body>`.

```html
<div class="question" data-question>
  <p class="situation-titre"><span aria-hidden="true">🧠</span> Combien de copies d'un fichier la règle 3-2-1 recommande-t-elle ?</p>
  <div class="choix">
    <button type="button">Une seule, bien rangée</button>
    <button type="button" data-juste>Trois copies</button>
    <button type="button">Deux copies sur le même disque</button>
  </div>
  <p class="retour" aria-live="polite"></p>
  <p class="explication" hidden>L'original et deux sauvegardes, sur deux supports différents, dont une hors du bâtiment.</p>
</div>

<script>
  // Questions d'auto-vérification : rien n'est noté ni enregistré.
  document.addEventListener("click", function (evenement) {
    var bouton = evenement.target.closest("[data-question] .choix button");
    if (!bouton) return;
    var question = bouton.closest("[data-question]");
    if (question.dataset.repondu) return;
    question.dataset.repondu = "oui";
    var juste = bouton.hasAttribute("data-juste");
    bouton.classList.add(juste ? "juste" : "faux");
    question.querySelector("[data-juste]").classList.add("juste");
    question.querySelector(".retour").textContent = juste
      ? "✅ Bonne réponse."
      : "❌ Pas tout à fait : la bonne réponse est en vert.";
    var explication = question.querySelector(".explication");
    if (explication) explication.hidden = false;
  });
</script>
```

### 5.9 Mise en situation à choix (JavaScript)

L’apprenant choisit une décision et découvre sa conséquence ; il peut essayer les autres choix. Idéal pour une page de pratique. Comme pour 5.8, un seul exemplaire du script suffit pour toute la page.

```html
<section class="scenario" data-scenario>
  <p class="situation-titre"><span aria-hidden="true">🧩</span> À vous de décider</p>
  <p>Lundi matin, le disque de l'ordinateur de la comptabilité ne démarre plus. La dernière sauvegarde date de vendredi soir.</p>
  <p><strong>Que faites-vous en premier ?</strong></p>
  <div class="choix">
    <button type="button" data-ton="juste" data-retour="Bon réflexe : l'activité reprend vite et vous ne perdez que le travail de lundi matin.">Restaurer la sauvegarde de vendredi sur un autre ordinateur</button>
    <button type="button" data-ton="moyen" data-retour="Risqué : une mauvaise manipulation peut rendre les données irrécupérables. Restaurez d'abord, réparez ensuite.">Essayer de réparer le disque soi-même</button>
    <button type="button" data-ton="faux" data-retour="Le temps passe et l'activité est bloquée : la sauvegarde existe justement pour ce cas.">Attendre que le disque redémarre</button>
  </div>
  <p class="retour" aria-live="polite"></p>
</section>

<script>
  // Mises en situation : chaque choix affiche sa conséquence ; on peut en essayer un autre.
  document.addEventListener("click", function (evenement) {
    var bouton = evenement.target.closest("[data-scenario] .choix button");
    if (!bouton) return;
    var scenario = bouton.closest("[data-scenario]");
    scenario.querySelectorAll(".choix button").forEach(function (autre) {
      autre.classList.remove("juste", "moyen", "faux");
    });
    bouton.classList.add(bouton.dataset.ton);
    scenario.querySelector(".retour").textContent = bouton.dataset.retour;
  });
</script>
```

## 6. Adapter au niveau

Dans SOMA, chaque formation a un **niveau de qualification** — « Non applicable », ou l’un des niveaux 3 à 8 du cadre national des certifications professionnelles — et chaque cours a un **niveau de départ** et un **niveau visé**. Quand la formation s’appuie sur une certification RNCP, son niveau est celui de la fiche officielle. Les consignes que SOMA donne à l’IA les précisent ; s’ils manquent, ou si le niveau est « à préciser », demandez-les au formateur.

### 6.1 Le niveau de la formation

| Niveau | Public | Vocabulaire et phrases | Exemples | Guidage et ton |
| --- | --- | --- | --- | --- |
| Non applicable | Formation sans niveau de qualification défini : sensibilisation, formation courte, grand public | Celui du public visé et de ses prérequis ; à défaut, langage clair, aucun jargon sans explication | Tirés de la situation du public visé | Demandez le public au formateur s’il n’est pas décrit ; une idée à la fois |
| Niveau 3 — CAP / BEP | Futurs ouvriers ou employés qualifiés | Mots simples et concrets, chaque terme technique défini | Gestes et situations du métier, objets réels | Très guidé, étapes numérotées, une consigne à la fois |
| Niveau 4 — Baccalauréat | Lycéens, bacheliers généraux, technologiques ou professionnels, techniciens | Vocabulaire de la discipline introduit puis employé | Situations concrètes, premiers cas professionnels ou citoyens | Guidage progressif, de plus en plus d’autonomie |
| Niveau 5 — Bac +2 | BTS, DUT, deux premières années de BUT, titres de technicien supérieur | Vocabulaire technique précis, rigueur | Mises en situation professionnelles, cas d’entreprise, normes et textes de référence | Autonomie, choix à justifier |
| Niveau 6 — Bac +3 / Bac +4 | Licence, BUT, bachelor, titres de niveau 6 | Vocabulaire spécialisé maîtrisé | Cas complexes, analyse de situations, projets | Analyse et argumentation, grande autonomie |
| Niveau 7 — Bac +5 | Master, diplôme d’ingénieur, titres de niveau 7 | Langage expert, concepts abstraits | Études de cas stratégiques, conception, recherche appliquée | Prise de recul, esprit critique, décisions à justifier |
| Niveau 8 — Doctorat | Doctorants, chercheurs | Langage scientifique | Littérature de recherche, problèmes ouverts | Production de connaissances, débat, rigueur méthodologique |

### 6.2 Une même notion, plusieurs publics

La notion de sauvegarde, expliquée selon le niveau :

| Niveau | Formulation |
| --- | --- |
| Non applicable (grand public) | « Sauvegarder, c’est faire une copie de vos photos et documents importants sur un disque ou un service en ligne, pour ne pas les perdre si votre téléphone est volé ou cassé. » |
| Non applicable (salariés, formation courte) | « Si le serveur de facturation tombe ce soir, combien de jours de travail perdez-vous ? Une sauvegarde quotidienne, testée chaque mois, limite la perte à une journée au plus. » |
| Niveau 3 | « Une sauvegarde, c’est une copie des fichiers rangée sur un autre appareil. Si l’ordinateur tombe en panne, on retrouve le travail grâce à cette copie. » |
| Niveau 4 | « Une sauvegarde est une copie des données conservée sur un autre support. Elle permet de les restaurer après une panne, une erreur de manipulation ou un virus. » |
| Niveau 5 | « La sauvegarde duplique les données sur un support distinct pour permettre leur restauration après un incident (défaillance matérielle, suppression, rançongiciel). Sa politique fixe une fréquence, une durée de conservation et des objectifs de reprise. » |
| Niveau 7 | « La stratégie de sauvegarde découle de l’analyse des risques : les objectifs de perte et de durée d’interruption admissibles (RPO, RTO) déterminent l’architecture, son coût et la fréquence des tests de restauration. » |

### 6.3 Du niveau de départ au niveau visé

| Niveau | Ce que sait l’apprenant | Ce que contiennent les pages | Verbes d’objectifs |
| --- | --- | --- | --- |
| Découverte | Aucune connaissance préalable : il découvre le sujet et son vocabulaire. | Définitions, exemples simples, schémas, auto-vérifications courtes | citer, reconnaître, définir |
| Fondamentaux | Les bases sont posées : il maîtrise l’essentiel et les gestes courants. | Méthodes pas à pas, exercices guidés, erreurs fréquentes | expliquer, appliquer, réaliser |
| Intermédiaire | Il applique avec aisance et traite des cas moins guidés. | Cas variés, comparaisons d’options, mises en situation | analyser, comparer, choisir |
| Avancé | Il maîtrise les cas complexes, justifie et transmet. | Cas complexes, arbitrages, limites et exceptions | évaluer, justifier, concevoir |

- **Partez du niveau de départ** : ne supposez aucune connaissance au-delà, définissez chaque terme nouveau à sa première apparition.
- **Montez en difficulté au fil du cours** : en général, les dernières pages mettent en pratique le niveau visé (cas, mises en situation).
- **Ne dépassez pas le niveau visé** : ce qui relève d’un niveau supérieur peut être signalé comme une piste, sans être développé.
- **Grand écart** (de Découverte à Avancé) : prévoyez plus de pages et des chapitres progressifs. **Même niveau au départ et à l’arrivée** : consolidez par des cas variés plutôt que par de nouvelles notions.

#### Exemple : deux cours sur la sauvegarde

**De Découverte à Fondamentaux**

1. 🧭 Découvrez à quoi sert une sauvegarde
2. 📖 Distinguez copie, synchronisation et sauvegarde
3. 🔁 Appliquez la règle 3-2-1
4. 🛠️ Programmez une sauvegarde automatique
5. 🧾 Retenez l’essentiel du cours

**D’Intermédiaire à Avancé**

1. ⚖️ Choisissez une stratégie de sauvegarde
2. 🎯 Fixez des objectifs de reprise
3. 🛡️ Protégez vos sauvegardes d’un rançongiciel
4. 🧪 Testez une restauration complète
5. 📝 Rédigez une politique de sauvegarde
6. 🧾 Retenez l’essentiel du cours

### 6.4 Varier les objectifs : la taxonomie de Bloom

La **taxonomie de Bloom** (proposée en 1956, révisée en 2001 par Anderson et Krathwohl) est un cadre pédagogique reconnu qui classe les opérations cognitives en **six catégories** : mémoriser, comprendre, appliquer, analyser, évaluer et créer. **Servez-vous-en pour choisir et formuler les objectifs** : retenez les catégories qui correspondent aux objectifs du cours et au niveau attendu, sans chercher à les couvrir toutes.

1. 1**Mémoriser**Identifier les composants d’un ordinateur
2. 2**Comprendre**Expliquer le rôle de la mémoire RAM
3. 3**Appliquer**Installer correctement une barrette RAM
4. 4**Analyser**Diagnostiquer une panne mémoire
5. 5**Évaluer**Comparer plusieurs solutions techniques
6. 6**Créer**Concevoir une solution matérielle adaptée

| Catégorie | Verbes d’objectif | Ce que la page propose |
| --- | --- | --- |
| Mémoriser | citer, identifier, reconnaître, définir, nommer | Définitions, schéma légendé, auto-vérification « retrouvez le nom » |
| Comprendre | expliquer, reformuler, illustrer, classer, résumer | Analogies, exemples et contre-exemples, schéma de fonctionnement |
| Appliquer | utiliser, réaliser, installer, calculer, paramétrer | Procédure pas à pas, cas guidé, erreurs fréquentes à éviter |
| Analyser | diagnostiquer, distinguer, décomposer, comparer des causes | Étude de cas, arbre des causes, mise en situation à choix |
| Évaluer | justifier, comparer des solutions, choisir, critiquer, argumenter | Tableau comparatif à interpréter, choix argumenté, critères de décision |
| Créer | concevoir, élaborer, rédiger, planifier, proposer | Mini-production : plan, schéma, procédure, petite solution à imaginer |

- **Formulez chaque objectif avec un verbe de la catégorie visée** (« Diagnostiquer une panne mémoire », plutôt que « Connaître les pannes ») : l’objectif dit ce que l’apprenant saura faire.
- **Choisissez les catégories selon les objectifs** : un cours de découverte peut se concentrer sur mémoriser, comprendre et appliquer ; un cours qui forme au diagnostic ou à la décision vise davantage analyser et évaluer. Il n’y a **aucun nombre minimal de catégories**.
- **Alignez les activités sur les objectifs** : si un objectif demande d’analyser, proposez une mise en situation d’analyse plutôt qu’une question de définition.
- **Un défi plus exigeant** (évaluer, créer) est bienvenu quand les objectifs le prévoient, à la mesure du public.

**Pas de correspondance rigide entre le niveau et Bloom.** Le niveau (section 6.3) règle la complexité et le guidage ; la catégorie de Bloom règle le type d’opération mentale. Les deux se combinent : même un débutant peut réaliser une petite création (« Proposez un nom de fichier clair pour votre sauvegarde »), et un cours avancé garde quelques rappels de mémorisation.

## 7. Contraintes techniques du lecteur SOMA

**Cette section est la seule obligatoire.** Elle décrit ce que le lecteur SOMA permet et empêche. Tout ce qui la respecte est permis, y compris des mises en page, des composants et des interactions qui ne figurent pas dans ce guide. Les quelques conseils qu’elle contient sont signalés comme tels.

### 7.1 Une page dans un cadre isolé

SOMA affiche chaque page dans un cadre isolé (une `iframe` en bac à sable, où les scripts sont permis mais sans accès à SOMA ni à aucune donnée du navigateur). La page doit donc se suffire à elle-même.

| Fonctionne | Ne fonctionne pas |
| --- | --- |
| CSS dans `<style>` et attributs `style` | Appels réseau : `fetch`, `XMLHttpRequest`, WebSocket |
| Scripts en ligne `<script>…</script>` | Cookies, `localStorage`, `sessionStorage`, IndexedDB (erreur de sécurité) |
| SVG intégré, images en `data:`, vidéos YouTube fournies par le formateur (`iframe` youtube-nocookie : vignette lue par SOMA) | `alert()`, `confirm()`, `prompt()` (bloqués) |
| `<details>`, boutons, animations CSS, `<canvas>` | Envoi de formulaire, ouverture d’un nouvel onglet (`target="_blank"`, `window.open`) |
| Liens internes à la page (`href="#section"`) | Liens vers un autre site ou vers une autre page du cours |
| Interactions dans la page (afficher une correction) | Mémoriser une réponse d’une visite à l’autre, renvoyer un résultat à SOMA |

**Interdit par SOMA, même si cela pouvait s’afficher** : les feuilles de style, polices, scripts, bibliothèques, images ou vidéos chargés depuis Internet (CDN, polices en ligne…), à la seule exception des vidéos YouTube intégrées que le formateur a fournies (jamais devinées par l’IA). La page doit fonctionner seule et durablement, sans dépendre d’un service tiers ni lui transmettre d’information sur les apprenants. Conseil : que le contenu essentiel reste lisible sans interaction. N’ajoutez pas de politique de sécurité (`<meta http-equiv="Content-Security-Policy">`) : une page qui interdit les scripts en ligne empêche SOMA de l’adapter au thème sombre. Ne bloquez pas le défilement (pas de `overflow: hidden` ni de `height: 100vh` sur `body`) : la page défile dans le lecteur.

### 7.2 Le thème sombre et la palette

Quand l’apprenant choisit le thème sombre, SOMA recalcule les couleurs de la page dans le lecteur, sans modifier votre fichier :

- le fond de la page devient gris très foncé ; les fonds clairs (encadrés, cartes, tableaux) deviennent sombres en gardant leur teinte ; les textes foncés deviennent clairs ;
- dans un SVG, **les couleurs franches des formes et des traits sont conservées telles quelles**, pour garder leur sens ; le blanc, les gris et les teintes très pâles sont adaptés comme le reste de la page ; les textes du SVG sont éclaircis ;
- les images (`<img>`, photos, `<canvas>`, vidéos) ne sont pas modifiées.

N’écrivez donc pas votre propre thème sombre (`prefers-color-scheme`) : c’est une contrainte. La palette ci-dessous est en revanche un conseil, qui garantit des schémas lisibles dans les deux thèmes :

| Usage | Couleurs | Texte posé dessus |
| --- | --- | --- |
| Fond pâle d’une forme | `#f8fafc` `#eef2ff` `#f0f9ff` `#ecfdf5` `#fffbeb` `#fff7ed` `#fef2f2` `#faf5ff` | Foncé : `#172033` |
| Forme de couleur franche | `#4f46e5` `#0369a1` `#047857` `#b45309` `#dc2626` `#7c3aed` `#475569` | Blanc : `#ffffff` |
| Traits et flèches | `#64748b` `#94a3b8`, ou la couleur franche de la branche | — |
| Texte hors forme | `#172033` (principal), `#475569` (secondaire), `#4338ca` (accent) | — |
| **À éviter sous du texte** | `#e0e7ff` `#c7d2fe` `#dcfce7` `#a7f3d0` `#fef3c7` `#fde68a` | Ces teintes restent claires en thème sombre alors que le texte s’éclaircit : il devient illisible |

Dans le HTML (encadrés, cartes, tableaux), toute couleur de fond claire convient : SOMA l’adapte. Évitez seulement le texte posé sur une image ou sur un dégradé, et ne faites jamais porter un sens par la couleur seule.

### 7.3 Téléphone, tablette et ordinateur

- La balise viewport est obligatoire. Conseil : une largeur de lecture limitée (environ 760 px, comme dans le socle).
- À 360 px de large, rien ne déborde horizontalement, sauf un tableau dans son conteneur `.tableau`. Les grilles du socle (`auto-fit`) s’empilent seules ; pour vos propres grilles, prévoyez une règle `@media (max-width: 640px)`.
- Conseils : évitez `position: fixed` et `sticky` (l’élément couvrirait la lecture sur téléphone) et toute information réservée au survol de la souris (tablettes tactiles) ; prévoyez des boutons d’au moins 44 px de haut.
- Pour les schémas SVG, voir les conseils de la section 4 : `viewBox`, texte assez grand, peu de mots.

### 7.4 Poids, images et polices

- **5 Mo au plus par page** et 15 Mo pour la présentation (au-delà, l’import refuse le paquet) ; visez moins de 300 Ko par page.
- Préférez le SVG à la photo. Une photo indispensable : JPEG ou WebP, 1 200 px de large au plus, compressée, intégrée en `data:` (l’encodage ajoute environ un tiers au poids), avec un texte `alt`.
- Aucune police chargée depuis Internet. Conseil : les polices du système (`system-ui`) ; une police intégrée alourdit beaucoup la page.

### 7.5 Accessibilité

- `lang="fr"`, titres dans l’ordre, vraies listes (`<ul>`, `<ol>`), tableaux avec en-têtes (`<th scope>`).
- Un `alt` pour chaque image, `role="img"` et `aria-label` pour chaque schéma SVG ; les émojis décoratifs dans `<span aria-hidden="true">`.
- Un `<button>` pour toute action, un retour annoncé (`aria-live="polite"`), un contraste d’au moins 4,5:1 pour le texte.
- Pas d’animation qui clignote ; respectez `prefers-reduced-motion` (le socle coupe les animations si l’apprenant a demandé moins de mouvement).

## 8. Un exemple de page complète

Cet exemple montre **une** façon de construire une page, pas un modèle obligatoire. Il réunit le socle CSS, un en-tête, des objectifs, une définition, un schéma SVG, un exemple, un tableau, une mise en garde, une mise en situation, une question à choix et l’encadré « À retenir », chacun repéré par un identifiant stable (section 3.6), avec des mots-clés et des objectifs marqués (section 3.7). Il compte environ 400 mots, pour 5 à 7 minutes de lecture. Enregistré sous `pages/03-appliquer-la-regle-3-2-1.html` et déclaré dans le manifeste, il s’importe tel quel dans SOMA, avec la présentation du cours.

### Page « 🔁 Appliquez la règle 3-2-1 »

Chapitre « Comprendre » d’un cours de niveau Découverte vers Fondamentaux, pour un public professionnel.

```html
<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>🔁 Appliquez la règle 3-2-1</title>
  <meta name="soma-chapitre" content="Comprendre">
  <meta name="soma-mots-cles" content="sauvegarde, règle 3-2-1, supports de sauvegarde, restauration">
  <style>
    /* Socle SOMA proposé : à reprendre, adapter ou remplacer par votre propre CSS. */
    :root { --encre: #172033; --texte-doux: #475569; --trait: #e2e8f0; --accent: #4f46e5; --accent-pale: #eef2ff; }
    * { box-sizing: border-box; }
    body { margin: 0; padding: 32px 20px 48px; font: 17px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: var(--encre); background: #fff; }
    main { max-width: 760px; margin: 0 auto; }
    h1 { font-size: clamp(1.7rem, 4.6vw, 2.35rem); line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 16px; }
    h2 { font-size: 1.4rem; line-height: 1.3; margin: 36px 0 12px; }
    h3 { font-size: 1.12rem; line-height: 1.35; margin: 24px 0 8px; }
    p, ul, ol { margin: 0 0 14px; }
    li { margin: 4px 0; }
    img { max-width: 100%; height: auto; }
    :focus-visible { outline: 3px solid #6366f1; outline-offset: 2px; }

    /* En-tête de page */
    .repere { display: inline-block; margin: 0 0 12px; padding: 5px 12px; border-radius: 999px; background: var(--accent-pale); color: #4338ca; font-size: .85rem; font-weight: 700; }
    .chapo { font-size: 1.15rem; color: #334155; }

    /* Encadrés */
    .encadre { margin: 22px 0; padding: 14px 18px; border-radius: 12px; border-left: 5px solid; }
    .encadre > :last-child { margin-bottom: 0; }
    .encadre-titre { margin: 0 0 6px; font-weight: 800; }
    .objectifs { background: #eef2ff; border-color: #6366f1; }
    .definition { background: #faf5ff; border-color: #8b5cf6; }
    .exemple { background: #f0f9ff; border-color: #0ea5e9; }
    .attention { background: #fff7ed; border-color: #f97316; }
    .retenir { background: #ecfdf5; border-color: #10b981; }
    .analogie { background: #f8fafc; border: 1px solid var(--trait); }

    /* Cartes, étapes et deux colonnes : se réorganisent seules sur téléphone */
    .cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 22px 0; }
    .carte { padding: 16px; border: 1px solid var(--trait); border-radius: 14px; background: #fff; }
    .carte-icone { display: block; margin-bottom: 8px; font-size: 1.9rem; line-height: 1; }
    .carte h3 { margin: 0 0 6px; font-size: 1.05rem; }
    .carte p { margin: 0; font-size: .95rem; color: var(--texte-doux); }
    .etapes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 24px 0; padding: 0; list-style: none; counter-reset: etape; }
    .etapes li { flex: 1 1 140px; max-width: 200px; margin: 0; padding: 14px; border: 1px solid #d5dbe5; border-radius: 14px; background: #fff; text-align: center; font-size: .95rem; line-height: 1.4; }
    .etapes li::before { counter-increment: etape; content: counter(etape); display: grid; place-items: center; width: 30px; height: 30px; margin: 0 auto 8px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; }
    .deux-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin: 22px 0; }
    .deux-colonnes > div { padding: 18px; border: 1px solid var(--trait); border-radius: 14px; }
    .deux-colonnes h3 { margin-top: 0; }

    /* Schémas SVG et tableaux */
    .schema { margin: 26px 0; padding: 18px 12px; border: 1px solid var(--trait); border-radius: 16px; background: #f8fafc; text-align: center; }
    .schema svg { display: block; max-width: 100%; height: auto; margin: 0 auto; }
    .schema figcaption { margin-top: 10px; font-size: .9rem; color: var(--texte-doux); }
    .tableau { margin: 22px 0; overflow-x: auto; border: 1px solid var(--trait); border-radius: 12px; }
    .tableau table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: .95rem; }
    .tableau caption { padding: 10px 14px; text-align: left; font-weight: 700; }
    .tableau th, .tableau td { padding: 10px 14px; border-top: 1px solid var(--trait); text-align: left; vertical-align: top; }
    .tableau thead th { background: var(--accent-pale); color: #3730a3; }
    .tableau tbody tr:nth-child(even) { background: #f8fafc; }

    /* Chiffres clés */
    .chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 22px 0; }
    .chiffre-cle { display: flex; align-items: center; gap: 16px; padding: 18px; border: 1px solid var(--trait); border-radius: 14px; background: #fff; }
    .chiffre-cle svg { flex: none; width: 88px; height: 88px; }
    .chiffre-cle p { margin: 4px 0 0; }
    .chiffre-cle .chiffre { margin: 0; font-size: 2.4rem; font-weight: 800; line-height: 1; color: var(--accent); }
    .source { font-size: .8rem; color: var(--texte-doux); }

    /* Mises en situation, auto-vérification, questions à choix */
    .situation, .question, .scenario { margin: 24px 0; padding: 18px 20px; border: 1px solid var(--trait); border-radius: 14px; background: #fff; }
    .situation-titre { margin: 0 0 10px; font-weight: 800; }
    details.verif { margin: 16px 0; padding: 12px 16px; border: 1px solid var(--trait); border-radius: 10px; background: #f8fafc; }
    details.verif summary { cursor: pointer; font-weight: 700; color: #4338ca; }
    details.verif[open] summary { margin-bottom: 8px; }
    details.verif > :last-child { margin-bottom: 0; }
    .choix { display: grid; gap: 8px; margin: 12px 0; }
    .choix button { min-height: 44px; padding: 12px 14px; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; color: inherit; font: inherit; text-align: left; cursor: pointer; }
    .choix button:hover { border-color: #6366f1; }
    .choix button.juste { background: #ecfdf5; border-color: #10b981; }
    .choix button.moyen { background: #fff7ed; border-color: #f97316; }
    .choix button.faux { background: #fef2f2; border-color: #ef4444; }
    .retour { margin: 0; font-weight: 600; }

    @media (max-width: 480px) {
      body { padding: 20px 14px 36px; font-size: 16px; }
      .encadre, .situation, .question, .scenario { padding: 14px; }
    }
    @media (prefers-reduced-motion: reduce) {
      * { animation: none !important; transition: none !important; }
    }
  </style>
</head>
<body>
  <main>
    <p class="repere">Chapitre · Comprendre</p>
    <h1><span aria-hidden="true">🔁</span> Appliquez la règle 3-2-1</h1>
    <p class="chapo">Une seule copie de vos fichiers ne suffit pas. Découvrez comment organiser vos sauvegardes pour ne jamais tout perdre.</p>

    <section class="encadre objectifs" data-soma-type="objectifs">
      <p class="encadre-titre"><span aria-hidden="true">🎯</span> Objectifs de la page</p>
      <ul>
        <li data-soma-bloom="comprendre">Expliquer la règle 3-2-1.</li>
        <li data-soma-bloom="appliquer">Choisir deux supports de sauvegarde différents.</li>
        <li data-soma-bloom="analyser">Repérer une sauvegarde mal protégée.</li>
      </ul>
    </section>

    <h2 id="pourquoi-plusieurs-copies">Pourquoi une seule copie ne suffit pas</h2>
    <p>Bien souvent, un fichier n'existe qu'à un seul endroit : le disque de l'ordinateur. Une panne, un vol, une fausse manipulation ou un virus suffisent alors à le perdre pour de bon.</p>
    <p>Une copie rangée juste à côté ne protège pas beaucoup mieux : un incendie ou un dégât des eaux toucherait l'original et la copie en même temps.</p>

    <aside class="encadre definition" id="definition-sauvegarde" data-soma-type="definition">
      <p class="encadre-titre"><span aria-hidden="true">📖</span> Définition</p>
      <p><dfn>Sauvegarde</dfn> : copie de données conservée sur un autre support, pour pouvoir les restaurer après un incident.</p>
    </aside>

    <h2 id="regle-3-2-1" data-soma-type="regle">La règle 3-2-1</h2>
    <p>Cette règle simple, très répandue chez les professionnels, résume en trois chiffres une bonne organisation des sauvegardes.</p>

    <figure class="schema" id="schema-regle-3-2-1" data-soma-type="schema">
      <svg viewBox="0 0 480 170" width="480" height="170" role="img" aria-label="La règle 3-2-1 : 3 copies des données, sur 2 supports différents, dont 1 copie hors du bâtiment." font-family="system-ui, sans-serif">
        <circle cx="80" cy="56" r="40" fill="#4f46e5" />
        <circle cx="240" cy="56" r="40" fill="#0369a1" />
        <circle cx="400" cy="56" r="40" fill="#047857" />
        <g fill="#ffffff" font-size="38" font-weight="800" text-anchor="middle">
          <text x="80" y="70">3</text>
          <text x="240" y="70">2</text>
          <text x="400" y="70">1</text>
        </g>
        <g fill="#172033" font-size="17" font-weight="600" text-anchor="middle">
          <text x="80" y="128">copies</text>
          <text x="80" y="150">des données</text>
          <text x="240" y="128">supports</text>
          <text x="240" y="150">différents</text>
          <text x="400" y="128">copie hors</text>
          <text x="400" y="150">du bâtiment</text>
        </g>
      </svg>
      <figcaption>Trois chiffres pour ne jamais tout perdre.</figcaption>
    </figure>

    <ul>
      <li><strong>3 copies</strong> : l'original et deux sauvegardes.</li>
      <li><strong>2 supports différents</strong> : par exemple un disque externe et un service en ligne.</li>
      <li><strong>1 copie hors du bâtiment</strong> : pour résister à un vol ou à un sinistre.</li>
    </ul>

    <aside class="encadre exemple" id="exemple-cabinet-comptable" data-soma-type="exemple">
      <p class="encadre-titre"><span aria-hidden="true">💡</span> Exemple</p>
      <p>Chaque soir, un cabinet comptable copie ses dossiers sur son serveur interne (deuxième copie), puis chaque semaine vers un service en ligne (troisième copie, hors du bâtiment).</p>
    </aside>

    <h2 id="choisir-supports">Choisir ses supports</h2>
    <div class="tableau" id="tableau-supports-sauvegarde" data-soma-type="tableau">
      <table>
        <caption>Comparer trois supports de sauvegarde</caption>
        <thead>
          <tr><th scope="col">Critère</th><th scope="col">Disque externe</th><th scope="col">Serveur de stockage (NAS)</th><th scope="col">Service en ligne</th></tr>
        </thead>
        <tbody>
          <tr><th scope="row">Coût de départ</th><td>Faible</td><td>Moyen</td><td>Faible, puis abonnement</td></tr>
          <tr><th scope="row">Copie hors du bâtiment</th><td>Seulement si on l'emporte</td><td>Non</td><td>Oui</td></tr>
          <tr><th scope="row">Sauvegarde automatique</th><td>Souvent manuelle</td><td>Oui</td><td>Oui</td></tr>
        </tbody>
      </table>
    </div>

    <aside class="encadre attention" id="vigilance-sauvegarde-testee" data-soma-type="vigilance">
      <p class="encadre-titre"><span aria-hidden="true">⚠️</span> Attention</p>
      <p>Une sauvegarde jamais testée n'est pas une sauvegarde : vérifiez chaque mois que vous savez restaurer un fichier.</p>
    </aside>

    <h2>À vous de jouer</h2>
    <section class="situation" id="situation-association" data-soma-type="exercice">
      <p class="situation-titre"><span aria-hidden="true">🧩</span> Mise en situation</p>
      <p>Léa gère les fichiers d'une petite association. Une fois par mois, elle copie tout sur un disque externe qu'elle laisse branché sur son ordinateur.</p>
      <p><strong>Quels risques voyez-vous ? Que lui conseillez-vous ?</strong></p>
      <details class="verif">
        <summary>Voir une réponse possible</summary>
        <p>Le disque reste dans le même bureau et branché en permanence : un vol, un incendie ou un virus toucherait les deux copies. Léa peut sauvegarder chaque semaine, débrancher le disque après la copie et ajouter une copie hors du bâtiment.</p>
      </details>
    </section>

    <div class="question" id="question-nombre-copies" data-soma-type="exercice" data-question>
      <p class="situation-titre"><span aria-hidden="true">🧠</span> Combien de copies d'un fichier la règle 3-2-1 recommande-t-elle ?</p>
      <div class="choix">
        <button type="button">Une seule, bien rangée</button>
        <button type="button" data-juste>Trois copies</button>
        <button type="button">Deux copies sur le même disque</button>
      </div>
      <p class="retour" aria-live="polite"></p>
      <p class="explication" hidden>L'original et deux sauvegardes, sur deux supports différents, dont une hors du bâtiment.</p>
    </div>

    <aside class="encadre retenir" id="retenir-regle-3-2-1" data-soma-type="synthese">
      <p class="encadre-titre"><span aria-hidden="true">✅</span> À retenir</p>
      <p>3 copies, sur 2 supports différents, dont 1 hors du bâtiment. Une sauvegarde ne compte que si sa restauration a été testée.</p>
    </aside>
  </main>

  <script>
    // Questions d'auto-vérification : rien n'est noté ni enregistré.
    document.addEventListener("click", function (evenement) {
      var bouton = evenement.target.closest("[data-question] .choix button");
      if (!bouton) return;
      var question = bouton.closest("[data-question]");
      if (question.dataset.repondu) return;
      question.dataset.repondu = "oui";
      var juste = bouton.hasAttribute("data-juste");
      bouton.classList.add(juste ? "juste" : "faux");
      question.querySelector("[data-juste]").classList.add("juste");
      question.querySelector(".retour").textContent = juste
        ? "✅ Bonne réponse."
        : "❌ Pas tout à fait : la bonne réponse est en vert.";
      var explication = question.querySelector(".explication");
      if (explication) explication.hidden = false;
    });
  </script>
</body>
</html>
```

## 9. La présentation formateur (facultative)

La présentation est facultative : produisez-la quand le formateur la demande. Livrée, elle suit les règles de cette section. La présentation est le support que le formateur projette pour expliquer le cours. Elle est **dérivée des pages livrées** : on construit d’abord le cours apprenant, on y sélectionne les notions, passages et visuels importants, puis on compose la présentation à partir de ce cours effectivement produit, jamais à partir du seul sujet. Ce n’est **pas une deuxième version détaillée du cours** : c’est un support visuel de synthèse sur lequel le formateur, qui maîtrise son contenu, s’appuie pour expliquer oralement des notions déjà accessibles aux apprenants. Le formateur et la salle voient exactement la même chose : pas de notes du présentateur, pas d’écran séparé.

### 9.1 Le format technique

- **Un seul fichier HTML autonome** (`presentation/presentation.html`), soumis aux mêmes contraintes qu’une page : aucune ressource externe hormis les vidéos YouTube fournies par le formateur, aucun chargement des pages du cours. Copiez dans la présentation les schémas et images qu’elle réutilise.
- **Chaque diapositive** est un élément, de balise libre, qui porte `data-soma-diapo` et un `id` unique (même forme qu’une clé). SOMA en affiche une à la fois.
- **Surface de 1280 × 720 px (16:9)** : SOMA agrandit ou réduit la diapositive sans la déformer. **Tout doit être visible sans défilement.** Texte lisible en projection : 24 px au moins, 28 à 40 px pour l’essentiel. Trop chargée ? Sélectionnez plus rigoureusement l’essentiel avant de créer une diapositive supplémentaire ; ne réduisez pas la police.
- **Sources** : une diapositive qui expose une notion porte `data-soma-sources`, la liste des passages du cours dont elle est tirée, séparés par des espaces : `cle-de-page#identifiant`, ou `cle-de-page` seule pour une page entière. Ces références ne s’affichent pas ; SOMA vérifie à l’import que chaque clé et chaque identifiant existent, et refuse le paquet sinon, en nommant la diapositive et la référence en cause.
- Une diapositive d’**introduction**, de **plan**, de **transition** ou de **conclusion** se marque `data-soma-diapo="introduction"` (ou `plan`, `transition`, `conclusion`) : ses sources sont facultatives.
- **La navigation, c’est SOMA** : toutes les diapositives sont présentes dans le document, visibles les unes sous les autres. **Aucun script de navigation**, aucune classe « active », aucun `display: none`, `opacity: 0` ou transition pour masquer ou faire défiler les diapositives, aucun bouton ni numéro de page : SOMA affiche une diapositive à la fois et gère le clavier, le plein écran et le PDF. Un script ne sert qu’à une interaction à l’intérieur d’une diapositive. Tout ce qui est hors des diapositives (barre, boutons, compteur) est masqué par SOMA : n’en mettez pas.
- **Ouvert seul dans un navigateur, le fichier se lit comme un PDF** : les diapositives de 1280 × 720 px à la suite, de haut en bas, sans rien à cliquer. C’est la version que SOMA propose au formateur en téléchargement (« Présentation (.html, lisible comme un PDF) »), en plus du PDF une diapositive par page.
- **Apparition progressive** (facultative) : `data-soma-etape="1"`, `"2"`… sur les éléments à montrer pas à pas. Le formateur avance d’une étape à la fois avec les flèches du clavier.
- **Export PDF** : une diapositive par page, au format 16:9, toutes les étapes visibles. Le document reçoit la classe `soma-impression` pendant l’impression : une interaction doit y avoir un état final lisible.
- Un schéma copié plusieurs fois dans la présentation : renommez ses `id` internes (et leurs `url(#…)`) pour éviter les doublons, sans changer son sens ni ses libellés.

### 9.2 La fidélité au cours

- Les notions, définitions, mots-clés, règles, conditions et exceptions, méthodes et procédures, schémas, relations entre concepts et formulations pédagogiques essentielles **proviennent du cours apprenant**. On peut sélectionner, alléger, répartir, sans changer le sens ni supprimer une précision indispensable.
- **Seuls les exemples et applications peuvent différer**, en n’utilisant que les connaissances et méthodes présentes dans le cours : aucune notion ni exigence nouvelle, même indirecte.
- Une connaissance indispensable ne figure jamais **seulement** dans la présentation : elle est d’abord dans les pages.
- Les schémas sont réutilisés depuis le cours : taille, disposition et apparition progressive adaptables ; signification et libellés inchangés.
- Les connaissances essentielles du cours sont couvertes ; ne supprimez jamais une condition ou une précision qui changerait le sens d’une connaissance.

### 9.3 Une présentation synthétique, support de l’explication orale

**Ne cherchez pas à reproduire toutes les explications du cours sous forme de diapositives.** Le formateur connaît le cours puisqu’il l’a construit ou fait construire : il utilise les diapositives comme points d’appui et apporte oralement les développements, les précisions et les explications complémentaires. Une diapositive n’a donc pas besoin d’être aussi explicative qu’une page apprenant.

- **Volume** : le nombre total de diapositives **ne dépasse normalement pas le nombre de pages** du cours. Pour un cours de 15 pages, visez environ 10 à 15 diapositives. Plusieurs pages aux notions complémentaires peuvent être regroupées dans une même diapositive ; une page particulièrement complexe peut exceptionnellement en demander deux, sans dépasser le volume global.
- Les diapositives d’ouverture, de plan et de conclusion ne sont pas obligatoires et **comptent dans le total**.
- Ne reproduisez pas systématiquement les quiz et exercices déjà proposés aux apprenants dans le parcours.
- À l’import, SOMA signale une présentation plus longue que le cours (sans la refuser).

| Une diapositive privilégie | Une diapositive évite |
| --- | --- |
| Un schéma significatif issu du cours | Les paragraphes explicatifs développés |
| Une comparaison entre plusieurs notions | Plusieurs diapositives autour d’une même notion |
| Les mots-clés indispensables ; une règle ou une définition fondamentale | La multiplication artificielle des sous-parties |
| Les principales étapes d’une méthode ; un exemple ou une application qui fait participer le groupe | Les informations secondaires, qui s’expliquent simplement à l’oral |

La composition reste libre : pas de règle « une page = une diapositive », pas de structure systématique « titre + puces ». Schéma plein écran, question posée à la salle, cas à résoudre, comparaison : les composants et schémas de ce guide restent un bac à idées.

### 9.4 La méthode, avant de produire les diapositives

1. Examiner l’ensemble du cours apprenant.
2. Identifier les notions fondamentales et leurs relations.
3. Regrouper les notions complémentaires.
4. Définir un plan de présentation synthétique.
5. Vérifier que le volume prévu ne dépasse normalement pas le nombre de pages du cours.
6. Produire les diapositives à partir des passages et schémas sources.
7. Supprimer les répétitions et les diapositives dispensables.
8. Vérifier la fidélité au cours, la lisibilité en 16:9 et la cohérence des références.

**La qualité d’une présentation ne se mesure pas au nombre de diapositives, mais à sa capacité à soutenir une explication claire, synthétique et fidèle au cours.**

### 9.5 La charte graphique SOMA (obligatoire)

La présentation reprend **le thème de SOMA** : ses couleurs, ses polices et son style d’affichage. Recopiez ce socle **en entier, en tête de la feuille de style** de la présentation, puis composez avec ses classes. N’ajoutez aucun lien de police : SOMA charge lui-même ses polices (Plus Jakarta Sans pour les titres, Open Sans pour le texte) et applique aussi ce socle par défaut, sous les règles de la présentation.

```css
/* Charte SOMA des présentations : à reprendre en tête de la feuille de style. */
:root {
  --soma-indigo: #4f46e5; --soma-indigo-vif: #6366f1; --soma-indigo-fonce: #4338ca;
  --soma-indigo-pale: #eef2ff; --soma-indigo-doux: #c7d2fe;
  --soma-encre: #0f172a; --soma-texte: #1e293b; --soma-gris: #475569; --soma-trait: #e2e8f0;
  --soma-fond: #f8fafc; --soma-surface: #ffffff;
  --soma-vert: #16a34a; --soma-vert-pale: #ecfdf5; --soma-ambre: #d97706; --soma-ambre-pale: #fffbeb;
  --soma-ciel: #0284c7; --soma-ciel-pale: #f0f9ff; --soma-rouge: #dc2626;
  --soma-police-titre: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --soma-police-texte: "Open Sans", ui-sans-serif, system-ui, sans-serif;
}
body { margin: 0; background: var(--soma-fond); color: var(--soma-texte); font-family: var(--soma-police-texte); }
.diapo { position: relative; width: 1280px; height: 720px; box-sizing: border-box; padding: 72px 96px 64px;
  background: var(--soma-surface); display: flex; flex-direction: column; justify-content: center; gap: 28px; overflow: hidden; }
.diapo::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 10px;
  background: linear-gradient(90deg, var(--soma-indigo), var(--soma-indigo-vif)); }
.diapo h1, .diapo h2, .diapo h3 { margin: 0; font-family: var(--soma-police-titre); color: var(--soma-encre); letter-spacing: -0.01em; line-height: 1.15; }
.diapo h1 { font-size: 64px; font-weight: 800; }
.diapo h2 { font-size: 48px; font-weight: 800; }
.diapo h3 { font-size: 32px; font-weight: 700; }
.diapo p, .diapo li { margin: 0; font-size: 30px; line-height: 1.45; }
.diapo ul, .diapo ol { margin: 0; padding-left: 1.2em; display: grid; gap: 12px; }
.surtitre { font-family: var(--soma-police-titre); font-size: 20px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--soma-indigo); }
.carte { background: var(--soma-surface); border: 1px solid var(--soma-trait); border-radius: 20px; padding: 24px 28px;
  box-shadow: 0 12px 32px -20px rgba(15, 23, 42, 0.35); }
.encadre { border-radius: 16px; padding: 20px 28px; background: var(--soma-indigo-pale); border-left: 8px solid var(--soma-indigo); }
.encadre.retenir { background: var(--soma-vert-pale); border-left-color: var(--soma-vert); }
.encadre.attention { background: var(--soma-ambre-pale); border-left-color: var(--soma-ambre); }
.encadre.exemple { background: var(--soma-ciel-pale); border-left-color: var(--soma-ciel); }
.mots { display: flex; flex-wrap: wrap; gap: 14px; }
.mots span { padding: 10px 22px; border-radius: 999px; background: var(--soma-indigo-pale); color: var(--soma-indigo-fonce);
  font-family: var(--soma-police-titre); font-weight: 700; font-size: 26px; }
.colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.etapes { list-style: none; padding: 0; counter-reset: etape; display: grid; gap: 16px; }
.etapes li { counter-increment: etape; display: flex; gap: 18px; align-items: baseline; }
.etapes li::before { content: counter(etape); flex: none; display: inline-grid; place-items: center; width: 48px; height: 48px;
  border-radius: 14px; background: var(--soma-indigo); color: #fff; font-family: var(--soma-police-titre); font-weight: 800; font-size: 26px; }
.question { font-weight: 600; color: var(--soma-encre); }
figure { margin: 0; } figcaption { font-size: 22px; color: var(--soma-gris); }
```

| Élément | Dans la présentation |
| --- | --- |
| Fond | Diapositive blanche (`.diapo`) avec le bandeau indigo en haut ; jamais de fond sombre, de dégradé ou de photo en pleine diapositive |
| Indigo | Structure et accents : titres, surtitre (`.surtitre`), mots-clés (`.mots`), encadré de définition (`.encadre`), étapes (`.etapes`) |
| Vert | Ce qu’il faut retenir (`.encadre.retenir`) |
| Ambre | Point de vigilance (`.encadre.attention`) |
| Bleu ciel | Exemple ou application (`.encadre.exemple`) |
| Rouge | Réservé aux erreurs à éviter |
| Mise en page | `.carte`, `.colonnes` (comparaison), `.question` (question posée au groupe) ; vos propres règles s’ajoutent après le socle, dans les mêmes couleurs |

## 10. Un exemple de paquet complet

Un petit cours « La sauvegarde » en deux pages, avec sa présentation de deux diapositives : une synthèse par page, sans ouverture ni conclusion, le formateur développant à l’oral. Le manifeste figure en section 1.3. Comme l’exemple de page, il montre **une** façon de faire, pas un modèle à recopier.

### Une page du cours : « Organiser la sauvegarde »

Les passages repris par la présentation portent un `id` : `regle-3-2-1`, `schema-regle-3-2-1`, `methode-tester-restauration`.

```html
<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Organiser la sauvegarde</title>
  <meta name="soma-chapitre" content="Pratiquer">
  <style>
    body { margin: 0; padding: 24px; font: 17px/1.65 system-ui, sans-serif; color: #172033; background: #fff; }
    main { max-width: 760px; margin: 0 auto; }
    figure { margin: 18px 0; text-align: center; }
  </style>
</head>
<body>
  <main>
    <h1>Organiser la sauvegarde</h1>
    <h2 id="regle-3-2-1" data-soma-type="regle">La règle 3-2-1</h2>
    <p>3 copies des données, sur 2 supports différents, dont 1 copie hors du bâtiment.</p>
    <figure id="schema-regle-3-2-1" data-soma-type="schema">
      <svg viewBox="0 0 360 90" width="360" height="90" role="img" aria-label="3 copies, 2 supports, 1 copie hors du bâtiment">
        <circle cx="60" cy="45" r="34" fill="#4f46e5"/><text x="60" y="54" text-anchor="middle" font-size="26" fill="#fff">3</text>
        <circle cx="180" cy="45" r="34" fill="#0369a1"/><text x="180" y="54" text-anchor="middle" font-size="26" fill="#fff">2</text>
        <circle cx="300" cy="45" r="34" fill="#047857"/><text x="300" y="54" text-anchor="middle" font-size="26" fill="#fff">1</text>
      </svg>
      <figcaption>Trois chiffres pour ne jamais tout perdre.</figcaption>
    </figure>
    <section id="methode-tester-restauration" data-soma-type="methode">
      <h2>Tester la restauration</h2>
      <p>Chaque mois, restaurez un fichier au hasard pour vérifier que la sauvegarde est exploitable.</p>
    </section>
  </main>
</body>
</html>
```

### La présentation du cours

Deux diapositives aux couleurs de SOMA, reliées aux passages du cours : une définition et ses mots-clés, puis la règle avec son schéma, ce qu’il faut retenir et une question posée au groupe, qui l’applique à un nouveau cas sans notion nouvelle.

```html
<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=1280, initial-scale=1">
  <title>La sauvegarde — présentation</title>
  <style>
    /* Charte SOMA des présentations : à reprendre en tête de la feuille de style. */
    :root {
      --soma-indigo: #4f46e5; --soma-indigo-vif: #6366f1; --soma-indigo-fonce: #4338ca;
      --soma-indigo-pale: #eef2ff; --soma-indigo-doux: #c7d2fe;
      --soma-encre: #0f172a; --soma-texte: #1e293b; --soma-gris: #475569; --soma-trait: #e2e8f0;
      --soma-fond: #f8fafc; --soma-surface: #ffffff;
      --soma-vert: #16a34a; --soma-vert-pale: #ecfdf5; --soma-ambre: #d97706; --soma-ambre-pale: #fffbeb;
      --soma-ciel: #0284c7; --soma-ciel-pale: #f0f9ff; --soma-rouge: #dc2626;
      --soma-police-titre: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
      --soma-police-texte: "Open Sans", ui-sans-serif, system-ui, sans-serif;
    }
    body { margin: 0; background: var(--soma-fond); color: var(--soma-texte); font-family: var(--soma-police-texte); }
    .diapo { position: relative; width: 1280px; height: 720px; box-sizing: border-box; padding: 72px 96px 64px;
      background: var(--soma-surface); display: flex; flex-direction: column; justify-content: center; gap: 28px; overflow: hidden; }
    .diapo::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 10px;
      background: linear-gradient(90deg, var(--soma-indigo), var(--soma-indigo-vif)); }
    .diapo h1, .diapo h2, .diapo h3 { margin: 0; font-family: var(--soma-police-titre); color: var(--soma-encre); letter-spacing: -0.01em; line-height: 1.15; }
    .diapo h1 { font-size: 64px; font-weight: 800; }
    .diapo h2 { font-size: 48px; font-weight: 800; }
    .diapo h3 { font-size: 32px; font-weight: 700; }
    .diapo p, .diapo li { margin: 0; font-size: 30px; line-height: 1.45; }
    .diapo ul, .diapo ol { margin: 0; padding-left: 1.2em; display: grid; gap: 12px; }
    .surtitre { font-family: var(--soma-police-titre); font-size: 20px; font-weight: 700; letter-spacing: 0.08em;
      text-transform: uppercase; color: var(--soma-indigo); }
    .carte { background: var(--soma-surface); border: 1px solid var(--soma-trait); border-radius: 20px; padding: 24px 28px;
      box-shadow: 0 12px 32px -20px rgba(15, 23, 42, 0.35); }
    .encadre { border-radius: 16px; padding: 20px 28px; background: var(--soma-indigo-pale); border-left: 8px solid var(--soma-indigo); }
    .encadre.retenir { background: var(--soma-vert-pale); border-left-color: var(--soma-vert); }
    .encadre.attention { background: var(--soma-ambre-pale); border-left-color: var(--soma-ambre); }
    .encadre.exemple { background: var(--soma-ciel-pale); border-left-color: var(--soma-ciel); }
    .mots { display: flex; flex-wrap: wrap; gap: 14px; }
    .mots span { padding: 10px 22px; border-radius: 999px; background: var(--soma-indigo-pale); color: var(--soma-indigo-fonce);
      font-family: var(--soma-police-titre); font-weight: 700; font-size: 26px; }
    .colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
    .etapes { list-style: none; padding: 0; counter-reset: etape; display: grid; gap: 16px; }
    .etapes li { counter-increment: etape; display: flex; gap: 18px; align-items: baseline; }
    .etapes li::before { content: counter(etape); flex: none; display: inline-grid; place-items: center; width: 48px; height: 48px;
      border-radius: 14px; background: var(--soma-indigo); color: #fff; font-family: var(--soma-police-titre); font-weight: 800; font-size: 26px; }
    .question { font-weight: 600; color: var(--soma-encre); }
    figure { margin: 0; } figcaption { font-size: 22px; color: var(--soma-gris); }
    /* Propre à cette présentation. */
    .schema-321 { display: flex; justify-content: center; }
  </style>
</head>
<body>
  <!-- Deux pages, deux diapositives : la présentation soutient l'explication orale du formateur.
       SOMA affiche une diapositive à la fois : aucune navigation dans ce fichier. -->
  <section class="diapo" id="diapo-definition-sauvegarde" data-soma-diapo data-soma-sources="comprendre-la-sauvegarde#definition-sauvegarde">
    <p class="surtitre">Comprendre</p>
    <h2>La sauvegarde</h2>
    <div class="encadre">
      <p>Copie de données conservée sur un autre support, pour pouvoir les restaurer après un incident.</p>
    </div>
    <div class="mots" data-soma-etape="1"><span>copie</span><span>autre support</span><span>restaurer</span></div>
  </section>

  <section class="diapo" id="diapo-regle-3-2-1" data-soma-diapo
    data-soma-sources="organiser-la-sauvegarde#regle-3-2-1 organiser-la-sauvegarde#schema-regle-3-2-1">
    <p class="surtitre">Pratiquer</p>
    <h2>La règle 3-2-1</h2>
    <figure class="schema-321">
      <svg viewBox="0 0 360 90" width="720" height="180" role="img" aria-label="3 copies, 2 supports, 1 copie hors du bâtiment">
        <circle cx="60" cy="45" r="34" fill="#4f46e5"/><text x="60" y="54" text-anchor="middle" font-size="26" fill="#fff">3</text>
        <circle cx="180" cy="45" r="34" fill="#0284c7"/><text x="180" y="54" text-anchor="middle" font-size="26" fill="#fff">2</text>
        <circle cx="300" cy="45" r="34" fill="#16a34a"/><text x="300" y="54" text-anchor="middle" font-size="26" fill="#fff">1</text>
      </svg>
    </figure>
    <div class="encadre retenir" data-soma-etape="1"><p>3 copies · 2 supports différents · 1 copie hors du bâtiment</p></div>
    <p class="question" data-soma-etape="2">Une association garde une copie sur un disque toujours branché au bureau. Que lui conseillez-vous ?</p>
  </section>
</body>
</html>
```

## 11. Check-list avant livraison

### Obligatoire : le paquet

- Un seul fichier `.zip` avec `soma-cours.json`, **toutes** les pages déclarées et la présentation si elle est demandée ; aucun fichier non déclaré (hors note `.md` ou `.txt`).
- Manifeste : `"format": "soma-cours"`, `"version": 1`, pages dans l’ordre de lecture, une clé unique et stable par page, présentation (si elle est livrée) au ratio `"16:9"`.
- Mise à jour : clés et identifiants des pages conservés, paquet livré en entier.
- Chaque page a son `<title>` et son `<meta name="soma-chapitre">`, avec un nom de chapitre choisi, écrit à l’identique sur toutes ses pages.

### Si vous livrez une présentation

- Chaque diapositive porte `data-soma-diapo` et un `id` unique ; elle tient dans 1280 × 720 px, sans défilement.
- Chaque `data-soma-sources` vise une clé de page du manifeste et un `id` présent dans cette page ; seules les diapositives d’introduction, de plan, de transition ou de conclusion s’en passent.
- Aucune notion, règle ou exigence absente des pages ; seuls les exemples et applications diffèrent ; aucune condition ni précision qui change le sens n’est supprimée.
- Une synthèse, pas une copie du cours : normalement au plus autant de diapositives que de pages (ouverture, plan et conclusion comprises), sans paragraphe développé ni répétition d’une même notion.
- Aucune ressource externe hormis les vidéos YouTube fournies par le formateur ; schémas copiés sans `id` en double.
- La charte SOMA est recopiée en tête de la feuille de style : fond clair, couleurs et composants SOMA ; aucun script de navigation ni diapositive masquée.

### Obligatoire : compatibilité avec le lecteur

- Un fichier `.html` autonome par page, moins de 5 Mo par page.
- `<!doctype html>`, `<html lang="fr">`, `<meta charset="utf-8">` et la balise viewport.
- Aucune ressource externe : pas de `http` dans un `src`, un `href` de feuille de style, un `@import` ou un `url()` — seule exception, l’`iframe` d’une vidéo YouTube fournie par le formateur. Images en `data:` ou SVG intégré.
- Scripts en ligne seulement ; aucun appel réseau, cookie, stockage local, `alert()`, formulaire envoyé, nouvel onglet ni lien vers une autre page.
- Défilement de la page non bloqué ; lisible à 360 px de large (un tableau large défile dans son conteneur).
- Pas de thème sombre maison (`prefers-color-scheme`).
- Des `id` uniques dans la page.

### Recommandé : qualité de lecture

- `<title>` court, identique au texte du `<h1>`, sans numéro ; chapitres nommés par ce qu’ils apportent, pages d’un chapitre déclarées à la suite.
- Titres `<h2>` et `<h3>` dans l’ordre, sans saut de niveau.
- Pages découpées selon les unités pédagogiques, plutôt courtes ; nombre de pages adapté au contenu.
- Éléments de chaque page choisis selon son objectif (objectifs, explications, illustration, exemple, activité, synthèse), sans succession imposée.
- Vocabulaire, exemples et difficulté adaptés au public ; niveau visé atteint, jamais dépassé.
- Objectifs formulés avec des verbes de Bloom, catégories choisies selon les objectifs et le niveau.
- Un `id` stable et descriptif sur les passages importants, conservé quand une page est retravaillée ; métadonnées facultatives (mots-clés, objectifs, compétences) sans répéter ce que SOMA connaît déjà.
- Aucun fait, chiffre, date ou source inventé ; aucun texte ou image protégé recopié.
- Vocabulaire SOMA : apprenant, formateur, parcours, cours, chapitre, page.
- Schémas SVG avec `viewBox`, `role="img"` et `aria-label`, lisibles dans les deux thèmes ; images avec `alt` ; idéalement moins de 300 Ko par page.
- Un court message pour le formateur : liste des pages, nombre de diapositives, sources, points à vérifier ; ce qui manque, honnêtement, si le paquet est incomplet.

Une question sur ce format ? [Contactez l’équipe SOMA](https://soma.yt/contact.html). Cette page existe aussi en [version texte (Markdown)](https://soma.yt/ai/creation-cours.txt), plus simple à lire pour un agent IA.