/* ══════════════════════════════════════════════════════════════════════════ Spectra Agenda — Dark (v1.7) Le thème sombre est la NORME, pas une option : il n'y a pas de bascule claire, et DESIGN.md fait référence. Pourquoi ce fichier plutôt qu'une reprise des templates classe par classe : Tailwind est ici le Play CDN vendorisé (R8 — aucun appel réseau à l'exécution), donc les classes utilitaires sont générées telles quelles et ne peuvent pas être reconfigurées par un `tailwind.config`. On surcharge donc le rendu des classes réellement employées, inventoriées par un scan exhaustif des templates. L'avantage collatéral est réel : un template qui écrit encore `bg-white` reste juste, et une page ajoutée demain hérite du thème sans qu'on y pense. Chargé APRÈS app.css et après Tailwind — l'ordre décide, d'où les `!important` ciblés sur les utilitaires (le Play CDN injecte ses règles dans le après nous). ══════════════════════════════════════════════════════════════════════════ */ /* ─────────────────── Fonts vendorisées (R8) ─────────────────── Un seul fichier par famille : Google Fonts sert des fonts VARIABLES, et les sept woff2 téléchargés (Inter 400/500/600/700, Space Grotesk 500/600/700) se sont révélés identiques deux à deux — même binaire, même somme de contrôle. Les garder tous aurait pesé 145 Ko de doublons pour rien. La plage `font-weight` déclarée est celle de l'axe `wght` réel du fichier. */ @font-face { font-family: 'Inter'; src: url('/static/vendor/fonts/inter-var.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Space Grotesk'; src: url('/static/vendor/fonts/spacegrotesk-var.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; } /* ─────────────────── Tokens ─────────────────── */ :root { --bg: #0B0B10; --surface: #14141B; --surface-2: #1D1D27; --surface-3: #262633; --ink: #F2F2F5; --ink-muted: #A8A8B8; /* Écart assumé au DESIGN.md, qui donne #6F6F82. Cette valeur ne produit que 3.73:1 sur `surface` et 3.40:1 sur `surface-2`, sous les 4.5 exigés pour du texte. Or `text-slate-400` ne sert PAS à du décor dans cette app : il porte les descriptions des réglages d'admin, les types de source, les libellés de métriques — du texte qu'on lit. Cette valeur tient 4.5:1 sur les QUATRE fonds, `surface-3` compris — c'est le fond de survol, et un texte qui pâlit au survol est le comble. Elle reste nettement en retrait de ink-muted (5.86 contre 7.82 sur `surface`), donc la hiérarchie du design system est préservée. */ --ink-faint: #9090A4; --border: #2A2A36; --primary: #5E54E8; --accent: #5E54E8; --accent-strong: #7C73FF; --accent-soft: rgba(94, 84, 232, 0.16); /* Deux dérivés du violet, ajoutés après vérification des contrastes — le DESIGN.md ne les prévoyait pas, et ses deux valeurs échouaient AA dans ces emplois précis : --accent-hover : accent-strong (#7C73FF) en fond de bouton ne donne que 3.65:1 avec du texte blanc, sous les 4.5 exigés pour du 14 px. Ce violet reste plus clair que `primary` — le survol se voit — et tient 4.67:1. --accent-on-soft : accent-strong POSÉ SUR accent-soft plafonne à 4.38:1. Sur fond sombre plein il vaut 5.02:1 et reste donc la couleur de texte accent par défaut ; seuls les badges et encarts violets basculent ici, à 5.17:1. */ --accent-hover: #6A60EC; --accent-on-soft: #8B83FF; --success: #34D399; --success-soft: rgba(52, 211, 153, 0.14); --danger: #F87171; --danger-soft: rgba(248, 113, 113, 0.14); --warning: #FBBF24; --warning-soft: rgba(251, 191, 36, 0.14); --info: #7DD3FC; --info-soft: rgba(125, 211, 252, 0.14); --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --police-titre: 'Space Grotesk', 'Inter', system-ui, sans-serif; --police-corps: 'Inter', system-ui, -apple-system, sans-serif; /* Une seule ombre, très douce, réservée au flottant (modales, popups). */ --ombre-flottant: 0 12px 32px rgba(0, 0, 0, 0.4); color-scheme: dark; } /* ─────────────────── Base ─────────────────── */ html { background: var(--bg); } body { background: var(--bg); color: var(--ink); font-family: var(--police-corps); -webkit-font-smoothing: antialiased; } /* Space Grotesk pour tous les titres — c'est la voix « technique » du produit. */ h1, h2, h3, h4, .police-titre { font-family: var(--police-titre); letter-spacing: -0.01em; } /* Les données chiffrées ne doivent pas « danser » d'une ligne à l'autre. */ .tabular-nums, input[type="number"], time { font-variant-numeric: tabular-nums; } ::selection { background: var(--accent-soft); color: var(--ink); } /* Barres de défilement discrètes — une barre claire sur fond noir se voit plus que le contenu qu'elle défile. */ * { scrollbar-color: var(--surface-3) transparent; scrollbar-width: thin; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 999px; } /* Anneau de focus visible sur fond sombre — accessibilité clavier. */ :where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; } /* ══════════════════════════════════════════════════════════════════════════ Mapping des utilitaires Tailwind → tokens Inventaire fait par scan des templates : chaque classe listée ici est réellement employée quelque part. L'ordre suit celui du brief. ══════════════════════════════════════════════════════════════════════════ */ /* ── Surfaces ── */ .bg-white { background-color: var(--surface) !important; } .bg-slate-50, .bg-slate-100, .bg-slate-200 { background-color: var(--surface-2) !important; } /* Le noir profond des blocs date, chips actives et panneau « 14 jours » devient le violet de signature : c'est la seule couleur d'action du produit, et ces trois éléments sont précisément ceux qui portent l'attention. */ .bg-slate-900 { background-color: var(--primary) !important; } .bg-slate-900\/40 { background-color: rgba(11, 11, 16, 0.72) !important; } /* ── Textes ── */ .text-slate-900, .text-slate-800, .text-slate-700 { color: var(--ink) !important; } .text-slate-600, .text-slate-500 { color: var(--ink-muted) !important; } .text-slate-400, .text-slate-300 { color: var(--ink-faint) !important; } /* ── Bordures ── */ .border-slate-100, .border-slate-200, .border-slate-300 { border-color: var(--border) !important; } .border-slate-400 { border-color: var(--surface-3) !important; } .border-slate-900 { border-color: var(--primary) !important; } .divide-slate-100 > * + *, .divide-slate-200 > * + * { border-color: var(--border) !important; } /* ── Action principale : le violet, et lui seul ── */ .bg-blue-500, .bg-blue-600 { background-color: var(--primary) !important; color: #FFFFFF; } .bg-blue-700, .hover\:bg-blue-700:hover { background-color: var(--accent-hover) !important; } .text-blue-600, .text-blue-700 { color: var(--accent-strong) !important; } .text-blue-900\/80 { color: var(--ink-muted) !important; } .bg-blue-50, .bg-blue-100 { background-color: var(--accent-soft) !important; } .border-blue-100, .border-blue-200, .border-blue-600 { border-color: var(--accent-soft) !important; } .hover\:border-blue-200:hover { border-color: var(--accent-strong) !important; } /* `text-blue-800/900` et `text-violet-800` ne servent QUE dans des badges et encarts posés sur accent-soft — d'où la teinte plus claire, seule à tenir 4.5:1 sur ce fond (voir --accent-on-soft). */ .text-blue-800, .text-blue-900, .text-violet-800 { color: var(--accent-on-soft) !important; } /* ── Statuts, en « soft » uniquement : ils signalent, ils n'hurlent pas ── */ .bg-emerald-50, .bg-emerald-100 { background-color: var(--success-soft) !important; } .text-emerald-700, .text-emerald-800 { color: var(--success) !important; } .border-emerald-200 { border-color: var(--success-soft) !important; } .bg-emerald-600 { background-color: var(--success) !important; color: #08130E !important; } .bg-emerald-700, .hover\:bg-emerald-700:hover { background-color: #2BBE88 !important; color: #08130E !important; } .bg-red-50, .bg-red-100 { background-color: var(--danger-soft) !important; } .text-red-600, .text-red-700, .text-red-800 { color: var(--danger) !important; } .border-red-200 { border-color: var(--danger-soft) !important; } .bg-red-600 { background-color: var(--danger) !important; color: #1A0708 !important; } .bg-red-700, .hover\:bg-red-700:hover { background-color: #EF5F5F !important; color: #1A0708 !important; } .bg-amber-50, .bg-amber-100 { background-color: var(--warning-soft) !important; } .text-amber-700, .text-amber-800, .text-amber-900 { color: var(--warning) !important; } .border-amber-200 { border-color: var(--warning-soft) !important; } .bg-orange-50 { background-color: var(--warning-soft) !important; } .text-orange-700 { color: var(--warning) !important; } .border-orange-200 { border-color: var(--warning-soft) !important; } .bg-sky-100 { background-color: var(--info-soft) !important; } .text-sky-800 { color: var(--info) !important; } .bg-violet-100 { background-color: var(--accent-soft) !important; } /* ── Hovers de surface ── */ .hover\:bg-slate-50:hover, .hover\:bg-slate-100:hover { background-color: var(--surface-3) !important; } .hover\:border-slate-400:hover, .hover\:border-slate-900:hover { border-color: var(--accent-strong) !important; } /* Le panneau violet garde ses voiles blancs : posés sur du violet plein, ils restent le bon moyen de séparer ses lignes. */ .hover\:bg-white\/5:hover { background-color: rgba(255, 255, 255, 0.08) !important; } /* ── Champs de saisie ── */ input, select, textarea { background-color: var(--surface-2); color: var(--ink); border-color: var(--border); border-radius: var(--r-sm); } input::placeholder, textarea::placeholder { color: var(--ink-faint); } input:focus, select:focus, textarea:focus { border-color: var(--accent-strong); } /* Les options natives d'un