Paillasse/design/_backup-ludique/resources/views/classes/suivi.blade.php

@extends('layouts.vitrine')

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

@section('contenu')
    <section class="border-b-4 border-black 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>
                <h1 class="mt-2 text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">BTS SIO 1 · Groupe A</h1>
                <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-4 border-black bg-[#FFD23F] px-5 py-3 font-extrabold shadow-[4px_4px_0px_#000000]">Quiz flash de début d’heure</a>
                <a href="{{ route('devoirs') }}" class="inline-flex items-center gap-3 border-4 border-black bg-white px-5 py-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:bg-[#FFD23F]">Devoirs maison</a>
                <a href="{{ route('cours.show') }}" class="inline-flex items-center gap-3 border-4 border-black bg-white px-5 py-3 font-extrabold shadow-[4px_4px_0px_#000000] transition-transform hover:bg-[#FFD23F] active:translate-x-1 active:translate-y-1 active:shadow-none">Voir la séquence</a>
                <button type="button" class="inline-flex items-center gap-3 border-4 border-black bg-white px-5 py-3 font-extrabold shadow-[4px_4px_0px_#000000] transition-transform hover:bg-[#FFD23F] active:translate-x-1 active:translate-y-1 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-4 border-black bg-[#FFD23F] p-5 shadow-[5px_5px_0px_#000000]"><dt class="font-semibold">Progression moyenne</dt><dd class="mt-1 font-mono text-4xl font-semibold">52 %</dd></div>
            <div class="border-4 border-black bg-[#C4B5FD] p-5 shadow-[5px_5px_0px_#000000] lg:translate-y-3"><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-4 border-black bg-[#7CF2C0] p-5 shadow-[5px_5px_0px_#000000]"><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-4 border-black bg-[#ec3013] p-5 text-white shadow-[5px_5px_0px_#000000] lg:translate-y-3"><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-black">Élèves</h2>
                <div class="mt-5 overflow-x-auto border-4 border-black bg-white shadow-[8px_8px_0px_#000000]">
                    <table class="w-full min-w-[760px] text-left">
                        <thead class="bg-black 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-2 divide-black">
                            <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-2 border-black bg-[#7CF2C0] font-black ">L</span><span><span class="block font-extrabold">Léa Martin</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-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black 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-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black 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-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black 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-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black 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-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black 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-2 border-black bg-white font-black ">Y</span><span><span class="block font-extrabold">Yanis Benali</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-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black 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-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black 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-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black 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-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black 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-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black 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-2 border-black bg-[#FF6FB5] font-black ">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-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black 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-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black 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-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black 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-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black 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-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black 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-2 border-black bg-white font-black ">T</span><span><span class="block font-extrabold">Tom Robert</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-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black 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-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black 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-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black 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-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black 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-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black 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-2 border-black bg-white font-black ">I</span><span><span class="block font-extrabold">Inès Durand</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-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black 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-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black 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-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black 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-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black 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-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black 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-2 border-black bg-[#ec3013] font-black text-white">S</span><span><span class="block font-extrabold">Sami Lefèvre</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-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black 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-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black 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-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black 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-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black 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-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black 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-2 border-black bg-[#7CF2C0] font-black ">C</span><span><span class="block font-extrabold">Chloé Petit</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-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black 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-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black 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-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black 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-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black 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-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black 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-2 border-black bg-white font-black ">A</span><span><span class="block font-extrabold">Adam Fontaine</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-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black 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-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black 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-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black 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-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black 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-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black 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-4 border-black bg-[#FF6FB5] p-6 shadow-[8px_8px_0px_#000000]" 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-black">Nora Kaci</h2>
                    <ol class="mt-5 grid gap-3 border-l-4 border-black 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-4 border-black bg-white px-4 py-2 font-extrabold hover:bg-[#FFD23F]">Ouvrir sa console</a>
                        <a href="{{ route('cours.show') }}" class="border-4 border-black bg-black px-4 py-2 font-extrabold text-white hover:bg-[#13233A]">Lui assigner le TD</a>
                    </div>
                </section>

                <section class="border-4 border-black bg-white p-6 shadow-[8px_8px_0px_#000000]" aria-labelledby="t-exam">
                    <h2 id="t-exam" class="text-3xl font-black">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-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] 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-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] 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-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white shadow-[6px_6px_0px_#ec3013] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#ec3013] hover:shadow-[8px_8px_0px_#000000] active:translate-x-1.5 active:translate-y-1.5 active:shadow-none">Lancer l’examen</button>
                    </form>
                </section>
            </aside>
        </div>
    </div>
@endsection