lrdlg/2CInfo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

maj 1re tc

Browse Source
This commit is contained in:
lrdlg
2026-09-23 09:20:33 +02:00
parent d92d043f9d
commit 395829199b
14 changed files with 1576 additions and 2487 deletions
Download Patch File Download Diff File Expand all files Collapse all files
1re-numerique/1TC-NUM_bloc-04_comment-ca-circule.html
+115 -304
View File
@@ -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();