/* GÉNÉRÉ par scripts/generer_jetons_vitrine.py — NE PAS ÉDITER À LA MAIN. * * Copie exacte de `assets/css/tokens.css`, LA source unique des jetons de * design (annexe F §2.1, §9), partagée par l'app web, le poste et la vitrine. * Un jeton qui manque au site s'ajoute dans le fichier source, puis : * * .venv/bin/python scripts/generer_jetons_vitrine.py * * Ce qui ne sert qu'au site porte le préfixe `--pixiel-vitrine-`. La parité * est gardée par `make lint` et par tests/test_jetons_vitrine.py. */ /* ========================================================================== Jetons de design Pixiel — LA source unique (annexe F §2.1, §4, §9). L'IDENTITÉ VISUELLE DÉFINITIVE (19 septembre 2026). Le document d'autorité est `static/identite/LISEZ-MOI.txt`, livré avec les logos : quatre couleurs par thème, et Poppins. ───────────────────────────────────────────────────────────────────────── 5 OCTOBRE 2026 — LE STYLE « À LA STRIPE » (annexe F §2.2, v0.4). Demande de Jocelin : « un style se rapprochant de Stripe, ou flowninja.com ». Fond #F6F9FC, surfaces blanches, texte bleu nuit de l'identité, filets et ombres courtes teintés du bleu nuit, action au bleu-violet de l'identité (#4E62B8), sombre en bleu nuit. Les paragraphes ci-dessous racontent les états d'avant (papier chaud, relief) : leur RAISONNEMENT sur le contraste tient toujours, leurs VALEURS ont été remplacées — la garde de contraste a été rejouée sur les nouvelles, verte dans les deux thèmes. ───────────────────────────────────────────────────────────────────────── LES NEUTRES SONT REDEVENUS CHAUDS (21 septembre 2026, constat de Jocelin). « L'interface a perdu sa chaleur et fait générique. Fond gris-bleu froid, boutons bleus partout, l'ensemble ressemble à n'importe quel outil SaaS. La version précédente, avec ses fonds crème et ses surfaces en relief, avait une chaleur de studio photo que je veux retrouver. » Le 19 septembre, j'avais écrit ici qu'« un bleu nuit ne se pose pas sur un papier chaud », et j'en avais tiré que les NEUTRES devaient devenir froids eux aussi. La prémisse était juste, la conclusion fausse — et c'est elle qui a rendu le produit générique : une fois le fond, les surfaces, les bordures et les textes secondaires teintés de bleu, il ne restait plus aucune surface à laquelle le bleu de la marque puisse s'opposer. Une couleur d'accent n'accentue que ce qui n'est pas d'elle. La règle est donc inversée, et elle est celle de Jocelin : **base chaude, accents froids**. Les neutres repartent de la famille crème et papier de l'ancienne version ; le bleu et le violet du logo deviennent des ACCENTS — action principale, état actif, sélection, liens, focus, là où l'œil doit aller — et nulle part ailleurs. Aucune grande zone n'est teintée de bleu. Le mode sombre suit la même logique : un sombre CHAUD (#1A1714, un brun très sombre), pas un bleu nuit uniforme. CE QUI N'A PAS CHANGÉ : les trois couleurs de l'identité, aux mêmes valeurs (#4387CF, #4E62B8, #5B2C94), la police Poppins, l'échelle typographique, et les quatre sémantiques. On n'a pas changé d'identité : on lui a rendu un fond sur lequel elle se voit. ───────────────────────────────────────────────────────────────────────── clair #101F2F bleu nuit · #4387CF bleu · #4E62B8 bleu-violet · #5B2C94 violet sombre #FFFFFF · #5A9BE0 · #7186DA · #9A7EE6 TROIS CHOSES QUI NE SE DEVINENT PAS, et qui sont MESURÉES (le détail et les chiffres vivent dans docs/tri-retouche/decisions.md, I-02) : 1. L'ACTION PRINCIPALE EST LE VIOLET #5B2C94. C'est la seule des trois couleurs chromatiques qui tienne comme texte sur toutes les surfaces claires (9,41 sur blanc, quand le bleu ne fait que 3,75), et le blanc posé dessus tient aussi (9,41). C'est en plus la couleur d'emphase du logo — le « .com » et le coin pixellisé. Son écart de teinte avec le bleu de structure (267° contre 211°) fait qu'un bouton ne se lit jamais comme un lien. 2. LE BLEU DE L'IDENTITÉ EST UN APLAT, PAS UN TEXTE. #4387CF rend 3,75 sur du blanc : il échoue à AA comme texte. On le garde tel quel là où il est une surface (`--pixiel-marque`) et on l'assombrit là où il est du texte (`--pixiel-marque-texte`, #2A66A6). Le respect de l'identité n'est pas d'écrire la même valeur partout, c'est de la garder là où elle se voit. 3. LE TEXTE POSÉ SUR LE BLEU EST SOMBRE. Blanc sur #4387CF = 3,75 : refusé. #101F2F donnerait 4,45 — encore sous la barre —, donc c'est le bleu nuit APPROFONDI #0B1622 (4,87). Le logo lui-même pose #101F2F contre #4387CF : la paire est de l'identité, pas une invention. Les QUATRE COULEURS SÉMANTIQUES ne bougent pas : une alerte rouge ne devient pas violette. Leur voisinage de teinte avec la marque (le bleu « information » contre le bleu de marque) est assumé et sans danger, parce qu'aucune information de ce produit n'est portée par la couleur seule (annexe F §2.2) : un bandeau porte toujours son icône et son mot. Contraste : chaque paire texte/surface de ce fichier est vérifiée par tests/test_design_contraste.py (AA : 4,5 pour le texte, 3 pour les éléments d'interface), dans les deux thèmes. Modifier un jeton = relancer le test. Aucune exemption n'existe, et aucune n'a été ajoutée. ========================================================================== */ :root { color-scheme: light; /* --- NEUTRES CHAUDS — le papier du studio, jamais un gris-bleu ---------- LA MARCHE D'ESCALIER EST MESURÉE, pas choisie au jugé : c'est elle qui rend le relief possible. Le néomorphisme a besoin d'un fond de TON MOYEN pour que la lumière du haut-gauche et l'ombre du bas-droite aient chacune de la place. Le fond froid du 19 septembre était à 0,88 de luminance et ses cartes à 0,93 : cinq centièmes d'écart, une lumière blanche posée sur du presque-blanc — le relief ne s'était pas « enlevé », il n'avait plus de support. Ici le fond est à 0,84 et les cartes à 0,94 : dix centièmes, le double, et la matière revient sans qu'on touche à une seule ombre. */ --pixiel-fond: #F6F9FC; /* le fond de page : papier chaud */ --pixiel-surface: #FFFFFF; /* les cartes, extrudées du fond */ --pixiel-surface-haute: #FFFFFF; /* une surface active, plus proche */ --pixiel-surface-creuse: #F1F5F9; /* champs, zones de dépôt : en creux */ --pixiel-surface-voile: rgb(255 255 255 / 0.86); /* en-tête translucide */ /* Les bordures et les ombres sont BRUNES, pas noires ni bleues : une ligne grise sur du papier crème se voit comme une salissure. */ --pixiel-bordure: rgb(16 31 47 / 0.10); --pixiel-bordure-forte: rgb(16 31 47 / 0.20); --pixiel-encre: #101F2F; /* le texte : un noir chaud */ --pixiel-encre-2: #425466; /* le texte secondaire */ --pixiel-encre-3: #5A6B7E; /* légendes, indices — encore AA */ --pixiel-encre-inverse: #FFFFFF; /* texte sur fond de marque/accent */ /* --- La marque et l'action --------------------------------------------- */ --pixiel-marque: #4387CF; /* LE bleu de l'identité — aplats, états actifs */ --pixiel-marque-forte: #5A9BE0; /* le survol : plus CLAIR, le texte est sombre */ /* LES TEINTES DOUCES SONT MÊLÉES AU PAPIER. Un bleu pâle froid posé sur du crème se lit comme une tache ; mêlé de la crème du fond, il devient une surface du même monde — et il reste du bleu. */ --pixiel-marque-douce: #E8EFFA; /* fond teinté marque (chips, actifs) */ --pixiel-marque-texte: #2A66A6; /* le bleu ASSOMBRI : voir la note ci-dessous */ --pixiel-accent: #5B2C94; /* LE violet de l'identité : l'accent, en touche */ --pixiel-accent-forte: #4A2379; --pixiel-accent-douce: #F0EAF8; --pixiel-accent-texte: #5B2C94; /* le violet tient comme texte : 9,41 sur blanc */ --pixiel-sur-accent: #FFFFFF; /* texte posé sur l'accent */ --pixiel-sur-marque: #0B1622; /* texte posé sur la marque — SOMBRE, voir la note */ /* L'ACTION A UN NOM (arbitrage de Jocelin, 19 septembre 2026 : « les boutons violets en couleur principale, je ne suis pas fan, pars plutôt sur le bleu du logo Pixiel »). C'est le BLEU qui agit, et le violet reste une touche — l'ordre du logo lui-même : bleu dominant, violet en pointe. Et le rôle porte désormais son PROPRE jeton. C'était la faute de ma première version : « la couleur d'action » n'avait pas de nom, elle était `accent` — d'où le conflit entre un bouton d'action et une pastille teintée d'accent, et d'où le coût d'en changer. Changer d'avis tient maintenant en trois lignes. Le bleu de l'action est le bleu de la marque ASSOMBRI (#2A66A6, déjà dans le kit comme `marque-texte`). Posé tel quel, #4387CF n'accepte que du texte sombre (3,75 contre du blanc, sous AA) : le bouton était lisible mais MOU — vu sur la capture, il avait perdu la présence d'une action dominante. Assombri, il porte du blanc à 5,92, et le bouton redevient ce qu'il doit être. Mesuré, pas choisi au jugé. */ --pixiel-action: #4E62B8; /* le bleu de la marque, assombri */ --pixiel-action-forte: #3D4E99; /* survol : plus FONCÉ, le texte est blanc */ --pixiel-sur-action: #FFFFFF; /* texte posé sur l'action */ /* --- Sémantique (4 couleurs, chacune texte + fond doux) ---------------- */ --pixiel-succes: #1A6B43; --pixiel-succes-douce: #DCF1E4; --pixiel-attention: #8A5200; --pixiel-attention-douce: #F8E8C8; --pixiel-erreur: #B42318; --pixiel-erreur-douce: #F9DEDB; --pixiel-information: #1D5FA3; --pixiel-information-douce: #DCE8F6; /* --- Focus, sélection — le bleu-violet de l'identité ------------------- */ --pixiel-focus: #4E62B8; --pixiel-anneau-focus: 0 0 0 3px rgb(78 98 184 / 0.40); /* --- Matière néomorphe (annexe F §2.2 : les surfaces, jamais les boutons) --- L'OMBRE EST BRUNE (rgb 87 70 50), jamais noire ni bleue. C'est la moitié du réglage que la palette froide avait perdue : une ombre bleu nuit sur un papier crème le verdit, et l'œil lit « sale » avant de lire « en relief ». L'autre moitié est l'écart de luminance entre le fond et la surface, rétabli plus haut. Les valeurs sont celles de la version chaude, à l'opacité près : la lumière blanche monte (0,85 → 0,9) parce que le fond est un cran plus sombre qu'avant, et l'ombre avec elle. */ /* L'OMBRE PORTÉE BLANCHE EST RETIRÉE (revue du 22 septembre 2026). Le néomorphisme pose DEUX ombres : une sombre en bas à droite, une BLANCHE en haut à gauche, qui simule une lumière rasante. Sur un fond crème, cette seconde ombre à 0,9 d'opacité fait un halo laiteux autour de chaque surface — visible sur toutes les captures, et c'est ce que Jocelin a demandé de supprimer « partout ». Ce qui reste : l'ombre BRUNE (rgb 87 70 50), jamais noire ni bleue — une ombre bleu nuit sur un papier crème le verdit, et l'œil lit « sale » avant de lire « en relief ». Elle est légèrement renforcée, parce qu'elle portait le relief à deux et qu'elle le porte maintenant seule. ⚠️ CE N'EST PAS LA MÊME CHOSE QUE `--pixiel-creux*`, dont le blanc est `inset` : celui-là CREUSE un champ de saisie, il ne se projette pas autour. « Ombre portée » désigne ce qui sort de l'élément ; l'intérieur est conservé, et c'est une décision assumée, dite dans le compte rendu. Garde : tests/test_ombre_portee.py refuse un blanc hors `inset` dans ces jetons, des deux côtés du thème et dans les deux moitiés du produit. */ --pixiel-relief: 0 0 0 1px rgb(16 31 47 / 0.05), 0 2px 5px rgb(50 50 93 / 0.08), 0 1px 1px rgb(0 0 0 / 0.04); --pixiel-relief-doux: 0 0 0 1px rgb(16 31 47 / 0.05), 0 1px 2px rgb(50 50 93 / 0.06); --pixiel-relief-carte: 0 0 0 1px rgb(16 31 47 / 0.06), 0 2px 6px rgb(50 50 93 / 0.08), 0 1px 2px rgb(0 0 0 / 0.04); --pixiel-relief-carte-survol: 0 0 0 1px rgb(16 31 47 / 0.06), 0 13px 27px -5px rgb(50 50 93 / 0.18), 0 8px 16px -8px rgb(0 0 0 / 0.20); --pixiel-filet-carte: rgb(16 31 47 / 0.06); --pixiel-creux: inset 0 1px 2px rgb(16 31 47 / 0.06), inset 0 0 0 1px rgb(255 255 255 / 0.6); --pixiel-creux-doux: inset 0 1px 1px rgb(16 31 47 / 0.04), inset 0 0 0 1px rgb(255 255 255 / 0.5); /* --- Élévation Material (ce qui se clique) ----------------------------- */ --pixiel-elevation-1: 0 1px 2px rgb(16 31 47 / 0.10), 0 1px 3px rgb(50 50 93 / 0.10); --pixiel-elevation-2: 0 4px 8px -2px rgb(50 50 93 / 0.18), 0 2px 4px -2px rgb(0 0 0 / 0.12); --pixiel-elevation-3: 0 13px 27px -5px rgb(50 50 93 / 0.25), 0 8px 16px -8px rgb(0 0 0 / 0.30); --pixiel-ombre-champ: 0 1px 1px rgb(16 31 47 / 0.04); /* un champ, un bouton secondaire : posés, pas en relief */ --pixiel-voile: rgb(16 31 47 / 0.45); /* derrière un panneau latéral */ --pixiel-snackbar-action: #C9A9F2; /* l'action d'une snackbar (fond encre) */ /* --- Photos : fond neutre de visualisation, damier --------------------- */ --pixiel-photo-fond: #EEF2F7; --pixiel-photo-damier: rgb(16 31 47 / 0.06); /* LA SCÈNE D'INSPECTION RESTE SOMBRE DANS LES DEUX THÈMES — « une photo se juge sur du noir » —, mais sur un noir NEUTRE-CHAUD et non sur un bleu nuit : un fond teinté déplace la balance des couleurs de ce qu'on juge, et c'est le seul endroit du produit où cela se paie en tirages. */ --pixiel-inspection-fond: #1B1917; --pixiel-inspection-texte: #F2EDE5; --pixiel-inspection-voile: rgb(27 25 23 / 0.6); /* --- Illustrations d'état (SVG, thème-aware) --------------------------- */ --pixiel-illu-trait: #2A66A6; --pixiel-illu-remplissage: #E8EFFA; --pixiel-illu-papier: #FFFFFF; --pixiel-illu-ombre: rgb(16 31 47 / 0.14); --pixiel-illu-accent: #5B2C94; /* --- LE STYLE B (Designer, 14 octobre 2026, avec la session Vitrine design ; docs/chantier-armee/style-b-apps.md § 3). Ce que la charte de la vitrine AJOUTE aux jetons de l'app : le dégradé du logo, la NUIT des bandes et des bandeaux, les textes et les filets posés dessus, les halos. Le sombre du style B est une BANDE, présente aussi en thème clair : ces valeurs sont donc les mêmes dans les deux thèmes (le test exige qu'elles y soient écrites), sauf la lueur de l'action, qui suit l'action. Les textes sur la nuit sont mesurés AA par tests/test_design_contraste.py. La vitrine en reçoit la copie générée (scripts/generer_jetons_vitrine.py), comme le poste. ---------------------------------------------------- */ --pixiel-degrade: linear-gradient(120deg, #4387CF 0%, #4E62B8 48%, #5B2C94 100%); --pixiel-nuit-profonde: #0A1622; --pixiel-surface-sombre: #10202F; --pixiel-surface-sombre-haute: #16293B; --pixiel-encre-sombre: #F6F9FC; --pixiel-encre-sombre-2: #B7C4D2; --pixiel-lien-sombre: #A9C8EF; --pixiel-sur-sombre: #A9B6EC; --pixiel-succes-sombre: #3FB37A; --pixiel-filet-sombre: rgb(255 255 255 / 0.10); --pixiel-contour-sombre: rgb(255 255 255 / 0.45); --pixiel-voile-entete: rgb(10 22 34 / 0.82); --pixiel-ombre-sombre: 0 30px 60px -20px rgb(0 0 0 / 0.7), 0 0 0 1px rgb(255 255 255 / 0.10); --pixiel-halo: radial-gradient(closest-side, rgb(78 98 184 / 0.55), transparent), radial-gradient(40% 40% at 30% 60%, rgb(67 135 207 / 0.35), transparent 70%), radial-gradient(40% 40% at 70% 60%, rgb(91 44 148 / 0.4), transparent 70%); --pixiel-halo-doux: radial-gradient(closest-side, rgb(78 98 184 / 0.35), transparent); --pixiel-halo-bandeau: radial-gradient(560px 300px at 82% -20%, rgb(67 135 207 / 0.50), transparent 70%), radial-gradient(460px 260px at 12% 140%, rgb(91 44 148 / 0.45), transparent 70%); --pixiel-lueur-action: 0 8px 20px -10px #4E62B8; /* --- Géométrie et mouvement ----------------------------------------- */ --pixiel-rayon: 12px; /* cartes, panneaux */ --pixiel-rayon-grand: 16px; /* grandes surfaces, écrans de choix */ --pixiel-rayon-petit: 8px; /* boutons, champs, chips */ --pixiel-duree: 180ms; /* changements d'état (150–250 ms) */ --pixiel-duree-longue: 240ms; --pixiel-courbe: cubic-bezier(0.2, 0, 0, 1); --pixiel-cible: 44px; /* cible tactile minimale */ /* --- LA GÉOMÉTRIE DU SYSTÈME (chantier « L'armée », Designer, 9 octobre 2026 — docs/chantier-armee/systeme-design.md § 3). Ces sept nombres sont LES tailles que la recette mesure ; un écran qui en invente une autre est hors système. Ils ne dépendent pas du thème et ne sont écrits qu'ici, des deux côtés (le poste en reçoit la copie générée). ------------------ */ --pixiel-cible-rangee: 32px; /* un bouton DANS une rangée de liste */ --pixiel-dominante: 48px; /* l'action dominante d'un écran de travail */ --pixiel-dominante-rapport: 1.4; /* son aire ÷ celle du plus gros correctif */ --pixiel-poignee: 12px; /* une poignée de recadrage, à l'écran */ --pixiel-vignette: 48px; /* la vignette d'une rangée (lot, photo) */ --pixiel-temoin: 96px; /* un portrait témoin, en face d'un lot */ --pixiel-colonne-liste: 280px; /* la liste de gauche d'un écran de travail */ --pixiel-rayon-scene: 24px; /* style B : le panneau derrière un visuel */ --pixiel-boucle-min: 1.2s; /* style B : la boucle la plus courte d'un picto */ /* Ce qui ne sert QU'AU SITE vitrine : le préfixe le dit, et tests/test_jetons_vitrine.py le refuse dans les feuilles des apps. */ --pixiel-vitrine-titre-1: clamp(36px, 4.4vw, 58px); --pixiel-vitrine-titre-2: clamp(30px, 4vw, 48px); --pixiel-vitrine-largeur: 1200px; /* --- Typographie : Poppins, la police de l'identité ------------------ */ --pixiel-police-titre: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif; --pixiel-police-lecture: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif; --pixiel-police-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; } /* Le thème sombre : mêmes jetons, autres valeurs. La surface EST le bleu nuit de l'identité (#101F2F), que le LISEZ-MOI désigne comme le fond foncé de référence. Le relief est ATTÉNUÉ (§2.2) — une ombre noire sur un fond sombre ne détache rien, c'est le filet clair du bord qui découpe. */ /* LA NUIT DU STYLE B (annexe F § 12, 15 octobre 2026) : `.theme-nuit` pose le thème sombre sur UN sous-arbre — la barre latérale du web, la barre du logiciel —, même quand la page est en thème clair. Les mêmes valeurs que le thème sombre, donc la même garde de contraste ; jamais l'écran de séance (tests/test_style_b.py). */ .theme-nuit, :root[data-theme="sombre"] { color-scheme: dark; /* UN SOMBRE CHAUD, pas un bleu nuit uniforme (21 septembre 2026). Le brun très sombre #1A1714 est au thème sombre ce que le papier crème est au clair : la même famille, l'autre bout. Un bleu nuit aurait refait ici la faute du thème clair — plus aucune surface à quoi le bleu s'oppose. */ --pixiel-fond: #0A1622; --pixiel-surface: #10202F; --pixiel-surface-haute: #16293B; --pixiel-surface-creuse: #081320; --pixiel-surface-voile: rgb(16 32 47 / 0.88); --pixiel-bordure: rgb(246 249 252 / 0.10); --pixiel-bordure-forte: rgb(246 249 252 / 0.22); --pixiel-encre: #F6F9FC; --pixiel-encre-2: #B7C4D2; --pixiel-encre-3: #9AABBD; --pixiel-encre-inverse: #0A1622; --pixiel-marque: #5A9BE0; --pixiel-marque-forte: #8FBCEA; --pixiel-marque-douce: #17304A; --pixiel-marque-texte: #5A9BE0; /* Le violet du thème sombre est ÉCLAIRCI (#A88FEA au lieu de #9A7EE6) : sur une surface chaude il rendait 4,54 contre 4,5 exigés, une marge d'un centième. Un jeton qui ne tient que par un centième tombera au prochain réglage de surface — et personne ne saura pourquoi. */ --pixiel-accent: #A88FEA; --pixiel-accent-forte: #C0AEF2; --pixiel-accent-douce: #2A2340; --pixiel-accent-texte: #A88FEA; --pixiel-sur-accent: #0A1622; --pixiel-sur-marque: #0A1622; --pixiel-action: #7F92E6; --pixiel-action-forte: #A3B1EE; --pixiel-sur-action: #0A1622; --pixiel-succes: #6DCF9C; --pixiel-succes-douce: #123024; --pixiel-attention: #F0B455; --pixiel-attention-douce: #36290F; --pixiel-erreur: #F38D84; --pixiel-erreur-douce: #3A1D20; --pixiel-information: #86B8F5; --pixiel-information-douce: #13283D; --pixiel-focus: #7186DA; --pixiel-anneau-focus: 0 0 0 3px rgb(113 134 218 / 0.50); --pixiel-relief: 0 0 0 1px rgb(246 249 252 / 0.06), 0 2px 6px rgb(0 0 0 / 0.40); --pixiel-relief-doux: 0 0 0 1px rgb(246 249 252 / 0.05), 0 1px 3px rgb(0 0 0 / 0.35); --pixiel-relief-carte: 0 0 0 1px rgb(246 249 252 / 0.07), 0 2px 8px rgb(0 0 0 / 0.45); --pixiel-relief-carte-survol: 0 0 0 1px rgb(246 249 252 / 0.10), 0 13px 27px -5px rgb(0 0 0 / 0.60); --pixiel-filet-carte: rgb(246 249 252 / 0.08); --pixiel-creux: inset 3px 3px 8px rgb(0 0 0 / 0.5), inset -2px -2px 6px rgb(255 255 255 / 0.04); --pixiel-creux-doux: inset 2px 2px 5px rgb(0 0 0 / 0.4), inset -1px -1px 4px rgb(255 255 255 / 0.035); --pixiel-elevation-1: 0 1px 2px rgb(0 0 0 / 0.5), 0 1px 3px rgb(0 0 0 / 0.35); --pixiel-elevation-2: 0 2px 6px rgb(0 0 0 / 0.5), 0 6px 16px -6px rgb(0 0 0 / 0.6); --pixiel-elevation-3: 0 6px 14px rgb(0 0 0 / 0.55), 0 16px 32px -12px rgb(0 0 0 / 0.7); --pixiel-ombre-champ: 0 1px 1px rgb(0 0 0 / 0.30); --pixiel-voile: rgb(0 0 0 / 0.6); --pixiel-snackbar-action: #5B2C94; --pixiel-photo-fond: #14263A; --pixiel-photo-damier: rgb(246 249 252 / 0.05); --pixiel-inspection-fond: #121110; --pixiel-inspection-texte: #F2EDE5; --pixiel-inspection-voile: rgb(18 17 16 / 0.65); --pixiel-illu-trait: #5A9BE0; --pixiel-illu-remplissage: #17304A; --pixiel-illu-papier: #16293B; --pixiel-illu-ombre: rgb(0 0 0 / 0.45); --pixiel-illu-accent: #A88FEA; /* --- Le style B : les mêmes valeurs (une bande nuit reste nuit). --- */ --pixiel-degrade: linear-gradient(120deg, #4387CF 0%, #4E62B8 48%, #5B2C94 100%); --pixiel-nuit-profonde: #0A1622; --pixiel-surface-sombre: #10202F; --pixiel-surface-sombre-haute: #16293B; --pixiel-encre-sombre: #F6F9FC; --pixiel-encre-sombre-2: #B7C4D2; --pixiel-lien-sombre: #A9C8EF; --pixiel-sur-sombre: #A9B6EC; --pixiel-succes-sombre: #3FB37A; --pixiel-filet-sombre: rgb(255 255 255 / 0.10); --pixiel-contour-sombre: rgb(255 255 255 / 0.45); --pixiel-voile-entete: rgb(10 22 34 / 0.82); --pixiel-ombre-sombre: 0 30px 60px -20px rgb(0 0 0 / 0.7), 0 0 0 1px rgb(255 255 255 / 0.10); --pixiel-halo: radial-gradient(closest-side, rgb(78 98 184 / 0.55), transparent), radial-gradient(40% 40% at 30% 60%, rgb(67 135 207 / 0.35), transparent 70%), radial-gradient(40% 40% at 70% 60%, rgb(91 44 148 / 0.4), transparent 70%); --pixiel-halo-doux: radial-gradient(closest-side, rgb(78 98 184 / 0.35), transparent); --pixiel-halo-bandeau: radial-gradient(560px 300px at 82% -20%, rgb(67 135 207 / 0.50), transparent 70%), radial-gradient(460px 260px at 12% 140%, rgb(91 44 148 / 0.45), transparent 70%); --pixiel-lueur-action: 0 8px 20px -10px #7186DA; } /* Le réglage « Système » : le navigateur choisit, sans script. Le script d'amorce (base.html) pose `data-theme` explicitement dès que la préférence est connue ; cette règle ne sert qu'à « systeme ». Ces valeurs sont ENGENDRÉES des précédentes — deux listes écrites à la main finiraient par diverger, et le test l'exige. */ @media (prefers-color-scheme: dark) { :root[data-theme="systeme"] { color-scheme: dark; /* UN SOMBRE CHAUD, pas un bleu nuit uniforme (21 septembre 2026). Le brun très sombre #1A1714 est au thème sombre ce que le papier crème est au clair : la même famille, l'autre bout. Un bleu nuit aurait refait ici la faute du thème clair — plus aucune surface à quoi le bleu s'oppose. */ --pixiel-fond: #0A1622; --pixiel-surface: #10202F; --pixiel-surface-haute: #16293B; --pixiel-surface-creuse: #081320; --pixiel-surface-voile: rgb(16 32 47 / 0.88); --pixiel-bordure: rgb(246 249 252 / 0.10); --pixiel-bordure-forte: rgb(246 249 252 / 0.22); --pixiel-encre: #F6F9FC; --pixiel-encre-2: #B7C4D2; --pixiel-encre-3: #9AABBD; --pixiel-encre-inverse: #0A1622; --pixiel-marque: #5A9BE0; --pixiel-marque-forte: #8FBCEA; --pixiel-marque-douce: #17304A; --pixiel-marque-texte: #5A9BE0; /* Le violet du thème sombre est ÉCLAIRCI (#A88FEA au lieu de #9A7EE6) : sur une surface chaude il rendait 4,54 contre 4,5 exigés, une marge d'un centième. Un jeton qui ne tient que par un centième tombera au prochain réglage de surface — et personne ne saura pourquoi. */ --pixiel-accent: #A88FEA; --pixiel-accent-forte: #C0AEF2; --pixiel-accent-douce: #2A2340; --pixiel-accent-texte: #A88FEA; --pixiel-sur-accent: #0A1622; --pixiel-sur-marque: #0A1622; --pixiel-action: #7F92E6; --pixiel-action-forte: #A3B1EE; --pixiel-sur-action: #0A1622; --pixiel-succes: #6DCF9C; --pixiel-succes-douce: #123024; --pixiel-attention: #F0B455; --pixiel-attention-douce: #36290F; --pixiel-erreur: #F38D84; --pixiel-erreur-douce: #3A1D20; --pixiel-information: #86B8F5; --pixiel-information-douce: #13283D; --pixiel-focus: #7186DA; --pixiel-anneau-focus: 0 0 0 3px rgb(113 134 218 / 0.50); --pixiel-relief: 0 0 0 1px rgb(246 249 252 / 0.06), 0 2px 6px rgb(0 0 0 / 0.40); --pixiel-relief-doux: 0 0 0 1px rgb(246 249 252 / 0.05), 0 1px 3px rgb(0 0 0 / 0.35); --pixiel-relief-carte: 0 0 0 1px rgb(246 249 252 / 0.07), 0 2px 8px rgb(0 0 0 / 0.45); --pixiel-relief-carte-survol: 0 0 0 1px rgb(246 249 252 / 0.10), 0 13px 27px -5px rgb(0 0 0 / 0.60); --pixiel-filet-carte: rgb(246 249 252 / 0.08); --pixiel-creux: inset 3px 3px 8px rgb(0 0 0 / 0.5), inset -2px -2px 6px rgb(255 255 255 / 0.04); --pixiel-creux-doux: inset 2px 2px 5px rgb(0 0 0 / 0.4), inset -1px -1px 4px rgb(255 255 255 / 0.035); --pixiel-elevation-1: 0 1px 2px rgb(0 0 0 / 0.5), 0 1px 3px rgb(0 0 0 / 0.35); --pixiel-elevation-2: 0 2px 6px rgb(0 0 0 / 0.5), 0 6px 16px -6px rgb(0 0 0 / 0.6); --pixiel-elevation-3: 0 6px 14px rgb(0 0 0 / 0.55), 0 16px 32px -12px rgb(0 0 0 / 0.7); --pixiel-ombre-champ: 0 1px 1px rgb(0 0 0 / 0.30); --pixiel-voile: rgb(0 0 0 / 0.6); --pixiel-snackbar-action: #5B2C94; --pixiel-photo-fond: #14263A; --pixiel-photo-damier: rgb(246 249 252 / 0.05); --pixiel-inspection-fond: #121110; --pixiel-inspection-texte: #F2EDE5; --pixiel-inspection-voile: rgb(18 17 16 / 0.65); --pixiel-illu-trait: #5A9BE0; --pixiel-illu-remplissage: #17304A; --pixiel-illu-papier: #16293B; --pixiel-illu-ombre: rgb(0 0 0 / 0.45); --pixiel-illu-accent: #A88FEA; /* --- Le style B --- */ --pixiel-degrade: linear-gradient(120deg, #4387CF 0%, #4E62B8 48%, #5B2C94 100%); --pixiel-nuit-profonde: #0A1622; --pixiel-surface-sombre: #10202F; --pixiel-surface-sombre-haute: #16293B; --pixiel-encre-sombre: #F6F9FC; --pixiel-encre-sombre-2: #B7C4D2; --pixiel-lien-sombre: #A9C8EF; --pixiel-sur-sombre: #A9B6EC; --pixiel-succes-sombre: #3FB37A; --pixiel-filet-sombre: rgb(255 255 255 / 0.10); --pixiel-contour-sombre: rgb(255 255 255 / 0.45); --pixiel-voile-entete: rgb(10 22 34 / 0.82); --pixiel-ombre-sombre: 0 30px 60px -20px rgb(0 0 0 / 0.7), 0 0 0 1px rgb(255 255 255 / 0.10); --pixiel-halo: radial-gradient(closest-side, rgb(78 98 184 / 0.55), transparent), radial-gradient(40% 40% at 30% 60%, rgb(67 135 207 / 0.35), transparent 70%), radial-gradient(40% 40% at 70% 60%, rgb(91 44 148 / 0.4), transparent 70%); --pixiel-halo-doux: radial-gradient(closest-side, rgb(78 98 184 / 0.35), transparent); --pixiel-halo-bandeau: radial-gradient(560px 300px at 82% -20%, rgb(67 135 207 / 0.50), transparent 70%), radial-gradient(460px 260px at 12% 140%, rgb(91 44 148 / 0.45), transparent 70%); --pixiel-lueur-action: 0 8px 20px -10px #7186DA; } } @media (prefers-reduced-motion: reduce) { :root { --pixiel-duree: 0ms; --pixiel-duree-longue: 0ms; } }