Paillasse/design/resources/views/classes/suivi.blade.php

@extends('layouts.vitrine')

@section('titre', 'Suivi de classe')

@section('contenu')
    <section class="border-b border-[#e3e5e8] bg-white">
        <div class="mx-auto flex max-w-7xl flex-wrap items-end gap-6 px-5 pb-10 pt-10 lg:px-10">
            <div class="flex-1">
                <p class="font-mono text-sm font-semibold">Espace enseignant · Suivi</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 class="mt-2 text-5xl font-extrabold leading-[0.95] tracking-tight sm:text-6xl">BTS SIO 1 · Groupe A</h1></div>
                <p class="mt-3 text-lg font-semibold">Bloc 2 · Administration des systèmes et des réseaux · 24 élèves</p>
            </div>
            <div class="flex flex-wrap gap-3">
                <a href="{{ route('banque') }}#flash" class="inline-flex items-center gap-3 border border-[#e3e5e8] rounded-2xl bg-[#fef7e0] px-5 py-3 font-extrabold">Quiz flash de début d’heure</a>
                <a href="{{ route('devoirs') }}" class="inline-flex items-center gap-3 border border-[#e3e5e8] rounded-2xl bg-white px-5 py-3 font-extrabold hover:bg-[#fef7e0]">Devoirs maison</a>
                <a href="{{ route('cours.show') }}" class="inline-flex items-center gap-3 border border-[#e3e5e8] rounded-2xl bg-white px-5 py-3 font-extrabold transition-transform hover:bg-[#fef7e0] active:shadow-none">Voir la séquence</a>
                <button type="button" class="inline-flex items-center gap-3 border border-[#e3e5e8] rounded-2xl bg-white px-5 py-3 font-extrabold transition-transform hover:bg-[#fef7e0] active:shadow-none">Exporter les notes (CSV)</button>
            </div>
        </div>
    </section>
    <div class="mx-auto max-w-7xl px-5 py-10 lg:px-10">
        <dl class="grid grid-cols-2 gap-5 lg:grid-cols-4">
            <div class="border border-[#e3e5e8] rounded-2xl bg-[#fef7e0] p-5"><dt class="font-semibold">Progression moyenne</dt><dd class="mt-1 font-mono text-4xl font-semibold">52 %</dd></div>
            <div class="border border-[#e3e5e8] rounded-2xl bg-[#eef0fd] p-5"><dt class="font-semibold">Moyenne aux QCM</dt><dd class="mt-1 font-mono text-4xl font-semibold">13,4</dd></div>
            <div class="border border-[#e3e5e8] rounded-2xl bg-[#e6f4ea] p-5"><dt class="font-semibold">Actifs cette semaine</dt><dd class="mt-1 font-mono text-4xl font-semibold">21 / 24</dd></div>
            <div class="border border-[#e3e5e8] rounded-2xl bg-[#ec3013] p-5 text-white"><dt class="font-semibold">À aider maintenant</dt><dd class="mt-1 font-mono text-4xl font-semibold">2</dd></div>
        </dl>

        <div class="mt-14 grid gap-10 lg:grid-cols-12">
            <section class="lg:col-span-8" aria-labelledby="t-tab">
                <h2 id="t-tab" class="text-3xl font-extrabold">Élèves</h2>
                <div class="mt-5 overflow-x-auto border border-[#e3e5e8] rounded-2xl bg-white">
                    <table class="w-full min-w-[760px] text-left">
                        <thead class="bg-[#0b57d0] text-white"><tr><th class="px-4 py-3">Élève</th><th class="px-3 py-3 font-mono text-xs font-semibold">Adressage IPv4</th><th class="px-3 py-3 font-mono text-xs font-semibold">VLAN</th><th class="px-3 py-3 font-mono text-xs font-semibold">Inter-VLAN</th><th class="px-3 py-3 font-mono text-xs font-semibold">DHCP</th><th class="px-3 py-3 font-mono text-xs font-semibold">DNS BIND</th><th class="px-3 py-3">QCM</th><th class="px-3 py-3">Temps VM</th></tr></thead>
                        <tbody class="divide-y divide-[#e3e5e8]">
                            <tr class="">
                                <td class="px-4 py-3"><span class="flex items-center gap-3"><span class="grid h-8 w-8 place-items-center border border-[#dadce0] rounded-lg bg-[#e6f4ea] font-extrabold">L</span><span><span class="block font-extrabold">Léa M.</span><span class="block font-mono text-xs font-semibold">Terminé</span></span></span></td>
                                <td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span></span></td>
                                <td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span></span></td>
                                <td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span></span></td>
                                <td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="3 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span></span></td>
                                <td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="0 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span></span></td>
                                <td class="px-3 py-3 font-mono font-semibold">18/20</td>
                                <td class="px-3 py-3 font-mono text-sm">12 h 40</td>
                            </tr>
                            <tr class="">
                                <td class="px-4 py-3"><span class="flex items-center gap-3"><span class="grid h-8 w-8 place-items-center border border-[#dadce0] rounded-lg bg-white font-extrabold">Y</span><span><span class="block font-extrabold">Yanis B.</span></span></span></td>
                                <td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span></span></td>
                                <td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span></span></td>
                                <td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="3 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span></span></td>
                                <td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="1 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span></span></td>
                                <td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="0 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span></span></td>
                                <td class="px-3 py-3 font-mono font-semibold">14/20</td>
                                <td class="px-3 py-3 font-mono text-sm">9 h 10</td>
                            </tr>
                            <tr class="bg-[#FFD9E8]">
                                <td class="px-4 py-3"><span class="flex items-center gap-3"><span class="grid h-8 w-8 place-items-center border border-[#dadce0] rounded-lg bg-[#fce8e6] font-extrabold">N</span><span><span class="block font-extrabold">Nora Kaci</span><span class="block font-mono text-xs font-semibold">Main levée</span></span></span></td>
                                <td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span></span></td>
                                <td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span></span></td>
                                <td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="2 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span></span></td>
                                <td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="0 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span></span></td>
                                <td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="0 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span></span></td>
                                <td class="px-3 py-3 font-mono font-semibold">11/20</td>
                                <td class="px-3 py-3 font-mono text-sm">8 h 05</td>
                            </tr>
                            <tr class="">
                                <td class="px-4 py-3"><span class="flex items-center gap-3"><span class="grid h-8 w-8 place-items-center border border-[#dadce0] rounded-lg bg-white font-extrabold">T</span><span><span class="block font-extrabold">Tom R.</span></span></span></td>
                                <td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span></span></td>
                                <td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span></span></td>
                                <td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span></span></td>
                                <td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="2 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span></span></td>
                                <td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="0 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span></span></td>
                                <td class="px-3 py-3 font-mono font-semibold">16/20</td>
                                <td class="px-3 py-3 font-mono text-sm">10 h 30</td>
                            </tr>
                            <tr class="">
                                <td class="px-4 py-3"><span class="flex items-center gap-3"><span class="grid h-8 w-8 place-items-center border border-[#dadce0] rounded-lg bg-white font-extrabold">I</span><span><span class="block font-extrabold">Inès D.</span></span></span></td>
                                <td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span></span></td>
                                <td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="2 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span></span></td>
                                <td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="0 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span></span></td>
                                <td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="0 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span></span></td>
                                <td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="0 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span></span></td>
                                <td class="px-3 py-3 font-mono font-semibold">9/20</td>
                                <td class="px-3 py-3 font-mono text-sm">5 h 20</td>
                            </tr>
                            <tr class="bg-[#FFE4DF]">
                                <td class="px-4 py-3"><span class="flex items-center gap-3"><span class="grid h-8 w-8 place-items-center border border-[#dadce0] rounded-lg bg-[#ec3013] font-extrabold text-white">S</span><span><span class="block font-extrabold">Sami L.</span><span class="block font-mono text-xs font-semibold">Bloqué 9 min</span></span></span></td>
                                <td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span></span></td>
                                <td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="3 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span></span></td>
                                <td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="1 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span></span></td>
                                <td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="0 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span></span></td>
                                <td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="0 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span></span></td>
                                <td class="px-3 py-3 font-mono font-semibold">7/20</td>
                                <td class="px-3 py-3 font-mono text-sm">6 h 45</td>
                            </tr>
                            <tr class="">
                                <td class="px-4 py-3"><span class="flex items-center gap-3"><span class="grid h-8 w-8 place-items-center border border-[#dadce0] rounded-lg bg-[#e6f4ea] font-extrabold">C</span><span><span class="block font-extrabold">Chloé P.</span><span class="block font-mono text-xs font-semibold">En avance</span></span></span></td>
                                <td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span></span></td>
                                <td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span></span></td>
                                <td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span></span></td>
                                <td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span></span></td>
                                <td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="1 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span></span></td>
                                <td class="px-3 py-3 font-mono font-semibold">19/20</td>
                                <td class="px-3 py-3 font-mono text-sm">13 h 15</td>
                            </tr>
                            <tr class="">
                                <td class="px-4 py-3"><span class="flex items-center gap-3"><span class="grid h-8 w-8 place-items-center border border-[#dadce0] rounded-lg bg-white font-extrabold">A</span><span><span class="block font-extrabold">Adam F.</span></span></span></td>
                                <td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span></span></td>
                                <td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span></span></td>
                                <td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="3 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-black"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span></span></td>
                                <td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="0 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span></span></td>
                                <td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="0 / 4 étapes"><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-4 w-3 border border-[#dadce0] rounded-lg bg-white"></span></span></td>
                                <td class="px-3 py-3 font-mono font-semibold">13/20</td>
                                <td class="px-3 py-3 font-mono text-sm">8 h 50</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <p class="mt-4 font-semibold">8 élèves sur 24 affichés · triés par besoin d’aide</p>
            </section>

            <aside class="grid content-start gap-8 lg:col-span-4">
                <section class="border border-[#e3e5e8] rounded-2xl bg-[#fce8e6] p-6" aria-labelledby="t-nora">
                    <p class="font-mono text-sm font-semibold">Fiche élève</p>
                    <h2 id="t-nora" class="mt-1 text-3xl font-extrabold">Nora Kaci</h2>
                    <ol class="mt-5 grid gap-3 border-l border-[#e3e5e8] pl-4 font-semibold">
                        <li><span class="font-mono text-xs">10:42</span><br>Main levée · Inter-VLAN, étape 3</li>
                        <li><span class="font-mono text-xs">10:31</span><br>Étape 2 validée après 3 essais</li>
                        <li><span class="font-mono text-xs">Mar.</span><br>QCM Adressage IPv4 : 11/20. Erreurs sur le calcul de l’adresse réseau (/22).</li>
                    </ol>
                    <div class="mt-6 flex flex-wrap gap-3">
                        <a href="{{ route('labs.essai') }}" class="border border-[#e3e5e8] rounded-2xl bg-white px-4 py-2 font-extrabold hover:bg-[#fef7e0]">Ouvrir sa console</a>
                        <a href="{{ route('cours.show') }}" class="border border-[#e3e5e8] rounded-2xl bg-black px-4 py-2 font-extrabold text-white hover:bg-[#13233A]">Lui assigner le TD</a>
                    </div>
                </section>

                <section class="border border-[#e3e5e8] rounded-2xl bg-white p-6" aria-labelledby="t-exam">
                    <h2 id="t-exam" class="text-3xl font-extrabold">Mode examen</h2>
                    <a href="{{ route('banque') }}" class="mt-3 inline-block font-extrabold underline underline-offset-4">Composer un sujet dans la banque →</a>
                    <form action="{{ route('examen') }}" method="get" class="mt-5 grid gap-4">
                        <label class="grid gap-2 font-extrabold">Épreuve<select class="w-full border border-[#e3e5e8] rounded-2xl bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#f8f9fa] focus:outline-none"><option>Adressage et VLAN · E6 blanc SISR</option><option>QCM Bloc 2</option></select></label>
                        <label class="grid gap-2 font-extrabold">Durée<select class="w-full border border-[#e3e5e8] rounded-2xl bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#f8f9fa] focus:outline-none"><option>1 h</option><option>2 h</option><option>4 h</option></select></label>
                        <fieldset class="grid gap-2 font-semibold">
                            <legend class="font-extrabold">Pendant l’épreuve</legend>
                            <label class="flex items-center gap-3"><input type="checkbox" checked class="h-5 w-5 accent-black"> Indices désactivés</label>
                            <label class="flex items-center gap-3"><input type="checkbox" checked class="h-5 w-5 accent-black"> Copier-coller bloqué</label>
                            <label class="flex items-center gap-3"><input type="checkbox" checked class="h-5 w-5 accent-black"> Sortie d’onglet signalée</label>
                            <label class="flex items-center gap-3"><input type="checkbox" class="h-5 w-5 accent-black"> Ordre des questions mélangé</label>
                        </fieldset>
                        <button type="submit" class="inline-flex items-center gap-4 border border-[#e3e5e8] rounded-2xl bg-black px-6 py-4 text-lg font-extrabold text-white transition-transform hover:bg-[#ec3013].5.5 active:shadow-none">Lancer l’examen</button>
                    </form>
                </section>
            </aside>
        </div>
    </div>
@endsection