/* ============================================================================= * GITSS DocApp — components.css * Couche de composants maison au-dessus de Bootstrap 5.3 + tokens.css * * ORDRE D'IMPORT obligatoire dans le : * 1. bootstrap.min.css * 2. bootstrap-icons.min.css (ou équivalent auto-hébergé) * 3. tokens.css * 4. components.css ← ce fichier * * Aucun style inline. Aucune ressource externe. * Compatible Bootstrap 5.3 — étend, ne remplace pas. * ============================================================================= */ /* ── 00. RESET MINIMAL ────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } /* ── 01. ROOT ─────────────────────────────────────────────────────────────── */ .gs-root { font-family: var(--gitss-font-sans); font-size: var(--gitss-text-base); color: var(--bs-body-color); background: var(--bs-body-bg); min-height: 100vh; transition: background 180ms ease, color 180ms ease; } /* ── 02. APP SHELL ────────────────────────────────────────────────────────── */ .gs-app { display: flex; height: 100vh; overflow: hidden; } /* Backdrop mobile (affiché via body.sidebar-open) */ .gs-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: var(--gitss-z-modal-bg); cursor: pointer; } body.sidebar-open .gs-backdrop { display: block; } .gs-app-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; } /* ── 03. SIDEBAR ──────────────────────────────────────────────────────────── */ /* Toujours navy-900, light ET dark (sidebar invariante) */ .gs-sb { width: var(--gitss-sidebar-width); flex-shrink: 0; display: flex; flex-direction: column; background: var(--gitss-navy-900); height: 100vh; overflow-y: auto; z-index: var(--gitss-z-fixed); transition: transform 250ms var(--gitss-ease-out); } /* Logo */ .gs-sb-logo-area { padding: 13px 13px 11px; border-bottom: 1px solid rgba(255, 255, 255, .06); display: flex; flex-direction: column; gap: 8px; } .gs-sb-logo-row { display: flex; align-items: center; gap: 8px; } .gs-sb-mark { width: 26px; height: 26px; background: var(--gitss-teal-500); border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0; } .gs-sb-brand { font-size: 13px; font-weight: 700; color: #fff; letter-spacing: -.3px; } .gs-sb-pill { align-self: flex-start; display: flex; align-items: center; gap: 5px; background: var(--gitss-teal-500); color: #fff; font-size: 10px; font-weight: 600; padding: 2px 8px 2px 6px; border-radius: 3px; } .gs-sb-dot { width: 5px; height: 5px; background: rgba(255, 255, 255, .5); border-radius: 50%; } /* Profile */ .gs-sb-profile { padding: 9px 13px; border-bottom: 1px solid rgba(255, 255, 255, .06); } .gs-sb-prof-name { font-size: 11px; font-weight: 600; color: var(--gitss-neutral-200); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gs-sb-prof-org { font-size: 10px; color: var(--gitss-navy-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Nav */ .gs-sb-nav { flex: 1; padding: 6px 0; overflow-y: auto; } .gs-sb-grp { padding: 10px 13px 2px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--gitss-sidebar-section-color); } /* Item — s'applique à et