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

188 lines
45 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>Tarifs · 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" 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" 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">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 class="relative mx-auto grid max-w-7xl items-center gap-10 px-5 pb-16 pt-14 lg:grid-cols-12 lg:px-10 lg:pt-20">
<div class="lg:col-span-7">
<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]">Tarifs HT</p>
<h1 class="mt-8 text-6xl font-black leading-[0.9] tracking-tighter sm:text-7xl">Les cours sont gratuits. Les VM coûtent moins qu’un manuel.</h1>
<p class="mt-8 max-w-2xl text-xl font-medium leading-relaxed">Une licence Paillasse pour un élève coûte 24 € par an : QCM, TP sur VM, suivi et mode examen compris.</p>
</div>
<figure class="mx-auto w-full max-w-md lg:col-span-5 lg:max-w-none"><svg viewBox="0 0 500 470" class="h-auto w-full" role="img" aria-label="Un ordinateur portable, avec une pièce de 0 €, un billet gratuit et une carte bancaire barrée">
<defs><pattern id="tp" width="22" height="22" patternUnits="userSpaceOnUse"><circle cx="5" cy="5" r="2.6" fill="#000"/></pattern></defs>
<rect x="290" y="270" width="210" height="200" fill="url(#tp)"/><rect x="0" y="330" width="150" height="140" fill="url(#tp)"/>
<circle cx="118" cy="120" r="64" fill="#FF3E9A"/>
<g transform="translate(190 300) rotate(-10) scale(.5)">
<rect x="-118" y="-100" width="236" height="150" fill="#000" transform="translate(8 8)"/>
<rect x="-118" y="-100" width="236" height="150" fill="#13233A" stroke="#000" stroke-width="5" stroke-linejoin="round" stroke-linecap="round"/>
<rect x="-104" y="-86" width="208" height="122" fill="#35E0E8" stroke="#000" stroke-width="4"/>
<path d="M-80 -60 h60 M-80 -40 h110 M-80 -20 h80 M-80 0 h120" stroke="#000" stroke-width="8" stroke-linecap="round"/>
<path d="M-150 50 H150 L136 72 H-136 Z" fill="#fff" stroke="#000" stroke-width="5" stroke-linejoin="round" stroke-linecap="round"/><rect x="-26" y="54" width="52" height="7" fill="#000"/>
</g>
<g transform="translate(110 120) rotate(-14)"><circle r="44" fill="#000" transform="translate(5 5)"/><circle r="44" fill="#FFD23F" stroke="#000" stroke-width="5" stroke-linejoin="round" stroke-linecap="round"/><circle r="33" fill="none" stroke="#000" stroke-width="3" stroke-dasharray="4 5"/><text y="12" text-anchor="middle" font-family="IBM Plex Mono,monospace" font-weight="600" font-size="32" fill="#000">0€</text></g>
<g transform="translate(360 405) rotate(8)"><rect x="-74" y="-36" width="148" height="72" fill="#000" transform="translate(6 6)"/><rect x="-74" y="-36" width="148" height="72" fill="#7CF2C0" stroke="#000" stroke-width="5" stroke-linejoin="round" stroke-linecap="round"/><rect x="-62" y="-24" width="124" height="48" fill="none" stroke="#000" stroke-width="3"/><text x="0" y="7" text-anchor="middle" font-family="Archivo,sans-serif" font-weight="900" font-size="20" fill="#000">GRATUIT</text></g>
<g transform="translate(400 110) rotate(-12)"><rect x="-44" y="-28" width="88" height="56" fill="#C4B5FD" stroke="#000" stroke-width="5" stroke-linejoin="round" stroke-linecap="round"/><rect x="-44" y="-16" width="88" height="11" fill="#000"/><rect x="-32" y="4" width="18" height="13" fill="#FFD23F" stroke="#000" stroke-width="3"/><path d="M-50 32 L50 -32" stroke="#000" stroke-width="14" stroke-linecap="round"/><path d="M-50 32 L50 -32" stroke="#ec3013" stroke-width="7" stroke-linecap="round"/></g>
<path d="M60 250 l6 13 14 2 -10 10 2 14 -12 -7 -12 7 2 -14 -10 -10 14 -2 z" fill="#7CF2C0" stroke="#000" stroke-width="4" stroke-linejoin="round"/>
<path d="M455 250 l4 9 10 1 -7 7 2 10 -9 -5 -9 5 2 -10 -7 -7 10 -1 z" fill="#FF6FB5" stroke="#000" stroke-width="3" stroke-linejoin="round"/>
<path d="M110 430 l14 -14 14 14 14 -14 14 14 14 -14 14 14" fill="none" stroke="#000" stroke-width="5" stroke-linejoin="round"/>
</svg></figure>
</div>
</section>
<section class="mx-auto max-w-7xl px-5 py-20 lg:px-10" aria-label="Offres">
<ul class="grid gap-10 md:grid-cols-2 xl:grid-cols-4">
<li class="relative flex flex-col border-4 border-black bg-white p-7 shadow-[8px_8px_0px_#000000] ">
<h2 class="text-3xl font-black">Découverte</h2>
<p class="mt-1 font-semibold">Élèves, curieux, enseignants</p>
<p class="mt-6 flex items-baseline gap-2"><span class="font-mono text-5xl font-semibold">0 €</span><span class="font-bold"></span></p>
<p class="mt-1 font-mono text-sm font-semibold">pour toujours</p>
<ul class="mt-6 flex-1 space-y-2 border-t-4 border-black pt-5 font-semibold"><li class="flex gap-2"><span aria-hidden="true">■</span><span>Les 99 cours : CM, TD, QCM</span></li><li class="flex gap-2"><span aria-hidden="true">■</span><span>Corrections expliquées</span></li><li class="flex gap-2"><span aria-hidden="true">■</span><span>1 lab d’essai de 30 min par jour</span></li></ul>
<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] transition-transform hover:bg-[#FFD23F] active:translate-x-1 active:translate-y-1 active:shadow-none mt-8 self-start">Lire les cours</a>
</li>
<li class="relative flex flex-col border-4 border-black bg-[#7CF2C0] p-7 shadow-[8px_8px_0px_#000000] xl:translate-y-8">
<h2 class="text-3xl font-black">Enseignant</h2>
<p class="mt-1 font-semibold">Une classe, sans passer par l’intendance</p>
<p class="mt-6 flex items-baseline gap-2"><span class="font-mono text-5xl font-semibold">29 €</span><span class="font-bold">/ mois</span></p>
<p class="mt-1 font-mono text-sm font-semibold">ou 290 € / an · jusqu’à 35 élèves</p>
<ul class="mt-6 flex-1 space-y-2 border-t-4 border-black pt-5 font-semibold"><li class="flex gap-2"><span aria-hidden="true">■</span><span>Les 59 TP sur VM</span></li><li class="flex gap-2"><span aria-hidden="true">■</span><span>Correction automatique</span></li><li class="flex gap-2"><span aria-hidden="true">■</span><span>Suivi des élèves</span></li><li class="flex gap-2"><span aria-hidden="true">■</span><span>Mode examen</span></li><li class="flex gap-2"><span aria-hidden="true">■</span><span>Cockpit prof, messagerie, correction assistée</span></li><li class="flex gap-2"><span aria-hidden="true">■</span><span>15 h de VM par élève et par mois</span></li></ul>
<a href="apercu-paiement.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] transition-transform hover:bg-[#FFD23F] active:translate-x-1 active:translate-y-1 active:shadow-none mt-8 self-start">Souscrire</a>
</li>
<li class="relative flex flex-col border-4 border-black bg-[#FFD23F] p-7 shadow-[10px_10px_0px_#000000] xl:-rotate-1">
<span class="absolute -right-4 -top-4 rotate-6 border-2 border-black bg-[#ec3013] px-3 py-1 text-sm font-extrabold text-white shadow-[3px_3px_0px_#000000]">Le plus choisi</span>
<h2 class="text-3xl font-black">Établissement</h2>
<p class="mt-1 font-semibold">Lycée, BTS, IUT, université, école</p>
<p class="mt-6 flex items-baseline gap-2"><span class="font-mono text-5xl font-semibold">24 €</span><span class="font-bold">/ élève / an</span></p>
<p class="mt-1 font-mono text-sm font-semibold">à partir de 60 élèves · 1 440 € / an</p>
<ul class="mt-6 flex-1 space-y-2 border-t-4 border-black pt-5 font-semibold"><li class="flex gap-2"><span aria-hidden="true">■</span><span>Tout Enseignant, classes illimitées</span></li><li class="flex gap-2"><span aria-hidden="true">■</span><span>Espace vie scolaire : CPE, direction, intendance</span></li><li class="flex gap-2"><span aria-hidden="true">■</span><span>Export Pronote / ENT</span></li><li class="flex gap-2"><span aria-hidden="true">■</span><span>Tableau de bord académie sur devis</span></li><li class="flex gap-2"><span aria-hidden="true">■</span><span>Espace administrateur</span></li><li class="flex gap-2"><span aria-hidden="true">■</span><span>Séances réservées, VM prêtes 10 min avant</span></li><li class="flex gap-2"><span aria-hidden="true">■</span><span>Bibliothèque partagée entre collègues</span></li><li class="flex gap-2"><span aria-hidden="true">■</span><span>Paiement par mandat administratif</span></li></ul>
<a href="apercu-etablissements.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] active:translate-x-1.5 active:translate-y-1.5 active:shadow-none mt-8 self-start">Demander un devis</a>
</li>
<li class="relative flex flex-col border-4 border-black bg-[#C4B5FD] p-7 shadow-[8px_8px_0px_#000000] xl:translate-y-8">
<h2 class="text-3xl font-black">Région et OF</h2>
<p class="mt-1 font-semibold">Académies, régions, organismes de formation</p>
<p class="mt-6 flex items-baseline gap-2"><span class="font-mono text-5xl font-semibold">Devis</span><span class="font-bold"></span></p>
<p class="mt-1 font-mono text-sm font-semibold">à partir de 500 élèves ou stagiaires</p>
<ul class="mt-6 flex-1 space-y-2 border-t-4 border-black pt-5 font-semibold"><li class="flex gap-2"><span aria-hidden="true">■</span><span>Tout Établissement</span></li><li class="flex gap-2"><span aria-hidden="true">■</span><span>Capacité réservée</span></li><li class="flex gap-2"><span aria-hidden="true">■</span><span>Suivi par centre ou par site</span></li><li class="flex gap-2"><span aria-hidden="true">■</span><span>Accompagnement au déploiement</span></li></ul>
<a href="apercu-etablissements.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] transition-transform hover:bg-[#FFD23F] active:translate-x-1 active:translate-y-1 active:shadow-none mt-8 self-start">Nous contacter</a>
</li>
</ul>
</section>
<section class="border-y-4 border-black bg-[#13233A] text-white" aria-labelledby="t-api">
<div class="mx-auto grid max-w-7xl items-center gap-8 px-5 py-14 lg:grid-cols-12 lg:px-10">
<h2 id="t-api" class="text-4xl font-black tracking-tighter lg:col-span-4">API et MCP pour développeurs</h2>
<p class="text-lg font-semibold lg:col-span-5">19 € HT par mois avec 100 h de VM incluses, puis 0,09 € HT l’heure. Quotas par jeton. Les classes restent toujours prioritaires sur la capacité.</p>
<a href="apercu-etablissements.html" class="inline-flex items-center gap-3 self-start justify-self-start border-4 border-white bg-[#FFD23F] px-5 py-3 font-extrabold text-black shadow-[4px_4px_0px_#FF6FB5] lg:col-span-3">Obtenir une clé</a>
</div>
</section>
<section class="border-t-4 border-black bg-white" aria-labelledby="t-faq">
<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]">FAQ</p>
<h2 id="t-faq" class="mt-6 text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Vos questions, nos réponses.</h2>
<p class="mt-4 max-w-2xl text-xl font-medium">Intendance, données, pédagogie, technique. Une question manque&nbsp;? <a href="mailto:adam@belkacemi.me" class="font-extrabold underline underline-offset-4">adam@belkacemi.me</a></p>
<div class="mt-12 grid gap-x-8 gap-y-14 lg:grid-cols-2">
<div class=""><h3 class="inline-block border-4 border-black bg-[#FFD23F] px-4 py-2 text-2xl font-black shadow-[4px_4px_0px_#000000] -rotate-1">Achat et intendance</h3><ul class="mt-6 grid gap-4"><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Bon de commande et Chorus Pro ?<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">Oui. Nous envoyons un devis, vous émettez un bon de commande, la facture arrive sur Chorus Pro. Paiement par mandat administratif à 30 jours.</p></details></li><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Faut-il une carte bancaire pour essayer ?<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">Non. Un enseignant crée sa classe gratuitement, sans CB. En échange, on vous demande juste un coup de pouce : vos remarques, ou votre aide pour faire souscrire votre établissement.</p></details></li><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Une licence couvre quelle période ?<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">Une licence suit l’année scolaire, de septembre à août. Les comptes archivés sont supprimés 90 jours après la fin d’année.</p></details></li><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Les élèves qui redoublent ?<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">Ils repartent sur la licence de l’année suivante. Leur historique (notes, observations, progression) peut être conservé si l’établissement le demande.</p></details></li><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Peut-on payer par région ou par académie ?<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">Oui, un devis groupé est possible pour plusieurs établissements. Écrivez-nous pour en parler.</p></details></li></ul></div>
<div class="lg:translate-y-10"><h3 class="inline-block border-4 border-black bg-[#7CF2C0] px-4 py-2 text-2xl font-black shadow-[4px_4px_0px_#000000] rotate-1">Élèves et données</h3><ul class="mt-6 grid gap-4"><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Où sont hébergées les données ?<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">En France, chez Scaleway, sur des serveurs situés à Strasbourg. Rien ne sort de l’Union européenne.</p></details></li><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Et le RGPD ?<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">Nous collectons le minimum : nom, prénom, classe, résultats. Pas de publicité, pas de revente, pas de traceurs tiers. Un contrat de sous-traitance est fourni à l’établissement.</p></details></li><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Les élèves mineurs peuvent-ils s’inscrire seuls ?<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">Non. C’est l’enseignant qui crée la classe et distribue les identifiants. L’élève n’a pas besoin d’adresse e-mail.</p></details></li><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Un élève peut-il travailler chez lui ?<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">Oui, depuis n’importe quel navigateur, sur PC ou téléphone. Cours, QCM, IDE et devoirs maison restent accessibles toute l’année.</p></details></li></ul></div>
<div class=""><h3 class="inline-block border-4 border-black bg-[#C4B5FD] px-4 py-2 text-2xl font-black shadow-[4px_4px_0px_#000000] -rotate-1">Pédagogie</h3><ul class="mt-6 grid gap-4"><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Les cours suivent-ils les programmes officiels ?<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">Oui. Ils sont construits à partir des référentiels officiels (BO, arrêtés, fiches RNCP), du SNT au master. Chaque CM, TD et TP indique les compétences visées.</p></details></li><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Puis-je modifier un cours ou un sujet ?<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">Oui. Tout se duplique et se modifie : CM, questions, TD, sujets d’examen. Vos versions restent dans votre bibliothèque.</p></details></li><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Comment marche le mode examen ?<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">L’élève passe en plein écran. Si sa souris sort de la fenêtre ou s’il change d’onglet, vous le voyez en direct, avec l’heure et la durée.</p></details></li><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Les TD s’impriment-ils ?<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">Oui. Chaque TD se télécharge en PDF avec ses étapes et ses cases à remplir. La correction s’imprime à part, pour vous.</p></details></li><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Et la fonction « Lever la main » ?<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">L’élève lève la main depuis son écran, vous voyez la file d’attente. Fini les « Madame ! Monsieur ! » en boucle.</p></details></li></ul></div>
<div class="lg:translate-y-10"><h3 class="inline-block border-4 border-black bg-[#FF6FB5] px-4 py-2 text-2xl font-black shadow-[4px_4px_0px_#000000] rotate-1">Technique</h3><ul class="mt-6 grid gap-4"><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Faut-il installer quelque chose ?<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">Non. Tout se passe dans le navigateur : terminal Debian, IDE, navigateur relié à la VM. Rien à installer sur les postes du lycée.</p></details></li><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Et si un élève dépasse 15 h de VM ?<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">Le compteur est partagé par la classe : un élève peut consommer plus si d’autres consomment moins. Au-delà, les TP restent ouverts en lecture.</p></details></li><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Le réseau du lycée bloque souvent tout…<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">Paillasse passe par une connexion web chiffrée classique, comme n’importe quel site. En cas de souci, on vous aide à le régler avec votre administrateur réseau.</p></details></li><li><details class="group border-4 border-black bg-white shadow-[4px_4px_0px_#000000] open:shadow-[6px_6px_0px_#000000]"><summary class="flex cursor-pointer list-none items-start justify-between gap-4 p-4 text-lg font-black leading-snug [&::-webkit-details-marker]:hidden">Une VM peut-elle casser le réseau du lycée ?<span class="grid h-7 w-7 shrink-0 place-items-center border-2 border-black font-mono text-lg leading-none group-open:bg-black group-open:text-white" aria-hidden="true"><span class="group-open:hidden">+</span><span class="hidden group-open:inline">−</span></span></summary><p class="border-t-2 border-black px-4 py-3 font-medium leading-relaxed">Non. Chaque VM est isolée chez nous. L’élève peut tout casser dedans, il la réinitialise en un clic.</p></details></li></ul></div>
</div>
</div>
</section>
<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>
</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>