diff --git a/1re-numerique/1TC-NUM_bloc-01_ouvrir-le-cours.html b/1re-numerique/1TC-NUM_bloc-01_ouvrir-le-cours.html
index 68436f0..0f44377 100644
--- a/1re-numerique/1TC-NUM_bloc-01_ouvrir-le-cours.html
+++ b/1re-numerique/1TC-NUM_bloc-01_ouvrir-le-cours.html
@@ -1,198 +1,45 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="fr">
 <head>
 <meta charset="utf-8">
-<meta name="viewport" content="width=device-width,initial-scale=1">
-<title>Cours 1 – Ouvrir le cours</title>
-<style>:root{--ink:#172033;--muted:#667085;--blue:#2563eb;--navy:#172554;--green:#16a34a;--red:#dc2626;--card:#fff;--line:#e5e7eb;--shadow:0 18px 45px #0f172a18}
-*{box-sizing:border-box}html{scroll-behavior:smooth}
-body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:linear-gradient(180deg,#edf4ff,#f8fafc 34%,#fff);color:var(--ink)}
-button,input,select{font:inherit}
-main{max-width:1180px;margin:auto;padding:34px 20px 70px}
-:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
-svg.i{width:1em;height:1em;vertical-align:-.14em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
-
-.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;background:linear-gradient(135deg,#172554,#2563eb);color:#fff;border-radius:28px;padding:30px;box-shadow:var(--shadow);margin-bottom:24px}
-.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:900;opacity:.82}
-.hero h1{font-size:clamp(30px,4.6vw,52px);line-height:1;letter-spacing:-1.6px;margin:7px 0 12px}
-.hero p{margin:0;color:#dbeafe;line-height:1.6;font-size:17px}
-.hero a.up{display:inline-flex;align-items:center;gap:7px;color:#bfdbfe;font-weight:800;font-size:13px;text-decoration:none;margin-bottom:10px}
-.hero a.up:hover{color:#fff}
-.hero-visual{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
-.hero-chip{background:#ffffff14;border:1px solid #ffffff28;border-radius:18px;padding:16px;text-align:center}
-.hero-chip .ico{display:block;margin:0 auto 7px;width:30px;height:30px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
-.hero-chip b{font-size:14px}
-.badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
-.badge{background:#ffffff1f;border:1px solid #ffffff2e;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:800;color:#e0ecff}
-.badge.warn{background:#dc262633;border-color:#fca5a5;color:#fee2e2}
-
-.dashboard{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
-.stat{background:#fff;border:1px solid var(--line);border-radius:17px;padding:14px;box-shadow:0 8px 24px #0f172a0b}
-.stat strong{display:block;font-size:22px;margin-top:3px}
-.stat small{color:#64748b;font-weight:800}
-.stat.ok strong{color:var(--green)}
-
-.chrono{background:#172554;color:#fff;border-radius:20px;padding:16px 18px;box-shadow:var(--shadow);margin-bottom:20px;display:grid;gap:12px}
-.chrono-haut{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
-.pendule{font-size:32px;font-weight:950;font-variant-numeric:tabular-nums;line-height:1}
-.pendule small{display:block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#93b4d8;margin-top:5px}
-.ecart{font-size:14px;font-weight:850;padding:9px 14px;border-radius:999px;background:#ffffff1a;border:1px solid #ffffff2e;min-width:250px;text-align:center}
-.ecart.avance{background:#16a34a2e;border-color:#4ade80;color:#dcfce7}
-.ecart.retard{background:#dc26262e;border-color:#fca5a5;color:#fee2e2}
-.chrono .row button{background:#ffffff1a;border:1px solid #ffffff30;color:#fff}
-.chrono .row button.go{background:#fff;border-color:#fff;color:#172554}
-
-.navtabs{display:grid;gap:10px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:0 8px 24px #0f172a0b;margin-bottom:20px}
-.navtabs.n6{grid-template-columns:repeat(6,1fr)}
-.tab{border:2px solid #e2e8f0;background:#fff;border-radius:14px;padding:12px 10px;font-weight:900;cursor:pointer;color:#334155;text-align:left;position:relative}
-.tab span{display:block;font-size:11px;font-weight:800;color:#94a3b8;margin-top:3px;font-variant-numeric:tabular-nums}
-.tab:hover{border-color:#93c5fd}
-.tab.active{background:#2563eb;color:#fff;border-color:#2563eb;box-shadow:0 8px 18px #2563eb28}
-.tab.active span{color:#c7dcff}
-.tab.prevue::after{content:"";position:absolute;left:12px;right:12px;bottom:-2px;height:4px;border-radius:99px;background:#f59e0b}
-
-.panel{display:none}.panel.active{display:block}
-.card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 10px 28px #0f172a0d;margin-bottom:16px}
-.card h2,.card h3{margin-top:0}
-.card h2{font-size:26px;letter-spacing:-.5px}
-.muted{color:var(--muted);line-height:1.6}
-.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
-.btn{border:0;border-radius:11px;padding:10px 15px;font-weight:850;cursor:pointer;background:#eaf1ff;color:#1d4ed8}
-.btn:hover{filter:brightness(.97)}
-.btn.primary{background:#2563eb;color:#fff}
-.btn.soft{background:#f1f5f9;color:#334155}
-.score{display:inline-block;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:7px 12px;font-weight:900;font-size:14px}
-.feedback{min-height:31px;margin-top:12px;font-weight:850}
-.entete{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:flex-start;margin-bottom:14px}
-.consigne{background:linear-gradient(145deg,#f8fafc,#eef6ff);border:2px solid #dbeafe;border-radius:18px;padding:20px 24px;font-size:20px;font-weight:800;line-height:1.45;margin:16px 0}
-.consigne small{display:block;text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:900;color:var(--blue);margin-bottom:8px}
-.info{border-left:4px solid #cbd5e1;background:#f8fafc;border-radius:0 12px 12px 0;padding:13px 17px;color:#475569;font-size:15px;line-height:1.6;margin-top:16px}
-.info b{color:var(--ink)}
-.info.alerte{border-color:#fca5a5;background:#fef4f4;color:#7f2b2b}
-.info.alerte b{color:#991b1b}
-
-.saisie{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px}
-.saisie input{flex:1;min-width:210px;padding:12px 14px;border:2px solid #cbd5e1;border-radius:12px;outline:none}
-.saisie input:focus{border-color:var(--blue);box-shadow:0 0 0 4px #2563eb18}
-.saisie select{padding:12px 14px;border:2px solid #cbd5e1;border-radius:12px;font-weight:800}
-.colonnes{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:11px}
-.colonne{border:1px solid var(--line);border-radius:17px;background:#f8fbff;min-height:145px;padding:13px}
-.colonne h3{font-size:14px;display:flex;justify-content:space-between;align-items:center;margin:0 0 9px;padding-bottom:8px;border-bottom:1px solid var(--line)}
-.colonne h3 em{font-style:normal;color:#94a3b8;font-size:12px}
-.colonne ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
-.colonne li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:7px 10px;font-size:14px;font-weight:700;display:flex;justify-content:space-between;gap:6px}
-.colonne li button{background:none;border:0;color:#cbd5e1;cursor:pointer;padding:0 3px;font-weight:900}
-.colonne li button:hover{color:var(--red)}
-
-.accordeon{display:grid;gap:10px}
-.item{border:1px solid var(--line);border-radius:17px;background:#fff;overflow:hidden}
-.item>button{width:100%;display:flex;gap:14px;align-items:flex-start;text-align:left;background:none;border:0;padding:15px 18px;cursor:pointer}
-.item>button:hover{background:#f8fbff}
-.item .n{width:30px;height:30px;flex:none;border-radius:10px;background:#eaf1ff;color:#1d4ed8;font-weight:950;display:grid;place-items:center;font-size:14px}
-.item .t{font-weight:850;font-size:17px;flex:1}
-.item .plus{color:#94a3b8;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;padding-top:6px}
-.item .corps{display:none;padding:0 18px 17px 62px;color:#475569;line-height:1.6}
-.item.ouvert .corps{display:block}
-.item.ouvert{border-color:#93c5fd;box-shadow:0 8px 20px #2563eb14}
-.item.ouvert .n{background:#2563eb;color:#fff}
-
-.qcard{border:2px solid #dbeafe;border-radius:20px;background:linear-gradient(145deg,#fbfdff,#f4f9ff);padding:24px 26px}
-.qtag{display:inline-block;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:900;margin-bottom:10px}
-.qtag.cle{background:#fef3c7;color:#92400e}
-.qtxt{font-size:22px;font-weight:900;line-height:1.3;letter-spacing:-.3px;margin-bottom:16px}
-.answer-grid{display:grid;gap:8px}
-.answer{border:2px solid #dbe3ef;background:#fff;border-radius:12px;padding:11px 14px;text-align:left;font-weight:800}
-.answer.ok{border-color:#22c55e;background:#f0fdf4}
-.reveal{display:none;margin-top:16px;border-top:2px dashed #dbeafe;padding-top:15px}
-.reveal.on{display:block}
-.verdict{font-weight:950;color:var(--green);margin-bottom:8px}
-
-.steps{display:grid;gap:11px}
-.step{border:1px solid var(--line);border-radius:17px;background:#fff;padding:16px 20px;display:flex;gap:15px;align-items:flex-start;opacity:.4}
-.step.on{opacity:1;border-color:#93c5fd;box-shadow:0 8px 20px #2563eb14}
-.step.fait{opacity:1}
-.step .n{width:34px;height:34px;flex:none;border-radius:12px;background:#f1f5f9;color:#94a3b8;font-weight:950;display:grid;place-items:center}
-.step.on .n{background:#2563eb;color:#fff}
-.step.fait .n{background:#dcfce7;color:#15803d}
-.step h3{margin:0 0 4px;font-size:17px}
-.step p{margin:0;color:#475569;font-size:15px;line-height:1.55}
-
-figure{margin:0 0 18px}
-figure svg{width:100%;height:auto;display:block;background:#fff;border:1px solid var(--line);border-radius:18px}
-figcaption{font-size:14px;color:var(--muted);margin-top:10px;line-height:1.55}
-
-.trace{border:2px solid #dbeafe;background:linear-gradient(145deg,#fbfdff,#eef6ff);border-radius:20px;padding:26px 30px;font-size:19px;line-height:1.85}
-.trace h3{margin:0 0 14px;font-size:22px}
-.trace p{margin:0 0 .5em}
-.trace code{background:#fff;border:1px solid #dbeafe;border-radius:6px;padding:1px 7px;font-size:.92em}
-
-.check{display:grid;gap:9px}
-.check label{display:flex;gap:13px;align-items:flex-start;border:1px solid var(--line);border-radius:15px;background:#fff;padding:14px 18px;cursor:pointer;font-weight:750}
-.check label:hover{border-color:#93c5fd}
-.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--green);flex:none}
-.check input:checked+span{color:var(--green);font-weight:900}
-
-table.grille{width:100%;border-collapse:collapse;font-size:15px}
-table.grille th,table.grille td{border:1px solid var(--line);padding:10px 13px;text-align:left}
-table.grille th{background:#f8fafc;font-weight:900;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:#475569}
-table.grille td.masque{color:transparent;background:#f8fafc}
-table.grille tr.on td{background:#f0fdf4}
-table.grille td b{color:#15803d}
-
-.filtres{display:flex;gap:9px;flex-wrap:wrap;align-items:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:0 8px 24px #0f172a0b;margin-bottom:20px}
-.filtres .compte{margin-left:auto;font-weight:850;color:var(--muted);font-size:14px}
-.module{margin-bottom:30px}
-.module-tete{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px}
-.module-tete h2{margin:0;font-size:25px;letter-spacing:-.6px}
-.module-tete .p{background:#172554;color:#fff;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:900}
-.module-tete .champ{color:var(--muted);font-size:14px;margin-left:auto}
-.module-note{color:var(--muted);line-height:1.6;margin:0 0 16px;max-width:76ch}
-.blocs{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
-.bloc{border:1px solid var(--line);border-radius:20px;background:#fff;padding:17px 19px;display:flex;gap:15px;align-items:flex-start;text-decoration:none;color:inherit;box-shadow:0 8px 24px #0f172a08}
-.bloc .n{width:40px;height:40px;flex:none;border-radius:14px;background:#f1f5f9;color:#94a3b8;font-weight:950;display:grid;place-items:center;font-size:17px}
-.bloc h3{margin:0 0 5px;font-size:17px;line-height:1.3}
-.bloc .att{font-size:13px;color:var(--muted);font-weight:600}
-.ets{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
-.et{font-size:11px;font-weight:900;border-radius:999px;padding:4px 9px;background:#f1f5f9;color:#475569}
-.et.eval{background:#fee2e2;color:#991b1b}
-.et.fac{background:#f3e8ff;color:#6b21a8}
-.et.pret{background:#dcfce7;color:#15803d}
-a.bloc:hover{border-color:#93c5fd;box-shadow:0 12px 28px #2563eb1f}
-a.bloc .n{background:#2563eb;color:#fff}
-.bloc.vide{border-style:dashed;opacity:.68;box-shadow:none}
-.bloc.vide h3{font-weight:800}
-.masque{display:none!important}
-
-footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:center;color:#64748b;font-size:12px;border-top:1px solid var(--line)}
-
-@media(max-width:980px){.hero{grid-template-columns:1fr}.dashboard{grid-template-columns:repeat(2,1fr)}.navtabs.n6{grid-template-columns:repeat(3,1fr)}}
-@media(max-width:620px){main{padding:20px 12px 60px}.hero{padding:22px 18px}.dashboard{grid-template-columns:1fr}.navtabs.n6{grid-template-columns:repeat(2,1fr)}.blocs{grid-template-columns:1fr}.ecart{min-width:0;flex:1}.filtres .compte{margin-left:0;width:100%}}
-@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
-@media print{.chrono,.navtabs,.filtres,.saisie{display:none}.panel{display:block!important}}
-</style>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Cours 1, ouvrir le cours — 1re tronc commun</title>
+<meta name="robots" content="noindex">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="../assets/theme.css">
+<link rel="stylesheet" href="../assets/numerique-1re.css">
 </head>
-<body>
-<main>
+<body class="classe-tc">
 
-<section class="hero">
-  <div>
-    <a class="up" href="index.html"><svg class="i" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg> Retour au menu</a>
-    <div class="eyebrow">Cours 1 · Formation numérique · 1re année</div>
+<header class="entete">
+  <div class="entete__interieur entete__interieur--large">
+    <nav class="ariane" aria-label="Fil d'Ariane">
+      <a href="../index.html">Mes cours</a><span aria-hidden="true">/</span><a href="index.html">1re tronc commun</a><span aria-hidden="true">/</span><strong>Cours 1</strong>
+    </nav>
     <h1>Ouvrir le cours</h1>
-    <p>Aujourd'hui, tu découvres le local, les règles qu'on y suit, ton compte et ton dossier personnel. À la fin du cours, tu sauras te connecter et retrouver ton travail depuis n'importe quel poste.</p>
-    <div class="badges">
-      <span class="badge">2 périodes</span>
-      <span class="badge">Ce cours n'est pas coté</span>
-      <span class="badge">Livret à garder dans le cahier</span>
-    </div>
+    <p class="entete__meta">Cours 1 · Formation numérique · 1re année</p>
   </div>
-  <div class="hero-visual">
-    <div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M12 3v3M5.6 5.6l2.1 2.1M3 12h3M5.6 18.4l2.1-2.1M12 18v3M18.4 18.4l-2.1-2.1M21 12h-3M18.4 5.6l-2.1 2.1"/><circle cx="12" cy="12" r="3"/></svg><b>Mon réveil</b></div>
-    <div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M6 3h9l4 4v14H6z"/><path d="M14 3v5h5M9 13h7M9 17h5"/></svg><b>La charte</b></div>
-    <div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M9.5 9a2.5 2.5 0 1 1 3.4 2.3c-.6.3-.9.8-.9 1.4v.6"/><circle cx="12" cy="17" r="1"/><circle cx="12" cy="12" r="9"/></svg><b>Ce que je sais</b></div>
-    <div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="13" rx="2"/><path d="M8 21h8M12 17v4M8.5 10.5l2 2 4.5-4.5"/></svg><b>Ma connexion</b></div>
-  </div>
-</section>
+</header>
+
+<main class="contenu contenu--large">
+
+  <p class="chapeau">Aujourd'hui, tu découvres le local, les règles qu'on y suit, ton compte et ton dossier personnel. À la fin du cours, tu sauras te connecter et retrouver ton travail depuis n'importe quel poste.</p>
+
+  <ul class="etiquettes">
+    <li class="etiquette">2 périodes</li>
+    <li class="etiquette">Ce cours n'est pas coté</li>
+    <li class="etiquette">Livret à garder dans le cahier</li>
+  </ul>
+
+  <ul class="apercu">
+    <li><svg viewBox="0 0 24 24"><path d="M12 3v3M5.6 5.6l2.1 2.1M3 12h3M5.6 18.4l2.1-2.1M12 18v3M18.4 18.4l-2.1-2.1M21 12h-3M18.4 5.6l-2.1 2.1"/><circle cx="12" cy="12" r="3"/></svg><span>Mon réveil</span></li>
+    <li><svg viewBox="0 0 24 24"><path d="M6 3h9l4 4v14H6z"/><path d="M14 3v5h5M9 13h7M9 17h5"/></svg><span>La charte</span></li>
+    <li><svg viewBox="0 0 24 24"><path d="M9.5 9a2.5 2.5 0 1 1 3.4 2.3c-.6.3-.9.8-.9 1.4v.6"/><circle cx="12" cy="17" r="1"/><circle cx="12" cy="12" r="9"/></svg><span>Ce que je sais</span></li>
+    <li><svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="13" rx="2"/><path d="M8 21h8M12 17v4M8.5 10.5l2 2 4.5-4.5"/></svg><span>Ma connexion</span></li>
+  </ul>
+
 
 <section class="dashboard">
   <div class="stat"><small>Activité en cours</small><strong id="sPhase">1 sur 6</strong></div>
@@ -205,7 +52,7 @@ footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:cente
   <div class="row">
     <button class="btn primary" id="btnGo">Démarrer</button>
     <button class="btn soft" id="btnStop">Remettre à zéro</button>
-    <span class="ecart" id="ecart" style="background:#f1f5f9;border:1px solid var(--line);color:#475569">Activité 1 · Mon réveil numérique</span>
+    <span class="ecart" id="ecart" style="background:var(--papier);border:1px solid var(--line);color:var(--encre-douce)">Activité 1 · Mon réveil numérique</span>
   </div>
 </div>
 
@@ -213,7 +60,7 @@ footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:cente
 
 <!-- 1 -->
 <section class="panel active" id="p0"><div class="card">
-  <div class="entete"><div><h2>Activité 1. Mon réveil numérique</h2><p class="muted">Ton livret, page 1. Ordinateurs éteints.</p></div><span class="score">15 min</span></div>
+  <div class="carte-entete"><div><h2>Activité 1. Mon réveil numérique</h2><p class="muted">Ton livret, page 1. Ordinateurs éteints.</p></div><span class="score">15 min</span></div>
 
   <div class="consigne"><small>Consigne</small>
     Sur ton livret, écris tout ce que tu as fait avec un écran depuis que tu t'es réveillé ce matin. Tout, même trente secondes. Tu as cinq minutes.</div>
@@ -232,7 +79,7 @@ footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:cente
 
 <!-- 2 -->
 <section class="panel" id="p1"><div class="card">
-  <div class="entete"><div><h2>Activité 2. La charte du local</h2><p class="muted">Huit règles. Pour chacune, essaie de deviner pourquoi elle existe avant qu'on ouvre la réponse.</p></div><span class="score">15 min</span></div>
+  <div class="carte-entete"><div><h2>Activité 2. La charte du local</h2><p class="muted">Huit règles. Pour chacune, essaie de deviner pourquoi elle existe avant qu'on ouvre la réponse.</p></div><span class="score">15 min</span></div>
   <div class="accordeon" id="regles"></div>
   <div class="consigne" style="margin-bottom:0"><small>Pour terminer</small>
     Signe ta charte au bas de la page 2 de ton livret, et note ton numéro de poste en haut de la page 1.</div>
@@ -240,7 +87,7 @@ footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:cente
 
 <!-- 3 -->
 <section class="panel" id="p2"><div class="card">
-  <div class="entete"><div><h2>Activité 3. Ce que je sais déjà</h2><p class="muted">Vingt questions dans ton livret, pages 3 et 4.</p></div><span class="score">25 min</span></div>
+  <div class="carte-entete"><div><h2>Activité 3. Ce que je sais déjà</h2><p class="muted">Vingt questions dans ton livret, pages 3 et 4.</p></div><span class="score">25 min</span></div>
 
   <div class="consigne"><small>À lire avant de commencer</small>
     Ce questionnaire n'est pas coté. Il sert à savoir ce que tu sais déjà, pour ne pas te faire perdre du temps sur ce que tu maîtrises. Si tu ne sais pas, écris que tu ne sais pas : c'est une réponse utile.</div>
@@ -257,7 +104,7 @@ footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:cente
 
 <!-- 4 -->
 <section class="panel" id="p3"><div class="card">
-  <div class="entete"><div><h2>Activité 4. Ma première connexion</h2><p class="muted">Ton livret, page 5. Attends l'annonce de chaque étape avant de la faire.</p></div><span class="score">30 min</span></div>
+  <div class="carte-entete"><div><h2>Activité 4. Ma première connexion</h2><p class="muted">Ton livret, page 5. Attends l'annonce de chaque étape avant de la faire.</p></div><span class="score">30 min</span></div>
 
   <div class="steps" id="etapes"></div>
   <div class="row" style="margin-top:14px">
@@ -272,43 +119,43 @@ footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:cente
   <figure>
     <svg viewBox="0 0 780 300" role="img" aria-label="Un élève retrouve son dossier personnel depuis n'importe quel poste, alors que le bureau reste attaché à une seule machine">
       <defs>
-        <marker id="fl" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M0 0 L10 5 L0 10 z" fill="#172554"/></marker>
+        <marker id="fl" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M0 0 L10 5 L0 10 z" fill="var(--encre)"/></marker>
         <marker id="flr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M0 0 L10 5 L0 10 z" fill="#dc2626"/></marker>
       </defs>
       <g font-family="Inter, system-ui, sans-serif">
-        <circle cx="72" cy="112" r="19" fill="none" stroke="#172554" stroke-width="2.5"/>
-        <path d="M42 164 a30 34 0 0 1 60 0" fill="none" stroke="#172554" stroke-width="2.5"/>
+        <circle cx="72" cy="112" r="19" fill="none" stroke="var(--encre)" stroke-width="2.5"/>
+        <path d="M42 164 a30 34 0 0 1 60 0" fill="none" stroke="var(--encre)" stroke-width="2.5"/>
         <rect x="24" y="180" width="96" height="26" rx="13" fill="#2563eb"/>
         <text x="72" y="198" text-anchor="middle" font-size="13" font-weight="800" fill="#fff">mon compte</text>
-        <text x="72" y="224" text-anchor="middle" font-size="12.5" fill="#667085">Marie, 1C</text>
-        <g stroke="#172554" stroke-width="2.5" fill="#f8fafc">
+        <text x="72" y="224" text-anchor="middle" font-size="12.5" fill="var(--encre-douce)">Marie, 1C</text>
+        <g stroke="var(--encre)" stroke-width="2.5" fill="var(--papier)">
           <rect x="212" y="44" width="118" height="76" rx="8"/><rect x="212" y="168" width="118" height="76" rx="8"/>
         </g>
-        <path d="M255 120 h32 M271 120 v14 M253 134 h36" stroke="#172554" stroke-width="2.5" fill="none"/>
-        <path d="M255 244 h32 M271 244 v14 M253 258 h36" stroke="#172554" stroke-width="2.5" fill="none"/>
-        <text x="271" y="88" text-anchor="middle" font-size="14" font-weight="800" fill="#172554">Poste 3</text>
-        <text x="271" y="212" text-anchor="middle" font-size="14" font-weight="800" fill="#172554">Poste 17</text>
+        <path d="M255 120 h32 M271 120 v14 M253 134 h36" stroke="var(--encre)" stroke-width="2.5" fill="none"/>
+        <path d="M255 244 h32 M271 244 v14 M253 258 h36" stroke="var(--encre)" stroke-width="2.5" fill="none"/>
+        <text x="271" y="88" text-anchor="middle" font-size="14" font-weight="800" fill="var(--encre)">Poste 3</text>
+        <text x="271" y="212" text-anchor="middle" font-size="14" font-weight="800" fill="var(--encre)">Poste 17</text>
         <rect x="350" y="48" width="160" height="34" rx="12" fill="#fef2f2" stroke="#dc2626" stroke-width="2"/>
         <text x="430" y="70" text-anchor="middle" font-size="13" font-weight="800" fill="#991b1b">Bureau du poste 3</text>
         <path d="M330 65 h16" stroke="#dc2626" stroke-width="2.5" marker-end="url(#flr)"/>
         <text x="430" y="102" text-anchor="middle" font-size="12.5" fill="#991b1b">reste sur cette machine</text>
-        <path d="M116 100 C158 84, 176 76, 207 74" stroke="#172554" stroke-width="2" fill="none" stroke-dasharray="6 5" marker-end="url(#fl)"/>
-        <path d="M116 128 C158 152, 176 186, 207 198" stroke="#172554" stroke-width="2" fill="none" stroke-dasharray="6 5" marker-end="url(#fl)"/>
-        <text x="128" y="256" font-size="12.5" fill="#667085">je peux m'asseoir</text>
-        <text x="128" y="272" font-size="12.5" fill="#667085">à n'importe quel poste</text>
+        <path d="M116 100 C158 84, 176 76, 207 74" stroke="var(--encre)" stroke-width="2" fill="none" stroke-dasharray="6 5" marker-end="url(#fl)"/>
+        <path d="M116 128 C158 152, 176 186, 207 198" stroke="var(--encre)" stroke-width="2" fill="none" stroke-dasharray="6 5" marker-end="url(#fl)"/>
+        <text x="128" y="256" font-size="12.5" fill="var(--encre-douce)">je peux m'asseoir</text>
+        <text x="128" y="272" font-size="12.5" fill="var(--encre-douce)">à n'importe quel poste</text>
         <g transform="translate(560,100)">
-          <ellipse cx="80" cy="14" rx="80" ry="16" fill="#eff6ff" stroke="#172554" stroke-width="2.5"/>
-          <path d="M0 14 v74" stroke="#172554" stroke-width="2.5" fill="none"/>
-          <path d="M160 14 v74" stroke="#172554" stroke-width="2.5" fill="none"/>
-          <path d="M0 88 a80 16 0 0 0 160 0" fill="#eff6ff" stroke="#172554" stroke-width="2.5"/>
+          <ellipse cx="80" cy="14" rx="80" ry="16" fill="#eff6ff" stroke="var(--encre)" stroke-width="2.5"/>
+          <path d="M0 14 v74" stroke="var(--encre)" stroke-width="2.5" fill="none"/>
+          <path d="M160 14 v74" stroke="var(--encre)" stroke-width="2.5" fill="none"/>
+          <path d="M0 88 a80 16 0 0 0 160 0" fill="#eff6ff" stroke="var(--encre)" stroke-width="2.5"/>
           <ellipse cx="80" cy="47" rx="80" ry="16" fill="none" stroke="#bfdbfe" stroke-width="1.5"/>
-          <text x="80" y="128" text-anchor="middle" font-size="14" font-weight="800" fill="#172554">Serveur de l'école</text>
+          <text x="80" y="128" text-anchor="middle" font-size="14" font-weight="800" fill="var(--encre)">Serveur de l'école</text>
           <rect x="4" y="140" width="152" height="26" rx="13" fill="#2563eb"/>
           <text x="80" y="158" text-anchor="middle" font-size="12.5" font-weight="800" fill="#fff">mon dossier personnel</text>
         </g>
-        <path d="M330 96 C420 116, 470 118, 550 118" stroke="#172554" stroke-width="2.5" fill="none" marker-end="url(#fl)"/>
-        <path d="M330 206 C420 196, 470 164, 550 146" stroke="#172554" stroke-width="2.5" fill="none" marker-end="url(#fl)"/>
-        <text x="352" y="256" font-size="13" font-weight="800" fill="#172554">mon dossier me suit d'un poste à l'autre</text>
+        <path d="M330 96 C420 116, 470 118, 550 118" stroke="var(--encre)" stroke-width="2.5" fill="none" marker-end="url(#fl)"/>
+        <path d="M330 206 C420 196, 470 164, 550 146" stroke="var(--encre)" stroke-width="2.5" fill="none" marker-end="url(#fl)"/>
+        <text x="300" y="290" font-size="13" font-weight="800" fill="var(--encre)">mon dossier me suit d'un poste à l'autre</text>
       </g>
     </svg>
     <figcaption>Ce que tu enregistres sur le bureau reste sur cette machine et peut disparaître. Ce que tu enregistres dans ton dossier personnel, tu le retrouves depuis n'importe quel poste du local.</figcaption>
@@ -317,15 +164,15 @@ footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:cente
   <figure>
     <svg viewBox="0 0 620 290" role="img" aria-label="Le dossier FMTTN se trouve à l'intérieur du dossier personnel">
       <g font-family="Inter, system-ui, sans-serif" font-size="15">
-        <g stroke="#cbd5e1" stroke-width="2" fill="none">
+        <g stroke="var(--trait-fort)" stroke-width="2" fill="none">
           <path d="M46 56 v92"/><path d="M46 100 h26"/><path d="M86 108 v92"/><path d="M86 152 h26"/>
           <path d="M126 160 v92"/><path d="M126 204 h26"/><path d="M126 246 h26"/>
         </g>
-        <g transform="translate(20,32)"><path d="M0 6 h13 l4 6 h17 a3 3 0 0 1 3 3 v14 a3 3 0 0 1 -3 3 h-34 a3 3 0 0 1 -3 -3 v-20 a3 3 0 0 1 3 -3 z" fill="#eff6ff" stroke="#667085" stroke-width="2"/><text x="48" y="26" fill="#172033" font-weight="600">Serveur de l'école</text></g>
-        <g transform="translate(60,84)"><path d="M0 6 h13 l4 6 h17 a3 3 0 0 1 3 3 v14 a3 3 0 0 1 -3 3 h-34 a3 3 0 0 1 -3 -3 v-20 a3 3 0 0 1 3 -3 z" fill="#eff6ff" stroke="#667085" stroke-width="2"/><text x="48" y="26" fill="#172033" font-weight="600">Élèves</text></g>
-        <g transform="translate(100,136)"><path d="M0 6 h13 l4 6 h17 a3 3 0 0 1 3 3 v14 a3 3 0 0 1 -3 3 h-34 a3 3 0 0 1 -3 -3 v-20 a3 3 0 0 1 3 -3 z" fill="#eff6ff" stroke="#667085" stroke-width="2"/><text x="48" y="26" fill="#172033" font-weight="800">1C_dupont_marie</text><text x="215" y="26" fill="#667085" font-size="13">ton dossier personnel</text></g>
-        <g transform="translate(140,188)"><path d="M0 6 h13 l4 6 h17 a3 3 0 0 1 3 3 v14 a3 3 0 0 1 -3 3 h-34 a3 3 0 0 1 -3 -3 v-20 a3 3 0 0 1 3 -3 z" fill="#2563eb" stroke="#1d4ed8" stroke-width="2"/><rect x="42" y="7" width="78" height="23" rx="11" fill="#2563eb"/><text x="52" y="25" fill="#fff" font-weight="800">FMTTN</text><text x="134" y="26" fill="#667085" font-size="13">à créer aujourd'hui</text></g>
-        <g transform="translate(140,228)"><path d="M4 4 h20 l10 10 v20 a3 3 0 0 1 -3 3 h-27 a3 3 0 0 1 -3 -3 v-27 a3 3 0 0 1 3 -3 z" fill="#fff" stroke="#667085" stroke-width="2"/><path d="M24 4 v10 h10" fill="none" stroke="#667085" stroke-width="2"/><text x="48" y="28" fill="#172033" font-weight="600">test.txt</text><text x="134" y="28" fill="#667085" font-size="13">pour vérifier l'étape 5</text></g>
+        <g transform="translate(20,32)"><path d="M0 6 h13 l4 6 h17 a3 3 0 0 1 3 3 v14 a3 3 0 0 1 -3 3 h-34 a3 3 0 0 1 -3 -3 v-20 a3 3 0 0 1 3 -3 z" fill="#eff6ff" stroke="var(--encre-douce)" stroke-width="2"/><text x="48" y="26" fill="var(--encre)" font-weight="600">Serveur de l'école</text></g>
+        <g transform="translate(60,84)"><path d="M0 6 h13 l4 6 h17 a3 3 0 0 1 3 3 v14 a3 3 0 0 1 -3 3 h-34 a3 3 0 0 1 -3 -3 v-20 a3 3 0 0 1 3 -3 z" fill="#eff6ff" stroke="var(--encre-douce)" stroke-width="2"/><text x="48" y="26" fill="var(--encre)" font-weight="600">Élèves</text></g>
+        <g transform="translate(100,136)"><path d="M0 6 h13 l4 6 h17 a3 3 0 0 1 3 3 v14 a3 3 0 0 1 -3 3 h-34 a3 3 0 0 1 -3 -3 v-20 a3 3 0 0 1 3 -3 z" fill="#eff6ff" stroke="var(--encre-douce)" stroke-width="2"/><text x="48" y="26" fill="var(--encre)" font-weight="800">1C_dupont_marie</text><text x="215" y="26" fill="var(--encre-douce)" font-size="13">ton dossier personnel</text></g>
+        <g transform="translate(140,188)"><path d="M0 6 h13 l4 6 h17 a3 3 0 0 1 3 3 v14 a3 3 0 0 1 -3 3 h-34 a3 3 0 0 1 -3 -3 v-20 a3 3 0 0 1 3 -3 z" fill="#2563eb" stroke="#1d4ed8" stroke-width="2"/><rect x="42" y="7" width="78" height="23" rx="11" fill="#2563eb"/><text x="52" y="25" fill="#fff" font-weight="800">FMTTN</text><text x="134" y="26" fill="var(--encre-douce)" font-size="13">à créer aujourd'hui</text></g>
+        <g transform="translate(140,228)"><path d="M4 4 h20 l10 10 v20 a3 3 0 0 1 -3 3 h-27 a3 3 0 0 1 -3 -3 v-27 a3 3 0 0 1 3 -3 z" fill="#fff" stroke="var(--encre-douce)" stroke-width="2"/><path d="M24 4 v10 h10" fill="none" stroke="var(--encre-douce)" stroke-width="2"/><text x="48" y="28" fill="var(--encre)" font-weight="600">test.txt</text><text x="134" y="28" fill="var(--encre-douce)" font-size="13">pour vérifier l'étape 5</text></g>
       </g>
     </svg>
     <figcaption>Le dossier FMTTN se crée à l'intérieur de ton dossier personnel, jamais sur le bureau. Tu écris son nom en majuscules, sans espace ni accent.</figcaption>
@@ -334,7 +181,7 @@ footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:cente
 
 <!-- 5 -->
 <section class="panel" id="p4"><div class="card">
-  <div class="entete"><div><h2>Ma trace écrite</h2><p class="muted">Ton livret, dernière page. Complète les mots manquants.</p></div><span class="score">10 min</span></div>
+  <div class="carte-entete"><div><h2>Ma trace écrite</h2><p class="muted">Ton livret, dernière page. Complète les mots manquants.</p></div><span class="score">10 min</span></div>
 
   <div class="row" style="margin-bottom:16px">
     <button class="btn primary" id="motSuiv">Révéler le mot suivant</button>
@@ -347,7 +194,7 @@ footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:cente
 
 <!-- 6 -->
 <section class="panel" id="p5"><div class="card">
-  <div class="entete"><div><h2>Avant de partir</h2><p class="muted">On fait ces trois gestes à la fin de chaque cours, toute l'année.</p></div><span class="score">5 min</span></div>
+  <div class="carte-entete"><div><h2>Avant de partir</h2><p class="muted">On fait ces trois gestes à la fin de chaque cours, toute l'année.</p></div><span class="score">5 min</span></div>
   <div class="check">
     <label><input type="checkbox"><span>Je ferme ma session. Éteindre l'écran ne suffit pas.</span></label>
     <label><input type="checkbox"><span>Je range ma chaise et je ne laisse rien sur la table.</span></label>
@@ -358,7 +205,9 @@ footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:cente
 </div></section>
 
 </main>
-<footer>Cours 1 · Formation numérique · 1re année · M. Courcelle</footer>
+<footer class="pied">
+  <div class="pied__interieur">Cours 1 · Formation numérique · 1re année · M. Courcelle</div>
+</footer>
 
 <script>
 "use strict";
@@ -566,8 +415,8 @@ function dessineTrace(){
     return "<p>"+par.map(function(x){
       if(typeof x==="number"){
         return x<=reveles
-          ? '<b style="color:#1d4ed8">'+MOTS[x]+'</b>'
-          : '<span style="border-bottom:2px solid #93c5fd;color:#93c5fd">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>';
+          ? '<b style="color:var(--accent-encre)">'+MOTS[x]+'</b>'
+          : '<span style="border-bottom:2px solid var(--accent);color:var(--accent)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>';
       }
       return x;
     }).join("")+"</p>";
diff --git a/1re-numerique/1TC-NUM_bloc-01_pilotage.html b/1re-numerique/1TC-NUM_bloc-01_pilotage.html
index c515d79..07580d8 100644
--- a/1re-numerique/1TC-NUM_bloc-01_pilotage.html
+++ b/1re-numerique/1TC-NUM_bloc-01_pilotage.html
@@ -1,202 +1,49 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="fr">
 <head>
 <meta charset="utf-8">
-<meta name="viewport" content="width=device-width,initial-scale=1">
-<title>Bloc 1 – Ouvrir le cours et savoir où l'on met les pieds</title>
-<style>:root{--ink:#172033;--muted:#667085;--blue:#2563eb;--navy:#172554;--green:#16a34a;--red:#dc2626;--card:#fff;--line:#e5e7eb;--shadow:0 18px 45px #0f172a18}
-*{box-sizing:border-box}html{scroll-behavior:smooth}
-body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:linear-gradient(180deg,#edf4ff,#f8fafc 34%,#fff);color:var(--ink)}
-button,input,select{font:inherit}
-main{max-width:1180px;margin:auto;padding:34px 20px 70px}
-:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
-svg.i{width:1em;height:1em;vertical-align:-.14em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
-
-.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;background:linear-gradient(135deg,#172554,#2563eb);color:#fff;border-radius:28px;padding:30px;box-shadow:var(--shadow);margin-bottom:24px}
-.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:900;opacity:.82}
-.hero h1{font-size:clamp(30px,4.6vw,52px);line-height:1;letter-spacing:-1.6px;margin:7px 0 12px}
-.hero p{margin:0;color:#dbeafe;line-height:1.6;font-size:17px}
-.hero a.up{display:inline-flex;align-items:center;gap:7px;color:#bfdbfe;font-weight:800;font-size:13px;text-decoration:none;margin-bottom:10px}
-.hero a.up:hover{color:#fff}
-.hero-visual{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
-.hero-chip{background:#ffffff14;border:1px solid #ffffff28;border-radius:18px;padding:16px;text-align:center}
-.hero-chip .ico{display:block;margin:0 auto 7px;width:30px;height:30px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
-.hero-chip b{font-size:14px}
-.badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
-.badge{background:#ffffff1f;border:1px solid #ffffff2e;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:800;color:#e0ecff}
-.badge.warn{background:#dc262633;border-color:#fca5a5;color:#fee2e2}
-
-.dashboard{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
-.stat{background:#fff;border:1px solid var(--line);border-radius:17px;padding:14px;box-shadow:0 8px 24px #0f172a0b}
-.stat strong{display:block;font-size:22px;margin-top:3px}
-.stat small{color:#64748b;font-weight:800}
-.stat.ok strong{color:var(--green)}
-
-.chrono{background:#172554;color:#fff;border-radius:20px;padding:16px 18px;box-shadow:var(--shadow);margin-bottom:20px;display:grid;gap:12px}
-.chrono-haut{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
-.pendule{font-size:32px;font-weight:950;font-variant-numeric:tabular-nums;line-height:1}
-.pendule small{display:block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#93b4d8;margin-top:5px}
-.ecart{font-size:14px;font-weight:850;padding:9px 14px;border-radius:999px;background:#ffffff1a;border:1px solid #ffffff2e;min-width:250px;text-align:center}
-.ecart.avance{background:#16a34a2e;border-color:#4ade80;color:#dcfce7}
-.ecart.retard{background:#dc26262e;border-color:#fca5a5;color:#fee2e2}
-.chrono .row button{background:#ffffff1a;border:1px solid #ffffff30;color:#fff}
-.chrono .row button.go{background:#fff;border-color:#fff;color:#172554}
-
-.navtabs{display:grid;gap:10px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:0 8px 24px #0f172a0b;margin-bottom:20px}
-.navtabs.n6{grid-template-columns:repeat(6,1fr)}
-.tab{border:2px solid #e2e8f0;background:#fff;border-radius:14px;padding:12px 10px;font-weight:900;cursor:pointer;color:#334155;text-align:left;position:relative}
-.tab span{display:block;font-size:11px;font-weight:800;color:#94a3b8;margin-top:3px;font-variant-numeric:tabular-nums}
-.tab:hover{border-color:#93c5fd}
-.tab.active{background:#2563eb;color:#fff;border-color:#2563eb;box-shadow:0 8px 18px #2563eb28}
-.tab.active span{color:#c7dcff}
-.tab.prevue::after{content:"";position:absolute;left:12px;right:12px;bottom:-2px;height:4px;border-radius:99px;background:#f59e0b}
-
-.panel{display:none}.panel.active{display:block}
-.card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 10px 28px #0f172a0d;margin-bottom:16px}
-.card h2,.card h3{margin-top:0}
-.card h2{font-size:26px;letter-spacing:-.5px}
-.muted{color:var(--muted);line-height:1.6}
-.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
-.btn{border:0;border-radius:11px;padding:10px 15px;font-weight:850;cursor:pointer;background:#eaf1ff;color:#1d4ed8}
-.btn:hover{filter:brightness(.97)}
-.btn.primary{background:#2563eb;color:#fff}
-.btn.soft{background:#f1f5f9;color:#334155}
-.score{display:inline-block;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:7px 12px;font-weight:900;font-size:14px}
-.feedback{min-height:31px;margin-top:12px;font-weight:850}
-.entete{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:flex-start;margin-bottom:14px}
-.consigne{background:linear-gradient(145deg,#f8fafc,#eef6ff);border:2px solid #dbeafe;border-radius:18px;padding:20px 24px;font-size:20px;font-weight:800;line-height:1.45;margin:16px 0}
-.consigne small{display:block;text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:900;color:var(--blue);margin-bottom:8px}
-.info{border-left:4px solid #cbd5e1;background:#f8fafc;border-radius:0 12px 12px 0;padding:13px 17px;color:#475569;font-size:15px;line-height:1.6;margin-top:16px}
-.info b{color:var(--ink)}
-.info.alerte{border-color:#fca5a5;background:#fef4f4;color:#7f2b2b}
-.info.alerte b{color:#991b1b}
-
-.saisie{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px}
-.saisie input{flex:1;min-width:210px;padding:12px 14px;border:2px solid #cbd5e1;border-radius:12px;outline:none}
-.saisie input:focus{border-color:var(--blue);box-shadow:0 0 0 4px #2563eb18}
-.saisie select{padding:12px 14px;border:2px solid #cbd5e1;border-radius:12px;font-weight:800}
-.colonnes{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:11px}
-.colonne{border:1px solid var(--line);border-radius:17px;background:#f8fbff;min-height:145px;padding:13px}
-.colonne h3{font-size:14px;display:flex;justify-content:space-between;align-items:center;margin:0 0 9px;padding-bottom:8px;border-bottom:1px solid var(--line)}
-.colonne h3 em{font-style:normal;color:#94a3b8;font-size:12px}
-.colonne ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
-.colonne li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:7px 10px;font-size:14px;font-weight:700;display:flex;justify-content:space-between;gap:6px}
-.colonne li button{background:none;border:0;color:#cbd5e1;cursor:pointer;padding:0 3px;font-weight:900}
-.colonne li button:hover{color:var(--red)}
-
-.accordeon{display:grid;gap:10px}
-.item{border:1px solid var(--line);border-radius:17px;background:#fff;overflow:hidden}
-.item>button{width:100%;display:flex;gap:14px;align-items:flex-start;text-align:left;background:none;border:0;padding:15px 18px;cursor:pointer}
-.item>button:hover{background:#f8fbff}
-.item .n{width:30px;height:30px;flex:none;border-radius:10px;background:#eaf1ff;color:#1d4ed8;font-weight:950;display:grid;place-items:center;font-size:14px}
-.item .t{font-weight:850;font-size:17px;flex:1}
-.item .plus{color:#94a3b8;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;padding-top:6px}
-.item .corps{display:none;padding:0 18px 17px 62px;color:#475569;line-height:1.6}
-.item.ouvert .corps{display:block}
-.item.ouvert{border-color:#93c5fd;box-shadow:0 8px 20px #2563eb14}
-.item.ouvert .n{background:#2563eb;color:#fff}
-
-.qcard{border:2px solid #dbeafe;border-radius:20px;background:linear-gradient(145deg,#fbfdff,#f4f9ff);padding:24px 26px}
-.qtag{display:inline-block;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:900;margin-bottom:10px}
-.qtag.cle{background:#fef3c7;color:#92400e}
-.qtxt{font-size:22px;font-weight:900;line-height:1.3;letter-spacing:-.3px;margin-bottom:16px}
-.answer-grid{display:grid;gap:8px}
-.answer{border:2px solid #dbe3ef;background:#fff;border-radius:12px;padding:11px 14px;text-align:left;font-weight:800}
-.answer.ok{border-color:#22c55e;background:#f0fdf4}
-.reveal{display:none;margin-top:16px;border-top:2px dashed #dbeafe;padding-top:15px}
-.reveal.on{display:block}
-.verdict{font-weight:950;color:var(--green);margin-bottom:8px}
-
-.steps{display:grid;gap:11px}
-.step{border:1px solid var(--line);border-radius:17px;background:#fff;padding:16px 20px;display:flex;gap:15px;align-items:flex-start;opacity:.4}
-.step.on{opacity:1;border-color:#93c5fd;box-shadow:0 8px 20px #2563eb14}
-.step.fait{opacity:1}
-.step .n{width:34px;height:34px;flex:none;border-radius:12px;background:#f1f5f9;color:#94a3b8;font-weight:950;display:grid;place-items:center}
-.step.on .n{background:#2563eb;color:#fff}
-.step.fait .n{background:#dcfce7;color:#15803d}
-.step h3{margin:0 0 4px;font-size:17px}
-.step p{margin:0;color:#475569;font-size:15px;line-height:1.55}
-
-figure{margin:0 0 18px}
-figure svg{width:100%;height:auto;display:block;background:#fff;border:1px solid var(--line);border-radius:18px}
-figcaption{font-size:14px;color:var(--muted);margin-top:10px;line-height:1.55}
-
-.trace{border:2px solid #dbeafe;background:linear-gradient(145deg,#fbfdff,#eef6ff);border-radius:20px;padding:26px 30px;font-size:19px;line-height:1.85}
-.trace h3{margin:0 0 14px;font-size:22px}
-.trace p{margin:0 0 .5em}
-.trace code{background:#fff;border:1px solid #dbeafe;border-radius:6px;padding:1px 7px;font-size:.92em}
-
-.check{display:grid;gap:9px}
-.check label{display:flex;gap:13px;align-items:flex-start;border:1px solid var(--line);border-radius:15px;background:#fff;padding:14px 18px;cursor:pointer;font-weight:750}
-.check label:hover{border-color:#93c5fd}
-.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--green);flex:none}
-.check input:checked+span{color:var(--green);font-weight:900}
-
-table.grille{width:100%;border-collapse:collapse;font-size:15px}
-table.grille th,table.grille td{border:1px solid var(--line);padding:10px 13px;text-align:left}
-table.grille th{background:#f8fafc;font-weight:900;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:#475569}
-table.grille td.masque{color:transparent;background:#f8fafc}
-table.grille tr.on td{background:#f0fdf4}
-table.grille td b{color:#15803d}
-
-.filtres{display:flex;gap:9px;flex-wrap:wrap;align-items:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:0 8px 24px #0f172a0b;margin-bottom:20px}
-.filtres .compte{margin-left:auto;font-weight:850;color:var(--muted);font-size:14px}
-.module{margin-bottom:30px}
-.module-tete{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px}
-.module-tete h2{margin:0;font-size:25px;letter-spacing:-.6px}
-.module-tete .p{background:#172554;color:#fff;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:900}
-.module-tete .champ{color:var(--muted);font-size:14px;margin-left:auto}
-.module-note{color:var(--muted);line-height:1.6;margin:0 0 16px;max-width:76ch}
-.blocs{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
-.bloc{border:1px solid var(--line);border-radius:20px;background:#fff;padding:17px 19px;display:flex;gap:15px;align-items:flex-start;text-decoration:none;color:inherit;box-shadow:0 8px 24px #0f172a08}
-.bloc .n{width:40px;height:40px;flex:none;border-radius:14px;background:#f1f5f9;color:#94a3b8;font-weight:950;display:grid;place-items:center;font-size:17px}
-.bloc h3{margin:0 0 5px;font-size:17px;line-height:1.3}
-.bloc .att{font-size:13px;color:var(--muted);font-weight:600}
-.ets{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
-.et{font-size:11px;font-weight:900;border-radius:999px;padding:4px 9px;background:#f1f5f9;color:#475569}
-.et.eval{background:#fee2e2;color:#991b1b}
-.et.fac{background:#f3e8ff;color:#6b21a8}
-.et.pret{background:#dcfce7;color:#15803d}
-a.bloc:hover{border-color:#93c5fd;box-shadow:0 12px 28px #2563eb1f}
-a.bloc .n{background:#2563eb;color:#fff}
-.bloc.vide{border-style:dashed;opacity:.68;box-shadow:none}
-.bloc.vide h3{font-weight:800}
-.masque{display:none!important}
-
-footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:center;color:#64748b;font-size:12px;border-top:1px solid var(--line)}
-
-@media(max-width:980px){.hero{grid-template-columns:1fr}.dashboard{grid-template-columns:repeat(2,1fr)}.navtabs.n6{grid-template-columns:repeat(3,1fr)}}
-@media(max-width:620px){main{padding:20px 12px 60px}.hero{padding:22px 18px}.dashboard{grid-template-columns:1fr}.navtabs.n6{grid-template-columns:repeat(2,1fr)}.blocs{grid-template-columns:1fr}.ecart{min-width:0;flex:1}.filtres .compte{margin-left:0;width:100%}}
-@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
-@media print{.chrono,.navtabs,.filtres,.saisie{display:none}.panel{display:block!important}}
-</style>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Bloc 1, pilotage — 1re tronc commun</title>
+<meta name="robots" content="noindex">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="../assets/theme.css">
+<link rel="stylesheet" href="../assets/numerique-1re.css">
 </head>
-<body>
-<main>
+<body class="classe-tc">
 
-<section class="hero">
-  <div>
-    <a class="up" href="pilotage.html"><svg class="i" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg> Retour au menu des blocs</a>
-    <div class="eyebrow">Document enseignant · Module 1 · Semaine 1 · Bloc 1 sur 35</div>
+<header class="entete">
+  <div class="entete__interieur entete__interieur--large">
+    <nav class="ariane" aria-label="Fil d'Ariane">
+      <a href="../index.html">Mes cours</a><span aria-hidden="true">/</span><a href="index.html">1re tronc commun</a><span aria-hidden="true">/</span><a href="pilotage.html">Pilotage</a><span aria-hidden="true">/</span><strong>Bloc 1</strong>
+    </nav>
     <h1>Ouvrir le cours et savoir où l'on met les pieds</h1>
-    <p style="margin-bottom:10px"><a href="1TC-NUM_bloc-01_ouvrir-le-cours.html" style="color:#fff;font-weight:800">Ouvrir la version à projeter aux élèves</a></p>
-    <p>Établir le cadre du local, mesurer ce que les élèves ramènent réellement du fondamental, et vérifier que chaque compte fonctionne avant que le module 1 ne démarre au bloc 2.</p>
-    <div class="badges">
-      <span class="badge">1TC-NUM · 1re secondaire</span>
-      <span class="badge">2 périodes · 100 minutes</span>
-      <span class="badge">Champ Informations et données</span>
-      <span class="badge warn">Aucun attendu prescrit · non cotable</span>
-      <span class="badge warn">Ne pas projeter</span>
-      <span class="badge">Première rencontre : bien-être numérique (brochure)</span>
-    </div>
+    <p class="entete__meta">Document enseignant · Module 1 · Semaine 1 · Bloc 1 sur 35</p>
   </div>
-  <div class="hero-visual">
-    <div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M12 3v3M5.6 5.6l2.1 2.1M3 12h3M5.6 18.4l2.1-2.1M12 18v3M18.4 18.4l-2.1-2.1M21 12h-3M18.4 5.6l-2.1 2.1"/><circle cx="12" cy="12" r="3"/></svg><b>Accroche</b></div>
-    <div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M6 3h9l4 4v14H6z"/><path d="M14 3v5h5M9 13h7M9 17h5"/></svg><b>Charte</b></div>
-    <div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M9.5 9a2.5 2.5 0 1 1 3.4 2.3c-.6.3-.9.8-.9 1.4v.6"/><circle cx="12" cy="17" r="1"/><circle cx="12" cy="12" r="9"/></svg><b>Diagnostic</b></div>
-    <div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="13" rx="2"/><path d="M8 21h8M12 17v4M8.5 10.5l2 2 4.5-4.5"/></svg><b>Connexion</b></div>
-  </div>
-</section>
+</header>
+
+<main class="contenu contenu--large">
+
+  <p class="chapeau"><a href="1TC-NUM_bloc-01_ouvrir-le-cours.html">Ouvrir la version à projeter aux élèves</a></p>
+  <p class="chapeau">Établir le cadre du local, mesurer ce que les élèves ramènent réellement du fondamental, et vérifier que chaque compte fonctionne avant que le module 1 ne démarre au bloc 2.</p>
+
+  <ul class="etiquettes">
+    <li class="etiquette">1TC-NUM · 1re secondaire</li>
+    <li class="etiquette">2 périodes · 100 minutes</li>
+    <li class="etiquette">Champ Informations et données</li>
+    <li class="etiquette etiquette--alerte">Aucun attendu prescrit · non cotable</li>
+    <li class="etiquette etiquette--alerte">Ne pas projeter</li>
+    <li class="etiquette">Première rencontre : bien-être numérique (brochure)</li>
+  </ul>
+
+  <ul class="apercu">
+    <li><svg viewBox="0 0 24 24"><path d="M12 3v3M5.6 5.6l2.1 2.1M3 12h3M5.6 18.4l2.1-2.1M12 18v3M18.4 18.4l-2.1-2.1M21 12h-3M18.4 5.6l-2.1 2.1"/><circle cx="12" cy="12" r="3"/></svg><span>Accroche</span></li>
+    <li><svg viewBox="0 0 24 24"><path d="M6 3h9l4 4v14H6z"/><path d="M14 3v5h5M9 13h7M9 17h5"/></svg><span>Charte</span></li>
+    <li><svg viewBox="0 0 24 24"><path d="M9.5 9a2.5 2.5 0 1 1 3.4 2.3c-.6.3-.9.8-.9 1.4v.6"/><circle cx="12" cy="17" r="1"/><circle cx="12" cy="12" r="9"/></svg><span>Diagnostic</span></li>
+    <li><svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="13" rx="2"/><path d="M8 21h8M12 17v4M8.5 10.5l2 2 4.5-4.5"/></svg><span>Connexion</span></li>
+  </ul>
+
 
 <section class="dashboard">
   <div class="stat"><small>Temps écoulé</small><strong id="sTemps">00:00</strong></div>
@@ -209,7 +56,7 @@ footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:cente
   <div class="row">
     <button class="btn primary" id="btnGo">Démarrer la séance</button>
     <button class="btn soft" id="btnStop">Remettre à zéro</button>
-    <span class="ecart" id="ecart" style="background:#f1f5f9;border:1px solid var(--line);color:#475569">Séance non démarrée</span>
+    <span class="ecart" id="ecart" style="background:var(--papier);border:1px solid var(--line);color:var(--encre-douce)">Séance non démarrée</span>
   </div>
 </div>
 
@@ -217,7 +64,7 @@ footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:cente
 
 <!-- 1. ACCROCHE -->
 <section class="panel active" id="p0"><div class="card">
-  <div class="entete">
+  <div class="carte-entete">
     <div><h2>Accroche débranchée</h2><p class="muted">Machines éteintes. Cinq minutes d'écriture individuelle, cinq minutes de recensement, cinq minutes de classement. Les catégories ne sont pas données, elles émergent de la classe.</p></div>
     <span class="score">15 min · de 0 à 15</span>
   </div>
@@ -241,7 +88,7 @@ footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:cente
 
 <!-- 2. CHARTE -->
 <section class="panel" id="p1"><div class="card">
-  <div class="entete">
+  <div class="carte-entete">
     <div><h2>Charte du local</h2><p class="muted">Pour chaque règle, poser la question à la classe avant d'ouvrir la justification : à ton avis, pourquoi cette règle existe.</p></div>
     <span class="score">15 min · de 15 à 30</span>
   </div>
@@ -251,7 +98,7 @@ footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:cente
 
 <!-- 3. DIAGNOSTIC -->
 <section class="panel" id="p2"><div class="card">
-  <div class="entete">
+  <div class="carte-entete">
     <div><h2>Diagnostic du déjà-là</h2><p class="muted">Quinze minutes de passation sur papier, en silence. Dix minutes de correction collective ici.</p></div>
     <span class="score">25 min · de 30 à 55</span>
   </div>
@@ -274,7 +121,7 @@ footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:cente
 
 <!-- 4. CONNEXION -->
 <section class="panel" id="p3"><div class="card">
-  <div class="entete">
+  <div class="carte-entete">
     <div><h2>Première connexion</h2><p class="muted">Cinq étapes énoncées une par une, jamais les cinq d'un coup.</p></div>
     <span class="score">30 min · de 55 à 85</span>
   </div>
@@ -293,49 +140,49 @@ footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:cente
   <figure>
     <svg viewBox="0 0 780 300" role="img" aria-label="Schéma montrant qu'un élève retrouve son dossier personnel depuis n'importe quel poste, alors que le bureau reste attaché à une seule machine">
       <defs>
-        <marker id="fl" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M0 0 L10 5 L0 10 z" fill="#172554"/></marker>
+        <marker id="fl" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M0 0 L10 5 L0 10 z" fill="var(--encre)"/></marker>
         <marker id="flr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M0 0 L10 5 L0 10 z" fill="#dc2626"/></marker>
       </defs>
       <g font-family="Inter, system-ui, sans-serif">
-        <circle cx="72" cy="112" r="19" fill="none" stroke="#172554" stroke-width="2.5"/>
-        <path d="M42 164 a30 34 0 0 1 60 0" fill="none" stroke="#172554" stroke-width="2.5"/>
+        <circle cx="72" cy="112" r="19" fill="none" stroke="var(--encre)" stroke-width="2.5"/>
+        <path d="M42 164 a30 34 0 0 1 60 0" fill="none" stroke="var(--encre)" stroke-width="2.5"/>
         <rect x="24" y="180" width="96" height="26" rx="13" fill="#2563eb"/>
         <text x="72" y="198" text-anchor="middle" font-size="13" font-weight="800" fill="#fff">mon compte</text>
-        <text x="72" y="224" text-anchor="middle" font-size="12.5" fill="#667085">Marie, 1C</text>
+        <text x="72" y="224" text-anchor="middle" font-size="12.5" fill="var(--encre-douce)">Marie, 1C</text>
 
-        <g stroke="#172554" stroke-width="2.5" fill="#f8fafc">
+        <g stroke="var(--encre)" stroke-width="2.5" fill="var(--papier)">
           <rect x="212" y="44" width="118" height="76" rx="8"/>
           <rect x="212" y="168" width="118" height="76" rx="8"/>
         </g>
-        <path d="M255 120 h32 M271 120 v14 M253 134 h36" stroke="#172554" stroke-width="2.5" fill="none"/>
-        <path d="M255 244 h32 M271 244 v14 M253 258 h36" stroke="#172554" stroke-width="2.5" fill="none"/>
-        <text x="271" y="88" text-anchor="middle" font-size="14" font-weight="800" fill="#172554">Poste 3</text>
-        <text x="271" y="212" text-anchor="middle" font-size="14" font-weight="800" fill="#172554">Poste 17</text>
+        <path d="M255 120 h32 M271 120 v14 M253 134 h36" stroke="var(--encre)" stroke-width="2.5" fill="none"/>
+        <path d="M255 244 h32 M271 244 v14 M253 258 h36" stroke="var(--encre)" stroke-width="2.5" fill="none"/>
+        <text x="271" y="88" text-anchor="middle" font-size="14" font-weight="800" fill="var(--encre)">Poste 3</text>
+        <text x="271" y="212" text-anchor="middle" font-size="14" font-weight="800" fill="var(--encre)">Poste 17</text>
 
         <rect x="350" y="48" width="160" height="34" rx="12" fill="#fef2f2" stroke="#dc2626" stroke-width="2"/>
         <text x="430" y="70" text-anchor="middle" font-size="13" font-weight="800" fill="#991b1b">Bureau du poste 3</text>
         <path d="M330 65 h16" stroke="#dc2626" stroke-width="2.5" marker-end="url(#flr)"/>
         <text x="430" y="102" text-anchor="middle" font-size="12.5" fill="#991b1b">reste sur cette machine</text>
 
-        <path d="M116 100 C158 84, 176 76, 207 74" stroke="#172554" stroke-width="2" fill="none" stroke-dasharray="6 5" marker-end="url(#fl)"/>
-        <path d="M116 128 C158 152, 176 186, 207 198" stroke="#172554" stroke-width="2" fill="none" stroke-dasharray="6 5" marker-end="url(#fl)"/>
-        <text x="128" y="256" font-size="12.5" fill="#667085">je peux m'asseoir</text>
-        <text x="128" y="272" font-size="12.5" fill="#667085">à n'importe quel poste</text>
+        <path d="M116 100 C158 84, 176 76, 207 74" stroke="var(--encre)" stroke-width="2" fill="none" stroke-dasharray="6 5" marker-end="url(#fl)"/>
+        <path d="M116 128 C158 152, 176 186, 207 198" stroke="var(--encre)" stroke-width="2" fill="none" stroke-dasharray="6 5" marker-end="url(#fl)"/>
+        <text x="128" y="256" font-size="12.5" fill="var(--encre-douce)">je peux m'asseoir</text>
+        <text x="128" y="272" font-size="12.5" fill="var(--encre-douce)">à n'importe quel poste</text>
 
         <g transform="translate(560,100)">
-          <ellipse cx="80" cy="14" rx="80" ry="16" fill="#eff6ff" stroke="#172554" stroke-width="2.5"/>
-          <path d="M0 14 v74" stroke="#172554" stroke-width="2.5" fill="none"/>
-          <path d="M160 14 v74" stroke="#172554" stroke-width="2.5" fill="none"/>
-          <path d="M0 88 a80 16 0 0 0 160 0" fill="#eff6ff" stroke="#172554" stroke-width="2.5"/>
+          <ellipse cx="80" cy="14" rx="80" ry="16" fill="#eff6ff" stroke="var(--encre)" stroke-width="2.5"/>
+          <path d="M0 14 v74" stroke="var(--encre)" stroke-width="2.5" fill="none"/>
+          <path d="M160 14 v74" stroke="var(--encre)" stroke-width="2.5" fill="none"/>
+          <path d="M0 88 a80 16 0 0 0 160 0" fill="#eff6ff" stroke="var(--encre)" stroke-width="2.5"/>
           <ellipse cx="80" cy="47" rx="80" ry="16" fill="none" stroke="#bfdbfe" stroke-width="1.5"/>
-          <text x="80" y="128" text-anchor="middle" font-size="14" font-weight="800" fill="#172554">Serveur de l'école</text>
+          <text x="80" y="128" text-anchor="middle" font-size="14" font-weight="800" fill="var(--encre)">Serveur de l'école</text>
           <rect x="4" y="140" width="152" height="26" rx="13" fill="#2563eb"/>
           <text x="80" y="158" text-anchor="middle" font-size="12.5" font-weight="800" fill="#fff">mon dossier personnel</text>
         </g>
 
-        <path d="M330 96 C420 116, 470 118, 550 118" stroke="#172554" stroke-width="2.5" fill="none" marker-end="url(#fl)"/>
-        <path d="M330 206 C420 196, 470 164, 550 146" stroke="#172554" stroke-width="2.5" fill="none" marker-end="url(#fl)"/>
-        <text x="352" y="256" font-size="13" font-weight="800" fill="#172554">mon dossier me suit d'un poste à l'autre</text>
+        <path d="M330 96 C420 116, 470 118, 550 118" stroke="var(--encre)" stroke-width="2.5" fill="none" marker-end="url(#fl)"/>
+        <path d="M330 206 C420 196, 470 164, 550 146" stroke="var(--encre)" stroke-width="2.5" fill="none" marker-end="url(#fl)"/>
+        <text x="300" y="290" font-size="13" font-weight="800" fill="var(--encre)">mon dossier me suit d'un poste à l'autre</text>
       </g>
     </svg>
     <figcaption>Le compte suit l'élève, la machine ne le suit pas. Ce point justifie à lui seul l'étape 4 et la règle 7 de la charte. Il sera repris et approfondi au bloc 3.</figcaption>
@@ -344,35 +191,35 @@ footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:cente
   <figure>
     <svg viewBox="0 0 620 290" role="img" aria-label="Arborescence du dossier personnel contenant le dossier FMTTN et le fichier test point txt">
       <g font-family="Inter, system-ui, sans-serif" font-size="15">
-        <g stroke="#cbd5e1" stroke-width="2" fill="none">
+        <g stroke="var(--trait-fort)" stroke-width="2" fill="none">
           <path d="M46 56 v92"/><path d="M46 100 h26"/>
           <path d="M86 108 v92"/><path d="M86 152 h26"/>
           <path d="M126 160 v92"/><path d="M126 204 h26"/><path d="M126 246 h26"/>
         </g>
         <g transform="translate(20,32)">
-          <path d="M0 6 h13 l4 6 h17 a3 3 0 0 1 3 3 v14 a3 3 0 0 1 -3 3 h-34 a3 3 0 0 1 -3 -3 v-20 a3 3 0 0 1 3 -3 z" fill="#eff6ff" stroke="#667085" stroke-width="2"/>
-          <text x="48" y="26" fill="#172033" font-weight="600">Serveur de l'école</text>
+          <path d="M0 6 h13 l4 6 h17 a3 3 0 0 1 3 3 v14 a3 3 0 0 1 -3 3 h-34 a3 3 0 0 1 -3 -3 v-20 a3 3 0 0 1 3 -3 z" fill="#eff6ff" stroke="var(--encre-douce)" stroke-width="2"/>
+          <text x="48" y="26" fill="var(--encre)" font-weight="600">Serveur de l'école</text>
         </g>
         <g transform="translate(60,84)">
-          <path d="M0 6 h13 l4 6 h17 a3 3 0 0 1 3 3 v14 a3 3 0 0 1 -3 3 h-34 a3 3 0 0 1 -3 -3 v-20 a3 3 0 0 1 3 -3 z" fill="#eff6ff" stroke="#667085" stroke-width="2"/>
-          <text x="48" y="26" fill="#172033" font-weight="600">Élèves</text>
+          <path d="M0 6 h13 l4 6 h17 a3 3 0 0 1 3 3 v14 a3 3 0 0 1 -3 3 h-34 a3 3 0 0 1 -3 -3 v-20 a3 3 0 0 1 3 -3 z" fill="#eff6ff" stroke="var(--encre-douce)" stroke-width="2"/>
+          <text x="48" y="26" fill="var(--encre)" font-weight="600">Élèves</text>
         </g>
         <g transform="translate(100,136)">
-          <path d="M0 6 h13 l4 6 h17 a3 3 0 0 1 3 3 v14 a3 3 0 0 1 -3 3 h-34 a3 3 0 0 1 -3 -3 v-20 a3 3 0 0 1 3 -3 z" fill="#eff6ff" stroke="#667085" stroke-width="2"/>
-          <text x="48" y="26" fill="#172033" font-weight="800">1C_dupont_marie</text>
-          <text x="215" y="26" fill="#667085" font-size="13">mon dossier personnel</text>
+          <path d="M0 6 h13 l4 6 h17 a3 3 0 0 1 3 3 v14 a3 3 0 0 1 -3 3 h-34 a3 3 0 0 1 -3 -3 v-20 a3 3 0 0 1 3 -3 z" fill="#eff6ff" stroke="var(--encre-douce)" stroke-width="2"/>
+          <text x="48" y="26" fill="var(--encre)" font-weight="800">1C_dupont_marie</text>
+          <text x="215" y="26" fill="var(--encre-douce)" font-size="13">mon dossier personnel</text>
         </g>
         <g transform="translate(140,188)">
           <path d="M0 6 h13 l4 6 h17 a3 3 0 0 1 3 3 v14 a3 3 0 0 1 -3 3 h-34 a3 3 0 0 1 -3 -3 v-20 a3 3 0 0 1 3 -3 z" fill="#2563eb" stroke="#1d4ed8" stroke-width="2"/>
           <rect x="42" y="7" width="78" height="23" rx="11" fill="#2563eb"/>
           <text x="52" y="25" fill="#fff" font-weight="800">FMTTN</text>
-          <text x="134" y="26" fill="#667085" font-size="13">à créer aujourd'hui</text>
+          <text x="134" y="26" fill="var(--encre-douce)" font-size="13">à créer aujourd'hui</text>
         </g>
         <g transform="translate(140,228)">
-          <path d="M4 4 h20 l10 10 v20 a3 3 0 0 1 -3 3 h-27 a3 3 0 0 1 -3 -3 v-27 a3 3 0 0 1 3 -3 z" fill="#fff" stroke="#667085" stroke-width="2"/>
-          <path d="M24 4 v10 h10" fill="none" stroke="#667085" stroke-width="2"/>
-          <text x="48" y="28" fill="#172033" font-weight="600">test.txt</text>
-          <text x="134" y="28" fill="#667085" font-size="13">vérification de l'étape 5</text>
+          <path d="M4 4 h20 l10 10 v20 a3 3 0 0 1 -3 3 h-27 a3 3 0 0 1 -3 -3 v-27 a3 3 0 0 1 3 -3 z" fill="#fff" stroke="var(--encre-douce)" stroke-width="2"/>
+          <path d="M24 4 v10 h10" fill="none" stroke="var(--encre-douce)" stroke-width="2"/>
+          <text x="48" y="28" fill="var(--encre)" font-weight="600">test.txt</text>
+          <text x="134" y="28" fill="var(--encre-douce)" font-size="13">vérification de l'étape 5</text>
         </g>
       </g>
     </svg>
@@ -384,7 +231,7 @@ footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:cente
 
 <!-- 5. TRACE -->
 <section class="panel" id="p4"><div class="card">
-  <div class="entete">
+  <div class="carte-entete">
     <div><h2>Trace écrite</h2><p class="muted">La fiche « Mon compte scolaire » et la trace écrite figurent déjà dans le livret élève. Trois minutes pour la fiche, cinq pour compléter les mots manquants de la trace.</p></div>
     <span class="score">10 min · de 85 à 95</span>
   </div>
@@ -405,7 +252,7 @@ footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:cente
 
 <!-- 6. FERMETURE -->
 <section class="panel" id="p5"><div class="card">
-  <div class="entete">
+  <div class="carte-entete">
     <div><h2>Fermeture</h2><p class="muted">Ce geste se répète trente-cinq fois cette année et construit à lui seul l'attendu SF53, effacer toute trace de connexion sur un équipement partagé.</p></div>
     <span class="score">5 min · de 95 à 100</span>
   </div>
@@ -420,7 +267,9 @@ footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:cente
 </div></section>
 
 </main>
-<footer>Bloc 1 sur 35 · Séquence annuelle 1TC-NUM, volet numérique FMTTN · 2026-2027 · M. Courcelle</footer>
+<footer class="pied">
+  <div class="pied__interieur">Bloc 1 sur 35 · Séquence annuelle 1TC-NUM, volet numérique FMTTN · 2026-2027 · M. Courcelle</div>
+</footer>
 
 <script>
 "use strict";
@@ -513,7 +362,7 @@ document.getElementById("btnGo").onclick=function(){
 document.getElementById("btnStop").onclick=function(){
   clearInterval(tick);t0=null;
   document.getElementById("sTemps").textContent="00:00";
-  ecart.className="ecart";ecart.setAttribute("style","background:#f1f5f9;border:1px solid var(--line);color:#475569");
+  ecart.className="ecart";ecart.setAttribute("style","background:var(--papier);border:1px solid var(--line);color:var(--encre-douce)");
   ecart.textContent="Séance non démarrée";
   document.getElementById("btnGo").textContent="Démarrer la séance";
   dessineRail();
diff --git a/1re-numerique/1TC-NUM_bloc-02_ce-quil-y-a-dans-la-boite.html b/1re-numerique/1TC-NUM_bloc-02_ce-quil-y-a-dans-la-boite.html
index 57497d2..72d93a5 100644
--- a/1re-numerique/1TC-NUM_bloc-02_ce-quil-y-a-dans-la-boite.html
+++ b/1re-numerique/1TC-NUM_bloc-02_ce-quil-y-a-dans-la-boite.html
@@ -1,220 +1,45 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="fr">
 <head>
 <meta charset="utf-8">
-<meta name="viewport" content="width=device-width,initial-scale=1">
-<title>Cours 2 – Ce qu'il y a dans la boite</title>
-<style>:root{--ink:#172033;--muted:#667085;--blue:#2563eb;--navy:#172554;--green:#16a34a;--red:#dc2626;--card:#fff;--line:#e5e7eb;--shadow:0 18px 45px #0f172a18}
-*{box-sizing:border-box}html{scroll-behavior:smooth}
-body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:linear-gradient(180deg,#edf4ff,#f8fafc 34%,#fff);color:var(--ink)}
-button,input,select{font:inherit}
-main{max-width:1180px;margin:auto;padding:34px 20px 70px}
-:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
-svg.i{width:1em;height:1em;vertical-align:-.14em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
-
-.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;background:linear-gradient(135deg,#172554,#2563eb);color:#fff;border-radius:28px;padding:30px;box-shadow:var(--shadow);margin-bottom:24px}
-.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:900;opacity:.82}
-.hero h1{font-size:clamp(30px,4.6vw,52px);line-height:1;letter-spacing:-1.6px;margin:7px 0 12px}
-.hero p{margin:0;color:#dbeafe;line-height:1.6;font-size:17px}
-.hero a.up{display:inline-flex;align-items:center;gap:7px;color:#bfdbfe;font-weight:800;font-size:13px;text-decoration:none;margin-bottom:10px}
-.hero a.up:hover{color:#fff}
-.hero-visual{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
-.hero-chip{background:#ffffff14;border:1px solid #ffffff28;border-radius:18px;padding:16px;text-align:center}
-.hero-chip .ico{display:block;margin:0 auto 7px;width:30px;height:30px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
-.hero-chip b{font-size:14px}
-.badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
-.badge{background:#ffffff1f;border:1px solid #ffffff2e;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:800;color:#e0ecff}
-.badge.warn{background:#dc262633;border-color:#fca5a5;color:#fee2e2}
-
-.dashboard{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
-.stat{background:#fff;border:1px solid var(--line);border-radius:17px;padding:14px;box-shadow:0 8px 24px #0f172a0b}
-.stat strong{display:block;font-size:22px;margin-top:3px}
-.stat small{color:#64748b;font-weight:800}
-.stat.ok strong{color:var(--green)}
-
-.chrono{background:#172554;color:#fff;border-radius:20px;padding:16px 18px;box-shadow:var(--shadow);margin-bottom:20px;display:grid;gap:12px}
-.chrono-haut{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
-.pendule{font-size:32px;font-weight:950;font-variant-numeric:tabular-nums;line-height:1}
-.pendule small{display:block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#93b4d8;margin-top:5px}
-.ecart{font-size:14px;font-weight:850;padding:9px 14px;border-radius:999px;background:#ffffff1a;border:1px solid #ffffff2e;min-width:250px;text-align:center}
-.ecart.avance{background:#16a34a2e;border-color:#4ade80;color:#dcfce7}
-.ecart.retard{background:#dc26262e;border-color:#fca5a5;color:#fee2e2}
-.chrono .row button{background:#ffffff1a;border:1px solid #ffffff30;color:#fff}
-.chrono .row button.go{background:#fff;border-color:#fff;color:#172554}
-
-.navtabs{display:grid;gap:10px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:0 8px 24px #0f172a0b;margin-bottom:20px}
-.navtabs.n6{grid-template-columns:repeat(6,1fr)}
-.tab{border:2px solid #e2e8f0;background:#fff;border-radius:14px;padding:12px 10px;font-weight:900;cursor:pointer;color:#334155;text-align:left;position:relative}
-.tab span{display:block;font-size:11px;font-weight:800;color:#94a3b8;margin-top:3px;font-variant-numeric:tabular-nums}
-.tab:hover{border-color:#93c5fd}
-.tab.active{background:#2563eb;color:#fff;border-color:#2563eb;box-shadow:0 8px 18px #2563eb28}
-.tab.active span{color:#c7dcff}
-.tab.prevue::after{content:"";position:absolute;left:12px;right:12px;bottom:-2px;height:4px;border-radius:99px;background:#f59e0b}
-
-.panel{display:none}.panel.active{display:block}
-.card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 10px 28px #0f172a0d;margin-bottom:16px}
-.card h2,.card h3{margin-top:0}
-.card h2{font-size:26px;letter-spacing:-.5px}
-.muted{color:var(--muted);line-height:1.6}
-.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
-.btn{border:0;border-radius:11px;padding:10px 15px;font-weight:850;cursor:pointer;background:#eaf1ff;color:#1d4ed8}
-.btn:hover{filter:brightness(.97)}
-.btn.primary{background:#2563eb;color:#fff}
-.btn.soft{background:#f1f5f9;color:#334155}
-.score{display:inline-block;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:7px 12px;font-weight:900;font-size:14px}
-.feedback{min-height:31px;margin-top:12px;font-weight:850}
-.entete{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:flex-start;margin-bottom:14px}
-.consigne{background:linear-gradient(145deg,#f8fafc,#eef6ff);border:2px solid #dbeafe;border-radius:18px;padding:20px 24px;font-size:20px;font-weight:800;line-height:1.45;margin:16px 0}
-.consigne small{display:block;text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:900;color:var(--blue);margin-bottom:8px}
-.info{border-left:4px solid #cbd5e1;background:#f8fafc;border-radius:0 12px 12px 0;padding:13px 17px;color:#475569;font-size:15px;line-height:1.6;margin-top:16px}
-.info b{color:var(--ink)}
-.info.alerte{border-color:#fca5a5;background:#fef4f4;color:#7f2b2b}
-.info.alerte b{color:#991b1b}
-
-.saisie{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px}
-.saisie input{flex:1;min-width:210px;padding:12px 14px;border:2px solid #cbd5e1;border-radius:12px;outline:none}
-.saisie input:focus{border-color:var(--blue);box-shadow:0 0 0 4px #2563eb18}
-.saisie select{padding:12px 14px;border:2px solid #cbd5e1;border-radius:12px;font-weight:800}
-.colonnes{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:11px}
-.colonne{border:1px solid var(--line);border-radius:17px;background:#f8fbff;min-height:145px;padding:13px}
-.colonne h3{font-size:14px;display:flex;justify-content:space-between;align-items:center;margin:0 0 9px;padding-bottom:8px;border-bottom:1px solid var(--line)}
-.colonne h3 em{font-style:normal;color:#94a3b8;font-size:12px}
-.colonne ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
-.colonne li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:7px 10px;font-size:14px;font-weight:700;display:flex;justify-content:space-between;gap:6px}
-.colonne li button{background:none;border:0;color:#cbd5e1;cursor:pointer;padding:0 3px;font-weight:900}
-.colonne li button:hover{color:var(--red)}
-
-.accordeon{display:grid;gap:10px}
-.item{border:1px solid var(--line);border-radius:17px;background:#fff;overflow:hidden}
-.item>button{width:100%;display:flex;gap:14px;align-items:flex-start;text-align:left;background:none;border:0;padding:15px 18px;cursor:pointer}
-.item>button:hover{background:#f8fbff}
-.item .n{width:30px;height:30px;flex:none;border-radius:10px;background:#eaf1ff;color:#1d4ed8;font-weight:950;display:grid;place-items:center;font-size:14px}
-.item .t{font-weight:850;font-size:17px;flex:1}
-.item .plus{color:#94a3b8;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;padding-top:6px}
-.item .corps{display:none;padding:0 18px 17px 62px;color:#475569;line-height:1.6}
-.item.ouvert .corps{display:block}
-.item.ouvert{border-color:#93c5fd;box-shadow:0 8px 20px #2563eb14}
-.item.ouvert .n{background:#2563eb;color:#fff}
-
-.qcard{border:2px solid #dbeafe;border-radius:20px;background:linear-gradient(145deg,#fbfdff,#f4f9ff);padding:24px 26px}
-.qtag{display:inline-block;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:900;margin-bottom:10px}
-.qtag.cle{background:#fef3c7;color:#92400e}
-.qtxt{font-size:22px;font-weight:900;line-height:1.3;letter-spacing:-.3px;margin-bottom:16px}
-.answer-grid{display:grid;gap:8px}
-.answer{border:2px solid #dbe3ef;background:#fff;border-radius:12px;padding:11px 14px;text-align:left;font-weight:800}
-.answer.ok{border-color:#22c55e;background:#f0fdf4}
-.reveal{display:none;margin-top:16px;border-top:2px dashed #dbeafe;padding-top:15px}
-.reveal.on{display:block}
-.verdict{font-weight:950;color:var(--green);margin-bottom:8px}
-
-.steps{display:grid;gap:11px}
-.step{border:1px solid var(--line);border-radius:17px;background:#fff;padding:16px 20px;display:flex;gap:15px;align-items:flex-start;opacity:.4}
-.step.on{opacity:1;border-color:#93c5fd;box-shadow:0 8px 20px #2563eb14}
-.step.fait{opacity:1}
-.step .n{width:34px;height:34px;flex:none;border-radius:12px;background:#f1f5f9;color:#94a3b8;font-weight:950;display:grid;place-items:center}
-.step.on .n{background:#2563eb;color:#fff}
-.step.fait .n{background:#dcfce7;color:#15803d}
-.step h3{margin:0 0 4px;font-size:17px}
-.step p{margin:0;color:#475569;font-size:15px;line-height:1.55}
-
-figure{margin:0 0 18px}
-figure svg{width:100%;height:auto;display:block;background:#fff;border:1px solid var(--line);border-radius:18px}
-figcaption{font-size:14px;color:var(--muted);margin-top:10px;line-height:1.55}
-
-.trace{border:2px solid #dbeafe;background:linear-gradient(145deg,#fbfdff,#eef6ff);border-radius:20px;padding:26px 30px;font-size:19px;line-height:1.85}
-.trace h3{margin:0 0 14px;font-size:22px}
-.trace p{margin:0 0 .5em}
-.trace code{background:#fff;border:1px solid #dbeafe;border-radius:6px;padding:1px 7px;font-size:.92em}
-
-.check{display:grid;gap:9px}
-.check label{display:flex;gap:13px;align-items:flex-start;border:1px solid var(--line);border-radius:15px;background:#fff;padding:14px 18px;cursor:pointer;font-weight:750}
-.check label:hover{border-color:#93c5fd}
-.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--green);flex:none}
-.check input:checked+span{color:var(--green);font-weight:900}
-
-table.grille{width:100%;border-collapse:collapse;font-size:15px}
-table.grille th,table.grille td{border:1px solid var(--line);padding:10px 13px;text-align:left}
-table.grille th{background:#f8fafc;font-weight:900;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:#475569}
-table.grille td.masque{color:transparent;background:#f8fafc}
-table.grille tr.on td{background:#f0fdf4}
-table.grille td b{color:#15803d}
-
-.filtres{display:flex;gap:9px;flex-wrap:wrap;align-items:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:0 8px 24px #0f172a0b;margin-bottom:20px}
-.filtres .compte{margin-left:auto;font-weight:850;color:var(--muted);font-size:14px}
-.module{margin-bottom:30px}
-.module-tete{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px}
-.module-tete h2{margin:0;font-size:25px;letter-spacing:-.6px}
-.module-tete .p{background:#172554;color:#fff;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:900}
-.module-tete .champ{color:var(--muted);font-size:14px;margin-left:auto}
-.module-note{color:var(--muted);line-height:1.6;margin:0 0 16px;max-width:76ch}
-.blocs{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
-.bloc{border:1px solid var(--line);border-radius:20px;background:#fff;padding:17px 19px;display:flex;gap:15px;align-items:flex-start;text-decoration:none;color:inherit;box-shadow:0 8px 24px #0f172a08}
-.bloc .n{width:40px;height:40px;flex:none;border-radius:14px;background:#f1f5f9;color:#94a3b8;font-weight:950;display:grid;place-items:center;font-size:17px}
-.bloc h3{margin:0 0 5px;font-size:17px;line-height:1.3}
-.bloc .att{font-size:13px;color:var(--muted);font-weight:600}
-.ets{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
-.et{font-size:11px;font-weight:900;border-radius:999px;padding:4px 9px;background:#f1f5f9;color:#475569}
-.et.eval{background:#fee2e2;color:#991b1b}
-.et.fac{background:#f3e8ff;color:#6b21a8}
-.et.pret{background:#dcfce7;color:#15803d}
-a.bloc:hover{border-color:#93c5fd;box-shadow:0 12px 28px #2563eb1f}
-a.bloc .n{background:#2563eb;color:#fff}
-.bloc.vide{border-style:dashed;opacity:.68;box-shadow:none}
-.bloc.vide h3{font-weight:800}
-.masque{display:none!important}
-
-footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:center;color:#64748b;font-size:12px;border-top:1px solid var(--line)}
-
-@media(max-width:980px){.hero{grid-template-columns:1fr}.dashboard{grid-template-columns:repeat(2,1fr)}.navtabs.n6{grid-template-columns:repeat(3,1fr)}}
-@media(max-width:620px){main{padding:20px 12px 60px}.hero{padding:22px 18px}.dashboard{grid-template-columns:1fr}.navtabs.n6{grid-template-columns:repeat(2,1fr)}.blocs{grid-template-columns:1fr}.ecart{min-width:0;flex:1}.filtres .compte{margin-left:0;width:100%}}
-@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
-@media print{.chrono,.navtabs,.filtres,.saisie{display:none}.panel{display:block!important}}
-
-.progres{position:sticky;top:0;z-index:40;background:#fff;border:1px solid var(--line);border-radius:0 0 20px 20px;padding:12px 18px;box-shadow:0 6px 20px #0f172a12;margin-bottom:20px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
-.barre{flex:1;min-width:180px;height:10px;background:#e2e8f0;border-radius:99px;overflow:hidden}
-.barre i{display:block;height:100%;width:0;background:#2563eb;border-radius:99px;transition:width .25s}
-.q{border:1px solid var(--line);border-radius:16px;background:#fff;padding:14px 16px;margin-bottom:10px}
-.q.bon{border-color:#22c55e;background:#f2fdf6}
-.q.faux{border-color:#f59e0b;background:#fffbeb}
-.q .txt{font-weight:800;margin-bottom:10px;font-size:17px}
-.q .opts{display:flex;gap:8px;flex-wrap:wrap}
-.q .opts button{border:2px solid #dbe3ef;background:#fff;border-radius:11px;padding:9px 14px;font-weight:800;cursor:pointer;color:#334155}
-.q .opts button:hover:not(:disabled){border-color:#2563eb;color:#1d4ed8}
-.q .opts button:disabled{cursor:default;opacity:.55}
-.q .opts button.pick{border-color:#22c55e;background:#dcfce7;color:#15803d;opacity:1}
-.q .opts button.rate{border-color:#f59e0b;background:#fef3c7;color:#92400e;opacity:1}
-.q .expl{display:none;margin-top:10px;font-size:15px;color:#475569;line-height:1.55;border-left:3px solid #cbd5e1;padding-left:12px}
-.q.done .expl{display:block}
-.figpetit{max-width:560px;margin:0 auto 14px}
-#bilan{display:none}
-#bilan.on{display:block}
-.gros{font-size:44px;font-weight:950;line-height:1;color:#2563eb}
-textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px;padding:12px;font:inherit;font-size:14px;resize:vertical}</style>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Cours 2, ce qu'il y a dans la boite — 1re tronc commun</title>
+<meta name="robots" content="noindex">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="../assets/theme.css">
+<link rel="stylesheet" href="../assets/numerique-1re.css">
 </head>
-<body>
-<main>
+<body class="classe-tc">
 
-<section class="hero">
-  <div>
-    <a class="up" href="index.html"><svg class="i" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg> Retour au menu</a>
-    <div class="eyebrow">Cours 2 · Formation numérique · 1re année</div>
+<header class="entete">
+  <div class="entete__interieur entete__interieur--large">
+    <nav class="ariane" aria-label="Fil d'Ariane">
+      <a href="../index.html">Mes cours</a><span aria-hidden="true">/</span><a href="index.html">1re tronc commun</a><span aria-hidden="true">/</span><strong>Cours 2</strong>
+    </nav>
     <h1>Ce qu'il y a dans la boite</h1>
-    <p>Aujourd'hui, on ouvre un vrai ordinateur. Tu vas apprendre à nommer ce qu'il y a dedans, à faire la différence entre le matériel et le logiciel, et à dire dans quel sens l'information circule quand on branche un appareil.</p>
-    <div class="badges">
-      <span class="badge">2 périodes</span>
-      <span class="badge">Cours débranché</span>
-      <span class="badge">Livret pages 1 à 6</span>
-    </div>
-    <div class="badges" style="display:none">
-    </div>
+    <p class="entete__meta">Cours 2 · Formation numérique · 1re année</p>
   </div>
-  <div class="hero-visual">
-    <div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><rect x="4" y="3" width="16" height="18" rx="2"/><circle cx="12" cy="10" r="3.5"/><path d="M8 17h8"/></svg><b>La boite</b></div>
-    <div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M3 5h8v14H3zM13 5h8v14h-8"/><path d="M6 9h2M16 9h2"/></svg><b>Le tri</b></div>
-    <div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M4 8h11l-3-3M20 16H9l3 3"/></svg><b>Entrée, sortie</b></div>
-    <div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M6 3h9l4 4v14H6z"/><path d="M14 3v5h5M9 13h7M9 17h5"/></svg><b>Ma trace</b></div>
-  </div>
-</section>
+</header>
+
+<main class="contenu contenu--large">
+
+  <p class="chapeau">Aujourd'hui, on ouvre un vrai ordinateur. Tu vas apprendre à nommer ce qu'il y a dedans, à faire la différence entre le matériel et le logiciel, et à dire dans quel sens l'information circule quand on branche un appareil.</p>
+
+  <ul class="etiquettes">
+    <li class="etiquette">2 périodes</li>
+    <li class="etiquette">Cours débranché</li>
+    <li class="etiquette">Livret pages 1 à 6</li>
+  </ul>
+
+  <ul class="apercu">
+    <li><svg viewBox="0 0 24 24"><rect x="4" y="3" width="16" height="18" rx="2"/><circle cx="12" cy="10" r="3.5"/><path d="M8 17h8"/></svg><span>La boite</span></li>
+    <li><svg viewBox="0 0 24 24"><path d="M3 5h8v14H3zM13 5h8v14h-8"/><path d="M6 9h2M16 9h2"/></svg><span>Le tri</span></li>
+    <li><svg viewBox="0 0 24 24"><path d="M4 8h11l-3-3M20 16H9l3 3"/></svg><span>Entrée, sortie</span></li>
+    <li><svg viewBox="0 0 24 24"><path d="M6 3h9l4 4v14H6z"/><path d="M14 3v5h5M9 13h7M9 17h5"/></svg><span>Ma trace</span></li>
+  </ul>
+
 
 <section class="dashboard">
   <div class="stat"><small>Activité en cours</small><strong id="sPhase">1 sur 6</strong></div>
@@ -227,7 +52,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
   <div class="row">
     <button class="btn primary" id="btnGo">Démarrer</button>
     <button class="btn soft" id="btnStop">Remettre à zéro</button>
-    <span class="ecart" id="ecart" style="background:#f1f5f9;border:1px solid var(--line);color:#475569">Activité 1 · La question du jour</span>
+    <span class="ecart" id="ecart" style="background:var(--papier);border:1px solid var(--line);color:var(--encre-douce)">Activité 1 · La question du jour</span>
   </div>
 </div>
 
@@ -235,7 +60,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 
 <!-- 1 -->
 <section class="panel active" id="p0"><div class="card">
-  <div class="entete"><div><h2>On s'installe</h2><p class="muted">Pendant que le professeur distribue les ordinateurs et les codes.</p></div><span class="score">20 min</span></div>
+  <div class="carte-entete"><div><h2>On s'installe</h2><p class="muted">Pendant que le professeur distribue les ordinateurs et les codes.</p></div><span class="score">20 min</span></div>
 
   <div class="consigne"><small>À faire tout de suite, seul et en silence</small>
     Ouvre ton livret à la page 1.<br><br>
@@ -248,7 +73,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 
 <!-- 2 -->
 <section class="panel" id="p1"><div class="card">
-  <div class="entete"><div><h2>La question du jour</h2><p class="muted">Ton livret, page 1.</p></div><span class="score">10 min</span></div>
+  <div class="carte-entete"><div><h2>La question du jour</h2><p class="muted">Ton livret, page 1.</p></div><span class="score">10 min</span></div>
 
   <h3>Les réponses de la classe</h3>
   <div class="saisie">
@@ -301,7 +126,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 </div>
 
 <div class="card">
-  <div class="entete"><div><h2>Matériel et logiciel</h2><p class="muted">On lit d'abord la page « Je comprends » du livret, puis on trie.</p></div><span class="score">20 min</span></div>
+  <div class="carte-entete"><div><h2>Matériel et logiciel</h2><p class="muted">On lit d'abord la page « Je comprends » du livret, puis on trie.</p></div><span class="score">20 min</span></div>
 
   <div class="consigne"><small>Consigne</small>
     Range chaque mot dans une des deux colonnes : ce que je peux toucher, ce que je ne peux pas toucher.<br><br>
@@ -352,7 +177,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 </div>
 
 <div class="card">
-  <div class="entete"><div><h2>Les périphériques</h2><p class="muted">On lit la page « Je comprends » du livret, puis on complète la table en binôme.</p></div><span class="score">25 min</span></div>
+  <div class="carte-entete"><div><h2>Les périphériques</h2><p class="muted">On lit la page « Je comprends » du livret, puis on complète la table en binôme.</p></div><span class="score">25 min</span></div>
 
   <div class="consigne"><small>Attention au sens</small>
     On se demande toujours si l'information <b>entre dans l'ordinateur</b> ou si elle <b>sort de l'ordinateur</b>.<br>
@@ -361,9 +186,9 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
   <figure>
     <svg viewBox="0 0 700 210" role="img" aria-label="L'information entre dans l'ordinateur par les périphériques d'entrée et en sort par les périphériques de sortie">
       <g font-family="Inter, system-ui, sans-serif">
-        <rect x="270" y="60" width="160" height="100" rx="14" fill="#dbeafe" stroke="#172554" stroke-width="3"/>
-        <text x="350" y="105" text-anchor="middle" font-size="17" font-weight="800" fill="#172554">ORDINATEUR</text>
-        <text x="350" y="130" text-anchor="middle" font-size="13" fill="#475569">il traite l'information</text>
+        <rect x="270" y="60" width="160" height="100" rx="14" fill="#dbeafe" stroke="var(--encre)" stroke-width="3"/>
+        <text x="350" y="105" text-anchor="middle" font-size="17" font-weight="800" fill="var(--encre)">ORDINATEUR</text>
+        <text x="350" y="130" text-anchor="middle" font-size="13" fill="var(--encre-douce)">il traite l'information</text>
         <path d="M60 110h190" stroke="#16a34a" stroke-width="4" fill="none" marker-end="url(#av)"/>
         <path d="M450 110h190" stroke="#7c3aed" stroke-width="4" fill="none" marker-end="url(#am)"/>
         <defs>
@@ -371,9 +196,9 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
           <marker id="am" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M0 0 L10 5 L0 10 z" fill="#7c3aed"/></marker>
         </defs>
         <text x="155" y="96" text-anchor="middle" font-size="16" font-weight="800" fill="#15803d">ENTRÉE</text>
-        <text x="155" y="140" text-anchor="middle" font-size="13.5" fill="#475569">souris, clavier, webcam</text>
+        <text x="155" y="140" text-anchor="middle" font-size="13.5" fill="var(--encre-douce)">souris, clavier, webcam</text>
         <text x="545" y="96" text-anchor="middle" font-size="16" font-weight="800" fill="#6d28d9">SORTIE</text>
-        <text x="545" y="140" text-anchor="middle" font-size="13.5" fill="#475569">écran, imprimante, haut-parleur</text>
+        <text x="545" y="140" text-anchor="middle" font-size="13.5" fill="var(--encre-douce)">écran, imprimante, haut-parleur</text>
         <path d="M270 175 h-60 a10 10 0 0 1 -10 -10 v-20" fill="none" stroke="#0369a1" stroke-width="3" stroke-dasharray="7 5"/>
         <path d="M430 175 h60 a10 10 0 0 0 10 -10 v-20" fill="none" stroke="#0369a1" stroke-width="3" stroke-dasharray="7 5"/>
         <text x="350" y="196" text-anchor="middle" font-size="14.5" font-weight="800" fill="#0369a1">LES DEUX : écran tactile, casque avec micro, clé USB</text>
@@ -385,14 +210,14 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 
 <!-- 5 -->
 <section class="panel" id="p4"><div class="card">
-  <div class="entete"><div><h2>Je m'entraine</h2><p class="muted">Trois exercices, 24 questions. Tu réponds, la correction s'affiche tout de suite avec l'explication.</p></div><span class="score">20 min</span></div>
+  <div class="carte-entete"><div><h2>Je m'entraine</h2><p class="muted">Trois exercices, 24 questions. Tu réponds, la correction s'affiche tout de suite avec l'explication.</p></div><span class="score">20 min</span></div>
 
   <div class="consigne"><small>Avant de commencer</small>
     Ce n'est pas coté. Rien n'est enregistré. Tu peux te tromper, c'est fait pour ça.<br><br>
     À la fin, tu recopieras deux lignes de résultat dans ton livret, page « Où j'en suis ».</div>
 
   <div class="progres">
-    <input id="nom" placeholder="Ton prénom et ton nom" style="padding:10px 13px;border:2px solid #cbd5e1;border-radius:11px;min-width:220px;flex:1">
+    <input id="nom" placeholder="Ton prénom et ton nom" style="padding:10px 13px;border:2px solid var(--trait-fort);border-radius:11px;min-width:220px;flex:1">
     <div class="barre"><i id="jauge"></i></div>
     <span class="score" id="avancement">0 / 24</span>
   </div>
@@ -413,7 +238,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 
   <div id="bilan" style="margin-top:20px">
     <div class="row" style="align-items:flex-end;gap:20px;margin-bottom:16px">
-      <div><span class="gros" id="gTotal">0</span><span style="font-size:22px;font-weight:800;color:#94a3b8"> / 24</span></div>
+      <div><span class="gros" id="gTotal">0</span><span style="font-size:22px;font-weight:800;color:var(--encre-douce)"> / 24</span></div>
       <div class="muted" id="gMot" style="font-weight:800;font-size:18px"></div>
     </div>
     <div id="gDetail" style="margin-bottom:16px"></div>
@@ -437,7 +262,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 
 <!-- 6 -->
 <section class="panel" id="p5"><div class="card">
-  <div class="entete"><div><h2>Ma trace écrite</h2><p class="muted">Ton livret, dernière page. Complète les mots manquants.</p></div><span class="score">5 min</span></div>
+  <div class="carte-entete"><div><h2>Ma trace écrite</h2><p class="muted">Ton livret, dernière page. Complète les mots manquants.</p></div><span class="score">5 min</span></div>
 
   <div class="row" style="margin-bottom:16px">
     <button class="btn primary" id="motSuiv">Révéler le mot suivant</button>
@@ -459,7 +284,9 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 </div>
 
 </main>
-<footer>Cours 2 · Formation numérique · 1re année · M. Courcelle</footer>
+<footer class="pied">
+  <div class="pied__interieur">Cours 2 · Formation numérique · 1re année · M. Courcelle</div>
+</footer>
 
 <script>
 "use strict";
@@ -579,7 +406,7 @@ function dessineTri(){
     d.innerHTML='<h3>'+titres[k]+' <em>'+col[k].length+'</em></h3><ul>'
       +col[k].map(function(x){
         var pieg=(x==="une photo de vacances"&&nomme);
-        return '<li'+(pieg?' style="border-color:#dc2626;background:#fef2f2;color:#991b1b"':'')+'><span>'+x+'</span></li>';
+        return '<li'+(pieg?' style="border-color:var(--erreur);background:var(--erreur-fond);color:var(--erreur)"':'')+'><span>'+x+'</span></li>';
       }).join("")+'</ul>';
     z.appendChild(d);
   });
@@ -606,7 +433,7 @@ function dessineTable(){
   var h="<tr><th>Périphérique</th><th>Entrée, sortie ou les deux</th><th>À quoi il sert</th></tr>";
   PERIPH.forEach(function(p,i){
     var vu=i<li;
-    h+="<tr"+(vu?' class="on"':'')+"><td><b style='color:#172033'>"+p[0]+"</b></td>"
+    h+="<tr"+(vu?' class="on"':'')+"><td><b style='color:var(--encre)'>"+p[0]+"</b></td>"
       +(vu?"<td><b>"+p[1]+"</b></td><td>"+p[2]+"</td>":'<td class="masque">.</td><td class="masque">.</td>')+"</tr>";
   });
   zt2.innerHTML=h;
@@ -625,8 +452,8 @@ function dessineTrace(){
   zt.innerHTML="<h3>Cours 2. Ce qu'il y a dans la boite</h3>"+TRACE.map(function(par){
     return "<p>"+par.map(function(x){
       if(typeof x==="number"){
-        return x<=reveles?'<b style="color:#1d4ed8">'+MOTS[x]+'</b>'
-          :'<span style="border-bottom:2px solid #93c5fd;color:#93c5fd">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>';
+        return x<=reveles?'<b style="color:var(--accent-encre)">'+MOTS[x]+'</b>'
+          :'<span style="border-bottom:2px solid var(--accent);color:var(--accent)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>';
       }
       return x;
     }).join("")+"</p>";
diff --git a/1re-numerique/1TC-NUM_bloc-02_pilotage.html b/1re-numerique/1TC-NUM_bloc-02_pilotage.html
index 573c5e4..d49e93f 100644
--- a/1re-numerique/1TC-NUM_bloc-02_pilotage.html
+++ b/1re-numerique/1TC-NUM_bloc-02_pilotage.html
@@ -1,222 +1,47 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="fr">
 <head>
 <meta charset="utf-8">
-<meta name="viewport" content="width=device-width,initial-scale=1">
-<title>Bloc 2 – pilotage</title>
-<style>:root{--ink:#172033;--muted:#667085;--blue:#2563eb;--navy:#172554;--green:#16a34a;--red:#dc2626;--card:#fff;--line:#e5e7eb;--shadow:0 18px 45px #0f172a18}
-*{box-sizing:border-box}html{scroll-behavior:smooth}
-body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:linear-gradient(180deg,#edf4ff,#f8fafc 34%,#fff);color:var(--ink)}
-button,input,select{font:inherit}
-main{max-width:1180px;margin:auto;padding:34px 20px 70px}
-:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
-svg.i{width:1em;height:1em;vertical-align:-.14em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
-
-.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;background:linear-gradient(135deg,#172554,#2563eb);color:#fff;border-radius:28px;padding:30px;box-shadow:var(--shadow);margin-bottom:24px}
-.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:900;opacity:.82}
-.hero h1{font-size:clamp(30px,4.6vw,52px);line-height:1;letter-spacing:-1.6px;margin:7px 0 12px}
-.hero p{margin:0;color:#dbeafe;line-height:1.6;font-size:17px}
-.hero a.up{display:inline-flex;align-items:center;gap:7px;color:#bfdbfe;font-weight:800;font-size:13px;text-decoration:none;margin-bottom:10px}
-.hero a.up:hover{color:#fff}
-.hero-visual{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
-.hero-chip{background:#ffffff14;border:1px solid #ffffff28;border-radius:18px;padding:16px;text-align:center}
-.hero-chip .ico{display:block;margin:0 auto 7px;width:30px;height:30px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
-.hero-chip b{font-size:14px}
-.badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
-.badge{background:#ffffff1f;border:1px solid #ffffff2e;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:800;color:#e0ecff}
-.badge.warn{background:#dc262633;border-color:#fca5a5;color:#fee2e2}
-
-.dashboard{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
-.stat{background:#fff;border:1px solid var(--line);border-radius:17px;padding:14px;box-shadow:0 8px 24px #0f172a0b}
-.stat strong{display:block;font-size:22px;margin-top:3px}
-.stat small{color:#64748b;font-weight:800}
-.stat.ok strong{color:var(--green)}
-
-.chrono{background:#172554;color:#fff;border-radius:20px;padding:16px 18px;box-shadow:var(--shadow);margin-bottom:20px;display:grid;gap:12px}
-.chrono-haut{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
-.pendule{font-size:32px;font-weight:950;font-variant-numeric:tabular-nums;line-height:1}
-.pendule small{display:block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#93b4d8;margin-top:5px}
-.ecart{font-size:14px;font-weight:850;padding:9px 14px;border-radius:999px;background:#ffffff1a;border:1px solid #ffffff2e;min-width:250px;text-align:center}
-.ecart.avance{background:#16a34a2e;border-color:#4ade80;color:#dcfce7}
-.ecart.retard{background:#dc26262e;border-color:#fca5a5;color:#fee2e2}
-.chrono .row button{background:#ffffff1a;border:1px solid #ffffff30;color:#fff}
-.chrono .row button.go{background:#fff;border-color:#fff;color:#172554}
-
-.navtabs{display:grid;gap:10px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:0 8px 24px #0f172a0b;margin-bottom:20px}
-.navtabs.n6{grid-template-columns:repeat(6,1fr)}
-.tab{border:2px solid #e2e8f0;background:#fff;border-radius:14px;padding:12px 10px;font-weight:900;cursor:pointer;color:#334155;text-align:left;position:relative}
-.tab span{display:block;font-size:11px;font-weight:800;color:#94a3b8;margin-top:3px;font-variant-numeric:tabular-nums}
-.tab:hover{border-color:#93c5fd}
-.tab.active{background:#2563eb;color:#fff;border-color:#2563eb;box-shadow:0 8px 18px #2563eb28}
-.tab.active span{color:#c7dcff}
-.tab.prevue::after{content:"";position:absolute;left:12px;right:12px;bottom:-2px;height:4px;border-radius:99px;background:#f59e0b}
-
-.panel{display:none}.panel.active{display:block}
-.card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 10px 28px #0f172a0d;margin-bottom:16px}
-.card h2,.card h3{margin-top:0}
-.card h2{font-size:26px;letter-spacing:-.5px}
-.muted{color:var(--muted);line-height:1.6}
-.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
-.btn{border:0;border-radius:11px;padding:10px 15px;font-weight:850;cursor:pointer;background:#eaf1ff;color:#1d4ed8}
-.btn:hover{filter:brightness(.97)}
-.btn.primary{background:#2563eb;color:#fff}
-.btn.soft{background:#f1f5f9;color:#334155}
-.score{display:inline-block;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:7px 12px;font-weight:900;font-size:14px}
-.feedback{min-height:31px;margin-top:12px;font-weight:850}
-.entete{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:flex-start;margin-bottom:14px}
-.consigne{background:linear-gradient(145deg,#f8fafc,#eef6ff);border:2px solid #dbeafe;border-radius:18px;padding:20px 24px;font-size:20px;font-weight:800;line-height:1.45;margin:16px 0}
-.consigne small{display:block;text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:900;color:var(--blue);margin-bottom:8px}
-.info{border-left:4px solid #cbd5e1;background:#f8fafc;border-radius:0 12px 12px 0;padding:13px 17px;color:#475569;font-size:15px;line-height:1.6;margin-top:16px}
-.info b{color:var(--ink)}
-.info.alerte{border-color:#fca5a5;background:#fef4f4;color:#7f2b2b}
-.info.alerte b{color:#991b1b}
-
-.saisie{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px}
-.saisie input{flex:1;min-width:210px;padding:12px 14px;border:2px solid #cbd5e1;border-radius:12px;outline:none}
-.saisie input:focus{border-color:var(--blue);box-shadow:0 0 0 4px #2563eb18}
-.saisie select{padding:12px 14px;border:2px solid #cbd5e1;border-radius:12px;font-weight:800}
-.colonnes{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:11px}
-.colonne{border:1px solid var(--line);border-radius:17px;background:#f8fbff;min-height:145px;padding:13px}
-.colonne h3{font-size:14px;display:flex;justify-content:space-between;align-items:center;margin:0 0 9px;padding-bottom:8px;border-bottom:1px solid var(--line)}
-.colonne h3 em{font-style:normal;color:#94a3b8;font-size:12px}
-.colonne ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
-.colonne li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:7px 10px;font-size:14px;font-weight:700;display:flex;justify-content:space-between;gap:6px}
-.colonne li button{background:none;border:0;color:#cbd5e1;cursor:pointer;padding:0 3px;font-weight:900}
-.colonne li button:hover{color:var(--red)}
-
-.accordeon{display:grid;gap:10px}
-.item{border:1px solid var(--line);border-radius:17px;background:#fff;overflow:hidden}
-.item>button{width:100%;display:flex;gap:14px;align-items:flex-start;text-align:left;background:none;border:0;padding:15px 18px;cursor:pointer}
-.item>button:hover{background:#f8fbff}
-.item .n{width:30px;height:30px;flex:none;border-radius:10px;background:#eaf1ff;color:#1d4ed8;font-weight:950;display:grid;place-items:center;font-size:14px}
-.item .t{font-weight:850;font-size:17px;flex:1}
-.item .plus{color:#94a3b8;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;padding-top:6px}
-.item .corps{display:none;padding:0 18px 17px 62px;color:#475569;line-height:1.6}
-.item.ouvert .corps{display:block}
-.item.ouvert{border-color:#93c5fd;box-shadow:0 8px 20px #2563eb14}
-.item.ouvert .n{background:#2563eb;color:#fff}
-
-.qcard{border:2px solid #dbeafe;border-radius:20px;background:linear-gradient(145deg,#fbfdff,#f4f9ff);padding:24px 26px}
-.qtag{display:inline-block;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:900;margin-bottom:10px}
-.qtag.cle{background:#fef3c7;color:#92400e}
-.qtxt{font-size:22px;font-weight:900;line-height:1.3;letter-spacing:-.3px;margin-bottom:16px}
-.answer-grid{display:grid;gap:8px}
-.answer{border:2px solid #dbe3ef;background:#fff;border-radius:12px;padding:11px 14px;text-align:left;font-weight:800}
-.answer.ok{border-color:#22c55e;background:#f0fdf4}
-.reveal{display:none;margin-top:16px;border-top:2px dashed #dbeafe;padding-top:15px}
-.reveal.on{display:block}
-.verdict{font-weight:950;color:var(--green);margin-bottom:8px}
-
-.steps{display:grid;gap:11px}
-.step{border:1px solid var(--line);border-radius:17px;background:#fff;padding:16px 20px;display:flex;gap:15px;align-items:flex-start;opacity:.4}
-.step.on{opacity:1;border-color:#93c5fd;box-shadow:0 8px 20px #2563eb14}
-.step.fait{opacity:1}
-.step .n{width:34px;height:34px;flex:none;border-radius:12px;background:#f1f5f9;color:#94a3b8;font-weight:950;display:grid;place-items:center}
-.step.on .n{background:#2563eb;color:#fff}
-.step.fait .n{background:#dcfce7;color:#15803d}
-.step h3{margin:0 0 4px;font-size:17px}
-.step p{margin:0;color:#475569;font-size:15px;line-height:1.55}
-
-figure{margin:0 0 18px}
-figure svg{width:100%;height:auto;display:block;background:#fff;border:1px solid var(--line);border-radius:18px}
-figcaption{font-size:14px;color:var(--muted);margin-top:10px;line-height:1.55}
-
-.trace{border:2px solid #dbeafe;background:linear-gradient(145deg,#fbfdff,#eef6ff);border-radius:20px;padding:26px 30px;font-size:19px;line-height:1.85}
-.trace h3{margin:0 0 14px;font-size:22px}
-.trace p{margin:0 0 .5em}
-.trace code{background:#fff;border:1px solid #dbeafe;border-radius:6px;padding:1px 7px;font-size:.92em}
-
-.check{display:grid;gap:9px}
-.check label{display:flex;gap:13px;align-items:flex-start;border:1px solid var(--line);border-radius:15px;background:#fff;padding:14px 18px;cursor:pointer;font-weight:750}
-.check label:hover{border-color:#93c5fd}
-.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--green);flex:none}
-.check input:checked+span{color:var(--green);font-weight:900}
-
-table.grille{width:100%;border-collapse:collapse;font-size:15px}
-table.grille th,table.grille td{border:1px solid var(--line);padding:10px 13px;text-align:left}
-table.grille th{background:#f8fafc;font-weight:900;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:#475569}
-table.grille td.masque{color:transparent;background:#f8fafc}
-table.grille tr.on td{background:#f0fdf4}
-table.grille td b{color:#15803d}
-
-.filtres{display:flex;gap:9px;flex-wrap:wrap;align-items:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:0 8px 24px #0f172a0b;margin-bottom:20px}
-.filtres .compte{margin-left:auto;font-weight:850;color:var(--muted);font-size:14px}
-.module{margin-bottom:30px}
-.module-tete{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px}
-.module-tete h2{margin:0;font-size:25px;letter-spacing:-.6px}
-.module-tete .p{background:#172554;color:#fff;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:900}
-.module-tete .champ{color:var(--muted);font-size:14px;margin-left:auto}
-.module-note{color:var(--muted);line-height:1.6;margin:0 0 16px;max-width:76ch}
-.blocs{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
-.bloc{border:1px solid var(--line);border-radius:20px;background:#fff;padding:17px 19px;display:flex;gap:15px;align-items:flex-start;text-decoration:none;color:inherit;box-shadow:0 8px 24px #0f172a08}
-.bloc .n{width:40px;height:40px;flex:none;border-radius:14px;background:#f1f5f9;color:#94a3b8;font-weight:950;display:grid;place-items:center;font-size:17px}
-.bloc h3{margin:0 0 5px;font-size:17px;line-height:1.3}
-.bloc .att{font-size:13px;color:var(--muted);font-weight:600}
-.ets{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
-.et{font-size:11px;font-weight:900;border-radius:999px;padding:4px 9px;background:#f1f5f9;color:#475569}
-.et.eval{background:#fee2e2;color:#991b1b}
-.et.fac{background:#f3e8ff;color:#6b21a8}
-.et.pret{background:#dcfce7;color:#15803d}
-a.bloc:hover{border-color:#93c5fd;box-shadow:0 12px 28px #2563eb1f}
-a.bloc .n{background:#2563eb;color:#fff}
-.bloc.vide{border-style:dashed;opacity:.68;box-shadow:none}
-.bloc.vide h3{font-weight:800}
-.masque{display:none!important}
-
-footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:center;color:#64748b;font-size:12px;border-top:1px solid var(--line)}
-
-@media(max-width:980px){.hero{grid-template-columns:1fr}.dashboard{grid-template-columns:repeat(2,1fr)}.navtabs.n6{grid-template-columns:repeat(3,1fr)}}
-@media(max-width:620px){main{padding:20px 12px 60px}.hero{padding:22px 18px}.dashboard{grid-template-columns:1fr}.navtabs.n6{grid-template-columns:repeat(2,1fr)}.blocs{grid-template-columns:1fr}.ecart{min-width:0;flex:1}.filtres .compte{margin-left:0;width:100%}}
-@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
-@media print{.chrono,.navtabs,.filtres,.saisie{display:none}.panel{display:block!important}}
-
-.progres{position:sticky;top:0;z-index:40;background:#fff;border:1px solid var(--line);border-radius:0 0 20px 20px;padding:12px 18px;box-shadow:0 6px 20px #0f172a12;margin-bottom:20px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
-.barre{flex:1;min-width:180px;height:10px;background:#e2e8f0;border-radius:99px;overflow:hidden}
-.barre i{display:block;height:100%;width:0;background:#2563eb;border-radius:99px;transition:width .25s}
-.q{border:1px solid var(--line);border-radius:16px;background:#fff;padding:14px 16px;margin-bottom:10px}
-.q.bon{border-color:#22c55e;background:#f2fdf6}
-.q.faux{border-color:#f59e0b;background:#fffbeb}
-.q .txt{font-weight:800;margin-bottom:10px;font-size:17px}
-.q .opts{display:flex;gap:8px;flex-wrap:wrap}
-.q .opts button{border:2px solid #dbe3ef;background:#fff;border-radius:11px;padding:9px 14px;font-weight:800;cursor:pointer;color:#334155}
-.q .opts button:hover:not(:disabled){border-color:#2563eb;color:#1d4ed8}
-.q .opts button:disabled{cursor:default;opacity:.55}
-.q .opts button.pick{border-color:#22c55e;background:#dcfce7;color:#15803d;opacity:1}
-.q .opts button.rate{border-color:#f59e0b;background:#fef3c7;color:#92400e;opacity:1}
-.q .expl{display:none;margin-top:10px;font-size:15px;color:#475569;line-height:1.55;border-left:3px solid #cbd5e1;padding-left:12px}
-.q.done .expl{display:block}
-.figpetit{max-width:560px;margin:0 auto 14px}
-#bilan{display:none}
-#bilan.on{display:block}
-.gros{font-size:44px;font-weight:950;line-height:1;color:#2563eb}
-textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px;padding:12px;font:inherit;font-size:14px;resize:vertical}</style>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Bloc 2, pilotage — 1re tronc commun</title>
+<meta name="robots" content="noindex">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="../assets/theme.css">
+<link rel="stylesheet" href="../assets/numerique-1re.css">
 </head>
-<body>
-<main>
+<body class="classe-tc">
 
-<section class="hero">
-  <div>
-    <a class="up" href="pilotage.html"><svg class="i" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg> Retour au menu</a>
-    <div class="eyebrow">Document enseignant · Module 1 · Semaine 2 · Bloc 2 sur 35</div>
+<header class="entete">
+  <div class="entete__interieur entete__interieur--large">
+    <nav class="ariane" aria-label="Fil d'Ariane">
+      <a href="../index.html">Mes cours</a><span aria-hidden="true">/</span><a href="index.html">1re tronc commun</a><span aria-hidden="true">/</span><a href="pilotage.html">Pilotage</a><span aria-hidden="true">/</span><strong>Bloc 2</strong>
+    </nav>
     <h1>Ce qu'il y a dans la boite</h1>
-    <p style="margin-bottom:10px"><a href="1TC-NUM_bloc-02_ce-quil-y-a-dans-la-boite.html" style="color:#fff;font-weight:800">Ouvrir la version à projeter aux élèves</a></p>
-    <p>80 minutes de contenu, 20 de logistique absorbée. Les exercices sont dans l'onglet 5 de cette même page, il n'y a plus de second fichier.</p>
-    <div class="badges">
-      <span class="badge">80 min de contenu + 20 de logistique</span>
-      <span class="badge">S21 · hardware et software</span>
-      <span class="badge">S21 · terme périphérique</span>
-      <span class="badge warn">Ne pas projeter</span>
-    </div>
-    <div class="badges" style="display:none">
-    </div>
+    <p class="entete__meta">Document enseignant · Module 1 · Semaine 2 · Bloc 2 sur 35</p>
   </div>
-  <div class="hero-visual">
-    <div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><rect x="4" y="3" width="16" height="18" rx="2"/><circle cx="12" cy="10" r="3.5"/><path d="M8 17h8"/></svg><b>La boite</b></div>
-    <div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M3 5h8v14H3zM13 5h8v14h-8"/><path d="M6 9h2M16 9h2"/></svg><b>Le tri</b></div>
-    <div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M4 8h11l-3-3M20 16H9l3 3"/></svg><b>Entrée, sortie</b></div>
-    <div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M6 3h9l4 4v14H6z"/><path d="M14 3v5h5M9 13h7M9 17h5"/></svg><b>Ma trace</b></div>
-  </div>
-</section>
+</header>
+
+<main class="contenu contenu--large">
+
+  <p class="chapeau"><a href="1TC-NUM_bloc-02_ce-quil-y-a-dans-la-boite.html">Ouvrir la version à projeter aux élèves</a></p>
+  <p class="chapeau">80 minutes de contenu, 20 de logistique absorbée. Les exercices sont dans l'onglet 5 de cette même page, il n'y a plus de second fichier.</p>
+
+  <ul class="etiquettes">
+    <li class="etiquette">80 min de contenu + 20 de logistique</li>
+    <li class="etiquette">S21 · hardware et software</li>
+    <li class="etiquette">S21 · terme périphérique</li>
+    <li class="etiquette etiquette--alerte">Ne pas projeter</li>
+  </ul>
+
+  <ul class="apercu">
+    <li><svg viewBox="0 0 24 24"><rect x="4" y="3" width="16" height="18" rx="2"/><circle cx="12" cy="10" r="3.5"/><path d="M8 17h8"/></svg><span>La boite</span></li>
+    <li><svg viewBox="0 0 24 24"><path d="M3 5h8v14H3zM13 5h8v14h-8"/><path d="M6 9h2M16 9h2"/></svg><span>Le tri</span></li>
+    <li><svg viewBox="0 0 24 24"><path d="M4 8h11l-3-3M20 16H9l3 3"/></svg><span>Entrée, sortie</span></li>
+    <li><svg viewBox="0 0 24 24"><path d="M6 3h9l4 4v14H6z"/><path d="M14 3v5h5M9 13h7M9 17h5"/></svg><span>Ma trace</span></li>
+  </ul>
+
 
 <section class="dashboard">
   <div class="stat"><small>Activité en cours</small><strong id="sPhase">1 sur 6</strong></div>
@@ -229,7 +54,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
   <div class="row">
     <button class="btn primary" id="btnGo">Démarrer</button>
     <button class="btn soft" id="btnStop">Remettre à zéro</button>
-    <span class="ecart" id="ecart" style="background:#f1f5f9;border:1px solid var(--line);color:#475569">Activité 1 · La question du jour</span>
+    <span class="ecart" id="ecart" style="background:var(--papier);border:1px solid var(--line);color:var(--encre-douce)">Activité 1 · La question du jour</span>
   </div>
 </div>
 
@@ -237,7 +62,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 
 <!-- 1 -->
 <section class="panel active" id="p0"><div class="card">
-  <div class="entete"><div><h2>On s'installe</h2><p class="muted">Pendant que le professeur distribue les ordinateurs et les codes.</p></div><span class="score">20 min</span></div>
+  <div class="carte-entete"><div><h2>On s'installe</h2><p class="muted">Pendant que le professeur distribue les ordinateurs et les codes.</p></div><span class="score">20 min</span></div>
 
   <div class="consigne"><small>À faire tout de suite, seul et en silence</small>
     Ouvre ton livret à la page 1.<br><br>
@@ -255,7 +80,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 
 <!-- 2 -->
 <section class="panel" id="p1"><div class="card">
-  <div class="entete"><div><h2>La question du jour</h2><p class="muted">Ton livret, page 1.</p></div><span class="score">10 min</span></div>
+  <div class="carte-entete"><div><h2>La question du jour</h2><p class="muted">Ton livret, page 1.</p></div><span class="score">10 min</span></div>
 
   <h3>Les réponses de la classe</h3>
   <div class="saisie">
@@ -315,7 +140,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 </div>
 
 <div class="card">
-  <div class="entete"><div><h2>Matériel et logiciel</h2><p class="muted">On lit d'abord la page « Je comprends » du livret, puis on trie.</p></div><span class="score">20 min</span></div>
+  <div class="carte-entete"><div><h2>Matériel et logiciel</h2><p class="muted">On lit d'abord la page « Je comprends » du livret, puis on trie.</p></div><span class="score">20 min</span></div>
 
   <div class="consigne"><small>Consigne</small>
     Range chaque mot dans une des deux colonnes : ce que je peux toucher, ce que je ne peux pas toucher.<br><br>
@@ -377,7 +202,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 </div>
 
 <div class="card">
-  <div class="entete"><div><h2>Les périphériques</h2><p class="muted">On lit la page « Je comprends » du livret, puis on complète la table en binôme.</p></div><span class="score">25 min</span></div>
+  <div class="carte-entete"><div><h2>Les périphériques</h2><p class="muted">On lit la page « Je comprends » du livret, puis on complète la table en binôme.</p></div><span class="score">25 min</span></div>
 
   <div class="consigne"><small>Attention au sens</small>
     On se demande toujours si l'information <b>entre dans l'ordinateur</b> ou si elle <b>sort de l'ordinateur</b>.<br>
@@ -386,9 +211,9 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
   <figure>
     <svg viewBox="0 0 700 210" role="img" aria-label="L'information entre dans l'ordinateur par les périphériques d'entrée et en sort par les périphériques de sortie">
       <g font-family="Inter, system-ui, sans-serif">
-        <rect x="270" y="60" width="160" height="100" rx="14" fill="#dbeafe" stroke="#172554" stroke-width="3"/>
-        <text x="350" y="105" text-anchor="middle" font-size="17" font-weight="800" fill="#172554">ORDINATEUR</text>
-        <text x="350" y="130" text-anchor="middle" font-size="13" fill="#475569">il traite l'information</text>
+        <rect x="270" y="60" width="160" height="100" rx="14" fill="#dbeafe" stroke="var(--encre)" stroke-width="3"/>
+        <text x="350" y="105" text-anchor="middle" font-size="17" font-weight="800" fill="var(--encre)">ORDINATEUR</text>
+        <text x="350" y="130" text-anchor="middle" font-size="13" fill="var(--encre-douce)">il traite l'information</text>
         <path d="M60 110h190" stroke="#16a34a" stroke-width="4" fill="none" marker-end="url(#av)"/>
         <path d="M450 110h190" stroke="#7c3aed" stroke-width="4" fill="none" marker-end="url(#am)"/>
         <defs>
@@ -396,9 +221,9 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
           <marker id="am" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M0 0 L10 5 L0 10 z" fill="#7c3aed"/></marker>
         </defs>
         <text x="155" y="96" text-anchor="middle" font-size="16" font-weight="800" fill="#15803d">ENTRÉE</text>
-        <text x="155" y="140" text-anchor="middle" font-size="13.5" fill="#475569">souris, clavier, webcam</text>
+        <text x="155" y="140" text-anchor="middle" font-size="13.5" fill="var(--encre-douce)">souris, clavier, webcam</text>
         <text x="545" y="96" text-anchor="middle" font-size="16" font-weight="800" fill="#6d28d9">SORTIE</text>
-        <text x="545" y="140" text-anchor="middle" font-size="13.5" fill="#475569">écran, imprimante, haut-parleur</text>
+        <text x="545" y="140" text-anchor="middle" font-size="13.5" fill="var(--encre-douce)">écran, imprimante, haut-parleur</text>
         <path d="M270 175 h-60 a10 10 0 0 1 -10 -10 v-20" fill="none" stroke="#0369a1" stroke-width="3" stroke-dasharray="7 5"/>
         <path d="M430 175 h60 a10 10 0 0 0 10 -10 v-20" fill="none" stroke="#0369a1" stroke-width="3" stroke-dasharray="7 5"/>
         <text x="350" y="196" text-anchor="middle" font-size="14.5" font-weight="800" fill="#0369a1">LES DEUX : écran tactile, casque avec micro, clé USB</text>
@@ -415,14 +240,14 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 
 <!-- 5 -->
 <section class="panel" id="p4"><div class="card">
-  <div class="entete"><div><h2>Je m'entraine</h2><p class="muted">Trois exercices, 24 questions. Tu réponds, la correction s'affiche tout de suite avec l'explication.</p></div><span class="score">20 min</span></div>
+  <div class="carte-entete"><div><h2>Je m'entraine</h2><p class="muted">Trois exercices, 24 questions. Tu réponds, la correction s'affiche tout de suite avec l'explication.</p></div><span class="score">20 min</span></div>
 
   <div class="consigne"><small>Avant de commencer</small>
     Ce n'est pas coté. Rien n'est enregistré. Tu peux te tromper, c'est fait pour ça.<br><br>
     À la fin, tu recopieras deux lignes de résultat dans ton livret, page « Où j'en suis ».</div>
 
   <div class="progres">
-    <input id="nom" placeholder="Ton prénom et ton nom" style="padding:10px 13px;border:2px solid #cbd5e1;border-radius:11px;min-width:220px;flex:1">
+    <input id="nom" placeholder="Ton prénom et ton nom" style="padding:10px 13px;border:2px solid var(--trait-fort);border-radius:11px;min-width:220px;flex:1">
     <div class="barre"><i id="jauge"></i></div>
     <span class="score" id="avancement">0 / 24</span>
   </div>
@@ -443,7 +268,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 
   <div id="bilan" style="margin-top:20px">
     <div class="row" style="align-items:flex-end;gap:20px;margin-bottom:16px">
-      <div><span class="gros" id="gTotal">0</span><span style="font-size:22px;font-weight:800;color:#94a3b8"> / 24</span></div>
+      <div><span class="gros" id="gTotal">0</span><span style="font-size:22px;font-weight:800;color:var(--encre-douce)"> / 24</span></div>
       <div class="muted" id="gMot" style="font-weight:800;font-size:18px"></div>
     </div>
     <div id="gDetail" style="margin-bottom:16px"></div>
@@ -472,7 +297,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 
 <!-- 6 -->
 <section class="panel" id="p5"><div class="card">
-  <div class="entete"><div><h2>Ma trace écrite</h2><p class="muted">Ton livret, dernière page. Complète les mots manquants.</p></div><span class="score">5 min</span></div>
+  <div class="carte-entete"><div><h2>Ma trace écrite</h2><p class="muted">Ton livret, dernière page. Complète les mots manquants.</p></div><span class="score">5 min</span></div>
 
   <div class="row" style="margin-bottom:16px">
     <button class="btn primary" id="motSuiv">Révéler le mot suivant</button>
@@ -498,7 +323,9 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 </div>
 
 </main>
-<footer>Bloc 2 sur 35 · Séquence annuelle 1TC-NUM, volet numérique FMTTN · 2026-2027 · M. Courcelle</footer>
+<footer class="pied">
+  <div class="pied__interieur">Bloc 2 sur 35 · Séquence annuelle 1TC-NUM, volet numérique FMTTN · 2026-2027 · M. Courcelle</div>
+</footer>
 
 <script>
 "use strict";
@@ -619,7 +446,7 @@ function dessineTri(){
     d.innerHTML='<h3>'+titres[k]+' <em>'+col[k].length+'</em></h3><ul>'
       +col[k].map(function(x){
         var pieg=(x==="une photo de vacances"&&nomme);
-        return '<li'+(pieg?' style="border-color:#dc2626;background:#fef2f2;color:#991b1b"':'')+'><span>'+x+'</span></li>';
+        return '<li'+(pieg?' style="border-color:var(--erreur);background:var(--erreur-fond);color:var(--erreur)"':'')+'><span>'+x+'</span></li>';
       }).join("")+'</ul>';
     z.appendChild(d);
   });
@@ -646,7 +473,7 @@ function dessineTable(){
   var h="<tr><th>Périphérique</th><th>Entrée, sortie ou les deux</th><th>À quoi il sert</th></tr>";
   PERIPH.forEach(function(p,i){
     var vu=i<li;
-    h+="<tr"+(vu?' class="on"':'')+"><td><b style='color:#172033'>"+p[0]+"</b></td>"
+    h+="<tr"+(vu?' class="on"':'')+"><td><b style='color:var(--encre)'>"+p[0]+"</b></td>"
       +(vu?"<td><b>"+p[1]+"</b></td><td>"+p[2]+"</td>":'<td class="masque">.</td><td class="masque">.</td>')+"</tr>";
   });
   zt2.innerHTML=h;
@@ -665,8 +492,8 @@ function dessineTrace(){
   zt.innerHTML="<h3>Cours 2. Ce qu'il y a dans la boite</h3>"+TRACE.map(function(par){
     return "<p>"+par.map(function(x){
       if(typeof x==="number"){
-        return x<=reveles?'<b style="color:#1d4ed8">'+MOTS[x]+'</b>'
-          :'<span style="border-bottom:2px solid #93c5fd;color:#93c5fd">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>';
+        return x<=reveles?'<b style="color:var(--accent-encre)">'+MOTS[x]+'</b>'
+          :'<span style="border-bottom:2px solid var(--accent);color:var(--accent)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>';
       }
       return x;
     }).join("")+"</p>";
diff --git a/1re-numerique/1TC-NUM_bloc-03_ou-va-ce-que-j-enregistre.html b/1re-numerique/1TC-NUM_bloc-03_ou-va-ce-que-j-enregistre.html
index cc746af..a94eca6 100644
--- a/1re-numerique/1TC-NUM_bloc-03_ou-va-ce-que-j-enregistre.html
+++ b/1re-numerique/1TC-NUM_bloc-03_ou-va-ce-que-j-enregistre.html
@@ -1,229 +1,45 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="fr">
 <head>
 <meta charset="utf-8">
-<meta name="viewport" content="width=device-width,initial-scale=1">
-<title>Cours 3 – Où va ce que j'enregistre</title>
-<style>:root{--ink:#172033;--muted:#667085;--blue:#2563eb;--navy:#172554;--green:#16a34a;--red:#dc2626;--card:#fff;--line:#e5e7eb;--shadow:0 18px 45px #0f172a18}
-*{box-sizing:border-box}html{scroll-behavior:smooth}
-body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:linear-gradient(180deg,#edf4ff,#f8fafc 34%,#fff);color:var(--ink)}
-button,input,select{font:inherit}
-main{max-width:1180px;margin:auto;padding:34px 20px 70px}
-:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
-svg.i{width:1em;height:1em;vertical-align:-.14em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
-
-.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;background:linear-gradient(135deg,#172554,#2563eb);color:#fff;border-radius:28px;padding:30px;box-shadow:var(--shadow);margin-bottom:24px}
-.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:900;opacity:.82}
-.hero h1{font-size:clamp(30px,4.6vw,52px);line-height:1;letter-spacing:-1.6px;margin:7px 0 12px}
-.hero p{margin:0;color:#dbeafe;line-height:1.6;font-size:17px}
-.hero a.up{display:inline-flex;align-items:center;gap:7px;color:#bfdbfe;font-weight:800;font-size:13px;text-decoration:none;margin-bottom:10px}
-.hero a.up:hover{color:#fff}
-.hero-visual{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
-.hero-chip{background:#ffffff14;border:1px solid #ffffff28;border-radius:18px;padding:16px;text-align:center}
-.hero-chip .ico{display:block;margin:0 auto 7px;width:30px;height:30px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
-.hero-chip b{font-size:14px}
-.badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
-.badge{background:#ffffff1f;border:1px solid #ffffff2e;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:800;color:#e0ecff}
-.badge.warn{background:#dc262633;border-color:#fca5a5;color:#fee2e2}
-
-.dashboard{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
-.stat{background:#fff;border:1px solid var(--line);border-radius:17px;padding:14px;box-shadow:0 8px 24px #0f172a0b}
-.stat strong{display:block;font-size:22px;margin-top:3px}
-.stat small{color:#64748b;font-weight:800}
-.stat.ok strong{color:var(--green)}
-
-.chrono{background:#172554;color:#fff;border-radius:20px;padding:16px 18px;box-shadow:var(--shadow);margin-bottom:20px;display:grid;gap:12px}
-.chrono-haut{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
-.pendule{font-size:32px;font-weight:950;font-variant-numeric:tabular-nums;line-height:1}
-.pendule small{display:block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#93b4d8;margin-top:5px}
-.ecart{font-size:14px;font-weight:850;padding:9px 14px;border-radius:999px;background:#ffffff1a;border:1px solid #ffffff2e;min-width:250px;text-align:center}
-.ecart.avance{background:#16a34a2e;border-color:#4ade80;color:#dcfce7}
-.ecart.retard{background:#dc26262e;border-color:#fca5a5;color:#fee2e2}
-.chrono .row button{background:#ffffff1a;border:1px solid #ffffff30;color:#fff}
-.chrono .row button.go{background:#fff;border-color:#fff;color:#172554}
-
-.navtabs{display:grid;gap:10px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:0 8px 24px #0f172a0b;margin-bottom:20px}
-.navtabs.n6{grid-template-columns:repeat(6,1fr)}
-.tab{border:2px solid #e2e8f0;background:#fff;border-radius:14px;padding:12px 10px;font-weight:900;cursor:pointer;color:#334155;text-align:left;position:relative}
-.tab span{display:block;font-size:11px;font-weight:800;color:#94a3b8;margin-top:3px;font-variant-numeric:tabular-nums}
-.tab:hover{border-color:#93c5fd}
-.tab.active{background:#2563eb;color:#fff;border-color:#2563eb;box-shadow:0 8px 18px #2563eb28}
-.tab.active span{color:#c7dcff}
-.tab.prevue::after{content:"";position:absolute;left:12px;right:12px;bottom:-2px;height:4px;border-radius:99px;background:#f59e0b}
-
-.panel{display:none}.panel.active{display:block}
-.card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 10px 28px #0f172a0d;margin-bottom:16px}
-.card h2,.card h3{margin-top:0}
-.card h2{font-size:26px;letter-spacing:-.5px}
-.muted{color:var(--muted);line-height:1.6}
-.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
-.btn{border:0;border-radius:11px;padding:10px 15px;font-weight:850;cursor:pointer;background:#eaf1ff;color:#1d4ed8}
-.btn:hover{filter:brightness(.97)}
-.btn.primary{background:#2563eb;color:#fff}
-.btn.soft{background:#f1f5f9;color:#334155}
-.score{display:inline-block;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:7px 12px;font-weight:900;font-size:14px}
-.feedback{min-height:31px;margin-top:12px;font-weight:850}
-.entete{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:flex-start;margin-bottom:14px}
-.consigne{background:linear-gradient(145deg,#f8fafc,#eef6ff);border:2px solid #dbeafe;border-radius:18px;padding:20px 24px;font-size:20px;font-weight:800;line-height:1.45;margin:16px 0}
-.consigne small{display:block;text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:900;color:var(--blue);margin-bottom:8px}
-.info{border-left:4px solid #cbd5e1;background:#f8fafc;border-radius:0 12px 12px 0;padding:13px 17px;color:#475569;font-size:15px;line-height:1.6;margin-top:16px}
-.info b{color:var(--ink)}
-.info.alerte{border-color:#fca5a5;background:#fef4f4;color:#7f2b2b}
-.info.alerte b{color:#991b1b}
-
-.saisie{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px}
-.saisie input{flex:1;min-width:210px;padding:12px 14px;border:2px solid #cbd5e1;border-radius:12px;outline:none}
-.saisie input:focus{border-color:var(--blue);box-shadow:0 0 0 4px #2563eb18}
-.saisie select{padding:12px 14px;border:2px solid #cbd5e1;border-radius:12px;font-weight:800}
-.colonnes{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:11px}
-.colonne{border:1px solid var(--line);border-radius:17px;background:#f8fbff;min-height:145px;padding:13px}
-.colonne h3{font-size:14px;display:flex;justify-content:space-between;align-items:center;margin:0 0 9px;padding-bottom:8px;border-bottom:1px solid var(--line)}
-.colonne h3 em{font-style:normal;color:#94a3b8;font-size:12px}
-.colonne ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
-.colonne li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:7px 10px;font-size:14px;font-weight:700;display:flex;justify-content:space-between;gap:6px}
-.colonne li button{background:none;border:0;color:#cbd5e1;cursor:pointer;padding:0 3px;font-weight:900}
-.colonne li button:hover{color:var(--red)}
-
-.accordeon{display:grid;gap:10px}
-.item{border:1px solid var(--line);border-radius:17px;background:#fff;overflow:hidden}
-.item>button{width:100%;display:flex;gap:14px;align-items:flex-start;text-align:left;background:none;border:0;padding:15px 18px;cursor:pointer}
-.item>button:hover{background:#f8fbff}
-.item .n{width:30px;height:30px;flex:none;border-radius:10px;background:#eaf1ff;color:#1d4ed8;font-weight:950;display:grid;place-items:center;font-size:14px}
-.item .t{font-weight:850;font-size:17px;flex:1}
-.item .plus{color:#94a3b8;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;padding-top:6px}
-.item .corps{display:none;padding:0 18px 17px 62px;color:#475569;line-height:1.6}
-.item.ouvert .corps{display:block}
-.item.ouvert{border-color:#93c5fd;box-shadow:0 8px 20px #2563eb14}
-.item.ouvert .n{background:#2563eb;color:#fff}
-
-.qcard{border:2px solid #dbeafe;border-radius:20px;background:linear-gradient(145deg,#fbfdff,#f4f9ff);padding:24px 26px}
-.qtag{display:inline-block;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:900;margin-bottom:10px}
-.qtag.cle{background:#fef3c7;color:#92400e}
-.qtxt{font-size:22px;font-weight:900;line-height:1.3;letter-spacing:-.3px;margin-bottom:16px}
-.answer-grid{display:grid;gap:8px}
-.answer{border:2px solid #dbe3ef;background:#fff;border-radius:12px;padding:11px 14px;text-align:left;font-weight:800}
-.answer.ok{border-color:#22c55e;background:#f0fdf4}
-.reveal{display:none;margin-top:16px;border-top:2px dashed #dbeafe;padding-top:15px}
-.reveal.on{display:block}
-.verdict{font-weight:950;color:var(--green);margin-bottom:8px}
-
-.steps{display:grid;gap:11px}
-.step{border:1px solid var(--line);border-radius:17px;background:#fff;padding:16px 20px;display:flex;gap:15px;align-items:flex-start;opacity:.4}
-.step.on{opacity:1;border-color:#93c5fd;box-shadow:0 8px 20px #2563eb14}
-.step.fait{opacity:1}
-.step .n{width:34px;height:34px;flex:none;border-radius:12px;background:#f1f5f9;color:#94a3b8;font-weight:950;display:grid;place-items:center}
-.step.on .n{background:#2563eb;color:#fff}
-.step.fait .n{background:#dcfce7;color:#15803d}
-.step h3{margin:0 0 4px;font-size:17px}
-.step p{margin:0;color:#475569;font-size:15px;line-height:1.55}
-
-figure{margin:0 0 18px}
-figure svg{width:100%;height:auto;display:block;background:#fff;border:1px solid var(--line);border-radius:18px}
-figcaption{font-size:14px;color:var(--muted);margin-top:10px;line-height:1.55}
-
-.trace{border:2px solid #dbeafe;background:linear-gradient(145deg,#fbfdff,#eef6ff);border-radius:20px;padding:26px 30px;font-size:19px;line-height:1.85}
-.trace h3{margin:0 0 14px;font-size:22px}
-.trace p{margin:0 0 .5em}
-.trace code{background:#fff;border:1px solid #dbeafe;border-radius:6px;padding:1px 7px;font-size:.92em}
-
-.check{display:grid;gap:9px}
-.check label{display:flex;gap:13px;align-items:flex-start;border:1px solid var(--line);border-radius:15px;background:#fff;padding:14px 18px;cursor:pointer;font-weight:750}
-.check label:hover{border-color:#93c5fd}
-.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--green);flex:none}
-.check input:checked+span{color:var(--green);font-weight:900}
-
-table.grille{width:100%;border-collapse:collapse;font-size:15px}
-table.grille th,table.grille td{border:1px solid var(--line);padding:10px 13px;text-align:left}
-table.grille th{background:#f8fafc;font-weight:900;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:#475569}
-table.grille td.masque{color:transparent;background:#f8fafc}
-table.grille tr.on td{background:#f0fdf4}
-table.grille td b{color:#15803d}
-
-.filtres{display:flex;gap:9px;flex-wrap:wrap;align-items:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:0 8px 24px #0f172a0b;margin-bottom:20px}
-.filtres .compte{margin-left:auto;font-weight:850;color:var(--muted);font-size:14px}
-.module{margin-bottom:30px}
-.module-tete{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px}
-.module-tete h2{margin:0;font-size:25px;letter-spacing:-.6px}
-.module-tete .p{background:#172554;color:#fff;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:900}
-.module-tete .champ{color:var(--muted);font-size:14px;margin-left:auto}
-.module-note{color:var(--muted);line-height:1.6;margin:0 0 16px;max-width:76ch}
-.blocs{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
-.bloc{border:1px solid var(--line);border-radius:20px;background:#fff;padding:17px 19px;display:flex;gap:15px;align-items:flex-start;text-decoration:none;color:inherit;box-shadow:0 8px 24px #0f172a08}
-.bloc .n{width:40px;height:40px;flex:none;border-radius:14px;background:#f1f5f9;color:#94a3b8;font-weight:950;display:grid;place-items:center;font-size:17px}
-.bloc h3{margin:0 0 5px;font-size:17px;line-height:1.3}
-.bloc .att{font-size:13px;color:var(--muted);font-weight:600}
-.ets{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
-.et{font-size:11px;font-weight:900;border-radius:999px;padding:4px 9px;background:#f1f5f9;color:#475569}
-.et.eval{background:#fee2e2;color:#991b1b}
-.et.fac{background:#f3e8ff;color:#6b21a8}
-.et.pret{background:#dcfce7;color:#15803d}
-a.bloc:hover{border-color:#93c5fd;box-shadow:0 12px 28px #2563eb1f}
-a.bloc .n{background:#2563eb;color:#fff}
-.bloc.vide{border-style:dashed;opacity:.68;box-shadow:none}
-.bloc.vide h3{font-weight:800}
-.masque{display:none!important}
-
-footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:center;color:#64748b;font-size:12px;border-top:1px solid var(--line)}
-
-@media(max-width:980px){.hero{grid-template-columns:1fr}.dashboard{grid-template-columns:repeat(2,1fr)}.navtabs.n6{grid-template-columns:repeat(3,1fr)}}
-@media(max-width:620px){main{padding:20px 12px 60px}.hero{padding:22px 18px}.dashboard{grid-template-columns:1fr}.navtabs.n6{grid-template-columns:repeat(2,1fr)}.blocs{grid-template-columns:1fr}.ecart{min-width:0;flex:1}.filtres .compte{margin-left:0;width:100%}}
-@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
-@media print{.chrono,.navtabs,.filtres,.saisie{display:none}.panel{display:block!important}}
-
-.progres{position:sticky;top:0;z-index:40;background:#fff;border:1px solid var(--line);border-radius:0 0 20px 20px;padding:12px 18px;box-shadow:0 6px 20px #0f172a12;margin-bottom:20px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
-.barre{flex:1;min-width:180px;height:10px;background:#e2e8f0;border-radius:99px;overflow:hidden}
-.barre i{display:block;height:100%;width:0;background:#2563eb;border-radius:99px;transition:width .25s}
-.q{border:1px solid var(--line);border-radius:16px;background:#fff;padding:14px 16px;margin-bottom:10px}
-.q.bon{border-color:#22c55e;background:#f2fdf6}
-.q.faux{border-color:#f59e0b;background:#fffbeb}
-.q .txt{font-weight:800;margin-bottom:10px;font-size:17px}
-.q .opts{display:flex;gap:8px;flex-wrap:wrap}
-.q .opts button{border:2px solid #dbe3ef;background:#fff;border-radius:11px;padding:9px 14px;font-weight:800;cursor:pointer;color:#334155}
-.q .opts button:hover:not(:disabled){border-color:#2563eb;color:#1d4ed8}
-.q .opts button:disabled{cursor:default;opacity:.55}
-.q .opts button.pick{border-color:#22c55e;background:#dcfce7;color:#15803d;opacity:1}
-.q .opts button.rate{border-color:#f59e0b;background:#fef3c7;color:#92400e;opacity:1}
-.q .expl{display:none;margin-top:10px;font-size:15px;color:#475569;line-height:1.55;border-left:3px solid #cbd5e1;padding-left:12px}
-.q.done .expl{display:block}
-.figpetit{max-width:560px;margin:0 auto 14px}
-#bilan{display:none}
-#bilan.on{display:block}
-.gros{font-size:44px;font-weight:950;line-height:1;color:#2563eb}
-textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px;padding:12px;font:inherit;font-size:14px;resize:vertical}
-.fichiers{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin:14px 0}
-.fic{border:2px solid #dbe3ef;background:#fff;border-radius:14px;padding:12px 14px;text-align:left;cursor:pointer;font-weight:800;font-size:14.5px;overflow-wrap:anywhere;min-width:0}
-.fic small{display:block;font-weight:700;color:#64748b;margin-top:3px;font-size:13px}
-.fic b{display:block;font-size:20px;color:#172554;margin-bottom:2px}
-.fic:hover{border-color:#2563eb}
-.fic.pris{opacity:.25;cursor:default}
-.fic.rate{border-color:#f59e0b;background:#fffbeb}
-.rangee{display:flex;gap:6px;flex-wrap:wrap;min-height:54px;border:2px dashed #cbd5e1;border-radius:14px;padding:8px;align-items:center}
-.rangee .pas{background:#dcfce7;color:#15803d;border-radius:10px;padding:7px 10px;font-weight:900;font-size:14px}
-.etape3{display:none}.etape3.on{display:block}
-</style>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Cours 3, où va ce que j'enregistre — 1re tronc commun</title>
+<meta name="robots" content="noindex">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="../assets/theme.css">
+<link rel="stylesheet" href="../assets/numerique-1re.css">
 </head>
-<body>
-<main>
+<body class="classe-tc">
 
-<section class="hero">
-  <div>
-    <a class="up" href="index.html"><svg class="i" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg> Retour au menu</a>
-    <div class="eyebrow">Cours 3 · Formation numérique · 1re année</div>
+<header class="entete">
+  <div class="entete__interieur entete__interieur--large">
+    <nav class="ariane" aria-label="Fil d'Ariane">
+      <a href="../index.html">Mes cours</a><span aria-hidden="true">/</span><a href="index.html">1re tronc commun</a><span aria-hidden="true">/</span><strong>Cours 3</strong>
+    </nav>
     <h1>Où va ce que j'enregistre</h1>
-    <p>Pourquoi un travail non enregistré disparait, où l'ordinateur range vraiment tes fichiers, et comment lire la taille d'un fichier.</p>
-    <div class="badges">
-      <span class="badge">2 périodes</span>
-      <span class="badge">Livret du cours 3</span>
-      <span class="badge">Exercices dans l'onglet 4</span>
-    </div>
+    <p class="entete__meta">Cours 3 · Formation numérique · 1re année</p>
   </div>
-  <div class="hero-visual">
-    <div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M13 2L4 14h7l-1 8 9-12h-7z"/></svg><b>La coupure</b></div>
-    <div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><rect x="3" y="7" width="18" height="10" rx="2"/><path d="M7 7v10M11 7v10M15 7v10"/></svg><b>Les mémoires</b></div>
-    <div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><rect x="8" y="3" width="8" height="12" rx="2"/><path d="M10 15v4h4v-4M12 7v3"/></svg><b>Trois endroits</b></div>
-    <div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M4 20V10M10 20V4M16 20v-8M22 20H2"/></svg><b>Les tailles</b></div>
-  </div>
-</section>
+</header>
+
+<main class="contenu contenu--large">
+
+  <p class="chapeau">Pourquoi un travail non enregistré disparait, où l'ordinateur range vraiment tes fichiers, et comment lire la taille d'un fichier.</p>
+
+  <ul class="etiquettes">
+    <li class="etiquette">2 périodes</li>
+    <li class="etiquette">Livret du cours 3</li>
+    <li class="etiquette">Exercices dans l'onglet 4</li>
+  </ul>
+
+  <ul class="apercu">
+    <li><svg viewBox="0 0 24 24"><path d="M13 2L4 14h7l-1 8 9-12h-7z"/></svg><span>La coupure</span></li>
+    <li><svg viewBox="0 0 24 24"><rect x="3" y="7" width="18" height="10" rx="2"/><path d="M7 7v10M11 7v10M15 7v10"/></svg><span>Les mémoires</span></li>
+    <li><svg viewBox="0 0 24 24"><rect x="8" y="3" width="8" height="12" rx="2"/><path d="M10 15v4h4v-4M12 7v3"/></svg><span>Trois endroits</span></li>
+    <li><svg viewBox="0 0 24 24"><path d="M4 20V10M10 20V4M16 20v-8M22 20H2"/></svg><span>Les tailles</span></li>
+  </ul>
+
 
 <section class="dashboard">
   <div class="stat"><small>Activité en cours</small><strong id="sPhase">1 sur 6</strong></div>
@@ -236,7 +52,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
   <div class="row">
     <button class="btn primary" id="btnGo">Démarrer</button>
     <button class="btn soft" id="btnStop">Remettre à zéro</button>
-    <span class="ecart" id="ecart" style="background:#f1f5f9;border:1px solid var(--line);color:#475569">Activité 1</span>
+    <span class="ecart" id="ecart" style="background:var(--papier);border:1px solid var(--line);color:var(--encre-douce)">Activité 1</span>
   </div>
 </div>
 
@@ -244,7 +60,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 
 <!-- 1 -->
 <section class="panel active" id="p0"><div class="card">
-  <div class="entete"><div><h2>La démonstration</h2><p class="muted">Regarde bien. Ensuite, livret page 1.</p></div><span class="score">10 min</span></div>
+  <div class="carte-entete"><div><h2>La démonstration</h2><p class="muted">Regarde bien. Ensuite, livret page 1.</p></div><span class="score">10 min</span></div>
 
   <div class="consigne"><small>Ce qui va se passer</small>
     Le professeur tape un texte, puis il coupe brutalement l'ordinateur, sans enregistrer. Il le rallume.</div>
@@ -264,7 +80,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 <!-- 2 -->
 <section class="panel" id="p1">
 <div class="card">
-  <div class="entete"><div><h2>Je comprends. Les deux mémoires et le stockage</h2><p class="muted">On lit cette page ensemble. Elle est dans ton livret.</p></div><span class="score">20 min</span></div>
+  <div class="carte-entete"><div><h2>Je comprends. Les deux mémoires et le stockage</h2><p class="muted">On lit cette page ensemble. Elle est dans ton livret.</p></div><span class="score">20 min</span></div>
 
   <h3>Ce qui s'est passé</h3>
   <p>Le texte existait bien, tu l'as vu à l'écran. Mais il se trouvait dans une mémoire qui <b>se vide dès que le courant s'arrête</b>. Un ordinateur possède plusieurs endroits pour garder des informations, et ils n'ont pas le même travail.</p>
@@ -279,12 +95,12 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
   <figure><svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 800 380">
 
 <defs>
-<marker id="a" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M0 0L10 5L0 10z" fill="#172554"/></marker>
+<marker id="a" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M0 0L10 5L0 10z" fill="var(--encre)"/></marker>
 <marker id="v" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M0 0L10 5L0 10z" fill="#16a34a"/></marker>
 </defs>
 <g font-family="Arial, Helvetica, sans-serif">
-<rect x="20" y="20" width="760" height="340" rx="18" fill="#f8fafc" stroke="#cbd5e1" stroke-width="2" stroke-dasharray="6 6"/>
-<text x="40" y="50" font-size="15" font-weight="bold" fill="#64748b">DANS L'ORDINATEUR</text>
+<rect x="20" y="20" width="760" height="340" rx="18" fill="var(--papier)" stroke="var(--trait-fort)" stroke-width="2" stroke-dasharray="6 6"/>
+<text x="40" y="50" font-size="15" font-weight="bold" fill="var(--encre-douce)">DANS L'ORDINATEUR</text>
 <rect x="40" y="80" width="200" height="110" rx="14" fill="#fef3c7" stroke="#b45309" stroke-width="3"/>
 <text x="140" y="118" text-anchor="middle" font-size="19" font-weight="bold" fill="#92400e">Mémoire vive</text>
 <text x="140" y="142" text-anchor="middle" font-size="14" fill="#92400e">le plan de travail</text>
@@ -292,8 +108,8 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 <rect x="300" y="80" width="180" height="110" rx="14" fill="#e0e7ff" stroke="#3730a3" stroke-width="3"/>
 <text x="390" y="125" text-anchor="middle" font-size="19" font-weight="bold" fill="#3730a3">Processeur</text>
 <text x="390" y="150" text-anchor="middle" font-size="14" fill="#3730a3">le cuisinier</text>
-<path d="M240 125 H292" stroke="#172554" stroke-width="3" marker-end="url(#a)"/>
-<path d="M300 150 H248" stroke="#172554" stroke-width="3" marker-end="url(#a)"/>
+<path d="M240 125 H292" stroke="var(--encre)" stroke-width="3" marker-end="url(#a)"/>
+<path d="M300 150 H248" stroke="var(--encre)" stroke-width="3" marker-end="url(#a)"/>
 <rect x="540" y="80" width="220" height="110" rx="14" fill="#dcfce7" stroke="#15803d" stroke-width="3"/>
 <text x="650" y="118" text-anchor="middle" font-size="19" font-weight="bold" fill="#166534">Stockage</text>
 <text x="650" y="142" text-anchor="middle" font-size="14" fill="#166534">les placards</text>
@@ -301,10 +117,10 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 <path d="M140 195 C140 260, 600 260, 640 198" stroke="#16a34a" stroke-width="4" fill="none" marker-end="url(#v)"/>
 <rect x="318" y="228" width="160" height="34" rx="17" fill="#16a34a"/>
 <text x="398" y="251" text-anchor="middle" font-size="16" font-weight="bold" fill="#ffffff">ENREGISTRER</text>
-<rect x="40" y="285" width="200" height="60" rx="12" fill="#f1f5f9" stroke="#475569" stroke-width="2.5"/>
-<text x="140" y="311" text-anchor="middle" font-size="17" font-weight="bold" fill="#334155">Mémoire morte</text>
-<text x="140" y="332" text-anchor="middle" font-size="13" fill="#475569">la notice d'ouverture, gravée</text>
-<text x="262" y="321" font-size="14" fill="#475569">sert uniquement au démarrage de la machine</text>
+<rect x="40" y="285" width="200" height="60" rx="12" fill="var(--papier)" stroke="var(--encre-douce)" stroke-width="2.5"/>
+<text x="140" y="311" text-anchor="middle" font-size="17" font-weight="bold" fill="var(--encre-douce)">Mémoire morte</text>
+<text x="140" y="332" text-anchor="middle" font-size="13" fill="var(--encre-douce)">la notice d'ouverture, gravée</text>
+<text x="262" y="321" font-size="14" fill="var(--encre-douce)">sert uniquement au démarrage de la machine</text>
 </g></svg>
 </figure>
 
@@ -342,34 +158,34 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 <!-- 3 -->
 <section class="panel" id="p2">
 <div class="card">
-  <div class="entete"><div><h2>Je comprends. Stockage interne et externe</h2><p class="muted">On lit cette page ensemble. Elle est dans ton livret.</p></div><span class="score">25 min</span></div>
+  <div class="carte-entete"><div><h2>Je comprends. Stockage interne et externe</h2><p class="muted">On lit cette page ensemble. Elle est dans ton livret.</p></div><span class="score">25 min</span></div>
 
   <p>Tous les stockages gardent les fichiers quand on éteint. Ce qui les différencie, c'est <b>où ils se trouvent</b>.</p>
   <figure><svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 800 330">
 
 <g font-family="Arial, Helvetica, sans-serif">
-<rect x="30" y="40" width="250" height="250" rx="18" fill="#eff6ff" stroke="#172554" stroke-width="3"/>
-<text x="155" y="30" text-anchor="middle" font-size="15" font-weight="bold" fill="#172554">L'ORDINATEUR</text>
+<rect x="30" y="40" width="250" height="250" rx="18" fill="#eff6ff" stroke="var(--encre)" stroke-width="3"/>
+<text x="155" y="30" text-anchor="middle" font-size="15" font-weight="bold" fill="var(--encre)">L'ORDINATEUR</text>
 <rect x="80" y="130" width="150" height="80" rx="10" fill="#dcfce7" stroke="#15803d" stroke-width="3"/>
 <text x="155" y="165" text-anchor="middle" font-size="16" font-weight="bold" fill="#166534">Disque dur</text>
 <text x="155" y="187" text-anchor="middle" font-size="14" fill="#166534">ou SSD</text>
 <text x="155" y="250" text-anchor="middle" font-size="16" font-weight="bold" fill="#15803d">STOCKAGE INTERNE</text>
-<text x="155" y="272" text-anchor="middle" font-size="13" fill="#475569">dedans, reste sur cette machine</text>
-<line x1="310" y1="30" x2="310" y2="300" stroke="#cbd5e1" stroke-width="2" stroke-dasharray="6 6"/>
+<text x="155" y="272" text-anchor="middle" font-size="13" fill="var(--encre-douce)">dedans, reste sur cette machine</text>
+<line x1="310" y1="30" x2="310" y2="300" stroke="var(--trait-fort)" stroke-width="2" stroke-dasharray="6 6"/>
 <text x="555" y="30" text-anchor="middle" font-size="15" font-weight="bold" fill="#7c2d12">STOCKAGE EXTERNE : en dehors de l'appareil</text>
 <rect x="340" y="60" width="200" height="150" rx="16" fill="#fff7ed" stroke="#c2410c" stroke-width="3"/>
 <rect x="400" y="95" width="80" height="34" rx="6" fill="#fed7aa" stroke="#c2410c" stroke-width="2.5"/>
-<rect x="480" y="104" width="22" height="16" rx="2" fill="#94a3b8"/>
+<rect x="480" y="104" width="22" height="16" rx="2" fill="var(--encre-douce)"/>
 <text x="440" y="160" text-anchor="middle" font-size="15" font-weight="bold" fill="#9a3412">Clé USB</text>
 <text x="440" y="182" text-anchor="middle" font-size="13" fill="#9a3412">disque externe, carte SD</text>
 <text x="440" y="240" text-anchor="middle" font-size="14" font-weight="bold" fill="#c2410c">je l'emporte</text>
-<text x="440" y="260" text-anchor="middle" font-size="13" fill="#475569">pas besoin d'internet</text>
+<text x="440" y="260" text-anchor="middle" font-size="13" fill="var(--encre-douce)">pas besoin d'internet</text>
 <rect x="570" y="60" width="200" height="150" rx="16" fill="#f5f3ff" stroke="#6d28d9" stroke-width="3"/>
 <path d="M620 130 a22 22 0 0 1 20 -30 a30 30 0 0 1 56 8 a20 20 0 0 1 4 40 h-72 a18 18 0 0 1 -8 -18z" fill="#ddd6fe" stroke="#6d28d9" stroke-width="2.5"/>
 <text x="670" y="175" text-anchor="middle" font-size="15" font-weight="bold" fill="#5b21b6">En ligne (cloud)</text>
 <text x="670" y="195" text-anchor="middle" font-size="13" fill="#5b21b6">sur un serveur, ailleurs</text>
 <text x="670" y="240" text-anchor="middle" font-size="14" font-weight="bold" fill="#6d28d9">accessible partout</text>
-<text x="670" y="260" text-anchor="middle" font-size="13" fill="#475569">avec internet</text>
+<text x="670" y="260" text-anchor="middle" font-size="13" fill="var(--encre-douce)">avec internet</text>
 </g></svg>
 </figure>
 
@@ -415,7 +231,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 <!-- 4 -->
 <section class="panel" id="p3">
 <div class="card">
-  <div class="entete"><div><h2>Je comprends. La taille des fichiers</h2><p class="muted">On lit cette page ensemble. Elle est dans ton livret.</p></div><span class="score">25 min</span></div>
+  <div class="carte-entete"><div><h2>Je comprends. La taille des fichiers</h2><p class="muted">On lit cette page ensemble. Elle est dans ton livret.</p></div><span class="score">25 min</span></div>
 
   <p>Un stockage n'est pas infini, comme un placard a un nombre d'étagères. La taille d'un fichier se mesure en <b>octets</b>. Une lettre tapée au clavier occupe environ un octet.</p>
   <p>Pour éviter les nombres immenses, on utilise des préfixes, comme pour les mètres : <b>kilo</b> veut dire mille, comme dans kilomètre.</p>
@@ -423,26 +239,26 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 
 <g font-family="Arial, Helvetica, sans-serif" text-anchor="middle">
 <g font-size="22" font-weight="bold">
-<rect x="20" y="60" width="120" height="70" rx="12" fill="#f1f5f9" stroke="#475569" stroke-width="2.5"/><text x="80" y="104" fill="#334155">octet</text>
+<rect x="20" y="60" width="120" height="70" rx="12" fill="var(--papier)" stroke="var(--encre-douce)" stroke-width="2.5"/><text x="80" y="104" fill="var(--encre-douce)">octet</text>
 <rect x="180" y="60" width="120" height="70" rx="12" fill="#dbeafe" stroke="#1d4ed8" stroke-width="2.5"/><text x="240" y="104" fill="#1d4ed8">Ko</text>
 <rect x="340" y="60" width="120" height="70" rx="12" fill="#dcfce7" stroke="#15803d" stroke-width="2.5"/><text x="400" y="104" fill="#15803d">Mo</text>
 <rect x="500" y="60" width="120" height="70" rx="12" fill="#fef3c7" stroke="#b45309" stroke-width="2.5"/><text x="560" y="104" fill="#b45309">Go</text>
 <rect x="660" y="60" width="120" height="70" rx="12" fill="#fee2e2" stroke="#b91c1c" stroke-width="2.5"/><text x="720" y="104" fill="#b91c1c">To</text>
 </g>
-<g font-size="15" font-weight="bold" fill="#172554">
+<g font-size="15" font-weight="bold" fill="var(--encre)">
 <text x="160" y="45">× 1000</text><text x="320" y="45">× 1000</text><text x="480" y="45">× 1000</text><text x="640" y="45">× 1000</text>
 </g>
-<g stroke="#172554" stroke-width="2.5" fill="none">
+<g stroke="var(--encre)" stroke-width="2.5" fill="none">
 <path d="M142 95 H176"/><path d="M302 95 H336"/><path d="M462 95 H496"/><path d="M622 95 H656"/>
 </g>
-<g font-size="13" fill="#475569">
+<g font-size="13" fill="var(--encre-douce)">
 <text x="80" y="160">une lettre</text>
 <text x="240" y="160">un texte court</text>
 <text x="400" y="160">une photo,</text><text x="400" y="178">une chanson</text>
 <text x="560" y="160">un film,</text><text x="560" y="178">une clé USB</text>
 <text x="720" y="160">un gros disque</text><text x="720" y="178">de sauvegarde</text>
 </g>
-<text x="400" y="225" font-size="15" font-weight="bold" fill="#172554">Plus petit  ←————————————————————→  Plus grand</text>
+<text x="400" y="225" font-size="15" font-weight="bold" fill="var(--encre)">Plus petit  ←————————————————————→  Plus grand</text>
 </g></svg>
 </figure>
 
@@ -464,12 +280,12 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 </div>
 
 <div class="card">
-  <div class="entete"><div><h2>Je m'entraine</h2><p class="muted">Quatre exercices, 25 questions. La correction s'affiche tout de suite avec l'explication.</p></div></div>
+  <div class="carte-entete"><div><h2>Je m'entraine</h2><p class="muted">Quatre exercices, 25 questions. La correction s'affiche tout de suite avec l'explication.</p></div></div>
   <div class="consigne"><small>Avant de commencer</small>
     Ce n'est pas coté. Rien n'est enregistré. Tu peux te tromper, c'est fait pour ça.<br>À la fin, recopie tes deux lignes de résultat dans ton livret, page « Où j'en suis ».</div>
 
   <div class="progres">
-    <input id="nom" placeholder="Ton prénom et ton nom" style="padding:10px 13px;border:2px solid #cbd5e1;border-radius:11px;min-width:220px;flex:1">
+    <input id="nom" placeholder="Ton prénom et ton nom" style="padding:10px 13px;border:2px solid var(--trait-fort);border-radius:11px;min-width:220px;flex:1">
     <div class="barre"><i id="jauge"></i></div>
     <span class="score" id="avancement">0 / 25</span>
   </div>
@@ -488,7 +304,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
   <div class="row" style="margin-top:22px"><button class="btn primary" id="voir">Voir mon résultat</button><button class="btn soft" id="reset">Tout recommencer</button></div>
   <div id="bilan" style="margin-top:20px">
     <div class="row" style="align-items:flex-end;gap:20px;margin-bottom:16px">
-      <div><span class="gros" id="gTotal">0</span><span style="font-size:22px;font-weight:800;color:#94a3b8"> / 25</span></div>
+      <div><span class="gros" id="gTotal">0</span><span style="font-size:22px;font-weight:800;color:var(--encre-douce)"> / 25</span></div>
       <div class="muted" id="gMot" style="font-weight:800;font-size:18px"></div>
     </div>
     <div id="gDetail" style="margin-bottom:16px"></div>
@@ -502,7 +318,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 <!-- 5 -->
 <section class="panel" id="p4">
 <div class="card">
-  <div class="entete"><div><h2>La correction du classement</h2><p class="muted">On corrige ensemble.</p></div><span class="score">15 min</span></div>
+  <div class="carte-entete"><div><h2>La correction du classement</h2><p class="muted">On corrige ensemble.</p></div><span class="score">15 min</span></div>
   <div class="row" style="margin-bottom:12px">
     <button class="btn primary" id="corSuiv">Révéler le fichier suivant</button>
     <button class="btn soft" id="corReset">Tout masquer</button>
@@ -524,7 +340,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 <!-- 6 -->
 <section class="panel" id="p5">
 <div class="card">
-  <div class="entete"><div><h2>Ma trace écrite</h2><p class="muted">Dans ton livret. Complète les mots manquants.</p></div><span class="score">5 min</span></div>
+  <div class="carte-entete"><div><h2>Ma trace écrite</h2><p class="muted">Dans ton livret. Complète les mots manquants.</p></div><span class="score">5 min</span></div>
   <div class="row" style="margin-bottom:16px">
     <button class="btn primary" id="motSuiv">Révéler le mot suivant</button>
     <button class="btn soft" id="motReset">Tout masquer</button>
@@ -542,7 +358,9 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 </section>
 
 </main>
-<footer>Cours 3 · Formation numérique · 1re année · M. Courcelle</footer>
+<footer class="pied">
+  <div class="pied__interieur">Cours 3 · Formation numérique · 1re année · M. Courcelle</div>
+</footer>
 
 <script>
 "use strict";
@@ -695,7 +513,7 @@ var OBS=[["Le dossier du poste","Interne","Non","Non"],["La clé USB","Externe",
 var oi=0;
 function dessineObs(){
   var h="<tr><th>Où j'ai enregistré</th><th>Interne ou externe</th><th>Sur l'autre poste ?</th><th>Réseau ou internet ?</th></tr>";
-  OBS.forEach(function(o,i){var v=i<oi;h+="<tr"+(v?' class="on"':"")+"><td><b style='color:#172033'>"+o[0]+"</b></td>"+(v?"<td><b>"+o[1]+"</b></td><td><b>"+o[2]+"</b></td><td><b>"+o[3]+"</b></td>":'<td class="masque">.</td><td class="masque">.</td><td class="masque">.</td>')+"</tr>";});
+  OBS.forEach(function(o,i){var v=i<oi;h+="<tr"+(v?' class="on"':"")+"><td><b style='color:var(--encre)'>"+o[0]+"</b></td>"+(v?"<td><b>"+o[1]+"</b></td><td><b>"+o[2]+"</b></td><td><b>"+o[3]+"</b></td>":'<td class="masque">.</td><td class="masque">.</td><td class="masque">.</td>')+"</tr>";});
   document.getElementById("tableObs").innerHTML=h;
   document.getElementById("noteObs").textContent=oi>=OBS.length?"Les trois fichiers existent toujours : ils sont tous dans un stockage. Ce qui change, c'est seulement l'endroit. Celui du poste n'est pas perdu, il est resté sur l'autre machine.":"";
 }
@@ -722,7 +540,7 @@ function dessineTri(){
     };
     z.appendChild(b);
   });
-  document.getElementById("rangee").innerHTML=ORDRE.slice(0,pos).map(function(o){return '<span class="pas">'+o[0]+' · '+o[2]+'</span>';}).join('<span style="color:#94a3b8;font-weight:900">→</span>');
+  document.getElementById("rangee").innerHTML=ORDRE.slice(0,pos).map(function(o){return '<span class="pas">'+o[0]+' · '+o[2]+'</span>';}).join('<span style="color:var(--encre-douce);font-weight:900">→</span>');
   majTri();
 }
 function majTri(){document.getElementById("triInfo").textContent=pos+" sur 8 · "+err+" erreur"+(err>1?"s":"");}
@@ -733,7 +551,7 @@ dessineTri();
 var ci=0;
 function dessineCor(){
   var h="<tr><th>Rang</th><th>Fichier</th><th>Taille</th></tr>";
-  ORDRE.forEach(function(o,i){var v=i<ci;h+="<tr"+(v?' class="on"':"")+"><td><b style='color:#172033'>"+(i+1)+"</b></td>"+(v?"<td><b>"+o[0]+"</b> · "+o[1]+"</td><td><b>"+o[2]+"</b></td>":'<td class="masque">.</td><td class="masque">.</td>')+"</tr>";});
+  ORDRE.forEach(function(o,i){var v=i<ci;h+="<tr"+(v?' class="on"':"")+"><td><b style='color:var(--encre)'>"+(i+1)+"</b></td>"+(v?"<td><b>"+o[0]+"</b> · "+o[1]+"</td><td><b>"+o[2]+"</b></td>":'<td class="masque">.</td><td class="masque">.</td>')+"</tr>";});
   document.getElementById("tableCor").innerHTML=h;
   document.getElementById("noteCor").textContent=ci>=ORDRE.length?"Les deux pièges : 850 Ko est plus petit que 3,2 Mo, et 450 Mo est plus petit que 2,4 Go. Dans les deux cas, le plus grand nombre est le plus petit fichier. L'unité d'abord.":"";
 }
@@ -755,7 +573,7 @@ var MOTS={1:"vive",2:"stockage",3:"Enregistrer",4:"morte",5:"interne",6:"externe
 var rv=0,zt=document.getElementById("trace");
 function dessineTrace(){
   zt.innerHTML="<h3>Cours 3. Où va ce que j'enregistre</h3>"+TRACE.map(function(par){return "<p>"+par.map(function(x){
-    if(typeof x==="number")return x<=rv?'<b style="color:#1d4ed8">'+MOTS[x]+'</b>':'<span style="border-bottom:2px solid #93c5fd;color:#93c5fd">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>';
+    if(typeof x==="number")return x<=rv?'<b style="color:var(--accent-encre)">'+MOTS[x]+'</b>':'<span style="border-bottom:2px solid var(--accent);color:var(--accent)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>';
     return x;}).join("")+"</p>";}).join("");
   document.getElementById("motCompte").textContent=rv+" mot"+(rv>1?"s":"")+" sur 8";
 }
diff --git a/1re-numerique/1TC-NUM_bloc-03_pilotage.html b/1re-numerique/1TC-NUM_bloc-03_pilotage.html
index e5a8a2b..298cf05 100644
--- a/1re-numerique/1TC-NUM_bloc-03_pilotage.html
+++ b/1re-numerique/1TC-NUM_bloc-03_pilotage.html
@@ -1,230 +1,47 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="fr">
 <head>
 <meta charset="utf-8">
-<meta name="viewport" content="width=device-width,initial-scale=1">
-<title>Bloc 3 – pilotage</title>
-<style>:root{--ink:#172033;--muted:#667085;--blue:#2563eb;--navy:#172554;--green:#16a34a;--red:#dc2626;--card:#fff;--line:#e5e7eb;--shadow:0 18px 45px #0f172a18}
-*{box-sizing:border-box}html{scroll-behavior:smooth}
-body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:linear-gradient(180deg,#edf4ff,#f8fafc 34%,#fff);color:var(--ink)}
-button,input,select{font:inherit}
-main{max-width:1180px;margin:auto;padding:34px 20px 70px}
-:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
-svg.i{width:1em;height:1em;vertical-align:-.14em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
-
-.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;background:linear-gradient(135deg,#172554,#2563eb);color:#fff;border-radius:28px;padding:30px;box-shadow:var(--shadow);margin-bottom:24px}
-.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:900;opacity:.82}
-.hero h1{font-size:clamp(30px,4.6vw,52px);line-height:1;letter-spacing:-1.6px;margin:7px 0 12px}
-.hero p{margin:0;color:#dbeafe;line-height:1.6;font-size:17px}
-.hero a.up{display:inline-flex;align-items:center;gap:7px;color:#bfdbfe;font-weight:800;font-size:13px;text-decoration:none;margin-bottom:10px}
-.hero a.up:hover{color:#fff}
-.hero-visual{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
-.hero-chip{background:#ffffff14;border:1px solid #ffffff28;border-radius:18px;padding:16px;text-align:center}
-.hero-chip .ico{display:block;margin:0 auto 7px;width:30px;height:30px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
-.hero-chip b{font-size:14px}
-.badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
-.badge{background:#ffffff1f;border:1px solid #ffffff2e;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:800;color:#e0ecff}
-.badge.warn{background:#dc262633;border-color:#fca5a5;color:#fee2e2}
-
-.dashboard{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
-.stat{background:#fff;border:1px solid var(--line);border-radius:17px;padding:14px;box-shadow:0 8px 24px #0f172a0b}
-.stat strong{display:block;font-size:22px;margin-top:3px}
-.stat small{color:#64748b;font-weight:800}
-.stat.ok strong{color:var(--green)}
-
-.chrono{background:#172554;color:#fff;border-radius:20px;padding:16px 18px;box-shadow:var(--shadow);margin-bottom:20px;display:grid;gap:12px}
-.chrono-haut{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
-.pendule{font-size:32px;font-weight:950;font-variant-numeric:tabular-nums;line-height:1}
-.pendule small{display:block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#93b4d8;margin-top:5px}
-.ecart{font-size:14px;font-weight:850;padding:9px 14px;border-radius:999px;background:#ffffff1a;border:1px solid #ffffff2e;min-width:250px;text-align:center}
-.ecart.avance{background:#16a34a2e;border-color:#4ade80;color:#dcfce7}
-.ecart.retard{background:#dc26262e;border-color:#fca5a5;color:#fee2e2}
-.chrono .row button{background:#ffffff1a;border:1px solid #ffffff30;color:#fff}
-.chrono .row button.go{background:#fff;border-color:#fff;color:#172554}
-
-.navtabs{display:grid;gap:10px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:0 8px 24px #0f172a0b;margin-bottom:20px}
-.navtabs.n6{grid-template-columns:repeat(6,1fr)}
-.tab{border:2px solid #e2e8f0;background:#fff;border-radius:14px;padding:12px 10px;font-weight:900;cursor:pointer;color:#334155;text-align:left;position:relative}
-.tab span{display:block;font-size:11px;font-weight:800;color:#94a3b8;margin-top:3px;font-variant-numeric:tabular-nums}
-.tab:hover{border-color:#93c5fd}
-.tab.active{background:#2563eb;color:#fff;border-color:#2563eb;box-shadow:0 8px 18px #2563eb28}
-.tab.active span{color:#c7dcff}
-.tab.prevue::after{content:"";position:absolute;left:12px;right:12px;bottom:-2px;height:4px;border-radius:99px;background:#f59e0b}
-
-.panel{display:none}.panel.active{display:block}
-.card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 10px 28px #0f172a0d;margin-bottom:16px}
-.card h2,.card h3{margin-top:0}
-.card h2{font-size:26px;letter-spacing:-.5px}
-.muted{color:var(--muted);line-height:1.6}
-.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
-.btn{border:0;border-radius:11px;padding:10px 15px;font-weight:850;cursor:pointer;background:#eaf1ff;color:#1d4ed8}
-.btn:hover{filter:brightness(.97)}
-.btn.primary{background:#2563eb;color:#fff}
-.btn.soft{background:#f1f5f9;color:#334155}
-.score{display:inline-block;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:7px 12px;font-weight:900;font-size:14px}
-.feedback{min-height:31px;margin-top:12px;font-weight:850}
-.entete{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:flex-start;margin-bottom:14px}
-.consigne{background:linear-gradient(145deg,#f8fafc,#eef6ff);border:2px solid #dbeafe;border-radius:18px;padding:20px 24px;font-size:20px;font-weight:800;line-height:1.45;margin:16px 0}
-.consigne small{display:block;text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:900;color:var(--blue);margin-bottom:8px}
-.info{border-left:4px solid #cbd5e1;background:#f8fafc;border-radius:0 12px 12px 0;padding:13px 17px;color:#475569;font-size:15px;line-height:1.6;margin-top:16px}
-.info b{color:var(--ink)}
-.info.alerte{border-color:#fca5a5;background:#fef4f4;color:#7f2b2b}
-.info.alerte b{color:#991b1b}
-
-.saisie{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px}
-.saisie input{flex:1;min-width:210px;padding:12px 14px;border:2px solid #cbd5e1;border-radius:12px;outline:none}
-.saisie input:focus{border-color:var(--blue);box-shadow:0 0 0 4px #2563eb18}
-.saisie select{padding:12px 14px;border:2px solid #cbd5e1;border-radius:12px;font-weight:800}
-.colonnes{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:11px}
-.colonne{border:1px solid var(--line);border-radius:17px;background:#f8fbff;min-height:145px;padding:13px}
-.colonne h3{font-size:14px;display:flex;justify-content:space-between;align-items:center;margin:0 0 9px;padding-bottom:8px;border-bottom:1px solid var(--line)}
-.colonne h3 em{font-style:normal;color:#94a3b8;font-size:12px}
-.colonne ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
-.colonne li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:7px 10px;font-size:14px;font-weight:700;display:flex;justify-content:space-between;gap:6px}
-.colonne li button{background:none;border:0;color:#cbd5e1;cursor:pointer;padding:0 3px;font-weight:900}
-.colonne li button:hover{color:var(--red)}
-
-.accordeon{display:grid;gap:10px}
-.item{border:1px solid var(--line);border-radius:17px;background:#fff;overflow:hidden}
-.item>button{width:100%;display:flex;gap:14px;align-items:flex-start;text-align:left;background:none;border:0;padding:15px 18px;cursor:pointer}
-.item>button:hover{background:#f8fbff}
-.item .n{width:30px;height:30px;flex:none;border-radius:10px;background:#eaf1ff;color:#1d4ed8;font-weight:950;display:grid;place-items:center;font-size:14px}
-.item .t{font-weight:850;font-size:17px;flex:1}
-.item .plus{color:#94a3b8;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;padding-top:6px}
-.item .corps{display:none;padding:0 18px 17px 62px;color:#475569;line-height:1.6}
-.item.ouvert .corps{display:block}
-.item.ouvert{border-color:#93c5fd;box-shadow:0 8px 20px #2563eb14}
-.item.ouvert .n{background:#2563eb;color:#fff}
-
-.qcard{border:2px solid #dbeafe;border-radius:20px;background:linear-gradient(145deg,#fbfdff,#f4f9ff);padding:24px 26px}
-.qtag{display:inline-block;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:900;margin-bottom:10px}
-.qtag.cle{background:#fef3c7;color:#92400e}
-.qtxt{font-size:22px;font-weight:900;line-height:1.3;letter-spacing:-.3px;margin-bottom:16px}
-.answer-grid{display:grid;gap:8px}
-.answer{border:2px solid #dbe3ef;background:#fff;border-radius:12px;padding:11px 14px;text-align:left;font-weight:800}
-.answer.ok{border-color:#22c55e;background:#f0fdf4}
-.reveal{display:none;margin-top:16px;border-top:2px dashed #dbeafe;padding-top:15px}
-.reveal.on{display:block}
-.verdict{font-weight:950;color:var(--green);margin-bottom:8px}
-
-.steps{display:grid;gap:11px}
-.step{border:1px solid var(--line);border-radius:17px;background:#fff;padding:16px 20px;display:flex;gap:15px;align-items:flex-start;opacity:.4}
-.step.on{opacity:1;border-color:#93c5fd;box-shadow:0 8px 20px #2563eb14}
-.step.fait{opacity:1}
-.step .n{width:34px;height:34px;flex:none;border-radius:12px;background:#f1f5f9;color:#94a3b8;font-weight:950;display:grid;place-items:center}
-.step.on .n{background:#2563eb;color:#fff}
-.step.fait .n{background:#dcfce7;color:#15803d}
-.step h3{margin:0 0 4px;font-size:17px}
-.step p{margin:0;color:#475569;font-size:15px;line-height:1.55}
-
-figure{margin:0 0 18px}
-figure svg{width:100%;height:auto;display:block;background:#fff;border:1px solid var(--line);border-radius:18px}
-figcaption{font-size:14px;color:var(--muted);margin-top:10px;line-height:1.55}
-
-.trace{border:2px solid #dbeafe;background:linear-gradient(145deg,#fbfdff,#eef6ff);border-radius:20px;padding:26px 30px;font-size:19px;line-height:1.85}
-.trace h3{margin:0 0 14px;font-size:22px}
-.trace p{margin:0 0 .5em}
-.trace code{background:#fff;border:1px solid #dbeafe;border-radius:6px;padding:1px 7px;font-size:.92em}
-
-.check{display:grid;gap:9px}
-.check label{display:flex;gap:13px;align-items:flex-start;border:1px solid var(--line);border-radius:15px;background:#fff;padding:14px 18px;cursor:pointer;font-weight:750}
-.check label:hover{border-color:#93c5fd}
-.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--green);flex:none}
-.check input:checked+span{color:var(--green);font-weight:900}
-
-table.grille{width:100%;border-collapse:collapse;font-size:15px}
-table.grille th,table.grille td{border:1px solid var(--line);padding:10px 13px;text-align:left}
-table.grille th{background:#f8fafc;font-weight:900;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:#475569}
-table.grille td.masque{color:transparent;background:#f8fafc}
-table.grille tr.on td{background:#f0fdf4}
-table.grille td b{color:#15803d}
-
-.filtres{display:flex;gap:9px;flex-wrap:wrap;align-items:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:0 8px 24px #0f172a0b;margin-bottom:20px}
-.filtres .compte{margin-left:auto;font-weight:850;color:var(--muted);font-size:14px}
-.module{margin-bottom:30px}
-.module-tete{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px}
-.module-tete h2{margin:0;font-size:25px;letter-spacing:-.6px}
-.module-tete .p{background:#172554;color:#fff;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:900}
-.module-tete .champ{color:var(--muted);font-size:14px;margin-left:auto}
-.module-note{color:var(--muted);line-height:1.6;margin:0 0 16px;max-width:76ch}
-.blocs{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
-.bloc{border:1px solid var(--line);border-radius:20px;background:#fff;padding:17px 19px;display:flex;gap:15px;align-items:flex-start;text-decoration:none;color:inherit;box-shadow:0 8px 24px #0f172a08}
-.bloc .n{width:40px;height:40px;flex:none;border-radius:14px;background:#f1f5f9;color:#94a3b8;font-weight:950;display:grid;place-items:center;font-size:17px}
-.bloc h3{margin:0 0 5px;font-size:17px;line-height:1.3}
-.bloc .att{font-size:13px;color:var(--muted);font-weight:600}
-.ets{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
-.et{font-size:11px;font-weight:900;border-radius:999px;padding:4px 9px;background:#f1f5f9;color:#475569}
-.et.eval{background:#fee2e2;color:#991b1b}
-.et.fac{background:#f3e8ff;color:#6b21a8}
-.et.pret{background:#dcfce7;color:#15803d}
-a.bloc:hover{border-color:#93c5fd;box-shadow:0 12px 28px #2563eb1f}
-a.bloc .n{background:#2563eb;color:#fff}
-.bloc.vide{border-style:dashed;opacity:.68;box-shadow:none}
-.bloc.vide h3{font-weight:800}
-.masque{display:none!important}
-
-footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:center;color:#64748b;font-size:12px;border-top:1px solid var(--line)}
-
-@media(max-width:980px){.hero{grid-template-columns:1fr}.dashboard{grid-template-columns:repeat(2,1fr)}.navtabs.n6{grid-template-columns:repeat(3,1fr)}}
-@media(max-width:620px){main{padding:20px 12px 60px}.hero{padding:22px 18px}.dashboard{grid-template-columns:1fr}.navtabs.n6{grid-template-columns:repeat(2,1fr)}.blocs{grid-template-columns:1fr}.ecart{min-width:0;flex:1}.filtres .compte{margin-left:0;width:100%}}
-@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
-@media print{.chrono,.navtabs,.filtres,.saisie{display:none}.panel{display:block!important}}
-
-.progres{position:sticky;top:0;z-index:40;background:#fff;border:1px solid var(--line);border-radius:0 0 20px 20px;padding:12px 18px;box-shadow:0 6px 20px #0f172a12;margin-bottom:20px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
-.barre{flex:1;min-width:180px;height:10px;background:#e2e8f0;border-radius:99px;overflow:hidden}
-.barre i{display:block;height:100%;width:0;background:#2563eb;border-radius:99px;transition:width .25s}
-.q{border:1px solid var(--line);border-radius:16px;background:#fff;padding:14px 16px;margin-bottom:10px}
-.q.bon{border-color:#22c55e;background:#f2fdf6}
-.q.faux{border-color:#f59e0b;background:#fffbeb}
-.q .txt{font-weight:800;margin-bottom:10px;font-size:17px}
-.q .opts{display:flex;gap:8px;flex-wrap:wrap}
-.q .opts button{border:2px solid #dbe3ef;background:#fff;border-radius:11px;padding:9px 14px;font-weight:800;cursor:pointer;color:#334155}
-.q .opts button:hover:not(:disabled){border-color:#2563eb;color:#1d4ed8}
-.q .opts button:disabled{cursor:default;opacity:.55}
-.q .opts button.pick{border-color:#22c55e;background:#dcfce7;color:#15803d;opacity:1}
-.q .opts button.rate{border-color:#f59e0b;background:#fef3c7;color:#92400e;opacity:1}
-.q .expl{display:none;margin-top:10px;font-size:15px;color:#475569;line-height:1.55;border-left:3px solid #cbd5e1;padding-left:12px}
-.q.done .expl{display:block}
-.figpetit{max-width:560px;margin:0 auto 14px}
-#bilan{display:none}
-#bilan.on{display:block}
-.gros{font-size:44px;font-weight:950;line-height:1;color:#2563eb}
-textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px;padding:12px;font:inherit;font-size:14px;resize:vertical}
-.fichiers{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin:14px 0}
-.fic{border:2px solid #dbe3ef;background:#fff;border-radius:14px;padding:12px 14px;text-align:left;cursor:pointer;font-weight:800;font-size:14.5px;overflow-wrap:anywhere;min-width:0}
-.fic small{display:block;font-weight:700;color:#64748b;margin-top:3px;font-size:13px}
-.fic b{display:block;font-size:20px;color:#172554;margin-bottom:2px}
-.fic:hover{border-color:#2563eb}
-.fic.pris{opacity:.25;cursor:default}
-.fic.rate{border-color:#f59e0b;background:#fffbeb}
-.rangee{display:flex;gap:6px;flex-wrap:wrap;min-height:54px;border:2px dashed #cbd5e1;border-radius:14px;padding:8px;align-items:center}
-.rangee .pas{background:#dcfce7;color:#15803d;border-radius:10px;padding:7px 10px;font-weight:900;font-size:14px}
-.etape3{display:none}.etape3.on{display:block}
-</style>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Bloc 3, pilotage — 1re tronc commun</title>
+<meta name="robots" content="noindex">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="../assets/theme.css">
+<link rel="stylesheet" href="../assets/numerique-1re.css">
 </head>
-<body>
-<main>
+<body class="classe-tc">
 
-<section class="hero">
-  <div>
-    <a class="up" href="pilotage.html"><svg class="i" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg> Retour au menu</a>
-    <div class="eyebrow">Document enseignant · Module 1 · Semaine 3 · Bloc 3 sur 35</div>
+<header class="entete">
+  <div class="entete__interieur entete__interieur--large">
+    <nav class="ariane" aria-label="Fil d'Ariane">
+      <a href="../index.html">Mes cours</a><span aria-hidden="true">/</span><a href="index.html">1re tronc commun</a><span aria-hidden="true">/</span><a href="pilotage.html">Pilotage</a><span aria-hidden="true">/</span><strong>Bloc 3</strong>
+    </nav>
     <h1>Où va ce que j'enregistre</h1>
-    <p style="margin-bottom:10px"><a href="1TC-NUM_bloc-03_ou-va-ce-que-j-enregistre.html" style="color:#fff;font-weight:800">Ouvrir la version à projeter aux élèves</a></p><p>Termine S21 : mémoire vive et morte, stockage interne et externe. Les tailles Ko à To sont un complément facultatif, non évaluable : c'est lui qu'on coupe en premier.</p>
-    <div class="badges">
-      <span class="badge">S21 · mémoire vive et morte</span>
-      <span class="badge">S21 · stockage interne et externe</span>
-      <span class="badge">Ko à To · facultatif, non cotable</span>
-      <span class="badge warn">Ne pas projeter</span>
-    </div>
+    <p class="entete__meta">Document enseignant · Module 1 · Semaine 3 · Bloc 3 sur 35</p>
   </div>
-  <div class="hero-visual">
-    <div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M13 2L4 14h7l-1 8 9-12h-7z"/></svg><b>La coupure</b></div>
-    <div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><rect x="3" y="7" width="18" height="10" rx="2"/><path d="M7 7v10M11 7v10M15 7v10"/></svg><b>Les mémoires</b></div>
-    <div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><rect x="8" y="3" width="8" height="12" rx="2"/><path d="M10 15v4h4v-4M12 7v3"/></svg><b>Trois endroits</b></div>
-    <div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M4 20V10M10 20V4M16 20v-8M22 20H2"/></svg><b>Les tailles</b></div>
-  </div>
-</section>
+</header>
+
+<main class="contenu contenu--large">
+
+  <p class="chapeau"><a href="1TC-NUM_bloc-03_ou-va-ce-que-j-enregistre.html">Ouvrir la version à projeter aux élèves</a></p>
+  <p class="chapeau">Termine S21 : mémoire vive et morte, stockage interne et externe. Les tailles Ko à To sont un complément facultatif, non évaluable : c'est lui qu'on coupe en premier.</p>
+
+  <ul class="etiquettes">
+    <li class="etiquette">S21 · mémoire vive et morte</li>
+    <li class="etiquette">S21 · stockage interne et externe</li>
+    <li class="etiquette">Ko à To · facultatif, non cotable</li>
+    <li class="etiquette etiquette--alerte">Ne pas projeter</li>
+  </ul>
+
+  <ul class="apercu">
+    <li><svg viewBox="0 0 24 24"><path d="M13 2L4 14h7l-1 8 9-12h-7z"/></svg><span>La coupure</span></li>
+    <li><svg viewBox="0 0 24 24"><rect x="3" y="7" width="18" height="10" rx="2"/><path d="M7 7v10M11 7v10M15 7v10"/></svg><span>Les mémoires</span></li>
+    <li><svg viewBox="0 0 24 24"><rect x="8" y="3" width="8" height="12" rx="2"/><path d="M10 15v4h4v-4M12 7v3"/></svg><span>Trois endroits</span></li>
+    <li><svg viewBox="0 0 24 24"><path d="M4 20V10M10 20V4M16 20v-8M22 20H2"/></svg><span>Les tailles</span></li>
+  </ul>
+
 
 <section class="dashboard">
   <div class="stat"><small>Activité en cours</small><strong id="sPhase">1 sur 6</strong></div>
@@ -237,7 +54,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
   <div class="row">
     <button class="btn primary" id="btnGo">Démarrer</button>
     <button class="btn soft" id="btnStop">Remettre à zéro</button>
-    <span class="ecart" id="ecart" style="background:#f1f5f9;border:1px solid var(--line);color:#475569">Activité 1</span>
+    <span class="ecart" id="ecart" style="background:var(--papier);border:1px solid var(--line);color:var(--encre-douce)">Activité 1</span>
   </div>
 </div>
 
@@ -245,7 +62,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 
 <!-- 1 -->
 <section class="panel active" id="p0"><div class="card">
-  <div class="entete"><div><h2>La démonstration</h2><p class="muted">Regarde bien. Ensuite, livret page 1.</p></div><span class="score">10 min</span></div>
+  <div class="carte-entete"><div><h2>La démonstration</h2><p class="muted">Regarde bien. Ensuite, livret page 1.</p></div><span class="score">10 min</span></div>
 
   <div class="consigne"><small>Ce qui va se passer</small>
     Le professeur tape un texte, puis il coupe brutalement l'ordinateur, sans enregistrer. Il le rallume.</div>
@@ -269,7 +86,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 <!-- 2 -->
 <section class="panel" id="p1">
 <div class="card">
-  <div class="entete"><div><h2>Je comprends. Les deux mémoires et le stockage</h2><p class="muted">On lit cette page ensemble. Elle est dans ton livret.</p></div><span class="score">20 min</span></div>
+  <div class="carte-entete"><div><h2>Je comprends. Les deux mémoires et le stockage</h2><p class="muted">On lit cette page ensemble. Elle est dans ton livret.</p></div><span class="score">20 min</span></div>
 <div class="info alerte"><b>Correction de notre propre séquence.</b> La séquence associait la mémoire morte au placard. C'est une confusion : le placard est le stockage. La mémoire morte ne contient que le micrologiciel de démarrage, BIOS ou UEFI. L'attendu sépare d'ailleurs deux couples distincts, vive contre morte et interne contre externe. D'où la troisième image : la notice d'ouverture.</div>
 <div class="info alerte"><b>Le recueil FWB se trompe page 13.</b> Il place le système d'exploitation en mémoire morte. Faux : Windows est dans le stockage interne, la ROM se contente d'aller l'y chercher. Sa propre infographie page 14 est correcte. Ne distribue pas la page 13 telle quelle.</div>
 <div class="info"><b>Ce qui se dit ensemble.</b> Ce qui s'est passé, la cuisine, la mémoire vive, et « enregistrer ». Le reste se lit seul. Fais reformuler ce qui est arrivé au texte avec les mots de la cuisine : c'est la vérification qui compte. Puis reviens aux hypothèses du tableau et dis à l'élève qui a écrit « ça n'a pas eu le temps de se sauvegarder » qu'il avait raison.</div>
@@ -287,12 +104,12 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
   <figure><svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 800 380">
 
 <defs>
-<marker id="a" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M0 0L10 5L0 10z" fill="#172554"/></marker>
+<marker id="a" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M0 0L10 5L0 10z" fill="var(--encre)"/></marker>
 <marker id="v" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M0 0L10 5L0 10z" fill="#16a34a"/></marker>
 </defs>
 <g font-family="Arial, Helvetica, sans-serif">
-<rect x="20" y="20" width="760" height="340" rx="18" fill="#f8fafc" stroke="#cbd5e1" stroke-width="2" stroke-dasharray="6 6"/>
-<text x="40" y="50" font-size="15" font-weight="bold" fill="#64748b">DANS L'ORDINATEUR</text>
+<rect x="20" y="20" width="760" height="340" rx="18" fill="var(--papier)" stroke="var(--trait-fort)" stroke-width="2" stroke-dasharray="6 6"/>
+<text x="40" y="50" font-size="15" font-weight="bold" fill="var(--encre-douce)">DANS L'ORDINATEUR</text>
 <rect x="40" y="80" width="200" height="110" rx="14" fill="#fef3c7" stroke="#b45309" stroke-width="3"/>
 <text x="140" y="118" text-anchor="middle" font-size="19" font-weight="bold" fill="#92400e">Mémoire vive</text>
 <text x="140" y="142" text-anchor="middle" font-size="14" fill="#92400e">le plan de travail</text>
@@ -300,8 +117,8 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 <rect x="300" y="80" width="180" height="110" rx="14" fill="#e0e7ff" stroke="#3730a3" stroke-width="3"/>
 <text x="390" y="125" text-anchor="middle" font-size="19" font-weight="bold" fill="#3730a3">Processeur</text>
 <text x="390" y="150" text-anchor="middle" font-size="14" fill="#3730a3">le cuisinier</text>
-<path d="M240 125 H292" stroke="#172554" stroke-width="3" marker-end="url(#a)"/>
-<path d="M300 150 H248" stroke="#172554" stroke-width="3" marker-end="url(#a)"/>
+<path d="M240 125 H292" stroke="var(--encre)" stroke-width="3" marker-end="url(#a)"/>
+<path d="M300 150 H248" stroke="var(--encre)" stroke-width="3" marker-end="url(#a)"/>
 <rect x="540" y="80" width="220" height="110" rx="14" fill="#dcfce7" stroke="#15803d" stroke-width="3"/>
 <text x="650" y="118" text-anchor="middle" font-size="19" font-weight="bold" fill="#166534">Stockage</text>
 <text x="650" y="142" text-anchor="middle" font-size="14" fill="#166534">les placards</text>
@@ -309,10 +126,10 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 <path d="M140 195 C140 260, 600 260, 640 198" stroke="#16a34a" stroke-width="4" fill="none" marker-end="url(#v)"/>
 <rect x="318" y="228" width="160" height="34" rx="17" fill="#16a34a"/>
 <text x="398" y="251" text-anchor="middle" font-size="16" font-weight="bold" fill="#ffffff">ENREGISTRER</text>
-<rect x="40" y="285" width="200" height="60" rx="12" fill="#f1f5f9" stroke="#475569" stroke-width="2.5"/>
-<text x="140" y="311" text-anchor="middle" font-size="17" font-weight="bold" fill="#334155">Mémoire morte</text>
-<text x="140" y="332" text-anchor="middle" font-size="13" fill="#475569">la notice d'ouverture, gravée</text>
-<text x="262" y="321" font-size="14" fill="#475569">sert uniquement au démarrage de la machine</text>
+<rect x="40" y="285" width="200" height="60" rx="12" fill="var(--papier)" stroke="var(--encre-douce)" stroke-width="2.5"/>
+<text x="140" y="311" text-anchor="middle" font-size="17" font-weight="bold" fill="var(--encre-douce)">Mémoire morte</text>
+<text x="140" y="332" text-anchor="middle" font-size="13" fill="var(--encre-douce)">la notice d'ouverture, gravée</text>
+<text x="262" y="321" font-size="14" fill="var(--encre-douce)">sert uniquement au démarrage de la machine</text>
 </g></svg>
 </figure>
 
@@ -352,34 +169,34 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 <!-- 3 -->
 <section class="panel" id="p2">
 <div class="card">
-  <div class="entete"><div><h2>Je comprends. Stockage interne et externe</h2><p class="muted">On lit cette page ensemble. Elle est dans ton livret.</p></div><span class="score">25 min</span></div>
+  <div class="carte-entete"><div><h2>Je comprends. Stockage interne et externe</h2><p class="muted">On lit cette page ensemble. Elle est dans ton livret.</p></div><span class="score">25 min</span></div>
 
   <p>Tous les stockages gardent les fichiers quand on éteint. Ce qui les différencie, c'est <b>où ils se trouvent</b>.</p>
   <figure><svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 800 330">
 
 <g font-family="Arial, Helvetica, sans-serif">
-<rect x="30" y="40" width="250" height="250" rx="18" fill="#eff6ff" stroke="#172554" stroke-width="3"/>
-<text x="155" y="30" text-anchor="middle" font-size="15" font-weight="bold" fill="#172554">L'ORDINATEUR</text>
+<rect x="30" y="40" width="250" height="250" rx="18" fill="#eff6ff" stroke="var(--encre)" stroke-width="3"/>
+<text x="155" y="30" text-anchor="middle" font-size="15" font-weight="bold" fill="var(--encre)">L'ORDINATEUR</text>
 <rect x="80" y="130" width="150" height="80" rx="10" fill="#dcfce7" stroke="#15803d" stroke-width="3"/>
 <text x="155" y="165" text-anchor="middle" font-size="16" font-weight="bold" fill="#166534">Disque dur</text>
 <text x="155" y="187" text-anchor="middle" font-size="14" fill="#166534">ou SSD</text>
 <text x="155" y="250" text-anchor="middle" font-size="16" font-weight="bold" fill="#15803d">STOCKAGE INTERNE</text>
-<text x="155" y="272" text-anchor="middle" font-size="13" fill="#475569">dedans, reste sur cette machine</text>
-<line x1="310" y1="30" x2="310" y2="300" stroke="#cbd5e1" stroke-width="2" stroke-dasharray="6 6"/>
+<text x="155" y="272" text-anchor="middle" font-size="13" fill="var(--encre-douce)">dedans, reste sur cette machine</text>
+<line x1="310" y1="30" x2="310" y2="300" stroke="var(--trait-fort)" stroke-width="2" stroke-dasharray="6 6"/>
 <text x="555" y="30" text-anchor="middle" font-size="15" font-weight="bold" fill="#7c2d12">STOCKAGE EXTERNE : en dehors de l'appareil</text>
 <rect x="340" y="60" width="200" height="150" rx="16" fill="#fff7ed" stroke="#c2410c" stroke-width="3"/>
 <rect x="400" y="95" width="80" height="34" rx="6" fill="#fed7aa" stroke="#c2410c" stroke-width="2.5"/>
-<rect x="480" y="104" width="22" height="16" rx="2" fill="#94a3b8"/>
+<rect x="480" y="104" width="22" height="16" rx="2" fill="var(--encre-douce)"/>
 <text x="440" y="160" text-anchor="middle" font-size="15" font-weight="bold" fill="#9a3412">Clé USB</text>
 <text x="440" y="182" text-anchor="middle" font-size="13" fill="#9a3412">disque externe, carte SD</text>
 <text x="440" y="240" text-anchor="middle" font-size="14" font-weight="bold" fill="#c2410c">je l'emporte</text>
-<text x="440" y="260" text-anchor="middle" font-size="13" fill="#475569">pas besoin d'internet</text>
+<text x="440" y="260" text-anchor="middle" font-size="13" fill="var(--encre-douce)">pas besoin d'internet</text>
 <rect x="570" y="60" width="200" height="150" rx="16" fill="#f5f3ff" stroke="#6d28d9" stroke-width="3"/>
 <path d="M620 130 a22 22 0 0 1 20 -30 a30 30 0 0 1 56 8 a20 20 0 0 1 4 40 h-72 a18 18 0 0 1 -8 -18z" fill="#ddd6fe" stroke="#6d28d9" stroke-width="2.5"/>
 <text x="670" y="175" text-anchor="middle" font-size="15" font-weight="bold" fill="#5b21b6">En ligne (cloud)</text>
 <text x="670" y="195" text-anchor="middle" font-size="13" fill="#5b21b6">sur un serveur, ailleurs</text>
 <text x="670" y="240" text-anchor="middle" font-size="14" font-weight="bold" fill="#6d28d9">accessible partout</text>
-<text x="670" y="260" text-anchor="middle" font-size="13" fill="#475569">avec internet</text>
+<text x="670" y="260" text-anchor="middle" font-size="13" fill="var(--encre-douce)">avec internet</text>
 </g></svg>
 </figure>
 
@@ -430,7 +247,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 <!-- 4 -->
 <section class="panel" id="p3">
 <div class="card">
-  <div class="entete"><div><h2>Je comprends. La taille des fichiers</h2><p class="muted">On lit cette page ensemble. Elle est dans ton livret.</p></div><span class="score">25 min</span></div>
+  <div class="carte-entete"><div><h2>Je comprends. La taille des fichiers</h2><p class="muted">On lit cette page ensemble. Elle est dans ton livret.</p></div><span class="score">25 min</span></div>
 
   <p>Un stockage n'est pas infini, comme un placard a un nombre d'étagères. La taille d'un fichier se mesure en <b>octets</b>. Une lettre tapée au clavier occupe environ un octet.</p>
   <p>Pour éviter les nombres immenses, on utilise des préfixes, comme pour les mètres : <b>kilo</b> veut dire mille, comme dans kilomètre.</p>
@@ -438,26 +255,26 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 
 <g font-family="Arial, Helvetica, sans-serif" text-anchor="middle">
 <g font-size="22" font-weight="bold">
-<rect x="20" y="60" width="120" height="70" rx="12" fill="#f1f5f9" stroke="#475569" stroke-width="2.5"/><text x="80" y="104" fill="#334155">octet</text>
+<rect x="20" y="60" width="120" height="70" rx="12" fill="var(--papier)" stroke="var(--encre-douce)" stroke-width="2.5"/><text x="80" y="104" fill="var(--encre-douce)">octet</text>
 <rect x="180" y="60" width="120" height="70" rx="12" fill="#dbeafe" stroke="#1d4ed8" stroke-width="2.5"/><text x="240" y="104" fill="#1d4ed8">Ko</text>
 <rect x="340" y="60" width="120" height="70" rx="12" fill="#dcfce7" stroke="#15803d" stroke-width="2.5"/><text x="400" y="104" fill="#15803d">Mo</text>
 <rect x="500" y="60" width="120" height="70" rx="12" fill="#fef3c7" stroke="#b45309" stroke-width="2.5"/><text x="560" y="104" fill="#b45309">Go</text>
 <rect x="660" y="60" width="120" height="70" rx="12" fill="#fee2e2" stroke="#b91c1c" stroke-width="2.5"/><text x="720" y="104" fill="#b91c1c">To</text>
 </g>
-<g font-size="15" font-weight="bold" fill="#172554">
+<g font-size="15" font-weight="bold" fill="var(--encre)">
 <text x="160" y="45">× 1000</text><text x="320" y="45">× 1000</text><text x="480" y="45">× 1000</text><text x="640" y="45">× 1000</text>
 </g>
-<g stroke="#172554" stroke-width="2.5" fill="none">
+<g stroke="var(--encre)" stroke-width="2.5" fill="none">
 <path d="M142 95 H176"/><path d="M302 95 H336"/><path d="M462 95 H496"/><path d="M622 95 H656"/>
 </g>
-<g font-size="13" fill="#475569">
+<g font-size="13" fill="var(--encre-douce)">
 <text x="80" y="160">une lettre</text>
 <text x="240" y="160">un texte court</text>
 <text x="400" y="160">une photo,</text><text x="400" y="178">une chanson</text>
 <text x="560" y="160">un film,</text><text x="560" y="178">une clé USB</text>
 <text x="720" y="160">un gros disque</text><text x="720" y="178">de sauvegarde</text>
 </g>
-<text x="400" y="225" font-size="15" font-weight="bold" fill="#172554">Plus petit  ←————————————————————→  Plus grand</text>
+<text x="400" y="225" font-size="15" font-weight="bold" fill="var(--encre)">Plus petit  ←————————————————————→  Plus grand</text>
 </g></svg>
 </figure>
 
@@ -482,12 +299,12 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 </div>
 
 <div class="card">
-  <div class="entete"><div><h2>Je m'entraine</h2><p class="muted">Quatre exercices, 25 questions. La correction s'affiche tout de suite avec l'explication.</p></div></div>
+  <div class="carte-entete"><div><h2>Je m'entraine</h2><p class="muted">Quatre exercices, 25 questions. La correction s'affiche tout de suite avec l'explication.</p></div></div>
   <div class="consigne"><small>Avant de commencer</small>
     Ce n'est pas coté. Rien n'est enregistré. Tu peux te tromper, c'est fait pour ça.<br>À la fin, recopie tes deux lignes de résultat dans ton livret, page « Où j'en suis ».</div>
 
   <div class="progres">
-    <input id="nom" placeholder="Ton prénom et ton nom" style="padding:10px 13px;border:2px solid #cbd5e1;border-radius:11px;min-width:220px;flex:1">
+    <input id="nom" placeholder="Ton prénom et ton nom" style="padding:10px 13px;border:2px solid var(--trait-fort);border-radius:11px;min-width:220px;flex:1">
     <div class="barre"><i id="jauge"></i></div>
     <span class="score" id="avancement">0 / 25</span>
   </div>
@@ -506,7 +323,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
   <div class="row" style="margin-top:22px"><button class="btn primary" id="voir">Voir mon résultat</button><button class="btn soft" id="reset">Tout recommencer</button></div>
   <div id="bilan" style="margin-top:20px">
     <div class="row" style="align-items:flex-end;gap:20px;margin-bottom:16px">
-      <div><span class="gros" id="gTotal">0</span><span style="font-size:22px;font-weight:800;color:#94a3b8"> / 25</span></div>
+      <div><span class="gros" id="gTotal">0</span><span style="font-size:22px;font-weight:800;color:var(--encre-douce)"> / 25</span></div>
       <div class="muted" id="gMot" style="font-weight:800;font-size:18px"></div>
     </div>
     <div id="gDetail" style="margin-bottom:16px"></div>
@@ -520,7 +337,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 <!-- 5 -->
 <section class="panel" id="p4">
 <div class="card">
-  <div class="entete"><div><h2>La correction du classement</h2><p class="muted">On corrige ensemble.</p></div><span class="score">15 min</span></div>
+  <div class="carte-entete"><div><h2>La correction du classement</h2><p class="muted">On corrige ensemble.</p></div><span class="score">15 min</span></div>
   <div class="row" style="margin-bottom:12px">
     <button class="btn primary" id="corSuiv">Révéler le fichier suivant</button>
     <button class="btn soft" id="corReset">Tout masquer</button>
@@ -543,7 +360,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 <!-- 6 -->
 <section class="panel" id="p5">
 <div class="card">
-  <div class="entete"><div><h2>Ma trace écrite</h2><p class="muted">Dans ton livret. Complète les mots manquants.</p></div><span class="score">5 min</span></div>
+  <div class="carte-entete"><div><h2>Ma trace écrite</h2><p class="muted">Dans ton livret. Complète les mots manquants.</p></div><span class="score">5 min</span></div>
   <div class="row" style="margin-bottom:16px">
     <button class="btn primary" id="motSuiv">Révéler le mot suivant</button>
     <button class="btn soft" id="motReset">Tout masquer</button>
@@ -563,7 +380,9 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 </section>
 
 </main>
-<footer>Bloc 3 sur 35 · Séquence annuelle 1TC-NUM, volet numérique FMTTN · 2026-2027 · M. Courcelle</footer>
+<footer class="pied">
+  <div class="pied__interieur">Bloc 3 sur 35 · Séquence annuelle 1TC-NUM, volet numérique FMTTN · 2026-2027 · M. Courcelle</div>
+</footer>
 
 <script>
 "use strict";
@@ -716,7 +535,7 @@ var OBS=[["Le dossier du poste","Interne","Non","Non"],["La clé USB","Externe",
 var oi=0;
 function dessineObs(){
   var h="<tr><th>Où j'ai enregistré</th><th>Interne ou externe</th><th>Sur l'autre poste ?</th><th>Réseau ou internet ?</th></tr>";
-  OBS.forEach(function(o,i){var v=i<oi;h+="<tr"+(v?' class="on"':"")+"><td><b style='color:#172033'>"+o[0]+"</b></td>"+(v?"<td><b>"+o[1]+"</b></td><td><b>"+o[2]+"</b></td><td><b>"+o[3]+"</b></td>":'<td class="masque">.</td><td class="masque">.</td><td class="masque">.</td>')+"</tr>";});
+  OBS.forEach(function(o,i){var v=i<oi;h+="<tr"+(v?' class="on"':"")+"><td><b style='color:var(--encre)'>"+o[0]+"</b></td>"+(v?"<td><b>"+o[1]+"</b></td><td><b>"+o[2]+"</b></td><td><b>"+o[3]+"</b></td>":'<td class="masque">.</td><td class="masque">.</td><td class="masque">.</td>')+"</tr>";});
   document.getElementById("tableObs").innerHTML=h;
   document.getElementById("noteObs").textContent=oi>=OBS.length?"Les trois fichiers existent toujours : ils sont tous dans un stockage. Ce qui change, c'est seulement l'endroit. Celui du poste n'est pas perdu, il est resté sur l'autre machine.":"";
 }
@@ -743,7 +562,7 @@ function dessineTri(){
     };
     z.appendChild(b);
   });
-  document.getElementById("rangee").innerHTML=ORDRE.slice(0,pos).map(function(o){return '<span class="pas">'+o[0]+' · '+o[2]+'</span>';}).join('<span style="color:#94a3b8;font-weight:900">→</span>');
+  document.getElementById("rangee").innerHTML=ORDRE.slice(0,pos).map(function(o){return '<span class="pas">'+o[0]+' · '+o[2]+'</span>';}).join('<span style="color:var(--encre-douce);font-weight:900">→</span>');
   majTri();
 }
 function majTri(){document.getElementById("triInfo").textContent=pos+" sur 8 · "+err+" erreur"+(err>1?"s":"");}
@@ -754,7 +573,7 @@ dessineTri();
 var ci=0;
 function dessineCor(){
   var h="<tr><th>Rang</th><th>Fichier</th><th>Taille</th></tr>";
-  ORDRE.forEach(function(o,i){var v=i<ci;h+="<tr"+(v?' class="on"':"")+"><td><b style='color:#172033'>"+(i+1)+"</b></td>"+(v?"<td><b>"+o[0]+"</b> · "+o[1]+"</td><td><b>"+o[2]+"</b></td>":'<td class="masque">.</td><td class="masque">.</td>')+"</tr>";});
+  ORDRE.forEach(function(o,i){var v=i<ci;h+="<tr"+(v?' class="on"':"")+"><td><b style='color:var(--encre)'>"+(i+1)+"</b></td>"+(v?"<td><b>"+o[0]+"</b> · "+o[1]+"</td><td><b>"+o[2]+"</b></td>":'<td class="masque">.</td><td class="masque">.</td>')+"</tr>";});
   document.getElementById("tableCor").innerHTML=h;
   document.getElementById("noteCor").textContent=ci>=ORDRE.length?"Les deux pièges : 850 Ko est plus petit que 3,2 Mo, et 450 Mo est plus petit que 2,4 Go. Dans les deux cas, le plus grand nombre est le plus petit fichier. L'unité d'abord.":"";
 }
@@ -776,7 +595,7 @@ var MOTS={1:"vive",2:"stockage",3:"Enregistrer",4:"morte",5:"interne",6:"externe
 var rv=0,zt=document.getElementById("trace");
 function dessineTrace(){
   zt.innerHTML="<h3>Cours 3. Où va ce que j'enregistre</h3>"+TRACE.map(function(par){return "<p>"+par.map(function(x){
-    if(typeof x==="number")return x<=rv?'<b style="color:#1d4ed8">'+MOTS[x]+'</b>':'<span style="border-bottom:2px solid #93c5fd;color:#93c5fd">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>';
+    if(typeof x==="number")return x<=rv?'<b style="color:var(--accent-encre)">'+MOTS[x]+'</b>':'<span style="border-bottom:2px solid var(--accent);color:var(--accent)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>';
     return x;}).join("")+"</p>";}).join("");
   document.getElementById("motCompte").textContent=rv+" mot"+(rv>1?"s":"")+" sur 8";
 }
diff --git a/1re-numerique/1TC-NUM_bloc-04_comment-ca-circule.html b/1re-numerique/1TC-NUM_bloc-04_comment-ca-circule.html
index 27ab491..e25a401 100644
--- a/1re-numerique/1TC-NUM_bloc-04_comment-ca-circule.html
+++ b/1re-numerique/1TC-NUM_bloc-04_comment-ca-circule.html
@@ -1,236 +1,45 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="fr">
 <head>
 <meta charset="utf-8">
-<meta name="viewport" content="width=device-width,initial-scale=1">
-<title>Cours 4 – Comment ça circule</title>
-<style>:root{--ink:#172033;--muted:#667085;--blue:#2563eb;--navy:#172554;--green:#16a34a;--red:#dc2626;--card:#fff;--line:#e5e7eb;--shadow:0 18px 45px #0f172a18}
-*{box-sizing:border-box}html{scroll-behavior:smooth}
-body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:linear-gradient(180deg,#edf4ff,#f8fafc 34%,#fff);color:var(--ink)}
-button,input,select{font:inherit}
-main{max-width:1180px;margin:auto;padding:34px 20px 70px}
-:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
-svg.i{width:1em;height:1em;vertical-align:-.14em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
-
-.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;background:linear-gradient(135deg,#172554,#2563eb);color:#fff;border-radius:28px;padding:30px;box-shadow:var(--shadow);margin-bottom:24px}
-.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:900;opacity:.82}
-.hero h1{font-size:clamp(30px,4.6vw,52px);line-height:1;letter-spacing:-1.6px;margin:7px 0 12px}
-.hero p{margin:0;color:#dbeafe;line-height:1.6;font-size:17px}
-.hero a.up{display:inline-flex;align-items:center;gap:7px;color:#bfdbfe;font-weight:800;font-size:13px;text-decoration:none;margin-bottom:10px}
-.hero a.up:hover{color:#fff}
-.hero-visual{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
-.hero-chip{background:#ffffff14;border:1px solid #ffffff28;border-radius:18px;padding:16px;text-align:center}
-.hero-chip .ico{display:block;margin:0 auto 7px;width:30px;height:30px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
-.hero-chip b{font-size:14px}
-.badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
-.badge{background:#ffffff1f;border:1px solid #ffffff2e;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:800;color:#e0ecff}
-.badge.warn{background:#dc262633;border-color:#fca5a5;color:#fee2e2}
-
-.dashboard{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
-.stat{background:#fff;border:1px solid var(--line);border-radius:17px;padding:14px;box-shadow:0 8px 24px #0f172a0b}
-.stat strong{display:block;font-size:22px;margin-top:3px}
-.stat small{color:#64748b;font-weight:800}
-.stat.ok strong{color:var(--green)}
-
-.chrono{background:#172554;color:#fff;border-radius:20px;padding:16px 18px;box-shadow:var(--shadow);margin-bottom:20px;display:grid;gap:12px}
-.chrono-haut{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
-.pendule{font-size:32px;font-weight:950;font-variant-numeric:tabular-nums;line-height:1}
-.pendule small{display:block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#93b4d8;margin-top:5px}
-.ecart{font-size:14px;font-weight:850;padding:9px 14px;border-radius:999px;background:#ffffff1a;border:1px solid #ffffff2e;min-width:250px;text-align:center}
-.ecart.avance{background:#16a34a2e;border-color:#4ade80;color:#dcfce7}
-.ecart.retard{background:#dc26262e;border-color:#fca5a5;color:#fee2e2}
-.chrono .row button{background:#ffffff1a;border:1px solid #ffffff30;color:#fff}
-.chrono .row button.go{background:#fff;border-color:#fff;color:#172554}
-
-.navtabs{display:grid;gap:10px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:0 8px 24px #0f172a0b;margin-bottom:20px}
-.navtabs.n6{grid-template-columns:repeat(6,1fr)}
-.tab{border:2px solid #e2e8f0;background:#fff;border-radius:14px;padding:12px 10px;font-weight:900;cursor:pointer;color:#334155;text-align:left;position:relative}
-.tab span{display:block;font-size:11px;font-weight:800;color:#94a3b8;margin-top:3px;font-variant-numeric:tabular-nums}
-.tab:hover{border-color:#93c5fd}
-.tab.active{background:#2563eb;color:#fff;border-color:#2563eb;box-shadow:0 8px 18px #2563eb28}
-.tab.active span{color:#c7dcff}
-.tab.prevue::after{content:"";position:absolute;left:12px;right:12px;bottom:-2px;height:4px;border-radius:99px;background:#f59e0b}
-
-.panel{display:none}.panel.active{display:block}
-.card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 10px 28px #0f172a0d;margin-bottom:16px}
-.card h2,.card h3{margin-top:0}
-.card h2{font-size:26px;letter-spacing:-.5px}
-.muted{color:var(--muted);line-height:1.6}
-.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
-.btn{border:0;border-radius:11px;padding:10px 15px;font-weight:850;cursor:pointer;background:#eaf1ff;color:#1d4ed8}
-.btn:hover{filter:brightness(.97)}
-.btn.primary{background:#2563eb;color:#fff}
-.btn.soft{background:#f1f5f9;color:#334155}
-.score{display:inline-block;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:7px 12px;font-weight:900;font-size:14px}
-.feedback{min-height:31px;margin-top:12px;font-weight:850}
-.entete{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:flex-start;margin-bottom:14px}
-.consigne{background:linear-gradient(145deg,#f8fafc,#eef6ff);border:2px solid #dbeafe;border-radius:18px;padding:20px 24px;font-size:20px;font-weight:800;line-height:1.45;margin:16px 0}
-.consigne small{display:block;text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:900;color:var(--blue);margin-bottom:8px}
-.info{border-left:4px solid #cbd5e1;background:#f8fafc;border-radius:0 12px 12px 0;padding:13px 17px;color:#475569;font-size:15px;line-height:1.6;margin-top:16px}
-.info b{color:var(--ink)}
-.info.alerte{border-color:#fca5a5;background:#fef4f4;color:#7f2b2b}
-.info.alerte b{color:#991b1b}
-
-.saisie{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px}
-.saisie input{flex:1;min-width:210px;padding:12px 14px;border:2px solid #cbd5e1;border-radius:12px;outline:none}
-.saisie input:focus{border-color:var(--blue);box-shadow:0 0 0 4px #2563eb18}
-.saisie select{padding:12px 14px;border:2px solid #cbd5e1;border-radius:12px;font-weight:800}
-.colonnes{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:11px}
-.colonne{border:1px solid var(--line);border-radius:17px;background:#f8fbff;min-height:145px;padding:13px}
-.colonne h3{font-size:14px;display:flex;justify-content:space-between;align-items:center;margin:0 0 9px;padding-bottom:8px;border-bottom:1px solid var(--line)}
-.colonne h3 em{font-style:normal;color:#94a3b8;font-size:12px}
-.colonne ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
-.colonne li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:7px 10px;font-size:14px;font-weight:700;display:flex;justify-content:space-between;gap:6px}
-.colonne li button{background:none;border:0;color:#cbd5e1;cursor:pointer;padding:0 3px;font-weight:900}
-.colonne li button:hover{color:var(--red)}
-
-.accordeon{display:grid;gap:10px}
-.item{border:1px solid var(--line);border-radius:17px;background:#fff;overflow:hidden}
-.item>button{width:100%;display:flex;gap:14px;align-items:flex-start;text-align:left;background:none;border:0;padding:15px 18px;cursor:pointer}
-.item>button:hover{background:#f8fbff}
-.item .n{width:30px;height:30px;flex:none;border-radius:10px;background:#eaf1ff;color:#1d4ed8;font-weight:950;display:grid;place-items:center;font-size:14px}
-.item .t{font-weight:850;font-size:17px;flex:1}
-.item .plus{color:#94a3b8;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;padding-top:6px}
-.item .corps{display:none;padding:0 18px 17px 62px;color:#475569;line-height:1.6}
-.item.ouvert .corps{display:block}
-.item.ouvert{border-color:#93c5fd;box-shadow:0 8px 20px #2563eb14}
-.item.ouvert .n{background:#2563eb;color:#fff}
-
-.qcard{border:2px solid #dbeafe;border-radius:20px;background:linear-gradient(145deg,#fbfdff,#f4f9ff);padding:24px 26px}
-.qtag{display:inline-block;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:900;margin-bottom:10px}
-.qtag.cle{background:#fef3c7;color:#92400e}
-.qtxt{font-size:22px;font-weight:900;line-height:1.3;letter-spacing:-.3px;margin-bottom:16px}
-.answer-grid{display:grid;gap:8px}
-.answer{border:2px solid #dbe3ef;background:#fff;border-radius:12px;padding:11px 14px;text-align:left;font-weight:800}
-.answer.ok{border-color:#22c55e;background:#f0fdf4}
-.reveal{display:none;margin-top:16px;border-top:2px dashed #dbeafe;padding-top:15px}
-.reveal.on{display:block}
-.verdict{font-weight:950;color:var(--green);margin-bottom:8px}
-
-.steps{display:grid;gap:11px}
-.step{border:1px solid var(--line);border-radius:17px;background:#fff;padding:16px 20px;display:flex;gap:15px;align-items:flex-start;opacity:.4}
-.step.on{opacity:1;border-color:#93c5fd;box-shadow:0 8px 20px #2563eb14}
-.step.fait{opacity:1}
-.step .n{width:34px;height:34px;flex:none;border-radius:12px;background:#f1f5f9;color:#94a3b8;font-weight:950;display:grid;place-items:center}
-.step.on .n{background:#2563eb;color:#fff}
-.step.fait .n{background:#dcfce7;color:#15803d}
-.step h3{margin:0 0 4px;font-size:17px}
-.step p{margin:0;color:#475569;font-size:15px;line-height:1.55}
-
-figure{margin:0 0 18px}
-figure svg{width:100%;height:auto;display:block;background:#fff;border:1px solid var(--line);border-radius:18px}
-figcaption{font-size:14px;color:var(--muted);margin-top:10px;line-height:1.55}
-
-.trace{border:2px solid #dbeafe;background:linear-gradient(145deg,#fbfdff,#eef6ff);border-radius:20px;padding:26px 30px;font-size:19px;line-height:1.85}
-.trace h3{margin:0 0 14px;font-size:22px}
-.trace p{margin:0 0 .5em}
-.trace code{background:#fff;border:1px solid #dbeafe;border-radius:6px;padding:1px 7px;font-size:.92em}
-
-.check{display:grid;gap:9px}
-.check label{display:flex;gap:13px;align-items:flex-start;border:1px solid var(--line);border-radius:15px;background:#fff;padding:14px 18px;cursor:pointer;font-weight:750}
-.check label:hover{border-color:#93c5fd}
-.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--green);flex:none}
-.check input:checked+span{color:var(--green);font-weight:900}
-
-table.grille{width:100%;border-collapse:collapse;font-size:15px}
-table.grille th,table.grille td{border:1px solid var(--line);padding:10px 13px;text-align:left}
-table.grille th{background:#f8fafc;font-weight:900;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:#475569}
-table.grille td.masque{color:transparent;background:#f8fafc}
-table.grille tr.on td{background:#f0fdf4}
-table.grille td b{color:#15803d}
-
-.filtres{display:flex;gap:9px;flex-wrap:wrap;align-items:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:0 8px 24px #0f172a0b;margin-bottom:20px}
-.filtres .compte{margin-left:auto;font-weight:850;color:var(--muted);font-size:14px}
-.module{margin-bottom:30px}
-.module-tete{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px}
-.module-tete h2{margin:0;font-size:25px;letter-spacing:-.6px}
-.module-tete .p{background:#172554;color:#fff;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:900}
-.module-tete .champ{color:var(--muted);font-size:14px;margin-left:auto}
-.module-note{color:var(--muted);line-height:1.6;margin:0 0 16px;max-width:76ch}
-.blocs{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
-.bloc{border:1px solid var(--line);border-radius:20px;background:#fff;padding:17px 19px;display:flex;gap:15px;align-items:flex-start;text-decoration:none;color:inherit;box-shadow:0 8px 24px #0f172a08}
-.bloc .n{width:40px;height:40px;flex:none;border-radius:14px;background:#f1f5f9;color:#94a3b8;font-weight:950;display:grid;place-items:center;font-size:17px}
-.bloc h3{margin:0 0 5px;font-size:17px;line-height:1.3}
-.bloc .att{font-size:13px;color:var(--muted);font-weight:600}
-.ets{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
-.et{font-size:11px;font-weight:900;border-radius:999px;padding:4px 9px;background:#f1f5f9;color:#475569}
-.et.eval{background:#fee2e2;color:#991b1b}
-.et.fac{background:#f3e8ff;color:#6b21a8}
-.et.pret{background:#dcfce7;color:#15803d}
-a.bloc:hover{border-color:#93c5fd;box-shadow:0 12px 28px #2563eb1f}
-a.bloc .n{background:#2563eb;color:#fff}
-.bloc.vide{border-style:dashed;opacity:.68;box-shadow:none}
-.bloc.vide h3{font-weight:800}
-.masque{display:none!important}
-
-footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:center;color:#64748b;font-size:12px;border-top:1px solid var(--line)}
-
-@media(max-width:980px){.hero{grid-template-columns:1fr}.dashboard{grid-template-columns:repeat(2,1fr)}.navtabs.n6{grid-template-columns:repeat(3,1fr)}}
-@media(max-width:620px){main{padding:20px 12px 60px}.hero{padding:22px 18px}.dashboard{grid-template-columns:1fr}.navtabs.n6{grid-template-columns:repeat(2,1fr)}.blocs{grid-template-columns:1fr}.ecart{min-width:0;flex:1}.filtres .compte{margin-left:0;width:100%}}
-@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
-@media print{.chrono,.navtabs,.filtres,.saisie{display:none}.panel{display:block!important}}
-
-.progres{position:sticky;top:0;z-index:40;background:#fff;border:1px solid var(--line);border-radius:0 0 20px 20px;padding:12px 18px;box-shadow:0 6px 20px #0f172a12;margin-bottom:20px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
-.barre{flex:1;min-width:180px;height:10px;background:#e2e8f0;border-radius:99px;overflow:hidden}
-.barre i{display:block;height:100%;width:0;background:#2563eb;border-radius:99px;transition:width .25s}
-.q{border:1px solid var(--line);border-radius:16px;background:#fff;padding:14px 16px;margin-bottom:10px}
-.q.bon{border-color:#22c55e;background:#f2fdf6}
-.q.faux{border-color:#f59e0b;background:#fffbeb}
-.q .txt{font-weight:800;margin-bottom:10px;font-size:17px}
-.q .opts{display:flex;gap:8px;flex-wrap:wrap}
-.q .opts button{border:2px solid #dbe3ef;background:#fff;border-radius:11px;padding:9px 14px;font-weight:800;cursor:pointer;color:#334155}
-.q .opts button:hover:not(:disabled){border-color:#2563eb;color:#1d4ed8}
-.q .opts button:disabled{cursor:default;opacity:.55}
-.q .opts button.pick{border-color:#22c55e;background:#dcfce7;color:#15803d;opacity:1}
-.q .opts button.rate{border-color:#f59e0b;background:#fef3c7;color:#92400e;opacity:1}
-.q .expl{display:none;margin-top:10px;font-size:15px;color:#475569;line-height:1.55;border-left:3px solid #cbd5e1;padding-left:12px}
-.q.done .expl{display:block}
-.figpetit{max-width:560px;margin:0 auto 14px}
-#bilan{display:none}
-#bilan.on{display:block}
-.gros{font-size:44px;font-weight:950;line-height:1;color:#2563eb}
-textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px;padding:12px;font:inherit;font-size:14px;resize:vertical}
-#plan svg{width:100%;height:auto;display:block;background:#fff;border:1px solid var(--line);border-radius:18px}
-#plan .allume rect,#plan rect.allume{stroke:#dc2626!important;stroke-width:5!important}
-#plan line.allume{stroke:#dc2626!important;stroke-width:7!important}
-#plan .panne rect{fill:#fee2e2!important;stroke:#991b1b!important;stroke-dasharray:6 4}
-.envoi{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:14px 0}
-.envoi select{padding:10px 12px;border:2px solid #cbd5e1;border-radius:11px;font-weight:800}
-.journal{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
-.journal li{background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:9px 13px;font-weight:700}
-.journal li.stop{background:#fef2f2;border-color:#fca5a5;color:#991b1b}
-.journal li b{color:#1d4ed8}
-.cases{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:12px}
-.cases label{font-weight:900;font-size:13px;color:#475569;display:grid;gap:5px}
-.cases select{padding:9px;border:2px solid #cbd5e1;border-radius:10px;font-weight:800}
-.cases select.ok{border-color:#22c55e;background:#f0fdf4}
-.cases select.ko{border-color:#f59e0b;background:#fffbeb}
-.cache{display:none}.cache.on{display:block}
-@media(max-width:700px){.cases{grid-template-columns:1fr 1fr}}
-</style>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Cours 4, comment ça circule — 1re tronc commun</title>
+<meta name="robots" content="noindex">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="../assets/theme.css">
+<link rel="stylesheet" href="../assets/numerique-1re.css">
 </head>
-<body>
-<main>
+<body class="classe-tc">
 
-<section class="hero">
-  <div>
-    <a class="up" href="index.html"><svg class="i" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg> Retour au menu</a>
-    <div class="eyebrow">Cours 4 · Formation numérique · 1re année</div>
+<header class="entete">
+  <div class="entete__interieur entete__interieur--large">
+    <nav class="ariane" aria-label="Fil d'Ariane">
+      <a href="../index.html">Mes cours</a><span aria-hidden="true">/</span><a href="index.html">1re tronc commun</a><span aria-hidden="true">/</span><strong>Cours 4</strong>
+    </nav>
     <h1>Comment ça circule</h1>
-    <p>Le trajet d'une demande, depuis ton ordinateur jusqu'à un site web, et retour. Et la différence entre Internet, le web et le navigateur.</p>
-    <div class="badges">
-      <span class="badge">2 périodes</span>
-      <span class="badge">Livret du cours 4</span>
-      <span class="badge">Exercices dans l'onglet 4</span>
-    </div>
+    <p class="entete__meta">Cours 4 · Formation numérique · 1re année</p>
   </div>
-  <div class="hero-visual">
-    <div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2"/><path d="M3 7l9 6 9-6"/></svg><b>Le courrier</b></div>
-    <div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><rect x="3" y="12" width="18" height="7" rx="2"/><path d="M7 12V8M17 12V8M7 16h.01M11 16h.01"/></svg><b>Le routeur</b></div>
-    <div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M4 7h4M4 12h7M4 17h5M14 7h6M14 12h6M14 17h6"/></svg><b>L'adresse IP</b></div>
-    <div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg><b>Internet</b></div>
-  </div>
-</section>
+</header>
+
+<main class="contenu contenu--large">
+
+  <p class="chapeau">Le trajet d'une demande, depuis ton ordinateur jusqu'à un site web, et retour. Et la différence entre Internet, le web et le navigateur.</p>
+
+  <ul class="etiquettes">
+    <li class="etiquette">2 périodes</li>
+    <li class="etiquette">Livret du cours 4</li>
+    <li class="etiquette">Exercices dans l'onglet 4</li>
+  </ul>
+
+  <ul class="apercu">
+    <li><svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2"/><path d="M3 7l9 6 9-6"/></svg><span>Le courrier</span></li>
+    <li><svg viewBox="0 0 24 24"><rect x="3" y="12" width="18" height="7" rx="2"/><path d="M7 12V8M17 12V8M7 16h.01M11 16h.01"/></svg><span>Le routeur</span></li>
+    <li><svg viewBox="0 0 24 24"><path d="M4 7h4M4 12h7M4 17h5M14 7h6M14 12h6M14 17h6"/></svg><span>L'adresse IP</span></li>
+    <li><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg><span>Internet</span></li>
+  </ul>
+
 
 <section class="dashboard">
   <div class="stat"><small>Activité en cours</small><strong id="sPhase">1 sur 6</strong></div>
@@ -243,7 +52,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
   <div class="row">
     <button class="btn primary" id="btnGo">Démarrer</button>
     <button class="btn soft" id="btnStop">Remettre à zéro</button>
-    <span class="ecart" id="ecart" style="background:#f1f5f9;border:1px solid var(--line);color:#475569">Activité 1</span>
+    <span class="ecart" id="ecart" style="background:var(--papier);border:1px solid var(--line);color:var(--encre-douce)">Activité 1</span>
   </div>
 </div>
 
@@ -251,43 +60,43 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 
 <!-- 1 -->
 <section class="panel active" id="p0"><div class="card">
-  <div class="entete"><div><h2>Le jeu du courrier</h2><p class="muted">Ordinateurs éteints. La classe devient un réseau.</p></div><span class="score">15 min</span></div>
+  <div class="carte-entete"><div><h2>Le jeu du courrier</h2><p class="muted">Ordinateurs éteints. La classe devient un réseau.</p></div><span class="score">15 min</span></div>
   <figure><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400" role="img" aria-label="Plan du jeu du courrier : trois réseaux locaux reliés par Internet, et un serveur">
 
 <g font-family="Arial, Helvetica, sans-serif">
 <rect x="15" y="20" width="230" height="215" rx="16" fill="#dbeafe" stroke="#1d4ed8" stroke-width="2.5" opacity=".55"/>
 <text x="130" y="42" text-anchor="middle" font-size="14" font-weight="bold" fill="#1d4ed8">RÉSEAU 1</text>
-<line x1="60" y1="131" x2="130" y2="158" stroke="#94a3b8" stroke-width="3"/>
-<line x1="130" y1="131" x2="130" y2="158" stroke="#94a3b8" stroke-width="3"/>
-<line x1="200" y1="131" x2="130" y2="158" stroke="#94a3b8" stroke-width="3"/>
-<g><rect x="29" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M49 102 h22 M60 102 v6 M45 108 h30" stroke="#172554" stroke-width="2.2"/><text x="60" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.1.2</text></g>
-<g><rect x="99" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M119 102 h22 M130 102 v6 M115 108 h30" stroke="#172554" stroke-width="2.2"/><text x="130" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.1.3</text></g>
-<g><rect x="169" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M189 102 h22 M200 102 v6 M185 108 h30" stroke="#172554" stroke-width="2.2"/><text x="200" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.1.4</text></g>
+<line x1="60" y1="131" x2="130" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
+<line x1="130" y1="131" x2="130" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
+<line x1="200" y1="131" x2="130" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
+<g><rect x="29" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M49 102 h22 M60 102 v6 M45 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="60" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.1.2</text></g>
+<g><rect x="99" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M119 102 h22 M130 102 v6 M115 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="130" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.1.3</text></g>
+<g><rect x="169" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M189 102 h22 M200 102 v6 M185 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="200" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.1.4</text></g>
 <g><rect x="75" y="158" width="110" height="46" rx="10" fill="#ffffff" stroke="#1d4ed8" stroke-width="3"/><text x="130" y="178" text-anchor="middle" font-size="13" font-weight="bold" fill="#1d4ed8">Routeur</text><text x="130" y="195" text-anchor="middle" font-size="11.5" fill="#1d4ed8">10.0.1.1</text></g>
-<line x1="130" y1="204" x2="130" y2="262" stroke="#94a3b8" stroke-width="4"/>
+<line x1="130" y1="204" x2="130" y2="262" stroke="var(--encre-douce)" stroke-width="4"/>
 <rect x="285" y="20" width="230" height="215" rx="16" fill="#dcfce7" stroke="#15803d" stroke-width="2.5" opacity=".55"/>
 <text x="400" y="42" text-anchor="middle" font-size="14" font-weight="bold" fill="#15803d">RÉSEAU 2</text>
-<line x1="330" y1="131" x2="400" y2="158" stroke="#94a3b8" stroke-width="3"/>
-<line x1="400" y1="131" x2="400" y2="158" stroke="#94a3b8" stroke-width="3"/>
-<line x1="470" y1="131" x2="400" y2="158" stroke="#94a3b8" stroke-width="3"/>
-<g><rect x="299" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M319 102 h22 M330 102 v6 M315 108 h30" stroke="#172554" stroke-width="2.2"/><text x="330" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.2.2</text></g>
-<g><rect x="369" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M389 102 h22 M400 102 v6 M385 108 h30" stroke="#172554" stroke-width="2.2"/><text x="400" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.2.3</text></g>
-<g><rect x="439" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M459 102 h22 M470 102 v6 M455 108 h30" stroke="#172554" stroke-width="2.2"/><text x="470" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.2.4</text></g>
+<line x1="330" y1="131" x2="400" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
+<line x1="400" y1="131" x2="400" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
+<line x1="470" y1="131" x2="400" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
+<g><rect x="299" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M319 102 h22 M330 102 v6 M315 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="330" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.2.2</text></g>
+<g><rect x="369" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M389 102 h22 M400 102 v6 M385 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="400" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.2.3</text></g>
+<g><rect x="439" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M459 102 h22 M470 102 v6 M455 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="470" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.2.4</text></g>
 <g><rect x="345" y="158" width="110" height="46" rx="10" fill="#ffffff" stroke="#15803d" stroke-width="3"/><text x="400" y="178" text-anchor="middle" font-size="13" font-weight="bold" fill="#15803d">Routeur</text><text x="400" y="195" text-anchor="middle" font-size="11.5" fill="#15803d">10.0.2.1</text></g>
-<line x1="400" y1="204" x2="400" y2="262" stroke="#94a3b8" stroke-width="4"/>
+<line x1="400" y1="204" x2="400" y2="262" stroke="var(--encre-douce)" stroke-width="4"/>
 <rect x="555" y="20" width="230" height="215" rx="16" fill="#fef3c7" stroke="#b45309" stroke-width="2.5" opacity=".55"/>
 <text x="670" y="42" text-anchor="middle" font-size="14" font-weight="bold" fill="#b45309">RÉSEAU 3</text>
-<line x1="600" y1="131" x2="670" y2="158" stroke="#94a3b8" stroke-width="3"/>
-<line x1="670" y1="131" x2="670" y2="158" stroke="#94a3b8" stroke-width="3"/>
-<line x1="740" y1="131" x2="670" y2="158" stroke="#94a3b8" stroke-width="3"/>
-<g><rect x="569" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M589 102 h22 M600 102 v6 M585 108 h30" stroke="#172554" stroke-width="2.2"/><text x="600" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.3.2</text></g>
-<g><rect x="639" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M659 102 h22 M670 102 v6 M655 108 h30" stroke="#172554" stroke-width="2.2"/><text x="670" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.3.3</text></g>
-<g><rect x="709" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M729 102 h22 M740 102 v6 M725 108 h30" stroke="#172554" stroke-width="2.2"/><text x="740" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.3.4</text></g>
+<line x1="600" y1="131" x2="670" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
+<line x1="670" y1="131" x2="670" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
+<line x1="740" y1="131" x2="670" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
+<g><rect x="569" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M589 102 h22 M600 102 v6 M585 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="600" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.3.2</text></g>
+<g><rect x="639" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M659 102 h22 M670 102 v6 M655 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="670" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.3.3</text></g>
+<g><rect x="709" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M729 102 h22 M740 102 v6 M725 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="740" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.3.4</text></g>
 <g><rect x="615" y="158" width="110" height="46" rx="10" fill="#ffffff" stroke="#b45309" stroke-width="3"/><text x="670" y="178" text-anchor="middle" font-size="13" font-weight="bold" fill="#b45309">Routeur</text><text x="670" y="195" text-anchor="middle" font-size="11.5" fill="#b45309">10.0.3.1</text></g>
-<line x1="670" y1="204" x2="670" y2="262" stroke="#94a3b8" stroke-width="4"/>
+<line x1="670" y1="204" x2="670" y2="262" stroke="var(--encre-douce)" stroke-width="4"/>
 <g><rect x="20" y="262" width="760" height="44" rx="22" fill="#ede9fe" stroke="#6d28d9" stroke-width="3"/><text x="400" y="290" text-anchor="middle" font-size="15" font-weight="bold" fill="#5b21b6">INTERNET · l'allée centrale, qui relie les routeurs entre eux</text></g>
-<line x1="400" y1="306" x2="400" y2="332" stroke="#94a3b8" stroke-width="4"/>
-<g><rect x="320" y="332" width="160" height="54" rx="10" fill="#172554"/><text x="400" y="355" text-anchor="middle" font-size="14" font-weight="bold" fill="#ffffff">Serveur</text><text x="400" y="374" text-anchor="middle" font-size="12" fill="#c7d2fe">10.0.9.1 · bureau du prof</text></g>
+<line x1="400" y1="306" x2="400" y2="332" stroke="var(--encre-douce)" stroke-width="4"/>
+<g><rect x="320" y="332" width="160" height="54" rx="10" fill="var(--encre)"/><text x="400" y="355" text-anchor="middle" font-size="14" font-weight="bold" fill="#ffffff">Serveur</text><text x="400" y="374" text-anchor="middle" font-size="12" fill="#c7d2fe">10.0.9.1 · bureau du prof</text></g>
 </g></svg></figure>
   <div class="accordeon" id="regles"></div>
   <h3 style="margin-top:22px">Les trois manches</h3>
@@ -298,7 +107,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 <!-- 2 -->
 <section class="panel" id="p1">
 <div class="card">
-  <div class="entete"><div><h2>On rejoue le jeu, avec les vrais mots</h2><p class="muted">Choisis qui envoie et à qui. Le trajet s'allume étape par étape.</p></div><span class="score">20 min</span></div>
+  <div class="carte-entete"><div><h2>On rejoue le jeu, avec les vrais mots</h2><p class="muted">Choisis qui envoie et à qui. Le trajet s'allume étape par étape.</p></div><span class="score">20 min</span></div>
   <div class="envoi">
     <label>De <select id="de"></select></label>
     <label>vers <select id="vers"></select></label>
@@ -310,37 +119,37 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 <g font-family="Arial, Helvetica, sans-serif">
 <rect x="15" y="20" width="230" height="215" rx="16" fill="#dbeafe" stroke="#1d4ed8" stroke-width="2.5" opacity=".55"/>
 <text x="130" y="42" text-anchor="middle" font-size="14" font-weight="bold" fill="#1d4ed8">RÉSEAU 1</text>
-<line id="l_p10" x1="60" y1="131" x2="130" y2="158" stroke="#94a3b8" stroke-width="3"/>
-<line id="l_p11" x1="130" y1="131" x2="130" y2="158" stroke="#94a3b8" stroke-width="3"/>
-<line id="l_p12" x1="200" y1="131" x2="130" y2="158" stroke="#94a3b8" stroke-width="3"/>
-<g id="p10"><rect x="29" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M49 102 h22 M60 102 v6 M45 108 h30" stroke="#172554" stroke-width="2.2"/><text x="60" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.1.2</text></g>
-<g id="p11"><rect x="99" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M119 102 h22 M130 102 v6 M115 108 h30" stroke="#172554" stroke-width="2.2"/><text x="130" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.1.3</text></g>
-<g id="p12"><rect x="169" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M189 102 h22 M200 102 v6 M185 108 h30" stroke="#172554" stroke-width="2.2"/><text x="200" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.1.4</text></g>
+<line id="l_p10" x1="60" y1="131" x2="130" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
+<line id="l_p11" x1="130" y1="131" x2="130" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
+<line id="l_p12" x1="200" y1="131" x2="130" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
+<g id="p10"><rect x="29" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M49 102 h22 M60 102 v6 M45 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="60" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.1.2</text></g>
+<g id="p11"><rect x="99" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M119 102 h22 M130 102 v6 M115 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="130" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.1.3</text></g>
+<g id="p12"><rect x="169" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M189 102 h22 M200 102 v6 M185 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="200" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.1.4</text></g>
 <g id="r1"><rect x="75" y="158" width="110" height="46" rx="10" fill="#ffffff" stroke="#1d4ed8" stroke-width="3"/><text x="130" y="178" text-anchor="middle" font-size="13" font-weight="bold" fill="#1d4ed8">Routeur</text><text x="130" y="195" text-anchor="middle" font-size="11.5" fill="#1d4ed8">10.0.1.1</text></g>
-<line id="l_r1" x1="130" y1="204" x2="130" y2="262" stroke="#94a3b8" stroke-width="4"/>
+<line id="l_r1" x1="130" y1="204" x2="130" y2="262" stroke="var(--encre-douce)" stroke-width="4"/>
 <rect x="285" y="20" width="230" height="215" rx="16" fill="#dcfce7" stroke="#15803d" stroke-width="2.5" opacity=".55"/>
 <text x="400" y="42" text-anchor="middle" font-size="14" font-weight="bold" fill="#15803d">RÉSEAU 2</text>
-<line id="l_p20" x1="330" y1="131" x2="400" y2="158" stroke="#94a3b8" stroke-width="3"/>
-<line id="l_p21" x1="400" y1="131" x2="400" y2="158" stroke="#94a3b8" stroke-width="3"/>
-<line id="l_p22" x1="470" y1="131" x2="400" y2="158" stroke="#94a3b8" stroke-width="3"/>
-<g id="p20"><rect x="299" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M319 102 h22 M330 102 v6 M315 108 h30" stroke="#172554" stroke-width="2.2"/><text x="330" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.2.2</text></g>
-<g id="p21"><rect x="369" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M389 102 h22 M400 102 v6 M385 108 h30" stroke="#172554" stroke-width="2.2"/><text x="400" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.2.3</text></g>
-<g id="p22"><rect x="439" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M459 102 h22 M470 102 v6 M455 108 h30" stroke="#172554" stroke-width="2.2"/><text x="470" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.2.4</text></g>
+<line id="l_p20" x1="330" y1="131" x2="400" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
+<line id="l_p21" x1="400" y1="131" x2="400" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
+<line id="l_p22" x1="470" y1="131" x2="400" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
+<g id="p20"><rect x="299" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M319 102 h22 M330 102 v6 M315 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="330" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.2.2</text></g>
+<g id="p21"><rect x="369" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M389 102 h22 M400 102 v6 M385 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="400" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.2.3</text></g>
+<g id="p22"><rect x="439" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M459 102 h22 M470 102 v6 M455 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="470" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.2.4</text></g>
 <g id="r2"><rect x="345" y="158" width="110" height="46" rx="10" fill="#ffffff" stroke="#15803d" stroke-width="3"/><text x="400" y="178" text-anchor="middle" font-size="13" font-weight="bold" fill="#15803d">Routeur</text><text x="400" y="195" text-anchor="middle" font-size="11.5" fill="#15803d">10.0.2.1</text></g>
-<line id="l_r2" x1="400" y1="204" x2="400" y2="262" stroke="#94a3b8" stroke-width="4"/>
+<line id="l_r2" x1="400" y1="204" x2="400" y2="262" stroke="var(--encre-douce)" stroke-width="4"/>
 <rect x="555" y="20" width="230" height="215" rx="16" fill="#fef3c7" stroke="#b45309" stroke-width="2.5" opacity=".55"/>
 <text x="670" y="42" text-anchor="middle" font-size="14" font-weight="bold" fill="#b45309">RÉSEAU 3</text>
-<line id="l_p30" x1="600" y1="131" x2="670" y2="158" stroke="#94a3b8" stroke-width="3"/>
-<line id="l_p31" x1="670" y1="131" x2="670" y2="158" stroke="#94a3b8" stroke-width="3"/>
-<line id="l_p32" x1="740" y1="131" x2="670" y2="158" stroke="#94a3b8" stroke-width="3"/>
-<g id="p30"><rect x="569" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M589 102 h22 M600 102 v6 M585 108 h30" stroke="#172554" stroke-width="2.2"/><text x="600" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.3.2</text></g>
-<g id="p31"><rect x="639" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M659 102 h22 M670 102 v6 M655 108 h30" stroke="#172554" stroke-width="2.2"/><text x="670" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.3.3</text></g>
-<g id="p32"><rect x="709" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M729 102 h22 M740 102 v6 M725 108 h30" stroke="#172554" stroke-width="2.2"/><text x="740" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.3.4</text></g>
+<line id="l_p30" x1="600" y1="131" x2="670" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
+<line id="l_p31" x1="670" y1="131" x2="670" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
+<line id="l_p32" x1="740" y1="131" x2="670" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
+<g id="p30"><rect x="569" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M589 102 h22 M600 102 v6 M585 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="600" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.3.2</text></g>
+<g id="p31"><rect x="639" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M659 102 h22 M670 102 v6 M655 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="670" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.3.3</text></g>
+<g id="p32"><rect x="709" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M729 102 h22 M740 102 v6 M725 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="740" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.3.4</text></g>
 <g id="r3"><rect x="615" y="158" width="110" height="46" rx="10" fill="#ffffff" stroke="#b45309" stroke-width="3"/><text x="670" y="178" text-anchor="middle" font-size="13" font-weight="bold" fill="#b45309">Routeur</text><text x="670" y="195" text-anchor="middle" font-size="11.5" fill="#b45309">10.0.3.1</text></g>
-<line id="l_r3" x1="670" y1="204" x2="670" y2="262" stroke="#94a3b8" stroke-width="4"/>
+<line id="l_r3" x1="670" y1="204" x2="670" y2="262" stroke="var(--encre-douce)" stroke-width="4"/>
 <g id="net"><rect x="20" y="262" width="760" height="44" rx="22" fill="#ede9fe" stroke="#6d28d9" stroke-width="3"/><text x="400" y="290" text-anchor="middle" font-size="15" font-weight="bold" fill="#5b21b6">INTERNET · l'allée centrale, qui relie les routeurs entre eux</text></g>
-<line id="l_srv" x1="400" y1="306" x2="400" y2="332" stroke="#94a3b8" stroke-width="4"/>
-<g id="srv"><rect x="320" y="332" width="160" height="54" rx="10" fill="#172554"/><text x="400" y="355" text-anchor="middle" font-size="14" font-weight="bold" fill="#ffffff">Serveur</text><text x="400" y="374" text-anchor="middle" font-size="12" fill="#c7d2fe">10.0.9.1 · bureau du prof</text></g>
+<line id="l_srv" x1="400" y1="306" x2="400" y2="332" stroke="var(--encre-douce)" stroke-width="4"/>
+<g id="srv"><rect x="320" y="332" width="160" height="54" rx="10" fill="var(--encre)"/><text x="400" y="355" text-anchor="middle" font-size="14" font-weight="bold" fill="#ffffff">Serveur</text><text x="400" y="374" text-anchor="middle" font-size="12" fill="#c7d2fe">10.0.9.1 · bureau du prof</text></g>
 </g></svg></div>
   <ol class="journal" id="journal"></ol>
 </div>
@@ -384,7 +193,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 
 <!-- 3 -->
 <section class="panel" id="p2"><div class="card">
-  <div class="entete"><div><h2>L'adresse de mon poste</h2><p class="muted">Ton livret, activité 3. En binôme.</p></div><span class="score">20 min</span></div>
+  <div class="carte-entete"><div><h2>L'adresse de mon poste</h2><p class="muted">Ton livret, activité 3. En binôme.</p></div><span class="score">20 min</span></div>
   <div class="steps" id="etapes"></div>
   <div class="row" style="margin-top:14px"><button class="btn soft" id="etprec">Étape précédente</button><button class="btn primary" id="etsuiv">Étape suivante</button></div>
   <div class="consigne" style="margin-top:20px"><small>Attention</small>
@@ -397,25 +206,25 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 <!-- 4 -->
 <section class="panel" id="p3">
 <div class="card">
-  <div class="entete"><div><h2>Du poste jusqu'au site</h2><p class="muted">Place les cinq mots dans les cases, puis vérifie.</p></div><span class="score">25 min</span></div>
+  <div class="carte-entete"><div><h2>Du poste jusqu'au site</h2><p class="muted">Place les cinq mots dans les cases, puis vérifie.</p></div><span class="score">25 min</span></div>
   <figure><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 315" role="img" aria-label="Trajet d'une demande depuis mon poste jusqu'au serveur d'un site">
 
-<defs><marker id="f" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M0 0L10 5L0 10z" fill="#172554"/></marker><marker id="g" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M0 0L10 5L0 10z" fill="#16a34a"/></marker></defs>
+<defs><marker id="f" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M0 0L10 5L0 10z" fill="var(--encre)"/></marker><marker id="g" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M0 0L10 5L0 10z" fill="#16a34a"/></marker></defs>
 <g font-family="Arial, Helvetica, sans-serif">
-<rect x="20" y="70" width="130" height="86" rx="10" fill="#f8fafc" stroke="#172554" stroke-width="3"/><path d="M60 156 h50 M85 156 v14 M62 170 h46" stroke="#172554" stroke-width="3"/>
-<text x="85" y="110" text-anchor="middle" font-size="15" font-weight="bold" fill="#172554">Mon poste</text><text x="85" y="132" text-anchor="middle" font-size="12" fill="#475569">et son navigateur</text>
+<rect x="20" y="70" width="130" height="86" rx="10" fill="var(--papier)" stroke="var(--encre)" stroke-width="3"/><path d="M60 156 h50 M85 156 v14 M62 170 h46" stroke="var(--encre)" stroke-width="3"/>
+<text x="85" y="110" text-anchor="middle" font-size="15" font-weight="bold" fill="var(--encre)">Mon poste</text><text x="85" y="132" text-anchor="middle" font-size="12" fill="var(--encre-douce)">et son navigateur</text>
 <rect x="20" y="195" width="130" height="30" rx="8" fill="#fff" stroke="#2563eb" stroke-width="2.5" stroke-dasharray="6 4"/><text x="36" y="215" text-anchor="middle" font-size="15" font-weight="bold" fill="#2563eb">1</text>
-<path d="M152 110 H232" stroke="#172554" stroke-width="3" stroke-dasharray="8 5" marker-end="url(#f)"/>
+<path d="M152 110 H232" stroke="var(--encre)" stroke-width="3" stroke-dasharray="8 5" marker-end="url(#f)"/>
 <rect x="132" y="42" width="120" height="30" rx="8" fill="#fff" stroke="#2563eb" stroke-width="2.5" stroke-dasharray="6 4"/><text x="148" y="62" text-anchor="middle" font-size="15" font-weight="bold" fill="#2563eb">2</text>
 <rect x="238" y="82" width="120" height="60" rx="10" fill="#fff" stroke="#1d4ed8" stroke-width="3"/><path d="M262 82 v-16 M334 82 v-16" stroke="#1d4ed8" stroke-width="3"/>
 <rect x="238" y="158" width="120" height="30" rx="8" fill="#fff" stroke="#2563eb" stroke-width="2.5" stroke-dasharray="6 4"/><text x="254" y="178" text-anchor="middle" font-size="15" font-weight="bold" fill="#2563eb">3</text>
 <text x="298" y="118" text-anchor="middle" font-size="22" fill="#1d4ed8">⇄</text>
-<path d="M360 112 H408" stroke="#172554" stroke-width="3" marker-end="url(#f)"/>
+<path d="M360 112 H408" stroke="var(--encre)" stroke-width="3" marker-end="url(#f)"/>
 <ellipse cx="490" cy="112" rx="78" ry="48" fill="#ede9fe" stroke="#6d28d9" stroke-width="3"/>
 <text x="490" y="108" text-anchor="middle" font-size="12" fill="#5b21b6">des milliers</text><text x="490" y="124" text-anchor="middle" font-size="12" fill="#5b21b6">de réseaux</text>
 <rect x="430" y="176" width="120" height="30" rx="8" fill="#fff" stroke="#2563eb" stroke-width="2.5" stroke-dasharray="6 4"/><text x="446" y="196" text-anchor="middle" font-size="15" font-weight="bold" fill="#2563eb">4</text>
-<path d="M570 112 H626" stroke="#172554" stroke-width="3" marker-end="url(#f)"/>
-<rect x="630" y="62" width="140" height="100" rx="10" fill="#172554"/><path d="M650 88 h100 M650 108 h100 M650 128 h100" stroke="#6366f1" stroke-width="3"/>
+<path d="M570 112 H626" stroke="var(--encre)" stroke-width="3" marker-end="url(#f)"/>
+<rect x="630" y="62" width="140" height="100" rx="10" fill="var(--encre)"/><path d="M650 88 h100 M650 108 h100 M650 128 h100" stroke="#6366f1" stroke-width="3"/>
 <rect x="640" y="176" width="120" height="30" rx="8" fill="#fff" stroke="#2563eb" stroke-width="2.5" stroke-dasharray="6 4"/><text x="656" y="196" text-anchor="middle" font-size="15" font-weight="bold" fill="#2563eb">5</text>
 <path d="M700 230 C700 305, 90 305, 85 250" stroke="#16a34a" stroke-width="3.5" fill="none" marker-end="url(#g)"/>
 <text x="400" y="252" text-anchor="middle" font-size="14" font-weight="bold" fill="#15803d">le serveur renvoie la page web par le même chemin</text>
@@ -426,11 +235,11 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 </div>
 
 <div class="card">
-  <div class="entete"><div><h2>Je m'entraine</h2><p class="muted">Quatre exercices, 20 questions. La correction s'affiche tout de suite.</p></div></div>
+  <div class="carte-entete"><div><h2>Je m'entraine</h2><p class="muted">Quatre exercices, 20 questions. La correction s'affiche tout de suite.</p></div></div>
   <div class="consigne"><small>Avant de commencer</small>
     Ce n'est pas coté. Rien n'est enregistré. Tu peux te tromper, c'est fait pour ça.<br>À la fin, recopie tes deux lignes de résultat dans ton livret, page « Où j'en suis ».</div>
   <div class="progres">
-    <input id="nom" placeholder="Ton prénom et ton nom" style="padding:10px 13px;border:2px solid #cbd5e1;border-radius:11px;min-width:220px;flex:1">
+    <input id="nom" placeholder="Ton prénom et ton nom" style="padding:10px 13px;border:2px solid var(--trait-fort);border-radius:11px;min-width:220px;flex:1">
     <div class="barre"><i id="jauge"></i></div>
     <span class="score" id="avancement">0 / 20</span>
   </div>
@@ -443,7 +252,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
   <div class="row" style="margin-top:22px"><button class="btn primary" id="voir">Voir mon résultat</button><button class="btn soft" id="reset">Tout recommencer</button></div>
   <div id="bilan" style="margin-top:20px">
     <div class="row" style="align-items:flex-end;gap:20px;margin-bottom:16px">
-      <div><span class="gros" id="gTotal">0</span><span style="font-size:22px;font-weight:800;color:#94a3b8"> / 20</span></div>
+      <div><span class="gros" id="gTotal">0</span><span style="font-size:22px;font-weight:800;color:var(--encre-douce)"> / 20</span></div>
       <div class="muted" id="gMot" style="font-weight:800;font-size:18px"></div>
     </div>
     <div id="gDetail" style="margin-bottom:16px"></div>
@@ -457,7 +266,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 <!-- 5 -->
 <section class="panel" id="p4">
 <div class="card">
-  <div class="entete"><div><h2>Je comprends. Internet, le web et le navigateur</h2><p class="muted">On lit cette page ensemble. Elle est dans ton livret.</p></div><span class="score">15 min</span></div>
+  <div class="carte-entete"><div><h2>Je comprends. Internet, le web et le navigateur</h2><p class="muted">On lit cette page ensemble. Elle est dans ton livret.</p></div><span class="score">15 min</span></div>
   <p>« Je vais sur Internet », « je cherche sur le web », « j'ouvre Google » : on emploie ces expressions comme si elles voulaient dire la même chose. Ce n'est pas le cas.</p>
   <div class="consigne"><small>Les routes, les magasins et le vélo</small>
     <b>Internet, ce sont les routes</b> : un immense réseau qui relie tout.<br>
@@ -466,27 +275,27 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
   <p>Sur les mêmes routes circulent aussi d'autres choses : les <b>courriels</b>, les <b>jeux en ligne</b>, la <b>messagerie</b> comme WhatsApp ou Snapchat, la <b>musique</b> et les <b>vidéos</b> dans leurs applications. Tous utilisent Internet. Aucun n'a besoin d'un navigateur. Ce n'est pas le web.</p>
   <figure><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 260" role="img" aria-label="Internet est le réseau ; le web, le courriel, les jeux en ligne et la messagerie sont des services qui l'utilisent">
 <g font-family="Arial, Helvetica, sans-serif" text-anchor="middle">
-<text x="400" y="26" font-size="14" font-weight="bold" fill="#475569">DES SERVICES QUI UTILISENT INTERNET</text>
+<text x="400" y="26" font-size="14" font-weight="bold" fill="var(--encre-douce)">DES SERVICES QUI UTILISENT INTERNET</text>
 <rect x="25" y="44" width="170" height="92" rx="14" fill="#dbeafe" stroke="#2563eb" stroke-width="3"/>
 <text x="110" y="76" font-size="18" font-weight="bold" fill="#2563eb">Le web</text>
-<text x="110" y="98" font-size="13" fill="#334155">pages et liens</text>
-<text x="110" y="120" font-size="12" fill="#64748b">avec : navigateur</text>
-<line x1="110" y1="138" x2="110" y2="176" stroke="#94a3b8" stroke-width="4"/>
+<text x="110" y="98" font-size="13" fill="var(--encre-douce)">pages et liens</text>
+<text x="110" y="120" font-size="12" fill="var(--encre-douce)">avec : navigateur</text>
+<line x1="110" y1="138" x2="110" y2="176" stroke="var(--encre-douce)" stroke-width="4"/>
 <rect x="218" y="44" width="170" height="92" rx="14" fill="#fef3c7" stroke="#b45309" stroke-width="3"/>
 <text x="303" y="76" font-size="18" font-weight="bold" fill="#b45309">Le courriel</text>
-<text x="303" y="98" font-size="13" fill="#334155">messages</text>
-<text x="303" y="120" font-size="12" fill="#64748b">avec : application mail</text>
-<line x1="303" y1="138" x2="303" y2="176" stroke="#94a3b8" stroke-width="4"/>
+<text x="303" y="98" font-size="13" fill="var(--encre-douce)">messages</text>
+<text x="303" y="120" font-size="12" fill="var(--encre-douce)">avec : application mail</text>
+<line x1="303" y1="138" x2="303" y2="176" stroke="var(--encre-douce)" stroke-width="4"/>
 <rect x="411" y="44" width="170" height="92" rx="14" fill="#dcfce7" stroke="#15803d" stroke-width="3"/>
 <text x="496" y="76" font-size="18" font-weight="bold" fill="#15803d">Jeux en ligne</text>
-<text x="496" y="98" font-size="13" fill="#334155">parties</text>
-<text x="496" y="120" font-size="12" fill="#64748b">avec : le jeu lui-même</text>
-<line x1="496" y1="138" x2="496" y2="176" stroke="#94a3b8" stroke-width="4"/>
+<text x="496" y="98" font-size="13" fill="var(--encre-douce)">parties</text>
+<text x="496" y="120" font-size="12" fill="var(--encre-douce)">avec : le jeu lui-même</text>
+<line x1="496" y1="138" x2="496" y2="176" stroke="var(--encre-douce)" stroke-width="4"/>
 <rect x="604" y="44" width="170" height="92" rx="14" fill="#fce7f3" stroke="#be185d" stroke-width="3"/>
 <text x="689" y="76" font-size="18" font-weight="bold" fill="#be185d">Messagerie</text>
-<text x="689" y="98" font-size="13" fill="#334155">discussions</text>
-<text x="689" y="120" font-size="12" fill="#64748b">avec : application</text>
-<line x1="689" y1="138" x2="689" y2="176" stroke="#94a3b8" stroke-width="4"/>
+<text x="689" y="98" font-size="13" fill="var(--encre-douce)">discussions</text>
+<text x="689" y="120" font-size="12" fill="var(--encre-douce)">avec : application</text>
+<line x1="689" y1="138" x2="689" y2="176" stroke="var(--encre-douce)" stroke-width="4"/>
 <rect x="20" y="176" width="760" height="62" rx="18" fill="#ede9fe" stroke="#6d28d9" stroke-width="3"/>
 <text x="400" y="204" font-size="19" font-weight="bold" fill="#5b21b6">INTERNET</text>
 <text x="400" y="226" font-size="13" fill="#5b21b6">le réseau des réseaux, qui transporte tout le reste</text>
@@ -504,7 +313,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 <!-- 6 -->
 <section class="panel" id="p5">
 <div class="card">
-  <div class="entete"><div><h2>Ma trace écrite</h2><p class="muted">Dans ton livret. Complète les mots manquants.</p></div><span class="score">5 min</span></div>
+  <div class="carte-entete"><div><h2>Ma trace écrite</h2><p class="muted">Dans ton livret. Complète les mots manquants.</p></div><span class="score">5 min</span></div>
   <div class="row" style="margin-bottom:16px">
     <button class="btn primary" id="motSuiv">Révéler le mot suivant</button>
     <button class="btn soft" id="motReset">Tout masquer</button>
@@ -521,7 +330,9 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 </section>
 
 </main>
-<footer>Cours 4 · Formation numérique · 1re année · M. Courcelle</footer>
+<footer class="pied">
+  <div class="pied__interieur">Cours 4 · Formation numérique · 1re année · M. Courcelle</div>
+</footer>
 
 <script>
 "use strict";
@@ -721,7 +532,7 @@ var TRACE=[["Un ",1,", ce sont des appareils reliés entre eux pour échanger de
  ["Le ",7," est le logiciel qui affiche les pages. Le ",8," est un service qui utilise Internet, mais ce n'est pas Internet."]];
 var MOTS={1:"réseau",2:"connexion",3:"adresse IP",4:"routeur",5:"Internet",6:"serveur",7:"navigateur",8:"web"};
 var rv=0,zt=document.getElementById("trace");
-function dessineTrace(){zt.innerHTML="<h3>Cours 4. Comment ça circule</h3>"+TRACE.map(function(par){return "<p>"+par.map(function(x){if(typeof x==="number")return x<=rv?'<b style="color:#1d4ed8">'+MOTS[x]+'</b>':'<span style="border-bottom:2px solid #93c5fd;color:#93c5fd">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>';return x;}).join("")+"</p>";}).join("");document.getElementById("motCompte").textContent=rv+" mot"+(rv>1?"s":"")+" sur 8";}
+function dessineTrace(){zt.innerHTML="<h3>Cours 4. Comment ça circule</h3>"+TRACE.map(function(par){return "<p>"+par.map(function(x){if(typeof x==="number")return x<=rv?'<b style="color:var(--accent-encre)">'+MOTS[x]+'</b>':'<span style="border-bottom:2px solid var(--accent);color:var(--accent)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>';return x;}).join("")+"</p>";}).join("");document.getElementById("motCompte").textContent=rv+" mot"+(rv>1?"s":"")+" sur 8";}
 document.getElementById("motSuiv").onclick=function(){if(rv<8){rv++;dessineTrace();}};
 document.getElementById("motReset").onclick=function(){rv=0;dessineTrace();};
 dessineTrace();
diff --git a/1re-numerique/1TC-NUM_bloc-04_pilotage.html b/1re-numerique/1TC-NUM_bloc-04_pilotage.html
index 0153776..6260cad 100644
--- a/1re-numerique/1TC-NUM_bloc-04_pilotage.html
+++ b/1re-numerique/1TC-NUM_bloc-04_pilotage.html
@@ -1,236 +1,46 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="fr">
 <head>
 <meta charset="utf-8">
-<meta name="viewport" content="width=device-width,initial-scale=1">
-<title>Bloc 4 – pilotage</title>
-<style>:root{--ink:#172033;--muted:#667085;--blue:#2563eb;--navy:#172554;--green:#16a34a;--red:#dc2626;--card:#fff;--line:#e5e7eb;--shadow:0 18px 45px #0f172a18}
-*{box-sizing:border-box}html{scroll-behavior:smooth}
-body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:linear-gradient(180deg,#edf4ff,#f8fafc 34%,#fff);color:var(--ink)}
-button,input,select{font:inherit}
-main{max-width:1180px;margin:auto;padding:34px 20px 70px}
-:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
-svg.i{width:1em;height:1em;vertical-align:-.14em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
-
-.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;background:linear-gradient(135deg,#172554,#2563eb);color:#fff;border-radius:28px;padding:30px;box-shadow:var(--shadow);margin-bottom:24px}
-.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:900;opacity:.82}
-.hero h1{font-size:clamp(30px,4.6vw,52px);line-height:1;letter-spacing:-1.6px;margin:7px 0 12px}
-.hero p{margin:0;color:#dbeafe;line-height:1.6;font-size:17px}
-.hero a.up{display:inline-flex;align-items:center;gap:7px;color:#bfdbfe;font-weight:800;font-size:13px;text-decoration:none;margin-bottom:10px}
-.hero a.up:hover{color:#fff}
-.hero-visual{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
-.hero-chip{background:#ffffff14;border:1px solid #ffffff28;border-radius:18px;padding:16px;text-align:center}
-.hero-chip .ico{display:block;margin:0 auto 7px;width:30px;height:30px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
-.hero-chip b{font-size:14px}
-.badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
-.badge{background:#ffffff1f;border:1px solid #ffffff2e;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:800;color:#e0ecff}
-.badge.warn{background:#dc262633;border-color:#fca5a5;color:#fee2e2}
-
-.dashboard{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
-.stat{background:#fff;border:1px solid var(--line);border-radius:17px;padding:14px;box-shadow:0 8px 24px #0f172a0b}
-.stat strong{display:block;font-size:22px;margin-top:3px}
-.stat small{color:#64748b;font-weight:800}
-.stat.ok strong{color:var(--green)}
-
-.chrono{background:#172554;color:#fff;border-radius:20px;padding:16px 18px;box-shadow:var(--shadow);margin-bottom:20px;display:grid;gap:12px}
-.chrono-haut{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
-.pendule{font-size:32px;font-weight:950;font-variant-numeric:tabular-nums;line-height:1}
-.pendule small{display:block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#93b4d8;margin-top:5px}
-.ecart{font-size:14px;font-weight:850;padding:9px 14px;border-radius:999px;background:#ffffff1a;border:1px solid #ffffff2e;min-width:250px;text-align:center}
-.ecart.avance{background:#16a34a2e;border-color:#4ade80;color:#dcfce7}
-.ecart.retard{background:#dc26262e;border-color:#fca5a5;color:#fee2e2}
-.chrono .row button{background:#ffffff1a;border:1px solid #ffffff30;color:#fff}
-.chrono .row button.go{background:#fff;border-color:#fff;color:#172554}
-
-.navtabs{display:grid;gap:10px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:0 8px 24px #0f172a0b;margin-bottom:20px}
-.navtabs.n6{grid-template-columns:repeat(6,1fr)}
-.tab{border:2px solid #e2e8f0;background:#fff;border-radius:14px;padding:12px 10px;font-weight:900;cursor:pointer;color:#334155;text-align:left;position:relative}
-.tab span{display:block;font-size:11px;font-weight:800;color:#94a3b8;margin-top:3px;font-variant-numeric:tabular-nums}
-.tab:hover{border-color:#93c5fd}
-.tab.active{background:#2563eb;color:#fff;border-color:#2563eb;box-shadow:0 8px 18px #2563eb28}
-.tab.active span{color:#c7dcff}
-.tab.prevue::after{content:"";position:absolute;left:12px;right:12px;bottom:-2px;height:4px;border-radius:99px;background:#f59e0b}
-
-.panel{display:none}.panel.active{display:block}
-.card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 10px 28px #0f172a0d;margin-bottom:16px}
-.card h2,.card h3{margin-top:0}
-.card h2{font-size:26px;letter-spacing:-.5px}
-.muted{color:var(--muted);line-height:1.6}
-.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
-.btn{border:0;border-radius:11px;padding:10px 15px;font-weight:850;cursor:pointer;background:#eaf1ff;color:#1d4ed8}
-.btn:hover{filter:brightness(.97)}
-.btn.primary{background:#2563eb;color:#fff}
-.btn.soft{background:#f1f5f9;color:#334155}
-.score{display:inline-block;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:7px 12px;font-weight:900;font-size:14px}
-.feedback{min-height:31px;margin-top:12px;font-weight:850}
-.entete{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:flex-start;margin-bottom:14px}
-.consigne{background:linear-gradient(145deg,#f8fafc,#eef6ff);border:2px solid #dbeafe;border-radius:18px;padding:20px 24px;font-size:20px;font-weight:800;line-height:1.45;margin:16px 0}
-.consigne small{display:block;text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:900;color:var(--blue);margin-bottom:8px}
-.info{border-left:4px solid #cbd5e1;background:#f8fafc;border-radius:0 12px 12px 0;padding:13px 17px;color:#475569;font-size:15px;line-height:1.6;margin-top:16px}
-.info b{color:var(--ink)}
-.info.alerte{border-color:#fca5a5;background:#fef4f4;color:#7f2b2b}
-.info.alerte b{color:#991b1b}
-
-.saisie{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px}
-.saisie input{flex:1;min-width:210px;padding:12px 14px;border:2px solid #cbd5e1;border-radius:12px;outline:none}
-.saisie input:focus{border-color:var(--blue);box-shadow:0 0 0 4px #2563eb18}
-.saisie select{padding:12px 14px;border:2px solid #cbd5e1;border-radius:12px;font-weight:800}
-.colonnes{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:11px}
-.colonne{border:1px solid var(--line);border-radius:17px;background:#f8fbff;min-height:145px;padding:13px}
-.colonne h3{font-size:14px;display:flex;justify-content:space-between;align-items:center;margin:0 0 9px;padding-bottom:8px;border-bottom:1px solid var(--line)}
-.colonne h3 em{font-style:normal;color:#94a3b8;font-size:12px}
-.colonne ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
-.colonne li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:7px 10px;font-size:14px;font-weight:700;display:flex;justify-content:space-between;gap:6px}
-.colonne li button{background:none;border:0;color:#cbd5e1;cursor:pointer;padding:0 3px;font-weight:900}
-.colonne li button:hover{color:var(--red)}
-
-.accordeon{display:grid;gap:10px}
-.item{border:1px solid var(--line);border-radius:17px;background:#fff;overflow:hidden}
-.item>button{width:100%;display:flex;gap:14px;align-items:flex-start;text-align:left;background:none;border:0;padding:15px 18px;cursor:pointer}
-.item>button:hover{background:#f8fbff}
-.item .n{width:30px;height:30px;flex:none;border-radius:10px;background:#eaf1ff;color:#1d4ed8;font-weight:950;display:grid;place-items:center;font-size:14px}
-.item .t{font-weight:850;font-size:17px;flex:1}
-.item .plus{color:#94a3b8;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;padding-top:6px}
-.item .corps{display:none;padding:0 18px 17px 62px;color:#475569;line-height:1.6}
-.item.ouvert .corps{display:block}
-.item.ouvert{border-color:#93c5fd;box-shadow:0 8px 20px #2563eb14}
-.item.ouvert .n{background:#2563eb;color:#fff}
-
-.qcard{border:2px solid #dbeafe;border-radius:20px;background:linear-gradient(145deg,#fbfdff,#f4f9ff);padding:24px 26px}
-.qtag{display:inline-block;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:900;margin-bottom:10px}
-.qtag.cle{background:#fef3c7;color:#92400e}
-.qtxt{font-size:22px;font-weight:900;line-height:1.3;letter-spacing:-.3px;margin-bottom:16px}
-.answer-grid{display:grid;gap:8px}
-.answer{border:2px solid #dbe3ef;background:#fff;border-radius:12px;padding:11px 14px;text-align:left;font-weight:800}
-.answer.ok{border-color:#22c55e;background:#f0fdf4}
-.reveal{display:none;margin-top:16px;border-top:2px dashed #dbeafe;padding-top:15px}
-.reveal.on{display:block}
-.verdict{font-weight:950;color:var(--green);margin-bottom:8px}
-
-.steps{display:grid;gap:11px}
-.step{border:1px solid var(--line);border-radius:17px;background:#fff;padding:16px 20px;display:flex;gap:15px;align-items:flex-start;opacity:.4}
-.step.on{opacity:1;border-color:#93c5fd;box-shadow:0 8px 20px #2563eb14}
-.step.fait{opacity:1}
-.step .n{width:34px;height:34px;flex:none;border-radius:12px;background:#f1f5f9;color:#94a3b8;font-weight:950;display:grid;place-items:center}
-.step.on .n{background:#2563eb;color:#fff}
-.step.fait .n{background:#dcfce7;color:#15803d}
-.step h3{margin:0 0 4px;font-size:17px}
-.step p{margin:0;color:#475569;font-size:15px;line-height:1.55}
-
-figure{margin:0 0 18px}
-figure svg{width:100%;height:auto;display:block;background:#fff;border:1px solid var(--line);border-radius:18px}
-figcaption{font-size:14px;color:var(--muted);margin-top:10px;line-height:1.55}
-
-.trace{border:2px solid #dbeafe;background:linear-gradient(145deg,#fbfdff,#eef6ff);border-radius:20px;padding:26px 30px;font-size:19px;line-height:1.85}
-.trace h3{margin:0 0 14px;font-size:22px}
-.trace p{margin:0 0 .5em}
-.trace code{background:#fff;border:1px solid #dbeafe;border-radius:6px;padding:1px 7px;font-size:.92em}
-
-.check{display:grid;gap:9px}
-.check label{display:flex;gap:13px;align-items:flex-start;border:1px solid var(--line);border-radius:15px;background:#fff;padding:14px 18px;cursor:pointer;font-weight:750}
-.check label:hover{border-color:#93c5fd}
-.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--green);flex:none}
-.check input:checked+span{color:var(--green);font-weight:900}
-
-table.grille{width:100%;border-collapse:collapse;font-size:15px}
-table.grille th,table.grille td{border:1px solid var(--line);padding:10px 13px;text-align:left}
-table.grille th{background:#f8fafc;font-weight:900;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:#475569}
-table.grille td.masque{color:transparent;background:#f8fafc}
-table.grille tr.on td{background:#f0fdf4}
-table.grille td b{color:#15803d}
-
-.filtres{display:flex;gap:9px;flex-wrap:wrap;align-items:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:0 8px 24px #0f172a0b;margin-bottom:20px}
-.filtres .compte{margin-left:auto;font-weight:850;color:var(--muted);font-size:14px}
-.module{margin-bottom:30px}
-.module-tete{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px}
-.module-tete h2{margin:0;font-size:25px;letter-spacing:-.6px}
-.module-tete .p{background:#172554;color:#fff;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:900}
-.module-tete .champ{color:var(--muted);font-size:14px;margin-left:auto}
-.module-note{color:var(--muted);line-height:1.6;margin:0 0 16px;max-width:76ch}
-.blocs{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
-.bloc{border:1px solid var(--line);border-radius:20px;background:#fff;padding:17px 19px;display:flex;gap:15px;align-items:flex-start;text-decoration:none;color:inherit;box-shadow:0 8px 24px #0f172a08}
-.bloc .n{width:40px;height:40px;flex:none;border-radius:14px;background:#f1f5f9;color:#94a3b8;font-weight:950;display:grid;place-items:center;font-size:17px}
-.bloc h3{margin:0 0 5px;font-size:17px;line-height:1.3}
-.bloc .att{font-size:13px;color:var(--muted);font-weight:600}
-.ets{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
-.et{font-size:11px;font-weight:900;border-radius:999px;padding:4px 9px;background:#f1f5f9;color:#475569}
-.et.eval{background:#fee2e2;color:#991b1b}
-.et.fac{background:#f3e8ff;color:#6b21a8}
-.et.pret{background:#dcfce7;color:#15803d}
-a.bloc:hover{border-color:#93c5fd;box-shadow:0 12px 28px #2563eb1f}
-a.bloc .n{background:#2563eb;color:#fff}
-.bloc.vide{border-style:dashed;opacity:.68;box-shadow:none}
-.bloc.vide h3{font-weight:800}
-.masque{display:none!important}
-
-footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:center;color:#64748b;font-size:12px;border-top:1px solid var(--line)}
-
-@media(max-width:980px){.hero{grid-template-columns:1fr}.dashboard{grid-template-columns:repeat(2,1fr)}.navtabs.n6{grid-template-columns:repeat(3,1fr)}}
-@media(max-width:620px){main{padding:20px 12px 60px}.hero{padding:22px 18px}.dashboard{grid-template-columns:1fr}.navtabs.n6{grid-template-columns:repeat(2,1fr)}.blocs{grid-template-columns:1fr}.ecart{min-width:0;flex:1}.filtres .compte{margin-left:0;width:100%}}
-@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
-@media print{.chrono,.navtabs,.filtres,.saisie{display:none}.panel{display:block!important}}
-
-.progres{position:sticky;top:0;z-index:40;background:#fff;border:1px solid var(--line);border-radius:0 0 20px 20px;padding:12px 18px;box-shadow:0 6px 20px #0f172a12;margin-bottom:20px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
-.barre{flex:1;min-width:180px;height:10px;background:#e2e8f0;border-radius:99px;overflow:hidden}
-.barre i{display:block;height:100%;width:0;background:#2563eb;border-radius:99px;transition:width .25s}
-.q{border:1px solid var(--line);border-radius:16px;background:#fff;padding:14px 16px;margin-bottom:10px}
-.q.bon{border-color:#22c55e;background:#f2fdf6}
-.q.faux{border-color:#f59e0b;background:#fffbeb}
-.q .txt{font-weight:800;margin-bottom:10px;font-size:17px}
-.q .opts{display:flex;gap:8px;flex-wrap:wrap}
-.q .opts button{border:2px solid #dbe3ef;background:#fff;border-radius:11px;padding:9px 14px;font-weight:800;cursor:pointer;color:#334155}
-.q .opts button:hover:not(:disabled){border-color:#2563eb;color:#1d4ed8}
-.q .opts button:disabled{cursor:default;opacity:.55}
-.q .opts button.pick{border-color:#22c55e;background:#dcfce7;color:#15803d;opacity:1}
-.q .opts button.rate{border-color:#f59e0b;background:#fef3c7;color:#92400e;opacity:1}
-.q .expl{display:none;margin-top:10px;font-size:15px;color:#475569;line-height:1.55;border-left:3px solid #cbd5e1;padding-left:12px}
-.q.done .expl{display:block}
-.figpetit{max-width:560px;margin:0 auto 14px}
-#bilan{display:none}
-#bilan.on{display:block}
-.gros{font-size:44px;font-weight:950;line-height:1;color:#2563eb}
-textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px;padding:12px;font:inherit;font-size:14px;resize:vertical}
-#plan svg{width:100%;height:auto;display:block;background:#fff;border:1px solid var(--line);border-radius:18px}
-#plan .allume rect,#plan rect.allume{stroke:#dc2626!important;stroke-width:5!important}
-#plan line.allume{stroke:#dc2626!important;stroke-width:7!important}
-#plan .panne rect{fill:#fee2e2!important;stroke:#991b1b!important;stroke-dasharray:6 4}
-.envoi{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:14px 0}
-.envoi select{padding:10px 12px;border:2px solid #cbd5e1;border-radius:11px;font-weight:800}
-.journal{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
-.journal li{background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:9px 13px;font-weight:700}
-.journal li.stop{background:#fef2f2;border-color:#fca5a5;color:#991b1b}
-.journal li b{color:#1d4ed8}
-.cases{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:12px}
-.cases label{font-weight:900;font-size:13px;color:#475569;display:grid;gap:5px}
-.cases select{padding:9px;border:2px solid #cbd5e1;border-radius:10px;font-weight:800}
-.cases select.ok{border-color:#22c55e;background:#f0fdf4}
-.cases select.ko{border-color:#f59e0b;background:#fffbeb}
-.cache{display:none}.cache.on{display:block}
-@media(max-width:700px){.cases{grid-template-columns:1fr 1fr}}
-</style>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Bloc 4, pilotage — 1re tronc commun</title>
+<meta name="robots" content="noindex">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="../assets/theme.css">
+<link rel="stylesheet" href="../assets/numerique-1re.css">
 </head>
-<body>
-<main>
+<body class="classe-tc">
 
-<section class="hero">
-  <div>
-    <a class="up" href="pilotage.html"><svg class="i" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg> Retour au menu</a>
-    <div class="eyebrow">Document enseignant · Module 1 · Semaine 4 · Bloc 4 sur 35</div>
+<header class="entete">
+  <div class="entete__interieur entete__interieur--large">
+    <nav class="ariane" aria-label="Fil d'Ariane">
+      <a href="../index.html">Mes cours</a><span aria-hidden="true">/</span><a href="index.html">1re tronc commun</a><span aria-hidden="true">/</span><a href="pilotage.html">Pilotage</a><span aria-hidden="true">/</span><strong>Bloc 4</strong>
+    </nav>
     <h1>Comment ça circule</h1>
-    <p style="margin-bottom:10px"><a href="1TC-NUM_bloc-04_comment-ca-circule.html" style="color:#fff;font-weight:800">Ouvrir la version à projeter aux élèves</a></p><p>Obligatoires : connexion, routeur, réseau, adresse IP. Facultatifs, non cotables : serveur, web, Internet. Le mot que les élèves emploient le plus est justement celui qui n'est pas exigible.</p>
-    <div class="badges">
-      <span class="badge">S17 · connexion, routeur, réseau, adresse IP</span>
-      <span class="badge">serveur, web, Internet · facultatifs</span>
-      <span class="badge warn">Ne pas projeter</span>
-    </div>
+    <p class="entete__meta">Document enseignant · Module 1 · Semaine 4 · Bloc 4 sur 35</p>
   </div>
-  <div class="hero-visual">
-    <div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2"/><path d="M3 7l9 6 9-6"/></svg><b>Le courrier</b></div>
-    <div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><rect x="3" y="12" width="18" height="7" rx="2"/><path d="M7 12V8M17 12V8M7 16h.01M11 16h.01"/></svg><b>Le routeur</b></div>
-    <div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M4 7h4M4 12h7M4 17h5M14 7h6M14 12h6M14 17h6"/></svg><b>L'adresse IP</b></div>
-    <div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg><b>Internet</b></div>
-  </div>
-</section>
+</header>
+
+<main class="contenu contenu--large">
+
+  <p class="chapeau"><a href="1TC-NUM_bloc-04_comment-ca-circule.html">Ouvrir la version à projeter aux élèves</a></p>
+  <p class="chapeau">Obligatoires : connexion, routeur, réseau, adresse IP. Facultatifs, non cotables : serveur, web, Internet. Le mot que les élèves emploient le plus est justement celui qui n'est pas exigible.</p>
+
+  <ul class="etiquettes">
+    <li class="etiquette">S17 · connexion, routeur, réseau, adresse IP</li>
+    <li class="etiquette">serveur, web, Internet · facultatifs</li>
+    <li class="etiquette etiquette--alerte">Ne pas projeter</li>
+  </ul>
+
+  <ul class="apercu">
+    <li><svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2"/><path d="M3 7l9 6 9-6"/></svg><span>Le courrier</span></li>
+    <li><svg viewBox="0 0 24 24"><rect x="3" y="12" width="18" height="7" rx="2"/><path d="M7 12V8M17 12V8M7 16h.01M11 16h.01"/></svg><span>Le routeur</span></li>
+    <li><svg viewBox="0 0 24 24"><path d="M4 7h4M4 12h7M4 17h5M14 7h6M14 12h6M14 17h6"/></svg><span>L'adresse IP</span></li>
+    <li><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg><span>Internet</span></li>
+  </ul>
+
 
 <section class="dashboard">
   <div class="stat"><small>Activité en cours</small><strong id="sPhase">1 sur 6</strong></div>
@@ -243,7 +53,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
   <div class="row">
     <button class="btn primary" id="btnGo">Démarrer</button>
     <button class="btn soft" id="btnStop">Remettre à zéro</button>
-    <span class="ecart" id="ecart" style="background:#f1f5f9;border:1px solid var(--line);color:#475569">Activité 1</span>
+    <span class="ecart" id="ecart" style="background:var(--papier);border:1px solid var(--line);color:var(--encre-douce)">Activité 1</span>
   </div>
 </div>
 
@@ -251,43 +61,43 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 
 <!-- 1 -->
 <section class="panel active" id="p0"><div class="card">
-  <div class="entete"><div><h2>Le jeu du courrier</h2><p class="muted">Ordinateurs éteints. La classe devient un réseau.</p></div><span class="score">15 min</span></div>
+  <div class="carte-entete"><div><h2>Le jeu du courrier</h2><p class="muted">Ordinateurs éteints. La classe devient un réseau.</p></div><span class="score">15 min</span></div>
   <figure><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400" role="img" aria-label="Plan du jeu du courrier : trois réseaux locaux reliés par Internet, et un serveur">
 
 <g font-family="Arial, Helvetica, sans-serif">
 <rect x="15" y="20" width="230" height="215" rx="16" fill="#dbeafe" stroke="#1d4ed8" stroke-width="2.5" opacity=".55"/>
 <text x="130" y="42" text-anchor="middle" font-size="14" font-weight="bold" fill="#1d4ed8">RÉSEAU 1</text>
-<line x1="60" y1="131" x2="130" y2="158" stroke="#94a3b8" stroke-width="3"/>
-<line x1="130" y1="131" x2="130" y2="158" stroke="#94a3b8" stroke-width="3"/>
-<line x1="200" y1="131" x2="130" y2="158" stroke="#94a3b8" stroke-width="3"/>
-<g><rect x="29" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M49 102 h22 M60 102 v6 M45 108 h30" stroke="#172554" stroke-width="2.2"/><text x="60" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.1.2</text></g>
-<g><rect x="99" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M119 102 h22 M130 102 v6 M115 108 h30" stroke="#172554" stroke-width="2.2"/><text x="130" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.1.3</text></g>
-<g><rect x="169" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M189 102 h22 M200 102 v6 M185 108 h30" stroke="#172554" stroke-width="2.2"/><text x="200" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.1.4</text></g>
+<line x1="60" y1="131" x2="130" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
+<line x1="130" y1="131" x2="130" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
+<line x1="200" y1="131" x2="130" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
+<g><rect x="29" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M49 102 h22 M60 102 v6 M45 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="60" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.1.2</text></g>
+<g><rect x="99" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M119 102 h22 M130 102 v6 M115 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="130" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.1.3</text></g>
+<g><rect x="169" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M189 102 h22 M200 102 v6 M185 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="200" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.1.4</text></g>
 <g><rect x="75" y="158" width="110" height="46" rx="10" fill="#ffffff" stroke="#1d4ed8" stroke-width="3"/><text x="130" y="178" text-anchor="middle" font-size="13" font-weight="bold" fill="#1d4ed8">Routeur</text><text x="130" y="195" text-anchor="middle" font-size="11.5" fill="#1d4ed8">10.0.1.1</text></g>
-<line x1="130" y1="204" x2="130" y2="262" stroke="#94a3b8" stroke-width="4"/>
+<line x1="130" y1="204" x2="130" y2="262" stroke="var(--encre-douce)" stroke-width="4"/>
 <rect x="285" y="20" width="230" height="215" rx="16" fill="#dcfce7" stroke="#15803d" stroke-width="2.5" opacity=".55"/>
 <text x="400" y="42" text-anchor="middle" font-size="14" font-weight="bold" fill="#15803d">RÉSEAU 2</text>
-<line x1="330" y1="131" x2="400" y2="158" stroke="#94a3b8" stroke-width="3"/>
-<line x1="400" y1="131" x2="400" y2="158" stroke="#94a3b8" stroke-width="3"/>
-<line x1="470" y1="131" x2="400" y2="158" stroke="#94a3b8" stroke-width="3"/>
-<g><rect x="299" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M319 102 h22 M330 102 v6 M315 108 h30" stroke="#172554" stroke-width="2.2"/><text x="330" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.2.2</text></g>
-<g><rect x="369" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M389 102 h22 M400 102 v6 M385 108 h30" stroke="#172554" stroke-width="2.2"/><text x="400" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.2.3</text></g>
-<g><rect x="439" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M459 102 h22 M470 102 v6 M455 108 h30" stroke="#172554" stroke-width="2.2"/><text x="470" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.2.4</text></g>
+<line x1="330" y1="131" x2="400" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
+<line x1="400" y1="131" x2="400" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
+<line x1="470" y1="131" x2="400" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
+<g><rect x="299" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M319 102 h22 M330 102 v6 M315 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="330" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.2.2</text></g>
+<g><rect x="369" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M389 102 h22 M400 102 v6 M385 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="400" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.2.3</text></g>
+<g><rect x="439" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M459 102 h22 M470 102 v6 M455 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="470" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.2.4</text></g>
 <g><rect x="345" y="158" width="110" height="46" rx="10" fill="#ffffff" stroke="#15803d" stroke-width="3"/><text x="400" y="178" text-anchor="middle" font-size="13" font-weight="bold" fill="#15803d">Routeur</text><text x="400" y="195" text-anchor="middle" font-size="11.5" fill="#15803d">10.0.2.1</text></g>
-<line x1="400" y1="204" x2="400" y2="262" stroke="#94a3b8" stroke-width="4"/>
+<line x1="400" y1="204" x2="400" y2="262" stroke="var(--encre-douce)" stroke-width="4"/>
 <rect x="555" y="20" width="230" height="215" rx="16" fill="#fef3c7" stroke="#b45309" stroke-width="2.5" opacity=".55"/>
 <text x="670" y="42" text-anchor="middle" font-size="14" font-weight="bold" fill="#b45309">RÉSEAU 3</text>
-<line x1="600" y1="131" x2="670" y2="158" stroke="#94a3b8" stroke-width="3"/>
-<line x1="670" y1="131" x2="670" y2="158" stroke="#94a3b8" stroke-width="3"/>
-<line x1="740" y1="131" x2="670" y2="158" stroke="#94a3b8" stroke-width="3"/>
-<g><rect x="569" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M589 102 h22 M600 102 v6 M585 108 h30" stroke="#172554" stroke-width="2.2"/><text x="600" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.3.2</text></g>
-<g><rect x="639" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M659 102 h22 M670 102 v6 M655 108 h30" stroke="#172554" stroke-width="2.2"/><text x="670" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.3.3</text></g>
-<g><rect x="709" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M729 102 h22 M740 102 v6 M725 108 h30" stroke="#172554" stroke-width="2.2"/><text x="740" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.3.4</text></g>
+<line x1="600" y1="131" x2="670" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
+<line x1="670" y1="131" x2="670" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
+<line x1="740" y1="131" x2="670" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
+<g><rect x="569" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M589 102 h22 M600 102 v6 M585 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="600" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.3.2</text></g>
+<g><rect x="639" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M659 102 h22 M670 102 v6 M655 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="670" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.3.3</text></g>
+<g><rect x="709" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M729 102 h22 M740 102 v6 M725 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="740" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.3.4</text></g>
 <g><rect x="615" y="158" width="110" height="46" rx="10" fill="#ffffff" stroke="#b45309" stroke-width="3"/><text x="670" y="178" text-anchor="middle" font-size="13" font-weight="bold" fill="#b45309">Routeur</text><text x="670" y="195" text-anchor="middle" font-size="11.5" fill="#b45309">10.0.3.1</text></g>
-<line x1="670" y1="204" x2="670" y2="262" stroke="#94a3b8" stroke-width="4"/>
+<line x1="670" y1="204" x2="670" y2="262" stroke="var(--encre-douce)" stroke-width="4"/>
 <g><rect x="20" y="262" width="760" height="44" rx="22" fill="#ede9fe" stroke="#6d28d9" stroke-width="3"/><text x="400" y="290" text-anchor="middle" font-size="15" font-weight="bold" fill="#5b21b6">INTERNET · l'allée centrale, qui relie les routeurs entre eux</text></g>
-<line x1="400" y1="306" x2="400" y2="332" stroke="#94a3b8" stroke-width="4"/>
-<g><rect x="320" y="332" width="160" height="54" rx="10" fill="#172554"/><text x="400" y="355" text-anchor="middle" font-size="14" font-weight="bold" fill="#ffffff">Serveur</text><text x="400" y="374" text-anchor="middle" font-size="12" fill="#c7d2fe">10.0.9.1 · bureau du prof</text></g>
+<line x1="400" y1="306" x2="400" y2="332" stroke="var(--encre-douce)" stroke-width="4"/>
+<g><rect x="320" y="332" width="160" height="54" rx="10" fill="var(--encre)"/><text x="400" y="355" text-anchor="middle" font-size="14" font-weight="bold" fill="#ffffff">Serveur</text><text x="400" y="374" text-anchor="middle" font-size="12" fill="#c7d2fe">10.0.9.1 · bureau du prof</text></g>
 </g></svg></figure>
   <div class="accordeon" id="regles"></div>
   <h3 style="margin-top:22px">Les trois manches</h3>
@@ -302,7 +112,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 <!-- 2 -->
 <section class="panel" id="p1">
 <div class="card">
-  <div class="entete"><div><h2>On rejoue le jeu, avec les vrais mots</h2><p class="muted">Choisis qui envoie et à qui. Le trajet s'allume étape par étape.</p></div><span class="score">20 min</span></div>
+  <div class="carte-entete"><div><h2>On rejoue le jeu, avec les vrais mots</h2><p class="muted">Choisis qui envoie et à qui. Le trajet s'allume étape par étape.</p></div><span class="score">20 min</span></div>
   <div class="envoi">
     <label>De <select id="de"></select></label>
     <label>vers <select id="vers"></select></label>
@@ -314,37 +124,37 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 <g font-family="Arial, Helvetica, sans-serif">
 <rect x="15" y="20" width="230" height="215" rx="16" fill="#dbeafe" stroke="#1d4ed8" stroke-width="2.5" opacity=".55"/>
 <text x="130" y="42" text-anchor="middle" font-size="14" font-weight="bold" fill="#1d4ed8">RÉSEAU 1</text>
-<line id="l_p10" x1="60" y1="131" x2="130" y2="158" stroke="#94a3b8" stroke-width="3"/>
-<line id="l_p11" x1="130" y1="131" x2="130" y2="158" stroke="#94a3b8" stroke-width="3"/>
-<line id="l_p12" x1="200" y1="131" x2="130" y2="158" stroke="#94a3b8" stroke-width="3"/>
-<g id="p10"><rect x="29" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M49 102 h22 M60 102 v6 M45 108 h30" stroke="#172554" stroke-width="2.2"/><text x="60" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.1.2</text></g>
-<g id="p11"><rect x="99" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M119 102 h22 M130 102 v6 M115 108 h30" stroke="#172554" stroke-width="2.2"/><text x="130" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.1.3</text></g>
-<g id="p12"><rect x="169" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M189 102 h22 M200 102 v6 M185 108 h30" stroke="#172554" stroke-width="2.2"/><text x="200" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.1.4</text></g>
+<line id="l_p10" x1="60" y1="131" x2="130" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
+<line id="l_p11" x1="130" y1="131" x2="130" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
+<line id="l_p12" x1="200" y1="131" x2="130" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
+<g id="p10"><rect x="29" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M49 102 h22 M60 102 v6 M45 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="60" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.1.2</text></g>
+<g id="p11"><rect x="99" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M119 102 h22 M130 102 v6 M115 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="130" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.1.3</text></g>
+<g id="p12"><rect x="169" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M189 102 h22 M200 102 v6 M185 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="200" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.1.4</text></g>
 <g id="r1"><rect x="75" y="158" width="110" height="46" rx="10" fill="#ffffff" stroke="#1d4ed8" stroke-width="3"/><text x="130" y="178" text-anchor="middle" font-size="13" font-weight="bold" fill="#1d4ed8">Routeur</text><text x="130" y="195" text-anchor="middle" font-size="11.5" fill="#1d4ed8">10.0.1.1</text></g>
-<line id="l_r1" x1="130" y1="204" x2="130" y2="262" stroke="#94a3b8" stroke-width="4"/>
+<line id="l_r1" x1="130" y1="204" x2="130" y2="262" stroke="var(--encre-douce)" stroke-width="4"/>
 <rect x="285" y="20" width="230" height="215" rx="16" fill="#dcfce7" stroke="#15803d" stroke-width="2.5" opacity=".55"/>
 <text x="400" y="42" text-anchor="middle" font-size="14" font-weight="bold" fill="#15803d">RÉSEAU 2</text>
-<line id="l_p20" x1="330" y1="131" x2="400" y2="158" stroke="#94a3b8" stroke-width="3"/>
-<line id="l_p21" x1="400" y1="131" x2="400" y2="158" stroke="#94a3b8" stroke-width="3"/>
-<line id="l_p22" x1="470" y1="131" x2="400" y2="158" stroke="#94a3b8" stroke-width="3"/>
-<g id="p20"><rect x="299" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M319 102 h22 M330 102 v6 M315 108 h30" stroke="#172554" stroke-width="2.2"/><text x="330" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.2.2</text></g>
-<g id="p21"><rect x="369" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M389 102 h22 M400 102 v6 M385 108 h30" stroke="#172554" stroke-width="2.2"/><text x="400" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.2.3</text></g>
-<g id="p22"><rect x="439" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M459 102 h22 M470 102 v6 M455 108 h30" stroke="#172554" stroke-width="2.2"/><text x="470" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.2.4</text></g>
+<line id="l_p20" x1="330" y1="131" x2="400" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
+<line id="l_p21" x1="400" y1="131" x2="400" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
+<line id="l_p22" x1="470" y1="131" x2="400" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
+<g id="p20"><rect x="299" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M319 102 h22 M330 102 v6 M315 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="330" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.2.2</text></g>
+<g id="p21"><rect x="369" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M389 102 h22 M400 102 v6 M385 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="400" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.2.3</text></g>
+<g id="p22"><rect x="439" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M459 102 h22 M470 102 v6 M455 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="470" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.2.4</text></g>
 <g id="r2"><rect x="345" y="158" width="110" height="46" rx="10" fill="#ffffff" stroke="#15803d" stroke-width="3"/><text x="400" y="178" text-anchor="middle" font-size="13" font-weight="bold" fill="#15803d">Routeur</text><text x="400" y="195" text-anchor="middle" font-size="11.5" fill="#15803d">10.0.2.1</text></g>
-<line id="l_r2" x1="400" y1="204" x2="400" y2="262" stroke="#94a3b8" stroke-width="4"/>
+<line id="l_r2" x1="400" y1="204" x2="400" y2="262" stroke="var(--encre-douce)" stroke-width="4"/>
 <rect x="555" y="20" width="230" height="215" rx="16" fill="#fef3c7" stroke="#b45309" stroke-width="2.5" opacity=".55"/>
 <text x="670" y="42" text-anchor="middle" font-size="14" font-weight="bold" fill="#b45309">RÉSEAU 3</text>
-<line id="l_p30" x1="600" y1="131" x2="670" y2="158" stroke="#94a3b8" stroke-width="3"/>
-<line id="l_p31" x1="670" y1="131" x2="670" y2="158" stroke="#94a3b8" stroke-width="3"/>
-<line id="l_p32" x1="740" y1="131" x2="670" y2="158" stroke="#94a3b8" stroke-width="3"/>
-<g id="p30"><rect x="569" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M589 102 h22 M600 102 v6 M585 108 h30" stroke="#172554" stroke-width="2.2"/><text x="600" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.3.2</text></g>
-<g id="p31"><rect x="639" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M659 102 h22 M670 102 v6 M655 108 h30" stroke="#172554" stroke-width="2.2"/><text x="670" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.3.3</text></g>
-<g id="p32"><rect x="709" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M729 102 h22 M740 102 v6 M725 108 h30" stroke="#172554" stroke-width="2.2"/><text x="740" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.3.4</text></g>
+<line id="l_p30" x1="600" y1="131" x2="670" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
+<line id="l_p31" x1="670" y1="131" x2="670" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
+<line id="l_p32" x1="740" y1="131" x2="670" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
+<g id="p30"><rect x="569" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M589 102 h22 M600 102 v6 M585 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="600" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.3.2</text></g>
+<g id="p31"><rect x="639" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M659 102 h22 M670 102 v6 M655 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="670" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.3.3</text></g>
+<g id="p32"><rect x="709" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M729 102 h22 M740 102 v6 M725 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="740" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.3.4</text></g>
 <g id="r3"><rect x="615" y="158" width="110" height="46" rx="10" fill="#ffffff" stroke="#b45309" stroke-width="3"/><text x="670" y="178" text-anchor="middle" font-size="13" font-weight="bold" fill="#b45309">Routeur</text><text x="670" y="195" text-anchor="middle" font-size="11.5" fill="#b45309">10.0.3.1</text></g>
-<line id="l_r3" x1="670" y1="204" x2="670" y2="262" stroke="#94a3b8" stroke-width="4"/>
+<line id="l_r3" x1="670" y1="204" x2="670" y2="262" stroke="var(--encre-douce)" stroke-width="4"/>
 <g id="net"><rect x="20" y="262" width="760" height="44" rx="22" fill="#ede9fe" stroke="#6d28d9" stroke-width="3"/><text x="400" y="290" text-anchor="middle" font-size="15" font-weight="bold" fill="#5b21b6">INTERNET · l'allée centrale, qui relie les routeurs entre eux</text></g>
-<line id="l_srv" x1="400" y1="306" x2="400" y2="332" stroke="#94a3b8" stroke-width="4"/>
-<g id="srv"><rect x="320" y="332" width="160" height="54" rx="10" fill="#172554"/><text x="400" y="355" text-anchor="middle" font-size="14" font-weight="bold" fill="#ffffff">Serveur</text><text x="400" y="374" text-anchor="middle" font-size="12" fill="#c7d2fe">10.0.9.1 · bureau du prof</text></g>
+<line id="l_srv" x1="400" y1="306" x2="400" y2="332" stroke="var(--encre-douce)" stroke-width="4"/>
+<g id="srv"><rect x="320" y="332" width="160" height="54" rx="10" fill="var(--encre)"/><text x="400" y="355" text-anchor="middle" font-size="14" font-weight="bold" fill="#ffffff">Serveur</text><text x="400" y="374" text-anchor="middle" font-size="12" fill="#c7d2fe">10.0.9.1 · bureau du prof</text></g>
 </g></svg></div>
   <ol class="journal" id="journal"></ol>
 <div class="info"><b>Rejoue les trois manches.</b> Un envoi entre deux réseaux, une demande au serveur, puis mets le routeur 2 en panne et renvoie un message vers le réseau 2. Le vocabulaire s'affiche sur chaque étape.</div>
@@ -393,7 +203,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 
 <!-- 3 -->
 <section class="panel" id="p2"><div class="card">
-  <div class="entete"><div><h2>L'adresse de mon poste</h2><p class="muted">Ton livret, activité 3. En binôme.</p></div><span class="score">20 min</span></div>
+  <div class="carte-entete"><div><h2>L'adresse de mon poste</h2><p class="muted">Ton livret, activité 3. En binôme.</p></div><span class="score">20 min</span></div>
   <div class="steps" id="etapes"></div>
   <div class="row" style="margin-top:14px"><button class="btn soft" id="etprec">Étape précédente</button><button class="btn primary" id="etsuiv">Étape suivante</button></div>
   <div class="consigne" style="margin-top:20px"><small>Attention</small>
@@ -409,25 +219,25 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 <!-- 4 -->
 <section class="panel" id="p3">
 <div class="card">
-  <div class="entete"><div><h2>Du poste jusqu'au site</h2><p class="muted">Place les cinq mots dans les cases, puis vérifie.</p></div><span class="score">25 min</span></div>
+  <div class="carte-entete"><div><h2>Du poste jusqu'au site</h2><p class="muted">Place les cinq mots dans les cases, puis vérifie.</p></div><span class="score">25 min</span></div>
   <figure><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 315" role="img" aria-label="Trajet d'une demande depuis mon poste jusqu'au serveur d'un site">
 
-<defs><marker id="f" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M0 0L10 5L0 10z" fill="#172554"/></marker><marker id="g" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M0 0L10 5L0 10z" fill="#16a34a"/></marker></defs>
+<defs><marker id="f" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M0 0L10 5L0 10z" fill="var(--encre)"/></marker><marker id="g" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M0 0L10 5L0 10z" fill="#16a34a"/></marker></defs>
 <g font-family="Arial, Helvetica, sans-serif">
-<rect x="20" y="70" width="130" height="86" rx="10" fill="#f8fafc" stroke="#172554" stroke-width="3"/><path d="M60 156 h50 M85 156 v14 M62 170 h46" stroke="#172554" stroke-width="3"/>
-<text x="85" y="110" text-anchor="middle" font-size="15" font-weight="bold" fill="#172554">Mon poste</text><text x="85" y="132" text-anchor="middle" font-size="12" fill="#475569">et son navigateur</text>
+<rect x="20" y="70" width="130" height="86" rx="10" fill="var(--papier)" stroke="var(--encre)" stroke-width="3"/><path d="M60 156 h50 M85 156 v14 M62 170 h46" stroke="var(--encre)" stroke-width="3"/>
+<text x="85" y="110" text-anchor="middle" font-size="15" font-weight="bold" fill="var(--encre)">Mon poste</text><text x="85" y="132" text-anchor="middle" font-size="12" fill="var(--encre-douce)">et son navigateur</text>
 <rect x="20" y="195" width="130" height="30" rx="8" fill="#fff" stroke="#2563eb" stroke-width="2.5" stroke-dasharray="6 4"/><text x="36" y="215" text-anchor="middle" font-size="15" font-weight="bold" fill="#2563eb">1</text>
-<path d="M152 110 H232" stroke="#172554" stroke-width="3" stroke-dasharray="8 5" marker-end="url(#f)"/>
+<path d="M152 110 H232" stroke="var(--encre)" stroke-width="3" stroke-dasharray="8 5" marker-end="url(#f)"/>
 <rect x="132" y="42" width="120" height="30" rx="8" fill="#fff" stroke="#2563eb" stroke-width="2.5" stroke-dasharray="6 4"/><text x="148" y="62" text-anchor="middle" font-size="15" font-weight="bold" fill="#2563eb">2</text>
 <rect x="238" y="82" width="120" height="60" rx="10" fill="#fff" stroke="#1d4ed8" stroke-width="3"/><path d="M262 82 v-16 M334 82 v-16" stroke="#1d4ed8" stroke-width="3"/>
 <rect x="238" y="158" width="120" height="30" rx="8" fill="#fff" stroke="#2563eb" stroke-width="2.5" stroke-dasharray="6 4"/><text x="254" y="178" text-anchor="middle" font-size="15" font-weight="bold" fill="#2563eb">3</text>
 <text x="298" y="118" text-anchor="middle" font-size="22" fill="#1d4ed8">⇄</text>
-<path d="M360 112 H408" stroke="#172554" stroke-width="3" marker-end="url(#f)"/>
+<path d="M360 112 H408" stroke="var(--encre)" stroke-width="3" marker-end="url(#f)"/>
 <ellipse cx="490" cy="112" rx="78" ry="48" fill="#ede9fe" stroke="#6d28d9" stroke-width="3"/>
 <text x="490" y="108" text-anchor="middle" font-size="12" fill="#5b21b6">des milliers</text><text x="490" y="124" text-anchor="middle" font-size="12" fill="#5b21b6">de réseaux</text>
 <rect x="430" y="176" width="120" height="30" rx="8" fill="#fff" stroke="#2563eb" stroke-width="2.5" stroke-dasharray="6 4"/><text x="446" y="196" text-anchor="middle" font-size="15" font-weight="bold" fill="#2563eb">4</text>
-<path d="M570 112 H626" stroke="#172554" stroke-width="3" marker-end="url(#f)"/>
-<rect x="630" y="62" width="140" height="100" rx="10" fill="#172554"/><path d="M650 88 h100 M650 108 h100 M650 128 h100" stroke="#6366f1" stroke-width="3"/>
+<path d="M570 112 H626" stroke="var(--encre)" stroke-width="3" marker-end="url(#f)"/>
+<rect x="630" y="62" width="140" height="100" rx="10" fill="var(--encre)"/><path d="M650 88 h100 M650 108 h100 M650 128 h100" stroke="#6366f1" stroke-width="3"/>
 <rect x="640" y="176" width="120" height="30" rx="8" fill="#fff" stroke="#2563eb" stroke-width="2.5" stroke-dasharray="6 4"/><text x="656" y="196" text-anchor="middle" font-size="15" font-weight="bold" fill="#2563eb">5</text>
 <path d="M700 230 C700 305, 90 305, 85 250" stroke="#16a34a" stroke-width="3.5" fill="none" marker-end="url(#g)"/>
 <text x="400" y="252" text-anchor="middle" font-size="14" font-weight="bold" fill="#15803d">le serveur renvoie la page web par le même chemin</text>
@@ -439,11 +249,11 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 </div>
 
 <div class="card">
-  <div class="entete"><div><h2>Je m'entraine</h2><p class="muted">Quatre exercices, 20 questions. La correction s'affiche tout de suite.</p></div></div>
+  <div class="carte-entete"><div><h2>Je m'entraine</h2><p class="muted">Quatre exercices, 20 questions. La correction s'affiche tout de suite.</p></div></div>
   <div class="consigne"><small>Avant de commencer</small>
     Ce n'est pas coté. Rien n'est enregistré. Tu peux te tromper, c'est fait pour ça.<br>À la fin, recopie tes deux lignes de résultat dans ton livret, page « Où j'en suis ».</div>
   <div class="progres">
-    <input id="nom" placeholder="Ton prénom et ton nom" style="padding:10px 13px;border:2px solid #cbd5e1;border-radius:11px;min-width:220px;flex:1">
+    <input id="nom" placeholder="Ton prénom et ton nom" style="padding:10px 13px;border:2px solid var(--trait-fort);border-radius:11px;min-width:220px;flex:1">
     <div class="barre"><i id="jauge"></i></div>
     <span class="score" id="avancement">0 / 20</span>
   </div>
@@ -456,7 +266,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
   <div class="row" style="margin-top:22px"><button class="btn primary" id="voir">Voir mon résultat</button><button class="btn soft" id="reset">Tout recommencer</button></div>
   <div id="bilan" style="margin-top:20px">
     <div class="row" style="align-items:flex-end;gap:20px;margin-bottom:16px">
-      <div><span class="gros" id="gTotal">0</span><span style="font-size:22px;font-weight:800;color:#94a3b8"> / 20</span></div>
+      <div><span class="gros" id="gTotal">0</span><span style="font-size:22px;font-weight:800;color:var(--encre-douce)"> / 20</span></div>
       <div class="muted" id="gMot" style="font-weight:800;font-size:18px"></div>
     </div>
     <div id="gDetail" style="margin-bottom:16px"></div>
@@ -470,7 +280,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 <!-- 5 -->
 <section class="panel" id="p4">
 <div class="card">
-  <div class="entete"><div><h2>Je comprends. Internet, le web et le navigateur</h2><p class="muted">On lit cette page ensemble. Elle est dans ton livret.</p></div><span class="score">15 min</span></div>
+  <div class="carte-entete"><div><h2>Je comprends. Internet, le web et le navigateur</h2><p class="muted">On lit cette page ensemble. Elle est dans ton livret.</p></div><span class="score">15 min</span></div>
   <p>« Je vais sur Internet », « je cherche sur le web », « j'ouvre Google » : on emploie ces expressions comme si elles voulaient dire la même chose. Ce n'est pas le cas.</p>
   <div class="consigne"><small>Les routes, les magasins et le vélo</small>
     <b>Internet, ce sont les routes</b> : un immense réseau qui relie tout.<br>
@@ -479,27 +289,27 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
   <p>Sur les mêmes routes circulent aussi d'autres choses : les <b>courriels</b>, les <b>jeux en ligne</b>, la <b>messagerie</b> comme WhatsApp ou Snapchat, la <b>musique</b> et les <b>vidéos</b> dans leurs applications. Tous utilisent Internet. Aucun n'a besoin d'un navigateur. Ce n'est pas le web.</p>
   <figure><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 260" role="img" aria-label="Internet est le réseau ; le web, le courriel, les jeux en ligne et la messagerie sont des services qui l'utilisent">
 <g font-family="Arial, Helvetica, sans-serif" text-anchor="middle">
-<text x="400" y="26" font-size="14" font-weight="bold" fill="#475569">DES SERVICES QUI UTILISENT INTERNET</text>
+<text x="400" y="26" font-size="14" font-weight="bold" fill="var(--encre-douce)">DES SERVICES QUI UTILISENT INTERNET</text>
 <rect x="25" y="44" width="170" height="92" rx="14" fill="#dbeafe" stroke="#2563eb" stroke-width="3"/>
 <text x="110" y="76" font-size="18" font-weight="bold" fill="#2563eb">Le web</text>
-<text x="110" y="98" font-size="13" fill="#334155">pages et liens</text>
-<text x="110" y="120" font-size="12" fill="#64748b">avec : navigateur</text>
-<line x1="110" y1="138" x2="110" y2="176" stroke="#94a3b8" stroke-width="4"/>
+<text x="110" y="98" font-size="13" fill="var(--encre-douce)">pages et liens</text>
+<text x="110" y="120" font-size="12" fill="var(--encre-douce)">avec : navigateur</text>
+<line x1="110" y1="138" x2="110" y2="176" stroke="var(--encre-douce)" stroke-width="4"/>
 <rect x="218" y="44" width="170" height="92" rx="14" fill="#fef3c7" stroke="#b45309" stroke-width="3"/>
 <text x="303" y="76" font-size="18" font-weight="bold" fill="#b45309">Le courriel</text>
-<text x="303" y="98" font-size="13" fill="#334155">messages</text>
-<text x="303" y="120" font-size="12" fill="#64748b">avec : application mail</text>
-<line x1="303" y1="138" x2="303" y2="176" stroke="#94a3b8" stroke-width="4"/>
+<text x="303" y="98" font-size="13" fill="var(--encre-douce)">messages</text>
+<text x="303" y="120" font-size="12" fill="var(--encre-douce)">avec : application mail</text>
+<line x1="303" y1="138" x2="303" y2="176" stroke="var(--encre-douce)" stroke-width="4"/>
 <rect x="411" y="44" width="170" height="92" rx="14" fill="#dcfce7" stroke="#15803d" stroke-width="3"/>
 <text x="496" y="76" font-size="18" font-weight="bold" fill="#15803d">Jeux en ligne</text>
-<text x="496" y="98" font-size="13" fill="#334155">parties</text>
-<text x="496" y="120" font-size="12" fill="#64748b">avec : le jeu lui-même</text>
-<line x1="496" y1="138" x2="496" y2="176" stroke="#94a3b8" stroke-width="4"/>
+<text x="496" y="98" font-size="13" fill="var(--encre-douce)">parties</text>
+<text x="496" y="120" font-size="12" fill="var(--encre-douce)">avec : le jeu lui-même</text>
+<line x1="496" y1="138" x2="496" y2="176" stroke="var(--encre-douce)" stroke-width="4"/>
 <rect x="604" y="44" width="170" height="92" rx="14" fill="#fce7f3" stroke="#be185d" stroke-width="3"/>
 <text x="689" y="76" font-size="18" font-weight="bold" fill="#be185d">Messagerie</text>
-<text x="689" y="98" font-size="13" fill="#334155">discussions</text>
-<text x="689" y="120" font-size="12" fill="#64748b">avec : application</text>
-<line x1="689" y1="138" x2="689" y2="176" stroke="#94a3b8" stroke-width="4"/>
+<text x="689" y="98" font-size="13" fill="var(--encre-douce)">discussions</text>
+<text x="689" y="120" font-size="12" fill="var(--encre-douce)">avec : application</text>
+<line x1="689" y1="138" x2="689" y2="176" stroke="var(--encre-douce)" stroke-width="4"/>
 <rect x="20" y="176" width="760" height="62" rx="18" fill="#ede9fe" stroke="#6d28d9" stroke-width="3"/>
 <text x="400" y="204" font-size="19" font-weight="bold" fill="#5b21b6">INTERNET</text>
 <text x="400" y="226" font-size="13" fill="#5b21b6">le réseau des réseaux, qui transporte tout le reste</text>
@@ -522,7 +332,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 <!-- 6 -->
 <section class="panel" id="p5">
 <div class="card">
-  <div class="entete"><div><h2>Ma trace écrite</h2><p class="muted">Dans ton livret. Complète les mots manquants.</p></div><span class="score">5 min</span></div>
+  <div class="carte-entete"><div><h2>Ma trace écrite</h2><p class="muted">Dans ton livret. Complète les mots manquants.</p></div><span class="score">5 min</span></div>
   <div class="row" style="margin-bottom:16px">
     <button class="btn primary" id="motSuiv">Révéler le mot suivant</button>
     <button class="btn soft" id="motReset">Tout masquer</button>
@@ -542,7 +352,9 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
 </section>
 
 </main>
-<footer>Bloc 4 sur 35 · Séquence annuelle 1TC-NUM, volet numérique FMTTN · 2026-2027 · M. Courcelle</footer>
+<footer class="pied">
+  <div class="pied__interieur">Bloc 4 sur 35 · Séquence annuelle 1TC-NUM, volet numérique FMTTN · 2026-2027 · M. Courcelle</div>
+</footer>
 
 <script>
 "use strict";
@@ -742,7 +554,7 @@ var TRACE=[["Un ",1,", ce sont des appareils reliés entre eux pour échanger de
  ["Le ",7," est le logiciel qui affiche les pages. Le ",8," est un service qui utilise Internet, mais ce n'est pas Internet."]];
 var MOTS={1:"réseau",2:"connexion",3:"adresse IP",4:"routeur",5:"Internet",6:"serveur",7:"navigateur",8:"web"};
 var rv=0,zt=document.getElementById("trace");
-function dessineTrace(){zt.innerHTML="<h3>Cours 4. Comment ça circule</h3>"+TRACE.map(function(par){return "<p>"+par.map(function(x){if(typeof x==="number")return x<=rv?'<b style="color:#1d4ed8">'+MOTS[x]+'</b>':'<span style="border-bottom:2px solid #93c5fd;color:#93c5fd">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>';return x;}).join("")+"</p>";}).join("");document.getElementById("motCompte").textContent=rv+" mot"+(rv>1?"s":"")+" sur 8";}
+function dessineTrace(){zt.innerHTML="<h3>Cours 4. Comment ça circule</h3>"+TRACE.map(function(par){return "<p>"+par.map(function(x){if(typeof x==="number")return x<=rv?'<b style="color:var(--accent-encre)">'+MOTS[x]+'</b>':'<span style="border-bottom:2px solid var(--accent);color:var(--accent)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>';return x;}).join("")+"</p>";}).join("");document.getElementById("motCompte").textContent=rv+" mot"+(rv>1?"s":"")+" sur 8";}
 document.getElementById("motSuiv").onclick=function(){if(rv<8){rv++;dessineTrace();}};
 document.getElementById("motReset").onclick=function(){rv=0;dessineTrace();};
 dessineTrace();
diff --git a/1re-numerique/index.html b/1re-numerique/index.html
index 17b24c7..8e8211c 100644
--- a/1re-numerique/index.html
+++ b/1re-numerique/index.html
@@ -1,197 +1,46 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="fr">
 <head>
 <meta charset="utf-8">
-<meta name="viewport" content="width=device-width,initial-scale=1">
-<title>Formation numérique 1re année – les cours de l'année</title>
-<style>:root{--ink:#172033;--muted:#667085;--blue:#2563eb;--navy:#172554;--green:#16a34a;--red:#dc2626;--card:#fff;--line:#e5e7eb;--shadow:0 18px 45px #0f172a18}
-*{box-sizing:border-box}html{scroll-behavior:smooth}
-body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:linear-gradient(180deg,#edf4ff,#f8fafc 34%,#fff);color:var(--ink)}
-button,input,select{font:inherit}
-main{max-width:1180px;margin:auto;padding:34px 20px 70px}
-:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
-svg.i{width:1em;height:1em;vertical-align:-.14em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
-
-.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;background:linear-gradient(135deg,#172554,#2563eb);color:#fff;border-radius:28px;padding:30px;box-shadow:var(--shadow);margin-bottom:24px}
-.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:900;opacity:.82}
-.hero h1{font-size:clamp(30px,4.6vw,52px);line-height:1;letter-spacing:-1.6px;margin:7px 0 12px}
-.hero p{margin:0;color:#dbeafe;line-height:1.6;font-size:17px}
-.hero a.up{display:inline-flex;align-items:center;gap:7px;color:#bfdbfe;font-weight:800;font-size:13px;text-decoration:none;margin-bottom:10px}
-.hero a.up:hover{color:#fff}
-.hero-visual{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
-.hero-chip{background:#ffffff14;border:1px solid #ffffff28;border-radius:18px;padding:16px;text-align:center}
-.hero-chip .ico{display:block;margin:0 auto 7px;width:30px;height:30px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
-.hero-chip b{font-size:14px}
-.badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
-.badge{background:#ffffff1f;border:1px solid #ffffff2e;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:800;color:#e0ecff}
-.badge.warn{background:#dc262633;border-color:#fca5a5;color:#fee2e2}
-
-.dashboard{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
-.stat{background:#fff;border:1px solid var(--line);border-radius:17px;padding:14px;box-shadow:0 8px 24px #0f172a0b}
-.stat strong{display:block;font-size:22px;margin-top:3px}
-.stat small{color:#64748b;font-weight:800}
-.stat.ok strong{color:var(--green)}
-
-.chrono{background:#172554;color:#fff;border-radius:20px;padding:16px 18px;box-shadow:var(--shadow);margin-bottom:20px;display:grid;gap:12px}
-.chrono-haut{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
-.pendule{font-size:32px;font-weight:950;font-variant-numeric:tabular-nums;line-height:1}
-.pendule small{display:block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#93b4d8;margin-top:5px}
-.ecart{font-size:14px;font-weight:850;padding:9px 14px;border-radius:999px;background:#ffffff1a;border:1px solid #ffffff2e;min-width:250px;text-align:center}
-.ecart.avance{background:#16a34a2e;border-color:#4ade80;color:#dcfce7}
-.ecart.retard{background:#dc26262e;border-color:#fca5a5;color:#fee2e2}
-.chrono .row button{background:#ffffff1a;border:1px solid #ffffff30;color:#fff}
-.chrono .row button.go{background:#fff;border-color:#fff;color:#172554}
-
-.navtabs{display:grid;gap:10px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:0 8px 24px #0f172a0b;margin-bottom:20px}
-.navtabs.n6{grid-template-columns:repeat(6,1fr)}
-.tab{border:2px solid #e2e8f0;background:#fff;border-radius:14px;padding:12px 10px;font-weight:900;cursor:pointer;color:#334155;text-align:left;position:relative}
-.tab span{display:block;font-size:11px;font-weight:800;color:#94a3b8;margin-top:3px;font-variant-numeric:tabular-nums}
-.tab:hover{border-color:#93c5fd}
-.tab.active{background:#2563eb;color:#fff;border-color:#2563eb;box-shadow:0 8px 18px #2563eb28}
-.tab.active span{color:#c7dcff}
-.tab.prevue::after{content:"";position:absolute;left:12px;right:12px;bottom:-2px;height:4px;border-radius:99px;background:#f59e0b}
-
-.panel{display:none}.panel.active{display:block}
-.card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 10px 28px #0f172a0d;margin-bottom:16px}
-.card h2,.card h3{margin-top:0}
-.card h2{font-size:26px;letter-spacing:-.5px}
-.muted{color:var(--muted);line-height:1.6}
-.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
-.btn{border:0;border-radius:11px;padding:10px 15px;font-weight:850;cursor:pointer;background:#eaf1ff;color:#1d4ed8}
-.btn:hover{filter:brightness(.97)}
-.btn.primary{background:#2563eb;color:#fff}
-.btn.soft{background:#f1f5f9;color:#334155}
-.score{display:inline-block;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:7px 12px;font-weight:900;font-size:14px}
-.feedback{min-height:31px;margin-top:12px;font-weight:850}
-.entete{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:flex-start;margin-bottom:14px}
-.consigne{background:linear-gradient(145deg,#f8fafc,#eef6ff);border:2px solid #dbeafe;border-radius:18px;padding:20px 24px;font-size:20px;font-weight:800;line-height:1.45;margin:16px 0}
-.consigne small{display:block;text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:900;color:var(--blue);margin-bottom:8px}
-.info{border-left:4px solid #cbd5e1;background:#f8fafc;border-radius:0 12px 12px 0;padding:13px 17px;color:#475569;font-size:15px;line-height:1.6;margin-top:16px}
-.info b{color:var(--ink)}
-.info.alerte{border-color:#fca5a5;background:#fef4f4;color:#7f2b2b}
-.info.alerte b{color:#991b1b}
-
-.saisie{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px}
-.saisie input{flex:1;min-width:210px;padding:12px 14px;border:2px solid #cbd5e1;border-radius:12px;outline:none}
-.saisie input:focus{border-color:var(--blue);box-shadow:0 0 0 4px #2563eb18}
-.saisie select{padding:12px 14px;border:2px solid #cbd5e1;border-radius:12px;font-weight:800}
-.colonnes{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:11px}
-.colonne{border:1px solid var(--line);border-radius:17px;background:#f8fbff;min-height:145px;padding:13px}
-.colonne h3{font-size:14px;display:flex;justify-content:space-between;align-items:center;margin:0 0 9px;padding-bottom:8px;border-bottom:1px solid var(--line)}
-.colonne h3 em{font-style:normal;color:#94a3b8;font-size:12px}
-.colonne ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
-.colonne li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:7px 10px;font-size:14px;font-weight:700;display:flex;justify-content:space-between;gap:6px}
-.colonne li button{background:none;border:0;color:#cbd5e1;cursor:pointer;padding:0 3px;font-weight:900}
-.colonne li button:hover{color:var(--red)}
-
-.accordeon{display:grid;gap:10px}
-.item{border:1px solid var(--line);border-radius:17px;background:#fff;overflow:hidden}
-.item>button{width:100%;display:flex;gap:14px;align-items:flex-start;text-align:left;background:none;border:0;padding:15px 18px;cursor:pointer}
-.item>button:hover{background:#f8fbff}
-.item .n{width:30px;height:30px;flex:none;border-radius:10px;background:#eaf1ff;color:#1d4ed8;font-weight:950;display:grid;place-items:center;font-size:14px}
-.item .t{font-weight:850;font-size:17px;flex:1}
-.item .plus{color:#94a3b8;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;padding-top:6px}
-.item .corps{display:none;padding:0 18px 17px 62px;color:#475569;line-height:1.6}
-.item.ouvert .corps{display:block}
-.item.ouvert{border-color:#93c5fd;box-shadow:0 8px 20px #2563eb14}
-.item.ouvert .n{background:#2563eb;color:#fff}
-
-.qcard{border:2px solid #dbeafe;border-radius:20px;background:linear-gradient(145deg,#fbfdff,#f4f9ff);padding:24px 26px}
-.qtag{display:inline-block;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:900;margin-bottom:10px}
-.qtag.cle{background:#fef3c7;color:#92400e}
-.qtxt{font-size:22px;font-weight:900;line-height:1.3;letter-spacing:-.3px;margin-bottom:16px}
-.answer-grid{display:grid;gap:8px}
-.answer{border:2px solid #dbe3ef;background:#fff;border-radius:12px;padding:11px 14px;text-align:left;font-weight:800}
-.answer.ok{border-color:#22c55e;background:#f0fdf4}
-.reveal{display:none;margin-top:16px;border-top:2px dashed #dbeafe;padding-top:15px}
-.reveal.on{display:block}
-.verdict{font-weight:950;color:var(--green);margin-bottom:8px}
-
-.steps{display:grid;gap:11px}
-.step{border:1px solid var(--line);border-radius:17px;background:#fff;padding:16px 20px;display:flex;gap:15px;align-items:flex-start;opacity:.4}
-.step.on{opacity:1;border-color:#93c5fd;box-shadow:0 8px 20px #2563eb14}
-.step.fait{opacity:1}
-.step .n{width:34px;height:34px;flex:none;border-radius:12px;background:#f1f5f9;color:#94a3b8;font-weight:950;display:grid;place-items:center}
-.step.on .n{background:#2563eb;color:#fff}
-.step.fait .n{background:#dcfce7;color:#15803d}
-.step h3{margin:0 0 4px;font-size:17px}
-.step p{margin:0;color:#475569;font-size:15px;line-height:1.55}
-
-figure{margin:0 0 18px}
-figure svg{width:100%;height:auto;display:block;background:#fff;border:1px solid var(--line);border-radius:18px}
-figcaption{font-size:14px;color:var(--muted);margin-top:10px;line-height:1.55}
-
-.trace{border:2px solid #dbeafe;background:linear-gradient(145deg,#fbfdff,#eef6ff);border-radius:20px;padding:26px 30px;font-size:19px;line-height:1.85}
-.trace h3{margin:0 0 14px;font-size:22px}
-.trace p{margin:0 0 .5em}
-.trace code{background:#fff;border:1px solid #dbeafe;border-radius:6px;padding:1px 7px;font-size:.92em}
-
-.check{display:grid;gap:9px}
-.check label{display:flex;gap:13px;align-items:flex-start;border:1px solid var(--line);border-radius:15px;background:#fff;padding:14px 18px;cursor:pointer;font-weight:750}
-.check label:hover{border-color:#93c5fd}
-.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--green);flex:none}
-.check input:checked+span{color:var(--green);font-weight:900}
-
-table.grille{width:100%;border-collapse:collapse;font-size:15px}
-table.grille th,table.grille td{border:1px solid var(--line);padding:10px 13px;text-align:left}
-table.grille th{background:#f8fafc;font-weight:900;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:#475569}
-table.grille td.masque{color:transparent;background:#f8fafc}
-table.grille tr.on td{background:#f0fdf4}
-table.grille td b{color:#15803d}
-
-.filtres{display:flex;gap:9px;flex-wrap:wrap;align-items:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:0 8px 24px #0f172a0b;margin-bottom:20px}
-.filtres .compte{margin-left:auto;font-weight:850;color:var(--muted);font-size:14px}
-.module{margin-bottom:30px}
-.module-tete{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px}
-.module-tete h2{margin:0;font-size:25px;letter-spacing:-.6px}
-.module-tete .p{background:#172554;color:#fff;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:900}
-.module-tete .champ{color:var(--muted);font-size:14px;margin-left:auto}
-.module-note{color:var(--muted);line-height:1.6;margin:0 0 16px;max-width:76ch}
-.blocs{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
-.bloc{border:1px solid var(--line);border-radius:20px;background:#fff;padding:17px 19px;display:flex;gap:15px;align-items:flex-start;text-decoration:none;color:inherit;box-shadow:0 8px 24px #0f172a08}
-.bloc .n{width:40px;height:40px;flex:none;border-radius:14px;background:#f1f5f9;color:#94a3b8;font-weight:950;display:grid;place-items:center;font-size:17px}
-.bloc h3{margin:0 0 5px;font-size:17px;line-height:1.3}
-.bloc .att{font-size:13px;color:var(--muted);font-weight:600}
-.ets{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
-.et{font-size:11px;font-weight:900;border-radius:999px;padding:4px 9px;background:#f1f5f9;color:#475569}
-.et.eval{background:#fee2e2;color:#991b1b}
-.et.fac{background:#f3e8ff;color:#6b21a8}
-.et.pret{background:#dcfce7;color:#15803d}
-a.bloc:hover{border-color:#93c5fd;box-shadow:0 12px 28px #2563eb1f}
-a.bloc .n{background:#2563eb;color:#fff}
-.bloc.vide{border-style:dashed;opacity:.68;box-shadow:none}
-.bloc.vide h3{font-weight:800}
-.masque{display:none!important}
-
-footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:center;color:#64748b;font-size:12px;border-top:1px solid var(--line)}
-
-@media(max-width:980px){.hero{grid-template-columns:1fr}.dashboard{grid-template-columns:repeat(2,1fr)}.navtabs.n6{grid-template-columns:repeat(3,1fr)}}
-@media(max-width:620px){main{padding:20px 12px 60px}.hero{padding:22px 18px}.dashboard{grid-template-columns:1fr}.navtabs.n6{grid-template-columns:repeat(2,1fr)}.blocs{grid-template-columns:1fr}.ecart{min-width:0;flex:1}.filtres .compte{margin-left:0;width:100%}}
-@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
-@media print{.chrono,.navtabs,.filtres,.saisie{display:none}.panel{display:block!important}}
-</style>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>1re tronc commun — Numérique</title>
+<meta name="robots" content="noindex">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="../assets/theme.css">
+<link rel="stylesheet" href="../assets/numerique-1re.css">
 </head>
-<body>
-<main>
+<body class="classe-tc">
 
-<section class="hero">
-  <div>
-    <div class="eyebrow">1re année · Formation numérique · 2026-2027</div>
+<header class="entete">
+  <div class="entete__interieur entete__interieur--large">
+    <nav class="ariane" aria-label="Fil d'Ariane">
+      <a href="../index.html">Mes cours</a><span aria-hidden="true">/</span><strong>1re tronc commun</strong>
+    </nav>
     <h1>Les cours de l'année</h1>
-    <p>Trente-cinq cours de deux périodes, répartis en six grandes parties. Tu peux revenir sur la page d'un cours quand tu veux, pour revoir ce qu'on a fait.</p>
+    <p class="entete__meta">1re année · Formation numérique · 2026-2027</p>
   </div>
-  <div class="hero-visual">
-    <div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="13" rx="2"/><path d="M8 21h8M12 17v4"/></svg><b>La machine</b></div>
-    <div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M12 3l8 4v5c0 5-3.4 8.2-8 9-4.6-.8-8-4-8-9V7z"/></svg><b>Moi en ligne</b></div>
-    <div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M21 12a8 8 0 1 1-3.2-6.4"/><path d="M3 20l1.6-4.2"/><path d="M21 4v5h-5"/></svg><b>Communiquer</b></div>
-    <div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M4 4h16v16H4z"/><path d="M8 9h8M8 13h8M8 17h5"/></svg><b>Produire</b></div>
-  </div>
-</section>
+</header>
+
+<main class="contenu contenu--large">
+
+  <p class="chapeau">Trente-cinq cours de deux périodes, répartis en six grandes parties. Tu peux revenir sur la page d'un cours quand tu veux, pour revoir ce qu'on a fait.</p>
+
+  <ul class="apercu">
+    <li><svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="13" rx="2"/><path d="M8 21h8M12 17v4"/></svg><span>La machine</span></li>
+    <li><svg viewBox="0 0 24 24"><path d="M12 3l8 4v5c0 5-3.4 8.2-8 9-4.6-.8-8-4-8-9V7z"/></svg><span>Moi en ligne</span></li>
+    <li><svg viewBox="0 0 24 24"><path d="M21 12a8 8 0 1 1-3.2-6.4"/><path d="M3 20l1.6-4.2"/><path d="M21 4v5h-5"/></svg><span>Communiquer</span></li>
+    <li><svg viewBox="0 0 24 24"><path d="M4 4h16v16H4z"/><path d="M8 9h8M8 13h8M8 17h5"/></svg><span>Produire</span></li>
+  </ul>
+
 
 <div id="corps"></div>
 
 </main>
-<footer>Formation numérique · 1re année · M. Courcelle</footer>
+<footer class="pied">
+  <div class="pied__interieur">Formation numérique · 1re année · M. Courcelle</div>
+</footer>
 
 <script>
 "use strict";
@@ -261,9 +110,9 @@ MODULES.forEach(function(m){
       : '<div class="bloc vide">'+in_+'</div>';
   }).join("");
   var s=document.createElement("section");
-  s.className="module";
-  s.innerHTML='<div class="module-tete"><span class="p">Partie '+m.n+'</span><h2>'+m.titre+'</h2>'
-    +'<span class="champ">'+m.quand+'</span></div><p class="module-note">'+m.note+'</p>'
+  s.className="partie";
+  s.innerHTML='<div class="partie-tete"><span class="p">Partie '+m.n+'</span><h2>'+m.titre+'</h2>'
+    +'<span class="champ">'+m.quand+'</span></div><p class="partie-note">'+m.note+'</p>'
     +'<div class="blocs">'+cartes+'</div>';
   corps.appendChild(s);
 });
diff --git a/1re-numerique/index2.html b/1re-numerique/index2.html
deleted file mode 100644
index e2b79d3..0000000
--- a/1re-numerique/index2.html
+++ /dev/null
@@ -1,74 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>1re tronc commun — Numérique</title>
-<meta name="description" content="Les modules du cours de Numérique de 1re tronc commun.">
-<meta name="robots" content="noindex">
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
-<link rel="stylesheet" href="../assets/theme.css">
-</head>
-<body class="classe-tc">
-
-<header class="entete">
-  <div class="entete__interieur">
-    <nav class="ariane" aria-label="Fil d'Ariane">
-      <a href="../index.html">Mes cours</a><span aria-hidden="true">/</span><strong>1re tronc commun</strong>
-    </nav>
-    <h1>1re tronc commun</h1>
-    <p class="entete__meta">Numérique · M. Courcelle</p>
-  </div>
-</header>
-
-<main class="contenu">
-
-  <p class="chapeau">Choisis le module sur lequel tu travailles. Chaque module contient la théorie du chapitre, des exercices et des jeux à refaire autant de fois que tu veux.</p>
-
-  <h2>Les modules du cours</h2>
-
-  <!-- ==================================================================
-       POUR AJOUTER UN MODULE
-       1. Créer le dossier du module à côté de ce fichier, avec son
-          index.html dedans (le plus simple : copier un module existant).
-       2. Copier-coller le bloc <li class="module"> ci-dessous, juste
-          avant la fin de la liste, et remplir les quatre champs :
-            module__num     « Module 3 », « Module C »…
-            module__titre   le titre affiché à l'élève
-            module__resume  une phrase sur ce qu'on y fait
-            module__meta    nombre de séances, chapitre du cours papier…
-       3. Adapter le href vers le dossier du nouveau module.
-
-       Gabarit à copier :
-
-       <li class="module">
-         <a class="module__lien" href="DOSSIER/index.html">
-           <span class="module__num">Module N</span>
-           <span class="module__titre">Titre du module</span>
-           <span class="module__resume">Ce qu'on y apprend, en une phrase.</span>
-           <span class="module__meta">X séances · cours papier, chapitre Y</span>
-         </a>
-       </li>
-
-       Un module annoncé mais pas encore prêt : garder le <li> en
-       ajoutant la classe « module--bientot » et remplacer le <a> par
-       un <div class="module__lien">, sans href.
-       ================================================================== -->
-
-  <p class="vide">
-    Aucun module n'est encore en ligne pour cette classe.<br>
-    Les exercices arriveront ici au fil de l'année.
-  </p>
-
-</main>
-
-<footer class="pied">
-  <div class="pied__interieur">
-    Les exercices fonctionnent sans connexion Internet et peuvent être lancés depuis une clé USB.
-  </div>
-</footer>
-
-</body>
-</html>
diff --git a/1re-numerique/pilotage.html b/1re-numerique/pilotage.html
index 1248eb7..cd56d10 100644
--- a/1re-numerique/pilotage.html
+++ b/1re-numerique/pilotage.html
@@ -1,192 +1,39 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="fr">
 <head>
 <meta charset="utf-8">
-<meta name="viewport" content="width=device-width,initial-scale=1">
-<title>Formation numérique 1TC – les 35 blocs de l'année</title>
-<style>:root{--ink:#172033;--muted:#667085;--blue:#2563eb;--navy:#172554;--green:#16a34a;--red:#dc2626;--card:#fff;--line:#e5e7eb;--shadow:0 18px 45px #0f172a18}
-*{box-sizing:border-box}html{scroll-behavior:smooth}
-body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:linear-gradient(180deg,#edf4ff,#f8fafc 34%,#fff);color:var(--ink)}
-button,input,select{font:inherit}
-main{max-width:1180px;margin:auto;padding:34px 20px 70px}
-:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
-svg.i{width:1em;height:1em;vertical-align:-.14em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
-
-.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;background:linear-gradient(135deg,#172554,#2563eb);color:#fff;border-radius:28px;padding:30px;box-shadow:var(--shadow);margin-bottom:24px}
-.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:900;opacity:.82}
-.hero h1{font-size:clamp(30px,4.6vw,52px);line-height:1;letter-spacing:-1.6px;margin:7px 0 12px}
-.hero p{margin:0;color:#dbeafe;line-height:1.6;font-size:17px}
-.hero a.up{display:inline-flex;align-items:center;gap:7px;color:#bfdbfe;font-weight:800;font-size:13px;text-decoration:none;margin-bottom:10px}
-.hero a.up:hover{color:#fff}
-.hero-visual{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
-.hero-chip{background:#ffffff14;border:1px solid #ffffff28;border-radius:18px;padding:16px;text-align:center}
-.hero-chip .ico{display:block;margin:0 auto 7px;width:30px;height:30px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
-.hero-chip b{font-size:14px}
-.badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
-.badge{background:#ffffff1f;border:1px solid #ffffff2e;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:800;color:#e0ecff}
-.badge.warn{background:#dc262633;border-color:#fca5a5;color:#fee2e2}
-
-.dashboard{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
-.stat{background:#fff;border:1px solid var(--line);border-radius:17px;padding:14px;box-shadow:0 8px 24px #0f172a0b}
-.stat strong{display:block;font-size:22px;margin-top:3px}
-.stat small{color:#64748b;font-weight:800}
-.stat.ok strong{color:var(--green)}
-
-.chrono{background:#172554;color:#fff;border-radius:20px;padding:16px 18px;box-shadow:var(--shadow);margin-bottom:20px;display:grid;gap:12px}
-.chrono-haut{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
-.pendule{font-size:32px;font-weight:950;font-variant-numeric:tabular-nums;line-height:1}
-.pendule small{display:block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#93b4d8;margin-top:5px}
-.ecart{font-size:14px;font-weight:850;padding:9px 14px;border-radius:999px;background:#ffffff1a;border:1px solid #ffffff2e;min-width:250px;text-align:center}
-.ecart.avance{background:#16a34a2e;border-color:#4ade80;color:#dcfce7}
-.ecart.retard{background:#dc26262e;border-color:#fca5a5;color:#fee2e2}
-.chrono .row button{background:#ffffff1a;border:1px solid #ffffff30;color:#fff}
-.chrono .row button.go{background:#fff;border-color:#fff;color:#172554}
-
-.navtabs{display:grid;gap:10px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:0 8px 24px #0f172a0b;margin-bottom:20px}
-.navtabs.n6{grid-template-columns:repeat(6,1fr)}
-.tab{border:2px solid #e2e8f0;background:#fff;border-radius:14px;padding:12px 10px;font-weight:900;cursor:pointer;color:#334155;text-align:left;position:relative}
-.tab span{display:block;font-size:11px;font-weight:800;color:#94a3b8;margin-top:3px;font-variant-numeric:tabular-nums}
-.tab:hover{border-color:#93c5fd}
-.tab.active{background:#2563eb;color:#fff;border-color:#2563eb;box-shadow:0 8px 18px #2563eb28}
-.tab.active span{color:#c7dcff}
-.tab.prevue::after{content:"";position:absolute;left:12px;right:12px;bottom:-2px;height:4px;border-radius:99px;background:#f59e0b}
-
-.panel{display:none}.panel.active{display:block}
-.card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 10px 28px #0f172a0d;margin-bottom:16px}
-.card h2,.card h3{margin-top:0}
-.card h2{font-size:26px;letter-spacing:-.5px}
-.muted{color:var(--muted);line-height:1.6}
-.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
-.btn{border:0;border-radius:11px;padding:10px 15px;font-weight:850;cursor:pointer;background:#eaf1ff;color:#1d4ed8}
-.btn:hover{filter:brightness(.97)}
-.btn.primary{background:#2563eb;color:#fff}
-.btn.soft{background:#f1f5f9;color:#334155}
-.score{display:inline-block;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:7px 12px;font-weight:900;font-size:14px}
-.feedback{min-height:31px;margin-top:12px;font-weight:850}
-.entete{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:flex-start;margin-bottom:14px}
-.consigne{background:linear-gradient(145deg,#f8fafc,#eef6ff);border:2px solid #dbeafe;border-radius:18px;padding:20px 24px;font-size:20px;font-weight:800;line-height:1.45;margin:16px 0}
-.consigne small{display:block;text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:900;color:var(--blue);margin-bottom:8px}
-.info{border-left:4px solid #cbd5e1;background:#f8fafc;border-radius:0 12px 12px 0;padding:13px 17px;color:#475569;font-size:15px;line-height:1.6;margin-top:16px}
-.info b{color:var(--ink)}
-.info.alerte{border-color:#fca5a5;background:#fef4f4;color:#7f2b2b}
-.info.alerte b{color:#991b1b}
-
-.saisie{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px}
-.saisie input{flex:1;min-width:210px;padding:12px 14px;border:2px solid #cbd5e1;border-radius:12px;outline:none}
-.saisie input:focus{border-color:var(--blue);box-shadow:0 0 0 4px #2563eb18}
-.saisie select{padding:12px 14px;border:2px solid #cbd5e1;border-radius:12px;font-weight:800}
-.colonnes{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:11px}
-.colonne{border:1px solid var(--line);border-radius:17px;background:#f8fbff;min-height:145px;padding:13px}
-.colonne h3{font-size:14px;display:flex;justify-content:space-between;align-items:center;margin:0 0 9px;padding-bottom:8px;border-bottom:1px solid var(--line)}
-.colonne h3 em{font-style:normal;color:#94a3b8;font-size:12px}
-.colonne ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
-.colonne li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:7px 10px;font-size:14px;font-weight:700;display:flex;justify-content:space-between;gap:6px}
-.colonne li button{background:none;border:0;color:#cbd5e1;cursor:pointer;padding:0 3px;font-weight:900}
-.colonne li button:hover{color:var(--red)}
-
-.accordeon{display:grid;gap:10px}
-.item{border:1px solid var(--line);border-radius:17px;background:#fff;overflow:hidden}
-.item>button{width:100%;display:flex;gap:14px;align-items:flex-start;text-align:left;background:none;border:0;padding:15px 18px;cursor:pointer}
-.item>button:hover{background:#f8fbff}
-.item .n{width:30px;height:30px;flex:none;border-radius:10px;background:#eaf1ff;color:#1d4ed8;font-weight:950;display:grid;place-items:center;font-size:14px}
-.item .t{font-weight:850;font-size:17px;flex:1}
-.item .plus{color:#94a3b8;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;padding-top:6px}
-.item .corps{display:none;padding:0 18px 17px 62px;color:#475569;line-height:1.6}
-.item.ouvert .corps{display:block}
-.item.ouvert{border-color:#93c5fd;box-shadow:0 8px 20px #2563eb14}
-.item.ouvert .n{background:#2563eb;color:#fff}
-
-.qcard{border:2px solid #dbeafe;border-radius:20px;background:linear-gradient(145deg,#fbfdff,#f4f9ff);padding:24px 26px}
-.qtag{display:inline-block;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:900;margin-bottom:10px}
-.qtag.cle{background:#fef3c7;color:#92400e}
-.qtxt{font-size:22px;font-weight:900;line-height:1.3;letter-spacing:-.3px;margin-bottom:16px}
-.answer-grid{display:grid;gap:8px}
-.answer{border:2px solid #dbe3ef;background:#fff;border-radius:12px;padding:11px 14px;text-align:left;font-weight:800}
-.answer.ok{border-color:#22c55e;background:#f0fdf4}
-.reveal{display:none;margin-top:16px;border-top:2px dashed #dbeafe;padding-top:15px}
-.reveal.on{display:block}
-.verdict{font-weight:950;color:var(--green);margin-bottom:8px}
-
-.steps{display:grid;gap:11px}
-.step{border:1px solid var(--line);border-radius:17px;background:#fff;padding:16px 20px;display:flex;gap:15px;align-items:flex-start;opacity:.4}
-.step.on{opacity:1;border-color:#93c5fd;box-shadow:0 8px 20px #2563eb14}
-.step.fait{opacity:1}
-.step .n{width:34px;height:34px;flex:none;border-radius:12px;background:#f1f5f9;color:#94a3b8;font-weight:950;display:grid;place-items:center}
-.step.on .n{background:#2563eb;color:#fff}
-.step.fait .n{background:#dcfce7;color:#15803d}
-.step h3{margin:0 0 4px;font-size:17px}
-.step p{margin:0;color:#475569;font-size:15px;line-height:1.55}
-
-figure{margin:0 0 18px}
-figure svg{width:100%;height:auto;display:block;background:#fff;border:1px solid var(--line);border-radius:18px}
-figcaption{font-size:14px;color:var(--muted);margin-top:10px;line-height:1.55}
-
-.trace{border:2px solid #dbeafe;background:linear-gradient(145deg,#fbfdff,#eef6ff);border-radius:20px;padding:26px 30px;font-size:19px;line-height:1.85}
-.trace h3{margin:0 0 14px;font-size:22px}
-.trace p{margin:0 0 .5em}
-.trace code{background:#fff;border:1px solid #dbeafe;border-radius:6px;padding:1px 7px;font-size:.92em}
-
-.check{display:grid;gap:9px}
-.check label{display:flex;gap:13px;align-items:flex-start;border:1px solid var(--line);border-radius:15px;background:#fff;padding:14px 18px;cursor:pointer;font-weight:750}
-.check label:hover{border-color:#93c5fd}
-.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--green);flex:none}
-.check input:checked+span{color:var(--green);font-weight:900}
-
-table.grille{width:100%;border-collapse:collapse;font-size:15px}
-table.grille th,table.grille td{border:1px solid var(--line);padding:10px 13px;text-align:left}
-table.grille th{background:#f8fafc;font-weight:900;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:#475569}
-table.grille td.masque{color:transparent;background:#f8fafc}
-table.grille tr.on td{background:#f0fdf4}
-table.grille td b{color:#15803d}
-
-.filtres{display:flex;gap:9px;flex-wrap:wrap;align-items:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:0 8px 24px #0f172a0b;margin-bottom:20px}
-.filtres .compte{margin-left:auto;font-weight:850;color:var(--muted);font-size:14px}
-.module{margin-bottom:30px}
-.module-tete{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px}
-.module-tete h2{margin:0;font-size:25px;letter-spacing:-.6px}
-.module-tete .p{background:#172554;color:#fff;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:900}
-.module-tete .champ{color:var(--muted);font-size:14px;margin-left:auto}
-.module-note{color:var(--muted);line-height:1.6;margin:0 0 16px;max-width:76ch}
-.blocs{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
-.bloc{border:1px solid var(--line);border-radius:20px;background:#fff;padding:17px 19px;display:flex;gap:15px;align-items:flex-start;text-decoration:none;color:inherit;box-shadow:0 8px 24px #0f172a08}
-.bloc .n{width:40px;height:40px;flex:none;border-radius:14px;background:#f1f5f9;color:#94a3b8;font-weight:950;display:grid;place-items:center;font-size:17px}
-.bloc h3{margin:0 0 5px;font-size:17px;line-height:1.3}
-.bloc .att{font-size:13px;color:var(--muted);font-weight:600}
-.ets{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
-.et{font-size:11px;font-weight:900;border-radius:999px;padding:4px 9px;background:#f1f5f9;color:#475569}
-.et.eval{background:#fee2e2;color:#991b1b}
-.et.fac{background:#f3e8ff;color:#6b21a8}
-.et.pret{background:#dcfce7;color:#15803d}
-a.bloc:hover{border-color:#93c5fd;box-shadow:0 12px 28px #2563eb1f}
-a.bloc .n{background:#2563eb;color:#fff}
-.bloc.vide{border-style:dashed;opacity:.68;box-shadow:none}
-.bloc.vide h3{font-weight:800}
-.masque{display:none!important}
-
-footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:center;color:#64748b;font-size:12px;border-top:1px solid var(--line)}
-
-@media(max-width:980px){.hero{grid-template-columns:1fr}.dashboard{grid-template-columns:repeat(2,1fr)}.navtabs.n6{grid-template-columns:repeat(3,1fr)}}
-@media(max-width:620px){main{padding:20px 12px 60px}.hero{padding:22px 18px}.dashboard{grid-template-columns:1fr}.navtabs.n6{grid-template-columns:repeat(2,1fr)}.blocs{grid-template-columns:1fr}.ecart{min-width:0;flex:1}.filtres .compte{margin-left:0;width:100%}}
-@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
-@media print{.chrono,.navtabs,.filtres,.saisie{display:none}.panel{display:block!important}}
-</style>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Pilotage des 35 blocs — 1re tronc commun</title>
+<meta name="robots" content="noindex">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="../assets/theme.css">
+<link rel="stylesheet" href="../assets/numerique-1re.css">
 </head>
-<body>
-<main>
+<body class="classe-tc">
 
-<section class="hero">
-  <div>
-    <div class="eyebrow">Document enseignant · 1TC-NUM · 2026-2027</div>
+<header class="entete">
+  <div class="entete__interieur entete__interieur--large">
+    <nav class="ariane" aria-label="Fil d'Ariane">
+      <a href="../index.html">Mes cours</a><span aria-hidden="true">/</span><a href="index.html">1re tronc commun</a><span aria-hidden="true">/</span><strong>Pilotage</strong>
+    </nav>
     <h1>Formation numérique<br>Pilotage des 35 blocs</h1>
-    <p>Version enseignant, avec les attendus, les moments d'évaluation et les notes de conduite. Ne pas projeter. La version destinée aux élèves est <a href="index.html" style="color:#fff;text-decoration:underline">ici</a>.</p>
+    <p class="entete__meta">Document enseignant · 1TC-NUM · 2026-2027</p>
   </div>
-  <div class="hero-visual">
-    <div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="13" rx="2"/><path d="M8 21h8M12 17v4"/></svg><b>La machine</b></div>
-    <div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M12 3l8 4v5c0 5-3.4 8.2-8 9-4.6-.8-8-4-8-9V7z"/></svg><b>Sécurité</b></div>
-    <div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M21 12a8 8 0 1 1-3.2-6.4"/><path d="M3 20l1.6-4.2"/><path d="M21 4v5h-5"/></svg><b>Communiquer</b></div>
-    <div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M4 4h16v16H4z"/><path d="M8 9h8M8 13h8M8 17h5"/></svg><b>Produire</b></div>
-  </div>
-</section>
+</header>
+
+<main class="contenu contenu--large">
+
+  <p class="chapeau">Version enseignant, avec les attendus, les moments d'évaluation et les notes de conduite. Ne pas projeter. La version destinée aux élèves est <a href="index.html">ici</a>.</p>
+
+  <ul class="apercu">
+    <li><svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="13" rx="2"/><path d="M8 21h8M12 17v4"/></svg><span>La machine</span></li>
+    <li><svg viewBox="0 0 24 24"><path d="M12 3l8 4v5c0 5-3.4 8.2-8 9-4.6-.8-8-4-8-9V7z"/></svg><span>Sécurité</span></li>
+    <li><svg viewBox="0 0 24 24"><path d="M21 12a8 8 0 1 1-3.2-6.4"/><path d="M3 20l1.6-4.2"/><path d="M21 4v5h-5"/></svg><span>Communiquer</span></li>
+    <li><svg viewBox="0 0 24 24"><path d="M4 4h16v16H4z"/><path d="M8 9h8M8 13h8M8 17h5"/></svg><span>Produire</span></li>
+  </ul>
+
 
 <section class="dashboard">
   <div class="stat"><small>Blocs de 2 périodes</small><strong>35</strong></div>
@@ -207,7 +54,9 @@ footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:cente
 <div id="corps"></div>
 
 </main>
-<footer>Séquence annuelle, volet numérique FMTTN · Référentiel et programme SeGEC D/2025/7362/3/13 · M. Courcelle</footer>
+<footer class="pied">
+  <div class="pied__interieur">Séquence annuelle, volet numérique FMTTN · Référentiel et programme SeGEC D/2025/7362/3/13 · M. Courcelle</div>
+</footer>
 
 <script>
 "use strict";
@@ -287,9 +136,9 @@ MODULES.forEach(function(m){
       : '<div class="bloc vide" data-t="'+d.join(" ")+'">'+in_+'</div>';
   }).join("");
   var s=document.createElement("section");
-  s.className="module";
-  s.innerHTML='<div class="module-tete"><span class="p">Module '+m.n+' · '+m.periode+'</span><h2>'+m.titre+'</h2>'
-    +'<span class="champ">'+m.champ+'</span></div><p class="module-note">'+m.note+'</p>'
+  s.className="partie";
+  s.innerHTML='<div class="partie-tete"><span class="p">Module '+m.n+' · '+m.periode+'</span><h2>'+m.titre+'</h2>'
+    +'<span class="champ">'+m.champ+'</span></div><p class="partie-note">'+m.note+'</p>'
     +'<div class="blocs">'+cartes+'</div>';
   corps.appendChild(s);
 });
diff --git a/FEUILLE-DE-ROUTE-CLAUDE-CHAT.md b/FEUILLE-DE-ROUTE-CLAUDE-CHAT.md
index 985f429..3463b93 100644
--- a/FEUILLE-DE-ROUTE-CLAUDE-CHAT.md
+++ b/FEUILLE-DE-ROUTE-CLAUDE-CHAT.md
@@ -7,8 +7,9 @@
 > le site ou son unité visuelle.
 >
 > **Conseil à l'enseignant :** joins à la conversation `assets/theme.css`, ainsi
-> que la feuille du gabarit choisi (`assets/exercices-commune.css` ou
-> `assets/atelier-texte.css`). Claude connaîtra ainsi les classes réelles.
+> que la feuille du gabarit choisi (`assets/exercices-commune.css`,
+> `assets/atelier-texte.css` ou `assets/numerique-1re.css`). Claude connaîtra
+> ainsi les classes réelles.
 
 ---
 
@@ -95,11 +96,53 @@ assets/                            ressources communes (ne pas toucher)
 |---|---|---|
 | Théorie courte + série d'exercices corrigés automatiquement, avec compteur de score | **A — Exercices** | `2e-commune/module1/` |
 | Cours à lire, long, avec démonstrations, quiz et exercices intégrés au texte | **B — Document long** | `3tq-technique-sociale/module1/` |
+| Séance projetée, minutée, avec un rail d'activités et une page de pilotage enseignant | **C — Séance projetée** | `1re-numerique/` |
 
 Le gabarit **A** est à privilégier : ses exercices sont décrits en données, sans
 code à écrire. Le gabarit **B** convient au traitement de texte et à tout
 contenu surtout textuel.
 
+### Gabarit C, la séance projetée (1re tronc commun)
+
+Cette classe suit une organisation particulière, déjà en place : **pas de
+sous-dossiers de module**, les pages vivent à plat dans `1re-numerique/`, et
+chaque séance existe en deux versions.
+
+| Fichier | Public |
+|---|---|
+| `index.html` | élèves — le menu de l'année, les 35 cours en six parties |
+| `1TC-NUM_bloc-NN_<sujet>.html` | élèves — la séance, projetée au tableau |
+| `pilotage.html` | enseignant — les 35 blocs avec attendus et évaluations |
+| `1TC-NUM_bloc-NN_pilotage.html` | enseignant — la conduite de la séance |
+
+Pour produire une nouvelle séance, **copier le squelette d'une séance
+existante** (`1TC-NUM_bloc-01_ouvrir-le-cours.html`) : sa tête de page, son
+en-tête, son rail d'activités et son pied sont déjà conformes. Les feuilles à
+charger sont `../assets/theme.css` puis `../assets/numerique-1re.css` (un seul
+niveau de `../`, les pages étant à plat).
+
+Composants propres à ce gabarit, tous déjà stylés : `.dashboard`/`.stat`,
+`.chrono`/`.pendule`/`.ecart`, `.navtabs`/`.tab`/`.panel`, `.card`,
+`.carte-entete`, `.consigne`, `.info`, `.accordeon`/`.item`, `.qcard`,
+`.steps`/`.step`, `.trace`, `.check`, `table.grille`, `.progres`/`.barre`,
+`.q`, `.btn`, `.etiquettes`/`.etiquette`, `.apercu`, et, pour les pages de
+pilotage, `.filtres`, `.partie`/`.partie-tete`/`.partie-note`, `.blocs`/`.bloc`.
+
+Trois pièges propres à ce gabarit :
+
+- **`.entete` appartient au thème** (l'en-tête de page). L'en-tête interne
+  d'une carte s'appelle `.carte-entete`.
+- **`.module` appartient au thème** (carte de module). Une partie de l'année
+  s'appelle `.partie`.
+- Dans les schémas SVG, les couleurs vives **encodent des catégories**
+  (entrée, sortie, les deux, matériel, logiciel). Les garder telles quelles ;
+  seuls les neutres passent aux jetons du thème (`var(--encre)`,
+  `var(--encre-douce)`, `var(--papier)`, `var(--trait-fort)`).
+
+Après avoir ajouté une séance, inscrire son `href` dans le tableau `MODULES`
+de `index.html` et dans celui de `pilotage.html` : la carte du bloc devient
+alors un lien au lieu d'un cadre en pointillés.
+
 ---
 
 ## 5. Jetons et composants disponibles (`assets/theme.css`)
diff --git a/LISEZMOI.md b/LISEZMOI.md
index 323ec96..012c343 100644
--- a/LISEZMOI.md
+++ b/LISEZMOI.md
@@ -21,6 +21,12 @@ assets/                       ressources communes à toute la plateforme
 Classes en place : `1re-numerique`, `2e-differenciee`, `2e-commune`,
 `3tq-technique-sociale`, `4tq-agent-education`.
 
+Exception assumée : **`1re-numerique` range ses pages à plat**, sans dossier de
+module, parce que la séquence est annuelle (35 séances en six parties) et que
+chaque séance existe en deux versions, élève et enseignant. Son `index.html`
+est à la fois l'index de la classe et le menu de l'année. La version enseignant
+part de `pilotage.html`, qui n'est volontairement liée depuis aucune page élève.
+
 Tous les liens internes sont **relatifs**. Ne jamais écrire `/assets/theme.css`
 mais `../assets/theme.css` : un chemin absolu casserait le site dès qu'il n'est
 pas servi à la racine du domaine, et depuis une clé USB.
diff --git a/assets/numerique-1re.css b/assets/numerique-1re.css
new file mode 100644
index 0000000..8eb5dde
--- /dev/null
+++ b/assets/numerique-1re.css
@@ -0,0 +1,804 @@
+/* ==================================================================
+   Formation numérique — 1re tronc commun
+   Chargé après assets/theme.css, dont il reprend toutes les couleurs.
+   ------------------------------------------------------------------
+   Deux familles de pages partagent cette feuille :
+     - les pages de cours, projetées et suivies par les élèves ;
+     - les pages de pilotage, réservées à l'enseignant.
+   Composants issus de la maquette d'origine, rebranchés sur les
+   jetons de la plateforme. Deux classes ont été renommées pour ne pas
+   entrer en conflit avec le thème : .entete est devenue .carte-entete,
+   et .module est devenue .partie.
+   ================================================================== */
+
+/* ------------------------------------------------------------------
+   Alias de compatibilité
+   La maquette d'origine nommait ses couleurs --ink, --line, --blue…
+   Les pages en gardent quelques-unes dans des styles en ligne et dans
+   les schémas. Ces alias les font retomber sur les jetons du thème,
+   sans avoir à réécrire chaque attribut.
+   À terme, écrire directement les jetons de la plateforme.
+------------------------------------------------------------------ */
+.classe-tc {
+  --ink: var(--encre);
+  --muted: var(--encre-douce);
+  --blue: var(--accent-encre);
+  --navy: var(--encre);
+  --green: var(--juste);
+  --red: var(--erreur);
+  --card: var(--blanc);
+  --line: var(--trait);
+  --shadow: none;
+}
+
+/* ------------------------------------------------------------------
+   Colonne large : tableaux de bord, rail de six onglets, grilles de
+   cartes. Trop à l'étroit dans la colonne de lecture standard.
+------------------------------------------------------------------ */
+.contenu--large,
+.entete__interieur--large {
+  max-width: calc(74rem + 2 * var(--gouttiere));
+}
+
+/* ------------------------------------------------------------------
+   Titres : on reprend la chasse fixe de la plateforme, sans le filet
+   du thème qui n'a pas de sens à l'intérieur d'une carte.
+------------------------------------------------------------------ */
+.contenu h2,
+.contenu h3 {
+  font-family: var(--police-titre);
+  font-weight: 700;
+  color: var(--encre);      /* le thème colore h3 à l'accent : pas ici */
+  border: 0;
+  padding-top: 0;
+}
+
+/* Le thème borne les listes à la largeur de lecture : c'est ce qu'il
+   faut pour de la prose, pas pour une grille de cartes. */
+.apercu, .etiquettes, .blocs, .answer-grid, .check, .steps, .accordeon { max-width: none; }
+.card > h2:first-child,
+.card > h3:first-child { margin-top: 0; }
+.card h2 { font-size: 1.35rem; margin: 0 0 .2rem; letter-spacing: -.02em; }
+.card h3 { font-size: 1.05rem; margin: 1.4rem 0 .5rem; color: var(--encre); }
+
+/* ------------------------------------------------------------------
+   Chapeau, étiquettes et aperçu des activités
+   (ce que la maquette d'origine mettait dans sa bannière)
+------------------------------------------------------------------ */
+.etiquettes { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.4rem; padding: 0; list-style: none; }
+.etiquette {
+  background: var(--accent-fond);
+  color: var(--accent-encre);
+  border: 1px solid var(--accent);
+  border-radius: 999px;
+  padding: .2rem .7rem;
+  font-size: .8rem;
+  font-weight: 600;
+}
+.etiquette--alerte { background: var(--erreur-fond); border-color: var(--erreur); color: var(--erreur); }
+
+.apercu {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+  gap: .6rem;
+  margin: 0 0 1.6rem;
+  padding: 0;
+  list-style: none;
+}
+.apercu li {
+  background: var(--blanc);
+  border: 1px solid var(--trait);
+  border-top: .3rem solid var(--accent);
+  border-radius: .5rem;
+  padding: .9rem .7rem;
+  text-align: center;
+  font-weight: 600;
+  font-size: .9rem;
+  margin: 0;
+}
+.apercu svg {
+  display: block;
+  margin: 0 auto .4rem;
+  width: 1.7rem;
+  height: 1.7rem;
+  fill: none;
+  stroke: var(--accent-encre);
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+svg.i {
+  width: 1em; height: 1em; vertical-align: -.14em;
+  fill: none; stroke: currentColor;
+  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
+}
+
+/* ------------------------------------------------------------------
+   Tableau de bord de la séance
+------------------------------------------------------------------ */
+.dashboard {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: .7rem;
+  margin-bottom: 1.3rem;
+}
+.stat {
+  background: var(--blanc);
+  border: 1px solid var(--trait);
+  border-radius: .5rem;
+  padding: .8rem .9rem;
+}
+.stat small { color: var(--encre-douce); font-weight: 600; font-size: .78rem; }
+.stat strong {
+  display: block;
+  font-family: var(--police-titre);
+  font-size: 1.3rem;
+  font-weight: 700;
+  margin-top: .2rem;
+}
+.stat.ok strong { color: var(--juste); }
+
+/* ------------------------------------------------------------------
+   Chronomètre de pilotage
+------------------------------------------------------------------ */
+.chrono {
+  background: var(--encre);
+  color: var(--papier);
+  border-radius: .5rem;
+  padding: 1rem 1.1rem;
+  margin-bottom: 1.2rem;
+  display: grid;
+  gap: .8rem;
+}
+.chrono-haut { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; justify-content: space-between; }
+.pendule {
+  font-family: var(--police-titre);
+  font-size: 2rem;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+.pendule small {
+  display: block;
+  font-family: var(--police-texte);
+  font-size: .7rem;
+  font-weight: 600;
+  letter-spacing: .1em;
+  text-transform: uppercase;
+  opacity: .75;
+  margin-top: .35rem;
+}
+.ecart {
+  font-size: .88rem;
+  font-weight: 600;
+  padding: .55rem .9rem;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, .12);
+  border: 1px solid rgba(255, 255, 255, .28);
+  min-width: 15rem;
+  text-align: center;
+}
+.ecart.avance { background: var(--juste); border-color: var(--juste); color: #fff; }
+.ecart.retard { background: var(--erreur); border-color: var(--erreur); color: #fff; }
+.chrono .row button { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); color: var(--papier); }
+.chrono .row button:hover { background: rgba(255, 255, 255, .24); }
+.chrono .row button.go { background: var(--papier); border-color: var(--papier); color: var(--encre); }
+
+/* ------------------------------------------------------------------
+   Rail d'activités
+------------------------------------------------------------------ */
+.navtabs {
+  display: grid;
+  gap: .5rem;
+  background: var(--blanc);
+  border: 1px solid var(--trait);
+  border-radius: .5rem;
+  padding: .7rem;
+  margin-bottom: 1.2rem;
+}
+.navtabs.n6 { grid-template-columns: repeat(6, 1fr); }
+.tab {
+  font: inherit;
+  border: 2px solid var(--trait);
+  background: var(--blanc);
+  border-radius: .4rem;
+  padding: .7rem .6rem;
+  font-weight: 600;
+  font-size: .9rem;
+  cursor: pointer;
+  color: var(--encre);
+  text-align: left;
+  position: relative;
+}
+.tab span {
+  display: block;
+  font-size: .72rem;
+  font-weight: 600;
+  color: var(--encre-douce);
+  margin-top: .2rem;
+  font-variant-numeric: tabular-nums;
+}
+.tab:hover { border-color: var(--accent); }
+.tab.active { background: var(--encre); color: var(--papier); border-color: var(--encre); }
+.tab.active span { color: var(--papier); opacity: .75; }
+/* Activité prévue au programme du jour */
+.tab.prevue::after {
+  content: "";
+  position: absolute;
+  left: .7rem; right: .7rem; bottom: -2px;
+  height: 4px;
+  border-radius: 99px;
+  background: var(--cible);
+}
+
+.panel { display: none; }
+.panel.active { display: block; }
+
+/* ------------------------------------------------------------------
+   Cartes et blocs de texte
+------------------------------------------------------------------ */
+.card {
+  background: var(--blanc);
+  border: 1px solid var(--trait);
+  border-radius: .5rem;
+  padding: 1.3rem 1.4rem;
+  margin-bottom: 1rem;
+}
+.muted { color: var(--encre-douce); line-height: 1.6; }
+.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
+
+/* En-tête interne d'une carte : titre à gauche, durée à droite.
+   (Renommée depuis .entete, qui appartient au thème.) */
+.carte-entete {
+  display: flex;
+  justify-content: space-between;
+  gap: .9rem;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  margin-bottom: .9rem;
+}
+.carte-entete p { margin: .2rem 0 0; max-width: none; }
+
+.btn {
+  font: inherit;
+  border: 1px solid var(--accent-encre);
+  border-radius: .4rem;
+  padding: .5rem .95rem;
+  font-weight: 600;
+  font-size: .92rem;
+  cursor: pointer;
+  background: var(--accent-fond);
+  color: var(--accent-encre);
+}
+.btn:hover { background: var(--blanc); }
+.btn.primary { background: var(--accent-encre); border-color: var(--accent-encre); color: var(--papier); }
+.btn.primary:hover { background: var(--encre); border-color: var(--encre); }
+.btn.soft { background: var(--blanc); border-color: var(--trait-fort); color: var(--encre); }
+.btn.soft:hover { border-color: var(--encre); }
+.btn:disabled { opacity: .5; cursor: default; }
+
+.score {
+  display: inline-block;
+  background: var(--accent-fond);
+  color: var(--accent-encre);
+  border-radius: 999px;
+  padding: .3rem .75rem;
+  font-weight: 600;
+  font-size: .85rem;
+  white-space: nowrap;
+}
+.feedback { min-height: 1.9rem; margin-top: .8rem; font-weight: 600; }
+
+/* Consigne projetée : c'est l'élément le plus lu de la page. */
+.consigne {
+  background: var(--accent-fond);
+  border: 2px solid var(--accent);
+  border-radius: .5rem;
+  padding: 1.1rem 1.3rem;
+  font-size: 1.15rem;
+  font-weight: 600;
+  line-height: 1.45;
+  margin: 1rem 0;
+  max-width: none;
+}
+.consigne small {
+  display: block;
+  font-family: var(--police-titre);
+  text-transform: uppercase;
+  letter-spacing: .1em;
+  font-size: .7rem;
+  font-weight: 700;
+  color: var(--accent-encre);
+  margin-bottom: .5rem;
+}
+
+.info {
+  border-left: .25rem solid var(--trait-fort);
+  background: var(--papier);
+  border-radius: 0 .4rem .4rem 0;
+  padding: .8rem 1rem;
+  color: var(--encre-douce);
+  font-size: .95rem;
+  line-height: 1.6;
+  margin-top: 1rem;
+  max-width: none;
+}
+.info b { color: var(--encre); }
+.info.alerte { border-color: var(--erreur); background: var(--erreur-fond); color: var(--erreur); }
+.info.alerte b { color: var(--erreur); }
+
+/* ------------------------------------------------------------------
+   Saisie collective et tri en colonnes
+------------------------------------------------------------------ */
+.saisie { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
+.saisie input {
+  flex: 1;
+  min-width: 13rem;
+  padding: .65rem .8rem;
+  border: 2px solid var(--trait-fort);
+  border-radius: .4rem;
+}
+.saisie input:focus { border-color: var(--accent); outline: none; }
+.saisie select, .envoi select, .cases select {
+  font: inherit;
+  padding: .65rem .8rem;
+  border: 2px solid var(--trait-fort);
+  border-radius: .4rem;
+  font-weight: 600;
+}
+
+.colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .7rem; }
+.colonne {
+  border: 1px solid var(--trait);
+  border-radius: .5rem;
+  background: var(--papier);
+  min-height: 9rem;
+  padding: .8rem;
+}
+.colonne h3 {
+  font-size: .85rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0 0 .6rem;
+  padding-bottom: .5rem;
+  border-bottom: 1px solid var(--trait);
+  color: var(--accent-encre);
+}
+.colonne h3 em { font-style: normal; color: var(--encre-douce); font-size: .78rem; }
+.colonne ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; max-width: none; }
+.colonne li {
+  background: var(--blanc);
+  border: 1px solid var(--trait);
+  border-radius: .35rem;
+  padding: .4rem .6rem;
+  font-size: .88rem;
+  font-weight: 500;
+  display: flex;
+  justify-content: space-between;
+  gap: .4rem;
+  margin: 0;
+}
+.colonne li button { background: none; border: 0; color: var(--trait-fort); cursor: pointer; padding: 0 .2rem; font-weight: 700; }
+.colonne li button:hover { color: var(--erreur); }
+
+/* ------------------------------------------------------------------
+   Accordéon
+------------------------------------------------------------------ */
+.accordeon { display: grid; gap: .6rem; }
+.item { border: 1px solid var(--trait); border-radius: .5rem; background: var(--blanc); overflow: hidden; }
+.item > button {
+  font: inherit;
+  width: 100%;
+  display: flex;
+  gap: .8rem;
+  align-items: flex-start;
+  text-align: left;
+  background: none;
+  border: 0;
+  padding: .9rem 1.1rem;
+  cursor: pointer;
+  color: var(--encre);
+}
+.item > button:hover { background: var(--accent-fond); }
+.item .n {
+  width: 1.8rem; height: 1.8rem; flex: none;
+  border-radius: .35rem;
+  background: var(--accent-fond);
+  color: var(--accent-encre);
+  font-family: var(--police-titre);
+  font-weight: 700;
+  display: grid;
+  place-items: center;
+  font-size: .82rem;
+}
+.item .t { font-weight: 600; font-size: 1.02rem; flex: 1; }
+.item .plus {
+  color: var(--encre-douce);
+  font-size: .72rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: .08em;
+  padding-top: .3rem;
+}
+.item .corps { display: none; padding: 0 1.1rem 1rem 3.7rem; color: var(--encre-douce); line-height: 1.6; }
+.item.ouvert .corps { display: block; }
+.item.ouvert { border-color: var(--accent); }
+.item.ouvert .n { background: var(--accent-encre); color: var(--papier); }
+
+/* ------------------------------------------------------------------
+   Question projetée, avec réponse à dévoiler
+------------------------------------------------------------------ */
+.qcard {
+  border: 2px solid var(--accent);
+  border-radius: .5rem;
+  background: var(--accent-fond);
+  padding: 1.4rem 1.5rem;
+}
+.qtag {
+  display: inline-block;
+  background: var(--blanc);
+  color: var(--accent-encre);
+  border-radius: 999px;
+  padding: .25rem .7rem;
+  font-size: .75rem;
+  font-weight: 600;
+  margin-bottom: .6rem;
+}
+.qtag.cle { background: var(--cible-fond); color: var(--encre); border: 1px solid var(--cible); }
+.qtxt {
+  font-family: var(--police-titre);
+  font-size: 1.3rem;
+  font-weight: 700;
+  line-height: 1.3;
+  letter-spacing: -.02em;
+  margin-bottom: 1rem;
+}
+.answer-grid { display: grid; gap: .5rem; }
+.answer {
+  font: inherit;
+  border: 2px solid var(--trait-fort);
+  background: var(--blanc);
+  border-radius: .4rem;
+  padding: .6rem .85rem;
+  text-align: left;
+  font-weight: 600;
+}
+.answer.ok { border-color: var(--juste); background: var(--juste-fond); }
+.reveal { display: none; margin-top: 1rem; border-top: 2px dashed var(--accent); padding-top: .9rem; }
+.reveal.on { display: block; }
+.verdict { font-weight: 700; color: var(--juste); margin-bottom: .5rem; }
+
+/* ------------------------------------------------------------------
+   Étapes guidées
+------------------------------------------------------------------ */
+.steps { display: grid; gap: .6rem; }
+.step {
+  border: 1px solid var(--trait);
+  border-radius: .5rem;
+  background: var(--blanc);
+  padding: 1rem 1.2rem;
+  display: flex;
+  gap: .9rem;
+  align-items: flex-start;
+  opacity: .45;
+}
+.step.on { opacity: 1; border-color: var(--accent); }
+.step.fait { opacity: 1; }
+.step .n {
+  width: 2.1rem; height: 2.1rem; flex: none;
+  border-radius: .4rem;
+  background: var(--papier);
+  color: var(--encre-douce);
+  font-family: var(--police-titre);
+  font-weight: 700;
+  display: grid;
+  place-items: center;
+}
+.step.on .n { background: var(--accent-encre); color: var(--papier); }
+.step.fait .n { background: var(--juste-fond); color: var(--juste); }
+.step h3 { margin: 0 0 .2rem; font-size: 1.05rem; }
+.step p { margin: 0; color: var(--encre-douce); font-size: .95rem; line-height: 1.55; max-width: none; }
+
+/* ------------------------------------------------------------------
+   Figures et schémas
+------------------------------------------------------------------ */
+figure { margin: 0 0 1.1rem; max-width: none; }
+figure svg {
+  width: 100%;
+  height: auto;
+  display: block;
+  background: var(--blanc);
+  border: 1px solid var(--trait);
+  border-radius: .5rem;
+}
+figcaption { font-size: .88rem; color: var(--encre-douce); margin-top: .6rem; line-height: 1.55; }
+.figpetit { max-width: 35rem; margin: 0 auto .9rem; }
+
+/* ------------------------------------------------------------------
+   Trace écrite à recopier
+------------------------------------------------------------------ */
+.trace {
+  border: 2px solid var(--accent);
+  background: var(--accent-fond);
+  border-radius: .5rem;
+  padding: 1.5rem 1.7rem;
+  font-size: 1.1rem;
+  line-height: 1.85;
+}
+.trace h3 { margin: 0 0 .7rem; font-size: 1.25rem; }
+.trace p { margin: 0 0 .5em; max-width: none; }
+.trace code { background: var(--blanc); border: 1px solid var(--accent); border-radius: .25rem; padding: .05rem .4rem; font-size: .92em; }
+
+/* ------------------------------------------------------------------
+   Liste à cocher
+------------------------------------------------------------------ */
+.check { display: grid; gap: .5rem; }
+.check label {
+  display: flex;
+  gap: .8rem;
+  align-items: flex-start;
+  border: 1px solid var(--trait);
+  border-radius: .45rem;
+  background: var(--blanc);
+  padding: .8rem 1rem;
+  cursor: pointer;
+  font-weight: 500;
+}
+.check label:hover { border-color: var(--accent); }
+.check input { width: 1.2rem; height: 1.2rem; margin-top: .15rem; accent-color: var(--juste); flex: none; }
+.check input:checked + span { color: var(--juste); font-weight: 600; }
+
+/* ------------------------------------------------------------------
+   Grille de correction
+------------------------------------------------------------------ */
+table.grille { width: 100%; border-collapse: collapse; font-size: .92rem; max-width: none; }
+table.grille th, table.grille td { border: 1px solid var(--trait); padding: .6rem .8rem; text-align: left; }
+table.grille th {
+  background: var(--papier);
+  font-family: var(--police-titre);
+  font-weight: 700;
+  font-size: .75rem;
+  text-transform: uppercase;
+  letter-spacing: .06em;
+  color: var(--encre-douce);
+  border-bottom: 1px solid var(--trait);
+}
+table.grille td.masque { color: transparent; background: var(--papier); }
+table.grille tr.on td { background: var(--juste-fond); }
+table.grille td b { color: var(--juste); }
+
+/* ------------------------------------------------------------------
+   Progression et questions rapides
+------------------------------------------------------------------ */
+.progres {
+  position: sticky;
+  top: 0;
+  z-index: 40;
+  background: var(--blanc);
+  border: 1px solid var(--trait);
+  border-radius: 0 0 .5rem .5rem;
+  padding: .7rem 1.1rem;
+  margin-bottom: 1.2rem;
+  display: flex;
+  gap: .9rem;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.barre { flex: 1; min-width: 11rem; height: .6rem; background: var(--accent-fond); border-radius: 99px; overflow: hidden; }
+.barre i { display: block; height: 100%; width: 0; background: var(--juste); border-radius: 99px; transition: width .25s; }
+
+.q { border: 1px solid var(--trait); border-radius: .5rem; background: var(--blanc); padding: .9rem 1rem; margin-bottom: .6rem; }
+.q.bon { border-color: var(--juste); background: var(--juste-fond); }
+.q.faux { border-color: var(--cible); background: var(--cible-fond); }
+.q .txt { font-weight: 600; margin-bottom: .6rem; font-size: 1.02rem; }
+.q .opts { display: flex; gap: .5rem; flex-wrap: wrap; }
+.q .opts button {
+  font: inherit;
+  border: 2px solid var(--trait-fort);
+  background: var(--blanc);
+  border-radius: .4rem;
+  padding: .5rem .85rem;
+  font-weight: 600;
+  cursor: pointer;
+  color: var(--encre);
+}
+.q .opts button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-encre); }
+.q .opts button:disabled { cursor: default; opacity: .55; }
+.q .opts button.pick { border-color: var(--juste); background: var(--juste-fond); color: var(--juste); opacity: 1; }
+.q .opts button.rate { border-color: var(--cible); background: var(--cible-fond); color: var(--encre); opacity: 1; }
+.q .expl {
+  display: none;
+  margin-top: .6rem;
+  font-size: .93rem;
+  color: var(--encre-douce);
+  line-height: 1.55;
+  border-left: 3px solid var(--trait-fort);
+  padding-left: .8rem;
+}
+.q.done .expl { display: block; }
+
+#bilan { display: none; }
+#bilan.on { display: block; }
+.gros { font-family: var(--police-titre); font-size: 2.6rem; font-weight: 700; line-height: 1; color: var(--accent-encre); }
+
+textarea {
+  width: 100%;
+  min-height: 7rem;
+  border: 2px solid var(--trait-fort);
+  border-radius: .4rem;
+  padding: .7rem;
+  font: inherit;
+  font-size: .9rem;
+  resize: vertical;
+}
+
+/* ------------------------------------------------------------------
+   Tri de fichiers (cours 3)
+------------------------------------------------------------------ */
+.fichiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .6rem; margin: .9rem 0; }
+.fic {
+  font: inherit;
+  border: 2px solid var(--trait-fort);
+  background: var(--blanc);
+  border-radius: .45rem;
+  padding: .7rem .85rem;
+  text-align: left;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: .9rem;
+  overflow-wrap: anywhere;
+  min-width: 0;
+  color: var(--encre);
+}
+.fic small { display: block; font-weight: 500; color: var(--encre-douce); margin-top: .2rem; font-size: .82rem; }
+.fic b { display: block; font-family: var(--police-titre); font-size: 1.15rem; color: var(--accent-encre); margin-bottom: .15rem; }
+.fic:hover { border-color: var(--accent); }
+.fic.pris { opacity: .25; cursor: default; }
+.fic.rate { border-color: var(--cible); background: var(--cible-fond); }
+
+.rangee {
+  display: flex; gap: .4rem; flex-wrap: wrap;
+  min-height: 3.4rem;
+  border: 2px dashed var(--trait-fort);
+  border-radius: .45rem;
+  padding: .5rem;
+  align-items: center;
+}
+.rangee .pas { background: var(--juste-fond); color: var(--juste); border-radius: .35rem; padding: .45rem .6rem; font-weight: 600; font-size: .88rem; }
+.etape3 { display: none; }
+.etape3.on { display: block; }
+
+/* ------------------------------------------------------------------
+   Plan du réseau (cours 4)
+------------------------------------------------------------------ */
+#plan svg { width: 100%; height: auto; display: block; background: var(--blanc); border: 1px solid var(--trait); border-radius: .5rem; }
+#plan .allume rect, #plan rect.allume { stroke: var(--erreur) !important; stroke-width: 5 !important; }
+#plan line.allume { stroke: var(--erreur) !important; stroke-width: 7 !important; }
+#plan .panne rect { fill: var(--erreur-fond) !important; stroke: var(--erreur) !important; stroke-dasharray: 6 4; }
+
+.envoi { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin: .9rem 0; }
+.journal { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .35rem; max-width: none; }
+.journal li {
+  background: var(--papier);
+  border: 1px solid var(--trait);
+  border-radius: .4rem;
+  padding: .55rem .8rem;
+  font-weight: 500;
+  margin: 0;
+}
+.journal li.stop { background: var(--erreur-fond); border-color: var(--erreur); color: var(--erreur); }
+.journal li b { color: var(--accent-encre); }
+
+.cases { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; margin-top: .8rem; }
+.cases label { font-weight: 600; font-size: .8rem; color: var(--encre-douce); display: grid; gap: .3rem; }
+.cases select.ok { border-color: var(--juste); background: var(--juste-fond); }
+.cases select.ko { border-color: var(--cible); background: var(--cible-fond); }
+.cache { display: none; }
+.cache.on { display: block; }
+
+/* ------------------------------------------------------------------
+   Pages de pilotage : filtres et parties de l'année
+   (.partie remplace .module, qui appartient au thème)
+------------------------------------------------------------------ */
+.filtres {
+  display: flex;
+  gap: .5rem;
+  flex-wrap: wrap;
+  align-items: center;
+  background: var(--blanc);
+  border: 1px solid var(--trait);
+  border-radius: .5rem;
+  padding: .7rem;
+  margin-bottom: 1.2rem;
+}
+.filtres .compte { margin-left: auto; font-weight: 600; color: var(--encre-douce); font-size: .88rem; }
+
+.partie { margin-bottom: 2rem; }
+.partie-tete { display: flex; gap: .8rem; align-items: baseline; flex-wrap: wrap; margin-bottom: .4rem; }
+.partie-tete h2 { margin: 0; font-size: 1.35rem; letter-spacing: -.02em; }
+.partie-tete .p {
+  background: var(--encre);
+  color: var(--papier);
+  border-radius: 999px;
+  padding: .25rem .75rem;
+  font-family: var(--police-titre);
+  font-size: .72rem;
+  font-weight: 700;
+}
+.partie-tete .champ { color: var(--encre-douce); font-size: .88rem; margin-left: auto; }
+.partie-note { color: var(--encre-douce); line-height: 1.6; margin: 0 0 1rem; max-width: 76ch; }
+
+.blocs { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: .7rem; }
+.bloc {
+  border: 1px solid var(--trait);
+  border-radius: .5rem;
+  background: var(--blanc);
+  padding: 1rem 1.15rem;
+  display: flex;
+  gap: .9rem;
+  align-items: flex-start;
+  text-decoration: none;
+  color: inherit;
+}
+.bloc .n {
+  width: 2.4rem; height: 2.4rem; flex: none;
+  border-radius: .45rem;
+  background: var(--papier);
+  color: var(--encre-douce);
+  font-family: var(--police-titre);
+  font-weight: 700;
+  display: grid;
+  place-items: center;
+  font-size: 1rem;
+}
+/* Le bloc de texte occupe toute la place restante à droite du numéro,
+   sinon il se recentre quand le titre passe sur deux lignes. */
+.bloc > div { flex: 1; min-width: 0; text-align: left; }
+.bloc h3 { margin: 0 0 .25rem; font-size: 1.02rem; line-height: 1.3; }
+.bloc .att { font-size: .82rem; color: var(--encre-douce); font-weight: 500; }
+.ets { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .6rem; }
+.et {
+  font-size: .7rem;
+  font-weight: 600;
+  border-radius: 999px;
+  padding: .2rem .55rem;
+  background: var(--papier);
+  border: 1px solid var(--trait);
+  color: var(--encre-douce);
+}
+.et.eval { background: var(--erreur-fond); border-color: var(--erreur); color: var(--erreur); }
+.et.fac { background: var(--cible-fond); border-color: var(--cible); color: var(--encre); }
+.et.pret { background: var(--juste-fond); border-color: var(--juste); color: var(--juste); }
+
+/* Une carte de bloc qui mène quelque part se distingue nettement
+   d'un bloc encore à écrire. */
+a.bloc { border-top: .3rem solid var(--accent); }
+a.bloc:hover { border-color: var(--accent); }
+a.bloc .n { background: var(--accent-encre); color: var(--papier); }
+.bloc.vide { border-style: dashed; opacity: .7; }
+.bloc.vide h3 { font-weight: 600; }
+
+.masque { display: none !important; }
+
+/* ------------------------------------------------------------------
+   Petits écrans
+------------------------------------------------------------------ */
+@media (max-width: 62rem) {
+  .dashboard { grid-template-columns: repeat(2, 1fr); }
+  .navtabs.n6 { grid-template-columns: repeat(3, 1fr); }
+}
+@media (max-width: 40rem) {
+  .dashboard { grid-template-columns: 1fr; }
+  .navtabs.n6 { grid-template-columns: repeat(2, 1fr); }
+  .blocs { grid-template-columns: 1fr; }
+  .ecart { min-width: 0; flex: 1; }
+  .filtres .compte { margin-left: 0; width: 100%; }
+  .cases { grid-template-columns: 1fr 1fr; }
+}
+
+@media print {
+  .chrono, .navtabs, .filtres, .saisie, .progres { display: none; }
+  .panel { display: block !important; }
+}
