Paillasse/design/apercu-suivi.html
2026-10-06 23:28:18 +02:00

221 lines
49 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Suivi de classe · Syllabus</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800;900&family=IBM+Plex+Mono:wght@400;600&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>tailwind.config={theme:{extend:{fontFamily:{display:['Archivo','system-ui','sans-serif'],mono:['"IBM Plex Mono"','monospace']}}}}</script>
<style>
.etoile { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.zigzag { background: linear-gradient(135deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px, linear-gradient(45deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px; }
@keyframes flotte { 0%,100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--r, 0deg)); } }
.flotte { animation: flotte 6s ease-in-out infinite; }
@keyframes clignote { 50% { opacity: 0; } }
.curseur { animation: clignote 1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .flotte, .curseur { animation: none; } }
</style>
<link rel="stylesheet" href="css/syllabus-theme.css">
</head>
<body class="bg-white font-display text-black antialiased">
<header style="position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid #e3e5e8">
<nav aria-label="Navigation principale" style="position:relative;max-width:1200px;margin:0 auto;padding:0 20px;min-height:64px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 40px">
<a href="Apercu%20accueil%20Blade.html" aria-label="Syllabus, accueil" style="display:flex;align-items:center;gap:0;text-decoration:none"><img src="images/logo-syllabus-icone.png" alt="" style="height:32px;width:auto;display:block"><span style="font-family:Mulish,system-ui,sans-serif;font-weight:800;font-size:19px;color:#111827;letter-spacing:-0.01em;margin-left:-14px;position:relative">Syllabus</span></a>
<ul style="margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;flex:1;line-height:1.5"><li><details class="group"><summary style="cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;height:36px;margin:-6px -12px;padding:0 12px;border-radius:999px;line-height:1.5;font-size:15px;font-weight:600;color:#0b1220" class="hover:bg-[#f1f3f4] group-open:bg-[#e8f0fe] group-open:text-[#0b57d0] [&::-webkit-details-marker]:hidden">Fonctionnalités<svg aria-hidden="true" viewBox="0 0 16 16" width="16" height="16" class="transition-transform duration-200 group-open:rotate-180" style="flex:none;opacity:.7"><path d="M4 6l4 4 4-4" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></summary>
<div style="position:absolute;left:20px;right:20px;top:100%;margin-top:4px;z-index:50;max-width:1160px;margin-left:auto;margin-right:auto;box-sizing:border-box;max-height:calc(100vh - 90px);overflow:auto;border-radius:20px;background:#fff;border:1px solid #e3e5e8;box-shadow:0 24px 48px -16px rgba(15,23,42,.22)">
<div class="grid grid-cols-2 sm:grid-cols-3 min-[1100px]:grid-cols-5 [&>div:last-child]:col-span-2 min-[1100px]:[&>div:last-child]:col-span-1" style="gap:1px;background:#e3e5e8"><div style="padding:22px 20px 20px;min-width:0;background:#fff"><p style="margin:0;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:800;color:#0b1220"><span aria-hidden="true" style="flex:none;width:10px;height:10px;border-radius:3px;background:#0b57d0"></span>Piloter la classe</p><p style="margin:4px 0 0 20px;min-height:32px;font-size:12px;line-height:16px;font-weight:500;color:#5f6368">En direct et au quotidien</p><ul style="margin:10px 0 0 20px;padding:12px 0 0;border-top:1px solid #f1f3f4;list-style:none;display:grid;gap:2px"><li><a href="apercu-ressource.html?outil=cockpit" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Tableau de bord prof</a></li><li><a href="apercu-ressource.html?outil=visio" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Visio de classe</a></li><li><a href="apercu-ressource.html?outil=espace-eleve" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Espace élève</a></li><li><a href="apercu-ressource.html?outil=fiche-eleve" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Fiche élève</a></li><li><a href="apercu-ressource.html?outil=messagerie" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Messagerie</a></li></ul></div><div style="padding:22px 20px 20px;min-width:0;background:#fff"><p style="margin:0;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:800;color:#0b1220"><span aria-hidden="true" style="flex:none;width:10px;height:10px;border-radius:3px;background:#137333"></span>Apprendre</p><p style="margin:4px 0 0 20px;min-height:32px;font-size:12px;line-height:16px;font-weight:500;color:#5f6368">Cours, TP et code</p><ul style="margin:10px 0 0 20px;padding:12px 0 0;border-top:1px solid #f1f3f4;list-style:none;display:grid;gap:2px"><li><a href="apercu-ressource.html?outil=cours" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Cours gratuits</a></li><li><a href="apercu-ressource.html?outil=labs" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">TP sur machine Linux</a></li><li><a href="apercu-ressource.html?outil=lab-web" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Lab web</a></li><li><a href="apercu-ressource.html?outil=ide" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Éditeur de code en ligne</a></li><li><a href="apercu-ressource.html?outil=maison" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Ressources à la maison</a></li></ul></div><div style="padding:22px 20px 20px;min-width:0;background:#fff"><p style="margin:0;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:800;color:#0b1220"><span aria-hidden="true" style="flex:none;width:10px;height:10px;border-radius:3px;background:#b06000"></span>Préparer</p><p style="margin:4px 0 0 20px;min-height:32px;font-size:12px;line-height:16px;font-weight:500;color:#5f6368">Prêt à projeter ou imprimer</p><ul style="margin:10px 0 0 20px;padding:12px 0 0;border-top:1px solid #f1f3f4;list-style:none;display:grid;gap:2px"><li><a href="apercu-ressource.html?outil=bibliotheque" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Bibliothèque du prof</a></li><li><a href="apercu-ressource.html?outil=banque" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Banque de sujets</a></li><li><a href="apercu-ressource.html?outil=generateur" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Générateur de TD</a></li><li><a href="apercu-ressource.html?outil=td-imprimable" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">TD à imprimer</a></li></ul></div><div style="padding:22px 20px 20px;min-width:0;background:#fff"><p style="margin:0;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:800;color:#0b1220"><span aria-hidden="true" style="flex:none;width:10px;height:10px;border-radius:3px;background:#c5221f"></span>Évaluer</p><p style="margin:4px 0 0 20px;min-height:32px;font-size:12px;line-height:16px;font-weight:500;color:#5f6368">Quiz, examens, devoirs</p><ul style="margin:10px 0 0 20px;padding:12px 0 0;border-top:1px solid #f1f3f4;list-style:none;display:grid;gap:2px"><li><a href="apercu-ressource.html?outil=quiz" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Quiz flash</a></li><li><a href="apercu-ressource.html?outil=sujet" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Créer un sujet</a></li><li><a href="apercu-ressource.html?outil=devoirs" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Devoirs maison</a></li><li><a href="apercu-ressource.html?outil=correction" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Corriger les copies</a></li><li><a href="apercu-ressource.html?outil=export" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Export Pronote / ENT</a></li></ul></div><div style="padding:22px 20px 20px;min-width:0;background:#fff"><p style="margin:0;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:800;color:#0b1220"><span aria-hidden="true" style="flex:none;width:10px;height:10px;border-radius:3px;background:#8430ce"></span>Établissement</p><p style="margin:4px 0 0 20px;min-height:32px;font-size:12px;line-height:16px;font-weight:500;color:#5f6368">Vie scolaire, direction, DSI</p><ul style="margin:10px 0 0 20px;padding:12px 0 0;border-top:1px solid #f1f3f4;list-style:none;display:grid;gap:2px"><li><a href="apercu-ressource.html?outil=vie-scolaire" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Vie scolaire</a></li><li><a href="apercu-ressource.html?outil=cohortes" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Suivi des cohortes</a></li><li><a href="apercu-ressource.html?outil=espace-etablissement" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Espace établissement</a></li><li><a href="apercu-ressource.html?outil=academie" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Académie</a></li><li><a href="apercu-ressource.html?outil=integration" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Intégration et sécurité</a></li></ul></div></div>
<div style="position:sticky;bottom:0;padding:14px 24px;border-top:1px solid #e3e5e8;background:#f8f9fa;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px"><span style="font-size:14px;font-weight:500;color:#5f6368">24 outils, chacun avec sa présentation et sa démo</span><a href="apercu-fonctionnalites.html" style="font-size:15px;font-weight:700;color:#0b57d0;text-decoration:none">Voir toutes les fonctionnalités →</a></div>
</div></details></li><li><a href="apercu-cours.html" style="display:inline-flex;align-items:center;height:24px;line-height:1.5;font-size:15px;font-weight:600;color:#0b1220;text-decoration:none" class="hover:text-[#0b57d0] aria-[current=page]:text-[#0b57d0]">Cours</a></li><li><a href="apercu-tarifs.html" style="display:inline-flex;align-items:center;height:24px;line-height:1.5;font-size:15px;font-weight:600;color:#0b1220;text-decoration:none" class="hover:text-[#0b57d0] aria-[current=page]:text-[#0b57d0]">Tarifs</a></li></ul>
<div style="display:flex;align-items:center;gap:20px">
<a href="apercu-connexion.html" style="font-size:15px;font-weight:600;color:#0b1220;text-decoration:none" class="hover:text-[#0b57d0]">Se connecter</a>
<a href="apercu-inscription.html" style="display:inline-flex;align-items:center;height:40px;padding:0 20px;border-radius:999px;background:#0b57d0;color:#fff;font-size:15px;font-weight:700;text-decoration:none">Créer une classe</a>
</div>
</nav>
</header>
<main>
<section class="border-b border-[#e3e5e8] bg-white">
<div class="mx-auto flex max-w-7xl flex-wrap items-end gap-6 px-5 pb-10 pt-10 lg:px-10">
<div class="flex-1">
<p class="font-mono text-sm font-semibold">Espace enseignant · Suivi</p>
<div class="min-w-0 flex-1"><p data-public="P" class="mb-2 inline-flex items-center gap-2 rounded-full border border-[#b8c1cf] bg-white px-3 py-1 text-sm font-bold text-[#1d3fa8]">Pour les profs</p>
<h1 class="mt-2 text-5xl font-extrabold leading-[0.95] tracking-tight sm:text-6xl">BTS SIO 1 · Groupe A</h1></div>
<p class="mt-3 text-lg font-semibold">Bloc 2 · Administration des systèmes et des réseaux · 24 élèves</p>
</div>
<div class="flex flex-wrap gap-3">
<a href="apercu-banque.html#flash" class="inline-flex items-center gap-3 border border-[#e3e5e8] rounded-2xl bg-[#fef7e0] px-5 py-3 font-extrabold">Quiz flash de début d’heure</a>
<a href="apercu-devoirs.html" class="inline-flex items-center gap-3 border border-[#e3e5e8] rounded-2xl bg-white px-5 py-3 font-extrabold hover:bg-[#fef7e0]">Devoirs maison</a>
<a href="apercu-cours-ipv4.html" class="inline-flex items-center gap-3 border border-[#e3e5e8] rounded-2xl bg-white px-5 py-3 font-extrabold transition-transform hover:bg-[#fef7e0] active:shadow-none">Voir la séquence</a>
<button type="button" class="inline-flex items-center gap-3 border border-[#e3e5e8] rounded-2xl bg-white px-5 py-3 font-extrabold transition-transform hover:bg-[#fef7e0] active:shadow-none">Exporter les notes (CSV</button>
</div>
</div>
</section>
<div class="mx-auto max-w-7xl px-5 py-10 lg:px-10">
<dl class="grid grid-cols-2 gap-5 lg:grid-cols-4">
<div class="border border-[#e3e5e8] rounded-2xl bg-[#fef7e0] p-5"><dt class="font-semibold">Progression moyenne</dt><dd class="mt-1 font-mono text-4xl font-semibold">52 %</dd></div>
<div class="border border-[#e3e5e8] rounded-2xl bg-[#eef0fd] p-5"><dt class="font-semibold">Moyenne aux QCM</dt><dd class="mt-1 font-mono text-4xl font-semibold">13,4</dd></div>
<div class="border border-[#e3e5e8] rounded-2xl bg-[#e6f4ea] p-5"><dt class="font-semibold">Actifs cette semaine</dt><dd class="mt-1 font-mono text-4xl font-semibold">21 / 24</dd></div>
<div class="border border-[#e3e5e8] rounded-2xl bg-[#ec3013] p-5 text-white"><dt class="font-semibold">À aider maintenant</dt><dd class="mt-1 font-mono text-4xl font-semibold">2</dd></div>
</dl>
<div class="mt-14 grid gap-10 lg:grid-cols-12">
<section class="lg:col-span-8" aria-labelledby="t-tab">
<h2 id="t-tab" class="text-3xl font-extrabold">Élèves</h2>
<div class="mt-5 overflow-x-auto border border-[#e3e5e8] rounded-2xl bg-white">
<table class="w-full min-w-[760px] text-left">
<thead class="bg-[#0b57d0] text-white"><tr><th class="px-4 py-3">Élève</th><th class="px-3 py-3 font-mono text-xs font-semibold">Adressage IPv4</th><th class="px-3 py-3 font-mono text-xs font-semibold">VLAN</th><th class="px-3 py-3 font-mono text-xs font-semibold">Inter-VLAN</th><th class="px-3 py-3 font-mono text-xs font-semibold">DHCP</th><th class="px-3 py-3 font-mono text-xs font-semibold">DNS BIND</th><th class="px-3 py-3">QCM</th><th class="px-3 py-3">Temps VM</th></tr></thead>
<tbody class="divide-y divide-[#e3e5e8]">
<tr class="">
<td class="px-4 py-3"><span class="flex items-center gap-3"><span class="grid h-8 w-8 place-items-center border border-[#dadce0] rounded-lg bg-[#e6f4ea] font-extrabold">L</span><span><span class="block font-extrabold">Léa M.</span><span class="block font-mono text-xs font-semibold">Terminé</span></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="3 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="0 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span></span></td>
<td class="px-3 py-3 font-mono font-semibold">18/20</td>
<td class="px-3 py-3 font-mono text-sm">12 h 40</td>
</tr>
<tr class="">
<td class="px-4 py-3"><span class="flex items-center gap-3"><span class="grid h-8 w-8 place-items-center border border-[#dadce0] rounded-lg bg-white font-extrabold">Y</span><span><span class="block font-extrabold">Yanis B.</span></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="3 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="1 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="0 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span></span></td>
<td class="px-3 py-3 font-mono font-semibold">14/20</td>
<td class="px-3 py-3 font-mono text-sm">9 h 10</td>
</tr>
<tr class="bg-[#FFD9E8]">
<td class="px-4 py-3"><span class="flex items-center gap-3"><span class="grid h-8 w-8 place-items-center border border-[#dadce0] rounded-lg bg-[#fce8e6] font-extrabold">N</span><span><span class="block font-extrabold">Nora Kaci</span><span class="block font-mono text-xs font-semibold">Main levée</span></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="2 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="0 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="0 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span></span></td>
<td class="px-3 py-3 font-mono font-semibold">11/20</td>
<td class="px-3 py-3 font-mono text-sm">8 h 05</td>
</tr>
<tr class="">
<td class="px-4 py-3"><span class="flex items-center gap-3"><span class="grid h-8 w-8 place-items-center border border-[#dadce0] rounded-lg bg-white font-extrabold">T</span><span><span class="block font-extrabold">Tom R.</span></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="2 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="0 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span></span></td>
<td class="px-3 py-3 font-mono font-semibold">16/20</td>
<td class="px-3 py-3 font-mono text-sm">10 h 30</td>
</tr>
<tr class="">
<td class="px-4 py-3"><span class="flex items-center gap-3"><span class="grid h-8 w-8 place-items-center border border-[#dadce0] rounded-lg bg-white font-extrabold">I</span><span><span class="block font-extrabold">Inès D.</span></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="2 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="0 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="0 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="0 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span></span></td>
<td class="px-3 py-3 font-mono font-semibold">9/20</td>
<td class="px-3 py-3 font-mono text-sm">5 h 20</td>
</tr>
<tr class="bg-[#FFE4DF]">
<td class="px-4 py-3"><span class="flex items-center gap-3"><span class="grid h-8 w-8 place-items-center border border-[#dadce0] rounded-lg bg-[#ec3013] font-extrabold text-white">S</span><span><span class="block font-extrabold">Sami L.</span><span class="block font-mono text-xs font-semibold">Bloqué 9 min</span></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="3 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="1 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="0 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="0 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span></span></td>
<td class="px-3 py-3 font-mono font-semibold">7/20</td>
<td class="px-3 py-3 font-mono text-sm">6 h 45</td>
</tr>
<tr class="">
<td class="px-4 py-3"><span class="flex items-center gap-3"><span class="grid h-8 w-8 place-items-center border border-[#dadce0] rounded-lg bg-[#e6f4ea] font-extrabold">C</span><span><span class="block font-extrabold">Chloé P.</span><span class="block font-mono text-xs font-semibold">En avance</span></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="1 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span></span></td>
<td class="px-3 py-3 font-mono font-semibold">19/20</td>
<td class="px-3 py-3 font-mono text-sm">13 h 15</td>
</tr>
<tr class="">
<td class="px-4 py-3"><span class="flex items-center gap-3"><span class="grid h-8 w-8 place-items-center border border-[#dadce0] rounded-lg bg-white font-extrabold">A</span><span><span class="block font-extrabold">Adam F.</span></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="3 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="0 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="0 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span></span></td>
<td class="px-3 py-3 font-mono font-semibold">13/20</td>
<td class="px-3 py-3 font-mono text-sm">8 h 50</td>
</tr>
</tbody>
</table>
</div>
<p class="mt-4 font-semibold">8 élèves sur 24 affichés · triés par besoin d’aide</p>
</section>
<aside class="grid content-start gap-8 lg:col-span-4">
<section class="border border-[#e3e5e8] rounded-2xl bg-[#fce8e6] p-6" aria-labelledby="t-nora">
<p class="font-mono text-sm font-semibold">Fiche élève</p>
<h2 id="t-nora" class="mt-1 text-3xl font-extrabold">Nora Kaci</h2>
<ol class="mt-5 grid gap-3 border-l border-[#e3e5e8] pl-4 font-semibold">
<li><span class="font-mono text-xs">10:42</span><br>Main levée · Inter-VLAN, étape 3</li>
<li><span class="font-mono text-xs">10:31</span><br>Étape 2 validée après 3 essais</li>
<li><span class="font-mono text-xs">Mar.</span><br>QCM Adressage IPv4 : 11/20. Erreurs sur le calcul de l’adresse réseau (/22).</li>
</ol>
<div class="mt-6 flex flex-wrap gap-3">
<a href="apercu-lab-essai.html" class="border border-[#e3e5e8] rounded-2xl bg-white px-4 py-2 font-extrabold hover:bg-[#fef7e0]">Ouvrir sa console</a>
<a href="apercu-cours-ipv4.html" class="border border-[#e3e5e8] rounded-2xl bg-black px-4 py-2 font-extrabold text-white hover:bg-[#13233A]">Lui assigner le TD</a>
</div>
</section>
<section class="border border-[#e3e5e8] rounded-2xl bg-white p-6" aria-labelledby="t-exam">
<h2 id="t-exam" class="text-3xl font-extrabold">Mode examen</h2>
<a href="apercu-banque.html" class="mt-3 inline-block font-extrabold underline underline-offset-4">Composer un sujet dans la banque →</a>
<form action="apercu-examen.html" method="get" class="mt-5 grid gap-4">
<label class="grid gap-2 font-extrabold">Épreuve<select class="w-full border border-[#e3e5e8] rounded-2xl bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#f8f9fa] focus:outline-none"><option>Adressage et VLAN · E6 blanc SISR</option><option>QCM Bloc 2</option></select></label>
<label class="grid gap-2 font-extrabold">Durée<select class="w-full border border-[#e3e5e8] rounded-2xl bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#f8f9fa] focus:outline-none"><option>1 h</option><option>2 h</option><option>4 h</option></select></label>
<fieldset class="grid gap-2 font-semibold">
<legend class="font-extrabold">Pendant l’épreuve</legend>
<label class="flex items-center gap-3"><input type="checkbox" checked class="h-5 w-5 accent-black"> Indices désactivés</label>
<label class="flex items-center gap-3"><input type="checkbox" checked class="h-5 w-5 accent-black"> Copier-coller bloqué</label>
<label class="flex items-center gap-3"><input type="checkbox" checked class="h-5 w-5 accent-black"> Sortie d’onglet signalée</label>
<label class="flex items-center gap-3"><input type="checkbox" class="h-5 w-5 accent-black"> Ordre des questions mélangé</label>
</fieldset>
<button type="submit" class="inline-flex items-center gap-4 border border-[#e3e5e8] rounded-2xl bg-black px-6 py-4 text-lg font-extrabold text-white transition-transform hover:bg-[#ec3013].5.5 active:shadow-none">Lancer l’examen</button>
</form>
</section>
</aside>
</div>
</div>
<section class="border-t border-[#e3e5e8] bg-white" aria-label="Lever la main">
<div class="mx-auto max-w-7xl px-5 py-16 lg:px-10">
<div class="relative grid items-center gap-10 border border-[#e3e5e8] rounded-2xl bg-black p-8 text-white sm:p-12 md:grid-cols-[auto_1fr]">
<div class="grid h-40 w-40 place-items-center rounded-full border-4 border-white bg-[#E6FF3F] text-black" role="img" aria-label="Moins 40 décibels"><span class="flex flex-col items-center gap-1 text-center"><span class="font-mono text-5xl font-semibold leading-none">−40</span><span class="text-2xl font-extrabold leading-none">dB</span></span></div>
<div>
<p class="text-4xl font-extrabold leading-tight tracking-tight sm:text-5xl">Les élèves signalent un blocage avec la fonction « Lever la main », sans interrompre la classe.<span class="bg-[#E6FF3F] px-2 text-black">« Lever la main »</span>.</p>
<p class="mt-6 text-2xl font-bold">Chaque demande arrive dans votre tableau de bord, dans l’ordre.&nbsp;!</p>
</div>
</div>
</div>
</section>
</main>
<footer style="background:#f8f9fa;border-top:1px solid #e3e5e8;font-family:Mulish,system-ui,sans-serif">
<div class="mx-auto grid max-w-7xl gap-10 px-5 py-14 sm:grid-cols-2 lg:grid-cols-4 lg:px-10">
<div>
<p style="margin:0;font-size:18px;font-weight:800;color:#0b1220">Syllabus</p>
<p style="margin:10px 0 0;font-size:14px;line-height:1.6;font-weight:500;color:#5f6368">Cours, labs, IDE et examens en ligne, du lycée au master.</p>
</div>
<nav aria-label="Produit"><p style="margin:0;font-size:13px;font-weight:800;color:#0b1220">Produit</p><ul style="margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px"><li><a href="apercu-fonctionnalites.html" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Fonctionnalités</a></li><li><a href="apercu-cours.html" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Cours gratuits</a></li><li><a href="apercu-lab-essai.html" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Essayer un lab</a></li><li><a href="apercu-tarifs.html" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Tarifs</a></li></ul></nav><nav aria-label="Outils"><p style="margin:0;font-size:13px;font-weight:800;color:#0b1220">Outils</p><ul style="margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px"><li><a href="apercu-ressource.html?outil=cockpit" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Tableau de bord prof</a></li><li><a href="apercu-ressource.html?outil=labs" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">TP sur machine Linux</a></li><li><a href="apercu-ressource.html?outil=ide" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Éditeur de code</a></li><li><a href="apercu-ressource.html?outil=quiz" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Quiz flash</a></li><li><a href="apercu-ressource.html?outil=sujet" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Examens</a></li><li><a href="apercu-ressource.html?outil=bibliotheque" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Bibliothèque du prof</a></li></ul></nav><nav aria-label="Établissements"><p style="margin:0;font-size:13px;font-weight:800;color:#0b1220">Établissements</p><ul style="margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px"><li><a href="apercu-etablissements.html" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Équiper une classe</a></li><li><a href="apercu-ressource.html?outil=vie-scolaire" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Vie scolaire</a></li><li><a href="apercu-ressource.html?outil=espace-etablissement" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Licences et factures</a></li><li><a href="apercu-ressource.html?outil=integration" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Intégration et sécurité</a></li></ul></nav><nav aria-label="Syllabus"><p style="margin:0;font-size:13px;font-weight:800;color:#0b1220">Syllabus</p><ul style="margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px"><li><a href="apercu-aide.html" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Aide et tutoriels</a></li><li><a href="apercu-legal.html" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Mentions légales et RGPD</a></li></ul></nav>
<p style="margin:0;align-self:start;font-size:14px;font-weight:600;color:#5f6368"><span style="color:#137333">●</span> Tous les services fonctionnent</p>
</div>
<div style="border-top:1px solid #e3e5e8"><ul aria-label="Engagements" style="max-width:1200px;margin:0 auto;padding:24px 20px;list-style:none;display:flex;flex-wrap:wrap;gap:12px 40px"><li style="font-size:14px;font-weight:700;color:#0b1220">Hébergé en France <span style="font-weight:500;color:#5f6368">· Paris</span></li><li style="font-size:14px;font-weight:700;color:#0b1220">RGPD <span style="font-weight:500;color:#5f6368">· données minimisées</span></li><li style="font-size:14px;font-weight:700;color:#0b1220">20 cursus <span style="font-weight:500;color:#5f6368">· du lycée au master</span></li><li style="font-size:14px;font-weight:700;color:#0b1220">0 € <span style="font-weight:500;color:#5f6368">· sans carte bancaire</span></li></ul>
</div>
<div style="border-top:1px solid #e3e5e8">
<div class="mx-auto flex max-w-7xl flex-wrap items-center justify-center gap-x-6 gap-y-2 px-5 py-4 lg:px-10"><nav aria-label="Informations légales"><ul class="flex flex-wrap justify-center gap-x-5 gap-y-1" style="margin:0;padding:0;list-style:none;font-size:14px;font-weight:500"><li><a href="apercu-legal.html#mentions" style="color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Mentions légales</a></li><li><a href="apercu-legal.html#cgu" style="color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">CGU</a></li><li><a href="apercu-legal.html#confidentialite" style="color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Confidentialité et RGPD</a></li><li><a href="apercu-legal.html#cookies" style="color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Cookies</a></li><li><a href="apercu-legal.html#sous-traitance" style="color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Sous-traitance</a></li></ul></nav></div>
</div>
</footer>
</body>
</html>