/* ============================================================ SPINOZA — tokens.css — v1.0 · 25/07/2026 Source de vérité unique. Aucune couleur, aucune taille de police en dur ailleurs dans le projet. Une valeur absente ici se demande, elle ne s'improvise pas. Référence : DA-SPINOZA-v1.md + addendum §8 FICHIER DE TRAVAIL. docs/tokens.css est l'archive figée du 25/07/2026 et ne se modifie plus. Ce fichier-ci, lui, reste aligné sur les amendements en vigueur : une règle périmée dans un commentaire est pire qu'un commentaire absent. Écarts avec l'archive, à jour : · 27/07 — bloc @font-face, polices auto-hébergées (étape 1) · 27/07 — règle VT323 amendée : valeur vs numérotation structurelle (voir §LES DEUX VOIX plus bas) · 27/07 — --barre relevé dans les deux peaux pour atteindre 4,5:1 EN RENDU RÉEL. Nuit #6B7770 -> #828584, jour #8B958F -> #666E69. Motif : mesuré à 4,04:1 en nuit et 2,79:1 en jour, sous le seuil AA — on ne peut pas disqualifier une promesse que le lecteur ne peut pas lire. Valeurs calées sur l'analyse des pixels rasterisés, pas sur le ratio théorique : le lissage coûte ~0,15 point au VT323 (bitmap, fûts d'un pixel) et rien au gras de Space Grotesk. La hiérarchie face à --texte-faible passe désormais par la saturation (3 contre 14), la clarté n'en laissant plus la place. ============================================================ */ /* ---------- POLICES AUTO-HÉBERGÉES ---------- Aucune requête vers un tiers : pas une IP visiteur ne part chez Google. Fichiers sous licence OFL, licences jointes dans assets/fonts/. Source : github.com/google/fonts */ @font-face{ font-family:'VT323'; src:url('../fonts/VT323-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:'Space Grotesk'; src:url('../fonts/SpaceGrotesk-Variable.ttf') format('truetype-variations'); font-weight:300 700; /* police variable, axe wght */ font-style:normal; font-display:swap; } /* ---------- PEAU NUIT (défaut : public ET espace membre) ---------- */ :root{ --fond: #0F1210; /* PAS #0B0B0B : le noir pur bave au scroll OLED */ --fond-2: #151A17; /* surfaces surélevées, cartes */ --filet: #263029; /* séparateurs — des filets, jamais des boîtes */ --texte: #C6CDC8; /* corps de lecture — NEUTRE, jamais vert */ --texte-faible: #7C8A80; /* légendes, méta, états en attente */ --phos: #33FF66; /* RATIONNÉ : donnée vérifiée, action, curseur */ --phos-sourd: #1FA847; /* hover, filets actifs */ --ambre: #FFB627; /* estimé, avertissement, attente de validation */ --barre: #828584; /* promesse marketing non vérifiée — 27/07 : relevé depuis #6B7770. 4,73:1 sur --fond-2, qui est la surface contraignante (fiche éclaireur), 5,06:1 sur --fond. Valeur calée sur le rendu MESURÉ, pas sur le ratio théorique : VT323 est bitmap, ses fûts d'un pixel perdent ~0,15 point au lissage. Gris neutre assumé : la distinction d'avec --texte-faible se joue sur la saturation. */ --glow: 0 0 12px rgba(51,255,102,.40); --f-term: 'VT323', monospace; /* labels, boutons, curseur — JAMAIS un chiffre */ --f-data: 'Space Grotesk', system-ui, sans-serif; /* chiffres, prix, corps */ } /* ---------- PEAU JOUR (option de confort, jamais le défaut) ---------- */ [data-peau="jour"]{ --fond: #F2F4F1; --fond-2: #FFFFFF; --filet: #D3DAD4; --texte: #16211A; --texte-faible: #5A6960; --phos: #0A7B32; /* le #33FF66 sur fond clair = 1,4:1, illisible */ --phos-sourd: #065C24; --ambre: #8A5A00; --barre: #666E69; /* 27/07 : relevé depuis #8B958F, qui tombait à 2,79:1. Désormais 4,75:1 sur --fond, surface contraignante en jour, et 5,34:1 sur --fond-2. Marge prise pour le lissage, cf. peau nuit. */ --glow: 0 0 0 rgba(0,0,0,0); } /* ---------- BASE ---------- */ *{box-sizing:border-box} body{ margin:0; background:var(--fond); color:var(--texte); font-family:var(--f-data); font-size:16.5px; line-height:1.55; font-variant-numeric:tabular-nums; /* les colonnes de chiffres s'alignent */ } p, li{max-width:65ch} /* ---------- LES DEUX VOIX ---------- */ .term{font-family:var(--f-term); font-size:21px; letter-spacing:.04em; line-height:1.2} .lab {font-family:var(--f-term); font-size:20px; letter-spacing:.06em; text-transform:uppercase; color:var(--texte-faible)} /* RÈGLE — amendée le 27/07/2026. .term et .lab ne contiennent JAMAIS de chiffre-VALEUR : prix, marge, compteur, date, pourcentage, score. Tous passent en .num (Space Grotesk), parce que 0/O, 1/l/I, 5/S, 8/B se confondent en VT323 et qu'une valeur ambiguë est un bug de crédibilité. La numérotation STRUCTURELLE reste en VT323 : 01, 02, TÂCHE 03/07, les rangs de compteur. Elle indique une position, pas une quantité. Le test : si remplacer le nombre par une lettre détruit le sens, c'est une valeur. Si 01 pourrait être A sans rien casser, c'est structurel. */ .num{font-family:var(--f-data); font-weight:700; font-variant-numeric:tabular-nums} /* ---------- CURSEUR (signature) ---------- */ .curs{ display:inline-block; width:.5em; height:1em; background:var(--phos); vertical-align:-2px; margin-left:5px; box-shadow:var(--glow); animation:curs-clign 1.06s steps(1) infinite; } @keyframes curs-clign{50%{opacity:0}} /* ---------- LES TROIS VÉRITÉS ---------- Redondance obligatoire : couleur + glyphe + mot + style de filet. ~8 % des hommes ne distinguent pas vert et ambre. */ .verite{padding:11px 0 11px 14px; margin:10px 0} .verite .gly{font-family:var(--f-term); font-size:22px; line-height:1} .verite .mot{font-family:var(--f-term); font-size:18px; letter-spacing:.08em} .v-reel{border-left:3px solid var(--phos)} .v-reel .gly, .v-reel .mot, .v-reel .num{color:var(--phos)} .v-est{border-left:3px dashed var(--ambre)} .v-est .gly, .v-est .mot, .v-est .num{color:var(--ambre)} .v-mkt{border-left:3px dotted var(--barre)} .v-mkt .gly, .v-mkt .mot{color:var(--barre)} .v-mkt .num{color:var(--barre); text-decoration:line-through} /* ---------- BOUTONS ---------- LIGNE ROUGE : esthétique de terminal, ergonomie de bouton. Aucune commande à taper. Tout est un bouton libellé en français clair. Un bouton qui engage de l'argent affiche son coût dans son libellé. */ button, .btn{ font-family:var(--f-term); font-size:20px; letter-spacing:.05em; padding:10px 20px; min-height:44px; cursor:pointer; border:1px solid var(--filet); background:transparent; color:var(--texte); } .btn-go{background:var(--phos); color:var(--fond); border-color:var(--phos); box-shadow:var(--glow)} button:focus-visible, .btn:focus-visible{outline:2px solid var(--phos); outline-offset:3px} button:disabled{opacity:.4; cursor:default} /* ---------- LISTE DE TÂCHES (écran agent au travail) ---------- Les tâches faites RESTENT affichées. Un seul curseur à l'écran. */ .t{display:flex; align-items:baseline; gap:12px; padding:11px 0; border-bottom:1px solid var(--filet); font-family:var(--f-term); font-size:21px} .t .mk, .t .no, .t .nm, .t .st{color:var(--texte-faible)} .t.fait .nm{color:var(--texte)} .t.fait .mk, .t.fait .st{color:var(--phos-sourd)} .t.cours .mk, .t.cours .nm, .t.cours .st{color:var(--phos)} /* ---------- ARRÊT DE VALIDATION ---------- Expose CE QUI A ÉTÉ TROUVÉ avant de demander. 2 boutons max. */ .stop{border-left:3px solid var(--ambre); background:var(--fond-2); padding:16px 18px} .stop .lab{color:var(--ambre)} /* ---------- SCANLINES ---------- Vitrine et intro UNIQUEMENT. Jamais sur un écran de travail (moiré au scroll, déclencheur de migraine). Jamais animées. */ .scanlines::after{ content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(180deg, rgba(0,0,0,1) 0 1px, transparent 1px 3px); opacity:.03; } /* ---------- PLANCHER QUALITÉ ---------- */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{animation:none !important; transition:none !important} } @media (max-width:420px){ body{font-size:16px} }