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

162 lines
51 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>Vie scolaire et intendance · Paillasse</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800;900&family=IBM+Plex+Mono:wght@400;600&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>tailwind.config={theme:{extend:{fontFamily:{display:['Archivo','system-ui','sans-serif'],mono:['"IBM Plex Mono"','monospace']}}}}</script>
<style>
.etoile { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.zigzag { background: linear-gradient(135deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px, linear-gradient(45deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px; }
@keyframes flotte { 0%,100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--r, 0deg)); } }
.flotte { animation: flotte 6s ease-in-out infinite; }
@keyframes clignote { 50% { opacity: 0; } }
.curseur { animation: clignote 1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .flotte, .curseur { animation: none; } }
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.css">
<script defer src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10.0/lib/addon-fit.min.js"></script>
<script defer src="{{ asset('js/paillasse-terminal.js') }}"></script>
</head>
<body class="bg-white font-display text-black antialiased">
<header class="border-b-4 border-black">
<nav class="relative mx-auto flex max-w-[1600px] flex-wrap items-center justify-between gap-x-6 gap-y-4 px-5 py-5 lg:px-8 2xl:flex-nowrap" aria-label="Navigation principale">
<a href="{{ route('accueil') }}" class="flex items-center gap-3 text-2xl font-black tracking-tight">
<span class="relative inline-flex h-10 w-12 items-end" aria-hidden="true"><span class="absolute left-2 top-0 h-6 w-4 -rotate-6 border-2 border-black bg-[#7CF2C0]"></span><span class="absolute right-1 top-1 h-5 w-5 rounded-full border-2 border-black bg-[#FF6FB5]"></span><span class="relative h-3 w-full border-2 border-black bg-[#FFD23F] shadow-[3px_3px_0px_#000000]"></span></span>
Paillasse
</a>
<ul class="order-last flex w-full flex-wrap items-center gap-x-6 gap-y-2 whitespace-nowrap text-base font-bold md:flex-nowrap md:gap-x-8 2xl:order-none 2xl:w-auto 2xl:flex-1 2xl:justify-center">
<li><a href="{{ route('fonctionnalites') }}" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Fonctionnalités</a></li>
<li>
<details class="group">
<summary class="flex cursor-pointer list-none items-center gap-1 border-2 border-transparent px-1 hover:underline group-open:border-black group-open:bg-[#FFD23F] [&::-webkit-details-marker]:hidden">Ressources <span aria-hidden="true" class="transition-transform group-open:rotate-180">▾</span></summary>
<div class="absolute inset-x-5 top-full z-50 mx-auto max-h-[80vh] max-w-[880px] overflow-y-auto border-4 border-black bg-white shadow-[8px_8px_0px_#000000] lg:inset-x-8">
<div class="grid gap-x-4 gap-y-6 p-5 sm:grid-cols-2 lg:grid-cols-4">
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#FFD23F"></span>Espaces</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('cockpit') }}" @if(request()->routeIs('cockpit')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Cockpit prof</a></li><li><a href="{{ route('espace.eleve') }}" @if(request()->routeIs('espace.eleve')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Espace élève</a></li><li><a href="{{ route('vie.scolaire') }}" @if(request()->routeIs('vie.scolaire')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Vie scolaire</a></li><li><a href="{{ route('academie') }}" @if(request()->routeIs('academie')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Académie</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#7CF2C0"></span>Apprendre</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('cours.index') }}" @if(request()->routeIs('cours.index')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Cours gratuits</a></li><li><a href="{{ route('labs.index') }}" @if(request()->routeIs('labs.index')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Labs sur VM</a></li><li><a href="{{ route('labs.web') }}" @if(request()->routeIs('labs.web')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Lab web</a></li><li><a href="{{ route('ide') }}" @if(request()->routeIs('ide')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">IDE en ligne</a></li><li><a href="{{ route('maison') }}" @if(request()->routeIs('maison')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Ressources à la maison</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#C4B5FD"></span>Préparer</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('bibliotheque') }}" @if(request()->routeIs('bibliotheque')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Bibliothèque du prof</a></li><li><a href="{{ route('banque') }}" @if(request()->routeIs('banque')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Banque de sujets</a></li><li><a href="{{ route('generateur') }}" @if(request()->routeIs('generateur')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Générateur de TD</a></li><li><a href="{{ route('td.imprimable') }}" @if(request()->routeIs('td.imprimable')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">TD à imprimer</a></li><li><a href="{{ route('quiz.projection') }}" @if(request()->routeIs('quiz.projection')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Quiz flash</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#FF6FB5"></span>Évaluer et suivre</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('sujet.creer') }}" @if(request()->routeIs('sujet.creer')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Créer un sujet</a></li><li><a href="{{ route('devoirs') }}" @if(request()->routeIs('devoirs')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Devoirs maison</a></li><li><a href="{{ route('correction') }}" @if(request()->routeIs('correction')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Correction assistée</a></li><li><a href="{{ route('fiche.eleve') }}" @if(request()->routeIs('fiche.eleve')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Fiche élève</a></li><li><a href="{{ route('messagerie') }}" @if(request()->routeIs('messagerie')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Messagerie</a></li><li><a href="{{ route('export.ent') }}" @if(request()->routeIs('export.ent')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Export Pronote / ENT</a></li></ul></div>
</div>
<div class="flex flex-wrap items-center justify-between gap-3 border-t-4 border-black bg-[#FFFBEA] px-5 py-3"><p class="text-sm font-semibold">Vous débutez ? Tout est expliqué en vidéo.</p><a href="{{ route('aide') }}" class="border-2 border-black bg-white px-3 py-1 text-sm font-extrabold hover:bg-black hover:text-white">Aide et tutoriels →</a></div>
</div>
</details>
</li>
<li><a href="{{ route('etablissements') }}" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Établissements</a></li>
<li><a href="{{ route('tarifs') }}" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Tarifs</a></li>
<li><a href="{{ route('pourquoi') }}" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Pourquoi ce projet ?</a></li>
</ul>
<div class="mr-4 flex shrink-0 items-center gap-8">
<a href="{{ route('login') }}" class="inline-flex h-12 min-w-[12rem] items-center border-2 border-black bg-white px-6 font-bold shadow-[4px_4px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#FFD23F] hover:shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none">Se connecter</a>
<a href="{{ route('register') }}" class="relative inline-flex h-12 min-w-[12rem] items-center border-2 border-black bg-[#ec3013] px-6 font-bold text-white shadow-[4px_4px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none"><span>Créer une classe</span><span class="pointer-events-none absolute -left-6 -top-4 -rotate-12" aria-hidden="true"><svg viewBox="0 0 44 30" class="h-7 w-10"><rect x="2" y="2" width="40" height="26" fill="#C4B5FD" stroke="#000" stroke-width="3"/><rect x="2" y="8" width="40" height="5" fill="#000"/><rect x="7" y="17" width="9" height="6" fill="#FFD23F" stroke="#000" stroke-width="2"/><path d="M4 28 L40 2" stroke="#ec3013" stroke-width="7" stroke-linecap="round"/><path d="M4 28 L40 2" stroke="#000" stroke-width="2" stroke-linecap="round"/></svg></span><span class="pointer-events-none absolute -bottom-4 -right-5 grid h-9 w-9 rotate-12 place-items-center rounded-full border-2 border-black bg-[#FFD23F] font-mono text-[11px] font-semibold leading-none text-black shadow-[2px_2px_0px_#000000] outline outline-1 outline-offset-[-5px] outline-black" aria-hidden="true">0€</span></a>
</div>
</nav>
</header>
<main>
<div class="border-b-2 border-black bg-[#F6F5F1]">
<div class="mx-auto grid max-w-[1600px] lg:grid-cols-[240px_minmax(0,1fr)]">
<aside class="border-b-2 border-black 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-black 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-2 border-black px-3 text-left bg-black text-white">CPE · vie scolaire</button><button type="button" data-role="direction" class="h-10 border-2 border-black px-3 text-left -mt-0.5 bg-white">Direction</button><button type="button" data-role="intendance" class="h-10 border-2 border-black 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-2 border-black bg-[#FFFBEA] p-3 text-xs font-semibold"><p class="font-black">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, à Strasbourg.</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><h1 id="v-titre" class="mt-1 text-4xl font-black tracking-tight">Tableau de bord CPE</h1><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-2 border-black bg-white px-4 text-sm font-extrabold hover:bg-[#FFFBEA]"><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-2 border-black bg-[#FFD23F] px-4 text-sm font-extrabold shadow-[3px_3px_0px_#000000]"><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-2 border-black 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-2 border-black 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-[#7CF2C0]"></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-2 border-black 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-[#C4B5FD]"></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-2 border-black 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-[#FF6FB5]"></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-2 border-black 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-[#FFD23F]"></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-2 border-black 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-[#7CF2C0]"></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-2 border-black 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-[#FFD23F]"></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-2 border-black 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-[#C4B5FD]"></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-2 border-black 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-[#FF6FB5]"></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-2 border-black 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-2 border-black bg-white" aria-labelledby="t-al">
<div class="flex flex-wrap items-center justify-between gap-3 border-b-2 border-black p-4 bg-[#FFFBEA]"><h2 id="t-al" class="flex items-center gap-2 text-lg font-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>Alertes élèves, toutes classes</h2><p class="font-mono text-xs font-semibold">remontées par les profs et par Paillasse</p></div>
<div class="overflow-x-auto"><table class="w-full min-w-[860px] border-collapse text-left text-sm"><thead class="border-b-2 border-black bg-[#F6F5F1] 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-2 border-black last:border-b-0 hover:bg-[#FFFBEA]"><td class="px-4 py-3"><span class="inline-block border-2 border-black 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 Moreau</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-2 border-black 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-2 border-black last:border-b-0 hover:bg-[#FFFBEA]"><td class="px-4 py-3"><span class="inline-block border-2 border-black 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 Martin</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-2 border-black 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-2 border-black last:border-b-0 hover:bg-[#FFFBEA]"><td class="px-4 py-3"><span class="inline-block border-2 border-black 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 Blanc</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-2 border-black 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-2 border-black last:border-b-0 hover:bg-[#FFFBEA]"><td class="px-4 py-3"><span class="inline-block border-2 border-black 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 Dubois</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-2 border-black 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-2 border-black last:border-b-0 hover:bg-[#FFFBEA]"><td class="px-4 py-3"><span class="inline-block border-2 border-black 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 Colin</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-2 border-black 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-2 border-black last:border-b-0 hover:bg-[#FFFBEA]"><td class="px-4 py-3"><span class="inline-block border-2 border-black 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 Kaci</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-2 border-black 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-2 border-black bg-white" aria-labelledby="t-cl">
<div class="flex flex-wrap items-center justify-between gap-3 border-b-2 border-black p-4 "><h2 id="t-cl" class="flex items-center gap-2 text-lg font-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>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-2 border-black bg-[#F6F5F1] 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-2 border-black last:border-b-0 hover:bg-[#FFFBEA]"><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-2 border-black 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-2 border-black"><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-2 border-black last:border-b-0 hover:bg-[#FFFBEA]"><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-2 border-black 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-2 border-black"><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-2 border-black last:border-b-0 hover:bg-[#FFFBEA]"><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-2 border-black 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-2 border-black"><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-2 border-black last:border-b-0 hover:bg-[#FFFBEA]"><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-2 border-black 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-2 border-black"><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-2 border-black last:border-b-0 hover:bg-[#FFFBEA]"><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-2 border-black 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-2 border-black"><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-2 border-black last:border-b-0 hover:bg-[#FFFBEA]"><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-2 border-black 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-2 border-black"><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-2 border-black bg-white" aria-labelledby="t-co">
<div class="flex flex-wrap items-center justify-between gap-3 border-b-2 border-black p-4 "><h2 id="t-co" class="flex items-center gap-2 text-lg font-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>Conseils de classe · 1er trimestre</h2></div>
<ul class="divide-y-2 divide-black"><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-2 border-black px-2 py-0.5 text-xs font-extrabold bg-[#7CF2C0]">Prêt</span><div class="col-span-2 flex items-center gap-2"><div class="h-2 flex-1 border-2 border-black"><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-2 border-black 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-2 border-black"><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-2 border-black 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-2 border-black"><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-2 border-black 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-2 border-black"><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-2 border-black bg-white" aria-labelledby="t-ex">
<div class="flex flex-wrap items-center justify-between gap-3 border-b-2 border-black p-4 "><h2 id="t-ex" class="flex items-center gap-2 text-lg font-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>Journal des examens</h2></div>
<ol class="divide-y-2 divide-black 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-2 border-black" 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 Petit · 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-2 border-black" 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 Moreau · 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-2 border-black" 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 Dubois · 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-2 border-black" 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-2 border-black bg-white" aria-labelledby="t-li">
<div class="flex flex-wrap items-center justify-between gap-3 border-b-2 border-black p-4 bg-[#FFFBEA]"><h2 id="t-li" class="flex items-center gap-2 text-lg font-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>Licences et factures</h2><span class="font-mono text-xs font-semibold">paiement par mandat administratif</span></div>
<div class="border-b-2 border-black 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-2 border-black"><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-2 border-black bg-[#F6F5F1] 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-2 border-black 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-2 border-black px-2 py-0.5 text-xs font-extrabold" style="background:#7CF2C0">Accepté</span></td></tr><tr class="border-b-2 border-black 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-2 border-black px-2 py-0.5 text-xs font-extrabold" style="background:#7CF2C0">Reçu</span></td></tr><tr class="border-b-2 border-black 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-2 border-black 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-2 border-black bg-white" aria-labelledby="t-vm">
<div class="flex flex-wrap items-center justify-between gap-3 border-b-2 border-black p-4 "><h2 id="t-vm" class="flex items-center gap-2 text-lg font-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>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-2 border-black"><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-2 border-black"><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-2 border-black"><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-2 border-black"><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-2 border-black"><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-2 border-black"><div class="h-full" style="width:6%;background:#7CF2C0"></div></div></li></ul>
<p class="border-t-2 border-black bg-[#FFFBEA] 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-2 border-black px-3 text-left ' + (i ? '-mt-0.5 ' : '') + (b.dataset.role === r ? 'bg-black 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 class="border-t-4 border-black bg-white">
<div class="mx-auto grid max-w-7xl gap-10 px-5 py-14 sm:grid-cols-2 lg:grid-cols-4 lg:px-10">
<div>
<p class="text-2xl font-black tracking-tight">Paillasse</p>
<p class="mt-3 font-medium">Cours, labs, IDE et examens en ligne, du lycée au master.</p>
</div>
<nav aria-label="Produit"><p class="font-mono text-sm font-semibold uppercase">Produit</p><ul class="mt-4 space-y-2 font-bold"><li><a href="{{ route('cockpit') }}" class="hover:underline">Cockpit prof</a></li><li><a href="{{ route('espace.eleve') }}" class="hover:underline">Espace élève</a></li><li><a href="{{ route('aide') }}" class="hover:underline">Aide et tutoriels</a></li><li><a href="{{ route('labs.index') }}" class="hover:underline">Labs</a></li><li><a href="{{ route('fonctionnalites') }}" class="hover:underline">Fonctionnalités</a></li><li><a href="{{ route('cours.index') }}" class="hover:underline">Cours gratuits</a></li><li><a href="{{ route('bibliotheque') }}" class="hover:underline">Bibliothèque</a></li><li><a href="{{ route('ide') }}" class="hover:underline">IDE en ligne</a></li><li><a href="{{ route('generateur') }}" class="hover:underline">Générateur de TD</a></li><li><a href="{{ route('labs.web') }}" class="hover:underline">Lab web</a></li><li><a href="{{ route('tarifs') }}" class="hover:underline">Tarifs</a></li><li><a href="{{ route('pourquoi') }}" class="hover:underline">Pourquoi ce projet ?</a></li></ul></nav>
<nav aria-label="Établissements"><p class="font-mono text-sm font-semibold uppercase">Établissements</p><ul class="mt-4 space-y-2 font-bold"><li><a href="{{ route('etablissements') }}" class="hover:underline">Équiper une classe</a></li><li><a href="{{ route('login') }}" class="hover:underline">Se connecter</a></li></ul></nav>
<div class="self-start justify-self-start border-2 border-black bg-[#7CF2C0] px-4 py-3 font-mono text-sm font-semibold shadow-[4px_4px_0px_#000000]">● Tous les services fonctionnent</div>
</div>
<div class="border-t-4 border-black bg-white">
<ul class="mx-auto flex max-w-7xl flex-wrap items-center justify-center gap-8 px-5 py-8 lg:px-10" aria-label="Engagements">
<li class="grid h-40 w-40 shrink-0 -rotate-3 place-items-center rounded-full border-4 border-black bg-white text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Hébergé en</span><span class="flex h-7 w-11 border-2 border-black" aria-hidden="true"><span class="flex-1 bg-[#0055A4]"></span><span class="flex-1 bg-white"></span><span class="flex-1 bg-[#EF4135]"></span></span><span class="text-[10px] font-bold leading-tight">France</span></span></li>
<li class="grid h-40 w-40 shrink-0 rotate-3 place-items-center rounded-full border-4 border-black bg-[#FFD23F] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Données</span><span class="font-mono text-3xl font-semibold leading-none">RGPD</span><span class="text-[10px] font-bold leading-tight">minimisées</span></span></li>
<li class="grid h-40 w-40 shrink-0 -rotate-6 place-items-center rounded-full border-4 border-black bg-[#7CF2C0] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Référentiels</span><span class="font-mono text-3xl font-semibold leading-none">20</span><span class="text-[10px] font-bold leading-tight">cursus couverts</span></span></li>
<li class="grid h-40 w-40 shrink-0 rotate-6 place-items-center rounded-full border-4 border-black bg-[#FF6FB5] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Essai</span><span class="font-mono text-3xl font-semibold leading-none">0 €</span><span class="text-[10px] font-bold leading-tight">sans CB</span></span></li>
</ul>
</div>
<div class="border-t-4 border-black bg-[#FFD23F]">
<div class="mx-auto flex max-w-7xl flex-wrap items-center gap-x-6 gap-y-2 px-5 py-4 lg:px-10"><p class="flex-1 font-extrabold">Fait avec <span class="text-[#ec3013]" aria-label="amour">♥</span> par Adam Belkacemi</p><nav aria-label="Informations légales"><ul class="flex flex-wrap gap-x-4 gap-y-1 text-sm font-bold"><li><a href="{{ route('legal') }}#mentions" class="underline underline-offset-4">Mentions légales</a></li><li><a href="{{ route('legal') }}#cgu" class="underline underline-offset-4">CGU</a></li><li><a href="{{ route('legal') }}#confidentialite" class="underline underline-offset-4">Confidentialité et RGPD</a></li><li><a href="{{ route('legal') }}#cookies" class="underline underline-offset-4">Cookies</a></li><li><a href="{{ route('legal') }}#sous-traitance" class="underline underline-offset-4">Sous-traitance</a></li></ul></nav></div>
</div>
</footer>
</body>
</html>