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

421 lines
86 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>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>