Habille enfin les liens du menu : NavLink échappe à l'isolation CSS

Les six entrées restaient en bleu souligné par défaut : l'isolation CSS de
Blazor ne pose son attribut de portée que sur le balisage du composant
courant, jamais sur ce que rend un composant enfant. NavLink étant un
composant, `.menu-lien` déclaré dans MainLayout.razor.css ne correspondait à
aucun élément — alors que `.menu` et `.bandeau`, du balisage propre, étaient
bien habillés.

Les règles du menu passent en feuille globale plutôt qu'en `::deep` : la
navigation ne dépend plus du bundle d'isolation ni de son cache, qui est
précisément le fichier déjà vu servi périmé ou absent.

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

MaBibli.Client/wwwroot/css/app.css

@@ -1302,3 +1302,84 @@ body {
     font-weight: 600;
     font-size: 0.9rem;
 }
+
+/* ------------------------------------------------------------------
+   Menu principal (bandeau)
+
+   ⚠️ Ces règles sont ICI, en feuille GLOBALE, et non dans
+   `Layout/MainLayout.razor.css`. Deux raisons :
+
+   1. `NavLink` est un composant : l'isolation CSS ne pose son attribut de
+      portée que sur le balisage du composant courant, jamais sur ce que rend
+      un composant enfant. Déclarés en feuille scopée, `.menu-lien` n'atteignait
+      AUCUN des six liens — le `<nav>` prenait son fond sombre, les liens
+      restaient en bleu souligné par défaut.
+   2. La navigation ne doit dépendre ni du bundle d'isolation ni de son cache.
+
+   Le repli sans style reste une suite de liens lisibles les uns sous les
+   autres : c'est tout l'intérêt du gabarit retenu le 2026-08-20.
+   ------------------------------------------------------------------ */
+
+.menu {
+    display: none;
+    flex-direction: column;
+    background: #16304c;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+.menu-ouvert {
+    display: flex;
+}
+
+.menu-lien {
+    display: block;
+    padding: 0.7rem 1rem;
+    color: #e8edf3;
+    text-decoration: none;
+    font-size: 0.95rem;
+    font-weight: 500;
+    border-left: 4px solid transparent;
+}
+
+.menu-lien:hover,
+.menu-lien:focus-visible {
+    background: rgba(255, 255, 255, 0.1);
+    color: #fff;
+    text-decoration: none;
+}
+
+/* NavLink pose « active » tout seul ; « Catalogue » utilise NavLinkMatch.All,
+   sans quoi il resterait allumé sur toutes les pages — son href est la racine. */
+.menu-lien.active {
+    color: #fff;
+    font-weight: 600;
+    background: rgba(255, 255, 255, 0.16);
+    border-left-color: #f5d76e;
+}
+
+/*
+    À partir de 40rem la rangée tient sans se comprimer, et la bascule n'a plus
+    de raison d'être. Le point de rupture est répété dans `MainLayout.razor.css`
+    (qui y masque la bascule) — les deux doivent rester identiques.
+*/
+@media (min-width: 40rem) {
+    .menu {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        flex-wrap: wrap;
+        gap: 0.25rem;
+        padding: 0 0.5rem;
+    }
+
+    .menu-lien {
+        padding: 0.6rem 0.9rem;
+        border-left: 0;
+        border-bottom: 3px solid transparent;
+    }
+
+    .menu-lien.active {
+        background: rgba(255, 255, 255, 0.12);
+        border-bottom-color: #f5d76e;
+    }
+}