Charte desktop

Derniere revision : 24/08/2026. Ce qui est ecrit ici est ce qui est REELLEMENT en place dans le code.

Couleurs

AURA — l'outil interne

Chaque module porte sa couleur, definie UNE seule fois dans MODULE_COLORS (app.py) et injectee en variables CSS. --module prend la teinte de la page en cours : une icone, une carte ou un bouton s'y accroche sans jamais recopier une valeur.

Le degrade du menu (28/09/2026, François). Il part de la barre de Laura, en haut, qui reste violette, et descend le menu dans l'ordre : violet, bleu, vert, jaune, orange, rouge. Chaque teinte est calee au MEME contraste que le violet de Laura : 4,0:1 sur blanc, ~4,3:1 sur l'anthracite du theme sombre (luminance relative 0,21). D'ou un jaune moutarde et un vert profond : un jaune vif ne se lit pas sur blanc. Reordonner le menu ou ajouter une entree = recalculer la serie avec la meme regle.

FRANCOIS-GRENIER.COM — ce que voit le client

Relevees dans le theme du site (Yootheme). A ne jamais confondre avec celles d'AURA : AURA est l'outil interne, son violet n'a rien a faire sur un devis ou un mail client.

Typographie

Montserrat en titres, Poppins en secondaire. Les titres de marque se composent en CAPITALES tres espacees (approche 180, soit .18em) : c'est ce qui fait reconnaitre la marque avant meme la lecture.

Le nom de domaine se compose comme sur la carte de visite : WWW. et .COM en gris, FRANCOIS-GRENIER en couleur pleine, enorme interlettrage.

Regles de mise en page

• Priorite au menu. Dans la barre laterale, le portrait de Laura retrecit ; le menu ne se comprime jamais.
• Chaque colonne defile chez elle. La page entiere ne defile pas, sinon la saisie et le bas des listes sortent de l'ecran.
• Cibles tapables : 44 px minimum. En dessous, on rate sa cible une fois sur trois.
• Jamais la couleur seule. Un etat se signale par la couleur ET autre chose — une graisse, un mot, une pastille. Pour qui distingue mal les contrastes, la couleur seule n'existe pas.
• Mouvement reduit respecte. Toute animation se fige sous prefers-reduced-motion.

Pieges de mise en page rencontres

• Une hauteur forcee sur un <table> est repartie entre TOUTES ses lignes et decale tout ce qu'elles contiennent.
• flex: 1 1 auto fait GRANDIR autant que retrecir. Pour un bloc qui doit ceder sans s'etirer : 0 1 auto, avec min-height: 0 — sans quoi un conteneur qui defile refuse de descendre sous la taille de son contenu.
• Une fenetre flottante doit passer au-dessus de --laura-footer-height, sinon le pied de page fixe intercepte les clics sans qu'on le voie.
• CSS Grid ne place jamais un element en arriere : un noeud cree par JS apres un autre ne peut pas remonter avant lui sans grid-row explicite.

Devis et factures — regles visuelles du 27/08/2026

Bouton d'ETAT du document

Vert fluo de la charte, hsl(129 62% 58%), meme gabarit que le bouton client (hauteur 46 px, rayon 12 px), place TOUT EN HAUT du panneau de droite, au-dessus du bouton client. Sa couleur ne change pas d'un etat a l'autre : c'est sa CONSTANCE qui en fait un point de repere.

Typographie blanche, choisie par Francois le 27/08/2026. Contraste MESURE : 1,88 — sous le seuil de lisibilite AA (4,5). Cela passe parce que le texte est gras et en capitales, mais reste fragile en plein soleil. Le texte fonce #0a2d16 donnait 7,97 ; un vert assombri a hsl(129 62% 34%) donnerait 4,6 avec du blanc, sans changer de teinte. A garder en tete si la lisibilite pose probleme un jour.

Pastilles de filtre — ce sont des BOUTONS

Sans relief, elles se lisaient comme des intitules de colonnes et personne n'essayait de cliquer dessus. Elles portent donc : fond de carte, contour 1 px, ombre portee legere, compteur dans un badge, et un enfoncement franc a l'etat actif (fond teinte + ombre interieure). Plusieurs peuvent etre actives en meme temps.

Regle a retenir pour les fonds teintes : melanger la couleur avec var(--laura-card-bg), jamais avec du blanc. Les variables --compta-*-soft sont figees sur du blanc : en theme sombre, la pastille active devenait une tache claire sur fond noir. Contrastes mesures apres correction : 6,9 et 9,1 en clair, 5,0 et 4,7 en sombre.

En-tete de page

Titre a gauche, recherche et actions a droite, sur UNE SEULE LIGNE (flex-wrap: nowrap), la recherche se retrecissant au besoin. En autorisant le retour a la ligne, l'en-tete doublait de hauteur (94 px au lieu de 46) et creusait un trou au-dessus du bouton principal.

Blocs de document reproduits d'apres une maquette

Quand Francois fournit une maquette (PNG, capture), elle se reproduit a l'identique : proportions, couleurs, dorures et pictogrammes compris. Elle ne s'adapte pas, elle se met a l'echelle.

Methode, appliquee au bandeau de confiance le 28/08/2026 :

1. Relever le PNG au pixel — cadre, boites englobantes des textes, positions des separateurs, couleurs au coeur des glyphes.
2. Poser container-type: inline-size sur un conteneur SANS marges, et exprimer chaque cote en cqw, en pourcentage de la largeur de la maquette. Une unite cqw vaut 1 % de la boite de CONTENU : des marges sur le conteneur lui-meme rapetissent tout le dessin.
3. Ne jamais redessiner un element graphique. Le decouper dans la maquette et le servir tel quel. Un SVG refait a vue donne un resultat que Francois qualifie de « tres moche ».
4. Verifier par comparaison d'images, maquette au-dessus, rendu en dessous, a la meme largeur — et la lui montrer.

Si ca ne rentre pas, l'erreur est dans mes valeurs, pas dans sa maquette. Refluer la mise en page est le reflexe a eviter : chercher d'abord la mesure fausse. Trois causes rencontrees : une unite mal comprise, un banc d'essai qui ne chargeait pas la police, et system-ui qui vaut DejaVu Sans sur ce serveur (~30 % plus large que la police d'une maquette).

Police des documents : « AURA Document Montserrat » (static/fonts/montserrat-400|700-latin.woff2), et non system-ui. Elle reste ~19 % plus large que la police des maquettes de Francois : les tailles se calent donc sur la LARGEUR des textes, pas sur leur hauteur de capitale. La mise en page prime ; le lui dire quand l'ecart existe.

Largeur de reference d'un bloc imprimable : 726 px (A4 moins 9 mm de marge). Toute bascule responsive doit se situer bien en dessous — une @container (max-width: 430px), jamais une @media a 900 px qui se declencherait dans chaque PDF.

Actions de ligne : le motif maison — 29/08/2026

Quand un champ se repete (les adresses d'un contact, les lignes d'un devis), ses actions « ajouter » et « retirer » sont des glyphes sans cadre poses DANS le champ, qui prennent un fond teinte au survol : la couleur du module pour l'ajout, du rouge pour le retrait. C'est ce que fait deja .compta-line-grid dans l'editeur de devis.

Ce qu'il ne faut pas faire, teste et rejete le 29/08/2026 : poser deux boutons carres bordes a droite de l'input. On obtient trois rectangles de meme poids visuel, un motif qui n'existe nulle part ailleurs dans AURA, et Francois l'a resume en « vraiment moches ». La ligne doit se lire comme UN champ, pas comme trois boites cote a cote.

Consequences pratiques : le cadre, le rayon et l'anneau de focus sont portes par la LIGNE, avec :focus-within — sinon l'anneau se dessine autour d'un input devenu invisible. Et la cible passe a 40 px sous @media (pointer: coarse) : 30 px ne se vise pas au doigt.

Piege : .plein ne visait que les libelles

La regle du formulaire etait .client-form label.plein. Un bloc qui n'est pas un label — celui des adresses est un div — restait coince dans une seule colonne, avec le champ suivant remonte a cote de lui. La regle vise desormais n'importe quel enfant direct de la grille.

Outillage : Node et le detecteur Impeccable

Node v24.20.0 est installe en local utilisateur (~/.local/lib/nodejs, liens dans ~/.local/bin, deja au PATH), sans droits root — le compte n'a de sudo que pour redemarrer laura-dashboard.service. Il fait tourner les scripts du plugin Impeccable.

A savoir avant de lire son detecteur : il signale 745 ecarts sur modules.css (324 tailles de police, 264 couleurs, 149 rayons). Ce ne sont pas des defauts mais de la derive de documentation : DESIGN.md ne decrit plus le CSS reel. Un rayon de 9 px y est signale alors que 41 champs d'AURA l'utilisent. Regle : suivre les VOISINS immediats, et ne pas reparer DESIGN.md au passage d'une tache de design — c'est un chantier a part.

Formulaires condenses : le libelle dans le champ — 29/08/2026

Sur une fiche dense, le libelle est le texte d'invite du champ, en capitales espacees, et non un titre pose au-dessus. La fiche client passait sur deux ecrans et demi ; elle tient sur un.

Le libelle reste dans le document, masque visuellement (position: absolute; clip-path: inset(50%)) : c'est lui qui donne son nom accessible au champ. Un placeholder seul n'est pas une etiquette pour un lecteur d'ecran — c'est le piege classique de ce motif, et il ne coute qu'une regle de le fermer. Un aria-label double la securite.

text-transform et letter-spacing se posent sur ::placeholder, jamais sur l'input : sur l'input, ils deformeraient la valeur saisie par Francois.

Une liste deroulante ne peut pas porter de placeholder. Son libelle est alors pose DANS le cadre, a gauche de la valeur (.champ-prefixe), la coquille portant la bordure et l'anneau de :focus-within — meme principe que les lignes d'e-mail.

Ce que ce motif coute, et comment on le paie

Une fois le champ rempli, le libelle disparait. C'est genant pour deux champs voisins de meme forme — SIRET et SIREN, IBAN et BIC. Attenuation retenue : un title sur chaque champ, qui redonne le libelle au survol.

La parade complete serait une etiquette flottante, qui remonte dans le champ des qu'il est rempli. Elle a ete ecartee ici : elle rend le champ plus haut, donc annule la densite recherchee. A rouvrir si Francois se trompe de champ en usage reel — c'est le seul juge utile.