sépare la vitrine de l'application : vraie coquille, barre par rôle, chat

Une fois connecté, plus aucun lien vitrine : nouvelle layouts/app (barre
du haut avec menu avatar, barre latérale par rôle, bulle de chat
Messenger, barre d'onglets mobile). Les 10 entrées de navigation
demandées sont construites en vrai plutôt qu'en renvoi "bientôt
disponible" : Ma classe, Emploi du temps, Mes devoirs, Mes cours, Mes
notes côté élève ; Mes classes, Emploi du temps, Séances en direct,
Bibliothèque, Résultats (avec Observations, la dernière fonction
fictive du tableau de bord démo) côté prof.

Chat élève <-> prof de sa classe, jamais entre élèves. Mon profil,
Paramètres (thème, taille du texte), Signaler un problème, Mes
raccourcis. /eleve vidée des faux contenus ("À faire", "Ma progression",
"Mes QCM") restés avant le chantier "vrai cockpit".

Bug trouvé en testant en réel sur le serveur (pas en local) : le
compteur de messages non lus du chat ne redescendait jamais à zéro
(FilConversation sans lu_par_prof_a/lu_par_eleve_a dans son fillable) —
corrigé avec un test de non-régression.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

portail/resources/views/aide-app.blade.php

@@ -0,0 +1,35 @@
+@extends('layouts.app')
+
+@section('titre', 'Aide et assistance')
+
+@section('contenu')
+    <div class="mx-auto max-w-2xl px-5 py-10">
+        <h1 class="text-3xl font-extrabold" style="color:var(--sy-ink)">Aide et assistance</h1>
+
+        <div class="mt-6 grid gap-5">
+            @if ($estProf)
+                <section class="rounded-2xl border p-5" style="border-color:var(--sy-line);background:var(--sy-surface)">
+                    <h2 class="font-extrabold" style="color:var(--sy-ink)">Créer une classe et ajouter des élèves</h2>
+                    <p class="mt-2 font-semibold" style="color:var(--sy-muted)">Depuis « Mes classes », crée une classe puis ajoute des élèves un par un, en lot avec un fichier CSV, ou laisse-les rejoindre avec le code de la classe.</p>
+                </section>
+                <section class="rounded-2xl border p-5" style="border-color:var(--sy-line);background:var(--sy-surface)">
+                    <h2 class="font-extrabold" style="color:var(--sy-ink)">Lancer un lab</h2>
+                    <p class="mt-2 font-semibold" style="color:var(--sy-muted)">Ouvre une classe, planifie une séance et admets les élèves en salle d'attente : chacun reçoit sa machine virtuelle.</p>
+                </section>
+            @else
+                <section class="rounded-2xl border p-5" style="border-color:var(--sy-line);background:var(--sy-surface)">
+                    <h2 class="font-extrabold" style="color:var(--sy-ink)">Rejoindre une séance</h2>
+                    <p class="mt-2 font-semibold" style="color:var(--sy-muted)">Quand ton prof ouvre une séance, elle apparaît dans « Emploi du temps » et dans « Mes devoirs ». Clique sur « Rejoindre la séance » pour obtenir ta machine virtuelle.</p>
+                </section>
+                <section class="rounded-2xl border p-5" style="border-color:var(--sy-line);background:var(--sy-surface)">
+                    <h2 class="font-extrabold" style="color:var(--sy-ink)">Perdre son identifiant ou son code</h2>
+                    <p class="mt-2 font-semibold" style="color:var(--sy-muted)">Ton prof peut te régénérer une fiche de connexion depuis sa page « Mes classes ».</p>
+                </section>
+            @endif
+            <section class="rounded-2xl border p-5" style="border-color:var(--sy-line);background:var(--sy-surface)">
+                <h2 class="font-extrabold" style="color:var(--sy-ink)">Autre chose ?</h2>
+                <p class="mt-2 font-semibold" style="color:var(--sy-muted)">Utilise « Signaler un problème » dans le menu du profil, en haut à droite.</p>
+            </section>
+        </div>
+    </div>
+@endsection

portail/resources/views/bibliotheque-app.blade.php

@@ -0,0 +1,42 @@
+@extends('layouts.app')
+
+@section('titre', 'Bibliothèque')
+
+@section('contenu')
+    <div class="mx-auto max-w-4xl px-5 py-10">
+        <h1 class="text-3xl font-extrabold" style="color:var(--sy-ink)">Bibliothèque</h1>
+
+        <section class="mt-8">
+            <h2 class="text-xl font-extrabold" style="color:var(--sy-ink)">Labs</h2>
+            @if ($labs->isEmpty())
+                <p class="mt-3 font-semibold" style="color:var(--sy-muted)">Aucun lab dans le catalogue.</p>
+            @else
+                <ul class="mt-3 grid gap-3 sm:grid-cols-2">
+                    @foreach ($labs as $lab)
+                        <li class="rounded-2xl border p-4" style="border-color:var(--sy-line);background:var(--sy-surface)">
+                            <p class="font-bold" style="color:var(--sy-ink)">{{ $lab->titre }}</p>
+                            <p class="mt-1 font-mono text-xs font-semibold" style="color:var(--sy-muted)">{{ $lab->niveau }}@if($lab->duree_min) · {{ $lab->duree_min }} min @endif</p>
+                        </li>
+                    @endforeach
+                </ul>
+            @endif
+        </section>
+
+        <section class="mt-10">
+            <div class="flex items-center justify-between">
+                <h2 class="text-xl font-extrabold" style="color:var(--sy-ink)">Quiz</h2>
+                <a href="{{ route('banque-quiz.index') }}" class="font-bold underline" style="color:var(--sy-blue)">Voir la banque complète →</a>
+            </div>
+            @foreach ($groupesQuiz as $theme => $quizzes)
+                <div class="mt-5">
+                    <p class="font-mono text-sm font-bold" style="color:var(--sy-muted)">{{ $theme !== '' ? $theme : 'Partagés par des profs' }}</p>
+                    <ul class="mt-2 grid gap-2">
+                        @foreach ($quizzes as $quiz)
+                            <li class="rounded-xl border p-3 font-semibold" style="border-color:var(--sy-line);background:var(--sy-surface);color:var(--sy-ink)">{{ $quiz->titre }}</li>
+                        @endforeach
+                    </ul>
+                </div>
+            @endforeach
+        </section>
+    </div>
+@endsection

portail/resources/views/cours-detail.blade.php

@@ -0,0 +1,21 @@
+@extends('layouts.app')
+
+@section('titre', $cours->titre)
+
+@push('head')
+<style>
+    .contenu-cours h1, .contenu-cours h2, .contenu-cours h3 { color: var(--sy-ink); font-weight: 800; margin: 1.4em 0 .5em; }
+    .contenu-cours p, .contenu-cours li { color: var(--sy-ink); font-weight: 500; line-height: 1.6; }
+    .contenu-cours code { font-family: ui-monospace, "IBM Plex Mono", monospace; background: var(--sy-bg); border-radius: 4px; padding: 0 4px; }
+    .contenu-cours pre { background: var(--sy-bg); border: 1px solid var(--sy-line); border-radius: 10px; padding: 12px; overflow-x: auto; }
+    .contenu-cours ul { list-style: disc; padding-left: 1.4em; }
+</style>
+@endpush
+
+@section('contenu')
+    <div class="mx-auto max-w-3xl px-5 py-10">
+        <p class="font-mono text-sm font-semibold"><a href="{{ route('mes-cours') }}" class="underline" style="color:var(--sy-muted)">← Mes cours</a></p>
+        <h1 class="mt-2 text-3xl font-extrabold" style="color:var(--sy-ink)">{{ $cours->titre }}</h1>
+        <div class="contenu-cours mt-6">{!! $html !!}</div>
+    </div>
+@endsection

portail/resources/views/devoirs/eleve.blade.php

@@ -1,4 +1,4 @@
-@extends('layouts.vitrine')
+@extends('layouts.app')
 
 @section('titre', $devoir->titre)
 

portail/resources/views/devoirs/index.blade.php

@@ -1,4 +1,4 @@
-@extends('layouts.vitrine')
+@extends('layouts.app')
 
 @section('titre', 'Devoirs · '.$classe->nom)
 

portail/resources/views/devoirs/show.blade.php

@@ -1,4 +1,4 @@
-@extends('layouts.vitrine')
+@extends('layouts.app')
 
 @section('titre', $devoir->titre)
 

portail/resources/views/eleve.blade.php

@@ -1,118 +1,32 @@
-@extends('layouts.vitrine')
+@extends('layouts.app')
 
 @section('titre', 'Espace élève')
 
 @section('contenu')
-    <section class="relative overflow-hidden border-b border-[#e3e5e8] bg-white">
-        <div aria-hidden="true" class="pointer-events-none absolute inset-0"></div>
-        <div class="relative mx-auto flex max-w-7xl flex-wrap items-end gap-6 px-5 pb-12 pt-12 lg:px-10">
-            <div class="flex-1">
-                <p class="font-mono text-sm font-semibold">Espace élève · {{ $eleve->identifiant }}</p>
-                <div class="min-w-0 flex-1"><p data-public="E" 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-[#0b5e3c]">Pour les élèves</p>
-<h1 class="mt-2 text-6xl font-extrabold leading-[1.05] tracking-tight sm:text-7xl">Salut {{ $eleve->prenom }}.</h1></div>
-                <p class="mt-4 text-xl font-semibold">{{ $eleve->classe->nom }}@if($eleve->classe->formation) · {{ $eleve->classe->formation }}@endif</p>
+    <div class="mx-auto max-w-4xl px-5 py-10">
+        <p class="font-mono text-sm font-semibold" style="color:var(--sy-muted)">{{ $eleve->classe->nom }}</p>
+        <h1 class="mt-1 text-4xl font-extrabold tracking-tight" style="color:var(--sy-ink)">Salut {{ $eleve->prenom }}.</h1>
+
+        {{-- Chantier « vrai cockpit », étape 2 : Quiz flash, réel, pas de démo.
+             Caché par défaut ; rempli et affiché par le sondage ci-dessous. --}}
+        <section id="quiz-flash" hidden class="mt-8" aria-labelledby="t-quiz-flash">
+            <div class="rounded-2xl border p-6" style="border-color:var(--sy-line);background:var(--sy-surface)">
+                <h2 id="t-quiz-flash" class="text-2xl font-extrabold" style="color:var(--sy-ink)">Quiz flash</h2>
+                <div data-quiz-contenu class="mt-4"></div>
             </div>
-            <a href="{{ route('labs.essai') }}" 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">Reprendre mon TP <span class="font-mono" aria-hidden="true">→</span></a>
-        </div>
-    </section>
-    {{-- Chantier « vrai cockpit », étape 2 : Quiz flash, réel, pas de démo.
-         Caché par défaut ; rempli et affiché par le sondage ci-dessous. --}}
-    <section id="quiz-flash" hidden class="mx-auto max-w-7xl px-5 pt-10 lg:px-10" aria-labelledby="t-quiz-flash">
-        <div class="rounded-2xl border border-[#e3e5e8] bg-[#eef0fd] p-6">
-            <h2 id="t-quiz-flash" class="text-2xl font-extrabold">Quiz flash</h2>
-            <div data-quiz-contenu class="mt-4"></div>
-        </div>
-    </section>
-    @php($seancesOuvertes = $eleve->classe->seances()->whereIn('statut', [\App\Models\Seance::SALLE_ATTENTE, \App\Models\Seance::EN_COURS])->with('lab')->get())
-    @if ($seancesOuvertes->isNotEmpty())
-        <section class="mx-auto max-w-7xl px-5 pt-10 lg:px-10" aria-labelledby="t-seance-ouverte">
-            <h2 id="t-seance-ouverte" class="text-2xl font-extrabold">Séance en cours</h2>
-            <ul class="mt-4 grid gap-3">
-                @foreach ($seancesOuvertes as $seance)
-                    <li class="flex flex-wrap items-center justify-between gap-4 rounded-2xl border border-[#e3e5e8] bg-[#e6f4ea] p-5">
-                        <span class="text-xl font-extrabold">{{ $seance->lab->titre }}</span>
-                        <form action="{{ route('seances.rejoindre', $seance) }}" method="post">
-                            @csrf
-                            <button type="submit" class="inline-flex h-11 items-center rounded-full bg-black px-5 font-bold text-white">Rejoindre la séance</button>
-                        </form>
-                        @if ($seance->visioOuverte())
-                            <a href="{{ route('seances.visio.eleve', $seance) }}" class="inline-flex h-11 items-center rounded-full bg-[#0b57d0] px-5 font-bold text-white">Rejoindre la visio</a>
-                        @endif
-                    </li>
-                @endforeach
-            </ul>
         </section>
-    @endif
-    {{-- Chantier « vrai cockpit », étape 3 : Devoirs maison, réels. --}}
-    @php($devoirsClasse = $eleve->classe->devoirs()->with(['rendus' => fn ($q) => $q->where('eleve_id', $eleve->id)])->where('echeance', '>=', now()->subDays(7))->get())
-    @if ($devoirsClasse->isNotEmpty())
-        <section class="mx-auto max-w-7xl px-5 pt-10 lg:px-10" aria-labelledby="t-devoirs">
-            <h2 id="t-devoirs" class="text-2xl font-extrabold">Devoirs maison</h2>
-            <ul class="mt-4 grid gap-3">
-                @foreach ($devoirsClasse as $devoir)
-                    @php($monRendu = $devoir->rendus->first())
-                    <li>
-                        <a href="{{ route('devoirs.eleve.show', $devoir) }}" class="flex flex-wrap items-center justify-between gap-4 rounded-2xl border border-[#e3e5e8] p-5 {{ $monRendu ? 'bg-[#e6f4ea]' : ($devoir->echeanceDepassee() ? 'bg-[#fce8e6]' : 'bg-[#fef7e0]') }}">
-                            <span class="text-xl font-extrabold">{{ $devoir->titre }}</span>
-                            <span class="font-mono text-sm font-semibold">
-                                @if ($monRendu) Rendu
-                                @elseif ($devoir->echeanceDepassee()) Non rendu, échéance dépassée
-                                @else À rendre avant le {{ $devoir->echeance->timezone(config('app.fuseau_utilisateurs'))->translatedFormat('d/m H:i') }}
-                                @endif
-                            </span>
-                        </a>
-                    </li>
-                @endforeach
-            </ul>
-        </section>
-    @endif
-    <div class="mx-auto grid max-w-7xl gap-12 px-5 py-14 lg:grid-cols-12 lg:px-10">
-        <section class="lg:col-span-7" aria-labelledby="t-afaire">
-            <h2 id="t-afaire" class="text-4xl font-extrabold tracking-tight">À faire</h2>
-            <ul class="mt-8 grid gap-6">
-                <li><a href="{{ route('ide') }}" class="relative flex flex-wrap items-center gap-4 border border-[#e3e5e8] rounded-2xl bg-white p-5"><span class="absolute -right-3 -top-4 border border-[#dadce0] rounded-lg bg-[#ec3013] px-2 py-0.5 text-sm font-extrabold text-white">Devoir maison</span><span class="border border-[#dadce0] rounded-lg bg-[#13233A] px-2 font-mono text-sm font-semibold text-white">IDE</span><span class="flex-1"><span class="block text-xl font-extrabold">Défi Python : somme d’une liste</span><span class="block font-semibold">À rendre mer. 8 oct. · 18:00</span></span><span class="font-mono font-semibold">Rendre →</span></a></li>
-                <li><a href="{{ route('labs.essai') }}" class="relative flex flex-wrap items-center gap-4 border border-[#e3e5e8] rounded-2xl bg-[#e6f4ea] p-5 transition-transform">
-                    <span class="absolute -right-3 -top-4 border border-[#dadce0] rounded-lg bg-white px-2 py-0.5 text-sm font-extrabold">En cours</span>
-                    <span class="border border-[#dadce0] rounded-lg bg-white px-2 font-mono text-sm font-semibold">TP</span>
-                    <span class="flex-1"><span class="block text-xl font-extrabold">Routage inter-VLAN</span><span class="block font-semibold">Étape 3 sur 4 · VM prête</span></span>
-                    <span class="font-mono font-semibold">Continuer →</span></a></li>
-                <li><a href="{{ route('cours.show') }}#qcm" class="flex flex-wrap items-center gap-4 border border-[#e3e5e8] rounded-2xl bg-[#fef7e0] p-5 transition-transform md:ml-8">
-                    <span class="border border-[#dadce0] rounded-lg bg-white px-2 font-mono text-sm font-semibold">QCM</span>
-                    <span class="flex-1"><span class="block text-xl font-extrabold">Adressage IPv4 · 2ᵉ essai</span><span class="block font-semibold">Pour vendredi · 5 questions</span></span>
-                    <span class="font-mono font-semibold">Commencer →</span></a></li>
-                <li><a href="{{ route('cours.show') }}#td" class="flex flex-wrap items-center gap-4 border border-[#e3e5e8] rounded-2xl bg-[#eef0fd] p-5 transition-transform">
-                    <span class="border border-[#dadce0] rounded-lg bg-white px-2 font-mono text-sm font-semibold">TD</span>
-                    <span class="flex-1"><span class="block text-xl font-extrabold">Découpage en sous-réseaux</span><span class="block font-semibold">Assigné par Mme Roux · 3 exercices</span></span>
-                    <span class="font-mono font-semibold">Ouvrir →</span></a></li>
-                <li><a href="{{ route('examen') }}" class="flex flex-wrap items-center gap-4 border border-[#e3e5e8] rounded-2xl bg-black p-5 text-white transition-transform md:ml-8">
-                    <span class="border-2 border-white bg-[#ec3013] px-2 font-mono text-sm font-semibold">EXAMEN</span>
-                    <span class="flex-1"><span class="block text-xl font-extrabold">E6 blanc SISR · Adressage et VLAN</span><span class="block font-semibold">Lundi 10:00 · 1 h</span></span>
-                    <span class="font-mono font-semibold">Voir →</span></a></li>
-            </ul>
-        </section>
-        <aside class="grid content-start gap-10 lg:col-span-5">
-            <section class="border border-[#e3e5e8] rounded-2xl bg-white p-6" aria-labelledby="t-prog">
-                <h2 id="t-prog" class="text-2xl font-extrabold">Ma progression</h2>
-                <ul class="mt-5 grid gap-4">
-                    <li><p class="flex justify-between font-bold"><span>Adressage IPv4</span><span class="font-mono">100 %</span></p><div class="mt-1 h-4 border border-[#dadce0] rounded-lg bg-white"><div class="h-full bg-[#e6f4ea] border-r border-[#e3e5e8]" style="width:100%"></div></div></li>
-                    <li><p class="flex justify-between font-bold"><span>VLAN et commutation</span><span class="font-mono">100 %</span></p><div class="mt-1 h-4 border border-[#dadce0] rounded-lg bg-white"><div class="h-full bg-[#e6f4ea] border-r border-[#e3e5e8]" style="width:100%"></div></div></li>
-                    <li><p class="flex justify-between font-bold"><span>Routage inter-VLAN</span><span class="font-mono">75 %</span></p><div class="mt-1 h-4 border border-[#dadce0] rounded-lg bg-white"><div class="h-full bg-[#fef7e0] border-r border-[#e3e5e8]" style="width:75%"></div></div></li>
-                    <li><p class="flex justify-between font-bold"><span>Serveur DHCP</span><span class="font-mono">25 %</span></p><div class="mt-1 h-4 border border-[#dadce0] rounded-lg bg-white"><div class="h-full bg-[#fef7e0] border-r border-[#e3e5e8]" style="width:25%"></div></div></li>
-                    <li><p class="flex justify-between font-bold"><span>Serveur DNS avec BIND 9</span><span class="font-mono">0 %</span></p><div class="mt-1 h-4 border border-[#dadce0] rounded-lg bg-white"><div class="h-full bg-white border-r border-[#e3e5e8]" style="width:0%"></div></div></li>
-                </ul>
-            </section>
-            <section class="border border-[#e3e5e8] rounded-2xl bg-[#fce8e6] p-6" aria-labelledby="t-notes">
-                <h2 id="t-notes" class="text-2xl font-extrabold">Mes QCM</h2>
-                <ul class="mt-4 divide-y divide-[#e3e5e8] border border-[#dadce0] rounded-lg bg-white font-semibold">
-                    <li class="flex justify-between px-4 py-2"><span>VLAN et commutation</span><span class="font-mono">17/20</span></li>
-                    <li class="flex justify-between px-4 py-2"><span>Adressage IPv4</span><span class="font-mono">14/20</span></li>
-                    <li class="flex justify-between px-4 py-2"><span>Modèle OSI</span><span class="font-mono">18/20</span></li>
-                </ul>
-                <a href="{{ route('cours.index') }}" class="mt-5 inline-block border border-[#e3e5e8] rounded-2xl bg-white px-4 py-2 font-extrabold hover:bg-[#fef7e0]">Réviser dans les cours</a>
-                <a href="{{ route('maison') }}" class="mt-3 block font-extrabold underline underline-offset-4">Aller plus loin à la maison →</a>
-            </section>
-        </aside>
+
+        <ul class="mt-10 grid gap-4 sm:grid-cols-2">
+            <li><a href="{{ route('ma-classe') }}" class="block rounded-2xl border p-5 font-extrabold" style="border-color:var(--sy-line);background:var(--sy-surface);color:var(--sy-ink)">Ma classe</a></li>
+            <li><a href="{{ route('emploi-du-temps') }}" class="block rounded-2xl border p-5 font-extrabold" style="border-color:var(--sy-line);background:var(--sy-surface);color:var(--sy-ink)">Emploi du temps</a></li>
+            <li><a href="{{ route('mes-devoirs') }}" class="block rounded-2xl border p-5 font-extrabold" style="border-color:var(--sy-line);background:var(--sy-surface);color:var(--sy-ink)">Mes devoirs
+                @if ($badgeMesDevoirs) <span class="app-sidebar__badge">{{ $badgeMesDevoirs }}</span> @endif
+            </a></li>
+            <li><a href="{{ route('mes-cours') }}" class="block rounded-2xl border p-5 font-extrabold" style="border-color:var(--sy-line);background:var(--sy-surface);color:var(--sy-ink)">Mes cours</a></li>
+            <li><a href="{{ route('mes-notes') }}" class="block rounded-2xl border p-5 font-extrabold" style="border-color:var(--sy-line);background:var(--sy-surface);color:var(--sy-ink)">Mes notes</a></li>
+        </ul>
     </div>
+
     <script nonce="{{ Vite::cspNonce() }}">
     (function () {
         var URL_ETAT = @json(route('quiz.eleve.etat'));

portail/resources/views/emploi-du-temps.blade.php

@@ -0,0 +1,26 @@
+@extends('layouts.app')
+
+@section('titre', 'Emploi du temps')
+
+@section('contenu')
+    <div class="mx-auto max-w-3xl px-5 py-10">
+        <h1 class="text-3xl font-extrabold" style="color:var(--sy-ink)">Emploi du temps</h1>
+
+        @if ($evenements->isEmpty())
+            <p class="mt-6 font-semibold" style="color:var(--sy-muted)">Rien de prévu pour l'instant.</p>
+        @else
+            <ul class="mt-6 grid gap-3">
+                @foreach ($evenements as $evenement)
+                    <li class="flex flex-wrap items-center gap-4 rounded-2xl border p-4" style="border-color:var(--sy-line);background:var(--sy-surface)">
+                        <span class="rounded-lg border px-2 py-0.5 font-mono text-xs font-bold" style="border-color:var(--sy-line);color:var(--sy-ink)">
+                            {{ $evenement['type'] === 'seance' ? 'Séance' : 'Devoir' }}
+                        </span>
+                        <span class="flex-1 font-bold" style="color:var(--sy-ink)">{{ $evenement['titre'] }}</span>
+                        <span class="font-mono text-sm font-semibold" style="color:var(--sy-muted)">{{ $evenement['classe'] }}</span>
+                        <span class="font-mono text-sm font-semibold" style="color:var(--sy-ink)">{{ $evenement['date']?->timezone(config('app.fuseau_utilisateurs'))->translatedFormat('d/m H:i') }}</span>
+                    </li>
+                @endforeach
+            </ul>
+        @endif
+    </div>
+@endsection

portail/resources/views/layouts/app.blade.php

@@ -0,0 +1,298 @@
+<!DOCTYPE html>
+<html lang="fr" data-theme="{{ $compte->preferenceTheme() }}" data-taille="{{ $compte->preferenceTailleTexte() }}">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+    <title>@yield('titre') · Syllabus</title>
+    {{ Vite::fonts() }}
+    @vite(['resources/css/app.css', 'resources/js/app.js'])
+    <link rel="stylesheet" href="{{ asset('css/syllabus-theme.css') }}">
+    <link rel="stylesheet" href="{{ asset('css/app-shell.css') }}">
+    @stack('head')
+</head>
+<body class="app-corps font-display antialiased">
+
+<header class="app-topbar">
+    <a href="{{ $estProf ? route('mes-classes.index') : route('eleve') }}" class="app-topbar__logo" aria-label="Syllabus, accueil">
+        <img src="{{ asset('images/logo-syllabus-icone.png') }}" alt="">
+        <span>Syllabus</span>
+    </a>
+    <div class="app-topbar__avatar">
+        <button type="button" id="app-avatar-bouton" aria-haspopup="true" aria-expanded="false" aria-controls="app-avatar-menu">
+            <span class="app-topbar__avatar-cercle" aria-hidden="true">{{ mb_substr($nomAffiche, 0, 1) }}</span>
+            <span class="hidden sm:inline">{{ $nomAffiche }}</span>
+        </button>
+        <div id="app-avatar-menu" class="app-topbar__menu" hidden role="menu">
+            <a href="{{ route('profil') }}" role="menuitem">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 3.5-6 8-6s8 2 8 6"/></svg>
+                Mon profil
+            </a>
+            <a href="{{ route('parametres') }}" role="menuitem">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="3"/><path d="M19.4 13a7.6 7.6 0 0 0 0-2l2-1.5-2-3.4-2.3.9a7.6 7.6 0 0 0-1.7-1l-.3-2.5h-4l-.3 2.5a7.6 7.6 0 0 0-1.7 1l-2.3-.9-2 3.4L6.6 11a7.6 7.6 0 0 0 0 2l-2 1.5 2 3.4 2.3-.9c.5.4 1.1.8 1.7 1l.3 2.5h4l.3-2.5c.6-.2 1.2-.6 1.7-1l2.3.9 2-3.4-2-1.5Z"/></svg>
+                Paramètres
+            </a>
+            <a href="{{ route('aide.app') }}" role="menuitem">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="9"/><path d="M9.5 9a2.5 2.5 0 1 1 3.5 2.3c-.8.4-1 .8-1 1.7v.5"/><path d="M12 17h.01"/></svg>
+                Aide et assistance
+            </a>
+            <button type="button" id="app-signaler-bouton" role="menuitem">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M5 3v18"/><path d="M5 4h11l-2.5 3.5L16 11H5"/></svg>
+                Signaler un problème
+            </button>
+            <hr>
+            <form action="{{ route('deconnexion') }}" method="post">@csrf
+                <button type="submit" role="menuitem">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><path d="M16 17l5-5-5-5"/><path d="M21 12H9"/></svg>
+                    Se déconnecter
+                </button>
+            </form>
+        </div>
+    </div>
+</header>
+
+<div class="app-shell">
+    <nav class="app-sidebar" aria-label="Navigation de l'application">
+        <ul class="app-sidebar__nav">
+            @include('partials.nav-application')
+        </ul>
+        <p class="app-sidebar__titre">Mes raccourcis</p>
+        <ul class="app-sidebar__nav">
+            @foreach ($raccourcis as $raccourci)
+                <li class="app-sidebar__raccourci">
+                    <a href="{{ $raccourci->url }}">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 17v5"/><path d="M8 3h8l-1 6 2 2v2H7v-2l2-2-1-6Z"/></svg>
+                        {{ $raccourci->label }}
+                    </a>
+                    <form action="{{ route('raccourcis.destroy', $raccourci) }}" method="post" onsubmit="return confirm('Retirer ce raccourci ?')">
+                        @csrf
+                        <button type="submit" aria-label="Retirer ce raccourci">×</button>
+                    </form>
+                </li>
+            @endforeach
+        </ul>
+        <button type="button" id="app-epingler-bouton" class="app-sidebar__epingler">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" width="16" height="16"><path d="M12 5v14M5 12h14"/></svg>
+            Épingler cette page
+        </button>
+        <form action="{{ route('raccourcis.store') }}" method="post" id="app-epingler-form" hidden class="mt-2 grid gap-2 px-1">
+            @csrf
+            <input type="hidden" name="url" id="app-epingler-url">
+            <input type="text" name="label" id="app-epingler-label" required maxlength="80" class="rounded-lg border px-2 py-1 text-sm" style="border-color:var(--sy-line);background:var(--sy-bg);color:var(--sy-ink)">
+            <button type="submit" class="rounded-lg px-2 py-1 text-sm font-bold text-white" style="background:var(--sy-blue)">Épingler</button>
+        </form>
+    </nav>
+
+    <main class="app-main">
+        @yield('contenu')
+    </main>
+</div>
+
+<nav class="app-tabbar" aria-label="Navigation (mobile)">
+    <ul class="app-tabbar__liste">
+        @include('partials.nav-application', ['mobile' => true])
+        <li>
+            <button type="button" id="app-plus-bouton">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="5" cy="12" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="19" cy="12" r="1.5"/></svg>
+                Plus
+            </button>
+        </li>
+    </ul>
+</nav>
+
+<div class="app-feuille" id="app-feuille-plus" role="dialog" aria-label="Plus">
+    <div class="app-feuille__entete">
+        <strong>Plus</strong>
+        <button type="button" id="app-feuille-fermer" aria-label="Fermer">✕</button>
+    </div>
+    <div class="app-feuille__contenu">
+        @include('partials.nav-application', ['mobilePlus' => true])
+        <hr style="border-color:var(--sy-line);margin:8px 0">
+        <a href="{{ route('profil') }}">Mon profil</a>
+        <a href="{{ route('parametres') }}">Paramètres</a>
+        <a href="{{ route('aide.app') }}">Aide et assistance</a>
+        <form action="{{ route('deconnexion') }}" method="post">@csrf<button type="submit">Se déconnecter</button></form>
+    </div>
+</div>
+
+<div class="app-chat-bulle" role="presentation">
+    <button type="button" id="app-chat-bouton" aria-label="Ouvrir le chat" aria-expanded="false">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2Z"/></svg>
+        <span class="app-chat-bulle__badge" id="app-chat-badge" hidden></span>
+    </button>
+</div>
+<div class="app-chat-fenetre" id="app-chat-fenetre" hidden></div>
+
+<div id="app-signaler-fenetre" hidden style="position:fixed;inset:0;z-index:80;background:rgba(15,23,42,.4);display:flex;align-items:center;justify-content:center;padding:20px">
+    <form action="{{ route('signalements.store') }}" method="post" style="background:var(--sy-surface);border-radius:16px;padding:20px;max-width:420px;width:100%;display:grid;gap:10px">
+        @csrf
+        <input type="hidden" name="page_url" value="{{ request()->fullUrl() }}">
+        <p style="font-weight:800;color:var(--sy-ink)">Signaler un problème</p>
+        <textarea name="message" required maxlength="2000" rows="4" placeholder="Décris ce qui ne marche pas…" style="border:1px solid var(--sy-line);border-radius:10px;padding:10px;background:var(--sy-bg);color:var(--sy-ink)"></textarea>
+        <div style="display:flex;gap:8px;justify-content:flex-end">
+            <button type="button" id="app-signaler-annuler" style="border:0;background:none;font-weight:700;color:var(--sy-muted)">Annuler</button>
+            <button type="submit" style="border:0;border-radius:999px;background:var(--sy-blue);color:#fff;padding:8px 18px;font-weight:800">Envoyer</button>
+        </div>
+    </form>
+</div>
+
+<script nonce="{{ Vite::cspNonce() }}">
+(function () {
+    function basculer(bouton, panneau) {
+        var ouvert = !panneau.hidden;
+        panneau.hidden = ouvert;
+        bouton.setAttribute('aria-expanded', String(!ouvert));
+    }
+
+    var avatarBtn = document.getElementById('app-avatar-bouton');
+    var avatarMenu = document.getElementById('app-avatar-menu');
+    avatarBtn.addEventListener('click', function (e) { e.stopPropagation(); basculer(avatarBtn, avatarMenu); });
+    document.addEventListener('click', function (e) { if (!avatarMenu.hidden && !avatarMenu.contains(e.target) && e.target !== avatarBtn) avatarMenu.hidden = true; });
+
+    var plusBtn = document.getElementById('app-plus-bouton');
+    var feuille = document.getElementById('app-feuille-plus');
+    if (plusBtn) plusBtn.addEventListener('click', function () { feuille.style.display = 'block'; });
+    document.getElementById('app-feuille-fermer').addEventListener('click', function () { feuille.style.display = 'none'; });
+
+    var signalerBtn = document.getElementById('app-signaler-bouton');
+    var signalerFenetre = document.getElementById('app-signaler-fenetre');
+    signalerBtn.addEventListener('click', function () { avatarMenu.hidden = true; signalerFenetre.style.display = 'flex'; });
+    document.getElementById('app-signaler-annuler').addEventListener('click', function () { signalerFenetre.style.display = 'none'; });
+
+    var epinglerBtn = document.getElementById('app-epingler-bouton');
+    var epinglerForm = document.getElementById('app-epingler-form');
+    if (epinglerBtn) epinglerBtn.addEventListener('click', function () {
+        document.getElementById('app-epingler-url').value = window.location.pathname;
+        document.getElementById('app-epingler-label').value = document.title.replace(/ · Syllabus$/, '');
+        epinglerForm.hidden = false;
+        epinglerBtn.hidden = true;
+    });
+})();
+</script>
+<script nonce="{{ Vite::cspNonce() }}">
+(function () {
+    var ROLE = @json($estProf ? 'prof' : 'eleve');
+    var CSRF = @json(csrf_token());
+    var URLS = @if ($estProf)
+        { index: @json(route('chat.prof.index')), etat: @json(url('/chat')) + '/__ID__/etat', envoyer: @json(url('/chat')) + '/__ID__/envoyer' }
+    @else
+        { etat: @json(route('chat.eleve.etat')), envoyer: @json(route('chat.eleve.envoyer')) }
+    @endif;
+
+    var bulle = document.getElementById('app-chat-bouton');
+    var fenetre = document.getElementById('app-chat-fenetre');
+    var badge = document.getElementById('app-chat-badge');
+    var ouverte = false, filActuel = null, minuteur = null;
+
+    function echapper(s) { return String(s).replace(/[&<>"]/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]; }); }
+
+    function rendreMessages(corps, messages, actif) {
+        var html = '<div class="app-chat-fenetre__corps" id="app-chat-corps">';
+        if (messages.length === 0) html += '<p style="color:var(--sy-muted);font-size:13px;font-weight:600">Aucun message pour l’instant.</p>';
+        messages.forEach(function (m) {
+            html += '<p class="app-bulle-message app-bulle-message--' + m.expediteur + '">' + echapper(m.contenu) + '</p>';
+        });
+        html += '</div>';
+        if (actif) {
+            html += '<form class="app-chat-fenetre__pied" id="app-chat-form"><input type="text" name="contenu" maxlength="2000" placeholder="Écrire un message…" required><button type="submit">Envoyer</button></form>';
+        } else {
+            html += '<p class="app-chat-fenetre__desactive">Le chat est désactivé pour cette classe.</p>';
+        }
+        corps.innerHTML = html;
+        var zone = document.getElementById('app-chat-corps');
+        zone.scrollTop = zone.scrollHeight;
+        var form = document.getElementById('app-chat-form');
+        if (form) form.addEventListener('submit', function (e) {
+            e.preventDefault();
+            var champ = form.querySelector('input');
+            var texte = champ.value.trim();
+            if (!texte) return;
+            var url = ROLE === 'prof' ? URLS.envoyer.replace('__ID__', filActuel) : URLS.envoyer;
+            fetch(url, { method: 'POST', headers: { 'X-CSRF-TOKEN': CSRF, 'Content-Type': 'application/json', Accept: 'application/json' }, body: JSON.stringify({ contenu: texte }) })
+                .then(function () { champ.value = ''; sonderConversation(); }).catch(function () {});
+        });
+    }
+
+    function sonderConversation() {
+        var url = ROLE === 'prof' ? URLS.etat.replace('__ID__', filActuel) : URLS.etat + '?lu=1';
+        fetch(url, { headers: { Accept: 'application/json' } }).then(function (r) { return r.json(); }).then(function (d) {
+            rendreMessages(fenetre, d.messages, d.actif);
+        }).catch(function () {});
+    }
+
+    function rendreEntete(titre, retour) {
+        return '<div class="app-chat-fenetre__entete">' +
+            (retour ? '<button type="button" id="app-chat-retour" aria-label="Retour">←</button>' : '') +
+            '<span style="flex:1">' + echapper(titre) + '</span>' +
+            '<button type="button" id="app-chat-fermer" aria-label="Fermer">✕</button></div>';
+    }
+
+    function ouvrirConversation(id, titre) {
+        filActuel = id;
+        fenetre.innerHTML = rendreEntete(titre, ROLE === 'prof');
+        sonderConversation();
+        attacherFermeture();
+        if (ROLE === 'prof') document.getElementById('app-chat-retour').addEventListener('click', ouvrirInbox);
+    }
+
+    function ouvrirInbox() {
+        filActuel = null;
+        fenetre.innerHTML = rendreEntete('Messages', false) + '<ul class="app-chat-fenetre__liste-fils" id="app-chat-fils"></ul>';
+        attacherFermeture();
+        fetch(URLS.index, { headers: { Accept: 'application/json' } }).then(function (r) { return r.json(); }).then(function (d) {
+            var liste = document.getElementById('app-chat-fils');
+            if (!liste) return;
+            if (d.fils.length === 0) { liste.innerHTML = '<li style="padding:10px 6px;color:var(--sy-muted);font-size:13px">Aucune conversation pour l’instant.</li>'; return; }
+            liste.innerHTML = d.fils.map(function (f) {
+                return '<li><button type="button" data-fil="' + f.id + '" data-eleve="' + echapper(f.eleve) + '">' + echapper(f.eleve) + ' · ' + echapper(f.classe) +
+                    (f.non_lus ? ' <span class="app-sidebar__badge">' + f.non_lus + '</span>' : '') + '</button></li>';
+            }).join('');
+            liste.querySelectorAll('button[data-fil]').forEach(function (b) {
+                b.addEventListener('click', function () { ouvrirConversation(b.dataset.fil, b.dataset.eleve); });
+            });
+        }).catch(function () {});
+    }
+
+    function attacherFermeture() {
+        document.getElementById('app-chat-fermer').addEventListener('click', fermer);
+    }
+
+    function fermer() {
+        ouverte = false;
+        fenetre.hidden = true;
+        fenetre.classList.remove('est-ouverte');
+        bulle.setAttribute('aria-expanded', 'false');
+        if (minuteur) clearInterval(minuteur);
+    }
+
+    function ouvrir() {
+        ouverte = true;
+        fenetre.hidden = false;
+        fenetre.classList.add('est-ouverte');
+        bulle.setAttribute('aria-expanded', 'true');
+        if (ROLE === 'eleve') ouvrirConversation(null, 'Mon prof'); else ouvrirInbox();
+        minuteur = setInterval(function () { if (filActuel !== null || ROLE === 'eleve') sonderConversation(); }, 3000);
+    }
+
+    bulle.addEventListener('click', function () { ouverte ? fermer() : ouvrir(); });
+
+    function sonderBadge() {
+        if (ROLE === 'eleve') {
+            fetch(URLS.etat, { headers: { Accept: 'application/json' } }).then(function (r) { return r.json(); }).then(function (d) {
+                badge.hidden = !d.non_lus;
+                badge.textContent = d.non_lus;
+            }).catch(function () {});
+        } else {
+            fetch(URLS.index, { headers: { Accept: 'application/json' } }).then(function (r) { return r.json(); }).then(function (d) {
+                var total = d.fils.reduce(function (s, f) { return s + f.non_lus; }, 0);
+                badge.hidden = total === 0;
+                badge.textContent = total;
+            }).catch(function () {});
+        }
+    }
+    sonderBadge();
+    setInterval(function () { if (!ouverte) sonderBadge(); }, 15000);
+})();
+</script>
+@stack('scripts_bas')
+</body>
+</html>

portail/resources/views/ma-classe.blade.php

@@ -0,0 +1,53 @@
+@extends('layouts.app')
+
+@section('titre', 'Ma classe')
+
+@section('contenu')
+    <div class="mx-auto max-w-4xl px-5 py-10">
+        <h1 class="text-3xl font-extrabold" style="color:var(--sy-ink)">{{ $classe->nom }}</h1>
+        @if ($classe->etablissement)
+            <p class="mt-1 font-semibold" style="color:var(--sy-muted)">{{ $classe->etablissement->nom }}</p>
+        @endif
+
+        <section class="mt-8">
+            <h2 class="text-xl font-extrabold" style="color:var(--sy-ink)">Annonces</h2>
+            @if ($classe->annonces->isEmpty())
+                <p class="mt-3 font-semibold" style="color:var(--sy-muted)">Aucune annonce pour l'instant.</p>
+            @else
+                <ul class="mt-3 grid gap-3">
+                    @foreach ($classe->annonces as $annonce)
+                        <li class="rounded-2xl border p-4" style="border-color:var(--sy-line);background:var(--sy-surface)">
+                            <p class="font-extrabold" style="color:var(--sy-ink)">{{ $annonce->titre }}</p>
+                            <p class="mt-1 font-semibold" style="color:var(--sy-ink)">{{ $annonce->contenu }}</p>
+                            <p class="mt-2 font-mono text-xs font-semibold" style="color:var(--sy-muted)">{{ $annonce->auteur->name }} · {{ $annonce->created_at->translatedFormat('d/m à H:i') }}</p>
+                        </li>
+                    @endforeach
+                </ul>
+            @endif
+        </section>
+
+        <section class="mt-10">
+            <h2 class="text-xl font-extrabold" style="color:var(--sy-ink)">Camarades</h2>
+            <ul class="mt-3 grid gap-2 sm:grid-cols-2">
+                @foreach ($camarades as $camarade)
+                    <li class="flex items-center gap-3 rounded-xl border p-3" style="border-color:var(--sy-line);background:var(--sy-surface)">
+                        <span style="width:8px;height:8px;border-radius:999px;background:{{ $camarade->estEnLigne() ? '#3C8A5A' : 'var(--sy-line)' }}" aria-hidden="true"></span>
+                        <span class="font-bold" style="color:var(--sy-ink)">{{ $camarade->nomAffiche() }}</span>
+                        @if ($camarade->id === $eleve->id)
+                            <span class="font-mono text-xs font-semibold" style="color:var(--sy-muted)">(toi)</span>
+                        @elseif ($camarade->estEnLigne())
+                            <span class="font-mono text-xs font-semibold" style="color:var(--sy-muted)">en ligne</span>
+                        @endif
+                    </li>
+                @endforeach
+            </ul>
+            <p class="mt-3 text-sm font-semibold" style="color:var(--sy-muted)">Pour écrire à ton prof, utilise le chat en bas à droite — pas de message entre camarades.</p>
+        </section>
+
+        @if ($classe->etablissement?->url_ent)
+            <p class="mt-10">
+                <a href="{{ $classe->etablissement->url_ent }}" class="font-bold underline" style="color:var(--sy-blue)">Accéder à l'ENT de l'établissement →</a>
+            </p>
+        @endif
+    </div>
+@endsection

portail/resources/views/mes-classes/index.blade.php

@@ -1,4 +1,4 @@
-@extends('layouts.vitrine')
+@extends('layouts.app')
 
 @section('titre', 'Mes classes')
 

portail/resources/views/mes-classes/show.blade.php

@@ -1,4 +1,4 @@
-@extends('layouts.vitrine')
+@extends('layouts.app')
 
 @section('titre', $classe->nom)
 
@@ -32,6 +32,9 @@
             <li><a href="#seance" class="flex items-center rounded-lg border-2 border-transparent px-3 py-2 hover:border-black">{{ $classe->estArchivee() ? 'Classe archivée' : 'Séance' }}</a></li>
             <li><a href="{{ route('mes-classes.quiz.index', $classe) }}" class="flex items-center rounded-lg border-2 border-transparent px-3 py-2 hover:border-black">Quiz flash</a></li>
             <li><a href="{{ route('mes-classes.devoirs.index', $classe) }}" class="flex items-center rounded-lg border-2 border-transparent px-3 py-2 hover:border-black">Devoirs maison</a></li>
+            <li><a href="#annonces" class="flex items-center rounded-lg border-2 border-transparent px-3 py-2 hover:border-black">Annonces</a></li>
+            <li><a href="#observations" class="flex items-center rounded-lg border-2 border-transparent px-3 py-2 hover:border-black">Observations</a></li>
+            <li><a href="#chat" class="flex items-center rounded-lg border-2 border-transparent px-3 py-2 hover:border-black">Chat</a></li>
         </ul>
         @if ($seance)
             <div class="mt-6 rounded-lg border border-[#dadce0] bg-white p-3 text-sm font-semibold">
@@ -320,6 +323,76 @@
             @endif
         </section>
 
+        <section id="annonces" class="mt-6 rounded-lg border border-[#dadce0] bg-white p-6" aria-labelledby="t-annonces">
+            <h2 id="t-annonces" class="text-2xl font-extrabold">Annonces</h2>
+            <p class="mt-2 font-semibold">Visibles par tes élèves dans « Ma classe ».</p>
+            <form action="{{ route('mes-classes.annonces.store', $classe) }}" method="post" class="mt-4 grid gap-3">
+                @csrf
+                <label class="grid gap-1 font-bold">Titre<input name="titre" required maxlength="150" class="w-full rounded-xl border border-[#c4c7c5] bg-white px-3 py-2 font-semibold"></label>
+                <label class="grid gap-1 font-bold">Message<textarea name="contenu" required maxlength="3000" rows="3" class="w-full rounded-xl border border-[#c4c7c5] bg-white px-3 py-2 font-semibold"></textarea></label>
+                <button type="submit" class="mt-1 inline-flex h-11 w-fit items-center rounded-full bg-[#0b57d0] px-5 font-bold text-white">Publier</button>
+            </form>
+            @if ($classe->annonces->isNotEmpty())
+                <ul class="mt-6 grid gap-3">
+                    @foreach ($classe->annonces as $annonce)
+                        <li class="flex flex-wrap items-start justify-between gap-3 rounded-xl border border-[#e3e5e8] p-4">
+                            <div>
+                                <p class="font-extrabold">{{ $annonce->titre }}</p>
+                                <p class="mt-1 font-semibold">{{ $annonce->contenu }}</p>
+                                <p class="mt-2 font-mono text-xs text-[#5f6368]">{{ $annonce->created_at->translatedFormat('d/m à H:i') }}</p>
+                            </div>
+                            <form action="{{ route('mes-classes.annonces.destroy', [$classe, $annonce]) }}" method="post">
+                                @csrf
+                                <button type="submit" class="font-bold underline underline-offset-4">Retirer</button>
+                            </form>
+                        </li>
+                    @endforeach
+                </ul>
+            @endif
+        </section>
+
+        @if ($classe->eleves->isNotEmpty())
+            <section id="observations" class="mt-6 rounded-lg border border-[#dadce0] bg-white p-6" aria-labelledby="t-observations">
+                <h2 id="t-observations" class="text-2xl font-extrabold">Observations</h2>
+                <p class="mt-2 font-semibold">Notes rapides pour le conseil de classe — jamais montrées à l'élève.</p>
+                <form action="{{ route('mes-classes.observations.store', $classe) }}" method="post" class="mt-4 grid gap-3">
+                    @csrf
+                    <label class="grid gap-1 font-bold">Élève<select name="eleve_id" required class="rounded-xl border border-[#c4c7c5] bg-white px-3 py-2 font-semibold">
+                        @foreach ($classe->eleves as $eleveOption)
+                            <option value="{{ $eleveOption->id }}">{{ $eleveOption->nomAffiche() }}</option>
+                        @endforeach
+                    </select></label>
+                    <label class="grid gap-1 font-bold">Observation<textarea name="contenu" required maxlength="2000" rows="3" class="w-full rounded-xl border border-[#c4c7c5] bg-white px-3 py-2 font-semibold"></textarea></label>
+                    <button type="submit" class="mt-1 inline-flex h-11 w-fit items-center rounded-full bg-[#0b57d0] px-5 font-bold text-white">Ajouter</button>
+                </form>
+                @if ($classe->observations->isNotEmpty())
+                    <ul class="mt-6 grid gap-2">
+                        @foreach ($classe->observations as $observation)
+                            <li class="flex flex-wrap items-start justify-between gap-3 rounded-xl border border-[#e3e5e8] p-3">
+                                <p class="font-semibold"><span class="font-extrabold">{{ $observation->eleve->nomAffiche() }}</span> — {{ $observation->contenu }}
+                                    <span class="font-mono text-xs text-[#5f6368]">({{ $observation->created_at->translatedFormat('d/m') }})</span></p>
+                                <form action="{{ route('mes-classes.observations.destroy', [$classe, $observation]) }}" method="post">
+                                    @csrf
+                                    <button type="submit" class="font-bold underline underline-offset-4">Retirer</button>
+                                </form>
+                            </li>
+                        @endforeach
+                    </ul>
+                @endif
+            </section>
+        @endif
+
+        <section id="chat" class="mt-6 rounded-lg border border-[#dadce0] bg-white p-6" aria-labelledby="t-chat">
+            <h2 id="t-chat" class="text-2xl font-extrabold">Chat</h2>
+            <p class="mt-2 font-semibold">
+                {{ $classe->chat_actif ? 'Activé : tes élèves peuvent t\'écrire depuis la bulle en bas à droite.' : 'Désactivé : tes élèves ne peuvent plus t\'écrire.' }}
+            </p>
+            <form action="{{ route('mes-classes.chat.basculer', $classe) }}" method="post" class="mt-4">
+                @csrf
+                <button type="submit" class="inline-flex h-11 items-center rounded-full border border-[#dadce0] px-5 font-bold">{{ $classe->chat_actif ? 'Désactiver le chat' : 'Activer le chat' }}</button>
+            </form>
+        </section>
+
         <div id="seance">
         @if ($classe->estArchivee())
             <section class="mt-6 rounded-lg border border-[#A63D2A] bg-[#fce8e6] p-6" aria-labelledby="t-archivee">

portail/resources/views/mes-cours.blade.php

@@ -0,0 +1,24 @@
+@extends('layouts.app')
+
+@section('titre', 'Mes cours')
+
+@section('contenu')
+    <div class="mx-auto max-w-3xl px-5 py-10">
+        <h1 class="text-3xl font-extrabold" style="color:var(--sy-ink)">Mes cours</h1>
+
+        @if ($cours->isEmpty())
+            <p class="mt-6 font-semibold" style="color:var(--sy-muted)">Pas encore de cours disponible. Fais ton premier TP pour voir apparaître son cours ici.</p>
+        @else
+            <ul class="mt-6 grid gap-3">
+                @foreach ($cours as $c)
+                    <li>
+                        <a href="{{ route('mes-cours.show', $c) }}" class="flex items-center justify-between gap-4 rounded-2xl border p-4" style="border-color:var(--sy-line);background:var(--sy-surface)">
+                            <span class="font-bold" style="color:var(--sy-ink)">{{ $c->titre }}</span>
+                            <span class="font-mono text-sm font-semibold" style="color:var(--sy-muted)">Lire →</span>
+                        </a>
+                    </li>
+                @endforeach
+            </ul>
+        @endif
+    </div>
+@endsection

portail/resources/views/mes-devoirs.blade.php

@@ -0,0 +1,59 @@
+@extends('layouts.app')
+
+@section('titre', 'Mes devoirs')
+
+@section('contenu')
+    <div class="mx-auto max-w-3xl px-5 py-10">
+        <h1 class="text-3xl font-extrabold" style="color:var(--sy-ink)">Mes devoirs</h1>
+
+        @if ($sessionQuiz)
+            <section class="mt-8">
+                <h2 class="text-xl font-extrabold" style="color:var(--sy-ink)">QCM en cours</h2>
+                <p class="mt-2 rounded-2xl border p-4 font-semibold" style="border-color:var(--sy-line);background:var(--sy-surface);color:var(--sy-ink)">
+                    Un quiz flash est en cours. Rends-toi sur ton tableau de bord pour y répondre.
+                </p>
+            </section>
+        @endif
+
+        @if ($seancesOuvertes->isNotEmpty())
+            <section class="mt-8">
+                <h2 class="text-xl font-extrabold" style="color:var(--sy-ink)">TP disponibles</h2>
+                <ul class="mt-3 grid gap-3">
+                    @foreach ($seancesOuvertes as $seance)
+                        <li class="flex flex-wrap items-center justify-between gap-4 rounded-2xl border p-4" style="border-color:var(--sy-line);background:var(--sy-surface)">
+                            <span class="font-bold" style="color:var(--sy-ink)">{{ $seance->lab->titre }}</span>
+                            <form action="{{ route('seances.rejoindre', $seance) }}" method="post">
+                                @csrf
+                                <button type="submit" class="inline-flex h-10 items-center rounded-full px-4 font-bold text-white" style="background:var(--sy-blue)">Rejoindre</button>
+                            </form>
+                        </li>
+                    @endforeach
+                </ul>
+            </section>
+        @endif
+
+        <section class="mt-8">
+            <h2 class="text-xl font-extrabold" style="color:var(--sy-ink)">Devoirs maison</h2>
+            @if ($devoirs->isEmpty())
+                <p class="mt-3 font-semibold" style="color:var(--sy-muted)">Aucun devoir maison pour l'instant.</p>
+            @else
+                <ul class="mt-3 grid gap-3">
+                    @foreach ($devoirs as $devoir)
+                        @php($monRendu = $devoir->rendus->first())
+                        <li>
+                            <a href="{{ route('devoirs.eleve.show', $devoir) }}" class="flex flex-wrap items-center justify-between gap-4 rounded-2xl border p-4" style="border-color:var(--sy-line);background:var(--sy-surface)">
+                                <span class="font-bold" style="color:var(--sy-ink)">{{ $devoir->titre }}</span>
+                                <span class="font-mono text-sm font-semibold" style="color:var(--sy-muted)">
+                                    @if ($monRendu) Rendu
+                                    @elseif ($devoir->echeanceDepassee()) Non rendu, échéance dépassée
+                                    @else À rendre avant le {{ $devoir->echeance->timezone(config('app.fuseau_utilisateurs'))->translatedFormat('d/m H:i') }}
+                                    @endif
+                                </span>
+                            </a>
+                        </li>
+                    @endforeach
+                </ul>
+            @endif
+        </section>
+    </div>
+@endsection

portail/resources/views/mes-notes.blade.php

@@ -0,0 +1,42 @@
+@extends('layouts.app')
+
+@section('titre', 'Mes notes')
+
+@section('contenu')
+    <div class="mx-auto max-w-3xl px-5 py-10">
+        <h1 class="text-3xl font-extrabold" style="color:var(--sy-ink)">Mes notes</h1>
+
+        @if ($notes->isEmpty())
+            <p class="mt-6 font-semibold" style="color:var(--sy-muted)">Pas encore de note.</p>
+        @else
+            <section class="mt-8">
+                <h2 class="text-xl font-extrabold" style="color:var(--sy-ink)">Par compétence</h2>
+                <ul class="mt-3 grid gap-3">
+                    @foreach ($parCompetence as $competence => $donnees)
+                        <li class="rounded-2xl border p-4" style="border-color:var(--sy-line);background:var(--sy-surface)">
+                            <p class="flex justify-between font-bold" style="color:var(--sy-ink)">
+                                <span>{{ $competence }}</span>
+                                <span class="font-mono">{{ $donnees['moyenne'] }} % <span style="color:var(--sy-muted)">({{ $donnees['nombre'] }})</span></span>
+                            </p>
+                            <div class="mt-2 h-3 rounded-lg" style="background:var(--sy-bg)">
+                                <div class="h-full rounded-lg" style="width:{{ $donnees['moyenne'] }}%;background:var(--sy-blue)"></div>
+                            </div>
+                        </li>
+                    @endforeach
+                </ul>
+            </section>
+
+            <section class="mt-10">
+                <h2 class="text-xl font-extrabold" style="color:var(--sy-ink)">Toutes mes notes</h2>
+                <ul class="mt-3 divide-y rounded-2xl border font-semibold" style="border-color:var(--sy-line);background:var(--sy-surface)">
+                    @foreach ($notes as $note)
+                        <li class="flex justify-between px-4 py-2" style="border-color:var(--sy-line);color:var(--sy-ink)">
+                            <span>{{ $note['titre'] }}</span>
+                            <span class="font-mono">{{ $note['note'] }}/{{ $note['note_max'] }}</span>
+                        </li>
+                    @endforeach
+                </ul>
+            </section>
+        @endif
+    </div>
+@endsection

portail/resources/views/parametres.blade.php

@@ -0,0 +1,40 @@
+@extends('layouts.app')
+
+@section('titre', 'Paramètres')
+
+@section('contenu')
+    <div class="mx-auto max-w-2xl px-5 py-10">
+        <h1 class="text-3xl font-extrabold" style="color:var(--sy-ink)">Paramètres</h1>
+
+        @if (session('parametres_enregistres'))
+            <p class="mt-4 rounded-2xl border p-4 font-semibold" style="border-color:var(--sy-line);background:var(--sy-bg);color:var(--sy-ink)">Enregistré.</p>
+        @endif
+
+        <form action="{{ route('parametres.update') }}" method="post" class="mt-6 grid gap-8 rounded-2xl border p-6" style="border-color:var(--sy-line);background:var(--sy-surface)">
+            @csrf
+            <fieldset>
+                <legend class="font-extrabold" style="color:var(--sy-ink)">Thème</legend>
+                <div class="mt-3 grid gap-2">
+                    @foreach (['clair' => 'Clair', 'sombre' => 'Sombre', 'systeme' => 'Suivre l’appareil'] as $valeur => $label)
+                        <label class="flex items-center gap-3 font-semibold" style="color:var(--sy-ink)">
+                            <input type="radio" name="theme" value="{{ $valeur }}" @checked($theme === $valeur)>
+                            {{ $label }}
+                        </label>
+                    @endforeach
+                </div>
+            </fieldset>
+            <fieldset>
+                <legend class="font-extrabold" style="color:var(--sy-ink)">Taille du texte</legend>
+                <div class="mt-3 grid gap-2">
+                    @foreach (['normal' => 'Normale', 'grand' => 'Grande'] as $valeur => $label)
+                        <label class="flex items-center gap-3 font-semibold" style="color:var(--sy-ink)">
+                            <input type="radio" name="taille_texte" value="{{ $valeur }}" @checked($tailleTexte === $valeur)>
+                            {{ $label }}
+                        </label>
+                    @endforeach
+                </div>
+            </fieldset>
+            <button type="submit" class="justify-self-start rounded-full px-6 py-3 font-bold text-white" style="background:var(--sy-blue)">Enregistrer</button>
+        </form>
+    </div>
+@endsection

portail/resources/views/partials/nav-application.blade.php

@@ -0,0 +1,59 @@
+{{-- Barre latérale (desktop), barre d'onglets et feuille « Plus » (mobile) —
+     séparation vitrine/application, 2026-10-13. Même liste de 5 entrées,
+     rendue différemment selon le contexte. --}}
+@php
+    $eleveNav = [
+        ['ma-classe', 'Ma classe', '<circle cx="8" cy="8" r="3"/><circle cx="16" cy="9" r="2.5"/><path d="M3 20c0-3 2.2-5 5-5s5 2 5 5"/><path d="M13.5 15.5c2.4.3 4 1.8 4 4.5"/>', null],
+        ['emploi-du-temps', 'Emploi du temps', '<rect x="3.5" y="5" width="17" height="16" rx="2"/><path d="M8 3v4M16 3v4M3.5 10h17"/>', null],
+        ['mes-devoirs', 'Mes devoirs', '<path d="M8 3h8v3H8z"/><rect x="5" y="4.5" width="14" height="17" rx="2"/><path d="M9 12l2 2 4-4"/>', $badgeMesDevoirs],
+        ['mes-cours', 'Mes cours', '<path d="M4 5c2-1 5-1 8 1 3-2 6-2 8-1v13c-2-1-5-1-8 1-3-2-6-2-8-1Z"/><path d="M12 6v13"/>', null],
+        ['mes-notes', 'Mes notes', '<path d="M4 20V10M10 20V4M16 20v-7M22 20H2" />', null],
+    ];
+    $profNav = [
+        ['mes-classes.index', 'Mes classes', '<circle cx="8" cy="8" r="3"/><circle cx="16" cy="9" r="2.5"/><path d="M3 20c0-3 2.2-5 5-5s5 2 5 5"/><path d="M13.5 15.5c2.4.3 4 1.8 4 4.5"/>', null],
+        ['emploi-du-temps', 'Emploi du temps', '<rect x="3.5" y="5" width="17" height="16" rx="2"/><path d="M8 3v4M16 3v4M3.5 10h17"/>', null],
+        ['seances-en-direct', 'Séances en direct', '<circle cx="12" cy="12" r="3"/><path d="M7.5 7.5a7 7 0 0 0 0 9M16.5 7.5a7 7 0 0 1 0 9M4.5 4.5a11 11 0 0 0 0 15M19.5 4.5a11 11 0 0 1 0 15"/>', null],
+        ['bibliotheque.app', 'Bibliothèque', '<path d="M4 5c2-1 5-1 8 1 3-2 6-2 8-1v13c-2-1-5-1-8 1-3-2-6-2-8-1Z"/><path d="M12 6v13"/>', null],
+        ['resultats', 'Résultats', '<path d="M4 20V10M10 20V4M16 20v-7M22 20H2" />', null],
+    ];
+    $entrees = $estProf ? $profNav : $eleveNav;
+@endphp
+
+@if (! ($mobile ?? false) && ! ($mobilePlus ?? false))
+    @foreach ($entrees as [$route, $label, $svg, $badge])
+        <li>
+            <a href="{{ route($route) }}" @if (request()->routeIs($route)) aria-current="page" @endif>
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">{!! $svg !!}</svg>
+                {{ $label }}
+                @if ($badge)
+                    <span class="app-sidebar__badge">{{ $badge }}</span>
+                @endif
+            </a>
+        </li>
+    @endforeach
+@elseif ($mobile ?? false)
+    @foreach (array_slice($entrees, 0, 4) as [$route, $label, $svg, $badge])
+        <li>
+            <a href="{{ route($route) }}" @if (request()->routeIs($route)) aria-current="page" @endif>
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">{!! $svg !!}</svg>
+                {{ $label }}
+                @if ($badge)
+                    <span class="app-sidebar__badge" style="position:absolute;top:0;right:18%">{{ $badge }}</span>
+                @endif
+            </a>
+        </li>
+    @endforeach
+@else
+    @foreach (array_slice($entrees, 4) as [$route, $label, $svg, $badge])
+        <a href="{{ route($route) }}">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">{!! $svg !!}</svg>
+            {{ $label }}
+        </a>
+    @endforeach
+    @foreach ($raccourcis as $raccourci)
+        <a href="{{ $raccourci->url }}">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 17v5"/><path d="M8 3h8l-1 6 2 2v2H7v-2l2-2-1-6Z"/></svg>
+            {{ $raccourci->label }}
+        </a>
+    @endforeach
+@endif

portail/resources/views/profil.blade.php

@@ -0,0 +1,43 @@
+@extends('layouts.app')
+
+@section('titre', 'Mon profil')
+
+@section('contenu')
+    <div class="mx-auto max-w-2xl px-5 py-10">
+        <h1 class="text-3xl font-extrabold" style="color:var(--sy-ink)">Mon profil</h1>
+
+        <div class="mt-6 rounded-2xl border p-6" style="border-color:var(--sy-line);background:var(--sy-surface)">
+            <dl class="grid gap-4">
+                <div>
+                    <dt class="font-mono text-sm font-semibold" style="color:var(--sy-muted)">Nom</dt>
+                    <dd class="text-lg font-bold" style="color:var(--sy-ink)">{{ $nom }}</dd>
+                </div>
+                @if ($role === 'prof')
+                    <div>
+                        <dt class="font-mono text-sm font-semibold" style="color:var(--sy-muted)">E-mail</dt>
+                        <dd class="text-lg font-bold" style="color:var(--sy-ink)">{{ $email }}</dd>
+                    </div>
+                @else
+                    <div>
+                        <dt class="font-mono text-sm font-semibold" style="color:var(--sy-muted)">Identifiant</dt>
+                        <dd class="text-lg font-bold" style="color:var(--sy-ink)">{{ $identifiant }}</dd>
+                    </div>
+                @endif
+                @if ($etablissement)
+                    <div>
+                        <dt class="font-mono text-sm font-semibold" style="color:var(--sy-muted)">Établissement</dt>
+                        <dd class="text-lg font-bold" style="color:var(--sy-ink)">{{ $etablissement->nom }}</dd>
+                    </div>
+                @endif
+                <div>
+                    <dt class="font-mono text-sm font-semibold" style="color:var(--sy-muted)">{{ $role === 'prof' ? 'Classes' : 'Classe' }}</dt>
+                    <dd class="mt-1 flex flex-wrap gap-2">
+                        @foreach ($classes as $classe)
+                            <span class="rounded-lg border px-2 py-0.5 text-sm font-bold" style="border-color:var(--sy-line);color:var(--sy-ink)">{{ $classe->nom }}</span>
+                        @endforeach
+                    </dd>
+                </div>
+            </dl>
+        </div>
+    </div>
+@endsection

portail/resources/views/quiz/banque.blade.php

@@ -1,4 +1,4 @@
-@extends('layouts.vitrine')
+@extends('layouts.app')
 
 @section('titre', 'Banque de quiz')
 

portail/resources/views/quiz/index.blade.php

@@ -1,4 +1,4 @@
-@extends('layouts.vitrine')
+@extends('layouts.app')
 
 @section('titre', 'Quiz · '.$classe->nom)
 

portail/resources/views/quiz/session-prof.blade.php

@@ -1,4 +1,4 @@
-@extends('layouts.vitrine')
+@extends('layouts.app')
 
 @section('titre', $session->quiz->titre.' · en direct')
 

portail/resources/views/quiz/show.blade.php

@@ -1,4 +1,4 @@
-@extends('layouts.vitrine')
+@extends('layouts.app')
 
 @section('titre', $quiz->titre)
 

portail/resources/views/resultats.blade.php

@@ -0,0 +1,38 @@
+@extends('layouts.app')
+
+@section('titre', 'Résultats')
+
+@section('contenu')
+    <div class="mx-auto max-w-4xl px-5 py-10">
+        <h1 class="text-3xl font-extrabold" style="color:var(--sy-ink)">Résultats</h1>
+
+        @if ($resultats->isEmpty())
+            <p class="mt-6 font-semibold" style="color:var(--sy-muted)">Crée d'abord une classe.</p>
+        @else
+            <ul class="mt-6 grid gap-5">
+                @foreach ($resultats as $r)
+                    <li class="rounded-2xl border p-5" style="border-color:var(--sy-line);background:var(--sy-surface)">
+                        <div class="flex flex-wrap items-center justify-between gap-3">
+                            <a href="{{ route('mes-classes.show', $r['classe']) }}" class="text-lg font-extrabold underline" style="color:var(--sy-ink)">{{ $r['classe']->nom }}</a>
+                            <span class="font-mono text-sm font-semibold" style="color:var(--sy-muted)">
+                                {{ $r['nombreCorrections'] }} correction(s)
+                                @if ($r['reussiteMoyenne'] !== null) · {{ $r['reussiteMoyenne'] }} % de réussite @endif
+                            </span>
+                        </div>
+                        @if ($r['observations']->isNotEmpty())
+                            <ul class="mt-4 grid gap-2">
+                                @foreach ($r['observations'] as $observation)
+                                    <li class="rounded-xl p-3 text-sm font-semibold" style="background:var(--sy-bg);color:var(--sy-ink)">
+                                        <span class="font-mono text-xs" style="color:var(--sy-muted)">{{ $observation->eleve->nomAffiche() }} · {{ $observation->created_at->translatedFormat('d/m') }}</span>
+                                        <br>{{ $observation->contenu }}
+                                    </li>
+                                @endforeach
+                            </ul>
+                        @endif
+                        <p class="mt-3 text-sm font-semibold"><a href="{{ route('mes-classes.show', $r['classe']) }}" class="underline" style="color:var(--sy-blue)">Ajouter une observation →</a></p>
+                    </li>
+                @endforeach
+            </ul>
+        @endif
+    </div>
+@endsection

portail/resources/views/seances-en-direct.blade.php

@@ -0,0 +1,25 @@
+@extends('layouts.app')
+
+@section('titre', 'Séances en direct')
+
+@section('contenu')
+    <div class="mx-auto max-w-3xl px-5 py-10">
+        <h1 class="text-3xl font-extrabold" style="color:var(--sy-ink)">Séances en direct</h1>
+
+        @if ($seances->isEmpty())
+            <p class="mt-6 font-semibold" style="color:var(--sy-muted)">Aucune séance en cours dans tes classes.</p>
+        @else
+            <ul class="mt-6 grid gap-3">
+                @foreach ($seances as $seance)
+                    <li class="flex flex-wrap items-center justify-between gap-4 rounded-2xl border p-4" style="border-color:var(--sy-line);background:var(--sy-surface)">
+                        <div>
+                            <p class="font-bold" style="color:var(--sy-ink)">{{ $seance->lab->titre }}</p>
+                            <p class="font-mono text-sm font-semibold" style="color:var(--sy-muted)">{{ $seance->classe->nom }} · {{ $seance->statut === \App\Models\Seance::EN_COURS ? 'En cours' : 'Salle d\'attente' }}</p>
+                        </div>
+                        <a href="{{ route('mes-classes.show', $seance->classe) }}" class="inline-flex h-10 items-center rounded-full px-4 font-bold text-white" style="background:var(--sy-blue)">Ouvrir la classe</a>
+                    </li>
+                @endforeach
+            </ul>
+        @endif
+    </div>
+@endsection

portail/resources/views/seances/attente-eleve.blade.php

@@ -1,4 +1,4 @@
-@extends('layouts.vitrine')
+@extends('layouts.app')
 
 @section('titre', "Salle d'attente")
 

portail/resources/views/seances/attente.blade.php

@@ -1,4 +1,4 @@
-@extends('layouts.vitrine')
+@extends('layouts.app')
 
 @section('titre', "Salle d'attente")
 

portail/resources/views/seances/console-prof.blade.php

@@ -1,4 +1,4 @@
-@extends('layouts.vitrine')
+@extends('layouts.app')
 
 @section('titre', 'Console de ' . $labSession->eleve->nomAffiche())
 

portail/resources/views/seances/visio-eleve.blade.php

@@ -1,4 +1,4 @@
-@extends('layouts.vitrine')
+@extends('layouts.app')
 
 @section('titre', 'Visio · '.$seance->classe->nom)
 

portail/resources/views/seances/visio-prof.blade.php

@@ -1,4 +1,4 @@
-@extends('layouts.vitrine')
+@extends('layouts.app')
 
 @section('titre', 'Visio · '.$seance->classe->nom)