/* ============================================================================ cockpit — tokens Palette et matières. Rien d'autre ne définit de couleur en dur : tout part d'ici, afin qu'un réglage de thème reste une modification d'un seul fichier. ========================================================================= */ :root { color-scheme: dark; /* ── Couleurs normées aviation (SAE ARP4102 / ARINC 661) ───────────────── Sémantique stricte. Le rouge et l'ambre ne servent QUE à l'alarme : c'est ce qui rend une alarme instantanément lisible sur un panneau chargé. Aucun élément décoratif ne les emprunte. */ --av-green: #21D07A; /* normal, engagé, dans la plage */ --av-cyan: #3FC8F0; /* consigne, valeur sélectionnée, info */ --av-magenta: #FF5AD8; /* cible active, commande automatique */ --av-amber: #FFB020; /* caution */ --av-red: #FF3B30; /* warning */ --av-white: #E9EFF5; /* valeur courante, échelles, libellés */ --av-grey: #5C6773; /* inactif, indisponible, périmé */ /* Déclinaisons sourdes, pour les fonds de plage et les traces éteintes. Calculées à la main plutôt que par opacité : sur un fond très sombre, une couleur à 20 % d'alpha vire au gris sale. */ /* De nuit, ce qui s'écrit et ce qui se repère sont la même couleur : une teinte claire sur fond noir se lit à toute taille. La distinction n'existe que le jour — voir le bloc `data-instr="jour"`. */ --av-green-ecrit: var(--av-green); --av-cyan-ecrit: var(--av-cyan); --av-magenta-ecrit: var(--av-magenta); --av-red-ecrit: var(--av-red); --av-amber-ecrit: var(--av-amber); --av-green-dim: #135B3A; --av-cyan-dim: #12556A; --av-magenta-dim: #6E2A5F; --av-amber-dim: #6E4C10; --av-red-dim: #6B1F1C; --av-white-dim: #4A525C; /* ── Matières du panneau ────────────────────────────────────────────────── */ --panel-bg: #0E1114; /* le cockpit lui-même */ /* LE BORD DE LA PAGE EN COMPOSITION — voir app.css. Sur du sombre, un bord accroche la lumière : le filet est plus CLAIR que la tôle. */ --page-bord: rgba(233, 239, 245, .14); --page-ombre: rgba(0, 0, 0, .35); --panel-bg-2: #0A0D10; /* creux, entre les instruments */ --bezel-hi: #3A424B; /* haut du bezel (lumière zénithale) */ --bezel-mid: #262C33; --bezel-lo: #161B20; /* bas du bezel */ --bezel-edge: #05070A; /* arête externe, contact avec la tôle */ --glass-bg: #05070A; /* fond de l'écran */ --glass-bg-2: #0B0F14; /* centre de l'écran, très légèrement levé */ --glass-sheen: rgba(255, 255, 255, .045); /* ── LE CREUX DU VERRE, EN TROIS COUCHES ───────────────────────────────── Elles vivaient en dur dans `panel.css`, en noir pur : trois `inset` qui posent le verre EN RETRAIT dans son cadre — un liseré de contact, une ombre haute, et le vignetage qui donne son épaisseur à la dalle. Sur une dalle noire, trois noirs se fondent dans le fond et ne laissent qu'un creux ténu. Sur de l'émail, les mêmes valeurs tracent un cerne franc et le contenu paraît au fond d'un puits — le défaut se voit dès qu'on bascule. Ils deviennent donc des jetons, et le jour les adoucit. */ /* ── LES ARÊTES DU CADRE, ET LE JOINT D'UNE SOUDURE ────────────────────── Elles vivaient en dur dans `panel.css`, en blancs et noirs purs. La nuit, une arête noire à 65 % tombe sur un bezel presque noir : elle ne trace rien, elle donne juste le pli. Le jour, la même valeur sur un bezel clair coupe le cadre d'un trait franc — et à l'intérieur d'un bloc soudé, elle redessine précisément la jonction que la soudure efface. Même règle que partout dans ce thème : c'est l'EFFET qui se conserve, pas la valeur. Le pli reste un pli ; il cesse d'être une entaille. */ --bezel-arete-hi: rgba(255, 255, 255, .16); /* haut : la lumière prend */ --bezel-arete-hi2: rgba(255, 255, 255, .05); /* gauche */ --bezel-arete-lo: rgba(0, 0, 0, .65); /* bas : le pli */ --bezel-arete-lo2: rgba(0, 0, 0, .45); /* droite */ /* Le joint de deux plaques ajustées : l'ombre de la rainure, et son arête prise par la lumière. */ --joint-creux: rgba(0, 0, 0, .55); --joint-arete: rgba(255, 255, 255, .035); /* ── LA POIGNÉE DE SOUDURE ─────────────────────────────────────────────── Une pastille posée sur le panneau, en édition seulement. Elle doit se détacher de la tôle ET du verre — c'est-à-dire du fond le plus contrasté des deux — sans peser : on en voit une par joint, et un panneau dense en compte trente. */ /* ── CE QUI N'EST PLUS ALIMENTÉ ────────────────────────────────────────── Un instrument gelé, et un instrument éteint. La nuit, les deux se disent par l'absence de lumière : l'écran s'assombrit, le verre devient noir. C'est le comportement d'une dalle qui ÉMET, et il ne se transpose pas — un cadran d'émail ne s'éteint pas, il n'a jamais brillé. Voir le bloc de jour pour ce qui le remplace. */ --gel-filtre: grayscale(.9) brightness(.66) contrast(.92); /* ── LES TROIS TEMPS DU RETOUR EN LIGNE ────────────────────────────────── L'instrument hors ligne montre un verre éteint. Quand la source redonne signe, il REVIENT — et ce retour s'anime : un rétroéclairage qui monte, avec le sursaut caractéristique d'un écran qu'on allume. C'est la seule chose qui distingue « la liaison vient de se rétablir » de « cet instrument a toujours été là ». Sur un mur qu'on ne regarde pas en permanence, c'est précisément l'information qu'on cherche. */ --wake-0: #000; --wake-flash: #181D23; --wake-2: #080D12; --eteint-fond: #000; --eteint-label: .22; /* ── LES ORGANES DE COMMANDE ───────────────────────────────────────────── Un bouton-poussoir, un sélecteur, un bouton rotatif : ce ne sont pas des écrans, ce sont des PIÈCES — du plastique et du métal tourné, posés dans une découpe de la platine. Leur modelé est donc celui d'un objet réel, et la lumière qui le donne est la même que celle du bezel : zénithale. Ces valeurs vivaient dans les dégradés SVG de `core/svg.js`, littérales. Elles y étaient hors d'atteinte de toute palette — c'est pour cela que les boutons restaient noirs sur un panneau clair pendant que tout le reste s'éclaircissait. LE CORPS reste plus sombre que la platine dans les deux palettes : c'est ce qui dit qu'il s'agit d'une pièce rapportée et non d'un creux dans la tôle. Seul son niveau change. */ --btn-edge-hi: #3F4850; /* tranche, prise par la lumière */ --btn-edge-mid: #2B323A; --btn-edge-lo: #141920; --btn-face-hi: #262E36; /* face du poussoir */ --btn-face-mid: #1C232A; --btn-face-lo: #141920; --btn-bevel-a: #0A0E13; /* biseau : l'arête basse capte */ --btn-bevel-b: #39424B; --knob-edge-hi: #3E474F; /* tranche moletée du sélecteur */ --knob-edge-mid: #2A3138; --knob-edge-lo: #141920; --knob-face-hi: #1B2027; /* dessus du sélecteur */ --knob-face-mid: #12161B; --knob-face-lo: #0C1015; /* L'ombre d'une pièce sur la platine, et le creux de son montage. */ --organe-ombre: #000; --organe-ombre-o: .8; --organe-puits: #000; --organe-puits-o: .55; /* Les noirs de STRUCTURE : trous de vis, gorges, fenêtres éteintes, dos d'une cartouche. Ce ne sont pas des couleurs, ce sont des absences — et c'est pour cela qu'elles ne s'inversent pas en gris moyen mais en teinte de la matière environnante, plus sombre qu'elle d'un cran. */ --organe-creux: #05080B; /* l'ombre sous une pièce, un puits */ --organe-trou: #0A0E13; /* une fenêtre éteinte, un logement vide */ --organe-gorge: #0E141A; /* une gorge, un voyant au repos */ --organe-arete: #04070A; /* l'arête tournée d'une pièce */ --organe-moletee:#080C11; /* les stries de la tranche d'un sélecteur */ /* ── LA LUMIÈRE SUR LE MÉTAL ───────────────────────────────────────────── Une arête tournée, la crête d'une cannelure, le bord haut d'une touche : partout où une pièce prend le jour. C'est le PENDANT des creux — un relief se lit toujours par un couple, l'ombre et la lumière ; un simple trait sombre donne une texture plate. Ces valeurs étaient des blancs à 5 ou 7 % écrits en clair dans chaque instrument. Calibrées pour un métal sombre, où un voile blanc suffit à marquer une arête. Sur un métal CLAIR elles ne se voient plus du tout, et la moitié du relief disparaît — c'est ce qui manquait aux cannelures du sélecteur, dont il ne restait que les creux. */ /* ── L'ENCRE D'UN ORGANE SE MESURE SUR L'ORGANE ────────────────────────── Le libellé gravé d'un poussoir prenait `--av-white-dim` — l'encre faible du VERRE. Les deux fonds sont voisins la nuit : verre presque noir, corps de bouton presque noir, une même encre convient. Le jour ils divergent : l'émail est très clair, le corps du bouton est un gris moyen, et la même encre s'y noie. Le bouton paraissait alors DÉSACTIVÉ — un libellé pâle sur un fond pâle, c'est exactement le code du grisé. Il lui faut donc sa propre encre, mesurée sur sa propre matière. */ /* ── LA PLAQUE D'UN ANNONCIATEUR ───────────────────────────────────────── Au repos, elle n'est pas allumée : c'est du plexiglas gravé devant une lampe éteinte. La nuit, cela donne un noir — le même que le verre. Le jour, une plaque non éclairée ne devient pas noire : elle reste une plaque, un peu en retrait de la platine parce qu'elle est translucide et qu'il fait sombre derrière. */ --annonce-fond: #0B1015; /* ── LA LENTILLE D'UN VOYANT ───────────────────────────────────────────── Éteinte, elle garde SA teinte, très assombrie : on devine au repos de quelle couleur s'allumera le voyant, et c'est ce qui permet de lire un panneau éteint. La teinte est donc mélangée à un fond — noir la nuit. Le jour, une lampe éteinte derrière un cabochon ne devient pas noire : le cabochon reste du plastique translucide et coloré, simplement terne, un peu plus sombre que la platine. C'est ce fond-là qui change, pas le principe. */ /* Deux teintes de voyant que la palette de mesure ne porte pas : un jaune franc (distinct de l'ambre de caution) et un bleu de repère. Elles ne servent qu'aux lentilles, où l'exploitant choisit la couleur du cabochon. */ --av-yellow: #F2D50F; --av-blue: #4A7BFF; /* Le blanc d'un voyant ALLUMÉ : une lampe blanche brille, elle n'écrit pas. Distinct de `--av-white`, qui est l'encre — et qui devient noire le jour. */ --av-white-vif: #E9EFF5; --led-reflet: rgba(255, 255, 255, .2); /* Le puits d'une colonne : le fond du canal dans lequel monte la barre. */ /* ── LE REFLET DU VERRE, EN QUATRE COUCHES ─────────────────────────────── Le lobe de la verrière, sa coupure en diagonale, la tranche haute prise par la lumière, le voile du traitement antireflet. Toutes écrites en blancs et bleus très translucides — donc INVISIBLES sur de l'émail, et c'est là que l'effet de vitre disparaissait le jour. Elles ne changent pas de rôle, elles changent de SIGNE : une vitre posée sur un cadran clair renvoie le gris du plafond. Le reflet assombrit au lieu d'éclaircir, et il lui faut un peu plus de force — un fond clair pardonne moins qu'un fond noir. */ --verre-reflet: 226, 240, 255; --verre-tranche-lum: 200, 230, 255; --verre-voile: 140, 190, 235; --verre-k: 1; /* La BANDE d'un ruban défilant n'est pas un puits : c'est la surface de lecture elle-même, celle sur laquelle l'échelle est imprimée. Elle suit donc le verre, pas le fond d'un canal. */ /* ── LES TAMBOURS D'UN COMPTEUR ────────────────────────────────────────── Un totalisateur mécanique distingue ses rouleaux d'entiers de ceux des décimales en INVERSANT leur contraste — c'est ainsi qu'on lit la virgule sans qu'elle soit écrite. La distinction se conserve d'une palette à l'autre ; ce sont les deux valeurs qui s'échangent. */ --tambour-fond: #0A0E13; --tambour-encre: var(--av-white); --tambour-fond-dec: #B9C2CB; --tambour-encre-dec: #0A0E13; --tambour-creux: rgba(0, 0, 0, .55); --tambour-creux-dec: rgba(0, 0, 0, .18); /* Une rainure fraisée dans la plaque : un trait, sans lumière propre. */ --rainure: #1C232A; --bande-fond: #0A0E13; --puits-fond: #12171D; /* Le contour du puits : il n'est PAS l'arête d'une pièce. C'est le bord du canal dans lequel monte la barre, et sur une dalle noire il ne se voit pas — noir sur noir. Lui donner le gris d'une arête, le jour, dessinait un cadre franc autour de chaque colonne : un objet de plus, là où la nuit n'en montre aucun. */ --puits-bord: #05080B; --led-fond-eteint: #05070A; --led-bord-eteint: #04060A; --led-nue: #1A2027; /* lentille sans couleur assignée */ --led-nue-2: #0E1319; /* Le halo au centre d'une lentille allumée, et l'ombre de son pourtour. */ --led-coeur: #FFFFFF; --led-tranche: #000000; --organe-encre: #B0B9C2; /* le libellé d'un poussoir */ --organe-encre-faible:#78828D; /* son état au repos */ /* La fenêtre de consigne posée sur la platine, sous un sélecteur. */ --consigne-fond: rgba(0, 0, 0, .6); --consigne-bord: rgba(63, 200, 240, .34); /* Le LUSTRE d'une surface — le haut d'une touche, le dos d'une plaque — à distinguer de l'arête, qui est un trait. Une valeur d'arête étalée sur un aplat donne une bande franche, pas un reflet. */ --metal-lustre: rgba(255, 255, 255, .05); --metal-lum-fine: rgba(255, 255, 255, .055); /* crête d'une cannelure */ --metal-lum-arete: rgba(255, 255, 255, .075); /* arête d'une face */ --metal-ombre-arete: rgba(0, 0, 0, .5); /* son ombre portée */ --organe-ligne: rgba(0,0,0,.7); --organe-encre-vive: #06090C; /* une encre POSÉE SUR une teinte vive */ --cartouche-fond:#0B1014; /* le dos d'une cartouche de valeur */ --pin-fond: #0A0E13; --pin-bord: rgba(233, 239, 245, .26); --pin-bord-vif: rgba(233, 239, 245, .5); --pin-encre: rgba(233, 239, 245, .55); /* Le coin « simulé » : il se voit à l'angle, il se fond à l'hypoténuse. Voir `.simflag` dans panel.css. */ --sim-angle: #9FAAB6; --sim-mi: #7B8591; --sim-fondu: #39414A; --sim-encre: #10161C; --sim-grave: rgba(255, 255, 255, .18); --glass-cerne: rgba(0, 0, 0, .9); /* contact verre / cadre */ --glass-tranche: rgba(0, 0, 0, .95); /* épaisseur vue par la tranche, aux bords libres d'un bloc */ --glass-creux: rgba(0, 0, 0, .85); /* le verre est en retrait */ --glass-vignette: rgba(0, 0, 0, .55); /* épaisseur de la dalle */ --engrave: #8A949E; /* sérigraphie sur métal */ /* ── CE QUI EST ÉCRIT SUR LA TÔLE, ET NON SUR L'INSTRUMENT ─────────────── Réservé à ce qui se pose SUR le panneau lui-même. J'avais d'abord cru que le libellé gravé sous un cadran en faisait partie : il est en réalité DANS le cadre de l'instrument, sur une surface qui reste sombre — le lui donner l'a rendu illisible (2,34:1), ce que seule la mesure en direct a montré. La règle est donc plus simple qu'elle n'en avait l'air : tout ce qui vit sous `.instr` appartient à l'appareil et garde `--engrave`. */ --tole-encre: #8A949E; --tole-encre-dim: #59626C; --engrave-dim: #59626C; /* ── LA MATIÈRE D'UN CADRAN ────────────────────────────────────────────── Valeurs d'aujourd'hui, simplement nommées : voir `instruments.css` pour ce que chacune dessine et pour la façon dont elle s'inverse. */ --cadran-piste: #171D24; /* le creux sous l'échelle */ --aiguille-ombre: rgba(0, 0, 0, .55); --moyeu: #2A323B; /* le métal tourné au centre */ --moyeu-bord: #10151A; --moyeu-vis: #0A0E12; --bug-bord: #06212B; /* le liseré du repère de consigne */ /* ── MATIÈRES DU « SITE » — l'administration, l'éditeur, le graphe ──────── Distinctes des matières du PANNEAU, juste au-dessus, et il faut que les deux restent séparées : le panneau imite un cockpit — du métal, du verre, une lumière zénithale — là où le site est une interface de gestion à plat. Les confondre ferait glisser le relief du premier sur le second, ce que `shell.css` refuse explicitement depuis le début. ── ELLES SONT NOMMÉES PAR LEUR RÔLE, JAMAIS PAR LEUR TEINTE ───────────── `--surface`, et non `--gris-2`. C'est ce qui rend un second thème possible sans tout relire : un thème clair redéfinit ce qu'est « une surface », il n'a pas à savoir que la sombre était `#12161B`. Un jeton nommé par sa couleur serait un jeton à renommer le jour où elle change — c'est-à-dire le seul jour où il servirait. Elles valaient toutes, jusqu'ici, des hexadécimaux recopiés au fil de 9 000 lignes : `#232A31` revenait quarante-trois fois dans le seul `shell.css`. L'en-tête de ce fichier promettait pourtant qu'« un réglage de thème reste une modification d'un seul fichier » ; ces lignes-ci paient la dette de cette promesse. */ /* ── LA PALETTE SÉMANTIQUE DU SITE ──────────────────────────────────────── Les mêmes teintes que `--av-*` juste au-dessus, et pourtant des jetons SÉPARÉS. Ce n'est pas une duplication par négligence, c'est la seule façon de rendre les deux indépendants — et il FAUT qu'ils le soient. ── POURQUOI ILS DOIVENT SE SÉPARER ────────────────────────────────────── `--av-*` est une palette NORMÉE (SAE ARP4102), et elle est normée POUR UN FOND SOMBRE : le rouge et l'ambre n'y servent qu'à l'alarme, et leur lisibilité tient à ce que le verre est noir. Mesuré : `--av-cyan` donne 9,7:1 sur le fond du panneau et 1,8:1 sur un fond clair, là où 4,5:1 est le minimum lisible. `--av-white` tombe à 1,1:1 — c'est-à-dire rien. Le site, lui, n'est pas un cockpit : c'est une interface de gestion, et rien ne l'oblige à rester sombre. Le chrome empruntait pourtant la palette des instruments — 136 fois `--av-cyan`, 101 fois `--av-white` — si bien qu'aucun des deux ne pouvait changer sans emporter l'autre. ── DEUX AXES, ET ILS NE SE COMMANDENT PAS L'UN L'AUTRE ────────────────── L'INTERFACE peut passer en clair pendant que les instruments restent en nuit — c'est d'ailleurs la combinaison la plus probable, et celle que font les outils professionnels : chrome clair, vue sombre. Et le jour où les instruments auront leur palette de JOUR, elle se choisira à part. D'où des valeurs LITTÉRALES ici, et non `var(--av-cyan)` : écrire l'un en fonction de l'autre rendrait le premier tributaire du second, ce qui est exactement ce qu'on vient de défaire. */ --info: #3FC8F0; /* ce qu'on désigne, une consigne, un lien */ --info-fond: #12556A; /* le fond d'un état désigné */ /* ── UNE BORDURE N'EST PAS UN FOND, ET LA NUANCE SE VOIT EN CLAIR ──────── Ces quatre-là valaient la même chose que leur `-fond` sur fond sombre — d'où la confusion, et d'où le fait qu'elle soit restée invisible dix ans. Sur fond clair elles divergent : un fond d'état doit rester très pâle pour qu'un texte s'y lise, une bordure doit au contraire être assez franche pour délimiter. Employer le fond en bordure donnait un bouton sans contour. */ --info-bord: #12556A; --alerte-bord: #6B1F1C; --caution-bord: #6E4C10; --ok-bord: #135B3A; --alerte: #FF3B30; /* un refus, une destruction */ --alerte-fond: #6B1F1C; --caution: #FFB020; /* une réserve, un avertissement */ --caution-fond: #6E4C10; --ok: #21D07A; /* c'est fait, c'est en service */ --ok-fond: #135B3A; /* ── PAS `--accent` : CE NOM EST DÉJÀ PRIS, ET PAR PLUS FORT ───────────── `--accent` est la couleur d'ÉTAT d'un instrument, redéfinie sur `.instr` et sur chacun de ses états — vert au repos, ambre en caution, rouge en alarme. Un jeton de même nom posé sur `:root` se serait fait écraser dans tout ce qui vit à l'intérieur d'un instrument, et aurait pris sa couleur d'état : un élément du site rendu vert ou rouge selon l'instrument qui l'entoure, sans que rien ne l'explique. Le mot dit d'ailleurs mieux ce que le magenta signifie ici, et c'est le même sens que sur les instruments (MAN, OVR) : une valeur IMPOSÉE. */ --impose: #FF5AD8; /* imposé à la main, forcé */ --inactif: #5C6773; /* éteint, indisponible */ /* Les encres du site, de la plus affirmée à la plus tenue. */ --texte-fort: #E9EFF5; /* un titre, une valeur */ --texte-faible: #8A949E; /* une légende, un libellé secondaire */ --texte-tenu: #59626C; /* une note, une unité, un détail */ --texte-eteint: #4A525C; /* ce qui est désactivé */ /* ── LA MATIÈRE D'UN BOUTON ────────────────────────────────────────────── Un bouton n'est pas une couleur, c'est un RELIEF : un dégradé qui reçoit la lumière par le haut, une arête claire à son sommet, une ombre portée en dessous. Sur fond sombre, l'arête est blanche et l'ombre noire ; sur fond clair, l'arête n'a plus lieu d'être et l'ombre doit s'alléger — une ombre noire à 50 % sous un bouton blanc fait une tache, pas un relief. Ces cinq jetons sont donc ce qui manquait pour qu'un bouton traverse un changement de thème. Sans eux, `#2C343C` restait en dur au sommet du dégradé, et le bouton clair naissait sombre en haut, clair en bas. */ /* ── LES VOILES — ce qui recouvre la page ───────────────────────────────── Un catalogue, une palette, une notification : des surfaces posées PAR- DESSUS, presque opaques, à travers lesquelles on devine ce qu'on recouvre. Elles étaient six valeurs en dur, toutes proches et toutes différentes — `rgba(9,12,15,.975)`, `rgba(14,18,22,.98)`, `rgba(16,20,24,.96)` — c'est- à-dire la même intention écrite six fois de mémoire. Deux suffisent : l'une franche pour ce qui PREND la page (un catalogue), l'autre plus légère pour ce qui s'y pose (une barre, un message). */ /* ── LA MARQUE D'UN ÉTAT ACTIF ─────────────────────────────────────────── Le filet de deux pixels sous un outil enclenché. Il valait `--info-fond`, ce qui était juste sur fond sombre — un cyan sourd s'y voit — et faux sur fond clair, où le même rôle demande au contraire une couleur FRANCHE. Un fond d'état et une marque d'état ne vont pas dans le même sens quand le support s'inverse. */ --info-marque: #12556A; --caution-marque: #6E4C10; /* ── LE CREUX D'UNE COMMANDE ENCLENCHÉE ────────────────────────────────── Le fond d'un segment choisi, d'un onglet ouvert, d'une icône active. Ce n'est PAS `--info-fond` : celui-ci porte du texte clair et doit donc être soutenu, tandis que celui-là est un creux — il reçoit le bleu de `--info` par-dessus, et doit rester en retrait pour le laisser lire. Il valait `#10222A` en dur à six endroits, c'est-à-dire la même intention recopiée six fois. Sur fond clair, ce noir bleuté faisait des boutons enclenchés NOIRS au milieu d'une page blanche — le défaut le plus visible du thème clair, et celui qu'on ne pouvait pas corriger tant que la valeur n'avait pas de nom. */ --info-creux: #10222A; /* ── LA COULEUR DE CE QU'ON DÉSIGNE ────────────────────────────────────── Un anneau de sélection n'est pas du texte : il n'a pas à passer 4,5:1, il a à être VIVANT. C'est même l'inverse d'une encre de lecture — on ne le lit pas, on le repère du coin de l'œil pendant qu'on regarde ailleurs. `--info` ne pouvait pas faire les deux. En sombre, la question ne se posait pas : le même cyan est à la fois lisible et éclatant sur du noir. En clair, une couleur lisible sur blanc est forcément sombre et sourde — et l'anneau se lisait alors comme une bordure de plus, pas comme une désignation. D'où un jeton à part, saturé, mesuré pour le seuil des ÉLÉMENTS GRAPHIQUES (3:1) et non pour celui du texte. ── POURQUOI L'ORANGE, ET CE QU'IL FAUT SURVEILLER ──────────────────────── C'est l'orange de la MARQUE — celui de la barre de démarrage — et non une teinte d'état. La distinction est le fond de l'affaire : le rouge et l'ambre appartiennent à l'INSTALLATION (`--alerte` #FF3B30, `--caution` #FFB020, et leurs jumeaux `--av-red` / `--av-amber` dans les instruments), tandis que celui-ci appartient à l'OUTIL — il dit ce que l'opérateur vient de désigner, pas ce que la machine mesure. Il a donc fallu le choisir assez loin des deux autres pour qu'on ne les confonde pas d'un coup d'œil : #FF6A00 est franchement plus orangé que le rouge d'alarme et franchement plus rouge que l'ambre de caution. LE RISQUE SUBSISTE et il faut le nommer : un cadre chaud autour d'un instrument, sur un synoptique, peut se lire comme un état de cet instrument. Deux garde-fous existent déjà, et ils doivent tenir. Le premier : la sélection est DÉFAITE en quittant la composition (voir `setEditing` dans `proto.js`) — en exploitation, aucun cadre ne subsiste, donc aucune ambiguïté là où elle coûterait. Le second : un état d'alarme ne se dit jamais par un cadre, mais par la couleur de la VALEUR et par le bandeau — deux registres différents, qui ne se rencontrent pas. */ --selection: #FF6A00; /* ── LA MÊME DÉSIGNATION, MAIS POSÉE SUR UN APPAREIL ───────────────────── L'anneau qui entoure un instrument est peint SUR SON BEZEL, et un bezel reste sombre dans les deux thèmes — l'appareil garde sa palette, c'est la règle de la maison. Il ne doit donc pas suivre le thème : mesuré, l'orange assombri de la version claire tombe à 2,9:1 sur le bezel, l'orange vif y tient 4,6:1. Le jeton est le même des deux côtés, et c'est délibéré. Il en faut un SÉPARÉ parce que `--selection`, lui, se pose sur la tôle ou sur la feuille de câblage — qui suivent le thème, elles. Même notion, deux supports, deux valeurs : c'est exactement la distinction que tout ce fichier tient depuis le début. */ --selection-appareil: #FF6A00; /* ── LE HALO N'A PAS LE MÊME POIDS DES DEUX CÔTÉS ──────────────────────── Autour de l'anneau franc, un voile de la même couleur donne à la désignation le POIDS qu'un trait de deux pixels n'a pas. Mais un voile translucide ne travaille pas pareil selon le fond. Sur du sombre il AJOUTE de la lumière : à 22 %, un orange vif sur une feuille noire se voit déjà nettement. Sur du clair il ne peut que RETIRER de la lumière, et 22 % d'orange sur du blanc n'assombrit presque rien — le halo disparaît, et il ne reste que le trait, qui se lit comme une bordure de plus. C'est la même asymétrie qui a demandé de densifier la trame et les cadres : un fond clair ne rend pas les voiles. Le taux est donc un jeton, et il monte franchement le jour. */ --selection-halo: 22%; /* La part de teinte versée dans le corps d'une boîte désignée. Sur du sombre, un peu de couleur chaude SOULÈVE la surface et se voit tout de suite ; il en faut donc peu. */ --selection-fond: 12%; /* L'ombre d'une boîte désignée, sur la feuille de câblage. */ --gnode-ombre: rgba(0, 0, 0, .6); /* ── OÙ ÇA VA TOMBER — ce qui n'est PAS une désignation ────────────────── Le fantôme de destination sous un instrument qu'on déplace, la case visée, le cadre de pose. Tout cela était écrit dans le même cyan que la sélection, si bien qu'un seul et même bleu disait à la fois « voici ce que tu as choisi » et « voici où ça ira » — deux questions différentes, et c'est la seconde qu'on regarde pendant qu'on déplace. La séparation se voit enfin depuis que la désignation est passée au chaud : l'orange dit CE QU'ON TIENT, le bleu dit OÙ ON LE POSE. On lit le geste d'un coup d'œil au lieu de chercher lequel des deux liserés est lequel. */ --destination: #3FC8F0; --voile: rgba(9, 12, 15, .975); --voile-leger: rgba(14, 18, 22, .94); /* Le liseré qui détache un bandeau de la surface qu'il borde. */ /* La feuille de câblage : le voile de son bandeau, et le liseré qui détoure une valeur posée sur un fil. Tous deux valent LE FOND de la feuille — ce sont des trous, pas des ombres. */ --graph-voile: rgba(10, 13, 16, .92); --graph-liseré: rgba(8, 11, 15, .85); --bandeau-bord: #05070A; --bandeau-ombre: rgba(0, 0, 0, .6); --bouton-haut: #2C343C; --bouton-bas: #1B2129; --bouton-bord: #05070A; --bouton-arete: rgba(255, 255, 255, .10); --bouton-ombre: rgba(0, 0, 0, .5); /* Un creux très sombre — un champ en retrait, un journal. Le site s'en servait sous le nom de `--glass-bg`, qui est le verre d'un INSTRUMENT : un emprunt de plus, au vocabulaire d'à côté. */ --creux: #05070A; /* Les fonds, du plus profond au plus levé. */ --fond: #0B0E12; /* le sol : derrière tout le reste */ --fond-creux: #0F1216; /* un creux : tiroir, zone en retrait */ /* ── LE MAT D'UN DOCUMENT ────────────────────────────────────────────────── Ce sur quoi une page BLANCHE se pose. Un rapport s'imprime, donc son aperçu est blanc — et un blanc posé sur la tôle presque noire fait un écart que l'œil ne franchit pas sans fatigue : on cesse de lire le document pour n'en voir que le cadre. Les lecteurs de PDF posent depuis toujours la page sur un gris moyen, qui rattrape la moitié de l'écart. C'est ce gris-là. ASSOMBRI D'UN CRAN depuis : à #363D47, le mat était plus clair que tout ce qui l'entoure dans un thème sombre, et le volet d'aperçu faisait une tache pâle au milieu de l'écran — l'inverse de ce qu'on veut d'un fond. */ --mat-document: #1B2027; --surface: #12161B; /* une carte, un panneau, un champ */ --surface-vive: #151A20; /* la même, sous le pointeur */ /* Les traits, du plus discret au plus affirmé. */ --filet: #1B2129; /* séparation INTERNE, entre deux lignes d'un même bloc */ --bord: #232A31; /* le bord d'une surface */ --bord-fort: #2C343C; /* le bord d'une commande — bouton, liste */ --bord-vif: #38424C; /* le bord sous le pointeur */ /* Les encres. `--engrave` plus bas sert au texte SECONDAIRE ; celle-ci est le texte ordinaire, et elle n'est PAS `--av-white` : ce blanc-là est celui des instruments, où il se lit sur du verre noir. */ --texte: #C9D3DD; /* ── L'ENCRE DE CELUI QUI ÉCRIT ─────────────────────────────────────────── Un cran sous `--texte`, et c'est le seul jeton dont la raison d'être n'est pas la lisibilité maximale. Sur fond presque noir, une encre à onze pour un est parfaite pour une valeur qu'on lit en passant devant un écran mural, et dure pour quelqu'un qui compose un rapport pendant vingt minutes : le texte rayonne, et les lettres bavent. Réservée aux longues surfaces d'écriture — jamais à une valeur, jamais à un intitulé. */ --texte-doux: #B2BDC9; --texte-alerte: #FFB3AE; /* un refus, un défaut — sur une surface */ /* ── Géométrie ──────────────────────────────────────────────────────────── */ --gutter: 6px; /* séparation entre instruments */ --bezel-w: 7px; /* épaisseur du cadre */ /* Hauteur du bandeau du libellé gravé (son interligne plus son retrait). Un instrument soudé en pied la perd : il faut la lui rendre à l'intérieur du verre, sinon son échelle vient buter contre le joint. */ --label-h: 13px; --radius: 4px; --radius-glass: 2px; /* ── Typographie ────────────────────────────────────────────────────────── ── DEUX POLICES, ET UNE FRONTIÈRE QUI N'ÉTAIT PAS TENUE ──────────────── B612 est la police dessinée par Airbus et l'ENAC POUR LES COCKPITS : lisible sur écran rétroéclairé, en vibration, sous forte luminosité, avec des chiffres qu'on ne confond jamais. Sur un cadran, c'est exactement ce qu'il faut. Mais elle est, par construction, très caractéristique — larges capitales carrées, dessin d'instrument — et elle avait débordé dans le CHROME : la marque, le fil d'Ariane, les en-têtes de volet, les valeurs du bandeau. Dix-neuf éléments sur la seule liste des cockpits. Le résultat se remarquait surtout en thème clair, où l'on ne peut plus mettre la singularité d'une police sur le compte de la pénombre : l'administration d'une application ressemblait à un tableau de bord, ce qu'elle n'est pas. C'est la même confusion de registres que `shell.css` refuse depuis le début pour le relief — le panneau imite un cockpit, le site est une interface de gestion — appliquée cette fois à la typographie. La frontière est donc rendue nette : `--font-instr` ne vit plus que sous `.instr` et dans les boîtes du graphe, c'est-à-dire dans l'appareil. Tout le reste prend `--font-ui`. ── LA PILE DE REPLI EST CELLE DE WEBPV ───────────────────────────────── `ui-sans-serif, system-ui` avant `Helvetica`. Ce n'est pas un détail de cohérence entre deux applications : la chaîne précédente tombait droit sur Helvetica Neue puis Arial, c'est-à-dire sur une police des années 80 et sa copie, alors que tout système moderne expose une police d'interface dessinée pour son écran. Si Inter n'arrive pas — réseau isolé, fichier manquant — on veut hériter de celle du poste, pas d'Arial. */ --font-instr: "B612", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif; --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif; --font-num: "B612 Mono", "B612", "Inter", ui-monospace, monospace; /* ── LA MONOSPACE DU CHROME ─────────────────────────────────────────────── Elle existait déjà en creux : `graph.css` écrivait `var(--font-mono)` avec un repli, pour un jeton qui n'a jamais été déclaré — le repli faisait donc tout le travail, à trois endroits, chacun avec sa propre liste. Elle est déclarée ici, une fois. Elle n'est PAS `--font-num`, et c'est la même frontière que plus haut : `--font-num` est B612 Mono, la fonte de l'APPAREIL, dont les chiffres sont dessinés pour ne jamais se confondre sur un cadran. Celle-ci est la monospace du système, pour les valeurs qu'on lit dans une interface — sur un fil du graphe, dans une liste de l'inspecteur, sur une ligne de contrôle. Des chiffres alignés, et rien de plus. */ --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* ── Durées ─────────────────────────────────────────────────────────────── */ --blink-period: 1s; /* clignotement warning ≈ 1 Hz */ } /* ════════════════════════════════════════════════════════════════════════════ LE THÈME CLAIR — l'interface, et l'interface SEULE ════════════════════════════════════════════════════════════════════════════ ── CE QU'IL NE TOUCHE PAS, ET POURQUOI ──────────────────────────────────── Aucun `--av-*`, aucune matière de panneau. Les instruments restent ce qu'ils sont : un cockpit, dans sa boîte. Ce n'est pas une limitation qu'on subit, c'est la bonne décision — et elle se mesure. La palette aviation (SAE ARP4102) suppose un fond sombre. Sur un fond clair : --av-cyan 9,7:1 sur le verre → 1,8:1 illisible --av-amber 10,4:1 → 1,7:1 illisible --av-white 16,3:1 → 1,1:1 rien du tout Le minimum lisible est 4,5:1. Une consigne cyan et une caution ambre deviendraient invisibles — précisément les deux qu'il ne faut jamais manquer. Un instrument clair n'est donc PAS un instrument éclairci : il lui faut sa propre palette sémantique, assombrie, choisie pour un fond clair. C'est un second axe, réglé à part — et le jour où il existera, il ne passera pas par ici. ── LES VALEURS SONT VÉRIFIÉES AU CONTRASTE, PAS À L'ŒIL ─────────────────── Chacune a été mesurée contre `--fond` ET contre `--surface`, parce qu'un texte vit sur les deux. Le seuil retenu est 4,5:1 pour tout ce qui se lit, 3:1 pour ce qui se repère (bordures, états éteints). `--texte-tenu` a dû être assombri de trois crans pour y arriver : à #6E7883 il donnait 4,07:1 sur le fond de page — juste en dessous, c'est-à-dire précisément le genre de « presque bon » qu'on ne voit pas et qu'on garde dix ans. ── IL SE POSE SUR ``, PAS SUR `` ────────────────────────────── Le serveur l'écrit dans le gabarit, à partir du compte. Rien ne clignote au chargement : la page naît dans le bon thème, elle n'y bascule pas. */ :root[data-theme="light"] { color-scheme: light; /* Les fonds. La SURFACE est le blanc pur et le FOND est légèrement teinté : l'inverse du thème sombre, où la surface est levée sur un fond plus noir. Une carte doit se détacher de son support, dans les deux sens. */ --fond: #F2F4F7; --fond-creux: #E8EBEF; /* En clair, le mat n'a presque rien à rattraper : il se contente de détacher la page de son fond, pour qu'on voie où elle commence. */ --mat-document: #C9CFD6; --surface: #FFFFFF; --surface-vive: #F7F9FB; /* Les traits. Ils s'assombrissent quand le fond s'éclaircit — un liseré clair sur blanc ne sépare rien. */ --filet: #E4E8ED; --bord: #D8DEE5; --bord-fort: #C3CBD4; --bord-vif: #A9B3BE; /* Les encres, mesurées. */ --texte: #2B3138; /* 11,9:1 */ --texte-fort: #12161B; /* 16,5:1 */ /* En clair, l'encre d'écriture s'ÉCLAIRCIT à peine : le fond ne rayonne pas, et l'inconfort du sombre n'existe pas ici. Elle reste bien au-delà des seuils — 9,5:1 — et garde la même hiérarchie que son jumeau sombre. */ --texte-doux: #3A424B; /* 9,5:1 */ /* ── MESURÉS SUR LES TROIS FONDS, PAS SUR UN SEUL ───────────────────── Première version : vérifiés contre `--fond` et `--surface` seulement. L'audit de l'application les a pris en défaut sur `--fond-creux`, qui est le plus sombre des trois et porte le menu latéral : « Supervision », « Services », « Administration » y tombaient à 4,26:1. C'est exactement le « presque bon » qu'on ne voit pas et qu'on garde dix ans — il a fallu faire mesurer la page elle-même pour l'attraper. Les deux niveaux ont été ÉCARTÉS en même temps qu'assombris : remonter le seul plus tenu l'aurait collé à l'autre, et une hiérarchie de trois encres dont deux sont indistinguables n'en compte que deux. */ --texte-faible: #495460; /* 6,5:1 au pire */ --texte-tenu: #5F6874; /* 4,7:1 au pire */ --texte-eteint: #98A2AD; --inactif: #7C8894; /* 3,3:1 — un repère, pas un texte */ /* La palette sémantique, ASSOMBRIE et non éclaircie : c'est ce qui conserve l'identité de teinte — un cyan reste un cyan — tout en rendant lisible. */ /* Assombri d'un demi-ton après mesure EN PLACE : sur le bandeau d'état, qui est peint sur `--panel-bg-2` et non sur le fond de page, il tombait à 4,1:1 — juste sous le seuil, et c'est là qu'on lit le nom de la page. */ --info: #0A6480; /* 6,1:1 */ --info-fond: #DCEEF5; /* Les bordures, franches là où les fonds sont pâles. */ --info-bord: #7FB6CE; /* Un creux, sur clair, est une teinte PÂLE : assez marquée pour qu'on voie lequel est enclenché, assez pâle pour que `--info` s'y lise (4,6:1). */ --info-creux: #D8EAF2; /* L'ORANGE S'ASSOMBRIT, IL NE PÂLIT PAS. Tel quel, #FF6A00 ne donne que 2,4:1 sur la tôle claire — sous le seuil graphique, et l'anneau se dilue dans le fond au lieu d'y trancher. Assombri, il garde toute sa saturation (donc sa chaleur, qui est ce qu'on lui demande) et passe à 3,8:1. */ --selection: #D14A00; --selection-halo: 40%; /* Sur du blanc, la même part ne fait presque rien — un lavis clair sur du clair — mais il ne faut pas non plus noyer les valeurs qu'on lit dedans. Mesuré : à 9 %, l'encre forte y tient encore 15:1. */ --selection-fond: 9%; --gnode-ombre: rgba(16, 24, 32, .18); --destination: #0A6E8C; --alerte-bord: #E39B95; --caution-bord: #D9B571; --ok-bord: #86C3A2; --alerte: #B3241C; /* 6,0:1 */ --alerte-fond: #FBE2E0; --caution: #8A5A00; /* 5,4:1 */ --caution-fond: #FBEFD6; --ok: #0D6E3F; /* 5,2:1 sur le fond le plus sombre du thème */ --ok-fond: #DDF1E6; --impose: #A3238E; /* 6,0:1 */ --texte-alerte: #B3241C; /* La matière d'un bouton, retournée. L'arête de lumière DISPARAÎT — sur du blanc elle ne dit rien — et l'ombre s'allège : à 50 % elle ferait une tache sous chaque bouton. */ /* Les voiles, retournés. Presque blancs, et à peine translucides : sur fond clair, laisser deviner davantage rendrait le texte du dessus illisible. */ /* Franches : une marque doit se voir, et sur du blanc un ton sourd ne se voit pas. */ --info-marque: #0A6E8C; --caution-marque: #8A5A00; /* ── LA TÔLE DU PANNEAU S'ÉCLAIRCIT, LES INSTRUMENTS NON ───────────────── Le panneau est du MOBILIER, les instruments sont des APPAREILS. Le premier suit le thème, les seconds gardent leur bezel, leur verre et leur palette normée — qui suppose un fond noir, mesuré. `--panel-bg-2` reste plus SOMBRE que `--panel-bg` dans les deux thèmes : c'est le creux entre les instruments, et un creux se lit à ce qu'il reçoit moins de lumière. L'inverser ferait une bosse. */ /* Mesurés contre les encres qui s'y posent — le bandeau FMA est peint sur `--panel-bg-2`, et ses valeurs doivent y passer 4,5:1. */ --panel-bg: #EDF0F4; --panel-bg-2: #E5E9EF; /* Sur du clair, un bord ARRÊTE la lumière : le filet est plus sombre que la page, et assez franc pour tenir seul — c'est lui, et non l'écart de fond, qui dit où l'appareil visé s'arrête. */ --page-bord: #9FAAB8; --page-ombre: rgba(16, 24, 32, .10); --tole-encre: #5A646F; --tole-encre-dim: #7C8894; --voile: rgba(250, 251, 253, .975); --voile-leger: rgba(247, 249, 251, .94); /* Sur du clair, un bandeau ne se détache plus par une arête noire : il lui faut un liseré franc et une ombre légère, sans quoi il se confond avec la tôle — et l'on perd la limite haute et basse de l'écran. */ --graph-voile: rgba(242, 244, 247, .92); --graph-liseré: rgba(242, 244, 247, .9); --bandeau-bord: #C3CBD4; --bandeau-ombre: rgba(16, 24, 32, .10); /* LE HALO S'EFFACE PRESQUE. Sur du métal sombre il éclaire par le haut, et c'est lui qui dit où l'appareil commence. Sur du clair il ne peut qu'ombrer — et une ombre en haut du document se lisait comme une ombre portée venue de nulle part, en plus de rapprocher le bord supérieur de la couleur du plan de travail. Ici la limite est donnée par le bord net et l'ombre portée réelle (voir app.css) ; le halo, lui, s'éteint tout à fait. Le grain du métal, lui, RESTE — c'est lui qui empêche l'aplat parfait, et il ne tire ni clair ni sombre. */ --tole-halo: transparent; --bouton-haut: #FFFFFF; --bouton-bas: #EDF0F4; --bouton-bord: #C3CBD4; --bouton-arete: rgba(255, 255, 255, 0); --bouton-ombre: rgba(16, 24, 32, .10); /* Un creux, sur fond clair, est plus SOMBRE que la surface — mais à peine : le verre noir d'un instrument n'a rien à faire dans une interface claire. */ --creux: #EDEFF3; } /* Un instrument expose sa couleur d'accent courante sous ce nom : le contenu SVG s'y réfère sans savoir s'il est en état normal, caution ou warning. */ .instr { --accent: var(--av-green); --accent-dim: var(--av-green-dim); } .instr[data-state="caution"] { --accent: var(--av-amber); --accent-dim: var(--av-amber-dim); } .instr[data-state="warning"] { --accent: var(--av-red); --accent-dim: var(--av-red-dim); } .instr[data-state="invalid"] { --accent: var(--av-grey); --accent-dim: var(--av-white-dim); } @media (prefers-reduced-motion: reduce) { :root { --blink-period: 0s; } } /* ════════════════════════════════════════════════════════════════════════════ LA PALETTE DE JOUR DES INSTRUMENTS ════════════════════════════════════════════════════════════════════════════ ── UN SECOND AXE, ET IL NE SE COMMANDE PAS PAR LE THÈME ──────────────────── `data-instr="jour"`, indépendant de `data-theme`. Les quatre combinaisons ont un sens, et la plus probable n'est pas celle qu'on croit : chrome clair et instruments de nuit, c'est-à-dire ce que font les outils professionnels — on travaille dans une interface claire et l'on regarde une vue sombre. La séparation était annoncée en tête de ce fichier depuis le début ; voici la moitié qui manquait. ── « FIDÈLEMENT INVERSE » NE VEUT PAS DIRE « EN NÉGATIF » ────────────────── Retourner les valeurs RVB donne un résultat faux, et le fichier le démontrait déjà sans le dire : `--av-cyan` vaut 9,7:1 sur le verre noir et 1,8:1 sur du clair. Un négatif garde les teintes et perd les contrastes — donc perd la hiérarchie de lecture, qui est TOUT le contenu d'un cadran. Le bon modèle n'est pas optique, il est PHYSIQUE. L'instrument de nuit est un écran rétroéclairé : une dalle noire qui ÉMET de la lumière, où l'encre est claire parce qu'elle brille. Son inverse fidèle n'est pas un écran inversé, c'est un instrument À LECTURE RÉFLÉCHIE : un cadran d'émail blanc, une encre noire imprimée, une aiguille noire qui porte une vraie ombre. C'est un objet réel, et c'est même l'objet d'origine — altimètres, manomètres, appareils de laboratoire. Le même instrument, vu en plein jour au lieu d'être vu allumé dans le noir. D'où trois règles, vérifiables une à une par `bin/palette-miroir.mjs` : CE QUI SE CONSERVE — le RAPPORT de contraste de chaque encre à son fond, et donc l'ordre dans lequel l'œil prend les choses : l'aiguille, puis la valeur, puis les majeures, puis les chiffres. Et le code couleur, qui est normé : le vert reste vert, l'ambre reste ambre, et ils ne servent toujours qu'à ce qu'ils servaient. CE QUI S'INVERSE — la LUMIÈRE, et elle seule. Toute encre plus claire que son fond la nuit est plus sombre que lui le jour. CE QUI NE S'INVERSE NI NE SE CONSERVE — la MATIÈRE. Trois cas, et ce sont eux qu'une conversion naïve manque : · Le BEZEL ne s'inverse pas. C'est du métal éclairé par le haut, et la lumière ne change pas de place entre le jour et la nuit : le dégradé garde son sens — clair en haut, sombre en bas — et se contente de monter en luminosité. L'inverser creuserait le cadre au lieu de le faire saillir, et l'instrument paraîtrait enfoncé dans la tôle. · Le REFLET du verre disparaît. Un éclat blanc sur une dalle noire se lit comme une réflexion ; le même éclat sur de l'émail ne se voit pas, et un reflet sombre se lirait comme une salissure. Ce qui reste est un très léger vignetage — le centre un peu plus clair que les bords, ce qui vaut pour les deux modèles puisque la source ne bouge pas. · L'OMBRE reste sombre. Une ombre claire n'existe pas. Celle de l'aiguille s'adoucit simplement, parce qu'un cadran clair diffuse. */ :root[data-instr="jour"] { color-scheme: light; /* ── L'ÉMAIL ───────────────────────────────────────────────────────────── Légèrement CHAUD, jamais blanc pur : un cadran d'émail tire vers l'ivoire, et le blanc d'écran (#FFF) trahit immédiatement la simulation — il se lit comme une page web, pas comme une plaque. ── LE VIGNETAGE S'INVERSE, ET C'EST LA MESURE QUI L'A IMPOSÉ ──────────── J'avais d'abord gardé le centre plus clair que le bord, comme la nuit, en me disant que la source de lumière ne change pas de place. C'était joli et c'était faux — non pas physiquement, mais dans ses conséquences, et c'est `bin/palette-miroir.mjs` qui l'a montré. La raison tient à ce que ces deux jetons portent : la FENÊTRE DE LECTURE est peinte sur `--glass-bg`, tout le reste du cadran sur `--glass-bg-2`. La nuit, `--glass-bg` est le plus sombre des deux — la valeur exacte y gagne donc le meilleur contraste de tout l'instrument, et passe en tête de la hiérarchie de lecture. En gardant le même sens le jour, elle retombait derrière l'aiguille et les graduations : le cadran disait encore la même chose, mais plus dans le même ordre. Le fond général est donc le plus CLAIR des deux le jour, et le centre légèrement ombré — ce qui se défend d'ailleurs sur un cadran réel, où le moyeu et l'aiguille portent leur ombre au milieu. Mais ce n'est pas ce raisonnement-là qui a décidé : c'est la mesure. */ --glass-bg: #F4F2EC; --glass-bg-2: #E8E6DF; /* ── LE REFLET NE DISPARAÎT PAS, IL CHANGE DE SIGNE ────────────────────── Ce document a d'abord écrit que le reflet du verre « disparaît » le jour, au motif qu'un éclat blanc ne se voit pas sur de l'émail. C'est vrai de l'ÉCLAT, et faux du reflet : une vitre posée sur un cadran clair se voit parfaitement — elle y renvoie le gris du plafond, c'est-à-dire qu'elle ASSOMBRIT là où elle éclaircissait la nuit. Ce qui se lirait comme une salissure, c'est un reflet franc et net ; un dégradé large et doux, lui, se lit comme du verre. Le jeton existait déjà avec la bonne valeur. Il n'était BRANCHÉ NULLE PART — `panel.css` gardait ses blancs en dur — et c'est pour cela que le verre paraissait avoir disparu le jour. */ --glass-sheen: rgba(0, 0, 0, .05); /* ── LE CONTENU EST À FLEUR DU CADRE ───────────────────────────────────── Premier essai : adoucir les trois couches et les réchauffer. Ce n'était pas assez, et le raisonnement était faux. Sur une dalle NOIRE, ces trois ombres tombent sur un fond déjà noir : elles ne creusent rien, elles se fondent — le contenu y est à fleur du cadre, et c'est ainsi qu'on lit l'instrument de nuit. Les adoucir sans les retirer gardait donc, en jour, un creux que la nuit n'a jamais eu. La règle est celle-ci : ce n'est pas la force de l'ombre qui se conserve d'une palette à l'autre, c'est SON EFFET. Un creux invisible la nuit doit rester invisible le jour. Il ne reste que le TRAIT DE CONTACT entre le verre et son cadre — sans lui la dalle et la tôle se confondent en une seule surface claire — et il est ténu. Pas d'ombre portée intérieure, pas de vignetage : sur de l'émail, l'un enfonce le contenu et l'autre salit les bords. */ /* Les arêtes du cadre : le pli reste, l'entaille s'en va. L'arête haute GAGNE en force — un blanc à 16 % ne se voit pas sur un bezel clair, alors qu'il suffit sur un bezel sombre — pendant que l'arête basse en perd : c'est la même asymétrie que partout, la lumière et l'ombre n'ont pas le même poids selon le fond qui les reçoit. */ --bezel-arete-hi: rgba(255, 255, 255, .85); --bezel-arete-hi2: rgba(255, 255, 255, .5); --bezel-arete-lo: rgba(90, 98, 108, .20); --bezel-arete-lo2: rgba(90, 98, 108, .13); --joint-creux: rgba(112, 104, 90, .16); --joint-arete: rgba(255, 255, 255, .7); /* La pastille RETOURNE ses valeurs : sur de l'émail, un pavé noir pèse comme un trou — trente trous sur un panneau en édition. Blanche et cernée d'un trait sombre, elle se découpe aussi nettement pour un dixième du poids ; c'est le même objet vu sous l'autre lumière, pas un autre objet. */ /* ── ÉTEINT NE VEUT PAS DIRE SOMBRE, IL VEUT DIRE SANS VIE ─────────────── Le filtre de nuit assombrit — c'est le rétroéclairage qui baisse. Appliqué tel quel à un cadran d'émail, il le NOIRCIT : un instrument hors service devenait la chose la plus lourde du panneau, exactement l'inverse de ce qu'on veut dire. Sur un support à lecture réfléchie, ce qui ne fonctionne plus ne s'éteint pas : il PÂLIT. Une plaque décolorée, une impression passée, un contraste qui s'en va — l'instrument reste là, il ne dit simplement plus rien. On éclaircit donc au lieu d'assombrir, et l'on vide surtout le contraste, qui est ce qui porte la lecture. Et le verre « éteint » cesse d'être noir : il devient la teinte d'un cadran sans encre. */ --gel-filtre: grayscale(.92) brightness(1.06) contrast(.62); /* Le retour en ligne garde son sens et change de physique : un cadran d'émail n'a pas de rétroéclairage à faire monter, mais on peut l'ÉCLAIRER. On part de la plaque sourde de l'état hors ligne, on dépasse vers le blanc — le même sursaut —, et l'on retombe sur l'émail. Monter depuis le noir, comme la nuit, donnait un flash noir sur un panneau clair : l'exact contraire de ce que l'animation veut dire. */ --wake-0: #DEDCD5; --wake-flash: #FFFFFF; --wake-2: #F8F6F1; --eteint-fond: #DEDCD5; --eteint-label: .3; /* ── LE MÉTAL EST CHAUD, PARCE QUE LA PLAQUE L'EST ─────────────────────── Tous les gris de jour étaient FROIDS — b* entre −2 et −8, c'est-à-dire bleutés — posés sur un émail qui, lui, est chaud : b* +3,1. Deux températures de couleur qui se contredisent sur le même panneau, et l'œil le lit comme du « gris d'écran » plutôt que comme de la matière. C'est ce qui choquait. La nuit n'avait pas ce problème : son verre est froid et son métal aussi, les deux s'accordent. L'inversion a éclairci les gris sans jamais leur demander de suivre la plaque. Chaque gris garde donc exactement sa luminance et prend la DIRECTION chromatique de l'émail, à 85 % de son intensité — le métal est un peu moins coloré que la plaque, mais de la même famille. Calculé, pas choisi. ── LES ORGANES DE COMMANDE, DE JOUR ──────────────────────────────────── La pièce ne change pas de nature, elle change de lumière. Le corps reste plus sombre que la platine — sans quoi le bouton se fondrait dans la tôle et l'on ne verrait plus qu'il dépasse — mais il cesse d'être noir : sur un panneau clair, un poussoir noir est le seul trou de l'écran, et l'œil y va avant d'aller à la mesure. Le modelé garde son sens : clair en haut, sombre en bas. C'est la même règle que le bezel — la lumière ne change pas de place entre le jour et la nuit, seul son niveau monte. */ ── CE QUI REND UN BOUTON PERCUTANT N'EST PAS SA VALEUR, C'EST SON RELIEF Premier essai : un corps à peine plus sombre que la platine. Mesuré, il s'en détachait même mieux que la nuit — 6,6 L* d'écart contre 4,4 — et pourtant il paraissait plat, pendant que celui de nuit saute aux yeux. C'est que la nuit ne le détache pas par sa valeur : son corps est presque au niveau de la platine. Elle le détache par la TRANCHE, prise par la lumière sur 21,5 L* de haut en bas, et par l'ombre qu'il porte. Le bouton ne se voit pas parce qu'il est plus sombre, il se voit parce qu'il est BOMBÉ. On garde donc l'écart à la platine modéré — un bouton beaucoup plus sombre ferait un trou, ce qui était le défaut de départ — et l'on porte le modelé : 24 L* sur la tranche, 13 sur la face, et une ombre plus franche. C'est le relief qui traverse les deux palettes, pas le niveau. */ --btn-edge-hi: #E9E8E2; --btn-edge-mid: #CCCAC5; --btn-edge-lo: #A5A49F; --btn-face-hi: #D6D4CF; --btn-face-mid: #C5C3BE; --btn-face-lo: #B1B0AB; --btn-bevel-a: #A2A19C; --btn-bevel-b: #F3F1EC; --knob-edge-hi: #EBEAE4; --knob-edge-mid: #CECCC7; --knob-edge-lo: #A4A39E; --knob-face-hi: #DAD8D3; --knob-face-mid: #CAC8C3; --knob-face-lo: #B6B5B0; /* L'ombre reste sombre — une ombre claire n'existe pas — mais un panneau clair DIFFUSE : elle s'adoucit beaucoup. */ --organe-ombre: #42413D; --organe-ombre-o: .38; /* Le puits de montage : sur du métal clair, une ombre circulaire large vire vite au halo sale. Elle reste, mais ténue — c'est un jeu de montage d'un demi-millimètre, pas un cratère. */ --organe-puits: #878681; --organe-puits-o: .13; /* Une absence reste une absence : ces creux restent les points les plus sombres de la pièce, parce qu'aucune lumière n'y entre. Mais ils prennent la teinte de la matière au lieu du noir d'écran — un trou de vis dans du gris clair est gris foncé, pas noir. */ --organe-creux: #B1AFAA; --organe-trou: #999793; --organe-gorge: #ABA9A4; --organe-arete: #878681; /* La molette garde du mordant : ce sont des stries, et une strie est une ombre franche — c'est ce qui donne la prise en main d'un bouton. */ --organe-moletee:#686763; /* Sur un métal clair, une arête au jour est FRANCHEMENT blanche : il n'y a plus de pénombre à ménager, et un voile ne se verrait pas. L'ombre, elle, s'adoucit — une pièce claire diffuse. C'est la même asymétrie que partout : la lumière gagne, l'ombre perd. */ /* Sur un corps de bouton gris moyen, l'encre est SOMBRE — et franchement, sinon on lit un bouton hors service. */ --annonce-fond: #E4E2DB; /* Le cabochon éteint devient une pastille sourde, pas un trou : la teinte se mêle à un gris moyen chaud au lieu du noir. Et le cœur d'une lentille ALLUMÉE reste blanc — une lampe brille de la même façon sous toutes les lumières ; c'est sa tranche qui cesse d'être noire. */ /* Les deux teintes de cabochon suivent la règle des autres : chroma maximale à luminance tenable. */ --av-yellow: #C79A00; --av-blue: #3A6BE8; /* Une lampe blanche allumée reste CLAIRE le jour — c'est une source, pas une encre. Mais une source claire sur une platine claire ne se verrait plus : on la pose juste au-dessus de la platine, et c'est sa tranche sombre qui la découpe. */ --av-white-vif: #FFFFFF; --led-reflet: rgba(255, 255, 255, .55); --verre-reflet: 96, 110, 130; --verre-tranche-lum: 110, 125, 145; --verre-voile: 120, 140, 165; --verre-k: 1.7; --tambour-fond: #F1EFE9; --tambour-encre: var(--av-white); --tambour-fond-dec: #565C63; --tambour-encre-dec: #F4F2EC; --tambour-creux: rgba(90, 86, 78, .20); --tambour-creux-dec: rgba(0, 0, 0, .28); --rainure: #C8C5BE; --bande-fond: #F1EFE9; --puits-fond: #DAD7D0; --puits-bord: #CFCCC5; --led-fond-eteint: #9A958C; --led-bord-eteint: #7E7A72; --led-nue: #C4C0B8; --led-nue-2: #A8A49C; --led-coeur: #FFFFFF; --led-tranche: #6E6A62; --organe-encre: #353430; --organe-encre-faible:#63625E; /* La fenêtre de consigne cesse d'être un trou noir : un creux léger dans la platine, cerné de la teinte qui dit « consigne ». */ --consigne-fond: rgba(24, 30, 38, .07); --consigne-bord: rgba(0, 152, 188, .55); /* Un aplat clair ne reçoit qu'un voile : au-delà, ce n'est plus un reflet, c'est une bande de peinture blanche. */ --metal-lustre: rgba(255, 255, 255, .34); --metal-lum-fine: rgba(255, 255, 255, .9); --metal-lum-arete: rgba(255, 255, 255, .95); --metal-ombre-arete: rgba(85, 82, 76, .24); --organe-ligne: rgba(70, 78, 88, .38); /* Une encre posée sur une teinte VIVE reste sombre dans les deux palettes : un ambre d'alerte et un vert de marche sont clairs de jour comme de nuit, et l'on n'écrit pas en clair sur du clair. */ --organe-encre-vive: #0E0D06; --cartouche-fond:#CECCC7; --pin-fond: #FFFFFA; --pin-bord: rgba(60, 68, 78, .45); --pin-bord-vif: rgba(40, 48, 58, .8); --pin-encre: rgba(50, 58, 68, .78); /* Le coin « simulé » retourne ses valeurs, pas son principe : l'angle doit se voir sur l'émail, donc il fonce ; l'hypoténuse doit s'y fondre, donc elle s'éclaircit. */ --sim-angle: #64635F; --sim-mi: #94938E; --sim-fondu: #D8D6CF; --sim-encre: #F6F4EF; --sim-grave: rgba(0, 0, 0, .22); --glass-cerne: rgba(112, 104, 90, .20); --glass-tranche: transparent; --glass-creux: transparent; --glass-vignette: transparent; /* ── LA QUINCAILLERIE ──────────────────────────────────────────────────── Le bezel monte en luminosité SANS retourner son dégradé : la lumière reste zénithale. C'est ce qui garde au cadre son relief au lieu de le creuser. ── MAIS SON AMPLITUDE SE RESSERRE, ET LA MESURE SEULE NE LE DIT PAS ──── Premières valeurs : 21,4 L* du haut au bas, contre 18,1 la nuit. Presque le même écart — et pourtant le cadre de jour paraissait creusé, tirant lourdement vers le gris en bas, là où celui de nuit se remarque à peine. L'écart en L* n'est pas le bon critère ici, parce qu'il suppose une perception uniforme sur toute l'échelle. Elle ne l'est pas : dans les HAUTES LUMIÈRES, l'œil sépare bien mieux deux nuances voisines — et l'écran lui-même écrase les basses, si bien que les trois gris du bezel de nuit se confondent presque. Vingt L* entre 94 et 73 se voient ; les mêmes vingt entre 28 et 9 ne se voient pas. C'est donc L'EFFET qui se conserve, pas la valeur — la même règle que le creux du verre, trouvée pour la même raison. L'amplitude tombe à 11,6 L* du haut au bas, et l'arête externe passe de 36 à 24 L* sous le haut : le cadre garde son relief, il cesse de se creuser. */ --bezel-hi: #F5F3EE; --bezel-mid: #E7E6E1; --bezel-lo: #D4D2CD; --bezel-edge: #B2B0AB; --moyeu: #C0BFBA; --moyeu-bord: #94928E; --moyeu-vis: #767470; /* ── LES ENCRES — imprimées, non allumées ──────────────────────────────── `--av-white` porte mal son nom depuis qu'il désigne un rôle plutôt qu'une teinte : c'est L'ENCRE PRINCIPALE, celle de la valeur, des majeures et des chiffres. Le fichier reproche ailleurs aux jetons de se nommer par leur couleur ; celui-ci en est le dernier exemple, et il faudra le renommer le jour où l'on touchera aux 32 endroits qui l'emploient. */ /* Ces six-là ne sont pas choisies à l'œil : elles sont RÉSOLUES. Pour chacune, on cherche la valeur qui retrouve exactement le rapport de contraste qu'elle avait la nuit sur le même élément, en ne bougeant que la clarté. Toutes tombent à moins de 1 % de leur cible — une encre grise s'inverse parfaitement, et il n'y a aucune raison de s'en contenter de moins. */ --av-white: #14120E; /* -2 % */ --av-white-dim: #95948F; /* 0 % */ --av-grey: #82807C; /* 0 % */ --engrave: #5E5D59; /* 0 % */ --engrave-dim: #8F8E89; /* 0 % */ --cadran-piste: #DBD9D4; /* 0 % */ /* La fenêtre de lecture creusée sous le moyeu. Sur le verre noir c'est un trou noir cerné de blanc ; sur l'émail, un creux pâle cerné d'un filet sombre. Ces deux-là portent un repli dans `dial-round.js`, qui vaut la nuit : sans redéfinition ici, la fenêtre restait une tache grise au milieu du cadran clair. */ --fenetre-fond: rgba(24, 30, 38, .05); --fenetre-bord: rgba(24, 30, 38, .28); /* L'ombre ne s'inverse pas : elle s'adoucit. Un cadran clair diffuse, et une ombre portée y est plus large et plus pâle — jamais claire. */ --aiguille-ombre: rgba(24, 30, 38, .20); --bug-bord: #BCD8E2; /* RESTE CYAN : le repère de consigne porte un code, et le réchauffement général des gris l'a un instant rendu neutre — il n'est pas un gris */ /* ── LE CODE COULEUR NE CHANGE PAS DE SENS, SEULEMENT DE LUMIÈRE ───────── Mêmes teintes, imprimées au lieu d'être allumées : un vert reste un vert, mais un vert qui BRILLE sur du noir n'est pas le même pigment qu'un vert qui s'imprime sur de l'émail. Les arcs de couleur sur cadran clair sont d'ailleurs l'usage le plus ancien — un anémomètre porte ses plages verte, jaune et rouge sur fond clair depuis toujours. */ /* ── ET ELLES NE S'INVERSENT PAS TOUTES AUSSI BIEN ─────────────────────── Le solveur donne un résultat qu'il faut regarder en face, parce qu'il dit quelque chose de la norme elle-même. En cherchant, pour chaque teinte, la valeur de jour qui retrouve son écart perceptuel de nuit — à teinte conservée, à chroma reconnaissable, et au-dessus du seuil graphique de 3:1 — on obtient deux familles : · Le ROUGE et le MAGENTA s'inversent à écart NUL, et sans même s'assombrir. Leur chroma fait tout le travail : ils étaient déjà loin du noir par la couleur, ils restent loin du blanc par la couleur. · Le VERT, le CYAN et l'AMBRE accusent un déficit de 20 à 30 %, et ce déficit est IRRÉDUCTIBLE — on l'a cherché à toutes les chromas, il ne descend pas. Ce sont précisément les trois teintes dont la version de nuit est CLAIRE : elles se détachaient du verre noir en BRILLANT, et sur de l'émail on ne peut plus briller. Pousser plus loin donne, le solveur l'a proposé tel quel, `#010905` pour le vert et `#0A0700` pour l'ambre : du noir. La distance maximale, et plus aucune couleur. La palette SAE n'est donc pas symétrique, et il n'y a pas à le lui reprocher : elle a été conçue pour un support qui ÉMET. On garde donc la teinte — c'est elle qui porte le sens, et une caution qui vire au brun n'est plus une caution — et l'on compense le déficit par la SURFACE : en jour, les arcs de plage sont plus épais (voir `instruments.css`). C'est exactement ce que fait un anémomètre à cadran blanc depuis toujours, et c'est la raison pour laquelle ses arcs sont larges alors que ceux d'un instrument rétroéclairé sont fins. */ /* ── LA CHROMA PASSE DEVANT LE RAPPORT ─────────────────────────────────── Premières valeurs : résolues en cherchant à retrouver le CONTRASTE qu'une teinte avait sur le verre noir. Elles y arrivaient — 5 à 6:1 sur l'émail — et le résultat était sourd : un ambre devenu brun de moutarde, un vert tirant sur le vert-de-gris. La mesure était bonne, la question était mauvaise. Sur un fond noir, une teinte se détache en BRILLANT : son rapport de luminance fait tout le travail, et la chroma suit. Sur un fond clair elle ne peut plus briller — seule sa CHROMA la distingue, et chercher malgré tout un rapport de 6:1 revient à l'assombrir jusqu'à la vider de sa couleur. C'est ce qui s'était produit : −31 % de chroma sur l'ambre, −36 % sur le vert. Ces valeurs-ci ne cherchent plus un rapport, elles cherchent la CHROMA MAXIMALE que chaque teinte peut tenir sans descendre sous son plancher de lisibilité. Ce sont les couleurs les plus vives possibles à ce ton — le solveur balaie L* et C à teinte constante et garde le point le plus coloré. Résultat : le rouge et le magenta GAGNENT en chroma sur leur version de nuit (+13 % et +25 %), le vert et l'ambre n'en perdent qu'une dizaine de pour cent, là où les premières valeurs en perdaient un tiers. LE PLANCHER EST DESCENDU À ~2:1, et c'est ce qui change tout. À 3:1, le vert perdait encore 13 % de chroma et l'ambre 11 ; à 2,1, ils retrouvent EXACTEMENT celle de la nuit — vert −1 %, ambre 0 %, cyan +4 % — pendant que le rouge et le magenta la dépassent (+13 %, +41 %). La palette de jour est alors aussi colorée que celle de nuit, ce qu'on croyait impossible. Ce plancher se défend : ce sont des SURFACES qu'on repère, pas des textes qu'on déchiffre. Un arc de plage fait 3,9 px de large sur toute une circonférence, un voyant remplit sa pastille. Ce qui doit se LIRE — une valeur, un libellé — prend `--av-*-ecrit`, plus sombre, juste en dessous. Mesuré par `bin/palette-miroir.mjs`. */ --av-green: #00BF6A; --av-cyan: #00B6E1; --av-magenta: #FF00FF; --av-red: #FF0019; --av-amber: #EEA100; /* ── CE QUI S'ÉCRIT, PLUTÔT QUE CE QUI SE REPÈRE ───────────────────────── Un vert éclatant sur de l'émail est parfait en arc de dix pixels et illisible en libellé de dix points. La nuit n'a pas ce problème : la même teinte y est claire sur fond noir, donc lisible à toute taille. Le jour demande deux niveaux — c'est la surface qui décide, pas la couleur. */ --av-green-ecrit: #00753E; --av-cyan-ecrit: #006C88; --av-magenta-ecrit: #A0007F; --av-red-ecrit: #C4000F; --av-amber-ecrit: #8A5E00; --av-green-dim: #A8D8BE; --av-cyan-dim: #A8CFDC; --av-magenta-dim: #DCB2D4; --av-amber-dim: #DCC49A; --av-red-dim: #E0B6B2; } /* ── LES ENCRES DE TRACÉ ───────────────────────────────────────────────────── Une courbe n'est pas un voyant. Les couleurs de MESURE — `--av-cyan` et ses sœurs — sont normées pour un verre NOIR : claires, lumineuses, faites pour briller sur du sombre. Posées sur un cadran de jour, elles se délavent : un trait d'un pixel en cyan clair sur un fond ivoire ne se voit plus. Les tracés ont donc leurs propres encres. La nuit, ce sont exactement les couleurs normées — rien ne change, et c'est voulu. Le jour, ce sont leurs équivalents SOMBRES et saturés : la même identité de voie, la même lecture au premier coup d'œil, mais une encre qui mord sur du clair. Elles servent aussi à la miniature de navigation, qui est le même signal en plus petit et n'a aucune raison d'obéir à une autre règle. */ :root { --trace-1: #3FC8F0; --trace-2: #21D07A; --trace-3: #FFB020; --trace-4: #FF5AD8; --trace-5: #E9EFF5; --trace-6: #4A7BFF; } :root[data-instr="jour"] { --trace-1: #0C6F92; /* cyan — encre de bleu de plan */ --trace-2: #0E7A45; /* vert */ --trace-3: #9A6200; /* ambre */ --trace-4: #A8207F; /* magenta */ --trace-5: #2B3138; /* la « blanche » devient l'encre la plus foncée */ --trace-6: #1F4BC4; /* bleu */ } /* ── LES ENCRES DE GRILLE ──────────────────────────────────────────────────── La nuit, ce sont des gris qui ÉCLAIRCISSENT le verre noir — le quadrillage se devine sans se remarquer. Le jour, il faut l'inverse : des gris qui l'assombrissent, et très peu, sinon la grille passe devant la courbe. Ce ne sont pas des valeurs symétriques mais des valeurs CHOISIES : dans les deux cas, ce qui se voit quand on le cherche et disparaît quand on regarde la mesure. Voir `.g-grid` dans `instruments.css`. */ :root { --grille: #161C23; --grille-fort: #202830; --grille-axe: #2A333C; } :root[data-instr="jour"] { --grille: #DEDBD3; --grille-fort: #CFCBC1; --grille-axe: #BEB9AD; }