/* public/css/design/shell.css * Ossature de l'application (topbar, sidebar, panneau reglages) — Phase 4, 20/07/2026. * Marquage 100% neuf (ssm-*), independant d'AdminLTE. adminlte.min.css reste charge * uniquement pour les composants pas encore repris a l'interieur de #body_app * (small-box/info-box/callout — voir DESIGN.md), mais ne stylise plus rien ici. * S'appuie sur les tokens de tokens.css (--bg, --surface, --accent, --ink, ...). */ * { box-sizing: border-box; } body.ssm-app { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-ui); min-height: 100vh; } /* Scrollbar du navigateur (page entiere), meme couleur que le theme actif (retour utilisateur 24/07/2026). La scrollbar RACINE (page entiere, dessinee par le navigateur/OS) ne suit QUE les styles poses sur - stylee sur body seul, verifiee non coloree dans un vrai navigateur malgre un getComputedStyle correct sur body. --accent/--bg ne sont definies que sur body[data-design] (tokens.css) : un petit script inline (layout/header.php, juste apres l'ouverture de ) les recopie sur avant le premier paint - ce qui suit ici lit ces memes variables une fois presentes sur html. */ html { scrollbar-width: thin; scrollbar-color: var(--accent, #3B49C8) var(--bg, #F3EDE1); } html::-webkit-scrollbar { width: 10px; height: 10px; } html::-webkit-scrollbar-track { background: var(--bg, #F3EDE1); } html::-webkit-scrollbar-thumb { background-color: var(--accent, #3B49C8); border-radius: 8px; border: 2px solid var(--bg, #F3EDE1); background-clip: content-box; } html::-webkit-scrollbar-thumb:hover { background-color: var(--accent-hover, var(--accent, #3B49C8)); } .ssm-shell { display: flex; flex-direction: column; min-height: 100vh; } .ssm-body { display: flex; flex: 1; min-height: 0; } /* ---- Sidebar (menu classique) ---- Retour utilisateur 23-24/07/2026 : "scroll de navigateur doit rester, on fait juste scroll pour le menu gauche tout seul, comme le panneau de reglages a droite" - meme principe que .ssm-settings (position:fixed, colonne independante du flux de page) plutot que de contraindre toute la page en overflow:hidden (tentative precedente, annulee : ca desactivait aussi le scroll navigateur normal sur .ssm-content). La sidebar est fixee sous la topbar (68px, .ssm- topbar) et defile UNIQUEMENT en interne si son propre contenu depasse la hauteur disponible ; le reste de la page (topbar sticky + .ssm-content) garde le defilement navigateur habituel, inchange. .ssm-content recoit un margin-left egal a la largeur de la sidebar pour ne pas passer dessous (la sidebar sort du flux flex normal avec position:fixed). */ .ssm-sidebar { width: 232px; position: fixed; top: 68px; bottom: 0; left: 0; z-index: 30; background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 14px 10px 20px; overflow-y: auto; transition: margin-left .18s ease, width .18s ease; /* Scrollbar visible + couleur du theme actif (retour utilisateur 23/07/2026 : la scrollbar grise par defaut du navigateur etait a peine visible dans le menu classique). N'apparait que si le contenu de la sidebar depasse sa hauteur disponible (overflow-y:auto standard). */ scrollbar-width: thin; scrollbar-color: var(--accent) transparent; } .ssm-sidebar::-webkit-scrollbar { width: 8px; } .ssm-sidebar::-webkit-scrollbar-track { background: transparent; } .ssm-sidebar::-webkit-scrollbar-thumb { background-color: var(--accent); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; } body.ssm-sidebar-collapsed .ssm-sidebar { margin-left: -232px; } body.ssm-layout-classique:not(.ssm-sidebar-collapsed) .ssm-content { margin-left: 232px; } @media (max-width: 860px) { .ssm-sidebar { box-shadow: var(--shadow); } body.ssm-layout-classique:not(.ssm-sidebar-collapsed) .ssm-content { margin-left: 0; } } .ssm-brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 16px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line); margin-bottom: 10px; } .ssm-brand-mark { width: 26px; height: 26px; border-radius: var(--radius); object-fit: contain; } .ssm-brand-name { font: 800 15px var(--font-display); letter-spacing: .02em; } .ssm-user { display: flex; align-items: center; gap: 9px; padding: 4px 8px 16px; } /* Premier bloc de la sidebar depuis que le logo/nom de station a demenage dans la top bar (21/07/2026) - reprend la petite bordure de separation qu'avait le bloc marque avant. */ .ssm-user--haut { padding-top: 16px; border-bottom: 1px solid var(--line); margin-bottom: 10px; } .ssm-user-avatar { color: var(--accent); font-size: 22px; } .ssm-user-name { color: var(--ink); text-decoration: none; font: 600 13px var(--font-ui); } .ssm-user-name:hover { color: var(--accent); } .ssm-nav { display: flex; flex-direction: column; gap: 2px; } /* body[data-design] prefixe partout ici : .ssm-nav-link/.ssm-nav-sublink sont des pour les entrees simples/sous-entrees (les entetes de groupe, elles, sont des