Paillasse/design/_backup-ludique/resources/views/paiement.blade.php
2026-10-06 23:28:18 +02:00

126 lines
28 KiB
PHP
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>Paiement · 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>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.css">
<script defer src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10.0/lib/addon-fit.min.js"></script>
<script defer src="{{ asset('js/paillasse-terminal.js') }}"></script>
</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="{{ route('accueil') }}" 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="{{ route('fonctionnalites') }}" 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="{{ route('cockpit') }}" 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="{{ route('espace.eleve') }}" 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="{{ route('vie.scolaire') }}" 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="{{ route('academie') }}" 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="{{ route('cours.index') }}" 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="{{ route('labs.index') }}" 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="{{ route('labs.web') }}" 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="{{ route('ide') }}" 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="{{ route('maison') }}" 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="{{ route('bibliotheque') }}" 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="{{ route('banque') }}" 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="{{ route('generateur') }}" 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="{{ route('td.imprimable') }}" 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="{{ route('quiz.projection') }}" 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="{{ route('sujet.creer') }}" 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="{{ route('devoirs') }}" 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="{{ route('correction') }}" 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="{{ route('fiche.eleve') }}" 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="{{ route('messagerie') }}" 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="{{ route('export.ent') }}" 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="{{ route('aide') }}" 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="{{ route('etablissements') }}" 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="{{ route('tarifs') }}" 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="{{ route('pourquoi') }}" 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="{{ route('login') }}" 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="{{ route('register') }}" 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="border-b-4 border-black bg-white"><div class="mx-auto max-w-6xl px-5 py-10 lg:px-10"><a href="{{ route('tarifs') }}" class="text-sm font-extrabold underline underline-offset-4">← Retour aux tarifs</a><h1 class="mt-4 text-5xl font-black tracking-tighter">Passer à l’offre payante</h1><p class="mt-2 max-w-2xl text-lg font-semibold">Les cours restent gratuits pour toujours. Vous payez les VM, le suivi et les outils prof.</p></div></section>
<div class="mx-auto grid max-w-6xl gap-8 px-5 py-10 lg:grid-cols-[minmax(0,1fr)_380px] lg:px-10">
<div class="grid content-start gap-8">
<section class="border-2 border-black bg-white" aria-labelledby="t-offre"><h2 id="t-offre" class="border-b-2 border-black p-4 text-lg font-black">1 · Votre offre</h2>
<div id="p-offres" class="grid gap-3 p-4 sm:grid-cols-3"><label class="flex cursor-pointer flex-col gap-1 border-2 border-black p-3 has-[:checked]:bg-[#FFD23F] has-[:checked]:shadow-[4px_4px_0px_#000000]"><span class="flex items-center gap-2"><input type="radio" name="offre" value="ens-m" checked class="h-4 w-4 accent-black"><span class="font-black">Enseignant</span></span><span class="font-mono text-lg font-semibold">29 € / mois</span><span class="text-xs font-bold">sans engagement</span></label><label class="flex cursor-pointer flex-col gap-1 border-2 border-black p-3 has-[:checked]:bg-[#FFD23F] has-[:checked]:shadow-[4px_4px_0px_#000000]"><span class="flex items-center gap-2"><input type="radio" name="offre" value="ens-a" class="h-4 w-4 accent-black"><span class="font-black">Enseignant annuel</span></span><span class="font-mono text-lg font-semibold">290 € / an</span><span class="text-xs font-bold">2 mois offerts</span></label><label class="flex cursor-pointer flex-col gap-1 border-2 border-black p-3 has-[:checked]:bg-[#FFD23F] has-[:checked]:shadow-[4px_4px_0px_#000000]"><span class="flex items-center gap-2"><input type="radio" name="offre" value="etab" class="h-4 w-4 accent-black"><span class="font-black">Établissement</span></span><span class="font-mono text-lg font-semibold">24 € / élève / an</span><span class="text-xs font-bold">dès 60 élèves</span></label></div>
<div id="p-nb" class="hidden border-t-2 border-black p-4"><label class="flex flex-wrap items-center gap-3 text-sm font-bold">Nombre d’élèves<input id="p-eleves" type="number" min="60" value="120" class="h-11 w-28 border-2 border-black px-3 font-mono font-semibold"></label></div>
</section>
<section class="border-2 border-black bg-white" aria-labelledby="t-fact"><h2 id="t-fact" class="border-b-2 border-black p-4 text-lg font-black">2 · Facturation</h2>
<div class="grid gap-4 p-4 sm:grid-cols-2"><label class="grid gap-1 text-sm font-bold ">Nom ou établissement<input class="h-11 border-2 border-black bg-white px-3 font-mono font-semibold" placeholder="Lycée Jean-Jaurès"></label><label class="grid gap-1 text-sm font-bold ">E-mail de facturation<input class="h-11 border-2 border-black bg-white px-3 font-mono font-semibold" placeholder="intendance@lycee.fr"></label><label class="grid gap-1 text-sm font-bold sm:col-span-2">Adresse<input class="h-11 border-2 border-black bg-white px-3 font-mono font-semibold" placeholder="12 rue de la République"></label><label class="grid gap-1 text-sm font-bold ">SIRET (établissements)<input class="h-11 border-2 border-black bg-white px-3 font-mono font-semibold" placeholder="000 000 000 00000"></label><label class="grid gap-1 text-sm font-bold ">N° d’engagement (Chorus Pro)<input class="h-11 border-2 border-black bg-white px-3 font-mono font-semibold" placeholder="facultatif"></label></div>
</section>
<section class="border-2 border-black bg-white" aria-labelledby="t-pay"><h2 id="t-pay" class="border-b-2 border-black p-4 text-lg font-black">3 · Moyen de paiement</h2>
<div id="p-modes" class="grid gap-3 p-4 sm:grid-cols-3"><label class="flex cursor-pointer flex-col gap-1 border-2 border-black p-3 has-[:checked]:bg-[#7CF2C0]"><span class="flex items-center gap-2"><input type="radio" name="mode" value="cb" checked class="h-4 w-4 accent-black"><span class="font-black">Carte bancaire</span></span><span class="text-xs font-bold">via Stripe</span></label><label class="flex cursor-pointer flex-col gap-1 border-2 border-black p-3 has-[:checked]:bg-[#7CF2C0]"><span class="flex items-center gap-2"><input type="radio" name="mode" value="sepa" class="h-4 w-4 accent-black"><span class="font-black">Prélèvement SEPA</span></span><span class="text-xs font-bold">via Stripe</span></label><label class="flex cursor-pointer flex-col gap-1 border-2 border-black p-3 has-[:checked]:bg-[#7CF2C0]"><span class="flex items-center gap-2"><input type="radio" name="mode" value="mandat" class="h-4 w-4 accent-black"><span class="font-black">Bon de commande</span></span><span class="text-xs font-bold">mandat administratif · Chorus Pro</span></label></div>
<div data-m="cb" class="grid gap-4 border-t-2 border-black p-4 sm:grid-cols-4"><label class="grid gap-1 text-sm font-bold sm:col-span-2">Numéro de carte<input class="h-11 border-2 border-black bg-white px-3 font-mono font-semibold" placeholder="4242 4242 4242 4242"></label><label class="grid gap-1 text-sm font-bold ">Expiration<input class="h-11 border-2 border-black bg-white px-3 font-mono font-semibold" placeholder="MM / AA"></label><label class="grid gap-1 text-sm font-bold ">CVC<input class="h-11 border-2 border-black bg-white px-3 font-mono font-semibold" placeholder="123"></label><p class="flex items-center gap-2 text-xs font-semibold sm:col-span-4"><svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="11" width="18" height="11"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>Le numéro de carte est saisi dans un champ sécurisé fourni par Stripe. Paillasse ne le voit ni ne le stocke.</p></div>
<div data-m="sepa" class="hidden grid gap-4 border-t-2 border-black p-4"><label class="grid gap-1 text-sm font-bold ">IBAN<input class="h-11 border-2 border-black bg-white px-3 font-mono font-semibold" placeholder="FR76 0000 0000 0000 0000 0000 000"></label><p class="text-xs font-semibold">En validant, vous autorisez Paillasse à prélever le montant indiqué via Stripe. Vous pouvez demander un remboursement à votre banque sous 8 semaines.</p></div>
<div data-m="mandat" class="hidden border-t-2 border-black p-4 text-sm font-semibold"><ol class="grid gap-2"><li class="flex gap-3"><span class="grid h-6 w-6 shrink-0 place-items-center border-2 border-black bg-[#FFD23F] font-mono text-xs">1</span>Vous recevez un devis par e-mail, tout de suite.</li><li class="flex gap-3"><span class="grid h-6 w-6 shrink-0 place-items-center border-2 border-black bg-[#FFD23F] font-mono text-xs">2</span>Votre intendance émet un bon de commande.</li><li class="flex gap-3"><span class="grid h-6 w-6 shrink-0 place-items-center border-2 border-black bg-[#FFD23F] font-mono text-xs">3</span>La facture est déposée sur Chorus Pro. Paiement à 30 jours.</li></ol><p class="mt-3 border-2 border-black bg-[#FFFBEA] p-2 text-xs">Votre classe est ouverte dès la réception du bon de commande.</p></div>
</section>
</div>
<aside class="lg:sticky lg:top-6 lg:self-start">
<section class="border-4 border-black bg-white shadow-[8px_8px_0px_#000000]" aria-labelledby="t-rec"><h2 id="t-rec" class="border-b-4 border-black bg-[#FFD23F] p-4 text-lg font-black">Récapitulatif</h2>
<dl class="grid gap-2 p-4 font-semibold"><div class="flex justify-between"><dt id="r-lib">Enseignant · mensuel</dt><dd id="r-ht" class="font-mono">29,00 €</dd></div><div class="flex justify-between text-sm"><dt>TVA 20 %</dt><dd id="r-tva" class="font-mono">5,80 €</dd></div><div class="flex justify-between border-t-2 border-black pt-2 text-lg font-black"><dt>Total TTC</dt><dd id="r-ttc" class="font-mono">34,80 €</dd></div><p id="r-per" class="text-xs font-bold">par mois · résiliable à tout moment</p></dl>
<div class="border-t-2 border-black p-4"><label class="flex items-start gap-2 text-xs font-semibold"><input id="p-cgv" type="checkbox" class="mt-0.5 h-4 w-4 accent-black">J’accepte les <a href="{{ route('legal') }}#cgu" class="underline">conditions générales</a> et la <a href="{{ route('legal') }}#confidentialite" class="underline">politique de confidentialité</a>.</label>
<a id="p-go" href="{{ route('paiement.ok') }}" aria-disabled="true" class="mt-4 flex h-12 items-center justify-center gap-2 border-2 border-black bg-[#ec3013] font-extrabold text-white opacity-50 shadow-[3px_3px_0px_#000000] aria-[disabled=false]:opacity-100"><svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="11" width="18" height="11"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg><span id="p-go-t">Payer 34,80 €</span></a>
<p class="mt-3 flex flex-wrap items-center justify-center gap-2 text-[11px] font-bold"><span class="border-2 border-black px-1.5">Stripe</span><span class="border-2 border-black px-1.5">3-D Secure</span><span class="border-2 border-black px-1.5">🇫🇷 Hébergé en France</span></p></div>
</section>
<p class="mt-4 text-sm font-semibold">Juste envie d’essayer&nbsp;? <a href="{{ route('register') }}" class="font-extrabold underline">Créez une classe gratuite, sans CB.</a></p>
</aside>
</div>
<script>document.addEventListener('DOMContentLoaded',function(){function eu(v){return v.toFixed(2).replace('.',',').replace(/\B(?=(\d{3})+(?!\d))/g,' ')+' €';}
function maj(){var o=document.querySelector('[name=offre]:checked').value,m=document.querySelector('[name=mode]:checked').value,n=Math.max(60,+document.getElementById('p-eleves').value||60),ht=o==='ens-m'?29:o==='ens-a'?290:24*n;
document.getElementById('p-nb').classList.toggle('hidden',o!=='etab');
document.getElementById('r-lib').textContent=o==='ens-m'?'Enseignant · mensuel':o==='ens-a'?'Enseignant · annuel':'Établissement · '+n+' élèves';
document.getElementById('r-ht').textContent=eu(ht);document.getElementById('r-tva').textContent=eu(ht*.2);document.getElementById('r-ttc').textContent=eu(ht*1.2);
document.getElementById('r-per').textContent=o==='ens-m'?'par mois · résiliable à tout moment':'par an · licence de septembre à août';
document.querySelectorAll('[data-m]').forEach(function(d){d.classList.toggle('hidden',d.dataset.m!==m);});
document.getElementById('p-go-t').textContent=m==='mandat'?'Recevoir le devis':'Payer '+eu(ht*1.2);}
document.querySelectorAll('input').forEach(function(i){i.addEventListener('input',maj);i.addEventListener('change',maj);});
var cg=document.getElementById('p-cgv'),go=document.getElementById('p-go');cg.addEventListener('change',function(){go.setAttribute('aria-disabled',cg.checked?'false':'true');});
go.addEventListener('click',function(e){if(!cg.checked){e.preventDefault();cg.focus();}});maj();});</script>
</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="{{ route('cockpit') }}" class="hover:underline">Cockpit prof</a></li><li><a href="{{ route('espace.eleve') }}" class="hover:underline">Espace élève</a></li><li><a href="{{ route('aide') }}" class="hover:underline">Aide et tutoriels</a></li><li><a href="{{ route('labs.index') }}" class="hover:underline">Labs</a></li><li><a href="{{ route('fonctionnalites') }}" class="hover:underline">Fonctionnalités</a></li><li><a href="{{ route('cours.index') }}" class="hover:underline">Cours gratuits</a></li><li><a href="{{ route('bibliotheque') }}" class="hover:underline">Bibliothèque</a></li><li><a href="{{ route('ide') }}" class="hover:underline">IDE en ligne</a></li><li><a href="{{ route('generateur') }}" class="hover:underline">Générateur de TD</a></li><li><a href="{{ route('labs.web') }}" class="hover:underline">Lab web</a></li><li><a href="{{ route('tarifs') }}" class="hover:underline">Tarifs</a></li><li><a href="{{ route('pourquoi') }}" 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="{{ route('etablissements') }}" class="hover:underline">Équiper une classe</a></li><li><a href="{{ route('login') }}" 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="{{ route('legal') }}#mentions" class="underline underline-offset-4">Mentions légales</a></li><li><a href="{{ route('legal') }}#cgu" class="underline underline-offset-4">CGU</a></li><li><a href="{{ route('legal') }}#confidentialite" class="underline underline-offset-4">Confidentialité et RGPD</a></li><li><a href="{{ route('legal') }}#cookies" class="underline underline-offset-4">Cookies</a></li><li><a href="{{ route('legal') }}#sous-traitance" class="underline underline-offset-4">Sous-traitance</a></li></ul></nav></div>
</div>
</footer>
</body>
</html>