formation numérique

2026-09-23 08:48:37 +02:00
parent a489298897
commit d92d043f9d
13 changed files with 7199 additions and 61 deletions
@@ -0,0 +1,751 @@
+<!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>
+</head>
+<body>
+<main>
+
+<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>
+    <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>
+  </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>
+
+<section class="dashboard">
+  <div class="stat"><small>Activité en cours</small><strong id="sPhase">1 sur 6</strong></div>
+  <div class="stat"><small>Temps depuis le début</small><strong id="sTemps">00:00</strong></div>
+  <div class="stat"><small>Il reste pour cette activité</small><strong id="sReste">–</strong></div>
+  <div class="stat"><small>Exercices répondus</small><strong id="sEx">0 sur 20</strong></div>
+</section>
+
+<div class="card" style="padding:16px 18px">
+  <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>
+  </div>
+</div>
+
+<nav class="navtabs n6" id="rail"></nav>
+
+<!-- 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>
+  <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>
+<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"/>
+<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>
+<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"/>
+<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>
+<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"/>
+<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>
+</g></svg></figure>
+  <div class="accordeon" id="regles"></div>
+  <h3 style="margin-top:22px">Les trois manches</h3>
+  <div class="steps" id="manches"></div>
+  <div class="row" style="margin-top:12px"><button class="btn soft" id="maPrec">Manche précédente</button><button class="btn primary" id="maSuiv">Manche suivante</button></div>
+</div></section>
+
+<!-- 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="envoi">
+    <label>De <select id="de"></select></label>
+    <label>vers <select id="vers"></select></label>
+    <button class="btn primary" id="envoyer">Envoyer</button>
+    <button class="btn soft" id="panne">Mettre le routeur 2 en panne</button>
+  </div>
+  <div id="plan"><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 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>
+<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"/>
+<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>
+<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"/>
+<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>
+<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"/>
+<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>
+</g></svg></div>
+  <ol class="journal" id="journal"></ol>
+</div>
+
+<div class="card">
+  <h2>Je comprends. Le réseau et le trajet d'un message</h2>
+  <p class="muted">On lit cette page ensemble. Elle est dans ton livret.</p>
+
+  <h3>Le réseau</h3>
+  <p>Un <b>réseau</b>, ce sont des appareils reliés entre eux pour échanger des informations. Le réseau d'un seul lieu, une maison, une école, s'appelle un <b>réseau local</b>. Dans le jeu, chaque groupe de tables.</p>
+
+  <h3>La connexion</h3>
+  <p>La <b>connexion</b> relie un appareil au réseau : par un <b>câble réseau</b>, ou par le <b>wifi</b>, sans fil. La connexion, c'est la route. Mais une route ne sert à rien si on ne sait pas où aller.</p>
+
+  <h3>L'adresse IP</h3>
+  <p>Chaque appareil connecté a une <b>adresse IP</b> : <b>quatre nombres séparés par des points</b>, comme 10.0.2.3. <b>Sans adresse, un message ne sait pas où aller, et une réponse ne sait pas où revenir.</b> C'est pour ça qu'il fallait écrire l'adresse du destinataire et la sienne.</p>
+  <p>Les premiers nombres indiquent <b>le réseau</b>, le dernier désigne <b>l'appareil</b>. L'adresse de ton poste lui est donnée par le réseau quand il se connecte.</p>
+
+  <h3>Le routeur</h3>
+  <p>Le <b>routeur</b> relie un réseau local aux autres réseaux. Il lit l'adresse de chaque message et l'envoie dans la bonne direction, sans lire le message lui-même. À la maison, il est caché dans la <b>box</b> du <b>fournisseur d'accès</b>.</p>
+  <p><b>Si le routeur tombe en panne</b>, les appareils restent reliés entre eux, mais plus rien ne sort ni n'entre. C'est ce qui est arrivé au réseau 2.</p>
+
+  <h3>Internet et le serveur</h3>
+  <p><b>Internet, c'est le réseau des réseaux</b> : des millions de réseaux reliés par des routeurs. Dans le jeu, l'allée centrale. Un <b>serveur</b> est un ordinateur toujours allumé qui conserve des fichiers et des sites. Dans le jeu, le bureau du professeur.</p>
+
+  <div class="consigne"><small>Le trajet complet, en cinq étapes</small>
+    <b>1.</b> Je me connecte au réseau local, par câble ou par wifi.<br>
+    <b>2.</b> Je reçois une adresse IP, donnée par le routeur.<br>
+    <b>3.</b> Ma demande part sur Internet, de routeur en routeur.<br>
+    <b>4.</b> Elle arrive au serveur qui conserve le site.<br>
+    <b>5.</b> Le serveur renvoie la page par le même chemin, jusqu'à mon adresse.</div>
+</div>
+
+<div class="card">
+  <h3>Je m'entraine tout de suite</h3>
+  <p class="muted" style="margin-top:0">Quel est le vrai mot pour chaque rôle du jeu ?</p>
+  <table class="grille" id="tabRoles"></table>
+  <div class="row" style="margin-top:12px"><button class="btn primary" id="roleSuiv">Révéler le mot suivant</button><button class="btn soft" id="roleReset">Tout masquer</button></div>
+</div>
+</section>
+
+<!-- 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="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>
+    Lis ton adresse dans les <b>paramètres</b> de ton poste, jamais sur un site web. Et ignore la ligne IPv6, longue, avec des lettres : c'est une autre façon d'écrire les adresses.</div>
+  <div class="row"><button class="btn" id="constat">Ce qu'on constate</button></div>
+  <div class="consigne cache" id="constatTxt" style="margin-top:14px"><small>Ce qu'on constate</small>
+    Les deux adresses commencent de la même façon et finissent différemment. Le <b>début</b> désigne le <b>réseau</b>, le même pour les deux postes. La <b>fin</b> désigne l'<b>appareil</b>, différent pour chacun.</div>
+</div></section>
+
+<!-- 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>
+  <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>
+<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="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)"/>
+<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)"/>
+<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"/>
+<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>
+</g></svg></figure>
+  <div class="cases" id="cases"></div>
+  <div class="row" style="margin-top:14px"><button class="btn primary" id="verifier">Vérifier</button><button class="btn soft" id="casesReset">Recommencer</button></div>
+  <p class="feedback" id="casesMsg"></p>
+</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="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">
+    <div class="barre"><i id="jauge"></i></div>
+    <span class="score" id="avancement">0 / 20</span>
+  </div>
+  <h3>Exercice 1. Le bon mot</h3><div id="ex1"></div>
+  <h3 style="margin-top:26px">Exercice 2. Le trajet</h3><div id="ex2"></div>
+  <h3 style="margin-top:26px">Exercice 3. Vrai ou faux</h3><div id="ex3"></div>
+  <h3 style="margin-top:26px">Exercice 4. Le défi</h3>
+  <p class="muted" style="margin-top:0">Des situations que tu n'as pas vues. Sers-toi des règles du jeu.</p>
+  <div id="ex4"></div>
+  <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 class="muted" id="gMot" style="font-weight:800;font-size:18px"></div>
+    </div>
+    <div id="gDetail" style="margin-bottom:16px"></div>
+    <p class="muted"><b>Recopie ces deux lignes dans ton livret.</b></p>
+    <textarea id="recap" readonly></textarea>
+    <div class="row" style="margin-top:10px"><button class="btn" id="copier">Copier</button><span class="muted" id="copie"></span></div>
+  </div>
+</div>
+</section>
+
+<!-- 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>
+  <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>
+    <b>Le web, ce sont les magasins</b> le long des routes : les sites, avec leurs pages reliées par des liens.<br>
+    <b>Le navigateur, c'est ton vélo</b> : le moyen d'aller de magasin en magasin. Chrome, Firefox, Edge, Safari.</div>
+  <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>
+<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"/>
+<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"/>
+<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"/>
+<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"/>
+<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>
+</g></svg></figure>
+  <div class="consigne"><small>Le test</small><b>Est-ce que j'utilise un navigateur pour afficher des pages ?</b> Si oui, c'est le web. Si c'est une application, un jeu ou une console, c'est Internet, mais pas le web.</div>
+  <p><b>Et Google ?</b> Ce n'est ni Internet, ni le web, ni un navigateur : c'est un site web qui sert à chercher d'autres sites. Chrome est le navigateur fabriqué par la même entreprise, d'où la confusion.</p>
+</div>
+<div class="card">
+  <h3>Web ou pas web ?</h3>
+  <p class="muted" style="margin-top:0">On répond ensemble.</p>
+  <div id="ex5"></div>
+</div>
+</section>
+
+<!-- 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="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>
+    <span class="score" id="motCompte">0 mot sur 8</span>
+  </div>
+  <div class="trace" id="trace"></div>
+  <div class="consigne" style="margin-top:18px;margin-bottom:0"><small>Avant de partir</small>Rends ton badge. Ferme ta session.</div>
+</div>
+<div class="card">
+  <h3>Mon lexique du cours 4</h3>
+  <p class="muted" style="margin-top:0">Les mêmes définitions que dans ton livret. Clique sur un mot pour l'ouvrir.</p>
+  <div class="accordeon" id="lexique"></div>
+</div>
+</section>
+
+</main>
+<footer>Cours 4 · Formation numérique · 1re année · M. Courcelle</footer>
+
+<script>
+"use strict";
+var PHASES=[{t:"Le jeu du courrier",d:15,a:0},{t:"Les vrais mots",d:20,a:15},{t:"Mon adresse",d:20,a:35},
+ {t:"Le trajet",d:25,a:55},{t:"Internet et le web",d:15,a:80},{t:"Ma trace écrite",d:5,a:95}];
+
+/* ---------- chrono et onglets ---------- */
+var t0=null,tick=null,choisie=0,ecart=document.getElementById("ecart"),rail=document.getElementById("rail");
+function d2(n){return (n<10?"0":"")+n;}
+function minutes(){return t0?(Date.now()-t0)/60000:0;}
+function dessineRail(){rail.innerHTML="";PHASES.forEach(function(p,i){var b=document.createElement("button");b.className="tab"+(i===choisie?" active":"");b.innerHTML=(i+1)+". "+p.t+"<span>"+p.d+" min</span>";b.onclick=function(){montre(i);};rail.appendChild(b);});document.getElementById("sPhase").textContent=(choisie+1)+" sur 6";ecart.textContent="Activité "+(choisie+1)+" · "+PHASES[choisie].t;majReste();}
+function montre(i){choisie=i;for(var k=0;k<PHASES.length;k++){document.getElementById("p"+k).classList.toggle("active",k===i);}dessineRail();try{window.scrollTo({top:0,behavior:"smooth"});}catch(e){}}
+function majReste(){var e=document.getElementById("sReste");if(!t0){e.textContent="–";return;}var r=Math.ceil(PHASES[choisie].a+PHASES[choisie].d-minutes());e.textContent=r>0?(r+" min"):"terminé";}
+function rafraichit(){var s=Math.floor((Date.now()-t0)/1000);document.getElementById("sTemps").textContent=d2(Math.floor(s/60))+":"+d2(s%60);majReste();}
+document.getElementById("btnGo").onclick=function(){if(t0)return;t0=Date.now();this.textContent="En cours";tick=setInterval(rafraichit,1000);rafraichit();};
+document.getElementById("btnStop").onclick=function(){clearInterval(tick);t0=null;document.getElementById("sTemps").textContent="00:00";document.getElementById("sReste").textContent="–";document.getElementById("btnGo").textContent="Démarrer";};
+
+function accordeon(zone,liste,plus){
+  liste.forEach(function(e,i){
+    var d=document.createElement("div");d.className="item";
+    d.innerHTML='<button aria-expanded="false"><span class="n">'+(plus==="règle"?(i+1):e[0].charAt(0))+'</span><span class="t">'+e[0]+'</span><span class="plus">'+plus+'</span></button><div class="corps">'+e[1]+'</div>';
+    d.querySelector("button").onclick=function(){var o=d.classList.toggle("ouvert");this.setAttribute("aria-expanded",o?"true":"false");this.querySelector(".plus").textContent=o?"masquer":plus;};
+    zone.appendChild(d);
+  });
+}
+function etapesPasAPas(zoneId,precId,suivId,data){
+  var i=0,z=document.getElementById(zoneId);
+  function dessine(){z.innerHTML="";data.forEach(function(e,k){var d=document.createElement("div");d.className="step"+(k===i?" on":"")+(k<i?" fait":"");d.innerHTML='<span class="n">'+(k+1)+'</span><div><h3>'+e[0]+'</h3><p>'+(k<=i?e[1]:"")+'</p></div>';z.appendChild(d);});}
+  document.getElementById(suivId).onclick=function(){if(i<data.length-1){i++;dessine();}};
+  document.getElementById(precId).onclick=function(){if(i>0){i--;dessine();}};
+  dessine();
+}
+
+/* ---------- 1. le jeu ---------- */
+accordeon(document.getElementById("regles"),[
+ ["Tu ne remets ton message qu'au routeur de ton réseau","Jamais directement à un camarade, même s'il est à côté de toi."],
+ ["Tu écris deux adresses","Celle du destinataire, et la tienne : celle de l'expéditeur."],
+ ["Le routeur ne lit que le troisième nombre","Si c'est son réseau, il livre. Sinon, il passe le message au routeur du bon réseau, par l'allée centrale."],
+ ["Une adresse incomplète ou inconnue finit à la corbeille","Le routeur ne devine pas."]],"règle");
+etapesPasAPas("manches","maPrec","maSuiv",[
+ ["Manche 1. Envoyer entre réseaux","Écris un message de cinq mots maximum à un camarade d'un autre réseau. N'oublie pas les deux adresses."],
+ ["Manche 2. Demander une page au serveur","Trois élèves demandent une page au serveur : la météo, une blague, un horaire. Le serveur répond."],
+ ["Manche 3. La panne","Le routeur du réseau 2 s'arrête. Que deviennent les messages ?"],
+ ["On fait le point","Retour à ta place. Livret, activité 1 : les deux questions."]]);
+
+/* ---------- 2. le reseau anime ---------- */
+var NOEUDS=[];
+[1,2,3].forEach(function(n){[0,1,2].forEach(function(k){NOEUDS.push({id:"p"+n+k,res:n,adr:"10.0."+n+"."+(k+2),nom:"Poste 10.0."+n+"."+(k+2)});});});
+var selDe=document.getElementById("de"),selVers=document.getElementById("vers");
+NOEUDS.forEach(function(o,i){selDe.add(new Option(o.adr,o.id));selVers.add(new Option(o.adr,o.id));});
+selVers.add(new Option("Serveur 10.0.9.1","srv"));
+selDe.value="p10";selVers.value="p32";
+var enPanne=false,anim=[];
+var plan=document.getElementById("plan");
+function el(id){return plan.querySelector("#"+id);}
+function efface(){plan.querySelectorAll(".allume").forEach(function(x){x.classList.remove("allume");});anim.forEach(clearTimeout);anim=[];document.getElementById("journal").innerHTML="";}
+function noeud(id){return NOEUDS.filter(function(o){return o.id===id;})[0];}
+function trajet(a,b){
+  var A=noeud(a),P=[],T=[];
+  P.push([a,"Le "+A.nom.toLowerCase()+" écrit les deux adresses et remet le message à son routeur."]);
+  P.push(["l_"+a,null]);
+  P.push(["r"+A.res,"Le <b>routeur</b> du réseau "+A.res+" lit l'<b>adresse IP</b> du destinataire."]);
+  if(b==="srv"){
+    P.push(["l_r"+A.res,null]);P.push(["net","Le message sort du réseau local et voyage sur <b>Internet</b>."]);
+    P.push(["l_srv",null]);P.push(["srv","Le <b>serveur</b> reçoit la demande et renvoie la page à l'adresse de l'expéditeur, par le même chemin."]);
+    return P;
+  }
+  var B=noeud(b);
+  if(A.res===B.res){P.push(["l_"+b,null]);P.push([b,"Même réseau : le routeur livre directement au "+B.nom.toLowerCase()+"."]);return P;}
+  P.push(["l_r"+A.res,null]);P.push(["net","Autre réseau : le message passe sur <b>Internet</b>, l'allée centrale."]);
+  P.push(["l_r"+B.res,null]);P.push(["r"+B.res,"Le <b>routeur</b> du réseau "+B.res+" reçoit le message et lit l'adresse."]);
+  P.push(["l_"+b,null]);P.push([b,"Il le livre au "+B.nom.toLowerCase()+". Arrivé."]);
+  return P;
+}
+document.getElementById("envoyer").onclick=function(){
+  efface();
+  var a=selDe.value,b=selVers.value;
+  if(a===b){document.getElementById("journal").innerHTML='<li class="stop">Choisis deux postes différents.</li>';return;}
+  var P=trajet(a,b),j=document.getElementById("journal"),t=0,bloque=false;
+  P.forEach(function(p){
+    if(bloque)return;
+    var estPanne=enPanne&&p[0]==="r2";
+    anim.push(setTimeout(function(){
+      var e=el(p[0]); if(e&&!estPanne)e.classList.add("allume");
+      if(estPanne){j.insertAdjacentHTML("beforeend",'<li class="stop">Le routeur du réseau 2 est en panne. Le message reste bloqué : rien n\'entre, rien ne sort du réseau 2.</li>');}
+      else if(p[1]){j.insertAdjacentHTML("beforeend","<li>"+p[1]+"</li>");}
+    },t));
+    t+=p[1]?850:350;
+    if(estPanne)bloque=true;
+  });
+};
+document.getElementById("panne").onclick=function(){
+  enPanne=!enPanne;el("r2").classList.toggle("panne",enPanne);
+  this.textContent=enPanne?"Réparer le routeur 2":"Mettre le routeur 2 en panne";efface();
+};
+
+var ROLES=[["Le badge avec quatre nombres","Adresse IP"],["L'élève qui lit l'adresse et oriente les messages","Routeur"],["L'allée centrale","Internet"],["Le bureau du professeur, qui fournit les pages","Serveur"],["Un groupe de tables","Réseau local"]];
+var ri=0;
+function dessineRoles(){var h="<tr><th>Dans le jeu</th><th>Le vrai mot</th></tr>";ROLES.forEach(function(r,i){h+="<tr"+(i<ri?' class="on"':"")+"><td>"+r[0]+"</td>"+(i<ri?"<td><b>"+r[1]+"</b></td>":'<td class="masque">.</td>')+"</tr>";});document.getElementById("tabRoles").innerHTML=h;}
+document.getElementById("roleSuiv").onclick=function(){if(ri<ROLES.length){ri++;dessineRoles();}};
+document.getElementById("roleReset").onclick=function(){ri=0;dessineRoles();};
+dessineRoles();
+
+/* ---------- 3. adresse du poste ---------- */
+etapesPasAPas("etapes","etprec","etsuiv",[
+ ["Ouvre les Paramètres","La roue dentée, puis « Réseau et Internet »."],
+ ["Ouvre ta connexion","Wi-Fi ou Ethernet, puis ses propriétés."],
+ ["Cherche la ligne « Adresse IPv4 »","C'est ton adresse IP. Note-la dans ton livret."],
+ ["Compare avec ton voisin","Quels nombres sont identiques ? Lesquels changent ?"]]);
+document.getElementById("constat").onclick=function(){document.getElementById("constatTxt").classList.toggle("on");};
+
+/* ---------- 4. schema a completer ---------- */
+var MOTS5=["adresse IP","connexion","routeur","Internet","serveur"];
+var zc=document.getElementById("cases");
+MOTS5.forEach(function(m,i){
+  var l=document.createElement("label");l.textContent="Case "+(i+1);
+  var s=document.createElement("select");s.add(new Option("choisir…",""));
+  ["adresse IP","connexion","Internet","routeur","serveur"].forEach(function(o){s.add(new Option(o,o));});
+  l.appendChild(s);zc.appendChild(l);
+});
+document.getElementById("verifier").onclick=function(){
+  var ok=0;zc.querySelectorAll("select").forEach(function(s,i){var b=s.value===MOTS5[i];s.classList.remove("ok","ko");if(s.value)s.classList.add(b?"ok":"ko");if(b)ok++;});
+  document.getElementById("casesMsg").textContent=ok===5?"Bravo, le trajet est complet.":ok+" case"+(ok>1?"s":"")+" sur 5. Suis le trajet dans l'ordre : le poste, le lien, l'appareil qui oriente, le réseau des réseaux, puis le serveur.";
+};
+document.getElementById("casesReset").onclick=function(){zc.querySelectorAll("select").forEach(function(s){s.value="";s.classList.remove("ok","ko");});document.getElementById("casesMsg").textContent="";};
+
+/* ---------- moteur de questions ---------- */
+var rep={},TOTAL=20;
+function poser(zone,cle,txt,opts,bon,expl,compte){
+  var d=document.createElement("div");d.className="q";
+  d.innerHTML='<div class="txt">'+txt+'</div><div class="opts"></div><div class="expl">'+expl+'</div>';
+  var z=d.querySelector(".opts");
+  opts.forEach(function(o,i){var b=document.createElement("button");b.textContent=o;
+    b.onclick=function(){if(rep[cle]!==undefined)return;rep[cle]=i;d.classList.add("done",i===bon?"bon":"faux");
+      z.querySelectorAll("button").forEach(function(x,j){x.disabled=true;if(j===bon)x.classList.add("pick");else if(j===i)x.classList.add("rate");});
+      if(compte)maj();};
+    z.appendChild(b);});
+  zone.appendChild(d);
+}
+function maj(){var n=Object.keys(rep).filter(function(k){return k.charAt(0)!=="z";}).length;document.getElementById("avancement").textContent=n+" / "+TOTAL;document.getElementById("jauge").style.width=(n/TOTAL*100)+"%";document.getElementById("sEx").textContent=n+" sur "+TOTAL;}
+
+var OPT1=["Réseau","Connexion","Adresse IP","Routeur"];
+var EX1=[["Des appareils reliés entre eux pour échanger des informations.",0,"C'est un réseau. Celui d'un seul lieu s'appelle un réseau local."],
+ ["Le lien entre un appareil et le réseau, par câble ou par wifi.",1,"C'est la connexion : la route qui mène au réseau."],
+ ["Quatre nombres qui identifient un appareil.",2,"C'est l'adresse IP, comme 10.0.2.3."],
+ ["L'appareil qui relie le réseau local aux autres réseaux.",3,"C'est le routeur. Il lit l'adresse et oriente le message."],
+ ["Chez toi, il est caché dans la box du fournisseur d'accès.",3,"La box contient un routeur, et aussi une borne wifi."],
+ ["Sans elle, la réponse ne sait pas où revenir.",2,"L'adresse IP de l'expéditeur. C'est pour ça qu'il fallait l'écrire dans le jeu."]];
+var EX2=[["Juste après « je me connecte au réseau », que se passe-t-il ?",["Je reçois une adresse IP","La demande arrive au serveur","Le serveur renvoie la page"],0,"Le routeur donne une adresse à l'appareil qui se connecte. Ensuite seulement, la demande peut partir."],
+ ["Qui envoie ma demande hors du réseau local ?",["Le navigateur","Le routeur","Le serveur"],1,"Le routeur relie le réseau local aux autres réseaux."],
+ ["Où se trouve le site que je demande ?",["Dans mon routeur","Sur un serveur","Dans mon navigateur"],1,"Les sites sont rangés sur des serveurs, quelque part dans le monde."],
+ ["Par où revient la page ?",["Directement dans mon écran","Par le même chemin, jusqu'à mon adresse","Par le wifi du voisin"],1,"Elle refait le trajet à l'envers, grâce à l'adresse de l'expéditeur."]];
+var VF=["Vrai","Faux"];
+var EX3=[["Deux postes de la même classe ont exactement la même adresse IP.",1,"Faux. Chaque appareil a sa propre adresse : le début est le même, la fin change."],
+ ["Le wifi est une connexion sans fil.",0,"Vrai. Une connexion peut passer par un câble ou par le wifi."],
+ ["Si le routeur tombe en panne, le réseau local est coupé des autres réseaux.",0,"Vrai. Les appareils restent reliés entre eux, mais plus rien ne sort ni n'entre."],
+ ["Une adresse IP, c'est comme un mot de passe.",1,"Faux. Une adresse sert à trouver un appareil, pas à prouver qui on est."],
+ ["Le routeur lit le contenu de tous les messages.",1,"Faux. Il lit seulement l'adresse, comme le routeur du jeu ne lisait que le troisième nombre."],
+ ["Pour trouver l'adresse IP de mon poste, je la lis dans ses paramètres.",0,"Vrai. Un site web te donnerait l'adresse de toute l'école, la même pour tout le monde."]];
+var EX4=[["Ton téléphone affiche « connecté, sans Internet ». Qu'est-ce qui fonctionne ?",["Rien du tout","La connexion au réseau local","Internet, mais pas le wifi"],1,"Le téléphone est bien relié à la borne, donc au réseau local. C'est la sortie vers Internet qui ne marche pas, souvent à cause de la box."],
+ ["Dans le jeu, 10.0.2.5 et 10.0.2.9 sont-ils dans le même réseau ?",["Oui","Non"],0,"Le troisième nombre est le même : 2. Même réseau, appareils différents."],
+ ["Dans le jeu, 10.0.1.4 et 10.0.3.4 sont-ils dans le même réseau ?",["Oui","Non"],1,"Le troisième nombre change : 1 et 3. Deux réseaux différents, même si la fin est pareille."],
+ ["Un message part de 10.0.1.2 vers 10.0.3.5. Combien de routeurs traverse-t-il ?",["Un","Deux","Trois"],1,"Le routeur du réseau 1, qui l'envoie sur Internet, puis celui du réseau 3, qui le livre."]];
+EX1.forEach(function(q,i){poser(document.getElementById("ex1"),"a"+i,q[0],OPT1,q[1],q[2],true);});
+EX2.forEach(function(q,i){poser(document.getElementById("ex2"),"b"+i,q[0],q[1],q[2],q[3],true);});
+EX3.forEach(function(q,i){poser(document.getElementById("ex3"),"c"+i,q[0],VF,q[1],q[2],true);});
+EX4.forEach(function(q,i){poser(document.getElementById("ex4"),"d"+i,q[0],q[1],q[2],q[3],true);});
+
+var OPT5=["Le web","Internet sans le web","Ni l'un ni l'autre"];
+[["Tu lis un article de Wikipédia dans Chrome.",0,"Un navigateur affiche des pages : c'est le web."],
+ ["Tu envoies un message sur WhatsApp.",1,"L'application utilise Internet, sans navigateur : ce n'est pas le web."],
+ ["Tu joues en ligne sur une console.",1,"Le jeu passe par Internet, mais pas par le web."],
+ ["Tu cherches un horaire de bus sur un site, dans ton navigateur.",0,"Un site, dans un navigateur : le web."],
+ ["Tu regardes une vidéo sur youtube.com, dans ton navigateur.",0,"Le site youtube.com dans un navigateur : le web."],
+ ["Tu reçois une notification Snapchat.",1,"L'application utilise Internet, sans navigateur."],
+ ["Tu imprimes un document sur l'imprimante de la classe.",2,"L'imprimante est dans le réseau local. Le document ne sort jamais de l'école : ni Internet, ni le web. Un réseau n'est pas forcément Internet."]
+].forEach(function(q,i){poser(document.getElementById("ex5"),"z"+i,q[0],OPT5,q[1],q[2],false);});
+
+function compte(pref,src,idx){var n=0;src.forEach(function(q,i){if(rep[pref+i]===q[idx])n++;});return n;}
+document.getElementById("voir").onclick=function(){
+  var s1=compte("a",EX1,1),s2=compte("b",EX2,2),s3=compte("c",EX3,1),s4=compte("d",EX4,2),t=s1+s2+s3+s4;
+  document.getElementById("gTotal").textContent=t;
+  document.getElementById("gMot").textContent=t>=18?"Très bien. Tu peux passer aux exercices écrits de ton livret.":t>=14?"C'est acquis dans l'ensemble. Relis ton mémo pour les points ratés.":t>=10?"La base est là. Relis la page sur le réseau et le trajet, puis recommence.":"Il faut reprendre. Relis les pages « Je comprends » de ton livret, puis recommence.";
+  document.getElementById("gDetail").innerHTML='<table class="grille"><tr><th>Exercice</th><th>Résultat</th></tr><tr><td>1. Le bon mot</td><td><b>'+s1+' / 6</b></td></tr><tr><td>2. Le trajet</td><td><b>'+s2+' / 4</b></td></tr><tr><td>3. Vrai ou faux</td><td><b>'+s3+' / 6</b></td></tr><tr><td>4. Le défi</td><td><b>'+s4+' / 4</b></td></tr></table>';
+  var nom=(document.getElementById("nom").value||"").trim()||"...................";
+  document.getElementById("recap").value="Cours 4 – exercices – "+nom+"\nBon mot "+s1+"/6 · Trajet "+s2+"/4 · Vrai-faux "+s3+"/6 · Défi "+s4+"/4 · Total "+t+"/20";
+  document.getElementById("bilan").classList.add("on");
+  try{document.getElementById("bilan").scrollIntoView({behavior:"smooth"});}catch(e){}
+};
+document.getElementById("copier").onclick=function(){var t=document.getElementById("recap");t.select();var ok=false;try{ok=document.execCommand("copy");}catch(e){}document.getElementById("copie").textContent=ok?"Copié.":"Sélectionne le texte et copie-le à la main.";};
+document.getElementById("reset").onclick=function(){location.reload();};
+
+/* ---------- 6. trace ---------- */
+var TRACE=[["Un ",1,", ce sont des appareils reliés entre eux pour échanger des informations. Chaque appareil y est relié par une ",2," : un câble ou le wifi."],
+ ["Chaque appareil possède une ",3,", quatre nombres qui permettent de le retrouver. Le ",4," lit l'adresse de chaque message et l'envoie dans la bonne direction."],
+ [5," est le réseau des réseaux. Quand je demande une page, ma demande voyage jusqu'au ",6," qui la conserve, puis la page revient par le même chemin."],
+ ["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";}
+document.getElementById("motSuiv").onclick=function(){if(rv<8){rv++;dessineTrace();}};
+document.getElementById("motReset").onclick=function(){rv=0;dessineTrace();};
+dessineTrace();
+
+/* ---------- lexique, genere par lexique/build.py ---------- */
+var LEXIQUE=[
+["Adresse IP","Le numéro qui identifie un appareil sur un réseau, écrit en quatre nombres séparés par des points, par exemple 10.0.1.12. Sans adresse, un message ne sait pas où aller."],
+["Box","L'appareil installé à la maison par le fournisseur d'accès. Il contient un routeur et une borne wifi, et relie le réseau de la maison à Internet."],
+["Connexion","Le lien qui relie un appareil à un réseau, par un câble ou sans fil, par le wifi."],
+["Favori","Une page web enregistrée dans le navigateur pour la retrouver en un clic. On en reparle au cours 5."],
+["Fournisseur d'accès","L'entreprise qui relie une maison ou une école à Internet, contre un abonnement."],
+["Internet","Le réseau mondial qui relie entre eux des millions de réseaux. C'est le réseau des réseaux."],
+["Navigateur","Le logiciel qui permet d'afficher les pages du web. Chrome, Firefox, Edge, Safari. Ce n'est pas Internet : c'est un logiciel qui l'utilise."],
+["Page web","Un document affiché par le navigateur, qui peut contenir du texte, des images et des liens vers d'autres pages."],
+["Réseau","Des appareils reliés entre eux pour échanger des informations."],
+["Réseau local","Le réseau d'un seul lieu : une maison, une école, une classe. Ses appareils sont reliés au même routeur."],
+["Routeur","L'appareil qui relie un réseau local à d'autres réseaux. Il lit l'adresse de chaque message et l'envoie dans la bonne direction."],
+["Serveur","Un ordinateur qui reste allumé en permanence pour conserver des fichiers et les fournir à d'autres appareils."],
+["Site web","Un ensemble de pages web qui se trouvent sur un même serveur, sous une même adresse."],
+["Web","Le service qui permet de consulter des pages reliées entre elles par des liens. Il utilise Internet, mais ce n'est pas Internet : les courriels et les jeux en ligne passent aussi par Internet sans être le web."],
+["Wifi","Une connexion sans fil, par ondes radio, entre un appareil et une borne reliée au réseau."]];
+accordeon(document.getElementById("lexique"),LEXIQUE,"définition");
+
+dessineRail();
+</script>
+</body>
+</html>