Paillasse/portail/resources/views/visio.blade.php
Adam Belkacemi e4a6aaebb1 ajoute les pages légales, la purge RGPD et sert polices et scripts depuis le portail
Pages /legal et /confidentialite réécrites d'après le système réel, purge
des classes archivées depuis 90 jours (prouvée par Pest), archivage côté
prof. Polices, xterm.js et CodeMirror ne sont plus chargés depuis Google
ni jsDelivr. Pages d'aperçu signalées, sans vrais établissements ni faux
chiffres. Journaux Laravel gardés 14 jours.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-09 21:07:25 +02:00

190 lines
46 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>Visio de classe · Syllabus</title>
{{ Vite::fonts() }}
<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="{{ asset('vendor/xterm/xterm.css') }}">
<script defer src="{{ asset('vendor/xterm/xterm.js') }}"></script>
<script defer src="{{ asset('vendor/xterm/addon-fit.js') }}"></script>
<script defer src="{{ asset('js/paillasse-terminal.js') }}"></script>
<link rel="stylesheet" href="css/syllabus-theme.css">
</head>
<body class="bg-white font-display text-black antialiased">
@include('partials.apercu')
<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 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] [&::-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="apercu-ressource.html?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="apercu-ressource.html?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="apercu-ressource.html?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="apercu-ressource.html?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="apercu-ressource.html?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="apercu-ressource.html?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="apercu-ressource.html?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="apercu-ressource.html?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="apercu-ressource.html?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="apercu-ressource.html?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="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:#b06000"></span>Préparer</p><p style="margin:4px 0 0 20px;min-height:32px;font-size:12px;line-height:16px;font-weight:500;color:#5f6368">Prêt à projeter ou imprimer</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="apercu-ressource.html?outil=bibliotheque" 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]">Bibliothèque du prof</a></li><li><a href="apercu-ressource.html?outil=banque" 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]">Banque de sujets</a></li><li><a href="apercu-ressource.html?outil=generateur" 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]">Générateur de TD</a></li><li><a href="apercu-ressource.html?outil=td-imprimable" 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]">TD à imprimer</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:#c5221f"></span>Évaluer</p><p style="margin:4px 0 0 20px;min-height:32px;font-size:12px;line-height:16px;font-weight:500;color:#5f6368">Quiz, examens, devoirs</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="apercu-ressource.html?outil=quiz" 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]">Quiz flash</a></li><li><a href="apercu-ressource.html?outil=sujet" 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]">Créer un sujet</a></li><li><a href="apercu-ressource.html?outil=devoirs" 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]">Devoirs maison</a></li><li><a href="apercu-ressource.html?outil=correction" 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]">Corriger les copies</a></li><li><a href="apercu-ressource.html?outil=export" 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]">Export Pronote / ENT</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:#8430ce"></span>Établissement</p><p style="margin:4px 0 0 20px;min-height:32px;font-size:12px;line-height:16px;font-weight:500;color:#5f6368">Vie scolaire, direction, DSI</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="apercu-ressource.html?outil=vie-scolaire" 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]">Vie scolaire</a></li><li><a href="apercu-ressource.html?outil=cohortes" 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]">Suivi des cohortes</a></li><li><a href="apercu-ressource.html?outil=espace-etablissement" 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 établissement</a></li><li><a href="apercu-ressource.html?outil=academie" 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]">Académie</a></li><li><a href="apercu-ressource.html?outil=integration" 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]">Intégration et sécurité</a></li></ul></div></div>
<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') }}" 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') }}" 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 style="background:#f8f9fa">
<section style="padding:40px 20px 8px"><div style="max-width:1280px;margin:0 auto">
<p style="margin:0;display:inline-flex;align-items:center;gap:8px;border:1px solid #b8c1cf;border-radius:999px;background:#fff;padding:4px 12px;font-size:14px;font-weight:700;color:#1d3fa8">Visio de classe</p>
<h1 style="margin:14px 0 0;font-size:clamp(30px,4vw,44px);line-height:1.1;font-weight:800;letter-spacing:-0.02em;color:#0b1220">La classe à distance, sans brouhaha.</h1>
<p style="margin:12px 0 0;max-width:720px;font-size:18px;line-height:1.6;font-weight:500;color:#3c4043">Tous les élèves arrivent en sourdine. Ils lèvent la main, vous donnez la parole, un à la fois.</p>
<div role="tablist" aria-label="Vue" style="margin-top:28px;display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:999px;background:#eef0f3">
<button type="button" role="tab" data-vue="prof" style="display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:700;cursor:pointer;border:0">Vue prof</button>
<button type="button" role="tab" data-vue="eleve" style="display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:700;cursor:pointer;border:0">Vue élève</button>
<button type="button" role="tab" data-vue="mobile" style="display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:700;cursor:pointer;border:0">Mobile élève</button>
</div>
<p style="margin:12px 0 0;font-size:14px;font-weight:600;color:#5f6368">Les vues sont reliées : levez la main côté élève (Léa M.), puis donnez-lui la parole côté prof.</p>
</div></section>
<section data-panel="prof" style="padding:20px 20px 72px"><div class="grid gap-5 lg:grid-cols-[minmax(0,1fr)_360px]" style="max-width:1280px;margin:0 auto">
<div style="background:#fff;border:1px solid #e3e5e8;border-radius:20px;overflow:hidden;min-width:0">
<div style="display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid #e3e5e8">
<div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap"><span style="display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:999px;background:#fce8e6;color:#b3261e;font-size:13px;font-weight:800"><span style="width:8px;height:8px;border-radius:50%;background:#d93025"></span>En direct · <span id="v-chrono" style="font-family:'IBM Plex Mono',monospace">00:24:12</span></span><span style="font-size:14px;font-weight:700;color:#0b1220">BTS SIO 1 · Groupe A</span><span id="v-nb" style="font-size:14px;font-weight:600;color:#5f6368"></span></div>
<div style="display:flex;gap:8px;flex-wrap:wrap"><button type="button" id="v-mute-all" style="display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:700;cursor:pointer;border:1px solid #dadce0;background:#fff;color:#0b1220"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="2" width="6" height="12" rx="3"/><path d="M19 10v2a7 7 0 0 1-14 0v-2M12 19v3M3 3l18 18"/></svg>Couper tous les micros</button><button type="button" style="display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:700;cursor:pointer;border:0;background:#d93025;color:#fff">Terminer la visio</button></div>
</div>
<div id="v-parole" style="display:none"></div>
<ul id="v-grille" aria-label="Participants" style="margin:0;padding:20px;list-style:none;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))"></ul>
</div>
<div style="display:grid;gap:20px;align-content:start;min-width:0">
<section style="background:#fff;border:1px solid #e3e5e8;border-radius:20px" aria-labelledby="t-mains"><div style="display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #e3e5e8"><h2 id="t-mains" style="margin:0;font-size:16px;font-weight:800;color:#0b1220">Mains levées</h2><span id="v-nb-mains" style="min-width:28px;height:28px;padding:0 8px;border-radius:999px;background:#fef7e0;color:#7a4b00;display:inline-grid;place-items:center;font-size:13px;font-weight:800"></span></div><ol id="v-mains" style="margin:0;padding:8px 12px;list-style:none"></ol><p style="margin:0;padding:0 20px 14px;font-size:13px;font-weight:600;color:#5f6368">Premier arrivé en haut.</p></section>
<section style="background:#fff;border:1px solid #e3e5e8;border-radius:20px" aria-labelledby="t-attente"><div style="display:flex;align-items:center;justify-content:space-between;gap:8px;padding:16px 20px;border-bottom:1px solid #e3e5e8"><h2 id="t-attente" style="margin:0;font-size:16px;font-weight:800;color:#0b1220">Salle d’attente</h2><button type="button" id="v-tout-admettre" style="border:0;background:none;color:#0b57d0;font-size:14px;font-weight:700;cursor:pointer">Tout admettre</button></div><ul id="v-attente" style="margin:0;padding:8px 12px;list-style:none"></ul></section>
<section style="background:#fff;border:1px solid #e3e5e8;border-radius:20px" aria-labelledby="t-chat"><div style="display:flex;align-items:center;justify-content:space-between;gap:8px;padding:16px 20px;border-bottom:1px solid #e3e5e8"><h2 id="t-chat" style="margin:0;font-size:16px;font-weight:800;color:#0b1220">Chat des élèves</h2><button type="button" id="v-chat-switch" role="switch" aria-checked="false" aria-label="Activer le chat des élèves" style="position:relative;width:44px;height:26px;border-radius:999px;border:0;cursor:pointer;transition:background .2s"><span style="position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .2s"></span></button></div><div id="v-chat" style="padding:16px 20px"></div></section>
</div>
</div></section>
<section data-panel="eleve" style="padding:20px 20px 72px"><div style="max-width:1100px;margin:0 auto;background:#fff;border:1px solid #e3e5e8;border-radius:20px;overflow:hidden">
<div style="display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid #e3e5e8"><span style="font-size:14px;font-weight:700;color:#0b1220">BTS SIO 1 · Groupe A · VLAN et routage</span><span data-statut-e style="display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px;border-radius:999px;font-size:14px;font-weight:700"></span></div>
<div style="padding:20px"><div style="position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#202124;display:grid;place-items:center">
<div style="text-align:center"><div style="width:120px;height:120px;margin:0 auto;border-radius:50%;background:#8ab4f8;display:grid;place-items:center;font-size:42px;font-weight:800;color:#0b1220">MB</div><p style="margin:16px 0 0;font-size:18px;font-weight:700;color:#fff">M. B. · votre professeur</p></div>
<span style="position:absolute;left:16px;bottom:16px;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font-size:13px;font-weight:700"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="2" width="6" height="12" rx="3"/><path d="M19 10v2a7 7 0 0 1-14 0v-2M12 19v3"/></svg>M. B.</span>
<div style="position:absolute;right:16px;bottom:16px;width:min(26%,200px);aspect-ratio:4/3;border-radius:12px;background:#3c4043;border:2px solid rgba(255,255,255,.25);display:grid;place-items:center"><span style="font-size:20px;font-weight:800;color:#fff">LM</span><span style="position:absolute;left:8px;bottom:6px;font-size:12px;font-weight:700;color:#fff">Vous</span></div>
</div></div>
<div style="display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;padding:4px 20px 24px">
<button type="button" data-micro-e aria-label="Micro" style="width:52px;height:52px;border-radius:50%;display:grid;place-items:center"></button>
<button type="button" data-cam-e aria-label="Caméra" style="width:52px;height:52px;border-radius:50%;display:grid;place-items:center"></button>
<button type="button" data-main-e aria-pressed="false" class="border border-[#e3e5e8] rounded-2xl bg-[#fce8e6] px-5 py-4 text-left text-lg font-extrabold aria-pressed:bg-[#fef7e0]" style="display:inline-flex;align-items:center;gap:10px"><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 11V6a2 2 0 0 0-4 0v5"/><path d="M14 10V4a2 2 0 0 0-4 0v6"/><path d="M10 10.5V6a2 2 0 0 0-4 0v8"/><path d="M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15"/></svg><span>Lever la main</span></button>
<a href="{{ route('espace.eleve') }}" style="display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:700;cursor:pointer;height:52px;padding:0 22px;background:#d93025;color:#fff;text-decoration:none"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/></svg>Quitter</a>
</div>
<p data-aide-e style="margin:0;padding:0 20px 24px;text-align:center;font-size:14px;font-weight:600;color:#5f6368"></p>
</div></section>
<section data-panel="mobile" style="padding:20px 20px 72px"><div style="display:flex;justify-content:center">
<div style="width:min(100%,390px);height:780px;border-radius:44px;border:10px solid #111;background:#202124;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 24px 48px -16px rgba(15,23,42,.35)">
<div style="padding:18px 20px 10px;display:flex;align-items:center;justify-content:space-between;color:#fff"><span style="font-size:15px;font-weight:700">BTS SIO 1 · A</span><span style="display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:#f28b82"><span style="width:7px;height:7px;border-radius:50%;background:#f28b82"></span>En direct</span></div>
<div style="flex:1;position:relative;margin:0 12px;border-radius:20px;background:#3c4043;display:grid;place-items:center">
<div style="text-align:center"><div style="width:96px;height:96px;margin:0 auto;border-radius:50%;background:#8ab4f8;display:grid;place-items:center;font-size:34px;font-weight:800;color:#0b1220">MB</div><p style="margin:12px 0 0;font-size:16px;font-weight:700;color:#fff">M. B.</p></div>
<div style="position:absolute;right:12px;top:12px;width:88px;height:118px;border-radius:12px;background:#5f6368;display:grid;place-items:center;font-size:16px;font-weight:800;color:#fff">LM</div>
</div>
<div style="padding:14px 12px 0;display:flex;justify-content:center"><span data-statut-e style="display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:700"></span></div>
<div style="padding:14px 16px 26px;display:grid;gap:12px">
<button type="button" data-main-e aria-pressed="false" class="border border-[#e3e5e8] rounded-2xl bg-[#fce8e6] px-5 py-4 text-lg font-extrabold aria-pressed:bg-[#fef7e0]" style="display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px"><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 11V6a2 2 0 0 0-4 0v5"/><path d="M14 10V4a2 2 0 0 0-4 0v6"/><path d="M10 10.5V6a2 2 0 0 0-4 0v8"/><path d="M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15"/></svg><span>Lever la main</span></button>
<div style="display:flex;justify-content:space-between;gap:12px">
<button type="button" data-micro-e aria-label="Micro" style="flex:1;height:52px;border-radius:999px;display:grid;place-items:center"></button>
<button type="button" data-cam-e aria-label="Caméra" style="flex:1;height:52px;border-radius:999px;display:grid;place-items:center"></button>
<a href="{{ route('espace.eleve') }}" aria-label="Quitter" style="flex:1;height:52px;border-radius:999px;display:grid;place-items:center;background:#d93025;color:#fff"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/></svg></a>
</div>
</div>
</div>
</div></section>
<script>
(function () {
var IC = {"mic":"<svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"9\" y=\"2\" width=\"6\" height=\"12\" rx=\"3\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2M12 19v3\"/></svg>","micoff":"<svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"9\" y=\"2\" width=\"6\" height=\"12\" rx=\"3\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2M12 19v3M3 3l18 18\"/></svg>","cam":"<svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m16 13 5.2 3.1a.5.5 0 0 0 .8-.4V8.3a.5.5 0 0 0-.8-.4L16 11\"/><rect x=\"2\" y=\"6\" width=\"14\" height=\"12\" rx=\"2\"/></svg>","camoff":"<svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m16 13 5.2 3.1a.5.5 0 0 0 .8-.4V8.3a.5.5 0 0 0-.8-.4L16 11\"/><rect x=\"2\" y=\"6\" width=\"14\" height=\"12\" rx=\"2\"/><path d=\"M2 2l20 20\"/></svg>","hand":"<svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M18 11V6a2 2 0 0 0-4 0v5\"/><path d=\"M14 10V4a2 2 0 0 0-4 0v6\"/><path d=\"M10 10.5V6a2 2 0 0 0-4 0v8\"/><path d=\"M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15\"/></svg>"};
var IC22 = {"mic":"<svg viewBox=\"0 0 24 24\" width=\"22\" height=\"22\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"9\" y=\"2\" width=\"6\" height=\"12\" rx=\"3\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2M12 19v3\"/></svg>","micoff":"<svg viewBox=\"0 0 24 24\" width=\"22\" height=\"22\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"9\" y=\"2\" width=\"6\" height=\"12\" rx=\"3\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2M12 19v3M3 3l18 18\"/></svg>","cam":"<svg viewBox=\"0 0 24 24\" width=\"22\" height=\"22\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m16 13 5.2 3.1a.5.5 0 0 0 .8-.4V8.3a.5.5 0 0 0-.8-.4L16 11\"/><rect x=\"2\" y=\"6\" width=\"14\" height=\"12\" rx=\"2\"/></svg>","camoff":"<svg viewBox=\"0 0 24 24\" width=\"22\" height=\"22\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m16 13 5.2 3.1a.5.5 0 0 0 .8-.4V8.3a.5.5 0 0 0-.8-.4L16 11\"/><rect x=\"2\" y=\"6\" width=\"14\" height=\"12\" rx=\"2\"/><path d=\"M2 2l20 20\"/></svg>"};
var S = {
eleves: ['Léa M.','Yanis B.','Adam D.','Rayan H.','Emma G.','Lucas M.','Jade F.','Maël G.','Zoé L.','Camille D.','Sarah N.','Tom L.','Hugo P.'],
mains: [['Yanis B.', 'Lab VLAN · étape 4', 190], ['Adam D.', 'Masque /26', 75], ['Rayan H.', 'Lab VLAN · étape 2', 40]],
attente: ['Nathan R.', 'Inès K.'], parole: null, chat: false, moi: 'Léa M.'
};
var $ = function (s) { return document.querySelector(s); }, $$ = function (s) { return document.querySelectorAll(s); };
var ini = function (n) { return n.split(' ').map(function (p) { return p[0]; }).join(''); };
var duree = function (s) { return s < 60 ? s + ' s' : Math.floor(s / 60) + ' min'; };
var COUL = ['#d2e3fc','#ceead6','#fde293','#fad2cf','#e9d2fd','#cbf0f8'];
var btnB = 'display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:999px;border:0;cursor:pointer;font-size:13px;font-weight:700;white-space:nowrap;';
function enMain(n) { return S.mains.some(function (m) { return m[0] === n; }); }
function donner(n) { S.parole = n; S.mains = S.mains.filter(function (m) { return m[0] !== n; }); rendre(); }
function renderProf() {
$('#v-nb').textContent = (S.eleves.length + 1) + ' participants';
var g = '<li style="position:relative;aspect-ratio:4/3;border-radius:16px;background:#e8f0fe;display:grid;place-items:center"><span style="width:56px;height:56px;border-radius:50%;background:#0b57d0;color:#fff;display:grid;place-items:center;font-size:18px;font-weight:800">MB</span><span style="position:absolute;left:10px;bottom:8px;font-size:13px;font-weight:700;color:#0b1220">M. B. (vous)</span><span style="position:absolute;right:10px;bottom:8px;color:#0b57d0">' + IC.mic + '</span></li>';
g += S.eleves.map(function (n, i) {
var p = S.parole === n, m = enMain(n);
return '<li class="group" style="position:relative;aspect-ratio:4/3;border-radius:16px;background:#f1f3f4;display:grid;place-items:center;' + (p ? 'box-shadow:inset 0 0 0 3px #0b57d0;' : '') + '"><span style="width:56px;height:56px;border-radius:50%;background:' + COUL[i % COUL.length] + ';color:#0b1220;display:grid;place-items:center;font-size:18px;font-weight:800">' + ini(n) + '</span>' +
(m ? '<span style="position:absolute;left:8px;top:8px;display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px;border-radius:999px;background:#fef7e0;color:#7a4b00;font-size:12px;font-weight:800">' + IC.hand.replace(/width="18" height="18"/, 'width="14" height="14"') + 'Main levée</span>' : '') +
(p ? '<span style="position:absolute;left:8px;top:8px;height:24px;padding:0 8px;border-radius:999px;background:#0b57d0;color:#fff;display:inline-flex;align-items:center;font-size:12px;font-weight:800">A la parole</span>' : '') +
'<button type="button" data-exclure="' + n + '" class="opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 focus:opacity-100" style="position:absolute;right:8px;top:8px;height:26px;padding:0 10px;border-radius:999px;border:1px solid #dadce0;background:#fff;color:#b3261e;font-size:12px;font-weight:700;cursor:pointer">Exclure</button>' +
'<span style="position:absolute;left:10px;bottom:8px;font-size:13px;font-weight:700;color:#0b1220">' + n + '</span><span title="' + (p ? 'Micro ouvert' : 'En sourdine') + '" style="position:absolute;right:10px;bottom:8px;color:' + (p ? '#0b57d0' : '#b3261e') + '">' + (p ? IC.mic : IC.micoff) + '</span></li>';
}).join('');
$('#v-grille').innerHTML = g;
var bar = $('#v-parole');
if (S.parole) { bar.style.cssText = 'display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:12px 20px;background:#e8f0fe;border-bottom:1px solid #d2e3fc'; bar.innerHTML = '<span style="display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:#0b57d0">' + IC.mic + S.parole + ' a la parole</span><button type="button" id="v-retirer" style="' + btnB + 'background:#fff;color:#0b1220;border:1px solid #dadce0">Retirer la parole</button>'; }
else bar.style.cssText = 'display:none';
$('#v-nb-mains').textContent = S.mains.length;
$('#v-mains').innerHTML = S.mains.length ? S.mains.map(function (m, i) { return '<li style="display:flex;align-items:center;gap:12px;padding:10px 8px;' + (i ? 'border-top:1px solid #f1f3f4' : '') + '"><span style="width:20px;font-family:IBM Plex Mono,monospace;font-size:13px;font-weight:600;color:#5f6368">' + (i + 1) + '</span><span style="flex:1;min-width:0"><span style="display:block;font-size:15px;font-weight:700;color:#0b1220">' + m[0] + '</span><span style="display:block;font-size:13px;font-weight:500;color:#5f6368">' + m[1] + ' · depuis ' + duree(m[2]) + '</span></span><button type="button" data-donner="' + m[0] + '" style="' + btnB + 'background:#0b57d0;color:#fff">Donner la parole</button></li>'; }).join('') : '<li style="padding:16px 8px;font-size:14px;font-weight:600;color:#5f6368">Aucune main levée.</li>';
$('#v-attente').innerHTML = S.attente.length ? S.attente.map(function (n, i) { return '<li style="display:flex;align-items:center;gap:8px;padding:10px 8px;' + (i ? 'border-top:1px solid #f1f3f4' : '') + '"><span style="flex:1;font-size:15px;font-weight:700;color:#0b1220">' + n + '</span><button type="button" data-refuser="' + n + '" style="' + btnB + 'background:none;color:#5f6368">Refuser</button><button type="button" data-admettre="' + n + '" style="' + btnB + 'background:#e8f0fe;color:#0b57d0">Admettre</button></li>'; }).join('') : '<li style="padding:16px 8px;font-size:14px;font-weight:600;color:#5f6368">Personne en attente.</li>';
var sw = $('#v-chat-switch'); sw.setAttribute('aria-checked', String(S.chat)); sw.style.background = S.chat ? '#0b57d0' : '#9aa0a6'; sw.firstElementChild.style.transform = S.chat ? 'translateX(18px)' : 'none';
$('#v-chat').innerHTML = S.chat ? '<ul style="margin:0;padding:0;list-style:none;display:grid;gap:10px;font-size:14px"><li><b>Sarah N.</b> <span style="color:#3c4043">Le lien du lab ne s’ouvre pas</span></li><li><b>M. B.</b> <span style="color:#3c4043">Actualisez la page, il est dans l’onglet Labs.</span></li></ul><input aria-label="Message" placeholder="Écrire à la classe" style="margin-top:14px;width:100%;height:40px;padding:0 14px;border-radius:999px;border:1px solid #dadce0;font-size:14px">' : '<p style="margin:0;font-size:14px;font-weight:600;color:#5f6368">Chat désactivé. Les élèves ne peuvent pas écrire.</p>';
}
function renderEleve() {
var p = S.parole === S.moi, m = enMain(S.moi);
$$('[data-statut-e]').forEach(function (e) { e.style.background = p ? '#e6f4ea' : '#f1f3f4'; e.style.color = p ? '#137333' : '#3c4043'; e.innerHTML = (p ? IC.mic : IC.micoff) + (p ? 'Tu as la parole' : (m ? 'Main levée · en attente' : 'En sourdine')); });
$$('[data-micro-e],[data-cam-e]').forEach(function (b) { var cam = b.hasAttribute('data-cam-e'); b.disabled = !p; b.innerHTML = cam ? (p ? IC22.cam : IC22.camoff) : (p ? IC22.mic : IC22.micoff); b.style.background = p ? '#e8f0fe' : '#e8eaed'; b.style.color = p ? '#0b57d0' : '#9aa0a6'; b.style.border = '0'; b.style.cursor = p ? 'pointer' : 'not-allowed'; b.title = p ? (cam ? 'Caméra' : 'Micro') : 'Le prof doit te donner la parole'; });
$$('[data-main-e]').forEach(function (b) { b.setAttribute('aria-pressed', String(m)); b.disabled = p; b.style.opacity = p ? '.5' : '1'; b.querySelector('span').textContent = m ? 'Main levée · le prof est prévenu' : 'Lever la main'; });
$('[data-aide-e]').textContent = p ? 'Ton micro et ta caméra sont débloqués. Le prof peut te retirer la parole à tout moment.' : 'Ton micro et ta caméra s’activent quand le prof te donne la parole.';
}
function rendre() { renderProf(); renderEleve(); }
function vue(v) { $$('[data-panel]').forEach(function (p) { p.style.display = p.dataset.panel === v ? '' : 'none'; }); $$('[data-vue]').forEach(function (b) { var on = b.dataset.vue === v; b.setAttribute('aria-selected', String(on)); b.style.background = on ? '#fff' : 'transparent'; b.style.color = on ? '#0b57d0' : '#3c4043'; b.style.boxShadow = on ? '0 1px 2px rgba(15,23,42,.15)' : 'none'; }); try { localStorage.setItem('syllabus-visio-vue', v); } catch (x) {} }
document.addEventListener('click', function (e) {
var t = e.target.closest('button'); if (!t) return;
if (t.dataset.vue) return vue(t.dataset.vue);
if (t.dataset.donner) return donner(t.dataset.donner);
if (t.dataset.admettre) { S.attente = S.attente.filter(function (n) { return n !== t.dataset.admettre; }); S.eleves.push(t.dataset.admettre); return rendre(); }
if (t.dataset.refuser) { S.attente = S.attente.filter(function (n) { return n !== t.dataset.refuser; }); return rendre(); }
if (t.dataset.exclure) { var n = t.dataset.exclure; if (confirm('Exclure ' + n + ' de la visio ?')) { S.eleves = S.eleves.filter(function (x) { return x !== n; }); S.mains = S.mains.filter(function (m) { return m[0] !== n; }); if (S.parole === n) S.parole = null; rendre(); } return; }
if (t.id === 'v-retirer' || t.id === 'v-mute-all') { S.parole = null; return rendre(); }
if (t.id === 'v-tout-admettre') { S.eleves = S.eleves.concat(S.attente); S.attente = []; return rendre(); }
if (t.id === 'v-chat-switch') { S.chat = !S.chat; return rendre(); }
if (t.hasAttribute('data-main-e')) { if (enMain(S.moi)) S.mains = S.mains.filter(function (m) { return m[0] !== S.moi; }); else if (S.parole !== S.moi) S.mains.push([S.moi, 'Lab VLAN · étape 3', 0]); return rendre(); }
});
var t0 = 24 * 60 + 12;
setInterval(function () { t0++; S.mains.forEach(function (m) { m[2]++; }); $('#v-chrono').textContent = [Math.floor(t0 / 3600), Math.floor(t0 / 60) % 60, t0 % 60].map(function (x) { return String(x).padStart(2, '0'); }).join(':'); if (t0 % 15 === 0) renderProf(); }, 1000);
var v0 = 'prof'; try { v0 = new URLSearchParams(location.search).get('vue') || localStorage.getItem('syllabus-visio-vue') || 'prof'; } catch (x) {}
rendre(); vue(v0);
})();
</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="apercu-ressource.html?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="apercu-ressource.html?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="apercu-ressource.html?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="apercu-ressource.html?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="apercu-ressource.html?outil=sujet" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Examens</a></li><li><a href="apercu-ressource.html?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="apercu-ressource.html?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="apercu-ressource.html?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="apercu-ressource.html?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>
<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>
</div>
<div style="border-top:1px solid #e3e5e8">
<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>
</div>
</footer>
</body>
</html>