/* ====================================================================== Neurcite — THÈME « Signal » Issu du fichier de design Claude (Neurcite.dc.html, direction « b »). ---------------------------------------------------------------------- Surfaces nettes, violet électrique, grotesque géométrique, chiffres en chasse fixe. CE FICHIER EST LE SEUL À MODIFIER POUR CHANGER L'APPARENCE. Il ne contient que des variables : aucune mise en page, aucune règle de composant. style.css n'utilise plus une seule couleur en dur. Rôle de chaque jeton : SURFACES --bg fond de page · --bg2 bandes et creux --surface cartes et champs · --surface2 sous-blocs --line filets · --line2 filets marqués · --track jauges TEXTE --ink principal · --ink2 secondaire · --mut discret COULEURS --acc signature (marque, action, étape en cours, « vous ») --acc-ink texte POSÉ SUR --acc · --acc-t version texte --acc-s fond dilué · --link liens · --spark courbes --ok/--warn/--bad + suffixe -s pour les fonds FORME --r boutons/champs · --r-lg cartes · --r-pill pastilles --shadow ombre (modale uniquement) TYPO --sans interface · --display titres · --mono CHIFFRES --track interlettrage des titres · --disp-w graisse titres FOND --grid trame ; `transparent` = pas de trame ⚠️ Tout jeton défini en clair doit l'être aussi en sombre. ====================================================================== */ /* Polices du thème. `display=swap` : le texte s'affiche immédiatement dans la police système, puis bascule — jamais de page blanche. */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); :root { /* Surfaces */ --bg: #f0f1ee; --bg2: #e6e8e3; --surface: #ffffff; --surface2: #f6f7f4; --line: #e2e4de; --line2: #c8cbc3; --track: #e2e4de; /* Texte */ --ink: #0c0f0d; --ink2: #3b413c; /* Gris secondaire. Il valait #6e756f, soit 4,17:1 sur le fond principal — sous le minimum de 4,5:1 exigé pour du texte courant, alors qu'il sert précisément aux mentions de 12-13 px, les plus difficiles à lire. #606761 tient 4,54:1 sur --track, la surface claire la plus sombre, donc partout ailleurs aussi. Mesuré, pas estimé. */ --mut: #606761; /* Signature */ --acc: #4b37f5; /* violet électrique */ --acc-ink: #ffffff; /* texte posé sur --acc */ --acc-t: #4b37f5; /* --acc en version texte */ --acc-s: #edeaff; /* --acc dilué : fonds de badges */ --link: #4b37f5; --spark: #5aa82b; /* courbes d'évolution */ /* Sémantique */ --ok: #177a46; --ok-s: #e5f3ea; --warn: #8a5a00; --warn-s: #f7efdc; --bad: #c01b2e; --bad-s: #fbe9eb; /* Forme */ --r: 10px; --r-lg: 18px; --r-pill: 999px; --shadow: 0 24px 50px -30px rgba(12, 15, 13, .4); /* Typographie */ --sans: "Space Grotesk", -apple-system, "Segoe UI", Roboto, sans-serif; --display: "Space Grotesk", -apple-system, sans-serif; --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Le fichier de design nomme `--track` l'interlettrage des titres, mais ce nom désigne déjà le fond des jauges dans l'application. On garde donc --track = couleur, et --tracking = interlettrage. */ --tracking: -.4px; --disp-w: 600; /* graisse des titres */ --grid: transparent; /* pas de trame : surfaces nettes */ } :root { color-scheme: light; } /* ------------------------------ Thème sombre --------------------------- * Il s'applique quand `data-theme="dark"` est posé sur . Ce choix est écrit par un petit script placé dans le AVANT le premier rendu : • si l'utilisateur a choisi Clair ou Sombre, son choix est respecté ; • sinon (mode Auto, par défaut), on suit le réglage du système. Un seul bloc à maintenir : les valeurs sombres ne sont écrites qu'ici. ---------------------------------------------------------------------- */ :root[data-theme="dark"] { color-scheme: dark; --bg: #08090c; --bg2: #0d0f13; --surface: #12141a; --surface2: #171a21; --line: #232733; --line2: #333949; --track: #232733; --ink: #f2f4f7; --ink2: #c6cbd4; /* Même correction qu'en clair : #7c8492 tombait à 3,95:1 sur --track, la surface la plus claire du thème sombre. #868e9c tient 4,51:1 partout. */ --mut: #868e9c; --acc: #7c6bff; --acc-ink: #0a0812; --acc-t: #9e92ff; --acc-s: #1b1834; --link: #9e92ff; --spark: #c8f25c; --ok: #3fd18c; --ok-s: #0f2921; --warn: #e9b445; --warn-s: #2a2111; --bad: #ff6b6b; --bad-s: #2c1416; --shadow: 0 24px 50px -26px rgba(0, 0, 0, .85); --grid: transparent; } /* Repli sans JavaScript : le réglage système s'applique quand aucun choix n'a encore été écrit sur . */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --bg: #08090c; --bg2: #0d0f13; --surface: #12141a; --surface2: #171a21; --line: #232733; --line2: #333949; --track: #232733; --ink: #f2f4f7; --ink2: #c6cbd4; --mut: #868e9c; --acc: #7c6bff; --acc-ink: #0a0812; --acc-t: #9e92ff; --acc-s: #1b1834; --link: #9e92ff; --spark: #c8f25c; --ok: #3fd18c; --ok-s: #0f2921; --warn: #e9b445; --warn-s: #2a2111; --bad: #ff6b6b; --bad-s: #2c1416; --shadow: 0 24px 50px -26px rgba(0, 0, 0, .85); } } /* ------------------------------ Animations ---------------------------- * Trois seulement, reprises du fichier de design. Elles servent à MONTRER qu'une mesure est en cours — jamais à décorer. ---------------------------------------------------------------------- */ /* nc-pulse : un élément vivant (point « en ligne », badge « scan en cours ») */ @keyframes nc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } /* nc-spin : attente */ @keyframes nc-spin { to { transform: rotate(360deg); } } /* nc-slide : barre de progression rayée qui défile */ @keyframes nc-slide { to { background-position: 32px 0; } } /* Respect du réglage système « réduire les animations ». */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }