Créer les pages d’un cours SOMA

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

{
  "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

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.

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

<!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.

/* 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

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

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.

<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

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 :

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 :

<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).

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

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

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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

6.2 Une même notion, plusieurs publics

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

6.3 Du niveau de départ au niveau visé

• 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

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. 1MémoriserIdentifier les composants d’un ordinateur
2. 2ComprendreExpliquer le rôle de la mémoire RAM
3. 3AppliquerInstaller correctement une barrette RAM
4. 4AnalyserDiagnostiquer une panne mémoire
5. 5ÉvaluerComparer plusieurs solutions techniques
6. 6CréerConcevoir une solution matérielle adaptée

• 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.

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.

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 :

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.

<!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).

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.

/* 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); }

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.

<!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>

<!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. Cette page existe aussi en version texte (Markdown), plus simple à lire pour un agent IA.