*/ .app-shell { display: flex; align-items: stretch; width: 100%; /* Espace sous la navbar fixed-top pour que le contenu ne passe pas dessous */ padding-top: var(--header-h, 56px); } /* Sidebar : prend de la place dans le flux (flex item), reste sous le header */ .sidebar { position: sticky; top: var(--header-h, 56px); height: calc(100vh - var(--header-h, 56px)); background-color: var(--sidebar-bg); color: var(--sidebar-fg); border-right: 1px solid var(--sidebar-separator); display: flex; flex-direction: column; /* largeur verrouillée : ne se compresse pas */ flex: 0 0 var(--sidebar-w); width: var(--sidebar-w); flex-shrink: 0; transition: width 0.2s ease, flex-basis 0.2s ease; overflow: hidden; /* on gère le scroll dans .sidebar-links */ z-index: 10; /* suffisant pour rester au-dessus du main si besoin, sans overlay global */ } .sidebar.collapsed { flex-basis: var(--sidebar-w-collapsed); width: var(--sidebar-w-collapsed); } /* Applique l'état réduit dès le premier paint via */ html.sidebar-collapsed .sidebar { flex-basis: var(--sidebar-w-collapsed); width: var(--sidebar-w-collapsed); } html.sidebar-collapsed #sidebar .sidebar-links a span, html.sidebar-collapsed #sidebar .sidebar-links a .caret, html.sidebar-collapsed #sidebar .sidebar-links a .caret-spacer { display: none !important; } html.sidebar-collapsed #sidebar .sidebar-links a { grid-template-columns: 1fr; justify-items: center; } html.sidebar-collapsed #sidebar .submenu { display: none !important; } /* Supprime les transitions au premier paint pour éviter les flashes */ html.sidebar-preload .sidebar { transition: none !important; } /* Zone liens scrollable */ .sidebar-links { flex: 1; overflow-y: auto; overflow-x: hidden; } .sidebar-links ul { list-style: none; margin: 0; padding: 0; } .sidebar-links li { display: block; /* empile puis verticalement */ } .sidebar-links a { display: grid; grid-template-columns: 16px 20px 1fr; /* caret / icon / label */ align-items: center; gap: 10px; text-decoration: none; color: var(--sidebar-fg); padding: 12px 16px; width: 100%; transition: background 0.2s; font-size: 0.8125rem; /* taille Phoenix ~13px */ line-height: 1.188rem; /* densité Phoenix */ position: relative; } /* Empêche les retours à la ligne des libellés et autorise l’ellipse si nécessaire */ .sidebar-links a .label { min-width: 0; /* indispensable en grid pour autoriser le shrink */ white-space: nowrap; /* pas de retour à la ligne */ overflow: hidden; /* masque l’excès */ text-overflow: ellipsis; /* … si trop long */ display: block; } /* Empêche les retours à la ligne dans les sous-menus inline */ .sidebar .submenu a { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-links a:hover { background: var(--sidebar-hover); } /* Actif type Phoenix : trait à gauche + couleur plus marquée (texte + icône) */ .sidebar .sidebar-links a.active, .sidebar .sidebar-links a[aria-current="page"] { background: var(--sidebar-hover); color: var(--bs-primary, #2c7be5); } .sidebar .sidebar-links a.active .nav-icon, .sidebar .sidebar-links a[aria-current="page"] .nav-icon { color: var(--bs-primary, #2c7be5); } .sidebar .sidebar-links a.active::before, .sidebar .sidebar-links a[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--bs-primary, #2c7be5); } /* Parent marqué actif si un enfant l'est */ .sidebar .has-submenu-item.open > .has-submenu { color: var(--bs-primary, #2c7be5); } .sidebar .has-submenu-item.open > .has-submenu .nav-icon { color: var(--bs-primary, #2c7be5); } /* focus clavier visible */ .sidebar .sidebar-links a:focus-visible { outline: 2px solid var(--bs-primary, #2c7be5); outline-offset: 2px; } .sidebar-links i { font-size: 1.2rem; } /* Colonne chevron à gauche */ .sidebar-links a .caret { opacity: 0; transition: transform .2s, opacity .2s; } .sidebar .has-submenu .caret { opacity: 1; } .sidebar .has-submenu-item.open .caret { transform: rotate(90deg); } .sidebar-links a .caret-spacer { width: 16px; height: 1px; display: inline-block; } .sidebar-links a .nav-icon { font-size: 1.2rem; } /* Footer fixé en bas de la sidebar (grâce au flex column) */ .sidebar-footer { border-top: 1px solid var(--sidebar-separator); padding: 10px 12px; } .toggle-btn { background: none; border: none; color: var(--sidebar-fg); width: 100%; padding: 8px 10px; cursor: pointer; text-align: center; } /* Texte masqué quand réduite */ #sidebar.collapsed .sidebar-links a span { display: none; } #sidebar.collapsed .sidebar-links a { grid-template-columns: 1fr; justify-items: center; } #sidebar.collapsed .sidebar-links a .caret, #sidebar.collapsed .sidebar-links a .caret-spacer { display: none; } #sidebar.collapsed .submenu { display: none !important; } /* Contenu principal : doit pouvoir se rétrécir sans pousser le layout */ .main-content { flex: 1 1 auto; min-width: 0; overflow-x: hidden; } .main-content .table-responsive { overflow-x: auto; } .main-content img:not(.logo-light):not(.logo-dark):not(.modal-gps-icon) { max-width: 100%; height: auto; } .main-content pre, .main-content code { white-space: pre-wrap; word-wrap: break-word; } /* Calendrier: neutralise la hauteur forcée par le thème Phoenix sur #appCalendar pour laisser le flux normal pousser la légende en dessous. */ #appCalendar { height: auto !important; } /* FullCalendar: meilleure lisibilité sur petits écrans */ @media (max-width: 991.98px) { .fc .fc-toolbar.fc-header-toolbar { flex-wrap: wrap; gap: .5rem; } .fc .fc-toolbar-chunk { width: 100%; justify-content: space-between; } .fc .fc-toolbar-title { font-size: 1rem; } .fc .fc-button { padding: .25rem .4rem; font-size: .875rem; } .fc .fc-button-group { flex-wrap: wrap; } } /* Calendrier: adapte les couleurs du thème Phoenix au thème Bootstrap (clair/sombre) */ html[data-bs-theme="dark"] .fc .fc-col-header, html[data-bs-theme="dark"] .fc .fc-col-header th, html[data-bs-theme="dark"] .fc .fc-col-header-cell-cushion { background-color: var(--bs-body-bg) !important; color: var(--bs-body-color) !important; border-color: var(--bs-border-color) !important; } Optionnel (pour des séparateurs cohérents) html[data-bs-theme="dark"] .fc .fc-scrollgrid { border-color: var(--bs-border-color) !important; } /* Sous-menus (accordéon) */ .sidebar .submenu, #sidebarOffcanvas .submenu { display: block; max-height: 0; overflow: hidden; padding-left: 34px; margin: 4px 0 8px; transition: max-height 0.25s ease, opacity 0.2s ease; opacity: 0; } .sidebar .has-submenu-item.open > .submenu, #sidebarOffcanvas .has-submenu-item.open > .submenu { max-height: 600px; opacity: 1; } .sidebar .has-submenu .caret, #sidebarOffcanvas .has-submenu .caret { opacity: 1; transition: transform .2s, opacity .2s; } .sidebar .has-submenu-item.open .has-submenu .caret, #sidebarOffcanvas .has-submenu-item.open .has-submenu .caret { transform: rotate(90deg); } /* =================== Flyout type Phoenix (sans Bootstrap/Popper) Utilisé par base.js (classe .sf-sidebar-flyout) =================== */ .sf-sidebar-flyout { position: fixed; /* s’affiche à droite de la sidebar, indépendant des overflows */ z-index: 2000; /* au-dessus du contenu et des tooltips */ background: var(--panel-bg); color: var(--panel-fg); border: 1px solid var(--panel-border); border-radius: 12px; box-shadow: 0 6px 24px rgba(33,37,41,.15); min-width: 220px; max-width: 280px; padding: 0; display: none; /* `.show` pour afficher */ } .sf-sidebar-flyout.show { display: block; } .sf-sidebar-flyout .flyout-header { background: var(--panel-bg); border-bottom: 1px solid var(--panel-border); color: var(--panel-fg); font-weight: 600; padding: 10px 14px; margin: 0 0 8px 0; } /* Assure les coins supérieurs arrondis même sans overflow hidden */ .sf-sidebar-flyout .flyout-header { border-top-left-radius: 12px; border-top-right-radius: 12px; } /* Cas lien unique: arrondis complets */ .sf-sidebar-flyout .flyout-single { border-radius: 12px; } .sf-sidebar-flyout ul { list-style: none; margin: 0; padding: 0; } .sf-sidebar-flyout li a { display: block; padding: 8px 10px; color: var(--panel-fg); text-decoration: none; border-radius: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sf-sidebar-flyout li a:hover { background: var(--panel-hover); } /* Lien unique dans flyout (sans sous-menu) */ .sf-sidebar-flyout .flyout-single { display: block; padding: 10px 14px; color: var(--panel-fg); text-decoration: none; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sf-sidebar-flyout .flyout-single:hover { background: var(--panel-hover); border-radius: 8px; } /* Comportement Phoenix : le panneau change de fond au hover en mode lien unique */ .sf-sidebar-flyout.is-single { background: var(--panel-bg); } .sf-sidebar-flyout.is-single:hover { background: var(--panel-hover); } /* Fallback sûr : le JS pose .is-hover sur lien unique → le panneau (et la flèche) suivent */ .sf-sidebar-flyout.is-single.is-hover { background: var(--panel-hover); } .sf-sidebar-flyout .flyout-header a { color: var(--panel-fg); text-decoration: none; } .sf-sidebar-flyout .flyout-header a:hover { text-decoration: underline; } .sf-sidebar-flyout .flyout-header.nonlink { cursor: default; /* pas de soulignement, couleur inchangée */ } .sf-sidebar-flyout .flyout-single.nonlink { cursor: default; color: var(--panel-fg); text-decoration: none; } /* Flèche type Phoenix (carré rotatif, héritant du fond) */ .sf-sidebar-flyout::after { content: ""; position: absolute; z-index: 1; width: 1rem; height: 1rem; background: inherit; /* même fond que le flyout */ top: 0.85rem; /* alignement avec l’icône */ left: -9px; /* sort légèrement sur la gauche */ transform: rotate(45deg); border-bottom-left-radius: 0.125rem; border-width: 0 0 1px 1px; /* liseré comme Phoenix */ border-style: solid; border-color: var(--panel-border); } /* Sécurité: en sidebar réduite, les sous-menus inline restent masqués (géré via flyout) */ #sidebar.collapsed .submenu { display: none !important; } /* ============================= Offcanvas mobile (hamburger) sous le header Solution A révisée : le panneau commence sous la navbar fixe ============================= */ /* Ancienne règle height:100% supprimée et remplacée ici */ nav.navbar.fixed-top { /* Reste fixe au-dessus de l'offcanvas/backdrop mais reste sous les modales (1055) */ z-index: 1050; /* backdrop 1040 < header 1050 < modal 1055 */ } #sidebarOffcanvas.offcanvas-top { /* Décalage sous le header (valeur dynamique via --header-h définie en JS) */ top: var(--header-h,56px) !important; /* Hauteur restante */ --bs-offcanvas-height: calc(100vh - var(--header-h,56px)); height: calc(100vh - var(--header-h,56px)) !important; max-height: calc(100vh - var(--header-h,56px)) !important; border-top: 1px solid var(--bs-border-color); } /* Backdrop limitée pour ne pas recouvrir le header */ .offcanvas-backdrop { top: var(--header-h,56px); height: calc(100vh - var(--header-h,56px)); } /* Corps du offcanvas (conserve le style existant) */ #sidebarOffcanvas .offcanvas-body { background: var(--sidebar-bg); color: var(--sidebar-fg); padding: 0; } /* Remet la grille normale dans l'offcanvas, même si html.sidebar-collapsed est présent */ #sidebarOffcanvas .sidebar-links a { display: grid; grid-template-columns: 16px 20px 1fr; justify-items: initial; } /* Ne jamais masquer le texte dans le menu offcanvas */ #sidebarOffcanvas .sidebar-links a span, #sidebarOffcanvas .sidebar-links a .caret, #sidebarOffcanvas .sidebar-links a .caret-spacer { display: inline !important; } #sidebarOffcanvas .submenu { display: block !important; } #sidebarOffcanvas .submenu a { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #sidebarOffcanvas .sidebar-links a.active { background: var(--sidebar-hover); color: var(--bs-primary, #2c7be5); } #sidebarOffcanvas .sidebar-links a.active .nav-icon { color: var(--bs-primary, #2c7be5); } /* ============================= Global styles ============================= */ /* Empêche le scroll de l'arrière-plan quand l'offcanvas est ouvert */ html.no-scroll, body.no-scroll { overflow: hidden !important; } main { flex: 1; display: flex; flex-direction: column; } /* Animation fluide pour le menu hamburger */ @media (max-width: 575.98px) { .collapse.navbar-collapse { transition: max-height 0.3s ease; overflow: hidden; } } /* Transition douce sur les liens du menu */ .navbar-nav .nav-link { transition: color 0.3s ease, background-color 0.3s ease; } @media (min-width: 576px) { #navbarTech { display: flex !important; } } /* Modales : laisser un espace sous le header fixe en affichage mobile */ @media (max-width: 575.98px) { .modal.show .modal-dialog[class*="modal-fullscreen"] { margin: 0; height: 100%; } .modal.show .modal-dialog[class*="modal-fullscreen"] .modal-content { display: flex; flex-direction: column; height: 100%; } .modal.show .modal-dialog[class*="modal-fullscreen"] .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } } /* (Dark mode) Couleurs par défaut gérées par Bootstrap via data-bs-theme */ .logo-dark { display: none; } .dark-mode .logo-light { display: none; } .dark-mode .logo-dark { display: inline; } /* Brand logo container: reserve space to prevent header layout shift */ .brand-logo { display: inline-flex; align-items: center; } .navbar .brand-logo { width: 160px; height: 40px; } .navbar .brand-logo img { max-height: 100%; height: auto; width: auto; } /* Mise en page spécifique (>=768px) */ @media (min-width: 768px) { #fiche-wrapper { max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; } } /* Tables installation */ .table-installation th, .table-installation td { padding: 0.75rem; vertical-align: middle; width: 50%; white-space: nowrap; } .table-installation input, .table-installation select { margin-top: 4px; margin-bottom: 4px; padding-top: 6px; padding-bottom: 6px; width: 100%; } /* Titres des pages */ h1.page-title { font-size: 1.5rem; font-weight: 500; text-align: center; margin-bottom: 1.5rem; } /* Cellules d'action dans les tableaux */ td.actions { display: flex; gap: 0.5rem; width: 100%; } td.actions > a, td.actions > form { flex: 1; } td.actions > form button { width: 100%; } /* ============================= User avatar & header flyout (Phoenix-like) ============================= */ /* Avatar rond dans le header */ .sf-avatar { width: 42px; height: 42px; aspect-ratio: 1 / 1; border-radius: 50%; object-fit: cover; display: inline-block; } .sf-avatar-initials { width: 42px; height: 42px; line-height: 42px; font-size: 16px; font-weight: 600; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--panel-hover); color: var(--panel-fg); } /* Flyout utilisateur (créé en JS) */ .sf-user-flyout { position: fixed; z-index: 2100; background: var(--panel-bg); color: var(--panel-fg); border: 1px solid var(--panel-border); border-radius: 12px; box-shadow: 0 6px 24px rgba(33,37,41,.15); min-width: 220px; padding: 8px; display: none; /* .show pour afficher */ } .sf-user-flyout.show { display: block; } .sf-user-flyout .uf-header { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; border-bottom: 1px solid var(--panel-border); margin-bottom: 8px; } .sf-user-flyout .uf-header .name { font-weight: 600; line-height: 1.2; } .sf-user-flyout .uf-header .role { font-size: 0.8125rem; opacity: .8; } /* Liens du menu utilisateur */ .sf-user-flyout a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; text-decoration: none; color: var(--panel-fg); border-radius: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sf-user-flyout a:hover { background: var(--panel-hover); } /* Flèche (carré rotatif, hérite du fond) */ .sf-user-flyout::after { content: ""; position: absolute; z-index: 1; width: 0.9rem; height: 0.9rem; background: inherit; transform: rotate(45deg); border-width: 1px 0 0 1px; border-style: solid; border-color: var(--panel-border); top: -7px; /* au-dessus du panneau */ right: var(--sf-user-arrow-right, 14px); /* ajusté en JS si besoin */ } /* ============================= Barre de recherche header ============================= */ .navbar .container-fluid { gap: .25rem; } #qsDesktopSlot { flex: 1 1 auto; min-width: 0; } #qsDesktopSlot .sf-quicksearch input.form-control { min-width: 0; } .sf-quicksearch { width: 320px; } @media (max-width: 576px) { .sf-quicksearch { width: 100%; } } .sf-qs-results { position: absolute; top: calc(100% + .25rem); left: 0; right: 0; z-index: 1080; /* au-dessus de la navbar */ max-height: 60vh; overflow: auto; } /* Recherche mobile (formulaire déplacé) */ #mobileSearchOverlay .sf-quicksearch { width: 100%; } #mobileSearchOverlay .sf-qs-results { max-height: 65vh; } /* Assure l’interaction du champ de recherche quand l’offcanvas mobile est ouvert */ @media (max-width: 991.98px) { .navbar .sf-quicksearch { position: relative; z-index: 1066; } } /* Nettoyage: suppression des surcharges de couleurs non nécessaires */ /* Hover limité aux boutons d'action du header (évite l'avatar) */ .btn.header-action:hover { background: rgba(0,0,0,.08); } #user-avatar-btn.btn:hover { background: transparent !important; } /* Header: agrandir légèrement les icônes à côté de l’avatar */ .header-actions .header-action i { font-size: 1.4rem; line-height: 1; } /* Retire les couleurs customisées pour s'aligner sur Bootstrap par défaut */ /* Masque la scrollbar sur tous les navigateurs */ .nav-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ } .nav-tabs::-webkit-scrollbar { display: none; /* Chrome, Safari */ }