/* ============================================================ BIVQuality – Navigation : navbar + sidebar Thème clair & sombre via [data-bs-theme] sur ============================================================ */ /* ── Variables ────────────────────────────────────────────── */ :root, [data-bs-theme="light"] { --biv-nav-height: 48px; /* Navbar */ --biv-navbar-bg: #ffffff; --biv-navbar-border: rgba(13, 148, 136, 0.15); --biv-navbar-shadow: 0 2px 14px rgba(13, 148, 136, 0.08); --biv-navbar-color: #0f3d38; --biv-navbar-muted: #4a7c77; /* Sidebar — vert marque (cohérent bannières listes / BIVQuality) */ --biv-sidebar-width: 272px; --biv-sidebar-bg: #ecfdf5; --biv-sidebar-link: #14532d; --biv-sidebar-link-hover: #052e16; --biv-sidebar-link-hover-bg: rgba(22, 163, 74, 0.14); --biv-sidebar-active-bg: rgba(34, 197, 94, 0.22); --biv-sidebar-active-color: #065f46; --biv-sidebar-sep: rgba(21, 83, 45, 0.22); --biv-sidebar-chevron: #15803d; --biv-sidebar-brand-strip-bg: rgba(255, 255, 255, 0.55); --biv-sidebar-border: rgba(13, 148, 136, 0.18); /* Avatar */ --biv-avatar-bg: #d1fae5; --biv-avatar-color: #0d6b64; /* Page */ --biv-page-bg: #f0faf9; } [data-bs-theme="dark"] { /* Navbar */ --biv-navbar-bg: #0f1626; --biv-navbar-border: rgba(255, 255, 255, 0.06); --biv-navbar-shadow: 0 2px 12px rgba(0, 0, 0, 0.30); --biv-navbar-color: #e2e8f0; --biv-navbar-muted: #94a3b8; /* Sidebar — vert profond lecture claire sur fond sombre */ --biv-sidebar-bg: #052016; --biv-sidebar-link: rgba(220, 252, 231, 0.92); --biv-sidebar-link-hover: #f0fdf4; --biv-sidebar-link-hover-bg: rgba(34, 197, 94, 0.15); --biv-sidebar-active-bg: rgba(34, 197, 94, 0.24); --biv-sidebar-active-color: #d9f99d; --biv-sidebar-sep: rgba(134, 239, 172, 0.22); --biv-sidebar-chevron: #86efac; --biv-sidebar-brand-strip-bg: rgba(6, 78, 59, 0.55); --biv-sidebar-border: rgba(167, 243, 208, 0.12); /* Avatar */ --biv-avatar-bg: #1e293b; --biv-avatar-color: #e2e8f0; /* Page */ --biv-page-bg: #0a101c; } /* ── Navbar ───────────────────────────────────────────────── */ .biv-navbar { position: sticky; top: 0; z-index: 1050; display: flex; align-items: center; justify-content: space-between; height: var(--biv-nav-height); padding: 0 0.65rem; box-sizing: border-box; background: var(--biv-navbar-bg); border-bottom: 1px solid var(--biv-navbar-border); box-shadow: var(--biv-navbar-shadow); transition: background 0.25s, box-shadow 0.25s; } .biv-navbar-start, .biv-navbar-end { display: flex; align-items: center; gap: 0.35rem; } .biv-navbar-start { flex: 1; min-width: 0; } /* ── Logo barre sup. (compact en < lg quand la sidebar est en tiroir) ───────── */ .biv-navbar-logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; } /* Sur mobile, laisser le bloc logo rétrécir pour ne pas pousser le menu utilisateur */ .biv-navbar-start .biv-navbar-logo { flex-shrink: 1; min-width: 0; } .biv-navbar-start .biv-navbar-logo .biv-logo-img { max-width: min(230px, 100%); } .biv-logo-img { height: 48px; width: auto; max-width: 230px; object-fit: contain; } /* ── Bouton hamburger ─────────────────────────────────────── */ .biv-burger { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3px; width: 32px; height: 32px; padding: 6px; border: none; border-radius: 8px; background: transparent; cursor: pointer; transition: background 0.2s; } .biv-burger:hover, .biv-burger:focus-visible { background: rgba(0, 0, 0, 0.06); outline: none; } [data-bs-theme="dark"] .biv-burger:hover { background: rgba(255, 255, 255, 0.08); } .biv-burger-bar { display: block; width: 16px; height: 2px; border-radius: 2px; background: var(--biv-navbar-color); transition: transform 0.25s ease, opacity 0.25s ease, width 0.25s ease; } /* Animation hamburger → croix quand sidebar ouverte */ .biv-burger.is-active .biv-burger-bar:nth-child(1) { transform: translateY(5px) rotate(45deg); } .biv-burger.is-active .biv-burger-bar:nth-child(2) { opacity: 0; width: 0; } .biv-burger.is-active .biv-burger-bar:nth-child(3) { transform: translateY(-5px) rotate(-45deg); } /* ── Bouton icône (thème) ─────────────────────────────────── */ .biv-icon-btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: none; border-radius: 8px; background: transparent; color: var(--biv-navbar-muted); font-size: 1rem; cursor: pointer; transition: background 0.2s, color 0.2s; } .biv-icon-btn:hover, .biv-icon-btn:focus-visible { background: rgba(0, 0, 0, 0.06); color: var(--biv-navbar-color); outline: none; } [data-bs-theme="dark"] .biv-icon-btn:hover { background: rgba(255, 255, 255, 0.08); } /* Visibilité icônes thème */ [data-bs-theme="light"] .biv-theme-icon--light { display: none; } [data-bs-theme="light"] .biv-theme-icon--dark { display: inline; } [data-bs-theme="dark"] .biv-theme-icon--light { display: inline; } [data-bs-theme="dark"] .biv-theme-icon--dark { display: none; } /* ── Bouton utilisateur ───────────────────────────────────── */ .biv-user-btn { display: flex; align-items: center; gap: 0.4rem; height: 30px; padding: 0 0.55rem 0 0.4rem; border: 1px solid var(--biv-navbar-border); border-radius: 20px; background: transparent; color: var(--biv-navbar-color); font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: background 0.2s, border-color 0.2s; } .biv-user-btn::after { margin-left: 0.15rem; font-size: 0.65rem; opacity: 0.7; } .biv-user-btn:hover, .biv-user-btn:focus-visible { background: rgba(0, 0, 0, 0.04); outline: none; } [data-bs-theme="dark"] .biv-user-btn:hover { background: rgba(255, 255, 255, 0.06); } .biv-user-avatar { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--biv-avatar-bg); color: var(--biv-avatar-color); font-size: 0.8rem; flex-shrink: 0; } .biv-user-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── Dropdown utilisateur ─────────────────────────────────── */ .biv-dropdown-menu { min-width: 220px; padding: 0.5rem; border: 1px solid var(--biv-navbar-border); border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); background: var(--biv-navbar-bg); } [data-bs-theme="dark"] .biv-dropdown-menu { background: #1a2744; border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35); } .biv-dropdown-header { display: flex; align-items: center; padding: 0.5rem 0.75rem; font-size: 0.8rem; font-weight: 600; color: var(--biv-navbar-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.02em; } .biv-divider { margin: 0.375rem 0; border-color: var(--biv-navbar-border); } [data-bs-theme="dark"] .biv-divider { border-color: rgba(255, 255, 255, 0.08); } .biv-dropdown-item { display: flex; align-items: center; padding: 0.5rem 0.75rem; border-radius: 8px; font-size: 0.875rem; color: var(--biv-navbar-color); cursor: pointer; transition: background 0.15s, color 0.15s; border: none; background: transparent; width: 100%; text-align: left; text-decoration: none; } .biv-dropdown-item:hover, .biv-dropdown-item:focus { background: rgba(0, 0, 0, 0.05); color: var(--biv-navbar-color); } [data-bs-theme="dark"] .biv-dropdown-item { color: #e2e8f0; } [data-bs-theme="dark"] .biv-dropdown-item:hover, [data-bs-theme="dark"] .biv-dropdown-item:focus { background: rgba(255, 255, 255, 0.07); color: #ffffff; } .biv-dropdown-item--danger { color: #dc2626 !important; } .biv-dropdown-item--danger:hover, .biv-dropdown-item--danger:focus { background: rgba(220, 38, 38, 0.08) !important; color: #dc2626 !important; } [data-bs-theme="dark"] .biv-dropdown-item--danger { color: #f87171 !important; } [data-bs-theme="dark"] .biv-dropdown-item--danger:hover { background: rgba(248, 113, 113, 0.12) !important; } /* ── Sidebar (pleine hauteur viewport — contenu principal repoussé via margin) ────────────────── */ .biv-sidebar { position: fixed; top: 0; left: 0; /* Au-dessus de la navbar sticky (1050), sous les modales Bootstrap (~1055) */ z-index: 1052; width: var(--biv-sidebar-width); height: 100dvh; display: flex; flex-direction: column; overflow: hidden; background: var(--biv-sidebar-bg); border-right: 1px solid var(--biv-sidebar-border, var(--biv-navbar-border)); transform: translateX(-100%); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); } body.biv-sidebar-expanded .biv-sidebar { transform: translateX(0); box-shadow: 4px 0 26px rgba(15, 23, 42, 0.1); } [data-bs-theme="dark"] body.biv-sidebar-expanded .biv-sidebar { box-shadow: 4px 0 38px rgba(0, 0, 0, 0.5); } .biv-sidebar-brand { flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 0.2rem; padding: 0 0.35rem; border-bottom: 1px solid var(--biv-sidebar-border, var(--biv-navbar-border)); background: var(--biv-sidebar-brand-strip-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .biv-sidebar-brand-link { display: flex; align-items: center; justify-content: center; flex: 1; min-width: 0; text-decoration: none; line-height: 0; } .biv-sidebar-brand-logo { display: block; height: 72px; width: auto; max-width: 100%; object-fit: contain; margin: 0; } .biv-sidebar-close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.25rem; height: 2.25rem; padding: 0; border: none; border-radius: 10px; background: transparent; color: var(--biv-sidebar-link); cursor: pointer; transition: background 0.2s, color 0.2s; } .biv-sidebar-close:hover, .biv-sidebar-close:focus-visible { background: var(--biv-sidebar-link-hover-bg); color: var(--biv-sidebar-link-hover); outline: none; } [data-bs-theme="dark"] .biv-sidebar-close:hover, [data-bs-theme="dark"] .biv-sidebar-close:focus-visible { background: rgba(34, 197, 94, 0.2); color: var(--biv-sidebar-link-hover); } .biv-sidebar-nav { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 1rem 0.75rem 2rem; scrollbar-width: thin; } .biv-sidebar-nav::-webkit-scrollbar { width: 4px; } .biv-sidebar-nav::-webkit-scrollbar-thumb { background: rgba(21, 128, 61, 0.28); border-radius: 2px; } [data-bs-theme="dark"] .biv-sidebar-nav::-webkit-scrollbar-thumb { background: rgba(134, 239, 172, 0.25); } /* ── Lien simple (Tableau de bord) ───────────────────────── */ .biv-nav-list { list-style: none; margin: 0 0 0.25rem; padding: 0; } .biv-nav-link { display: flex; align-items: center; gap: 0.65rem; padding: 0.6rem 0.875rem; border-radius: 10px; color: var(--biv-sidebar-link); text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: background 0.18s, color 0.18s; } .biv-nav-link:hover { background: var(--biv-sidebar-link-hover-bg); color: var(--biv-sidebar-link-hover); } .biv-nav-link.is-active { background: var(--biv-sidebar-active-bg); color: var(--biv-sidebar-active-color); } .biv-nav-icon { font-size: 1.05rem; flex-shrink: 0; } /* ── Section avec dropdown ────────────────────────────────── */ .biv-nav-section { margin-bottom: 2px; } .biv-nav-group-toggle { display: flex; align-items: center; width: 100%; gap: 0.65rem; padding: 0.6rem 0.875rem; border: none; border-radius: 10px; background: transparent; color: var(--biv-sidebar-link); font-size: 0.9rem; font-weight: 500; cursor: pointer; text-align: left; transition: background 0.18s, color 0.18s; } .biv-nav-group-toggle:hover { background: var(--biv-sidebar-link-hover-bg); color: var(--biv-sidebar-link-hover); } .biv-nav-group-toggle.is-active { background: var(--biv-sidebar-active-bg); color: var(--biv-sidebar-active-color); } .biv-nav-group-icon { display: flex; align-items: center; font-size: 1.05rem; flex-shrink: 0; } .biv-nav-group-label { flex: 1; min-width: 0; } .biv-nav-chevron { font-size: 0.68rem; color: var(--biv-sidebar-chevron); transition: transform 0.25s ease; flex-shrink: 0; } .biv-nav-group-toggle[aria-expanded="true"] .biv-nav-chevron { transform: rotate(180deg); } /* ── Sous-menu ────────────────────────────────────────────── */ .biv-nav-sub-list { list-style: none; margin: 2px 0 4px 1.35rem; padding: 0.25rem 0 0.25rem 0.875rem; border-left: 2px solid var(--biv-sidebar-sep); } .biv-nav-sub-link { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.625rem; border-radius: 8px; color: var(--biv-sidebar-link); text-decoration: none; font-size: 0.855rem; transition: background 0.18s, color 0.18s; } .biv-nav-sub-link:hover { background: var(--biv-sidebar-link-hover-bg); color: var(--biv-sidebar-link-hover); } .biv-nav-sub-link.is-active { background: var(--biv-sidebar-active-bg); color: var(--biv-sidebar-active-color); font-weight: 500; } .biv-nav-sub-icon { font-size: 0.85rem; flex-shrink: 0; opacity: 0.75; } /* ── Overlay : uniquement à droite du tiroir (mobile), ne masque pas le menu ────────────────── */ .biv-sidebar-backdrop { position: fixed; inset: 0; inset-inline-start: var(--biv-sidebar-width); /* Entre le contenu et la sidebar ; sous la navbar pour garder thème / user accessibles */ z-index: 1048; background: rgba(0, 0, 0, 0.4); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.28s; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } @media (min-width: 992px) { .biv-sidebar-backdrop { display: none; } } .biv-sidebar-backdrop.is-visible { opacity: 1; visibility: visible; pointer-events: auto; } /* ── Layout principal : colonne de contenu repoussée quand la sidebar est ouverte ──────────── */ body:has(.app-main) { background-color: var(--biv-page-bg); transition: background-color 0.25s; } /* * Important : éviter width:100 % + margin-left (déborderait ; la grille ne voyait pas le redimensionnement). * Desktop : poussoir + largeur réduite. Mobile : pleine largeur, le tiroir recouvre (overlay). */ body.biv-has-app-shell { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } body.biv-has-app-shell .biv-app-shell { flex: 1; display: flex; flex-direction: column; min-height: 0; } .app-main { width: 100%; flex: 1; display: flex; flex-direction: column; min-width: 0; margin-left: 0; min-height: 0; transition: margin-left 0.28s cubic-bezier(0.4, 0, 0.2, 1), width 0.28s cubic-bezier(0.4, 0, 0.2, 1); } @media (min-width: 992px) { body.biv-has-app-shell.biv-sidebar-expanded .app-main { margin-left: var(--biv-sidebar-width); width: calc(100% - var(--biv-sidebar-width)); } } body.biv-has-app-shell .app-main > .my-container { flex: 1; min-height: 0; display: flex; flex-direction: column; } .biv-has-app-shell { overflow-x: clip; } @media (max-width: 991.98px) { body.biv-has-app-shell.biv-sidebar-expanded { overflow-x: hidden; } } /* ── Responsive (largeur tiroir = marge poussoir — même variable CSS) ───────────────────── */ @media (max-width: 575.98px) { .biv-logo-img { height: 32px; } body.biv-has-app-shell { --biv-sidebar-width: min(290px, 88vw); } .biv-sidebar-brand { padding: 0 0.3rem; } .biv-sidebar-brand-logo { height: 56px; } } @media (min-width: 576px) and (max-width: 991.98px) { body.biv-has-app-shell { --biv-sidebar-width: 280px; } }