/* ═══════════════════════════════════════════════════════════════════════ Habillage de la mise en page du back-office — MudLayout / AppBar / Drawer ─────────────────────────────────────────────────────────────────────── ⚠️ POURQUOI CE FICHIER EST GLOBAL, ET NON DANS MainLayout.razor.css. L'isolation CSS de Blazor n'appose l'attribut de portée (b-xxxxx) que sur les BALISES HTML SIMPLES écrites dans le .razor. Depuis que MainLayout ne contient plus que des composants MudBlazor (MudLayout, MudAppBar, MudDrawer…), plus aucun élément du DOM ne porte cet attribut : les règles « ::deep » y étaient compilées en « [b-xxxxx] .zaza-admin-drawer » et ne correspondaient donc à RIEN. Le dégradé de marque, les couleurs de survol et de sélection du menu disparaissaient sans la moindre erreur. Constaté le 15/08/2026. Tant que la mise en page reposera sur des composants, son habillage doit vivre ici. ⚠️ Ce fichier doit être chargé APRÈS MudBlazor.min.css dans index.html : à spécificité égale, c'est la dernière règle qui gagne. Le placer avant obligerait à couvrir chaque déclaration de !important. ═══════════════════════════════════════════════════════════════════════ */ /* ── Hauteur de la barre ───────────────────────────────────────────────── 52 px nets, contre 64 px auparavant. ⚠️ TROIS déclarations, et non une seule. MudBlazor ne prend pas la variable telle quelle : il en retire un huitième (« height: calc(var(--mud-appbar-height) - var(--mud-appbar-height)/8) »), et applique le même calcul au décalage du contenu — avec un quart sur petit écran. Poser la seule variable à 52 px aurait donc donné une barre de 45,5 px, plus basse que demandé et sous la cible tactile confortable. ⚠️ La VARIABLE elle-même est posée dans le thème (Theme/ZaZaTheme.cs → LayoutProperties.AppbarHeight) et non ici : MudThemeProvider injecte ses variables dans le DOM au démarrage, donc après cette feuille, et sa valeur gagnerait à spécificité égale. Elle sert aux calculs des autres écrans, dont le bouton flottant « Taxis » de la carte, positionné en calc(var(--mud-appbar-height) + 14px) : il suit ainsi tout seul. */ .zaza-admin-appbar, .zaza-admin-appbar .mud-toolbar-appbar { height: 52px; min-height: 52px; } .mud-main-content { padding-top: 52px; } /* ── Barre supérieure ──────────────────────────────────────────────────── Aplat bleu-nuit, texte et icônes blancs : l'inverse de l'habillage précédent, où le bleu-nuit servait au texte sur un fond gris clair. Le bleu-nuit reste franchement plus sombre que le haut du dégradé du tiroir (#0a4fc4) : les deux aplats se distinguent sans qu'il faille un filet de séparation, désormais inutile. */ .zaza-admin-appbar { background-color: #0e2038 !important; border-bottom: none; color: #ffffff !important; } /* Icônes de la barre : blanches. Sans cette règle elles prennent le bleu Primary du thème (#0a4fc4), presque invisible sur le bleu-nuit — le même piège que dans le tiroir. */ .zaza-admin-appbar .mud-icon-button, .zaza-admin-appbar .mud-icon-button .mud-icon-root { color: #ffffff !important; } /* Survol : voile clair et accent jaune de marque, comme dans le menu. */ .zaza-admin-appbar .mud-icon-button:hover { background-color: rgba(255, 255, 255, .14); } .zaza-admin-appbar .mud-icon-button:hover .mud-icon-root { color: #ffc400 !important; } .zaza-admin-titre { font-weight: 800; font-size: 1.05rem; letter-spacing: .2px; color: #ffffff; white-space: nowrap; } /* Tout texte ajouté un jour dans la barre : MudText lui poserait la couleur du thème, prévue pour un fond clair, donc illisible sur le bleu-nuit. */ .zaza-admin-appbar .mud-typography { color: #ffffff; } @media (max-width: 900px) { .zaza-admin-titre { font-size: .9rem; } } @media (max-width: 400px) { .zaza-admin-titre { display: none; } /* évite le chevauchement avec les boutons */ } /* ── Tiroir : dégradé de marque ZaZa ───────────────────────────────────── Bleu → cyan → vert → jaune, plus un voile sombre progressif vers le bas pour garder le texte du menu lisible. Valeurs identiques à celles que portait .sidebar avant le passage à MudDrawer. background-image ET background-color : MudDrawer pose une couleur de fond opaque issue du thème ; sans la neutraliser, elle recouvrirait le dégradé sur les navigateurs qui repeignent la couche de couleur. */ .zaza-admin-drawer.mud-drawer { background-color: transparent !important; background-image: linear-gradient(180deg, rgba(9,20,40,.12) 0%, rgba(9,20,40,.34) 60%, rgba(9,20,40,.66) 100%), linear-gradient(180deg, #0a4fc4 0%, #1592c6 32%, #24a24a 63%, #ffc400 120%) !important; border-right: none; } /* Texte en blanc sur le dégradé : le tiroir hérite sinon d'une couleur de texte prévue pour un fond clair. */ .zaza-admin-drawer .mud-nav-link, .zaza-admin-drawer .mud-nav-group .mud-nav-link, .zaza-admin-drawer .mud-navmenu .mud-nav-link { color: #ffffff; } /* ── LISIBILITÉ DES ICÔNES ─────────────────────────────────────────────── ⚠️ LE PIÈGE : le thème pose Primary = #0a4fc4, soit EXACTEMENT le bleu du haut du dégradé. Or MudBlazor peint par défaut les icônes de menu avec « color: var(--mud-palette-primary) » : toute icône qui retombe sur ce défaut est donc BLEUE SUR BLEU — invisible. C'est ce qui rendait le menu difficile à lire (15/08/2026). Deux raisons de tout couvrir avec !important plutôt qu'un sélecteur plus précis : · MudBlazor cible l'état actif par un sélecteur à 6 classes (.mud-navmenu.mud-navmenu-primary .mud-nav-link.active:not(…) …), que l'on ne bat pas raisonnablement en spécificité ; · les icônes portent des classes différentes selon le contexte (lien simple, en-tête de groupe, icône SVG ou ligature), et en oublier une ramène le bleu invisible. L'ombre portée est le second levier : le dégradé passe du bleu foncé au JAUNE en bas, et une icône blanche s'y délave. Une ombre sombre d'un pixel lui rend un contour net sur toute la hauteur, sans l'assombrir. */ .zaza-admin-drawer .mud-nav-link .mud-icon-root, .zaza-admin-drawer .mud-nav-link-icon, .zaza-admin-drawer .mud-nav-group .mud-nav-link-icon, .zaza-admin-drawer .mud-navmenu .mud-nav-link .mud-icon-root, .zaza-admin-drawer .mud-nav-link svg { color: #ffffff !important; fill: currentColor; opacity: 1 !important; filter: drop-shadow(0 1px 1.5px rgba(9, 20, 40, .55)); } /* ── Survol et sélection du menu ───────────────────────────────────────── Voile bleu-nuit pour le contraste sur tout le dégradé + accent jaune de marque à gauche (box-shadow inset : aucun décalage de mise en page). */ .zaza-admin-drawer .mud-nav-link { transition: background-color .15s ease, box-shadow .15s ease; border-radius: 6px; } .zaza-admin-drawer .mud-nav-link:hover { background-color: rgba(14, 32, 56, .42) !important; color: #ffffff !important; box-shadow: inset 3px 0 0 0 #ffc400; } .zaza-admin-drawer .mud-nav-link.active, .zaza-admin-drawer .mud-nav-link.mud-nav-link-active { background-color: rgba(14, 32, 56, .60) !important; color: #ffffff !important; font-weight: 600; box-shadow: inset 4px 0 0 0 #ffc400; } /* Survol et sélection : l'icône passe à l'accent jaune de marque. Les mêmes variantes de classe qu'au repos sont couvertes, sans quoi l'état actif repasserait au bleu invisible par la règle interne de MudBlazor. L'ombre est renforcée ici : le jaune sur le bas jaune du dégradé se distingue moins bien que le blanc, même sous le voile de sélection. */ .zaza-admin-drawer .mud-nav-link:hover .mud-icon-root, .zaza-admin-drawer .mud-nav-link:hover .mud-nav-link-icon, .zaza-admin-drawer .mud-nav-link.active .mud-icon-root, .zaza-admin-drawer .mud-nav-link.active .mud-nav-link-icon, .zaza-admin-drawer .mud-nav-link.mud-nav-link-active .mud-icon-root, .zaza-admin-drawer .mud-nav-link.mud-nav-link-active .mud-nav-link-icon { color: #ffc400 !important; filter: drop-shadow(0 1px 2px rgba(9, 20, 40, .75)); } /* Flèche de dépliage des groupes : blanche pour rester visible sur le dégradé. Couleur ET fill — l'icône SVG suit currentColor, mais MudBlazor pose parfois un fill explicite. */ .zaza-admin-drawer .mud-nav-link-expand-icon, .zaza-admin-drawer .mud-nav-group .mud-nav-link-expand-icon { color: #ffffff !important; fill: #ffffff !important; opacity: 1 !important; } /* ── Zone de contenu ───────────────────────────────────────────────────── Fond doux bleu-gris : le blanc pur est agressif, et ce léger teint fait ressortir les cartes blanches des écrans. */ .mud-main-content { background-color: #eef2f8; min-height: 100vh; }