/* ───────────────────────────────────────────────────────────────── * SERFIN — Couche applicative CSS (variables de marque + responsive). * ───────────────────────────────────────────────────────────────── * Pose les CSS variables attendues par le framework iManage * (--accent, --notification-bg, etc.) + ajustements responsive * pour utiliser 100% de l'espace horizontal sur mobile. * ───────────────────────────────────────────────────────────────── */ :root { /* Palette SERFIN — noir, gris, touches de rouge */ --accent: #1A1A1A; /* noir charbon (principal) */ --accent-light: #4D4D4D; /* gris moyen */ --accent-dark: #000000; /* noir pur */ --accent-soft: #ECECEC; /* gris très clair */ --secondary: #D52A20; /* rouge SERFIN (tagline) — peu utilisé */ --secondary-light: #F1908A; --secondary-dark: #7A1410; --ink: #1A1A1A; --ink-soft: #3A3A3A; --muted: #7A7A7A; --line: #E2E2E2; --line-soft: #F4F4F4; --canvas: #F8F8F8; --paper: #FFFFFF; /* Sidebar/notification — dégradé gris-noir (cohérent avec les triangles) */ --notification-bg: linear-gradient(135deg, #4D4D4D 0%, #1A1A1A 100%); --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04); --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.05); --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* Mode sombre (theme-toggle ajoute data-theme="dark" sur ) */ html[data-theme="dark"] { --canvas: #0B1220; --paper: #111827; --ink: #F1F5F9; --ink-soft: #CBD5E1; --muted: #94A3B8; --line: #1E293B; --line-soft: #1E293B; } html, body { font-family: var(--font-stack); background: var(--canvas); color: var(--ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a, a:hover { color: var(--accent); text-decoration: none; } ::selection { background: var(--accent-soft); color: var(--accent-dark); } /* ─── Boutons ─────────────────────────────────────────────── */ .btn { border-radius: var(--radius-sm); font-weight: 500; transition: all 0.15s ease-out; } .btn-primary, .btn-primary:focus { background-color: var(--accent); border-color: var(--accent); } .btn-primary:hover, .btn-primary:active { background-color: var(--accent-dark) !important; border-color: var(--accent-dark) !important; } /* ─── Navbar ─────────────────────────────────────────────── */ .navbar { background: var(--paper); border-bottom: 1px solid var(--line); padding: 0.5rem 0; min-height: 56px; } .navbar .nav-link, .navbar .nav-link:hover { color: var(--ink); } /* ─── Page principale ─────────────────────────────────────── */ #page_content { padding: 24px 0 80px; } #page_content .container { max-width: 1400px; } #breadcrumb_bar { background: var(--paper); border-bottom: 1px solid var(--line-soft); padding: 8px 0; } #page_footer { background: var(--paper); border-top: 1px solid var(--line); padding: 12px 0; color: var(--muted); font-size: 0.8rem; } .footer-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; } /* ─── Welcome pane ─────────────────────────────────────────── */ .welcome-pane .welcome-icon { margin-bottom: 1rem; } .welcome-pane .welcome-icon img { height: 90px; width: auto; } .welcome-title { color: var(--accent-dark); font-weight: 700; letter-spacing: .12em; } .welcome-sub { color: var(--muted); } /* Touche rouge SERFIN — discrète, réservée aux alertes et tagline */ .text-serfin-red { color: var(--secondary); } .serfin-tagline { color: var(--secondary); letter-spacing: .15em; text-transform: uppercase; font-size: .72rem; font-weight: 700; } /* ───────────────────────────────────────────────────────────── * RESPONSIVE — utilisation 100% espace horizontal sur mobile * ───────────────────────────────────────────────────────────── */ /* Mobile portrait (≤ 480px) — densité augmentée */ @media (max-width: 480px) { .container, #page_content .container { padding-left: 12px; padding-right: 12px; } #page_content { padding: 12px 0 64px; } .navbar { padding: 0.35rem 0; min-height: 50px; } .navbar .container { padding-left: 12px; padding-right: 12px; } .footer-row { flex-direction: column; gap: .35rem; text-align: center; } .welcome-pane .welcome-icon { font-size: 2.5rem; } .welcome-title { font-size: 1.5rem; } } /* Tablette portrait (481-767px) */ @media (min-width: 481px) and (max-width: 767px) { .container, #page_content .container { padding-left: 16px; padding-right: 16px; } } /* Wide screen — utilise tout l'espace utile */ @media (min-width: 1600px) { #page_content .container { max-width: 1600px; } } /* Tables responsives — scroll horizontal au lieu de débordement */ .table-responsive-x { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-responsive-x table { min-width: 600px; } /* Bouton flottant "actions" (FAB) sur mobile */ @media (max-width: 575.98px) { .floating-action-btn { position: fixed; right: 16px; bottom: 16px; z-index: 1040; box-shadow: var(--shadow-lg); } } /* Forms — touch-friendly sur mobile (iOS Safari zoom si font < 16px) */ @media (max-width: 767.98px) { .form-control, .form-select { font-size: 16px; } .form-control-sm, .form-select-sm { font-size: 14px; } .btn { min-height: 38px; } .input-group .btn { padding-left: 14px; padding-right: 14px; } } /* Modal Bootstrap full-screen sur très petits écrans */ @media (max-width: 575.98px) { .modal-dialog:not(.lb-dialog) { margin: 0; min-height: 100dvh; max-width: 100%; } .modal-dialog:not(.lb-dialog) .modal-content { min-height: 100dvh; border-radius: 0; border: 0; } } /* ───────────────────────────────────────────────────────────── * Login-box — ajustements responsive supplémentaires * ───────────────────────────────────────────────────────────── */ /* Mobile : masquer le greeting "Mboté !" — pas la place et il chevauche le modal qui prend tout l'écran. Garde l'effet branding uniquement sur tablet/desktop. */ @media (max-width: 767.98px) { #login_greeting_wrap { display: none !important; } } /* Mobile : le modal de login prend toute la hauteur, navbar invisible (rien à montrer quand on n'est pas connecté). */ @media (max-width: 575.98px) { body.modal-open > nav.navbar { display: none; } #login_box .modal-dialog.lb-dialog { margin: 0; min-height: 100dvh; max-width: 100%; } #login_box .modal-content { min-height: 100dvh; border-radius: 0; justify-content: center; } #login_box .lb-mobile-brand { margin-top: env(safe-area-inset-top, 12px); } } /* PWA standalone — gestion des safe-areas (notch iPhone) */ @supports (padding: max(0px)) { body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); } } @media all and (display-mode: standalone) { .navbar { padding-top: calc(0.5rem + env(safe-area-inset-top)); } #page_footer { padding-bottom: calc(12px + env(safe-area-inset-bottom)); } }