Paillasse/design/_backup-ludique/apercu-fonctionnalites.html

422 lines
86 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fonctionnalités · Paillasse</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>
</head>
<body class="bg-white font-display text-black antialiased">
<header class="border-b-4 border-black">
<nav class="relative mx-auto flex max-w-[1600px] flex-wrap items-center justify-between gap-x-6 gap-y-4 px-5 py-5 lg:px-8 2xl:flex-nowrap" aria-label="Navigation principale">
<a href="Apercu%20accueil%20Blade.html" class="flex items-center gap-3 text-2xl font-black tracking-tight">
<span class="relative inline-flex h-10 w-12 items-end" aria-hidden="true"><span class="absolute left-2 top-0 h-6 w-4 -rotate-6 border-2 border-black bg-[#7CF2C0]"></span><span class="absolute right-1 top-1 h-5 w-5 rounded-full border-2 border-black bg-[#FF6FB5]"></span><span class="relative h-3 w-full border-2 border-black bg-[#FFD23F] shadow-[3px_3px_0px_#000000]"></span></span>
Paillasse
</a>
<ul class="order-last flex w-full flex-wrap items-center gap-x-6 gap-y-2 whitespace-nowrap text-base font-bold md:flex-nowrap md:gap-x-8 2xl:order-none 2xl:w-auto 2xl:flex-1 2xl:justify-center">
<li><a href="apercu-fonctionnalites.html" aria-current="page" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Fonctionnalités</a></li>
<li>
<details class="group">
<summary class="flex cursor-pointer list-none items-center gap-1 border-2 border-transparent px-1 hover:underline group-open:border-black group-open:bg-[#FFD23F] [&::-webkit-details-marker]:hidden">Ressources <span aria-hidden="true" class="transition-transform group-open:rotate-180">▾</span></summary>
<div class="absolute inset-x-5 top-full z-50 mx-auto max-h-[80vh] max-w-[880px] overflow-y-auto border-4 border-black bg-white shadow-[8px_8px_0px_#000000] lg:inset-x-8">
<div class="grid gap-x-4 gap-y-6 p-5 sm:grid-cols-2 lg:grid-cols-4">
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#FFD23F"></span>Espaces</p><ul class="mt-2 grid gap-0.5"><li><a href="apercu-cockpit.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Cockpit prof</a></li><li><a href="apercu-espace-eleve.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Espace élève</a></li><li><a href="apercu-vie-scolaire.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Vie scolaire</a></li><li><a href="apercu-academie.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Académie</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#7CF2C0"></span>Apprendre</p><ul class="mt-2 grid gap-0.5"><li><a href="apercu-cours.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Cours gratuits</a></li><li><a href="apercu-labs.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Labs sur VM</a></li><li><a href="apercu-lab-web.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Lab web</a></li><li><a href="apercu-ide.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">IDE en ligne</a></li><li><a href="apercu-maison.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Ressources à la maison</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#C4B5FD"></span>Préparer</p><ul class="mt-2 grid gap-0.5"><li><a href="apercu-bibliotheque.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Bibliothèque du prof</a></li><li><a href="apercu-banque.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Banque de sujets</a></li><li><a href="apercu-generateur.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Générateur de TD</a></li><li><a href="apercu-td-imprimable.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">TD à imprimer</a></li><li><a href="apercu-quiz-projection.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Quiz flash</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#FF6FB5"></span>Évaluer et suivre</p><ul class="mt-2 grid gap-0.5"><li><a href="apercu-sujet.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Créer un sujet</a></li><li><a href="apercu-devoirs.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Devoirs maison</a></li><li><a href="apercu-correction.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Correction assistée</a></li><li><a href="apercu-fiche-eleve.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Fiche élève</a></li><li><a href="apercu-messagerie.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Messagerie</a></li><li><a href="apercu-export.html" class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Export Pronote / ENT</a></li></ul></div>
</div>
<div class="flex flex-wrap items-center justify-between gap-3 border-t-4 border-black bg-[#FFFBEA] px-5 py-3"><p class="text-sm font-semibold">Vous débutez ? Tout est expliqué en vidéo.</p><a href="apercu-aide.html" class="border-2 border-black bg-white px-3 py-1 text-sm font-extrabold hover:bg-black hover:text-white">Aide et tutoriels →</a></div>
</div>
</details>
</li>
<li><a href="apercu-etablissements.html" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Établissements</a></li>
<li><a href="apercu-tarifs.html" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Tarifs</a></li>
<li><a href="apercu-pourquoi.html" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Pourquoi ce projet ?</a></li>
</ul>
<div class="mr-4 flex shrink-0 items-center gap-8">
<a href="apercu-connexion.html" class="inline-flex h-12 min-w-[12rem] items-center border-2 border-black bg-white px-6 font-bold shadow-[4px_4px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#FFD23F] hover:shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none">Se connecter</a>
<a href="apercu-inscription.html" class="relative inline-flex h-12 min-w-[12rem] items-center border-2 border-black bg-[#ec3013] px-6 font-bold text-white shadow-[4px_4px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none"><span>Créer une classe</span><span class="pointer-events-none absolute -left-6 -top-4 -rotate-12" aria-hidden="true"><svg viewBox="0 0 44 30" class="h-7 w-10"><rect x="2" y="2" width="40" height="26" fill="#C4B5FD" stroke="#000" stroke-width="3"/><rect x="2" y="8" width="40" height="5" fill="#000"/><rect x="7" y="17" width="9" height="6" fill="#FFD23F" stroke="#000" stroke-width="2"/><path d="M4 28 L40 2" stroke="#ec3013" stroke-width="7" stroke-linecap="round"/><path d="M4 28 L40 2" stroke="#000" stroke-width="2" stroke-linecap="round"/></svg></span><span class="pointer-events-none absolute -bottom-4 -right-5 grid h-9 w-9 rotate-12 place-items-center rounded-full border-2 border-black bg-[#FFD23F] font-mono text-[11px] font-semibold leading-none text-black shadow-[2px_2px_0px_#000000] outline outline-1 outline-offset-[-5px] outline-black" aria-hidden="true">0€</span></a>
</div>
</nav>
</header>
<main>
<section class="relative overflow-hidden border-b-4 border-black bg-white">
<div aria-hidden="true" class="pointer-events-none absolute inset-0"><span class="etoile flotte absolute right-[10%] top-12 h-14 w-14 bg-[#FF6FB5] [--r:12deg]"></span><span class="zigzag absolute bottom-10 right-[30%] h-4 w-40"></span></div>
<div class="relative mx-auto max-w-7xl px-5 pb-16 pt-14 lg:px-10 lg:pt-20">
<p class="inline-block -rotate-2 border-2 border-black bg-[#7CF2C0] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Fonctionnalités</p>
<h1 class="mt-8 max-w-5xl text-6xl font-black leading-[0.9] tracking-tighter sm:text-7xl xl:text-8xl">Tout ce qu’il faut pour une classe, en ligne.</h1>
<p class="mt-8 max-w-2xl text-xl font-medium leading-relaxed">Des cours aux conseils de classe, de l’IDE aux TD à imprimer, sans rien installer. Un navigateur suffit, pour l’élève comme pour le prof.</p>
</div>
</section>
<section id="pourquoi-outil" class="relative overflow-hidden border-b-4 border-black bg-white" aria-labelledby="t-interet">
<div aria-hidden="true" class="pointer-events-none absolute inset-0 hidden lg:block"><svg viewBox="0 0 80 40" class="absolute left-[46%] top-24 h-10 w-20 rotate-12"><path d="M4 30 C20 6 44 6 60 20 M52 10 L62 21 L48 26" fill="none" stroke="#000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg><span class="absolute bottom-16 left-8 h-10 w-10 rotate-12 border-4 border-black bg-[#E6FF3F]"></span><span class="absolute right-10 top-10 h-8 w-8 rounded-full border-4 border-black bg-[#FF6FB5]"></span><span class="zigzag absolute bottom-10 right-[40%] h-4 w-32"></span></div>
<div class="relative mx-auto grid max-w-7xl gap-12 px-5 py-20 lg:grid-cols-12 lg:px-10">
<div class="lg:col-span-7">
<p class="inline-block -rotate-2 border-2 border-black bg-[#FF6FB5] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Pourquoi un tel outil&nbsp;?</p>
<h2 id="t-interet" class="mt-6 text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Suivre chaque élève, même dans une classe de 35.</h2>
<div class="mt-8 grid gap-5 text-xl font-medium leading-relaxed">
<p>Avec des classes entières et une charge de travail déjà lourde, <strong class="font-black">suivre chaque élève individuellement</strong> devient presque impossible. Un <strong class="font-black">élève en difficulté décroche vite</strong>, souvent sans bruit, et le prof, pris par ses nombreuses classes, s’en rend compte trop tard.</p>
<p>Paillasse <strong class="font-black">surveille tout, sans être intrusif</strong>. Le <strong class="font-black">QCM de début d’heure</strong>, celui qui suit la <strong class="font-black">lecture du cours</strong>, les <strong class="font-black">TP</strong>, les <strong class="font-black">devoirs et exercices maison</strong> : chaque trace remonte au prof. Il voit rapidement <strong class="font-black">qui accompagner plus régulièrement</strong>, qui faire passer au premier rang, à qui demander de réexpliquer une notion.</p>
<p>C’est une <strong class="font-black">supervision bienveillante et naturelle</strong>, qui ne remplace pas le regard du prof mais l’aide à savoir <strong class="font-black">où concentrer ses efforts</strong>. Tout remonte dans le <strong class="font-black">cockpit prof</strong>, d’où il pilote et supervise examens, devoirs maison, quiz et labs.</p>
<p>Dans les labs, chaque étape a ses <strong class="font-black">indices, qui se débloquent après un certain nombre de tentatives</strong>. Ils ne remplacent pas l’aide d’un prof (ni une recherche Google&nbsp;😉), mais ils poussent l’élève à <strong class="font-black">réfléchir un tout petit peu plus avant de vous appeler</strong>. Et souvent, ils vous <strong class="font-black">évitent les questions triviales</strong>.</p>
<p>Et dans l’autre sens, <strong class="font-black">l’élève en excellence peut s’épanouir</strong>. Il aborde des notions plus avancées, avec une difficulté plus forte, <strong class="font-black">sans prendre d’avance sur le programme</strong> : il explore des notions connexes qui développent sa <strong class="font-black">culture générale</strong>.</p>
<p class="relative mt-4 inline-block -rotate-1 self-start border-4 border-black bg-black px-5 py-4 text-3xl font-black leading-tight text-white shadow-[6px_6px_0px_#E6FF3F]">Tout cela dans un unique but : <span class="text-[#E6FF3F]">faciliter votre travail.</span><svg viewBox="0 0 40 40" class="absolute -right-6 -top-6 h-10 w-10" aria-hidden="true"><path d="M20 2 l5 12 13 1 -10 8 3 13 -11 -7 -11 7 3 -13 -10 -8 13 -1 z" fill="#FF6FB5" stroke="#000" stroke-width="3" stroke-linejoin="round"/></svg></p>
</div>
</div>
<div class="grid content-start gap-8 lg:col-span-5 lg:pt-16">
<article class="relative border-4 border-black bg-[#FFD23F] p-6 shadow-[8px_8px_0px_#000000] lg:-rotate-1">
<span class="absolute -top-4 right-5 rotate-2 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold shadow-[2px_2px_0px_#000000]">Alerte douce</span>
<h3 class="text-2xl font-black">Un élève décroche</h3>
<ul class="mt-4 grid gap-2 font-semibold"><li class="flex gap-3"><span aria-hidden="true">■</span>3 QCM de début d’heure sous la moyenne</li><li class="flex gap-3"><span aria-hidden="true">■</span>Cours lu en 2 minutes au lieu de 15</li><li class="flex gap-3"><span aria-hidden="true">■</span>Devoir maison non rendu</li></ul>
<p class="mt-4 border-t-2 border-black pt-3 font-extrabold">→ Premier rang, notion à réexpliquer, suivi plus régulier.</p>
</article>
<article class="relative border-4 border-black bg-[#7CF2C0] p-6 shadow-[8px_8px_0px_#000000] lg:translate-x-6 lg:rotate-1">
<span class="absolute -top-4 left-5 -rotate-2 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold shadow-[2px_2px_0px_#000000]">Excellence</span>
<h3 class="text-2xl font-black">Un élève s’ennuie</h3>
<ul class="mt-4 grid gap-2 font-semibold"><li class="flex gap-3"><span aria-hidden="true">■</span>Tous les TP réussis du premier coup</li><li class="flex gap-3"><span aria-hidden="true">■</span>20/20 au QCM de lecture</li><li class="flex gap-3"><span aria-hidden="true">■</span>Finit avant tout le monde</li></ul>
<p class="mt-4 border-t-2 border-black pt-3 font-extrabold">→ Défis plus durs sur des notions connexes, sans prendre d’avance sur le programme.</p>
</article>
<article class="relative border-4 border-black bg-[#C4B5FD] p-6 shadow-[8px_8px_0px_#000000] lg:-translate-x-3 lg:-rotate-1">
<span class="absolute -top-4 right-5 rotate-2 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold shadow-[2px_2px_0px_#000000]">Labs</span>
<div class="flex items-center gap-4"><svg viewBox="0 0 64 64" class="h-14 w-14 shrink-0" aria-hidden="true"><g stroke="#000" stroke-width="4" stroke-linejoin="round" stroke-linecap="round"><path d="M32 6 C18 6 10 16 10 27 C10 36 16 40 20 46 H44 C48 40 54 36 54 27 C54 16 46 6 32 6 Z" fill="#E6FF3F"/><rect x="21" y="46" width="22" height="7" fill="#fff"/><rect x="24" y="53" width="16" height="6" fill="#fff"/><path d="M26 28 L32 36 L38 28" fill="none"/></g><g stroke="#000" stroke-width="3.5" stroke-linecap="round"><path d="M2 20 L7 22 M62 20 L57 22 M8 4 L12 9 M56 4 L52 9"/></g></svg><h3 class="text-2xl font-black">Un indice se débloque</h3></div>
<ol class="mt-4 grid gap-2 font-mono text-sm font-semibold"><li class="border-2 border-black bg-white px-3 py-2">Tentative 1 · <span class="text-[#b3001b]">échec</span></li><li class="border-2 border-black bg-white px-3 py-2">Tentative 3 · 💡 Indice 1 : regarde la commande <strong>ip addr</strong></li><li class="border-2 border-black bg-white px-3 py-2">Tentative 5 · 💡 Indice 2 : le masque /26 donne 62 hôtes</li></ol>
<p class="mt-4 border-t-2 border-black pt-3 font-extrabold">→ L’élève cherche d’abord. Vous gardez votre temps pour les vraies questions.</p>
</article>
</div>
</div>
</section>
<section id="cockpit" class="scroll-mt-16 border-b-4 border-black bg-[#13233A] text-white" aria-labelledby="t-cockpit">
<div class="mx-auto grid max-w-7xl gap-12 px-5 py-20 lg:grid-cols-12 lg:px-10">
<div class="lg:col-span-5">
<p class="inline-block -rotate-2 border-2 border-black bg-[#FFD23F] px-3 py-1 text-sm font-extrabold uppercase tracking-wider text-black shadow-[4px_4px_0px_#000000]">Cockpit prof</p>
<h2 id="t-cockpit" class="mt-6 text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Un seul écran pour tout piloter.</h2>
<p class="mt-6 text-xl font-medium leading-relaxed">Le cockpit prof fait remonter les <strong class="font-black">informations importantes</strong> : qui décroche, qui a fini, qui lève la main, qui n’a pas rendu son devoir. De là, vous <strong class="font-black">pilotez et supervisez</strong> tout le reste : examens, devoirs maison, quiz flash, labs et QCM.</p>
<ul class="mt-8 grid gap-3 font-semibold sm:grid-cols-2">
<li class="flex gap-3 border-2 border-white p-3"><span aria-hidden="true">■</span>Lancer ou arrêter un examen</li>
<li class="flex gap-3 border-2 border-white p-3"><span aria-hidden="true">■</span>Programmer un devoir maison</li>
<li class="flex gap-3 border-2 border-white p-3"><span aria-hidden="true">■</span>Projeter un quiz flash</li>
<li class="flex gap-3 border-2 border-white p-3"><span aria-hidden="true">■</span>Répondre aux mains levées</li>
</ul>
<a href="apercu-cockpit.html" class="mt-8 inline-flex items-center gap-4 border-4 border-black bg-[#FFD23F] px-6 py-4 text-lg font-extrabold text-black shadow-[6px_6px_0px_#000000] hover:bg-white">Ouvrir le cockpit →</a>
</div>
<div class="lg:col-span-7">
<div class="border-4 border-black bg-white text-black shadow-[10px_10px_0px_#FF6FB5]">
<div class="flex flex-wrap items-center justify-between gap-3 border-b-4 border-black bg-[#FFD23F] px-5 py-3"><p class="text-xl font-black">Cockpit · BTS SIO 1</p><p class="font-mono text-sm font-semibold">mardi 29/09 · 10 h 12</p></div>
<ul class="grid gap-3 p-5 sm:grid-cols-4">
<li class="border-4 border-black bg-[#ec3013] text-white p-4"><p class="font-mono text-xs font-semibold uppercase">À aider</p><p class="mt-1 text-3xl font-black leading-none">3</p><p class="mt-1 text-sm font-semibold">élèves en difficulté</p></li><li class="border-4 border-black bg-[#FF6FB5] p-4"><p class="font-mono text-xs font-semibold uppercase">Mains levées</p><p class="mt-1 text-3xl font-black leading-none">2</p><p class="mt-1 text-sm font-semibold">en attente</p></li><li class="border-4 border-black bg-[#7CF2C0] p-4"><p class="font-mono text-xs font-semibold uppercase">Examen</p><p class="mt-1 text-3xl font-black leading-none">24/24</p><p class="mt-1 text-sm font-semibold">en cours, 0 sortie</p></li><li class="border-4 border-black bg-[#C4B5FD] p-4"><p class="font-mono text-xs font-semibold uppercase">DM</p><p class="mt-1 text-3xl font-black leading-none">19/24</p><p class="mt-1 text-sm font-semibold">rendus avant vendredi</p></li>
</ul>
<ol class="grid gap-2 border-t-4 border-black p-5 font-semibold">
<li class="flex flex-wrap items-center gap-3"><span class="border-2 border-black bg-[#ec3013] px-2 text-sm font-extrabold text-white">Alerte</span>Léa M. · 3 QCM sous la moyenne · proposer le premier rang</li>
<li class="flex flex-wrap items-center gap-3"><span class="border-2 border-black bg-[#FF6FB5] px-2 text-sm font-extrabold">Main levée</span>Yanis B. · bloqué à l’étape 4 du lab VLAN</li>
<li class="flex flex-wrap items-center gap-3"><span class="border-2 border-black bg-[#FFD23F] px-2 text-sm font-extrabold">DM</span>5 devoirs non rendus · relance automatique jeudi</li>
<li class="flex flex-wrap items-center gap-3"><span class="border-2 border-black bg-[#7CF2C0] px-2 text-sm font-extrabold">Excellence</span>Inès K. · tout réussi · défi connexe proposé</li>
</ol>
</div>
</div>
</div>
</section>
<nav class="sticky top-0 z-20 border-b-4 border-black bg-white" aria-label="Sections">
<ul class="mx-auto flex max-w-7xl flex-wrap gap-2 px-5 py-3 text-sm font-extrabold lg:px-10">
<li><a href="#cockpit" class="block border-2 border-black bg-[#FFD23F] px-3 py-1 hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">Cockpit prof</a></li><li><a href="#pourquoi-outil" class="block border-2 border-black bg-[#FF6FB5] px-3 py-1 hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">Pourquoi</a></li><li><a href="#ressources" class="block border-2 border-black bg-black text-white px-3 py-1 hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#FFD23F]">Toutes les ressources</a></li><li><a href="#examen" class="block border-2 border-black bg-[#ec3013] text-white px-3 py-1 hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">Mode examen</a></li><li><a href="#qcm" class="block border-2 border-black bg-[#FFD23F] px-3 py-1 hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">QCM et quiz</a></li><li><a href="#banque" class="block border-2 border-black bg-[#FFD23F] px-3 py-1 hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">Quiz flash et banque</a></li><li><a href="#cours" class="block border-2 border-black bg-[#C4B5FD] px-3 py-1 hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">CM, TD, TP</a></li><li><a href="#eleves" class="block border-2 border-black bg-[#7CF2C0] px-3 py-1 hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">Élèves et classes</a></li><li><a href="#evolution" class="block border-2 border-black bg-[#FF6FB5] px-3 py-1 hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">Évolution</a></li><li><a href="#conseil" class="block border-2 border-black bg-white px-3 py-1 hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">Conseil de classe</a></li><li><a href="#en-ligne" class="block border-2 border-black bg-white px-3 py-1 hover:-translate-y-0.5 hover:shadow-[3px_3px_0px_#000000]">100 % en ligne</a></li>
</ul>
</nav>
<section id="ressources" class="scroll-mt-16 border-b-4 border-black bg-white" aria-labelledby="t-ressources">
<div class="mx-auto max-w-7xl px-5 py-20 lg:px-10">
<p class="inline-block -rotate-2 border-2 border-black bg-[#FFD23F] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Toutes les ressources</p>
<h2 id="t-ressources" class="mt-6 max-w-4xl text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">22 outils, un seul site.</h2>
<p class="mt-6 max-w-2xl text-xl font-medium leading-relaxed">Tout ce qui a été ajouté à Paillasse, au même endroit. Chaque carte ouvre l’outil.</p>
<ul class="mt-14 grid gap-x-8 gap-y-10 sm:grid-cols-2 lg:grid-cols-4">
<li class="sm:col-span-2 lg:col-span-4"><a href="apercu-cockpit.html" class="group relative flex flex-col gap-2 border-4 border-black bg-[#13233A] p-6 text-white shadow-[8px_8px_0px_#FFD23F] transition-transform hover:-translate-y-1 sm:flex-row sm:items-center sm:justify-between"><span class="absolute -top-4 left-5 -rotate-2 border-2 border-black bg-[#FFD23F] px-2 py-0.5 font-mono text-xs font-semibold text-black">Nouveau</span><span><span class="text-3xl font-black">Cockpit prof</span><span class="mt-2 flex-1 block font-semibold">Alertes, mains levées, examen, DM, observations : tout se pilote sur un seul écran.</span></span><span class="shrink-0 font-extrabold underline underline-offset-4">Ouvrir →</span></a></li>
<li class=""><a href="apercu-cours.html" class="group relative flex h-full flex-col border-4 border-black bg-[#FFD23F] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 -rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">Gratuit</span><span class="font-mono text-sm font-semibold">01</span><span class="mt-2 text-2xl font-black leading-tight">Cours complets</span><span class="mt-2 flex-1 font-semibold">CM chronométrés, illustrés, avec vidéos. QCM de lecture, TD optionnel, TP pour pratiquer. Du SNT au master.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class="lg:translate-y-6"><a href="apercu-ide.html" class="group relative flex h-full flex-col border-4 border-black bg-[#7CF2C0] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">Nouveau</span><span class="font-mono text-sm font-semibold">02</span><span class="mt-2 text-2xl font-black leading-tight">IDE en ligne</span><span class="mt-2 flex-1 font-semibold">Python, SQL, HTML/CSS/JS, Bash, C. Tests automatiques et corrigés, sans rien installer.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class=""><a href="apercu-labs.html" class="group relative flex h-full flex-col border-4 border-black bg-[#C4B5FD] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 -rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">VM Debian</span><span class="font-mono text-sm font-semibold">03</span><span class="mt-2 text-2xl font-black leading-tight">Labs sur VM</span><span class="mt-2 flex-1 font-semibold">Un vrai terminal Linux (xterm.js) par élève. Chaque étape est vérifiée dans la VM.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class="lg:-translate-y-3"><a href="apercu-lab-web.html" class="group relative flex h-full flex-col border-4 border-black bg-[#FF6FB5] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">Nouveau</span><span class="font-mono text-sm font-semibold">04</span><span class="mt-2 text-2xl font-black leading-tight">Lab web</span><span class="mt-2 flex-1 font-semibold">Terminal et navigateur reliés : l’élève installe Apache, modifie la page, voit le résultat.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class=""><a href="apercu-bibliotheque.html" class="group relative flex h-full flex-col border-4 border-black bg-white p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 -rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">225 fiches</span><span class="font-mono text-sm font-semibold">05</span><span class="mt-2 text-2xl font-black leading-tight">Bibliothèque du prof</span><span class="mt-2 flex-1 font-semibold">Tout le référentiel, du SNT au master, vérifié sur les textes officiels (BO, arrêtés, RNCP).</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class="lg:translate-y-6"><a href="apercu-banque.html" class="group relative flex h-full flex-col border-4 border-black bg-[#FFD23F] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">1 240 questions</span><span class="font-mono text-sm font-semibold">06</span><span class="mt-2 text-2xl font-black leading-tight">Banque de sujets</span><span class="mt-2 flex-1 font-semibold">Questions et sujets d’examen personnalisables, classés par cursus, notion et difficulté.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class=""><a href="apercu-generateur.html" class="group relative flex h-full flex-col border-4 border-black bg-[#7CF2C0] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 -rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">À l’infini</span><span class="font-mono text-sm font-semibold">07</span><span class="mt-2 text-2xl font-black leading-tight">Générateur de TD</span><span class="mt-2 flex-1 font-semibold">Des exercices toujours nouveaux : sous-réseaux, conversions, droits Unix, SQL…</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class="lg:-translate-y-3"><a href="apercu-td-imprimable.html" class="group relative flex h-full flex-col border-4 border-black bg-[#C4B5FD] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">PDF</span><span class="font-mono text-sm font-semibold">08</span><span class="mt-2 text-2xl font-black leading-tight">TD à imprimer</span><span class="mt-2 flex-1 font-semibold">Étapes numérotées, cases à remplir, auto-évaluation. Correction imprimée à part.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class=""><a href="apercu-quiz-projection.html" class="group relative flex h-full flex-col border-4 border-black bg-[#FF6FB5] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 -rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">Début d’heure</span><span class="font-mono text-sm font-semibold">09</span><span class="mt-2 text-2xl font-black leading-tight">Quiz flash</span><span class="mt-2 flex-1 font-semibold">Diaporama projeté, élèves connectés depuis PC ou mobile. Vous voyez qui manque.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class="lg:translate-y-6"><a href="apercu-devoirs.html" class="group relative flex h-full flex-col border-4 border-black bg-white p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">Maison</span><span class="font-mono text-sm font-semibold">10</span><span class="mt-2 text-2xl font-black leading-tight">Devoirs maison</span><span class="mt-2 flex-1 font-semibold">Programmez un devoir, fixez la date de rendu, suivez qui a rendu et corrigez en ligne.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class=""><a href="apercu-maison.html" class="group relative flex h-full flex-col border-4 border-black bg-[#FFD23F] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 -rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">Aller plus loin</span><span class="font-mono text-sm font-semibold">11</span><span class="mt-2 text-2xl font-black leading-tight">Ressources à la maison</span><span class="mt-2 flex-1 font-semibold">HackerRank, DataCamp et d’autres ressources gratuites pour les élèves motivés.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class="lg:-translate-y-3"><a href="apercu-examen.html" class="group relative flex h-full flex-col border-4 border-black bg-[#ec3013] text-white p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">Surveillé</span><span class="font-mono text-sm font-semibold">12</span><span class="mt-2 text-2xl font-black leading-tight">Mode examen</span><span class="mt-2 flex-1 font-semibold">Changement d’onglet, souris qui sort, fenêtre quittée : tout est noté en direct.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class=""><a href="apercu-espace-eleve.html" class="group relative flex h-full flex-col border-4 border-black bg-[#7CF2C0] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 -rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">Élève</span><span class="font-mono text-sm font-semibold">13</span><span class="mt-2 text-2xl font-black leading-tight">Espace élève</span><span class="mt-2 flex-1 font-semibold">Calendrier, devoirs, examens à venir, exercices par niveau, progression et « Lever la main ».</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class="lg:translate-y-6"><a href="apercu-vie-scolaire.html" class="group relative flex h-full flex-col border-4 border-black bg-[#C4B5FD] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">CPE · intendance</span><span class="font-mono text-sm font-semibold">14</span><span class="mt-2 text-2xl font-black leading-tight">Vie scolaire</span><span class="mt-2 flex-1 font-semibold">Alertes toutes classes, conseils de classe, journal des examens, licences, factures et consommation de VM.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class=""><a href="apercu-fiche-eleve.html" class="group relative flex h-full flex-col border-4 border-black bg-white p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 -rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">Équipe</span><span class="font-mono text-sm font-semibold">15</span><span class="mt-2 text-2xl font-black leading-tight">Fiche élève</span><span class="mt-2 flex-1 font-semibold">Compétences, historique, observations et alertes réunis sur une seule fiche.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class="lg:-translate-y-3"><a href="apercu-correction.html" class="group relative flex h-full flex-col border-4 border-black bg-[#FFD23F] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">Gain de temps</span><span class="font-mono text-sm font-semibold">16</span><span class="mt-2 text-2xl font-black leading-tight">Correction assistée</span><span class="mt-2 flex-1 font-semibold">Barème pré-rempli à partir des calculs, des commandes rejouées et des tests. Vous validez.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class=""><a href="apercu-sujet.html" class="group relative flex h-full flex-col border-4 border-black bg-[#FF6FB5] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 -rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">5 étapes</span><span class="font-mono text-sm font-semibold">17</span><span class="mt-2 text-2xl font-black leading-tight">Créer un sujet</span><span class="mt-2 flex-1 font-semibold">Cadre, questions de la banque, barème, surveillance, publication.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class="lg:translate-y-6"><a href="apercu-messagerie.html" class="group relative flex h-full flex-col border-4 border-black bg-white p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">Encadrée</span><span class="font-mono text-sm font-semibold">18</span><span class="mt-2 text-2xl font-black leading-tight">Messagerie</span><span class="mt-2 flex-1 font-semibold">Prof, élève, classe, collègues et CPE. Réponses rapides : indice, cours, créneau.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class=""><a href="apercu-export.html" class="group relative flex h-full flex-col border-4 border-black bg-[#7CF2C0] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 -rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">CSV</span><span class="font-mono text-sm font-semibold">19</span><span class="mt-2 text-2xl font-black leading-tight">Export Pronote / ENT</span><span class="mt-2 flex-1 font-semibold">Notes, présences et appréciations prêtes à charger dans votre logiciel.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class="lg:-translate-y-3"><a href="apercu-academie.html" class="group relative flex h-full flex-col border-4 border-black bg-[#C4B5FD] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">Multi-sites</span><span class="font-mono text-sm font-semibold">20</span><span class="mt-2 text-2xl font-black leading-tight">Académie</span><span class="mt-2 flex-1 font-semibold">Usage et compétences agrégés par établissement, sans donnée nominative.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
<li class=""><a href="apercu-aide.html" class="group relative flex h-full flex-col border-4 border-black bg-[#FFD23F] p-5 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-1 hover:shadow-[8px_8px_0px_#000000]"><span class="absolute -top-4 right-4 -rotate-3 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black shadow-[2px_2px_0px_#000000]">Vidéos</span><span class="font-mono text-sm font-semibold">21</span><span class="mt-2 text-2xl font-black leading-tight">Aide et tutoriels</span><span class="mt-2 flex-1 font-semibold">Tutoriels courts et guides pas à pas, réponse sous 24 h.</span><span class="mt-4 font-extrabold underline underline-offset-4 group-hover:no-underline">Ouvrir →</span></a></li>
</ul>
</div>
</section>
<section id="examen" class="scroll-mt-16 border-b-4 border-black bg-white" aria-labelledby="t-examen">
<div class="mx-auto grid max-w-7xl gap-12 px-5 py-20 lg:grid-cols-12 lg:px-10">
<div class="lg:col-span-6">
<p class="inline-block -rotate-2 border-2 border-black bg-[#ec3013] text-white px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Mode examen</p>
<h2 id="t-examen" class="mt-6 max-w-4xl text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Vous savez quand un élève quitte sa copie.</h2>
<p class="mt-6 max-w-2xl text-xl font-medium leading-relaxed">Pendant une épreuve, Paillasse enregistre chaque sortie de l’élève : changement d’onglet, fenêtre quittée, souris sortie du navigateur. Chaque événement est horodaté et apparaît en direct sur votre écran.</p>
<ul class="mt-8 grid gap-3 sm:grid-cols-2"><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>Changement d’onglet détecté</span></li><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>Fenêtre du navigateur quittée</span></li><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>Souris sortie de la page</span></li><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>Sortie du plein écran</span></li><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>Copier-coller bloqué</span></li><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>Indices désactivés</span></li><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>VM sans accès Internet</span></li><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>Remise automatique à la fin du temps</span></li></ul>
<a href="apercu-examen.html" class="inline-flex items-center gap-4 border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white shadow-[6px_6px_0px_#ec3013] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#ec3013] hover:shadow-[8px_8px_0px_#000000] mt-10">Voir le mode examen <span class="font-mono" aria-hidden="true">→</span></a>
</div>
<div class="lg:col-span-6">
<div class="border-4 border-black bg-[#13233A] text-white shadow-[10px_10px_0px_#FFD23F]" id="demo-examen">
<div class="flex flex-wrap items-center gap-3 border-b-4 border-black bg-black px-5 py-3">
<span class="border-2 border-white bg-[#ec3013] px-2 font-mono text-xs font-semibold">EN DIRECT</span>
<p class="flex-1 font-extrabold">Essayez : changez d’onglet ou sortez la souris de la page</p>
<p class="font-mono text-sm"><span id="nb-incidents" class="text-2xl font-semibold text-[#FFD23F]">0</span> incident(s)</p>
</div>
<ol id="journal-examen" class="grid max-h-[340px] min-h-[260px] content-start gap-2 overflow-y-auto p-5 font-mono text-sm" aria-live="polite">
<li class="text-[#9fb0c8]">En attente… Rien à signaler pour l’instant.</li>
</ol>
<p class="border-t-4 border-black bg-[#0d192b] px-5 py-3 text-sm font-semibold">Essayez aussi de copier ce texte : la copie est bloquée pendant l’épreuve.</p>
</div>
</div>
</div>
</section>
<section id="qcm" class="scroll-mt-16 border-b-4 border-black bg-[#FFD23F]" aria-labelledby="t-qcm">
<div class="mx-auto grid max-w-7xl gap-12 px-5 py-20 lg:grid-cols-12 lg:px-10">
<div class="lg:col-span-7">
<p class="inline-block -rotate-2 border-2 border-black bg-white px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">QCM et quiz</p>
<h2 id="t-qcm" class="mt-6 max-w-4xl text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Chaque erreur devient une explication.</h2>
<p class="mt-6 max-w-2xl text-xl font-medium leading-relaxed">L’élève valide, voit sa note, puis lit pourquoi la bonne réponse est la bonne. Vous voyez quelles questions font trébucher la classe.</p>
<ul class="mt-8 grid gap-3 sm:grid-cols-2"><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>Choix unique ou multiple</span></li><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>Vrai / faux, réponse numérique</span></li><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>Texte à trous</span></li><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>Correction expliquée question par question</span></li><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>Tirage aléatoire dans une banque</span></li><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>Import et export GIFT et Moodle XML</span></li></ul>
</div>
<div class="grid content-start gap-5 lg:col-span-5">
<div class="border-4 border-black bg-white p-5 shadow-[8px_8px_0px_#000000] lg:rotate-1">
<p class="font-mono text-sm font-semibold">Question 2 · réussie par 38 % de la classe</p>
<p class="mt-2 text-xl font-extrabold">Quelle est l’adresse réseau de 10.0.3.200/22 ?</p>
<div class="mt-4 h-4 border-2 border-black bg-white"><div class="h-full w-[38%] border-r-2 border-black bg-[#ec3013]"></div></div>
<p class="mt-3 font-semibold">Erreur fréquente : 10.0.3.0 (le masque n’est pas appliqué au 3ᵉ octet).</p>
</div>
<a href="apercu-cours-ipv4.html#qcm" class="inline-flex items-center gap-3 border-4 border-black bg-white px-5 py-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:bg-[#FFD23F] self-start">Essayer un QCM corrigé</a>
</div>
</div>
</section>
<section id="banque" class="scroll-mt-16 border-b-4 border-black bg-white" aria-labelledby="t-banque">
<div class="mx-auto grid max-w-7xl gap-12 px-5 py-20 lg:grid-cols-2 lg:px-10">
<div>
<p class="inline-block -rotate-2 border-2 border-black bg-[#FFD23F] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Quiz de début d’heure</p>
<h2 id="t-banque" class="mt-6 text-5xl font-black leading-[0.95] tracking-tighter">5 minutes pour réveiller la classe.</h2>
<p class="mt-6 text-xl font-medium leading-relaxed">Sélectionnez les outils à réviser parmi ceux proposés : ls, chmod, grep, ip, ssh, systemctl… Un diaporama s’affiche au tableau. Les élèves se connectent avec leur identifiant, sur téléphone ou sur PC, depuis leur navigateur. Vous voyez en direct qui est là et qui manque.</p>
<ul class="mt-6 flex flex-wrap gap-2 font-mono text-sm font-semibold"><li class="border-2 border-black bg-black text-white px-2 py-0.5">ls</li><li class="border-2 border-black bg-white px-2 py-0.5">chmod</li><li class="border-2 border-black bg-white px-2 py-0.5">grep</li><li class="border-2 border-black bg-black text-white px-2 py-0.5">ip</li><li class="border-2 border-black bg-white px-2 py-0.5">ping</li><li class="border-2 border-black bg-white px-2 py-0.5">ssh</li><li class="border-2 border-black bg-black text-white px-2 py-0.5">systemctl</li><li class="border-2 border-black bg-white px-2 py-0.5">dig</li></ul>
<a href="apercu-banque.html#flash" class="inline-flex items-center gap-3 border-4 border-black bg-white px-5 py-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:bg-[#FFD23F] mt-8">Créer un quiz flash</a>
</div>
<div class="border-4 border-black bg-[#C4B5FD] p-7 shadow-[10px_10px_0px_#000000] lg:rotate-1">
<p class="inline-block border-2 border-black bg-white px-3 py-1 text-sm font-extrabold uppercase tracking-wider">Banque de sujets</p>
<h3 class="mt-5 text-4xl font-black leading-tight tracking-tighter">1 240 questions, à votre sauce.</h3>
<p class="mt-4 text-lg font-semibold">Classées par cursus, notion et difficulté. Modifiez-les, écrivez les vôtres, partagez-les avec vos collègues. Composez un sujet d’examen en quelques clics.</p>
<ul class="mt-5 grid gap-2 font-semibold"><li class="flex gap-3"><span aria-hidden="true">■</span>6 types de questions</li><li class="flex gap-3"><span aria-hidden="true">■</span>Explication pour chaque réponse</li><li class="flex gap-3"><span aria-hidden="true">■</span>Statistiques de réussite par question</li><li class="flex gap-3"><span aria-hidden="true">■</span>Sujets prêts : E6 blanc SISR, contrôles, QCM de trimestre</li></ul>
<a href="apercu-banque.html" class="inline-flex items-center gap-4 border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white shadow-[6px_6px_0px_#ec3013] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#ec3013] hover:shadow-[8px_8px_0px_#000000] mt-8">Ouvrir la banque <span class="font-mono" aria-hidden="true">→</span></a><div class="mt-4 flex flex-wrap gap-3"><a href="apercu-bibliotheque.html" class="border-4 border-black bg-white px-4 py-2 font-extrabold hover:bg-[#FFD23F]">Bibliothèque du référentiel →</a><a href="apercu-generateur.html" class="border-4 border-black bg-[#FF6FB5] px-4 py-2 font-extrabold">Générateur de TD →</a></div>
</div>
</div>
</section>
<section id="cours" class="scroll-mt-16 border-b-4 border-black bg-white" aria-labelledby="t-cours">
<div class="mx-auto max-w-7xl px-5 py-20 lg:px-10">
<p class="inline-block -rotate-2 border-2 border-black bg-[#C4B5FD] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">CM, TD, TP</p>
<h2 id="t-cours" class="mt-6 max-w-4xl text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Des séquences prêtes, à votre main.</h2>
<p class="mt-6 max-w-2xl text-xl font-medium leading-relaxed">Chaque cours suit le même parcours, calé sur votre référentiel. Dupliquez-le, changez ce que vous voulez, assignez-le en un clic.</p>
<ol class="mt-12 grid gap-6 md:grid-cols-5">
<li class="border-4 border-black bg-white p-6 shadow-[6px_6px_0px_#000000]"><p class="font-mono text-sm font-semibold">1 · CM</p><p class="mt-3 text-xl font-black">Une page complète</p><p class="mt-2 font-semibold">Illustrée, chronométrée. L’élève doit tout lire.</p></li>
<li class="border-4 border-black bg-[#FFD23F] p-6 shadow-[6px_6px_0px_#000000] md:translate-y-6"><p class="font-mono text-sm font-semibold">2 · QCM</p><p class="mt-3 text-xl font-black">A-t-il bien lu ?</p><p class="mt-2 font-semibold">Questions sur les notions du texte.</p></li>
<li class="border-4 border-dashed border-black bg-[#C4B5FD] p-6 shadow-[6px_6px_0px_#000000]"><p class="font-mono text-sm font-semibold">3 · TD</p><p class="mt-3 text-xl font-black">Optionnel</p><p class="mt-2 font-semibold">Exercices corrigés pour s’entraîner.</p></li>
<li class="border-4 border-black bg-[#7CF2C0] p-6 shadow-[6px_6px_0px_#000000] md:translate-y-6"><p class="font-mono text-sm font-semibold">4 · TP</p><p class="mt-3 text-xl font-black">Pratiquer</p><p class="mt-2 font-semibold">VM prête en 5 s, étapes vérifiées.</p></li>
<li class="border-4 border-black bg-black p-6 text-white shadow-[6px_6px_0px_#ec3013]"><p class="font-mono text-sm font-semibold">5 · Examen</p><p class="mt-3 text-xl font-black">Quand le prof veut</p><p class="mt-2 font-semibold">Sujet tiré de la banque, surveillé en direct.</p></li>
</ol>
<div class="mt-16 flex flex-wrap gap-4"><a href="apercu-cours-ipv4-cm.html" class="inline-flex items-center gap-4 border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white shadow-[6px_6px_0px_#ec3013] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#ec3013] hover:shadow-[8px_8px_0px_#000000]">Lire un CM complet <span class="font-mono" aria-hidden="true">→</span></a>
<a href="apercu-cours.html" class="inline-flex items-center gap-3 border-4 border-black bg-white px-5 py-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:bg-[#FFD23F]">Parcourir les cours gratuits</a><a href="apercu-ide.html" class="inline-flex items-center gap-3 border-4 border-black bg-[#FF6FB5] px-5 py-3 font-extrabold shadow-[4px_4px_0px_#000000]">Ouvrir l’IDE en ligne</a></div>
</div>
</section>
<section id="eleves" class="scroll-mt-16 border-b-4 border-black bg-[#7CF2C0]" aria-labelledby="t-eleves">
<div class="mx-auto grid max-w-7xl gap-12 px-5 py-20 lg:grid-cols-12 lg:px-10">
<div class="lg:col-span-6">
<p class="inline-block -rotate-2 border-2 border-black bg-white px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Élèves et classes</p>
<h2 id="t-eleves" class="mt-6 max-w-4xl text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Vos classes, vos groupes, en quelques minutes.</h2>
<p class="mt-6 max-w-2xl text-xl font-medium leading-relaxed">Créez une classe, découpez-la en groupes, ajoutez les élèves comme vous préférez. L’établissement garde la main sur tout depuis l’espace administrateur, CPE compris.</p></div>
<ol class="grid content-start gap-3 lg:col-span-6">
<li class="flex items-center gap-4 border-4 border-black bg-white p-4 font-bold shadow-[4px_4px_0px_#000000] "><span class="font-mono text-2xl font-semibold">1</span>Code ou QR de classe, validé par le prof</li><li class="flex items-center gap-4 border-4 border-black bg-white p-4 font-bold shadow-[4px_4px_0px_#000000] md:ml-8"><span class="font-mono text-2xl font-semibold">2</span>Import CSV : nom, prénom, groupe</li><li class="flex items-center gap-4 border-4 border-black bg-white p-4 font-bold shadow-[4px_4px_0px_#000000] "><span class="font-mono text-2xl font-semibold">3</span>Saisie rapide, une ligne par élève</li><li class="flex items-center gap-4 border-4 border-black bg-white p-4 font-bold shadow-[4px_4px_0px_#000000] md:ml-8"><span class="font-mono text-2xl font-semibold">4</span>Fiche de connexion imprimée pour les mineurs, sans e-mail</li><li class="flex items-center gap-4 border-4 border-black bg-white p-4 font-bold shadow-[4px_4px_0px_#000000] "><span class="font-mono text-2xl font-semibold">5</span>Moodle LTI 1.3 (bientôt)</li>
<li class="mt-4 border-4 border-black bg-black p-4 font-bold text-white">Fin d’année : archivage de la classe, suppression automatique 90 jours après.</li>
</ol>
</div>
</section>
<section id="evolution" class="scroll-mt-16 border-b-4 border-black bg-white" aria-labelledby="t-evolution">
<div class="mx-auto grid max-w-7xl gap-12 px-5 py-20 lg:grid-cols-12 lg:px-10">
<div class="lg:col-span-5">
<p class="inline-block -rotate-2 border-2 border-black bg-[#FF6FB5] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Évolution des élèves</p>
<h2 id="t-evolution" class="mt-6 max-w-4xl text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Voyez qui progresse, semaine après semaine.</h2>
<p class="mt-6 max-w-2xl text-xl font-medium leading-relaxed">Notes de QCM, étapes de TP réussies, temps passé, compétences du référentiel : tout se suit dans le temps, pour un élève ou pour la classe.</p>
<a href="apercu-suivi.html" class="inline-flex items-center gap-4 border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white shadow-[6px_6px_0px_#ec3013] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#ec3013] hover:shadow-[8px_8px_0px_#000000] mt-10">Ouvrir le suivi de classe <span class="font-mono" aria-hidden="true">→</span></a>
</div>
<figure class="border-4 border-black bg-white p-5 shadow-[10px_10px_0px_#000000] lg:col-span-7">
<figcaption class="flex flex-wrap items-center justify-between gap-3">
<span class="text-xl font-black">Nora Kaci · moyenne aux QCM</span>
<span class="flex gap-4 text-sm font-semibold"><span class="flex items-center gap-2"><span class="h-3 w-3 border-2 border-black bg-[#FF6FB5]"></span>Nora</span><span class="flex items-center gap-2"><span class="w-6 border-t-[3px] border-dashed border-black"></span>Classe</span></span>
</figcaption>
<div class="mt-4"><svg viewBox="0 0 600 240" class="h-auto w-full" role="img" aria-label="Moyenne aux QCM de Nora sur 10 semaines, de 9 à 15,5 sur 20, contre 11 à 13 pour la classe">
<line x1="36" x2="564" y1="204" y2="204" stroke="#000" stroke-opacity=".15" stroke-width="2"/><text x="28" y="208" text-anchor="end" font-family="IBM Plex Mono" font-size="12" font-weight="600">8</text><line x1="36" x2="564" y1="162" y2="162" stroke="#000" stroke-opacity=".15" stroke-width="2"/><text x="28" y="166" text-anchor="end" font-family="IBM Plex Mono" font-size="12" font-weight="600">10</text><line x1="36" x2="564" y1="120" y2="120" stroke="#000" stroke-opacity=".15" stroke-width="2"/><text x="28" y="124" text-anchor="end" font-family="IBM Plex Mono" font-size="12" font-weight="600">12</text><line x1="36" x2="564" y1="78" y2="78" stroke="#000" stroke-opacity=".15" stroke-width="2"/><text x="28" y="82" text-anchor="end" font-family="IBM Plex Mono" font-size="12" font-weight="600">14</text><line x1="36" x2="564" y1="36" y2="36" stroke="#000" stroke-opacity=".15" stroke-width="2"/><text x="28" y="40" text-anchor="end" font-family="IBM Plex Mono" font-size="12" font-weight="600">16</text>
<text x="36" y="228" text-anchor="middle" font-family="IBM Plex Mono" font-size="11" font-weight="600">S1</text><text x="94.66666666666666" y="228" text-anchor="middle" font-family="IBM Plex Mono" font-size="11" font-weight="600">S2</text><text x="153.33333333333331" y="228" text-anchor="middle" font-family="IBM Plex Mono" font-size="11" font-weight="600">S3</text><text x="212" y="228" text-anchor="middle" font-family="IBM Plex Mono" font-size="11" font-weight="600">S4</text><text x="270.66666666666663" y="228" text-anchor="middle" font-family="IBM Plex Mono" font-size="11" font-weight="600">S5</text><text x="329.3333333333333" y="228" text-anchor="middle" font-family="IBM Plex Mono" font-size="11" font-weight="600">S6</text><text x="388" y="228" text-anchor="middle" font-family="IBM Plex Mono" font-size="11" font-weight="600">S7</text><text x="446.6666666666667" y="228" text-anchor="middle" font-family="IBM Plex Mono" font-size="11" font-weight="600">S8</text><text x="505.3333333333333" y="228" text-anchor="middle" font-family="IBM Plex Mono" font-size="11" font-weight="600">S9</text><text x="564" y="228" text-anchor="middle" font-family="IBM Plex Mono" font-size="11" font-weight="600">S10</text>
<polyline points="36.0,141.0 94.7,141.0 153.3,130.5 212.0,130.5 270.7,120.0 329.3,120.0 388.0,109.5 446.7,109.5 505.3,99.0 564.0,99.0" fill="none" stroke="#000" stroke-width="3" stroke-dasharray="8 6"/>
<polyline points="36.0,183.0 94.7,162.0 153.3,141.0 212.0,151.5 270.7,120.0 329.3,99.0 388.0,109.5 446.7,78.0 505.3,57.0 564.0,46.5" fill="none" stroke="#000" stroke-width="5" stroke-linejoin="round"/>
<rect x="30" y="177" width="12" height="12" fill="#FF6FB5" stroke="#000" stroke-width="3"/><rect x="88.66666666666666" y="156" width="12" height="12" fill="#FF6FB5" stroke="#000" stroke-width="3"/><rect x="147.33333333333331" y="135" width="12" height="12" fill="#FF6FB5" stroke="#000" stroke-width="3"/><rect x="206" y="145.5" width="12" height="12" fill="#FF6FB5" stroke="#000" stroke-width="3"/><rect x="264.66666666666663" y="114" width="12" height="12" fill="#FF6FB5" stroke="#000" stroke-width="3"/><rect x="323.3333333333333" y="93" width="12" height="12" fill="#FF6FB5" stroke="#000" stroke-width="3"/><rect x="382" y="103.5" width="12" height="12" fill="#FF6FB5" stroke="#000" stroke-width="3"/><rect x="440.6666666666667" y="72" width="12" height="12" fill="#FF6FB5" stroke="#000" stroke-width="3"/><rect x="499.3333333333333" y="51" width="12" height="12" fill="#FF6FB5" stroke="#000" stroke-width="3"/><rect x="558" y="40.5" width="12" height="12" fill="#FF6FB5" stroke="#000" stroke-width="3"/>
</svg></div>
<p class="mt-2 border-t-2 border-black pt-3 font-semibold">+6,5 points en 10 semaines. Décrochage repéré en S4, rattrapé après le TD assigné.</p>
</figure>
</div>
</section>
<section id="conseil" class="scroll-mt-16 border-b-4 border-black bg-[#C4B5FD]" aria-labelledby="t-conseil">
<div class="mx-auto grid max-w-7xl gap-12 px-5 py-20 lg:grid-cols-12 lg:px-10">
<div class="lg:col-span-5">
<p class="inline-block -rotate-2 border-2 border-black bg-white px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Conseil de classe</p>
<h2 id="t-conseil" class="mt-6 max-w-4xl text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Vos remarques, prêtes pour le conseil.</h2>
<p class="mt-6 max-w-2xl text-xl font-medium leading-relaxed">Notez une observation en deux clics pendant le cours. Au moment du conseil de classe, tout est rangé par élève et par période : notes, progression, assiduité en TP, remarques datées.</p>
<ul class="mt-8 grid gap-3 sm:grid-cols-2"><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>Remarques datées et catégorisées</span></li><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>Visibles par l’équipe et le CPE</span></li><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>Synthèse par trimestre ou semestre</span></li><li class="flex gap-3 border-2 border-black bg-white p-3 font-semibold"><span class="font-black" aria-hidden="true">■</span><span>Export PDF et CSV pour le conseil</span></li></ul>
</div>
<div class="grid content-start gap-6 lg:col-span-7">
<article class="border-4 border-black bg-white p-6 shadow-[8px_8px_0px_#000000]">
<div class="flex flex-wrap items-baseline justify-between gap-3 border-b-4 border-black pb-3"><h3 class="text-2xl font-black">Sami Lefèvre · 1er trimestre</h3><span class="font-mono text-sm font-semibold">QCM 11,2 · TP 14/20 étapes</span></div>
<ol class="mt-4 grid gap-3">
<li class="flex flex-wrap gap-3"><span class="border-2 border-black bg-[#7CF2C0] px-2 text-sm font-extrabold">Progrès</span><span class="font-mono text-sm">14/11</span><span class="font-semibold">Beaucoup plus autonome sur les TP réseau.</span></li>
<li class="flex flex-wrap gap-3"><span class="border-2 border-black bg-[#FFD23F] px-2 text-sm font-extrabold">Travail</span><span class="font-mono text-sm">28/10</span><span class="font-semibold">QCM VLAN non rendu, rattrapé le lendemain.</span></li>
<li class="flex flex-wrap gap-3"><span class="border-2 border-black bg-[#FF6FB5] px-2 text-sm font-extrabold">Comportement</span><span class="font-mono text-sm">03/10</span><span class="font-semibold">A aidé deux camarades bloqués sur le DHCP.</span></li>
</ol>
<div class="mt-5 flex flex-wrap gap-3"><button type="button" class="border-4 border-black bg-black px-4 py-2 font-extrabold text-white">+ Ajouter une remarque</button><button type="button" class="border-4 border-black bg-white px-4 py-2 font-extrabold hover:bg-[#FFD23F]">Exporter pour le conseil</button></div>
</article>
</div>
</div>
</section>
<section id="en-ligne" class="scroll-mt-16 bg-[#13233A] text-white" aria-labelledby="t-en-ligne">
<div class="mx-auto max-w-7xl px-5 py-20 lg:px-10">
<h2 id="t-en-ligne" class="max-w-4xl text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">100 % en ligne. Rien à installer.</h2>
<ul class="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
<li class="border-4 border-white p-6 shadow-[6px_6px_0px_#FFD23F]"><p class="text-xl font-black">Vieux PC et Chromebooks</p><p class="mt-2 font-semibold">Un navigateur récent suffit.</p></li>
<li class="border-4 border-white p-6 shadow-[6px_6px_0px_#7CF2C0]"><p class="text-xl font-black">Réseau du lycée</p><p class="mt-2 font-semibold">Aucun port à ouvrir, ça passe le filtrage.</p></li>
<li class="border-4 border-white p-6 shadow-[6px_6px_0px_#FF6FB5]"><p class="text-xl font-black">À la maison aussi</p><p class="mt-2 font-semibold">L’élève reprend son TP là où il l’a laissé.</p></li>
<li class="border-4 border-white p-6 shadow-[6px_6px_0px_#C4B5FD]"><p class="text-xl font-black">Connexion lente</p><p class="mt-2 font-semibold">Le terminal est léger, il reste fluide.</p></li>
</ul>
</div>
</section>
<script>
(function () {
var journal = document.getElementById('journal-examen'), nb = document.getElementById('nb-incidents'), n = 0, vide = true, dernier = '';
function note(t, c) {
if (t === dernier && Date.now() - note.t < 800) return; dernier = t; note.t = Date.now();
if (vide) { journal.innerHTML = ''; vide = false; }
n++; nb.textContent = n;
var li = document.createElement('li');
li.className = 'flex flex-wrap gap-3 border-2 border-white p-2 ' + c;
li.innerHTML = '<span class="font-semibold">' + new Date().toLocaleTimeString('fr-FR') + '</span><span>' + t + '</span>';
journal.prepend(li);
}
note.t = 0;
document.addEventListener('visibilitychange', function () { if (document.hidden) note('Changement d’onglet', 'bg-[#ec3013]'); else note('Retour sur la copie', 'bg-[#0d192b]'); });
window.addEventListener('blur', function () { note('Fenêtre du navigateur quittée', 'bg-[#ec3013]'); });
document.documentElement.addEventListener('mouseleave', function () { note('Souris sortie de la page', 'bg-[#FF6FB5] text-black'); });
['copy', 'cut', 'paste'].forEach(function (ev) {
document.getElementById('demo-examen').addEventListener(ev, function (e) { e.preventDefault(); note('Tentative de ' + (ev === 'paste' ? 'collage' : 'copie') + ' bloquée', 'bg-[#FFD23F] text-black'); });
});
})();
</script>
<section class="border-t-4 border-black 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-4 border-black bg-black p-8 text-white shadow-[10px_10px_0px_#FF6FB5] sm:p-12 md:grid-cols-[auto_1fr]">
<div class="grid h-40 w-40 -rotate-6 place-items-center rounded-full border-4 border-white bg-[#E6FF3F] text-black shadow-[6px_6px_0px_#FFFFFF]" 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-black leading-none">dB</span></span></div>
<div>
<p class="text-4xl font-black leading-tight tracking-tight sm:text-5xl">Vous devenez le roi du silence grâce à la fonction <span class="bg-[#E6FF3F] px-2 text-black">« Lever la main »</span>.</p>
<p class="mt-6 text-2xl font-bold">Vos élèves n’auront plus que le droit de tousser ou de respirer&nbsp;!</p>
</div>
</div>
</div>
</section>
<section class="border-t-4 border-black bg-white" aria-labelledby="t-pdf">
<div class="mx-auto grid max-w-7xl items-center gap-10 px-5 py-16 lg:grid-cols-12 lg:px-10">
<div class="border-4 border-black bg-white shadow-[10px_10px_0px_#000000] lg:col-span-6"><div class="aspect-[10/7]"><svg viewBox="0 0 600 420" class="h-full w-full" role="img" aria-label="Un smiley qui sourit à côté des cours à télécharger">
<defs><pattern id="pts" width="24" height="24" patternUnits="userSpaceOnUse"><circle cx="6" cy="6" r="3" fill="#000"/></pattern></defs>
<rect x="330" y="0" width="270" height="420" fill="url(#pts)"/>
<path d="M0 50 C150 20 270 80 320 170 L310 250 C230 215 120 240 0 285 Z" fill="#FF3E9A"/>
<path d="M190 262 C225 160 350 80 470 76 C575 72 606 170 566 262 C526 352 404 400 292 380 C210 364 172 318 190 262 Z" fill="#35E0E8"/>
<g transform="translate(486 104) rotate(14)"><path d="M-20 -26 H10 L22 -14 V28 H-20 Z" fill="#fff" stroke="#000" stroke-width="5" stroke-linejoin="round"/><path d="M10 -26 V-14 H22" fill="#FFD23F" stroke="#000" stroke-width="5" stroke-linejoin="round"/><rect x="-26" y="-2" width="38" height="16" fill="#ec3013" stroke="#000" stroke-width="5"/><text x="-7" y="11" text-anchor="middle" font-family="Archivo,sans-serif" font-weight="900" font-size="12" fill="#fff">PDF</text></g>
<path d="M540 190 l7 15 16 2 -12 11 3 16 -14 -8 -14 8 3 -16 -12 -11 16 -2 z" fill="#FFD23F" stroke="#000" stroke-width="4" stroke-linejoin="round"/>
<g transform="rotate(-10 200 170)">
<circle cx="208" cy="178" r="112" fill="#000"/>
<circle cx="200" cy="170" r="112" fill="#FFDD57" stroke="#000" stroke-width="8"/>
<ellipse cx="160" cy="140" rx="13" ry="20" fill="#000"/>
<ellipse cx="240" cy="140" rx="13" ry="20" fill="#000"/>
<path d="M128 192 C150 250 250 250 272 192 Z" fill="#000" stroke="#000" stroke-width="8" stroke-linejoin="round"/>
<path d="M142 198 H258 C254 212 248 218 244 222 H156 C150 216 146 210 142 198 Z" fill="#fff"/>
</g>
<g font-family="Archivo, sans-serif" font-weight="900" transform="rotate(-8 400 350)">
<text x="208" y="352" font-size="40" fill="#FF3E9A" letter-spacing="1">SERVEZ-VOUS&#160;!</text>
<text x="205" y="349" font-size="40" fill="#000" letter-spacing="1">SERVEZ-VOUS&#160;!</text>
<rect x="204" y="362" width="340" height="26" fill="#fff" stroke="#000" stroke-width="3"/><text x="214" y="381" font-size="15" fill="#000" letter-spacing="1">COURS · TD · CORRECTIONS EN PDF</text>
</g>
</svg></div></div>
<div class="lg:col-span-6">
<p class="inline-block -rotate-2 border-2 border-black bg-[#35E0E8] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Gratuit · à télécharger</p>
<h2 id="t-pdf" class="mt-6 text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Tous les cours se téléchargent en PDF.</h2>
<p class="mt-5 text-xl font-medium leading-relaxed">CM complet, TD prêt à imprimer avec ses cases à remplir, correction à part, QCM papier. Pour la classe, pour réviser chez soi ou pour un jour sans réseau.</p>
<ul class="mt-8 grid gap-3 sm:grid-cols-2">
<li><a href="apercu-cours-ipv4-cm.html" class="flex items-center gap-4 border-4 border-black bg-[#FFD23F] p-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:-translate-y-0.5"><svg viewBox="0 0 40 48" class="h-12 w-10 shrink-0" role="img" aria-label="PDF"><path d="M3 3 H27 L37 13 V45 H3 Z" fill="#fff" stroke="#000" stroke-width="3" stroke-linejoin="round"/><path d="M27 3 V13 H37" fill="#FFD23F" stroke="#000" stroke-width="3" stroke-linejoin="round"/><rect x="0" y="22" width="32" height="14" fill="#ec3013" stroke="#000" stroke-width="3"/><text x="16" y="33" text-anchor="middle" font-family="Archivo,sans-serif" font-weight="900" font-size="11" fill="#fff">PDF</text></svg><span>CM complet<span class="block font-mono text-xs font-semibold">Adressage IPv4 · 12 pages</span></span></a></li>
<li><a href="apercu-td-imprimable.html" class="flex items-center gap-4 border-4 border-black bg-[#7CF2C0] p-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:-translate-y-0.5"><svg viewBox="0 0 40 48" class="h-12 w-10 shrink-0" role="img" aria-label="PDF"><path d="M3 3 H27 L37 13 V45 H3 Z" fill="#fff" stroke="#000" stroke-width="3" stroke-linejoin="round"/><path d="M27 3 V13 H37" fill="#FFD23F" stroke="#000" stroke-width="3" stroke-linejoin="round"/><rect x="0" y="22" width="32" height="14" fill="#ec3013" stroke="#000" stroke-width="3"/><text x="16" y="33" text-anchor="middle" font-family="Archivo,sans-serif" font-weight="900" font-size="11" fill="#fff">PDF</text></svg><span>TD à imprimer<span class="block font-mono text-xs font-semibold">Étapes + cases à remplir</span></span></a></li>
<li><a href="apercu-td-imprimable.html#correction" class="flex items-center gap-4 border-4 border-black bg-[#FF6FB5] p-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:-translate-y-0.5"><svg viewBox="0 0 40 48" class="h-12 w-10 shrink-0" role="img" aria-label="PDF"><path d="M3 3 H27 L37 13 V45 H3 Z" fill="#fff" stroke="#000" stroke-width="3" stroke-linejoin="round"/><path d="M27 3 V13 H37" fill="#FFD23F" stroke="#000" stroke-width="3" stroke-linejoin="round"/><rect x="0" y="22" width="32" height="14" fill="#ec3013" stroke="#000" stroke-width="3"/><text x="16" y="33" text-anchor="middle" font-family="Archivo,sans-serif" font-weight="900" font-size="11" fill="#fff">PDF</text></svg><span>Correction<span class="block font-mono text-xs font-semibold">Réservée au prof</span></span></a></li>
<li><a href="apercu-cours.html" class="flex items-center gap-4 border-4 border-black bg-[#C4B5FD] p-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:-translate-y-0.5"><svg viewBox="0 0 40 48" class="h-12 w-10 shrink-0" role="img" aria-label="PDF"><path d="M3 3 H27 L37 13 V45 H3 Z" fill="#fff" stroke="#000" stroke-width="3" stroke-linejoin="round"/><path d="M27 3 V13 H37" fill="#FFD23F" stroke="#000" stroke-width="3" stroke-linejoin="round"/><rect x="0" y="22" width="32" height="14" fill="#ec3013" stroke="#000" stroke-width="3"/><text x="16" y="33" text-anchor="middle" font-family="Archivo,sans-serif" font-weight="900" font-size="11" fill="#fff">PDF</text></svg><span>Tous les cours<span class="block font-mono text-xs font-semibold">Par cursus, du SNT au master</span></span></a></li>
</ul>
</div>
</div>
</section>
</main>
<footer class="border-t-4 border-black bg-white">
<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 class="text-2xl font-black tracking-tight">Paillasse</p>
<p class="mt-3 font-medium">Cours, labs, IDE et examens en ligne, du lycée au master.</p>
</div>
<nav aria-label="Produit"><p class="font-mono text-sm font-semibold uppercase">Produit</p><ul class="mt-4 space-y-2 font-bold"><li><a href="apercu-cockpit.html" class="hover:underline">Cockpit prof</a></li><li><a href="apercu-espace-eleve.html" class="hover:underline">Espace élève</a></li><li><a href="apercu-aide.html" class="hover:underline">Aide et tutoriels</a></li><li><a href="apercu-labs.html" class="hover:underline">Labs</a></li><li><a href="apercu-fonctionnalites.html" class="hover:underline">Fonctionnalités</a></li><li><a href="apercu-cours.html" class="hover:underline">Cours gratuits</a></li><li><a href="apercu-bibliotheque.html" class="hover:underline">Bibliothèque</a></li><li><a href="apercu-ide.html" class="hover:underline">IDE en ligne</a></li><li><a href="apercu-generateur.html" class="hover:underline">Générateur de TD</a></li><li><a href="apercu-lab-web.html" class="hover:underline">Lab web</a></li><li><a href="apercu-tarifs.html" class="hover:underline">Tarifs</a></li><li><a href="apercu-pourquoi.html" class="hover:underline">Pourquoi ce projet ?</a></li></ul></nav>
<nav aria-label="Établissements"><p class="font-mono text-sm font-semibold uppercase">Établissements</p><ul class="mt-4 space-y-2 font-bold"><li><a href="apercu-etablissements.html" class="hover:underline">Équiper une classe</a></li><li><a href="apercu-connexion.html" class="hover:underline">Se connecter</a></li></ul></nav>
<div class="self-start justify-self-start border-2 border-black bg-[#7CF2C0] px-4 py-3 font-mono text-sm font-semibold shadow-[4px_4px_0px_#000000]">● Tous les services fonctionnent</div>
</div>
<div class="border-t-4 border-black bg-white">
<ul class="mx-auto flex max-w-7xl flex-wrap items-center justify-center gap-8 px-5 py-8 lg:px-10" aria-label="Engagements">
<li class="grid h-40 w-40 shrink-0 -rotate-3 place-items-center rounded-full border-4 border-black bg-white text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Hébergé en</span><span class="flex h-7 w-11 border-2 border-black" aria-hidden="true"><span class="flex-1 bg-[#0055A4]"></span><span class="flex-1 bg-white"></span><span class="flex-1 bg-[#EF4135]"></span></span><span class="text-[10px] font-bold leading-tight">France</span></span></li>
<li class="grid h-40 w-40 shrink-0 rotate-3 place-items-center rounded-full border-4 border-black bg-[#FFD23F] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Données</span><span class="font-mono text-3xl font-semibold leading-none">RGPD</span><span class="text-[10px] font-bold leading-tight">minimisées</span></span></li>
<li class="grid h-40 w-40 shrink-0 -rotate-6 place-items-center rounded-full border-4 border-black bg-[#7CF2C0] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Référentiels</span><span class="font-mono text-3xl font-semibold leading-none">20</span><span class="text-[10px] font-bold leading-tight">cursus couverts</span></span></li>
<li class="grid h-40 w-40 shrink-0 rotate-6 place-items-center rounded-full border-4 border-black bg-[#FF6FB5] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Essai</span><span class="font-mono text-3xl font-semibold leading-none">0 €</span><span class="text-[10px] font-bold leading-tight">sans CB</span></span></li>
</ul>
</div>
<div class="border-t-4 border-black bg-[#FFD23F]">
<div class="mx-auto flex max-w-7xl flex-wrap items-center gap-x-6 gap-y-2 px-5 py-4 lg:px-10"><p class="flex-1 font-extrabold">Fait avec <span class="text-[#ec3013]" aria-label="amour">♥</span> par Adam Belkacemi</p><nav aria-label="Informations légales"><ul class="flex flex-wrap gap-x-4 gap-y-1 text-sm font-bold"><li><a href="apercu-legal.html#mentions" class="underline underline-offset-4">Mentions légales</a></li><li><a href="apercu-legal.html#cgu" class="underline underline-offset-4">CGU</a></li><li><a href="apercu-legal.html#confidentialite" class="underline underline-offset-4">Confidentialité et RGPD</a></li><li><a href="apercu-legal.html#cookies" class="underline underline-offset-4">Cookies</a></li><li><a href="apercu-legal.html#sous-traitance" class="underline underline-offset-4">Sous-traitance</a></li></ul></nav></div>
</div>
</footer>
</body>
</html>