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

189 lines
45 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>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">−</
<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
<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>