@extends('layouts.vitrine')

@section('titre', 'Établissements')

@section('contenu')
<section style="padding:112px 20px 120px;background:#fff"><div style="max-width:900px;margin:0 auto"><p style="margin:0;font-size:15px;font-weight:700;color:#0b57d0;text-align:center">Pour les établissements</p><h1 style="margin:20px 0 0;font-size:clamp(40px,6vw,72px);line-height:1.04;font-weight:800;letter-spacing:-0.03em;color:#0b1220;text-align:center;text-wrap:balance">Un projet par établissement. Un réseau par classe.</h1><p style="margin:24px auto 0;max-width:660px;font-size:20px;line-height:1.6;font-weight:500;color:#3c4043;text-align:center;text-wrap:pretty">Chaque établissement a son espace isolé sur notre cloud hébergé en France, à Paris. Chaque classe a son propre réseau, sans IP publique.</p><div style="margin-top:44px;display:flex;flex-direction:column;align-items:center;gap:14px"><a href="#devis" style="display:inline-flex;align-items:center;height:56px;padding:0 32px;border-radius:999px;background:#0b57d0;color:#fff;font-size:17px;font-weight:700;text-decoration:none">Demander un devis</a><p style="margin:0;font-size:14px;font-weight:600;color:#5f6368">Réponse sous 48 h · bon de commande et Chorus Pro</p></div></div></section><section style="padding:0 20px 120px;background:#fff"><div style="max-width:1080px;margin:0 auto"><h2 style="margin:12px 0 0;font-size:clamp(30px,4vw,44px);line-height:1.1;font-weight:800;letter-spacing:-0.02em;color:#0b1220;text-wrap:balance">Chacun son rôle.</h2><ul style="margin:56px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:56px 48px"><li><p style="margin:0;font-size:14px;font-weight:800;color:#0b57d0;letter-spacing:-0.01em">Administrateur</p><h3 style="margin:12px 0 0;font-size:20px;font-weight:800;letter-spacing:-0.01em;color:#0b1220">Gère l’établissement</h3><p style="margin:10px 0 0;font-size:16px;line-height:1.65;font-weight:500;color:#3c4043">Crée les classes, gère les enseignants et les quotas.</p></li><li><p style="margin:0;font-size:14px;font-weight:800;color:#0b57d0;letter-spacing:-0.01em">Enseignant</p><h3 style="margin:12px 0 0;font-size:20px;font-weight:800;letter-spacing:-0.01em;color:#0b1220">Anime la séance</h3><p style="margin:10px 0 0;font-size:16px;line-height:1.65;font-weight:500;color:#3c4043">Réserve une séance, suit la classe en direct, prend la main sur une console.</p></li><li><p style="margin:0;font-size:14px;font-weight:800;color:#0b57d0;letter-spacing:-0.01em">Élève</p><h3 style="margin:12px 0 0;font-size:20px;font-weight:800;letter-spacing:-0.01em;color:#0b1220">Travaille</h3><p style="margin:10px 0 0;font-size:16px;line-height:1.65;font-weight:500;color:#3c4043">Se connecte avec sa fiche, lance le lab, lève la main s’il bloque.</p></li><li><p style="margin:0;font-size:14px;font-weight:800;color:#0b57d0;letter-spacing:-0.01em">Formateur</p><h3 style="margin:12px 0 0;font-size:20px;font-weight:800;letter-spacing:-0.01em;color:#0b1220">Forme des adultes</h3><p style="margin:10px 0 0;font-size:16px;line-height:1.65;font-weight:500;color:#3c4043">Anime des sessions en titre professionnel.</p></li></ul></div></section><section style="padding:96px 20px;background:#f8f9fa"><div style="max-width:1080px;margin:0 auto"><h2 style="margin:12px 0 0;font-size:clamp(30px,4vw,44px);line-height:1.1;font-weight:800;letter-spacing:-0.02em;color:#0b1220;text-wrap:balance">Ce que votre intendance et votre DSI vérifient.</h2><ul style="margin:56px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:56px 48px"><li><h3 style="margin:0 0 0;font-size:20px;font-weight:800;letter-spacing:-0.01em;color:#0b1220">Licences, devis, factures</h3><p style="margin:10px 0 0;font-size:16px;line-height:1.65;font-weight:500;color:#3c4043">Ajout et retrait d’élèves, bons de commande, factures déposées sur Chorus Pro, conventions.</p><p style="margin:16px 0 0"><a href="{{ route('ressource') }}?outil=espace-etablissement" style="font-size:16px;font-weight:700;color:#0b57d0;text-decoration:none">Espace établissement →</a></p></li><li><h3 style="margin:0 0 0;font-size:20px;font-weight:800;letter-spacing:-0.01em;color:#0b1220">Intégration et sécurité</h3><p style="margin:10px 0 0;font-size:16px;line-height:1.65;font-weight:500;color:#3c4043">Hébergement en France, RGPD, prérequis réseau, authentification unique.</p><p style="margin:16px 0 0"><a href="{{ route('ressource') }}?outil=integration" style="font-size:16px;font-weight:700;color:#0b57d0;text-decoration:none">Fiche technique →</a></p></li><li><h3 style="margin:0 0 0;font-size:20px;font-weight:800;letter-spacing:-0.01em;color:#0b1220">Une bibliothèque à dupliquer</h3><p style="margin:10px 0 0;font-size:16px;line-height:1.65;font-weight:500;color:#3c4043">Des séquences reliées aux référentiels : cours, TD, quiz et lab. Les quiz s’exportent en GIFT et Moodle XML.</p><p style="margin:16px 0 0"><a href="{{ route('ressource') }}?outil=bibliotheque" style="font-size:16px;font-weight:700;color:#0b57d0;text-decoration:none">Voir la bibliothèque →</a></p></li></ul></div></section><section id="devis" style="padding:112px 20px 128px;scroll-margin-top:80px"><div style="max-width:640px;margin:0 auto"><h2 style="margin:12px 0 0;font-size:clamp(30px,4vw,44px);line-height:1.1;font-weight:800;letter-spacing:-0.02em;color:#0b1220;text-wrap:balance">Équiper votre établissement.</h2><p style="margin:24px 0 0;max-width:660px;font-size:20px;line-height:1.6;font-weight:500;color:#3c4043;text-wrap:pretty">Dites-nous combien de classes et quelles formations. On vous répond avec une proposition.</p><div style="margin-top:40px"><form action="apercu-etablissements.html" method="post" class="grid gap-5 border border-[#e3e5e8] rounded-2xl bg-[#eef0fd] p-7 sm:grid-cols-2 lg:col-span-7">
@csrf
            <label class="grid gap-2 font-extrabold">Nom<input name="nom" required class="w-full border border-[#e3e5e8] rounded-2xl bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#f8f9fa] focus:outline-none"></label>
            <label class="grid gap-2 font-extrabold">Établissement<input name="etablissement" required class="w-full border border-[#e3e5e8] rounded-2xl bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#f8f9fa] focus:outline-none"></label>
            <label class="grid gap-2 font-extrabold sm:col-span-2">E-mail professionnel<input type="email" name="email" required class="w-full border border-[#e3e5e8] rounded-2xl bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#f8f9fa] focus:outline-none"></label>
            <label class="grid gap-2 font-extrabold sm:col-span-2">Votre besoin<textarea name="message" rows="4" class="w-full border border-[#e3e5e8] rounded-2xl bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#f8f9fa] focus:outline-none" placeholder="2 classes de BTS SIO, 30 élèves chacune"></textarea></label>
            <div class="sm:col-span-2"><button type="submit" class="inline-flex items-center gap-4 border border-[#e3e5e8] rounded-2xl bg-black px-6 py-4 text-lg font-extrabold text-white transition-transform hover:bg-[#ec3013].5.5 active:shadow-none">Envoyer la demande <span class="font-mono" aria-hidden="true">→</span></button></div>
        </form></div></div></section>
@endsection