/* * LA COQUILLE APPLICATIVE — visuel de la maquette validee par le responsable produit, a l'identique. * * ── POURQUOI CE FICHIER N'ETEND PAS base.css ──────────────────────────────── * * `base.css` porte une palette SOMBRE (--bg: #10141a). La maquette est CLAIRE (#F6F5F2, * texte #16224A). Les superposer serait une guerre de specificite ou le dernier fichier * charge gagne. base.css reste la feuille des pages d'AMORCAGE (connexion, erreurs, * explorateur) ; celle-ci est la feuille de l'APPLICATION. * * ── AUCUNE POLICE EXTERNE, ET C'EST LA CSP QUI L'IMPOSE ───────────────────── * * La maquette charge « IBM Plex Sans » depuis fonts.googleapis.com ; la CSP du projet * (`style-src 'self'`) BLOQUE la requete. La police est donc AUTO-HEBERGEE * (public/assets/fonts/, six woff2 officiels, accord du responsable produit du 05/08/2026) et declaree * en @font-face ci-dessous — la CSP n'a pas bouge d'un caractere. * * ── AUCUN style= EN LIGNE : la maquette en etait pleine, la CSP les refuse tous. ── * * ── CACHE : PLUS AUCUN PARAMETRE DE VERSION, ET C'EST UNE DECISION ────────── * * Le parametre de version qui suivait autrefois ce chemin dans les gabarits a ete * RETIRE de tout le projet le 10/08/2026 sur decision du responsable produit. La phrase qui vivait ici * demandait de l'incrementer : elle etait doublement fausse, le parametre n'existe plus * et cette feuille a desormais plus d'un consommateur. * * CONSEQUENCE MESUREE SUR LE SERVEUR, pas supposee : les actifs statiques sortent avec * `Cache-Control: max-age=3600, must-revalidate, public` (releve le 11/08/2026 sur * `/assets/css/app.css`). Une feuille retouchee peut donc rester en cache jusqu'a UNE * HEURE, et un rechargement FORCE est necessaire pour la voir. C'est une consequence * assumee : qui voit un style qui « ne s'applique pas » a son explication ici. * Piege mesure en plus : fermer le navigateur et renavigateur ne suffit PAS toujours — * servir depuis une AUTRE origine (un autre port) est le contournement, la cle de cache * incluant le port. Il n'ajoute rien au depot. * * ── QUI CHARGE CETTE FEUILLE AUJOURD'HUI — TROIS GABARITS ─────────────────── * * templates/shell/app.html.twig la coquille applicative, pour TOUT le visuel ; * templates/error/error.html.twig 404, 405 et 500, pour ses jetons et ses polices ; * templates/auth/login.html.twig la page de connexion, pour ses polices (11/08/2026). * * Les deux derniers n'en prennent QUE `:root` et les six @font-face, et c'est sur * cette feuille qu'on l'a verifie : aucun selecteur ne commence par un element nu, le * compose de GAUCHE est partout une classe `.app-*`, `.searchable-*` ou `body.app`. * Sur un corps qui ne porte aucune de ces classes, elle n'applique donc rien d'autre. * REFAIRE CETTE VERIFICATION avant d'ajouter un quatrieme consommateur, et surtout * avant d'ecrire ici la moindre regle sur un element nu : ce serait un effet de bord * sur la page de connexion et sur les trois pages d'erreur, en une seule ligne. */ /* * IBM PLEX, AUTO-HEBERGEE — accord du responsable produit du 05/08/2026. * * Fichiers woff2 officiels (github.com/IBM/plex v6.4.0, licence OFL), verifies a la * signature wOF2 au telechargement. Servis par /assets/** comme tout actif : la CSP * (`default-src 'self'`) est INCHANGEE — c'est toute la raison de l'auto-hebergement. * `font-display: swap` : le texte rend en pile systeme pendant le chargement plutot * que d'etre invisible. */ @font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/IBMPlexSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/IBMPlexSans-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/IBMPlexSans-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/IBMPlexMono-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } /* ── LA PALETTE A ÉTÉ ALIGNÉE SUR L'INTRANET DU GROUPE LE 12/08/2026 ────────── * * Le responsable produit : « voila un exemple de l'intranet qui a les bonnes couleurs ect... * esssaye de revoir l'inventaire avec cette vision là surtout niveau couleur ». * La référence est une capture de Modal Hub, l'intranet maison. * * CE QUI CHANGE EST LA TEMPÉRATURE DES NEUTRES, ET C'EST L'ESSENTIEL DU LOT. * L'ancienne palette était CHAUDE — fond #F6F5F2, lignes #E6E3DC, gris estompé * #9A9689, tous tirant vers le beige. L'intranet est FROID : blanc bleuté, * lignes gris ardoise, gris de texte neutres. Les deux ne se mélangent pas — * un beige à côté d'un blanc bleuté se lit comme une tache jaune, et c'est ce * qui donnait à cet écran son air de ne pas venir de la même maison. * * CE QUI NE CHANGE PAS : le bleu marine et l'ambre. Ce sont les couleurs de la * MARQUE, celles du sigle, et l'intranet les porte aussi. L'ambre garde en * particulier sa valeur vive : elle a été mesurée dans la maquette d'origine et * une version plus terne avait été refusée par le responsable produit — « pourquoi les couleurs * sont fade ? ». Le marine s'aligne sur celui du sigle, à six centièmes près de * l'ancien. * * CE QUI ARRIVE : un accent interactif indigo, et trois teintes de fond. Les * cartes d'indicateurs de l'intranet portent un filet de couleur à gauche et un * carré d'icône teinté ; les panneaux d'aide sont bleus. Ces trois couples * (fond clair, encre lisible) existent pour ça, et pour ça seulement. * * L'INDIGO EST LE SEUL AJOUT QUI NE VIENT PAS DE LA MARQUE. Il est signalé * comme tel parce qu'il se discute : l'intranet l'emploie pour ses liens et ses * états actifs, mais rien n'oblige l'inventaire à le suivre. Le retirer se fait * en une ligne — remettre `--app-accent` à la valeur du marine — et tout ce qui * le consomme redevient marine sans autre geste. */ :root { --app-bg: #F7F8FA; --app-surface: #FFFFFF; --app-surface-alt: #F1F4F8; --app-line: #E4E8EF; --app-line-strong: #CFD6E0; --app-side-width: 230px; /* LE TROISIEME CRAN DE LA FAMILLE DES FILETS, ET IL NAIT JETON — N129, 13/08/2026. Le responsable produit : « je m'en fiche fait au mieux ». La decision est donc prise ici, et elle est ecrite pour que dans six mois personne ne la prenne pour un gout. CE QU'IL REPARE. N123 a declare sans corriger : la bordure du bouton sobre tirait sur --app-line-strong, soit 1,46:1 sur --app-surface, sous les 3:1 qu'une limite de CONTROLE demande (element non textuel — le seuil n'est PAS 4,5). Le defaut n'etait pas celui d'un bouton : le balayage a trouve 150 bordures sous 3:1 dans les feuilles, dont 21 portees par un CONTROLE — champs, listes deroulantes, puces de filtre, boutons sobres, panneau flottant du champ cherchable. La cause est UNE seule : la famille des filets n'avait pas de cran pour une limite qu'on doit VOIR, donc les controles empruntaient le filet des cartes. POURQUOI --app-line-strong N'EST PAS SIMPLEMENT REACCORDE, et c'est la mesure qui l'interdit : il est AUSSI le fond des trois statuts de la famille `sorti` (`donne`, `recycle`, `depleted`, materiel.css), gele par N106 et N109 a 7,15:1 avec --app-ink-soft. Deplacer sa valeur bougeait un fond de pastille ET un contraste de TEXTE — exactement les deux choses que ce lot ne doit pas toucher. Il sert encore de fond au filet des tuiles d'indicateur et a la piste vide, qui ne sont pas des controles. Un cran neuf etait donc la seule voie. LES CINQ JETONS DEJA LA ONT ETE MESURES SUR LES QUATRE FONDS QU'UNE BORDURE DE CONTROLE RENCONTRE VRAIMENT — --app-surface, --app-bg, --app-surface-alt, --app-tint (pire cas d'abord, c'est --app-tint le fond le plus sombre des quatre) : --app-line #E4E8EF 1,09 -> 1,23 ECHEC --app-line-strong #CFD6E0 1,29 -> 1,46 ECHEC (la valeur relevee par N123) --app-faint #98A2B3 2,28 -> 2,58 ECHEC --app-steel #7C89AE 3,07 -> 3,47 passe, mais ECARTE, voir plus bas --app-muted #667085 4,40 -> 4,97 passe, mais c'est l'encre du texte --app-ink-soft #344054 9,25 -> 10,46 une ENCRE, pas un filet --app-navy #1B2A4A 12,58 -> 14,22 une ENCRE, pas un filet --app-navy et --app-ink-soft sont refuses PAR LE HAUT : une bordure a 7:1 ou plus sur un bouton sobre en fait un bouton plein, et detruit la distinction que ce bouton porte. --app-muted est l'encre des libelles secondaires : un filet ne prend pas la valeur d'une encre, sans quoi la prochaine retouche d'encre repeint les bordures. --app-steel EST LE CAS SERIEUX, et il est ecarte sur DEUX chiffres : il est deja l'accent nomme d'une categorie de tuile (.app-action.is-steel), donc le reprendre recreerait ICI le double emploi que ce jeton vient defaire ; et sa marge est de 0,07 au-dessus du seuil sur --app-tint, ce qu'une retouche de fond suffirait a manger. LA VALEUR RETENUE, #7C8798, ET POURQUOI CELLE-LA. Meme teinte que le reste de la famille (215° comme --app-line-strong), chroma intermediaire (16 % contre 21 %), un cran de clarte en dessous. Contrastes : --app-tint 3,22 · --app-surface-alt 3,30 · --app-bg 3,42 · --app-surface 3,64. Les quatre passent, le pire avec 7 % de marge, et aucun n'atteint le registre d'une encre. Ecarts perceptuels CIEDE2000 : 22,83 de --app-line-strong (c'est bien un cran, pas une nuance), 7,10 de --app-steel (donc pas un quasi-doublon — la variante a 21 % de chroma n'etait qu'a 4,26 et a ete ecartee pour ca), 8,99 de --app-faint, 9,09 de --app-muted. CE JETON EST POUR LES LIMITES DE CONTROLE ET RIEN D'AUTRE. Le filet d'une carte, d'un panneau, d'une rangee de tableau ou d'une fenetre reste --app-line : ce sont des bords de SURFACE, que la regle des 3:1 ne vise pas, et les repeindre transformerait le produit en filaire. */ --app-line-control: #7C8798; --app-ink: #1B2A4A; --app-ink-soft: #344054; --app-muted: #667085; --app-faint: #98A2B3; --app-navy: #1B2A4A; --app-link: #4F46E5; --app-link-hover: #C97E00; /* L'ACCENT INTERACTIF ET SES DEUX COMPAGNONS DE FOND. `--app-accent` habille ce qu'on peut actionner : liens, état actif du menu, anneau de mise au point. `--app-accent-bg` est le carré teinté derrière une icône ou une pastille, jamais un fond de page. `--app-info` et son fond servent le panneau d'aide, qui n'est ni un avertissement ni une réussite. */ --app-accent: #4F46E5; --app-accent-bg: #EEF0FE; --app-info: #1D6FD0; --app-info-bg: #EAF3FD; --app-good-bg: #E8F5EF; /* L'ambre de la maquette est #F5A200, MESURE dans ses donnees (accent et bouton de la carte « A faire ») — la premiere version employait #C97E00, plus terne, et Le responsable produit l'a vu : « pourquoi les couleurs sont fade ? ». Le texte sur fond ambre est #16224A (bouton) et l'encre ambre sur fond clair est #8A5A00 (pastilles). */ --app-amber: #F5A200; --app-amber-ink: #8A5A00; --app-amber-bg: #FFF1DA; --app-steel: #7C89AE; --app-good: #1F6B4B; --app-tint: #EEF1F8; /* LE CYAN DE L'ÉTAPE « EN STOCK » — N97, 12/08/2026, ET IL EST NÉ JETON DÈS SA PREMIÈRE LIGNE. Le responsable produit : « Dans les arrivée en stock je ne veux pas qu'il soit de la meme couleur que a traiter ». Il fallait donc une CINQUIÈME teinte de pastille aux arrivées, et AUCUN des jetons déjà là ne pouvait la porter : `--app-info-bg` (#EAF3FD) et `--app-accent-bg` (#EEF0FE) sont à ΔE 2,58 et 3,33 de `--app-tint`, qui est DÉJÀ le fond de la pastille « commandé » — les prendre aurait CASSÉ la paire qu'on venait distinguer, et `--app-info` échoue en plus le seuil de texte (4,42:1). Les mesures deux à deux sont dans N97. LA PLACE DANS LE PARCOURS COMMANDE LA TEINTE : `à traiter → à commander → commandé → en stock → prêt`, donc « en stock » se lit ENTRE le bleu de « commandé » et le vert de « prêt ». Le cyan est exactement cet intervalle de teinte, et il refuse le vert que N71 interdit à cette étape — l'objet est là, il n'est pas préparé pour la personne. IL NAÎT JETON ET NON LITTÉRAL parce que N95 a fusionné quatre rouges dispersés pour ce motif précis, et qu'un cinquième langage de couleur écrit en dur dans arrivees.css aurait recommencé la même dette le jour où une deuxième feuille en aurait besoin. `--app-teal` est l'ENCRE (5,06:1 sur son propre fond, 5,62:1 sur le fond de page si un aplat venait à en avoir besoin) ; `--app-teal-bg` est un fond de PASTILLE et pas un fond de page — même règle que `--app-accent-bg`. */ --app-teal: #0A6C88; --app-teal-bg: #BCF6FF; /* ── LE TRIPLET DE DANGER, ET C'EST LA DETTE DE N94 ET N95 QUI SE FERME ──────── N94 : « :root NE PORTE PAS de triplet de danger (encre, fond, bord) là où il porte --app-good / --app-good-bg et --app-amber-ink / --app-amber-bg. C'est la seule raison pour laquelle cinq valeurs restent littérales » ; N95 : « Il manque un triplet --app-bad, --app-bad-bg, --app-bad-line dans app.css ». Les valeurs ne sont PAS choisies aujourd'hui : ce sont celles que N94 a déjà unifiées — quatre rouges (#9b2f25 / #a32920 / #a63227 / #a83c31) fondus en #B42318 — et elles étaient tenues identiques d'une feuille à l'autre EXPRÈS, « pour qu'un jeton futur se pose d'un seul balayage ». C'est ce balayage : dix lignes de règle dans materiel.css et records.css passent au jeton À VALEUR ÉGALE, donc ΔE 0,00 partout et aucun pixel ne bouge. LE VIF #D92D20 N'ENTRE PAS DANS LE TRIPLET, et c'est un choix : N94 le réserve aux MARQUES PLEINES (l'astérisque d'un champ requis), pas au danger. Un seul usage, un seul fichier ; lui donner un jeton serait nommer un rôle qui n'a pas encore deux consommateurs. CE QUI RESTE OUVERT, ET IL FAUT LE DIRE : arrivees.css porte encore #a83c31 et #fbedeb, à ΔE 5,15 (encre) et 1,66 (fond) de ce triplet. L'encre est donc VISIBLEMENT différente. N95 l'a laissée exprès hors du jeu pré-unifié ; la convertir change le rendu d'un écran qui n'est pas celui de ce lot, et c'est une décision du responsable produit, pas un effet de bord à provoquer en passant. */ --app-bad: #B42318; --app-bad-bg: #FEF3F2; --app-bad-line: #FECDCA; /* ── LE BLEU DE L'APPROVISIONNEMENT ET LE LAVIS INDIGO PROFOND — N109 ────────── LES DEUX NAISSENT POUR LE TABLEAU DENSE DE /materiel, et pas pour le goût. Une pastille de statut y est posée sur TROIS fonds successifs — la ligne impaire #FFFFFF, la ligne paire var(--app-bg), le survol var(--app-surface-alt) — alors que la même pastille, dans la PWA, ne connaît qu'une carte blanche. Un lavis qui se détache sur du blanc peut donc DISPARAÎTRE au survol : c'est mesuré, --app- tint (#EEF1F8) est à ΔE 1,61 du survol et --app-line (#E4E8EF) à 2,91. --app-blue N'EST PAS --app-info, ET C'EST UNE MESURE, PAS UNE PRÉFÉRENCE : #1D6FD0 échoue le seuil de texte sur les trois lavis bleus essayés (3,75:1 sur #D3E1F8, 3,53:1 sur #C3DCFB, 4,23:1 sur #E3EEFD), exactement comme N97 l'avait déjà écarté à 4,42:1 sur son propre fond. #0F4C9C rend 5,90:1 sur --app-blue-bg, et ce lavis est à ΔE 12,20 du survol et 11,10 de --app-tint — donc il ne se confond ni avec le fond de la ligne ni avec la pastille « Attribué ». --app-accent-bg-strong EST --app-accent-bg D'UN CRAN PLUS PROFOND, et le suffixe est celui que ce bloc emploie déjà pour --app-line-strong. Il existe parce que --app-accent-bg (#EEF0FE) est à ΔE 3,33 de --app-tint : c'est LE chiffre que N97 a mesuré pour l'écarter, et le même écran porte les deux. Son encre reste --app-accent (5,13:1), qui vaut #4F46E5 comme --app-link — sans risque de confusion ici, les liens de ce tableau étant en --app-navy et non en --app-link. LES DEUX VIENNENT DE LA PWA, où mobile.css les porte en littéral faute de voir ce bloc : #C3DCFB est son lavis de « Livré », #E7E6FD celui de « En prêt ». Le motif des sept familles est dans N106 et dans l'en-tête de `.mob-pill`. */ --app-blue: #0F4C9C; --app-blue-bg: #C3DCFB; --app-accent-bg-strong: #E7E6FD; --app-radius: 12px; --app-radius-sm: 7px; --app-font: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif; --app-mono: "IBM Plex Mono", "Cascadia Mono", Consolas, ui-monospace, monospace; } /* ------------------------------------------------------------------ coquille */ body.app { margin: 0; min-height: 100vh; display: flex; background: var(--app-bg); color: var(--app-ink); font-family: var(--app-font); -webkit-font-smoothing: antialiased; } .app-side { width: var(--app-side-width); flex: none; background: var(--app-surface); border-right: 1px solid var(--app-line); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } /* * LA CARTE DU LOGO — demande du responsable produit du 10/08/2026, reference Modal Hub. * * Un bloc distinct, fond blanc, coins arrondis, logo centre sur toute la largeur de la * barre, pose au-dessus du reste de la navigation. Remplace le faux monogramme « INV », * qui avait DEJA ete refuse une fois (journal du 07/08/2026) et etait revenu. * * .app-brand NE PORTE PLUS DE DISPOSITION : il ne contient qu'un enfant, la carte, qui * prend la largeur seule. Un premier jet le passait en COLONNE pour ranger le selecteur de * langue sous la carte — le responsable produit a vu le rendu le 10/08/2026 et l'a REFUSE : le bouton seul * sur sa ligne creusait une bande vide entre la carte et le titre « Operations ». Le * selecteur est donc DANS la carte (voir .app-brand-card), et ce bloc redevient un simple * conteneur d'espacement. Ne pas y remettre de `flex-direction: column` : c'est la * disposition refusee. * * CLASSES SUPPRIMEES ICI : .app-brand-mark, .app-brand-mark-v, .app-brand-name et * .app-brand-sub. Plus aucun gabarit ne les portait apres le retrait du monogramme et du * texte qui l'accompagnait — verifie au grep sur templates/ et sur les feuilles. * * LA REFERENCE PENDANTE EST FERMEE (10/08/2026, plus tard le meme jour). Ce paragraphe * disait que public/assets/favicon.svg renvoyait encore a .app-brand-mark et portait * TOUJOURS l'ancien sigle. Le SVG est SUPPRIME : l'icone d'onglet est desormais * public/assets/favicon.png, le SIGLE SEUL du vrai logo, decoupe a la gouttiere mesuree * du fichier (le sigle occupe les colonnes 0 a 142, le mot-symbole commence a 180). Sans * mot-symbole, delibere : « MODAL INVENTORY » est illisible a 16 px, taille reelle d'une * icone d'onglet — un sigle se reconnait, un mot ne se lit pas. Les deux jetons de la * maquette, #26356B et #F5A200, restent vrais et vivent dans les variables ci-dessus. */ .app-brand { padding: 15px 15px 13px; border-bottom: 1px solid var(--app-line); } /* * LE BLANC EST ECRIT EN DUR, ET C'EST DELIBERE — mais pas pour la raison qu'on croit. * * Le PNG servi est TRANSPARENT (type couleur 6, canal alpha) : le logo ne reclame aucun * fond pour rendre proprement, et un premier jet de ce fichier justifiait a tort le blanc * par un fond opaque « cuit dans l'image ». Ce n'est plus vrai. Ce qui reste mesure : * 7,1 % des pixels (4 614) sont en alpha PARTIEL, l'anticrenelage des bords, et ces * pixels ont ete calcules contre le quasi-blanc de l'image d'origine. Composes sur blanc * ils rendent le trace voulu ; composes sur une teinte ils frangent en clair. * Le blanc est donc la demande du responsable produit (reference Modal Hub) ET le fond pour lequel * l'anticrenelage de ce fichier a ete calcule. Ecrit en dur plutot que via * var(--app-surface) pour cette raison : une retouche de palette ne doit pas le teinter. * * LA BARRE EST ELLE-MEME BLANCHE (--app-surface) : c'est la BORDURE qui detache la carte, * pas un contraste de fond. Sans elle, carte et barre se confondent — la reference Modal * Hub a une barre teintee, ce projet non, et le detachement doit venir d'ailleurs. * * LE PADDING EST LE SEUL AIR AUTOUR DU LOGO. Le fichier est recadre au contenu : ses * quatre bords portent de l'encre, verifie pixel a pixel. Il n'y a donc aucune marge * integree qui s'ajouterait a ces valeurs — les regler ici les regle entierement. * * LA CARTE EST UNE RANGEE : logo a gauche, selecteur de langue a droite. * * POURQUOI UNE RANGEE ET PAS UNE SURIMPRESSION EN HAUT A DROITE, qui etait la piste * proposee : la mesure la refuse. Le logo prend toute la largeur disponible ; un bouton * de 26 px pose au-dessus de lui en `position: absolute` le recouvrirait, et pour degager * la place il faudrait un logo centre verticalement dans une carte de plus de 100 px de * haut (contre ~58 px ici) — soit reprendre toute la hauteur que la suppression de la * ligne dediee venait de gagner. En rangee, la hauteur de la carte est celle du LOGO * (~32 px), qui est PLUS HAUT que le bouton (26 px) : le selecteur ne coute aucune hauteur. * C'est la seule des deux formes qui tienne la contrainte « plus de ligne pour lui seul » * sans en payer le prix ailleurs. */ .app-brand-card { background: #FFFFFF; border: 1px solid var(--app-line); border-radius: var(--app-radius); padding: 12px 12px; display: flex; align-items: center; gap: 8px; } /* * LE LIEN QUI RAMENE AU TABLEAU DE BORD — demande du responsable produit du 11/08/2026. * * IL N'ENTOURE QUE L'IMAGE, jamais la carte : le selecteur de langue vit dans la meme * carte, et c'est un formulaire avec un bouton — du contenu interactif, qui ne s'imbrique * pas dans un lien. Voir le commentaire du gabarit. * * CES TROIS DECLARATIONS SONT CELLES DE .app-brand-logo, DEPLACEES ET NON DUPLIQUEES. * L'enfant flexible de la carte est desormais le LIEN, plus l'image : `flex: 1` laisse a * l'image la largeur qui reste apres le selecteur de langue, et `min-width: 0` l'autorise a * descendre sous la largeur intrinseque de 529 px du fichier au lieu de pousser la carte en * debordement. Sur l'image, ces deux valeurs seraient devenues MORTES — un enfant de lien * n'est pas un enfant de la rangee — et le logo debordait, mesure au navigateur. * * `display: block` supprime l'espace sous la ligne de base : un est un element EN LIGNE, * et laisse en ligne il ajoutait cet espace fantome sous l'image qu'il entoure. * * AUCUNE REGLE DE FOCUS ICI : elle est plus bas, ajoutee a la liste de selecteurs de * l'anneau commun de l'application. Un anneau propre a cette carte serait un second endroit * a tenir a jour pour le meme effet. */ .app-brand-link { display: block; flex: 1; min-width: 0; } /* * DIMENSIONNE PAR LA LARGEUR, JAMAIS PAR LA HAUTEUR. Le rapport est MESURE sur le * fichier : 529x123, soit 4,30:1 — tres horizontal. Fixer une hauteur donnerait une * largeur imprevisible et debordante dans une barre de 230 px ; la largeur contrainte plus * `height: auto` laisse le navigateur tenir le rapport seul. Meme facon de faire que * .signin-brand img dans auth.css. * * `width: 100%` a REMPLACE le couple `flex: 1` / `min-width: 0`, parti sur .app-brand-link * ci-dessus le 11/08/2026 : l'image remplit son lien, et c'est le lien qui negocie sa * largeur avec le selecteur de langue. Les boites mesurees sont les MEMES qu'avant le lien, * a trois largeurs de fenetre — c'etait la condition de la demande. * * AUCUN `background` ICI, ET C'EST UNE REGLE, PAS UN OUBLI : l'image est transparente, un * fond pose sur l' reintroduirait le rectangle que le detourage a supprime. Le blanc * appartient a la CARTE, jamais a l'image. * * `display: block` supprime l'espace sous la ligne de base propre aux images en ligne, qui * decalerait le centrage vertical dans la carte. */ .app-brand-logo { display: block; width: 100%; height: auto; } /* * LE SELECTEUR DE LANGUE, DERNIER ELEMENT DE LA RANGEE DE LA CARTE. * * `margin-left: auto` a ete RETIRE : il servait a pousser le bouton a droite quand il * vivait seul sous la carte — la disposition que le responsable produit a refusee le 10/08/2026. C'est * desormais `flex: 1` du logo qui occupe la place et repousse ce formulaire a droite ; * une marge automatique en plus n'y ajouterait rien. * * `flex: none` : le bouton garde sa taille de cible (30x26) quoi qu'il arrive a la largeur * de la barre. Sans lui, le formulaire serait un element flexible que le logo pourrait * comprimer — et c'est le SEUL moyen de changer de langue dans toute l'application, donc * une cible qui rapetrisse serait un defaut d'accessibilite, pas un gain de place. */ .app-locale { flex: none; } .app-locale button { width: 30px; height: 26px; padding: 0; /* N129, 13/08/2026 : var(--app-line) #E4E8EF -> var(--app-line-control) #7C8798. C'etait la PIRE bordure de controle du produit, 1,23:1 sur --app-surface, et le cas le plus net : ce bouton n'a ni fond distinct de sa barre blanche ni libelle long — sa bordure est la SEULE chose qui dit ou l'on clique. Apres : 3,64:1. */ border: 1px solid var(--app-line-control); border-radius: var(--app-radius-sm); background: var(--app-surface); color: var(--app-navy); font: 600 10px/1 var(--app-font); cursor: pointer; } .app-locale button:hover, .app-locale button:focus-visible { border-color: var(--app-navy); } /* ------------------------------------------------------------- navigation */ .app-nav { padding: 6px 10px 12px; overflow-y: auto; flex: 1; } /* * LES TITRES DE SECTION — « OPERATIONS », « SUIVI », « DONNEES », « ADMINISTRATION ». * * Petites capitales grises, comme la reference Modal Hub (« ACCUEIL », « SERVICES », * « RESSOURCES »). La forme ne bouge pas ; seule l'encre change. * * L'ENCRE PASSE DE --app-faint A --app-muted LE 12/08/2026, ET C'EST UNE MESURE, PAS UN GOUT. * Ancienne valeur : var(--app-faint), #98A2B3 sur la barre blanche = 2,58:1. * Nouvelle valeur : var(--app-muted), #667085 sur la barre blanche = 4,97:1. * Un titre de section est du CONTENU — il nomme le groupe d'entrees en dessous — donc il * releve du plancher 4,5:1 de WCAG 1.4.3, que 2,58 ne tenait pas. Le refroidissement de la * palette n'a pas cree ce defaut (l'ancien beige #9A9689 mesurait 2,71:1 sur #F6F5F2, donc * il echouait deja) mais il etait l'occasion de le fermer. --app-faint N'A PAS CHANGE et * reste l'encre des elements DESACTIVES, exemptes de ce plancher — voir .is-pending. */ .app-nav-title { margin: 16px 4px 6px; font: 600 10px/1 var(--app-font); letter-spacing: .1em; text-transform: uppercase; color: var(--app-muted); } .app-nav ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1px; } .app-nav a, .app-nav .is-pending { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: var(--app-radius-sm); font: 500 13px/1.3 var(--app-font); } .app-icon { width: 15px; height: 15px; flex: none; } .app-nav .app-icon { color: var(--app-muted); } /* L'icone de l'entree active est BLANCHE depuis le 12/08/2026 (ancienne valeur : var(--app-navy)) : la pastille est desormais un aplat marine, voir .app-nav a.is-active plus bas. Une icone marine sur un aplat marine mesure 1,00:1 — elle disparaitrait. */ .app-nav a.is-active .app-icon { color: #FFFFFF; } .app-nav a { color: var(--app-ink-soft); text-decoration: none; } .app-nav a:hover { background: var(--app-surface-alt); color: var(--app-ink); } /* * L'ENTREE ACTIVE EST UNE PASTILLE PLEINE MARINE A TEXTE BLANC — 12/08/2026, reference * Modal Hub. C'est l'ECART LE PLUS VISIBLE releve entre cet ecran et l'intranet. * * ANCIENNES VALEURS, conservees ici parce qu'elles expliquent le defaut : * background: var(--app-tint); (#EEF1F8) * color: var(--app-navy); (#1B2A4A) * Soit un aplat a 1,13:1 du blanc de la barre. MESURE : la pastille etait quasi invisible, * et l'etat actif ne se lisait en pratique que sur la graisse du libelle — un signal que * l'oeil ne trouve pas sans comparer deux lignes voisines. La reference, elle, pose un * aplat PLEIN : on voit ou l'on est sans lire. * * NOUVELLES VALEURS ET LEUR MESURE : blanc sur --app-navy #1B2A4A = 14,22:1, tres au-dessus * du plancher 4,5:1, et la pastille elle-meme se detache de la barre blanche a 14,22:1. * * `font-weight: 600` RESTE, et ce n'est pas une redondance avec la couleur : c'est le * second vehicule de l'information. La regle du projet est qu'aucun etat ne repose sur la * seule couleur — un ecran en niveaux de gris, ou une impression, garde la graisse. * * LE BLANC EST ECRIT EN DUR ET NON EN JETON : il n'y a pas de jeton « encre sur aplat * sombre » dans cette palette, et --app-surface (#FFFFFF) designe une SURFACE de fond, pas * une encre. Meme choix que .app-btn.is-primary et .session-avatar juste au-dessus, qui * ecrivent aussi leur blanc de texte en litteral pour la meme raison. */ .app-nav a.is-active { background: var(--app-navy); color: #FFFFFF; font-weight: 600; } /* LE COMPTEUR D'UNE ENTREE (« 812 » sur Materiels). L'encre passe de var(--app-faint) a var(--app-muted) le 12/08/2026 : ancienne mesure #98A2B3 sur #F1F4F8 = 2,33:1, nouvelle #667085 sur #F1F4F8 = 4,51:1. Un CHIFFRE est une donnee, jamais une decoration — c'est le seul volume du parc visible depuis toutes les pages. */ .app-nav-badge { margin-left: auto; padding: 2px 5px; border-radius: 5px; background: var(--app-surface-alt); color: var(--app-muted); font: 600 10px/1 var(--app-mono); } .app-nav-badge.is-amber { background: var(--app-amber-bg); color: var(--app-amber-ink); } /* * UNE ENTREE DONT L'ECRAN N'EXISTE PAS ENCORE : presente (la maquette la montre), * visiblement inerte (un lien mort serait pire qu'un lien grise), et son infobulle * dit ce qui l'activera. */ .app-nav .is-pending { color: var(--app-faint); background: var(--app-surface-alt); opacity: .55; cursor: not-allowed; } .app-nav .is-pending .app-icon { color: var(--app-faint); } /* * L'ANNEAU DE FOCUS COMMUN. `.app-brand-link` a ete AJOUTE a cette liste le 11/08/2026, et * non recopie dans une regle a lui : le logo devenu cliquable est le PREMIER element * focalisable de toute l'application — le premier Tab de chaque ecran — et il vit dans * .app-brand, que ni `.app-nav a` ni `.app-main a` n'atteignent. Sans cette ligne il ne * portait que l'anneau par defaut du navigateur, different de celui du reste de la barre. */ .app-brand-link:focus-visible, .app-nav a:focus-visible, .app-main a:focus-visible, .app-btn:focus-visible { outline: 2px solid var(--app-link); outline-offset: 2px; } .app-side-foot { margin-top: auto; padding: 10px 14px; border-top: 1px solid var(--app-line); } /* Le bandeau de session (gabarit partage auth/_session_bar) au style de la maquette. * * ── PIEGE VERIFIE AVANT DE TOUCHER QUOI QUE CE SOIT ICI (12/08/2026) ──────── * * `auth.css` habille LUI AUSSI `.session-bar`, `.session-who`, `.session-role` et * `.session-logout button`, mais avec les jetons de `base.css` — `--line`, `--panel-alt`, * `--bg`, `--muted`, `--text`, `--accent`. Ces jetons N'EXISTENT PAS dans cette feuille. * * CE N'EST PAS UN DEFAUT, ET LA VERIFICATION EST CELLE DES GABARITS, PAS DES FEUILLES : * - `templates/shell/app.html.twig` (l'APPLICATION) charge app.css SEULE. Les regles * `.app-side-foot .session-*` ci-dessous sont donc les seules qui s'appliquent, et * elles n'emploient que des jetons `--app-*`, tous definis. * - `templates/explorer/index.html.twig` et `templates/session/index.html.twig` etendent * `shell/layout.html.twig` (base.css) ET chargent auth.css : les jetons `--line`, * `--bg` et compagnie y sont definis, et les regles d'auth.css s'y appliquent. * - `templates/auth/login.html.twig` charge app.css ET auth.css, mais ne rend AUCUN * bandeau (pas d'identite en contexte) : le cas ne se pose pas. * * CONCLUSION A NE PAS REFAIRE DE TRAVERS : reecrire les regles d'auth.css avec des jetons * `--app-*` les resoudrait en chaine VIDE sur l'explorateur et sur la page de session, qui * ne chargent pas cette feuille — deux ecrans casses pour un defaut qui n'existe pas. Les * deux jeux de regles sont deliberement disjoints ; ils ne se rencontrent jamais. */ .app-side-foot .session-bar { display: flex; align-items: center; gap: 9px; } .app-side-foot .session-avatar { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--app-navy); color: #FFFFFF; font: 600 10px/1 var(--app-font); } .app-side-foot .session-who { margin: 0; display: flex; flex-direction: column; gap: 1px; font: 600 12.5px/1.2 var(--app-font); color: var(--app-ink); flex: 1; min-width: 0; } .app-side-foot .session-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* * LE ROLE (« ADMINISTRATEUR »). L'encre passe de var(--app-link-hover) a * var(--app-amber-ink) le 12/08/2026, pour DEUX raisons qui vont dans le meme sens. * * SEMANTIQUE : `--app-link-hover` est, par son nom, la couleur de SURVOL D'UN LIEN. Ce * libelle n'est ni un lien ni survolable — il empruntait un jeton pour sa teinte. Le jeton * de l'ambre-sur-fond-clair existe et se nomme `--app-amber-ink` ; l'en-tete de la palette * le dit mot pour mot (« l'encre ambre sur fond clair est #8A5A00 »). * * MESURE : ancienne valeur #C97E00 sur le pied blanc = 3,25:1 — sous le plancher 4,5:1 de * WCAG 1.4.3, et le texte fait 9,5 px, donc rien ne le fait passer pour du « gros texte ». * Nouvelle valeur #8A5A00 = 5,93:1. La FAMILLE de couleur ne bouge pas : c'est le meme * ambre, plus dense. L'ambre VIF (#F5A200) n'a pas ete touche — il est reserve aux aplats, * ou il porte de l'encre foncee, et le responsable produit a refuse qu'on le ternisse. */ .app-side-foot .session-role { font: 600 9.5px/1.2 var(--app-font); letter-spacing: .12em; text-transform: uppercase; color: var(--app-amber-ink); } .app-side-foot .session-logout { margin: 0; } .app-side-foot .session-logout button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--app-radius-sm); background: transparent; /* L'encre passe de var(--app-faint) a var(--app-muted) le 12/08/2026. Ce bouton n'a AUCUN libelle — son icone EST sa cible, donc elle releve du plancher 3:1 de WCAG 1.4.11 (contraste des elements non textuels). Ancienne mesure : #98A2B3 sur blanc = 2,58:1, sous le plancher. Nouvelle : #667085 = 4,97:1. Et c'est le seul moyen de fermer sa session depuis l'application : une cible qu'on ne voit pas est un defaut. */ color: var(--app-muted); cursor: pointer; } .app-side-foot .session-logout button:hover { background: var(--app-surface-alt); color: var(--app-ink); } .app-side-foot .session-logout button:focus-visible { outline: 2px solid var(--app-link); outline-offset: 2px; } .app-side-foot .session-logout-icon { width: 17px; height: 17px; } /* ------------------------------------------------------------------ contenu */ /* * L'AIR — 12/08/2026. « beaucoup d'air : la reference respire plus que notre ecran ». * Anciennes valeurs : padding 20px 26px 34px, gap 18px. Nouvelles : 24px 30px 38px, 20px. * Le pas est volontairement COURT (4 px et 2 px) : la demande est « revoir avec cette * vision la », pas recopier la maquette. */ .app-main { flex: 1; min-width: 0; padding: 24px 30px 38px; display: flex; flex-direction: column; gap: 20px; } .app-topbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--app-line); } .app-crumbs { display: flex; align-items: center; gap: 7px; font: 400 13px/1 var(--app-font); color: var(--app-muted); } .app-crumbs strong { font-weight: 600; color: var(--app-ink); } /* Le chevron « › » entre deux miettes. Encre passee de var(--app-line-strong) a var(--app-faint) le 12/08/2026 : ancienne mesure #CFD6E0 sur #F7F8FA = 1,38:1, un separateur qu'on ne voyait plus une fois le fond refroidi ; nouvelle #98A2B3 = 2,42:1. --app-faint est LE bon jeton ici et il n'y a pas de plancher a tenir : ce chevron est une PONCTUATION decorative, le gabarit porte la hierarchie dans son balisage