/* =========================================================================== JETONS TABULA — la seule source des couleurs, des espacements et des tailles =========================================================================== À IMPORTER EN PREMIER, avant toute autre feuille. Écrit AVANT le premier écran, et pas après : c'est la règle qui a coûté vingt allers-retours sur un autre projet quand elle n'a pas été tenue. TROIS RÈGLES, ET ELLES NE SE NÉGOCIENT PAS --------------------------------------------------------------------------- 1. UN JETON PORTE UN RÔLE, JAMAIS UNE VALEUR. `--tab-texte-principal`, pas `--tab-gris-fonce`. Un nom de valeur ment le jour du mode sombre : le « gris foncé » y devient clair, et le nom reste. 2. CHAQUE var() PORTE UNE VALEUR DE REPLI. Un fragment ouvert SANS cette feuille doit rester lisible. Sans repli, un `color: var(--tab-accent)` nu ne produit aucune erreur : la propriété est simplement abandonnée et le texte prend la couleur héritée. Le défaut est donc SILENCIEUX — le pire des deux. 3. AUCUNE COULEUR, AUCUN ESPACEMENT, AUCUNE TAILLE ÉCRITS EN DUR AILLEURS. Une valeur en dur ne suit pas le menu Apparence, ne bascule pas en mode sombre, et ne se voit nulle part. `verifier.sh` la désigne. Exception unique et volontaire : le gabarit de COURRIEL. Les clients de messagerie suppriment les feuilles de style et ne connaissent pas les variables CSS ; ses couleurs y sont écrites en dur, en styles « inline ». =========================================================================== */ :root { /* ========================================================================= 1. LES COULEURS DE MARQUE — la palette TABULA ========================================================================= */ --tab-bleu: #8DB3E2; /* référence, accents, liens, états actifs */ --tab-bleu-fonce: #5F8FC8; --tab-bleu-profond: #3F6FA9; --tab-bleu-moyen: #A9C7EA; /* palier entre le bleu et le bleu clair */ --tab-bleu-clair: #C9DCF3; --tab-bleu-tres-clair: #EAF2FB; /* LE FOND D'UN BLOC D'INFORMATION, et il lui faut son propre jeton. Signalé par David le 23/09/2026 : le bloc d'explication de la page Relances était ILLISIBLE en mode sombre. Il posait le fond `--tab-bleu-tres-clair`, qui reste clair de nuit, sous `--tab-texte-principal`, qui devient blanc cassé. Texte blanc sur fond blanc. Les trois autres fonds de message — succès, avertissement, erreur — ont leur variante sombre depuis toujours ; celui-ci était le seul à ne pas l'avoir. Un oubli de symétrie, pas une décision. POURQUOI UN JETON DÉDIÉ plutôt que redéfinir `--tab-bleu-tres-clair` en sombre : ce dernier sert AUSSI aux étiquettes « en attente » et « converti », aux tuiles et à la signature, qui posent dessus un texte BLEU PROFOND. Les rendre sombres aurait cassé ces quatre endroits-là pour en réparer trois. */ --tab-info-fond: #EAF2FB; /* ========================================================================= 2. LES COULEURS DE RÔLE ========================================================================= */ --tab-fond: #FCFBF7; /* le fond de la page : blanc cassé chaud */ --tab-surface: #FFFFFF; /* cartes, encadrés, champs */ --tab-surface-douce: #EAF2FB; /* surface secondaire, lignes alternées */ --tab-texte-principal: #111111; --tab-texte-secondaire: #666666; --tab-bordure: #D9D9D4; /* États fonctionnels — discrets, jamais décoratifs. Aucun dégradé, aucune tuile multicolore : ce produit se lit, il ne clignote pas. */ --tab-succes: #2F7A4D; --tab-succes-fond: #E8F4ED; --tab-avertissement: #8A5A1B; --tab-avertissement-fond: #FBF1E2; --tab-erreur: #9B2C2C; --tab-erreur-fond: #FBEAEA; /* Tarif de lancement (mission 12). Une couleur d'accent CHAUDE, distincte du bleu de la marque, qui met le prix en évidence sans crier. Terracotta : contraste 5,21 sur le fond de page et 5,39 sur une surface blanche — mesuré par `app/services/contraste.py`, pas estimé à l'œil. Ce n'est NI #DA081C (réservé à « depuis 2008 ») NI #7B241C (réservé aux blocs d'avertissement) : les deux rouges de la charte gardent leur sens. */ --tab-lancement: #A85220; --tab-lancement-fond: #FDF2EA; --tab-lancement-bord: #E8C9B0; /* Textes POSÉS SUR l'encart de lancement (mission 14). Ces trois jetons sont FIXES dans les deux thèmes, et c'est tout l'objet : le fond de l'encart ne change pas avec le thème, donc un texte qui, lui, changerait devient illisible. C'est exactement ce qui s'était produit — la mention légale passait à #F2F4F7 en thème sombre et tombait à un contraste de 1,00 sur le crème, c'est-à-dire invisible. Contrastes mesurés sur #FDF2EA par app/services/contraste.py : --tab-sur-lancement 15,16 (mention légale, texte courant) --tab-sur-lancement-doux 7,19 (compteur, texte secondaire) blanc sur --tab-etiquette 6,43 (étiquette pleine) */ --tab-sur-lancement: #2B1A10; --tab-sur-lancement-doux: #6B4A33; --tab-etiquette: #96491C; --tab-sur-etiquette: #FFFFFF; /* Ruban « bêta ». Gris-bleu sobre, repris de celui de 428.lu : le ruban signale, il ne vend pas. Une couleur vive ferait douter du sérieux du produit au moment précis où l'on demande à une PME de confier ses factures. */ --tab-ruban: rgba(90, 100, 112, 0.92); --tab-sur-ruban: #FFFFFF; /* Bouton « Insider » de la vitrine (mission 15). Contrairement aux jetons de l'encart de lancement, ceux-ci sont REDÉFINIS en thème sombre : le bouton est un élément d'interface, il doit suivre le thème de la page. Le défaut corrigé : son fond était une couleur de marque FIXE (#EAF2FB) et son texte suivait le thème — en sombre, le contraste tombait à 1,03. Et son contour, à 1,35 sur le fond de page, était invisible même en clair. Mesures (app/services/contraste.py) : texte 16,72 en clair / 14,86 en sombre ; contour 3,25 en clair / 8,29 en sombre. */ --tab-insider-fond: #EAF2FB; --tab-insider-bord: #5F8FC8; --tab-insider-texte: #111111; /* Le point est décoratif (aria-hidden, 8 px) : il ne porte aucune information, mais il doit se VOIR. Sur le fond très clair du bouton, le bleu de bordure tombait à 2,97 — on prend le bleu profond, à 4,88. */ --tab-insider-point: #3F6FA9; /* ========================================================================= 3. LES TROIS COULEURS QUE LE MENU APPARENCE FAIT VARIER ========================================================================= Elles sont redéfinies à l'exécution par /theme.css, qui les lit en base. Les valeurs ci-dessous ne sont donc qu'un repli : celui d'une page ouverte avant que la société ait été configurée. LE MÊME TRIPLET SERT AU WEB ET AU PDF. Deux sources auraient divergé au premier changement, et c'est précisément le parcours n° 5 qui se serait cassé : « il change une couleur, il regénère un PDF, le bandeau a changé ». */ --tab-bandeau: #3F6FA9; /* bandeau d'en-tête du PDF et barre du web */ --tab-pied: #3F6FA9; /* pied de page du PDF et du web */ --tab-accent: #3F6FA9; /* boutons, liens, totaux mis en évidence */ --tab-sur-bandeau: #FFFFFF; /* texte posé sur le bandeau */ --tab-sur-accent: #FFFFFF; /* texte posé sur un bouton plein */ /* Texte posé sur le bleu profond de MARQUE (bouton de la vitrine). Distinct de --tab-sur-accent : l'accent est réglable, le bleu de marque non. */ --tab-sur-bleu-profond: #FFFFFF; /* ========================================================================= 4. LA MESURE ET LES MARGES ========================================================================= */ --tab-mesure: 72ch; /* largeur de lecture confortable */ --tab-largeur-max: 1100px; /* largeur maximale d'une page applicative */ --tab-marge-laterale: 32px; /* gouttière sur grand écran */ --tab-marge-laterale-tel: 16px; /* gouttière sur téléphone — jamais moins */ /* ========================================================================= 5. L'ÉCHELLE VERTICALE — QUATRE VALEURS, PAS CINQ ========================================================================= Quatre suffisent à tout rythmer. Une cinquième valeur n'ajoute pas de nuance : elle ajoute une hésitation, et deux écrans finissent par ne plus respirer pareil. */ --tab-espace-1: 8px; /* entre deux éléments d'un même groupe */ --tab-espace-2: 16px; /* entre deux groupes */ --tab-espace-3: 32px; /* entre deux blocs */ --tab-espace-4: 64px; /* entre deux sections de page */ /* ========================================================================= 6. ENCADRÉS, BOUTONS, CHAMPS ========================================================================= */ --tab-encadre-marge: 20px; /* marge intérieure d'un encadré */ --tab-bouton-bord: 12px; /* distance entre un bouton et le bord du cadre */ --tab-bouton-padding-v: 12px; --tab-bouton-padding-h: 20px; --tab-rayon: 10px; --tab-rayon-large: 16px; --tab-rayon-pastille: 999px; --tab-trait: 1px; /* Cible tactile minimale. 44 px : en dessous, le doigt rate. */ --tab-cible: 44px; /* Mission « ergonomie » (02/10/2026) : l'épaisseur du contour de focus (crayons des encarts repliables, bulle « i »), la largeur d'une bulle d'information, la durée d'une animation courte (ouverture d'un encart). */ --tab-contour-focus: 2px; --tab-bulle-largeur: 22rem; --tab-duree-courte: 0.18s; /* Mission « ergonomie » (03/10/2026), lot C : la taille des icônes Noto Emoji (images SVG). Petite dans le texte et le menu, moyenne dans un bouton rond de la barre et la liste des tuiles, grande dans une tuile. */ --tab-icone-petite: 16px; --tab-icone-moyenne: 20px; --tab-icone-tuile: 32px; /* ========================================================================= 7. TYPOGRAPHIE ========================================================================= */ --tab-police: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --tab-police-serif: Georgia, "Times New Roman", serif; --tab-police-chiffres: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --tab-taille-petite: 0.8125rem; --tab-taille-base: 1rem; --tab-taille-moyenne: 1.125rem; --tab-taille-titre: 1.5rem; --tab-taille-grand-titre: 2rem; --tab-interligne: 1.55; /* ========================================================================= 8. RELIEF ========================================================================= */ --tab-ombre-douce: 0 1px 2px rgba(17, 17, 17, 0.06); --tab-ombre: 0 2px 10px rgba(17, 17, 17, 0.08); /* ========================================================================= 9. HAUTEUR DE LA BARRE ========================================================================= Sur téléphone, c'est LE LOGO qui dicte la hauteur de la barre, pas le texte : une barre haute mange l'écran là où il est le plus compté. */ --tab-barre-hauteur: 56px; --tab-barre-hauteur-tel: 48px; --tab-logo-hauteur: 22px; } /* =========================================================================== MODE SOMBRE =========================================================================== Seules les couleurs de RÔLE changent. Les couleurs de marque et les trois couleurs réglables ne bougent pas : le bandeau de David reste le bandeau de David, de nuit comme de jour. Deux déclarations, et c'est voulu : la première suit le réglage du système tant que le visiteur n'a rien choisi, la seconde obéit à son choix explicite. =========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="clair"]) { --tab-fond: #14171A; --tab-surface: #1C2025; --tab-surface-douce: #232931; --tab-texte-principal: #F2F4F7; --tab-texte-secondaire: #A8B2BF; --tab-bordure: #333A43; --tab-succes-fond: #16291F; --tab-avertissement-fond: #2A2115; --tab-insider-fond: #1C2025; --tab-insider-bord: #8DB3E2; --tab-insider-texte: #F2F4F7; --tab-insider-point: #8DB3E2; --tab-insider-fond: #1C2025; --tab-insider-bord: #8DB3E2; --tab-insider-texte: #F2F4F7; --tab-insider-point: #8DB3E2; --tab-erreur-fond: #2B1A1A; /* Bleu nuit, dans la même famille de luminosité que les trois autres fonds de message. Contraste mesuré avec le texte principal du thème sombre, et non supposé. */ --tab-info-fond: #161F2B; --tab-ombre-douce: 0 1px 2px rgba(0, 0, 0, 0.5); --tab-ombre: 0 2px 10px rgba(0, 0, 0, 0.55); } } :root[data-theme="sombre"] { --tab-fond: #14171A; --tab-surface: #1C2025; --tab-surface-douce: #232931; --tab-texte-principal: #F2F4F7; --tab-texte-secondaire: #A8B2BF; --tab-bordure: #333A43; --tab-succes-fond: #16291F; --tab-avertissement-fond: #2A2115; --tab-insider-fond: #1C2025; --tab-insider-bord: #8DB3E2; --tab-insider-texte: #F2F4F7; --tab-insider-point: #8DB3E2; --tab-erreur-fond: #2B1A1A; /* Bleu nuit, dans la même famille de luminosité que les trois autres fonds de message. Contraste mesuré avec le texte principal du thème sombre, et non supposé. */ --tab-info-fond: #161F2B; --tab-ombre-douce: 0 1px 2px rgba(0, 0, 0, 0.5); --tab-ombre: 0 2px 10px rgba(0, 0, 0, 0.55); } @media (max-width: 640px) { :root { --tab-marge-laterale: var(--tab-marge-laterale-tel); --tab-barre-hauteur: var(--tab-barre-hauteur-tel); --tab-taille-grand-titre: 1.625rem; --tab-taille-titre: 1.25rem; --tab-encadre-marge: 16px; --tab-espace-4: 40px; } }