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

96 lines
44 KiB
HTML
Raw Permalink 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 · Syllabus</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800;900&family=IBM+Plex+Mono:wght@400;600&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>tailwind.config={theme:{extend:{fontFamily:{display:['Archivo','system-ui','sans-serif'],mono:['"IBM Plex Mono"','monospace']}}}}</script>
<style>
.etoile { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.zigzag { background: linear-gradient(135deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px, linear-gradient(45deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px; }
@keyframes flotte { 0%,100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--r, 0deg)); } }
.flotte { animation: flotte 6s ease-in-out infinite; }
@keyframes clignote { 50% { opacity: 0; } }
.curseur { animation: clignote 1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .flotte, .curseur { animation: none; } }
</style>
<link rel="stylesheet" href="css/syllabus-theme.css">
</head>
<body class="bg-white font-display text-black antialiased">
<header style="position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid #e3e5e8">
<nav aria-label="Navigation principale" style="position:relative;max-width:1200px;margin:0 auto;padding:0 20px;min-height:64px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 40px">
<a href="Apercu%20accueil%20Blade.html" aria-label="Syllabus, accueil" style="display:flex;align-items:center;gap:0;text-decoration:none"><img src="images/logo-syllabus-icone.png" alt="" style="height:32px;width:auto;display:block"><span style="font-family:Mulish,system-ui,sans-serif;font-weight:800;font-size:19px;color:#111827;letter-spacing:-0.01em;margin-left:-14px;position:relative">Syllabus</span></a>
<ul style="margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;flex:1;line-height:1.5"><li><details class="group"><summary aria-current="page" style="cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;height:36px;margin:-6px -12px;padding:0 12px;border-radius:999px;line-height:1.5;font-size:15px;font-weight:600;color:#0b1220" class="hover:bg-[#f1f3f4] group-open:bg-[#e8f0fe] group-open:text-[#0b57d0] aria-[current=page]:text-[#0b57d0] [&::-webkit-details-marker]:hidden">Fonctionnalités<svg aria-hidden="true" viewBox="0 0 16 16" width="16" height="16" class="transition-transform duration-200 group-open:rotate-180" style="flex:none;opacity:.7"><path d="M4 6l4 4 4-4" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></summary>
<div style="position:absolute;left:20px;right:20px;top:100%;margin-top:4px;z-index:50;max-width:1160px;margin-left:auto;margin-right:auto;box-sizing:border-box;max-height:calc(100vh - 90px);overflow:auto;border-radius:20px;background:#fff;border:1px solid #e3e5e8;box-shadow:0 24px 48px -16px rgba(15,23,42,.22)">
<div class="grid grid-cols-2 sm:grid-cols-3 min-[1100px]:grid-cols-5 [&>div:last-child]:col-span-2 min-[1100px]:[&>div:last-child]:col-span-1" style="gap:1px;background:#e3e5e8"><div style="padding:22px 20px 20px;min-width:0;background:#fff"><p style="margin:0;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:800;color:#0b1220"><span aria-hidden="true" style="flex:none;width:10px;height:10px;border-radius:3px;background:#0b57d0"></span>Piloter la classe</p><p style="margin:4px 0 0 20px;min-height:32px;font-size:12px;line-height:16px;font-weight:500;color:#5f6368">En direct et au quotidien</p><ul style="margin:10px 0 0 20px;padding:12px 0 0;border-top:1px solid #f1f3f4;list-style:none;display:grid;gap:2px"><li><a href="apercu-ressource.html?outil=cockpit" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Tableau de bord prof</a></li><li><a href="apercu-ressource.html?outil=visio" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Visio de classe</a></li><li><a href="apercu-ressource.html?outil=espace-eleve" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Espace élève</a></li><li><a href="apercu-ressource.html?outil=fiche-eleve" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Fiche élève</a></li><li><a href="apercu-ressource.html?outil=messagerie" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Messagerie</a></li></ul></div><div style="padding:22px 20px 20px;min-width:0;background:#fff"><p style="margin:0;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:800;color:#0b1220"><span aria-hidden="true" style="flex:none;width:10px;height:10px;border-radius:3px;background:#137333"></span>Apprendre</p><p style="margin:4px 0 0 20px;min-height:32px;font-size:12px;line-height:16px;font-weight:500;color:#5f6368">Cours, TP et code</p><ul style="margin:10px 0 0 20px;padding:12px 0 0;border-top:1px solid #f1f3f4;list-style:none;display:grid;gap:2px"><li><a href="apercu-ressource.html?outil=cours" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Cours gratuits</a></li><li><a href="apercu-ressource.html?outil=labs" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">TP sur machine Linux</a></li><li><a href="apercu-ressource.html?outil=lab-web" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Lab web</a></li><li><a href="apercu-ressource.html?outil=ide" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Éditeur de code en ligne</a></li><li><a href="apercu-ressource.html?outil=maison" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Ressources à la maison</a></li></ul></div><div style="padding:22px 20px 20px;min-width:0;background:#fff"><p style="margin:0;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:800;color:#0b1220"><span aria-hidden="true" style="flex:none;width:10px;height:10px;border-radius:3px;background:#b06000"></span>Préparer</p><p style="margin:4px 0 0 20px;min-height:32px;font-size:12px;line-height:16px;font-weight:500;color:#5f6368">Prêt à projeter ou imprimer</p><ul style="margin:10px 0 0 20px;padding:12px 0 0;border-top:1px solid #f1f3f4;list-style:none;display:grid;gap:2px"><li><a href="apercu-ressource.html?outil=bibliotheque" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Bibliothèque du prof</a></li><li><a href="apercu-ressource.html?outil=banque" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Banque de sujets</a></li><li><a href="apercu-ressource.html?outil=generateur" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Générateur de TD</a></li><li><a href="apercu-ressource.html?outil=td-imprimable" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">TD à imprimer</a></li></ul></div><div style="padding:22px 20px 20px;min-width:0;background:#fff"><p style="margin:0;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:800;color:#0b1220"><span aria-hidden="true" style="flex:none;width:10px;height:10px;border-radius:3px;background:#c5221f"></span>Évaluer</p><p style="margin:4px 0 0 20px;min-height:32px;font-size:12px;line-height:16px;font-weight:500;color:#5f6368">Quiz, examens, devoirs</p><ul style="margin:10px 0 0 20px;padding:12px 0 0;border-top:1px solid #f1f3f4;list-style:none;display:grid;gap:2px"><li><a href="apercu-ressource.html?outil=quiz" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Quiz flash</a></li><li><a href="apercu-ressource.html?outil=sujet" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Créer un sujet</a></li><li><a href="apercu-ressource.html?outil=devoirs" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Devoirs maison</a></li><li><a href="apercu-ressource.html?outil=correction" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Corriger les copies</a></li><li><a href="apercu-ressource.html?outil=export" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Export Pronote / ENT</a></li></ul></div><div style="padding:22px 20px 20px;min-width:0;background:#fff"><p style="margin:0;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:800;color:#0b1220"><span aria-hidden="true" style="flex:none;width:10px;height:10px;border-radius:3px;background:#8430ce"></span>Établissement</p><p style="margin:4px 0 0 20px;min-height:32px;font-size:12px;line-height:16px;font-weight:500;color:#5f6368">Vie scolaire, direction, DSI</p><ul style="margin:10px 0 0 20px;padding:12px 0 0;border-top:1px solid #f1f3f4;list-style:none;display:grid;gap:2px"><li><a href="apercu-ressource.html?outil=vie-scolaire" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Vie scolaire</a></li><li><a href="apercu-ressource.html?outil=cohortes" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Suivi des cohortes</a></li><li><a href="apercu-ressource.html?outil=espace-etablissement" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Espace établissement</a></li><li><a href="apercu-ressource.html?outil=academie" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Académie</a></li><li><a href="apercu-ressource.html?outil=integration" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Intégration et sécurité</a></li></ul></div></div>
<div style="position:sticky;bottom:0;padding:14px 24px;border-top:1px solid #e3e5e8;background:#f8f9fa;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px"><span style="font-size:14px;font-weight:500;color:#5f6368">24 outils, chacun avec sa présentation et sa démo</span><a href="apercu-fonctionnalites.html" style="font-size:15px;font-weight:700;color:#0b57d0;text-decoration:none">Voir toutes les fonctionnalités →</a></div>
</div></details></li><li><a href="apercu-cours.html" style="display:inline-flex;align-items:center;height:24px;line-height:1.5;font-size:15px;font-weight:600;color:#0b1220;text-decoration:none" class="hover:text-[#0b57d0] aria-[current=page]:text-[#0b57d0]">Cours</a></li><li><a href="apercu-tarifs.html" style="display:inline-flex;align-items:center;height:24px;line-height:1.5;font-size:15px;font-weight:600;color:#0b1220;text-decoration:none" class="hover:text-[#0b57d0] aria-[current=page]:text-[#0b57d0]">Tarifs</a></li></ul>
<div style="display:flex;align-items:center;gap:20px">
<a href="apercu-connexion.html" style="font-size:15px;font-weight:600;color:#0b1220;text-decoration:none" class="hover:text-[#0b57d0]">Se connecter</a>
<a href="apercu-inscription.html" style="display:inline-flex;align-items:center;height:40px;padding:0 20px;border-radius:999px;background:#0b57d0;color:#fff;font-size:15px;font-weight:700;text-decoration:none">Créer une classe</a>
</div>
</nav>
</header>
<main style="background:#fff"><section style="padding:112px 20px 96px;background:#fff"><div style="max-width:900px;margin:0 auto"><p style="margin:0;font-size:15px;font-weight:700;color:#0b57d0;text-align:center">Fonctionnalités</p><h1 style="margin:20px 0 0;font-size:clamp(40px,6vw,72px);line-height:1.04;font-weight:800;letter-spacing:-0.03em;color:#0b1220;text-align:center;text-wrap:balance">Tout ce qu’il faut pour une classe, en ligne.</h1><p style="margin:24px auto 0;max-width:660px;font-size:20px;line-height:1.6;font-weight:500;color:#3c4043;text-align:center;text-wrap:pretty">Cours, TP sur machine Linux, éditeur de code, évaluations et suivi des élèves, dans un seul site. Choisissez un outil pour voir à quoi il sert, puis essayez sa démo.</p><div style="margin-top:44px;display:flex;flex-direction:column;align-items:center;gap:14px"><a href="apercu-inscription.html" style="display:inline-flex;align-items:center;height:56px;padding:0 32px;border-radius:999px;background:#0b57d0;color:#fff;font-size:17px;font-weight:700;text-decoration:none">Créer une classe gratuite</a><p style="margin:0;font-size:14px;font-weight:600;color:#5f6368">Sans carte bancaire</p></div></div></section><section id="pourquoi-outil" class="relative overflow-hidden border-b border-[#e3e5e8] 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"><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 border border-[#e3e5e8] rounded-2xl bg-[#E6FF3F]"></span><span class="absolute right-10 top-10 h-8 w-8 rounded-full border border-[#e3e5e8] rounded-2xl bg-[#fce8e6]"></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 border border-[#dadce0] rounded-lg bg-[#fce8e6] px-3 py-1 text-sm font-bold">Pourquoi un tel outil&nbsp;?</p>
<h2 id="t-interet" class="mt-6 text-5xl font-extrabold leading-[0.95] tracking-tight 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-extrabold">suivre chaque élève individuellement</strong> devient presque impossible. Un <strong class="font-extrabold">é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>Syllabus <strong class="font-extrabold">surveille tout, sans être intrusif</strong>. Le <strong class="font-extrabold">QCM de début d’heure</strong>, celui qui suit la <strong class="font-extrabold">lecture du cours</strong>, les <strong class="font-extrabold">TP</strong>, les <strong class="font-extrabold">devoirs et exercices maison</strong> : chaque trace remonte au prof. Il voit rapidement <strong class="font-extrabold">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-extrabold">supervision bienveillante et naturelle</strong>, qui ne remplace pas le regard du prof mais l’aide à savoir <strong class="font-extrabold">où concentrer ses efforts</strong>. Tout remonte dans le <strong class="font-extrabold">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-extrabold">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-extrabold">réfléchir un tout petit peu plus avant de vous appeler</strong>. Et souvent, ils vous <strong class="font-extrabold">évitent les questions triviales</strong>.</p>
<p>Et dans l’autre sens, <strong class="font-extrabold">l’élève en excellence peut s’épanouir</strong>. Il aborde des notions plus avancées, avec une difficulté plus forte, <strong class="font-extrabold">sans prendre d’avance sur le programme</strong> : il explore des notions connexes qui développent sa <strong class="font-extrabold">culture générale</strong>.</p>
<p class="relative mt-4 inline-block self-start border border-[#e3e5e8] rounded-2xl bg-black px-5 py-4 text-3xl font-extrabold leading-tight text-white">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 border-[#e3e5e8] rounded-2xl bg-[#fef7e0] p-6">
<span class="absolute -top-4 right-5 border border-[#dadce0] rounded-lg bg-white px-2 py-0.5 font-mono text-xs font-semibold">Alerte douce</span>
<h3 class="text-2xl font-extrabold">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 border-[#e3e5e8] pt-3 font-extrabold">→ Premier rang, notion à réexpliquer, suivi plus régulier.</p>
</article>
<article class="relative border border-[#e3e5e8] rounded-2xl bg-[#e6f4ea] p-6">
<span class="absolute -top-4 left-5 border border-[#dadce0] rounded-lg bg-white px-2 py-0.5 font-mono text-xs font-semibold">Excellence</span>
<h3 class="text-2xl font-extrabold">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 border-[#e3e5e8] 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 border-[#e3e5e8] rounded-2xl bg-[#eef0fd] p-6">
<span class="absolute -top-4 right-5 border border-[#dadce0] rounded-lg bg-white px-2 py-0.5 font-mono text-xs font-semibold">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-extrabold">Un indice se débloque</h3></div>
<ol class="mt-4 grid gap-2 font-mono text-sm font-semibold"><li class="border border-[#dadce0] rounded-lg bg-white px-3 py-2">Tentative 1 · <span class="text-[#b3001b]">échec</span></li><li class="border border-[#dadce0] rounded-lg bg-white px-3 py-2">Tentative 3 · 💡 Indice 1 : regarde la commande <strong>ip addr</strong></li><li class="border border-[#dadce0] rounded-lg 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 border-[#e3e5e8] pt-3 font-extrabold">→ L’élève cherche d’abord. Vous gardez votre temps pour les vraies questions.</p>
</article>
</div>
</div>
</section><section style="padding:72px 20px;background:#fff"><div style="max-width:1080px;margin:0 auto"><div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:40px 48px"><div><h2 style="margin:0;font-size:32px;font-weight:800;letter-spacing:-0.02em;color:#0b1220">Piloter</h2><p style="margin:12px 0 0;font-size:16px;line-height:1.6;font-weight:500;color:#3c4043">Suivre la classe, l’établissement et le territoire.</p></div><ul style="grid-column:span 2;margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px 32px"><li><a href="apercu-ressource.html?outil=cockpit" style="display:block;padding:18px 0;border-top:1px solid #e3e5e8;text-decoration:none"><span style="display:block;font-size:18px;font-weight:800;color:#0b1220">Tableau de bord prof</span><span style="display:block;margin-top:6px;font-size:15px;line-height:1.55;font-weight:500;color:#3c4043">Toute la classe sur un seul écran : qui avance, qui bloque, qui a levé la main.</span></a></li><li><a href="apercu-ressource.html?outil=visio" style="display:block;padding:18px 0;border-top:1px solid #e3e5e8;text-decoration:none"><span style="display:block;font-size:18px;font-weight:800;color:#0b1220">Visio de classe</span><span style="display:block;margin-top:6px;font-size:15px;line-height:1.55;font-weight:500;color:#3c4043">Les élèves arrivent en sourdine, lèvent la main et ne parlent que quand vous leur donnez la parole.</span></a></li><li><a href="apercu-ressource.html?outil=espace-eleve" style="display:block;padding:18px 0;border-top:1px solid #e3e5e8;text-decoration:none"><span style="display:block;font-size:18px;font-weight:800;color:#0b1220">Espace élève</span><span style="display:block;margin-top:6px;font-size:15px;line-height:1.55;font-weight:500;color:#3c4043">Un calendrier, les devoirs à rendre, les examens à venir et de quoi s’entraîner.</span></a></li><li><a href="apercu-ressource.html?outil=vie-scolaire" style="display:block;padding:18px 0;border-top:1px solid #e3e5e8;text-decoration:none"><span style="display:block;font-size:18px;font-weight:800;color:#0b1220">Vie scolaire</span><span style="display:block;margin-top:6px;font-size:15px;line-height:1.55;font-weight:500;color:#3c4043">L’assiduité et les signaux de décrochage de tout l’établissement, classe par classe.</span></a></li><li><a href="apercu-ressource.html?outil=academie" style="display:block;padding:18px 0;border-top:1px solid #e3e5e8;text-decoration:none"><span style="display:block;font-size:18px;font-weight:800;color:#0b1220">Académie</span><span style="display:block;margin-top:6px;font-size:15px;line-height:1.55;font-weight:500;color:#3c4043">Une vue agrégée de plusieurs établissements, sans aucune donnée nominative.</span></a></li><li><a href="apercu-ressource.html?outil=cohortes" style="display:block;padding:18px 0;border-top:1px solid #e3e5e8;text-decoration:none"><span style="display:block;font-size:18px;font-weight:800;color:#0b1220">Suivi des cohortes</span><span style="display:block;margin-top:6px;font-size:15px;line-height:1.55;font-weight:500;color:#3c4043">La progression d’une promotion entière, semestre après semestre.</span></a></li><li><a href="apercu-ressource.html?outil=espace-etablissement" style="display:block;padding:18px 0;border-top:1px solid #e3e5e8;text-decoration:none"><span style="display:block;font-size:18px;font-weight:800;color:#0b1220">Espace établissement</span><span style="display:block;margin-top:6px;font-size:15px;line-height:1.55;font-weight:500;color:#3c4043">Licences, devis, factures et conventions au même endroit.</span></a></li><li><a href="apercu-ressource.html?outil=integration" style="display:block;padding:18px 0;border-top:1px solid #e3e5e8;text-decoration:none"><span style="display:block;font-size:18px;font-weight:800;color:#0b1220">Intégration et sécurité</span><span style="display:block;margin-top:6px;font-size:15px;line-height:1.55;font-weight:500;color:#3c4043">SSO, API, hébergement et conformité : ce que votre DSI doit vérifier.</span></a></li></ul></div></div></section><section style="padding:72px 20px;background:#f8f9fa"><div style="max-width:1080px;margin:0 auto"><div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:40px 48px"><div><h2 style="margin:0;font-size:32px;font-weight:800;letter-spacing:-0.02em;color:#0b1220">Apprendre</h2><p style="margin:12px 0 0;font-size:16px;line-height:1.6;font-weight:500;color:#3c4043">Cours, TP sur machine et code dans le navigateur.</p></div><ul style="grid-column:span 2;margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px 32px"><li><a href="apercu-ressource.html?outil=cours" style="display:block;padding:18px 0;border-top:1px solid #e3e5e8;text-decoration:none"><span style="display:block;font-size:18px;font-weight:800;color:#0b1220">Cours gratuits</span><span style="display:block;margin-top:6px;font-size:15px;line-height:1.55;font-weight:500;color:#3c4043">Des cours complets alignés sur les référentiels, du lycée au master.</span></a></li><li><a href="apercu-ressource.html?outil=labs" style="display:block;padding:18px 0;border-top:1px solid #e3e5e8;text-decoration:none"><span style="display:block;font-size:18px;font-weight:800;color:#0b1220">TP sur machine Linux</span><span style="display:block;margin-top:6px;font-size:15px;line-height:1.55;font-weight:500;color:#3c4043">Une vraie machine Linux par élève, dans le navigateur, corrigée automatiquement.</span></a></li><li><a href="apercu-ressource.html?outil=lab-web" style="display:block;padding:18px 0;border-top:1px solid #e3e5e8;text-decoration:none"><span style="display:block;font-size:18px;font-weight:800;color:#0b1220">Lab web</span><span style="display:block;margin-top:6px;font-size:15px;line-height:1.55;font-weight:500;color:#3c4043">Un terminal et un navigateur reliés : on configure un serveur et on voit le résultat.</span></a></li><li><a href="apercu-ressource.html?outil=ide" style="display:block;padding:18px 0;border-top:1px solid #e3e5e8;text-decoration:none"><span style="display:block;font-size:18px;font-weight:800;color:#0b1220">Éditeur de code en ligne</span><span style="display:block;margin-top:6px;font-size:15px;line-height:1.55;font-weight:500;color:#3c4043">Python, SQL, web et Bash dans le navigateur, avec des exercices testés automatiquement.</span></a></li><li><a href="apercu-ressource.html?outil=maison" style="display:block;padding:18px 0;border-top:1px solid #e3e5e8;text-decoration:none"><span style="display:block;font-size:18px;font-weight:800;color:#0b1220">Ressources à la maison</span><span style="display:block;margin-top:6px;font-size:15px;line-height:1.55;font-weight:500;color:#3c4043">Pour aller plus loin chez soi : exercices, défis et plateformes reconnues.</span></a></li></ul></div></div></section><section style="padding:72px 20px;background:#fff"><div style="max-width:1080px;margin:0 auto"><div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:40px 48px"><div><h2 style="margin:0;font-size:32px;font-weight:800;letter-spacing:-0.02em;color:#0b1220">Préparer</h2><p style="margin:12px 0 0;font-size:16px;line-height:1.6;font-weight:500;color:#3c4043">Ressources prêtes à projeter, imprimer ou adapter.</p></div><ul style="grid-column:span 2;margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px 32px"><li><a href="apercu-ressource.html?outil=bibliotheque" style="display:block;padding:18px 0;border-top:1px solid #e3e5e8;text-decoration:none"><span style="display:block;font-size:18px;font-weight:800;color:#0b1220">Bibliothèque du prof</span><span style="display:block;margin-top:6px;font-size:15px;line-height:1.55;font-weight:500;color:#3c4043">Tous les chapitres du référentiel, avec leurs cours, QCM, TD et TP.</span></a></li><li><a href="apercu-ressource.html?outil=banque" style="display:block;padding:18px 0;border-top:1px solid #e3e5e8;text-decoration:none"><span style="display:block;font-size:18px;font-weight:800;color:#0b1220">Banque de sujets</span><span style="display:block;margin-top:6px;font-size:15px;line-height:1.55;font-weight:500;color:#3c4043">Des centaines de questions et de sujets d’examen, à combiner et à adapter.</span></a></li><li><a href="apercu-ressource.html?outil=generateur" style="display:block;padding:18px 0;border-top:1px solid #e3e5e8;text-decoration:none"><span style="display:block;font-size:18px;font-weight:800;color:#0b1220">Générateur de TD</span><span style="display:block;margin-top:6px;font-size:15px;line-height:1.55;font-weight:500;color:#3c4043">Des exercices de calcul générés à l’infini : conversions, sous-réseaux, droits.</span></a></li><li><a href="apercu-ressource.html?outil=td-imprimable" style="display:block;padding:18px 0;border-top:1px solid #e3e5e8;text-decoration:none"><span style="display:block;font-size:18px;font-weight:800;color:#0b1220">TD à imprimer</span><span style="display:block;margin-top:6px;font-size:15px;line-height:1.55;font-weight:500;color:#3c4043">Des fiches papier avec les étapes à suivre, des cases à remplir et la correction séparée.</span></a></li></ul></div></div></section><section style="padding:72px 20px;background:#f8f9fa"><div style="max-width:1080px;margin:0 auto"><div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:40px 48px"><div><h2 style="margin:0;font-size:32px;font-weight:800;letter-spacing:-0.02em;color:#0b1220">Évaluer</h2><p style="margin:12px 0 0;font-size:16px;line-height:1.6;font-weight:500;color:#3c4043">Quiz, examens, devoirs et correction.</p></div><ul style="grid-column:span 2;margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px 32px"><li><a href="apercu-ressource.html?outil=quiz" style="display:block;padding:18px 0;border-top:1px solid #e3e5e8;text-decoration:none"><span style="display:block;font-size:18px;font-weight:800;color:#0b1220">Quiz flash</span><span style="display:block;margin-top:6px;font-size:15px;line-height:1.55;font-weight:500;color:#3c4043">Un quiz projeté en début d’heure, auquel les élèves répondent depuis leur téléphone ou leur PC.</span></a></li><li><a href="apercu-ressource.html?outil=sujet" style="display:block;padding:18px 0;border-top:1px solid #e3e5e8;text-decoration:none"><span style="display:block;font-size:18px;font-weight:800;color:#0b1220">Créer un sujet</span><span style="display:block;margin-top:6px;font-size:15px;line-height:1.55;font-weight:500;color:#3c4043">Un sujet d’examen en cinq étapes : cadre, questions, barème, surveillance, publication.</span></a></li><li><a href="apercu-ressource.html?outil=devoirs" style="display:block;padding:18px 0;border-top:1px solid #e3e5e8;text-decoration:none"><span style="display:block;font-size:18px;font-weight:800;color:#0b1220">Devoirs maison</span><span style="display:block;margin-top:6px;font-size:15px;line-height:1.55;font-weight:500;color:#3c4043">Programmez un devoir, recevez les rendus, corrigez en ligne.</span></a></li><li><a href="apercu-ressource.html?outil=correction" style="display:block;padding:18px 0;border-top:1px solid #e3e5e8;text-decoration:none"><span style="display:block;font-size:18px;font-weight:800;color:#0b1220">Corriger les copies</span><span style="display:block;margin-top:6px;font-size:15px;line-height:1.55;font-weight:500;color:#3c4043">Une pré-correction selon votre barème, que vous validez et commentez.</span></a></li></ul></div></div></section><section style="padding:72px 20px;background:#fff"><div style="max-width:1080px;margin:0 auto"><div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:40px 48px"><div><h2 style="margin:0;font-size:32px;font-weight:800;letter-spacing:-0.02em;color:#0b1220">Suivre</h2><p style="margin:12px 0 0;font-size:16px;line-height:1.6;font-weight:500;color:#3c4043">Le suivi individuel et les échanges.</p></div><ul style="grid-column:span 2;margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px 32px"><li><a href="apercu-ressource.html?outil=fiche-eleve" style="display:block;padding:18px 0;border-top:1px solid #e3e5e8;text-decoration:none"><span style="display:block;font-size:18px;font-weight:800;color:#0b1220">Fiche élève</span><span style="display:block;margin-top:6px;font-size:15px;line-height:1.55;font-weight:500;color:#3c4043">L’historique, les compétences et les observations d’un élève sur une seule page.</span></a></li><li><a href="apercu-ressource.html?outil=messagerie" style="display:block;padding:18px 0;border-top:1px solid #e3e5e8;text-decoration:none"><span style="display:block;font-size:18px;font-weight:800;color:#0b1220">Messagerie</span><span style="display:block;margin-top:6px;font-size:15px;line-height:1.55;font-weight:500;color:#3c4043">Des échanges encadrés entre enseignant, élève et vie scolaire.</span></a></li><li><a href="apercu-ressource.html?outil=export" style="display:block;padding:18px 0;border-top:1px solid #e3e5e8;text-decoration:none"><span style="display:block;font-size:18px;font-weight:800;color:#0b1220">Export Pronote / ENT</span><span style="display:block;margin-top:6px;font-size:15px;line-height:1.55;font-weight:500;color:#3c4043">Notes, présences et appréciations prêtes à charger dans votre logiciel de vie scolaire.</span></a></li></ul></div></div></section><section style="padding:112px 20px;background:#fff"><div style="max-width:880px;margin:0 auto"><div style="display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center;padding:40px;border-radius:24px;background:#f8f9fa"><p style="margin:0;font-size:56px;font-weight:800;letter-spacing:-0.03em;color:#0b57d0">−40&nbsp;dB</p><div><p style="margin:0;font-size:22px;font-weight:800;color:#0b1220">Vous devenez le roi du silence grâce à la fonction «&nbsp;Lever la main&nbsp;».</p><p style="margin:10px 0 0;font-size:17px;line-height:1.6;font-weight:500;color:#3c4043">Vos élèves n’auront plus que le droit de tousser ou de respirer !</p></div></div></div></section><section style="padding:96px 20px 128px;border-top:1px solid #e3e5e8"><div style="max-width:760px;margin:0 auto;text-align:center"><h2 style="margin:12px 0 0;font-size:clamp(30px,4vw,44px);line-height:1.1;font-weight:800;letter-spacing:-0.02em;color:#0b1220;text-align:center;text-wrap:balance">Tous les cours se téléchargent en PDF.</h2><p style="margin:24px auto 0;max-width:660px;font-size:20px;line-height:1.6;font-weight:500;color:#3c4043;text-align:center;text-wrap:pretty">CM complet, TD prêt à imprimer avec ses cases à remplir, correction à part, QCM papier.</p><div style="margin-top:44px;display:flex;flex-direction:column;align-items:center;gap:14px"><a href="apercu-inscription.html" style="display:inline-flex;align-items:center;height:56px;padding:0 32px;border-radius:999px;background:#0b57d0;color:#fff;font-size:17px;font-weight:700;text-decoration:none">Créer une classe gratuite</a><p style="margin:0;font-size:14px;font-weight:600;color:#5f6368">Ou <a href="apercu-cours.html" style="color:#0b57d0;font-weight:700;text-decoration:none">voir les cours gratuits</a></p></div></div></section></main>
<footer style="background:#f8f9fa;border-top:1px solid #e3e5e8;font-family:Mulish,system-ui,sans-serif">
<div class="mx-auto grid max-w-7xl gap-10 px-5 py-14 sm:grid-cols-2 lg:grid-cols-4 lg:px-10">
<div>
<p style="margin:0;font-size:18px;font-weight:800;color:#0b1220">Syllabus</p>
<p style="margin:10px 0 0;font-size:14px;line-height:1.6;font-weight:500;color:#5f6368">Cours, labs, IDE et examens en ligne, du lycée au master.</p>
</div>
<nav aria-label="Produit"><p style="margin:0;font-size:13px;font-weight:800;color:#0b1220">Produit</p><ul style="margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px"><li><a href="apercu-fonctionnalites.html" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Fonctionnalités</a></li><li><a href="apercu-cours.html" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Cours gratuits</a></li><li><a href="apercu-lab-essai.html" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Essayer un lab</a></li><li><a href="apercu-tarifs.html" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Tarifs</a></li></ul></nav><nav aria-label="Outils"><p style="margin:0;font-size:13px;font-weight:800;color:#0b1220">Outils</p><ul style="margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px"><li><a href="apercu-ressource.html?outil=cockpit" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Tableau de bord prof</a></li><li><a href="apercu-ressource.html?outil=labs" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">TP sur machine Linux</a></li><li><a href="apercu-ressource.html?outil=ide" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Éditeur de code</a></li><li><a href="apercu-ressource.html?outil=quiz" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Quiz flash</a></li><li><a href="apercu-ressource.html?outil=sujet" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Examens</a></li><li><a href="apercu-ressource.html?outil=bibliotheque" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Bibliothèque du prof</a></li></ul></nav><nav aria-label="Établissements"><p style="margin:0;font-size:13px;font-weight:800;color:#0b1220">Établissements</p><ul style="margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px"><li><a href="apercu-etablissements.html" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Équiper une classe</a></li><li><a href="apercu-ressource.html?outil=vie-scolaire" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Vie scolaire</a></li><li><a href="apercu-ressource.html?outil=espace-etablissement" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Licences et factures</a></li><li><a href="apercu-ressource.html?outil=integration" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Intégration et sécurité</a></li></ul></nav><nav aria-label="Syllabus"><p style="margin:0;font-size:13px;font-weight:800;color:#0b1220">Syllabus</p><ul style="margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px"><li><a href="apercu-aide.html" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Aide et tutoriels</a></li><li><a href="apercu-legal.html" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Mentions légales et RGPD</a></li></ul></nav>
<p style="margin:0;align-self:start;font-size:14px;font-weight:600;color:#5f6368"><span style="color:#137333">●</span> Tous les services fonctionnent</p>
</div>
<div style="border-top:1px solid #e3e5e8"><ul aria-label="Engagements" style="max-width:1200px;margin:0 auto;padding:24px 20px;list-style:none;display:flex;flex-wrap:wrap;gap:12px 40px"><li style="font-size:14px;font-weight:700;color:#0b1220">Hébergé en France <span style="font-weight:500;color:#5f6368">· Paris</span></li><li style="font-size:14px;font-weight:700;color:#0b1220">RGPD <span style="font-weight:500;color:#5f6368">· données minimisées</span></li><li style="font-size:14px;font-weight:700;color:#0b1220">20 cursus <span style="font-weight:500;color:#5f6368">· du lycée au master</span></li><li style="font-size:14px;font-weight:700;color:#0b1220">0 € <span style="font-weight:500;color:#5f6368">· sans carte bancaire</span></li></ul>
</div>
<div style="border-top:1px solid #e3e5e8">
<div class="mx-auto flex max-w-7xl flex-wrap items-center justify-center gap-x-6 gap-y-2 px-5 py-4 lg:px-10"><nav aria-label="Informations légales"><ul class="flex flex-wrap justify-center gap-x-5 gap-y-1" style="margin:0;padding:0;list-style:none;font-size:14px;font-weight:500"><li><a href="apercu-legal.html#mentions" style="color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Mentions légales</a></li><li><a href="apercu-legal.html#cgu" style="color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">CGU</a></li><li><a href="apercu-legal.html#confidentialite" style="color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Confidentialité et RGPD</a></li><li><a href="apercu-legal.html#cookies" style="color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Cookies</a></li><li><a href="apercu-legal.html#sous-traitance" style="color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Sous-traitance</a></li></ul></nav></div>
</div>
</footer>
</body>
</html>