/* ============================================================================ SCRIPTOTHEK - Stylesheet unique dark + light ---------------------------------------------------------------------------- Architecture : 1. Variables (light défaut + dark override via [data-theme="dark"]) 2. Reset & base typographique 3. Layout (public, auth, app, error) 4. Composants (boutons, formulaires, cards, widgets, sidebar, header) 5. Pages (home, dashboard, legal) 6. Utilitaires 7. Responsive 8. Accessibilité Branding tenant : --brand-primary et --brand-secondary injectés via BrandingHelper::inlineStyleVars() dans le . ============================================================================ */ /* ============================================================================ 1. VARIABLES ============================================================================ */ :root { /* Brand (override par tenant) */ --brand-primary: #2563eb; --brand-secondary: #64748b; /* Couleurs de surface (LIGHT par défaut) */ --bg-base: #f5f7fa; --bg-surface: #ffffff; --bg-elevated: #ffffff; --bg-overlay: rgba(15, 23, 42, 0.5); --bg-hover: #f1f5f9; --bg-active: #e2e8f0; --bg-input: #ffffff; /* Texte */ --text-primary: #0f172a; --text-secondary: #475569; --text-tertiary: #94a3b8; --text-inverse: #ffffff; --text-on-brand: #ffffff; /* Bordures */ --border-subtle: #e2e8f0; --border-default: #cbd5e1; --border-strong: #94a3b8; --border-focus: var(--brand-primary); /* Sémantique */ --color-success: #16a34a; --color-success-bg: #dcfce7; --color-warning: #d97706; --color-warning-bg: #fef3c7; --color-danger: #dc2626; --color-danger-bg: #fee2e2; --color-info: #0284c7; --color-info-bg: #dbeafe; /* Ombres */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* Layout */ --header-h: 64px; --footer-h: 48px; --sidebar-w: 240px; --container-max: 1280px; /* Espaces */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* Rayons */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* Transitions */ --transition-fast: 120ms ease; --transition-base: 200ms ease; /* Typographie */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "SF Mono", "Cascadia Code", "Consolas", "Monaco", "Courier New", monospace; --fs-xs: 11px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 15px; --fs-lg: 17px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 30px; --fs-4xl: 38px; } [data-theme="dark"] { --bg-base: #0b0f17; --bg-surface: #131826; --bg-elevated: #1a2030; --bg-overlay: rgba(0, 0, 0, 0.65); --bg-hover: #1e2538; --bg-active: #283149; --bg-input: #1a2030; --text-primary: #e6edf3; --text-secondary: #94a3b8; --text-tertiary: #64748b; --text-inverse: #0f172a; --border-subtle: #1e2538; --border-default: #2a3349; --border-strong: #475569; --color-success-bg: rgba(22, 163, 74, 0.15); --color-warning-bg: rgba(217, 119, 6, 0.18); --color-danger-bg: rgba(220, 38, 38, 0.18); --color-info-bg: rgba(2, 132, 199, 0.18); --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.2); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.45), 0 4px 6px -2px rgba(0, 0, 0, 0.25); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3); } /* ============================================================================ 2. RESET & BASE ============================================================================ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } /* L attribut HTML hidden doit toujours cacher l élément, même si une règle de classe spécifie display: flex / grid / block. Sans cette règle, .notifications-dropdown[hidden] reste visible car le CSS de classe l emporte sur le style user-agent. */ [hidden] { display: none !important; } html, body { height: 100%; font-family: var(--font-sans); font-size: var(--fs-base); line-height: 1.55; color: var(--text-primary); background: var(--bg-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, svg, video { max-width: 100%; display: block; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: 0; } a { color: var(--brand-primary); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--brand-secondary); text-decoration: underline; } h1, h2, h3, h4, h5, h6 { line-height: 1.25; color: var(--text-primary); } h1 { font-size: var(--fs-3xl); font-weight: 700; } h2 { font-size: var(--fs-2xl); font-weight: 700; } h3 { font-size: var(--fs-xl); font-weight: 600; } h4 { font-size: var(--fs-lg); font-weight: 600; } p { color: var(--text-secondary); } ::selection { background: var(--brand-primary); color: var(--text-on-brand); } .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--sp-6); } /* ============================================================================ 3. LAYOUTS ============================================================================ */ /* ---- LAYOUT PUBLIC ---- */ .layout-public { display: flex; flex-direction: column; min-height: 100vh; background: var(--bg-base); } .public-header { background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); } .public-header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); } .public-main { flex: 1; padding: var(--sp-12) 0; } .public-footer { background: var(--bg-surface); border-top: 1px solid var(--border-subtle); padding: var(--sp-6) 0; } .public-footer-inner { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between; align-items: center; color: var(--text-tertiary); font-size: var(--fs-sm); } .footer-nav { display: flex; gap: var(--sp-5); } .footer-nav a { color: var(--text-secondary); } .brand-link { display: flex; align-items: center; gap: var(--sp-3); color: var(--text-primary); font-weight: 600; } .brand-link:hover { text-decoration: none; color: var(--brand-primary); } .brand-logo { height: 36px; width: auto; } .brand-name { font-size: var(--fs-lg); } /* ---- LAYOUT AUTH ---- */ .layout-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--bg-base) 0%, var(--bg-hover) 100%); padding: var(--sp-6); } .auth-shell { width: 100%; max-width: 420px; } .auth-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--sp-8); box-shadow: var(--shadow-xl); } .auth-brand { text-align: center; margin-bottom: var(--sp-6); padding-bottom: var(--sp-6); border-bottom: 1px solid var(--border-subtle); } .auth-logo { height: 56px; margin: 0 auto var(--sp-3); } .auth-app-name { font-size: var(--fs-xl); font-weight: 700; color: var(--text-primary); } .auth-title { font-size: var(--fs-xl); margin-bottom: var(--sp-2); } .auth-subtitle { font-size: var(--fs-sm); color: var(--text-secondary); margin-bottom: var(--sp-6); } .auth-form { display: flex; flex-direction: column; gap: var(--sp-4); } .auth-meta { margin-top: var(--sp-5); text-align: center; font-size: var(--fs-sm); color: var(--text-tertiary); } .auth-flash { margin-bottom: var(--sp-4); } .auth-footer-links { margin-top: var(--sp-5); text-align: center; font-size: var(--fs-sm); } /* ---- LAYOUT APP ---- */ .layout-app { min-height: 100vh; display: flex; flex-direction: column; } .app-header { background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 50; } .app-header-inner { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-6); align-items: center; height: var(--header-h); padding: 0 var(--sp-6); } .brand-logo-sm { height: 28px; } .brand-name-sm { font-weight: 700; color: var(--text-primary); } .header-search { max-width: 480px; } .search-input { width: 100%; padding: var(--sp-2) var(--sp-3); background: var(--bg-input); border: 1px solid var(--border-default); border-radius: var(--radius-md); color: var(--text-primary); font-size: var(--fs-sm); } .search-input:disabled { opacity: 0.55; cursor: not-allowed; } .header-actions { display: flex; align-items: center; gap: var(--sp-3); } .header-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-md); color: var(--text-secondary); transition: background var(--transition-fast), color var(--transition-fast); } .header-btn:hover { background: var(--bg-hover); color: var(--text-primary); text-decoration: none; } .header-tenant-badge { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-3); background: var(--color-info-bg); color: var(--color-info); border-radius: var(--radius-full); font-size: var(--fs-sm); font-weight: 600; } .header-tenant-badge .icon { width: 14px; height: 14px; } .header-user { display: flex; align-items: center; gap: var(--sp-2); padding-left: var(--sp-3); border-left: 1px solid var(--border-subtle); } .user-name { font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary); max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Theme toggle : afficher l icône appropriée selon thème */ .icon-sun { display: inline-block; } .icon-moon { display: none; } [data-theme="dark"] .icon-sun { display: none; } [data-theme="dark"] .icon-moon { display: inline-block; } /* ---- APP SHELL ---- */ .app-shell { display: flex; flex: 1; } .app-sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--bg-surface); border-right: 1px solid var(--border-subtle); padding: var(--sp-4) 0; overflow-y: auto; } .sidebar-nav { display: flex; flex-direction: column; gap: var(--sp-6); } .sidebar-section { padding: 0 var(--sp-3); } .sidebar-section-title { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); font-weight: 700; padding: 0 var(--sp-3) var(--sp-2); } .sidebar-link { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-md); color: var(--text-secondary); font-size: var(--fs-sm); font-weight: 500; transition: background var(--transition-fast), color var(--transition-fast); margin-bottom: 2px; } .sidebar-link:hover { background: var(--bg-hover); color: var(--text-primary); text-decoration: none; } .sidebar-link.is-active { background: var(--bg-active); color: var(--brand-primary); } .sidebar-link.is-disabled { opacity: 0.55; cursor: not-allowed; } .sidebar-link.is-disabled:hover { background: transparent; color: var(--text-secondary); } .sidebar-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; flex-shrink: 0; } .sidebar-label { flex: 1; } .sidebar-badge { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; background: var(--bg-active); color: var(--text-tertiary); padding: 1px 6px; border-radius: var(--radius-full); font-weight: 700; } .app-main { flex: 1; padding: var(--sp-8); overflow-x: auto; } .page-header { margin-bottom: var(--sp-6); } .page-title { font-size: var(--fs-2xl); font-weight: 700; } .app-footer { background: var(--bg-surface); border-top: 1px solid var(--border-subtle); padding: var(--sp-3) var(--sp-6); } .app-footer-inner { display: flex; justify-content: space-between; align-items: center; color: var(--text-tertiary); font-size: var(--fs-xs); } .app-footer a { color: var(--text-secondary); } .app-footer-version { font-family: var(--font-mono); background: var(--bg-active); padding: 2px 8px; border-radius: var(--radius-sm); } /* ---- LAYOUT ERROR ---- */ .layout-error { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--sp-6); } .error-shell { max-width: 480px; width: 100%; } .error-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--sp-10); text-align: center; box-shadow: var(--shadow-xl); } .error-code { font-size: 80px; font-weight: 800; color: var(--brand-primary); line-height: 1; margin-bottom: var(--sp-3); } .error-message { font-size: var(--fs-xl); margin-bottom: var(--sp-3); } .error-description { color: var(--text-secondary); margin-bottom: var(--sp-6); } .error-actions { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; } /* ============================================================================ 4. COMPOSANTS ============================================================================ */ /* ---- BUTTONS ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-md); font-size: var(--fs-sm); font-weight: 600; line-height: 1.2; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast); border: 1px solid transparent; text-decoration: none; } .btn:hover { text-decoration: none; } .btn:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; } .btn-primary { background: var(--brand-primary); color: var(--text-on-brand); border-color: var(--brand-primary); } .btn-primary:hover { filter: brightness(0.92); color: var(--text-on-brand); } .btn-secondary { background: var(--bg-surface); color: var(--text-primary); border-color: var(--border-default); } .btn-secondary:hover { background: var(--bg-hover); } .btn-danger { background: var(--color-danger); color: #fff; border-color: var(--color-danger); } .btn-block { width: 100%; } .btn-lg { padding: var(--sp-3) var(--sp-6); font-size: var(--fs-md); } .btn-sm { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-xs); } /* ---- FORMS ---- */ .form-group { display: flex; flex-direction: column; gap: var(--sp-2); } .form-label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); } .form-input, .form-select, .form-textarea { width: 100%; padding: var(--sp-2) var(--sp-3); background: var(--bg-input); border: 1px solid var(--border-default); border-radius: var(--radius-md); color: var(--text-primary); font-size: var(--fs-base); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: 0; border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } .form-help { font-size: var(--fs-xs); color: var(--text-tertiary); } .form-actions { margin-top: var(--sp-3); } /* ---- FLASH ---- */ .flash-stack { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-5); } .flash { padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-md); border-left: 4px solid; font-size: var(--fs-sm); } .flash-success { background: var(--color-success-bg); border-left-color: var(--color-success); color: var(--color-success); } .flash-error { background: var(--color-danger-bg); border-left-color: var(--color-danger); color: var(--color-danger); } .flash-warn { background: var(--color-warning-bg); border-left-color: var(--color-warning); color: var(--color-warning); } .flash-info { background: var(--color-info-bg); border-left-color: var(--color-info); color: var(--color-info); } [data-theme="dark"] .flash-success { color: #86efac; } [data-theme="dark"] .flash-error { color: #fca5a5; } [data-theme="dark"] .flash-warn { color: #fcd34d; } [data-theme="dark"] .flash-info { color: #7dd3fc; } /* ---- CARDS ---- */ .card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: var(--shadow-sm); } /* ============================================================================ 5. PAGES ============================================================================ */ /* ---- HOME (vitrine) ---- */ .hero { text-align: center; padding: var(--sp-12) 0 var(--sp-10); } .hero-title { font-size: var(--fs-4xl); background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: var(--sp-4); } .hero-subtitle { font-size: var(--fs-lg); color: var(--text-secondary); max-width: 640px; margin: 0 auto var(--sp-6); } .hero-actions { display: flex; gap: var(--sp-3); justify-content: center; } .features { padding: var(--sp-10) 0; } .features-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-5); } .feature-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--sp-6); transition: transform var(--transition-base), box-shadow var(--transition-base); } .feature-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .feature-icon { width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--color-info-bg); color: var(--brand-primary); display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-3); } .feature-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; } .feature-card h3 { font-size: var(--fs-md); margin-bottom: var(--sp-2); } .feature-card p { font-size: var(--fs-sm); color: var(--text-secondary); } /* ---- DASHBOARD ---- */ .dashboard { display: flex; flex-direction: column; gap: var(--sp-6); } .dashboard-intro { color: var(--text-secondary); } .widget-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-4); } .widget { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-4); align-items: center; padding: var(--sp-5); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); color: var(--text-primary); transition: transform var(--transition-fast), box-shadow var(--transition-base), border-color var(--transition-fast); cursor: pointer; } .widget:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-default); text-decoration: none; } .widget-icon-wrap { width: 44px; height: 44px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; } .widget-icon { width: 22px; height: 22px; } .widget-value { font-size: var(--fs-2xl); font-weight: 800; line-height: 1.1; color: var(--text-primary); } .widget-label { font-size: var(--fs-sm); color: var(--text-secondary); margin-top: 2px; } .widget-availability { display: inline-block; margin-top: var(--sp-2); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; padding: 1px 6px; border-radius: var(--radius-sm); background: var(--bg-active); color: var(--text-tertiary); font-weight: 700; } .widget-arrow { color: var(--text-tertiary); } .widget-arrow svg { width: 18px; height: 18px; } .widget-primary .widget-icon-wrap { background: var(--color-info-bg); color: var(--brand-primary); } .widget-secondary .widget-icon-wrap { background: var(--bg-active); color: var(--text-secondary); } .widget-success .widget-icon-wrap { background: var(--color-success-bg); color: var(--color-success); } .widget-warn .widget-icon-wrap { background: var(--color-warning-bg); color: var(--color-warning); } .widget-danger .widget-icon-wrap { background: var(--color-danger-bg); color: var(--color-danger); } .dashboard-info-card { padding: var(--sp-6); border: 1px dashed var(--border-default); border-radius: var(--radius-lg); background: var(--bg-surface); } .dashboard-info-card h3 { font-size: var(--fs-md); margin-bottom: var(--sp-3); } .dashboard-info-card p + p { margin-top: var(--sp-2); } .text-muted { color: var(--text-tertiary); font-size: var(--fs-sm); } /* ---- LEGAL ---- */ .legal-page { max-width: 800px; margin: 0 auto; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--sp-8); } .legal-page h1 { margin-bottom: var(--sp-6); } .legal-page section { margin-bottom: var(--sp-6); } .legal-page section:last-child { margin-bottom: 0; } .legal-page h2 { margin-bottom: var(--sp-3); font-size: var(--fs-lg); } /* ============================================================================ 6. UTILITAIRES ============================================================================ */ .text-center { text-align: center; } .text-right { text-align: right; } .mt-0 { margin-top: 0; } .mt-2 { margin-top: var(--sp-2); } .mt-4 { margin-top: var(--sp-4); } .mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: var(--sp-2); } .mb-4 { margin-bottom: var(--sp-4); } .hidden { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============================================================================ 7. RESPONSIVE ============================================================================ */ @media (max-width: 768px) { .app-shell { flex-direction: column; } .app-sidebar { width: 100%; border-right: 0; border-bottom: 1px solid var(--border-subtle); padding: var(--sp-3) 0; } .sidebar-nav { flex-direction: row; flex-wrap: wrap; gap: var(--sp-3); padding: 0 var(--sp-3); } .sidebar-section { width: auto; } .sidebar-section-title { display: none; } .header-search { display: none; } .app-header-inner { grid-template-columns: 1fr auto; gap: var(--sp-3); padding: 0 var(--sp-3); } .user-name { display: none; } .app-main { padding: var(--sp-4); } .hero-title { font-size: var(--fs-3xl); } .public-footer-inner { flex-direction: column; align-items: flex-start; } } /* ============================================================================ 8. ACCESSIBILITÉ ============================================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } :focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: var(--radius-sm); } /* ============================================================================ SCRIPTOTHEK - CSS additionnel ZIP 2 (SECURITY+) ---------------------------------------------------------------------------- À APPEND à la fin de public/assets/css/scriptothek.css du ZIP 1. Variables dark/light déjà définies dans le fichier principal. ============================================================================ */ /* ==================================================================== CAPTCHA ==================================================================== */ .captcha-group { margin-top: var(--sp-2); } .captcha-row { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); } .captcha-image { height: 60px; border-radius: var(--radius-md); border: 1px solid var(--border-default); background: #fff; display: block; } .captcha-input { font-family: var(--font-mono); font-size: var(--fs-lg); letter-spacing: 0.15em; text-transform: uppercase; } /* ==================================================================== MFA — ENROLLMENT ==================================================================== */ .mfa-enroll { display: flex; flex-direction: column; gap: var(--sp-6); margin: var(--sp-4) 0; } .mfa-step { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); } .mfa-step-num { width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--brand-primary); color: var(--text-on-brand); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: var(--fs-md); flex-shrink: 0; } .mfa-step-content h3 { font-size: var(--fs-md); margin-bottom: var(--sp-2); } .mfa-step-content p { font-size: var(--fs-sm); margin-bottom: var(--sp-3); } .mfa-secret-box { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--bg-active); border: 1px solid var(--border-default); border-radius: var(--radius-md); margin-bottom: var(--sp-3); flex-wrap: wrap; } .mfa-secret-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); font-weight: 700; } .mfa-secret-value { font-family: var(--font-mono); font-size: var(--fs-md); font-weight: 700; letter-spacing: 0.1em; color: var(--text-primary); flex: 1; word-break: break-all; user-select: all; } .mfa-alt-import { margin: var(--sp-3) 0; } .mfa-alt-import summary { cursor: pointer; color: var(--brand-primary); font-size: var(--fs-sm); padding: var(--sp-2) 0; } .mfa-uri-box { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3); background: var(--bg-active); border-radius: var(--radius-md); margin-top: var(--sp-2); flex-wrap: wrap; } .mfa-uri-box code { font-family: var(--font-mono); font-size: var(--fs-xs); word-break: break-all; flex: 1; color: var(--text-secondary); user-select: all; } .mfa-params { padding: var(--sp-2) var(--sp-3); background: var(--color-info-bg); color: var(--color-info); border-radius: var(--radius-md); font-size: var(--fs-sm); margin-top: var(--sp-3); } /* ==================================================================== MFA — CODE INPUT ==================================================================== */ .mfa-code-input, .recovery-code-input { font-family: var(--font-mono); font-size: var(--fs-2xl); text-align: center; letter-spacing: 0.4em; padding-left: 0.4em; font-weight: 700; } .recovery-code-input { font-size: var(--fs-xl); letter-spacing: 0.2em; } /* ==================================================================== MFA — FALLBACKS ==================================================================== */ .mfa-fallbacks { display: flex; flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-4); margin-top: var(--sp-4); border-top: 1px solid var(--border-subtle); font-size: var(--fs-sm); text-align: center; } .inline-form { display: inline; } .link-button { background: none; border: 0; color: var(--brand-primary); cursor: pointer; font: inherit; padding: 0; } .link-button:hover { text-decoration: underline; } /* ==================================================================== MFA — CODES DE RÉCUPÉRATION ==================================================================== */ .mfa-recovery-alert { background: var(--color-warning-bg); color: var(--color-warning); padding: var(--sp-4); border-radius: var(--radius-md); border-left: 4px solid var(--color-warning); margin-bottom: var(--sp-5); } .mfa-recovery-alert strong { display: block; margin-bottom: var(--sp-2); } .mfa-recovery-alert p { color: inherit; font-size: var(--fs-sm); margin-bottom: 0; } .mfa-recovery-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); padding: var(--sp-4); background: var(--bg-active); border-radius: var(--radius-md); margin-bottom: var(--sp-5); } .recovery-code { font-family: var(--font-mono); font-size: var(--fs-md); font-weight: 700; text-align: center; padding: var(--sp-2); background: var(--bg-surface); border-radius: var(--radius-sm); letter-spacing: 0.1em; color: var(--text-primary); user-select: all; } .mfa-recovery-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; } /* ==================================================================== MFA — STATUS (mon compte) ==================================================================== */ .status-line { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-md); margin-bottom: var(--sp-4); font-size: var(--fs-sm); } .status-active { background: var(--color-success-bg); color: var(--color-success); border-left: 4px solid var(--color-success); } .status-warn { background: var(--color-warning-bg); color: var(--color-warning); border-left: 4px solid var(--color-warning); } .status-line .icon { flex-shrink: 0; } .mfa-info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-4); margin: var(--sp-4) 0; } .info-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); font-weight: 700; margin-bottom: var(--sp-1); } .info-value { font-size: var(--fs-xl); font-weight: 700; color: var(--text-primary); } .actions-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-4); } /* ==================================================================== ACCOUNT PAGE ==================================================================== */ .account-page { display: flex; flex-direction: column; gap: var(--sp-5); max-width: 900px; } .account-page .card h2 { font-size: var(--fs-lg); margin-bottom: var(--sp-4); } /* ==================================================================== DATA TABLE ==================================================================== */ .table-wrap { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); background: var(--bg-surface); margin: var(--sp-4) 0; } .data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .data-table thead { background: var(--bg-active); } .data-table th { text-align: left; padding: var(--sp-3) var(--sp-4); font-weight: 700; color: var(--text-primary); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .data-table td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); vertical-align: top; } .data-table tbody tr:hover { background: var(--bg-hover); } .data-table tbody tr:last-child td { border-bottom: 0; } .td-mono { font-family: var(--font-mono); font-size: var(--fs-xs); } .td-date { white-space: nowrap; } .td-action { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-primary); } .row-current-session { background: var(--color-info-bg) !important; } /* ==================================================================== PILLS (badges inline) ==================================================================== */ .pill { display: inline-block; padding: 2px 8px; border-radius: var(--radius-full); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; } .pill-success { background: var(--color-success-bg); color: var(--color-success); } .pill-failure { background: var(--color-danger-bg); color: var(--color-danger); } .pill-warning { background: var(--color-warning-bg); color: var(--color-warning); } .pill-info { background: var(--color-info-bg); color: var(--color-info); } .pill-sev-low { background: var(--bg-active); color: var(--text-secondary); } .pill-sev-medium { background: var(--color-info-bg); color: var(--color-info); } .pill-sev-high { background: var(--color-warning-bg); color: var(--color-warning); } .pill-sev-critical { background: var(--color-danger-bg); color: var(--color-danger); font-weight: 800; } .row-sev-critical { border-left: 3px solid var(--color-danger); } .row-sev-high { border-left: 3px solid var(--color-warning); } /* ==================================================================== AUDIT FILTERS ==================================================================== */ .audit-page { display: flex; flex-direction: column; gap: var(--sp-4); } .audit-filters { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--sp-5); } .filters-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-3); } .filters-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; padding-top: var(--sp-3); border-top: 1px solid var(--border-subtle); } .audit-stats { font-size: var(--fs-sm); color: var(--text-secondary); padding: var(--sp-2) 0; } /* ==================================================================== PAGINATION ==================================================================== */ .pagination { display: flex; align-items: center; gap: var(--sp-3); justify-content: center; padding: var(--sp-4) 0; } .page-indicator { font-size: var(--fs-sm); color: var(--text-secondary); } /* ==================================================================== RESPONSIVE AUDIT ==================================================================== */ @media (max-width: 768px) { .filters-row { grid-template-columns: 1fr 1fr; } .data-table { font-size: var(--fs-xs); } .data-table th, .data-table td { padding: var(--sp-2); } } /* ============================================================================ SCRIPTOTHEK - CSS additionnel ZIP 3 (TENANTS + SETTINGS + BRANDING + HEALTH) ---------------------------------------------------------------------------- À APPEND à la fin de scriptothek.css (qui contient déjà ZIP1 + ZIP2). Variables dark/light déjà définies en ZIP 1. ============================================================================ */ /* ==================================================================== TENANT SWITCHER (header) ==================================================================== */ .tenant-switcher { position: relative; } .tenant-switcher-btn { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-full); background: var(--color-info-bg); color: var(--color-info); font-weight: 700; font-size: var(--fs-sm); border: 1px solid transparent; cursor: pointer; transition: background var(--transition-fast); width: auto; height: auto; } .tenant-switcher-btn:hover { background: var(--color-info-bg); filter: brightness(1.05); } .tenant-switcher-btn .icon-chevron { width: 14px; height: 14px; transition: transform var(--transition-fast); } .tenant-switcher[data-open="1"] .icon-chevron { transform: rotate(180deg); } .tenant-current-code { letter-spacing: 0.04em; } .tenant-switcher-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 280px; max-width: 380px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); padding: var(--sp-2); z-index: 100; max-height: 60vh; overflow-y: auto; } .tenant-switcher-title { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); font-weight: 700; padding: var(--sp-2) var(--sp-3); } .tenant-switcher-option-form { margin: 0; display: block; } .tenant-switcher-option { display: flex; align-items: center; gap: var(--sp-2); width: 100%; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-md); background: transparent; border: 0; color: var(--text-primary); text-align: left; cursor: pointer; font: inherit; transition: background var(--transition-fast); } .tenant-switcher-option:hover:not(:disabled) { background: var(--bg-hover); } .tenant-switcher-option:disabled { cursor: default; opacity: 0.85; } .tenant-switcher-option.is-active { background: var(--color-info-bg); } .tenant-option-code { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-sm); color: var(--brand-primary); min-width: 60px; } .tenant-option-name { flex: 1; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ==================================================================== TENANTS PAGE ==================================================================== */ .tenants-page { display: flex; flex-direction: column; gap: var(--sp-4); } .page-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); } .td-actions { white-space: nowrap; } .td-actions .btn { margin-right: 4px; } .td-actions form { display: inline-block; margin-right: 4px; } /* ==================================================================== SETTINGS PAGE ==================================================================== */ .settings-page { display: flex; flex-direction: column; gap: var(--sp-4); } .settings-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-1); padding: var(--sp-1); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); } .settings-tab { padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; transition: background var(--transition-fast), color var(--transition-fast); } .settings-tab:hover { background: var(--bg-hover); color: var(--text-primary); text-decoration: none; } .settings-tab.is-active { background: var(--brand-primary); color: var(--text-on-brand); } .settings-scope-switch { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); color: var(--text-secondary); } .scope-option { padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-full); border: 1px solid var(--border-default); color: var(--text-secondary); background: var(--bg-surface); font-weight: 600; text-decoration: none; } .scope-option.is-active { background: var(--brand-primary); color: var(--text-on-brand); border-color: var(--brand-primary); } .settings-form h2 { font-size: var(--fs-lg); margin-bottom: var(--sp-4); } .settings-list { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-5); } .setting-row { display: grid; grid-template-columns: 1fr 2fr; gap: var(--sp-3); align-items: start; padding: var(--sp-3); border-radius: var(--radius-md); background: var(--bg-base); border: 1px solid var(--border-subtle); } .setting-key { display: flex; flex-direction: column; gap: 2px; color: var(--text-primary); } .key-name { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 700; } .key-type { font-size: var(--fs-xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; } .setting-control { display: flex; flex-direction: column; gap: var(--sp-1); } .setting-hint { grid-column: 1 / -1; padding-top: var(--sp-1); border-top: 1px dashed var(--border-subtle); margin-top: var(--sp-1); font-size: var(--fs-xs); } .setting-hint code { font-family: var(--font-mono); background: var(--bg-active); padding: 1px 6px; border-radius: var(--radius-sm); } .settings-add { margin-top: var(--sp-4); } .add-grid { display: grid; grid-template-columns: 2fr 1fr 2fr auto; gap: var(--sp-3); align-items: end; } .form-group-end { align-self: end; } /* ==================================================================== BRANDING PAGE ==================================================================== */ .branding-page { display: flex; flex-direction: column; gap: var(--sp-5); max-width: 1100px; } .branding-colors-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-4); } .color-field { display: flex; align-items: center; gap: var(--sp-2); } .color-field input[type="color"] { width: 48px; height: 40px; padding: 2px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-input); cursor: pointer; } .color-hex { flex: 1; font-family: var(--font-mono); text-transform: lowercase; } .branding-files-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-5); } .branding-file-block { display: flex; flex-direction: column; gap: var(--sp-3); } .branding-file-block h3 { font-size: var(--fs-md); margin-bottom: 0; } .branding-preview { max-width: 100%; max-height: 120px; width: auto; border-radius: var(--radius-md); padding: var(--sp-3); background: var(--bg-active); border: 1px solid var(--border-subtle); object-fit: contain; display: block; } .branding-preview-small { max-height: 64px; max-width: 64px; } .branding-preview-wide { max-height: 100px; width: 100%; object-fit: cover; } .branding-preview-empty { display: flex; align-items: center; justify-content: center; min-height: 100px; color: var(--text-tertiary); font-style: italic; font-size: var(--fs-sm); } .inline-upload-form { display: flex; flex-direction: column; gap: var(--sp-2); } .inline-upload-form input[type="file"] { font-size: var(--fs-xs); color: var(--text-secondary); } /* ==================================================================== FORM PAGE (générique pour formulaires simples) ==================================================================== */ .form-page { max-width: 700px; } .vertical-form { display: flex; flex-direction: column; gap: var(--sp-4); } /* ==================================================================== HEALTH PAGE ==================================================================== */ .health-page { display: flex; flex-direction: column; gap: var(--sp-5); } .health-overall { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-5); border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); background: var(--bg-surface); } .health-overall-ok { border-left: 6px solid var(--color-success); background: linear-gradient(90deg, var(--color-success-bg) 0%, var(--bg-surface) 20%); } .health-overall-warning { border-left: 6px solid var(--color-warning); background: linear-gradient(90deg, var(--color-warning-bg) 0%, var(--bg-surface) 20%); } .health-overall-error { border-left: 6px solid var(--color-danger); background: linear-gradient(90deg, var(--color-danger-bg) 0%, var(--bg-surface) 20%); } .health-indicator { width: 16px; height: 16px; border-radius: var(--radius-full); flex-shrink: 0; } .health-overall-ok .health-indicator { background: var(--color-success); box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.2); } .health-overall-warning .health-indicator { background: var(--color-warning); box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.2); } .health-overall-error .health-indicator { background: var(--color-danger); box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.2); } .health-summary { flex: 1; } .health-status-label { font-size: var(--fs-xl); font-weight: 800; color: var(--text-primary); } .health-timestamp { color: var(--text-tertiary); margin-top: 2px; } .health-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; } .health-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-4); } .health-card { padding: var(--sp-4); border-radius: var(--radius-md); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-left: 4px solid var(--border-default); display: flex; flex-direction: column; gap: var(--sp-2); } .health-card-ok { border-left-color: var(--color-success); } .health-card-warning { border-left-color: var(--color-warning); } .health-card-error { border-left-color: var(--color-danger); } .health-card-header { display: flex; align-items: center; gap: var(--sp-2); } .health-card-header h3 { font-size: var(--fs-md); margin: 0; flex: 1; } .health-card-dot { width: 8px; height: 8px; border-radius: var(--radius-full); flex-shrink: 0; } .health-card-ok .health-card-dot { background: var(--color-success); } .health-card-warning .health-card-dot { background: var(--color-warning); } .health-card-error .health-card-dot { background: var(--color-danger); } .health-card-message { font-size: var(--fs-sm); color: var(--text-secondary); } .health-card-details { margin-top: var(--sp-2); font-size: var(--fs-xs); } .health-card-details summary { cursor: pointer; color: var(--text-tertiary); padding: 4px 0; } .health-details-list { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--sp-3); margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px dashed var(--border-subtle); } .health-details-list dt { font-family: var(--font-mono); color: var(--text-tertiary); white-space: nowrap; } .health-details-list dd { color: var(--text-primary); word-break: break-word; } /* ==================================================================== RESPONSIVE ZIP 3 ==================================================================== */ @media (max-width: 900px) { .setting-row { grid-template-columns: 1fr; } .add-grid { grid-template-columns: 1fr 1fr; } .branding-colors-grid { grid-template-columns: 1fr 1fr; } .tenant-switcher-menu { right: -20px; } } @media (max-width: 600px) { .add-grid { grid-template-columns: 1fr; } .branding-colors-grid { grid-template-columns: 1fr; } .health-overall { flex-direction: column; align-items: flex-start; } .tenant-option-name { display: none; } } /* ============================================================================ SCRIPTOTHEK - CSS additionnel ZIP 4 (MAIL + NOTIFICATIONS) ---------------------------------------------------------------------------- À APPEND à la fin de scriptothek.css (qui contient déjà ZIP1+2+3). ============================================================================ */ /* ==================================================================== NOTIFICATIONS BELL (header) ==================================================================== */ .notifications-bell { position: relative; } .notifications-bell-btn { position: relative; } .notifications-badge { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-full); background: var(--color-danger); color: #fff; font-size: 10px; font-weight: 800; line-height: 18px; text-align: center; display: none; box-shadow: 0 0 0 2px var(--bg-surface); } .notifications-badge.is-visible { display: inline-block; animation: stk-pulse 2s ease-in-out infinite; } @keyframes stk-pulse { 0%, 100% { box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 0 rgba(220, 38, 38, 0.4); } 50% { box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 6px rgba(220, 38, 38, 0); } } .notifications-dropdown { position: absolute; top: calc(100% + 8px); right: 0; width: 360px; max-width: 90vw; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); z-index: 100; max-height: 70vh; display: flex; flex-direction: column; } .notif-dropdown-header { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-subtle); } .notif-dropdown-header strong { color: var(--text-primary); } .notif-dropdown-header a { font-size: var(--fs-sm); } .notif-dropdown-list { overflow-y: auto; max-height: 60vh; flex: 1; } .notif-dropdown-loading, .notif-dropdown-empty { padding: var(--sp-5); text-align: center; color: var(--text-tertiary); font-size: var(--fs-sm); } .notif-dropdown-item { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-subtle); border-left: 3px solid transparent; transition: background var(--transition-fast); } .notif-dropdown-item:last-child { border-bottom: 0; } .notif-dropdown-item:hover { background: var(--bg-hover); } .notif-dd-link { display: block; color: inherit; text-decoration: none; } .notif-dd-link:hover { text-decoration: none; } .notif-dd-title { font-weight: 600; color: var(--text-primary); font-size: var(--fs-sm); margin-bottom: 2px; } .notif-dd-msg { font-size: var(--fs-xs); color: var(--text-secondary); margin-bottom: 4px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .notif-dd-meta { font-size: 10px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; } /* Bordure latérale colorée par catégorie */ .notif-cat-security { border-left-color: var(--color-danger); } .notif-cat-review { border-left-color: var(--brand-primary); } .notif-cat-mention { border-left-color: var(--color-info); } .notif-cat-system { border-left-color: var(--color-warning); } .notif-cat-info { border-left-color: var(--color-success); } /* ==================================================================== NOTIFICATIONS PAGE (full list) ==================================================================== */ .notifications-page { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 960px; } .notifications-list { display: flex; flex-direction: column; gap: var(--sp-2); } .notification-item { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-left: 4px solid var(--border-default); border-radius: var(--radius-md); align-items: start; } .notification-item.notification-unread { background: var(--bg-surface); box-shadow: var(--shadow-sm); } .notification-item.notification-read { opacity: 0.7; } .notification-item.notif-cat-security { border-left-color: var(--color-danger); } .notification-item.notif-cat-review { border-left-color: var(--brand-primary); } .notification-item.notif-cat-mention { border-left-color: var(--color-info); } .notification-item.notif-cat-system { border-left-color: var(--color-warning); } .notification-item.notif-cat-info { border-left-color: var(--color-success); } .notification-icon { width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--bg-active); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); flex-shrink: 0; } .notification-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; } .notification-body { min-width: 0; } .notification-title { font-weight: 600; color: var(--text-primary); margin-bottom: 4px; } .notification-message { font-size: var(--fs-sm); color: var(--text-secondary); margin-bottom: var(--sp-2); line-height: 1.5; } .notification-meta { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-xs); color: var(--text-tertiary); flex-wrap: wrap; } .notification-actions { display: flex; gap: var(--sp-1); flex-shrink: 0; } /* ==================================================================== EMPTY STATE ==================================================================== */ .empty-state { text-align: center; padding: var(--sp-12) var(--sp-5); background: var(--bg-surface); border: 1px dashed var(--border-default); border-radius: var(--radius-lg); color: var(--text-secondary); } .empty-icon { width: 64px; height: 64px; color: var(--text-tertiary); margin: 0 auto var(--sp-3); } .empty-state h2 { font-size: var(--fs-lg); color: var(--text-primary); margin-bottom: var(--sp-2); } .empty-state p { font-size: var(--fs-sm); } /* ==================================================================== CHECKBOX WRAP (préférences) ==================================================================== */ .checkbox-wrap { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .checkbox-wrap input[type="checkbox"] { width: 20px; height: 20px; cursor: pointer; accent-color: var(--brand-primary); } .prefs-table th:nth-child(2), .prefs-table th:nth-child(3), .prefs-table td:nth-child(2), .prefs-table td:nth-child(3) { text-align: center; width: 120px; } /* ==================================================================== MAIL PAGES ==================================================================== */ .mail-page { display: flex; flex-direction: column; gap: var(--sp-5); } .mail-vars-list { display: flex; gap: var(--sp-2); flex-wrap: wrap; } .mail-vars-list code { font-family: var(--font-mono); background: var(--bg-active); padding: 2px 8px; border-radius: var(--radius-sm); font-size: var(--fs-xs); color: var(--brand-primary); } .smtp-debug-log { background: #0b1420; color: #d4d4d4; font-family: var(--font-mono); font-size: var(--fs-xs); padding: var(--sp-4); border-radius: var(--radius-md); overflow-x: auto; white-space: pre-wrap; word-break: break-all; max-height: 400px; overflow-y: auto; } [data-theme="dark"] .smtp-debug-log { background: #000; border: 1px solid var(--border-default); } /* ==================================================================== RESPONSIVE ==================================================================== */ @media (max-width: 600px) { .notifications-dropdown { width: 94vw; right: -10px; } .notification-item { grid-template-columns: auto 1fr; } .notification-actions { grid-column: 1 / -1; justify-content: flex-end; margin-top: var(--sp-2); } } /* ============================================================================ SCRIPTOTHEK - CSS additionnel ZIP 5 (SCRIPTS CORE) ---------------------------------------------------------------------------- À APPEND à scriptothek.css (contenant déjà ZIP 1+2+3+4). ============================================================================ */ /* ==================================================================== SCRIPTS LIST ==================================================================== */ .scripts-list-page { display: flex; flex-direction: column; gap: var(--sp-4); } .filter-bar { padding: var(--sp-4); } .results-summary { font-size: var(--fs-sm); color: var(--text-secondary); } .scripts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-4); } .script-card { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); text-decoration: none; color: inherit; transition: transform var(--transition-fast), box-shadow var(--transition-fast); min-height: 180px; } .script-card:hover { text-decoration: none; box-shadow: var(--shadow-md); transform: translateY(-2px); } .script-card-header { display: flex; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; } .script-card-title { font-size: var(--fs-md); font-weight: 700; color: var(--text-primary); margin: 0; line-height: 1.3; } .script-card-desc { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: 1; margin: 0; } .script-card-meta { display: flex; gap: var(--sp-1); flex-wrap: wrap; } .script-card-footer { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--text-tertiary); border-top: 1px solid var(--border-subtle); padding-top: var(--sp-2); margin-top: auto; } /* ==================================================================== PILLS spécifiques scripts ==================================================================== */ .pill-lang { background: var(--bg-active); color: var(--text-primary); font-family: var(--font-mono); } .pill-tag { background: var(--color-info-bg); color: var(--color-info); font-weight: 600; } .pill-conf-public { background: var(--color-success-bg); color: var(--color-success); } .pill-conf-interne { background: var(--color-info-bg); color: var(--color-info); } .pill-conf-confidentiel { background: var(--color-warning-bg); color: var(--color-warning); } .pill-conf-secret { background: var(--color-danger-bg); color: var(--color-danger); font-weight: 800; } .pill-crit-poc { background: var(--bg-active); color: var(--text-secondary); } .pill-crit-test { background: var(--color-info-bg); color: var(--color-info); } .pill-crit-prod { background: var(--color-warning-bg); color: var(--color-warning); font-weight: 700; } .pill-status-draft { background: var(--bg-active); color: var(--text-secondary); } .pill-status-review { background: var(--color-warning-bg); color: var(--color-warning); } .pill-status-approved { background: var(--color-success-bg); color: var(--color-success); font-weight: 700; } .pill-status-deprecated { background: var(--color-danger-bg); color: var(--color-danger); } .pill-status-archived { background: var(--bg-active); color: var(--text-tertiary); } /* ==================================================================== WIZARD ==================================================================== */ .wizard-page { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 960px; margin: 0 auto; } .wizard-progress { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); gap: var(--sp-2); } .wizard-step { display: flex; align-items: center; gap: var(--sp-2); opacity: 0.5; transition: opacity var(--transition-fast); } .wizard-step.is-active { opacity: 1; } .wizard-step.is-done { opacity: 0.85; } .wizard-step-num { width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--bg-active); display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; } .wizard-step.is-active .wizard-step-num { background: var(--brand-primary); color: var(--text-on-brand); } .wizard-step.is-done .wizard-step-num { background: var(--color-success); color: #fff; } .wizard-step-label { font-size: var(--fs-sm); font-weight: 600; } .wizard-step-sep { flex: 1; height: 2px; background: var(--border-default); } .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); } /* ==================================================================== ÉDITEUR (Monaco + fallback) ==================================================================== */ .editor-wrap { position: relative; border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; background: var(--bg-active); } .monaco-host { height: 500px; width: 100%; } .code-textarea-fallback { font-family: var(--font-mono); font-size: 13px; line-height: 1.5; tab-size: 4; width: 100%; min-height: 500px; border: 0; border-radius: 0; background: var(--bg-surface); color: var(--text-primary); padding: var(--sp-3); white-space: pre; overflow-x: auto; } .code-display { font-family: var(--font-mono); font-size: 13px; line-height: 1.5; tab-size: 4; padding: var(--sp-4); margin: 0; white-space: pre; overflow-x: auto; max-height: 600px; overflow-y: auto; color: var(--text-primary); background: var(--bg-surface); } .code-toolbar { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-3) var(--sp-4); background: var(--bg-active); border-radius: var(--radius-md); margin-bottom: var(--sp-3); font-size: var(--fs-sm); flex-wrap: wrap; gap: var(--sp-2); } /* ==================================================================== SCRIPT SHOW ==================================================================== */ .script-show-page { display: flex; flex-direction: column; gap: var(--sp-4); } .script-show-header { display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; } .script-title { font-size: var(--fs-2xl); margin-bottom: var(--sp-2); } .script-subtitle { display: flex; gap: var(--sp-2); flex-wrap: wrap; } .script-show-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: flex-start; } .script-tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--border-default); padding-bottom: 0; } .script-tab { background: none; border: 0; padding: var(--sp-3) var(--sp-4); cursor: pointer; color: var(--text-secondary); font-family: inherit; font-size: var(--fs-sm); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all var(--transition-fast); } .script-tab:hover { color: var(--text-primary); } .script-tab.is-active { color: var(--brand-primary); border-bottom-color: var(--brand-primary); } .script-pane { padding: var(--sp-4) 0; } .meta-list { display: grid; grid-template-columns: 200px 1fr; gap: var(--sp-2) var(--sp-4); } .meta-list dt { font-weight: 700; color: var(--text-tertiary); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.03em; } .meta-list dd { color: var(--text-primary); margin: 0; } .recap-list { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2) var(--sp-4); } .recap-list dt { font-weight: 700; color: var(--text-tertiary); font-size: var(--fs-sm); } .script-danger-zone { border-left: 4px solid var(--color-danger); } .script-danger-zone h3 { color: var(--color-danger); margin-bottom: var(--sp-3); } .danger-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; } /* ==================================================================== DIFF VIEWER ==================================================================== */ .diff-page { display: flex; flex-direction: column; gap: var(--sp-4); } .diff-header { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; padding: var(--sp-4); } .diff-header-label { display: flex; align-items: center; gap: var(--sp-2); } .diff-stats { display: flex; gap: var(--sp-2); } .diff-viewer { font-family: var(--font-mono); font-size: 12px; line-height: 1.5; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow-x: auto; } .diff-line { display: grid; grid-template-columns: 60px 60px 20px 1fr; padding: 0 var(--sp-2); white-space: pre; min-height: 1.5em; } .diff-line-equal { background: transparent; } .diff-line-add { background: rgba(22, 163, 74, 0.12); } .diff-line-del { background: rgba(220, 38, 38, 0.12); } .diff-lineno-a, .diff-lineno-b { color: var(--text-tertiary); text-align: right; padding-right: var(--sp-2); user-select: none; } .diff-marker { text-align: center; font-weight: 700; user-select: none; } .diff-line-add .diff-marker { color: var(--color-success); } .diff-line-del .diff-marker { color: var(--color-danger); } .diff-content { overflow-x: visible; color: var(--text-primary); } /* ==================================================================== RESPONSIVE ==================================================================== */ @media (max-width: 768px) { .form-grid-2 { grid-template-columns: 1fr; } .meta-list { grid-template-columns: 1fr; } .wizard-step-label { display: none; } .script-show-header { flex-direction: column; } .diff-line { grid-template-columns: 40px 40px 20px 1fr; font-size: 11px; } } /* ============================================================================ SCRIPTOTHEK - CSS additionnel ZIP 6 (CATALOG + SEARCH + USAGES) ============================================================================ */ /* =============== CATALOG =============== */ .catalog-page { display: flex; flex-direction: column; gap: var(--sp-4); } .catalog-search-form { display: flex; flex-direction: column; gap: var(--sp-4); } .catalog-search-bar { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; } .catalog-search-input { flex: 1; min-width: 260px; font-size: var(--fs-md); padding: var(--sp-3); } .catalog-view-toggle { display: flex; gap: 0; border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; } .catalog-view-toggle label { padding: var(--sp-2) var(--sp-3); cursor: pointer; color: var(--text-secondary); background: var(--bg-surface); transition: all var(--transition-fast); display: inline-flex; align-items: center; } .catalog-view-toggle label.is-active { background: var(--brand-primary); color: var(--text-on-brand); } .catalog-view-toggle input[type="radio"] { display: none; } .catalog-view-toggle .icon { width: 18px; height: 18px; } .catalog-layout { display: grid; grid-template-columns: 280px 1fr; gap: var(--sp-4); align-items: start; } .catalog-filters { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); position: sticky; top: calc(var(--sp-4) + 60px); max-height: calc(100vh - 80px); overflow-y: auto; } .filter-group { border-bottom: 1px solid var(--border-subtle); padding-bottom: var(--sp-2); } .filter-group:last-of-type { border-bottom: 0; } .filter-group summary { cursor: pointer; font-weight: 600; color: var(--text-primary); padding: var(--sp-2); list-style: none; user-select: none; font-size: var(--fs-sm); } .filter-group summary::-webkit-details-marker { display: none; } .filter-group summary::before { content: "▸ "; color: var(--text-tertiary); transition: transform var(--transition-fast); display: inline-block; } .filter-group[open] summary::before { content: "▾ "; } .filter-options { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-2); font-size: var(--fs-sm); } .filter-check, .filter-radio { display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; padding: 2px 4px; border-radius: var(--radius-sm); transition: background var(--transition-fast); } .filter-check:hover, .filter-radio:hover { background: var(--bg-hover); } .filter-check input, .filter-radio input { cursor: pointer; accent-color: var(--brand-primary); } .filter-actions { display: flex; flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--border-default); margin-top: var(--sp-2); } .form-label-sm { display: block; font-size: var(--fs-xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; margin-top: var(--sp-2); margin-bottom: 2px; } .form-select-sm { font-size: var(--fs-sm); padding: var(--sp-1) var(--sp-2); } .catalog-results { display: flex; flex-direction: column; gap: var(--sp-4); } .results-header { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } .results-count { color: var(--text-secondary); } .results-actions { display: flex; gap: var(--sp-2); } .catalog-card-stats { display: inline-flex; gap: var(--sp-2); align-items: center; } /* =============== STATS =============== */ .stats-page { display: flex; flex-direction: column; gap: var(--sp-4); } .stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--sp-4); } .top-list, .conf-list, .simple-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); } .top-list li, .conf-list li, .simple-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-2); border-bottom: 1px solid var(--border-subtle); } .top-list li:last-child, .conf-list li:last-child, .simple-list li:last-child { border-bottom: 0; } .top-count { font-weight: 700; color: var(--text-tertiary); font-family: var(--font-mono); } .lang-bars { display: flex; flex-direction: column; gap: var(--sp-2); } .lang-bar-row { display: grid; grid-template-columns: 140px 1fr 40px; gap: var(--sp-2); align-items: center; font-size: var(--fs-sm); } .lang-bar-label { color: var(--text-primary); font-weight: 600; } .lang-bar-wrap { height: 16px; background: var(--bg-active); border-radius: var(--radius-sm); overflow: hidden; } .lang-bar-fill { height: 100%; background: var(--brand-primary); width: var(--pct, 0%); border-radius: var(--radius-sm); transition: width 0.3s ease; } .lang-bar-count { text-align: right; font-family: var(--font-mono); font-weight: 700; color: var(--text-tertiary); } /* =============== REFERENTIALS =============== */ .referentials-page { display: flex; flex-direction: column; gap: var(--sp-4); } .form-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); } .form-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); } .inline-edit-form, .inline-rename-form { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; } .inline-edit-form input, .inline-rename-form input { flex: 1; min-width: 140px; } .edit-row td { background: var(--bg-active); } .form-input-sm { padding: var(--sp-1) var(--sp-2); font-size: var(--fs-sm); } /* =============== TAGS =============== */ .tags-page { display: flex; flex-direction: column; gap: var(--sp-4); } .tags-split { display: grid; grid-template-columns: 2fr 1fr; gap: var(--sp-4); align-items: start; } /* =============== USAGES (inside script show) =============== */ .usages-add-form { display: flex; flex-direction: column; gap: var(--sp-3); } /* =============== RESPONSIVE =============== */ @media (max-width: 1024px) { .catalog-layout { grid-template-columns: 1fr; } .catalog-filters { position: static; max-height: none; } .tags-split { grid-template-columns: 1fr; } .form-grid-3, .form-grid-4 { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .form-grid-3, .form-grid-4 { grid-template-columns: 1fr; } .catalog-search-bar { flex-direction: column; align-items: stretch; } .catalog-view-toggle { align-self: flex-end; } } /* ============================================================================ SCRIPTOTHEK - CSS additionnel ZIP 7 (WORKFLOW + RBAC UI + TEAMS) ============================================================================ */ /* ========================== USERS ========================== */ .users-list-page, .user-show-page, .invitations-page { display: flex; flex-direction: column; gap: var(--sp-4); } .row-suspended { opacity: 0.6; background: var(--bg-active); } .user-danger-zone { border-left: 4px solid var(--color-danger); } .user-danger-zone h3 { color: var(--color-danger); margin-bottom: var(--sp-3); } .roles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-2); margin: var(--sp-2) 0; } .roles-grid .filter-check { border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: var(--sp-2); align-items: flex-start; } .roles-grid .filter-check:has(input:checked) { border-color: var(--brand-primary); background: var(--color-info-bg); } /* ========================== PUBLIC FORM (invitation) ========================== */ .public-form-page { max-width: 520px; margin: var(--sp-8) auto; } .card-narrow { padding: var(--sp-5); } /* ========================== ROLES MATRIX ========================== */ .role-show-page { display: flex; flex-direction: column; gap: var(--sp-4); } .perm-matrix { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--sp-4); margin: var(--sp-3) 0; } .perm-module { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--sp-3); } .perm-module-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-2); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--border-subtle); } .perm-module-header h4 { margin: 0; color: var(--brand-primary); text-transform: uppercase; font-size: var(--fs-sm); letter-spacing: 0.04em; } .perm-module-toggle { font-size: var(--fs-xs); color: var(--text-tertiary); cursor: pointer; display: inline-flex; gap: var(--sp-1); align-items: center; } .perm-list { display: flex; flex-direction: column; gap: var(--sp-1); } .perm-item { display: flex; gap: var(--sp-2); padding: var(--sp-2); border-radius: var(--radius-sm); align-items: flex-start; cursor: pointer; transition: background var(--transition-fast); } .perm-item:hover { background: var(--bg-hover); } .perm-item input[type="checkbox"] { margin-top: 2px; accent-color: var(--brand-primary); } /* ========================== TEAMS ========================== */ .teams-list-page, .team-show-page { display: flex; flex-direction: column; gap: var(--sp-4); } .inline-add-member { background: var(--bg-active); border-radius: var(--radius-md); padding: var(--sp-3); margin-bottom: var(--sp-3); } /* ========================== REVIEW ========================== */ .review-queue-page, .review-show-page { display: flex; flex-direction: column; gap: var(--sp-4); } .review-header { padding: var(--sp-4); } .review-actions-bar { border-left: 4px solid var(--color-warning); padding: var(--sp-4); } .review-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; } .review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); align-items: start; } /* Feedback list */ .feedback-list, .comment-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); } .feedback-item, .comment-item { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--sp-3); background: var(--bg-surface); } .feedback-item p, .comment-item p { margin: var(--sp-2) 0; color: var(--text-primary); white-space: pre-wrap; } .feedback-header, .comment-header { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; margin-bottom: var(--sp-1); } .feedback-approve { border-left: 4px solid var(--color-success); } .feedback-request_changes { border-left: 4px solid var(--color-warning); } .feedback-comment { border-left: 4px solid var(--color-info); } .pill-verdict-approve { background: var(--color-success-bg); color: var(--color-success); font-weight: 700; } .pill-verdict-request_changes { background: var(--color-warning-bg); color: var(--color-warning); font-weight: 700; } .pill-verdict-comment { background: var(--color-info-bg); color: var(--color-info); font-weight: 600; } .comment-item.is-resolved { opacity: 0.65; border-left: 4px solid var(--color-success); } .feedback-form, .comment-form { background: var(--bg-active); padding: var(--sp-3); border-radius: var(--radius-md); margin-bottom: var(--sp-3); } /* Timeline */ .timeline { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--border-default); padding-left: var(--sp-4); } .timeline-item { position: relative; padding: var(--sp-2) 0; border-bottom: 1px dashed var(--border-subtle); display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; } .timeline-item:last-child { border-bottom: 0; } .timeline-item::before { content: ""; position: absolute; left: calc(var(--sp-4) * -1 - 5px); top: 50%; transform: translateY(-50%); width: 10px; height: 10px; border-radius: 50%; background: var(--brand-primary); border: 2px solid var(--bg-surface); } /* ========================== RESPONSIVE ========================== */ @media (max-width: 900px) { .review-grid { grid-template-columns: 1fr; } .roles-grid { grid-template-columns: 1fr; } .perm-matrix { grid-template-columns: 1fr; } } /* ============================================================================ SCRIPTOTHEK - CSS additionnel ZIP 8 (LDAP + LLM + BACKUP + API + ACL) ============================================================================ */ /* ========================= LDAP / LLM / BACKUP / ACL / API pages ========== */ .ldap-page, .llm-page, .backup-page, .acl-page, .api-tokens-page, .llm-console-page { display: flex; flex-direction: column; gap: var(--sp-4); } .backup-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .acl-grant-form { background: var(--bg-active); padding: var(--sp-3); border-radius: var(--radius-md); margin-bottom: var(--sp-3); } /* ========================= LLM Console ========================= */ .llm-response-meta { color: var(--text-tertiary); font-size: var(--fs-xs); margin-bottom: var(--sp-2); font-family: var(--font-mono); } #stk-llm-response { max-height: 500px; overflow-y: auto; white-space: pre-wrap; word-wrap: break-word; } /* ========================= RESPONSIVE ========================= */ @media (max-width: 900px) { .backup-actions { flex-direction: column; } .backup-actions form { width: 100%; } .backup-actions .btn { width: 100%; } } /* ============================================================================ LAYOUT SCROLL INDÉPENDANT (2026-04-18) Header fixe, sidebar et main scrollent séparément. ============================================================================ */ html, body { height: 100% !important; max-height: 100vh !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; } .layout-app { min-height: 100vh !important; height: 100vh !important; max-height: 100vh !important; overflow: hidden !important; position: relative !important; display: block !important; } .app-header { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 100 !important; height: var(--header-h) !important; } .app-shell { position: fixed !important; top: var(--header-h) !important; left: 0 !important; right: 0 !important; bottom: 0 !important; display: flex !important; overflow: hidden !important; flex: none !important; } .app-sidebar { position: relative !important; flex: 0 0 var(--sidebar-w) !important; width: var(--sidebar-w) !important; height: 100% !important; max-height: 100% !important; overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch !important; } .app-main { position: relative !important; flex: 1 1 auto !important; height: 100% !important; max-height: 100% !important; overflow-y: auto !important; overflow-x: auto !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch !important; } .app-footer { display: none !important; } .app-sidebar::-webkit-scrollbar, .app-main::-webkit-scrollbar { width: 10px; height: 10px; } .app-sidebar::-webkit-scrollbar-track, .app-main::-webkit-scrollbar-track { background: transparent; } .app-sidebar::-webkit-scrollbar-thumb, .app-main::-webkit-scrollbar-thumb { background: var(--bg-active); border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; } .app-sidebar::-webkit-scrollbar-thumb:hover, .app-main::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); } .app-sidebar, .app-main { scrollbar-width: thin; scrollbar-color: var(--bg-active) transparent; } @media (max-width: 768px) { .app-shell { position: fixed !important; flex-direction: column !important; overflow-y: auto !important; overflow-x: hidden !important; } .app-sidebar { flex: 0 0 auto !important; width: 100% !important; height: auto !important; max-height: none !important; overflow: visible !important; border-right: 0 !important; border-bottom: 1px solid var(--border-subtle) !important; } .app-main { height: auto !important; max-height: none !important; overflow: visible !important; } }