@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); /* ─── Typographie GLOBALE ─────────────────────────────────────────────────── Aligne le document HTML sur le thème Pétales ÉMERAUDE : Onest partout, corps comme titres (mêmes piles que PetalesTheme.Typography — le template n'a pas de serif). MudBlazor applique déjà ces polices à SES composants via le thème ; ces règles couvrent le et le HTML natif (texte hors composants Mud). La page /theme (doc du legacy « rose pétale ») garde ses propres polices via .ds. On NE force PAS les couleurs ici : elles restent pilotées par le MudThemeProvider. */ body { font-family: 'Onest', system-ui, -apple-system, sans-serif; margin: 0; } h1, h2, h3, h4, h5, h6 { font-family: 'Onest', system-ui, -apple-system, sans-serif; } h1:focus { outline: none; } /* ─── Barre supérieure des coquilles MudBlazor ────────────────────────────── Aligne le MudAppBar sur l'esthétique de l'écran d'accueil : surface claire SANS ombre Material agressive, séparée du contenu par un simple liseré (jeton de thème, donc adapté clair/sombre). */ .petales-appbar { background-color: var(--mud-palette-surface) !important; color: var(--mud-palette-text-primary) !important; border-bottom: 1px solid var(--mud-palette-lines-default); box-shadow: none !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* E11 (remarque owner 2026-07-02) — sidebar PLEINE HAUTEUR façon maquette (aside 100vh) : le tiroir passe en ClipMode=Never (plus clippé sous l'AppBar). MudBlazor décale alors NATIVEMENT la barre (marge = largeur du tiroir, via la classe de layout mud-drawer-left-clipped-never), mais PAS le contenu principal — règle complémentaire ci-dessous, keyée sur les classes d'état du layout (indépendante de l'ordre DOM). Bureau uniquement : sous le breakpoint md, le tiroir redevient un overlay à voile et le contenu garde toute la largeur. */ @media (min-width: 960px) { .mud-layout.mud-drawer-open-responsive-md-left.mud-drawer-left-clipped-never .mud-main-content { margin-left: var(--mud-drawer-width-left, 264px); transition: margin-left 225ms cubic-bezier(0, 0, 0.2, 1); } /* Sidebar PERMANENTE sur bureau, comme l'aside de la maquette : le hamburger ne sert qu'en mobile (tiroir en voile sous le breakpoint md). */ .petales-appbar .petales-nav-toggle { display: none; } } /* Pastille d'environnement (« DEVELOPMENT ») discrète — reprend le badge de l'accueil : ambre sur fond doux + liseré, au lieu d'une puce pleine criarde. Adaptée au thème. */ .petales-env-badge { margin-left: 12px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mud-palette-warning); background-color: var(--mud-palette-background); border: 1px solid var(--mud-palette-lines-default); padding: 3px 8px; border-radius: 6px; line-height: 1.6; } /* Sélecteur de portée POS « Tous les points de vente » (IModuleNavHeader.AppBarSlot) : l'overlay du MudMenu s'attache au body du host → la règle vit ici (globale), pas dans un style scopé module. Plafonne la liste du parc de PV et la rend scrollable pour ne jamais dépasser la hauteur de l'écran (390 px inclus). */ .petales-pv-scope-list { max-height: min(60vh, 420px); overflow-y: auto; } /* ─── Sélecteur de contexte « pilule » (société / PV actif / magasin actif) ────────── Style COMMUN repris du commutateur de société de l'accueil (.pa-societe > summary) : jeton émeraude arrondi, texte HÉRITÉ (s'adapte clair/sombre de l'AppBar). Appliqué à un MudButton (activateur du MudMenu) → on neutralise les défauts Material (min-width, majuscules). Rendu par le composant partagé ContextSelector (Petales.Erp.Ui). */ .pt-ctx-pill.mud-button-root { text-transform: none; font-weight: 600; font-size: .82rem; min-width: 0; padding: .34rem .7rem; border-radius: 999px; border: 1px solid rgba(13, 157, 107, .35); background-color: rgba(13, 157, 107, .08); color: inherit; } .pt-ctx-pill.mud-button-root:hover { background-color: rgba(13, 157, 107, .16); border-color: rgba(13, 157, 107, .5); } /* Libellé de la pilule : tronqué proprement (une raison sociale / un magasin peut être long). */ .pt-ctx-pill-label { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ─── Modales à onglets : hauteur de contenu STABLE d'un onglet à l'autre (remarque owner) ── Le panneau ne se recalcule plus à chaque bascule → la modale ne « saute » plus de taille. Plancher réglable par instance via --pt-stable-tabs-min. */ .pt-stable-tabs .mud-tabs-panels { min-height: var(--pt-stable-tabs-min, 420px); } .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid #e50000; } .validation-message { color: #e50000; } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } .darker-border-checkbox.form-check-input { border-color: #929292; } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } /* Date du jour dans la barre du haut (en-tête façon template). */ .petales-topbar-date { display: inline-flex; align-items: center; font-size: 13px; font-weight: 500; color: var(--mud-palette-text-secondary); padding: 0 12px; margin-right: 4px; white-space: nowrap; border: 1px solid var(--mud-palette-lines-default); border-radius: 9px; height: 38px; } /* ─── Barre du haut sur MOBILE/TABLETTE (chantier D-RWD) ──────────────────── La place est comptée sous 900 px : la date du jour (purement décorative) disparaît, la pilule de contexte (société / PV) se compacte. Sous 600 px, le titre du module se tronque proprement et le bouton Accueil (doublé dans la carte utilisateur du tiroir) s'efface — restent hamburger, titre, pilule de portée et bascule sombre. Aucun impact ≥ 900 px. */ @media (max-width: 899px) { .petales-topbar-date { display: none; } .pt-ctx-pill-label { max-width: 120px; } } @media (max-width: 599px) { .petales-appbar .mud-typography-h6 { font-size: 1rem; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .petales-appbar .petales-home-btn { display: none; } .pt-ctx-pill-label { max-width: 96px; } /* L'env-badge (DEVELOPMENT, hors prod) est décoratif : il cède la place. */ .petales-env-badge { display: none; } }