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-01_ouvrir-le-cours.html
+74 -225
View File
@@ -1,198 +1,45 @@
<!doctype html>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Cours 1 – Ouvrir le cours</title>
<style>:root{--ink:#172033;--muted:#667085;--blue:#2563eb;--navy:#172554;--green:#16a34a;--red:#dc2626;--card:#fff;--line:#e5e7eb;--shadow:0 18px 45px #0f172a18}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:linear-gradient(180deg,#edf4ff,#f8fafc 34%,#fff);color:var(--ink)}
button,input,select{font:inherit}
main{max-width:1180px;margin:auto;padding:34px 20px 70px}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
svg.i{width:1em;height:1em;vertical-align:-.14em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;background:linear-gradient(135deg,#172554,#2563eb);color:#fff;border-radius:28px;padding:30px;box-shadow:var(--shadow);margin-bottom:24px}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:900;opacity:.82}
.hero h1{font-size:clamp(30px,4.6vw,52px);line-height:1;letter-spacing:-1.6px;margin:7px 0 12px}
.hero p{margin:0;color:#dbeafe;line-height:1.6;font-size:17px}
.hero a.up{display:inline-flex;align-items:center;gap:7px;color:#bfdbfe;font-weight:800;font-size:13px;text-decoration:none;margin-bottom:10px}
.hero a.up:hover{color:#fff}
.hero-visual{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.hero-chip{background:#ffffff14;border:1px solid #ffffff28;border-radius:18px;padding:16px;text-align:center}
.hero-chip .ico{display:block;margin:0 auto 7px;width:30px;height:30px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hero-chip b{font-size:14px}
.badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.badge{background:#ffffff1f;border:1px solid #ffffff2e;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:800;color:#e0ecff}
.badge.warn{background:#dc262633;border-color:#fca5a5;color:#fee2e2}
.dashboard{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
.stat{background:#fff;border:1px solid var(--line);border-radius:17px;padding:14px;box-shadow:0 8px 24px #0f172a0b}
.stat strong{display:block;font-size:22px;margin-top:3px}
.stat small{color:#64748b;font-weight:800}
.stat.ok strong{color:var(--green)}
.chrono{background:#172554;color:#fff;border-radius:20px;padding:16px 18px;box-shadow:var(--shadow);margin-bottom:20px;display:grid;gap:12px}
.chrono-haut{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.pendule{font-size:32px;font-weight:950;font-variant-numeric:tabular-nums;line-height:1}
.pendule small{display:block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#93b4d8;margin-top:5px}
.ecart{font-size:14px;font-weight:850;padding:9px 14px;border-radius:999px;background:#ffffff1a;border:1px solid #ffffff2e;min-width:250px;text-align:center}
.ecart.avance{background:#16a34a2e;border-color:#4ade80;color:#dcfce7}
.ecart.retard{background:#dc26262e;border-color:#fca5a5;color:#fee2e2}
.chrono .row button{background:#ffffff1a;border:1px solid #ffffff30;color:#fff}
.chrono .row button.go{background:#fff;border-color:#fff;color:#172554}
.navtabs{display:grid;gap:10px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:0 8px 24px #0f172a0b;margin-bottom:20px}
.navtabs.n6{grid-template-columns:repeat(6,1fr)}
.tab{border:2px solid #e2e8f0;background:#fff;border-radius:14px;padding:12px 10px;font-weight:900;cursor:pointer;color:#334155;text-align:left;position:relative}
.tab span{display:block;font-size:11px;font-weight:800;color:#94a3b8;margin-top:3px;font-variant-numeric:tabular-nums}
.tab:hover{border-color:#93c5fd}
.tab.active{background:#2563eb;color:#fff;border-color:#2563eb;box-shadow:0 8px 18px #2563eb28}
.tab.active span{color:#c7dcff}
.tab.prevue::after{content:"";position:absolute;left:12px;right:12px;bottom:-2px;height:4px;border-radius:99px;background:#f59e0b}
.panel{display:none}.panel.active{display:block}
.card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 10px 28px #0f172a0d;margin-bottom:16px}
.card h2,.card h3{margin-top:0}
.card h2{font-size:26px;letter-spacing:-.5px}
.muted{color:var(--muted);line-height:1.6}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn{border:0;border-radius:11px;padding:10px 15px;font-weight:850;cursor:pointer;background:#eaf1ff;color:#1d4ed8}
.btn:hover{filter:brightness(.97)}
.btn.primary{background:#2563eb;color:#fff}
.btn.soft{background:#f1f5f9;color:#334155}
.score{display:inline-block;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:7px 12px;font-weight:900;font-size:14px}
.feedback{min-height:31px;margin-top:12px;font-weight:850}
.entete{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:flex-start;margin-bottom:14px}
.consigne{background:linear-gradient(145deg,#f8fafc,#eef6ff);border:2px solid #dbeafe;border-radius:18px;padding:20px 24px;font-size:20px;font-weight:800;line-height:1.45;margin:16px 0}
.consigne small{display:block;text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:900;color:var(--blue);margin-bottom:8px}
.info{border-left:4px solid #cbd5e1;background:#f8fafc;border-radius:0 12px 12px 0;padding:13px 17px;color:#475569;font-size:15px;line-height:1.6;margin-top:16px}
.info b{color:var(--ink)}
.info.alerte{border-color:#fca5a5;background:#fef4f4;color:#7f2b2b}
.info.alerte b{color:#991b1b}
.saisie{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px}
.saisie input{flex:1;min-width:210px;padding:12px 14px;border:2px solid #cbd5e1;border-radius:12px;outline:none}
.saisie input:focus{border-color:var(--blue);box-shadow:0 0 0 4px #2563eb18}
.saisie select{padding:12px 14px;border:2px solid #cbd5e1;border-radius:12px;font-weight:800}
.colonnes{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:11px}
.colonne{border:1px solid var(--line);border-radius:17px;background:#f8fbff;min-height:145px;padding:13px}
.colonne h3{font-size:14px;display:flex;justify-content:space-between;align-items:center;margin:0 0 9px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.colonne h3 em{font-style:normal;color:#94a3b8;font-size:12px}
.colonne ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.colonne li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:7px 10px;font-size:14px;font-weight:700;display:flex;justify-content:space-between;gap:6px}
.colonne li button{background:none;border:0;color:#cbd5e1;cursor:pointer;padding:0 3px;font-weight:900}
.colonne li button:hover{color:var(--red)}
.accordeon{display:grid;gap:10px}
.item{border:1px solid var(--line);border-radius:17px;background:#fff;overflow:hidden}
.item>button{width:100%;display:flex;gap:14px;align-items:flex-start;text-align:left;background:none;border:0;padding:15px 18px;cursor:pointer}
.item>button:hover{background:#f8fbff}
.item .n{width:30px;height:30px;flex:none;border-radius:10px;background:#eaf1ff;color:#1d4ed8;font-weight:950;display:grid;place-items:center;font-size:14px}
.item .t{font-weight:850;font-size:17px;flex:1}
.item .plus{color:#94a3b8;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;padding-top:6px}
.item .corps{display:none;padding:0 18px 17px 62px;color:#475569;line-height:1.6}
.item.ouvert .corps{display:block}
.item.ouvert{border-color:#93c5fd;box-shadow:0 8px 20px #2563eb14}
.item.ouvert .n{background:#2563eb;color:#fff}
.qcard{border:2px solid #dbeafe;border-radius:20px;background:linear-gradient(145deg,#fbfdff,#f4f9ff);padding:24px 26px}
.qtag{display:inline-block;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:900;margin-bottom:10px}
.qtag.cle{background:#fef3c7;color:#92400e}
.qtxt{font-size:22px;font-weight:900;line-height:1.3;letter-spacing:-.3px;margin-bottom:16px}
.answer-grid{display:grid;gap:8px}
.answer{border:2px solid #dbe3ef;background:#fff;border-radius:12px;padding:11px 14px;text-align:left;font-weight:800}
.answer.ok{border-color:#22c55e;background:#f0fdf4}
.reveal{display:none;margin-top:16px;border-top:2px dashed #dbeafe;padding-top:15px}
.reveal.on{display:block}
.verdict{font-weight:950;color:var(--green);margin-bottom:8px}
.steps{display:grid;gap:11px}
.step{border:1px solid var(--line);border-radius:17px;background:#fff;padding:16px 20px;display:flex;gap:15px;align-items:flex-start;opacity:.4}
.step.on{opacity:1;border-color:#93c5fd;box-shadow:0 8px 20px #2563eb14}
.step.fait{opacity:1}
.step .n{width:34px;height:34px;flex:none;border-radius:12px;background:#f1f5f9;color:#94a3b8;font-weight:950;display:grid;place-items:center}
.step.on .n{background:#2563eb;color:#fff}
.step.fait .n{background:#dcfce7;color:#15803d}
.step h3{margin:0 0 4px;font-size:17px}
.step p{margin:0;color:#475569;font-size:15px;line-height:1.55}
figure{margin:0 0 18px}
figure svg{width:100%;height:auto;display:block;background:#fff;border:1px solid var(--line);border-radius:18px}
figcaption{font-size:14px;color:var(--muted);margin-top:10px;line-height:1.55}
.trace{border:2px solid #dbeafe;background:linear-gradient(145deg,#fbfdff,#eef6ff);border-radius:20px;padding:26px 30px;font-size:19px;line-height:1.85}
.trace h3{margin:0 0 14px;font-size:22px}
.trace p{margin:0 0 .5em}
.trace code{background:#fff;border:1px solid #dbeafe;border-radius:6px;padding:1px 7px;font-size:.92em}
.check{display:grid;gap:9px}
.check label{display:flex;gap:13px;align-items:flex-start;border:1px solid var(--line);border-radius:15px;background:#fff;padding:14px 18px;cursor:pointer;font-weight:750}
.check label:hover{border-color:#93c5fd}
.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--green);flex:none}
.check input:checked+span{color:var(--green);font-weight:900}
table.grille{width:100%;border-collapse:collapse;font-size:15px}
table.grille th,table.grille td{border:1px solid var(--line);padding:10px 13px;text-align:left}
table.grille th{background:#f8fafc;font-weight:900;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:#475569}
table.grille td.masque{color:transparent;background:#f8fafc}
table.grille tr.on td{background:#f0fdf4}
table.grille td b{color:#15803d}
.filtres{display:flex;gap:9px;flex-wrap:wrap;align-items:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:0 8px 24px #0f172a0b;margin-bottom:20px}
.filtres .compte{margin-left:auto;font-weight:850;color:var(--muted);font-size:14px}
.module{margin-bottom:30px}
.module-tete{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px}
.module-tete h2{margin:0;font-size:25px;letter-spacing:-.6px}
.module-tete .p{background:#172554;color:#fff;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:900}
.module-tete .champ{color:var(--muted);font-size:14px;margin-left:auto}
.module-note{color:var(--muted);line-height:1.6;margin:0 0 16px;max-width:76ch}
.blocs{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.bloc{border:1px solid var(--line);border-radius:20px;background:#fff;padding:17px 19px;display:flex;gap:15px;align-items:flex-start;text-decoration:none;color:inherit;box-shadow:0 8px 24px #0f172a08}
.bloc .n{width:40px;height:40px;flex:none;border-radius:14px;background:#f1f5f9;color:#94a3b8;font-weight:950;display:grid;place-items:center;font-size:17px}
.bloc h3{margin:0 0 5px;font-size:17px;line-height:1.3}
.bloc .att{font-size:13px;color:var(--muted);font-weight:600}
.ets{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.et{font-size:11px;font-weight:900;border-radius:999px;padding:4px 9px;background:#f1f5f9;color:#475569}
.et.eval{background:#fee2e2;color:#991b1b}
.et.fac{background:#f3e8ff;color:#6b21a8}
.et.pret{background:#dcfce7;color:#15803d}
a.bloc:hover{border-color:#93c5fd;box-shadow:0 12px 28px #2563eb1f}
a.bloc .n{background:#2563eb;color:#fff}
.bloc.vide{border-style:dashed;opacity:.68;box-shadow:none}
.bloc.vide h3{font-weight:800}
.masque{display:none!important}
footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:center;color:#64748b;font-size:12px;border-top:1px solid var(--line)}
@media(max-width:980px){.hero{grid-template-columns:1fr}.dashboard{grid-template-columns:repeat(2,1fr)}.navtabs.n6{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){main{padding:20px 12px 60px}.hero{padding:22px 18px}.dashboard{grid-template-columns:1fr}.navtabs.n6{grid-template-columns:repeat(2,1fr)}.blocs{grid-template-columns:1fr}.ecart{min-width:0;flex:1}.filtres .compte{margin-left:0;width:100%}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{.chrono,.navtabs,.filtres,.saisie{display:none}.panel{display:block!important}}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cours 1, ouvrir le cours — 1re tronc commun</title>
<meta name="robots" content="noindex">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../assets/theme.css">
<link rel="stylesheet" href="../assets/numerique-1re.css">
</head>
<body>
<main>
<body class="classe-tc">
<section class="hero">
<div>
<a class="up" href="index.html"><svg class="i" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg> Retour au menu</a>
<div class="eyebrow">Cours 1 · Formation numérique · 1re année</div>
<header class="entete">
<div class="entete__interieur entete__interieur--large">
<nav class="ariane" aria-label="Fil d'Ariane">
<a href="../index.html">Mes cours</a><span aria-hidden="true">/</span><a href="index.html">1re tronc commun</a><span aria-hidden="true">/</span><strong>Cours 1</strong>
</nav>
<h1>Ouvrir le cours</h1>
<p>Aujourd'hui, tu découvres le local, les règles qu'on y suit, ton compte et ton dossier personnel. À la fin du cours, tu sauras te connecter et retrouver ton travail depuis n'importe quel poste.</p>
<div class="badges">
<span class="badge">2 périodes</span>
<span class="badge">Ce cours n'est pas coté</span>
<span class="badge">Livret à garder dans le cahier</span>
</div>
<p class="entete__meta">Cours 1 · Formation numérique · 1re année</p>
</div>
<div class="hero-visual">
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M12 3v3M5.6 5.6l2.1 2.1M3 12h3M5.6 18.4l2.1-2.1M12 18v3M18.4 18.4l-2.1-2.1M21 12h-3M18.4 5.6l-2.1 2.1"/><circle cx="12" cy="12" r="3"/></svg><b>Mon réveil</b></div>
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M6 3h9l4 4v14H6z"/><path d="M14 3v5h5M9 13h7M9 17h5"/></svg><b>La charte</b></div>
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M9.5 9a2.5 2.5 0 1 1 3.4 2.3c-.6.3-.9.8-.9 1.4v.6"/><circle cx="12" cy="17" r="1"/><circle cx="12" cy="12" r="9"/></svg><b>Ce que je sais</b></div>
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="13" rx="2"/><path d="M8 21h8M12 17v4M8.5 10.5l2 2 4.5-4.5"/></svg><b>Ma connexion</b></div>
</div>
</section>
</header>
<main class="contenu contenu--large">
<p class="chapeau">Aujourd'hui, tu découvres le local, les règles qu'on y suit, ton compte et ton dossier personnel. À la fin du cours, tu sauras te connecter et retrouver ton travail depuis n'importe quel poste.</p>
<ul class="etiquettes">
<li class="etiquette">2 périodes</li>
<li class="etiquette">Ce cours n'est pas coté</li>
<li class="etiquette">Livret à garder dans le cahier</li>
</ul>
<ul class="apercu">
<li><svg viewBox="0 0 24 24"><path d="M12 3v3M5.6 5.6l2.1 2.1M3 12h3M5.6 18.4l2.1-2.1M12 18v3M18.4 18.4l-2.1-2.1M21 12h-3M18.4 5.6l-2.1 2.1"/><circle cx="12" cy="12" r="3"/></svg><span>Mon réveil</span></li>
<li><svg viewBox="0 0 24 24"><path d="M6 3h9l4 4v14H6z"/><path d="M14 3v5h5M9 13h7M9 17h5"/></svg><span>La charte</span></li>
<li><svg viewBox="0 0 24 24"><path d="M9.5 9a2.5 2.5 0 1 1 3.4 2.3c-.6.3-.9.8-.9 1.4v.6"/><circle cx="12" cy="17" r="1"/><circle cx="12" cy="12" r="9"/></svg><span>Ce que je sais</span></li>
<li><svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="13" rx="2"/><path d="M8 21h8M12 17v4M8.5 10.5l2 2 4.5-4.5"/></svg><span>Ma connexion</span></li>
</ul>
<section class="dashboard">
<div class="stat"><small>Activité en cours</small><strong id="sPhase">1 sur 6</strong></div>
@@ -205,7 +52,7 @@ footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:cente
<div class="row">
<button class="btn primary" id="btnGo">Démarrer</button>
<button class="btn soft" id="btnStop">Remettre à zéro</button>
<span class="ecart" id="ecart" style="background:#f1f5f9;border:1px solid var(--line);color:#475569">Activité 1 · Mon réveil numérique</span>
<span class="ecart" id="ecart" style="background:var(--papier);border:1px solid var(--line);color:var(--encre-douce)">Activité 1 · Mon réveil numérique</span>
</div>
</div>
@@ -213,7 +60,7 @@ footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:cente
<!-- 1 -->
<section class="panel active" id="p0"><div class="card">
<div class="entete"><div><h2>Activité 1. Mon réveil numérique</h2><p class="muted">Ton livret, page 1. Ordinateurs éteints.</p></div><span class="score">15 min</span></div>
<div class="carte-entete"><div><h2>Activité 1. Mon réveil numérique</h2><p class="muted">Ton livret, page 1. Ordinateurs éteints.</p></div><span class="score">15 min</span></div>
<div class="consigne"><small>Consigne</small>
Sur ton livret, écris tout ce que tu as fait avec un écran depuis que tu t'es réveillé ce matin. Tout, même trente secondes. Tu as cinq minutes.</div>
@@ -232,7 +79,7 @@ footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:cente
<!-- 2 -->
<section class="panel" id="p1"><div class="card">
<div class="entete"><div><h2>Activité 2. La charte du local</h2><p class="muted">Huit règles. Pour chacune, essaie de deviner pourquoi elle existe avant qu'on ouvre la réponse.</p></div><span class="score">15 min</span></div>
<div class="carte-entete"><div><h2>Activité 2. La charte du local</h2><p class="muted">Huit règles. Pour chacune, essaie de deviner pourquoi elle existe avant qu'on ouvre la réponse.</p></div><span class="score">15 min</span></div>
<div class="accordeon" id="regles"></div>
<div class="consigne" style="margin-bottom:0"><small>Pour terminer</small>
Signe ta charte au bas de la page 2 de ton livret, et note ton numéro de poste en haut de la page 1.</div>
@@ -240,7 +87,7 @@ footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:cente
<!-- 3 -->
<section class="panel" id="p2"><div class="card">
<div class="entete"><div><h2>Activité 3. Ce que je sais déjà</h2><p class="muted">Vingt questions dans ton livret, pages 3 et 4.</p></div><span class="score">25 min</span></div>
<div class="carte-entete"><div><h2>Activité 3. Ce que je sais déjà</h2><p class="muted">Vingt questions dans ton livret, pages 3 et 4.</p></div><span class="score">25 min</span></div>
<div class="consigne"><small>À lire avant de commencer</small>
Ce questionnaire n'est pas coté. Il sert à savoir ce que tu sais déjà, pour ne pas te faire perdre du temps sur ce que tu maîtrises. Si tu ne sais pas, écris que tu ne sais pas : c'est une réponse utile.</div>
@@ -257,7 +104,7 @@ footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:cente
<!-- 4 -->
<section class="panel" id="p3"><div class="card">
<div class="entete"><div><h2>Activité 4. Ma première connexion</h2><p class="muted">Ton livret, page 5. Attends l'annonce de chaque étape avant de la faire.</p></div><span class="score">30 min</span></div>
<div class="carte-entete"><div><h2>Activité 4. Ma première connexion</h2><p class="muted">Ton livret, page 5. Attends l'annonce de chaque étape avant de la faire.</p></div><span class="score">30 min</span></div>
<div class="steps" id="etapes"></div>
<div class="row" style="margin-top:14px">
@@ -272,43 +119,43 @@ footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:cente
<figure>
<svg viewBox="0 0 780 300" role="img" aria-label="Un élève retrouve son dossier personnel depuis n'importe quel poste, alors que le bureau reste attaché à une seule machine">
<defs>
<marker id="fl" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M0 0 L10 5 L0 10 z" fill="#172554"/></marker>
<marker id="fl" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M0 0 L10 5 L0 10 z" fill="var(--encre)"/></marker>
<marker id="flr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M0 0 L10 5 L0 10 z" fill="#dc2626"/></marker>
</defs>
<g font-family="Inter, system-ui, sans-serif">
<circle cx="72" cy="112" r="19" fill="none" stroke="#172554" stroke-width="2.5"/>
<path d="M42 164 a30 34 0 0 1 60 0" fill="none" stroke="#172554" stroke-width="2.5"/>
<circle cx="72" cy="112" r="19" fill="none" stroke="var(--encre)" stroke-width="2.5"/>
<path d="M42 164 a30 34 0 0 1 60 0" fill="none" stroke="var(--encre)" stroke-width="2.5"/>
<rect x="24" y="180" width="96" height="26" rx="13" fill="#2563eb"/>
<text x="72" y="198" text-anchor="middle" font-size="13" font-weight="800" fill="#fff">mon compte</text>
<text x="72" y="224" text-anchor="middle" font-size="12.5" fill="#667085">Marie, 1C</text>
<g stroke="#172554" stroke-width="2.5" fill="#f8fafc">
<text x="72" y="224" text-anchor="middle" font-size="12.5" fill="var(--encre-douce)">Marie, 1C</text>
<g stroke="var(--encre)" stroke-width="2.5" fill="var(--papier)">
<rect x="212" y="44" width="118" height="76" rx="8"/><rect x="212" y="168" width="118" height="76" rx="8"/>
</g>
<path d="M255 120 h32 M271 120 v14 M253 134 h36" stroke="#172554" stroke-width="2.5" fill="none"/>
<path d="M255 244 h32 M271 244 v14 M253 258 h36" stroke="#172554" stroke-width="2.5" fill="none"/>
<text x="271" y="88" text-anchor="middle" font-size="14" font-weight="800" fill="#172554">Poste 3</text>
<text x="271" y="212" text-anchor="middle" font-size="14" font-weight="800" fill="#172554">Poste 17</text>
<path d="M255 120 h32 M271 120 v14 M253 134 h36" stroke="var(--encre)" stroke-width="2.5" fill="none"/>
<path d="M255 244 h32 M271 244 v14 M253 258 h36" stroke="var(--encre)" stroke-width="2.5" fill="none"/>
<text x="271" y="88" text-anchor="middle" font-size="14" font-weight="800" fill="var(--encre)">Poste 3</text>
<text x="271" y="212" text-anchor="middle" font-size="14" font-weight="800" fill="var(--encre)">Poste 17</text>
<rect x="350" y="48" width="160" height="34" rx="12" fill="#fef2f2" stroke="#dc2626" stroke-width="2"/>
<text x="430" y="70" text-anchor="middle" font-size="13" font-weight="800" fill="#991b1b">Bureau du poste 3</text>
<path d="M330 65 h16" stroke="#dc2626" stroke-width="2.5" marker-end="url(#flr)"/>
<text x="430" y="102" text-anchor="middle" font-size="12.5" fill="#991b1b">reste sur cette machine</text>
<path d="M116 100 C158 84, 176 76, 207 74" stroke="#172554" stroke-width="2" fill="none" stroke-dasharray="6 5" marker-end="url(#fl)"/>
<path d="M116 128 C158 152, 176 186, 207 198" stroke="#172554" stroke-width="2" fill="none" stroke-dasharray="6 5" marker-end="url(#fl)"/>
<text x="128" y="256" font-size="12.5" fill="#667085">je peux m'asseoir</text>
<text x="128" y="272" font-size="12.5" fill="#667085">à n'importe quel poste</text>
<path d="M116 100 C158 84, 176 76, 207 74" stroke="var(--encre)" stroke-width="2" fill="none" stroke-dasharray="6 5" marker-end="url(#fl)"/>
<path d="M116 128 C158 152, 176 186, 207 198" stroke="var(--encre)" stroke-width="2" fill="none" stroke-dasharray="6 5" marker-end="url(#fl)"/>
<text x="128" y="256" font-size="12.5" fill="var(--encre-douce)">je peux m'asseoir</text>
<text x="128" y="272" font-size="12.5" fill="var(--encre-douce)">à n'importe quel poste</text>
<g transform="translate(560,100)">
<ellipse cx="80" cy="14" rx="80" ry="16" fill="#eff6ff" stroke="#172554" stroke-width="2.5"/>
<path d="M0 14 v74" stroke="#172554" stroke-width="2.5" fill="none"/>
<path d="M160 14 v74" stroke="#172554" stroke-width="2.5" fill="none"/>
<path d="M0 88 a80 16 0 0 0 160 0" fill="#eff6ff" stroke="#172554" stroke-width="2.5"/>
<ellipse cx="80" cy="14" rx="80" ry="16" fill="#eff6ff" stroke="var(--encre)" stroke-width="2.5"/>
<path d="M0 14 v74" stroke="var(--encre)" stroke-width="2.5" fill="none"/>
<path d="M160 14 v74" stroke="var(--encre)" stroke-width="2.5" fill="none"/>
<path d="M0 88 a80 16 0 0 0 160 0" fill="#eff6ff" stroke="var(--encre)" stroke-width="2.5"/>
<ellipse cx="80" cy="47" rx="80" ry="16" fill="none" stroke="#bfdbfe" stroke-width="1.5"/>
<text x="80" y="128" text-anchor="middle" font-size="14" font-weight="800" fill="#172554">Serveur de l'école</text>
<text x="80" y="128" text-anchor="middle" font-size="14" font-weight="800" fill="var(--encre)">Serveur de l'école</text>
<rect x="4" y="140" width="152" height="26" rx="13" fill="#2563eb"/>
<text x="80" y="158" text-anchor="middle" font-size="12.5" font-weight="800" fill="#fff">mon dossier personnel</text>
</g>
<path d="M330 96 C420 116, 470 118, 550 118" stroke="#172554" stroke-width="2.5" fill="none" marker-end="url(#fl)"/>
<path d="M330 206 C420 196, 470 164, 550 146" stroke="#172554" stroke-width="2.5" fill="none" marker-end="url(#fl)"/>
<text x="352" y="256" font-size="13" font-weight="800" fill="#172554">mon dossier me suit d'un poste à l'autre</text>
<path d="M330 96 C420 116, 470 118, 550 118" stroke="var(--encre)" stroke-width="2.5" fill="none" marker-end="url(#fl)"/>
<path d="M330 206 C420 196, 470 164, 550 146" stroke="var(--encre)" stroke-width="2.5" fill="none" marker-end="url(#fl)"/>
<text x="300" y="290" font-size="13" font-weight="800" fill="var(--encre)">mon dossier me suit d'un poste à l'autre</text>
</g>
</svg>
<figcaption>Ce que tu enregistres sur le bureau reste sur cette machine et peut disparaître. Ce que tu enregistres dans ton dossier personnel, tu le retrouves depuis n'importe quel poste du local.</figcaption>
@@ -317,15 +164,15 @@ footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:cente
<figure>
<svg viewBox="0 0 620 290" role="img" aria-label="Le dossier FMTTN se trouve à l'intérieur du dossier personnel">
<g font-family="Inter, system-ui, sans-serif" font-size="15">
<g stroke="#cbd5e1" stroke-width="2" fill="none">
<g stroke="var(--trait-fort)" stroke-width="2" fill="none">
<path d="M46 56 v92"/><path d="M46 100 h26"/><path d="M86 108 v92"/><path d="M86 152 h26"/>
<path d="M126 160 v92"/><path d="M126 204 h26"/><path d="M126 246 h26"/>
</g>
<g transform="translate(20,32)"><path d="M0 6 h13 l4 6 h17 a3 3 0 0 1 3 3 v14 a3 3 0 0 1 -3 3 h-34 a3 3 0 0 1 -3 -3 v-20 a3 3 0 0 1 3 -3 z" fill="#eff6ff" stroke="#667085" stroke-width="2"/><text x="48" y="26" fill="#172033" font-weight="600">Serveur de l'école</text></g>
<g transform="translate(60,84)"><path d="M0 6 h13 l4 6 h17 a3 3 0 0 1 3 3 v14 a3 3 0 0 1 -3 3 h-34 a3 3 0 0 1 -3 -3 v-20 a3 3 0 0 1 3 -3 z" fill="#eff6ff" stroke="#667085" stroke-width="2"/><text x="48" y="26" fill="#172033" font-weight="600">Élèves</text></g>
<g transform="translate(100,136)"><path d="M0 6 h13 l4 6 h17 a3 3 0 0 1 3 3 v14 a3 3 0 0 1 -3 3 h-34 a3 3 0 0 1 -3 -3 v-20 a3 3 0 0 1 3 -3 z" fill="#eff6ff" stroke="#667085" stroke-width="2"/><text x="48" y="26" fill="#172033" font-weight="800">1C_dupont_marie</text><text x="215" y="26" fill="#667085" font-size="13">ton dossier personnel</text></g>
<g transform="translate(140,188)"><path d="M0 6 h13 l4 6 h17 a3 3 0 0 1 3 3 v14 a3 3 0 0 1 -3 3 h-34 a3 3 0 0 1 -3 -3 v-20 a3 3 0 0 1 3 -3 z" fill="#2563eb" stroke="#1d4ed8" stroke-width="2"/><rect x="42" y="7" width="78" height="23" rx="11" fill="#2563eb"/><text x="52" y="25" fill="#fff" font-weight="800">FMTTN</text><text x="134" y="26" fill="#667085" font-size="13">à créer aujourd'hui</text></g>
<g transform="translate(140,228)"><path d="M4 4 h20 l10 10 v20 a3 3 0 0 1 -3 3 h-27 a3 3 0 0 1 -3 -3 v-27 a3 3 0 0 1 3 -3 z" fill="#fff" stroke="#667085" stroke-width="2"/><path d="M24 4 v10 h10" fill="none" stroke="#667085" stroke-width="2"/><text x="48" y="28" fill="#172033" font-weight="600">test.txt</text><text x="134" y="28" fill="#667085" font-size="13">pour vérifier l'étape 5</text></g>
<g transform="translate(20,32)"><path d="M0 6 h13 l4 6 h17 a3 3 0 0 1 3 3 v14 a3 3 0 0 1 -3 3 h-34 a3 3 0 0 1 -3 -3 v-20 a3 3 0 0 1 3 -3 z" fill="#eff6ff" stroke="var(--encre-douce)" stroke-width="2"/><text x="48" y="26" fill="var(--encre)" font-weight="600">Serveur de l'école</text></g>
<g transform="translate(60,84)"><path d="M0 6 h13 l4 6 h17 a3 3 0 0 1 3 3 v14 a3 3 0 0 1 -3 3 h-34 a3 3 0 0 1 -3 -3 v-20 a3 3 0 0 1 3 -3 z" fill="#eff6ff" stroke="var(--encre-douce)" stroke-width="2"/><text x="48" y="26" fill="var(--encre)" font-weight="600">Élèves</text></g>
<g transform="translate(100,136)"><path d="M0 6 h13 l4 6 h17 a3 3 0 0 1 3 3 v14 a3 3 0 0 1 -3 3 h-34 a3 3 0 0 1 -3 -3 v-20 a3 3 0 0 1 3 -3 z" fill="#eff6ff" stroke="var(--encre-douce)" stroke-width="2"/><text x="48" y="26" fill="var(--encre)" font-weight="800">1C_dupont_marie</text><text x="215" y="26" fill="var(--encre-douce)" font-size="13">ton dossier personnel</text></g>
<g transform="translate(140,188)"><path d="M0 6 h13 l4 6 h17 a3 3 0 0 1 3 3 v14 a3 3 0 0 1 -3 3 h-34 a3 3 0 0 1 -3 -3 v-20 a3 3 0 0 1 3 -3 z" fill="#2563eb" stroke="#1d4ed8" stroke-width="2"/><rect x="42" y="7" width="78" height="23" rx="11" fill="#2563eb"/><text x="52" y="25" fill="#fff" font-weight="800">FMTTN</text><text x="134" y="26" fill="var(--encre-douce)" font-size="13">à créer aujourd'hui</text></g>
<g transform="translate(140,228)"><path d="M4 4 h20 l10 10 v20 a3 3 0 0 1 -3 3 h-27 a3 3 0 0 1 -3 -3 v-27 a3 3 0 0 1 3 -3 z" fill="#fff" stroke="var(--encre-douce)" stroke-width="2"/><path d="M24 4 v10 h10" fill="none" stroke="var(--encre-douce)" stroke-width="2"/><text x="48" y="28" fill="var(--encre)" font-weight="600">test.txt</text><text x="134" y="28" fill="var(--encre-douce)" font-size="13">pour vérifier l'étape 5</text></g>
</g>
</svg>
<figcaption>Le dossier FMTTN se crée à l'intérieur de ton dossier personnel, jamais sur le bureau. Tu écris son nom en majuscules, sans espace ni accent.</figcaption>
@@ -334,7 +181,7 @@ footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:cente
<!-- 5 -->
<section class="panel" id="p4"><div class="card">
<div class="entete"><div><h2>Ma trace écrite</h2><p class="muted">Ton livret, dernière page. Complète les mots manquants.</p></div><span class="score">10 min</span></div>
<div class="carte-entete"><div><h2>Ma trace écrite</h2><p class="muted">Ton livret, dernière page. Complète les mots manquants.</p></div><span class="score">10 min</span></div>
<div class="row" style="margin-bottom:16px">
<button class="btn primary" id="motSuiv">Révéler le mot suivant</button>
@@ -347,7 +194,7 @@ footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:cente
<!-- 6 -->
<section class="panel" id="p5"><div class="card">
<div class="entete"><div><h2>Avant de partir</h2><p class="muted">On fait ces trois gestes à la fin de chaque cours, toute l'année.</p></div><span class="score">5 min</span></div>
<div class="carte-entete"><div><h2>Avant de partir</h2><p class="muted">On fait ces trois gestes à la fin de chaque cours, toute l'année.</p></div><span class="score">5 min</span></div>
<div class="check">
<label><input type="checkbox"><span>Je ferme ma session. Éteindre l'écran ne suffit pas.</span></label>
<label><input type="checkbox"><span>Je range ma chaise et je ne laisse rien sur la table.</span></label>
@@ -358,7 +205,9 @@ footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:cente
</div></section>
</main>
<footer>Cours 1 · Formation numérique · 1re année · M. Courcelle</footer>
<footer class="pied">
<div class="pied__interieur">Cours 1 · Formation numérique · 1re année · M. Courcelle</div>
</footer>
<script>
"use strict";
@@ -566,8 +415,8 @@ function dessineTrace(){
return "<p>"+par.map(function(x){
if(typeof x==="number"){
return x<=reveles
? '<b style="color:#1d4ed8">'+MOTS[x]+'</b>'
: '<span style="border-bottom:2px solid #93c5fd;color:#93c5fd">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>';
? '<b style="color:var(--accent-encre)">'+MOTS[x]+'</b>'
: '<span style="border-bottom:2px solid var(--accent);color:var(--accent)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>';
}
return x;
}).join("")+"</p>";