diff --git a/docs/journal.md b/docs/journal.md
index 58bda03..48e88dc 100644
--- a/docs/journal.md
+++ b/docs/journal.md
@@ -1006,3 +1006,22 @@ La leçon technique : les données injectées par un `View::composer` sur un lay
 **Suite**
 
 Reprendre le chantier « vrai cockpit » : Observations étant maintenant construites, il ne reste que Surveillance d'examen — à cadrer avec Adam avant de coder (RGPD, mineurs).
+
+## 2026-10-14 — Coquille : thème sombre et menu avatar
+
+Retour d'Adam après avoir vu la coquille : du texte clair illisible par endroits, et le menu avatar (Mon profil, Paramètres…) beaucoup trop grand.
+
+**Trouvé en lisant le CSS** (pas besoin d'un navigateur pour celui-ci) :
+
+- `syllabus-theme.css`, écrit pour la vitrine avant que le thème sombre n'existe, force `html, body` et l'en-tête (`body > header`) en blanc avec des couleurs codées en dur et `!important` — trois fois dans le fichier. Mes règles de thème sombre dans `app-shell.css` n'avaient pas ce poids : le texte passait bien en clair (lui vient d'une variable), mais le fond restait blanc. D'où le texte clair illisible : ce n'est pas un bug séparé, c'est la même cause.
+- Les icônes du menu avatar n'avaient aucune taille en CSS. Un `<svg>` sans largeur ni hauteur se rend par défaut à 300×150 px dans le navigateur : c'est ça qui gonflait chaque ligne du menu. Même oubli sur l'icône des raccourcis dans la barre latérale.
+
+**Fait** : des règles plus précises et avec `!important`, chargées après, redonnent la main aux pages de l'application pour le fond de `html`/`body`/l'en-tête en thème sombre ; taille explicite (16 à 22 px selon l'endroit) sur toutes les icônes qui n'en avaient pas ; menu avatar resserré (220 px, moins de marge intérieure).
+
+**Vérifié** : le CSS corrigé est bien servi par le serveur ; un prof jetable qui passe en thème sombre dans Paramètres obtient bien `data-theme="sombre"` sur la page. Je n'ai pas pu vérifier le rendu dans un vrai navigateur (extension Chrome non connectée cette fois) — à confirmer visuellement.
+
+**Dette non résolue** (déjà notée) : les pages migrées avant la coquille (quiz, devoirs, mes-classes) gardent des couleurs codées en dur par endroits et ne suivront pas parfaitement le thème sombre.
+
+**Suite**
+
+Adam vérifie visuellement (thème sombre, menu avatar, mobile) et me dit si autre chose cloche. Sinon : Surveillance d'examen.
diff --git a/portail/public/css/app-shell.css b/portail/public/css/app-shell.css
index 5a11650..842b08e 100644
--- a/portail/public/css/app-shell.css
+++ b/portail/public/css/app-shell.css
@@ -25,6 +25,25 @@ html[data-theme="sombre"] .app-tabbar, html[data-theme="sombre"] .app-chat-fenet
     html[data-theme="systeme"] .app-tabbar, html[data-theme="systeme"] .app-chat-fenetre { color-scheme: dark; }
 }
 
+/* syllabus-theme.css (pensé pour la vitrine, jamais pour un thème sombre)
+   force le fond de html/body et de l'en-tête en blanc avec des couleurs
+   codées en dur et !important. Ces règles, plus précises et chargées
+   après, reprennent la main pour les pages de l'application. */
+html[data-theme="sombre"],
+html[data-theme="sombre"] body {
+    background: var(--sy-bg) !important;
+    color: var(--sy-ink) !important;
+}
+html[data-theme="sombre"] body > .app-topbar { background: var(--sy-surface) !important; color: var(--sy-ink) !important; }
+@media (prefers-color-scheme: dark) {
+    html[data-theme="systeme"],
+    html[data-theme="systeme"] body {
+        background: var(--sy-bg) !important;
+        color: var(--sy-ink) !important;
+    }
+    html[data-theme="systeme"] body > .app-topbar { background: var(--sy-surface) !important; color: var(--sy-ink) !important; }
+}
+
 body.app-corps { background: var(--sy-bg); }
 
 .app-topbar {
@@ -47,17 +66,18 @@ body.app-corps { background: var(--sy-bg); }
     display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; flex: none;
 }
 .app-topbar__menu {
-    position: absolute; right: 0; top: calc(100% + 6px); min-width: 240px; background: var(--sy-surface);
-    border: 1px solid var(--sy-line); border-radius: 14px; box-shadow: 0 16px 32px -12px rgba(15,23,42,.28);
-    padding: 6px; display: grid; gap: 2px;
+    position: absolute; right: 0; top: calc(100% + 6px); width: 220px; background: var(--sy-surface);
+    border: 1px solid var(--sy-line); border-radius: 12px; box-shadow: 0 16px 32px -12px rgba(15,23,42,.28);
+    padding: 4px; display: grid; gap: 1px;
 }
 .app-topbar__menu a, .app-topbar__menu button {
     display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: none;
-    padding: 9px 10px; border-radius: 9px; font-family: Mulish, system-ui, sans-serif; font-weight: 600; font-size: 14px;
-    color: var(--sy-ink); cursor: pointer; text-decoration: none;
+    padding: 7px 8px; border-radius: 8px; font-family: Mulish, system-ui, sans-serif; font-weight: 600; font-size: 13px;
+    line-height: 1.3; color: var(--sy-ink); cursor: pointer; text-decoration: none;
 }
 .app-topbar__menu a:hover, .app-topbar__menu button:hover { background: var(--sy-bg); }
-.app-topbar__menu hr { margin: 4px 2px; border: 0; border-top: 1px solid var(--sy-line); }
+.app-topbar__menu svg { flex: none; width: 16px; height: 16px; }
+.app-topbar__menu hr { margin: 3px 2px; border: 0; border-top: 1px solid var(--sy-line); }
 
 .app-shell { display: flex; min-height: calc(100vh - var(--app-topbar-h)); }
 
@@ -89,6 +109,7 @@ html[data-theme="systeme"] .app-sidebar__nav a[aria-current="page"] { background
 }
 .app-sidebar__epingler:hover { color: var(--sy-blue); border-color: var(--sy-blue); }
 .app-sidebar__raccourci { display: flex; align-items: center; gap: 8px; }
+.app-sidebar__raccourci svg { flex: none; width: 18px; height: 18px; }
 .app-sidebar__raccourci form { margin-left: auto; }
 .app-sidebar__raccourci button[type="submit"] { border: 0; background: none; cursor: pointer; color: var(--sy-muted); font-size: 16px; line-height: 1; padding: 2px 6px; }
 .app-sidebar__raccourci button[type="submit"]:hover { color: #c5221f; }