2026-10-08 02:01:58 +02:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="fr">
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
|
|
<title>Paiement · Syllabus</title>
|
2026-10-09 21:07:25 +02:00
|
|
|
|
{{ Vite::fonts() }}
|
2026-10-08 02:01:58 +02:00
|
|
|
|
<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>
|
2026-10-09 21:07:25 +02:00
|
|
|
|
<link rel="stylesheet" href="{{ asset('vendor/xterm/xterm.css') }}">
|
|
|
|
|
|
<script defer src="{{ asset('vendor/xterm/xterm.js') }}"></script>
|
|
|
|
|
|
<script defer src="{{ asset('vendor/xterm/addon-fit.js') }}"></script>
|
2026-10-08 02:01:58 +02:00
|
|
|
|
<script defer src="{{ asset('js/paillasse-terminal.js') }}"></script>
|
|
|
|
|
|
<link rel="stylesheet" href="{{ asset('css/syllabus-theme.css') }}">
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body class="bg-white font-display text-black antialiased">
|
2026-10-09 21:07:25 +02:00
|
|
|
|
@include('partials.apercu')
|
2026-10-08 02:01:58 +02:00
|
|
|
|
|
|
|
|
|
|
<header style="position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid #e3e5e8">
|
|
|
|
|
|
<nav aria-label="Navigation principale" style="position:relative;max-width:1200px;margin:0 auto;padding:0 20px;min-height:64px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 40px">
|
|
|
|
|
|
<a href="{{ route('accueil') }}" aria-label="Syllabus, accueil" style="display:flex;align-items:center;gap:0;text-decoration:none"><img src="{{ asset('images/logo-syllabus-icone.png') }}" alt="" style="height:32px;width:auto;display:block"><span style="font-family:Mulish,system-ui,sans-serif;font-weight:800;font-size:19px;color:#111827;letter-spacing:-0.01em;margin-left:-14px;position:relative">Syllabus</span></a>
|
|
|
|
|
|
<ul style="margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;flex:1;line-height:1.5"><li><details class="group"><summary @if(request()->routeIs('fonctionnalites') || request()->routeIs('ressource')) aria-current="page" @endif style="cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;height:36px;margin:-6px -12px;padding:0 12px;border-radius:999px;line-height:1.5;font-size:15px;font-weight:600;color:#0b1220" class="hover:bg-[#f1f3f4] group-open:bg-[#e8f0fe] group-open:text-[#0b57d0] aria-[current=page]:text-[#0b57d0] [&::-webkit-details-marker]:hidden">Fonctionnalités<svg aria-hidden="true" viewBox="0 0 16 16" width="16" height="16" class="transition-transform duration-200 group-open:rotate-180" style="flex:none;opacity:.7"><path d="M4 6l4 4 4-4" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></summary>
|
|
|
|
|
|
<div style="position:absolute;left:20px;right:20px;top:100%;margin-top:4px;z-index:50;max-width:1160px;margin-left:auto;margin-right:auto;box-sizing:border-box;max-height:calc(100vh - 90px);overflow:auto;border-radius:20px;background:#fff;border:1px solid #e3e5e8;box-shadow:0 24px 48px -16px rgba(15,23,42,.22)">
|
|
|
|
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 min-[1100px]:grid-cols-5 [&>div:last-child]:col-span-2 min-[1100px]:[&>div:last-child]:col-span-1" style="gap:1px;background:#e3e5e8"><div style="padding:22px 20px 20px;min-width:0;background:#fff"><p style="margin:0;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:800;color:#0b1220"><span aria-hidden="true" style="flex:none;width:10px;height:10px;border-radius:3px;background:#0b57d0"></span>Piloter la classe</p><p style="margin:4px 0 0 20px;min-height:32px;font-size:12px;line-height:16px;font-weight:500;color:#5f6368">En direct et au quotidien</p><ul style="margin:10px 0 0 20px;padding:12px 0 0;border-top:1px solid #f1f3f4;list-style:none;display:grid;gap:2px"><li><a href="{{ route('ressource') }}?outil=cockpit" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Tableau de bord prof</a></li><li><a href="{{ route('ressource') }}?outil=visio" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Visio de classe</a></li><li><a href="{{ route('ressource') }}?outil=espace-eleve" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Espace élève</a></li><li><a href="{{ route('ressource') }}?outil=fiche-eleve" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Fiche élève</a></li><li><a href="{{ route('ressource') }}?outil=messagerie" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Messagerie</a></li></ul></div><div style="padding:22px 20px 20px;min-width:0;background:#fff"><p style="margin:0;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:800;color:#0b1220"><span aria-hidden="true" style="flex:none;width:10px;height:10px;border-radius:3px;background:#137333"></span>Apprendre</p><p style="margin:4px 0 0 20px;min-height:32px;font-size:12px;line-height:16px;font-weight:500;color:#5f6368">Cours, TP et code</p><ul style="margin:10px 0 0 20px;padding:12px 0 0;border-top:1px solid #f1f3f4;list-style:none;display:grid;gap:2px"><li><a href="{{ route('ressource') }}?outil=cours" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Cours gratuits</a></li><li><a href="{{ route('ressource') }}?outil=labs" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">TP sur machine Linux</a></li><li><a href="{{ route('ressource') }}?outil=lab-web" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Lab web</a></li><li><a href="{{ route('ressource') }}?outil=ide" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Éditeur de code en ligne</a></li><li><a href="{{ route('ressource') }}?outil=maison" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Ressources à la maison</a></li></ul></div><div style
|
|
|
|
|
|
<div style="position:sticky;bottom:0;padding:14px 24px;border-top:1px solid #e3e5e8;background:#f8f9fa;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px"><span style="font-size:14px;font-weight:500;color:#5f6368">24 outils, chacun avec sa présentation et sa démo</span><a href="{{ route('fonctionnalites') }}" style="font-size:15px;font-weight:700;color:#0b57d0;text-decoration:none">Voir toutes les fonctionnalités →</a></div>
|
|
|
|
|
|
</div></details></li><li><a href="{{ route('cours.index') }}" @if(request()->routeIs('cours.index')) aria-current="page" @endif style="display:inline-flex;align-items:center;height:24px;line-height:1.5;font-size:15px;font-weight:600;color:#0b1220;text-decoration:none" class="hover:text-[#0b57d0] aria-[current=page]:text-[#0b57d0]">Cours</a></li><li><a href="{{ route('tarifs') }}" @if(request()->routeIs('tarifs')) aria-current="page" @endif style="display:inline-flex;align-items:center;height:24px;line-height:1.5;font-size:15px;font-weight:600;color:#0b1220;text-decoration:none" class="hover:text-[#0b57d0] aria-[current=page]:text-[#0b57d0]">Tarifs</a></li></ul>
|
|
|
|
|
|
<div style="display:flex;align-items:center;gap:20px">
|
|
|
|
|
|
<a href="{{ route('login') }}" style="font-size:15px;font-weight:600;color:#0b1220;text-decoration:none" class="hover:text-[#0b57d0]">Se connecter</a>
|
|
|
|
|
|
<a href="{{ route('register') }}" style="display:inline-flex;align-items:center;height:40px;padding:0 20px;border-radius:999px;background:#0b57d0;color:#fff;font-size:15px;font-weight:700;text-decoration:none">Créer une classe</a>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</nav>
|
|
|
|
|
|
</header>
|
|
|
|
|
|
|
|
|
|
|
|
<main>
|
|
|
|
|
|
<section class="border-b border-[#e3e5e8] 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><div class="min-w-0 flex-1"><p data-public="P" class="mb-2 inline-flex items-center gap-2 rounded-full border border-[#b8c1cf] bg-white px-3 py-1 text-sm font-bold text-[#1d3fa8]">Pour les profs</p>
|
|
|
|
|
|
<h1 class="mt-4 text-5xl font-extrabold tracking-tight">Passer à l’offre payante</h1></div><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 border-[#dadce0] rounded-lg bg-white" aria-labelledby="t-offre"><h2 id="t-offre" class="border-b border-[#e3e5e8] p-4 text-lg font-extrabold">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 border-[#dadce0] rounded-lg p-3 has-[:checked]:bg-[#fef7e0] has-[:checked]:"><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-extrabold">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 border-[#dadce0] rounded-lg p-3 has-[:checked]:bg-[#fef7e0] has-[:checked]:"><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-extrabold">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 border-[#dadce0] rounded-lg p-3 has-[:checked]:bg-[#fef7e0] has-[:checked]:"><span class="flex items-center gap-2"><input type="radio" name="offre" value="etab" class="h-4 w-4 accent-black"><span class="font-extrabold">É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 border-[#e3e5e8] 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 border-[#dadce0] rounded-lg px-3 font-mono font-semibold"></label></div>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
<section class="border border-[#dadce0] rounded-lg bg-white" aria-labelledby="t-fact"><h2 id="t-fact" class="border-b border-[#e3e5e8] p-4 text-lg font-extrabold">2 · Facturation</h2>
|
2026-10-09 21:07:25 +02:00
|
|
|
|
<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 border-[#dadce0] rounded-lg bg-white px-3 font-mono font-semibold" placeholder="Lycée de démonstration B"></label><label class="grid gap-1 text-sm font-bold">E-mail de facturation<input class="h-11 border border-[#dadce0] rounded-lg 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 border-[#dadce0] rounded-lg 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 border-[#dadce0] rounded-lg 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 border-[#dadce0] rounded-lg bg-white px-3 font-mono font-semibold" placeholder="facultatif"></label></div>
|
2026-10-08 02:01:58 +02:00
|
|
|
|
</section>
|
|
|
|
|
|
<section class="border border-[#dadce0] rounded-lg bg-white" aria-labelledby="t-pay"><h2 id="t-pay" class="border-b border-[#e3e5e8] p-4 text-lg font-extrabold">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 border-[#dadce0] rounded-lg p-3 has-[:checked]:bg-[#e6f4ea]"><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-extrabold">Carte bancaire</span></span><span class="text-xs font-bold">via Stripe</span></label><label class="flex cursor-pointer flex-col gap-1 border border-[#dadce0] rounded-lg p-3 has-[:checked]:bg-[#e6f4ea]"><span class="flex items-center gap-2"><input type="radio" name="mode" value="sepa" class="h-4 w-4 accent-black"><span class="font-extrabold">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 border-[#dadce0] rounded-lg p-3 has-[:checked]:bg-[#e6f4ea]"><span class="flex items-center gap-2"><input type="radio" name="mode" value="mandat" class="h-4 w-4 accent-black"><span class="font-extrabold">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 border-[#e3e5e8] 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 border-[#dadce0] rounded-lg 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 border-[#dadce0] rounded-lg 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 border-[#dadce0] rounded-lg 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. Syllabus ne le voit ni ne le stocke.</p></div>
|
|
|
|
|
|
<div data-m="sepa" class="hidden grid gap-4 border-t border-[#e3e5e8] p-4"><label class="grid gap-1 text-sm font-bold">IBAN<input class="h-11 border border-[#dadce0] rounded-lg 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 Syllabus à 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 border-[#e3e5e8] 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 border-[#dadce0] rounded-lg bg-[#fef7e0] 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 border-[#dadce0] rounded-lg bg-[#fef7e0] 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 border-[#dadce0] rounded-lg bg-[#fef7e0] 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 border-[#dadce0] rounded-lg bg-[#f8f9fa] 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 border-[#e3e5e8] rounded-2xl bg-white" aria-labelledby="t-rec"><h2 id="t-rec" class="border-b border-[#e3e5e8] bg-[#fef7e0] p-4 text-lg font-extrabold">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 border-[#e3e5e8] pt-2 text-lg font-extrabold"><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>
|
2026-10-09 21:07:25 +02:00
|
|
|
|
<div class="border-t border-[#e3e5e8] 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('confidentialite') }}#confidentialite" class="underline">politique de confidentialité</a>.</label>
|
2026-10-08 02:01:58 +02:00
|
|
|
|
<a id="p-go" href="{{ route('paiement.ok') }}" aria-disabled="true" class="mt-4 flex h-12 items-center justify-center gap-2 border border-[#dadce0] rounded-lg bg-[#ec3013] font-extrabold text-white opacity-50 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 border-[#dadce0] rounded-lg px-1.5">Stripe</span><span class="border border-[#dadce0] rounded-lg px-1.5">3-D Secure</span><span class="border border-[#dadce0] rounded-lg px-1.5">🇫🇷 Hébergé en France</span></p></div>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
<p class="mt-4 text-sm font-semibold">Juste envie d’essayer ? <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 style="background:#f8f9fa;border-top:1px solid #e3e5e8;font-family:Mulish,system-ui,sans-serif">
|
|
|
|
|
|
<div class="mx-auto grid max-w-7xl gap-10 px-5 py-14 sm:grid-cols-2 lg:grid-cols-4 lg:px-10">
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<p style="margin:0;font-size:18px;font-weight:800;color:#0b1220">Syllabus</p>
|
|
|
|
|
|
<p style="margin:10px 0 0;font-size:14px;line-height:1.6;font-weight:500;color:#5f6368">Cours, labs, IDE et examens en ligne, du lycée au master.</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<nav aria-label="Produit"><p style="margin:0;font-size:13px;font-weight:800;color:#0b1220">Produit</p><ul style="margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px"><li><a href="{{ route('fonctionnalites') }}" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Fonctionnalités</a></li><li><a href="{{ route('cours.index') }}" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Cours gratuits</a></li><li><a href="{{ route('labs.essai') }}" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Essayer un lab</a></li><li><a href="{{ route('tarifs') }}" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Tarifs</a></li></ul></nav><nav aria-label="Outils"><p style="margin:0;font-size:13px;font-weight:800;color:#0b1220">Outils</p><ul style="margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px"><li><a href="{{ route('ressource') }}?outil=cockpit" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Tableau de bord prof</a></li><li><a href="{{ route('ressource') }}?outil=labs" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">TP sur machine Linux</a></li><li><a href="{{ route('ressource') }}?outil=ide" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Éditeur de code</a></li><li><a href="{{ route('ressource') }}?outil=quiz" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Quiz flash</a></li><li><a href="{{ route('ressource') }}?outil=sujet" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Examens</a></li><li><a href="{{ route('ressource') }}?outil=bibliotheque" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Bibliothèque du prof</a></li></ul></nav><nav aria-label="Établissements"><p style="margin:0;font-size:13px;font-weight:800;color:#0b1220">Établissements</p><ul style="margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px"><li><a href="{{ route('etablissements') }}" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Équiper une classe</a></li><li><a href="{{ route('ressource') }}?outil=vie-scolaire" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Vie scolaire</a></li><li><a href="{{ route('ressource') }}?outil=espace-etablissement" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Licences et factures</a></li><li><a href="{{ route('ressource') }}?outil=integration" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Intégration et sécurité</a></li></ul></nav><nav aria-label="Syllabus"><p style="margin:0;font-size:13px;font-weight:800;color:#0b1220">Syllabus</p><ul style="margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px"><li><a href="{{ route('aide') }}" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Aide et tutoriels</a></li><li><a href="{{ route('legal') }}" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Mentions légales et RGPD</a></li></ul></nav>
|
|
|
|
|
|
<p style="margin:0;align-self:start;font-size:14px;font-weight:600;color:#5f6368"><span style="color:#137333">●</span> Tous les services fonctionnent</p>
|
|
|
|
|
|
</div>
|
2026-10-09 21:07:25 +02:00
|
|
|
|
<div style="border-top:1px solid #e3e5e8"><ul aria-label="Engagements" style="max-width:1200px;margin:0 auto;padding:24px 20px;list-style:none;display:flex;flex-wrap:wrap;gap:12px 40px"><li style="font-size:14px;font-weight:700;color:#0b1220">Hébergé en France</li><li style="font-size:14px;font-weight:700;color:#0b1220"><a href="{{ route('confidentialite') }}" style="color:#0b1220">Conforme au RGPD</a> <span style="font-weight:500;color:#5f6368">· données minimisées</span></li><li style="font-size:14px;font-weight:700;color:#0b1220">6 cursus <span style="font-weight:500;color:#5f6368">· du lycée au BUT</span></li><li style="font-size:14px;font-weight:700;color:#0b1220">0 € <span style="font-weight:500;color:#5f6368">· sans carte bancaire</span></li></ul>
|
2026-10-08 02:01:58 +02:00
|
|
|
|
</div>
|
|
|
|
|
|
<div style="border-top:1px solid #e3e5e8">
|
2026-10-09 21:07:25 +02:00
|
|
|
|
<div class="mx-auto flex max-w-7xl flex-wrap items-center justify-center gap-x-6 gap-y-2 px-5 py-4 lg:px-10"><nav aria-label="Informations légales"><ul class="flex flex-wrap justify-center gap-x-5 gap-y-1" style="margin:0;padding:0;list-style:none;font-size:14px;font-weight:500"><li><a href="{{ route('legal') }}#mentions" style="color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Mentions légales</a></li><li><a href="{{ route('legal') }}#cgu" style="color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">CGU</a></li><li><a href="{{ route('confidentialite') }}#confidentialite" style="color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Confidentialité et RGPD</a></li><li><a href="{{ route('confidentialite') }}#cookies" style="color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Cookies</a></li><li><a href="{{ route('confidentialite') }}#sous-traitance" style="color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Sous-traitance</a></li><li><a href="{{ route('statut') }}" style="color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Statut du service</a></li></ul></nav></div>
|
2026-10-08 02:01:58 +02:00
|
|
|
|
</div>
|
|
|
|
|
|
</footer>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|