/* ============================================================ Design system — Logiciel de Gestion Transport ------------------------------------------------------------ CSS pur, aucune dépendance externe. Palette d'inspiration "fintech / gestion" (vert + neutres). Variables CSS pour cohérence + facile à thématiser. ============================================================ */ /* -- Variables --------------------------------------------------- */ :root { /* Couleurs — thème clair (par défaut) */ --bg: #f5f6f8; --bg-card: #ffffff; --bg-soft: #fafbfc; --bg-hover: #f9fafb; --border: #e5e7eb; --border-soft: #f1f2f4; --border-strong:#d1d5db; --text: #111827; --text-muted: #6b7280; --text-subtle: #9ca3af; --text-invert: #ffffff; --primary: #059669; --primary-hover: #047857; --primary-soft: #d1fae5; --primary-text: #065f46; --danger: #dc2626; --danger-hover: #b91c1c; --danger-soft: #fee2e2; --danger-text: #991b1b; --warning: #f59e0b; --warning-soft: #fef3c7; --warning-text: #92400e; --info: #3b82f6; --info-soft: #dbeafe; --info-text: #1e40af; --neutral: #6b7280; --neutral-soft: #f3f4f6; /* Couleurs accent par module (subtilement) */ --accent-facturation: #059669; --accent-transport: #3b82f6; --accent-annuaire: #8b5cf6; --accent-admin: #f59e0b; /* Rayons */ --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --radius-full: 999px; /* Ombres */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08); --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12); --shadow-focus: 0 0 0 3px var(--primary-soft); /* Spacing (multiples de 4) */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; /* Typo */ --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Layout */ --sidebar-w: 240px; --topbar-h: 56px; /* Animation */ --t-fast: 0.12s ease; --t: 0.2s ease; --t-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1); } /* Thème sombre — appliqué quand */ html[data-theme="dark"] { --bg: #0f172a; --bg-card: #1e293b; --bg-soft: #172033; --bg-hover: #243044; --border: #334155; --border-soft: #243044; --border-strong:#475569; --text: #f1f5f9; --text-muted: #94a3b8; --text-subtle: #64748b; --text-invert: #0f172a; --primary: #10b981; --primary-hover: #34d399; --primary-soft: rgba(16, 185, 129, 0.18); --primary-text: #6ee7b7; --danger: #ef4444; --danger-hover: #f87171; --danger-soft: rgba(239, 68, 68, 0.18); --danger-text: #fca5a5; --warning: #f59e0b; --warning-soft: rgba(245, 158, 11, 0.18); --warning-text: #fcd34d; --info: #60a5fa; --info-soft: rgba(96, 165, 250, 0.18); --info-text: #93c5fd; --neutral: #94a3b8; --neutral-soft: rgba(148, 163, 184, 0.12); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6); --shadow-focus: 0 0 0 3px rgba(16, 185, 129, 0.3); } /* -- Reset basique ---------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { color-scheme: light dark; } body { font-family: var(--font); font-size: 14px; color: var(--text); background: var(--bg); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color var(--t), color var(--t); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } img, svg { display: block; max-width: 100%; } /* Garde-fou : tout SVG sans width/height explicite reste discret. Les SVG qui ont width="..." dans le HTML (charts dashboard) ne sont PAS concernés. Les SVG icônes avec règle spécifique CSS (.kpi-card__icon svg, .page__icon svg, etc.) sont overridés par leur propre rule plus loin grâce à la spécificité. */ svg:not([width]):not([height]) { width: 1em; height: 1em; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; } h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; } h4 { font-size: 0.95rem; } p { margin: 0 0 var(--s-3) 0; } hr { border: none; border-top: 1px solid var(--border); margin: var(--s-4) 0; } a { transition: color var(--t-fast); } /* -- Layout app ------------------------------------------------- */ .app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; } .app.no-sidebar { grid-template-columns: 1fr; } /* -- Sidebar ---------------------------------------------------- */ .sidebar { background: var(--bg-card); border-right: 1px solid var(--border); padding: var(--s-4) var(--s-3); display: flex; flex-direction: column; gap: var(--s-2); position: sticky; top: 0; height: 100vh; overflow-y: auto; } .sidebar__brand { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); font-weight: 700; color: var(--text); margin-bottom: var(--s-2); } .sidebar__brand-mark { width: 28px; height: 28px; background: var(--primary); color: #fff; border-radius: var(--radius-sm); display: grid; place-items: center; font-size: 14px; font-weight: 700; } .sidebar__section { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-subtle); padding: var(--s-3) var(--s-3) var(--s-1); } .sidebar__link { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--radius-sm); color: var(--text); text-decoration: none; transition: background 0.15s; } .sidebar__link:hover { background: var(--neutral-soft); text-decoration: none; } .sidebar__link.is-active { background: var(--primary-soft); color: var(--primary-text); font-weight: 600; } .sidebar__link.is-active svg { color: var(--primary); } .sidebar__link svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--text-muted); } .sidebar__bottom { margin-top: auto; padding-top: var(--s-3); } .sidebar__user { font-size: 0.85rem; color: var(--text-muted); padding: var(--s-2) var(--s-3); word-break: break-all; } .sidebar__hint { font-size: 0.72rem; color: var(--text-subtle); padding: var(--s-3) var(--s-3) var(--s-2); line-height: 1.7; } .sidebar__hint kbd { margin: 0 1px; } /* -- Topbar ----------------------------------------------------- */ .topbar { height: var(--topbar-h); background: var(--bg-card); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--s-6); position: sticky; top: 0; z-index: 10; } .topbar__title { font-weight: 600; color: var(--text); flex-shrink: 0; } .topbar__actions { display: flex; align-items: center; gap: var(--s-3); flex-shrink: 0; } .topbar__search { flex: 1 1 auto; max-width: 460px; margin: 0 var(--s-5); position: relative; } .topbar__search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-subtle); pointer-events: none; } .topbar__search input { width: 100%; max-width: none; padding: 6px 12px 6px 34px; background: var(--bg-soft); border: 1px solid transparent; font-size: 0.9rem; } .topbar__search input:focus { background: var(--bg-card); border-color: var(--primary); } @media (max-width: 900px) { .topbar__search { display: none; } } /* Sélecteur entreprise */ .entreprise-switch select { border: 1px solid var(--border); background: var(--bg-card); padding: 6px 10px; border-radius: var(--radius-sm); font: inherit; color: var(--text); cursor: pointer; } .entreprise-switch select:focus { outline: 2px solid var(--primary-soft); } /* -- Main / page ----------------------------------------------- */ .main { display: flex; flex-direction: column; min-width: 0; } .page { padding: var(--s-6); max-width: 1280px; width: 100%; margin: 0 auto; } .page__header { margin-bottom: var(--s-6); } .page__header h1 { margin-bottom: var(--s-1); } .page__subtitle { color: var(--text-muted); font-size: 0.9rem; } .page__actions { margin-top: var(--s-3); display: flex; gap: var(--s-2); flex-wrap: wrap; } /* -- Cards ------------------------------------------------------ */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s-5); box-shadow: var(--shadow-sm); transition: background-color var(--t), border-color var(--t); } .card--interactive { cursor: pointer; transition: transform var(--t), box-shadow var(--t), border-color var(--t); } .card--interactive:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); } .card + .card { margin-top: var(--s-4); } .card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-4); gap: var(--s-3); } .card__title { margin: 0; font-size: 1rem; font-weight: 600; } .card__sub { color: var(--text-muted); font-size: 0.85rem; } /* Grille de cards */ .grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .grid--2 { grid-template-columns: 2fr 1fr; } @media (max-width: 900px) { .grid--2 { grid-template-columns: 1fr; } } /* KPI */ .kpi__label { color: var(--text-muted); font-size: 0.85rem; } .kpi__value { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; } .kpi__value--sm { font-size: 1.2rem; font-weight: 600; } /* -- Boutons ---------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid transparent; font: inherit; font-weight: 500; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast); text-decoration: none; background: var(--bg-card); color: var(--text); border-color: var(--border); white-space: nowrap; } .btn:hover { background: var(--bg-hover); text-decoration: none; border-color: var(--border-strong); } .btn:active { transform: translateY(1px); } .btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .btn--primary { background: var(--primary); color: var(--text-invert); border-color: var(--primary); } .btn--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--text-invert); box-shadow: 0 2px 6px rgba(5, 150, 105, 0.25); } .btn--danger { background: var(--bg-card); color: var(--danger); border-color: var(--danger-soft); } .btn--danger:hover { background: var(--danger-soft); color: var(--danger-text); border-color: var(--danger); } .btn--warning { background: var(--bg-card); color: var(--warning-text); border-color: var(--warning-soft); } .btn--warning:hover { background: var(--warning-soft); } .btn--ghost { background: transparent; border-color: transparent; color: var(--text-muted); } .btn--ghost:hover { background: var(--neutral-soft); color: var(--text); border-color: transparent; } .btn--sm { padding: 5px 10px; font-size: 0.85rem; } .btn svg { width: 16px; height: 16px; flex-shrink: 0; } /* -- Badges ---------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--radius-full); font-size: 0.78rem; font-weight: 600; background: var(--neutral-soft); color: var(--text-muted); transition: background-color var(--t-fast), color var(--t-fast); white-space: nowrap; } .badge--success { background: var(--primary-soft); color: var(--primary-text); } .badge--info { background: var(--info-soft); color: var(--info-text); } .badge--warning { background: var(--warning-soft); color: var(--warning-text); } .badge--danger { background: var(--danger-soft); color: var(--danger-text); } .badge--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.7; animation: pulse-dot 2s ease-in-out infinite; } .badge svg { width: 12px; height: 12px; flex-shrink: 0; } @keyframes pulse-dot { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2); } } /* -- Tables ---------------------------------------------------- */ .table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .table th { text-align: left; font-weight: 600; color: var(--text-muted); padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--bg-soft); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.02em; } .table td { padding: 12px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; } .table tr:last-child td { border-bottom: none; } .table tbody tr { transition: background-color var(--t-fast); } .table tbody tr:hover { background: var(--bg-hover); } .table--compact td, .table--compact th { padding: 8px 10px; } .table .right { text-align: right; font-variant-numeric: tabular-nums; } .table .muted { color: var(--text-muted); } .table tr.is-danger { background: var(--danger-soft); } .table tr.is-danger:hover { background: var(--danger-soft); filter: brightness(0.97); } html[data-theme="dark"] .table tr.is-danger { background: rgba(239, 68, 68, 0.08); } /* -- Formulaires ----------------------------------------------- */ form p { margin: 0 0 var(--s-3) 0; } label { display: block; font-size: 0.85rem; font-weight: 500; color: var(--text); margin-bottom: 4px; } input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=datetime-local], input[type=search], input[type=tel], input[type=url], input[type=file], textarea, select { width: 100%; max-width: 420px; padding: 8px 12px; font: inherit; color: var(--text); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); transition: border-color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast); } input:hover:not(:focus), textarea:hover:not(:focus), select:hover:not(:focus) { border-color: var(--border-strong); } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--primary); box-shadow: var(--shadow-focus); } textarea { resize: vertical; min-height: 60px; } .helptext, .helptext small { display: block; font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; } .errorlist { list-style: none; padding: 0; margin: 4px 0 0 0; color: var(--danger-text); font-size: 0.85rem; } .errorlist li::before { content: "⚠ "; } fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s-4) var(--s-5); margin: 0 0 var(--s-4) 0; } fieldset legend { font-weight: 600; color: var(--text); padding: 0 var(--s-2); } /* -- Messages flash -------------------------------------------- */ .messages { list-style: none; padding: 0; margin: 0 0 var(--s-4) 0; } .messages li { padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: var(--s-2); background: var(--info-soft); color: var(--info-text); border: 1px solid #bfdbfe; } .messages li.success { background: var(--primary-soft); color: var(--primary-text); border-color: #a7f3d0; } .messages li.error { background: var(--danger-soft); color: var(--danger-text); border-color: #fecaca; } .messages li.warning { background: var(--warning-soft); color: var(--warning-text); border-color: #fde68a; } /* -- Utilitaires ---------------------------------------------- */ .flex { display: flex; } .flex--wrap { flex-wrap: wrap; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-1 { gap: var(--s-1); } .gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); } .gap-4 { gap: var(--s-4); } .gap-5 { gap: var(--s-5); } .mt-1 { margin-top: var(--s-1); } .mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); } .mt-4 { margin-top: var(--s-4); } .mt-6 { margin-top: var(--s-6); } .mb-2 { margin-bottom: var(--s-2); } .mb-4 { margin-bottom: var(--s-4); } .text-muted { color: var(--text-muted); } .text-subtle { color: var(--text-subtle); } .text-right { text-align: right; } .tabular { font-variant-numeric: tabular-nums; } /* -- Filtres / recherche -------------------------------------- */ .filtres { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s-3) var(--s-4); margin-bottom: var(--s-4); box-shadow: var(--shadow-sm); } .filtres__form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); } .filtres__search { flex: 1 1 280px; max-width: 420px; padding: 8px 12px 8px 34px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: 10px center; background-size: 16px; } .filtres select { width: auto; max-width: none; min-width: 140px; padding: 7px 10px; } .filtres__total { margin-left: auto; color: var(--text-muted); font-size: 0.85rem; } /* -- Pagination ------------------------------------------------ */ .pagination { display: flex; align-items: center; justify-content: center; gap: var(--s-3); padding: var(--s-3); } .pagination__info { color: var(--text-muted); font-size: 0.9rem; } .btn.is-disabled, .btn.is-disabled:hover { opacity: 0.4; cursor: not-allowed; background: transparent; } /* -- Empty state ---------------------------------------------- */ .empty { padding: var(--s-10) var(--s-6); text-align: center; } .empty__icon { width: 56px; height: 56px; margin: 0 auto var(--s-3); display: grid; place-items: center; border-radius: 50%; background: var(--primary-soft); color: var(--primary-text); } .empty__icon svg { width: 28px; height: 28px; } .empty__title { font-size: 1.05rem; font-weight: 600; margin-bottom: var(--s-2); } .empty__hint { color: var(--text-muted); font-size: 0.9rem; margin-bottom: var(--s-4); max-width: 480px; margin-left: auto; margin-right: auto; } /* -- Kbd hint -------------------------------------------------- */ kbd { display: inline-block; padding: 2px 6px; font-family: var(--font-mono); font-size: 0.75rem; background: var(--neutral-soft); border: 1px solid var(--border); border-radius: 4px; color: var(--text-muted); line-height: 1.2; } /* -- Page login (sans sidebar) -------------------------------- */ .auth-page { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(circle at 80% 10%, var(--primary-soft) 0%, transparent 50%), radial-gradient(circle at 10% 90%, #e0e7ff 0%, transparent 60%), var(--bg); padding: var(--s-6); } .auth-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--s-8); width: 100%; max-width: 420px; } .auth-card h1 { font-size: 1.3rem; margin-bottom: var(--s-2); } .auth-card .auth-brand { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-5); } .auth-card input { max-width: none; } .auth-card .btn { width: 100%; margin-top: var(--s-2); } /* -- Responsive (sidebar cachée en mobile) -------------------- */ @media (max-width: 720px) { .app { grid-template-columns: 1fr; } .sidebar { position: fixed; top: 0; left: 0; width: var(--sidebar-w); transform: translateX(-100%); transition: transform 0.2s; z-index: 20; box-shadow: var(--shadow-md); } .sidebar.is-open { transform: translateX(0); } .topbar__burger { display: inline-flex; } .page { padding: var(--s-4); } } .topbar__burger { display: none; background: none; border: none; cursor: pointer; padding: 8px; color: var(--text); } /* ============================================================ UI v2 — composants enrichis (toast, avatar, KPI, page header, breadcrumbs, theme toggle, animations). ============================================================ */ /* -- Avatars ---------------------------------------------------- */ .avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-full); font-weight: 600; font-size: 0.78rem; color: #fff; letter-spacing: 0.02em; flex-shrink: 0; user-select: none; } .avatar--sm { width: 24px; height: 24px; font-size: 0.7rem; } .avatar--lg { width: 44px; height: 44px; font-size: 0.95rem; } .avatar-with-text { display: inline-flex; align-items: center; gap: var(--s-2); } /* -- Page header v2 -------------------------------------------- */ .page__header--v2 { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-6); } .page__title-wrap { display: flex; align-items: center; gap: var(--s-3); min-width: 0; } .page__icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius); background: var(--primary-soft); color: var(--primary-text); flex-shrink: 0; overflow: hidden; } .page__icon--info { background: var(--info-soft); color: var(--info-text); } .page__icon--annuaire { background: rgba(139, 92, 246, 0.15); color: #6d28d9; } .page__icon--admin { background: var(--warning-soft); color: var(--warning-text); } .page__icon svg { width: 22px; height: 22px; } .page__actions-top { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; } html[data-theme="dark"] .page__icon--annuaire { background: rgba(139, 92, 246, 0.18); color: #c4b5fd; } /* -- Breadcrumb ------------------------------------------------- */ .breadcrumb { display: flex; align-items: center; gap: var(--s-2); font-size: 0.82rem; color: var(--text-muted); margin-bottom: var(--s-3); } .breadcrumb a { color: var(--text-muted); text-decoration: none; transition: color var(--t-fast); } .breadcrumb a:hover { color: var(--text); text-decoration: none; } .breadcrumb__sep { color: var(--text-subtle); } .breadcrumb__current { color: var(--text); font-weight: 500; } /* -- KPI Card (v2 enrichi) ------------------------------------- */ .kpi-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s-5); box-shadow: var(--shadow-sm); position: relative; overflow: hidden; transition: transform var(--t), box-shadow var(--t), border-color var(--t); } .kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); } .kpi-card__icon { width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--primary-soft); color: var(--primary-text); margin-bottom: var(--s-3); overflow: hidden; } .kpi-card__icon--info { background: var(--info-soft); color: var(--info-text); } .kpi-card__icon--warning { background: var(--warning-soft); color: var(--warning-text); } .kpi-card__icon--danger { background: var(--danger-soft); color: var(--danger-text); } .kpi-card__icon svg { width: 20px; height: 20px; } .kpi-card__label { color: var(--text-muted); font-size: 0.82rem; font-weight: 500; } .kpi-card__value { font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.15; margin-top: 2px; color: var(--text); } .kpi-card__delta { font-size: 0.78rem; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; margin-top: var(--s-2); } .kpi-card__delta--up { color: var(--primary-text); } .kpi-card__delta--down { color: var(--danger-text); } .kpi-card__hint { color: var(--text-subtle); font-size: 0.78rem; margin-top: 2px; } .kpi-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: var(--s-5); } /* -- Toasts ----------------------------------------------------- */ .toast-host { position: fixed; top: var(--s-5); right: var(--s-5); z-index: 1000; display: flex; flex-direction: column; gap: var(--s-2); pointer-events: none; max-width: 380px; width: calc(100% - var(--s-5) * 2); } .toast { pointer-events: auto; background: var(--bg-card); border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: var(--radius); padding: var(--s-3) var(--s-4); box-shadow: var(--shadow-lg); display: flex; align-items: flex-start; gap: var(--s-3); animation: toast-slide-in 0.35s cubic-bezier(0.4, 0, 0.2, 1) both; transition: opacity 0.25s ease, transform 0.25s ease; } .toast.is-leaving { opacity: 0; transform: translateX(20px); } .toast--success { border-left-color: var(--primary); } .toast--info { border-left-color: var(--info); } .toast--warning { border-left-color: var(--warning); } .toast--error, .toast--danger { border-left-color: var(--danger); } .toast__icon { width: 22px; height: 22px; display: grid; place-items: center; border-radius: var(--radius-full); flex-shrink: 0; margin-top: 2px; } .toast--success .toast__icon { background: var(--primary-soft); color: var(--primary-text); } .toast--info .toast__icon { background: var(--info-soft); color: var(--info-text); } .toast--warning .toast__icon { background: var(--warning-soft); color: var(--warning-text); } .toast--error .toast__icon, .toast--danger .toast__icon { background: var(--danger-soft); color: var(--danger-text); } .toast__icon svg { width: 14px; height: 14px; } .toast__body { flex: 1; font-size: 0.88rem; line-height: 1.4; color: var(--text); } .toast__close { background: none; border: none; cursor: pointer; color: var(--text-subtle); font-size: 1.1rem; padding: 0; line-height: 1; transition: color var(--t-fast); } .toast__close:hover { color: var(--text); } @keyframes toast-slide-in { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } /* -- Theme toggle ---------------------------------------------- */ .theme-toggle { background: none; border: 1px solid var(--border); cursor: pointer; padding: 6px 8px; color: var(--text-muted); border-radius: var(--radius-sm); transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); display: inline-flex; align-items: center; } .theme-toggle:hover { color: var(--text); background: var(--bg-hover); border-color: var(--border-strong); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .theme-toggle__moon { display: none; } html[data-theme="dark"] .theme-toggle .theme-toggle__sun { display: none; } html[data-theme="dark"] .theme-toggle .theme-toggle__moon { display: block; } /* -- Form (rendu custom via partial _partials/form_field.html) - */ .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-3) var(--s-4); } .form-grid--single { grid-template-columns: 1fr; } .field { display: flex; flex-direction: column; gap: 4px; } .field--full { grid-column: 1 / -1; } .field__label { font-size: 0.85rem; font-weight: 500; color: var(--text); display: inline-flex; align-items: center; gap: 4px; } .field__required { color: var(--danger); } .field__help { font-size: 0.78rem; color: var(--text-muted); } .field__errors { list-style: none; padding: 0; margin: 4px 0 0 0; color: var(--danger-text); font-size: 0.82rem; } .field__errors li { display: flex; align-items: flex-start; gap: 4px; } .field__errors li::before { content: "⚠"; } .field input, .field textarea, .field select { max-width: none; } .field input[type="checkbox"] { width: auto; max-width: none; } .form-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--border-soft); } /* -- Animations page load -------------------------------------- */ .page > * { animation: page-fade-in 0.28s ease-out both; } .page > *:nth-child(2) { animation-delay: 0.04s; } .page > *:nth-child(3) { animation-delay: 0.08s; } .page > *:nth-child(4) { animation-delay: 0.12s; } @keyframes page-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* -- Empty state v2 (illustration plus chaleureuse) ------------ */ .empty__icon--xl { width: 72px; height: 72px; background: linear-gradient(135deg, var(--primary-soft), var(--info-soft)); color: var(--primary-text); } .empty__icon--xl svg { width: 34px; height: 34px; } /* -- Sidebar enrichie ----------------------------------------- */ .sidebar__link { position: relative; } .sidebar__link.is-active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; background: var(--primary); border-radius: 0 3px 3px 0; } .sidebar__link:hover svg { color: var(--text); } .sidebar__link.is-active svg { color: var(--primary); } /* -- Scrollbar discrète --------------------------------------- */ * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 5px; border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: var(--text-subtle); background-clip: content-box; border: 2px solid transparent; } /* -- Texte muted/subtle dans dark mode ------------------------ */ .text-muted { color: var(--text-muted); }