/* ============================================================ Le Comptable Digital — main.css Design tokens, reset, layout principal ------------------------------------------------------------ Thème "navy/teal" — remplace le thème shadcn (OKLCH) du 23/08. • NAVY → chrome de marque : sidebar, bandeau TTC, ligne de totaux de tableau. Fixe, ne suit pas le thème clair/sombre. • PRIMARY → couleur d'action UNIQUE (= teal) : boutons primaires, liens, focus, états sélectionnés/actifs, nav active. ============================================================ */ :root { /* ── Chrome de marque (sidebar, bandeaux totaux/TTC) ────── */ --navy: #0A1628; --navy-light: #16253C; /* ── Couleur primaire (action / accent) ────────────────── */ --primary: #0D9488; --primary-hover: #0B7A70; --primary-tint: #E1F5F2; /* fond doux : survols, lignes sélectionnées */ --primary-soft: rgba(13, 148, 136, 0.08); /* survol discret */ --primary-ring: rgba(13, 148, 136, 0.16); /* halo de focus */ /* Alias rétro-compatibles (anciens noms --teal/--topbar) */ --teal: var(--primary); --teal-hover: var(--primary-hover); --topbar: var(--primary); --topbar-light: var(--primary-hover); /* ── Accent monétaire (surbrillance des montants sur navy) ─ */ --accent: #14B8A6; --accent-strong: #0D9488; /* ── Neutres ───────────────────────────────────────────── */ --white: #FFFFFF; --gray-bg: #F4F7FA; --gray-border: #E1E7EE; --gray-text: #57616F; --dark-text: #101826; /* ── Statuts ───────────────────────────────────────────── */ --danger: #DC4C4C; --danger-hover: #C23B3B; --warning: #B4650A; --success: #147D53; /* ── Typo, rayons, élévations ──────────────────────────── */ /* Public Sans : texte courant, tableaux, formulaires (chargée via Google Fonts dans index.html — repli système si hors-ligne). Manrope : titres, nav, boutons, labels — jamais comme police de texte courant (trop affirmée en paragraphe). */ --font: 'Public Sans', 'Segoe UI', system-ui, sans-serif; --font-display: 'Manrope', 'Segoe UI', system-ui, sans-serif; --radius-sm: 6px; --radius: 0.625rem; --radius-lg: 14px; --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow: 0 1px 3px rgba(15, 23, 42, 0.10), 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.12); --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.16); --transition: 0.15s ease; --input-h: 40px; --gap: 16px; --sidebar-w: 240px; --sidebar-w-collapsed: 68px; } /* ── RESET ─────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; font-family: var(--font); font-size: 14px; color: var(--dark-text); background: var(--gray-bg); overflow: hidden; } a { text-decoration: none; color: inherit; } button { font-family: var(--font); cursor: pointer; } input, select, textarea { font-family: var(--font); font-size: 14px; } /* Titres, nav, boutons, labels de section — police display distincte du texte courant, appliquée globalement pour rester cohérente sans devoir toucher chaque écran. */ h1, h2, h3, h4, .btn, .btn-icon, .btn-primary, .btn-outline, .btn-ghost, .btn-danger, .page-title, .modal-title, .sidebar-nav, .nav-item, .nav-group-toggle, .data-table thead th { font-family: var(--font-display); } /* ── LAYOUT PRINCIPAL ──────────────────────────────────────── */ .app-layout { display: flex; height: 100vh; overflow: hidden; } /* ── SIDEBAR ───────────────────────────────────────────────── */ /* Chrome de marque (navy fixe) — ne suit pas le thème clair/sombre du reste de l'app, comme le rail de navigation du prototype validé. */ .sidebar { position: relative; width: var(--sidebar-w); min-width: var(--sidebar-w); background: var(--navy); border-right: none; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; user-select: none; transition: width 0.2s ease, min-width 0.2s ease; } .sidebar-logo { display: flex; align-items: center; gap: 10px; padding: 20px 16px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.09); flex-shrink: 0; } .sidebar-logo-mark { width: 30px; height: 30px; flex-shrink: 0; } .sidebar-logo-text { display: flex; flex-direction: column; line-height: 1.15; font-size: 15px; font-weight: 800; letter-spacing: 0.3px; overflow: hidden; } .sidebar-logo-text strong:first-child { color: #fff; } .sidebar-logo-text strong:last-child { color: var(--accent); } /* Bouton réduire/déplier : ancré sur le bord droit de la sidebar, toujours visible (déplié ou réduit) pour rester atteignable. */ .sidebar-collapse-btn { position: absolute; top: 24px; right: -13px; z-index: 5; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--gray-border); border-radius: 50%; background: var(--white); color: var(--gray-text); cursor: pointer; box-shadow: var(--shadow-sm); transition: background 0.15s, color 0.15s, transform 0.2s; } .sidebar-collapse-btn:hover { background: var(--gray-bg); color: var(--dark-text); } /* ── SIDEBAR RÉDUITE (icônes seules) ──────────────────────── */ .sidebar.collapsed { width: var(--sidebar-w-collapsed); min-width: var(--sidebar-w-collapsed); } .sidebar.collapsed .sidebar-logo { padding: 20px 0 16px; justify-content: center; } .sidebar.collapsed .sidebar-logo-text { display: none; } .sidebar.collapsed .nav-item, .sidebar.collapsed .nav-group-toggle { justify-content: center; padding: 10px; } .sidebar.collapsed .nav-item span, .sidebar.collapsed .nav-group-toggle span, .sidebar.collapsed .nav-group-toggle .chevron, .sidebar.collapsed .sidebar-footer span { display: none; } .sidebar.collapsed .nav-item.nav-sub { padding-left: 10px; } .sidebar.collapsed .sidebar-footer { display: flex; justify-content: center; } /* ── NAVIGATION ────────────────────────────────────────────── */ .sidebar-nav { flex: 1; padding: 12px 12px; display: flex; flex-direction: column; gap: 2px; } /* Groupes de nav par rôle (client / comptable / admin) — un seul visible à la fois, sélectionné via body[data-role] (cf. router.js applyRoleLayout) */ .nav-role-group { display: none; flex-direction: column; gap: 2px; } body[data-role="client"] .nav-role-group[data-nav-role="client"], body[data-role="comptable"] .nav-role-group[data-nav-role="comptable"], body[data-role="admin"] .nav-role-group[data-nav-role="admin"] { display: flex; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: rgba(255, 255, 255, 0.68); font-size: 13.5px; font-weight: 600; border-radius: var(--radius); transition: background 0.15s, color 0.15s; cursor: pointer; } .nav-item span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .nav-item:hover { background: var(--navy-light); color: #fff; } .nav-item.active { background: var(--primary); color: #fff; font-weight: 700; } .nav-item.nav-sub { padding-left: 34px; font-size: 13px; } .nav-item.nav-sub.active { background: var(--primary); color: #fff; } /* Groupe accordéon */ .nav-group-toggle { display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: rgba(255, 255, 255, 0.68); font-size: 13.5px; font-weight: 600; width: 100%; background: none; border: none; border-radius: var(--radius); text-align: left; transition: background 0.15s, color 0.15s; } .nav-group-toggle:hover { background: var(--navy-light); color: #fff; } .nav-group-toggle .chevron { margin-left: auto; transition: transform 0.2s; } .nav-group.open .chevron { transform: rotate(180deg); } .nav-group-items { display: none; flex-direction: column; gap: 1px; } .nav-group.open .nav-group-items { display: flex; } /* Sidebar réduite (icônes seules) : pas de sous-menus déroulés */ .sidebar.collapsed .nav-group.open .nav-group-items { display: none; } .sidebar-footer { padding: 12px 16px; color: rgba(255, 255, 255, 0.45); font-size: 11px; border-top: 1px solid rgba(255, 255, 255, 0.09); flex-shrink: 0; } /* ── ZONE CONTENU ──────────────────────────────────────────── */ .content-area { flex: 1; overflow-y: auto; overflow-x: hidden; background: var(--gray-bg); display: flex; flex-direction: column; } /* ── PAGE HEADER ───────────────────────────────────────────── */ .page-header { background: var(--white); padding: 20px 24px; border-bottom: 1px solid var(--gray-border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .page-title { font-size: 20px; font-weight: 600; color: var(--dark-text); } .page-subtitle { font-size: 13px; color: var(--gray-text); margin-top: 2px; } .page-actions { display: flex; align-items: center; gap: 8px; } /* ── PAGE BODY ─────────────────────────────────────────────── */ .page-body { flex: 1; padding: 24px; display: flex; flex-direction: column; gap: var(--gap); } /* ── ÉTAT INITIAL / LOADING ────────────────────────────────── */ .loading-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 12px; color: var(--gray-text); } .spinner { width: 32px; height: 32px; border: 3px solid var(--gray-border); border-top-color: var(--teal); border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ── ÉTAT VIDE ─────────────────────────────────────────────── */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 24px; gap: 12px; color: var(--gray-text); text-align: center; } .empty-state svg { opacity: 0.4; } .empty-state p { font-size: 14px; } /* ── SCROLLBAR ─────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--gray-border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: #CBD5E1; }