/* ========================================================================== layout.css — mise en page transverse (sidebar #left + #main). Architecture ------------ #content est une grille à 2 colonnes : sidebar + zone principale. Modes d'affichage déclaratifs (classes posées par le controller via PHP) : sur : .no-topbar → topbar #navigation absente du DOM sur #content: .no-sidebar → sidebar #left absente du DOM .sidebar-narrow → largeur 160px .sidebar-wide → largeur 240px .sidebar-right → sidebar à droite .sidebar-collapsed → bascule transitoire JS (bouton burger) La sélection `#content > #left` est volontaire : spécificité suffisante pour battre les anciennes règles `#left { position: fixed; … }` de style.css pendant la phase de migration. ========================================================================== */ #content { display: grid; grid-template-columns: var(--sidebar-width, 200px) minmax(0, 1fr); align-items: start; } /* Fond peint sur la colonne sidebar via linear-gradient : la sidebar est sticky donc plus courte que le content, on étire visuellement son fond sur toute la hauteur du grid. Évite un ::before positionné qui forcerait un z-index sur #main — ce z-index ferait de #main un stacking context (grid item z-index != auto) et piégerait les modales fixed sous .modal-backdrop. */ #content { background: linear-gradient( to right, var(--black2) 0, var(--black2) var(--sidebar-width, 200px), transparent var(--sidebar-width, 200px) ); } /* Placement explicite : sans ça, certaines combinaisons (sticky + contenu très long dans #main) font qu'auto-flow inverse les cellules sous Chrome. */ #content > #left { grid-column: 1; grid-row: 1; position: sticky; top: 0; width: auto; height: auto; left: auto; bottom: auto; padding-top: 0; overflow: hidden; align-self: start; } #content > #main { grid-column: 2; grid-row: 1; margin: 0; padding-top: 10px; padding-bottom: 75px; } /* --- Modes ---------------------------------------------------------------- */ #content.no-sidebar, #content.sidebar-collapsed { grid-template-columns: minmax(0, 1fr); } #content.no-sidebar > #main, #content.sidebar-collapsed > #main { grid-column: 1; } #content.no-sidebar > #left, #content.sidebar-collapsed > #left { display: none; } #content.no-sidebar, #content.sidebar-collapsed { background: none; } #content.sidebar-narrow { --sidebar-width: 160px; } #content.sidebar-wide { --sidebar-width: 240px; } #content.sidebar-right { grid-template-columns: minmax(0, 1fr) var(--sidebar-width, 200px); } #content.sidebar-right > #left { grid-column: 2; } #content.sidebar-right > #main { grid-column: 1; } #content.sidebar-right { background: linear-gradient( to left, var(--black2) 0, var(--black2) var(--sidebar-width, 200px), transparent var(--sidebar-width, 200px) ); } /* --- No-topbar (posé sur body par PHP) ------------------------------------ */ /* La topbar n'est plus émise par le layout, mais on neutralise au besoin si un legacy header continuait à la rendre. */ body.no-topbar #navigation { display: none; } /* --- Responsive ----------------------------------------------------------- */ /* En dessous de 768px on bascule en simple colonne. La sidebar peut être ré-affichée à la demande par le bouton hamburger (classe inverse). */ @media (max-width: 767px) { #content { grid-template-columns: minmax(0, 1fr); } #content > #left { display: none; } #content.sidebar-mobile-open > #left { display: block; position: fixed; top: 0; left: 0; bottom: 0; width: 80%; max-width: 280px; z-index: 1000; } } /* --- Print ---------------------------------------------------------------- */ @media print { #content { grid-template-columns: minmax(0, 1fr); } #content > #left { display: none; } }