/* ------------------------------------------------------------------ socle */ /* Palette. * * Deux partis pris, contre l'habitude. * * 1. Le fond n'est pas gris mais PAPIER — une pointe de chaleur (#F6F4F0 plutôt * que #F5F5F7). C'est une nuance de deux points, invisible isolément, mais * l'écran cesse d'avoir l'air d'un tableur. On facture sur du papier depuis * six siècles ; l'œil le sait. * * 2. L'accent est le vert de la marque, et il revient de loin : il avait été * retiré parce qu'une concurrente s'en était emparée, puis remplacé par un * pétrole qui lisait certes mieux mais n'appelait plus au geste. Un bleu * d'administration convient à un document opposable ; il ne convient pas au * bouton qu'on veut voir cliquer. * * Ce vert coûte du contraste — 5,5 sur le papier, contre 8,9 au pétrole. Il * reste au-dessus du seuil AA, mais la marge est mince, d'où le second ton : * « accent-profond » (8,2) porte le texte long et le survol, l'accent porte * les aplats et les états. Ne pas les intervertir. * * Le rouge d'erreur reste franc : c'est la seule couleur qui doit interrompre. */ :root { /* ------------------------------------------------- les deux échelles L'ESPACEMENT. Les mêmes huit valeurs que « refonte.css », déclarées ici aussi et à dessein : la feuille de la conception est versionnée comme une paire et REMPLACÉE à chaque livraison. Cinq cent quarante-six déclarations s'appuient sur ces jetons ; une livraison qui en renommerait un les casserait toutes, sans rien afficher d'anormal — seulement une page qui se déplie. Déclarés ici, ils survivent, et les valeurs identiques ne créent aucun conflit. LA TYPOGRAPHIE. Cinq crans, et il n'y en avait aucun : trente-trois tailles cohabitaient, dont douze entre 9 et 15 px, demi-pixels compris. Personne ne distingue 12,5 de 13 — mais l'œil sent qu'aucune décision n'a été prise, exactement comme il sent une phrase écrite par défaut. · 11 ce qui se lit en second : mentions, pastilles, unités · 13 le texte ordinaire, et l'immense majorité de l'interface · 15 ce qui se lit en premier dans un bloc : titres de carte, intitulés · 20 les titres de section, et les nombres de second rang · 28 le chiffre qu'on vient chercher Le saut de 15 à 20 est volontaire : entre les deux, rien n'est ni un titre ni un texte, et les tailles intermédiaires ne servaient qu'à éviter de trancher. */ --rf-1: 4px; --rf-2: 8px; --rf-3: 12px; --rf-4: 16px; --rf-5: 20px; --rf-6: 24px; --rf-8: 32px; --rf-10: 48px; --t-1: 11px; --t-2: 13px; --t-3: 15px; --t-4: 20px; --t-5: 28px; /* LE THÈME EST UN CHOIX, DONC « color-scheme » AUSSI. Laissé à « light dark », le navigateur décide seul de la teinte des ascenseurs, des menus déroulants natifs et du sélecteur de date. Un titulaire qui choisit le CLAIR sur une machine en sombre obtenait donc une application claire à ascenseurs sombres. Le jeton suit désormais l'attribut, comme tout le reste. */ color-scheme: light; /* ============================================================ ENCRE LA COULEUR NE SERT QU'À L'INFORMATION. Décision du produit, 4 septembre 2026. Palette REFAITE le 7 septembre, et dérivée cette fois par un solveur : « tools/palette/palette.py ». Quatre teintes portent un SENS ici : vert « réglé » à 149°, ambre « partiel » à 37°, rouge « en retard » à 4°, indigo « nous devons » à 251°. Le fond et la marque sortent de ces angles — sur un écran où le vert signifie payé, un bouton vert concurrence l'information, et l'œil ne sait plus si la couleur qu'il voit est un état ou un ornement. Le fond est donc un gris froid à 2,7 % de chroma, et le geste primaire EST l'encre. CE QUE LA VERSION DU 4 SEPTEMBRE AVAIT MANQUÉ, et que le solveur a trouvé en une exécution : — ses propres rapports étaient FAUX de trois dixièmes. Elle annonçait « ok sur pastille 4,8 » et « warn 4,8 » ; mesuré sur la couleur réellement rendue — l'encre aplatie sur son voile, et non l'encre pure — c'était 4,47 et 4,48, donc SOUS le seuil. Juger une pastille sur son encre pure surestime le contraste de plusieurs dixièmes ; — la limite d'un CONTRÔLE n'existait pas comme notion. Les champs portaient « line-strong », soit 1,47, quand WCAG 2.1 §1.4.11 exige 3,0 pour la limite visuelle d'un composant. Voir « line-control » ; — une carte ne se détachait de sa page qu'à 1,07. Sur un écran de mauvaise résolution, la page entière est un aplat blanc qui éblouit et où plus rien n'a de bord. LE FOND EST DÉSORMAIS L'ENTRÉE DU CALCUL, et non sa conclusion. On le descend jusqu'à ce qu'une carte se détache de 1,20 — 0,80 de luminance contre 0,93 — puis toutes les encres se résolvent DESSUS. C'est l'ordre qui compte : la version précédente avait posé le fond au plus clair et calculé les gris dessus, si bien qu'en descendant le fond pour l'éblouissement ces gris tombaient sous AA sans que rien ne le dise. « text-3 » porte tous les intitulés de colonne en 11,5 px, et il passait de 4,72 à 4,21. Chaque teinte de sens garde sa TEINTE au degré près — c'est ce qui la rend reconnaissable — et seule sa clarté est résolue. TOUS LES RAPPORTS SONT CALCULÉS, aucun n'est choisi à l'œil, et « python3 tools/palette/palette.py » les revérifie sur la feuille SERVIE : encre sur fond 14,5 encre sur carte 17,4 text-2 sur fond 6,0 text-3 sur fond 4,6 ok sur pastille 4,6 warn sur pastille 4,6 err sur pastille 4,6 owed sur pastille 4,6 limite de contrôle 3,1 carte détachée du fond 1,20 Le SOMBRE n'a pas été refait : il ne manquait que deux cibles sur douze — « text-3 » à 4,50 sur « surface-2 », au ras du seuil, et une carte à 1,10. Ses quatre teintes de sens tenaient de 5,96 à 8,13. Les redériver rendait un rouge rose pâle pour « en retard » : jeter ce qui tient pour satisfaire un solveur écrit une heure plus tôt aurait été une régression déguisée en calcul. Deux jetons corrigés, un ajouté, le reste intact. La page A4 (« .rf-paper », plus bas) ne suit PAS ce bloc : une feuille de papier n'imite pas l'écran, elle imite l'imprimante. RELAXED 17 October 2026: a brand accent returns on selection only — sidebar selection, links, focus ring, checked controls; buttons stay ink (composants.css). Never on state pills, amounts or state charts: the four state hues above still carry meaning alone. Ink blue since 19 October 2026, at 214°, 37° from the nearest of them (indigo « owed »); figures in « python3 tools/palette/palette.py ». « --accent » stays the ink. */ --marque: #1d4f91; --marque-texte: #1d4f91; --sur-marque: #ffffff; --marque-soft: rgba(29, 79, 145, .10); --bg: #eaeaec; --surface: #ffffff; /* PLUS CLAIR QUE LE FOND, ET NON PLUS SOMBRE. Posé à #f1f2f4, ce jeton passait SOUS le fond en luminance (0,887 contre 0,931) : la carte d'une rangée sur téléphone devenait plus sombre que la page qui la porte, alors que ce jeton nomme une surface SURÉLEVÉE. La palette précédente tenait l'ordre — fond 0,906, surface-2 0,940, carte 1,000 — et je l'avais inversé sans le voir. Trouvé en vérifiant tout autre chose : les vignettes de la liste, dont le fond ne concordait pas entre le téléphone et l'écran large. Un défaut ne se montre pas toujours là où on le cherche. */ --surface-2: #f1f2f3; --text: #15171e; /* DEUX ENCRES, ET IL Y EN AVAIT TROIS. « --text-2 » valait #505566 et « --text-3 » #60667a : six pour cent de luminance d'écart, que personne ne voit. Deux noms pour un seul gris, et le gris servait donc à dire à la fois « secondaire » et « désactivé » — c'est-à-dire plus rien. Le second est désormais un ALIAS du premier. Les cent quarante et un points d'appel n'ont pas à être renommés, et le jour où quelqu'un voudra une troisième encre, il devra d'abord dire ce qu'elle signifie. */ --text-2: #4a5160; /* 3,08 auparavant. Il porte les intitulés de colonne en 11,5 px, et un intitulé qu'on ne lit pas rend sa colonne muette. Calculé sur le FOND, qui est le pire de ses trois supports. */ --text-3: var(--text-2); --line: rgba(21, 23, 30, .10); --line-strong: rgba(21, 23, 30, .18); /* LA LIMITE D'UN CONTRÔLE, ET NON D'UN SÉPARATEUR. Jeton nouveau, et il répare un manquement complet : les champs portaient « line-strong », qui tient 1,47 sur la carte. WCAG 2.1 §1.4.11 exige 3,0 pour la limite visuelle d'un composant d'interface — champ, sélecteur, bouton. On était à moins de la moitié, et le survol faisait sauter le champ à 4,72 : d'où la sensation, juste, que « ça va quand on interagit et c'est délavé au repos ». UN SEUL JETON FAISAIT DEUX MÉTIERS. Séparateur de tableau, où la norme n'impose rien et où un filet est souhaitable ; limite de contrôle, où elle impose 3,0. Corrigé pour l'un, faux pour l'autre — le défaut de ce projet, en CSS. « line » et « line-strong » restent donc les séparateurs, et celui-ci ne sert qu'aux contrôles. Résolu sur le FOND, son pire support : 3,05 sur le fond, 3,36 sur le champ, 3,67 sur la carte. */ --line-control: #7d8398; /* La marque quitte les aplats : l'accent EST l'encre. Liens et anneaux de focus la portent aussi — le soulignement fait l'affordance d'un lien, la couleur ne l'a jamais faite seule. */ --accent: #15171e; /* Le ton lisible de l'accent : celui du texte, des liens et du survol. Le vert de marque passe 5,5 sur le papier, ce qui tient pour un aplat mais fatigue sur une ligne de douze mots. Celui-ci passe 8,2. */ --accent-profond: #08090c; /* Le texte posé SUR l'accent. Il bascule avec le thème : en sombre l'accent est clair, et du blanc dessus devient illisible — d'autant que le survol l'éclaircit encore. */ --sur-accent: #ffffff; --accent-soft: rgba(21, 23, 30, .07); --ok: #1a6b41; --ok-soft: rgba(26, 107, 65, .10); /* 4,41 auparavant, sous le seuil sur sa propre pastille : trois centièmes de clarté suffisent à le ramener à 4,78. */ --warn: #805209; --warn-soft: rgba(128, 82, 9, .12); --err: #a93229; --err-soft: rgba(169, 50, 41, .10); /* L'argent qui SORT. Une couleur de plus dans une palette serrée, et il a fallu s'en convaincre. Le produit n'encodait la direction nulle part : « en attente » — le client me doit — et « à rembourser » — je dois au client — portaient le même ambre, et leurs deux boutons le même vert d'eau. Sur la même liste, à trois lignes d'écart, deux fois neuf cent soixante euros qui vont en sens contraire se ressemblaient trait pour trait. Ni l'ambre (qui dit « à faire ») ni le rouge (qui dit « en faute ») ne conviennent : un remboursement n'est pas une anomalie, c'est une dette ordinaire. Le rouge sert déjà au refus de dépôt sur la même ligne, et porterait alors deux sens à la fois. L'indigo ne sert nulle part ailleurs : il s'apprend en une lecture. Le signe négatif le double, pour l'œil qui ne distingue pas les teintes. */ --owed: #5e4dae; --owed-soft: rgba(94, 77, 174, .12); /* QUATRE RAYONS, ET IL Y EN AVAIT ONZE — dont DEUX pilules, 980 et 999, qui produisent exactement le même arc et disent seulement que deux personnes ont écrit « très arrondi » deux jours différents. · 6 ce qui vit DANS une carte : champs, puces, vignettes · 10 la carte, le panneau, le bouton · 16 les grands conteneurs · pilule Six dans dix se lit concentrique ; c'est tout ce qu'on demande à un emboîtement. */ --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --radius-pill: 980px; /* Cards rest on the page, they do not float. Single source: composants.css used to override this value. */ --shadow: 0 1px 2px rgba(21, 23, 30, .05), 0 2px 8px rgba(21, 23, 30, .04); --shadow-lg: 0 2px 6px rgba(21, 23, 30, .05), 0 24px 60px rgba(21, 23, 30, .10); --radius-xl: 22px; --ease: cubic-bezier(.25, .1, .25, 1); /* Palette catégorielle des rapports. L'ordre est fixe et ne se recycle jamais : la couleur suit le poste, pas son rang du moment, sinon changer de période repeindrait tout l'écran. Six teintes au plus. Elles ont été vérifiées pour rester distinguables en vision daltonienne — l'écart le plus faible est entre le jaune et le vert d'eau — et les intitulés sont toujours écrits à côté, jamais la couleur seule. « Autres » est gris : ce n'est pas une catégorie, c'est un reste. */ --cat-1: #2a78d6; --cat-2: #eb6834; --cat-3: #1baf7a; --cat-4: #eda100; --cat-5: #e87ba4; --cat-6: #008300; --cat-other: #9aa4ad; } :root[data-theme="dark"] { color-scheme: dark; /* Le sombre n'est pas noir : le noir pur fait vibrer le texte clair et fatigue à la lecture longue. Un bleu-ardoise très sombre tient mieux un écran qu'on regarde une heure. */ --bg: #0c1117; --surface: #1e232f; --surface-2: #2b3042; /* Same ink blue for the fill; a lighter variant of the same hue for links, focus and the sidebar selection: 5.48 on its own tint over « surface », 4.60 over « surface-2 ». The tint is the palette's dark variant #679ce1, which as text gave 4.29 over « surface » (measured 19 October 2026); both come out of « python3 tools/palette/palette.py --candidats ». */ --marque: #1d4f91; --marque-texte: #87b1e7; --sur-marque: #ffffff; --marque-soft: rgba(103, 156, 225, .16); --text: #edf1f5; --text-2: #9fadba; --text-3: var(--text-2); --line: rgba(237, 241, 245, .09); --line-strong: rgba(237, 241, 245, .17); /* Même métier qu'en clair, résolu sur « surface-2 » : en sombre, le pire support d'un trait clair est la surface la plus CLAIRE, pas le fond. 3,06 sur le champ, 3,67 sur la carte, 4,42 sur le fond. */ --line-control: #727a90; /* EN SOMBRE, L'ENCRE DEVIENT CRAIE. Le même parti qu'en clair — l'accent est la couleur du texte — mais le texte y est clair : le bouton primaire devient donc presque blanc, avec l'encre du fond écrite dessus. Un bouton sombre sur un fond sombre disparaîtrait. Le conflit existait ici aussi : accent teal à 174°, vert de « réglé » à 149° — vingt-cinq degrés. Il tombe avec le reste. Mesuré : craie sur fond 16,7 ; encre sur bouton craie 16,7. Les quatre teintes de sens sont INCHANGÉES : elles tiennent déjà de 5,0 à 6,9 sur leur voile, et il n'y avait rien à y reprendre. */ --accent: #edf1f5; /* La hiérarchie s'inverse toujours : le ton « profond » est le plus CLAIR des deux, parce que c'est lui qui doit ressortir du fond. */ --accent-profond: #ffffff; --sur-accent: #0c1117; --accent-soft: rgba(237, 241, 245, .13); --ok: #4ec98a; --ok-soft: rgba(78, 201, 138, .14); --warn: #e8b45c; --warn-soft: rgba(232, 180, 92, .14); --err: #f2736a; --err-soft: rgba(242, 115, 106, .14); --owed: #a99af0; --owed-soft: rgba(169, 154, 240, .16); --shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .25); --shadow-lg: 0 2px 6px rgba(0, 0, 0, .5), 0 24px 60px rgba(0, 0, 0, .45); /* Les mêmes six teintes, redescendues pour le fond sombre. Ce n'est pas une inversion automatique : chaque marche a été reprise pour tenir le contraste sur cette surface-là, et l'ensemble revérifié. */ --cat-1: #3987e5; --cat-2: #d95926; --cat-3: #199e70; --cat-4: #c98500; --cat-5: #d55181; --cat-6: #008300; --cat-other: #6b7885; } * { box-sizing: border-box; } /* Un « display » d'auteur l'emporte sur la règle [hidden] de la feuille par défaut du navigateur. Sans cette ligne, .gate et .shell — tous deux en flex — restent visibles malgré l'attribut hidden. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; font-size: var(--t-3); line-height: 1.5; -webkit-font-smoothing: antialiased; letter-spacing: -.01em; } h1, h2, h3 { letter-spacing: -.022em; font-weight: 600; margin: 0; } h1 { font-size: var(--t-5); } h2 { font-size: var(--t-4); } h3 { font-size: var(--t-3); } /* ----------------------------------------------------------- ossature */ .shell { display: flex; min-height: 100vh; } .sidebar { width: 232px; flex: 0 0 232px; padding: var(--rf-6) var(--rf-3); border-right: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: var(--rf-5); } /* ------------------------------------------------------------------ marque */ /* Le sigle : une feuille au coin plié, dont le « m » est formé de deux pans de toiture. Le document et le métier dans une seule forme, lisible à 16 px comme à 200 — c'est la seule contrainte qui compte pour un sigle, et celle que la plupart des logos d'application ratent. */ .mark { flex: 0 0 auto; display: block; } /* LE LOGO DISPARAISSAIT EN MODE NUIT, et personne ne l'avait vu. Ces deux tracés portaient du blanc ÉCRIT EN DUR — « rgba(255,255,255,.30) » pour le pli, « #fff » pour la lettre — tandis que la feuille est peinte avec « var(--accent) ». En clair, l'accent est l'encre : du blanc dessus ressort. En sombre, l'accent devient la CRAIE, et le blanc se posait sur du blanc. Mesuré le 4 septembre 2026, rapport de contraste lettre sur feuille : clair 17,79 sombre 1,14 (1,00 = couleurs identiques) Le « m » et le pli étaient donc invisibles : le logo se réduisait à une page blanche vide. Signalé par le produit, qui l'a vu avant la mesure. « --sur-accent » est le jeton fait pour cela — ce qui se pose SUR l'accent — et il suit le thème : blanc sur l'encre, encre sur la craie. Aucune valeur littérale ne reste ici. */ .mark .fold { fill: var(--sur-accent); fill-opacity: .30; } .mark .letter { stroke: var(--sur-accent); stroke-width: 3.4; fill: none; stroke-linecap: round; stroke-linejoin: round; } /* Le sigle est un lien vers le tableau de bord. Il doit donc se voir cliquable — mais discrètement : c'est un repère permanent, pas une action à pousser. D'où un fond qui n'apparaît qu'au survol. Le rembourrage vertical est repris en marge négative. Sans cela, la zone cliquable pousserait la navigation de 16 px vers le bas, et toute la colonne se décalerait pour un effet de survol. */ .brand { padding: var(--rf-2) var(--rf-3); margin: -8px 0; display: flex; align-items: center; gap: var(--rf-3); color: inherit; text-decoration: none; border-radius: var(--radius); transition: background-color .16s var(--ease), transform .16s var(--ease); } .brand:hover { background: var(--surface-2); } /* L'enfoncement, à la manière du système : bref, faible, et sans rebond. Une translation plutôt qu'une mise à l'échelle — le sigle porte du texte à 16,5 px, qu'un scale rendrait flou le temps de l'animation. */ .brand:active { transform: translateY(1px); } .brand:focus-visible { outline: 2px solid var(--anneau, var(--marque-texte)); outline-offset: 2px; background: var(--surface-2); } .brand-text { min-width: 0; } .brand strong { display: block; font-size: var(--t-3); letter-spacing: -.03em; line-height: 1.15; } /* LE « m » INITIAL N'EST PLUS COLORÉ, et c'est une asymétrie qu'on retire. La règle posait « --accent-profond », qui vaut #08090c en thème clair et #ffffff en thème sombre. Sur la craie, c'était de l'encre sur de l'encre : personne ne voyait rien. Sur l'encre, le « m » ressortait franchement. Un effet visible sur un thème et absent de l'autre, que personne n'a choisi. Et il était de toute façon redondant : le sigle, juste à gauche, porte déjà l'accent. Colorer aussi la première lettre, c'est dire deux fois la même chose à deux centimètres d'intervalle. L'élément reste un « em » — il est dans le gabarit à quinze endroits — mais il ne fait plus que retirer l'italique. */ .brand strong em { font-style: normal; } .brand span { font-size: var(--t-1); color: var(--text-3); } /* Ce qu'un comptable ne voit pas. --------------------------------------------------------------------------- Le serveur REFUSE déjà ces gestes — c'est là qu'est la sécurité, et elle y reste. Ici on évite seulement de proposer l'impossible : un bouton qui rend un refus se lit comme une panne, pas comme une règle. Les actions principales des en-têtes de page d'abord — « Nouvelle facture », « Nouveau devis », « Enregistrer un mouvement » — puis les écrans qui n'ont aucun sens pour un cabinet : les réglages de l'entreprise, ses abonnements. */ body[data-role="Accountant"] .page-head .primary, body[data-role="Accountant"] nav [data-view="settings"], body[data-role="Accountant"] nav [data-view="modules"], /* Les commandes qui écrivent, nommées une à une. La liste est longue et c'est voulu : la nommer oblige à se demander, pour chacune, si un cabinet a une raison de la voir. Deux y échappent — `job-attach` et `job-detach` — parce que rattacher une dépense à un projet est précisément son métier, et que le serveur l'y autorise. Les réponses aux factures reçues aussi. */ body[data-role="Accountant"] [data-act="pay"], body[data-role="Accountant"] [data-act="settle"], body[data-role="Accountant"] [data-act="duplicate"], body[data-role="Accountant"] [data-act="q-accept"], body[data-role="Accountant"] [data-act="q-refuse"], body[data-role="Accountant"] [data-act="q-invoice"], body[data-role="Accountant"] [data-act="q-send"], body[data-role="Accountant"] [data-act="q-edit"], body[data-role="Accountant"] [data-act="contract-issue"], body[data-role="Accountant"] [data-act="contract-edit"], body[data-role="Accountant"] [data-act="contract-delete"], body[data-role="Accountant"] [data-act="contract-active"], body[data-role="Accountant"] [data-act="stock-move"], body[data-role="Accountant"] [data-act="stock-reverse"], body[data-role="Accountant"] [data-act="retry-transmission"], body[data-role="Accountant"] [data-act="rebuild-transmission"], body[data-role="Accountant"] [data-act="subscribe"], body[data-role="Accountant"] [data-act="unsubscribe"], body[data-role="Accountant"] [data-act="activate"], body[data-role="Accountant"] [data-act="draft-open"], body[data-role="Accountant"] [data-act="draft-delete"], body[data-role="Accountant"] [data-act="job-edit"], body[data-role="Accountant"] [data-act="job-state"], body[data-role="Accountant"] [data-act="sale-remove"] { display: none; } /* Le bloc d'identité mène aux réglages, qui lui sont fermés. */ body[data-role="Accountant"] .identity .who { pointer-events: none; } /* L'entreprise active. Elle se lit sans qu'on la cherche : un comptable qui a trente clients doit savoir chez qui il est AVANT d'agir, pas après. */ .org-switch { padding: var(--rf-2) var(--rf-3) 0; } .org-switch label { display: block; font-size: var(--t-1); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin-bottom: var(--rf-1); } .org-switch select { width: 100%; font-size: var(--t-2); font-weight: 550; padding: var(--rf-2) var(--rf-2); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); } .org-switch .hint { margin: var(--rf-1) 0 0; font-size: var(--t-1); } /* La MENTION du dossier unique. Même place et même graisse que le sélecteur qu'elle remplace : c'est ce qui permet de la regarder sans la chercher. Elle n'est pas cliquable, et n'en prend donc ni le cadre ni le curseur. */ .org-switch__seul { font-size: var(--t-2); font-weight: 500; padding: var(--rf-2) 0; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Un titre qui porte un ÉTAT et non un nom. Il se lit comme ce qu'il est : quelque chose qui manque, pas une raison sociale bizarre. */ .titre-manquant { color: var(--text-3); font-weight: 500; } /* La pastille du manque portée par un BOUTON. `refonte.css` la dessine pour un élément neutre ; sur un bouton il faut défaire ce que le navigateur ajoute, sans quoi elle arrive avec un cadre et une police qui ne sont pas les nôtres. Elle est cliquable pour de vrai — c'est ce qui la distingue d'un tiret. */ button.rf-manque { border: 0; font: inherit; font-size: var(--t-2); font-weight: 500; line-height: 1.4; text-align: left; } /* La navigation prend la place qui reste et défile si elle en manque : c'est elle qui cède, jamais le bloc d'identité. Sans cela, une fenêtre courte poussait « Se déconnecter » sous le bord de l'écran, hors d'atteinte — la barre fait 100vh de haut et ne défile pas avec la page. */ nav { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-height: 0; overflow-y: auto; /* Une barre de défilement système prendrait une gouttière permanente dans une colonne de 232 px qui n'a pas de place à donner. */ scrollbar-width: thin; } nav button { display: flex; align-items: center; gap: var(--rf-2); /* Six pixels et non huit : les intitulés de groupe ont ajouté six lignes à une colonne qui en portait dix-neuf, et quatre entrées passaient sous le pli d'un écran de neuf cents. La barre du téléphone garde son propre dégagement, plus large, dans la requête média. */ padding: var(--rf-1) var(--rf-3); border: 0; border-radius: var(--radius); background: transparent; color: var(--text); font: inherit; font-size: var(--t-2); text-align: left; cursor: pointer; transition: background .18s var(--ease); } nav button:hover { background: var(--line); } nav button[aria-current="page"] { background: var(--accent-soft); color: var(--accent-profond); font-weight: 500; } /* Les pictogrammes héritent de currentColor : ils passent à l'accent avec l'onglet actif, sans règle supplémentaire. C'est ce que les émojis ne savaient pas faire — ils gardaient leurs couleurs et leur aspect système. */ .ic { width: 19px; height: 19px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .9; } nav button[aria-current="page"] .ic { opacity: 1; } .sprite { display: none; } .identity { margin-top: auto; padding: var(--rf-3); border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line); font-size: var(--t-2); } .identity .who { font-weight: 600; color: var(--text); display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0; margin: 0; font: inherit; font-weight: 600; font-size: var(--t-2); cursor: pointer; } .identity .who:hover { color: var(--accent-profond); } .identity .siren { color: var(--text-3); font-variant-numeric: tabular-nums; } .identity button { margin-top: var(--rf-2); width: 100%; background: transparent; border: 1px solid var(--line-control); border-radius: var(--radius); padding: var(--rf-1); font: inherit; font-size: var(--t-2); color: var(--text-2); cursor: pointer; transition: border-color .18s var(--ease), color .18s var(--ease); } .identity button:hover { border-color: var(--accent); color: var(--accent-profond); } /* LA VERSION N'EST PAS UN BOUTON DE PLUS. Elle hérite pourtant de « .identity button », qui la dessinerait encadrée et pleine largeur, à côté de « Se déconnecter » — deux cibles jumelles dont l'une déconnecte. La règle annule donc l'encadrement : c'est une mention, discrète, qui répond au clic sans le réclamer. */ .identity .version-tag { margin-top: var(--rf-2); padding: 0; width: auto; border: 0; background: none; color: var(--text-3); font-size: var(--t-1); font-variant-numeric: tabular-nums; letter-spacing: .01em; cursor: pointer; } .identity .version-tag:hover { border-color: transparent; color: var(--text-2); } .identity .version-tag:focus-visible { outline: 2px solid var(--anneau, var(--marque-texte)); outline-offset: 2px; } /* Le contenu est centré dans la place restante, pas collé à la barre latérale. La largeur maximale reste bornée — au-delà d'environ 1400 px, un tableau s'étire et l'œil perd la ligne entre deux colonnes éloignées. Mais le laisser à gauche avec 300 px de vide à droite donnait l'impression d'une page mal finie plutôt que d'une mesure de confort de lecture. */ /* La colonne de contenu, à côté de la barre latérale. Deux propriétés valent une explication, parce que leur absence faisait défiler la page de côté sur toute fenêtre inférieure à 1 130 px environ — c'est-à-dire sur un portable de treize pouces, ou sur une fenêtre à demi écran. La barre latérale, collée en haut, glissait alors avec le reste : elle ne tenait plus rien. « width: 100 % » demandait la largeur de la FENÊTRE à un élément qui n'en a que la part restante, les 232 px de la barre en moins. Elle est retirée : « flex: 1 » suffit à occuper ce qui reste, et le dit sans se tromper. « min-width: 0 » lève la valeur par défaut des éléments flexibles, qui est « auto » et vaut la largeur MINIMALE DU CONTENU. Sans elle, un tableau large interdit à sa colonne de rétrécir, quelle que soit la fenêtre — c'est le piège classique des dispositions en flex, et il ne se voit qu'en réduisant. */ main { flex: 1; min-width: 0; /* « min(1400px, 100%) » ET NON « 1400px ». Le plafond de lecture est de 1 400 px, et il ne bornait rien du tout en dessous : un enfant plus large que l'écran poussait « main » jusqu'à sa propre taille, sans jamais toucher le plafond. Mesuré le 30 septembre 2026 sur un téléphone de 375 px. L'aperçu A4 de l'écran Document est à l'échelle réelle — 794 px, et c'est voulu, son conteneur porte « overflow-x: auto » pour qu'il DÉFILE. Il ne défilait pas : il étirait « main » à 826 px, la vue, la barre latérale et tout ce qu'elles portent. Le bouton « plus » de la barre du bas se retrouvait à 822 px sur un écran de 375 — hors d'atteinte du doigt, la navigation morte sur cet écran. « min-width: 0 » ci-dessus ne suffit pas : elle autorise le rétrécissement sans jamais l'imposer. C'est le plafond qui le force, et il ne le pouvait pas tant qu'il valait 1 400 px. Avec la borne, la feuille reste à 794 px et son conteneur défile enfin — « scrollWidth 794 / clientWidth 343 ». L'intention écrite est tenue, pas contournée. */ max-width: min(1400px, 100%); margin-inline: auto; padding: var(--rf-8) var(--rf-10) 72px; } .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--rf-5); margin-bottom: var(--rf-6); } .page-head p { margin: var(--rf-1) 0 0; color: var(--text-2); font-size: var(--t-2); max-width: 62ch; } /* L'action de tête ne se plie pas. « Nouvelle facture » se cassait en deux lignes dès que la fenêtre se resserrait, et le bouton devenait une pastille haute et bancale à côté d'un titre sur une ligne. Un libellé de bouton est court par construction : s'il ne tient pas, c'est la mise en page qui doit céder, pas le mot. */ .page-head button { white-space: nowrap; } /* ⚠️ UN LIBELLÉ DE BOUTON NE SE COUPE PAS DANS UN TABLEAU. Un bouton est une cible, pas un paragraphe : coupé en deux lignes, il devient plus haut que ses voisins et la colonne d'actions part en escalier. Relevé le 8 octobre 2026 sur l'écran des comptes, et c'est une régression que j'ai introduite sans la voir : « échue le 30 oct. » est devenu « à régler avant le 30 oct. », la colonne d'état s'est élargie, celle des actions s'est serrée, et « Marquer réglé » est passé à la ligne. La règle est posée ICI et non sur « button », parce qu'un bouton pleine largeur sur téléphone a le droit de se replier : c'est dans un tableau, où l'espace se partage, que la coupure se voit. */ td button { white-space: nowrap; } /* Deux actions en tête d'écran plutôt qu'une. Sans cette règle elles se chevauchaient : le conteneur était un bloc, et les boutons s'y empilaient à la ligne. */ .page-actions { display: flex; flex-wrap: wrap; gap: var(--rf-2); justify-content: flex-end; } .head-actions { display: flex; gap: var(--rf-2); flex: 0 0 auto; } /* LA RANGÉE DE BOUTONS HORS DIALOGUE. « .actions » n'avait de règle que dans les dialogues : ailleurs, ses boutons retombaient dans le flux du texte, à 4 px l'un de l'autre (une espace de balisage), et bord à bord une fois empilés au téléphone — les journaux de la Comptabilité, l'option Équipe, les nouvelles conditions. Les « gap » et « justify-content » écrits en ligne sur ces rangées supposaient cette règle et restaient sans effet. Relevé le 18 octobre 2026. Les dialogues gardent la leur, plus précise. */ .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rf-2); } /* ------------------------------------------------- tableau de bord réarrangeable */ /* La grille est en quarts : un indicateur en occupe un, une liste deux, un graphique les quatre. Les widgets déclarent leur encombrement, la grille ne sait rien d'eux. */ /* Les cartes d'une même rangée s'alignent sur la plus haute : quatre indicateurs de hauteurs différentes donnent un peigne, et le regard s'arrête sur l'irrégularité plutôt que sur les chiffres. */ .board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--rf-4); align-items: stretch; } .board > .w-petit { grid-column: span 1; } .board > .w-moyen { grid-column: span 2; } .board > .w-grand { grid-column: span 4; } /* LA BANDE DE RÉCONCILIATION. `refonte.css` porte la mécanique — la colonne, la barre, les segments. Ce qui suit est ce que la feuille de la refonte ne connaît pas encore : l'égalité posée à côté du nombre, les clés colorées, et les deux notes du bas. Les segments prennent leur couleur d'un `data-ton` et non d'un style en ligne : la politique de sécurité interdit les gestionnaires en ligne, et une couleur écrite dans le balisage échapperait au thème sombre. */ /* La carte porte déjà son rembourrage ; la bande n'en ajoute pas un second. Elle resserre seulement sa marge basse : elle précède la grille, et deux respirations empilées la détachent de ce qu'elle contrôle. */ .rf-reconcile { margin-bottom: var(--rf-4); } .rf-reconcile__tete { display: flex; align-items: baseline; justify-content: space-between; gap: var(--rf-4); flex-wrap: wrap; } .rf-reconcile__egalite { margin: 0; font-size: var(--t-2); color: var(--text-2); font-variant-numeric: tabular-nums; } .rf-reconcile__seg[data-ton="ok"] { background: var(--ok); } /* UN RÉGLAGE MANQUANT QUI EMPÊCHERA LE DÉPÔT, dit à l'endroit et au moment où il se répare — avant la saisie, pas après l'émission. Le ton est celui de l'avertissement et non de l'erreur : rien n'est encore cassé. */ .sub--manque { color: var(--warn); font-weight: 500; } .sub--manque button.link { color: inherit; text-decoration: underline; } .rf-reconcile__seg[data-ton="warn"] { background: var(--warn); } .rf-reconcile__seg[data-ton="err"] { background: var(--err); } .rf-reconcile__key { font-size: var(--t-2); color: var(--text-2); font-variant-numeric: tabular-nums; } .rf-reconcile__key b { font-weight: 600; } .rf-reconcile__key[data-ton="ok"] b { color: var(--ok); } .rf-reconcile__key[data-ton="warn"] b { color: var(--warn); } .rf-reconcile__key[data-ton="err"] b { color: var(--err); } /* L'écart. Il ne se distingue pas par un pictogramme mais par son encre : la phrase porte sa force toute seule. */ .rf-reconcile__ecart { margin: 0; padding: var(--rf-2) var(--rf-3); background: var(--err-soft); color: var(--err); border-radius: var(--radius); font-size: var(--t-2); line-height: 1.5; } .rf-aging__seg[data-tranche="0"] { background: var(--owed); } /* Le widget est un conteneur transparent : ce qu'il enveloppe porte déjà sa propre carte. Seule la personnalisation lui donne un cadre. */ .widget { position: relative; min-width: 0; } .widget > .card, .widget > .kpi { margin: 0; height: 100%; } /* --- mode personnalisation --- */ .board.editing .widget { user-select: none; border-radius: var(--radius-lg); outline: 1px dashed var(--line-strong); outline-offset: 3px; } .board.editing .widget:hover { outline-color: var(--accent); } /* Les cartes deviennent inertes : en personnalisation, un clic ne doit pas ouvrir le détail de l'indicateur qu'on est en train de manipuler. Seules la poignée et la croix restent vivantes. */ .board.editing .widget * { pointer-events: none; } .board.editing .widget .w-remove, .board.editing .widget .w-grip { pointer-events: auto; } /* La poignée, et non la carte entière. Sur un téléphone, rendre toute la carte saisissable impose « touch-action: none » sur toute sa surface — et le doigt ne fait alors plus défiler la page : on ne peut plus atteindre les cartes du bas, précisément quand on cherche à les réorganiser. */ .w-grip { position: absolute; top: -9px; right: -9px; z-index: 3; width: 30px; height: 30px; padding: 0; border-radius: 50%; display: none; align-items: center; justify-content: center; background: var(--surface); color: var(--text-2); border: 1px solid var(--line-control); cursor: grab; touch-action: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .10); } .board.editing .w-grip { display: flex; } .w-grip:hover { border-color: var(--accent); color: var(--accent-profond); } .w-grip svg { width: 15px; height: 15px; } .w-remove { position: absolute; top: -9px; left: -9px; z-index: 3; width: 26px; height: 26px; padding: 0; border-radius: 50%; display: none; align-items: center; justify-content: center; background: var(--err); color: #fff; border: 2px solid var(--surface); font-size: var(--t-3); line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); } .board.editing .w-remove { display: flex; } .w-remove:hover { transform: scale(1.12); } /* La carte saisie suit le doigt ; les autres glissent à leur nouvelle place. */ .widget.dragging { opacity: .92; z-index: 5; cursor: grabbing; transform: scale(1.03); box-shadow: 0 18px 40px rgba(0, 0, 0, .18); outline-color: var(--accent); outline-style: solid; } .widget.sliding { transition: transform .22s cubic-bezier(.2, .9, .3, 1); } /* L'emplacement libéré, pour que la grille ne se referme pas sous le doigt. */ .widget.ghost { opacity: 0; } .board-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--rf-4); flex-wrap: wrap; background: var(--accent-soft); border: 1px solid var(--accent); border-radius: var(--radius-lg); padding: var(--rf-3) var(--rf-4); margin-bottom: var(--rf-4); } .board-add { margin-top: var(--rf-4); } .board-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--rf-3); } .board-choice { text-align: left; padding: var(--rf-3) var(--rf-4); border-radius: var(--radius); border: 1px solid var(--line-control); background: var(--surface); cursor: pointer; display: block; width: 100%; } .board-choice:hover { border-color: var(--accent); background: var(--accent-soft); } .board-choice strong { display: block; font-size: var(--t-2); margin-bottom: 3px; } .board-choice span { font-size: var(--t-2); color: var(--text-2); line-height: 1.4; } /* Le déplacement au doigt n'a pas de sens sans retour visuel ; il en a encore moins pour qui a demandé moins d'animations. */ @media (prefers-reduced-motion: reduce) { .widget.sliding { transition: none; } .widget.dragging { transform: none; } .w-remove:hover { transform: none; } } /* -------------------------------------------------------------- composants */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--rf-6); box-shadow: var(--shadow); } .card + .card { margin-top: var(--rf-4); } .card > h2 { margin-bottom: var(--rf-1); } .card > .sub { color: var(--text-2); font-size: var(--t-2); margin: 0 0 var(--rf-4); } button.primary { /* Deux points d'écart entre les deux arrêts : assez pour que le bouton ait un volume, pas assez pour ressembler aux dégradés des années 2000. */ background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, #fff) 0%, var(--accent) 100%); color: var(--sur-accent); border: 0; border-radius: var(--radius-pill); padding: var(--rf-3) var(--rf-6); font: inherit; font-size: var(--t-2); font-weight: 500; cursor: pointer; box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 35%, transparent), 0 4px 14px color-mix(in srgb, var(--accent) 22%, transparent); transition: filter .18s var(--ease), transform .12s var(--ease), box-shadow .18s var(--ease); } button.primary:hover { /* Le fond change, et lui seul. « filter: brightness » agissait sur tout le bouton, texte compris : en thème sombre il éclaircissait un fond déjà clair sous un texte blanc, et le libellé disparaissait. */ background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 84%, #fff) 0%, color-mix(in srgb, var(--accent) 92%, #fff) 100%); box-shadow: 0 2px 4px color-mix(in srgb, var(--accent) 40%, transparent), 0 8px 22px color-mix(in srgb, var(--accent) 28%, transparent); } button.primary:active { transform: scale(.97); } button.primary:disabled { opacity: .45; cursor: default; transform: none; filter: none; } /* ⚠️ UN BOUTON FANTÔME DÉSACTIVÉ LE MONTRAIT AUSSI PEU QU'UN BOUTON ACTIF. Seul l'accentué portait un style d'empêchement ; le fantôme gardait sa bordure et sa couleur pleines. Relevé le 8 octobre 2026 sur « Produire le journal », fermé tant qu'aucune écriture n'est passée : il se présentait comme cliquable et ne répondait pas. Un bouton qui ne dit pas qu'il est fermé est pire qu'un bouton absent — on l'essaie, et on cherche la panne. */ button.ghost:disabled { opacity: .45; cursor: default; transform: none; } button.ghost:disabled:hover { border-color: var(--line-strong); background: transparent; } button.ghost { background: transparent; color: var(--accent-profond); border: 1px solid var(--line-control); border-radius: var(--radius-pill); padding: var(--rf-2) var(--rf-4); font: inherit; font-size: var(--t-2); cursor: pointer; transition: border-color .18s var(--ease), background .18s var(--ease); } button.ghost:hover { border-color: var(--accent); background: var(--accent-soft); } /* La destruction ne partage jamais la couleur de l'action courante : l'œil doit pouvoir distinguer « retirer » d'« enregistrer » sans lire. */ /* Une action principale qui DÉTRUIT ne se peint pas de la couleur d'accent : celle-ci dit « continuez », et le geste dit l'inverse. La confirmation en est le seul usage, et c'est là qu'un coup d'œil doit suffire. */ button.primary.danger { background: var(--err); } button.primary.danger:hover { filter: brightness(1.08); } button.ghost.danger { color: var(--err); } button.ghost.danger:hover { border-color: var(--err); background: var(--err-soft); } .grid { display: grid; gap: var(--rf-3); } .grid.two { grid-template-columns: 1fr 1fr; } .grid.three { grid-template-columns: repeat(3, 1fr); } label { display: block; font-size: var(--t-2); color: var(--text-2); margin-bottom: var(--rf-1); font-weight: 500; } input, select, textarea { width: 100%; padding: var(--rf-2) var(--rf-3); border: 1px solid var(--line-control); border-radius: var(--radius); background-color: var(--surface-2); color: var(--text); font: inherit; font-size: var(--t-2); transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease); } input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover { border-color: var(--text-3); } input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--accent); /* « background-color » ET NON LE RACCOURCI « background ». Le raccourci remet à zéro TOUT le fond — image, taille, répétition, position — et non seulement la couleur. Sur un « select », dont le chevron est une image de fond posée par la règle « select », cela donnait : en clair le chevron DISPARAISSAIT au focus, sans que personne le voie ; en sombre il revenait par la règle de thème, plus spécifique, mais SANS sa taille ni son « no-repeat » — une flèche à la hauteur du champ, répétée en zigzag sur toute la largeur. Signalé le 7 septembre 2026 sur le régime de TVA des réglages, en le focalisant pour le changer. Le défaut dormait depuis toujours dans sa forme claire ; la palette à attribut, plus spécifique que la règle « select », l'a rendu bruyant. C'est le raccourci qui est en cause, et non le thème. Les deux autres raccourcis de ce bloc — le fond au repos et celui d'un champ désactivé — sont corrigés de la même façon : ils posent une COULEUR, pas un fond entier. */ background-color: var(--surface); box-shadow: 0 0 0 3.5px var(--accent-soft); } input:disabled { color: var(--text-3); cursor: not-allowed; background-color: color-mix(in srgb, var(--line) 40%, transparent); } input[type="number"] { font-variant-numeric: tabular-nums; } /* UNE CASE À COCHER N'EST PAS UN CHAMP DE SAISIE, et la règle ci-dessus la traitait comme tel. « input, select, textarea { width: 100% } » s'applique aussi aux cases : dans une étiquette en drapeau, la case prenait donc la moitié de la largeur et repoussait son texte dans une colonne étroite. Signalé le 5 septembre 2026 sur la fenêtre d'émission : l'aveu « J'ai lu ces réserves » se lisait en colonne d'une lettre, hors du cadre. Mesuré à 1 440 px, le texte commençait 242 px après le bord de son étiquette — pour une case qui en fait dix-sept. Le produit avait DÉJÀ rencontré ce défaut : « .rappro input[type=checkbox] » posait exactement ces trois propriétés, sur un seul écran. Un correctif local là où la règle était en cause — et les treize autres cases du produit sont restées étirées pendant ce temps. L'exception est donc remontée ici, et la locale retirée. « flex: 0 0 auto » en plus des dimensions : dans une étiquette en flex, une base automatique laisse encore la case s'étirer. */ input[type="checkbox"] { flex: 0 0 auto; width: 17px; height: 17px; padding: 0; accent-color: var(--marque); } /* Les listes déroulantes natives sont laides et différentes sur chaque système. On retire l'habillage du navigateur et on dessine le chevron nous-mêmes — en gardant le