/* ============================================================== MASTER MASE — Systeme de design (KKRI glass morphism) ============================================================== Une seule feuille pour toute la plateforme : portail SSE, module RH, audit vehicules, fiches de renseignement. Deux themes, un seul jeu de variables. Le theme est porte par l'attribut data-theme sur : data-theme="clair" -> palette claire, quoi qu'il arrive data-theme="sombre" -> palette sombre, quoi qu'il arrive data-theme="systeme" -> suit la preference du systeme La couleur d'accent vient de la configuration (configuration.php) et est injectee par PHP dans --accent. Tout le reste en derive. ============================================================== */ /* -------------------------------------------------------------- 1. Jetons — theme clair (valeurs de reference) -------------------------------------------------------------- */ :root { /* Accent : surcharge par PHP depuis les reglages. */ --accent: #2563eb; /* Derives de l'accent — recalcules automatiquement s'il change. */ --accent-hover: color-mix(in srgb, var(--accent) 84%, #000); --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent); --accent-ring: color-mix(in srgb, var(--accent) 22%, transparent); --accent-text: #ffffff; /* Statuts */ --success: #16a34a; --warning: #d97706; --danger: #dc2626; --info: #0891b2; --purple: #7c3aed; --success-soft: color-mix(in srgb, var(--success) 12%, transparent); --warning-soft: color-mix(in srgb, var(--warning) 14%, transparent); --danger-soft: color-mix(in srgb, var(--danger) 12%, transparent); --info-soft: color-mix(in srgb, var(--info) 12%, transparent); --purple-soft: color-mix(in srgb, var(--purple) 12%, transparent); /* Fonds */ --bg: #eef2f7; --bg-deep: #e2e8f0; --surface: #ffffff; --surface-2: #f8fafc; --surface-sunk:#f1f5f9; /* Verre depoli */ --glass: rgba(255, 255, 255, 0.72); --glass-strong: rgba(255, 255, 255, 0.86); --glass-veil: rgba(238, 242, 247, 0.55); --glass-blur: 16px; /* Texte */ --text: #0f172a; --text-2: #475569; --text-muted: #8496ad; --text-on-accent: #ffffff; /* Bordures */ --border: #e2e8f0; --border-strong:#cbd5e1; /* Bandeau sombre : en-tetes de tableaux denses, bandes de KPI. Reste sombre dans les DEUX themes, pour que le texte blanc qu'il porte deja soit lisible sans condition. */ --surface-invert: #1e293b; --text-on-invert: #f1f5f9; /* Palette categorielle — pour distinguer des familles entre elles (formations, themes de causerie...), la ou les couleurs de STATUT n'ont pas de sens. Teintes espacees sur la roue, luminosite tenue constante pour qu'aucune ne domine, et lisibles sur fond pale. */ --cat-1: #1d4ed8; --cat-1-soft: #e0e9ff; --cat-2: #b45309; --cat-2-soft: #fdeed7; --cat-3: #047857; --cat-3-soft: #d7f2e6; --cat-4: #b91c1c; --cat-4-soft: #fde3e3; --cat-5: #6d28d9; --cat-5-soft: #ece0fd; --cat-6: #0e7490; --cat-6-soft: #d6f0f6; --cat-7: #a21caf; --cat-7-soft: #fbe0f7; --cat-8: #4d7c0f; --cat-8-soft: #e8f3d4; /* Ombres — douces et etagees */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, .05); --shadow: 0 1px 3px rgba(15, 23, 42, .07), 0 1px 2px rgba(15, 23, 42, .04); --shadow-md: 0 4px 10px -2px rgba(15, 23, 42, .09), 0 2px 5px -3px rgba(15, 23, 42, .06); --shadow-lg: 0 16px 32px -10px rgba(15, 23, 42, .16), 0 8px 14px -8px rgba(15, 23, 42, .08); /* Rayons */ --r-xs: 6px; --r-sm: 9px; --r: 13px; --r-lg: 18px; --r-pill: 999px; /* Rythme */ --gap-xs: 6px; --gap-sm: 10px; --gap: 16px; --gap-lg: 24px; --gap-xl: 36px; /* Chrome applicatif */ --sidebar-w: 258px; --topbar-h: 62px; --ease: cubic-bezier(.22, 1, .36, 1); color-scheme: light; } /* -------------------------------------------------------------- 2. Jetons — theme sombre -------------------------------------------------------------- */ @mixin-dark {} /* marqueur de section, sans effet */ :root[data-theme="sombre"] { --accent-hover: color-mix(in srgb, var(--accent) 82%, #fff); --accent-soft: color-mix(in srgb, var(--accent) 18%, transparent); --accent-ring: color-mix(in srgb, var(--accent) 34%, transparent); --success: #22c55e; --warning: #f59e0b; --danger: #f05252; --info: #22d3ee; --purple: #a78bfa; --success-soft: color-mix(in srgb, var(--success) 18%, transparent); --warning-soft: color-mix(in srgb, var(--warning) 20%, transparent); --danger-soft: color-mix(in srgb, var(--danger) 18%, transparent); --info-soft: color-mix(in srgb, var(--info) 18%, transparent); --purple-soft: color-mix(in srgb, var(--purple) 18%, transparent); --bg: #070b14; --bg-deep: #04070d; --surface: #111a2b; --surface-2: #16223a; --surface-sunk:#0c1424; --glass: rgba(17, 26, 43, 0.68); --glass-strong: rgba(17, 26, 43, 0.86); --glass-veil: rgba(7, 11, 20, 0.58); --text: #e8eefb; --text-2: #a3b3cc; --text-muted: #6d7f9c; --border: #1e2b45; --border-strong:#2b3c5c; --surface-invert: #1c2942; --text-on-invert: #e8eefb; /* Palette categorielle, version sombre : plus claire et moins saturee pour tenir le contraste sur fond sombre. */ --cat-1: #93b4ff; --cat-1-soft: rgba(29, 78, 216, .26); --cat-2: #f0b866; --cat-2-soft: rgba(180, 83, 9, .28); --cat-3: #6ddaae; --cat-3-soft: rgba(4, 120, 87, .28); --cat-4: #f79c9c; --cat-4-soft: rgba(185, 28, 28, .28); --cat-5: #c4a5fb; --cat-5-soft: rgba(109, 40, 217, .30); --cat-6: #74cfe4; --cat-6-soft: rgba(14, 116, 144, .28); --cat-7: #eda3e4; --cat-7-soft: rgba(162, 28, 175, .28); --cat-8: #b6d970; --cat-8-soft: rgba(77, 124, 15, .28); --shadow-xs: 0 1px 2px rgba(0, 0, 0, .35); --shadow: 0 1px 3px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .3); --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, .55), 0 2px 6px -3px rgba(0, 0, 0, .4); --shadow-lg: 0 18px 38px -12px rgba(0, 0, 0, .7), 0 8px 16px -8px rgba(0, 0, 0, .5); color-scheme: dark; } /* "systeme" (et absence d'attribut) : on suit la preference de l'OS. */ @media (prefers-color-scheme: dark) { :root[data-theme="systeme"], :root:not([data-theme]) { --accent-hover: color-mix(in srgb, var(--accent) 82%, #fff); --accent-soft: color-mix(in srgb, var(--accent) 18%, transparent); --accent-ring: color-mix(in srgb, var(--accent) 34%, transparent); --success: #22c55e; --warning: #f59e0b; --danger: #f05252; --info: #22d3ee; --purple: #a78bfa; --success-soft: color-mix(in srgb, var(--success) 18%, transparent); --warning-soft: color-mix(in srgb, var(--warning) 20%, transparent); --danger-soft: color-mix(in srgb, var(--danger) 18%, transparent); --info-soft: color-mix(in srgb, var(--info) 18%, transparent); --purple-soft: color-mix(in srgb, var(--purple) 18%, transparent); --bg: #070b14; --bg-deep: #04070d; --surface: #111a2b; --surface-2: #16223a; --surface-sunk:#0c1424; --glass: rgba(17, 26, 43, 0.68); --glass-strong: rgba(17, 26, 43, 0.86); --glass-veil: rgba(7, 11, 20, 0.58); --text: #e8eefb; --text-2: #a3b3cc; --text-muted: #6d7f9c; --border: #1e2b45; --border-strong:#2b3c5c; --surface-invert: #1c2942; --text-on-invert: #e8eefb; /* Palette categorielle, version sombre : plus claire et moins saturee pour tenir le contraste sur fond sombre. */ --cat-1: #93b4ff; --cat-1-soft: rgba(29, 78, 216, .26); --cat-2: #f0b866; --cat-2-soft: rgba(180, 83, 9, .28); --cat-3: #6ddaae; --cat-3-soft: rgba(4, 120, 87, .28); --cat-4: #f79c9c; --cat-4-soft: rgba(185, 28, 28, .28); --cat-5: #c4a5fb; --cat-5-soft: rgba(109, 40, 217, .30); --cat-6: #74cfe4; --cat-6-soft: rgba(14, 116, 144, .28); --cat-7: #eda3e4; --cat-7-soft: rgba(162, 28, 175, .28); --cat-8: #b6d970; --cat-8-soft: rgba(77, 124, 15, .28); --shadow-xs: 0 1px 2px rgba(0, 0, 0, .35); --shadow: 0 1px 3px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .3); --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, .55), 0 2px 6px -3px rgba(0, 0, 0, .4); --shadow-lg: 0 18px 38px -12px rgba(0, 0, 0, .7), 0 8px 16px -8px rgba(0, 0, 0, .5); color-scheme: dark; } } /* Repli pour les navigateurs sans color-mix() : l'accent reste lisible. */ @supports not (color: color-mix(in srgb, red 50%, blue)) { :root { --accent-hover: #1d4ed8; --accent-soft: rgba(37, 99, 235, .10); --accent-ring: rgba(37, 99, 235, .22); --success-soft: rgba(22, 163, 74, .12); --warning-soft: rgba(217, 119, 6, .14); --danger-soft: rgba(220, 38, 38, .12); --info-soft: rgba(8, 145, 178, .12); --purple-soft: rgba(124, 58, 237, .12); } } /* -------------------------------------------------------------- 3. Socle -------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 14px; line-height: 1.55; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Decor : degrade maille teinte par l'accent. Remplace l'image de fond du design KKRI — aucun fichier a fournir, et il s'adapte automatiquement a la couleur choisie dans la configuration. */ body::before { content: ''; position: fixed; inset: 0; z-index: -2; background: radial-gradient(58% 48% at 12% 4%, var(--accent-soft) 0%, transparent 62%), radial-gradient(46% 42% at 92% 8%, var(--purple-soft) 0%, transparent 58%), radial-gradient(66% 56% at 76% 96%, var(--info-soft) 0%, transparent 64%), linear-gradient(168deg, var(--bg) 0%, var(--bg-deep) 100%); } body::after { content: ''; position: fixed; inset: 0; z-index: -1; background: var(--glass-veil); } /* Le theme ne doit pas clignoter au changement. */ body, .card, .sidebar, .topbar, .btn, .stat, table, input, select, textarea { transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } h1, h2, h3, h4 { margin: 0 0 var(--gap-sm); font-weight: 650; letter-spacing: -.015em; line-height: 1.25; } h1 { font-size: 1.6rem; } h2 { font-size: 1.22rem; } h3 { font-size: 1.02rem; } h4 { font-size: .92rem; } p { margin: 0 0 var(--gap-sm); } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } code, pre, kbd { font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; font-size: .88em; } code { background: var(--surface-sunk); padding: 1px 5px; border-radius: var(--r-xs); } hr { border: 0; border-top: 1px solid var(--border); margin: var(--gap-lg) 0; } ::selection { background: var(--accent-ring); } :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); } /* Barres de defilement discretes, accordees au theme. */ * { scrollbar-color: var(--border-strong) transparent; scrollbar-width: thin; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--border-strong); border: 3px solid transparent; background-clip: content-box; border-radius: var(--r-pill); } *::-webkit-scrollbar-thumb:hover { background: var(--text-muted); background-clip: content-box; } /* -------------------------------------------------------------- 4. Ossature : barre laterale + barre haute + contenu -------------------------------------------------------------- */ .app { display: flex; min-height: 100vh; } .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; width: var(--sidebar-w); display: flex; flex-direction: column; background: var(--glass); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border-right: 1px solid var(--border); } .sidebar-brand { display: flex; align-items: center; gap: var(--gap-sm); padding: 14px var(--gap); min-height: var(--topbar-h); border-bottom: 1px solid var(--border); } .sidebar-brand img { width: 34px; height: 34px; object-fit: contain; border-radius: var(--r-xs); } .brand-monogram { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--accent); color: var(--text-on-accent); font-weight: 700; font-size: .8rem; letter-spacing: .02em; } .sidebar-brand-text { min-width: 0; } .sidebar-brand-name { font-weight: 680; font-size: .95rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-brand-sub { font-size: .72rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-nav { flex: 1; overflow-y: auto; padding: var(--gap-sm) var(--gap-sm) var(--gap-lg); } .nav-section { margin: var(--gap) 0 var(--gap-xs); padding: 0 var(--gap-sm); font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); } .nav-section:first-child { margin-top: var(--gap-xs); } .nav-item { display: flex; align-items: center; gap: var(--gap-sm); padding: 8px var(--gap-sm); margin-bottom: 1px; border-radius: var(--r-sm); color: var(--text-2); font-size: .875rem; font-weight: 500; text-decoration: none; border-left: 2px solid transparent; } .nav-item:hover { background: var(--surface-sunk); color: var(--text); text-decoration: none; } .nav-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 620; border-left-color: var(--accent); } .nav-item svg, .nav-item i { width: 17px; height: 17px; flex: none; } .nav-item-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-item-count { margin-left: auto; flex: none; padding: 1px 7px; border-radius: var(--r-pill); background: var(--surface-sunk); color: var(--text-muted); font-size: .7rem; font-weight: 650; } .nav-item.active .nav-item-count { background: var(--accent); color: var(--text-on-accent); } /* Groupe repliable (les 5 axes MASE) */ .nav-group > .nav-item { width: 100%; background: none; border: 0; cursor: pointer; font: inherit; text-align: left; } .nav-group-chevron { margin-left: auto; transition: transform .18s var(--ease); flex: none; } .nav-group[open] > .nav-item > .nav-group-chevron { transform: rotate(90deg); } .nav-group-body { padding: 2px 0 var(--gap-xs) var(--gap); } .nav-group-body .nav-item { font-size: .83rem; padding: 6px var(--gap-sm); } .sidebar-foot { padding: var(--gap-sm); border-top: 1px solid var(--border); display: flex; align-items: center; gap: var(--gap-xs); } /* Zone principale */ .main { flex: 1; min-width: 0; margin-left: var(--sidebar-w); display: flex; flex-direction: column; } .topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--gap-sm); height: var(--topbar-h); padding: 0 var(--gap-lg); background: var(--glass); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border-bottom: 1px solid var(--border); } .topbar-title { font-size: 1.02rem; font-weight: 650; letter-spacing: -.01em; } .topbar-spacer { flex: 1; } .sidebar-toggle { display: none; background: none; border: 0; cursor: pointer; color: var(--text-2); padding: 6px; border-radius: var(--r-sm); } .sidebar-toggle:hover { background: var(--surface-sunk); color: var(--text); } .content { flex: 1; padding: var(--gap-lg); max-width: 1500px; width: 100%; } .page-head { display: flex; align-items: flex-start; gap: var(--gap); flex-wrap: wrap; margin-bottom: var(--gap-lg); } .page-head h1 { margin: 0; } .page-head-sub { color: var(--text-2); font-size: .88rem; margin-top: 2px; } .page-head-actions { margin-left: auto; display: flex; gap: var(--gap-xs); flex-wrap: wrap; } /* -------------------------------------------------------------- 5. Surfaces -------------------------------------------------------------- */ .card { background: var(--glass-strong); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow); padding: var(--gap-lg); margin-bottom: var(--gap); } .card-flat { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; } .card-head { display: flex; align-items: center; gap: var(--gap-sm); margin: calc(var(--gap-lg) * -1) calc(var(--gap-lg) * -1) var(--gap-lg); padding: var(--gap) var(--gap-lg); border-bottom: 1px solid var(--border); } .card-head h2, .card-head h3 { margin: 0; } .card-head-actions { margin-left: auto; display: flex; gap: var(--gap-xs); align-items: center; flex-wrap: wrap; } /* Les champs places dans un en-tete de carte servent de filtres : ils doivent rester compacts, pas s'etirer sur toute la largeur comme dans un formulaire. */ .card-head-actions input, .card-head-actions select { width: auto; min-width: 150px; } .card-head-actions input[type="search"] { min-width: 200px; } .grid { display: grid; gap: var(--gap); } .grid-auto { grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); } .grid-stats { grid-template-columns: repeat(auto-fit, minmax(184px, 1fr)); } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); } /* Carte de chiffre cle */ .stat { position: relative; overflow: hidden; background: var(--glass-strong); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--border); border-radius: var(--r); padding: var(--gap) var(--gap-lg); box-shadow: var(--shadow-xs); } .stat::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent); } .stat:hover { box-shadow: var(--shadow-md); } .stat-value { font-size: 1.85rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; } .stat-label { font-size: .76rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; margin-top: 3px; } .stat-hint { font-size: .78rem; color: var(--text-2); margin-top: var(--gap-xs); } .stat-success::before { background: var(--success); } .stat-warning::before { background: var(--warning); } .stat-danger::before { background: var(--danger); } .stat-info::before { background: var(--info); } .stat-success .stat-value { color: var(--success); } .stat-warning .stat-value { color: var(--warning); } .stat-danger .stat-value { color: var(--danger); } /* -------------------------------------------------------------- 6. Boutons -------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 15px; border: 1px solid transparent; border-radius: var(--r-sm); font: inherit; font-size: .855rem; font-weight: 600; line-height: 1.2; cursor: pointer; text-decoration: none; white-space: nowrap; } .btn:hover { text-decoration: none; } .btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; } .btn svg, .btn i { width: 16px; height: 16px; flex: none; } .btn-primary { background: var(--accent); color: var(--text-on-accent); box-shadow: var(--shadow-xs); } .btn-primary:hover { background: var(--accent-hover); } .btn-outline { background: var(--surface); color: var(--text); border-color: var(--border-strong); } .btn-outline:hover { background: var(--surface-sunk); border-color: var(--text-muted); } .btn-ghost { background: transparent; color: var(--text-2); } .btn-ghost:hover { background: var(--surface-sunk); color: var(--text); } .btn-danger { background: var(--danger); color: #fff; } .btn-danger:hover { filter: brightness(.92); } .btn-success { background: var(--success); color: #fff; } .btn-success:hover { filter: brightness(.92); } .btn-sm { padding: 5px 11px; font-size: .79rem; } .btn-lg { padding: 11px 22px; font-size: .95rem; } .btn-block { width: 100%; } .btn-icon { padding: 7px; } .btn-group { display: inline-flex; gap: var(--gap-xs); flex-wrap: wrap; } /* Bascule clair / sombre */ .theme-toggle { display: inline-flex; align-items: center; background: var(--surface-sunk); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 2px; gap: 1px; } .theme-toggle button { display: grid; place-items: center; width: 28px; height: 26px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--text-muted); cursor: pointer; } .theme-toggle button:hover { color: var(--text); } .theme-toggle button[aria-pressed="true"] { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-xs); } .theme-toggle svg { width: 15px; height: 15px; } /* -------------------------------------------------------------- 7. Formulaires -------------------------------------------------------------- */ .form-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); } .form-grid .col-span-2 { grid-column: span 2; } .form-grid .col-full { grid-column: 1 / -1; } .field { display: flex; flex-direction: column; gap: 5px; } .field > label, .form-label { font-size: .76rem; font-weight: 650; color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; } .field-hint { font-size: .76rem; color: var(--text-muted); } .field-error { font-size: .78rem; color: var(--danger); font-weight: 550; } .required::after { content: ' *'; color: var(--danger); } input[type=text], input[type=password], input[type=email], input[type=number], input[type=date], input[type=time], input[type=datetime-local], input[type=search], input[type=tel], input[type=url], input[type=month], select, textarea { width: 100%; padding: 8px 11px; font: inherit; font-size: .875rem; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-sm); } textarea { min-height: 92px; resize: vertical; } select { appearance: none; padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 15px) 51%, calc(100% - 10px) 51%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } input:hover, select:hover, textarea:hover { border-color: var(--text-muted); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } input:disabled, select:disabled, textarea:disabled { background: var(--surface-sunk); color: var(--text-muted); cursor: not-allowed; } input::placeholder, textarea::placeholder { color: var(--text-muted); } /* Le selecteur de couleur natif reste carre et sans marge interne. */ input[type=color] { width: 46px; height: 34px; padding: 2px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-sm); cursor: pointer; } input[type=color]::-webkit-color-swatch-wrapper { padding: 0; } input[type=color]::-webkit-color-swatch { border: 0; border-radius: var(--r-xs); } .check { display: flex; align-items: center; gap: 8px; font-size: .875rem; } .check input[type=checkbox], .check input[type=radio] { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; } .form-actions { display: flex; gap: var(--gap-xs); flex-wrap: wrap; margin-top: var(--gap-lg); padding-top: var(--gap); border-top: 1px solid var(--border); } /* Zone de televersement */ .dropzone { display: grid; place-items: center; gap: var(--gap-xs); padding: var(--gap-lg); border: 1.5px dashed var(--border-strong); border-radius: var(--r); background: var(--surface-sunk); color: var(--text-2); text-align: center; font-size: .85rem; cursor: pointer; } .dropzone:hover, .dropzone.is-over { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } /* -------------------------------------------------------------- 8. Tableaux -------------------------------------------------------------- */ .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); } table { width: 100%; border-collapse: collapse; font-size: .865rem; } thead th { position: sticky; top: 0; z-index: 1; padding: 10px var(--gap); text-align: left; white-space: nowrap; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); background: var(--surface-2); border-bottom: 1px solid var(--border); } tbody td { padding: 10px var(--gap); border-bottom: 1px solid var(--border); vertical-align: middle; } tbody tr:last-child td { border-bottom: 0; } tbody tr:hover td { background: var(--surface-sunk); } tbody tr.is-selected td { background: var(--accent-soft); } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } td.actions { white-space: nowrap; text-align: right; } .table-empty { padding: var(--gap-xl) var(--gap-lg); text-align: center; color: var(--text-muted); font-size: .88rem; } /* -------------------------------------------------------------- 9. Etiquettes, badges, alertes -------------------------------------------------------------- */ .tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: var(--r-pill); font-size: .715rem; font-weight: 650; letter-spacing: .02em; background: var(--surface-sunk); color: var(--text-2); white-space: nowrap; } .tag-accent { background: var(--accent-soft); color: var(--accent); } .tag-success { background: var(--success-soft); color: var(--success); } .tag-warning { background: var(--warning-soft); color: var(--warning); } .tag-danger { background: var(--danger-soft); color: var(--danger); } .tag-info { background: var(--info-soft); color: var(--info); } .tag-purple { background: var(--purple-soft); color: var(--purple); } .role-badge { display: inline-flex; align-items: center; padding: 2px 9px; margin-left: 6px; border-radius: var(--r-pill); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; background: var(--accent-soft); color: var(--accent); } .role-badge[data-role="admin"] { background: var(--purple-soft); color: var(--purple); } .role-badge[data-role="rh"] { background: var(--warning-soft); color: var(--warning); } .role-badge[data-role="sse"] { background: var(--success-soft); color: var(--success); } .role-badge[data-role="manager"] { background: var(--info-soft); color: var(--info); } .role-badge[data-role="viewer"] { background: var(--surface-sunk); color: var(--text-muted); } .alert { display: flex; align-items: flex-start; gap: var(--gap-sm); padding: 11px var(--gap); border-radius: var(--r-sm); border: 1px solid transparent; font-size: .87rem; margin-bottom: var(--gap); } .alert svg, .alert i { flex: none; width: 18px; height: 18px; margin-top: 1px; } .alert-success { background: var(--success-soft); border-color: var(--success); color: var(--success); } .alert-warning { background: var(--warning-soft); border-color: var(--warning); color: var(--warning); } .alert-error, .alert-danger { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); } .alert-info { background: var(--info-soft); border-color: var(--info); color: var(--info); } .banner-readonly { position: sticky; top: 0; z-index: 60; padding: 9px var(--gap); text-align: center; font-size: .85rem; font-weight: 650; background: var(--danger); color: #fff; } /* Barre de progression */ .progress { height: 7px; border-radius: var(--r-pill); background: var(--surface-sunk); overflow: hidden; } .progress > span { display: block; height: 100%; border-radius: var(--r-pill); background: var(--accent); } .progress.is-success > span { background: var(--success); } .progress.is-warning > span { background: var(--warning); } .progress.is-danger > span { background: var(--danger); } /* -------------------------------------------------------------- 10. Modale, infobulle, notification -------------------------------------------------------------- */ .modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: var(--gap); background: rgba(2, 6, 16, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .modal { width: min(680px, 100%); max-height: 88vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); animation: modal-in .24s var(--ease); } @keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(.985); } } .modal-head { display: flex; align-items: center; gap: var(--gap-sm); padding: var(--gap) var(--gap-lg); border-bottom: 1px solid var(--border); } .modal-head h2, .modal-head h3 { margin: 0; } .modal-close { margin-left: auto; } .modal-body { padding: var(--gap-lg); } .modal-foot { display: flex; gap: var(--gap-xs); justify-content: flex-end; padding: var(--gap) var(--gap-lg); border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--r-lg) var(--r-lg); } .toasts { position: fixed; right: var(--gap-lg); bottom: var(--gap-lg); z-index: 120; display: grid; gap: var(--gap-xs); } .toast { display: flex; align-items: center; gap: var(--gap-sm); padding: 11px var(--gap); min-width: 250px; max-width: 380px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--r-sm); box-shadow: var(--shadow-lg); font-size: .87rem; animation: toast-in .26s var(--ease); } @keyframes toast-in { from { opacity: 0; transform: translateX(24px); } } .toast.is-success { border-left-color: var(--success); } .toast.is-error { border-left-color: var(--danger); } .toast.is-warning { border-left-color: var(--warning); } /* -------------------------------------------------------------- 11. Utilitaires -------------------------------------------------------------- */ .muted { color: var(--text-muted); } .text-2 { color: var(--text-2); } .small { font-size: .8rem; } .strong { font-weight: 650; } .nowrap { white-space: nowrap; } .num { font-variant-numeric: tabular-nums; } .text-right{ text-align: right; } .text-center{ text-align: center; } .flex { display: flex; gap: var(--gap-sm); align-items: center; } .flex-col { display: flex; flex-direction: column; gap: var(--gap-sm); } .flex-wrap { flex-wrap: wrap; } .spacer { flex: 1; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .mt { margin-top: var(--gap); } .mb { margin-bottom: var(--gap); } .mt-lg{ margin-top: var(--gap-lg); } .mb-lg { margin-bottom: var(--gap-lg); } .hidden { display: none !important; } .spinner { width: 17px; height: 17px; flex: none; border: 2px solid var(--border-strong); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .empty-state { display: grid; place-items: center; gap: var(--gap-sm); padding: var(--gap-xl) var(--gap-lg); text-align: center; color: var(--text-muted); } .empty-state svg, .empty-state i { width: 34px; height: 34px; opacity: .5; } /* -------------------------------------------------------------- 12. Page de connexion / installation -------------------------------------------------------------- */ .auth-page { display: grid; place-items: center; min-height: 100vh; padding: var(--gap); } .auth-card { width: min(410px, 100%); padding: var(--gap-xl) var(--gap-lg); background: var(--glass-strong); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); } .auth-logo { margin: 0 auto var(--gap); display: block; } /* display:block casserait le centrage du monogramme (grid) : on garde grid et on centre le bloc lui-meme avec les marges automatiques. */ .auth-card .brand-monogram { margin: 0 auto var(--gap); } .auth-logo { max-width: 132px; max-height: 62px; object-fit: contain; } .auth-card h1 { text-align: center; font-size: 1.28rem; margin-bottom: 2px; } .auth-sub { text-align: center; color: var(--text-muted); font-size: .83rem; margin-bottom: var(--gap-lg); } .auth-card .field { margin-bottom: var(--gap); } .auth-foot { margin-top: var(--gap-lg); text-align: center; font-size: .8rem; color: var(--text-muted); } /* -------------------------------------------------------------- 13. Impression -------------------------------------------------------------- */ @media print { .sidebar, .topbar, .page-head-actions, .btn, .toasts, .theme-toggle { display: none !important; } .main { margin-left: 0; } body::before, body::after { display: none; } body { background: #fff; color: #000; } .card, .stat { box-shadow: none; border: 1px solid #ccc; background: #fff; } } /* -------------------------------------------------------------- 14. Adaptatif -------------------------------------------------------------- */ @media (max-width: 1024px) { :root { --sidebar-w: 224px; } .content { padding: var(--gap); } } @media (max-width: 860px) { .sidebar { transform: translateX(-100%); transition: transform .24s var(--ease); box-shadow: var(--shadow-lg); background: var(--glass-strong); } body.nav-open .sidebar { transform: none; } body.nav-open::after { background: rgba(2, 6, 16, .5); z-index: 35; } .main { margin-left: 0; } .sidebar-toggle { display: grid; place-items: center; } .topbar { padding: 0 var(--gap); } .form-grid { grid-template-columns: 1fr; } .form-grid .col-span-2 { grid-column: auto; } .page-head-actions { margin-left: 0; width: 100%; } .grid-stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .stat { padding: var(--gap-sm) var(--gap); } .stat-value { font-size: 1.5rem; } } /* ============================================================== 15. Passerelle vers l'ancienne feuille (assets/style.css) ============================================================== style.css declare 13 jetons dans son :root et les utilise 138 fois. En redefinissant ces memes noms ici — theme.css est charge APRES — tout ce qui passait deja par var() suit le theme sans toucher a une seule ligne de l'ancien fichier. Ce qui ne suit PAS : les ~570 couleurs ecrites en dur dans le bas de style.css et les 295 attributs style="..." des pages MASE. Elles sont converties ecran par ecran. ============================================================== */ :root { --primary: var(--text); /* titres et texte fort */ --primary-light: var(--text-2); --accent-light: var(--accent); --card: var(--surface); --text-light: var(--text-2); --espace-color: var(--accent); /* teinte d'espace : desormais l'accent */ } /* L'ancien fond degrade en dur ecrasait le decor : on le neutralise pour laisser passer les couches de body::before / body::after. */ body { background: var(--bg) !important; background-attachment: initial !important; } /* Surfaces heritees remises sur les jetons du theme. */ .container { background: transparent; } .card, .app-card, .panel, .box { background: var(--surface); border-color: var(--border); color: var(--text); } .muted, .text-muted, .app-header-sub { color: var(--text-muted); } /* Tableaux hérités */ table th { background: var(--surface-2); color: var(--text-muted); border-color: var(--border); } table td { border-color: var(--border); color: var(--text); } table tbody tr:hover td { background: var(--surface-sunk); } /* Boutons hérités : .btn-app et ses variantes */ .btn-app { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 15px; border: 1px solid transparent; border-radius: var(--r-sm); font: inherit; font-size: .855rem; font-weight: 600; line-height: 1.2; cursor: pointer; text-decoration: none; white-space: nowrap; } .btn-app.btn-primary, .btn-app.btn-accent { background: var(--accent); color: var(--text-on-accent); } .btn-app.btn-primary:hover, .btn-app.btn-accent:hover { background: var(--accent-hover); } .btn-app.btn-outline-dark { background: var(--surface); color: var(--text); border-color: var(--border-strong); } .btn-app.btn-outline-dark:hover { background: var(--surface-sunk); } .btn-app.btn-danger { background: var(--danger); color: #fff; } .btn-app.btn-success { background: var(--success); color: #fff; } .btn-app.btn-small { padding: 5px 11px; font-size: .79rem; } /* Champs de formulaire hérités */ .form-field label { color: var(--text-2); } .form-field input, .form-field select, .form-field textarea { color: var(--text); background: var(--surface); } /* Modale héritée */ .modal-overlay, .overlay { background: rgba(2, 6, 16, .55); } .modal-content { background: var(--surface); color: var(--text); border-color: var(--border); } /* En mode sombre, les grands aplats blancs ecrits en dur dans le bas de style.css restent lisibles : on rabat le blanc pur sur la surface. */ :root[data-theme="sombre"] .card[style*="background:#fff"], :root[data-theme="sombre"] .card[style*="background: #fff"], :root[data-theme="sombre"] [style*="background:#ffffff"], :root[data-theme="sombre"] [style*="background: #ffffff"] { background: var(--surface) !important; color: var(--text) !important; } /* -------------------------------------------------------------- 16. Pictogrammes reglementaires -------------------------------------------------------------- Un pictogramme est normalise : l'application ne le redessine pas, elle sert le visuel officiel depose dans assets/pictogrammes/. Quand il manque, on montre une case explicite plutot qu'un symbole approximatif — un manque visible vaut mieux qu'un faux repere. */ .picto { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; vertical-align: top; } .picto-code { font-size: .68rem; font-weight: 700; letter-spacing: .04em; color: var(--text-muted); } .picto-absent { display: grid; place-items: center; border: 2px dashed var(--border-strong); border-radius: var(--r-sm); background: var(--surface-sunk); color: var(--text-muted); font-size: .7rem; font-weight: 700; letter-spacing: .03em; } .picto-sans-visuel .picto-code { color: var(--warning); } /* Serie d'etiquettes courtes dans une cellule de tableau : elles doivent s'aligner en ligne et passer a la ligne ensemble. */ .tag-serie { display: flex; flex-wrap: wrap; gap: 3px; } /* ================================================================== Aide en ligne ================================================================== Chargee avec le theme plutot que par $pageCss : le panneau est present sur toutes les pages, pas sur un ecran en particulier. ================================================================== */ .aide-bouton { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--text-2); font: inherit; font-size: .92rem; font-weight: 700; line-height: 1; cursor: pointer; transition: all .15s; } .aide-bouton:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .aide-voile { position: fixed; inset: 0; z-index: 890; background: rgba(2, 6, 16, .42); opacity: 0; pointer-events: none; transition: opacity .2s; } .aide-voile.visible { opacity: 1; pointer-events: auto; } .aide-panneau { position: fixed; top: 0; right: 0; bottom: 0; z-index: 900; width: min(430px, 100vw); display: flex; flex-direction: column; background: var(--card); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform .22s var(--ease, ease); } .aide-panneau.visible { transform: translateX(0); } .aide-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid var(--border); } .aide-surtitre { font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; color: var(--accent); font-weight: 700; } .aide-tete h2 { margin: 2px 0 0; font-size: 1.05rem; line-height: 1.25; color: var(--text); } .aide-fermer { border: 0; background: transparent; color: var(--text-muted); font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 2px; } .aide-fermer:hover { color: var(--text); } .aide-corps { flex: 1; overflow-y: auto; padding: 16px 18px; } .aide-resume { margin: 0 0 16px; font-size: .9rem; line-height: 1.55; color: var(--text); } .aide-corps h3 { margin: 18px 0 7px; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); } .aide-corps h3:first-child { margin-top: 0; } .aide-etapes { margin: 0; padding-left: 20px; } .aide-etapes li { margin-bottom: 8px; font-size: .85rem; line-height: 1.5; color: var(--text-2); } .aide-etapes li::marker { color: var(--accent); font-weight: 700; } .aide-pieges { list-style: none; margin: 0; padding: 0; } .aide-pieges li { position: relative; margin-bottom: 8px; padding-left: 18px; font-size: .85rem; line-height: 1.5; color: var(--text-2); } .aide-pieges li::before { content: ''; position: absolute; left: 3px; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--warning); } .aide-reference { margin-top: 18px; padding: 10px 12px; background: var(--surface-2); border-left: 3px solid var(--accent); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: .8rem; line-height: 1.5; color: var(--text-2); } .aide-reference strong { display: block; margin-bottom: 3px; color: var(--text); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; } .aide-pied { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 18px; border-top: 1px solid var(--border); background: var(--surface-2); } .aide-pied a { font-size: .82rem; color: var(--accent); text-decoration: none; font-weight: 600; } .aide-pied a:hover { text-decoration: underline; } .aide-raccourci { font-size: .72rem; color: var(--text-muted); } @media print { .aide-bouton, .aide-panneau, .aide-voile { display: none !important; } } /* ================================================================== Outillage employe dans un mode operatoire ================================================================== */ .mo-outils { display: flex; flex-wrap: wrap; gap: 10px; } .mo-outils-cat { flex: 1 1 240px; margin: 0; padding: 8px 11px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); } .mo-outils-cat legend { padding: 0 5px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); } .mo-outil { display: flex; align-items: flex-start; gap: 6px; padding: 2px 0; font-size: .8rem; cursor: pointer; } .mo-outil input { width: 14px; min-width: 14px; height: 14px; margin-top: 2px; accent-color: var(--accent); } /* Le contenu derive : liseré d'accent pour dire qu'il ne se saisit pas ici, il vient des fiches. */ .mo-derive { padding: 10px 13px; background: var(--surface-2); border-left: 3px solid var(--accent); border-radius: 0 var(--r-sm) var(--r-sm) 0; } .mo-derive h4 { margin: 10px 0 5px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); } .mo-derive h4:first-child { margin-top: 0; } .mo-derive-liste { margin: 0; padding-left: 18px; } .mo-derive-liste > li { margin-bottom: 5px; font-size: .82rem; line-height: 1.4; } .mo-derive-liste ul { margin: 2px 0 0; padding-left: 16px; } .mo-derive-liste ul li { font-size: .78rem; color: var(--text-2); } /* L'origine de chaque ligne : sans elle on lit des consignes sans savoir a quel outil elles s'appliquent. */ .mo-origine { display: inline-block; margin-left: 5px; padding: 1px 7px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); font-size: .68rem; font-weight: 600; } .mo-derive-epi { display: flex; flex-wrap: wrap; gap: 5px; } .mo-epi-code { padding: 2px 9px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); font-size: .72rem; font-weight: 700; cursor: help; }