/* ============================================================ Anibal Auditor Pro — design system BiXYBER ============================================================ JETONS DE COULEUR — trois couches 1. Teinte de l'organisme : --primary --primary-hover --primary-soft --primary-softer --on-primary --secondary --on-secondary --accent --on-accent --side --side-2 --side-3 --side-active. Valeurs par défaut ci-dessous ; static/js/palette.js les SURCHARGE en style inline sur . Les composants consomment ces jetons, jamais leurs valeurs ; ce qui dépend de la teinte (ombres colorées, anneau de focus, surlignages) en dérive par color-mix() dans la couche 3. 2. Neutres et états (--bg, --surface, --text, --border, --success…) : thème clair ici, thème sombre dans :root[data-theme="dark"] (attribut posé sur par palette.js). 3. Dérivés (ombres, focus) et ALIAS historiques (--brand, --ink, --muted, --line, --ok, --danger, --warn…) : conservés pour ne rien casser, à ne plus employer dans le code neuf. Contrastes WCAG 2.1 AA calculés (luminance relative), en clair comme en sombre : texte ≥ 4,5:1 ; bordures de champs, icônes, barres ≥ 3:1. « Feuilles claires » (.editor, .cover-preview, .light-sheet) : contenu destiné à l'impression PDF/Word, il reste sur fond clair en thème sombre (neutres et états clairs redéclarés). ============================================================ */ /* ---- couche 1 : teinte de l'organisme (surchargée au runtime) + barre latérale ---- */ :root { --primary: #0b6fa4; /* boutons, liens, onglet actif — blanc dessus 5,49:1 (l'ancien #1795d0 : 3,36:1) */ --primary-hover: #095a86; /* survol / appui du primaire — blanc dessus 7,45:1 */ --primary-soft: #e3f1fa; /* fond d'élément sélectionné — --primary dessus 4,77:1 */ --primary-softer: #f2f8fc; /* survol de ligne, fond d'aide */ --on-primary: #ffffff; --secondary: #0d1a2b; /* bleu nuit BiXYBER : bouton secondaire, bandeaux */ --on-secondary: #ffffff; --accent: #1795d0; /* bleu BiXYBER vif : barres de progression, liserés (élément graphique ≥ 3:1) */ --on-accent: #0d1a2b; /* texte posé sur l'accent : 5,21:1 */ --side: #0d1a2b; --side-2: #132338; --side-3: #1b3049; --side-active: #0b6fa4; /* élément de menu actif — texte --side-active-text dessus 5,49:1 */ /* barre latérale, jetons fixes (non surchargés par la palette : la barre reste sombre) */ --side-text: #b7c5d6; /* 9,98:1 sur --side */ --side-muted: #8394ab; /* intertitres, version, pied — 5,66:1 sur --side, 5,12:1 sur --side-2 */ --side-strong: #ffffff; --side-active-text: #ffffff; --side-border: rgb(255 255 255 / .06); --side-hover: rgb(255 255 255 / .07); --side-hover-strong: rgb(255 255 255 / .12); --side-edge: color-mix(in srgb, var(--side) 78%, #000); --side-bottom: color-mix(in srgb, var(--side) 85%, #000); --radius: 10px; --radius-sm: 6px; --side-w: 272px; --rail-w: 64px; --top-h: 56px; --drawer-w: 560px; --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; --mono: "Cascadia Code", "JetBrains Mono", Consolas, monospace; /* mouvement */ --ease: cubic-bezier(.2, 0, 0, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --dur-fast: 120ms; --dur: 180ms; --dur-slow: 260ms; } /* Technical remediation: matrix, reviewed changes and side-by-side diffs. */ .tr-matrix{display:grid;grid-template-columns:110px repeat(5,minmax(100px,1fr));gap:5px;overflow:auto;min-width:720px} .tr-matrix-y,.tr-matrix-x{font-size:.75rem;color:var(--muted);display:flex;align-items:center;justify-content:center;padding:7px;text-align:center} .tr-matrix-cell{min-height:72px;border-radius:9px;padding:6px;display:flex;gap:5px;align-content:flex-start;flex-wrap:wrap;border:1px solid color-mix(in srgb,var(--border) 75%,transparent)} .tr-matrix-cell.zone-P1{background:color-mix(in srgb,#ef4444 13%,var(--surface))}.tr-matrix-cell.zone-P2{background:color-mix(in srgb,#f97316 12%,var(--surface))} .tr-matrix-cell.zone-P3{background:color-mix(in srgb,#22c55e 11%,var(--surface))}.tr-matrix-cell.zone-P4{background:color-mix(in srgb,#64748b 9%,var(--surface))} .tr-matrix-point{font:700 .68rem var(--mono);padding:4px 6px;border-radius:999px;background:var(--surface);box-shadow:0 1px 4px #0002;color:var(--text)} .tr-rem-list{display:grid;gap:14px}.tr-rem-change{padding:16px;border:1px solid var(--border);border-radius:12px;background:color-mix(in srgb,var(--surface) 95%,var(--primary))} .tr-diff-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}.tr-diff-pair pre{white-space:pre-wrap;overflow:auto;max-height:260px;border-inline-start:3px solid #ef4444} .tr-diff-pair pre+pre{border-inline-start-color:#22c55e} @media(max-width:760px){.tr-diff-pair{grid-template-columns:1fr}.tr-matrix{min-width:660px}} /* ---- couche 2 : neutres et états — thème clair (et feuilles claires en thème sombre) ---- */ :root, :root[data-theme="dark"] :is(.editor, .cover-preview, .light-sheet) { color-scheme: light; --bg: #f3f6f9; --surface: #ffffff; --surface-2: #f8fafc; --surface-3: #eef2f6; --text: #17202b; /* 16,43:1 sur --surface */ --text-2: #3b4a5c; /* 9,05:1 */ --text-muted: #5f6e80; /* 5,21:1 sur --surface, 4,98:1 sur --surface-2 */ --border: #dfe6ee; /* séparateurs décoratifs */ --border-soft: #eef2f6; --border-hover: #c7d2de; --border-strong: #8491a1; /* bordure des champs de saisie — 3,2:1 sur --surface */ /* états : couleur pleine (texte --on-status dessus ≥ 4,5:1), -soft (fond d'alerte/badge), -text (texte sur -soft), -border */ --on-status: #ffffff; --success: #1a7f45; --success-soft: #e7f6ee; --success-text: #135c33; --success-border: #b7ebc6; --warning: #c2410c; --warning-soft: #fff4e5; --warning-text: #7c2d12; --warning-border: #fed7aa; --error: #c0282f; --error-soft: #fdecec; --error-text: #86181d; --error-border: #f1c4c6; --info: #0b6fa4; --info-soft: #e3f1fa; --info-text: #0b4e73; --info-border: #cfe6f5; --caution: #d9a400; --on-caution: #2b2300; --caution-strong: #a16207; --caution-soft: #fff6d6; --caution-text: #713f12; --caution-border: #fde68a; --teal: #0f766e; --grey: #657282; --violet: #6d28d9; --violet-soft: #eef2ff; --violet-text: #3730a3; --neutral-soft: #e2e8f0; --neutral-text: #1e293b; /* graphiques SVG générés par le serveur : fond toujours clair (leurs couleurs sont figées) */ --chart-bg: #ffffff; --chart-text: #17202b; --chart-grid: #dfe6ee; --skeleton: #e8edf3; --skeleton-hi: #f6f8fb; --overlay: rgb(13 26 43 / .45); --overlay-soft: rgb(13 26 43 / .25); --shadow-rgb: 16 24 40; } /* ---- thème sombre : redéfinit les couches 1 et 2 (contrastes AA vérifiés) ---- */ :root[data-theme="dark"] { color-scheme: dark; --primary: #4db3e6; --primary-hover: #7cc8ee; --primary-soft: #12324a; --primary-softer: #0f2638; --on-primary: #06121d; --secondary: #2a3f5a; --on-secondary: #e6edf5; --accent: #38bdf8; --on-accent: #06121d; --side: #080f19; --side-2: #0e1827; --side-3: #16263a; --side-active: #1a6c9a; --bg: #0b1320; --surface: #121c2b; --surface-2: #172334; --surface-3: #1d2a3c; --text: #e6edf5; --text-2: #c1ccd9; --text-muted: #94a3b8; --border: #2a3a50; --border-soft: #1f2d40; --border-hover: #3b4d66; --border-strong: #5f718a; --on-status: #06121d; --success: #34c77b; --success-soft: #0f2e20; --success-text: #6fdca3; --success-border: #1f5a3c; --warning: #fb923c; --warning-soft: #35200e; --warning-text: #fdba74; --warning-border: #6b3a12; --error: #f0636a; --error-soft: #3a1618; --error-text: #f8a5a9; --error-border: #6e2a2e; --info: #4db3e6; --info-soft: #12324a; --info-text: #8fd0f2; --info-border: #1f4a66; --caution: #facc15; --on-caution: #2b2300; --caution-strong: #eab308; --caution-soft: #332a0a; --caution-text: #fde68a; --caution-border: #5c4a10; --teal: #2dd4bf; --grey: #94a3b8; --violet: #a78bfa; --violet-soft: #2a2350; --violet-text: #c4b5fd; --neutral-soft: #263447; --neutral-text: #d5dde8; --chart-bg: #f8fafc; --chart-text: #17202b; --chart-grid: #cbd5e1; --skeleton: #1d2a3c; --skeleton-hi: #2a3a50; --overlay: rgb(0 0 0 / .6); --overlay-soft: rgb(0 0 0 / .4); --shadow-rgb: 0 0 0; } /* feuilles claires en sombre : les fonds teintés dérivent de la teinte primaire sur fond clair */ :root[data-theme="dark"] :is(.editor, .cover-preview, .light-sheet) { --primary-soft: color-mix(in srgb, var(--primary) 16%, #fff); --primary-softer: color-mix(in srgb, var(--primary) 8%, #fff); } /* ---- couche 3 : dérivés et alias (redéclarés sur les feuilles claires pour s'y résoudre) ---- */ :root, :is(.editor, .cover-preview, .light-sheet) { --shadow-sm: 0 1px 2px rgb(var(--shadow-rgb) / .06); --shadow: 0 1px 2px rgb(var(--shadow-rgb) / .06), 0 1px 3px rgb(var(--shadow-rgb) / .1); --shadow-md: 0 4px 14px rgb(var(--shadow-rgb) / .12), 0 1px 3px rgb(var(--shadow-rgb) / .08); --shadow-lg: 0 10px 30px rgb(var(--shadow-rgb) / .2); --shadow-primary: 0 2px 6px color-mix(in srgb, var(--primary) 30%, transparent); --shadow-primary-lg: 0 4px 12px color-mix(in srgb, var(--primary) 34%, transparent); --shadow-nav-active: 0 4px 12px color-mix(in srgb, var(--side-active) 35%, transparent); --primary-ring: color-mix(in srgb, var(--primary) 22%, transparent); --field-ring: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); /* anneau de focus clavier : liseré de fond + anneau primaire (≥ 3:1 sur la surface) */ --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary); /* alias historiques */ --brand: var(--primary); --brand-600: var(--primary-hover); --brand-100: var(--primary-soft); --brand-50: var(--primary-softer); --brand-300: color-mix(in srgb, var(--primary) 55%, var(--surface)); --ink: var(--text); --ink-2: var(--text-2); --muted: var(--text-muted); --line: var(--border); --line-2: var(--border-soft); --paper: var(--surface); --ok: var(--success); --danger: var(--error); --warn: var(--warning); --warn-600: var(--warning-text); } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body { font-family: var(--font); font-size: 14px; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.01em; } h1 { font-size: 22px; } h2 { font-size: 18px; } h3 { font-size: 15px; } h4 { font-size: 13.5px; } p { margin: 0 0 8px; } code, .mono { font-family: var(--mono); font-size: 12.5px; } ::selection { background: var(--primary-soft); } button, input, select, textarea { font: inherit; color: inherit; } img { max-width: 100%; } [hidden] { display: none !important; } /* ---------- layout ---------- */ .app { display: grid; grid-template-columns: var(--side-w) 1fr; grid-template-rows: var(--top-h) 1fr; height: 100vh; overflow: hidden; } .app.login-mode { grid-template-columns: 1fr; grid-template-rows: 1fr; } .side { grid-row: 1 / 3; background: linear-gradient(180deg, var(--side) 0%, var(--side-bottom) 100%); color: var(--side-text); display: flex; flex-direction: column; overflow: hidden; border-right: 1px solid var(--side-edge); } .side-brand { height: var(--top-h); display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--side-border); flex-shrink: 0; } .side-brand img { height: 30px; width: auto; } .side-brand .brand-name { font-weight: 700; color: var(--side-strong); font-size: 15px; line-height: 1.15; letter-spacing: .02em; white-space: nowrap; } .side-brand .brand-sub { font-size: 10.5px; line-height: 1.25; color: var(--side-text); white-space: nowrap; } .side-brand .brand-ver { font-family: var(--mono); font-size: 9.5px; line-height: 1.3; letter-spacing: .04em; color: var(--side-muted); white-space: nowrap; } .side-brand .burger { margin-left: auto; background: transparent; border: 0; color: var(--side-text); cursor: pointer; padding: 6px; border-radius: 6px; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .side-brand .burger:hover { background: var(--side-hover); color: var(--side-strong); } .side-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 8px 20px; scrollbar-width: thin; scrollbar-color: var(--side-3) transparent; } .side-section { font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--side-muted); padding: 14px 10px 6px; white-space: nowrap; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--side-text); cursor: pointer; white-space: nowrap; font-size: 13.5px; user-select: none; border: 0; background: transparent; width: 100%; text-align: left; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease); } .nav-item:hover { background: var(--side-hover); color: var(--side-strong); text-decoration: none; } .nav-item.active { background: var(--side-active); color: var(--side-active-text); box-shadow: var(--shadow-nav-active); } .nav-item .ico { width: 20px; height: 20px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; } .nav-item .ico svg { width: 18px; height: 18px; transition: transform var(--dur) var(--ease); } .nav-item:hover .ico svg { transform: scale(1.06); } .nav-item .lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; } .nav-item .cnt { font-size: 11px; background: var(--side-hover-strong); padding: 1px 7px; border-radius: 10px; } .nav-item.sub { padding-left: 24px; font-size: 13px; } .nav-item.sub2 { padding-left: 38px; font-size: 12.5px; } .nav-item .chev { width: 14px; height: 14px; transition: transform .15s; opacity: .7; } .nav-item.open .chev { transform: rotate(90deg); } .nav-group.collapsed .nav-children { display: none; } .side-foot { border-top: 1px solid var(--side-border); padding: 10px 12px; font-size: 11px; color: var(--side-muted); white-space: nowrap; } /* rail (menu replié) : au-delà de 760 px seulement — en dessous, la barre devient un tiroir (voir « adaptatif ») */ @media (min-width: 761px) { .app.rail { grid-template-columns: var(--rail-w) 1fr; } .app.rail .side .lbl, .app.rail .side .cnt, .app.rail .side .chev, .app.rail .side-section, .app.rail .side-brand .brand-txt, .app.rail .side-foot, .app.rail .nav-item.sub, .app.rail .nav-item.sub2, .app.rail .side .audit-card { display: none; } .app.rail .nav-item { justify-content: center; padding: 10px; } .app.rail .side-brand { flex-direction: column; justify-content: center; gap: 4px; padding: 8px 0; height: auto; } .app.rail .side-brand .burger { margin-left: 0; } .app.rail .side-brand img { height: 24px; } } .side .audit-card { margin: 6px 4px 8px; padding: 10px 12px; background: var(--side-2); border-radius: 10px; border: 1px solid var(--side-3); } .side .audit-card .ref { font-size: 11px; color: var(--side-muted); font-family: var(--mono); } .side .audit-card .ttl { color: var(--side-strong); font-weight: 600; font-size: 13px; margin: 2px 0 6px; line-height: 1.25; } .side .audit-card .bar { height: 5px; background: var(--side-3); border-radius: 4px; overflow: hidden; } .side .audit-card .bar > i { display: block; height: 100%; background: var(--accent); } .side .audit-card .pct { font-size: 11px; color: var(--side-muted); margin-top: 4px; display: flex; justify-content: space-between; } .top { grid-column: 2; display: flex; align-items: center; gap: 14px; padding: 0 22px; background: var(--surface); border-bottom: 1px solid var(--border); } .top .crumbs { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text-muted); min-width: 0; } .top .crumbs a { color: var(--text-muted); } .top .crumbs .cur { color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .top .crumbs .sep { opacity: .5; } .top .spacer { flex: 1; } .top .save-state { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; } .top .save-state .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); } .top .save-state.saving .dot { background: var(--caution); animation: pulse 1s infinite; } .top .save-state.error .dot { background: var(--error); } @keyframes pulse { 50% { opacity: .3; } } .top .user { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 4px 8px 4px 4px; border-radius: 20px; border: 1px solid transparent; transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .top .user:hover { background: var(--surface-2); border-color: var(--border); } .avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--primary-hover)); color: var(--on-primary); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12.5px; flex-shrink: 0; } .avatar.sm { width: 24px; height: 24px; font-size: 10px; } /* 2.26.0 : avatar illustré. Le buste est recadré sur le visage dans le cercle ; fond neutre pour qu'un vêtement sombre ou clair se lise sur les deux thèmes. */ .avatar.a-img { background: var(--surface-3); padding: 0; overflow: hidden; } .avatar.a-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.32); transform-origin: 50% 28%; display: block; } .avatar.lg { width: 48px; height: 48px; font-size: 16px; } .avatar.xl { width: 96px; height: 96px; font-size: 28px; } .av-profil { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .av-filtres { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 12px; } .av-filtre { display: grid; gap: 2px; font-size: .82rem; color: var(--text-muted); } .av-q { min-width: 180px; font: inherit; padding: 7px 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text); } .av-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; max-height: 60vh; overflow: auto; padding: 2px; } .av-tuile { display: grid; justify-items: center; gap: 6px; padding: 10px 6px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: inherit; font: inherit; cursor: pointer; transition: border-color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast); } .av-tuile:hover { border-color: var(--border-hover); transform: translateY(-1px); } .av-tuile:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .av-tuile.on { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); background: var(--primary-softer); } .av-tuile img { width: 88px; height: 88px; border-radius: 50%; background: var(--surface-3); } .av-lib { font-size: .8rem; font-weight: 600; text-align: center; line-height: 1.25; color: var(--text); } .av-sous { font-size: .72rem; text-align: center; line-height: 1.2; color: var(--text-2); } @media (prefers-reduced-motion: reduce) { .av-tuile { transition: none; } .av-tuile:hover { transform: none; } } .top .user .nm { font-weight: 600; font-size: 13px; line-height: 1.1; } .top .user .rl { font-size: 11px; color: var(--text-muted); } .main { grid-column: 2; overflow: auto; padding: 22px 26px 60px; position: relative; } .main.flush { padding: 0; } .page-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; } .page-head .grow { flex: 1; min-width: 200px; } .page-head .sub { color: var(--text-muted); margin-top: 4px; font-size: 13px; } .page-head .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } /* ---------- components ---------- */ .btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; font-weight: 550; font-size: 13px; line-height: 1.3; white-space: nowrap; transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur-fast) var(--ease); } .btn:hover { border-color: var(--border-hover); background: var(--surface-2); text-decoration: none; } .btn:active:not(:disabled) { transform: translateY(1px); } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-primary); } .btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); box-shadow: var(--shadow-primary-lg); } .btn.secondary { background: var(--secondary); border-color: var(--secondary); color: var(--on-secondary); } .btn.secondary:hover { background: color-mix(in srgb, var(--secondary) 86%, var(--on-secondary)); border-color: color-mix(in srgb, var(--secondary) 86%, var(--on-secondary)); } .btn.danger { color: var(--error-text); border-color: var(--error-border); background: var(--error-soft); } .btn.danger:hover { background: color-mix(in srgb, var(--error) 14%, var(--surface)); border-color: var(--error); } .btn.ghost { border-color: transparent; background: transparent; } .btn.ghost:hover { background: var(--surface-3); } .btn.sm { padding: 4px 9px; font-size: 12px; border-radius: 6px; } .btn.xs { padding: 2px 7px; font-size: 11.5px; border-radius: 5px; } .btn.icon { padding: 6px; } .btn svg { width: 15px; height: 15px; } .btn-group { display: inline-flex; } .btn-group .btn { border-radius: 0; margin-left: -1px; } .btn-group .btn:first-child { border-radius: 8px 0 0 8px; margin-left: 0; } .btn-group .btn:last-child { border-radius: 0 8px 8px 0; } .btn-group .btn.on { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); z-index: 1; } /* focus clavier uniforme (la souris ne déclenche pas :focus-visible sur les boutons) */ :where(.btn, .icon-btn, .report-btn, .nav-item, .tab, button.chip, .pick, .t-node, .rs, .tuto-pill, .burger, .mobile-burger, .toast-close, a, [tabindex]):focus-visible { outline: none; box-shadow: var(--focus-ring); } .btn.primary:focus-visible { box-shadow: var(--focus-ring), var(--shadow-primary); } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .card .card-h { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border-soft); } .card .card-h h3 { flex: 1; } .card .card-b { padding: 16px; } .card .card-b.tight { padding: 0; } /* cartes cliquables : légère élévation (transform seul, sans effet sur la mise en page) */ .card.clickable, .kpi.clickable { cursor: pointer; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } .card.clickable:hover, .kpi.clickable:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-hover); } .card.clickable:active, .kpi.clickable:active { transform: translateY(0); box-shadow: var(--shadow); } .grid { display: grid; gap: 16px; } .grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid.c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } @media (max-width: 1200px) { .grid.c4, .grid.c5 { grid-template-columns: repeat(2, 1fr); } .grid.c3 { grid-template-columns: repeat(2, 1fr); } } .kpi { padding: 14px 16px; } .kpi .k-lbl { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; } .kpi .k-val { font-size: 26px; font-weight: 700; margin-top: 4px; letter-spacing: -.02em; } .kpi .k-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .kpi.accent { border-left: 4px solid var(--accent); } .kpi.danger { border-left: 4px solid var(--error); } .kpi.warn { border-left: 4px solid var(--warning); } .kpi.ok { border-left: 4px solid var(--success); } .badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--on-status); background: var(--grey); white-space: nowrap; line-height: 1.4; } .badge.outline { background: transparent; border: 1px solid currentColor; } .badge.lvl-CONFORME { background: var(--success); } .badge.lvl-NC_MAJ { background: var(--error); } .badge.lvl-NC_MIN { background: var(--warning); } .badge.lvl-OBS { background: var(--caution); color: var(--on-caution); } .badge.lvl-PA { background: var(--info); } .badge.lvl-PF { background: var(--teal); } .badge.lvl-NA { background: var(--grey); } .badge.lvl-none { background: var(--neutral-soft); color: var(--text-2); } .badge.st-draft { background: var(--neutral-soft); color: var(--neutral-text); } .badge.st-planned, .badge.st-submitted { background: var(--info); } .badge.st-in_progress { background: var(--primary); color: var(--on-primary); } .badge.st-consolidation { background: var(--violet); } .badge.st-reporting { background: var(--teal); } .badge.st-closed, .badge.st-validated { background: var(--success); } .badge.st-rejected { background: var(--error); } .badge.st-todo { background: var(--neutral-soft); color: var(--neutral-text); } .badge.st-done { background: var(--success); } .chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; background: var(--primary-soft); color: var(--primary); font-size: 11.5px; font-weight: 600; } .chip.grey { background: var(--border-soft); color: var(--text-2); } .chip.fam { background: var(--violet-soft); color: var(--violet-text); } .tbl { width: 100%; border-collapse: collapse; font-size: 13px; } .tbl th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--surface-2); font-weight: 600; position: sticky; top: 0; z-index: 1; } .tbl td { padding: 9px 12px; border-bottom: 1px solid var(--border-soft); vertical-align: top; transition: background-color var(--dur-fast) var(--ease); } .tbl tr:hover td { background: var(--primary-softer); } .tbl tr.clickable { cursor: pointer; } .tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; } .tbl .muted { color: var(--text-muted); } .tbl input, .tbl select, .tbl textarea { width: 100%; } .tbl.compact td, .tbl.compact th { padding: 5px 8px; } .empty { padding: 36px 20px; text-align: center; color: var(--text-muted); } .empty .big { font-size: 34px; margin-bottom: 8px; opacity: .5; } .field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; } .field label { font-size: 12px; font-weight: 600; color: var(--text-2); } .field .hint { font-size: 11.5px; color: var(--text-muted); } /* Source française affichée sous un champ en mode traduction (1.100.0). Le texte d'origine peut être long — une consigne d'audit fait plusieurs lignes — et il ne doit pas repousser le champ suivant hors de vue : d'où la hauteur bornée et le défilement, plutôt qu'une troncature qui cacherait ce qu'on doit traduire. */ .field .hint { max-height: 5.5em; overflow-y: auto; white-space: pre-wrap; } .input, input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=time], select, textarea { padding: 7px 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); outline: none; width: 100%; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: var(--field-ring); } textarea { min-height: 72px; resize: vertical; line-height: 1.45; } input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--primary); } .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .row.between { justify-content: space-between; } .row.top { align-items: flex-start; } .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 16px; } .form-grid .full { grid-column: 1 / -1; } .check { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; } .progress { height: 8px; background: var(--border-soft); border-radius: 6px; overflow: hidden; } .progress > i { display: block; height: 100%; background: var(--accent); border-radius: 6px; transition: width .3s; } .progress.ok > i { background: var(--success); } .progress.warn > i { background: var(--warning); } .stack { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: var(--border-soft); } .stack > i { display: block; height: 100%; } .donut { width: 150px; height: 150px; border-radius: 50%; position: relative; display: inline-block; } .donut::after { content: attr(data-label); position: absolute; inset: 28px; border-radius: 50%; background: var(--surface); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; text-align: center; white-space: pre-line; line-height: 1.1; } .legend { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; } .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; } .tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 18px; overflow-x: auto; } .tabs .tab { padding: 9px 14px; cursor: pointer; color: var(--text-muted); font-weight: 550; border-bottom: 2px solid transparent; white-space: nowrap; font-size: 13.5px; background: none; border-top: 0; border-left: 0; border-right: 0; transition: color var(--dur-fast) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur-fast) var(--ease); border-radius: 6px 6px 0 0; } .tabs .tab:hover { color: var(--text); border-bottom-color: var(--border-hover); background: var(--surface-2); } .tabs .tab.active { color: var(--primary); border-bottom-color: var(--primary); background: transparent; } .tree { font-size: 13px; } .tree .t-node { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 6px; cursor: pointer; user-select: none; transition: background-color var(--dur-fast) var(--ease); } .tree .t-node:hover { background: var(--border-soft); } .tree .t-node.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; } .tree .t-node .t-id { font-family: var(--mono); font-size: 11.5px; color: var(--text-muted); flex-shrink: 0; } .tree .t-node .t-ttl { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tree .t-node .t-cnt { font-size: 11px; color: var(--text-muted); } .tree .t-node .chev { width: 12px; height: 12px; flex-shrink: 0; transition: transform .15s; opacity: .6; } .tree .t-node.open .chev { transform: rotate(90deg); } .tree .t-children { margin-left: 14px; border-left: 1px dashed var(--border); padding-left: 4px; } .tree .t-group.collapsed > .t-children { display: none; } .tree .mini-bar { width: 46px; height: 5px; background: var(--border-soft); border-radius: 3px; overflow: hidden; flex-shrink: 0; } .tree .mini-bar i { display: block; height: 100%; background: var(--success); } .split { display: grid; grid-template-columns: 320px 1fr; gap: 18px; align-items: start; } .split .pane-left { position: sticky; top: 0; max-height: calc(100vh - var(--top-h) - 44px); overflow: auto; } @media (max-width: 1000px) { .split { grid-template-columns: 1fr; } .split .pane-left { position: static; max-height: none; } } .req-list .req { display: grid; grid-template-columns: 90px 1fr auto; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border-soft); cursor: pointer; align-items: center; transition: background-color var(--dur-fast) var(--ease); } .req-list .req:hover { background: var(--primary-softer); } .req-list .req.active { background: var(--primary-soft); } .req-list .req.excluded { opacity: .5; } .req-list .req .r-id { font-family: var(--mono); font-size: 12px; color: var(--primary); font-weight: 600; } .req-list .req .r-ttl { font-weight: 550; } .req-list .req .r-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 3px; font-size: 11.5px; color: var(--text-muted); } .req-list .req .r-right { display: flex; gap: 6px; align-items: center; } .req-list .chap-row { padding: 8px 14px; background: var(--surface-2); font-weight: 650; font-size: 12.5px; color: var(--text-2); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 1; } .dot-w { display: inline-block; width: 8px; height: 8px; border-radius: 50%; } /* drawer */ .drawer-bg { position: fixed; inset: 0; background: var(--overlay-soft); z-index: 40; opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease); } .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(var(--drawer-w), 96vw); background: var(--surface); box-shadow: var(--shadow-lg); z-index: 41; transform: translateX(100%); transition: transform var(--dur-slow) var(--ease-out); display: flex; flex-direction: column; } .drawer.wide { width: min(900px, 96vw); } .drawer.open { transform: none; } .drawer-bg.open { opacity: 1; pointer-events: auto; } .drawer .d-h { display: flex; align-items: flex-start; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); } .drawer .d-h h3 { flex: 1; line-height: 1.3; } .drawer .d-b { flex: 1; overflow: auto; padding: 16px 18px; } .drawer .d-f { padding: 12px 18px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; background: var(--surface-2); } .d-sec { margin-bottom: 16px; } .d-sec h4 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-bottom: 6px; } .d-sec .box { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 8px; padding: 10px 12px; font-size: 13px; line-height: 1.5; } .d-sec ul { margin: 0; padding-left: 18px; } .obs-pick { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .obs-pick .op { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border-soft); cursor: pointer; font-size: 12.5px; align-items: center; } .obs-pick .op:last-child { border-bottom: 0; } .obs-pick .op:hover { background: var(--primary-softer); } .obs-pick .op.on { background: var(--primary-soft); } .obs-pick .op-h { padding: 6px 10px; background: var(--surface-2); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); } .finding-card { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; background: var(--surface); } .finding-card .fc-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12.5px; } .finding-card .fc-h .who { font-weight: 600; } .finding-card .fc-b { font-size: 13px; line-height: 1.45; white-space: pre-wrap; } .finding-card.mine { border-color: var(--primary); } /* modal */ .modal-bg { position: fixed; inset: 0; background: var(--overlay); z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; animation: fade var(--dur-fast) var(--ease); } @keyframes fade { from { opacity: 0; } } /* `min-width: 0` est obligatoire : sans lui, cet enfant flex garde `min-width: auto`, ne peut pas rétrécir sous la largeur de son contenu et — comme il est centré — déborde **des deux côtés**, rendant sa partie gauche inatteignable au défilement. C'est ce qui cassait la comparaison d'anonymisation jusqu'à la 1.69.0. */ .modal { background: var(--surface); color: var(--text); border-radius: 14px; width: min(640px, 100%); min-width: 0; max-height: 92vh; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); animation: modal-in var(--dur) var(--ease-out); } .modal.wide { width: min(1000px, 100%); } .modal.xl { width: min(1280px, 100%); } /* Modal « plein écran » (comparaison d'anonymisation) : le corps ne défile pas lui-même, il délègue à son contenu. Sans cela, trois conteneurs de défilement se superposent et aucun panneau interne ne défile jamais. */ .modal.full { width: 100%; height: 92vh; } .modal.full .m-b { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } .modal.full .m-b > * { min-height: 0; } @keyframes up { from { transform: translateY(12px); opacity: 0; } } @keyframes modal-in { from { transform: translateY(10px) scale(.985); opacity: 0; } } .modal .m-h { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; } .modal .m-h h3 { flex: 1; } .modal .m-b { padding: 18px 20px; overflow: auto; } .modal .m-f { padding: 12px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; background: var(--surface-2); border-radius: 0 0 14px 14px; } .steps { display: flex; gap: 6px; margin-bottom: 16px; } .steps .s { flex: 1; padding: 8px 10px; border-radius: 8px; background: var(--border-soft); font-size: 12px; color: var(--text-muted); font-weight: 600; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); } .steps .s.on { background: var(--primary); color: var(--on-primary); } .steps .s.done { background: var(--primary-soft); color: var(--primary); } .pick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .pick { border: 1px solid var(--border); border-radius: 10px; padding: 12px; cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease); } .pick:hover { border-color: var(--primary); background: var(--primary-softer); } .pick.on { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 2px var(--primary-ring); } .pick .p-t { font-weight: 600; font-size: 13px; } .pick .p-d { font-size: 12px; color: var(--text-muted); margin-top: 3px; line-height: 1.4; } /* ---------- toasts ---------- Balisage produit par toast() (core.js) :
message
dans #toasts. Sans changement de JS, le CSS dessine l'icône (::before, pastille ✓ ✕ ! i) et la barre de progression (::after). Options côté JS : - style="--toast-ms: 6000ms" sur .toast : cale la barre sur la durée d'affichage (3500 ms par défaut) ; - classe .leaving ajoutée ~180 ms avant remove() : animation de sortie ; - enfant