remplit l'espace restant sous la topbar et les barres d'outils, ce qui rend les enfants en height:100% résolubles. */ .main--app { height: 100vh; } .main--app > main { min-height: 0; } .topbar { position: sticky; top: 0; z-index: 20; height: var(--topbar-h); display: flex; align-items: center; gap: var(--sp-4); padding: 0 var(--sp-5); background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(8px); border-bottom: 1px solid var(--c-border); } .topbar__toggle { border: none; background: transparent; cursor: pointer; width: 36px; height: 36px; border-radius: var(--radius-sm); color: var(--c-text-muted); font-size: 1.1rem; display: grid; place-items: center; } .topbar__toggle:hover { background: var(--c-surface-2); color: var(--c-text); } .topbar__title { font-size: var(--fs-h2); font-weight: var(--fw-semibold); } .topbar__breadcrumb { font-size: var(--fs-sm); color: var(--c-text-muted); } .topbar__spacer { flex: 1; } .topbar__actions { display: flex; align-items: center; gap: var(--sp-3); } .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--accent-contrast); display: grid; place-items: center; font-weight: var(--fw-semibold); font-size: var(--fs-sm); } .page { padding: var(--sp-6) var(--sp-5); max-width: var(--page-max); width: 100%; margin: 0 auto; } .page__header { margin-bottom: var(--sp-5); } .page__title { font-size: var(--fs-display); margin: 0 0 var(--sp-1); } .page__subtitle { color: var(--c-text-muted); font-size: var(--fs-body); margin: 0; } /* Grilles utilitaires */ .grid { display: grid; gap: var(--sp-4); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1024px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 860px) { .app, .app[data-collapsed="true"] { grid-template-columns: var(--sidebar-w-collapsed) 1fr; } .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } } /* ============================================================ DRAWER MOBILE (<768px) La sidebar devient un panneau hors-écran qui glisse à l'ouverture. Bouton hamburger + backdrop injectés par auth-utils.js#setupMobileSidebar (bascule la classe .sidebar-open sur et .active sur le backdrop). ============================================================ */ @media (max-width: 767.98px) { /* La sidebar quitte le flux de la grille : main occupe toute la largeur. */ .app, .app[data-collapsed="true"] { grid-template-columns: 1fr; } .sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: 78%; max-width: 320px; z-index: 1000; transform: translateX(-100%); transition: transform 0.25s ease-out; box-shadow: 2px 0 12px rgba(0, 0, 0, 0.35); } .sidebar.sidebar-open { transform: translateX(0); } /* Dans le drawer, on garde toujours la sidebar « pleine » (libellés visibles), même si l'état desktop était réduit en icônes. */ .app[data-collapsed="true"] .sidebar__brand-name, .app[data-collapsed="true"] .sidebar__section-label, .app[data-collapsed="true"] .nav-link span, .app[data-collapsed="true"] .product-switcher__label { display: revert; } .app[data-collapsed="true"] .nav-link { justify-content: flex-start; } .app[data-collapsed="true"] .sidebar__logo::after { display: inline-flex; } .sidebar-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 999; display: none; } .sidebar-backdrop.active { display: block; } #mobile-sidebar-toggle { position: fixed; top: 0.6rem; left: 0.6rem; z-index: 1001; background: var(--c-surface); color: var(--c-text); border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: 0.4rem 0.7rem; font-size: 1.1rem; line-height: 1; box-shadow: var(--shadow-sm); cursor: pointer; } /* On masque le toggle desktop (réduction) : sur mobile c'est le hamburger flottant qui pilote le drawer. Décalage du contenu de la topbar pour ne pas passer sous le hamburger. */ .topbar__toggle { display: none; } .topbar { padding-left: 3.4rem; } } @media (min-width: 768px) { #mobile-sidebar-toggle, .sidebar-backdrop { display: none !important; } } /* ---------- Loader plein écran ---------- Affiché pendant le chargement initial, masqué par initializePage() (auth-utils.js). Remplace l'ancien style inline dupliqué par page. */ .page-loader { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999; } .page-loader .spinner-border { width: 3rem; height: 3rem; }