Paillasse/design/resources/views/vie-scolaire.blade.php
2026-10-06 23:28:18 +02:00

139 lines
55 KiB
PHP
Raw 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>Vie scolaire et intendance · Syllabus</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>
<link rel="stylesheet" href="{{ asset('css/syllabus-theme.css') }}">
</head>
<body class="bg-white font-display text-black antialiased">
<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="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="{{ route('ressource') }}?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="{{ route('ressource') }}?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="{{ route('ressource') }}?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="{{ route('ressource') }}?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="{{ route('ressource') }}?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="{{ route('ressource') }}?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="{{ route('ressource') }}?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="{{ route('ressource') }}?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="{{ route('ressource') }}?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="{{ route('ressource') }}?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="{{ route('ressource') }}?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="{{ route('ressource') }}?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="{{ route('ressource') }}?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="{{ route('ressource') }}?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') }}" @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>
<div class="border-b border-[#e3e5e8] bg-[#f8f9fa]">
<div class="mx-auto grid max-w-[1600px] lg:grid-cols-[240px_minmax(0,1fr)]">
<aside class="border-b border-[#e3e5e8] bg-white p-5 lg:border-b-0 lg:border-r-2">
<p class="font-mono text-[11px] font-semibold uppercase tracking-wider">Établissement</p>
<p class="mt-1 font-extrabold leading-tight">Lycée Jean-Jaurès · Montreuil</p>
<p class="mt-6 font-mono text-[11px] font-semibold uppercase tracking-wider">Je suis</p>
<div id="v-roles" class="mt-2 grid text-sm font-bold"><button type="button" data-role="cpe" class="h-10 border border-[#dadce0] rounded-lg px-3 text-left bg-[#0b57d0] text-white">CPE · vie scolaire</button><button type="button" data-role="direction" class="h-10 border border-[#dadce0] rounded-lg px-3 text-left -mt-0.5 bg-white">Direction</button><button type="button" data-role="intendance" class="h-10 border border-[#dadce0] rounded-lg px-3 text-left -mt-0.5 bg-white">Intendance</button></div>
<p class="mt-6 font-mono text-[11px] font-semibold uppercase tracking-wider">Menu</p>
<ul class="mt-2 grid gap-1"><li data-r="cpe direction"><a href="#alertes" class="flex items-center gap-3 border-2 border-transparent px-3 py-2 text-sm font-bold hover:border-black"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0zM12 9v4M12 17h.01"/></svg><span class="flex-1">Alertes élèves</span></a></li><li data-r="cpe direction"><a href="#classes" class="flex items-center gap-3 border-2 border-transparent px-3 py-2 text-sm font-bold hover:border-black"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8"/></svg><span class="flex-1">Classes</span></a></li><li data-r="cpe direction"><a href="#conseils" class="flex items-center gap-3 border-2 border-transparent px-3 py-2 text-sm font-bold hover:border-black"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg><span class="flex-1">Conseils de classe</span></a></li><li data-r="cpe direction"><a href="#examens" class="flex items-center gap-3 border-2 border-transparent px-3 py-2 text-sm font-bold hover:border-black"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg><span class="flex-1">Journal des examens</span></a></li><li data-r="intendance direction"><a href="#licences" class="flex items-center gap-3 border-2 border-transparent px-3 py-2 text-sm font-bold hover:border-black"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 10h12M4 14h9M19 6a7.7 7.7 0 0 0-5.2-2A7.9 7.9 0 0 0 6 12c0 4.4 3.5 8 7.8 8 2 0 3.8-.8 5.2-2"/></svg><span class="flex-1">Licences et factures</span></a></li><li data-r="intendance direction"><a href="#conso" class="flex items-center gap-3 border-2 border-transparent px-3 py-2 text-sm font-bold hover:border-black"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="2" width="20" height="8"/><rect x="2" y="14" width="20" height="8"/><path d="M6 6h.01M6 18h.01"/></svg><span class="flex-1">Consommation VM</span></a></li></ul>
<div class="mt-6 border border-[#dadce0] rounded-lg bg-[#f8f9fa] p-3 text-xs font-semibold"><p class="font-extrabold">Accès limité et tracé</p><p class="mt-1">Chaque consultation de fiche élève est journalisée (RGPD). Données hébergées en France, à Paris.</p></div>
</aside>
<div class="min-w-0 p-5 lg:p-8">
<div class="flex flex-wrap items-end justify-between gap-4">
<div><p class="font-mono text-xs font-semibold">Vie scolaire et intendance</p><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 id="v-titre" class="mt-1 text-4xl font-extrabold tracking-tight">Tableau de bord CPE</h1></div><p class="mt-1 font-semibold">6 classes · 118 élèves · semaine du 28 septembre</p></div>
<div class="flex flex-wrap gap-3">
<button type="button" data-r="cpe direction" class="inline-flex h-11 items-center gap-2 border border-[#dadce0] rounded-lg bg-white px-4 text-sm font-extrabold hover:bg-[#f8f9fa]"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>Exporter pour le conseil</button>
<button type="button" data-r="intendance" class="inline-flex h-11 items-center gap-2 border border-[#dadce0] rounded-lg bg-[#fef7e0] px-4 text-sm font-extrabold"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 10h12M4 14h9M19 6a7.7 7.7 0 0 0-5.2-2A7.9 7.9 0 0 0 6 12c0 4.4 3.5 8 7.8 8 2 0 3.8-.8 5.2-2"/></svg>Demander un devis</button>
</div>
</div>
<ul class="mt-6 grid grid-cols-2 gap-4 md:grid-cols-3 xl:grid-cols-5" aria-label="Indicateurs">
<li data-r="cpe direction" class="flex flex-col border border-[#dadce0] rounded-lg bg-white p-4"><div class="flex items-center justify-between gap-2"><p class="text-sm font-bold">Alertes ouvertes</p><span class="h-2.5 w-2.5 bg-[#ec3013]"></span></div><p class="mt-2 font-mono text-3xl font-semibold leading-none">5</p><p class="mt-3 text-xs font-bold">2 priorité haute</p></li><li data-r="cpe direction" class="flex flex-col border border-[#dadce0] rounded-lg bg-white p-4"><div class="flex items-center justify-between gap-2"><p class="text-sm font-bold">Présence moyenne</p><span class="h-2.5 w-2.5 bg-[#e6f4ea]"></span></div><p class="mt-2 font-mono text-3xl font-semibold leading-none">92 %</p><p class="mt-3 text-xs font-bold">sur les séances en ligne</p></li><li data-r="cpe direction" class="flex flex-col border border-[#dadce0] rounded-lg bg-white p-4"><div class="flex items-center justify-between gap-2"><p class="text-sm font-bold">DM rendus</p><span class="h-2.5 w-2.5 bg-[#eef0fd]"></span></div><p class="mt-2 font-mono text-3xl font-semibold leading-none">75 %</p><p class="mt-3 text-xs font-bold">toutes classes</p></li><li data-r="cpe direction" class="flex flex-col border border-[#dadce0] rounded-lg bg-white p-4"><div class="flex items-center justify-between gap-2"><p class="text-sm font-bold">Examens surveillés</p><span class="h-2.5 w-2.5 bg-[#fce8e6]"></span></div><p class="mt-2 font-mono text-3xl font-semibold leading-none">4</p><p class="mt-3 text-xs font-bold">cette semaine · 7 sorties</p></li><li data-r="cpe direction" class="flex flex-col border border-[#dadce0] rounded-lg bg-white p-4"><div class="flex items-center justify-between gap-2"><p class="text-sm font-bold">Observations</p><span class="h-2.5 w-2.5 bg-[#fef7e0]"></span></div><p class="mt-2 font-mono text-3xl font-semibold leading-none">38</p><p class="mt-3 text-xs font-bold">prêtes pour les conseils</p></li>
<li data-r="intendance" class="flex flex-col border border-[#dadce0] rounded-lg bg-white p-4"><div class="flex items-center justify-between gap-2"><p class="text-sm font-bold">Licences</p><span class="h-2.5 w-2.5 bg-[#e6f4ea]"></span></div><p class="mt-2 font-mono text-3xl font-semibold leading-none">118/120</p><p class="mt-3 text-xs font-bold">renouvellement 31/08/2027</p></li><li data-r="intendance" class="flex flex-col border border-[#dadce0] rounded-lg bg-white p-4"><div class="flex items-center justify-between gap-2"><p class="text-sm font-bold">Coût annuel</p><span class="h-2.5 w-2.5 bg-[#fef7e0]"></span></div><p class="mt-2 font-mono text-3xl font-semibold leading-none">2 832 €</p><p class="mt-3 text-xs font-bold">HT · 24 € / élève</p></li><li data-r="intendance" class="flex flex-col border border-[#dadce0] rounded-lg bg-white p-4"><div class="flex items-center justify-between gap-2"><p class="text-sm font-bold">Heures de VM</p><span class="h-2.5 w-2.5 bg-[#eef0fd]"></span></div><p class="mt-2 font-mono text-3xl font-semibold leading-none">612 h</p><p class="mt-3 text-xs font-bold">sur 1 770 h incluses ce mois</p></li><li data-r="intendance" class="flex flex-col border border-[#dadce0] rounded-lg bg-white p-4"><div class="flex items-center justify-between gap-2"><p class="text-sm font-bold">Factures</p><span class="h-2.5 w-2.5 bg-[#fce8e6]"></span></div><p class="mt-2 font-mono text-3xl font-semibold leading-none">3</p><p class="mt-3 text-xs font-bold">1 en attente Chorus Pro</p></li><li data-r="intendance" class="flex flex-col border border-[#dadce0] rounded-lg bg-white p-4"><div class="flex items-center justify-between gap-2"><p class="text-sm font-bold">Classes actives</p><span class="h-2.5 w-2.5 bg-white"></span></div><p class="mt-2 font-mono text-3xl font-semibold leading-none">6</p><p class="mt-3 text-xs font-bold">6 enseignants</p></li>
</ul>
<section id="alertes" data-r="cpe direction" class="mt-6 border border-[#dadce0] rounded-lg bg-white" aria-labelledby="t-al">
<div class="flex flex-wrap items-center justify-between gap-3 border-b border-[#e3e5e8] p-4 bg-[#f8f9fa]"><h2 id="t-al" class="flex items-center gap-2 text-lg font-extrabold"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0zM12 9v4M12 17h.01"/></svg>Alertes élèves, toutes classes</h2><p class="font-mono text-xs font-semibold">remontées par les profs et par Syllabus</p></div>
<div class="overflow-x-auto"><table class="w-full min-w-[860px] border-collapse text-left text-sm"><thead class="border-b border-[#e3e5e8] bg-[#f8f9fa] font-mono text-[11px] uppercase tracking-wider"><tr><th class="px-4 py-3 font-semibold">Priorité</th><th class="px-4 py-3 font-semibold">Élève</th><th class="px-4 py-3 font-semibold">Signal</th><th class="px-4 py-3 font-semibold">Prof référent</th><th class="px-4 py-3 font-semibold">Action</th></tr></thead><tbody id="v-alertes">
<tr class="border-b border-[#e3e5e8] last:border-b-0 hover:bg-[#f8f9fa]"><td class="px-4 py-3"><span class="inline-block border border-[#dadce0] rounded-lg px-2 py-0.5 text-xs font-extrabold" style="background:#ec3013;color:#fff">Haute</span></td><td class="px-4 py-3"><p class="font-bold">Lucas M.</p><p class="font-mono text-xs">BTS SIO 1 A</p></td><td class="px-4 py-3"><p class="font-bold">Décrochage dans 3 matières</p><p class="text-xs font-semibold">QCM < 8 en réseaux, maths et CEJM</p></td><td class="px-4 py-3 font-semibold">M. Belkacemi</td><td class="px-4 py-3"><select data-i="0" class="h-9 border border-[#dadce0] rounded-lg bg-white px-2 text-xs font-bold"><option>Choisir…</option><option>Convoquer l’élève</option><option>Contacter la famille</option><option>Échanger avec le prof</option><option>Proposer un tutorat</option><option>Clore l’alerte</option></select></td></tr><tr class="border-b border-[#e3e5e8] last:border-b-0 hover:bg-[#f8f9fa]"><td class="px-4 py-3"><span class="inline-block border border-[#dadce0] rounded-lg px-2 py-0.5 text-xs font-extrabold" style="background:#ec3013;color:#fff">Haute</span></td><td class="px-4 py-3"><p class="font-bold">Léa M.</p><p class="font-mono text-xs">BTS SIO 1 A</p></td><td class="px-4 py-3"><p class="font-bold">Baisse continue sur 4 semaines</p><p class="text-xs font-semibold">12 → 7,5 de moyenne QCM</p></td><td class="px-4 py-3 font-semibold">M. Belkacemi</td><td class="px-4 py-3"><select data-i="1" class="h-9 border border-[#dadce0] rounded-lg bg-white px-2 text-xs font-bold"><option>Choisir…</option><option>Convoquer l’élève</option><option>Contacter la famille</option><option>Échanger avec le prof</option><option>Proposer un tutorat</option><option>Clore l’alerte</option></select></td></tr><tr class="border-b border-[#e3e5e8] last:border-b-0 hover:bg-[#f8f9fa]"><td class="px-4 py-3"><span class="inline-block border border-[#dadce0] rounded-lg px-2 py-0.5 text-xs font-extrabold" style="background:#FFD23F;color:#000">Moyenne</span></td><td class="px-4 py-3"><p class="font-bold">Enzo B.</p><p class="font-mono text-xs">Terminale NSI</p></td><td class="px-4 py-3"><p class="font-bold">5 DM non rendus</p><p class="text-xs font-semibold">Depuis la rentrée</p></td><td class="px-4 py-3 font-semibold">Mme Roche</td><td class="px-4 py-3"><select data-i="2" class="h-9 border border-[#dadce0] rounded-lg bg-white px-2 text-xs font-bold"><option>Choisir…</option><option>Convoquer l’élève</option><option>Contacter la famille</option><option>Échanger avec le prof</option><option>Proposer un tutorat</option><option>Clore l’alerte</option></select></td></tr><tr class="border-b border-[#e3e5e8] last:border-b-0 hover:bg-[#f8f9fa]"><td class="px-4 py-3"><span class="inline-block border border-[#dadce0] rounded-lg px-2 py-0.5 text-xs font-extrabold" style="background:#FFD23F;color:#000">Moyenne</span></td><td class="px-4 py-3"><p class="font-bold">Camille D.</p><p class="font-mono text-xs">BTS SIO 1 A</p></td><td class="px-4 py-3"><p class="font-bold">3 sorties pendant un examen</p><p class="text-xs font-semibold">E6 blanc · 12 s au total</p></td><td class="px-4 py-3 font-semibold">M. Belkacemi</td><td class="px-4 py-3"><select data-i="3" class="h-9 border border-[#dadce0] rounded-lg bg-white px-2 text-xs font-bold"><option>Choisir…</option><option>Convoquer l’élève</option><option>Contacter la famille</option><option>Échanger avec le prof</option><option>Proposer un tutorat</option><option>Clore l’alerte</option></select></td></tr><tr class="border-b border-[#e3e5e8] last:border-b-0 hover:bg-[#f8f9fa]"><td class="px-4 py-3"><span class="inline-block border border-[#dadce0] rounded-lg px-2 py-0.5 text-xs font-extrabold" style="background:#FFD23F;color:#000">Moyenne</span></td><td class="px-4 py-3"><p class="font-bold">Mathis C.</p><p class="font-mono text-xs">BTS CIEL 2</p></td><td class="px-4 py-3"><p class="font-bold">Absences répétées</p><p class="text-xs font-semibold">4 séances de TP manquées</p></td><td class="px-4 py-3 font-semibold">M. Arnaud</td><td class="px-4 py-3"><select data-i="4" class="h-9 border border-[#dadce0] rounded-lg bg-white px-2 text-xs font-bold"><option>Choisir…</option><option>Convoquer l’élève</option><option>Contacter la famille</option><option>Échanger avec le prof</option><option>Proposer un tutorat</option><option>Clore l’alerte</option></select></td></tr><tr class="border-b border-[#e3e5e8] last:border-b-0 hover:bg-[#f8f9fa]"><td class="px-4 py-3"><span class="inline-block border border-[#dadce0] rounded-lg px-2 py-0.5 text-xs font-extrabold" style="background:#7CF2C0;color:#000">Positif</span></td><td class="px-4 py-3"><p class="font-bold">Inès K.</p><p class="font-mono text-xs">BTS SIO 1 A</p></td><td class="px-4 py-3"><p class="font-bold">Excellence dans toutes les matières</p><p class="text-xs font-semibold">Proposée pour le tutorat</p></td><td class="px-4 py-3 font-semibold">M. Belkacemi</td><td class="px-4 py-3"><select data-i="5" class="h-9 border border-[#dadce0] rounded-lg bg-white px-2 text-xs font-bold"><option>Choisir…</option><option>Convoquer l’élève</option><option>Contacter la famille</option><option>Échanger avec le prof</option><option>Proposer un tutorat</option><option>Clore l’alerte</option></select></td></tr>
</tbody></table></div>
</section>
<section id="classes" data-r="cpe direction" class="mt-6 border border-[#dadce0] rounded-lg bg-white" aria-labelledby="t-cl">
<div class="flex flex-wrap items-center justify-between gap-3 border-b border-[#e3e5e8] p-4"><h2 id="t-cl" class="flex items-center gap-2 text-lg font-extrabold"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8"/></svg>Toutes les classes</h2></div>
<div class="overflow-x-auto"><table class="w-full min-w-[820px] border-collapse text-left text-sm"><thead class="border-b border-[#e3e5e8] bg-[#f8f9fa] font-mono text-[11px] uppercase tracking-wider"><tr><th class="px-4 py-3 font-semibold">Classe</th><th class="px-4 py-3 font-semibold">Enseignant</th><th class="px-4 py-3 font-semibold">Élèves</th><th class="px-4 py-3 font-semibold">Moy. QCM</th><th class="px-4 py-3 font-semibold">Alertes</th><th class="px-4 py-3 font-semibold">DM rendus</th><th class="px-4 py-3 font-semibold">Présence</th></tr></thead><tbody>
<tr class="border-b border-[#e3e5e8] last:border-b-0 hover:bg-[#f8f9fa]"><td class="px-4 py-3 font-bold">BTS SIO 1 · A</td><td class="px-4 py-3 font-semibold">M. Belkacemi</td><td class="px-4 py-3 font-mono font-semibold">16</td><td class="px-4 py-3 font-mono font-semibold">13,4</td><td class="px-4 py-3"><span class="inline-grid h-7 min-w-7 place-items-center border border-[#dadce0] rounded-lg px-1 font-mono text-xs font-semibold" style="background:#ec3013;color:#fff">3</span></td><td class="px-4 py-3"><span class="flex items-center gap-2"><span class="h-2.5 w-24 border border-[#dadce0] rounded-lg"><span class="block h-full bg-black" style="width:81%"></span></span><span class="font-mono text-xs font-semibold">81 %</span></span></td><td class="px-4 py-3 font-mono font-semibold">94 %</td></tr><tr class="border-b border-[#e3e5e8] last:border-b-0 hover:bg-[#f8f9fa]"><td class="px-4 py-3 font-bold">BTS SIO 1 · B</td><td class="px-4 py-3 font-semibold">M. Belkacemi</td><td class="px-4 py-3 font-mono font-semibold">17</td><td class="px-4 py-3 font-mono font-semibold">12,8</td><td class="px-4 py-3"><span class="inline-grid h-7 min-w-7 place-items-center border border-[#dadce0] rounded-lg px-1 font-mono text-xs font-semibold" style="background:#FFD23F;color:#000">2</span></td><td class="px-4 py-3"><span class="flex items-center gap-2"><span class="h-2.5 w-24 border border-[#dadce0] rounded-lg"><span class="block h-full bg-black" style="width:76%"></span></span><span class="font-mono text-xs font-semibold">76 %</span></span></td><td class="px-4 py-3 font-mono font-semibold">91 %</td></tr><tr class="border-b border-[#e3e5e8] last:border-b-0 hover:bg-[#f8f9fa]"><td class="px-4 py-3 font-bold">BTS SIO 2 · SISR</td><td class="px-4 py-3 font-semibold">Mme Roche</td><td class="px-4 py-3 font-mono font-semibold">14</td><td class="px-4 py-3 font-mono font-semibold">13,9</td><td class="px-4 py-3"><span class="inline-grid h-7 min-w-7 place-items-center border border-[#dadce0] rounded-lg px-1 font-mono text-xs font-semibold" style="background:#fff;color:#000">1</span></td><td class="px-4 py-3"><span class="flex items-center gap-2"><span class="h-2.5 w-24 border border-[#dadce0] rounded-lg"><span class="block h-full bg-black" style="width:88%"></span></span><span class="font-mono text-xs font-semibold">88 %</span></span></td><td class="px-4 py-3 font-mono font-semibold">96 %</td></tr><tr class="border-b border-[#e3e5e8] last:border-b-0 hover:bg-[#f8f9fa]"><td class="px-4 py-3 font-bold">BTS CIEL 2</td><td class="px-4 py-3 font-semibold">M. Arnaud</td><td class="px-4 py-3 font-mono font-semibold">15</td><td class="px-4 py-3 font-mono font-semibold text-[#b3001b]">11,6</td><td class="px-4 py-3"><span class="inline-grid h-7 min-w-7 place-items-center border border-[#dadce0] rounded-lg px-1 font-mono text-xs font-semibold" style="background:#ec3013;color:#fff">4</span></td><td class="px-4 py-3"><span class="flex items-center gap-2"><span class="h-2.5 w-24 border border-[#dadce0] rounded-lg"><span class="block h-full bg-black" style="width:64%"></span></span><span class="font-mono text-xs font-semibold">64 %</span></span></td><td class="px-4 py-3 font-mono font-semibold">85 %</td></tr><tr class="border-b border-[#e3e5e8] last:border-b-0 hover:bg-[#f8f9fa]"><td class="px-4 py-3 font-bold">Terminale NSI</td><td class="px-4 py-3 font-semibold">Mme Roche</td><td class="px-4 py-3 font-mono font-semibold">24</td><td class="px-4 py-3 font-mono font-semibold">12,1</td><td class="px-4 py-3"><span class="inline-grid h-7 min-w-7 place-items-center border border-[#dadce0] rounded-lg px-1 font-mono text-xs font-semibold" style="background:#ec3013;color:#fff">3</span></td><td class="px-4 py-3"><span class="flex items-center gap-2"><span class="h-2.5 w-24 border border-[#dadce0] rounded-lg"><span class="block h-full bg-black" style="width:70%"></span></span><span class="font-mono text-xs font-semibold">70 %</span></span></td><td class="px-4 py-3 font-mono font-semibold">93 %</td></tr><tr class="border-b border-[#e3e5e8] last:border-b-0 hover:bg-[#f8f9fa]"><td class="px-4 py-3 font-bold">Seconde SNT 4</td><td class="px-4 py-3 font-semibold">M. Faure</td><td class="px-4 py-3 font-mono font-semibold">32</td><td class="px-4 py-3 font-mono font-semibold text-[#b3001b]">11,8</td><td class="px-4 py-3"><span class="inline-grid h-7 min-w-7 place-items-center border border-[#dadce0] rounded-lg px-1 font-mono text-xs font-semibold" style="background:#FFD23F;color:#000">2</span></td><td class="px-4 py-3"><span class="flex items-center gap-2"><span class="h-2.5 w-24 border border-[#dadce0] rounded-lg"><span class="block h-full bg-black" style="width:73%"></span></span><span class="font-mono text-xs font-semibold">73 %</span></span></td><td class="px-4 py-3 font-mono font-semibold">95 %</td></tr>
</tbody></table></div>
</section>
<div class="mt-6 grid gap-6 xl:grid-cols-2">
<section id="conseils" data-r="cpe direction" class="border border-[#dadce0] rounded-lg bg-white" aria-labelledby="t-co">
<div class="flex flex-wrap items-center justify-between gap-3 border-b border-[#e3e5e8] p-4"><h2 id="t-co" class="flex items-center gap-2 text-lg font-extrabold"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>Conseils de classe · 1er trimestre</h2></div>
<ul class="divide-y divide-[#e3e5e8]"><li class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-4 gap-y-2 p-4"><div><p class="font-bold">BTS SIO 1 · A</p><p class="font-mono text-xs">lun. 07/12 · observations saisies</p></div><span class="border border-[#dadce0] rounded-lg px-2 py-0.5 text-xs font-extrabold bg-[#e6f4ea]">Prêt</span><div class="col-span-2 flex items-center gap-2"><div class="h-2 flex-1 border border-[#dadce0] rounded-lg"><div class="h-full bg-black" style="width:100%"></div></div><span class="font-mono text-xs font-semibold">100 %</span></div></li><li class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-4 gap-y-2 p-4"><div><p class="font-bold">BTS CIEL 2</p><p class="font-mono text-xs">mar. 08/12 · observations saisies</p></div><span class="border border-[#dadce0] rounded-lg px-2 py-0.5 text-xs font-extrabold bg-white">2 profs à relancer</span><div class="col-span-2 flex items-center gap-2"><div class="h-2 flex-1 border border-[#dadce0] rounded-lg"><div class="h-full bg-black" style="width:70%"></div></div><span class="font-mono text-xs font-semibold">70 %</span></div></li><li class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-4 gap-y-2 p-4"><div><p class="font-bold">Terminale NSI</p><p class="font-mono text-xs">jeu. 10/12 · observations saisies</p></div><span class="border border-[#dadce0] rounded-lg px-2 py-0.5 text-xs font-extrabold bg-white">En cours</span><div class="col-span-2 flex items-center gap-2"><div class="h-2 flex-1 border border-[#dadce0] rounded-lg"><div class="h-full bg-black" style="width:45%"></div></div><span class="font-mono text-xs font-semibold">45 %</span></div></li><li class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-4 gap-y-2 p-4"><div><p class="font-bold">Seconde SNT 4</p><p class="font-mono text-xs">ven. 11/12 · observations saisies</p></div><span class="border border-[#dadce0] rounded-lg px-2 py-0.5 text-xs font-extrabold bg-white">En cours</span><div class="col-span-2 flex items-center gap-2"><div class="h-2 flex-1 border border-[#dadce0] rounded-lg"><div class="h-full bg-black" style="width:20%"></div></div><span class="font-mono text-xs font-semibold">20 %</span></div></li></ul>
</section>
<section id="examens" data-r="cpe direction" class="border border-[#dadce0] rounded-lg bg-white" aria-labelledby="t-ex">
<div class="flex flex-wrap items-center justify-between gap-3 border-b border-[#e3e5e8] p-4"><h2 id="t-ex" class="flex items-center gap-2 text-lg font-extrabold"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>Journal des examens</h2></div>
<ol class="divide-y divide-[#e3e5e8] font-mono text-xs font-semibold"><li class="flex gap-3 p-4"><span class="mt-0.5 h-3 w-3 shrink-0 border border-[#dadce0] rounded-lg" style="background:#FFD23F"></span><div><p>lun. 28/09 · 09:14 · BTS SIO 1 A · E6 blanc</p><p class="mt-1 font-display text-sm font-bold">Hugo P. · changement d’onglet · 3 s</p></div></li><li class="flex gap-3 p-4"><span class="mt-0.5 h-3 w-3 shrink-0 border border-[#dadce0] rounded-lg" style="background:#FF6FB5"></span><div><p>lun. 28/09 · 09:21 · BTS SIO 1 A · E6 blanc</p><p class="mt-1 font-display text-sm font-bold">Lucas M. · souris hors fenêtre · 6 s</p></div></li><li class="flex gap-3 p-4"><span class="mt-0.5 h-3 w-3 shrink-0 border border-[#dadce0] rounded-lg" style="background:#FFD23F"></span><div><p>lun. 28/09 · 09:40 · BTS SIO 1 A · E6 blanc</p><p class="mt-1 font-display text-sm font-bold">Camille D. · fenêtre réduite · 2 s</p></div></li><li class="flex gap-3 p-4"><span class="mt-0.5 h-3 w-3 shrink-0 border border-[#dadce0] rounded-lg" style="background:#7CF2C0"></span><div><p>mar. 29/09 · 14:00 · Terminale NSI · Contrôle SQL</p><p class="mt-1 font-display text-sm font-bold">24/24 connectés · aucune sortie</p></div></li></ol>
</section>
</div>
<div class="mt-6 grid gap-6 xl:grid-cols-2">
<section id="licences" data-r="intendance direction" class="border border-[#dadce0] rounded-lg bg-white" aria-labelledby="t-li">
<div class="flex flex-wrap items-center justify-between gap-3 border-b border-[#e3e5e8] p-4 bg-[#f8f9fa]"><h2 id="t-li" class="flex items-center gap-2 text-lg font-extrabold"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 10h12M4 14h9M19 6a7.7 7.7 0 0 0-5.2-2A7.9 7.9 0 0 0 6 12c0 4.4 3.5 8 7.8 8 2 0 3.8-.8 5.2-2"/></svg>Licences et factures</h2><span class="font-mono text-xs font-semibold">paiement par mandat administratif</span></div>
<div class="border-b border-[#e3e5e8] p-4"><div class="flex justify-between text-sm font-bold"><span>Licences utilisées</span><span class="font-mono">118 / 120</span></div><div class="mt-2 h-4 border border-[#dadce0] rounded-lg"><div class="h-full bg-black" style="width:98%"></div></div><p class="mt-2 text-xs font-semibold">Il reste 2 licences. Au-delà, chaque élève ajouté est facturé 24 € HT au prorata.</p></div>
<div class="overflow-x-auto"><table class="w-full min-w-[520px] border-collapse text-left text-sm"><thead class="border-b border-[#e3e5e8] bg-[#f8f9fa] font-mono text-[11px] uppercase tracking-wider"><tr><th class="px-4 py-3 font-semibold">Pièce</th><th class="px-4 py-3 font-semibold">Date</th><th class="px-4 py-3 font-semibold">Montant HT</th><th class="px-4 py-3 font-semibold">Statut</th></tr></thead><tbody><tr class="border-b border-[#e3e5e8] last:border-b-0"><td class="px-4 py-3 font-bold">Devis D-2026-041</td><td class="px-4 py-3 font-mono">02/09/2026</td><td class="px-4 py-3 font-mono font-semibold">2 880,00 €</td><td class="px-4 py-3"><span class="inline-block border border-[#dadce0] rounded-lg px-2 py-0.5 text-xs font-extrabold" style="background:#7CF2C0">Accepté</span></td></tr><tr class="border-b border-[#e3e5e8] last:border-b-0"><td class="px-4 py-3 font-bold">Bon de commande BC-1187</td><td class="px-4 py-3 font-mono">05/09/2026</td><td class="px-4 py-3 font-mono font-semibold">2 880,00 €</td><td class="px-4 py-3"><span class="inline-block border border-[#dadce0] rounded-lg px-2 py-0.5 text-xs font-extrabold" style="background:#7CF2C0">Reçu</span></td></tr><tr class="border-b border-[#e3e5e8] last:border-b-0"><td class="px-4 py-3 font-bold">Facture F-2026-093</td><td class="px-4 py-3 font-mono">10/09/2026</td><td class="px-4 py-3 font-mono font-semibold">2 832,00 €</td><td class="px-4 py-3"><span class="inline-block border border-[#dadce0] rounded-lg px-2 py-0.5 text-xs font-extrabold" style="background:#FFD23F">Déposée sur Chorus Pro</span></td></tr></tbody></table></div>
</section>
<section id="conso" data-r="intendance direction" class="border border-[#dadce0] rounded-lg bg-white" aria-labelledby="t-vm">
<div class="flex flex-wrap items-center justify-between gap-3 border-b border-[#e3e5e8] p-4"><h2 id="t-vm" class="flex items-center gap-2 text-lg font-extrabold"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="2" width="20" height="8"/><rect x="2" y="14" width="20" height="8"/><path d="M6 6h.01M6 18h.01"/></svg>Consommation de VM par classe</h2><span class="font-mono text-xs font-semibold">15 h incluses / élève / mois</span></div>
<ul class="grid gap-3 p-4"><li><div class="flex justify-between text-sm font-bold"><span>BTS SIO 1 · A</span><span class="font-mono">142 h / 240 h</span></div><div class="mt-1 h-3 border border-[#dadce0] rounded-lg"><div class="h-full" style="width:59%;background:#7CF2C0"></div></div></li><li><div class="flex justify-between text-sm font-bold"><span>BTS SIO 1 · B</span><span class="font-mono">128 h / 255 h</span></div><div class="mt-1 h-3 border border-[#dadce0] rounded-lg"><div class="h-full" style="width:50%;background:#7CF2C0"></div></div></li><li><div class="flex justify-between text-sm font-bold"><span>BTS SIO 2 · SISR</span><span class="font-mono">160 h / 210 h</span></div><div class="mt-1 h-3 border border-[#dadce0] rounded-lg"><div class="h-full" style="width:76%;background:#FFD23F"></div></div></li><li><div class="flex justify-between text-sm font-bold"><span>BTS CIEL 2</span><span class="font-mono">96 h / 225 h</span></div><div class="mt-1 h-3 border border-[#dadce0] rounded-lg"><div class="h-full" style="width:43%;background:#7CF2C0"></div></div></li><li><div class="flex justify-between text-sm font-bold"><span>Terminale NSI</span><span class="font-mono">58 h / 360 h</span></div><div class="mt-1 h-3 border border-[#dadce0] rounded-lg"><div class="h-full" style="width:16%;background:#7CF2C0"></div></div></li><li><div class="flex justify-between text-sm font-bold"><span>Seconde SNT 4</span><span class="font-mono">28 h / 480 h</span></div><div class="mt-1 h-3 border border-[#dadce0] rounded-lg"><div class="h-full" style="width:6%;background:#7CF2C0"></div></div></li></ul>
<p class="border-t border-[#e3e5e8] bg-[#f8f9fa] p-3 text-xs font-semibold">Le compteur est partagé par classe. Aucun dépassement prévu d’ici la fin de l’année au rythme actuel.</p>
</section>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var T = { cpe: 'Tableau de bord CPE', direction: 'Tableau de bord direction', intendance: 'Tableau de bord intendance' };
function role(r) {
document.querySelectorAll('[data-r]').forEach(function (el) { el.style.display = el.dataset.r.split(' ').indexOf(r) > -1 ? '' : 'none'; });
document.querySelectorAll('#v-roles button').forEach(function (b, i) { b.className = 'h-10 border border-[#dadce0] rounded-lg px-3 text-left ' + (i ? '-mt-0.5 ' : '') + (b.dataset.role === r ? 'bg-[#0b57d0] text-white' : 'bg-white'); });
document.getElementById('v-titre').textContent = T[r];
}
document.querySelectorAll('#v-roles button').forEach(function (b) { b.addEventListener('click', function () { role(b.dataset.role); }); });
role('cpe');
document.querySelectorAll('#v-alertes select').forEach(function (s) { s.addEventListener('change', function () { if (s.value === 'Clore l’alerte') { s.closest('tr').style.opacity = '.4'; } s.style.background = s.selectedIndex ? '#7CF2C0' : '#fff'; }); });
});
</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>
<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 <span style="font-weight:500;color:#5f6368">· Paris</span></li><li style="font-size:14px;font-weight:700;color:#0b1220">RGPD <span style="font-weight:500;color:#5f6368">· données minimisées</span></li><li style="font-size:14px;font-weight:700;color:#0b1220">20 cursus <span style="font-weight:500;color:#5f6368">· du lycée au master</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('legal') }}#confidentialite" style="color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Confidentialité et RGPD</a></li><li><a href="{{ route('legal') }}#cookies" style="color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Cookies</a></li><li><a href="{{ route('legal') }}#sous-traitance" style="color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Sous-traitance</a></li></ul></nav></div>
</div>
</footer>
</body>
</html>