/* Page de connexion. Chargée par templates/auth/login.html.twig. Fichier séparé et non bloc de présentation en ligne : la politique de sécurité de contenu du projet interdit les feuilles en ligne, donc une déclaration insérée dans le gabarit ne serait PAS appliquée par le navigateur. ── CETTE FEUILLE A DEUX MOITIÉS QUI NE VIVENT PAS DANS LE MÊME MONDE ─────── (12/08/2026, alignement sur l'intranet Modal Hub — N96) La phrase qui tenait ici — « les variables de couleur viennent de base.css » — était vraie pour UNE moitié du fichier seulement, et c'est la distinction qui commande tout le reste. MESURÉ sur les gabarits, pas supposé : auth.css est chargée par TROIS gabarits. auth/login.html.twig base.css + app.css + auth.css → clair session/index.html.twig base.css + auth.css → SOMBRE explorer/index.html.twig base.css + auth.css → SOMBRE Les deux dernières NE CHARGENT PAS app.css. Les jetons `--app-*` n'y existent donc PAS, et un `var(--app-bg)` écrit sans repli s'y résoudrait en déclaration invalide — la règle serait simplement jetée. D'où la ligne de partage : .signin*, body.page-login → page de CONNEXION seule (vérifié au grep : aucun autre gabarit ne rend ces classes). app.css est là, donc jetons `--app-*` DIRECTS. .session-* → /session et /explorer, deux outils de dev au fond sombre. Elles consomment les jetons de base.css (--line, --panel-alt, --bg, --muted, --text, --accent), qui s'y résolvent CORRECTEMENT. On n'y touche pas — voir le pavé posé juste au-dessus de .session-bar. AVANT DE CONVERTIR UNE RÈGLE DE PLUS : regarder de quel côté de cette ligne elle tombe. Les deux jeux de jetons ne se remplacent pas l'un l'autre. ── LE RELEVÉ CI-DESSUS A CHANGÉ D'UNE LIGNE LE 13/08/2026 ────────────────── (le responsable produit : « tu pourrai refaire les couleurs ect.. de l'explorateur de route ».) La ligne de l'explorateur est désormais celle-ci, et l'ancienne reste écrite plus haut pour que la comparaison se fasse sans aller la chercher ailleurs : explorer/index.html.twig base.css + app.css + auth.css → CLAIR AUCUNE RÈGLE DE CETTE FEUILLE N'A BOUGÉ POUR AUTANT, ET C'EST LE POINT DU LOT. Pas une déclaration `.session-*` n'a été convertie. Ce qui a changé vit dans explorer.css : les jetons de base.css y sont REDÉCLARÉS SUR LE CORPS de la page de l'explorateur, sous une classe de corps neuve que ce gabarit est seul à porter. Les propriétés personnalisées s'héritent, donc le bandeau de session rend clair sur l'explorateur et SOMBRE sur /session — mêmes six appels de jetons, même fichier, aucune duplication de règle. C'est la méthode de N96 appliquée un cran plus bas : N96 a coupé cette feuille en deux par le SÉLECTEUR, ce lot coupe par le CORPS, ce qui lui permet de ne toucher ni base.css ni une seule règle d'ici. CE QUE ÇA CHANGE POUR QUI ÉDITE LA MOITIÉ `.session-*` : rien à la règle près, et une chose à la méthode. Ces règles servent maintenant DEUX fonds opposés selon la page. Une couleur écrite en LITTÉRAL y serait désormais fausse sur l'un des deux écrans, là où elle n'était fausse sur aucun avant ce lot. Les jetons de base.css restent donc la seule écriture admise dans cette moitié, et la ligne de partage ci-dessus vaut mot pour mot : la moitié `.session-*` ne prend toujours PAS de jeton applicatif direct, parce que /session, lui, ne charge toujours pas la feuille applicative. */ /* La page de connexion est la seule page de la coquille sans navigation. La classe vient du gabarit : auth.css est aussi chargée par /session et /explorer, qui doivent conserver leur en-tête et leur fond sombre. SÉLECTEUR RENFORCÉ EN `body.page.page-login` (0,2,1). Il était `body.page-login` (0,1,1), soit EXACTEMENT la spécificité du `body.page` de base.css qui pose le fond sombre : seul l'ordre des deux balises dans la coquille faisait gagner celui-ci. Ça marchait, mais ça reposait sur l'ordre du gabarit et non sur la feuille. error.css a documenté le même piège pour `body.page.page-error` ; on s'aligne. */ body.page.page-login { min-height: 100vh; padding: 0; /* LE BANDEAU MARINE ET SON FILET AMBRE NE BOUGENT PAS — ce sont les couleurs de la MARQUE, et le lot du 12/08/2026 ne refroidit que les NEUTRES. #26356B RESTE ÉCRIT EN LITTÉRAL, et c'est un choix motivé, pas un oubli. Ce marine-ci n'est pas `--app-navy` (#1B2A4A) : c'est le marine de la maquette, celui qu'app.css décrit comme « restant vrai » et que handover.css porte en repli. Le convertir assombrirait le bandeau d'un cran visible. Il est en plus nommé TEL QUEL dans le commentaire d'en-tête de templates/auth/login.html.twig (« le degrade #26356B → #EEF1F5 »), gabarit qui n'appartient pas à ce lot. Si ce marine doit un jour rejoindre un jeton, c'est ICI et dans ce commentaire de gabarit — deux endroits, et il faut les faire ensemble. L'ambre passe au jeton `--app-amber` À VALEUR IDENTIQUE : #F5A200 hier, #F5A200 aujourd'hui. Aucun pixel ne change, mais le filet suit désormais la marque si elle bouge. La valeur vive est délibérée — une version plus terne (#C97E00) a déjà été refusée par le responsable produit, « pourquoi les couleurs sont fade ? ». LE BAS DU DÉGRADÉ, LUI, EST UN NEUTRE, ET IL SE REFROIDIT : #EEF1F5 (ancien) → var(--app-bg), soit #F7F8FA. Plus clair et moins saturé, c'est le fond de TOUT le reste du site depuis ce même lot. */ background: linear-gradient( to bottom, #26356B 0, #26356B 214px, var(--app-amber) 214px, var(--app-amber) 218px, var(--app-bg) 218px, var(--app-bg) 100% ); /* #17274A (ancien) → var(--app-ink), #1B2A4A. Contraste sur la carte blanche : 14,73:1 avant, 14,22:1 après — les deux très au-dessus du seuil AA de 4,5:1. */ color: var(--app-ink); } .page-login .shell-head { display: none; } .page-login .shell-main { display: flex; align-items: center; justify-content: center; width: 100%; max-width: none; min-height: 100vh; padding: 24px; } /* LA CARTE — c'est la forme que montre la référence Modal Hub : blanche, arrondie, un filet léger, une ombre très douce. Seules les COULEURS bougent ici, la géométrie (448px, 14px de rayon, 38/32/28 de marge intérieure) est inchangée. #E1E5EB (ancien) → var(--app-line), #E4E8EF — filet gris ardoise et non gris chaud. #FFFFFF (ancien) → var(--app-surface), #FFFFFF : valeur IDENTIQUE, aucun pixel ne change. Le blanc de la carte reste un blanc pur, et c'est voulu — c'est le fond contre lequel l'anticrénelage du logo a été calculé (voir .signin-brand img). L'OMBRE SUIT L'ENCRE NEUVE : rgb(20 34 67 / 13%) (ancien) → rgb(27 42 74 / 13%), soit exactement #1B2A4A à 13 %. L'opacité NE BOUGE PAS : 13 % est la « très douce » de la référence, et c'est le paramètre qu'on retoucherait si l'ombre paraissait lourde — pas la teinte. Écrite en littéral et non en jeton parce qu'une couleur d'ombre n'existe pas dans `:root` ; si elle y entre un jour, c'est d'ici qu'elle part. */ .signin { width: min(100%, 448px); margin: 0; padding: 38px 32px 28px; border: 1px solid var(--app-line); border-radius: 14px; background: var(--app-surface); box-shadow: 0 16px 38px rgb(27 42 74 / 13%); } /* LA MARQUE N'A PLUS QU'UN SEUL PORTEUR — 10/08/2026, bascule sur modal-inventory.png. `.signin-brand-divider` et `.signin-brand strong` sont SUPPRIMEES et non commentees : le filet et le mot « Inventory » ont quitte le gabarit parce que le nouveau fichier porte deja le mot-symbole complet, et le projet ne garde pas de selecteur sans porteur (meme nettoyage que .app-brand-mark dans app.css le meme jour). `gap` part avec eux : il n'espacait que ces trois morceaux, il n'en reste qu'un. Le conteneur ne sert plus qu'a centrer le logo et a tenir l'air sous la marque. */ .signin-brand { display: flex; align-items: center; justify-content: center; margin-bottom: 42px; } /* * DIMENSIONNE PAR LA LARGEUR, JAMAIS PAR LA HAUTEUR. Le rapport du fichier est MESURE : * 529x123, soit 4,30:1 — tres horizontal. Fixer une hauteur donnerait une largeur * imprevisible. Meme facon de faire que .app-brand-logo dans app.css. * * POURQUOI 154px NE BOUGE PAS, alors que le rapport d'aspect a change (l'ancien fichier * etait en 2,94:1). Le raisonnement en boites annoncait un logo plus petit : 154px de * large donnaient 52 px de haut avec l'ancien fichier, 36 px avec le nouveau. LA MESURE * DE L'ENCRE dit le contraire, et c'est elle qui tranche — l'ancien fichier etait opaque * AVEC des marges integrees (encre 480x97 dans une boite de 500x170, dont 63 px de blanc * en bas), le nouveau est recadre au contenu (encre 528x123, aucune marge). A 154px : * avant encre rendue 480 x 97 x (154/500) = 148 x 30 px * apres encre rendue 528 x 123 x (154/529) = 154 x 36 px * Le trace visible est donc LEGEREMENT PLUS GRAND qu'avant, pas plus petit. Aucune raison * mesurable de toucher au nombre ; s'il faut le reequilibrer parce que la marque a perdu * son mot en texte, c'est un jugement d'ecran qui appartient au responsable produit, et c'est ce nombre-ci * et son homologue du point de rupture qu'il faut changer, nulle part ailleurs. * * AUCUN `background` ICI, ET C'EST UNE REGLE, PAS UN OUBLI : l'image est TRANSPARENTE (4 * 614 pixels en alpha partiel, l'anticrenelage des bords), un fond pose sur l' * reintroduirait le rectangle que le detourage a supprime. Le blanc appartient a la CARTE. * * `display: block` supprime l'espace sous la ligne de base propre aux images en ligne. */ .signin-brand img { display: block; width: 154px; height: auto; } .signin-heading { margin-bottom: 26px; text-align: center; } .signin-heading h1 { margin: 0 0 7px; /* #17274A (ancien) → var(--app-ink), #1B2A4A. 14,73:1 avant, 14,22:1 après. */ color: var(--app-ink); font: 700 23px/1.3 "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; } /* LE SOUS-TITRE GRIS — c'est la règle qui casse en premier quand on refroidit une palette, et LA MESURE DIT QU'ELLE ÉTAIT DÉJÀ CASSÉE AVANT LE LOT. Contrastes calculés (WCAG 2.1, sur le blanc de la carte, texte de 15px donc seuil AA « normal » de 4,5:1) : #8A93A5 ancien 3,09:1 ÉCHEC — sous le seuil de 32 % var(--app-faint) #98A2B3 2,58:1 ÉCHEC, et PIRE que l'ancien var(--app-muted) #667085 4,97:1 conforme C'est --app-muted qui est retenu, et le choix se joue à la mesure, pas au ton : --app-faint est le gris qui RESSEMBLE le plus au #8A93A5 d'origine, et c'est précisément pour ça qu'il est écarté — il reconduirait l'échec en le rendant plus difficile à voir. --app-faint reste bon pour ce qui n'est pas du texte à lire (filets, séparateurs, icônes décoratives) ; il n'a rien à faire sur une phrase. CONSÉQUENCE ASSUMÉE : le mot « Connexion » sous le titre est un cran plus sombre qu'avant. C'est un écran du responsable produit et il peut le refuser ; le retour en arrière tient en un jeton, sur cette ligne, et l'échec de contraste revient avec lui. */ .signin-heading p { margin: 0; color: var(--app-muted); font: 400 15px/1.4 "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; } /* Message de refus. Il porte role="alert" dans le gabarit : la couleur n'est donc pas le seul véhicule de l'information, ce qui est la règle — un daltonien et un lecteur d'écran reçoivent le message par le texte. */ /* LES TROIS TONS D'AMBRE PASSENT AUX JETONS DE LA MARQUE. L'ambre est la seule famille que le lot du 12/08/2026 ne refroidit PAS. #D89A22 (ancien) → var(--app-amber), #F5A200 — filet plus vif #FFF8E8 (ancien) → var(--app-amber-bg), #FFF1DA — fond un rien plus chaud #77510A (ancien) → var(--app-amber-ink), #8A5A00 — encre un rien plus claire Contraste de l'encre sur son fond : 6,69:1 avant, 5,32:1 après. Le seuil AA pour ce texte de 13px est 4,5:1 — conforme avant comme après, avec moins de marge. Ne pas éclaircir --app-amber-ink davantage sans refaire ce calcul. */ .signin-error { margin: 0 0 16px; padding: 10px 12px; border: 1px solid var(--app-amber); border-radius: 7px; background: var(--app-amber-bg); color: var(--app-amber-ink); font-size: 13px; } /* ══ NE PAS CONVERTIR CE BLOC AUX JETONS `--app-*`. LIRE AVANT DE TOUCHER. ══════ * * Bandeau de session de l'explorateur : identité affichée et bouton de déconnexion. * Le formulaire est en POST — un GET /logout se déclencherait par une simple balise * d'image sur n'importe quelle page. * * ── POURQUOI CES `var()` NE SONT PAS LES MÊMES QUE CEUX D'AU-DESSUS ────────── * * Les jetons employés ici — --line, --panel-alt, --bg, --muted, --text, --accent, * --mono — viennent de base.css, PAS d'app.css. C'est la palette SOMBRE * (--bg: #10141a), et elle est CORRECTE : les deux écrans qui rendent réellement ce * bandeau avec CETTE feuille sont /session et /explorer, deux outils de dev qui * chargent base.css et pas app.css. base.css le dit lui-même : repeindre ces deux * écrans est une décision du responsable produit, pas un effet de bord à provoquer en passant. * * ── LE PIÈGE, QUI A DÉJÀ COÛTÉ AU DÉPÔT ───────────────────────────────────── * * Le bandeau apparaît AUSSI dans la coquille applicative claire, en pied de barre * (`app.html.twig` inclut le même `auth/_session_bar.html.twig`). Il est tentant d'en * conclure que ces règles l'habillent mal sur fond clair. ELLES NE L'HABILLENT PAS * DU TOUT : la coquille applicative NE CHARGE PAS auth.css. Son bandeau est peint * par les règles `.app-side-foot .session-*` d'app.css, qui sont un autre bloc dans * un autre fichier. Vérifié sur les deux feuilles et sur les deux gabarits. * * Donc : « corriger » ces couleurs vers les jetons `--app-*` ne réparerait RIEN sur * l'écran qu'on croit viser, et casserait les deux écrans sombres au passage — les * jetons `--app-*` n'existent pas là-bas, chaque déclaration serait jetée. * * LA RÈGLE GÉNÉRALE : dans cette feuille, vérifier QUI charge QUOI avant de conclure * qu'une règle est fausse. Une couleur qui a l'air déplacée sert peut-être un écran * qu'on n'a pas ouvert. * ═════════════════════════════════════════════════════════════════════════════ */ .session-bar { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; justify-content: space-between; margin: 0 0 1.2rem; padding: 0.6rem 0.9rem; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-alt); } .session-who { margin: 0; } .session-role { margin-left: 0.4rem; padding: 0.1rem 0.4rem; border-radius: 3px; background: var(--bg); color: var(--muted); font-family: var(--mono); font-size: 0.78rem; } .session-logout { margin: 0; } .session-logout button { padding: 0.4rem 0.8rem; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--text); font: inherit; cursor: pointer; } .session-logout button:hover { border-color: var(--accent); color: var(--accent); } /* ---------------------------------------------------- connexion Microsoft 365 */ /* * La maquette du responsable produit (05/08/2026) : une carte, une phrase, un bouton. Les couleurs * sont celles de la coquille applicative — la page de connexion et l'application ne * doivent pas paraitre venir de deux projets. */ /* #515B70 (ancien) → var(--app-ink-soft), #344054. Contraste sur la carte blanche : 6,82:1 avant, 10,46:1 après — conforme des deux côtés, la phrase gagne en lisibilité. PAS --app-muted, alors que sa valeur serait plus proche de l'ancienne : le sous-titre au-dessus vient de prendre --app-muted, et les deux lignes se seraient retrouvées du MÊME gris. La hiérarchie de cette carte tient sur trois crans — titre en --app-ink, phrase d'instruction en --app-ink-soft, sous-titre et pied en --app-muted — et c'est elle qu'il faut préserver si l'un des trois change. */ .signin-lede { margin: 0 0 10px; color: var(--app-ink-soft); font: 400 13px/1.5 "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; } .signin-form { display: grid; gap: 12px; } .signin-remember { display: flex; gap: 8px; align-items: center; color: var(--app-ink-soft); font: 400 13px/1.4 "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; } .signin-remember input { margin: 0; } .signin-microsoft { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; box-sizing: border-box; min-height: 52px; padding: 12px 16px; /* #C9D1DF (ancien) → var(--app-line-strong), #CFD6E0 — le filet appuyé, froid. #FFFFFF (ancien) → var(--app-surface), valeur identique. #16224A (ancien) → var(--app-ink), #1B2A4A. 15,42:1 avant, 14,22:1 après. N129, 13/08/2026 : le filet passe de var(--app-line-strong) à var(--app-line-control), #CFD6E0 → #7C8798, soit 1,46:1 → 3,64:1 sur --app-surface. C'est le seul contour de commande de `/login`, et cette page charge bien app.css (avant auth.css, voir l'en-tête de `templates/auth/login.html.twig`) : le jeton neuf y résout. L'encre du libellé ne bouge pas, elle reste --app-ink à 14,22:1. */ border: 1px solid var(--app-line-control); border-radius: 8px; background: var(--app-surface); color: var(--app-ink); font: 600 15px/1.2 "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; text-decoration: none; cursor: pointer; } /* LES DEUX ÉTATS ACTIONNABLES PASSENT À L'INDIGO, ET C'EST LE SEUL ENDROIT DE CETTE PAGE OÙ UNE COULEUR NEUVE APPARAÎT. #26356B (ancien, le marine de la maquette) → var(--app-accent), #4F46E5. L'intranet Modal Hub emploie l'indigo pour ce qu'on peut actionner — liens, état actif, anneau de mise au point — et app.css a introduit `--app-accent` pour exactement ce rôle. Le bouton Microsoft est LE seul élément actionnable de cet écran. Le bandeau marine du haut, lui, ne bouge pas : il est décoratif, pas actionnable. Les deux marines de cette feuille avaient la même valeur et se séparent donc ici — c'est délibéré, pas une conversion oubliée. L'INDIGO EST L'AJOUT LE PLUS DISCUTABLE DU LOT, app.css le signale déjà comme tel. Il se retire en remettant `--app-accent` à la valeur du marine, DANS app.css, sans toucher à ces deux règles-ci. #F6F8FB (ancien) → var(--app-surface-alt), #F1F4F8 — le survol reste un gris à peine posé, il ne prend PAS de teinte indigo : seul le filet signale l'état. */ .signin-microsoft:hover { border-color: var(--app-accent); background: var(--app-surface-alt); } .signin-microsoft:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; } /* Les quatre carres de la marque Microsoft, en SVG en ligne : aucune requete, aucun domaine tiers — la CSP interdit les deux. */ .signin-ms-logo { width: 19px; height: 19px; flex: none; } /* LE PIED DE CARTE — MÊME MESURE QUE LE SOUS-TITRE, ET MÊME CONCLUSION. Contrastes sur le blanc de la carte (texte de 11px, seuil AA de 4,5:1) : #A0A8B7 ancien 2,39:1 ÉCHEC — le pire de la page var(--app-faint) #98A2B3 2,58:1 ÉCHEC aussi, malgré l'air de famille var(--app-muted) #667085 4,97:1 conforme La mention de sécurité est du texte à lire, pas un ornement : elle prend --app-muted. Elle devient donc visiblement plus présente qu'avant, et c'est le prix assumé d'une ligne qui échouait de 47 % sur le seul écran public du site. Elle partage son gris avec le sous-titre : les deux sont aux extrémités de la carte et ne se lisent jamais ensemble, la hiérarchie n'en souffre pas. */ .signin-security { display: flex; gap: 6px; align-items: center; justify-content: center; margin: 28px 0 0; color: var(--app-muted); font: 400 11px/1.4 "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; } .signin-security svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; } @media (max-width: 480px) { /* MÊME DÉGRADÉ, MÊMES JETONS, SEULES LES HAUTEURS CHANGENT (214/218 → 150/154). Sélecteur renforcé en `body.page.page-login` comme son homologue pleine largeur ; s'il repassait à (0,1,1) ici seulement, le fond sombre de base.css reprendrait le dessus sous 480px et nulle part ailleurs — le genre de défaut qu'on ne voit pas depuis un poste de travail. */ body.page.page-login { background: linear-gradient( to bottom, #26356B 0, #26356B 150px, var(--app-amber) 150px, var(--app-amber) 154px, var(--app-bg) 154px, var(--app-bg) 100% ); } .page-login .shell-main { padding: 16px; } .signin { padding: 30px 20px 24px; } .signin-brand { margin-bottom: 34px; } /* Encre rendue a cette largeur : 528 x 123 x (138/529) = 138 x 32 px. */ .signin-brand img { width: 138px; } .signin-heading h1 { font-size: 20px; } .signin-security { align-items: flex-start; text-align: center; } }