maj 1re tc
This commit is contained in:
lrdlg
@@ -1,198 +1,45 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="fr">
|
<html lang="fr">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>Cours 1 – Ouvrir le cours</title>
|
<title>Cours 1, ouvrir le cours — 1re tronc commun</title>
|
||||||
<style>:root{--ink:#172033;--muted:#667085;--blue:#2563eb;--navy:#172554;--green:#16a34a;--red:#dc2626;--card:#fff;--line:#e5e7eb;--shadow:0 18px 45px #0f172a18}
|
<meta name="robots" content="noindex">
|
||||||
*{box-sizing:border-box}html{scroll-behavior:smooth}
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
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)}
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
button,input,select{font:inherit}
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
|
||||||
main{max-width:1180px;margin:auto;padding:34px 20px 70px}
|
<link rel="stylesheet" href="../assets/theme.css">
|
||||||
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
|
<link rel="stylesheet" href="../assets/numerique-1re.css">
|
||||||
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>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="classe-tc">
|
||||||
<main>
|
|
||||||
|
|
||||||
<section class="hero">
|
<header class="entete">
|
||||||
<div>
|
<div class="entete__interieur entete__interieur--large">
|
||||||
<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>
|
<nav class="ariane" aria-label="Fil d'Ariane">
|
||||||
<div class="eyebrow">Cours 1 · Formation numérique · 1re année</div>
|
<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>
|
<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>
|
<p class="entete__meta">Cours 1 · Formation numérique · 1re année</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>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="hero-visual">
|
</header>
|
||||||
<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>
|
<main class="contenu contenu--large">
|
||||||
<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>
|
<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>
|
||||||
</div>
|
|
||||||
</section>
|
<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">
|
<section class="dashboard">
|
||||||
<div class="stat"><small>Activité en cours</small><strong id="sPhase">1 sur 6</strong></div>
|
<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">
|
<div class="row">
|
||||||
<button class="btn primary" id="btnGo">Démarrer</button>
|
<button class="btn primary" id="btnGo">Démarrer</button>
|
||||||
<button class="btn soft" id="btnStop">Remettre à zéro</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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -213,7 +60,7 @@ footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:cente
|
|||||||
|
|
||||||
<!-- 1 -->
|
<!-- 1 -->
|
||||||
<section class="panel active" id="p0"><div class="card">
|
<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>
|
<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>
|
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 -->
|
<!-- 2 -->
|
||||||
<section class="panel" id="p1"><div class="card">
|
<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="accordeon" id="regles"></div>
|
||||||
<div class="consigne" style="margin-bottom:0"><small>Pour terminer</small>
|
<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>
|
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 -->
|
<!-- 3 -->
|
||||||
<section class="panel" id="p2"><div class="card">
|
<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>
|
<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>
|
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 -->
|
<!-- 4 -->
|
||||||
<section class="panel" id="p3"><div class="card">
|
<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="steps" id="etapes"></div>
|
||||||
<div class="row" style="margin-top:14px">
|
<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>
|
<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">
|
<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>
|
<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>
|
<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>
|
</defs>
|
||||||
<g font-family="Inter, system-ui, sans-serif">
|
<g font-family="Inter, system-ui, sans-serif">
|
||||||
<circle cx="72" cy="112" r="19" 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="#172554" 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"/>
|
<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="198" text-anchor="middle" font-size="13" font-weight="800" fill="#fff">mon compte</text>
|
||||||
<text x="72" y="224" text-anchor="middle" font-size="12.5" fill="#667085">Marie, 1C</text>
|
<text x="72" y="224" text-anchor="middle" font-size="12.5" fill="var(--encre-douce)">Marie, 1C</text>
|
||||||
<g stroke="#172554" stroke-width="2.5" fill="#f8fafc">
|
<g stroke="var(--encre)" stroke-width="2.5" fill="var(--papier)">
|
||||||
<rect x="212" y="44" width="118" height="76" rx="8"/><rect x="212" y="168" width="118" height="76" rx="8"/>
|
<rect x="212" y="44" width="118" height="76" rx="8"/><rect x="212" y="168" width="118" height="76" rx="8"/>
|
||||||
</g>
|
</g>
|
||||||
<path d="M255 120 h32 M271 120 v14 M253 134 h36" stroke="#172554" stroke-width="2.5" fill="none"/>
|
<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="#172554" 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="#172554">Poste 3</text>
|
<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="#172554">Poste 17</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"/>
|
<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>
|
<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)"/>
|
<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>
|
<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 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="#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="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="#667085">je peux m'asseoir</text>
|
<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="#667085">à n'importe quel poste</text>
|
<text x="128" y="272" font-size="12.5" fill="var(--encre-douce)">à n'importe quel poste</text>
|
||||||
<g transform="translate(560,100)">
|
<g transform="translate(560,100)">
|
||||||
<ellipse cx="80" cy="14" rx="80" ry="16" 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="#172554" stroke-width="2.5" fill="none"/>
|
<path d="M0 14 v74" stroke="var(--encre)" stroke-width="2.5" fill="none"/>
|
||||||
<path d="M160 14 v74" stroke="#172554" 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="#172554" stroke-width="2.5"/>
|
<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"/>
|
<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"/>
|
<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>
|
<text x="80" y="158" text-anchor="middle" font-size="12.5" font-weight="800" fill="#fff">mon dossier personnel</text>
|
||||||
</g>
|
</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 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="#172554" 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="352" y="256" font-size="13" font-weight="800" fill="#172554">mon dossier me suit d'un poste à l'autre</text>
|
<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>
|
</g>
|
||||||
</svg>
|
</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>
|
<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>
|
<figure>
|
||||||
<svg viewBox="0 0 620 290" role="img" aria-label="Le dossier FMTTN se trouve à l'intérieur du dossier personnel">
|
<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 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="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"/>
|
<path d="M126 160 v92"/><path d="M126 204 h26"/><path d="M126 246 h26"/>
|
||||||
</g>
|
</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(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="#667085" stroke-width="2"/><text x="48" y="26" fill="#172033" font-weight="600">Élèves</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="#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(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="#667085" font-size="13">à créer aujourd'hui</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="#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(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>
|
</g>
|
||||||
</svg>
|
</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>
|
<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 -->
|
<!-- 5 -->
|
||||||
<section class="panel" id="p4"><div class="card">
|
<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">
|
<div class="row" style="margin-bottom:16px">
|
||||||
<button class="btn primary" id="motSuiv">Révéler le mot suivant</button>
|
<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 -->
|
<!-- 6 -->
|
||||||
<section class="panel" id="p5"><div class="card">
|
<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">
|
<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 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>
|
<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>
|
</div></section>
|
||||||
|
|
||||||
</main>
|
</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>
|
<script>
|
||||||
"use strict";
|
"use strict";
|
||||||
@@ -566,8 +415,8 @@ function dessineTrace(){
|
|||||||
return "<p>"+par.map(function(x){
|
return "<p>"+par.map(function(x){
|
||||||
if(typeof x==="number"){
|
if(typeof x==="number"){
|
||||||
return x<=reveles
|
return x<=reveles
|
||||||
? '<b style="color:#1d4ed8">'+MOTS[x]+'</b>'
|
? '<b style="color:var(--accent-encre)">'+MOTS[x]+'</b>'
|
||||||
: '<span style="border-bottom:2px solid #93c5fd;color:#93c5fd"> </span>';
|
: '<span style="border-bottom:2px solid var(--accent);color:var(--accent)"> </span>';
|
||||||
}
|
}
|
||||||
return x;
|
return x;
|
||||||
}).join("")+"</p>";
|
}).join("")+"</p>";
|
||||||
|
|||||||
@@ -1,202 +1,49 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="fr">
|
<html lang="fr">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>Bloc 1 – Ouvrir le cours et savoir où l'on met les pieds</title>
|
<title>Bloc 1, pilotage — 1re tronc commun</title>
|
||||||
<style>:root{--ink:#172033;--muted:#667085;--blue:#2563eb;--navy:#172554;--green:#16a34a;--red:#dc2626;--card:#fff;--line:#e5e7eb;--shadow:0 18px 45px #0f172a18}
|
<meta name="robots" content="noindex">
|
||||||
*{box-sizing:border-box}html{scroll-behavior:smooth}
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
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)}
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
button,input,select{font:inherit}
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
|
||||||
main{max-width:1180px;margin:auto;padding:34px 20px 70px}
|
<link rel="stylesheet" href="../assets/theme.css">
|
||||||
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
|
<link rel="stylesheet" href="../assets/numerique-1re.css">
|
||||||
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>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="classe-tc">
|
||||||
<main>
|
|
||||||
|
|
||||||
<section class="hero">
|
<header class="entete">
|
||||||
<div>
|
<div class="entete__interieur entete__interieur--large">
|
||||||
<a class="up" href="pilotage.html"><svg class="i" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg> Retour au menu des blocs</a>
|
<nav class="ariane" aria-label="Fil d'Ariane">
|
||||||
<div class="eyebrow">Document enseignant · Module 1 · Semaine 1 · Bloc 1 sur 35</div>
|
<a href="../index.html">Mes cours</a><span aria-hidden="true">/</span><a href="index.html">1re tronc commun</a><span aria-hidden="true">/</span><a href="pilotage.html">Pilotage</a><span aria-hidden="true">/</span><strong>Bloc 1</strong>
|
||||||
|
</nav>
|
||||||
<h1>Ouvrir le cours et savoir où l'on met les pieds</h1>
|
<h1>Ouvrir le cours et savoir où l'on met les pieds</h1>
|
||||||
<p style="margin-bottom:10px"><a href="1TC-NUM_bloc-01_ouvrir-le-cours.html" style="color:#fff;font-weight:800">Ouvrir la version à projeter aux élèves</a></p>
|
<p class="entete__meta">Document enseignant · Module 1 · Semaine 1 · Bloc 1 sur 35</p>
|
||||||
<p>Établir le cadre du local, mesurer ce que les élèves ramènent réellement du fondamental, et vérifier que chaque compte fonctionne avant que le module 1 ne démarre au bloc 2.</p>
|
|
||||||
<div class="badges">
|
|
||||||
<span class="badge">1TC-NUM · 1re secondaire</span>
|
|
||||||
<span class="badge">2 périodes · 100 minutes</span>
|
|
||||||
<span class="badge">Champ Informations et données</span>
|
|
||||||
<span class="badge warn">Aucun attendu prescrit · non cotable</span>
|
|
||||||
<span class="badge warn">Ne pas projeter</span>
|
|
||||||
<span class="badge">Première rencontre : bien-être numérique (brochure)</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="hero-visual">
|
</header>
|
||||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M12 3v3M5.6 5.6l2.1 2.1M3 12h3M5.6 18.4l2.1-2.1M12 18v3M18.4 18.4l-2.1-2.1M21 12h-3M18.4 5.6l-2.1 2.1"/><circle cx="12" cy="12" r="3"/></svg><b>Accroche</b></div>
|
|
||||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M6 3h9l4 4v14H6z"/><path d="M14 3v5h5M9 13h7M9 17h5"/></svg><b>Charte</b></div>
|
<main class="contenu contenu--large">
|
||||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M9.5 9a2.5 2.5 0 1 1 3.4 2.3c-.6.3-.9.8-.9 1.4v.6"/><circle cx="12" cy="17" r="1"/><circle cx="12" cy="12" r="9"/></svg><b>Diagnostic</b></div>
|
|
||||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="13" rx="2"/><path d="M8 21h8M12 17v4M8.5 10.5l2 2 4.5-4.5"/></svg><b>Connexion</b></div>
|
<p class="chapeau"><a href="1TC-NUM_bloc-01_ouvrir-le-cours.html">Ouvrir la version à projeter aux élèves</a></p>
|
||||||
</div>
|
<p class="chapeau">Établir le cadre du local, mesurer ce que les élèves ramènent réellement du fondamental, et vérifier que chaque compte fonctionne avant que le module 1 ne démarre au bloc 2.</p>
|
||||||
</section>
|
|
||||||
|
<ul class="etiquettes">
|
||||||
|
<li class="etiquette">1TC-NUM · 1re secondaire</li>
|
||||||
|
<li class="etiquette">2 périodes · 100 minutes</li>
|
||||||
|
<li class="etiquette">Champ Informations et données</li>
|
||||||
|
<li class="etiquette etiquette--alerte">Aucun attendu prescrit · non cotable</li>
|
||||||
|
<li class="etiquette etiquette--alerte">Ne pas projeter</li>
|
||||||
|
<li class="etiquette">Première rencontre : bien-être numérique (brochure)</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<ul class="apercu">
|
||||||
|
<li><svg viewBox="0 0 24 24"><path d="M12 3v3M5.6 5.6l2.1 2.1M3 12h3M5.6 18.4l2.1-2.1M12 18v3M18.4 18.4l-2.1-2.1M21 12h-3M18.4 5.6l-2.1 2.1"/><circle cx="12" cy="12" r="3"/></svg><span>Accroche</span></li>
|
||||||
|
<li><svg viewBox="0 0 24 24"><path d="M6 3h9l4 4v14H6z"/><path d="M14 3v5h5M9 13h7M9 17h5"/></svg><span>Charte</span></li>
|
||||||
|
<li><svg viewBox="0 0 24 24"><path d="M9.5 9a2.5 2.5 0 1 1 3.4 2.3c-.6.3-.9.8-.9 1.4v.6"/><circle cx="12" cy="17" r="1"/><circle cx="12" cy="12" r="9"/></svg><span>Diagnostic</span></li>
|
||||||
|
<li><svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="13" rx="2"/><path d="M8 21h8M12 17v4M8.5 10.5l2 2 4.5-4.5"/></svg><span>Connexion</span></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
<section class="dashboard">
|
<section class="dashboard">
|
||||||
<div class="stat"><small>Temps écoulé</small><strong id="sTemps">00:00</strong></div>
|
<div class="stat"><small>Temps écoulé</small><strong id="sTemps">00:00</strong></div>
|
||||||
@@ -209,7 +56,7 @@ footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:cente
|
|||||||
<div class="row">
|
<div class="row">
|
||||||
<button class="btn primary" id="btnGo">Démarrer la séance</button>
|
<button class="btn primary" id="btnGo">Démarrer la séance</button>
|
||||||
<button class="btn soft" id="btnStop">Remettre à zéro</button>
|
<button class="btn soft" id="btnStop">Remettre à zéro</button>
|
||||||
<span class="ecart" id="ecart" style="background:#f1f5f9;border:1px solid var(--line);color:#475569">Séance non démarrée</span>
|
<span class="ecart" id="ecart" style="background:var(--papier);border:1px solid var(--line);color:var(--encre-douce)">Séance non démarrée</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -217,7 +64,7 @@ footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:cente
|
|||||||
|
|
||||||
<!-- 1. ACCROCHE -->
|
<!-- 1. ACCROCHE -->
|
||||||
<section class="panel active" id="p0"><div class="card">
|
<section class="panel active" id="p0"><div class="card">
|
||||||
<div class="entete">
|
<div class="carte-entete">
|
||||||
<div><h2>Accroche débranchée</h2><p class="muted">Machines éteintes. Cinq minutes d'écriture individuelle, cinq minutes de recensement, cinq minutes de classement. Les catégories ne sont pas données, elles émergent de la classe.</p></div>
|
<div><h2>Accroche débranchée</h2><p class="muted">Machines éteintes. Cinq minutes d'écriture individuelle, cinq minutes de recensement, cinq minutes de classement. Les catégories ne sont pas données, elles émergent de la classe.</p></div>
|
||||||
<span class="score">15 min · de 0 à 15</span>
|
<span class="score">15 min · de 0 à 15</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -241,7 +88,7 @@ footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:cente
|
|||||||
|
|
||||||
<!-- 2. CHARTE -->
|
<!-- 2. CHARTE -->
|
||||||
<section class="panel" id="p1"><div class="card">
|
<section class="panel" id="p1"><div class="card">
|
||||||
<div class="entete">
|
<div class="carte-entete">
|
||||||
<div><h2>Charte du local</h2><p class="muted">Pour chaque règle, poser la question à la classe avant d'ouvrir la justification : à ton avis, pourquoi cette règle existe.</p></div>
|
<div><h2>Charte du local</h2><p class="muted">Pour chaque règle, poser la question à la classe avant d'ouvrir la justification : à ton avis, pourquoi cette règle existe.</p></div>
|
||||||
<span class="score">15 min · de 15 à 30</span>
|
<span class="score">15 min · de 15 à 30</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -251,7 +98,7 @@ footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:cente
|
|||||||
|
|
||||||
<!-- 3. DIAGNOSTIC -->
|
<!-- 3. DIAGNOSTIC -->
|
||||||
<section class="panel" id="p2"><div class="card">
|
<section class="panel" id="p2"><div class="card">
|
||||||
<div class="entete">
|
<div class="carte-entete">
|
||||||
<div><h2>Diagnostic du déjà-là</h2><p class="muted">Quinze minutes de passation sur papier, en silence. Dix minutes de correction collective ici.</p></div>
|
<div><h2>Diagnostic du déjà-là</h2><p class="muted">Quinze minutes de passation sur papier, en silence. Dix minutes de correction collective ici.</p></div>
|
||||||
<span class="score">25 min · de 30 à 55</span>
|
<span class="score">25 min · de 30 à 55</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -274,7 +121,7 @@ footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:cente
|
|||||||
|
|
||||||
<!-- 4. CONNEXION -->
|
<!-- 4. CONNEXION -->
|
||||||
<section class="panel" id="p3"><div class="card">
|
<section class="panel" id="p3"><div class="card">
|
||||||
<div class="entete">
|
<div class="carte-entete">
|
||||||
<div><h2>Première connexion</h2><p class="muted">Cinq étapes énoncées une par une, jamais les cinq d'un coup.</p></div>
|
<div><h2>Première connexion</h2><p class="muted">Cinq étapes énoncées une par une, jamais les cinq d'un coup.</p></div>
|
||||||
<span class="score">30 min · de 55 à 85</span>
|
<span class="score">30 min · de 55 à 85</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -293,49 +140,49 @@ footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:cente
|
|||||||
<figure>
|
<figure>
|
||||||
<svg viewBox="0 0 780 300" role="img" aria-label="Schéma montrant qu'un élève retrouve son dossier personnel depuis n'importe quel poste, alors que le bureau reste attaché à une seule machine">
|
<svg viewBox="0 0 780 300" role="img" aria-label="Schéma montrant qu'un élève retrouve son dossier personnel depuis n'importe quel poste, alors que le bureau reste attaché à une seule machine">
|
||||||
<defs>
|
<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>
|
<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>
|
</defs>
|
||||||
<g font-family="Inter, system-ui, sans-serif">
|
<g font-family="Inter, system-ui, sans-serif">
|
||||||
<circle cx="72" cy="112" r="19" 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="#172554" 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"/>
|
<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="198" text-anchor="middle" font-size="13" font-weight="800" fill="#fff">mon compte</text>
|
||||||
<text x="72" y="224" text-anchor="middle" font-size="12.5" fill="#667085">Marie, 1C</text>
|
<text x="72" y="224" text-anchor="middle" font-size="12.5" fill="var(--encre-douce)">Marie, 1C</text>
|
||||||
|
|
||||||
<g stroke="#172554" stroke-width="2.5" fill="#f8fafc">
|
<g stroke="var(--encre)" stroke-width="2.5" fill="var(--papier)">
|
||||||
<rect x="212" y="44" width="118" height="76" rx="8"/>
|
<rect x="212" y="44" width="118" height="76" rx="8"/>
|
||||||
<rect x="212" y="168" width="118" height="76" rx="8"/>
|
<rect x="212" y="168" width="118" height="76" rx="8"/>
|
||||||
</g>
|
</g>
|
||||||
<path d="M255 120 h32 M271 120 v14 M253 134 h36" stroke="#172554" stroke-width="2.5" fill="none"/>
|
<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="#172554" 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="#172554">Poste 3</text>
|
<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="#172554">Poste 17</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"/>
|
<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>
|
<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)"/>
|
<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>
|
<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 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="#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="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="#667085">je peux m'asseoir</text>
|
<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="#667085">à n'importe quel poste</text>
|
<text x="128" y="272" font-size="12.5" fill="var(--encre-douce)">à n'importe quel poste</text>
|
||||||
|
|
||||||
<g transform="translate(560,100)">
|
<g transform="translate(560,100)">
|
||||||
<ellipse cx="80" cy="14" rx="80" ry="16" 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="#172554" stroke-width="2.5" fill="none"/>
|
<path d="M0 14 v74" stroke="var(--encre)" stroke-width="2.5" fill="none"/>
|
||||||
<path d="M160 14 v74" stroke="#172554" 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="#172554" stroke-width="2.5"/>
|
<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"/>
|
<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"/>
|
<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>
|
<text x="80" y="158" text-anchor="middle" font-size="12.5" font-weight="800" fill="#fff">mon dossier personnel</text>
|
||||||
</g>
|
</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 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="#172554" 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="352" y="256" font-size="13" font-weight="800" fill="#172554">mon dossier me suit d'un poste à l'autre</text>
|
<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>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
<figcaption>Le compte suit l'élève, la machine ne le suit pas. Ce point justifie à lui seul l'étape 4 et la règle 7 de la charte. Il sera repris et approfondi au bloc 3.</figcaption>
|
<figcaption>Le compte suit l'élève, la machine ne le suit pas. Ce point justifie à lui seul l'étape 4 et la règle 7 de la charte. Il sera repris et approfondi au bloc 3.</figcaption>
|
||||||
@@ -344,35 +191,35 @@ footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:cente
|
|||||||
<figure>
|
<figure>
|
||||||
<svg viewBox="0 0 620 290" role="img" aria-label="Arborescence du dossier personnel contenant le dossier FMTTN et le fichier test point txt">
|
<svg viewBox="0 0 620 290" role="img" aria-label="Arborescence du dossier personnel contenant le dossier FMTTN et le fichier test point txt">
|
||||||
<g font-family="Inter, system-ui, sans-serif" font-size="15">
|
<g 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="M46 56 v92"/><path d="M46 100 h26"/>
|
||||||
<path d="M86 108 v92"/><path d="M86 152 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"/>
|
<path d="M126 160 v92"/><path d="M126 204 h26"/><path d="M126 246 h26"/>
|
||||||
</g>
|
</g>
|
||||||
<g transform="translate(20,32)">
|
<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"/>
|
<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="#172033" font-weight="600">Serveur de l'école</text>
|
<text x="48" y="26" fill="var(--encre)" font-weight="600">Serveur de l'école</text>
|
||||||
</g>
|
</g>
|
||||||
<g transform="translate(60,84)">
|
<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"/>
|
<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="#172033" font-weight="600">Élèves</text>
|
<text x="48" y="26" fill="var(--encre)" font-weight="600">Élèves</text>
|
||||||
</g>
|
</g>
|
||||||
<g transform="translate(100,136)">
|
<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"/>
|
<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="#172033" font-weight="800">1C_dupont_marie</text>
|
<text x="48" y="26" fill="var(--encre)" font-weight="800">1C_dupont_marie</text>
|
||||||
<text x="215" y="26" fill="#667085" font-size="13">mon dossier personnel</text>
|
<text x="215" y="26" fill="var(--encre-douce)" font-size="13">mon dossier personnel</text>
|
||||||
</g>
|
</g>
|
||||||
<g transform="translate(140,188)">
|
<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"/>
|
<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"/>
|
<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="52" y="25" fill="#fff" font-weight="800">FMTTN</text>
|
||||||
<text x="134" y="26" fill="#667085" font-size="13">à créer aujourd'hui</text>
|
<text x="134" y="26" fill="var(--encre-douce)" font-size="13">à créer aujourd'hui</text>
|
||||||
</g>
|
</g>
|
||||||
<g transform="translate(140,228)">
|
<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="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="#667085" stroke-width="2"/>
|
<path d="M24 4 v10 h10" fill="none" stroke="var(--encre-douce)" stroke-width="2"/>
|
||||||
<text x="48" y="28" fill="#172033" font-weight="600">test.txt</text>
|
<text x="48" y="28" fill="var(--encre)" font-weight="600">test.txt</text>
|
||||||
<text x="134" y="28" fill="#667085" font-size="13">vérification de l'étape 5</text>
|
<text x="134" y="28" fill="var(--encre-douce)" font-size="13">vérification de l'étape 5</text>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
@@ -384,7 +231,7 @@ footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:cente
|
|||||||
|
|
||||||
<!-- 5. TRACE -->
|
<!-- 5. TRACE -->
|
||||||
<section class="panel" id="p4"><div class="card">
|
<section class="panel" id="p4"><div class="card">
|
||||||
<div class="entete">
|
<div class="carte-entete">
|
||||||
<div><h2>Trace écrite</h2><p class="muted">La fiche « Mon compte scolaire » et la trace écrite figurent déjà dans le livret élève. Trois minutes pour la fiche, cinq pour compléter les mots manquants de la trace.</p></div>
|
<div><h2>Trace écrite</h2><p class="muted">La fiche « Mon compte scolaire » et la trace écrite figurent déjà dans le livret élève. Trois minutes pour la fiche, cinq pour compléter les mots manquants de la trace.</p></div>
|
||||||
<span class="score">10 min · de 85 à 95</span>
|
<span class="score">10 min · de 85 à 95</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -405,7 +252,7 @@ footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:cente
|
|||||||
|
|
||||||
<!-- 6. FERMETURE -->
|
<!-- 6. FERMETURE -->
|
||||||
<section class="panel" id="p5"><div class="card">
|
<section class="panel" id="p5"><div class="card">
|
||||||
<div class="entete">
|
<div class="carte-entete">
|
||||||
<div><h2>Fermeture</h2><p class="muted">Ce geste se répète trente-cinq fois cette année et construit à lui seul l'attendu SF53, effacer toute trace de connexion sur un équipement partagé.</p></div>
|
<div><h2>Fermeture</h2><p class="muted">Ce geste se répète trente-cinq fois cette année et construit à lui seul l'attendu SF53, effacer toute trace de connexion sur un équipement partagé.</p></div>
|
||||||
<span class="score">5 min · de 95 à 100</span>
|
<span class="score">5 min · de 95 à 100</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -420,7 +267,9 @@ footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:cente
|
|||||||
</div></section>
|
</div></section>
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
<footer>Bloc 1 sur 35 · Séquence annuelle 1TC-NUM, volet numérique FMTTN · 2026-2027 · M. Courcelle</footer>
|
<footer class="pied">
|
||||||
|
<div class="pied__interieur">Bloc 1 sur 35 · Séquence annuelle 1TC-NUM, volet numérique FMTTN · 2026-2027 · M. Courcelle</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
"use strict";
|
"use strict";
|
||||||
@@ -513,7 +362,7 @@ document.getElementById("btnGo").onclick=function(){
|
|||||||
document.getElementById("btnStop").onclick=function(){
|
document.getElementById("btnStop").onclick=function(){
|
||||||
clearInterval(tick);t0=null;
|
clearInterval(tick);t0=null;
|
||||||
document.getElementById("sTemps").textContent="00:00";
|
document.getElementById("sTemps").textContent="00:00";
|
||||||
ecart.className="ecart";ecart.setAttribute("style","background:#f1f5f9;border:1px solid var(--line);color:#475569");
|
ecart.className="ecart";ecart.setAttribute("style","background:var(--papier);border:1px solid var(--line);color:var(--encre-douce)");
|
||||||
ecart.textContent="Séance non démarrée";
|
ecart.textContent="Séance non démarrée";
|
||||||
document.getElementById("btnGo").textContent="Démarrer la séance";
|
document.getElementById("btnGo").textContent="Démarrer la séance";
|
||||||
dessineRail();
|
dessineRail();
|
||||||
|
|||||||
@@ -1,220 +1,45 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="fr">
|
<html lang="fr">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>Cours 2 – Ce qu'il y a dans la boite</title>
|
<title>Cours 2, ce qu'il y a dans la boite — 1re tronc commun</title>
|
||||||
<style>:root{--ink:#172033;--muted:#667085;--blue:#2563eb;--navy:#172554;--green:#16a34a;--red:#dc2626;--card:#fff;--line:#e5e7eb;--shadow:0 18px 45px #0f172a18}
|
<meta name="robots" content="noindex">
|
||||||
*{box-sizing:border-box}html{scroll-behavior:smooth}
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
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)}
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
button,input,select{font:inherit}
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
|
||||||
main{max-width:1180px;margin:auto;padding:34px 20px 70px}
|
<link rel="stylesheet" href="../assets/theme.css">
|
||||||
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
|
<link rel="stylesheet" href="../assets/numerique-1re.css">
|
||||||
svg.i{width:1em;height:1em;vertical-align:-.14em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
|
|
||||||
|
|
||||||
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;background:linear-gradient(135deg,#172554,#2563eb);color:#fff;border-radius:28px;padding:30px;box-shadow:var(--shadow);margin-bottom:24px}
|
|
||||||
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:900;opacity:.82}
|
|
||||||
.hero h1{font-size:clamp(30px,4.6vw,52px);line-height:1;letter-spacing:-1.6px;margin:7px 0 12px}
|
|
||||||
.hero p{margin:0;color:#dbeafe;line-height:1.6;font-size:17px}
|
|
||||||
.hero a.up{display:inline-flex;align-items:center;gap:7px;color:#bfdbfe;font-weight:800;font-size:13px;text-decoration:none;margin-bottom:10px}
|
|
||||||
.hero a.up:hover{color:#fff}
|
|
||||||
.hero-visual{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
|
|
||||||
.hero-chip{background:#ffffff14;border:1px solid #ffffff28;border-radius:18px;padding:16px;text-align:center}
|
|
||||||
.hero-chip .ico{display:block;margin:0 auto 7px;width:30px;height:30px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
|
|
||||||
.hero-chip b{font-size:14px}
|
|
||||||
.badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
|
|
||||||
.badge{background:#ffffff1f;border:1px solid #ffffff2e;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:800;color:#e0ecff}
|
|
||||||
.badge.warn{background:#dc262633;border-color:#fca5a5;color:#fee2e2}
|
|
||||||
|
|
||||||
.dashboard{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
|
|
||||||
.stat{background:#fff;border:1px solid var(--line);border-radius:17px;padding:14px;box-shadow:0 8px 24px #0f172a0b}
|
|
||||||
.stat strong{display:block;font-size:22px;margin-top:3px}
|
|
||||||
.stat small{color:#64748b;font-weight:800}
|
|
||||||
.stat.ok strong{color:var(--green)}
|
|
||||||
|
|
||||||
.chrono{background:#172554;color:#fff;border-radius:20px;padding:16px 18px;box-shadow:var(--shadow);margin-bottom:20px;display:grid;gap:12px}
|
|
||||||
.chrono-haut{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
|
|
||||||
.pendule{font-size:32px;font-weight:950;font-variant-numeric:tabular-nums;line-height:1}
|
|
||||||
.pendule small{display:block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#93b4d8;margin-top:5px}
|
|
||||||
.ecart{font-size:14px;font-weight:850;padding:9px 14px;border-radius:999px;background:#ffffff1a;border:1px solid #ffffff2e;min-width:250px;text-align:center}
|
|
||||||
.ecart.avance{background:#16a34a2e;border-color:#4ade80;color:#dcfce7}
|
|
||||||
.ecart.retard{background:#dc26262e;border-color:#fca5a5;color:#fee2e2}
|
|
||||||
.chrono .row button{background:#ffffff1a;border:1px solid #ffffff30;color:#fff}
|
|
||||||
.chrono .row button.go{background:#fff;border-color:#fff;color:#172554}
|
|
||||||
|
|
||||||
.navtabs{display:grid;gap:10px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:0 8px 24px #0f172a0b;margin-bottom:20px}
|
|
||||||
.navtabs.n6{grid-template-columns:repeat(6,1fr)}
|
|
||||||
.tab{border:2px solid #e2e8f0;background:#fff;border-radius:14px;padding:12px 10px;font-weight:900;cursor:pointer;color:#334155;text-align:left;position:relative}
|
|
||||||
.tab span{display:block;font-size:11px;font-weight:800;color:#94a3b8;margin-top:3px;font-variant-numeric:tabular-nums}
|
|
||||||
.tab:hover{border-color:#93c5fd}
|
|
||||||
.tab.active{background:#2563eb;color:#fff;border-color:#2563eb;box-shadow:0 8px 18px #2563eb28}
|
|
||||||
.tab.active span{color:#c7dcff}
|
|
||||||
.tab.prevue::after{content:"";position:absolute;left:12px;right:12px;bottom:-2px;height:4px;border-radius:99px;background:#f59e0b}
|
|
||||||
|
|
||||||
.panel{display:none}.panel.active{display:block}
|
|
||||||
.card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 10px 28px #0f172a0d;margin-bottom:16px}
|
|
||||||
.card h2,.card h3{margin-top:0}
|
|
||||||
.card h2{font-size:26px;letter-spacing:-.5px}
|
|
||||||
.muted{color:var(--muted);line-height:1.6}
|
|
||||||
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
|
|
||||||
.btn{border:0;border-radius:11px;padding:10px 15px;font-weight:850;cursor:pointer;background:#eaf1ff;color:#1d4ed8}
|
|
||||||
.btn:hover{filter:brightness(.97)}
|
|
||||||
.btn.primary{background:#2563eb;color:#fff}
|
|
||||||
.btn.soft{background:#f1f5f9;color:#334155}
|
|
||||||
.score{display:inline-block;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:7px 12px;font-weight:900;font-size:14px}
|
|
||||||
.feedback{min-height:31px;margin-top:12px;font-weight:850}
|
|
||||||
.entete{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:flex-start;margin-bottom:14px}
|
|
||||||
.consigne{background:linear-gradient(145deg,#f8fafc,#eef6ff);border:2px solid #dbeafe;border-radius:18px;padding:20px 24px;font-size:20px;font-weight:800;line-height:1.45;margin:16px 0}
|
|
||||||
.consigne small{display:block;text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:900;color:var(--blue);margin-bottom:8px}
|
|
||||||
.info{border-left:4px solid #cbd5e1;background:#f8fafc;border-radius:0 12px 12px 0;padding:13px 17px;color:#475569;font-size:15px;line-height:1.6;margin-top:16px}
|
|
||||||
.info b{color:var(--ink)}
|
|
||||||
.info.alerte{border-color:#fca5a5;background:#fef4f4;color:#7f2b2b}
|
|
||||||
.info.alerte b{color:#991b1b}
|
|
||||||
|
|
||||||
.saisie{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px}
|
|
||||||
.saisie input{flex:1;min-width:210px;padding:12px 14px;border:2px solid #cbd5e1;border-radius:12px;outline:none}
|
|
||||||
.saisie input:focus{border-color:var(--blue);box-shadow:0 0 0 4px #2563eb18}
|
|
||||||
.saisie select{padding:12px 14px;border:2px solid #cbd5e1;border-radius:12px;font-weight:800}
|
|
||||||
.colonnes{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:11px}
|
|
||||||
.colonne{border:1px solid var(--line);border-radius:17px;background:#f8fbff;min-height:145px;padding:13px}
|
|
||||||
.colonne h3{font-size:14px;display:flex;justify-content:space-between;align-items:center;margin:0 0 9px;padding-bottom:8px;border-bottom:1px solid var(--line)}
|
|
||||||
.colonne h3 em{font-style:normal;color:#94a3b8;font-size:12px}
|
|
||||||
.colonne ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
|
|
||||||
.colonne li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:7px 10px;font-size:14px;font-weight:700;display:flex;justify-content:space-between;gap:6px}
|
|
||||||
.colonne li button{background:none;border:0;color:#cbd5e1;cursor:pointer;padding:0 3px;font-weight:900}
|
|
||||||
.colonne li button:hover{color:var(--red)}
|
|
||||||
|
|
||||||
.accordeon{display:grid;gap:10px}
|
|
||||||
.item{border:1px solid var(--line);border-radius:17px;background:#fff;overflow:hidden}
|
|
||||||
.item>button{width:100%;display:flex;gap:14px;align-items:flex-start;text-align:left;background:none;border:0;padding:15px 18px;cursor:pointer}
|
|
||||||
.item>button:hover{background:#f8fbff}
|
|
||||||
.item .n{width:30px;height:30px;flex:none;border-radius:10px;background:#eaf1ff;color:#1d4ed8;font-weight:950;display:grid;place-items:center;font-size:14px}
|
|
||||||
.item .t{font-weight:850;font-size:17px;flex:1}
|
|
||||||
.item .plus{color:#94a3b8;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;padding-top:6px}
|
|
||||||
.item .corps{display:none;padding:0 18px 17px 62px;color:#475569;line-height:1.6}
|
|
||||||
.item.ouvert .corps{display:block}
|
|
||||||
.item.ouvert{border-color:#93c5fd;box-shadow:0 8px 20px #2563eb14}
|
|
||||||
.item.ouvert .n{background:#2563eb;color:#fff}
|
|
||||||
|
|
||||||
.qcard{border:2px solid #dbeafe;border-radius:20px;background:linear-gradient(145deg,#fbfdff,#f4f9ff);padding:24px 26px}
|
|
||||||
.qtag{display:inline-block;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:900;margin-bottom:10px}
|
|
||||||
.qtag.cle{background:#fef3c7;color:#92400e}
|
|
||||||
.qtxt{font-size:22px;font-weight:900;line-height:1.3;letter-spacing:-.3px;margin-bottom:16px}
|
|
||||||
.answer-grid{display:grid;gap:8px}
|
|
||||||
.answer{border:2px solid #dbe3ef;background:#fff;border-radius:12px;padding:11px 14px;text-align:left;font-weight:800}
|
|
||||||
.answer.ok{border-color:#22c55e;background:#f0fdf4}
|
|
||||||
.reveal{display:none;margin-top:16px;border-top:2px dashed #dbeafe;padding-top:15px}
|
|
||||||
.reveal.on{display:block}
|
|
||||||
.verdict{font-weight:950;color:var(--green);margin-bottom:8px}
|
|
||||||
|
|
||||||
.steps{display:grid;gap:11px}
|
|
||||||
.step{border:1px solid var(--line);border-radius:17px;background:#fff;padding:16px 20px;display:flex;gap:15px;align-items:flex-start;opacity:.4}
|
|
||||||
.step.on{opacity:1;border-color:#93c5fd;box-shadow:0 8px 20px #2563eb14}
|
|
||||||
.step.fait{opacity:1}
|
|
||||||
.step .n{width:34px;height:34px;flex:none;border-radius:12px;background:#f1f5f9;color:#94a3b8;font-weight:950;display:grid;place-items:center}
|
|
||||||
.step.on .n{background:#2563eb;color:#fff}
|
|
||||||
.step.fait .n{background:#dcfce7;color:#15803d}
|
|
||||||
.step h3{margin:0 0 4px;font-size:17px}
|
|
||||||
.step p{margin:0;color:#475569;font-size:15px;line-height:1.55}
|
|
||||||
|
|
||||||
figure{margin:0 0 18px}
|
|
||||||
figure svg{width:100%;height:auto;display:block;background:#fff;border:1px solid var(--line);border-radius:18px}
|
|
||||||
figcaption{font-size:14px;color:var(--muted);margin-top:10px;line-height:1.55}
|
|
||||||
|
|
||||||
.trace{border:2px solid #dbeafe;background:linear-gradient(145deg,#fbfdff,#eef6ff);border-radius:20px;padding:26px 30px;font-size:19px;line-height:1.85}
|
|
||||||
.trace h3{margin:0 0 14px;font-size:22px}
|
|
||||||
.trace p{margin:0 0 .5em}
|
|
||||||
.trace code{background:#fff;border:1px solid #dbeafe;border-radius:6px;padding:1px 7px;font-size:.92em}
|
|
||||||
|
|
||||||
.check{display:grid;gap:9px}
|
|
||||||
.check label{display:flex;gap:13px;align-items:flex-start;border:1px solid var(--line);border-radius:15px;background:#fff;padding:14px 18px;cursor:pointer;font-weight:750}
|
|
||||||
.check label:hover{border-color:#93c5fd}
|
|
||||||
.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--green);flex:none}
|
|
||||||
.check input:checked+span{color:var(--green);font-weight:900}
|
|
||||||
|
|
||||||
table.grille{width:100%;border-collapse:collapse;font-size:15px}
|
|
||||||
table.grille th,table.grille td{border:1px solid var(--line);padding:10px 13px;text-align:left}
|
|
||||||
table.grille th{background:#f8fafc;font-weight:900;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:#475569}
|
|
||||||
table.grille td.masque{color:transparent;background:#f8fafc}
|
|
||||||
table.grille tr.on td{background:#f0fdf4}
|
|
||||||
table.grille td b{color:#15803d}
|
|
||||||
|
|
||||||
.filtres{display:flex;gap:9px;flex-wrap:wrap;align-items:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:0 8px 24px #0f172a0b;margin-bottom:20px}
|
|
||||||
.filtres .compte{margin-left:auto;font-weight:850;color:var(--muted);font-size:14px}
|
|
||||||
.module{margin-bottom:30px}
|
|
||||||
.module-tete{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px}
|
|
||||||
.module-tete h2{margin:0;font-size:25px;letter-spacing:-.6px}
|
|
||||||
.module-tete .p{background:#172554;color:#fff;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:900}
|
|
||||||
.module-tete .champ{color:var(--muted);font-size:14px;margin-left:auto}
|
|
||||||
.module-note{color:var(--muted);line-height:1.6;margin:0 0 16px;max-width:76ch}
|
|
||||||
.blocs{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
|
|
||||||
.bloc{border:1px solid var(--line);border-radius:20px;background:#fff;padding:17px 19px;display:flex;gap:15px;align-items:flex-start;text-decoration:none;color:inherit;box-shadow:0 8px 24px #0f172a08}
|
|
||||||
.bloc .n{width:40px;height:40px;flex:none;border-radius:14px;background:#f1f5f9;color:#94a3b8;font-weight:950;display:grid;place-items:center;font-size:17px}
|
|
||||||
.bloc h3{margin:0 0 5px;font-size:17px;line-height:1.3}
|
|
||||||
.bloc .att{font-size:13px;color:var(--muted);font-weight:600}
|
|
||||||
.ets{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
|
|
||||||
.et{font-size:11px;font-weight:900;border-radius:999px;padding:4px 9px;background:#f1f5f9;color:#475569}
|
|
||||||
.et.eval{background:#fee2e2;color:#991b1b}
|
|
||||||
.et.fac{background:#f3e8ff;color:#6b21a8}
|
|
||||||
.et.pret{background:#dcfce7;color:#15803d}
|
|
||||||
a.bloc:hover{border-color:#93c5fd;box-shadow:0 12px 28px #2563eb1f}
|
|
||||||
a.bloc .n{background:#2563eb;color:#fff}
|
|
||||||
.bloc.vide{border-style:dashed;opacity:.68;box-shadow:none}
|
|
||||||
.bloc.vide h3{font-weight:800}
|
|
||||||
.masque{display:none!important}
|
|
||||||
|
|
||||||
footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:center;color:#64748b;font-size:12px;border-top:1px solid var(--line)}
|
|
||||||
|
|
||||||
@media(max-width:980px){.hero{grid-template-columns:1fr}.dashboard{grid-template-columns:repeat(2,1fr)}.navtabs.n6{grid-template-columns:repeat(3,1fr)}}
|
|
||||||
@media(max-width:620px){main{padding:20px 12px 60px}.hero{padding:22px 18px}.dashboard{grid-template-columns:1fr}.navtabs.n6{grid-template-columns:repeat(2,1fr)}.blocs{grid-template-columns:1fr}.ecart{min-width:0;flex:1}.filtres .compte{margin-left:0;width:100%}}
|
|
||||||
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
|
|
||||||
@media print{.chrono,.navtabs,.filtres,.saisie{display:none}.panel{display:block!important}}
|
|
||||||
|
|
||||||
.progres{position:sticky;top:0;z-index:40;background:#fff;border:1px solid var(--line);border-radius:0 0 20px 20px;padding:12px 18px;box-shadow:0 6px 20px #0f172a12;margin-bottom:20px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
|
|
||||||
.barre{flex:1;min-width:180px;height:10px;background:#e2e8f0;border-radius:99px;overflow:hidden}
|
|
||||||
.barre i{display:block;height:100%;width:0;background:#2563eb;border-radius:99px;transition:width .25s}
|
|
||||||
.q{border:1px solid var(--line);border-radius:16px;background:#fff;padding:14px 16px;margin-bottom:10px}
|
|
||||||
.q.bon{border-color:#22c55e;background:#f2fdf6}
|
|
||||||
.q.faux{border-color:#f59e0b;background:#fffbeb}
|
|
||||||
.q .txt{font-weight:800;margin-bottom:10px;font-size:17px}
|
|
||||||
.q .opts{display:flex;gap:8px;flex-wrap:wrap}
|
|
||||||
.q .opts button{border:2px solid #dbe3ef;background:#fff;border-radius:11px;padding:9px 14px;font-weight:800;cursor:pointer;color:#334155}
|
|
||||||
.q .opts button:hover:not(:disabled){border-color:#2563eb;color:#1d4ed8}
|
|
||||||
.q .opts button:disabled{cursor:default;opacity:.55}
|
|
||||||
.q .opts button.pick{border-color:#22c55e;background:#dcfce7;color:#15803d;opacity:1}
|
|
||||||
.q .opts button.rate{border-color:#f59e0b;background:#fef3c7;color:#92400e;opacity:1}
|
|
||||||
.q .expl{display:none;margin-top:10px;font-size:15px;color:#475569;line-height:1.55;border-left:3px solid #cbd5e1;padding-left:12px}
|
|
||||||
.q.done .expl{display:block}
|
|
||||||
.figpetit{max-width:560px;margin:0 auto 14px}
|
|
||||||
#bilan{display:none}
|
|
||||||
#bilan.on{display:block}
|
|
||||||
.gros{font-size:44px;font-weight:950;line-height:1;color:#2563eb}
|
|
||||||
textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px;padding:12px;font:inherit;font-size:14px;resize:vertical}</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="classe-tc">
|
||||||
<main>
|
|
||||||
|
|
||||||
<section class="hero">
|
<header class="entete">
|
||||||
<div>
|
<div class="entete__interieur entete__interieur--large">
|
||||||
<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>
|
<nav class="ariane" aria-label="Fil d'Ariane">
|
||||||
<div class="eyebrow">Cours 2 · Formation numérique · 1re année</div>
|
<a href="../index.html">Mes cours</a><span aria-hidden="true">/</span><a href="index.html">1re tronc commun</a><span aria-hidden="true">/</span><strong>Cours 2</strong>
|
||||||
|
</nav>
|
||||||
<h1>Ce qu'il y a dans la boite</h1>
|
<h1>Ce qu'il y a dans la boite</h1>
|
||||||
<p>Aujourd'hui, on ouvre un vrai ordinateur. Tu vas apprendre à nommer ce qu'il y a dedans, à faire la différence entre le matériel et le logiciel, et à dire dans quel sens l'information circule quand on branche un appareil.</p>
|
<p class="entete__meta">Cours 2 · Formation numérique · 1re année</p>
|
||||||
<div class="badges">
|
|
||||||
<span class="badge">2 périodes</span>
|
|
||||||
<span class="badge">Cours débranché</span>
|
|
||||||
<span class="badge">Livret pages 1 à 6</span>
|
|
||||||
</div>
|
|
||||||
<div class="badges" style="display:none">
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="hero-visual">
|
</header>
|
||||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><rect x="4" y="3" width="16" height="18" rx="2"/><circle cx="12" cy="10" r="3.5"/><path d="M8 17h8"/></svg><b>La boite</b></div>
|
|
||||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M3 5h8v14H3zM13 5h8v14h-8"/><path d="M6 9h2M16 9h2"/></svg><b>Le tri</b></div>
|
<main class="contenu contenu--large">
|
||||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M4 8h11l-3-3M20 16H9l3 3"/></svg><b>Entrée, sortie</b></div>
|
|
||||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M6 3h9l4 4v14H6z"/><path d="M14 3v5h5M9 13h7M9 17h5"/></svg><b>Ma trace</b></div>
|
<p class="chapeau">Aujourd'hui, on ouvre un vrai ordinateur. Tu vas apprendre à nommer ce qu'il y a dedans, à faire la différence entre le matériel et le logiciel, et à dire dans quel sens l'information circule quand on branche un appareil.</p>
|
||||||
</div>
|
|
||||||
</section>
|
<ul class="etiquettes">
|
||||||
|
<li class="etiquette">2 périodes</li>
|
||||||
|
<li class="etiquette">Cours débranché</li>
|
||||||
|
<li class="etiquette">Livret pages 1 à 6</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<ul class="apercu">
|
||||||
|
<li><svg viewBox="0 0 24 24"><rect x="4" y="3" width="16" height="18" rx="2"/><circle cx="12" cy="10" r="3.5"/><path d="M8 17h8"/></svg><span>La boite</span></li>
|
||||||
|
<li><svg viewBox="0 0 24 24"><path d="M3 5h8v14H3zM13 5h8v14h-8"/><path d="M6 9h2M16 9h2"/></svg><span>Le tri</span></li>
|
||||||
|
<li><svg viewBox="0 0 24 24"><path d="M4 8h11l-3-3M20 16H9l3 3"/></svg><span>Entrée, sortie</span></li>
|
||||||
|
<li><svg viewBox="0 0 24 24"><path d="M6 3h9l4 4v14H6z"/><path d="M14 3v5h5M9 13h7M9 17h5"/></svg><span>Ma trace</span></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
<section class="dashboard">
|
<section class="dashboard">
|
||||||
<div class="stat"><small>Activité en cours</small><strong id="sPhase">1 sur 6</strong></div>
|
<div class="stat"><small>Activité en cours</small><strong id="sPhase">1 sur 6</strong></div>
|
||||||
@@ -227,7 +52,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
<div class="row">
|
<div class="row">
|
||||||
<button class="btn primary" id="btnGo">Démarrer</button>
|
<button class="btn primary" id="btnGo">Démarrer</button>
|
||||||
<button class="btn soft" id="btnStop">Remettre à zéro</button>
|
<button class="btn soft" id="btnStop">Remettre à zéro</button>
|
||||||
<span class="ecart" id="ecart" style="background:#f1f5f9;border:1px solid var(--line);color:#475569">Activité 1 · La question du jour</span>
|
<span class="ecart" id="ecart" style="background:var(--papier);border:1px solid var(--line);color:var(--encre-douce)">Activité 1 · La question du jour</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -235,7 +60,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
|
|
||||||
<!-- 1 -->
|
<!-- 1 -->
|
||||||
<section class="panel active" id="p0"><div class="card">
|
<section class="panel active" id="p0"><div class="card">
|
||||||
<div class="entete"><div><h2>On s'installe</h2><p class="muted">Pendant que le professeur distribue les ordinateurs et les codes.</p></div><span class="score">20 min</span></div>
|
<div class="carte-entete"><div><h2>On s'installe</h2><p class="muted">Pendant que le professeur distribue les ordinateurs et les codes.</p></div><span class="score">20 min</span></div>
|
||||||
|
|
||||||
<div class="consigne"><small>À faire tout de suite, seul et en silence</small>
|
<div class="consigne"><small>À faire tout de suite, seul et en silence</small>
|
||||||
Ouvre ton livret à la page 1.<br><br>
|
Ouvre ton livret à la page 1.<br><br>
|
||||||
@@ -248,7 +73,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
|
|
||||||
<!-- 2 -->
|
<!-- 2 -->
|
||||||
<section class="panel" id="p1"><div class="card">
|
<section class="panel" id="p1"><div class="card">
|
||||||
<div class="entete"><div><h2>La question du jour</h2><p class="muted">Ton livret, page 1.</p></div><span class="score">10 min</span></div>
|
<div class="carte-entete"><div><h2>La question du jour</h2><p class="muted">Ton livret, page 1.</p></div><span class="score">10 min</span></div>
|
||||||
|
|
||||||
<h3>Les réponses de la classe</h3>
|
<h3>Les réponses de la classe</h3>
|
||||||
<div class="saisie">
|
<div class="saisie">
|
||||||
@@ -301,7 +126,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="entete"><div><h2>Matériel et logiciel</h2><p class="muted">On lit d'abord la page « Je comprends » du livret, puis on trie.</p></div><span class="score">20 min</span></div>
|
<div class="carte-entete"><div><h2>Matériel et logiciel</h2><p class="muted">On lit d'abord la page « Je comprends » du livret, puis on trie.</p></div><span class="score">20 min</span></div>
|
||||||
|
|
||||||
<div class="consigne"><small>Consigne</small>
|
<div class="consigne"><small>Consigne</small>
|
||||||
Range chaque mot dans une des deux colonnes : ce que je peux toucher, ce que je ne peux pas toucher.<br><br>
|
Range chaque mot dans une des deux colonnes : ce que je peux toucher, ce que je ne peux pas toucher.<br><br>
|
||||||
@@ -352,7 +177,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="entete"><div><h2>Les périphériques</h2><p class="muted">On lit la page « Je comprends » du livret, puis on complète la table en binôme.</p></div><span class="score">25 min</span></div>
|
<div class="carte-entete"><div><h2>Les périphériques</h2><p class="muted">On lit la page « Je comprends » du livret, puis on complète la table en binôme.</p></div><span class="score">25 min</span></div>
|
||||||
|
|
||||||
<div class="consigne"><small>Attention au sens</small>
|
<div class="consigne"><small>Attention au sens</small>
|
||||||
On se demande toujours si l'information <b>entre dans l'ordinateur</b> ou si elle <b>sort de l'ordinateur</b>.<br>
|
On se demande toujours si l'information <b>entre dans l'ordinateur</b> ou si elle <b>sort de l'ordinateur</b>.<br>
|
||||||
@@ -361,9 +186,9 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
<figure>
|
<figure>
|
||||||
<svg viewBox="0 0 700 210" role="img" aria-label="L'information entre dans l'ordinateur par les périphériques d'entrée et en sort par les périphériques de sortie">
|
<svg viewBox="0 0 700 210" role="img" aria-label="L'information entre dans l'ordinateur par les périphériques d'entrée et en sort par les périphériques de sortie">
|
||||||
<g font-family="Inter, system-ui, sans-serif">
|
<g font-family="Inter, system-ui, sans-serif">
|
||||||
<rect x="270" y="60" width="160" height="100" rx="14" fill="#dbeafe" stroke="#172554" stroke-width="3"/>
|
<rect x="270" y="60" width="160" height="100" rx="14" fill="#dbeafe" stroke="var(--encre)" stroke-width="3"/>
|
||||||
<text x="350" y="105" text-anchor="middle" font-size="17" font-weight="800" fill="#172554">ORDINATEUR</text>
|
<text x="350" y="105" text-anchor="middle" font-size="17" font-weight="800" fill="var(--encre)">ORDINATEUR</text>
|
||||||
<text x="350" y="130" text-anchor="middle" font-size="13" fill="#475569">il traite l'information</text>
|
<text x="350" y="130" text-anchor="middle" font-size="13" fill="var(--encre-douce)">il traite l'information</text>
|
||||||
<path d="M60 110h190" stroke="#16a34a" stroke-width="4" fill="none" marker-end="url(#av)"/>
|
<path d="M60 110h190" stroke="#16a34a" stroke-width="4" fill="none" marker-end="url(#av)"/>
|
||||||
<path d="M450 110h190" stroke="#7c3aed" stroke-width="4" fill="none" marker-end="url(#am)"/>
|
<path d="M450 110h190" stroke="#7c3aed" stroke-width="4" fill="none" marker-end="url(#am)"/>
|
||||||
<defs>
|
<defs>
|
||||||
@@ -371,9 +196,9 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
<marker id="am" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M0 0 L10 5 L0 10 z" fill="#7c3aed"/></marker>
|
<marker id="am" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M0 0 L10 5 L0 10 z" fill="#7c3aed"/></marker>
|
||||||
</defs>
|
</defs>
|
||||||
<text x="155" y="96" text-anchor="middle" font-size="16" font-weight="800" fill="#15803d">ENTRÉE</text>
|
<text x="155" y="96" text-anchor="middle" font-size="16" font-weight="800" fill="#15803d">ENTRÉE</text>
|
||||||
<text x="155" y="140" text-anchor="middle" font-size="13.5" fill="#475569">souris, clavier, webcam</text>
|
<text x="155" y="140" text-anchor="middle" font-size="13.5" fill="var(--encre-douce)">souris, clavier, webcam</text>
|
||||||
<text x="545" y="96" text-anchor="middle" font-size="16" font-weight="800" fill="#6d28d9">SORTIE</text>
|
<text x="545" y="96" text-anchor="middle" font-size="16" font-weight="800" fill="#6d28d9">SORTIE</text>
|
||||||
<text x="545" y="140" text-anchor="middle" font-size="13.5" fill="#475569">écran, imprimante, haut-parleur</text>
|
<text x="545" y="140" text-anchor="middle" font-size="13.5" fill="var(--encre-douce)">écran, imprimante, haut-parleur</text>
|
||||||
<path d="M270 175 h-60 a10 10 0 0 1 -10 -10 v-20" fill="none" stroke="#0369a1" stroke-width="3" stroke-dasharray="7 5"/>
|
<path d="M270 175 h-60 a10 10 0 0 1 -10 -10 v-20" fill="none" stroke="#0369a1" stroke-width="3" stroke-dasharray="7 5"/>
|
||||||
<path d="M430 175 h60 a10 10 0 0 0 10 -10 v-20" fill="none" stroke="#0369a1" stroke-width="3" stroke-dasharray="7 5"/>
|
<path d="M430 175 h60 a10 10 0 0 0 10 -10 v-20" fill="none" stroke="#0369a1" stroke-width="3" stroke-dasharray="7 5"/>
|
||||||
<text x="350" y="196" text-anchor="middle" font-size="14.5" font-weight="800" fill="#0369a1">LES DEUX : écran tactile, casque avec micro, clé USB</text>
|
<text x="350" y="196" text-anchor="middle" font-size="14.5" font-weight="800" fill="#0369a1">LES DEUX : écran tactile, casque avec micro, clé USB</text>
|
||||||
@@ -385,14 +210,14 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
|
|
||||||
<!-- 5 -->
|
<!-- 5 -->
|
||||||
<section class="panel" id="p4"><div class="card">
|
<section class="panel" id="p4"><div class="card">
|
||||||
<div class="entete"><div><h2>Je m'entraine</h2><p class="muted">Trois exercices, 24 questions. Tu réponds, la correction s'affiche tout de suite avec l'explication.</p></div><span class="score">20 min</span></div>
|
<div class="carte-entete"><div><h2>Je m'entraine</h2><p class="muted">Trois exercices, 24 questions. Tu réponds, la correction s'affiche tout de suite avec l'explication.</p></div><span class="score">20 min</span></div>
|
||||||
|
|
||||||
<div class="consigne"><small>Avant de commencer</small>
|
<div class="consigne"><small>Avant de commencer</small>
|
||||||
Ce n'est pas coté. Rien n'est enregistré. Tu peux te tromper, c'est fait pour ça.<br><br>
|
Ce n'est pas coté. Rien n'est enregistré. Tu peux te tromper, c'est fait pour ça.<br><br>
|
||||||
À la fin, tu recopieras deux lignes de résultat dans ton livret, page « Où j'en suis ».</div>
|
À la fin, tu recopieras deux lignes de résultat dans ton livret, page « Où j'en suis ».</div>
|
||||||
|
|
||||||
<div class="progres">
|
<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>
|
<div class="barre"><i id="jauge"></i></div>
|
||||||
<span class="score" id="avancement">0 / 24</span>
|
<span class="score" id="avancement">0 / 24</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -413,7 +238,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
|
|
||||||
<div id="bilan" style="margin-top:20px">
|
<div id="bilan" style="margin-top:20px">
|
||||||
<div class="row" style="align-items:flex-end;gap:20px;margin-bottom:16px">
|
<div class="row" style="align-items:flex-end;gap:20px;margin-bottom:16px">
|
||||||
<div><span class="gros" id="gTotal">0</span><span style="font-size:22px;font-weight:800;color:#94a3b8"> / 24</span></div>
|
<div><span class="gros" id="gTotal">0</span><span style="font-size:22px;font-weight:800;color:var(--encre-douce)"> / 24</span></div>
|
||||||
<div class="muted" id="gMot" style="font-weight:800;font-size:18px"></div>
|
<div class="muted" id="gMot" style="font-weight:800;font-size:18px"></div>
|
||||||
</div>
|
</div>
|
||||||
<div id="gDetail" style="margin-bottom:16px"></div>
|
<div id="gDetail" style="margin-bottom:16px"></div>
|
||||||
@@ -437,7 +262,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
|
|
||||||
<!-- 6 -->
|
<!-- 6 -->
|
||||||
<section class="panel" id="p5"><div class="card">
|
<section class="panel" id="p5"><div class="card">
|
||||||
<div class="entete"><div><h2>Ma trace écrite</h2><p class="muted">Ton livret, dernière page. Complète les mots manquants.</p></div><span class="score">5 min</span></div>
|
<div class="carte-entete"><div><h2>Ma trace écrite</h2><p class="muted">Ton livret, dernière page. Complète les mots manquants.</p></div><span class="score">5 min</span></div>
|
||||||
|
|
||||||
<div class="row" style="margin-bottom:16px">
|
<div class="row" style="margin-bottom:16px">
|
||||||
<button class="btn primary" id="motSuiv">Révéler le mot suivant</button>
|
<button class="btn primary" id="motSuiv">Révéler le mot suivant</button>
|
||||||
@@ -459,7 +284,9 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
<footer>Cours 2 · Formation numérique · 1re année · M. Courcelle</footer>
|
<footer class="pied">
|
||||||
|
<div class="pied__interieur">Cours 2 · Formation numérique · 1re année · M. Courcelle</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
"use strict";
|
"use strict";
|
||||||
@@ -579,7 +406,7 @@ function dessineTri(){
|
|||||||
d.innerHTML='<h3>'+titres[k]+' <em>'+col[k].length+'</em></h3><ul>'
|
d.innerHTML='<h3>'+titres[k]+' <em>'+col[k].length+'</em></h3><ul>'
|
||||||
+col[k].map(function(x){
|
+col[k].map(function(x){
|
||||||
var pieg=(x==="une photo de vacances"&&nomme);
|
var pieg=(x==="une photo de vacances"&&nomme);
|
||||||
return '<li'+(pieg?' style="border-color:#dc2626;background:#fef2f2;color:#991b1b"':'')+'><span>'+x+'</span></li>';
|
return '<li'+(pieg?' style="border-color:var(--erreur);background:var(--erreur-fond);color:var(--erreur)"':'')+'><span>'+x+'</span></li>';
|
||||||
}).join("")+'</ul>';
|
}).join("")+'</ul>';
|
||||||
z.appendChild(d);
|
z.appendChild(d);
|
||||||
});
|
});
|
||||||
@@ -606,7 +433,7 @@ function dessineTable(){
|
|||||||
var h="<tr><th>Périphérique</th><th>Entrée, sortie ou les deux</th><th>À quoi il sert</th></tr>";
|
var h="<tr><th>Périphérique</th><th>Entrée, sortie ou les deux</th><th>À quoi il sert</th></tr>";
|
||||||
PERIPH.forEach(function(p,i){
|
PERIPH.forEach(function(p,i){
|
||||||
var vu=i<li;
|
var vu=i<li;
|
||||||
h+="<tr"+(vu?' class="on"':'')+"><td><b style='color:#172033'>"+p[0]+"</b></td>"
|
h+="<tr"+(vu?' class="on"':'')+"><td><b style='color:var(--encre)'>"+p[0]+"</b></td>"
|
||||||
+(vu?"<td><b>"+p[1]+"</b></td><td>"+p[2]+"</td>":'<td class="masque">.</td><td class="masque">.</td>')+"</tr>";
|
+(vu?"<td><b>"+p[1]+"</b></td><td>"+p[2]+"</td>":'<td class="masque">.</td><td class="masque">.</td>')+"</tr>";
|
||||||
});
|
});
|
||||||
zt2.innerHTML=h;
|
zt2.innerHTML=h;
|
||||||
@@ -625,8 +452,8 @@ function dessineTrace(){
|
|||||||
zt.innerHTML="<h3>Cours 2. Ce qu'il y a dans la boite</h3>"+TRACE.map(function(par){
|
zt.innerHTML="<h3>Cours 2. Ce qu'il y a dans la boite</h3>"+TRACE.map(function(par){
|
||||||
return "<p>"+par.map(function(x){
|
return "<p>"+par.map(function(x){
|
||||||
if(typeof x==="number"){
|
if(typeof x==="number"){
|
||||||
return x<=reveles?'<b style="color:#1d4ed8">'+MOTS[x]+'</b>'
|
return x<=reveles?'<b style="color:var(--accent-encre)">'+MOTS[x]+'</b>'
|
||||||
:'<span style="border-bottom:2px solid #93c5fd;color:#93c5fd"> </span>';
|
:'<span style="border-bottom:2px solid var(--accent);color:var(--accent)"> </span>';
|
||||||
}
|
}
|
||||||
return x;
|
return x;
|
||||||
}).join("")+"</p>";
|
}).join("")+"</p>";
|
||||||
|
|||||||
@@ -1,222 +1,47 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="fr">
|
<html lang="fr">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>Bloc 2 – pilotage</title>
|
<title>Bloc 2, pilotage — 1re tronc commun</title>
|
||||||
<style>:root{--ink:#172033;--muted:#667085;--blue:#2563eb;--navy:#172554;--green:#16a34a;--red:#dc2626;--card:#fff;--line:#e5e7eb;--shadow:0 18px 45px #0f172a18}
|
<meta name="robots" content="noindex">
|
||||||
*{box-sizing:border-box}html{scroll-behavior:smooth}
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
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)}
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
button,input,select{font:inherit}
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
|
||||||
main{max-width:1180px;margin:auto;padding:34px 20px 70px}
|
<link rel="stylesheet" href="../assets/theme.css">
|
||||||
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
|
<link rel="stylesheet" href="../assets/numerique-1re.css">
|
||||||
svg.i{width:1em;height:1em;vertical-align:-.14em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
|
|
||||||
|
|
||||||
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;background:linear-gradient(135deg,#172554,#2563eb);color:#fff;border-radius:28px;padding:30px;box-shadow:var(--shadow);margin-bottom:24px}
|
|
||||||
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:900;opacity:.82}
|
|
||||||
.hero h1{font-size:clamp(30px,4.6vw,52px);line-height:1;letter-spacing:-1.6px;margin:7px 0 12px}
|
|
||||||
.hero p{margin:0;color:#dbeafe;line-height:1.6;font-size:17px}
|
|
||||||
.hero a.up{display:inline-flex;align-items:center;gap:7px;color:#bfdbfe;font-weight:800;font-size:13px;text-decoration:none;margin-bottom:10px}
|
|
||||||
.hero a.up:hover{color:#fff}
|
|
||||||
.hero-visual{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
|
|
||||||
.hero-chip{background:#ffffff14;border:1px solid #ffffff28;border-radius:18px;padding:16px;text-align:center}
|
|
||||||
.hero-chip .ico{display:block;margin:0 auto 7px;width:30px;height:30px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
|
|
||||||
.hero-chip b{font-size:14px}
|
|
||||||
.badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
|
|
||||||
.badge{background:#ffffff1f;border:1px solid #ffffff2e;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:800;color:#e0ecff}
|
|
||||||
.badge.warn{background:#dc262633;border-color:#fca5a5;color:#fee2e2}
|
|
||||||
|
|
||||||
.dashboard{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
|
|
||||||
.stat{background:#fff;border:1px solid var(--line);border-radius:17px;padding:14px;box-shadow:0 8px 24px #0f172a0b}
|
|
||||||
.stat strong{display:block;font-size:22px;margin-top:3px}
|
|
||||||
.stat small{color:#64748b;font-weight:800}
|
|
||||||
.stat.ok strong{color:var(--green)}
|
|
||||||
|
|
||||||
.chrono{background:#172554;color:#fff;border-radius:20px;padding:16px 18px;box-shadow:var(--shadow);margin-bottom:20px;display:grid;gap:12px}
|
|
||||||
.chrono-haut{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
|
|
||||||
.pendule{font-size:32px;font-weight:950;font-variant-numeric:tabular-nums;line-height:1}
|
|
||||||
.pendule small{display:block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#93b4d8;margin-top:5px}
|
|
||||||
.ecart{font-size:14px;font-weight:850;padding:9px 14px;border-radius:999px;background:#ffffff1a;border:1px solid #ffffff2e;min-width:250px;text-align:center}
|
|
||||||
.ecart.avance{background:#16a34a2e;border-color:#4ade80;color:#dcfce7}
|
|
||||||
.ecart.retard{background:#dc26262e;border-color:#fca5a5;color:#fee2e2}
|
|
||||||
.chrono .row button{background:#ffffff1a;border:1px solid #ffffff30;color:#fff}
|
|
||||||
.chrono .row button.go{background:#fff;border-color:#fff;color:#172554}
|
|
||||||
|
|
||||||
.navtabs{display:grid;gap:10px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:0 8px 24px #0f172a0b;margin-bottom:20px}
|
|
||||||
.navtabs.n6{grid-template-columns:repeat(6,1fr)}
|
|
||||||
.tab{border:2px solid #e2e8f0;background:#fff;border-radius:14px;padding:12px 10px;font-weight:900;cursor:pointer;color:#334155;text-align:left;position:relative}
|
|
||||||
.tab span{display:block;font-size:11px;font-weight:800;color:#94a3b8;margin-top:3px;font-variant-numeric:tabular-nums}
|
|
||||||
.tab:hover{border-color:#93c5fd}
|
|
||||||
.tab.active{background:#2563eb;color:#fff;border-color:#2563eb;box-shadow:0 8px 18px #2563eb28}
|
|
||||||
.tab.active span{color:#c7dcff}
|
|
||||||
.tab.prevue::after{content:"";position:absolute;left:12px;right:12px;bottom:-2px;height:4px;border-radius:99px;background:#f59e0b}
|
|
||||||
|
|
||||||
.panel{display:none}.panel.active{display:block}
|
|
||||||
.card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 10px 28px #0f172a0d;margin-bottom:16px}
|
|
||||||
.card h2,.card h3{margin-top:0}
|
|
||||||
.card h2{font-size:26px;letter-spacing:-.5px}
|
|
||||||
.muted{color:var(--muted);line-height:1.6}
|
|
||||||
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
|
|
||||||
.btn{border:0;border-radius:11px;padding:10px 15px;font-weight:850;cursor:pointer;background:#eaf1ff;color:#1d4ed8}
|
|
||||||
.btn:hover{filter:brightness(.97)}
|
|
||||||
.btn.primary{background:#2563eb;color:#fff}
|
|
||||||
.btn.soft{background:#f1f5f9;color:#334155}
|
|
||||||
.score{display:inline-block;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:7px 12px;font-weight:900;font-size:14px}
|
|
||||||
.feedback{min-height:31px;margin-top:12px;font-weight:850}
|
|
||||||
.entete{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:flex-start;margin-bottom:14px}
|
|
||||||
.consigne{background:linear-gradient(145deg,#f8fafc,#eef6ff);border:2px solid #dbeafe;border-radius:18px;padding:20px 24px;font-size:20px;font-weight:800;line-height:1.45;margin:16px 0}
|
|
||||||
.consigne small{display:block;text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:900;color:var(--blue);margin-bottom:8px}
|
|
||||||
.info{border-left:4px solid #cbd5e1;background:#f8fafc;border-radius:0 12px 12px 0;padding:13px 17px;color:#475569;font-size:15px;line-height:1.6;margin-top:16px}
|
|
||||||
.info b{color:var(--ink)}
|
|
||||||
.info.alerte{border-color:#fca5a5;background:#fef4f4;color:#7f2b2b}
|
|
||||||
.info.alerte b{color:#991b1b}
|
|
||||||
|
|
||||||
.saisie{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px}
|
|
||||||
.saisie input{flex:1;min-width:210px;padding:12px 14px;border:2px solid #cbd5e1;border-radius:12px;outline:none}
|
|
||||||
.saisie input:focus{border-color:var(--blue);box-shadow:0 0 0 4px #2563eb18}
|
|
||||||
.saisie select{padding:12px 14px;border:2px solid #cbd5e1;border-radius:12px;font-weight:800}
|
|
||||||
.colonnes{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:11px}
|
|
||||||
.colonne{border:1px solid var(--line);border-radius:17px;background:#f8fbff;min-height:145px;padding:13px}
|
|
||||||
.colonne h3{font-size:14px;display:flex;justify-content:space-between;align-items:center;margin:0 0 9px;padding-bottom:8px;border-bottom:1px solid var(--line)}
|
|
||||||
.colonne h3 em{font-style:normal;color:#94a3b8;font-size:12px}
|
|
||||||
.colonne ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
|
|
||||||
.colonne li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:7px 10px;font-size:14px;font-weight:700;display:flex;justify-content:space-between;gap:6px}
|
|
||||||
.colonne li button{background:none;border:0;color:#cbd5e1;cursor:pointer;padding:0 3px;font-weight:900}
|
|
||||||
.colonne li button:hover{color:var(--red)}
|
|
||||||
|
|
||||||
.accordeon{display:grid;gap:10px}
|
|
||||||
.item{border:1px solid var(--line);border-radius:17px;background:#fff;overflow:hidden}
|
|
||||||
.item>button{width:100%;display:flex;gap:14px;align-items:flex-start;text-align:left;background:none;border:0;padding:15px 18px;cursor:pointer}
|
|
||||||
.item>button:hover{background:#f8fbff}
|
|
||||||
.item .n{width:30px;height:30px;flex:none;border-radius:10px;background:#eaf1ff;color:#1d4ed8;font-weight:950;display:grid;place-items:center;font-size:14px}
|
|
||||||
.item .t{font-weight:850;font-size:17px;flex:1}
|
|
||||||
.item .plus{color:#94a3b8;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;padding-top:6px}
|
|
||||||
.item .corps{display:none;padding:0 18px 17px 62px;color:#475569;line-height:1.6}
|
|
||||||
.item.ouvert .corps{display:block}
|
|
||||||
.item.ouvert{border-color:#93c5fd;box-shadow:0 8px 20px #2563eb14}
|
|
||||||
.item.ouvert .n{background:#2563eb;color:#fff}
|
|
||||||
|
|
||||||
.qcard{border:2px solid #dbeafe;border-radius:20px;background:linear-gradient(145deg,#fbfdff,#f4f9ff);padding:24px 26px}
|
|
||||||
.qtag{display:inline-block;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:900;margin-bottom:10px}
|
|
||||||
.qtag.cle{background:#fef3c7;color:#92400e}
|
|
||||||
.qtxt{font-size:22px;font-weight:900;line-height:1.3;letter-spacing:-.3px;margin-bottom:16px}
|
|
||||||
.answer-grid{display:grid;gap:8px}
|
|
||||||
.answer{border:2px solid #dbe3ef;background:#fff;border-radius:12px;padding:11px 14px;text-align:left;font-weight:800}
|
|
||||||
.answer.ok{border-color:#22c55e;background:#f0fdf4}
|
|
||||||
.reveal{display:none;margin-top:16px;border-top:2px dashed #dbeafe;padding-top:15px}
|
|
||||||
.reveal.on{display:block}
|
|
||||||
.verdict{font-weight:950;color:var(--green);margin-bottom:8px}
|
|
||||||
|
|
||||||
.steps{display:grid;gap:11px}
|
|
||||||
.step{border:1px solid var(--line);border-radius:17px;background:#fff;padding:16px 20px;display:flex;gap:15px;align-items:flex-start;opacity:.4}
|
|
||||||
.step.on{opacity:1;border-color:#93c5fd;box-shadow:0 8px 20px #2563eb14}
|
|
||||||
.step.fait{opacity:1}
|
|
||||||
.step .n{width:34px;height:34px;flex:none;border-radius:12px;background:#f1f5f9;color:#94a3b8;font-weight:950;display:grid;place-items:center}
|
|
||||||
.step.on .n{background:#2563eb;color:#fff}
|
|
||||||
.step.fait .n{background:#dcfce7;color:#15803d}
|
|
||||||
.step h3{margin:0 0 4px;font-size:17px}
|
|
||||||
.step p{margin:0;color:#475569;font-size:15px;line-height:1.55}
|
|
||||||
|
|
||||||
figure{margin:0 0 18px}
|
|
||||||
figure svg{width:100%;height:auto;display:block;background:#fff;border:1px solid var(--line);border-radius:18px}
|
|
||||||
figcaption{font-size:14px;color:var(--muted);margin-top:10px;line-height:1.55}
|
|
||||||
|
|
||||||
.trace{border:2px solid #dbeafe;background:linear-gradient(145deg,#fbfdff,#eef6ff);border-radius:20px;padding:26px 30px;font-size:19px;line-height:1.85}
|
|
||||||
.trace h3{margin:0 0 14px;font-size:22px}
|
|
||||||
.trace p{margin:0 0 .5em}
|
|
||||||
.trace code{background:#fff;border:1px solid #dbeafe;border-radius:6px;padding:1px 7px;font-size:.92em}
|
|
||||||
|
|
||||||
.check{display:grid;gap:9px}
|
|
||||||
.check label{display:flex;gap:13px;align-items:flex-start;border:1px solid var(--line);border-radius:15px;background:#fff;padding:14px 18px;cursor:pointer;font-weight:750}
|
|
||||||
.check label:hover{border-color:#93c5fd}
|
|
||||||
.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--green);flex:none}
|
|
||||||
.check input:checked+span{color:var(--green);font-weight:900}
|
|
||||||
|
|
||||||
table.grille{width:100%;border-collapse:collapse;font-size:15px}
|
|
||||||
table.grille th,table.grille td{border:1px solid var(--line);padding:10px 13px;text-align:left}
|
|
||||||
table.grille th{background:#f8fafc;font-weight:900;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:#475569}
|
|
||||||
table.grille td.masque{color:transparent;background:#f8fafc}
|
|
||||||
table.grille tr.on td{background:#f0fdf4}
|
|
||||||
table.grille td b{color:#15803d}
|
|
||||||
|
|
||||||
.filtres{display:flex;gap:9px;flex-wrap:wrap;align-items:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:0 8px 24px #0f172a0b;margin-bottom:20px}
|
|
||||||
.filtres .compte{margin-left:auto;font-weight:850;color:var(--muted);font-size:14px}
|
|
||||||
.module{margin-bottom:30px}
|
|
||||||
.module-tete{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px}
|
|
||||||
.module-tete h2{margin:0;font-size:25px;letter-spacing:-.6px}
|
|
||||||
.module-tete .p{background:#172554;color:#fff;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:900}
|
|
||||||
.module-tete .champ{color:var(--muted);font-size:14px;margin-left:auto}
|
|
||||||
.module-note{color:var(--muted);line-height:1.6;margin:0 0 16px;max-width:76ch}
|
|
||||||
.blocs{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
|
|
||||||
.bloc{border:1px solid var(--line);border-radius:20px;background:#fff;padding:17px 19px;display:flex;gap:15px;align-items:flex-start;text-decoration:none;color:inherit;box-shadow:0 8px 24px #0f172a08}
|
|
||||||
.bloc .n{width:40px;height:40px;flex:none;border-radius:14px;background:#f1f5f9;color:#94a3b8;font-weight:950;display:grid;place-items:center;font-size:17px}
|
|
||||||
.bloc h3{margin:0 0 5px;font-size:17px;line-height:1.3}
|
|
||||||
.bloc .att{font-size:13px;color:var(--muted);font-weight:600}
|
|
||||||
.ets{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
|
|
||||||
.et{font-size:11px;font-weight:900;border-radius:999px;padding:4px 9px;background:#f1f5f9;color:#475569}
|
|
||||||
.et.eval{background:#fee2e2;color:#991b1b}
|
|
||||||
.et.fac{background:#f3e8ff;color:#6b21a8}
|
|
||||||
.et.pret{background:#dcfce7;color:#15803d}
|
|
||||||
a.bloc:hover{border-color:#93c5fd;box-shadow:0 12px 28px #2563eb1f}
|
|
||||||
a.bloc .n{background:#2563eb;color:#fff}
|
|
||||||
.bloc.vide{border-style:dashed;opacity:.68;box-shadow:none}
|
|
||||||
.bloc.vide h3{font-weight:800}
|
|
||||||
.masque{display:none!important}
|
|
||||||
|
|
||||||
footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:center;color:#64748b;font-size:12px;border-top:1px solid var(--line)}
|
|
||||||
|
|
||||||
@media(max-width:980px){.hero{grid-template-columns:1fr}.dashboard{grid-template-columns:repeat(2,1fr)}.navtabs.n6{grid-template-columns:repeat(3,1fr)}}
|
|
||||||
@media(max-width:620px){main{padding:20px 12px 60px}.hero{padding:22px 18px}.dashboard{grid-template-columns:1fr}.navtabs.n6{grid-template-columns:repeat(2,1fr)}.blocs{grid-template-columns:1fr}.ecart{min-width:0;flex:1}.filtres .compte{margin-left:0;width:100%}}
|
|
||||||
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
|
|
||||||
@media print{.chrono,.navtabs,.filtres,.saisie{display:none}.panel{display:block!important}}
|
|
||||||
|
|
||||||
.progres{position:sticky;top:0;z-index:40;background:#fff;border:1px solid var(--line);border-radius:0 0 20px 20px;padding:12px 18px;box-shadow:0 6px 20px #0f172a12;margin-bottom:20px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
|
|
||||||
.barre{flex:1;min-width:180px;height:10px;background:#e2e8f0;border-radius:99px;overflow:hidden}
|
|
||||||
.barre i{display:block;height:100%;width:0;background:#2563eb;border-radius:99px;transition:width .25s}
|
|
||||||
.q{border:1px solid var(--line);border-radius:16px;background:#fff;padding:14px 16px;margin-bottom:10px}
|
|
||||||
.q.bon{border-color:#22c55e;background:#f2fdf6}
|
|
||||||
.q.faux{border-color:#f59e0b;background:#fffbeb}
|
|
||||||
.q .txt{font-weight:800;margin-bottom:10px;font-size:17px}
|
|
||||||
.q .opts{display:flex;gap:8px;flex-wrap:wrap}
|
|
||||||
.q .opts button{border:2px solid #dbe3ef;background:#fff;border-radius:11px;padding:9px 14px;font-weight:800;cursor:pointer;color:#334155}
|
|
||||||
.q .opts button:hover:not(:disabled){border-color:#2563eb;color:#1d4ed8}
|
|
||||||
.q .opts button:disabled{cursor:default;opacity:.55}
|
|
||||||
.q .opts button.pick{border-color:#22c55e;background:#dcfce7;color:#15803d;opacity:1}
|
|
||||||
.q .opts button.rate{border-color:#f59e0b;background:#fef3c7;color:#92400e;opacity:1}
|
|
||||||
.q .expl{display:none;margin-top:10px;font-size:15px;color:#475569;line-height:1.55;border-left:3px solid #cbd5e1;padding-left:12px}
|
|
||||||
.q.done .expl{display:block}
|
|
||||||
.figpetit{max-width:560px;margin:0 auto 14px}
|
|
||||||
#bilan{display:none}
|
|
||||||
#bilan.on{display:block}
|
|
||||||
.gros{font-size:44px;font-weight:950;line-height:1;color:#2563eb}
|
|
||||||
textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px;padding:12px;font:inherit;font-size:14px;resize:vertical}</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="classe-tc">
|
||||||
<main>
|
|
||||||
|
|
||||||
<section class="hero">
|
<header class="entete">
|
||||||
<div>
|
<div class="entete__interieur entete__interieur--large">
|
||||||
<a class="up" href="pilotage.html"><svg class="i" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg> Retour au menu</a>
|
<nav class="ariane" aria-label="Fil d'Ariane">
|
||||||
<div class="eyebrow">Document enseignant · Module 1 · Semaine 2 · Bloc 2 sur 35</div>
|
<a href="../index.html">Mes cours</a><span aria-hidden="true">/</span><a href="index.html">1re tronc commun</a><span aria-hidden="true">/</span><a href="pilotage.html">Pilotage</a><span aria-hidden="true">/</span><strong>Bloc 2</strong>
|
||||||
|
</nav>
|
||||||
<h1>Ce qu'il y a dans la boite</h1>
|
<h1>Ce qu'il y a dans la boite</h1>
|
||||||
<p style="margin-bottom:10px"><a href="1TC-NUM_bloc-02_ce-quil-y-a-dans-la-boite.html" style="color:#fff;font-weight:800">Ouvrir la version à projeter aux élèves</a></p>
|
<p class="entete__meta">Document enseignant · Module 1 · Semaine 2 · Bloc 2 sur 35</p>
|
||||||
<p>80 minutes de contenu, 20 de logistique absorbée. Les exercices sont dans l'onglet 5 de cette même page, il n'y a plus de second fichier.</p>
|
|
||||||
<div class="badges">
|
|
||||||
<span class="badge">80 min de contenu + 20 de logistique</span>
|
|
||||||
<span class="badge">S21 · hardware et software</span>
|
|
||||||
<span class="badge">S21 · terme périphérique</span>
|
|
||||||
<span class="badge warn">Ne pas projeter</span>
|
|
||||||
</div>
|
|
||||||
<div class="badges" style="display:none">
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="hero-visual">
|
</header>
|
||||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><rect x="4" y="3" width="16" height="18" rx="2"/><circle cx="12" cy="10" r="3.5"/><path d="M8 17h8"/></svg><b>La boite</b></div>
|
|
||||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M3 5h8v14H3zM13 5h8v14h-8"/><path d="M6 9h2M16 9h2"/></svg><b>Le tri</b></div>
|
<main class="contenu contenu--large">
|
||||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M4 8h11l-3-3M20 16H9l3 3"/></svg><b>Entrée, sortie</b></div>
|
|
||||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M6 3h9l4 4v14H6z"/><path d="M14 3v5h5M9 13h7M9 17h5"/></svg><b>Ma trace</b></div>
|
<p class="chapeau"><a href="1TC-NUM_bloc-02_ce-quil-y-a-dans-la-boite.html">Ouvrir la version à projeter aux élèves</a></p>
|
||||||
</div>
|
<p class="chapeau">80 minutes de contenu, 20 de logistique absorbée. Les exercices sont dans l'onglet 5 de cette même page, il n'y a plus de second fichier.</p>
|
||||||
</section>
|
|
||||||
|
<ul class="etiquettes">
|
||||||
|
<li class="etiquette">80 min de contenu + 20 de logistique</li>
|
||||||
|
<li class="etiquette">S21 · hardware et software</li>
|
||||||
|
<li class="etiquette">S21 · terme périphérique</li>
|
||||||
|
<li class="etiquette etiquette--alerte">Ne pas projeter</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<ul class="apercu">
|
||||||
|
<li><svg viewBox="0 0 24 24"><rect x="4" y="3" width="16" height="18" rx="2"/><circle cx="12" cy="10" r="3.5"/><path d="M8 17h8"/></svg><span>La boite</span></li>
|
||||||
|
<li><svg viewBox="0 0 24 24"><path d="M3 5h8v14H3zM13 5h8v14h-8"/><path d="M6 9h2M16 9h2"/></svg><span>Le tri</span></li>
|
||||||
|
<li><svg viewBox="0 0 24 24"><path d="M4 8h11l-3-3M20 16H9l3 3"/></svg><span>Entrée, sortie</span></li>
|
||||||
|
<li><svg viewBox="0 0 24 24"><path d="M6 3h9l4 4v14H6z"/><path d="M14 3v5h5M9 13h7M9 17h5"/></svg><span>Ma trace</span></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
<section class="dashboard">
|
<section class="dashboard">
|
||||||
<div class="stat"><small>Activité en cours</small><strong id="sPhase">1 sur 6</strong></div>
|
<div class="stat"><small>Activité en cours</small><strong id="sPhase">1 sur 6</strong></div>
|
||||||
@@ -229,7 +54,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
<div class="row">
|
<div class="row">
|
||||||
<button class="btn primary" id="btnGo">Démarrer</button>
|
<button class="btn primary" id="btnGo">Démarrer</button>
|
||||||
<button class="btn soft" id="btnStop">Remettre à zéro</button>
|
<button class="btn soft" id="btnStop">Remettre à zéro</button>
|
||||||
<span class="ecart" id="ecart" style="background:#f1f5f9;border:1px solid var(--line);color:#475569">Activité 1 · La question du jour</span>
|
<span class="ecart" id="ecart" style="background:var(--papier);border:1px solid var(--line);color:var(--encre-douce)">Activité 1 · La question du jour</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -237,7 +62,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
|
|
||||||
<!-- 1 -->
|
<!-- 1 -->
|
||||||
<section class="panel active" id="p0"><div class="card">
|
<section class="panel active" id="p0"><div class="card">
|
||||||
<div class="entete"><div><h2>On s'installe</h2><p class="muted">Pendant que le professeur distribue les ordinateurs et les codes.</p></div><span class="score">20 min</span></div>
|
<div class="carte-entete"><div><h2>On s'installe</h2><p class="muted">Pendant que le professeur distribue les ordinateurs et les codes.</p></div><span class="score">20 min</span></div>
|
||||||
|
|
||||||
<div class="consigne"><small>À faire tout de suite, seul et en silence</small>
|
<div class="consigne"><small>À faire tout de suite, seul et en silence</small>
|
||||||
Ouvre ton livret à la page 1.<br><br>
|
Ouvre ton livret à la page 1.<br><br>
|
||||||
@@ -255,7 +80,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
|
|
||||||
<!-- 2 -->
|
<!-- 2 -->
|
||||||
<section class="panel" id="p1"><div class="card">
|
<section class="panel" id="p1"><div class="card">
|
||||||
<div class="entete"><div><h2>La question du jour</h2><p class="muted">Ton livret, page 1.</p></div><span class="score">10 min</span></div>
|
<div class="carte-entete"><div><h2>La question du jour</h2><p class="muted">Ton livret, page 1.</p></div><span class="score">10 min</span></div>
|
||||||
|
|
||||||
<h3>Les réponses de la classe</h3>
|
<h3>Les réponses de la classe</h3>
|
||||||
<div class="saisie">
|
<div class="saisie">
|
||||||
@@ -315,7 +140,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="entete"><div><h2>Matériel et logiciel</h2><p class="muted">On lit d'abord la page « Je comprends » du livret, puis on trie.</p></div><span class="score">20 min</span></div>
|
<div class="carte-entete"><div><h2>Matériel et logiciel</h2><p class="muted">On lit d'abord la page « Je comprends » du livret, puis on trie.</p></div><span class="score">20 min</span></div>
|
||||||
|
|
||||||
<div class="consigne"><small>Consigne</small>
|
<div class="consigne"><small>Consigne</small>
|
||||||
Range chaque mot dans une des deux colonnes : ce que je peux toucher, ce que je ne peux pas toucher.<br><br>
|
Range chaque mot dans une des deux colonnes : ce que je peux toucher, ce que je ne peux pas toucher.<br><br>
|
||||||
@@ -377,7 +202,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="entete"><div><h2>Les périphériques</h2><p class="muted">On lit la page « Je comprends » du livret, puis on complète la table en binôme.</p></div><span class="score">25 min</span></div>
|
<div class="carte-entete"><div><h2>Les périphériques</h2><p class="muted">On lit la page « Je comprends » du livret, puis on complète la table en binôme.</p></div><span class="score">25 min</span></div>
|
||||||
|
|
||||||
<div class="consigne"><small>Attention au sens</small>
|
<div class="consigne"><small>Attention au sens</small>
|
||||||
On se demande toujours si l'information <b>entre dans l'ordinateur</b> ou si elle <b>sort de l'ordinateur</b>.<br>
|
On se demande toujours si l'information <b>entre dans l'ordinateur</b> ou si elle <b>sort de l'ordinateur</b>.<br>
|
||||||
@@ -386,9 +211,9 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
<figure>
|
<figure>
|
||||||
<svg viewBox="0 0 700 210" role="img" aria-label="L'information entre dans l'ordinateur par les périphériques d'entrée et en sort par les périphériques de sortie">
|
<svg viewBox="0 0 700 210" role="img" aria-label="L'information entre dans l'ordinateur par les périphériques d'entrée et en sort par les périphériques de sortie">
|
||||||
<g font-family="Inter, system-ui, sans-serif">
|
<g font-family="Inter, system-ui, sans-serif">
|
||||||
<rect x="270" y="60" width="160" height="100" rx="14" fill="#dbeafe" stroke="#172554" stroke-width="3"/>
|
<rect x="270" y="60" width="160" height="100" rx="14" fill="#dbeafe" stroke="var(--encre)" stroke-width="3"/>
|
||||||
<text x="350" y="105" text-anchor="middle" font-size="17" font-weight="800" fill="#172554">ORDINATEUR</text>
|
<text x="350" y="105" text-anchor="middle" font-size="17" font-weight="800" fill="var(--encre)">ORDINATEUR</text>
|
||||||
<text x="350" y="130" text-anchor="middle" font-size="13" fill="#475569">il traite l'information</text>
|
<text x="350" y="130" text-anchor="middle" font-size="13" fill="var(--encre-douce)">il traite l'information</text>
|
||||||
<path d="M60 110h190" stroke="#16a34a" stroke-width="4" fill="none" marker-end="url(#av)"/>
|
<path d="M60 110h190" stroke="#16a34a" stroke-width="4" fill="none" marker-end="url(#av)"/>
|
||||||
<path d="M450 110h190" stroke="#7c3aed" stroke-width="4" fill="none" marker-end="url(#am)"/>
|
<path d="M450 110h190" stroke="#7c3aed" stroke-width="4" fill="none" marker-end="url(#am)"/>
|
||||||
<defs>
|
<defs>
|
||||||
@@ -396,9 +221,9 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
<marker id="am" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M0 0 L10 5 L0 10 z" fill="#7c3aed"/></marker>
|
<marker id="am" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M0 0 L10 5 L0 10 z" fill="#7c3aed"/></marker>
|
||||||
</defs>
|
</defs>
|
||||||
<text x="155" y="96" text-anchor="middle" font-size="16" font-weight="800" fill="#15803d">ENTRÉE</text>
|
<text x="155" y="96" text-anchor="middle" font-size="16" font-weight="800" fill="#15803d">ENTRÉE</text>
|
||||||
<text x="155" y="140" text-anchor="middle" font-size="13.5" fill="#475569">souris, clavier, webcam</text>
|
<text x="155" y="140" text-anchor="middle" font-size="13.5" fill="var(--encre-douce)">souris, clavier, webcam</text>
|
||||||
<text x="545" y="96" text-anchor="middle" font-size="16" font-weight="800" fill="#6d28d9">SORTIE</text>
|
<text x="545" y="96" text-anchor="middle" font-size="16" font-weight="800" fill="#6d28d9">SORTIE</text>
|
||||||
<text x="545" y="140" text-anchor="middle" font-size="13.5" fill="#475569">écran, imprimante, haut-parleur</text>
|
<text x="545" y="140" text-anchor="middle" font-size="13.5" fill="var(--encre-douce)">écran, imprimante, haut-parleur</text>
|
||||||
<path d="M270 175 h-60 a10 10 0 0 1 -10 -10 v-20" fill="none" stroke="#0369a1" stroke-width="3" stroke-dasharray="7 5"/>
|
<path d="M270 175 h-60 a10 10 0 0 1 -10 -10 v-20" fill="none" stroke="#0369a1" stroke-width="3" stroke-dasharray="7 5"/>
|
||||||
<path d="M430 175 h60 a10 10 0 0 0 10 -10 v-20" fill="none" stroke="#0369a1" stroke-width="3" stroke-dasharray="7 5"/>
|
<path d="M430 175 h60 a10 10 0 0 0 10 -10 v-20" fill="none" stroke="#0369a1" stroke-width="3" stroke-dasharray="7 5"/>
|
||||||
<text x="350" y="196" text-anchor="middle" font-size="14.5" font-weight="800" fill="#0369a1">LES DEUX : écran tactile, casque avec micro, clé USB</text>
|
<text x="350" y="196" text-anchor="middle" font-size="14.5" font-weight="800" fill="#0369a1">LES DEUX : écran tactile, casque avec micro, clé USB</text>
|
||||||
@@ -415,14 +240,14 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
|
|
||||||
<!-- 5 -->
|
<!-- 5 -->
|
||||||
<section class="panel" id="p4"><div class="card">
|
<section class="panel" id="p4"><div class="card">
|
||||||
<div class="entete"><div><h2>Je m'entraine</h2><p class="muted">Trois exercices, 24 questions. Tu réponds, la correction s'affiche tout de suite avec l'explication.</p></div><span class="score">20 min</span></div>
|
<div class="carte-entete"><div><h2>Je m'entraine</h2><p class="muted">Trois exercices, 24 questions. Tu réponds, la correction s'affiche tout de suite avec l'explication.</p></div><span class="score">20 min</span></div>
|
||||||
|
|
||||||
<div class="consigne"><small>Avant de commencer</small>
|
<div class="consigne"><small>Avant de commencer</small>
|
||||||
Ce n'est pas coté. Rien n'est enregistré. Tu peux te tromper, c'est fait pour ça.<br><br>
|
Ce n'est pas coté. Rien n'est enregistré. Tu peux te tromper, c'est fait pour ça.<br><br>
|
||||||
À la fin, tu recopieras deux lignes de résultat dans ton livret, page « Où j'en suis ».</div>
|
À la fin, tu recopieras deux lignes de résultat dans ton livret, page « Où j'en suis ».</div>
|
||||||
|
|
||||||
<div class="progres">
|
<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>
|
<div class="barre"><i id="jauge"></i></div>
|
||||||
<span class="score" id="avancement">0 / 24</span>
|
<span class="score" id="avancement">0 / 24</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -443,7 +268,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
|
|
||||||
<div id="bilan" style="margin-top:20px">
|
<div id="bilan" style="margin-top:20px">
|
||||||
<div class="row" style="align-items:flex-end;gap:20px;margin-bottom:16px">
|
<div class="row" style="align-items:flex-end;gap:20px;margin-bottom:16px">
|
||||||
<div><span class="gros" id="gTotal">0</span><span style="font-size:22px;font-weight:800;color:#94a3b8"> / 24</span></div>
|
<div><span class="gros" id="gTotal">0</span><span style="font-size:22px;font-weight:800;color:var(--encre-douce)"> / 24</span></div>
|
||||||
<div class="muted" id="gMot" style="font-weight:800;font-size:18px"></div>
|
<div class="muted" id="gMot" style="font-weight:800;font-size:18px"></div>
|
||||||
</div>
|
</div>
|
||||||
<div id="gDetail" style="margin-bottom:16px"></div>
|
<div id="gDetail" style="margin-bottom:16px"></div>
|
||||||
@@ -472,7 +297,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
|
|
||||||
<!-- 6 -->
|
<!-- 6 -->
|
||||||
<section class="panel" id="p5"><div class="card">
|
<section class="panel" id="p5"><div class="card">
|
||||||
<div class="entete"><div><h2>Ma trace écrite</h2><p class="muted">Ton livret, dernière page. Complète les mots manquants.</p></div><span class="score">5 min</span></div>
|
<div class="carte-entete"><div><h2>Ma trace écrite</h2><p class="muted">Ton livret, dernière page. Complète les mots manquants.</p></div><span class="score">5 min</span></div>
|
||||||
|
|
||||||
<div class="row" style="margin-bottom:16px">
|
<div class="row" style="margin-bottom:16px">
|
||||||
<button class="btn primary" id="motSuiv">Révéler le mot suivant</button>
|
<button class="btn primary" id="motSuiv">Révéler le mot suivant</button>
|
||||||
@@ -498,7 +323,9 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
<footer>Bloc 2 sur 35 · Séquence annuelle 1TC-NUM, volet numérique FMTTN · 2026-2027 · M. Courcelle</footer>
|
<footer class="pied">
|
||||||
|
<div class="pied__interieur">Bloc 2 sur 35 · Séquence annuelle 1TC-NUM, volet numérique FMTTN · 2026-2027 · M. Courcelle</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
"use strict";
|
"use strict";
|
||||||
@@ -619,7 +446,7 @@ function dessineTri(){
|
|||||||
d.innerHTML='<h3>'+titres[k]+' <em>'+col[k].length+'</em></h3><ul>'
|
d.innerHTML='<h3>'+titres[k]+' <em>'+col[k].length+'</em></h3><ul>'
|
||||||
+col[k].map(function(x){
|
+col[k].map(function(x){
|
||||||
var pieg=(x==="une photo de vacances"&&nomme);
|
var pieg=(x==="une photo de vacances"&&nomme);
|
||||||
return '<li'+(pieg?' style="border-color:#dc2626;background:#fef2f2;color:#991b1b"':'')+'><span>'+x+'</span></li>';
|
return '<li'+(pieg?' style="border-color:var(--erreur);background:var(--erreur-fond);color:var(--erreur)"':'')+'><span>'+x+'</span></li>';
|
||||||
}).join("")+'</ul>';
|
}).join("")+'</ul>';
|
||||||
z.appendChild(d);
|
z.appendChild(d);
|
||||||
});
|
});
|
||||||
@@ -646,7 +473,7 @@ function dessineTable(){
|
|||||||
var h="<tr><th>Périphérique</th><th>Entrée, sortie ou les deux</th><th>À quoi il sert</th></tr>";
|
var h="<tr><th>Périphérique</th><th>Entrée, sortie ou les deux</th><th>À quoi il sert</th></tr>";
|
||||||
PERIPH.forEach(function(p,i){
|
PERIPH.forEach(function(p,i){
|
||||||
var vu=i<li;
|
var vu=i<li;
|
||||||
h+="<tr"+(vu?' class="on"':'')+"><td><b style='color:#172033'>"+p[0]+"</b></td>"
|
h+="<tr"+(vu?' class="on"':'')+"><td><b style='color:var(--encre)'>"+p[0]+"</b></td>"
|
||||||
+(vu?"<td><b>"+p[1]+"</b></td><td>"+p[2]+"</td>":'<td class="masque">.</td><td class="masque">.</td>')+"</tr>";
|
+(vu?"<td><b>"+p[1]+"</b></td><td>"+p[2]+"</td>":'<td class="masque">.</td><td class="masque">.</td>')+"</tr>";
|
||||||
});
|
});
|
||||||
zt2.innerHTML=h;
|
zt2.innerHTML=h;
|
||||||
@@ -665,8 +492,8 @@ function dessineTrace(){
|
|||||||
zt.innerHTML="<h3>Cours 2. Ce qu'il y a dans la boite</h3>"+TRACE.map(function(par){
|
zt.innerHTML="<h3>Cours 2. Ce qu'il y a dans la boite</h3>"+TRACE.map(function(par){
|
||||||
return "<p>"+par.map(function(x){
|
return "<p>"+par.map(function(x){
|
||||||
if(typeof x==="number"){
|
if(typeof x==="number"){
|
||||||
return x<=reveles?'<b style="color:#1d4ed8">'+MOTS[x]+'</b>'
|
return x<=reveles?'<b style="color:var(--accent-encre)">'+MOTS[x]+'</b>'
|
||||||
:'<span style="border-bottom:2px solid #93c5fd;color:#93c5fd"> </span>';
|
:'<span style="border-bottom:2px solid var(--accent);color:var(--accent)"> </span>';
|
||||||
}
|
}
|
||||||
return x;
|
return x;
|
||||||
}).join("")+"</p>";
|
}).join("")+"</p>";
|
||||||
|
|||||||
@@ -1,229 +1,45 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="fr">
|
<html lang="fr">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>Cours 3 – Où va ce que j'enregistre</title>
|
<title>Cours 3, où va ce que j'enregistre — 1re tronc commun</title>
|
||||||
<style>:root{--ink:#172033;--muted:#667085;--blue:#2563eb;--navy:#172554;--green:#16a34a;--red:#dc2626;--card:#fff;--line:#e5e7eb;--shadow:0 18px 45px #0f172a18}
|
<meta name="robots" content="noindex">
|
||||||
*{box-sizing:border-box}html{scroll-behavior:smooth}
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
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)}
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
button,input,select{font:inherit}
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
|
||||||
main{max-width:1180px;margin:auto;padding:34px 20px 70px}
|
<link rel="stylesheet" href="../assets/theme.css">
|
||||||
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
|
<link rel="stylesheet" href="../assets/numerique-1re.css">
|
||||||
svg.i{width:1em;height:1em;vertical-align:-.14em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
|
|
||||||
|
|
||||||
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;background:linear-gradient(135deg,#172554,#2563eb);color:#fff;border-radius:28px;padding:30px;box-shadow:var(--shadow);margin-bottom:24px}
|
|
||||||
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:900;opacity:.82}
|
|
||||||
.hero h1{font-size:clamp(30px,4.6vw,52px);line-height:1;letter-spacing:-1.6px;margin:7px 0 12px}
|
|
||||||
.hero p{margin:0;color:#dbeafe;line-height:1.6;font-size:17px}
|
|
||||||
.hero a.up{display:inline-flex;align-items:center;gap:7px;color:#bfdbfe;font-weight:800;font-size:13px;text-decoration:none;margin-bottom:10px}
|
|
||||||
.hero a.up:hover{color:#fff}
|
|
||||||
.hero-visual{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
|
|
||||||
.hero-chip{background:#ffffff14;border:1px solid #ffffff28;border-radius:18px;padding:16px;text-align:center}
|
|
||||||
.hero-chip .ico{display:block;margin:0 auto 7px;width:30px;height:30px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
|
|
||||||
.hero-chip b{font-size:14px}
|
|
||||||
.badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
|
|
||||||
.badge{background:#ffffff1f;border:1px solid #ffffff2e;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:800;color:#e0ecff}
|
|
||||||
.badge.warn{background:#dc262633;border-color:#fca5a5;color:#fee2e2}
|
|
||||||
|
|
||||||
.dashboard{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
|
|
||||||
.stat{background:#fff;border:1px solid var(--line);border-radius:17px;padding:14px;box-shadow:0 8px 24px #0f172a0b}
|
|
||||||
.stat strong{display:block;font-size:22px;margin-top:3px}
|
|
||||||
.stat small{color:#64748b;font-weight:800}
|
|
||||||
.stat.ok strong{color:var(--green)}
|
|
||||||
|
|
||||||
.chrono{background:#172554;color:#fff;border-radius:20px;padding:16px 18px;box-shadow:var(--shadow);margin-bottom:20px;display:grid;gap:12px}
|
|
||||||
.chrono-haut{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
|
|
||||||
.pendule{font-size:32px;font-weight:950;font-variant-numeric:tabular-nums;line-height:1}
|
|
||||||
.pendule small{display:block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#93b4d8;margin-top:5px}
|
|
||||||
.ecart{font-size:14px;font-weight:850;padding:9px 14px;border-radius:999px;background:#ffffff1a;border:1px solid #ffffff2e;min-width:250px;text-align:center}
|
|
||||||
.ecart.avance{background:#16a34a2e;border-color:#4ade80;color:#dcfce7}
|
|
||||||
.ecart.retard{background:#dc26262e;border-color:#fca5a5;color:#fee2e2}
|
|
||||||
.chrono .row button{background:#ffffff1a;border:1px solid #ffffff30;color:#fff}
|
|
||||||
.chrono .row button.go{background:#fff;border-color:#fff;color:#172554}
|
|
||||||
|
|
||||||
.navtabs{display:grid;gap:10px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:0 8px 24px #0f172a0b;margin-bottom:20px}
|
|
||||||
.navtabs.n6{grid-template-columns:repeat(6,1fr)}
|
|
||||||
.tab{border:2px solid #e2e8f0;background:#fff;border-radius:14px;padding:12px 10px;font-weight:900;cursor:pointer;color:#334155;text-align:left;position:relative}
|
|
||||||
.tab span{display:block;font-size:11px;font-weight:800;color:#94a3b8;margin-top:3px;font-variant-numeric:tabular-nums}
|
|
||||||
.tab:hover{border-color:#93c5fd}
|
|
||||||
.tab.active{background:#2563eb;color:#fff;border-color:#2563eb;box-shadow:0 8px 18px #2563eb28}
|
|
||||||
.tab.active span{color:#c7dcff}
|
|
||||||
.tab.prevue::after{content:"";position:absolute;left:12px;right:12px;bottom:-2px;height:4px;border-radius:99px;background:#f59e0b}
|
|
||||||
|
|
||||||
.panel{display:none}.panel.active{display:block}
|
|
||||||
.card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 10px 28px #0f172a0d;margin-bottom:16px}
|
|
||||||
.card h2,.card h3{margin-top:0}
|
|
||||||
.card h2{font-size:26px;letter-spacing:-.5px}
|
|
||||||
.muted{color:var(--muted);line-height:1.6}
|
|
||||||
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
|
|
||||||
.btn{border:0;border-radius:11px;padding:10px 15px;font-weight:850;cursor:pointer;background:#eaf1ff;color:#1d4ed8}
|
|
||||||
.btn:hover{filter:brightness(.97)}
|
|
||||||
.btn.primary{background:#2563eb;color:#fff}
|
|
||||||
.btn.soft{background:#f1f5f9;color:#334155}
|
|
||||||
.score{display:inline-block;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:7px 12px;font-weight:900;font-size:14px}
|
|
||||||
.feedback{min-height:31px;margin-top:12px;font-weight:850}
|
|
||||||
.entete{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:flex-start;margin-bottom:14px}
|
|
||||||
.consigne{background:linear-gradient(145deg,#f8fafc,#eef6ff);border:2px solid #dbeafe;border-radius:18px;padding:20px 24px;font-size:20px;font-weight:800;line-height:1.45;margin:16px 0}
|
|
||||||
.consigne small{display:block;text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:900;color:var(--blue);margin-bottom:8px}
|
|
||||||
.info{border-left:4px solid #cbd5e1;background:#f8fafc;border-radius:0 12px 12px 0;padding:13px 17px;color:#475569;font-size:15px;line-height:1.6;margin-top:16px}
|
|
||||||
.info b{color:var(--ink)}
|
|
||||||
.info.alerte{border-color:#fca5a5;background:#fef4f4;color:#7f2b2b}
|
|
||||||
.info.alerte b{color:#991b1b}
|
|
||||||
|
|
||||||
.saisie{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px}
|
|
||||||
.saisie input{flex:1;min-width:210px;padding:12px 14px;border:2px solid #cbd5e1;border-radius:12px;outline:none}
|
|
||||||
.saisie input:focus{border-color:var(--blue);box-shadow:0 0 0 4px #2563eb18}
|
|
||||||
.saisie select{padding:12px 14px;border:2px solid #cbd5e1;border-radius:12px;font-weight:800}
|
|
||||||
.colonnes{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:11px}
|
|
||||||
.colonne{border:1px solid var(--line);border-radius:17px;background:#f8fbff;min-height:145px;padding:13px}
|
|
||||||
.colonne h3{font-size:14px;display:flex;justify-content:space-between;align-items:center;margin:0 0 9px;padding-bottom:8px;border-bottom:1px solid var(--line)}
|
|
||||||
.colonne h3 em{font-style:normal;color:#94a3b8;font-size:12px}
|
|
||||||
.colonne ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
|
|
||||||
.colonne li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:7px 10px;font-size:14px;font-weight:700;display:flex;justify-content:space-between;gap:6px}
|
|
||||||
.colonne li button{background:none;border:0;color:#cbd5e1;cursor:pointer;padding:0 3px;font-weight:900}
|
|
||||||
.colonne li button:hover{color:var(--red)}
|
|
||||||
|
|
||||||
.accordeon{display:grid;gap:10px}
|
|
||||||
.item{border:1px solid var(--line);border-radius:17px;background:#fff;overflow:hidden}
|
|
||||||
.item>button{width:100%;display:flex;gap:14px;align-items:flex-start;text-align:left;background:none;border:0;padding:15px 18px;cursor:pointer}
|
|
||||||
.item>button:hover{background:#f8fbff}
|
|
||||||
.item .n{width:30px;height:30px;flex:none;border-radius:10px;background:#eaf1ff;color:#1d4ed8;font-weight:950;display:grid;place-items:center;font-size:14px}
|
|
||||||
.item .t{font-weight:850;font-size:17px;flex:1}
|
|
||||||
.item .plus{color:#94a3b8;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;padding-top:6px}
|
|
||||||
.item .corps{display:none;padding:0 18px 17px 62px;color:#475569;line-height:1.6}
|
|
||||||
.item.ouvert .corps{display:block}
|
|
||||||
.item.ouvert{border-color:#93c5fd;box-shadow:0 8px 20px #2563eb14}
|
|
||||||
.item.ouvert .n{background:#2563eb;color:#fff}
|
|
||||||
|
|
||||||
.qcard{border:2px solid #dbeafe;border-radius:20px;background:linear-gradient(145deg,#fbfdff,#f4f9ff);padding:24px 26px}
|
|
||||||
.qtag{display:inline-block;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:900;margin-bottom:10px}
|
|
||||||
.qtag.cle{background:#fef3c7;color:#92400e}
|
|
||||||
.qtxt{font-size:22px;font-weight:900;line-height:1.3;letter-spacing:-.3px;margin-bottom:16px}
|
|
||||||
.answer-grid{display:grid;gap:8px}
|
|
||||||
.answer{border:2px solid #dbe3ef;background:#fff;border-radius:12px;padding:11px 14px;text-align:left;font-weight:800}
|
|
||||||
.answer.ok{border-color:#22c55e;background:#f0fdf4}
|
|
||||||
.reveal{display:none;margin-top:16px;border-top:2px dashed #dbeafe;padding-top:15px}
|
|
||||||
.reveal.on{display:block}
|
|
||||||
.verdict{font-weight:950;color:var(--green);margin-bottom:8px}
|
|
||||||
|
|
||||||
.steps{display:grid;gap:11px}
|
|
||||||
.step{border:1px solid var(--line);border-radius:17px;background:#fff;padding:16px 20px;display:flex;gap:15px;align-items:flex-start;opacity:.4}
|
|
||||||
.step.on{opacity:1;border-color:#93c5fd;box-shadow:0 8px 20px #2563eb14}
|
|
||||||
.step.fait{opacity:1}
|
|
||||||
.step .n{width:34px;height:34px;flex:none;border-radius:12px;background:#f1f5f9;color:#94a3b8;font-weight:950;display:grid;place-items:center}
|
|
||||||
.step.on .n{background:#2563eb;color:#fff}
|
|
||||||
.step.fait .n{background:#dcfce7;color:#15803d}
|
|
||||||
.step h3{margin:0 0 4px;font-size:17px}
|
|
||||||
.step p{margin:0;color:#475569;font-size:15px;line-height:1.55}
|
|
||||||
|
|
||||||
figure{margin:0 0 18px}
|
|
||||||
figure svg{width:100%;height:auto;display:block;background:#fff;border:1px solid var(--line);border-radius:18px}
|
|
||||||
figcaption{font-size:14px;color:var(--muted);margin-top:10px;line-height:1.55}
|
|
||||||
|
|
||||||
.trace{border:2px solid #dbeafe;background:linear-gradient(145deg,#fbfdff,#eef6ff);border-radius:20px;padding:26px 30px;font-size:19px;line-height:1.85}
|
|
||||||
.trace h3{margin:0 0 14px;font-size:22px}
|
|
||||||
.trace p{margin:0 0 .5em}
|
|
||||||
.trace code{background:#fff;border:1px solid #dbeafe;border-radius:6px;padding:1px 7px;font-size:.92em}
|
|
||||||
|
|
||||||
.check{display:grid;gap:9px}
|
|
||||||
.check label{display:flex;gap:13px;align-items:flex-start;border:1px solid var(--line);border-radius:15px;background:#fff;padding:14px 18px;cursor:pointer;font-weight:750}
|
|
||||||
.check label:hover{border-color:#93c5fd}
|
|
||||||
.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--green);flex:none}
|
|
||||||
.check input:checked+span{color:var(--green);font-weight:900}
|
|
||||||
|
|
||||||
table.grille{width:100%;border-collapse:collapse;font-size:15px}
|
|
||||||
table.grille th,table.grille td{border:1px solid var(--line);padding:10px 13px;text-align:left}
|
|
||||||
table.grille th{background:#f8fafc;font-weight:900;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:#475569}
|
|
||||||
table.grille td.masque{color:transparent;background:#f8fafc}
|
|
||||||
table.grille tr.on td{background:#f0fdf4}
|
|
||||||
table.grille td b{color:#15803d}
|
|
||||||
|
|
||||||
.filtres{display:flex;gap:9px;flex-wrap:wrap;align-items:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:0 8px 24px #0f172a0b;margin-bottom:20px}
|
|
||||||
.filtres .compte{margin-left:auto;font-weight:850;color:var(--muted);font-size:14px}
|
|
||||||
.module{margin-bottom:30px}
|
|
||||||
.module-tete{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px}
|
|
||||||
.module-tete h2{margin:0;font-size:25px;letter-spacing:-.6px}
|
|
||||||
.module-tete .p{background:#172554;color:#fff;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:900}
|
|
||||||
.module-tete .champ{color:var(--muted);font-size:14px;margin-left:auto}
|
|
||||||
.module-note{color:var(--muted);line-height:1.6;margin:0 0 16px;max-width:76ch}
|
|
||||||
.blocs{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
|
|
||||||
.bloc{border:1px solid var(--line);border-radius:20px;background:#fff;padding:17px 19px;display:flex;gap:15px;align-items:flex-start;text-decoration:none;color:inherit;box-shadow:0 8px 24px #0f172a08}
|
|
||||||
.bloc .n{width:40px;height:40px;flex:none;border-radius:14px;background:#f1f5f9;color:#94a3b8;font-weight:950;display:grid;place-items:center;font-size:17px}
|
|
||||||
.bloc h3{margin:0 0 5px;font-size:17px;line-height:1.3}
|
|
||||||
.bloc .att{font-size:13px;color:var(--muted);font-weight:600}
|
|
||||||
.ets{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
|
|
||||||
.et{font-size:11px;font-weight:900;border-radius:999px;padding:4px 9px;background:#f1f5f9;color:#475569}
|
|
||||||
.et.eval{background:#fee2e2;color:#991b1b}
|
|
||||||
.et.fac{background:#f3e8ff;color:#6b21a8}
|
|
||||||
.et.pret{background:#dcfce7;color:#15803d}
|
|
||||||
a.bloc:hover{border-color:#93c5fd;box-shadow:0 12px 28px #2563eb1f}
|
|
||||||
a.bloc .n{background:#2563eb;color:#fff}
|
|
||||||
.bloc.vide{border-style:dashed;opacity:.68;box-shadow:none}
|
|
||||||
.bloc.vide h3{font-weight:800}
|
|
||||||
.masque{display:none!important}
|
|
||||||
|
|
||||||
footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:center;color:#64748b;font-size:12px;border-top:1px solid var(--line)}
|
|
||||||
|
|
||||||
@media(max-width:980px){.hero{grid-template-columns:1fr}.dashboard{grid-template-columns:repeat(2,1fr)}.navtabs.n6{grid-template-columns:repeat(3,1fr)}}
|
|
||||||
@media(max-width:620px){main{padding:20px 12px 60px}.hero{padding:22px 18px}.dashboard{grid-template-columns:1fr}.navtabs.n6{grid-template-columns:repeat(2,1fr)}.blocs{grid-template-columns:1fr}.ecart{min-width:0;flex:1}.filtres .compte{margin-left:0;width:100%}}
|
|
||||||
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
|
|
||||||
@media print{.chrono,.navtabs,.filtres,.saisie{display:none}.panel{display:block!important}}
|
|
||||||
|
|
||||||
.progres{position:sticky;top:0;z-index:40;background:#fff;border:1px solid var(--line);border-radius:0 0 20px 20px;padding:12px 18px;box-shadow:0 6px 20px #0f172a12;margin-bottom:20px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
|
|
||||||
.barre{flex:1;min-width:180px;height:10px;background:#e2e8f0;border-radius:99px;overflow:hidden}
|
|
||||||
.barre i{display:block;height:100%;width:0;background:#2563eb;border-radius:99px;transition:width .25s}
|
|
||||||
.q{border:1px solid var(--line);border-radius:16px;background:#fff;padding:14px 16px;margin-bottom:10px}
|
|
||||||
.q.bon{border-color:#22c55e;background:#f2fdf6}
|
|
||||||
.q.faux{border-color:#f59e0b;background:#fffbeb}
|
|
||||||
.q .txt{font-weight:800;margin-bottom:10px;font-size:17px}
|
|
||||||
.q .opts{display:flex;gap:8px;flex-wrap:wrap}
|
|
||||||
.q .opts button{border:2px solid #dbe3ef;background:#fff;border-radius:11px;padding:9px 14px;font-weight:800;cursor:pointer;color:#334155}
|
|
||||||
.q .opts button:hover:not(:disabled){border-color:#2563eb;color:#1d4ed8}
|
|
||||||
.q .opts button:disabled{cursor:default;opacity:.55}
|
|
||||||
.q .opts button.pick{border-color:#22c55e;background:#dcfce7;color:#15803d;opacity:1}
|
|
||||||
.q .opts button.rate{border-color:#f59e0b;background:#fef3c7;color:#92400e;opacity:1}
|
|
||||||
.q .expl{display:none;margin-top:10px;font-size:15px;color:#475569;line-height:1.55;border-left:3px solid #cbd5e1;padding-left:12px}
|
|
||||||
.q.done .expl{display:block}
|
|
||||||
.figpetit{max-width:560px;margin:0 auto 14px}
|
|
||||||
#bilan{display:none}
|
|
||||||
#bilan.on{display:block}
|
|
||||||
.gros{font-size:44px;font-weight:950;line-height:1;color:#2563eb}
|
|
||||||
textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px;padding:12px;font:inherit;font-size:14px;resize:vertical}
|
|
||||||
.fichiers{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin:14px 0}
|
|
||||||
.fic{border:2px solid #dbe3ef;background:#fff;border-radius:14px;padding:12px 14px;text-align:left;cursor:pointer;font-weight:800;font-size:14.5px;overflow-wrap:anywhere;min-width:0}
|
|
||||||
.fic small{display:block;font-weight:700;color:#64748b;margin-top:3px;font-size:13px}
|
|
||||||
.fic b{display:block;font-size:20px;color:#172554;margin-bottom:2px}
|
|
||||||
.fic:hover{border-color:#2563eb}
|
|
||||||
.fic.pris{opacity:.25;cursor:default}
|
|
||||||
.fic.rate{border-color:#f59e0b;background:#fffbeb}
|
|
||||||
.rangee{display:flex;gap:6px;flex-wrap:wrap;min-height:54px;border:2px dashed #cbd5e1;border-radius:14px;padding:8px;align-items:center}
|
|
||||||
.rangee .pas{background:#dcfce7;color:#15803d;border-radius:10px;padding:7px 10px;font-weight:900;font-size:14px}
|
|
||||||
.etape3{display:none}.etape3.on{display:block}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="classe-tc">
|
||||||
<main>
|
|
||||||
|
|
||||||
<section class="hero">
|
<header class="entete">
|
||||||
<div>
|
<div class="entete__interieur entete__interieur--large">
|
||||||
<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>
|
<nav class="ariane" aria-label="Fil d'Ariane">
|
||||||
<div class="eyebrow">Cours 3 · Formation numérique · 1re année</div>
|
<a href="../index.html">Mes cours</a><span aria-hidden="true">/</span><a href="index.html">1re tronc commun</a><span aria-hidden="true">/</span><strong>Cours 3</strong>
|
||||||
|
</nav>
|
||||||
<h1>Où va ce que j'enregistre</h1>
|
<h1>Où va ce que j'enregistre</h1>
|
||||||
<p>Pourquoi un travail non enregistré disparait, où l'ordinateur range vraiment tes fichiers, et comment lire la taille d'un fichier.</p>
|
<p class="entete__meta">Cours 3 · Formation numérique · 1re année</p>
|
||||||
<div class="badges">
|
|
||||||
<span class="badge">2 périodes</span>
|
|
||||||
<span class="badge">Livret du cours 3</span>
|
|
||||||
<span class="badge">Exercices dans l'onglet 4</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="hero-visual">
|
</header>
|
||||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M13 2L4 14h7l-1 8 9-12h-7z"/></svg><b>La coupure</b></div>
|
|
||||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><rect x="3" y="7" width="18" height="10" rx="2"/><path d="M7 7v10M11 7v10M15 7v10"/></svg><b>Les mémoires</b></div>
|
<main class="contenu contenu--large">
|
||||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><rect x="8" y="3" width="8" height="12" rx="2"/><path d="M10 15v4h4v-4M12 7v3"/></svg><b>Trois endroits</b></div>
|
|
||||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M4 20V10M10 20V4M16 20v-8M22 20H2"/></svg><b>Les tailles</b></div>
|
<p class="chapeau">Pourquoi un travail non enregistré disparait, où l'ordinateur range vraiment tes fichiers, et comment lire la taille d'un fichier.</p>
|
||||||
</div>
|
|
||||||
</section>
|
<ul class="etiquettes">
|
||||||
|
<li class="etiquette">2 périodes</li>
|
||||||
|
<li class="etiquette">Livret du cours 3</li>
|
||||||
|
<li class="etiquette">Exercices dans l'onglet 4</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<ul class="apercu">
|
||||||
|
<li><svg viewBox="0 0 24 24"><path d="M13 2L4 14h7l-1 8 9-12h-7z"/></svg><span>La coupure</span></li>
|
||||||
|
<li><svg viewBox="0 0 24 24"><rect x="3" y="7" width="18" height="10" rx="2"/><path d="M7 7v10M11 7v10M15 7v10"/></svg><span>Les mémoires</span></li>
|
||||||
|
<li><svg viewBox="0 0 24 24"><rect x="8" y="3" width="8" height="12" rx="2"/><path d="M10 15v4h4v-4M12 7v3"/></svg><span>Trois endroits</span></li>
|
||||||
|
<li><svg viewBox="0 0 24 24"><path d="M4 20V10M10 20V4M16 20v-8M22 20H2"/></svg><span>Les tailles</span></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
<section class="dashboard">
|
<section class="dashboard">
|
||||||
<div class="stat"><small>Activité en cours</small><strong id="sPhase">1 sur 6</strong></div>
|
<div class="stat"><small>Activité en cours</small><strong id="sPhase">1 sur 6</strong></div>
|
||||||
@@ -236,7 +52,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
<div class="row">
|
<div class="row">
|
||||||
<button class="btn primary" id="btnGo">Démarrer</button>
|
<button class="btn primary" id="btnGo">Démarrer</button>
|
||||||
<button class="btn soft" id="btnStop">Remettre à zéro</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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -244,7 +60,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
|
|
||||||
<!-- 1 -->
|
<!-- 1 -->
|
||||||
<section class="panel active" id="p0"><div class="card">
|
<section class="panel active" id="p0"><div class="card">
|
||||||
<div class="entete"><div><h2>La démonstration</h2><p class="muted">Regarde bien. Ensuite, livret page 1.</p></div><span class="score">10 min</span></div>
|
<div class="carte-entete"><div><h2>La démonstration</h2><p class="muted">Regarde bien. Ensuite, livret page 1.</p></div><span class="score">10 min</span></div>
|
||||||
|
|
||||||
<div class="consigne"><small>Ce qui va se passer</small>
|
<div class="consigne"><small>Ce qui va se passer</small>
|
||||||
Le professeur tape un texte, puis il coupe brutalement l'ordinateur, sans enregistrer. Il le rallume.</div>
|
Le professeur tape un texte, puis il coupe brutalement l'ordinateur, sans enregistrer. Il le rallume.</div>
|
||||||
@@ -264,7 +80,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
<!-- 2 -->
|
<!-- 2 -->
|
||||||
<section class="panel" id="p1">
|
<section class="panel" id="p1">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="entete"><div><h2>Je comprends. Les deux mémoires et le stockage</h2><p class="muted">On lit cette page ensemble. Elle est dans ton livret.</p></div><span class="score">20 min</span></div>
|
<div class="carte-entete"><div><h2>Je comprends. Les deux mémoires et le stockage</h2><p class="muted">On lit cette page ensemble. Elle est dans ton livret.</p></div><span class="score">20 min</span></div>
|
||||||
|
|
||||||
<h3>Ce qui s'est passé</h3>
|
<h3>Ce qui s'est passé</h3>
|
||||||
<p>Le texte existait bien, tu l'as vu à l'écran. Mais il se trouvait dans une mémoire qui <b>se vide dès que le courant s'arrête</b>. Un ordinateur possède plusieurs endroits pour garder des informations, et ils n'ont pas le même travail.</p>
|
<p>Le texte existait bien, tu l'as vu à l'écran. Mais il se trouvait dans une mémoire qui <b>se vide dès que le courant s'arrête</b>. Un ordinateur possède plusieurs endroits pour garder des informations, et ils n'ont pas le même travail.</p>
|
||||||
@@ -279,12 +95,12 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
<figure><svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 800 380">
|
<figure><svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 800 380">
|
||||||
|
|
||||||
<defs>
|
<defs>
|
||||||
<marker id="a" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M0 0L10 5L0 10z" fill="#172554"/></marker>
|
<marker id="a" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M0 0L10 5L0 10z" fill="var(--encre)"/></marker>
|
||||||
<marker id="v" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M0 0L10 5L0 10z" fill="#16a34a"/></marker>
|
<marker id="v" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M0 0L10 5L0 10z" fill="#16a34a"/></marker>
|
||||||
</defs>
|
</defs>
|
||||||
<g font-family="Arial, Helvetica, sans-serif">
|
<g font-family="Arial, Helvetica, sans-serif">
|
||||||
<rect x="20" y="20" width="760" height="340" rx="18" fill="#f8fafc" stroke="#cbd5e1" stroke-width="2" stroke-dasharray="6 6"/>
|
<rect x="20" y="20" width="760" height="340" rx="18" fill="var(--papier)" stroke="var(--trait-fort)" stroke-width="2" stroke-dasharray="6 6"/>
|
||||||
<text x="40" y="50" font-size="15" font-weight="bold" fill="#64748b">DANS L'ORDINATEUR</text>
|
<text x="40" y="50" font-size="15" font-weight="bold" fill="var(--encre-douce)">DANS L'ORDINATEUR</text>
|
||||||
<rect x="40" y="80" width="200" height="110" rx="14" fill="#fef3c7" stroke="#b45309" stroke-width="3"/>
|
<rect x="40" y="80" width="200" height="110" rx="14" fill="#fef3c7" stroke="#b45309" stroke-width="3"/>
|
||||||
<text x="140" y="118" text-anchor="middle" font-size="19" font-weight="bold" fill="#92400e">Mémoire vive</text>
|
<text x="140" y="118" text-anchor="middle" font-size="19" font-weight="bold" fill="#92400e">Mémoire vive</text>
|
||||||
<text x="140" y="142" text-anchor="middle" font-size="14" fill="#92400e">le plan de travail</text>
|
<text x="140" y="142" text-anchor="middle" font-size="14" fill="#92400e">le plan de travail</text>
|
||||||
@@ -292,8 +108,8 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
<rect x="300" y="80" width="180" height="110" rx="14" fill="#e0e7ff" stroke="#3730a3" stroke-width="3"/>
|
<rect x="300" y="80" width="180" height="110" rx="14" fill="#e0e7ff" stroke="#3730a3" stroke-width="3"/>
|
||||||
<text x="390" y="125" text-anchor="middle" font-size="19" font-weight="bold" fill="#3730a3">Processeur</text>
|
<text x="390" y="125" text-anchor="middle" font-size="19" font-weight="bold" fill="#3730a3">Processeur</text>
|
||||||
<text x="390" y="150" text-anchor="middle" font-size="14" fill="#3730a3">le cuisinier</text>
|
<text x="390" y="150" text-anchor="middle" font-size="14" fill="#3730a3">le cuisinier</text>
|
||||||
<path d="M240 125 H292" stroke="#172554" stroke-width="3" marker-end="url(#a)"/>
|
<path d="M240 125 H292" stroke="var(--encre)" stroke-width="3" marker-end="url(#a)"/>
|
||||||
<path d="M300 150 H248" stroke="#172554" stroke-width="3" marker-end="url(#a)"/>
|
<path d="M300 150 H248" stroke="var(--encre)" stroke-width="3" marker-end="url(#a)"/>
|
||||||
<rect x="540" y="80" width="220" height="110" rx="14" fill="#dcfce7" stroke="#15803d" stroke-width="3"/>
|
<rect x="540" y="80" width="220" height="110" rx="14" fill="#dcfce7" stroke="#15803d" stroke-width="3"/>
|
||||||
<text x="650" y="118" text-anchor="middle" font-size="19" font-weight="bold" fill="#166534">Stockage</text>
|
<text x="650" y="118" text-anchor="middle" font-size="19" font-weight="bold" fill="#166534">Stockage</text>
|
||||||
<text x="650" y="142" text-anchor="middle" font-size="14" fill="#166534">les placards</text>
|
<text x="650" y="142" text-anchor="middle" font-size="14" fill="#166534">les placards</text>
|
||||||
@@ -301,10 +117,10 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
<path d="M140 195 C140 260, 600 260, 640 198" stroke="#16a34a" stroke-width="4" fill="none" marker-end="url(#v)"/>
|
<path d="M140 195 C140 260, 600 260, 640 198" stroke="#16a34a" stroke-width="4" fill="none" marker-end="url(#v)"/>
|
||||||
<rect x="318" y="228" width="160" height="34" rx="17" fill="#16a34a"/>
|
<rect x="318" y="228" width="160" height="34" rx="17" fill="#16a34a"/>
|
||||||
<text x="398" y="251" text-anchor="middle" font-size="16" font-weight="bold" fill="#ffffff">ENREGISTRER</text>
|
<text x="398" y="251" text-anchor="middle" font-size="16" font-weight="bold" fill="#ffffff">ENREGISTRER</text>
|
||||||
<rect x="40" y="285" width="200" height="60" rx="12" fill="#f1f5f9" stroke="#475569" stroke-width="2.5"/>
|
<rect x="40" y="285" width="200" height="60" rx="12" fill="var(--papier)" stroke="var(--encre-douce)" stroke-width="2.5"/>
|
||||||
<text x="140" y="311" text-anchor="middle" font-size="17" font-weight="bold" fill="#334155">Mémoire morte</text>
|
<text x="140" y="311" text-anchor="middle" font-size="17" font-weight="bold" fill="var(--encre-douce)">Mémoire morte</text>
|
||||||
<text x="140" y="332" text-anchor="middle" font-size="13" fill="#475569">la notice d'ouverture, gravée</text>
|
<text x="140" y="332" text-anchor="middle" font-size="13" fill="var(--encre-douce)">la notice d'ouverture, gravée</text>
|
||||||
<text x="262" y="321" font-size="14" fill="#475569">sert uniquement au démarrage de la machine</text>
|
<text x="262" y="321" font-size="14" fill="var(--encre-douce)">sert uniquement au démarrage de la machine</text>
|
||||||
</g></svg>
|
</g></svg>
|
||||||
</figure>
|
</figure>
|
||||||
|
|
||||||
@@ -342,34 +158,34 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
<!-- 3 -->
|
<!-- 3 -->
|
||||||
<section class="panel" id="p2">
|
<section class="panel" id="p2">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="entete"><div><h2>Je comprends. Stockage interne et externe</h2><p class="muted">On lit cette page ensemble. Elle est dans ton livret.</p></div><span class="score">25 min</span></div>
|
<div class="carte-entete"><div><h2>Je comprends. Stockage interne et externe</h2><p class="muted">On lit cette page ensemble. Elle est dans ton livret.</p></div><span class="score">25 min</span></div>
|
||||||
|
|
||||||
<p>Tous les stockages gardent les fichiers quand on éteint. Ce qui les différencie, c'est <b>où ils se trouvent</b>.</p>
|
<p>Tous les stockages gardent les fichiers quand on éteint. Ce qui les différencie, c'est <b>où ils se trouvent</b>.</p>
|
||||||
<figure><svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 800 330">
|
<figure><svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 800 330">
|
||||||
|
|
||||||
<g font-family="Arial, Helvetica, sans-serif">
|
<g font-family="Arial, Helvetica, sans-serif">
|
||||||
<rect x="30" y="40" width="250" height="250" rx="18" fill="#eff6ff" stroke="#172554" stroke-width="3"/>
|
<rect x="30" y="40" width="250" height="250" rx="18" fill="#eff6ff" stroke="var(--encre)" stroke-width="3"/>
|
||||||
<text x="155" y="30" text-anchor="middle" font-size="15" font-weight="bold" fill="#172554">L'ORDINATEUR</text>
|
<text x="155" y="30" text-anchor="middle" font-size="15" font-weight="bold" fill="var(--encre)">L'ORDINATEUR</text>
|
||||||
<rect x="80" y="130" width="150" height="80" rx="10" fill="#dcfce7" stroke="#15803d" stroke-width="3"/>
|
<rect x="80" y="130" width="150" height="80" rx="10" fill="#dcfce7" stroke="#15803d" stroke-width="3"/>
|
||||||
<text x="155" y="165" text-anchor="middle" font-size="16" font-weight="bold" fill="#166534">Disque dur</text>
|
<text x="155" y="165" text-anchor="middle" font-size="16" font-weight="bold" fill="#166534">Disque dur</text>
|
||||||
<text x="155" y="187" text-anchor="middle" font-size="14" fill="#166534">ou SSD</text>
|
<text x="155" y="187" text-anchor="middle" font-size="14" fill="#166534">ou SSD</text>
|
||||||
<text x="155" y="250" text-anchor="middle" font-size="16" font-weight="bold" fill="#15803d">STOCKAGE INTERNE</text>
|
<text x="155" y="250" text-anchor="middle" font-size="16" font-weight="bold" fill="#15803d">STOCKAGE INTERNE</text>
|
||||||
<text x="155" y="272" text-anchor="middle" font-size="13" fill="#475569">dedans, reste sur cette machine</text>
|
<text x="155" y="272" text-anchor="middle" font-size="13" fill="var(--encre-douce)">dedans, reste sur cette machine</text>
|
||||||
<line x1="310" y1="30" x2="310" y2="300" stroke="#cbd5e1" stroke-width="2" stroke-dasharray="6 6"/>
|
<line x1="310" y1="30" x2="310" y2="300" stroke="var(--trait-fort)" stroke-width="2" stroke-dasharray="6 6"/>
|
||||||
<text x="555" y="30" text-anchor="middle" font-size="15" font-weight="bold" fill="#7c2d12">STOCKAGE EXTERNE : en dehors de l'appareil</text>
|
<text x="555" y="30" text-anchor="middle" font-size="15" font-weight="bold" fill="#7c2d12">STOCKAGE EXTERNE : en dehors de l'appareil</text>
|
||||||
<rect x="340" y="60" width="200" height="150" rx="16" fill="#fff7ed" stroke="#c2410c" stroke-width="3"/>
|
<rect x="340" y="60" width="200" height="150" rx="16" fill="#fff7ed" stroke="#c2410c" stroke-width="3"/>
|
||||||
<rect x="400" y="95" width="80" height="34" rx="6" fill="#fed7aa" stroke="#c2410c" stroke-width="2.5"/>
|
<rect x="400" y="95" width="80" height="34" rx="6" fill="#fed7aa" stroke="#c2410c" stroke-width="2.5"/>
|
||||||
<rect x="480" y="104" width="22" height="16" rx="2" fill="#94a3b8"/>
|
<rect x="480" y="104" width="22" height="16" rx="2" fill="var(--encre-douce)"/>
|
||||||
<text x="440" y="160" text-anchor="middle" font-size="15" font-weight="bold" fill="#9a3412">Clé USB</text>
|
<text x="440" y="160" text-anchor="middle" font-size="15" font-weight="bold" fill="#9a3412">Clé USB</text>
|
||||||
<text x="440" y="182" text-anchor="middle" font-size="13" fill="#9a3412">disque externe, carte SD</text>
|
<text x="440" y="182" text-anchor="middle" font-size="13" fill="#9a3412">disque externe, carte SD</text>
|
||||||
<text x="440" y="240" text-anchor="middle" font-size="14" font-weight="bold" fill="#c2410c">je l'emporte</text>
|
<text x="440" y="240" text-anchor="middle" font-size="14" font-weight="bold" fill="#c2410c">je l'emporte</text>
|
||||||
<text x="440" y="260" text-anchor="middle" font-size="13" fill="#475569">pas besoin d'internet</text>
|
<text x="440" y="260" text-anchor="middle" font-size="13" fill="var(--encre-douce)">pas besoin d'internet</text>
|
||||||
<rect x="570" y="60" width="200" height="150" rx="16" fill="#f5f3ff" stroke="#6d28d9" stroke-width="3"/>
|
<rect x="570" y="60" width="200" height="150" rx="16" fill="#f5f3ff" stroke="#6d28d9" stroke-width="3"/>
|
||||||
<path d="M620 130 a22 22 0 0 1 20 -30 a30 30 0 0 1 56 8 a20 20 0 0 1 4 40 h-72 a18 18 0 0 1 -8 -18z" fill="#ddd6fe" stroke="#6d28d9" stroke-width="2.5"/>
|
<path d="M620 130 a22 22 0 0 1 20 -30 a30 30 0 0 1 56 8 a20 20 0 0 1 4 40 h-72 a18 18 0 0 1 -8 -18z" fill="#ddd6fe" stroke="#6d28d9" stroke-width="2.5"/>
|
||||||
<text x="670" y="175" text-anchor="middle" font-size="15" font-weight="bold" fill="#5b21b6">En ligne (cloud)</text>
|
<text x="670" y="175" text-anchor="middle" font-size="15" font-weight="bold" fill="#5b21b6">En ligne (cloud)</text>
|
||||||
<text x="670" y="195" text-anchor="middle" font-size="13" fill="#5b21b6">sur un serveur, ailleurs</text>
|
<text x="670" y="195" text-anchor="middle" font-size="13" fill="#5b21b6">sur un serveur, ailleurs</text>
|
||||||
<text x="670" y="240" text-anchor="middle" font-size="14" font-weight="bold" fill="#6d28d9">accessible partout</text>
|
<text x="670" y="240" text-anchor="middle" font-size="14" font-weight="bold" fill="#6d28d9">accessible partout</text>
|
||||||
<text x="670" y="260" text-anchor="middle" font-size="13" fill="#475569">avec internet</text>
|
<text x="670" y="260" text-anchor="middle" font-size="13" fill="var(--encre-douce)">avec internet</text>
|
||||||
</g></svg>
|
</g></svg>
|
||||||
</figure>
|
</figure>
|
||||||
|
|
||||||
@@ -415,7 +231,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
<!-- 4 -->
|
<!-- 4 -->
|
||||||
<section class="panel" id="p3">
|
<section class="panel" id="p3">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="entete"><div><h2>Je comprends. La taille des fichiers</h2><p class="muted">On lit cette page ensemble. Elle est dans ton livret.</p></div><span class="score">25 min</span></div>
|
<div class="carte-entete"><div><h2>Je comprends. La taille des fichiers</h2><p class="muted">On lit cette page ensemble. Elle est dans ton livret.</p></div><span class="score">25 min</span></div>
|
||||||
|
|
||||||
<p>Un stockage n'est pas infini, comme un placard a un nombre d'étagères. La taille d'un fichier se mesure en <b>octets</b>. Une lettre tapée au clavier occupe environ un octet.</p>
|
<p>Un stockage n'est pas infini, comme un placard a un nombre d'étagères. La taille d'un fichier se mesure en <b>octets</b>. Une lettre tapée au clavier occupe environ un octet.</p>
|
||||||
<p>Pour éviter les nombres immenses, on utilise des préfixes, comme pour les mètres : <b>kilo</b> veut dire mille, comme dans kilomètre.</p>
|
<p>Pour éviter les nombres immenses, on utilise des préfixes, comme pour les mètres : <b>kilo</b> veut dire mille, comme dans kilomètre.</p>
|
||||||
@@ -423,26 +239,26 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
|
|
||||||
<g font-family="Arial, Helvetica, sans-serif" text-anchor="middle">
|
<g font-family="Arial, Helvetica, sans-serif" text-anchor="middle">
|
||||||
<g font-size="22" font-weight="bold">
|
<g font-size="22" font-weight="bold">
|
||||||
<rect x="20" y="60" width="120" height="70" rx="12" fill="#f1f5f9" stroke="#475569" stroke-width="2.5"/><text x="80" y="104" fill="#334155">octet</text>
|
<rect x="20" y="60" width="120" height="70" rx="12" fill="var(--papier)" stroke="var(--encre-douce)" stroke-width="2.5"/><text x="80" y="104" fill="var(--encre-douce)">octet</text>
|
||||||
<rect x="180" y="60" width="120" height="70" rx="12" fill="#dbeafe" stroke="#1d4ed8" stroke-width="2.5"/><text x="240" y="104" fill="#1d4ed8">Ko</text>
|
<rect x="180" y="60" width="120" height="70" rx="12" fill="#dbeafe" stroke="#1d4ed8" stroke-width="2.5"/><text x="240" y="104" fill="#1d4ed8">Ko</text>
|
||||||
<rect x="340" y="60" width="120" height="70" rx="12" fill="#dcfce7" stroke="#15803d" stroke-width="2.5"/><text x="400" y="104" fill="#15803d">Mo</text>
|
<rect x="340" y="60" width="120" height="70" rx="12" fill="#dcfce7" stroke="#15803d" stroke-width="2.5"/><text x="400" y="104" fill="#15803d">Mo</text>
|
||||||
<rect x="500" y="60" width="120" height="70" rx="12" fill="#fef3c7" stroke="#b45309" stroke-width="2.5"/><text x="560" y="104" fill="#b45309">Go</text>
|
<rect x="500" y="60" width="120" height="70" rx="12" fill="#fef3c7" stroke="#b45309" stroke-width="2.5"/><text x="560" y="104" fill="#b45309">Go</text>
|
||||||
<rect x="660" y="60" width="120" height="70" rx="12" fill="#fee2e2" stroke="#b91c1c" stroke-width="2.5"/><text x="720" y="104" fill="#b91c1c">To</text>
|
<rect x="660" y="60" width="120" height="70" rx="12" fill="#fee2e2" stroke="#b91c1c" stroke-width="2.5"/><text x="720" y="104" fill="#b91c1c">To</text>
|
||||||
</g>
|
</g>
|
||||||
<g font-size="15" font-weight="bold" fill="#172554">
|
<g font-size="15" font-weight="bold" fill="var(--encre)">
|
||||||
<text x="160" y="45">× 1000</text><text x="320" y="45">× 1000</text><text x="480" y="45">× 1000</text><text x="640" y="45">× 1000</text>
|
<text x="160" y="45">× 1000</text><text x="320" y="45">× 1000</text><text x="480" y="45">× 1000</text><text x="640" y="45">× 1000</text>
|
||||||
</g>
|
</g>
|
||||||
<g stroke="#172554" stroke-width="2.5" fill="none">
|
<g stroke="var(--encre)" stroke-width="2.5" fill="none">
|
||||||
<path d="M142 95 H176"/><path d="M302 95 H336"/><path d="M462 95 H496"/><path d="M622 95 H656"/>
|
<path d="M142 95 H176"/><path d="M302 95 H336"/><path d="M462 95 H496"/><path d="M622 95 H656"/>
|
||||||
</g>
|
</g>
|
||||||
<g font-size="13" fill="#475569">
|
<g font-size="13" fill="var(--encre-douce)">
|
||||||
<text x="80" y="160">une lettre</text>
|
<text x="80" y="160">une lettre</text>
|
||||||
<text x="240" y="160">un texte court</text>
|
<text x="240" y="160">un texte court</text>
|
||||||
<text x="400" y="160">une photo,</text><text x="400" y="178">une chanson</text>
|
<text x="400" y="160">une photo,</text><text x="400" y="178">une chanson</text>
|
||||||
<text x="560" y="160">un film,</text><text x="560" y="178">une clé USB</text>
|
<text x="560" y="160">un film,</text><text x="560" y="178">une clé USB</text>
|
||||||
<text x="720" y="160">un gros disque</text><text x="720" y="178">de sauvegarde</text>
|
<text x="720" y="160">un gros disque</text><text x="720" y="178">de sauvegarde</text>
|
||||||
</g>
|
</g>
|
||||||
<text x="400" y="225" font-size="15" font-weight="bold" fill="#172554">Plus petit ←————————————————————→ Plus grand</text>
|
<text x="400" y="225" font-size="15" font-weight="bold" fill="var(--encre)">Plus petit ←————————————————————→ Plus grand</text>
|
||||||
</g></svg>
|
</g></svg>
|
||||||
</figure>
|
</figure>
|
||||||
|
|
||||||
@@ -464,12 +280,12 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="entete"><div><h2>Je m'entraine</h2><p class="muted">Quatre exercices, 25 questions. La correction s'affiche tout de suite avec l'explication.</p></div></div>
|
<div class="carte-entete"><div><h2>Je m'entraine</h2><p class="muted">Quatre exercices, 25 questions. La correction s'affiche tout de suite avec l'explication.</p></div></div>
|
||||||
<div class="consigne"><small>Avant de commencer</small>
|
<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>
|
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">
|
<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>
|
<div class="barre"><i id="jauge"></i></div>
|
||||||
<span class="score" id="avancement">0 / 25</span>
|
<span class="score" id="avancement">0 / 25</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -488,7 +304,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
<div class="row" style="margin-top:22px"><button class="btn primary" id="voir">Voir mon résultat</button><button class="btn soft" id="reset">Tout recommencer</button></div>
|
<div 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 id="bilan" style="margin-top:20px">
|
||||||
<div class="row" style="align-items:flex-end;gap:20px;margin-bottom:16px">
|
<div class="row" style="align-items:flex-end;gap:20px;margin-bottom:16px">
|
||||||
<div><span class="gros" id="gTotal">0</span><span style="font-size:22px;font-weight:800;color:#94a3b8"> / 25</span></div>
|
<div><span class="gros" id="gTotal">0</span><span style="font-size:22px;font-weight:800;color:var(--encre-douce)"> / 25</span></div>
|
||||||
<div class="muted" id="gMot" style="font-weight:800;font-size:18px"></div>
|
<div class="muted" id="gMot" style="font-weight:800;font-size:18px"></div>
|
||||||
</div>
|
</div>
|
||||||
<div id="gDetail" style="margin-bottom:16px"></div>
|
<div id="gDetail" style="margin-bottom:16px"></div>
|
||||||
@@ -502,7 +318,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
<!-- 5 -->
|
<!-- 5 -->
|
||||||
<section class="panel" id="p4">
|
<section class="panel" id="p4">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="entete"><div><h2>La correction du classement</h2><p class="muted">On corrige ensemble.</p></div><span class="score">15 min</span></div>
|
<div class="carte-entete"><div><h2>La correction du classement</h2><p class="muted">On corrige ensemble.</p></div><span class="score">15 min</span></div>
|
||||||
<div class="row" style="margin-bottom:12px">
|
<div class="row" style="margin-bottom:12px">
|
||||||
<button class="btn primary" id="corSuiv">Révéler le fichier suivant</button>
|
<button class="btn primary" id="corSuiv">Révéler le fichier suivant</button>
|
||||||
<button class="btn soft" id="corReset">Tout masquer</button>
|
<button class="btn soft" id="corReset">Tout masquer</button>
|
||||||
@@ -524,7 +340,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
<!-- 6 -->
|
<!-- 6 -->
|
||||||
<section class="panel" id="p5">
|
<section class="panel" id="p5">
|
||||||
<div class="card">
|
<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">
|
<div class="row" style="margin-bottom:16px">
|
||||||
<button class="btn primary" id="motSuiv">Révéler le mot suivant</button>
|
<button class="btn primary" id="motSuiv">Révéler le mot suivant</button>
|
||||||
<button class="btn soft" id="motReset">Tout masquer</button>
|
<button class="btn soft" id="motReset">Tout masquer</button>
|
||||||
@@ -542,7 +358,9 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
<footer>Cours 3 · Formation numérique · 1re année · M. Courcelle</footer>
|
<footer class="pied">
|
||||||
|
<div class="pied__interieur">Cours 3 · Formation numérique · 1re année · M. Courcelle</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
"use strict";
|
"use strict";
|
||||||
@@ -695,7 +513,7 @@ var OBS=[["Le dossier du poste","Interne","Non","Non"],["La clé USB","Externe",
|
|||||||
var oi=0;
|
var oi=0;
|
||||||
function dessineObs(){
|
function dessineObs(){
|
||||||
var h="<tr><th>Où j'ai enregistré</th><th>Interne ou externe</th><th>Sur l'autre poste ?</th><th>Réseau ou internet ?</th></tr>";
|
var h="<tr><th>Où j'ai enregistré</th><th>Interne ou externe</th><th>Sur l'autre poste ?</th><th>Réseau ou internet ?</th></tr>";
|
||||||
OBS.forEach(function(o,i){var v=i<oi;h+="<tr"+(v?' class="on"':"")+"><td><b style='color:#172033'>"+o[0]+"</b></td>"+(v?"<td><b>"+o[1]+"</b></td><td><b>"+o[2]+"</b></td><td><b>"+o[3]+"</b></td>":'<td class="masque">.</td><td class="masque">.</td><td class="masque">.</td>')+"</tr>";});
|
OBS.forEach(function(o,i){var v=i<oi;h+="<tr"+(v?' class="on"':"")+"><td><b style='color:var(--encre)'>"+o[0]+"</b></td>"+(v?"<td><b>"+o[1]+"</b></td><td><b>"+o[2]+"</b></td><td><b>"+o[3]+"</b></td>":'<td class="masque">.</td><td class="masque">.</td><td class="masque">.</td>')+"</tr>";});
|
||||||
document.getElementById("tableObs").innerHTML=h;
|
document.getElementById("tableObs").innerHTML=h;
|
||||||
document.getElementById("noteObs").textContent=oi>=OBS.length?"Les trois fichiers existent toujours : ils sont tous dans un stockage. Ce qui change, c'est seulement l'endroit. Celui du poste n'est pas perdu, il est resté sur l'autre machine.":"";
|
document.getElementById("noteObs").textContent=oi>=OBS.length?"Les trois fichiers existent toujours : ils sont tous dans un stockage. Ce qui change, c'est seulement l'endroit. Celui du poste n'est pas perdu, il est resté sur l'autre machine.":"";
|
||||||
}
|
}
|
||||||
@@ -722,7 +540,7 @@ function dessineTri(){
|
|||||||
};
|
};
|
||||||
z.appendChild(b);
|
z.appendChild(b);
|
||||||
});
|
});
|
||||||
document.getElementById("rangee").innerHTML=ORDRE.slice(0,pos).map(function(o){return '<span class="pas">'+o[0]+' · '+o[2]+'</span>';}).join('<span style="color:#94a3b8;font-weight:900">→</span>');
|
document.getElementById("rangee").innerHTML=ORDRE.slice(0,pos).map(function(o){return '<span class="pas">'+o[0]+' · '+o[2]+'</span>';}).join('<span style="color:var(--encre-douce);font-weight:900">→</span>');
|
||||||
majTri();
|
majTri();
|
||||||
}
|
}
|
||||||
function majTri(){document.getElementById("triInfo").textContent=pos+" sur 8 · "+err+" erreur"+(err>1?"s":"");}
|
function majTri(){document.getElementById("triInfo").textContent=pos+" sur 8 · "+err+" erreur"+(err>1?"s":"");}
|
||||||
@@ -733,7 +551,7 @@ dessineTri();
|
|||||||
var ci=0;
|
var ci=0;
|
||||||
function dessineCor(){
|
function dessineCor(){
|
||||||
var h="<tr><th>Rang</th><th>Fichier</th><th>Taille</th></tr>";
|
var h="<tr><th>Rang</th><th>Fichier</th><th>Taille</th></tr>";
|
||||||
ORDRE.forEach(function(o,i){var v=i<ci;h+="<tr"+(v?' class="on"':"")+"><td><b style='color:#172033'>"+(i+1)+"</b></td>"+(v?"<td><b>"+o[0]+"</b> · "+o[1]+"</td><td><b>"+o[2]+"</b></td>":'<td class="masque">.</td><td class="masque">.</td>')+"</tr>";});
|
ORDRE.forEach(function(o,i){var v=i<ci;h+="<tr"+(v?' class="on"':"")+"><td><b style='color:var(--encre)'>"+(i+1)+"</b></td>"+(v?"<td><b>"+o[0]+"</b> · "+o[1]+"</td><td><b>"+o[2]+"</b></td>":'<td class="masque">.</td><td class="masque">.</td>')+"</tr>";});
|
||||||
document.getElementById("tableCor").innerHTML=h;
|
document.getElementById("tableCor").innerHTML=h;
|
||||||
document.getElementById("noteCor").textContent=ci>=ORDRE.length?"Les deux pièges : 850 Ko est plus petit que 3,2 Mo, et 450 Mo est plus petit que 2,4 Go. Dans les deux cas, le plus grand nombre est le plus petit fichier. L'unité d'abord.":"";
|
document.getElementById("noteCor").textContent=ci>=ORDRE.length?"Les deux pièges : 850 Ko est plus petit que 3,2 Mo, et 450 Mo est plus petit que 2,4 Go. Dans les deux cas, le plus grand nombre est le plus petit fichier. L'unité d'abord.":"";
|
||||||
}
|
}
|
||||||
@@ -755,7 +573,7 @@ var MOTS={1:"vive",2:"stockage",3:"Enregistrer",4:"morte",5:"interne",6:"externe
|
|||||||
var rv=0,zt=document.getElementById("trace");
|
var rv=0,zt=document.getElementById("trace");
|
||||||
function dessineTrace(){
|
function dessineTrace(){
|
||||||
zt.innerHTML="<h3>Cours 3. Où va ce que j'enregistre</h3>"+TRACE.map(function(par){return "<p>"+par.map(function(x){
|
zt.innerHTML="<h3>Cours 3. Où va ce que j'enregistre</h3>"+TRACE.map(function(par){return "<p>"+par.map(function(x){
|
||||||
if(typeof x==="number")return x<=rv?'<b style="color:#1d4ed8">'+MOTS[x]+'</b>':'<span style="border-bottom:2px solid #93c5fd;color:#93c5fd"> </span>';
|
if(typeof x==="number")return x<=rv?'<b style="color:var(--accent-encre)">'+MOTS[x]+'</b>':'<span style="border-bottom:2px solid var(--accent);color:var(--accent)"> </span>';
|
||||||
return x;}).join("")+"</p>";}).join("");
|
return x;}).join("")+"</p>";}).join("");
|
||||||
document.getElementById("motCompte").textContent=rv+" mot"+(rv>1?"s":"")+" sur 8";
|
document.getElementById("motCompte").textContent=rv+" mot"+(rv>1?"s":"")+" sur 8";
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,230 +1,47 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="fr">
|
<html lang="fr">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>Bloc 3 – pilotage</title>
|
<title>Bloc 3, pilotage — 1re tronc commun</title>
|
||||||
<style>:root{--ink:#172033;--muted:#667085;--blue:#2563eb;--navy:#172554;--green:#16a34a;--red:#dc2626;--card:#fff;--line:#e5e7eb;--shadow:0 18px 45px #0f172a18}
|
<meta name="robots" content="noindex">
|
||||||
*{box-sizing:border-box}html{scroll-behavior:smooth}
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
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)}
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
button,input,select{font:inherit}
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
|
||||||
main{max-width:1180px;margin:auto;padding:34px 20px 70px}
|
<link rel="stylesheet" href="../assets/theme.css">
|
||||||
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
|
<link rel="stylesheet" href="../assets/numerique-1re.css">
|
||||||
svg.i{width:1em;height:1em;vertical-align:-.14em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
|
|
||||||
|
|
||||||
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;background:linear-gradient(135deg,#172554,#2563eb);color:#fff;border-radius:28px;padding:30px;box-shadow:var(--shadow);margin-bottom:24px}
|
|
||||||
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:900;opacity:.82}
|
|
||||||
.hero h1{font-size:clamp(30px,4.6vw,52px);line-height:1;letter-spacing:-1.6px;margin:7px 0 12px}
|
|
||||||
.hero p{margin:0;color:#dbeafe;line-height:1.6;font-size:17px}
|
|
||||||
.hero a.up{display:inline-flex;align-items:center;gap:7px;color:#bfdbfe;font-weight:800;font-size:13px;text-decoration:none;margin-bottom:10px}
|
|
||||||
.hero a.up:hover{color:#fff}
|
|
||||||
.hero-visual{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
|
|
||||||
.hero-chip{background:#ffffff14;border:1px solid #ffffff28;border-radius:18px;padding:16px;text-align:center}
|
|
||||||
.hero-chip .ico{display:block;margin:0 auto 7px;width:30px;height:30px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
|
|
||||||
.hero-chip b{font-size:14px}
|
|
||||||
.badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
|
|
||||||
.badge{background:#ffffff1f;border:1px solid #ffffff2e;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:800;color:#e0ecff}
|
|
||||||
.badge.warn{background:#dc262633;border-color:#fca5a5;color:#fee2e2}
|
|
||||||
|
|
||||||
.dashboard{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
|
|
||||||
.stat{background:#fff;border:1px solid var(--line);border-radius:17px;padding:14px;box-shadow:0 8px 24px #0f172a0b}
|
|
||||||
.stat strong{display:block;font-size:22px;margin-top:3px}
|
|
||||||
.stat small{color:#64748b;font-weight:800}
|
|
||||||
.stat.ok strong{color:var(--green)}
|
|
||||||
|
|
||||||
.chrono{background:#172554;color:#fff;border-radius:20px;padding:16px 18px;box-shadow:var(--shadow);margin-bottom:20px;display:grid;gap:12px}
|
|
||||||
.chrono-haut{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
|
|
||||||
.pendule{font-size:32px;font-weight:950;font-variant-numeric:tabular-nums;line-height:1}
|
|
||||||
.pendule small{display:block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#93b4d8;margin-top:5px}
|
|
||||||
.ecart{font-size:14px;font-weight:850;padding:9px 14px;border-radius:999px;background:#ffffff1a;border:1px solid #ffffff2e;min-width:250px;text-align:center}
|
|
||||||
.ecart.avance{background:#16a34a2e;border-color:#4ade80;color:#dcfce7}
|
|
||||||
.ecart.retard{background:#dc26262e;border-color:#fca5a5;color:#fee2e2}
|
|
||||||
.chrono .row button{background:#ffffff1a;border:1px solid #ffffff30;color:#fff}
|
|
||||||
.chrono .row button.go{background:#fff;border-color:#fff;color:#172554}
|
|
||||||
|
|
||||||
.navtabs{display:grid;gap:10px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:0 8px 24px #0f172a0b;margin-bottom:20px}
|
|
||||||
.navtabs.n6{grid-template-columns:repeat(6,1fr)}
|
|
||||||
.tab{border:2px solid #e2e8f0;background:#fff;border-radius:14px;padding:12px 10px;font-weight:900;cursor:pointer;color:#334155;text-align:left;position:relative}
|
|
||||||
.tab span{display:block;font-size:11px;font-weight:800;color:#94a3b8;margin-top:3px;font-variant-numeric:tabular-nums}
|
|
||||||
.tab:hover{border-color:#93c5fd}
|
|
||||||
.tab.active{background:#2563eb;color:#fff;border-color:#2563eb;box-shadow:0 8px 18px #2563eb28}
|
|
||||||
.tab.active span{color:#c7dcff}
|
|
||||||
.tab.prevue::after{content:"";position:absolute;left:12px;right:12px;bottom:-2px;height:4px;border-radius:99px;background:#f59e0b}
|
|
||||||
|
|
||||||
.panel{display:none}.panel.active{display:block}
|
|
||||||
.card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 10px 28px #0f172a0d;margin-bottom:16px}
|
|
||||||
.card h2,.card h3{margin-top:0}
|
|
||||||
.card h2{font-size:26px;letter-spacing:-.5px}
|
|
||||||
.muted{color:var(--muted);line-height:1.6}
|
|
||||||
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
|
|
||||||
.btn{border:0;border-radius:11px;padding:10px 15px;font-weight:850;cursor:pointer;background:#eaf1ff;color:#1d4ed8}
|
|
||||||
.btn:hover{filter:brightness(.97)}
|
|
||||||
.btn.primary{background:#2563eb;color:#fff}
|
|
||||||
.btn.soft{background:#f1f5f9;color:#334155}
|
|
||||||
.score{display:inline-block;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:7px 12px;font-weight:900;font-size:14px}
|
|
||||||
.feedback{min-height:31px;margin-top:12px;font-weight:850}
|
|
||||||
.entete{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:flex-start;margin-bottom:14px}
|
|
||||||
.consigne{background:linear-gradient(145deg,#f8fafc,#eef6ff);border:2px solid #dbeafe;border-radius:18px;padding:20px 24px;font-size:20px;font-weight:800;line-height:1.45;margin:16px 0}
|
|
||||||
.consigne small{display:block;text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:900;color:var(--blue);margin-bottom:8px}
|
|
||||||
.info{border-left:4px solid #cbd5e1;background:#f8fafc;border-radius:0 12px 12px 0;padding:13px 17px;color:#475569;font-size:15px;line-height:1.6;margin-top:16px}
|
|
||||||
.info b{color:var(--ink)}
|
|
||||||
.info.alerte{border-color:#fca5a5;background:#fef4f4;color:#7f2b2b}
|
|
||||||
.info.alerte b{color:#991b1b}
|
|
||||||
|
|
||||||
.saisie{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px}
|
|
||||||
.saisie input{flex:1;min-width:210px;padding:12px 14px;border:2px solid #cbd5e1;border-radius:12px;outline:none}
|
|
||||||
.saisie input:focus{border-color:var(--blue);box-shadow:0 0 0 4px #2563eb18}
|
|
||||||
.saisie select{padding:12px 14px;border:2px solid #cbd5e1;border-radius:12px;font-weight:800}
|
|
||||||
.colonnes{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:11px}
|
|
||||||
.colonne{border:1px solid var(--line);border-radius:17px;background:#f8fbff;min-height:145px;padding:13px}
|
|
||||||
.colonne h3{font-size:14px;display:flex;justify-content:space-between;align-items:center;margin:0 0 9px;padding-bottom:8px;border-bottom:1px solid var(--line)}
|
|
||||||
.colonne h3 em{font-style:normal;color:#94a3b8;font-size:12px}
|
|
||||||
.colonne ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
|
|
||||||
.colonne li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:7px 10px;font-size:14px;font-weight:700;display:flex;justify-content:space-between;gap:6px}
|
|
||||||
.colonne li button{background:none;border:0;color:#cbd5e1;cursor:pointer;padding:0 3px;font-weight:900}
|
|
||||||
.colonne li button:hover{color:var(--red)}
|
|
||||||
|
|
||||||
.accordeon{display:grid;gap:10px}
|
|
||||||
.item{border:1px solid var(--line);border-radius:17px;background:#fff;overflow:hidden}
|
|
||||||
.item>button{width:100%;display:flex;gap:14px;align-items:flex-start;text-align:left;background:none;border:0;padding:15px 18px;cursor:pointer}
|
|
||||||
.item>button:hover{background:#f8fbff}
|
|
||||||
.item .n{width:30px;height:30px;flex:none;border-radius:10px;background:#eaf1ff;color:#1d4ed8;font-weight:950;display:grid;place-items:center;font-size:14px}
|
|
||||||
.item .t{font-weight:850;font-size:17px;flex:1}
|
|
||||||
.item .plus{color:#94a3b8;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;padding-top:6px}
|
|
||||||
.item .corps{display:none;padding:0 18px 17px 62px;color:#475569;line-height:1.6}
|
|
||||||
.item.ouvert .corps{display:block}
|
|
||||||
.item.ouvert{border-color:#93c5fd;box-shadow:0 8px 20px #2563eb14}
|
|
||||||
.item.ouvert .n{background:#2563eb;color:#fff}
|
|
||||||
|
|
||||||
.qcard{border:2px solid #dbeafe;border-radius:20px;background:linear-gradient(145deg,#fbfdff,#f4f9ff);padding:24px 26px}
|
|
||||||
.qtag{display:inline-block;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:900;margin-bottom:10px}
|
|
||||||
.qtag.cle{background:#fef3c7;color:#92400e}
|
|
||||||
.qtxt{font-size:22px;font-weight:900;line-height:1.3;letter-spacing:-.3px;margin-bottom:16px}
|
|
||||||
.answer-grid{display:grid;gap:8px}
|
|
||||||
.answer{border:2px solid #dbe3ef;background:#fff;border-radius:12px;padding:11px 14px;text-align:left;font-weight:800}
|
|
||||||
.answer.ok{border-color:#22c55e;background:#f0fdf4}
|
|
||||||
.reveal{display:none;margin-top:16px;border-top:2px dashed #dbeafe;padding-top:15px}
|
|
||||||
.reveal.on{display:block}
|
|
||||||
.verdict{font-weight:950;color:var(--green);margin-bottom:8px}
|
|
||||||
|
|
||||||
.steps{display:grid;gap:11px}
|
|
||||||
.step{border:1px solid var(--line);border-radius:17px;background:#fff;padding:16px 20px;display:flex;gap:15px;align-items:flex-start;opacity:.4}
|
|
||||||
.step.on{opacity:1;border-color:#93c5fd;box-shadow:0 8px 20px #2563eb14}
|
|
||||||
.step.fait{opacity:1}
|
|
||||||
.step .n{width:34px;height:34px;flex:none;border-radius:12px;background:#f1f5f9;color:#94a3b8;font-weight:950;display:grid;place-items:center}
|
|
||||||
.step.on .n{background:#2563eb;color:#fff}
|
|
||||||
.step.fait .n{background:#dcfce7;color:#15803d}
|
|
||||||
.step h3{margin:0 0 4px;font-size:17px}
|
|
||||||
.step p{margin:0;color:#475569;font-size:15px;line-height:1.55}
|
|
||||||
|
|
||||||
figure{margin:0 0 18px}
|
|
||||||
figure svg{width:100%;height:auto;display:block;background:#fff;border:1px solid var(--line);border-radius:18px}
|
|
||||||
figcaption{font-size:14px;color:var(--muted);margin-top:10px;line-height:1.55}
|
|
||||||
|
|
||||||
.trace{border:2px solid #dbeafe;background:linear-gradient(145deg,#fbfdff,#eef6ff);border-radius:20px;padding:26px 30px;font-size:19px;line-height:1.85}
|
|
||||||
.trace h3{margin:0 0 14px;font-size:22px}
|
|
||||||
.trace p{margin:0 0 .5em}
|
|
||||||
.trace code{background:#fff;border:1px solid #dbeafe;border-radius:6px;padding:1px 7px;font-size:.92em}
|
|
||||||
|
|
||||||
.check{display:grid;gap:9px}
|
|
||||||
.check label{display:flex;gap:13px;align-items:flex-start;border:1px solid var(--line);border-radius:15px;background:#fff;padding:14px 18px;cursor:pointer;font-weight:750}
|
|
||||||
.check label:hover{border-color:#93c5fd}
|
|
||||||
.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--green);flex:none}
|
|
||||||
.check input:checked+span{color:var(--green);font-weight:900}
|
|
||||||
|
|
||||||
table.grille{width:100%;border-collapse:collapse;font-size:15px}
|
|
||||||
table.grille th,table.grille td{border:1px solid var(--line);padding:10px 13px;text-align:left}
|
|
||||||
table.grille th{background:#f8fafc;font-weight:900;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:#475569}
|
|
||||||
table.grille td.masque{color:transparent;background:#f8fafc}
|
|
||||||
table.grille tr.on td{background:#f0fdf4}
|
|
||||||
table.grille td b{color:#15803d}
|
|
||||||
|
|
||||||
.filtres{display:flex;gap:9px;flex-wrap:wrap;align-items:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:0 8px 24px #0f172a0b;margin-bottom:20px}
|
|
||||||
.filtres .compte{margin-left:auto;font-weight:850;color:var(--muted);font-size:14px}
|
|
||||||
.module{margin-bottom:30px}
|
|
||||||
.module-tete{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px}
|
|
||||||
.module-tete h2{margin:0;font-size:25px;letter-spacing:-.6px}
|
|
||||||
.module-tete .p{background:#172554;color:#fff;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:900}
|
|
||||||
.module-tete .champ{color:var(--muted);font-size:14px;margin-left:auto}
|
|
||||||
.module-note{color:var(--muted);line-height:1.6;margin:0 0 16px;max-width:76ch}
|
|
||||||
.blocs{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
|
|
||||||
.bloc{border:1px solid var(--line);border-radius:20px;background:#fff;padding:17px 19px;display:flex;gap:15px;align-items:flex-start;text-decoration:none;color:inherit;box-shadow:0 8px 24px #0f172a08}
|
|
||||||
.bloc .n{width:40px;height:40px;flex:none;border-radius:14px;background:#f1f5f9;color:#94a3b8;font-weight:950;display:grid;place-items:center;font-size:17px}
|
|
||||||
.bloc h3{margin:0 0 5px;font-size:17px;line-height:1.3}
|
|
||||||
.bloc .att{font-size:13px;color:var(--muted);font-weight:600}
|
|
||||||
.ets{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
|
|
||||||
.et{font-size:11px;font-weight:900;border-radius:999px;padding:4px 9px;background:#f1f5f9;color:#475569}
|
|
||||||
.et.eval{background:#fee2e2;color:#991b1b}
|
|
||||||
.et.fac{background:#f3e8ff;color:#6b21a8}
|
|
||||||
.et.pret{background:#dcfce7;color:#15803d}
|
|
||||||
a.bloc:hover{border-color:#93c5fd;box-shadow:0 12px 28px #2563eb1f}
|
|
||||||
a.bloc .n{background:#2563eb;color:#fff}
|
|
||||||
.bloc.vide{border-style:dashed;opacity:.68;box-shadow:none}
|
|
||||||
.bloc.vide h3{font-weight:800}
|
|
||||||
.masque{display:none!important}
|
|
||||||
|
|
||||||
footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:center;color:#64748b;font-size:12px;border-top:1px solid var(--line)}
|
|
||||||
|
|
||||||
@media(max-width:980px){.hero{grid-template-columns:1fr}.dashboard{grid-template-columns:repeat(2,1fr)}.navtabs.n6{grid-template-columns:repeat(3,1fr)}}
|
|
||||||
@media(max-width:620px){main{padding:20px 12px 60px}.hero{padding:22px 18px}.dashboard{grid-template-columns:1fr}.navtabs.n6{grid-template-columns:repeat(2,1fr)}.blocs{grid-template-columns:1fr}.ecart{min-width:0;flex:1}.filtres .compte{margin-left:0;width:100%}}
|
|
||||||
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
|
|
||||||
@media print{.chrono,.navtabs,.filtres,.saisie{display:none}.panel{display:block!important}}
|
|
||||||
|
|
||||||
.progres{position:sticky;top:0;z-index:40;background:#fff;border:1px solid var(--line);border-radius:0 0 20px 20px;padding:12px 18px;box-shadow:0 6px 20px #0f172a12;margin-bottom:20px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
|
|
||||||
.barre{flex:1;min-width:180px;height:10px;background:#e2e8f0;border-radius:99px;overflow:hidden}
|
|
||||||
.barre i{display:block;height:100%;width:0;background:#2563eb;border-radius:99px;transition:width .25s}
|
|
||||||
.q{border:1px solid var(--line);border-radius:16px;background:#fff;padding:14px 16px;margin-bottom:10px}
|
|
||||||
.q.bon{border-color:#22c55e;background:#f2fdf6}
|
|
||||||
.q.faux{border-color:#f59e0b;background:#fffbeb}
|
|
||||||
.q .txt{font-weight:800;margin-bottom:10px;font-size:17px}
|
|
||||||
.q .opts{display:flex;gap:8px;flex-wrap:wrap}
|
|
||||||
.q .opts button{border:2px solid #dbe3ef;background:#fff;border-radius:11px;padding:9px 14px;font-weight:800;cursor:pointer;color:#334155}
|
|
||||||
.q .opts button:hover:not(:disabled){border-color:#2563eb;color:#1d4ed8}
|
|
||||||
.q .opts button:disabled{cursor:default;opacity:.55}
|
|
||||||
.q .opts button.pick{border-color:#22c55e;background:#dcfce7;color:#15803d;opacity:1}
|
|
||||||
.q .opts button.rate{border-color:#f59e0b;background:#fef3c7;color:#92400e;opacity:1}
|
|
||||||
.q .expl{display:none;margin-top:10px;font-size:15px;color:#475569;line-height:1.55;border-left:3px solid #cbd5e1;padding-left:12px}
|
|
||||||
.q.done .expl{display:block}
|
|
||||||
.figpetit{max-width:560px;margin:0 auto 14px}
|
|
||||||
#bilan{display:none}
|
|
||||||
#bilan.on{display:block}
|
|
||||||
.gros{font-size:44px;font-weight:950;line-height:1;color:#2563eb}
|
|
||||||
textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px;padding:12px;font:inherit;font-size:14px;resize:vertical}
|
|
||||||
.fichiers{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin:14px 0}
|
|
||||||
.fic{border:2px solid #dbe3ef;background:#fff;border-radius:14px;padding:12px 14px;text-align:left;cursor:pointer;font-weight:800;font-size:14.5px;overflow-wrap:anywhere;min-width:0}
|
|
||||||
.fic small{display:block;font-weight:700;color:#64748b;margin-top:3px;font-size:13px}
|
|
||||||
.fic b{display:block;font-size:20px;color:#172554;margin-bottom:2px}
|
|
||||||
.fic:hover{border-color:#2563eb}
|
|
||||||
.fic.pris{opacity:.25;cursor:default}
|
|
||||||
.fic.rate{border-color:#f59e0b;background:#fffbeb}
|
|
||||||
.rangee{display:flex;gap:6px;flex-wrap:wrap;min-height:54px;border:2px dashed #cbd5e1;border-radius:14px;padding:8px;align-items:center}
|
|
||||||
.rangee .pas{background:#dcfce7;color:#15803d;border-radius:10px;padding:7px 10px;font-weight:900;font-size:14px}
|
|
||||||
.etape3{display:none}.etape3.on{display:block}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="classe-tc">
|
||||||
<main>
|
|
||||||
|
|
||||||
<section class="hero">
|
<header class="entete">
|
||||||
<div>
|
<div class="entete__interieur entete__interieur--large">
|
||||||
<a class="up" href="pilotage.html"><svg class="i" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg> Retour au menu</a>
|
<nav class="ariane" aria-label="Fil d'Ariane">
|
||||||
<div class="eyebrow">Document enseignant · Module 1 · Semaine 3 · Bloc 3 sur 35</div>
|
<a href="../index.html">Mes cours</a><span aria-hidden="true">/</span><a href="index.html">1re tronc commun</a><span aria-hidden="true">/</span><a href="pilotage.html">Pilotage</a><span aria-hidden="true">/</span><strong>Bloc 3</strong>
|
||||||
|
</nav>
|
||||||
<h1>Où va ce que j'enregistre</h1>
|
<h1>Où va ce que j'enregistre</h1>
|
||||||
<p style="margin-bottom:10px"><a href="1TC-NUM_bloc-03_ou-va-ce-que-j-enregistre.html" style="color:#fff;font-weight:800">Ouvrir la version à projeter aux élèves</a></p><p>Termine S21 : mémoire vive et morte, stockage interne et externe. Les tailles Ko à To sont un complément facultatif, non évaluable : c'est lui qu'on coupe en premier.</p>
|
<p class="entete__meta">Document enseignant · Module 1 · Semaine 3 · Bloc 3 sur 35</p>
|
||||||
<div class="badges">
|
|
||||||
<span class="badge">S21 · mémoire vive et morte</span>
|
|
||||||
<span class="badge">S21 · stockage interne et externe</span>
|
|
||||||
<span class="badge">Ko à To · facultatif, non cotable</span>
|
|
||||||
<span class="badge warn">Ne pas projeter</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="hero-visual">
|
</header>
|
||||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M13 2L4 14h7l-1 8 9-12h-7z"/></svg><b>La coupure</b></div>
|
|
||||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><rect x="3" y="7" width="18" height="10" rx="2"/><path d="M7 7v10M11 7v10M15 7v10"/></svg><b>Les mémoires</b></div>
|
<main class="contenu contenu--large">
|
||||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><rect x="8" y="3" width="8" height="12" rx="2"/><path d="M10 15v4h4v-4M12 7v3"/></svg><b>Trois endroits</b></div>
|
|
||||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M4 20V10M10 20V4M16 20v-8M22 20H2"/></svg><b>Les tailles</b></div>
|
<p class="chapeau"><a href="1TC-NUM_bloc-03_ou-va-ce-que-j-enregistre.html">Ouvrir la version à projeter aux élèves</a></p>
|
||||||
</div>
|
<p class="chapeau">Termine S21 : mémoire vive et morte, stockage interne et externe. Les tailles Ko à To sont un complément facultatif, non évaluable : c'est lui qu'on coupe en premier.</p>
|
||||||
</section>
|
|
||||||
|
<ul class="etiquettes">
|
||||||
|
<li class="etiquette">S21 · mémoire vive et morte</li>
|
||||||
|
<li class="etiquette">S21 · stockage interne et externe</li>
|
||||||
|
<li class="etiquette">Ko à To · facultatif, non cotable</li>
|
||||||
|
<li class="etiquette etiquette--alerte">Ne pas projeter</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<ul class="apercu">
|
||||||
|
<li><svg viewBox="0 0 24 24"><path d="M13 2L4 14h7l-1 8 9-12h-7z"/></svg><span>La coupure</span></li>
|
||||||
|
<li><svg viewBox="0 0 24 24"><rect x="3" y="7" width="18" height="10" rx="2"/><path d="M7 7v10M11 7v10M15 7v10"/></svg><span>Les mémoires</span></li>
|
||||||
|
<li><svg viewBox="0 0 24 24"><rect x="8" y="3" width="8" height="12" rx="2"/><path d="M10 15v4h4v-4M12 7v3"/></svg><span>Trois endroits</span></li>
|
||||||
|
<li><svg viewBox="0 0 24 24"><path d="M4 20V10M10 20V4M16 20v-8M22 20H2"/></svg><span>Les tailles</span></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
<section class="dashboard">
|
<section class="dashboard">
|
||||||
<div class="stat"><small>Activité en cours</small><strong id="sPhase">1 sur 6</strong></div>
|
<div class="stat"><small>Activité en cours</small><strong id="sPhase">1 sur 6</strong></div>
|
||||||
@@ -237,7 +54,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
<div class="row">
|
<div class="row">
|
||||||
<button class="btn primary" id="btnGo">Démarrer</button>
|
<button class="btn primary" id="btnGo">Démarrer</button>
|
||||||
<button class="btn soft" id="btnStop">Remettre à zéro</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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -245,7 +62,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
|
|
||||||
<!-- 1 -->
|
<!-- 1 -->
|
||||||
<section class="panel active" id="p0"><div class="card">
|
<section class="panel active" id="p0"><div class="card">
|
||||||
<div class="entete"><div><h2>La démonstration</h2><p class="muted">Regarde bien. Ensuite, livret page 1.</p></div><span class="score">10 min</span></div>
|
<div class="carte-entete"><div><h2>La démonstration</h2><p class="muted">Regarde bien. Ensuite, livret page 1.</p></div><span class="score">10 min</span></div>
|
||||||
|
|
||||||
<div class="consigne"><small>Ce qui va se passer</small>
|
<div class="consigne"><small>Ce qui va se passer</small>
|
||||||
Le professeur tape un texte, puis il coupe brutalement l'ordinateur, sans enregistrer. Il le rallume.</div>
|
Le professeur tape un texte, puis il coupe brutalement l'ordinateur, sans enregistrer. Il le rallume.</div>
|
||||||
@@ -269,7 +86,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
<!-- 2 -->
|
<!-- 2 -->
|
||||||
<section class="panel" id="p1">
|
<section class="panel" id="p1">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="entete"><div><h2>Je comprends. Les deux mémoires et le stockage</h2><p class="muted">On lit cette page ensemble. Elle est dans ton livret.</p></div><span class="score">20 min</span></div>
|
<div class="carte-entete"><div><h2>Je comprends. Les deux mémoires et le stockage</h2><p class="muted">On lit cette page ensemble. Elle est dans ton livret.</p></div><span class="score">20 min</span></div>
|
||||||
<div class="info alerte"><b>Correction de notre propre séquence.</b> La séquence associait la mémoire morte au placard. C'est une confusion : le placard est le stockage. La mémoire morte ne contient que le micrologiciel de démarrage, BIOS ou UEFI. L'attendu sépare d'ailleurs deux couples distincts, vive contre morte et interne contre externe. D'où la troisième image : la notice d'ouverture.</div>
|
<div class="info alerte"><b>Correction de notre propre séquence.</b> La séquence associait la mémoire morte au placard. C'est une confusion : le placard est le stockage. La mémoire morte ne contient que le micrologiciel de démarrage, BIOS ou UEFI. L'attendu sépare d'ailleurs deux couples distincts, vive contre morte et interne contre externe. D'où la troisième image : la notice d'ouverture.</div>
|
||||||
<div class="info alerte"><b>Le recueil FWB se trompe page 13.</b> Il place le système d'exploitation en mémoire morte. Faux : Windows est dans le stockage interne, la ROM se contente d'aller l'y chercher. Sa propre infographie page 14 est correcte. Ne distribue pas la page 13 telle quelle.</div>
|
<div class="info alerte"><b>Le recueil FWB se trompe page 13.</b> Il place le système d'exploitation en mémoire morte. Faux : Windows est dans le stockage interne, la ROM se contente d'aller l'y chercher. Sa propre infographie page 14 est correcte. Ne distribue pas la page 13 telle quelle.</div>
|
||||||
<div class="info"><b>Ce qui se dit ensemble.</b> Ce qui s'est passé, la cuisine, la mémoire vive, et « enregistrer ». Le reste se lit seul. Fais reformuler ce qui est arrivé au texte avec les mots de la cuisine : c'est la vérification qui compte. Puis reviens aux hypothèses du tableau et dis à l'élève qui a écrit « ça n'a pas eu le temps de se sauvegarder » qu'il avait raison.</div>
|
<div class="info"><b>Ce qui se dit ensemble.</b> Ce qui s'est passé, la cuisine, la mémoire vive, et « enregistrer ». Le reste se lit seul. Fais reformuler ce qui est arrivé au texte avec les mots de la cuisine : c'est la vérification qui compte. Puis reviens aux hypothèses du tableau et dis à l'élève qui a écrit « ça n'a pas eu le temps de se sauvegarder » qu'il avait raison.</div>
|
||||||
@@ -287,12 +104,12 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
<figure><svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 800 380">
|
<figure><svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 800 380">
|
||||||
|
|
||||||
<defs>
|
<defs>
|
||||||
<marker id="a" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M0 0L10 5L0 10z" fill="#172554"/></marker>
|
<marker id="a" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M0 0L10 5L0 10z" fill="var(--encre)"/></marker>
|
||||||
<marker id="v" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M0 0L10 5L0 10z" fill="#16a34a"/></marker>
|
<marker id="v" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M0 0L10 5L0 10z" fill="#16a34a"/></marker>
|
||||||
</defs>
|
</defs>
|
||||||
<g font-family="Arial, Helvetica, sans-serif">
|
<g font-family="Arial, Helvetica, sans-serif">
|
||||||
<rect x="20" y="20" width="760" height="340" rx="18" fill="#f8fafc" stroke="#cbd5e1" stroke-width="2" stroke-dasharray="6 6"/>
|
<rect x="20" y="20" width="760" height="340" rx="18" fill="var(--papier)" stroke="var(--trait-fort)" stroke-width="2" stroke-dasharray="6 6"/>
|
||||||
<text x="40" y="50" font-size="15" font-weight="bold" fill="#64748b">DANS L'ORDINATEUR</text>
|
<text x="40" y="50" font-size="15" font-weight="bold" fill="var(--encre-douce)">DANS L'ORDINATEUR</text>
|
||||||
<rect x="40" y="80" width="200" height="110" rx="14" fill="#fef3c7" stroke="#b45309" stroke-width="3"/>
|
<rect x="40" y="80" width="200" height="110" rx="14" fill="#fef3c7" stroke="#b45309" stroke-width="3"/>
|
||||||
<text x="140" y="118" text-anchor="middle" font-size="19" font-weight="bold" fill="#92400e">Mémoire vive</text>
|
<text x="140" y="118" text-anchor="middle" font-size="19" font-weight="bold" fill="#92400e">Mémoire vive</text>
|
||||||
<text x="140" y="142" text-anchor="middle" font-size="14" fill="#92400e">le plan de travail</text>
|
<text x="140" y="142" text-anchor="middle" font-size="14" fill="#92400e">le plan de travail</text>
|
||||||
@@ -300,8 +117,8 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
<rect x="300" y="80" width="180" height="110" rx="14" fill="#e0e7ff" stroke="#3730a3" stroke-width="3"/>
|
<rect x="300" y="80" width="180" height="110" rx="14" fill="#e0e7ff" stroke="#3730a3" stroke-width="3"/>
|
||||||
<text x="390" y="125" text-anchor="middle" font-size="19" font-weight="bold" fill="#3730a3">Processeur</text>
|
<text x="390" y="125" text-anchor="middle" font-size="19" font-weight="bold" fill="#3730a3">Processeur</text>
|
||||||
<text x="390" y="150" text-anchor="middle" font-size="14" fill="#3730a3">le cuisinier</text>
|
<text x="390" y="150" text-anchor="middle" font-size="14" fill="#3730a3">le cuisinier</text>
|
||||||
<path d="M240 125 H292" stroke="#172554" stroke-width="3" marker-end="url(#a)"/>
|
<path d="M240 125 H292" stroke="var(--encre)" stroke-width="3" marker-end="url(#a)"/>
|
||||||
<path d="M300 150 H248" stroke="#172554" stroke-width="3" marker-end="url(#a)"/>
|
<path d="M300 150 H248" stroke="var(--encre)" stroke-width="3" marker-end="url(#a)"/>
|
||||||
<rect x="540" y="80" width="220" height="110" rx="14" fill="#dcfce7" stroke="#15803d" stroke-width="3"/>
|
<rect x="540" y="80" width="220" height="110" rx="14" fill="#dcfce7" stroke="#15803d" stroke-width="3"/>
|
||||||
<text x="650" y="118" text-anchor="middle" font-size="19" font-weight="bold" fill="#166534">Stockage</text>
|
<text x="650" y="118" text-anchor="middle" font-size="19" font-weight="bold" fill="#166534">Stockage</text>
|
||||||
<text x="650" y="142" text-anchor="middle" font-size="14" fill="#166534">les placards</text>
|
<text x="650" y="142" text-anchor="middle" font-size="14" fill="#166534">les placards</text>
|
||||||
@@ -309,10 +126,10 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
<path d="M140 195 C140 260, 600 260, 640 198" stroke="#16a34a" stroke-width="4" fill="none" marker-end="url(#v)"/>
|
<path d="M140 195 C140 260, 600 260, 640 198" stroke="#16a34a" stroke-width="4" fill="none" marker-end="url(#v)"/>
|
||||||
<rect x="318" y="228" width="160" height="34" rx="17" fill="#16a34a"/>
|
<rect x="318" y="228" width="160" height="34" rx="17" fill="#16a34a"/>
|
||||||
<text x="398" y="251" text-anchor="middle" font-size="16" font-weight="bold" fill="#ffffff">ENREGISTRER</text>
|
<text x="398" y="251" text-anchor="middle" font-size="16" font-weight="bold" fill="#ffffff">ENREGISTRER</text>
|
||||||
<rect x="40" y="285" width="200" height="60" rx="12" fill="#f1f5f9" stroke="#475569" stroke-width="2.5"/>
|
<rect x="40" y="285" width="200" height="60" rx="12" fill="var(--papier)" stroke="var(--encre-douce)" stroke-width="2.5"/>
|
||||||
<text x="140" y="311" text-anchor="middle" font-size="17" font-weight="bold" fill="#334155">Mémoire morte</text>
|
<text x="140" y="311" text-anchor="middle" font-size="17" font-weight="bold" fill="var(--encre-douce)">Mémoire morte</text>
|
||||||
<text x="140" y="332" text-anchor="middle" font-size="13" fill="#475569">la notice d'ouverture, gravée</text>
|
<text x="140" y="332" text-anchor="middle" font-size="13" fill="var(--encre-douce)">la notice d'ouverture, gravée</text>
|
||||||
<text x="262" y="321" font-size="14" fill="#475569">sert uniquement au démarrage de la machine</text>
|
<text x="262" y="321" font-size="14" fill="var(--encre-douce)">sert uniquement au démarrage de la machine</text>
|
||||||
</g></svg>
|
</g></svg>
|
||||||
</figure>
|
</figure>
|
||||||
|
|
||||||
@@ -352,34 +169,34 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
<!-- 3 -->
|
<!-- 3 -->
|
||||||
<section class="panel" id="p2">
|
<section class="panel" id="p2">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="entete"><div><h2>Je comprends. Stockage interne et externe</h2><p class="muted">On lit cette page ensemble. Elle est dans ton livret.</p></div><span class="score">25 min</span></div>
|
<div class="carte-entete"><div><h2>Je comprends. Stockage interne et externe</h2><p class="muted">On lit cette page ensemble. Elle est dans ton livret.</p></div><span class="score">25 min</span></div>
|
||||||
|
|
||||||
<p>Tous les stockages gardent les fichiers quand on éteint. Ce qui les différencie, c'est <b>où ils se trouvent</b>.</p>
|
<p>Tous les stockages gardent les fichiers quand on éteint. Ce qui les différencie, c'est <b>où ils se trouvent</b>.</p>
|
||||||
<figure><svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 800 330">
|
<figure><svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 800 330">
|
||||||
|
|
||||||
<g font-family="Arial, Helvetica, sans-serif">
|
<g font-family="Arial, Helvetica, sans-serif">
|
||||||
<rect x="30" y="40" width="250" height="250" rx="18" fill="#eff6ff" stroke="#172554" stroke-width="3"/>
|
<rect x="30" y="40" width="250" height="250" rx="18" fill="#eff6ff" stroke="var(--encre)" stroke-width="3"/>
|
||||||
<text x="155" y="30" text-anchor="middle" font-size="15" font-weight="bold" fill="#172554">L'ORDINATEUR</text>
|
<text x="155" y="30" text-anchor="middle" font-size="15" font-weight="bold" fill="var(--encre)">L'ORDINATEUR</text>
|
||||||
<rect x="80" y="130" width="150" height="80" rx="10" fill="#dcfce7" stroke="#15803d" stroke-width="3"/>
|
<rect x="80" y="130" width="150" height="80" rx="10" fill="#dcfce7" stroke="#15803d" stroke-width="3"/>
|
||||||
<text x="155" y="165" text-anchor="middle" font-size="16" font-weight="bold" fill="#166534">Disque dur</text>
|
<text x="155" y="165" text-anchor="middle" font-size="16" font-weight="bold" fill="#166534">Disque dur</text>
|
||||||
<text x="155" y="187" text-anchor="middle" font-size="14" fill="#166534">ou SSD</text>
|
<text x="155" y="187" text-anchor="middle" font-size="14" fill="#166534">ou SSD</text>
|
||||||
<text x="155" y="250" text-anchor="middle" font-size="16" font-weight="bold" fill="#15803d">STOCKAGE INTERNE</text>
|
<text x="155" y="250" text-anchor="middle" font-size="16" font-weight="bold" fill="#15803d">STOCKAGE INTERNE</text>
|
||||||
<text x="155" y="272" text-anchor="middle" font-size="13" fill="#475569">dedans, reste sur cette machine</text>
|
<text x="155" y="272" text-anchor="middle" font-size="13" fill="var(--encre-douce)">dedans, reste sur cette machine</text>
|
||||||
<line x1="310" y1="30" x2="310" y2="300" stroke="#cbd5e1" stroke-width="2" stroke-dasharray="6 6"/>
|
<line x1="310" y1="30" x2="310" y2="300" stroke="var(--trait-fort)" stroke-width="2" stroke-dasharray="6 6"/>
|
||||||
<text x="555" y="30" text-anchor="middle" font-size="15" font-weight="bold" fill="#7c2d12">STOCKAGE EXTERNE : en dehors de l'appareil</text>
|
<text x="555" y="30" text-anchor="middle" font-size="15" font-weight="bold" fill="#7c2d12">STOCKAGE EXTERNE : en dehors de l'appareil</text>
|
||||||
<rect x="340" y="60" width="200" height="150" rx="16" fill="#fff7ed" stroke="#c2410c" stroke-width="3"/>
|
<rect x="340" y="60" width="200" height="150" rx="16" fill="#fff7ed" stroke="#c2410c" stroke-width="3"/>
|
||||||
<rect x="400" y="95" width="80" height="34" rx="6" fill="#fed7aa" stroke="#c2410c" stroke-width="2.5"/>
|
<rect x="400" y="95" width="80" height="34" rx="6" fill="#fed7aa" stroke="#c2410c" stroke-width="2.5"/>
|
||||||
<rect x="480" y="104" width="22" height="16" rx="2" fill="#94a3b8"/>
|
<rect x="480" y="104" width="22" height="16" rx="2" fill="var(--encre-douce)"/>
|
||||||
<text x="440" y="160" text-anchor="middle" font-size="15" font-weight="bold" fill="#9a3412">Clé USB</text>
|
<text x="440" y="160" text-anchor="middle" font-size="15" font-weight="bold" fill="#9a3412">Clé USB</text>
|
||||||
<text x="440" y="182" text-anchor="middle" font-size="13" fill="#9a3412">disque externe, carte SD</text>
|
<text x="440" y="182" text-anchor="middle" font-size="13" fill="#9a3412">disque externe, carte SD</text>
|
||||||
<text x="440" y="240" text-anchor="middle" font-size="14" font-weight="bold" fill="#c2410c">je l'emporte</text>
|
<text x="440" y="240" text-anchor="middle" font-size="14" font-weight="bold" fill="#c2410c">je l'emporte</text>
|
||||||
<text x="440" y="260" text-anchor="middle" font-size="13" fill="#475569">pas besoin d'internet</text>
|
<text x="440" y="260" text-anchor="middle" font-size="13" fill="var(--encre-douce)">pas besoin d'internet</text>
|
||||||
<rect x="570" y="60" width="200" height="150" rx="16" fill="#f5f3ff" stroke="#6d28d9" stroke-width="3"/>
|
<rect x="570" y="60" width="200" height="150" rx="16" fill="#f5f3ff" stroke="#6d28d9" stroke-width="3"/>
|
||||||
<path d="M620 130 a22 22 0 0 1 20 -30 a30 30 0 0 1 56 8 a20 20 0 0 1 4 40 h-72 a18 18 0 0 1 -8 -18z" fill="#ddd6fe" stroke="#6d28d9" stroke-width="2.5"/>
|
<path d="M620 130 a22 22 0 0 1 20 -30 a30 30 0 0 1 56 8 a20 20 0 0 1 4 40 h-72 a18 18 0 0 1 -8 -18z" fill="#ddd6fe" stroke="#6d28d9" stroke-width="2.5"/>
|
||||||
<text x="670" y="175" text-anchor="middle" font-size="15" font-weight="bold" fill="#5b21b6">En ligne (cloud)</text>
|
<text x="670" y="175" text-anchor="middle" font-size="15" font-weight="bold" fill="#5b21b6">En ligne (cloud)</text>
|
||||||
<text x="670" y="195" text-anchor="middle" font-size="13" fill="#5b21b6">sur un serveur, ailleurs</text>
|
<text x="670" y="195" text-anchor="middle" font-size="13" fill="#5b21b6">sur un serveur, ailleurs</text>
|
||||||
<text x="670" y="240" text-anchor="middle" font-size="14" font-weight="bold" fill="#6d28d9">accessible partout</text>
|
<text x="670" y="240" text-anchor="middle" font-size="14" font-weight="bold" fill="#6d28d9">accessible partout</text>
|
||||||
<text x="670" y="260" text-anchor="middle" font-size="13" fill="#475569">avec internet</text>
|
<text x="670" y="260" text-anchor="middle" font-size="13" fill="var(--encre-douce)">avec internet</text>
|
||||||
</g></svg>
|
</g></svg>
|
||||||
</figure>
|
</figure>
|
||||||
|
|
||||||
@@ -430,7 +247,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
<!-- 4 -->
|
<!-- 4 -->
|
||||||
<section class="panel" id="p3">
|
<section class="panel" id="p3">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="entete"><div><h2>Je comprends. La taille des fichiers</h2><p class="muted">On lit cette page ensemble. Elle est dans ton livret.</p></div><span class="score">25 min</span></div>
|
<div class="carte-entete"><div><h2>Je comprends. La taille des fichiers</h2><p class="muted">On lit cette page ensemble. Elle est dans ton livret.</p></div><span class="score">25 min</span></div>
|
||||||
|
|
||||||
<p>Un stockage n'est pas infini, comme un placard a un nombre d'étagères. La taille d'un fichier se mesure en <b>octets</b>. Une lettre tapée au clavier occupe environ un octet.</p>
|
<p>Un stockage n'est pas infini, comme un placard a un nombre d'étagères. La taille d'un fichier se mesure en <b>octets</b>. Une lettre tapée au clavier occupe environ un octet.</p>
|
||||||
<p>Pour éviter les nombres immenses, on utilise des préfixes, comme pour les mètres : <b>kilo</b> veut dire mille, comme dans kilomètre.</p>
|
<p>Pour éviter les nombres immenses, on utilise des préfixes, comme pour les mètres : <b>kilo</b> veut dire mille, comme dans kilomètre.</p>
|
||||||
@@ -438,26 +255,26 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
|
|
||||||
<g font-family="Arial, Helvetica, sans-serif" text-anchor="middle">
|
<g font-family="Arial, Helvetica, sans-serif" text-anchor="middle">
|
||||||
<g font-size="22" font-weight="bold">
|
<g font-size="22" font-weight="bold">
|
||||||
<rect x="20" y="60" width="120" height="70" rx="12" fill="#f1f5f9" stroke="#475569" stroke-width="2.5"/><text x="80" y="104" fill="#334155">octet</text>
|
<rect x="20" y="60" width="120" height="70" rx="12" fill="var(--papier)" stroke="var(--encre-douce)" stroke-width="2.5"/><text x="80" y="104" fill="var(--encre-douce)">octet</text>
|
||||||
<rect x="180" y="60" width="120" height="70" rx="12" fill="#dbeafe" stroke="#1d4ed8" stroke-width="2.5"/><text x="240" y="104" fill="#1d4ed8">Ko</text>
|
<rect x="180" y="60" width="120" height="70" rx="12" fill="#dbeafe" stroke="#1d4ed8" stroke-width="2.5"/><text x="240" y="104" fill="#1d4ed8">Ko</text>
|
||||||
<rect x="340" y="60" width="120" height="70" rx="12" fill="#dcfce7" stroke="#15803d" stroke-width="2.5"/><text x="400" y="104" fill="#15803d">Mo</text>
|
<rect x="340" y="60" width="120" height="70" rx="12" fill="#dcfce7" stroke="#15803d" stroke-width="2.5"/><text x="400" y="104" fill="#15803d">Mo</text>
|
||||||
<rect x="500" y="60" width="120" height="70" rx="12" fill="#fef3c7" stroke="#b45309" stroke-width="2.5"/><text x="560" y="104" fill="#b45309">Go</text>
|
<rect x="500" y="60" width="120" height="70" rx="12" fill="#fef3c7" stroke="#b45309" stroke-width="2.5"/><text x="560" y="104" fill="#b45309">Go</text>
|
||||||
<rect x="660" y="60" width="120" height="70" rx="12" fill="#fee2e2" stroke="#b91c1c" stroke-width="2.5"/><text x="720" y="104" fill="#b91c1c">To</text>
|
<rect x="660" y="60" width="120" height="70" rx="12" fill="#fee2e2" stroke="#b91c1c" stroke-width="2.5"/><text x="720" y="104" fill="#b91c1c">To</text>
|
||||||
</g>
|
</g>
|
||||||
<g font-size="15" font-weight="bold" fill="#172554">
|
<g font-size="15" font-weight="bold" fill="var(--encre)">
|
||||||
<text x="160" y="45">× 1000</text><text x="320" y="45">× 1000</text><text x="480" y="45">× 1000</text><text x="640" y="45">× 1000</text>
|
<text x="160" y="45">× 1000</text><text x="320" y="45">× 1000</text><text x="480" y="45">× 1000</text><text x="640" y="45">× 1000</text>
|
||||||
</g>
|
</g>
|
||||||
<g stroke="#172554" stroke-width="2.5" fill="none">
|
<g stroke="var(--encre)" stroke-width="2.5" fill="none">
|
||||||
<path d="M142 95 H176"/><path d="M302 95 H336"/><path d="M462 95 H496"/><path d="M622 95 H656"/>
|
<path d="M142 95 H176"/><path d="M302 95 H336"/><path d="M462 95 H496"/><path d="M622 95 H656"/>
|
||||||
</g>
|
</g>
|
||||||
<g font-size="13" fill="#475569">
|
<g font-size="13" fill="var(--encre-douce)">
|
||||||
<text x="80" y="160">une lettre</text>
|
<text x="80" y="160">une lettre</text>
|
||||||
<text x="240" y="160">un texte court</text>
|
<text x="240" y="160">un texte court</text>
|
||||||
<text x="400" y="160">une photo,</text><text x="400" y="178">une chanson</text>
|
<text x="400" y="160">une photo,</text><text x="400" y="178">une chanson</text>
|
||||||
<text x="560" y="160">un film,</text><text x="560" y="178">une clé USB</text>
|
<text x="560" y="160">un film,</text><text x="560" y="178">une clé USB</text>
|
||||||
<text x="720" y="160">un gros disque</text><text x="720" y="178">de sauvegarde</text>
|
<text x="720" y="160">un gros disque</text><text x="720" y="178">de sauvegarde</text>
|
||||||
</g>
|
</g>
|
||||||
<text x="400" y="225" font-size="15" font-weight="bold" fill="#172554">Plus petit ←————————————————————→ Plus grand</text>
|
<text x="400" y="225" font-size="15" font-weight="bold" fill="var(--encre)">Plus petit ←————————————————————→ Plus grand</text>
|
||||||
</g></svg>
|
</g></svg>
|
||||||
</figure>
|
</figure>
|
||||||
|
|
||||||
@@ -482,12 +299,12 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="entete"><div><h2>Je m'entraine</h2><p class="muted">Quatre exercices, 25 questions. La correction s'affiche tout de suite avec l'explication.</p></div></div>
|
<div class="carte-entete"><div><h2>Je m'entraine</h2><p class="muted">Quatre exercices, 25 questions. La correction s'affiche tout de suite avec l'explication.</p></div></div>
|
||||||
<div class="consigne"><small>Avant de commencer</small>
|
<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>
|
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">
|
<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>
|
<div class="barre"><i id="jauge"></i></div>
|
||||||
<span class="score" id="avancement">0 / 25</span>
|
<span class="score" id="avancement">0 / 25</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -506,7 +323,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
<div class="row" style="margin-top:22px"><button class="btn primary" id="voir">Voir mon résultat</button><button class="btn soft" id="reset">Tout recommencer</button></div>
|
<div 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 id="bilan" style="margin-top:20px">
|
||||||
<div class="row" style="align-items:flex-end;gap:20px;margin-bottom:16px">
|
<div class="row" style="align-items:flex-end;gap:20px;margin-bottom:16px">
|
||||||
<div><span class="gros" id="gTotal">0</span><span style="font-size:22px;font-weight:800;color:#94a3b8"> / 25</span></div>
|
<div><span class="gros" id="gTotal">0</span><span style="font-size:22px;font-weight:800;color:var(--encre-douce)"> / 25</span></div>
|
||||||
<div class="muted" id="gMot" style="font-weight:800;font-size:18px"></div>
|
<div class="muted" id="gMot" style="font-weight:800;font-size:18px"></div>
|
||||||
</div>
|
</div>
|
||||||
<div id="gDetail" style="margin-bottom:16px"></div>
|
<div id="gDetail" style="margin-bottom:16px"></div>
|
||||||
@@ -520,7 +337,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
<!-- 5 -->
|
<!-- 5 -->
|
||||||
<section class="panel" id="p4">
|
<section class="panel" id="p4">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="entete"><div><h2>La correction du classement</h2><p class="muted">On corrige ensemble.</p></div><span class="score">15 min</span></div>
|
<div class="carte-entete"><div><h2>La correction du classement</h2><p class="muted">On corrige ensemble.</p></div><span class="score">15 min</span></div>
|
||||||
<div class="row" style="margin-bottom:12px">
|
<div class="row" style="margin-bottom:12px">
|
||||||
<button class="btn primary" id="corSuiv">Révéler le fichier suivant</button>
|
<button class="btn primary" id="corSuiv">Révéler le fichier suivant</button>
|
||||||
<button class="btn soft" id="corReset">Tout masquer</button>
|
<button class="btn soft" id="corReset">Tout masquer</button>
|
||||||
@@ -543,7 +360,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
<!-- 6 -->
|
<!-- 6 -->
|
||||||
<section class="panel" id="p5">
|
<section class="panel" id="p5">
|
||||||
<div class="card">
|
<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">
|
<div class="row" style="margin-bottom:16px">
|
||||||
<button class="btn primary" id="motSuiv">Révéler le mot suivant</button>
|
<button class="btn primary" id="motSuiv">Révéler le mot suivant</button>
|
||||||
<button class="btn soft" id="motReset">Tout masquer</button>
|
<button class="btn soft" id="motReset">Tout masquer</button>
|
||||||
@@ -563,7 +380,9 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
<footer>Bloc 3 sur 35 · Séquence annuelle 1TC-NUM, volet numérique FMTTN · 2026-2027 · M. Courcelle</footer>
|
<footer class="pied">
|
||||||
|
<div class="pied__interieur">Bloc 3 sur 35 · Séquence annuelle 1TC-NUM, volet numérique FMTTN · 2026-2027 · M. Courcelle</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
"use strict";
|
"use strict";
|
||||||
@@ -716,7 +535,7 @@ var OBS=[["Le dossier du poste","Interne","Non","Non"],["La clé USB","Externe",
|
|||||||
var oi=0;
|
var oi=0;
|
||||||
function dessineObs(){
|
function dessineObs(){
|
||||||
var h="<tr><th>Où j'ai enregistré</th><th>Interne ou externe</th><th>Sur l'autre poste ?</th><th>Réseau ou internet ?</th></tr>";
|
var h="<tr><th>Où j'ai enregistré</th><th>Interne ou externe</th><th>Sur l'autre poste ?</th><th>Réseau ou internet ?</th></tr>";
|
||||||
OBS.forEach(function(o,i){var v=i<oi;h+="<tr"+(v?' class="on"':"")+"><td><b style='color:#172033'>"+o[0]+"</b></td>"+(v?"<td><b>"+o[1]+"</b></td><td><b>"+o[2]+"</b></td><td><b>"+o[3]+"</b></td>":'<td class="masque">.</td><td class="masque">.</td><td class="masque">.</td>')+"</tr>";});
|
OBS.forEach(function(o,i){var v=i<oi;h+="<tr"+(v?' class="on"':"")+"><td><b style='color:var(--encre)'>"+o[0]+"</b></td>"+(v?"<td><b>"+o[1]+"</b></td><td><b>"+o[2]+"</b></td><td><b>"+o[3]+"</b></td>":'<td class="masque">.</td><td class="masque">.</td><td class="masque">.</td>')+"</tr>";});
|
||||||
document.getElementById("tableObs").innerHTML=h;
|
document.getElementById("tableObs").innerHTML=h;
|
||||||
document.getElementById("noteObs").textContent=oi>=OBS.length?"Les trois fichiers existent toujours : ils sont tous dans un stockage. Ce qui change, c'est seulement l'endroit. Celui du poste n'est pas perdu, il est resté sur l'autre machine.":"";
|
document.getElementById("noteObs").textContent=oi>=OBS.length?"Les trois fichiers existent toujours : ils sont tous dans un stockage. Ce qui change, c'est seulement l'endroit. Celui du poste n'est pas perdu, il est resté sur l'autre machine.":"";
|
||||||
}
|
}
|
||||||
@@ -743,7 +562,7 @@ function dessineTri(){
|
|||||||
};
|
};
|
||||||
z.appendChild(b);
|
z.appendChild(b);
|
||||||
});
|
});
|
||||||
document.getElementById("rangee").innerHTML=ORDRE.slice(0,pos).map(function(o){return '<span class="pas">'+o[0]+' · '+o[2]+'</span>';}).join('<span style="color:#94a3b8;font-weight:900">→</span>');
|
document.getElementById("rangee").innerHTML=ORDRE.slice(0,pos).map(function(o){return '<span class="pas">'+o[0]+' · '+o[2]+'</span>';}).join('<span style="color:var(--encre-douce);font-weight:900">→</span>');
|
||||||
majTri();
|
majTri();
|
||||||
}
|
}
|
||||||
function majTri(){document.getElementById("triInfo").textContent=pos+" sur 8 · "+err+" erreur"+(err>1?"s":"");}
|
function majTri(){document.getElementById("triInfo").textContent=pos+" sur 8 · "+err+" erreur"+(err>1?"s":"");}
|
||||||
@@ -754,7 +573,7 @@ dessineTri();
|
|||||||
var ci=0;
|
var ci=0;
|
||||||
function dessineCor(){
|
function dessineCor(){
|
||||||
var h="<tr><th>Rang</th><th>Fichier</th><th>Taille</th></tr>";
|
var h="<tr><th>Rang</th><th>Fichier</th><th>Taille</th></tr>";
|
||||||
ORDRE.forEach(function(o,i){var v=i<ci;h+="<tr"+(v?' class="on"':"")+"><td><b style='color:#172033'>"+(i+1)+"</b></td>"+(v?"<td><b>"+o[0]+"</b> · "+o[1]+"</td><td><b>"+o[2]+"</b></td>":'<td class="masque">.</td><td class="masque">.</td>')+"</tr>";});
|
ORDRE.forEach(function(o,i){var v=i<ci;h+="<tr"+(v?' class="on"':"")+"><td><b style='color:var(--encre)'>"+(i+1)+"</b></td>"+(v?"<td><b>"+o[0]+"</b> · "+o[1]+"</td><td><b>"+o[2]+"</b></td>":'<td class="masque">.</td><td class="masque">.</td>')+"</tr>";});
|
||||||
document.getElementById("tableCor").innerHTML=h;
|
document.getElementById("tableCor").innerHTML=h;
|
||||||
document.getElementById("noteCor").textContent=ci>=ORDRE.length?"Les deux pièges : 850 Ko est plus petit que 3,2 Mo, et 450 Mo est plus petit que 2,4 Go. Dans les deux cas, le plus grand nombre est le plus petit fichier. L'unité d'abord.":"";
|
document.getElementById("noteCor").textContent=ci>=ORDRE.length?"Les deux pièges : 850 Ko est plus petit que 3,2 Mo, et 450 Mo est plus petit que 2,4 Go. Dans les deux cas, le plus grand nombre est le plus petit fichier. L'unité d'abord.":"";
|
||||||
}
|
}
|
||||||
@@ -776,7 +595,7 @@ var MOTS={1:"vive",2:"stockage",3:"Enregistrer",4:"morte",5:"interne",6:"externe
|
|||||||
var rv=0,zt=document.getElementById("trace");
|
var rv=0,zt=document.getElementById("trace");
|
||||||
function dessineTrace(){
|
function dessineTrace(){
|
||||||
zt.innerHTML="<h3>Cours 3. Où va ce que j'enregistre</h3>"+TRACE.map(function(par){return "<p>"+par.map(function(x){
|
zt.innerHTML="<h3>Cours 3. Où va ce que j'enregistre</h3>"+TRACE.map(function(par){return "<p>"+par.map(function(x){
|
||||||
if(typeof x==="number")return x<=rv?'<b style="color:#1d4ed8">'+MOTS[x]+'</b>':'<span style="border-bottom:2px solid #93c5fd;color:#93c5fd"> </span>';
|
if(typeof x==="number")return x<=rv?'<b style="color:var(--accent-encre)">'+MOTS[x]+'</b>':'<span style="border-bottom:2px solid var(--accent);color:var(--accent)"> </span>';
|
||||||
return x;}).join("")+"</p>";}).join("");
|
return x;}).join("")+"</p>";}).join("");
|
||||||
document.getElementById("motCompte").textContent=rv+" mot"+(rv>1?"s":"")+" sur 8";
|
document.getElementById("motCompte").textContent=rv+" mot"+(rv>1?"s":"")+" sur 8";
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,236 +1,45 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="fr">
|
<html lang="fr">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>Cours 4 – Comment ça circule</title>
|
<title>Cours 4, comment ça circule — 1re tronc commun</title>
|
||||||
<style>:root{--ink:#172033;--muted:#667085;--blue:#2563eb;--navy:#172554;--green:#16a34a;--red:#dc2626;--card:#fff;--line:#e5e7eb;--shadow:0 18px 45px #0f172a18}
|
<meta name="robots" content="noindex">
|
||||||
*{box-sizing:border-box}html{scroll-behavior:smooth}
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
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)}
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
button,input,select{font:inherit}
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
|
||||||
main{max-width:1180px;margin:auto;padding:34px 20px 70px}
|
<link rel="stylesheet" href="../assets/theme.css">
|
||||||
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
|
<link rel="stylesheet" href="../assets/numerique-1re.css">
|
||||||
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>
|
</head>
|
||||||
<body>
|
<body class="classe-tc">
|
||||||
<main>
|
|
||||||
|
|
||||||
<section class="hero">
|
<header class="entete">
|
||||||
<div>
|
<div class="entete__interieur entete__interieur--large">
|
||||||
<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>
|
<nav class="ariane" aria-label="Fil d'Ariane">
|
||||||
<div class="eyebrow">Cours 4 · Formation numérique · 1re année</div>
|
<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>
|
<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>
|
<p class="entete__meta">Cours 4 · Formation numérique · 1re année</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>
|
||||||
<div class="hero-visual">
|
</header>
|
||||||
<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>
|
<main class="contenu contenu--large">
|
||||||
<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>
|
<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>
|
||||||
</div>
|
|
||||||
</section>
|
<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">
|
<section class="dashboard">
|
||||||
<div class="stat"><small>Activité en cours</small><strong id="sPhase">1 sur 6</strong></div>
|
<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">
|
<div class="row">
|
||||||
<button class="btn primary" id="btnGo">Démarrer</button>
|
<button class="btn primary" id="btnGo">Démarrer</button>
|
||||||
<button class="btn soft" id="btnStop">Remettre à zéro</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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -251,43 +60,43 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
|
|
||||||
<!-- 1 -->
|
<!-- 1 -->
|
||||||
<section class="panel active" id="p0"><div class="card">
|
<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">
|
<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">
|
<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"/>
|
<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>
|
<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="60" y1="131" x2="130" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
|
||||||
<line x1="130" y1="131" x2="130" y2="158" stroke="#94a3b8" 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="#94a3b8" 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="#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="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="#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="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="#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="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>
|
<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"/>
|
<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>
|
<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="330" y1="131" x2="400" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
|
||||||
<line x1="400" y1="131" x2="400" y2="158" stroke="#94a3b8" 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="#94a3b8" 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="#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="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="#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="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="#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="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>
|
<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"/>
|
<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>
|
<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="600" y1="131" x2="670" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
|
||||||
<line x1="670" y1="131" x2="670" y2="158" stroke="#94a3b8" 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="#94a3b8" 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="#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="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="#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="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="#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="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>
|
<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>
|
<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"/>
|
<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="#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><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>
|
</g></svg></figure>
|
||||||
<div class="accordeon" id="regles"></div>
|
<div class="accordeon" id="regles"></div>
|
||||||
<h3 style="margin-top:22px">Les trois manches</h3>
|
<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 -->
|
<!-- 2 -->
|
||||||
<section class="panel" id="p1">
|
<section class="panel" id="p1">
|
||||||
<div class="card">
|
<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">
|
<div class="envoi">
|
||||||
<label>De <select id="de"></select></label>
|
<label>De <select id="de"></select></label>
|
||||||
<label>vers <select id="vers"></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">
|
<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"/>
|
<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>
|
<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_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="#94a3b8" 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="#94a3b8" 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="#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="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="#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="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="#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="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>
|
<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"/>
|
<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>
|
<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_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="#94a3b8" 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="#94a3b8" 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="#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="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="#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="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="#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="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>
|
<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"/>
|
<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>
|
<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_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="#94a3b8" 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="#94a3b8" 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="#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="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="#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="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="#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="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>
|
<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>
|
<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"/>
|
<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="#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 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>
|
</g></svg></div>
|
||||||
<ol class="journal" id="journal"></ol>
|
<ol class="journal" id="journal"></ol>
|
||||||
</div>
|
</div>
|
||||||
@@ -384,7 +193,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
|
|
||||||
<!-- 3 -->
|
<!-- 3 -->
|
||||||
<section class="panel" id="p2"><div class="card">
|
<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="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="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>
|
<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 -->
|
<!-- 4 -->
|
||||||
<section class="panel" id="p3">
|
<section class="panel" id="p3">
|
||||||
<div class="card">
|
<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">
|
<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">
|
<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"/>
|
<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="#172554">Mon poste</text><text x="85" y="132" text-anchor="middle" font-size="12" fill="#475569">et son navigateur</text>
|
<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>
|
<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="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="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>
|
<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>
|
<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"/>
|
<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>
|
<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>
|
<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)"/>
|
<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="#172554"/><path d="M650 88 h100 M650 108 h100 M650 128 h100" stroke="#6366f1" stroke-width="3"/>
|
<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>
|
<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)"/>
|
<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>
|
<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>
|
||||||
|
|
||||||
<div class="card">
|
<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>
|
<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>
|
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">
|
<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>
|
<div class="barre"><i id="jauge"></i></div>
|
||||||
<span class="score" id="avancement">0 / 20</span>
|
<span class="score" id="avancement">0 / 20</span>
|
||||||
</div>
|
</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 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 id="bilan" style="margin-top:20px">
|
||||||
<div class="row" style="align-items:flex-end;gap:20px;margin-bottom:16px">
|
<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 class="muted" id="gMot" style="font-weight:800;font-size:18px"></div>
|
||||||
</div>
|
</div>
|
||||||
<div id="gDetail" style="margin-bottom:16px"></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 -->
|
<!-- 5 -->
|
||||||
<section class="panel" id="p4">
|
<section class="panel" id="p4">
|
||||||
<div class="card">
|
<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>
|
<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>
|
<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>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>
|
<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">
|
<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">
|
<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"/>
|
<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="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="98" font-size="13" fill="var(--encre-douce)">pages et liens</text>
|
||||||
<text x="110" y="120" font-size="12" fill="#64748b">avec : navigateur</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="#94a3b8" stroke-width="4"/>
|
<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"/>
|
<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="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="98" font-size="13" fill="var(--encre-douce)">messages</text>
|
||||||
<text x="303" y="120" font-size="12" fill="#64748b">avec : application mail</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="#94a3b8" stroke-width="4"/>
|
<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"/>
|
<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="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="98" font-size="13" fill="var(--encre-douce)">parties</text>
|
||||||
<text x="496" y="120" font-size="12" fill="#64748b">avec : le jeu lui-même</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="#94a3b8" stroke-width="4"/>
|
<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"/>
|
<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="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="98" font-size="13" fill="var(--encre-douce)">discussions</text>
|
||||||
<text x="689" y="120" font-size="12" fill="#64748b">avec : application</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="#94a3b8" stroke-width="4"/>
|
<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"/>
|
<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="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>
|
<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 -->
|
<!-- 6 -->
|
||||||
<section class="panel" id="p5">
|
<section class="panel" id="p5">
|
||||||
<div class="card">
|
<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">
|
<div class="row" style="margin-bottom:16px">
|
||||||
<button class="btn primary" id="motSuiv">Révéler le mot suivant</button>
|
<button class="btn primary" id="motSuiv">Révéler le mot suivant</button>
|
||||||
<button class="btn soft" id="motReset">Tout masquer</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>
|
</section>
|
||||||
|
|
||||||
</main>
|
</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>
|
<script>
|
||||||
"use strict";
|
"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."]];
|
["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 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");
|
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"> </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)"> </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("motSuiv").onclick=function(){if(rv<8){rv++;dessineTrace();}};
|
||||||
document.getElementById("motReset").onclick=function(){rv=0;dessineTrace();};
|
document.getElementById("motReset").onclick=function(){rv=0;dessineTrace();};
|
||||||
dessineTrace();
|
dessineTrace();
|
||||||
|
|||||||
@@ -1,236 +1,46 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="fr">
|
<html lang="fr">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>Bloc 4 – pilotage</title>
|
<title>Bloc 4, pilotage — 1re tronc commun</title>
|
||||||
<style>:root{--ink:#172033;--muted:#667085;--blue:#2563eb;--navy:#172554;--green:#16a34a;--red:#dc2626;--card:#fff;--line:#e5e7eb;--shadow:0 18px 45px #0f172a18}
|
<meta name="robots" content="noindex">
|
||||||
*{box-sizing:border-box}html{scroll-behavior:smooth}
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
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)}
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
button,input,select{font:inherit}
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
|
||||||
main{max-width:1180px;margin:auto;padding:34px 20px 70px}
|
<link rel="stylesheet" href="../assets/theme.css">
|
||||||
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
|
<link rel="stylesheet" href="../assets/numerique-1re.css">
|
||||||
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>
|
</head>
|
||||||
<body>
|
<body class="classe-tc">
|
||||||
<main>
|
|
||||||
|
|
||||||
<section class="hero">
|
<header class="entete">
|
||||||
<div>
|
<div class="entete__interieur entete__interieur--large">
|
||||||
<a class="up" href="pilotage.html"><svg class="i" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg> Retour au menu</a>
|
<nav class="ariane" aria-label="Fil d'Ariane">
|
||||||
<div class="eyebrow">Document enseignant · Module 1 · Semaine 4 · Bloc 4 sur 35</div>
|
<a href="../index.html">Mes cours</a><span aria-hidden="true">/</span><a href="index.html">1re tronc commun</a><span aria-hidden="true">/</span><a href="pilotage.html">Pilotage</a><span aria-hidden="true">/</span><strong>Bloc 4</strong>
|
||||||
|
</nav>
|
||||||
<h1>Comment ça circule</h1>
|
<h1>Comment ça circule</h1>
|
||||||
<p style="margin-bottom:10px"><a href="1TC-NUM_bloc-04_comment-ca-circule.html" style="color:#fff;font-weight:800">Ouvrir la version à projeter aux élèves</a></p><p>Obligatoires : connexion, routeur, réseau, adresse IP. Facultatifs, non cotables : serveur, web, Internet. Le mot que les élèves emploient le plus est justement celui qui n'est pas exigible.</p>
|
<p class="entete__meta">Document enseignant · Module 1 · Semaine 4 · Bloc 4 sur 35</p>
|
||||||
<div class="badges">
|
|
||||||
<span class="badge">S17 · connexion, routeur, réseau, adresse IP</span>
|
|
||||||
<span class="badge">serveur, web, Internet · facultatifs</span>
|
|
||||||
<span class="badge warn">Ne pas projeter</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="hero-visual">
|
</header>
|
||||||
<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>
|
<main class="contenu contenu--large">
|
||||||
<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>
|
<p class="chapeau"><a href="1TC-NUM_bloc-04_comment-ca-circule.html">Ouvrir la version à projeter aux élèves</a></p>
|
||||||
</div>
|
<p class="chapeau">Obligatoires : connexion, routeur, réseau, adresse IP. Facultatifs, non cotables : serveur, web, Internet. Le mot que les élèves emploient le plus est justement celui qui n'est pas exigible.</p>
|
||||||
</section>
|
|
||||||
|
<ul class="etiquettes">
|
||||||
|
<li class="etiquette">S17 · connexion, routeur, réseau, adresse IP</li>
|
||||||
|
<li class="etiquette">serveur, web, Internet · facultatifs</li>
|
||||||
|
<li class="etiquette etiquette--alerte">Ne pas projeter</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<ul class="apercu">
|
||||||
|
<li><svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2"/><path d="M3 7l9 6 9-6"/></svg><span>Le courrier</span></li>
|
||||||
|
<li><svg viewBox="0 0 24 24"><rect x="3" y="12" width="18" height="7" rx="2"/><path d="M7 12V8M17 12V8M7 16h.01M11 16h.01"/></svg><span>Le routeur</span></li>
|
||||||
|
<li><svg viewBox="0 0 24 24"><path d="M4 7h4M4 12h7M4 17h5M14 7h6M14 12h6M14 17h6"/></svg><span>L'adresse IP</span></li>
|
||||||
|
<li><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg><span>Internet</span></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
<section class="dashboard">
|
<section class="dashboard">
|
||||||
<div class="stat"><small>Activité en cours</small><strong id="sPhase">1 sur 6</strong></div>
|
<div class="stat"><small>Activité en cours</small><strong id="sPhase">1 sur 6</strong></div>
|
||||||
@@ -243,7 +53,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
<div class="row">
|
<div class="row">
|
||||||
<button class="btn primary" id="btnGo">Démarrer</button>
|
<button class="btn primary" id="btnGo">Démarrer</button>
|
||||||
<button class="btn soft" id="btnStop">Remettre à zéro</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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -251,43 +61,43 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
|
|
||||||
<!-- 1 -->
|
<!-- 1 -->
|
||||||
<section class="panel active" id="p0"><div class="card">
|
<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">
|
<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">
|
<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"/>
|
<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>
|
<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="60" y1="131" x2="130" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
|
||||||
<line x1="130" y1="131" x2="130" y2="158" stroke="#94a3b8" 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="#94a3b8" 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="#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="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="#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="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="#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="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>
|
<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"/>
|
<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>
|
<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="330" y1="131" x2="400" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
|
||||||
<line x1="400" y1="131" x2="400" y2="158" stroke="#94a3b8" 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="#94a3b8" 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="#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="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="#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="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="#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="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>
|
<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"/>
|
<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>
|
<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="600" y1="131" x2="670" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
|
||||||
<line x1="670" y1="131" x2="670" y2="158" stroke="#94a3b8" 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="#94a3b8" 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="#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="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="#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="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="#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="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>
|
<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>
|
<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"/>
|
<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="#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><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>
|
</g></svg></figure>
|
||||||
<div class="accordeon" id="regles"></div>
|
<div class="accordeon" id="regles"></div>
|
||||||
<h3 style="margin-top:22px">Les trois manches</h3>
|
<h3 style="margin-top:22px">Les trois manches</h3>
|
||||||
@@ -302,7 +112,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
<!-- 2 -->
|
<!-- 2 -->
|
||||||
<section class="panel" id="p1">
|
<section class="panel" id="p1">
|
||||||
<div class="card">
|
<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">
|
<div class="envoi">
|
||||||
<label>De <select id="de"></select></label>
|
<label>De <select id="de"></select></label>
|
||||||
<label>vers <select id="vers"></select></label>
|
<label>vers <select id="vers"></select></label>
|
||||||
@@ -314,37 +124,37 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
<g font-family="Arial, Helvetica, sans-serif">
|
<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"/>
|
<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>
|
<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_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="#94a3b8" 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="#94a3b8" 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="#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="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="#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="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="#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="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>
|
<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"/>
|
<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>
|
<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_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="#94a3b8" 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="#94a3b8" 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="#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="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="#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="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="#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="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>
|
<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"/>
|
<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>
|
<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_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="#94a3b8" 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="#94a3b8" 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="#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="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="#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="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="#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="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>
|
<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>
|
<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"/>
|
<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="#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 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>
|
</g></svg></div>
|
||||||
<ol class="journal" id="journal"></ol>
|
<ol class="journal" id="journal"></ol>
|
||||||
<div class="info"><b>Rejoue les trois manches.</b> Un envoi entre deux réseaux, une demande au serveur, puis mets le routeur 2 en panne et renvoie un message vers le réseau 2. Le vocabulaire s'affiche sur chaque étape.</div>
|
<div class="info"><b>Rejoue les trois manches.</b> Un envoi entre deux réseaux, une demande au serveur, puis mets le routeur 2 en panne et renvoie un message vers le réseau 2. Le vocabulaire s'affiche sur chaque étape.</div>
|
||||||
@@ -393,7 +203,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
|
|
||||||
<!-- 3 -->
|
<!-- 3 -->
|
||||||
<section class="panel" id="p2"><div class="card">
|
<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="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="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>
|
<div class="consigne" style="margin-top:20px"><small>Attention</small>
|
||||||
@@ -409,25 +219,25 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
<!-- 4 -->
|
<!-- 4 -->
|
||||||
<section class="panel" id="p3">
|
<section class="panel" id="p3">
|
||||||
<div class="card">
|
<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">
|
<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">
|
<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"/>
|
<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="#172554">Mon poste</text><text x="85" y="132" text-anchor="middle" font-size="12" fill="#475569">et son navigateur</text>
|
<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>
|
<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="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="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>
|
<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>
|
<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"/>
|
<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>
|
<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>
|
<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)"/>
|
<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="#172554"/><path d="M650 88 h100 M650 108 h100 M650 128 h100" stroke="#6366f1" stroke-width="3"/>
|
<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>
|
<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)"/>
|
<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>
|
<text x="400" y="252" text-anchor="middle" font-size="14" font-weight="bold" fill="#15803d">le serveur renvoie la page web par le même chemin</text>
|
||||||
@@ -439,11 +249,11 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="card">
|
<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>
|
<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>
|
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">
|
<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>
|
<div class="barre"><i id="jauge"></i></div>
|
||||||
<span class="score" id="avancement">0 / 20</span>
|
<span class="score" id="avancement">0 / 20</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -456,7 +266,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
<div class="row" style="margin-top:22px"><button class="btn primary" id="voir">Voir mon résultat</button><button class="btn soft" id="reset">Tout recommencer</button></div>
|
<div 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 id="bilan" style="margin-top:20px">
|
||||||
<div class="row" style="align-items:flex-end;gap:20px;margin-bottom:16px">
|
<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 class="muted" id="gMot" style="font-weight:800;font-size:18px"></div>
|
||||||
</div>
|
</div>
|
||||||
<div id="gDetail" style="margin-bottom:16px"></div>
|
<div id="gDetail" style="margin-bottom:16px"></div>
|
||||||
@@ -470,7 +280,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
<!-- 5 -->
|
<!-- 5 -->
|
||||||
<section class="panel" id="p4">
|
<section class="panel" id="p4">
|
||||||
<div class="card">
|
<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>
|
<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>
|
<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>Internet, ce sont les routes</b> : un immense réseau qui relie tout.<br>
|
||||||
@@ -479,27 +289,27 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
<p>Sur les mêmes routes circulent aussi d'autres choses : les <b>courriels</b>, les <b>jeux en ligne</b>, la <b>messagerie</b> comme WhatsApp ou Snapchat, la <b>musique</b> et les <b>vidéos</b> dans leurs applications. Tous utilisent Internet. Aucun n'a besoin d'un navigateur. Ce n'est pas le web.</p>
|
<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">
|
<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">
|
<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"/>
|
<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="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="98" font-size="13" fill="var(--encre-douce)">pages et liens</text>
|
||||||
<text x="110" y="120" font-size="12" fill="#64748b">avec : navigateur</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="#94a3b8" stroke-width="4"/>
|
<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"/>
|
<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="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="98" font-size="13" fill="var(--encre-douce)">messages</text>
|
||||||
<text x="303" y="120" font-size="12" fill="#64748b">avec : application mail</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="#94a3b8" stroke-width="4"/>
|
<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"/>
|
<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="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="98" font-size="13" fill="var(--encre-douce)">parties</text>
|
||||||
<text x="496" y="120" font-size="12" fill="#64748b">avec : le jeu lui-même</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="#94a3b8" stroke-width="4"/>
|
<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"/>
|
<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="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="98" font-size="13" fill="var(--encre-douce)">discussions</text>
|
||||||
<text x="689" y="120" font-size="12" fill="#64748b">avec : application</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="#94a3b8" stroke-width="4"/>
|
<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"/>
|
<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="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>
|
<text x="400" y="226" font-size="13" fill="#5b21b6">le réseau des réseaux, qui transporte tout le reste</text>
|
||||||
@@ -522,7 +332,7 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
<!-- 6 -->
|
<!-- 6 -->
|
||||||
<section class="panel" id="p5">
|
<section class="panel" id="p5">
|
||||||
<div class="card">
|
<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">
|
<div class="row" style="margin-bottom:16px">
|
||||||
<button class="btn primary" id="motSuiv">Révéler le mot suivant</button>
|
<button class="btn primary" id="motSuiv">Révéler le mot suivant</button>
|
||||||
<button class="btn soft" id="motReset">Tout masquer</button>
|
<button class="btn soft" id="motReset">Tout masquer</button>
|
||||||
@@ -542,7 +352,9 @@ textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
<footer>Bloc 4 sur 35 · Séquence annuelle 1TC-NUM, volet numérique FMTTN · 2026-2027 · M. Courcelle</footer>
|
<footer class="pied">
|
||||||
|
<div class="pied__interieur">Bloc 4 sur 35 · Séquence annuelle 1TC-NUM, volet numérique FMTTN · 2026-2027 · M. Courcelle</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
"use strict";
|
"use strict";
|
||||||
@@ -742,7 +554,7 @@ var TRACE=[["Un ",1,", ce sont des appareils reliés entre eux pour échanger de
|
|||||||
["Le ",7," est le logiciel qui affiche les pages. Le ",8," est un service qui utilise Internet, mais ce n'est pas Internet."]];
|
["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 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");
|
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"> </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)"> </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("motSuiv").onclick=function(){if(rv<8){rv++;dessineTrace();}};
|
||||||
document.getElementById("motReset").onclick=function(){rv=0;dessineTrace();};
|
document.getElementById("motReset").onclick=function(){rv=0;dessineTrace();};
|
||||||
dessineTrace();
|
dessineTrace();
|
||||||
|
|||||||
+35
-186
@@ -1,197 +1,46 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="fr">
|
<html lang="fr">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>Formation numérique 1re année – les cours de l'année</title>
|
<title>1re tronc commun — Numérique</title>
|
||||||
<style>:root{--ink:#172033;--muted:#667085;--blue:#2563eb;--navy:#172554;--green:#16a34a;--red:#dc2626;--card:#fff;--line:#e5e7eb;--shadow:0 18px 45px #0f172a18}
|
<meta name="robots" content="noindex">
|
||||||
*{box-sizing:border-box}html{scroll-behavior:smooth}
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
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)}
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
button,input,select{font:inherit}
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
|
||||||
main{max-width:1180px;margin:auto;padding:34px 20px 70px}
|
<link rel="stylesheet" href="../assets/theme.css">
|
||||||
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
|
<link rel="stylesheet" href="../assets/numerique-1re.css">
|
||||||
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>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="classe-tc">
|
||||||
<main>
|
|
||||||
|
|
||||||
<section class="hero">
|
<header class="entete">
|
||||||
<div>
|
<div class="entete__interieur entete__interieur--large">
|
||||||
<div class="eyebrow">1re année · Formation numérique · 2026-2027</div>
|
<nav class="ariane" aria-label="Fil d'Ariane">
|
||||||
|
<a href="../index.html">Mes cours</a><span aria-hidden="true">/</span><strong>1re tronc commun</strong>
|
||||||
|
</nav>
|
||||||
<h1>Les cours de l'année</h1>
|
<h1>Les cours de l'année</h1>
|
||||||
<p>Trente-cinq cours de deux périodes, répartis en six grandes parties. Tu peux revenir sur la page d'un cours quand tu veux, pour revoir ce qu'on a fait.</p>
|
<p class="entete__meta">1re année · Formation numérique · 2026-2027</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="hero-visual">
|
</header>
|
||||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="13" rx="2"/><path d="M8 21h8M12 17v4"/></svg><b>La machine</b></div>
|
|
||||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M12 3l8 4v5c0 5-3.4 8.2-8 9-4.6-.8-8-4-8-9V7z"/></svg><b>Moi en ligne</b></div>
|
<main class="contenu contenu--large">
|
||||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M21 12a8 8 0 1 1-3.2-6.4"/><path d="M3 20l1.6-4.2"/><path d="M21 4v5h-5"/></svg><b>Communiquer</b></div>
|
|
||||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M4 4h16v16H4z"/><path d="M8 9h8M8 13h8M8 17h5"/></svg><b>Produire</b></div>
|
<p class="chapeau">Trente-cinq cours de deux périodes, répartis en six grandes parties. Tu peux revenir sur la page d'un cours quand tu veux, pour revoir ce qu'on a fait.</p>
|
||||||
</div>
|
|
||||||
</section>
|
<ul class="apercu">
|
||||||
|
<li><svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="13" rx="2"/><path d="M8 21h8M12 17v4"/></svg><span>La machine</span></li>
|
||||||
|
<li><svg viewBox="0 0 24 24"><path d="M12 3l8 4v5c0 5-3.4 8.2-8 9-4.6-.8-8-4-8-9V7z"/></svg><span>Moi en ligne</span></li>
|
||||||
|
<li><svg viewBox="0 0 24 24"><path d="M21 12a8 8 0 1 1-3.2-6.4"/><path d="M3 20l1.6-4.2"/><path d="M21 4v5h-5"/></svg><span>Communiquer</span></li>
|
||||||
|
<li><svg viewBox="0 0 24 24"><path d="M4 4h16v16H4z"/><path d="M8 9h8M8 13h8M8 17h5"/></svg><span>Produire</span></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
<div id="corps"></div>
|
<div id="corps"></div>
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
<footer>Formation numérique · 1re année · M. Courcelle</footer>
|
<footer class="pied">
|
||||||
|
<div class="pied__interieur">Formation numérique · 1re année · M. Courcelle</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
"use strict";
|
"use strict";
|
||||||
@@ -261,9 +110,9 @@ MODULES.forEach(function(m){
|
|||||||
: '<div class="bloc vide">'+in_+'</div>';
|
: '<div class="bloc vide">'+in_+'</div>';
|
||||||
}).join("");
|
}).join("");
|
||||||
var s=document.createElement("section");
|
var s=document.createElement("section");
|
||||||
s.className="module";
|
s.className="partie";
|
||||||
s.innerHTML='<div class="module-tete"><span class="p">Partie '+m.n+'</span><h2>'+m.titre+'</h2>'
|
s.innerHTML='<div class="partie-tete"><span class="p">Partie '+m.n+'</span><h2>'+m.titre+'</h2>'
|
||||||
+'<span class="champ">'+m.quand+'</span></div><p class="module-note">'+m.note+'</p>'
|
+'<span class="champ">'+m.quand+'</span></div><p class="partie-note">'+m.note+'</p>'
|
||||||
+'<div class="blocs">'+cartes+'</div>';
|
+'<div class="blocs">'+cartes+'</div>';
|
||||||
corps.appendChild(s);
|
corps.appendChild(s);
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,74 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="fr">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<title>1re tronc commun — Numérique</title>
|
|
||||||
<meta name="description" content="Les modules du cours de Numérique de 1re tronc commun.">
|
|
||||||
<meta name="robots" content="noindex">
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
|
|
||||||
<link rel="stylesheet" href="../assets/theme.css">
|
|
||||||
</head>
|
|
||||||
<body class="classe-tc">
|
|
||||||
|
|
||||||
<header class="entete">
|
|
||||||
<div class="entete__interieur">
|
|
||||||
<nav class="ariane" aria-label="Fil d'Ariane">
|
|
||||||
<a href="../index.html">Mes cours</a><span aria-hidden="true">/</span><strong>1re tronc commun</strong>
|
|
||||||
</nav>
|
|
||||||
<h1>1re tronc commun</h1>
|
|
||||||
<p class="entete__meta">Numérique · M. Courcelle</p>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main class="contenu">
|
|
||||||
|
|
||||||
<p class="chapeau">Choisis le module sur lequel tu travailles. Chaque module contient la théorie du chapitre, des exercices et des jeux à refaire autant de fois que tu veux.</p>
|
|
||||||
|
|
||||||
<h2>Les modules du cours</h2>
|
|
||||||
|
|
||||||
<!-- ==================================================================
|
|
||||||
POUR AJOUTER UN MODULE
|
|
||||||
1. Créer le dossier du module à côté de ce fichier, avec son
|
|
||||||
index.html dedans (le plus simple : copier un module existant).
|
|
||||||
2. Copier-coller le bloc <li class="module"> ci-dessous, juste
|
|
||||||
avant la fin de la liste, et remplir les quatre champs :
|
|
||||||
module__num « Module 3 », « Module C »…
|
|
||||||
module__titre le titre affiché à l'élève
|
|
||||||
module__resume une phrase sur ce qu'on y fait
|
|
||||||
module__meta nombre de séances, chapitre du cours papier…
|
|
||||||
3. Adapter le href vers le dossier du nouveau module.
|
|
||||||
|
|
||||||
Gabarit à copier :
|
|
||||||
|
|
||||||
<li class="module">
|
|
||||||
<a class="module__lien" href="DOSSIER/index.html">
|
|
||||||
<span class="module__num">Module N</span>
|
|
||||||
<span class="module__titre">Titre du module</span>
|
|
||||||
<span class="module__resume">Ce qu'on y apprend, en une phrase.</span>
|
|
||||||
<span class="module__meta">X séances · cours papier, chapitre Y</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
Un module annoncé mais pas encore prêt : garder le <li> en
|
|
||||||
ajoutant la classe « module--bientot » et remplacer le <a> par
|
|
||||||
un <div class="module__lien">, sans href.
|
|
||||||
================================================================== -->
|
|
||||||
|
|
||||||
<p class="vide">
|
|
||||||
Aucun module n'est encore en ligne pour cette classe.<br>
|
|
||||||
Les exercices arriveront ici au fil de l'année.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer class="pied">
|
|
||||||
<div class="pied__interieur">
|
|
||||||
Les exercices fonctionnent sans connexion Internet et peuvent être lancés depuis une clé USB.
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
+35
-186
@@ -1,192 +1,39 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="fr">
|
<html lang="fr">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>Formation numérique 1TC – les 35 blocs de l'année</title>
|
<title>Pilotage des 35 blocs — 1re tronc commun</title>
|
||||||
<style>:root{--ink:#172033;--muted:#667085;--blue:#2563eb;--navy:#172554;--green:#16a34a;--red:#dc2626;--card:#fff;--line:#e5e7eb;--shadow:0 18px 45px #0f172a18}
|
<meta name="robots" content="noindex">
|
||||||
*{box-sizing:border-box}html{scroll-behavior:smooth}
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
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)}
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
button,input,select{font:inherit}
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
|
||||||
main{max-width:1180px;margin:auto;padding:34px 20px 70px}
|
<link rel="stylesheet" href="../assets/theme.css">
|
||||||
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
|
<link rel="stylesheet" href="../assets/numerique-1re.css">
|
||||||
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>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="classe-tc">
|
||||||
<main>
|
|
||||||
|
|
||||||
<section class="hero">
|
<header class="entete">
|
||||||
<div>
|
<div class="entete__interieur entete__interieur--large">
|
||||||
<div class="eyebrow">Document enseignant · 1TC-NUM · 2026-2027</div>
|
<nav class="ariane" aria-label="Fil d'Ariane">
|
||||||
|
<a href="../index.html">Mes cours</a><span aria-hidden="true">/</span><a href="index.html">1re tronc commun</a><span aria-hidden="true">/</span><strong>Pilotage</strong>
|
||||||
|
</nav>
|
||||||
<h1>Formation numérique<br>Pilotage des 35 blocs</h1>
|
<h1>Formation numérique<br>Pilotage des 35 blocs</h1>
|
||||||
<p>Version enseignant, avec les attendus, les moments d'évaluation et les notes de conduite. Ne pas projeter. La version destinée aux élèves est <a href="index.html" style="color:#fff;text-decoration:underline">ici</a>.</p>
|
<p class="entete__meta">Document enseignant · 1TC-NUM · 2026-2027</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="hero-visual">
|
</header>
|
||||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="13" rx="2"/><path d="M8 21h8M12 17v4"/></svg><b>La machine</b></div>
|
|
||||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M12 3l8 4v5c0 5-3.4 8.2-8 9-4.6-.8-8-4-8-9V7z"/></svg><b>Sécurité</b></div>
|
<main class="contenu contenu--large">
|
||||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M21 12a8 8 0 1 1-3.2-6.4"/><path d="M3 20l1.6-4.2"/><path d="M21 4v5h-5"/></svg><b>Communiquer</b></div>
|
|
||||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M4 4h16v16H4z"/><path d="M8 9h8M8 13h8M8 17h5"/></svg><b>Produire</b></div>
|
<p class="chapeau">Version enseignant, avec les attendus, les moments d'évaluation et les notes de conduite. Ne pas projeter. La version destinée aux élèves est <a href="index.html">ici</a>.</p>
|
||||||
</div>
|
|
||||||
</section>
|
<ul class="apercu">
|
||||||
|
<li><svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="13" rx="2"/><path d="M8 21h8M12 17v4"/></svg><span>La machine</span></li>
|
||||||
|
<li><svg viewBox="0 0 24 24"><path d="M12 3l8 4v5c0 5-3.4 8.2-8 9-4.6-.8-8-4-8-9V7z"/></svg><span>Sécurité</span></li>
|
||||||
|
<li><svg viewBox="0 0 24 24"><path d="M21 12a8 8 0 1 1-3.2-6.4"/><path d="M3 20l1.6-4.2"/><path d="M21 4v5h-5"/></svg><span>Communiquer</span></li>
|
||||||
|
<li><svg viewBox="0 0 24 24"><path d="M4 4h16v16H4z"/><path d="M8 9h8M8 13h8M8 17h5"/></svg><span>Produire</span></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
<section class="dashboard">
|
<section class="dashboard">
|
||||||
<div class="stat"><small>Blocs de 2 périodes</small><strong>35</strong></div>
|
<div class="stat"><small>Blocs de 2 périodes</small><strong>35</strong></div>
|
||||||
@@ -207,7 +54,9 @@ footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:cente
|
|||||||
<div id="corps"></div>
|
<div id="corps"></div>
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
<footer>Séquence annuelle, volet numérique FMTTN · Référentiel et programme SeGEC D/2025/7362/3/13 · M. Courcelle</footer>
|
<footer class="pied">
|
||||||
|
<div class="pied__interieur">Séquence annuelle, volet numérique FMTTN · Référentiel et programme SeGEC D/2025/7362/3/13 · M. Courcelle</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
"use strict";
|
"use strict";
|
||||||
@@ -287,9 +136,9 @@ MODULES.forEach(function(m){
|
|||||||
: '<div class="bloc vide" data-t="'+d.join(" ")+'">'+in_+'</div>';
|
: '<div class="bloc vide" data-t="'+d.join(" ")+'">'+in_+'</div>';
|
||||||
}).join("");
|
}).join("");
|
||||||
var s=document.createElement("section");
|
var s=document.createElement("section");
|
||||||
s.className="module";
|
s.className="partie";
|
||||||
s.innerHTML='<div class="module-tete"><span class="p">Module '+m.n+' · '+m.periode+'</span><h2>'+m.titre+'</h2>'
|
s.innerHTML='<div class="partie-tete"><span class="p">Module '+m.n+' · '+m.periode+'</span><h2>'+m.titre+'</h2>'
|
||||||
+'<span class="champ">'+m.champ+'</span></div><p class="module-note">'+m.note+'</p>'
|
+'<span class="champ">'+m.champ+'</span></div><p class="partie-note">'+m.note+'</p>'
|
||||||
+'<div class="blocs">'+cartes+'</div>';
|
+'<div class="blocs">'+cartes+'</div>';
|
||||||
corps.appendChild(s);
|
corps.appendChild(s);
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -7,8 +7,9 @@
|
|||||||
> le site ou son unité visuelle.
|
> le site ou son unité visuelle.
|
||||||
>
|
>
|
||||||
> **Conseil à l'enseignant :** joins à la conversation `assets/theme.css`, ainsi
|
> **Conseil à l'enseignant :** joins à la conversation `assets/theme.css`, ainsi
|
||||||
> que la feuille du gabarit choisi (`assets/exercices-commune.css` ou
|
> que la feuille du gabarit choisi (`assets/exercices-commune.css`,
|
||||||
> `assets/atelier-texte.css`). Claude connaîtra ainsi les classes réelles.
|
> `assets/atelier-texte.css` ou `assets/numerique-1re.css`). Claude connaîtra
|
||||||
|
> ainsi les classes réelles.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -95,11 +96,53 @@ assets/ ressources communes (ne pas toucher)
|
|||||||
|---|---|---|
|
|---|---|---|
|
||||||
| Théorie courte + série d'exercices corrigés automatiquement, avec compteur de score | **A — Exercices** | `2e-commune/module1/` |
|
| Théorie courte + série d'exercices corrigés automatiquement, avec compteur de score | **A — Exercices** | `2e-commune/module1/` |
|
||||||
| Cours à lire, long, avec démonstrations, quiz et exercices intégrés au texte | **B — Document long** | `3tq-technique-sociale/module1/` |
|
| Cours à lire, long, avec démonstrations, quiz et exercices intégrés au texte | **B — Document long** | `3tq-technique-sociale/module1/` |
|
||||||
|
| Séance projetée, minutée, avec un rail d'activités et une page de pilotage enseignant | **C — Séance projetée** | `1re-numerique/` |
|
||||||
|
|
||||||
Le gabarit **A** est à privilégier : ses exercices sont décrits en données, sans
|
Le gabarit **A** est à privilégier : ses exercices sont décrits en données, sans
|
||||||
code à écrire. Le gabarit **B** convient au traitement de texte et à tout
|
code à écrire. Le gabarit **B** convient au traitement de texte et à tout
|
||||||
contenu surtout textuel.
|
contenu surtout textuel.
|
||||||
|
|
||||||
|
### Gabarit C, la séance projetée (1re tronc commun)
|
||||||
|
|
||||||
|
Cette classe suit une organisation particulière, déjà en place : **pas de
|
||||||
|
sous-dossiers de module**, les pages vivent à plat dans `1re-numerique/`, et
|
||||||
|
chaque séance existe en deux versions.
|
||||||
|
|
||||||
|
| Fichier | Public |
|
||||||
|
|---|---|
|
||||||
|
| `index.html` | élèves — le menu de l'année, les 35 cours en six parties |
|
||||||
|
| `1TC-NUM_bloc-NN_<sujet>.html` | élèves — la séance, projetée au tableau |
|
||||||
|
| `pilotage.html` | enseignant — les 35 blocs avec attendus et évaluations |
|
||||||
|
| `1TC-NUM_bloc-NN_pilotage.html` | enseignant — la conduite de la séance |
|
||||||
|
|
||||||
|
Pour produire une nouvelle séance, **copier le squelette d'une séance
|
||||||
|
existante** (`1TC-NUM_bloc-01_ouvrir-le-cours.html`) : sa tête de page, son
|
||||||
|
en-tête, son rail d'activités et son pied sont déjà conformes. Les feuilles à
|
||||||
|
charger sont `../assets/theme.css` puis `../assets/numerique-1re.css` (un seul
|
||||||
|
niveau de `../`, les pages étant à plat).
|
||||||
|
|
||||||
|
Composants propres à ce gabarit, tous déjà stylés : `.dashboard`/`.stat`,
|
||||||
|
`.chrono`/`.pendule`/`.ecart`, `.navtabs`/`.tab`/`.panel`, `.card`,
|
||||||
|
`.carte-entete`, `.consigne`, `.info`, `.accordeon`/`.item`, `.qcard`,
|
||||||
|
`.steps`/`.step`, `.trace`, `.check`, `table.grille`, `.progres`/`.barre`,
|
||||||
|
`.q`, `.btn`, `.etiquettes`/`.etiquette`, `.apercu`, et, pour les pages de
|
||||||
|
pilotage, `.filtres`, `.partie`/`.partie-tete`/`.partie-note`, `.blocs`/`.bloc`.
|
||||||
|
|
||||||
|
Trois pièges propres à ce gabarit :
|
||||||
|
|
||||||
|
- **`.entete` appartient au thème** (l'en-tête de page). L'en-tête interne
|
||||||
|
d'une carte s'appelle `.carte-entete`.
|
||||||
|
- **`.module` appartient au thème** (carte de module). Une partie de l'année
|
||||||
|
s'appelle `.partie`.
|
||||||
|
- Dans les schémas SVG, les couleurs vives **encodent des catégories**
|
||||||
|
(entrée, sortie, les deux, matériel, logiciel). Les garder telles quelles ;
|
||||||
|
seuls les neutres passent aux jetons du thème (`var(--encre)`,
|
||||||
|
`var(--encre-douce)`, `var(--papier)`, `var(--trait-fort)`).
|
||||||
|
|
||||||
|
Après avoir ajouté une séance, inscrire son `href` dans le tableau `MODULES`
|
||||||
|
de `index.html` et dans celui de `pilotage.html` : la carte du bloc devient
|
||||||
|
alors un lien au lieu d'un cadre en pointillés.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 5. Jetons et composants disponibles (`assets/theme.css`)
|
## 5. Jetons et composants disponibles (`assets/theme.css`)
|
||||||
|
|||||||
@@ -21,6 +21,12 @@ assets/ ressources communes à toute la plateforme
|
|||||||
Classes en place : `1re-numerique`, `2e-differenciee`, `2e-commune`,
|
Classes en place : `1re-numerique`, `2e-differenciee`, `2e-commune`,
|
||||||
`3tq-technique-sociale`, `4tq-agent-education`.
|
`3tq-technique-sociale`, `4tq-agent-education`.
|
||||||
|
|
||||||
|
Exception assumée : **`1re-numerique` range ses pages à plat**, sans dossier de
|
||||||
|
module, parce que la séquence est annuelle (35 séances en six parties) et que
|
||||||
|
chaque séance existe en deux versions, élève et enseignant. Son `index.html`
|
||||||
|
est à la fois l'index de la classe et le menu de l'année. La version enseignant
|
||||||
|
part de `pilotage.html`, qui n'est volontairement liée depuis aucune page élève.
|
||||||
|
|
||||||
Tous les liens internes sont **relatifs**. Ne jamais écrire `/assets/theme.css`
|
Tous les liens internes sont **relatifs**. Ne jamais écrire `/assets/theme.css`
|
||||||
mais `../assets/theme.css` : un chemin absolu casserait le site dès qu'il n'est
|
mais `../assets/theme.css` : un chemin absolu casserait le site dès qu'il n'est
|
||||||
pas servi à la racine du domaine, et depuis une clé USB.
|
pas servi à la racine du domaine, et depuis une clé USB.
|
||||||
|
|||||||
@@ -0,0 +1,804 @@
|
|||||||
|
/* ==================================================================
|
||||||
|
Formation numérique — 1re tronc commun
|
||||||
|
Chargé après assets/theme.css, dont il reprend toutes les couleurs.
|
||||||
|
------------------------------------------------------------------
|
||||||
|
Deux familles de pages partagent cette feuille :
|
||||||
|
- les pages de cours, projetées et suivies par les élèves ;
|
||||||
|
- les pages de pilotage, réservées à l'enseignant.
|
||||||
|
Composants issus de la maquette d'origine, rebranchés sur les
|
||||||
|
jetons de la plateforme. Deux classes ont été renommées pour ne pas
|
||||||
|
entrer en conflit avec le thème : .entete est devenue .carte-entete,
|
||||||
|
et .module est devenue .partie.
|
||||||
|
================================================================== */
|
||||||
|
|
||||||
|
/* ------------------------------------------------------------------
|
||||||
|
Alias de compatibilité
|
||||||
|
La maquette d'origine nommait ses couleurs --ink, --line, --blue…
|
||||||
|
Les pages en gardent quelques-unes dans des styles en ligne et dans
|
||||||
|
les schémas. Ces alias les font retomber sur les jetons du thème,
|
||||||
|
sans avoir à réécrire chaque attribut.
|
||||||
|
À terme, écrire directement les jetons de la plateforme.
|
||||||
|
------------------------------------------------------------------ */
|
||||||
|
.classe-tc {
|
||||||
|
--ink: var(--encre);
|
||||||
|
--muted: var(--encre-douce);
|
||||||
|
--blue: var(--accent-encre);
|
||||||
|
--navy: var(--encre);
|
||||||
|
--green: var(--juste);
|
||||||
|
--red: var(--erreur);
|
||||||
|
--card: var(--blanc);
|
||||||
|
--line: var(--trait);
|
||||||
|
--shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ------------------------------------------------------------------
|
||||||
|
Colonne large : tableaux de bord, rail de six onglets, grilles de
|
||||||
|
cartes. Trop à l'étroit dans la colonne de lecture standard.
|
||||||
|
------------------------------------------------------------------ */
|
||||||
|
.contenu--large,
|
||||||
|
.entete__interieur--large {
|
||||||
|
max-width: calc(74rem + 2 * var(--gouttiere));
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ------------------------------------------------------------------
|
||||||
|
Titres : on reprend la chasse fixe de la plateforme, sans le filet
|
||||||
|
du thème qui n'a pas de sens à l'intérieur d'une carte.
|
||||||
|
------------------------------------------------------------------ */
|
||||||
|
.contenu h2,
|
||||||
|
.contenu h3 {
|
||||||
|
font-family: var(--police-titre);
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--encre); /* le thème colore h3 à l'accent : pas ici */
|
||||||
|
border: 0;
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Le thème borne les listes à la largeur de lecture : c'est ce qu'il
|
||||||
|
faut pour de la prose, pas pour une grille de cartes. */
|
||||||
|
.apercu, .etiquettes, .blocs, .answer-grid, .check, .steps, .accordeon { max-width: none; }
|
||||||
|
.card > h2:first-child,
|
||||||
|
.card > h3:first-child { margin-top: 0; }
|
||||||
|
.card h2 { font-size: 1.35rem; margin: 0 0 .2rem; letter-spacing: -.02em; }
|
||||||
|
.card h3 { font-size: 1.05rem; margin: 1.4rem 0 .5rem; color: var(--encre); }
|
||||||
|
|
||||||
|
/* ------------------------------------------------------------------
|
||||||
|
Chapeau, étiquettes et aperçu des activités
|
||||||
|
(ce que la maquette d'origine mettait dans sa bannière)
|
||||||
|
------------------------------------------------------------------ */
|
||||||
|
.etiquettes { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.4rem; padding: 0; list-style: none; }
|
||||||
|
.etiquette {
|
||||||
|
background: var(--accent-fond);
|
||||||
|
color: var(--accent-encre);
|
||||||
|
border: 1px solid var(--accent);
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: .2rem .7rem;
|
||||||
|
font-size: .8rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.etiquette--alerte { background: var(--erreur-fond); border-color: var(--erreur); color: var(--erreur); }
|
||||||
|
|
||||||
|
.apercu {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
|
||||||
|
gap: .6rem;
|
||||||
|
margin: 0 0 1.6rem;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
.apercu li {
|
||||||
|
background: var(--blanc);
|
||||||
|
border: 1px solid var(--trait);
|
||||||
|
border-top: .3rem solid var(--accent);
|
||||||
|
border-radius: .5rem;
|
||||||
|
padding: .9rem .7rem;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: .9rem;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.apercu svg {
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto .4rem;
|
||||||
|
width: 1.7rem;
|
||||||
|
height: 1.7rem;
|
||||||
|
fill: none;
|
||||||
|
stroke: var(--accent-encre);
|
||||||
|
stroke-width: 2;
|
||||||
|
stroke-linecap: round;
|
||||||
|
stroke-linejoin: round;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg.i {
|
||||||
|
width: 1em; height: 1em; vertical-align: -.14em;
|
||||||
|
fill: none; stroke: currentColor;
|
||||||
|
stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ------------------------------------------------------------------
|
||||||
|
Tableau de bord de la séance
|
||||||
|
------------------------------------------------------------------ */
|
||||||
|
.dashboard {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
gap: .7rem;
|
||||||
|
margin-bottom: 1.3rem;
|
||||||
|
}
|
||||||
|
.stat {
|
||||||
|
background: var(--blanc);
|
||||||
|
border: 1px solid var(--trait);
|
||||||
|
border-radius: .5rem;
|
||||||
|
padding: .8rem .9rem;
|
||||||
|
}
|
||||||
|
.stat small { color: var(--encre-douce); font-weight: 600; font-size: .78rem; }
|
||||||
|
.stat strong {
|
||||||
|
display: block;
|
||||||
|
font-family: var(--police-titre);
|
||||||
|
font-size: 1.3rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-top: .2rem;
|
||||||
|
}
|
||||||
|
.stat.ok strong { color: var(--juste); }
|
||||||
|
|
||||||
|
/* ------------------------------------------------------------------
|
||||||
|
Chronomètre de pilotage
|
||||||
|
------------------------------------------------------------------ */
|
||||||
|
.chrono {
|
||||||
|
background: var(--encre);
|
||||||
|
color: var(--papier);
|
||||||
|
border-radius: .5rem;
|
||||||
|
padding: 1rem 1.1rem;
|
||||||
|
margin-bottom: 1.2rem;
|
||||||
|
display: grid;
|
||||||
|
gap: .8rem;
|
||||||
|
}
|
||||||
|
.chrono-haut { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; justify-content: space-between; }
|
||||||
|
.pendule {
|
||||||
|
font-family: var(--police-titre);
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 700;
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
.pendule small {
|
||||||
|
display: block;
|
||||||
|
font-family: var(--police-texte);
|
||||||
|
font-size: .7rem;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: .1em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
opacity: .75;
|
||||||
|
margin-top: .35rem;
|
||||||
|
}
|
||||||
|
.ecart {
|
||||||
|
font-size: .88rem;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: .55rem .9rem;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: rgba(255, 255, 255, .12);
|
||||||
|
border: 1px solid rgba(255, 255, 255, .28);
|
||||||
|
min-width: 15rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.ecart.avance { background: var(--juste); border-color: var(--juste); color: #fff; }
|
||||||
|
.ecart.retard { background: var(--erreur); border-color: var(--erreur); color: #fff; }
|
||||||
|
.chrono .row button { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); color: var(--papier); }
|
||||||
|
.chrono .row button:hover { background: rgba(255, 255, 255, .24); }
|
||||||
|
.chrono .row button.go { background: var(--papier); border-color: var(--papier); color: var(--encre); }
|
||||||
|
|
||||||
|
/* ------------------------------------------------------------------
|
||||||
|
Rail d'activités
|
||||||
|
------------------------------------------------------------------ */
|
||||||
|
.navtabs {
|
||||||
|
display: grid;
|
||||||
|
gap: .5rem;
|
||||||
|
background: var(--blanc);
|
||||||
|
border: 1px solid var(--trait);
|
||||||
|
border-radius: .5rem;
|
||||||
|
padding: .7rem;
|
||||||
|
margin-bottom: 1.2rem;
|
||||||
|
}
|
||||||
|
.navtabs.n6 { grid-template-columns: repeat(6, 1fr); }
|
||||||
|
.tab {
|
||||||
|
font: inherit;
|
||||||
|
border: 2px solid var(--trait);
|
||||||
|
background: var(--blanc);
|
||||||
|
border-radius: .4rem;
|
||||||
|
padding: .7rem .6rem;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: .9rem;
|
||||||
|
cursor: pointer;
|
||||||
|
color: var(--encre);
|
||||||
|
text-align: left;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.tab span {
|
||||||
|
display: block;
|
||||||
|
font-size: .72rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--encre-douce);
|
||||||
|
margin-top: .2rem;
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
}
|
||||||
|
.tab:hover { border-color: var(--accent); }
|
||||||
|
.tab.active { background: var(--encre); color: var(--papier); border-color: var(--encre); }
|
||||||
|
.tab.active span { color: var(--papier); opacity: .75; }
|
||||||
|
/* Activité prévue au programme du jour */
|
||||||
|
.tab.prevue::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: .7rem; right: .7rem; bottom: -2px;
|
||||||
|
height: 4px;
|
||||||
|
border-radius: 99px;
|
||||||
|
background: var(--cible);
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel { display: none; }
|
||||||
|
.panel.active { display: block; }
|
||||||
|
|
||||||
|
/* ------------------------------------------------------------------
|
||||||
|
Cartes et blocs de texte
|
||||||
|
------------------------------------------------------------------ */
|
||||||
|
.card {
|
||||||
|
background: var(--blanc);
|
||||||
|
border: 1px solid var(--trait);
|
||||||
|
border-radius: .5rem;
|
||||||
|
padding: 1.3rem 1.4rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.muted { color: var(--encre-douce); line-height: 1.6; }
|
||||||
|
.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
|
||||||
|
|
||||||
|
/* En-tête interne d'une carte : titre à gauche, durée à droite.
|
||||||
|
(Renommée depuis .entete, qui appartient au thème.) */
|
||||||
|
.carte-entete {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: .9rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-bottom: .9rem;
|
||||||
|
}
|
||||||
|
.carte-entete p { margin: .2rem 0 0; max-width: none; }
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
font: inherit;
|
||||||
|
border: 1px solid var(--accent-encre);
|
||||||
|
border-radius: .4rem;
|
||||||
|
padding: .5rem .95rem;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: .92rem;
|
||||||
|
cursor: pointer;
|
||||||
|
background: var(--accent-fond);
|
||||||
|
color: var(--accent-encre);
|
||||||
|
}
|
||||||
|
.btn:hover { background: var(--blanc); }
|
||||||
|
.btn.primary { background: var(--accent-encre); border-color: var(--accent-encre); color: var(--papier); }
|
||||||
|
.btn.primary:hover { background: var(--encre); border-color: var(--encre); }
|
||||||
|
.btn.soft { background: var(--blanc); border-color: var(--trait-fort); color: var(--encre); }
|
||||||
|
.btn.soft:hover { border-color: var(--encre); }
|
||||||
|
.btn:disabled { opacity: .5; cursor: default; }
|
||||||
|
|
||||||
|
.score {
|
||||||
|
display: inline-block;
|
||||||
|
background: var(--accent-fond);
|
||||||
|
color: var(--accent-encre);
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: .3rem .75rem;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: .85rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.feedback { min-height: 1.9rem; margin-top: .8rem; font-weight: 600; }
|
||||||
|
|
||||||
|
/* Consigne projetée : c'est l'élément le plus lu de la page. */
|
||||||
|
.consigne {
|
||||||
|
background: var(--accent-fond);
|
||||||
|
border: 2px solid var(--accent);
|
||||||
|
border-radius: .5rem;
|
||||||
|
padding: 1.1rem 1.3rem;
|
||||||
|
font-size: 1.15rem;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1.45;
|
||||||
|
margin: 1rem 0;
|
||||||
|
max-width: none;
|
||||||
|
}
|
||||||
|
.consigne small {
|
||||||
|
display: block;
|
||||||
|
font-family: var(--police-titre);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: .1em;
|
||||||
|
font-size: .7rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--accent-encre);
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
border-left: .25rem solid var(--trait-fort);
|
||||||
|
background: var(--papier);
|
||||||
|
border-radius: 0 .4rem .4rem 0;
|
||||||
|
padding: .8rem 1rem;
|
||||||
|
color: var(--encre-douce);
|
||||||
|
font-size: .95rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
margin-top: 1rem;
|
||||||
|
max-width: none;
|
||||||
|
}
|
||||||
|
.info b { color: var(--encre); }
|
||||||
|
.info.alerte { border-color: var(--erreur); background: var(--erreur-fond); color: var(--erreur); }
|
||||||
|
.info.alerte b { color: var(--erreur); }
|
||||||
|
|
||||||
|
/* ------------------------------------------------------------------
|
||||||
|
Saisie collective et tri en colonnes
|
||||||
|
------------------------------------------------------------------ */
|
||||||
|
.saisie { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
|
||||||
|
.saisie input {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 13rem;
|
||||||
|
padding: .65rem .8rem;
|
||||||
|
border: 2px solid var(--trait-fort);
|
||||||
|
border-radius: .4rem;
|
||||||
|
}
|
||||||
|
.saisie input:focus { border-color: var(--accent); outline: none; }
|
||||||
|
.saisie select, .envoi select, .cases select {
|
||||||
|
font: inherit;
|
||||||
|
padding: .65rem .8rem;
|
||||||
|
border: 2px solid var(--trait-fort);
|
||||||
|
border-radius: .4rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .7rem; }
|
||||||
|
.colonne {
|
||||||
|
border: 1px solid var(--trait);
|
||||||
|
border-radius: .5rem;
|
||||||
|
background: var(--papier);
|
||||||
|
min-height: 9rem;
|
||||||
|
padding: .8rem;
|
||||||
|
}
|
||||||
|
.colonne h3 {
|
||||||
|
font-size: .85rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0 0 .6rem;
|
||||||
|
padding-bottom: .5rem;
|
||||||
|
border-bottom: 1px solid var(--trait);
|
||||||
|
color: var(--accent-encre);
|
||||||
|
}
|
||||||
|
.colonne h3 em { font-style: normal; color: var(--encre-douce); font-size: .78rem; }
|
||||||
|
.colonne ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; max-width: none; }
|
||||||
|
.colonne li {
|
||||||
|
background: var(--blanc);
|
||||||
|
border: 1px solid var(--trait);
|
||||||
|
border-radius: .35rem;
|
||||||
|
padding: .4rem .6rem;
|
||||||
|
font-size: .88rem;
|
||||||
|
font-weight: 500;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: .4rem;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.colonne li button { background: none; border: 0; color: var(--trait-fort); cursor: pointer; padding: 0 .2rem; font-weight: 700; }
|
||||||
|
.colonne li button:hover { color: var(--erreur); }
|
||||||
|
|
||||||
|
/* ------------------------------------------------------------------
|
||||||
|
Accordéon
|
||||||
|
------------------------------------------------------------------ */
|
||||||
|
.accordeon { display: grid; gap: .6rem; }
|
||||||
|
.item { border: 1px solid var(--trait); border-radius: .5rem; background: var(--blanc); overflow: hidden; }
|
||||||
|
.item > button {
|
||||||
|
font: inherit;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
gap: .8rem;
|
||||||
|
align-items: flex-start;
|
||||||
|
text-align: left;
|
||||||
|
background: none;
|
||||||
|
border: 0;
|
||||||
|
padding: .9rem 1.1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
color: var(--encre);
|
||||||
|
}
|
||||||
|
.item > button:hover { background: var(--accent-fond); }
|
||||||
|
.item .n {
|
||||||
|
width: 1.8rem; height: 1.8rem; flex: none;
|
||||||
|
border-radius: .35rem;
|
||||||
|
background: var(--accent-fond);
|
||||||
|
color: var(--accent-encre);
|
||||||
|
font-family: var(--police-titre);
|
||||||
|
font-weight: 700;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
font-size: .82rem;
|
||||||
|
}
|
||||||
|
.item .t { font-weight: 600; font-size: 1.02rem; flex: 1; }
|
||||||
|
.item .plus {
|
||||||
|
color: var(--encre-douce);
|
||||||
|
font-size: .72rem;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: .08em;
|
||||||
|
padding-top: .3rem;
|
||||||
|
}
|
||||||
|
.item .corps { display: none; padding: 0 1.1rem 1rem 3.7rem; color: var(--encre-douce); line-height: 1.6; }
|
||||||
|
.item.ouvert .corps { display: block; }
|
||||||
|
.item.ouvert { border-color: var(--accent); }
|
||||||
|
.item.ouvert .n { background: var(--accent-encre); color: var(--papier); }
|
||||||
|
|
||||||
|
/* ------------------------------------------------------------------
|
||||||
|
Question projetée, avec réponse à dévoiler
|
||||||
|
------------------------------------------------------------------ */
|
||||||
|
.qcard {
|
||||||
|
border: 2px solid var(--accent);
|
||||||
|
border-radius: .5rem;
|
||||||
|
background: var(--accent-fond);
|
||||||
|
padding: 1.4rem 1.5rem;
|
||||||
|
}
|
||||||
|
.qtag {
|
||||||
|
display: inline-block;
|
||||||
|
background: var(--blanc);
|
||||||
|
color: var(--accent-encre);
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: .25rem .7rem;
|
||||||
|
font-size: .75rem;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: .6rem;
|
||||||
|
}
|
||||||
|
.qtag.cle { background: var(--cible-fond); color: var(--encre); border: 1px solid var(--cible); }
|
||||||
|
.qtxt {
|
||||||
|
font-family: var(--police-titre);
|
||||||
|
font-size: 1.3rem;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1.3;
|
||||||
|
letter-spacing: -.02em;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.answer-grid { display: grid; gap: .5rem; }
|
||||||
|
.answer {
|
||||||
|
font: inherit;
|
||||||
|
border: 2px solid var(--trait-fort);
|
||||||
|
background: var(--blanc);
|
||||||
|
border-radius: .4rem;
|
||||||
|
padding: .6rem .85rem;
|
||||||
|
text-align: left;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.answer.ok { border-color: var(--juste); background: var(--juste-fond); }
|
||||||
|
.reveal { display: none; margin-top: 1rem; border-top: 2px dashed var(--accent); padding-top: .9rem; }
|
||||||
|
.reveal.on { display: block; }
|
||||||
|
.verdict { font-weight: 700; color: var(--juste); margin-bottom: .5rem; }
|
||||||
|
|
||||||
|
/* ------------------------------------------------------------------
|
||||||
|
Étapes guidées
|
||||||
|
------------------------------------------------------------------ */
|
||||||
|
.steps { display: grid; gap: .6rem; }
|
||||||
|
.step {
|
||||||
|
border: 1px solid var(--trait);
|
||||||
|
border-radius: .5rem;
|
||||||
|
background: var(--blanc);
|
||||||
|
padding: 1rem 1.2rem;
|
||||||
|
display: flex;
|
||||||
|
gap: .9rem;
|
||||||
|
align-items: flex-start;
|
||||||
|
opacity: .45;
|
||||||
|
}
|
||||||
|
.step.on { opacity: 1; border-color: var(--accent); }
|
||||||
|
.step.fait { opacity: 1; }
|
||||||
|
.step .n {
|
||||||
|
width: 2.1rem; height: 2.1rem; flex: none;
|
||||||
|
border-radius: .4rem;
|
||||||
|
background: var(--papier);
|
||||||
|
color: var(--encre-douce);
|
||||||
|
font-family: var(--police-titre);
|
||||||
|
font-weight: 700;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
}
|
||||||
|
.step.on .n { background: var(--accent-encre); color: var(--papier); }
|
||||||
|
.step.fait .n { background: var(--juste-fond); color: var(--juste); }
|
||||||
|
.step h3 { margin: 0 0 .2rem; font-size: 1.05rem; }
|
||||||
|
.step p { margin: 0; color: var(--encre-douce); font-size: .95rem; line-height: 1.55; max-width: none; }
|
||||||
|
|
||||||
|
/* ------------------------------------------------------------------
|
||||||
|
Figures et schémas
|
||||||
|
------------------------------------------------------------------ */
|
||||||
|
figure { margin: 0 0 1.1rem; max-width: none; }
|
||||||
|
figure svg {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
display: block;
|
||||||
|
background: var(--blanc);
|
||||||
|
border: 1px solid var(--trait);
|
||||||
|
border-radius: .5rem;
|
||||||
|
}
|
||||||
|
figcaption { font-size: .88rem; color: var(--encre-douce); margin-top: .6rem; line-height: 1.55; }
|
||||||
|
.figpetit { max-width: 35rem; margin: 0 auto .9rem; }
|
||||||
|
|
||||||
|
/* ------------------------------------------------------------------
|
||||||
|
Trace écrite à recopier
|
||||||
|
------------------------------------------------------------------ */
|
||||||
|
.trace {
|
||||||
|
border: 2px solid var(--accent);
|
||||||
|
background: var(--accent-fond);
|
||||||
|
border-radius: .5rem;
|
||||||
|
padding: 1.5rem 1.7rem;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
line-height: 1.85;
|
||||||
|
}
|
||||||
|
.trace h3 { margin: 0 0 .7rem; font-size: 1.25rem; }
|
||||||
|
.trace p { margin: 0 0 .5em; max-width: none; }
|
||||||
|
.trace code { background: var(--blanc); border: 1px solid var(--accent); border-radius: .25rem; padding: .05rem .4rem; font-size: .92em; }
|
||||||
|
|
||||||
|
/* ------------------------------------------------------------------
|
||||||
|
Liste à cocher
|
||||||
|
------------------------------------------------------------------ */
|
||||||
|
.check { display: grid; gap: .5rem; }
|
||||||
|
.check label {
|
||||||
|
display: flex;
|
||||||
|
gap: .8rem;
|
||||||
|
align-items: flex-start;
|
||||||
|
border: 1px solid var(--trait);
|
||||||
|
border-radius: .45rem;
|
||||||
|
background: var(--blanc);
|
||||||
|
padding: .8rem 1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.check label:hover { border-color: var(--accent); }
|
||||||
|
.check input { width: 1.2rem; height: 1.2rem; margin-top: .15rem; accent-color: var(--juste); flex: none; }
|
||||||
|
.check input:checked + span { color: var(--juste); font-weight: 600; }
|
||||||
|
|
||||||
|
/* ------------------------------------------------------------------
|
||||||
|
Grille de correction
|
||||||
|
------------------------------------------------------------------ */
|
||||||
|
table.grille { width: 100%; border-collapse: collapse; font-size: .92rem; max-width: none; }
|
||||||
|
table.grille th, table.grille td { border: 1px solid var(--trait); padding: .6rem .8rem; text-align: left; }
|
||||||
|
table.grille th {
|
||||||
|
background: var(--papier);
|
||||||
|
font-family: var(--police-titre);
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: .75rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: .06em;
|
||||||
|
color: var(--encre-douce);
|
||||||
|
border-bottom: 1px solid var(--trait);
|
||||||
|
}
|
||||||
|
table.grille td.masque { color: transparent; background: var(--papier); }
|
||||||
|
table.grille tr.on td { background: var(--juste-fond); }
|
||||||
|
table.grille td b { color: var(--juste); }
|
||||||
|
|
||||||
|
/* ------------------------------------------------------------------
|
||||||
|
Progression et questions rapides
|
||||||
|
------------------------------------------------------------------ */
|
||||||
|
.progres {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 40;
|
||||||
|
background: var(--blanc);
|
||||||
|
border: 1px solid var(--trait);
|
||||||
|
border-radius: 0 0 .5rem .5rem;
|
||||||
|
padding: .7rem 1.1rem;
|
||||||
|
margin-bottom: 1.2rem;
|
||||||
|
display: flex;
|
||||||
|
gap: .9rem;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.barre { flex: 1; min-width: 11rem; height: .6rem; background: var(--accent-fond); border-radius: 99px; overflow: hidden; }
|
||||||
|
.barre i { display: block; height: 100%; width: 0; background: var(--juste); border-radius: 99px; transition: width .25s; }
|
||||||
|
|
||||||
|
.q { border: 1px solid var(--trait); border-radius: .5rem; background: var(--blanc); padding: .9rem 1rem; margin-bottom: .6rem; }
|
||||||
|
.q.bon { border-color: var(--juste); background: var(--juste-fond); }
|
||||||
|
.q.faux { border-color: var(--cible); background: var(--cible-fond); }
|
||||||
|
.q .txt { font-weight: 600; margin-bottom: .6rem; font-size: 1.02rem; }
|
||||||
|
.q .opts { display: flex; gap: .5rem; flex-wrap: wrap; }
|
||||||
|
.q .opts button {
|
||||||
|
font: inherit;
|
||||||
|
border: 2px solid var(--trait-fort);
|
||||||
|
background: var(--blanc);
|
||||||
|
border-radius: .4rem;
|
||||||
|
padding: .5rem .85rem;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
color: var(--encre);
|
||||||
|
}
|
||||||
|
.q .opts button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-encre); }
|
||||||
|
.q .opts button:disabled { cursor: default; opacity: .55; }
|
||||||
|
.q .opts button.pick { border-color: var(--juste); background: var(--juste-fond); color: var(--juste); opacity: 1; }
|
||||||
|
.q .opts button.rate { border-color: var(--cible); background: var(--cible-fond); color: var(--encre); opacity: 1; }
|
||||||
|
.q .expl {
|
||||||
|
display: none;
|
||||||
|
margin-top: .6rem;
|
||||||
|
font-size: .93rem;
|
||||||
|
color: var(--encre-douce);
|
||||||
|
line-height: 1.55;
|
||||||
|
border-left: 3px solid var(--trait-fort);
|
||||||
|
padding-left: .8rem;
|
||||||
|
}
|
||||||
|
.q.done .expl { display: block; }
|
||||||
|
|
||||||
|
#bilan { display: none; }
|
||||||
|
#bilan.on { display: block; }
|
||||||
|
.gros { font-family: var(--police-titre); font-size: 2.6rem; font-weight: 700; line-height: 1; color: var(--accent-encre); }
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 7rem;
|
||||||
|
border: 2px solid var(--trait-fort);
|
||||||
|
border-radius: .4rem;
|
||||||
|
padding: .7rem;
|
||||||
|
font: inherit;
|
||||||
|
font-size: .9rem;
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ------------------------------------------------------------------
|
||||||
|
Tri de fichiers (cours 3)
|
||||||
|
------------------------------------------------------------------ */
|
||||||
|
.fichiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .6rem; margin: .9rem 0; }
|
||||||
|
.fic {
|
||||||
|
font: inherit;
|
||||||
|
border: 2px solid var(--trait-fort);
|
||||||
|
background: var(--blanc);
|
||||||
|
border-radius: .45rem;
|
||||||
|
padding: .7rem .85rem;
|
||||||
|
text-align: left;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: .9rem;
|
||||||
|
overflow-wrap: anywhere;
|
||||||
|
min-width: 0;
|
||||||
|
color: var(--encre);
|
||||||
|
}
|
||||||
|
.fic small { display: block; font-weight: 500; color: var(--encre-douce); margin-top: .2rem; font-size: .82rem; }
|
||||||
|
.fic b { display: block; font-family: var(--police-titre); font-size: 1.15rem; color: var(--accent-encre); margin-bottom: .15rem; }
|
||||||
|
.fic:hover { border-color: var(--accent); }
|
||||||
|
.fic.pris { opacity: .25; cursor: default; }
|
||||||
|
.fic.rate { border-color: var(--cible); background: var(--cible-fond); }
|
||||||
|
|
||||||
|
.rangee {
|
||||||
|
display: flex; gap: .4rem; flex-wrap: wrap;
|
||||||
|
min-height: 3.4rem;
|
||||||
|
border: 2px dashed var(--trait-fort);
|
||||||
|
border-radius: .45rem;
|
||||||
|
padding: .5rem;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.rangee .pas { background: var(--juste-fond); color: var(--juste); border-radius: .35rem; padding: .45rem .6rem; font-weight: 600; font-size: .88rem; }
|
||||||
|
.etape3 { display: none; }
|
||||||
|
.etape3.on { display: block; }
|
||||||
|
|
||||||
|
/* ------------------------------------------------------------------
|
||||||
|
Plan du réseau (cours 4)
|
||||||
|
------------------------------------------------------------------ */
|
||||||
|
#plan svg { width: 100%; height: auto; display: block; background: var(--blanc); border: 1px solid var(--trait); border-radius: .5rem; }
|
||||||
|
#plan .allume rect, #plan rect.allume { stroke: var(--erreur) !important; stroke-width: 5 !important; }
|
||||||
|
#plan line.allume { stroke: var(--erreur) !important; stroke-width: 7 !important; }
|
||||||
|
#plan .panne rect { fill: var(--erreur-fond) !important; stroke: var(--erreur) !important; stroke-dasharray: 6 4; }
|
||||||
|
|
||||||
|
.envoi { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin: .9rem 0; }
|
||||||
|
.journal { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .35rem; max-width: none; }
|
||||||
|
.journal li {
|
||||||
|
background: var(--papier);
|
||||||
|
border: 1px solid var(--trait);
|
||||||
|
border-radius: .4rem;
|
||||||
|
padding: .55rem .8rem;
|
||||||
|
font-weight: 500;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.journal li.stop { background: var(--erreur-fond); border-color: var(--erreur); color: var(--erreur); }
|
||||||
|
.journal li b { color: var(--accent-encre); }
|
||||||
|
|
||||||
|
.cases { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; margin-top: .8rem; }
|
||||||
|
.cases label { font-weight: 600; font-size: .8rem; color: var(--encre-douce); display: grid; gap: .3rem; }
|
||||||
|
.cases select.ok { border-color: var(--juste); background: var(--juste-fond); }
|
||||||
|
.cases select.ko { border-color: var(--cible); background: var(--cible-fond); }
|
||||||
|
.cache { display: none; }
|
||||||
|
.cache.on { display: block; }
|
||||||
|
|
||||||
|
/* ------------------------------------------------------------------
|
||||||
|
Pages de pilotage : filtres et parties de l'année
|
||||||
|
(.partie remplace .module, qui appartient au thème)
|
||||||
|
------------------------------------------------------------------ */
|
||||||
|
.filtres {
|
||||||
|
display: flex;
|
||||||
|
gap: .5rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
background: var(--blanc);
|
||||||
|
border: 1px solid var(--trait);
|
||||||
|
border-radius: .5rem;
|
||||||
|
padding: .7rem;
|
||||||
|
margin-bottom: 1.2rem;
|
||||||
|
}
|
||||||
|
.filtres .compte { margin-left: auto; font-weight: 600; color: var(--encre-douce); font-size: .88rem; }
|
||||||
|
|
||||||
|
.partie { margin-bottom: 2rem; }
|
||||||
|
.partie-tete { display: flex; gap: .8rem; align-items: baseline; flex-wrap: wrap; margin-bottom: .4rem; }
|
||||||
|
.partie-tete h2 { margin: 0; font-size: 1.35rem; letter-spacing: -.02em; }
|
||||||
|
.partie-tete .p {
|
||||||
|
background: var(--encre);
|
||||||
|
color: var(--papier);
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: .25rem .75rem;
|
||||||
|
font-family: var(--police-titre);
|
||||||
|
font-size: .72rem;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.partie-tete .champ { color: var(--encre-douce); font-size: .88rem; margin-left: auto; }
|
||||||
|
.partie-note { color: var(--encre-douce); line-height: 1.6; margin: 0 0 1rem; max-width: 76ch; }
|
||||||
|
|
||||||
|
.blocs { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: .7rem; }
|
||||||
|
.bloc {
|
||||||
|
border: 1px solid var(--trait);
|
||||||
|
border-radius: .5rem;
|
||||||
|
background: var(--blanc);
|
||||||
|
padding: 1rem 1.15rem;
|
||||||
|
display: flex;
|
||||||
|
gap: .9rem;
|
||||||
|
align-items: flex-start;
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
.bloc .n {
|
||||||
|
width: 2.4rem; height: 2.4rem; flex: none;
|
||||||
|
border-radius: .45rem;
|
||||||
|
background: var(--papier);
|
||||||
|
color: var(--encre-douce);
|
||||||
|
font-family: var(--police-titre);
|
||||||
|
font-weight: 700;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
/* Le bloc de texte occupe toute la place restante à droite du numéro,
|
||||||
|
sinon il se recentre quand le titre passe sur deux lignes. */
|
||||||
|
.bloc > div { flex: 1; min-width: 0; text-align: left; }
|
||||||
|
.bloc h3 { margin: 0 0 .25rem; font-size: 1.02rem; line-height: 1.3; }
|
||||||
|
.bloc .att { font-size: .82rem; color: var(--encre-douce); font-weight: 500; }
|
||||||
|
.ets { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .6rem; }
|
||||||
|
.et {
|
||||||
|
font-size: .7rem;
|
||||||
|
font-weight: 600;
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: .2rem .55rem;
|
||||||
|
background: var(--papier);
|
||||||
|
border: 1px solid var(--trait);
|
||||||
|
color: var(--encre-douce);
|
||||||
|
}
|
||||||
|
.et.eval { background: var(--erreur-fond); border-color: var(--erreur); color: var(--erreur); }
|
||||||
|
.et.fac { background: var(--cible-fond); border-color: var(--cible); color: var(--encre); }
|
||||||
|
.et.pret { background: var(--juste-fond); border-color: var(--juste); color: var(--juste); }
|
||||||
|
|
||||||
|
/* Une carte de bloc qui mène quelque part se distingue nettement
|
||||||
|
d'un bloc encore à écrire. */
|
||||||
|
a.bloc { border-top: .3rem solid var(--accent); }
|
||||||
|
a.bloc:hover { border-color: var(--accent); }
|
||||||
|
a.bloc .n { background: var(--accent-encre); color: var(--papier); }
|
||||||
|
.bloc.vide { border-style: dashed; opacity: .7; }
|
||||||
|
.bloc.vide h3 { font-weight: 600; }
|
||||||
|
|
||||||
|
.masque { display: none !important; }
|
||||||
|
|
||||||
|
/* ------------------------------------------------------------------
|
||||||
|
Petits écrans
|
||||||
|
------------------------------------------------------------------ */
|
||||||
|
@media (max-width: 62rem) {
|
||||||
|
.dashboard { grid-template-columns: repeat(2, 1fr); }
|
||||||
|
.navtabs.n6 { grid-template-columns: repeat(3, 1fr); }
|
||||||
|
}
|
||||||
|
@media (max-width: 40rem) {
|
||||||
|
.dashboard { grid-template-columns: 1fr; }
|
||||||
|
.navtabs.n6 { grid-template-columns: repeat(2, 1fr); }
|
||||||
|
.blocs { grid-template-columns: 1fr; }
|
||||||
|
.ecart { min-width: 0; flex: 1; }
|
||||||
|
.filtres .compte { margin-left: 0; width: 100%; }
|
||||||
|
.cases { grid-template-columns: 1fr 1fr; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media print {
|
||||||
|
.chrono, .navtabs, .filtres, .saisie, .progres { display: none; }
|
||||||
|
.panel { display: block !important; }
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user