/* ============================================================================================ THEME — UNIQUEMENT DES VARIABLES. Aucune règle de mise en page ici. ============================================================================================ Ce fichier est le levier de la MARQUE BLANCHE : l'installeur le réécrit avec les couleurs du distributeur, et rien d'autre ne bouge. C'est aussi pour cela qu'app.css ne contient AUCUNE couleur littérale — `bin/lint-ui.php` le vérifie, et refuse le commit qui en introduirait une. (Cette phrase a longtemps décrit un lint qui n'existait pas ; il a été écrit le 22/08/2026.) Les valeurs viennent des 16 maquettes fournies par le client (réponse Q35 : « la palette doit être calée sur les maquettes »). Elles ont été relevées dans les fichiers, pas approchées. ── DEUX JEUX, ET C'EST VOULU ────────────────────────────────────────────────────────────── L'écran est sombre, le document imprimé est sur papier. L'or n'est PAS le même dans les deux : #c6a25a à l'écran, #a8823f sur le papier. Ce n'est pas une incohérence de maquette, c'est une adaptation à l'impression — l'or clair de l'écran vire au jaune délavé sur une feuille. ⚠️ CONTRAINTE TECHNIQUE MAJEURE, mesurée : le moteur PDF (dompdf) NE COMPREND PAS les variables CSS. Les tokens « document » ci-dessous ne peuvent donc pas être utilisés tels quels dans un gabarit PDF : ils sont injectés en valeurs LITTÉRALES au moment du rendu. Sans cette précaution, les cinq gabarits sortiraient en noir et blanc — sans la moindre alerte, puisque du CSS non compris est simplement ignoré. ============================================================================================ */ :root { /* ── ÉCRAN — fonds, du plus profond au plus clair ─────────────────────────────────────── */ --ink-0: #0e1013; /* fond de page */ --ink-1: #12151a; /* barres, sidebar */ --ink-2: #1a1e24; /* cartes */ --ink-3: #21262e; /* éléments en relief : puces, champs, avatars */ --line: #2c323b; /* filets et bordures */ --line-2: #242a32; /* filets discrets */ /* ── ÉCRAN — texte ─────────────────────────────────────────────────────────────────────── */ --paper: #ece7dd; /* texte principal — un blanc cassé, jamais du blanc pur */ --muted: #9aa1ab; /* texte secondaire */ --muted-2: #828892; /* légendes, en-têtes de colonnes, mentions */ /* ══ DEUX FAMILLES DE COULEURS, ET ELLES NE DOIVENT PAS SE TOUCHER ═══════════════════════ A. LA MARQUE — ce qu'un distributeur a le droit de changer. B. LES STATUTS — la sémantique du produit, que personne ne change. ⚠️ DÉFAUT CORRIGÉ LE 22/08/2026, APRÈS L'AVOIR PROVOQUÉ. La première rédaction écrivait `--status-pending: var(--gold)`. Le banc de rebranding l'a montré en direct : passer l'accent de marque au bleu repeignait AUSSI le badge « en attente ». Un distributeur aux couleurs bleues aurait donc perdu la distinction visuelle entre « à traiter » et « accent décoratif » — sans jamais l'avoir demandé, et sans que rien ne le signale. C'est exactement ce que l'arbitrage Q35 avait prescrit d'éviter. Les deux familles partagent aujourd'hui la même valeur d'or : c'est une COÏNCIDENCE esthétique des maquettes, pas un lien. Elles s'écrivent donc en littéral chacune de son côté. Ne PAS « factoriser » l'or en une seule variable : la duplication est ici la garantie d'indépendance, et ce commentaire est là pour qu'on ne la prenne pas pour un oubli six mois plus tard. */ /* ── A. MARQUE (réécrite par l'installeur en marque blanche) ─────────────────────────── */ --brand-accent: #c6a25a; --brand-accent-dim: #9c7a3c; /* ── B. STATUTS (sémantique du produit — INDÉPENDANTE de la marque) ─────────────────── Constante sur les 16 maquettes. Elle se fige ICI, une fois : un écran futur qui inventerait sa propre convention rendrait le produit illisible — la même couleur voudrait dire « payé » à un endroit et « en retard » à un autre. or → en attente, à traiter rouge sourd → alerte, signature requise, avoir, montant négatif vert sauge → payé, à jour, conforme gris → neutre, dormant, expiré */ --status-pending: #c6a25a; --status-alert: #c07273; --status-ok: #8fa37a; --status-neutral: #828892; /* ── C. GRAPHIQUES (0.96.102, partiel `graphique` du kit) ───────────────────────────────── La couleur d'une SÉRIE de données — une troisième famille, indépendante de la marque ET des statuts. Un graphique ne dit ni « payé » ni « en retard » : lui prêter une couleur de statut ferait lire un état là où il n'y a qu'une identité ; lui prêter l'accent de marque ferait repeindre les séries par un distributeur qui ne change que son logo. Même raisonnement que la séparation A / B ci-dessus. Les deux premiers pas, sur fond sombre, de la palette de référence de la méthode dataviz, dans son ORDRE (une série suit sa couleur, jamais son rang). Mesures du 09/10/2026, contre --ink-1 (#12151a, le fond du graphique) : contraste 5,03:1 et 4,71:1 (seuil des marques : 3:1) ; lumière OKLCH 0,622 et 0,622, dans la bande sombre 0,48–0,67 ; séparation daltonienne ΔE 26,8 (protanopie, seuil 8) et en vision normale ΔE 31,8 (seuil 15). Sur --ink-2 (le survol) : 4,60 et 4,31:1. L'or de la marque (#c6a25a) a été écarté : trop clair pour la bande, et confondu avec « en attente ». Une troisième série n'est JAMAIS une couleur inventée : le partiel la refuse, l'écran fait un second graphique. */ --graphique-1: #3987e5; --graphique-2: #d95926; /* ── CONTRASTE — mesuré, pas supposé (23/08/2026) ──────────────────────────────────────── Le plan promet en trois endroits un « contraste vérifié ». Il ne l'était nulle part, et deux valeurs relevées sur les maquettes ne passaient pas : --status-alert #a2494a → 2,86:1 sur une carte. En dessous même du seuil de 3:1 des composants d'interface — et c'est LA couleur qui porte « alerte », « signature requise » et les montants négatifs. Celle qu'il faut voir. --muted-2 #6f757f → 3,61:1, alors qu'elle sert les légendes et les en-têtes de colonnes, c'est-à-dire du TEXTE, à petite taille. Les deux ont été ÉCLAIRCIES à teinte et saturation IDENTIQUES (359° / 38 % pour l'une, 216° / 7 % pour l'autre) jusqu'à franchir 4,5:1 sur le fond de carte, le plus clair des deux fonds — donc le pire cas. Nouvelles mesures : alerte 4,70:1, atténué 4,69:1. ⚠️ Ce sont les SEULES valeurs qui s'écartent des maquettes, et l'écart est documenté ici pour qu'on ne le prenne pas pour une erreur de relevé. Le banc ContrasteTest le vérifie désormais mécaniquement : la promesse du plan est tenue par une machine, plus par une phrase. Le jeu PAPIER (--doc-*) n'est pas concerné : il s'affiche sur fond clair. */ /* ── TYPOGRAPHIE ──────────────────────────────────────────────────────────────────────── Trois familles, trois rôles. Les polices de marque des maquettes (Fraunces, Inter, IBM Plex Mono) ne sont PAS chargées depuis un service externe : la politique de sécurité de contenu impose font-src 'self', et une instance en marque blanche ne doit dépendre d'aucun tiers pour s'afficher. Les replis système sont donc de vrais replis, choisis pour rester lisibles — pas une liste par acquit de conscience. ⚠️ ÉTAT RÉEL AU 22/08/2026 : les fichiers .woff2 ne sont PAS encore livrés. Ce sont donc les REPLIS qui s'affichent aujourd'hui, sur tous les écrans. L'arbitrage Q35 prévoit les trois fontes OFL auto-hébergées ; tant qu'elles ne sont pas dans /assets/fonts/ avec leurs @font-face, écrire « Fraunces » ici ne fait qu'exprimer une intention. Ne pas lire cette liste comme la preuve que les polices de marque sont servies. */ --font-display: Fraunces, "Iowan Old Style", Georgia, "Times New Roman", serif; --font-text: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --text-xs: 0.6875rem; /* 11px — légendes, en-têtes de colonnes */ --text-sm: 0.8125rem; /* 13px */ --text-base: 1rem; /* 16px — base, calibrée pour un public peu à l'aise avec l'écran */ --text-lg: 1.375rem; --text-xl: 1.625rem; --text-2xl: 1.875rem; /* ── ESPACEMENTS ──────────────────────────────────────────────────────────────────────── Échelle simple, multiples de 4. Une échelle trop riche ne se retient pas et finit contournée par des valeurs arbitraires. */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-8: 3rem; --radius-sm: 6px; --radius: 12px; --radius-lg: 14px; --radius-pill: 999px; /* ── STRUCTURE ────────────────────────────────────────────────────────────────────────── Le brief exige « full width bord à bord » : il n'y a donc PAS de largeur maximale de page. La sidebar, elle, est à 248px sur les maquettes. */ --sidebar-width: 248px; --topbar-height: 64px; /* ── CIBLES TACTILES ──────────────────────────────────────────────────────────────────── 40px minimum. Le public visé « ne comprend pas beaucoup l'informatique » : des cibles petites produisent des clics ratés, et un clic raté sur « Valider » se paie en support. */ --touch-min: 40px; --focus-ring: 2px solid var(--brand-accent); } /* ============================================================================================ TOKENS DU DOCUMENT IMPRIMÉ ============================================================================================ Relevés dans les 5 gabarits (maquettes 12 à 16). Servent à l'aperçu écran d'un document. ⚠️ Pour le rendu PDF réel, ces valeurs sont injectées EN LITTÉRAL par le moteur de gabarits : dompdf ignore var(). Cette duplication apparente est donc volontaire et documentée — la supprimer « pour éviter de se répéter » casserait silencieusement tous les PDF. ============================================================================================ */ :root { --doc-paper: #f7f4ee; --doc-ink: #23272e; --doc-ink-2: #3c4148; --doc-mut: #7a7f88; --doc-mut-2: #9aa0a8; --doc-line: #ddd6c8; --doc-gold: #a8823f; --doc-panel: #f1ecdd; --doc-ok: #5f7a4e; /* ── IMPRESSION D'UN ÉCRAN ────────────────────────────────────────────────────────────── Distinct des tokens « document » ci-dessus : il ne s'agit pas d'imprimer un contrat, mais de sortir sur papier une liste affichée à l'écran. Fond clair et encre franche, pour ne pas vider une cartouche sur un aplat sombre. Ces tokens existent pour que app.css n'ait JAMAIS besoin d'une couleur littérale, même dans son bloc @media print — la règle vaut partout, sinon elle ne vaut nulle part. */ --print-bg: #ffffff; --print-ink: #000000; --print-line: #999999; }