/* ========================================================================== ChloroLive · Rédaction — VUE 1 · CONNEXION, le complément de mise en page -------------------------------------------------------------------------- Une seule page de connexion, servie par les DEUX serveurs (portail 8130 et atelier 8132) depuis `connexion.html`, à la racine du dépôt. Une seule feuille, donc, inscrite sous le même nom dans les deux listes blanches : sans cela, la même page s'afficherait nue d'un côté et habillée de l'autre. Cette feuille ne porte QUE ce que `css/salle-de-redaction.css` ne donne pas. Rien n'y est recopié : la feuille de production fait foi sur les couleurs, les cartes, les boutons et les champs, et le portage doit être de la reprise, pas de la traduction. Si une règle d'ici finit par ressembler à une règle de là-bas, c'est qu'elle est de trop. Ce qui manquait : le CENTRAGE de la colonne. La maquette validée pose une colonne étroite au milieu de l'écran ; la classe qui le fait vit dans `maquettes/source/systeme.css`, qui n'est pas une feuille de production et n'est donc pas servie. Et un style en ligne serait bloqué en silence par la CSP des deux serveurs — d'où cette feuille plutôt qu'un `style=`. CE QUI A QUITTÉ CETTE FEUILLE : la mise en forme du secret du second facteur et celle du code QR. L'enrôlement a DÉMÉNAGÉ dans « Mon compte » (/compte), et ses règles avec lui, dans `css/compte.css`. Les laisser ici en aurait fait des règles mortes qui décrivent un écran que cette page n'affiche plus. Pas de thème clair, et pas de `prefers-color-scheme` : les outils sont sombres, sans variante. Une requête de média ajoutée « au cas où » finirait par rendre un écran blanc à quelqu'un, un matin. Outil de rédaction : NE PAS embarquer dans le ZIP Navori. ========================================================================== */ /* La colonne de connexion : étroite, centrée, aérée du haut. C'est le seul écran du produit qui n'a rien à montrer d'autre — lui donner la pleine largeur ferait chercher des yeux un formulaire de six centimètres perdu à gauche d'un écran de 1920. `main.ensemble`, ET NON `.ensemble` TOUT SEUL : la feuille de production ne donne à cette classe qu'un empilement vertical, et d'autres blocs de la page pourraient légitimement la reprendre. Écrite large, la règle leur imposerait à chacun 6 % d'écran vide au-dessus et une largeur de colonne — un avis de trois mots se retrouvait ainsi poussé au milieu du panneau. La colonne est un `main`, et il n'y en a qu'un. */ main.ensemble { max-width: 460px; margin: 0 auto; padding-top: 6vh; } /* Sur un écran court — un portable tenu à la main pour relever un lien reçu par courriel — les 6 % du haut deviennent de la place perdue. */ @media (max-height: 620px) { main.ensemble { padding-top: 2vh; } } /* La marque en tête de colonne. Cette page a perdu son cartouche `
` : « Chlorolive » est remontée DANS LE FLUX, premier enfant de `
`. Ce que `.tete` lui donnait — une boîte flex d’écart 16 px, collante en haut, haute de 56 px, posée sur un fond de carte et soulignée d’un trait — disparaît avec lui, et presque rien n’en manque : dans une colonne de 460 px centrée, la marque n’est plus une barre d’application qui surplombe un espace de travail, c’est le titre de la page. LA LIGNE A PERDU SON TITRE AUSSI. Elle portait un `Salle de rédaction` : cette page-ci ne nomme plus l’espace de travail, puisqu’elle n’en ouvre encore aucun. Rien ici ne doit viser `.titre` pour autant — les trois panneaux de la page (« Recevoir un lien de connexion », « Code de sécurité », « Session ouverte ») portent toujours le leur, et une règle écrite pour l’élément disparu irait les habiller à leur insu. Et rien d’autre que la disposition et la taille. `.marque`, `.etiquette` et `.btn` sont des classes AUTONOMES de `css/salle-de-redaction.css`, pas des descendants de `.tete` : elles habillent déjà leurs éléments hors du cartouche, et les recopier ici donnerait une règle qui ressemble à une règle de là-bas — c’est-à-dire une règle de trop, comme le dit l’en-tête de cette feuille. LE BLOC EST UNE COLONNE, ET C’EST LE CENTRAGE QUI L’EXIGE. Ce qui est demandé, c’est la marque centrée au-dessus de « Recevoir un lien de connexion ». En rangée, « centrée » n’aurait été vrai que sur la page vide : ce bloc ne porte pas qu’un logo, il porte aussi l’adresse du compte (`#qui`) et « Se déconnecter », révélés quand quelqu’un arrive ici EN AYANT DÉJÀ UNE SESSION. C’est un cas réel — `serveur/connexion-page-check.mjs` exige que ce bouton cesse d’être caché, et le perdre laisserait cette personne sans aucun moyen de se déconnecter, défaut déjà payé sur cette page. Or une marque centrée dans une rangée qui porte deux autres éléments se décale de la moitié de leur largeur : le logo bougerait précisément le jour où personne ne le regarde. En colonne, chacun a sa ligne, et la marque est centrée dans les deux cas. `align-items: center` change ainsi de rôle sans changer de valeur : il alignait des voisins sur une ligne, il centre maintenant la colonne sur sa largeur. `flex-wrap: wrap` EST PARTI, ET VOICI CE QUI L’A RENDU INUTILE — le calcul qui le justifiait reste vrai, et c’est lui qui condamne la rangée. Mesuré en Source Sans 3, dans les 420 px utiles de la colonne — 460 px moins les 20 px de padding que `.ensemble` pose de chaque côté : « Chlorolive » en 19 px gras = 86 px ; le bouton = 121 px (93 px de texte, 26 px de padding, 2 px de bordure) ; trois écarts de 16 px = 48 px ; et la pastille de l’adresse coûte 22 px de padding et de bordure avant même son texte. Il restait 142 px pour l’adresse elle-même. `prenom.nom@idverde.fr` en prend 125 : ça passait, avec 17 px de marge — trois caractères. Mais `marie-claire.dupont@idverde.fr` en prend 159 et débordait de 17 px, `christophe.lemarchand@idverde.fr` de 34 ; et sur un portable de 390 px de large — l’écran de quelqu’un qui relève un lien reçu par courriel —, il ne restait que 72 px pour l’adresse, si bien que `j.dupont@idverde.fr` elle-même débordait. Ce que cette mesure disait, ce n’était pas « il faut un retour à la ligne » : c’était que ces trois éléments NE TIENNENT PAS sur une ligne, et la marque à 38 px ne fait qu’aggraver le compte de 19 px de plus. La colonne n’est donc pas seulement le bon choix pour le centrage, c’est celui que la mesure imposait déjà — elle donne d’office ce que `wrap` rattrapait de justesse. Et `wrap` n’a plus rien à faire passer : en `flex-direction: column`, il ferait des COLONNES, ce qui n’a aucun sens ici. LA TAILLE : 38 px, le double des 19 px que `.marque` reçoit de `css/salle-de-redaction.css` — grossie « de » 100 %, c’est-à-dire doublée. Le sélecteur est `.marque-bloc .marque` (0,2,0), qui bat `.marque` seule (0,1,0) sans `!important` et sans toucher à la feuille de production, reprise verbatim (voir PROVENANCE.sha256). Il ne vaut que DANS ce bloc : les douze autres pages gardent leur marque à 19 px dans leur en-tête, la règle est propre à cette page et vit donc dans cette feuille. Valeur ABSOLUE et non `2em` : le bloc n’impose aucun contexte de taille — un `em` se calculerait sur les 14 px du `body` et rendrait 28 px —, et c’est « 38 » que cherchera celui qui viendra relire. `.marque b` et `.marque i` ne reçoivent rien : ils ne portent que les couleurs (White sand, Mint) et héritent de la taille. L’ÉCART PASSE DE 16 À 10 px. En rangée, les 16 px séparaient des voisins sur une ligne de 19 px. En colonne, ils sépareraient un titre de 38 px de ce qui lui appartient, juste au-dessus des 18 px qui séparent le bloc ENTIER du premier panneau : à 16 contre 18, plus rien ne dirait si l’adresse et le bouton tiennent à la marque ou au panneau d’en dessous. À 10 px ils se rattachent à la marque, et la marge de 18 px redevient le plus grand écart — le bloc se lit comme un seul objet. Quand personne n’a de session, `#qui` et `#deconnexion` sont `hidden`, donc `display: none` (voir plus bas) : ils sortent de la disposition, et l’écart ne laisse aucun blanc fantôme sous la marque. */ .marque-bloc { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 18px; } .marque-bloc .marque { font-size: 38px; } /* -------------------------------------------------------------------------- LE TEXTE COURANT DE CETTE PAGE EST EN WHITE SAND, ET C’EST PROPRE À ELLE. -------------------------------------------------------------------------- `css/salle-de-redaction.css` donne `.aide` et `.champ > span` en `--doux` (#9db3a7), et c’est juste PARTOUT AILLEURS : dans un écran de travail dense — une liste de sujets, un tableau d’éditions, un formulaire de quinze champs — l’aide accompagne le travail, elle n’est pas le travail. Le gris dit à l’œil dans quel ordre lire : d’abord les titres et les données, l’explication ensuite, si on la cherche. ICI IL N’Y A RIEN À METTRE AU SECOND PLAN. Cette page ne porte ni liste, ni tableau, ni données : quatre phrases, deux libellés, un champ. Tout ce qui est écrit est ce qu’on est venu lire — « il n’y a pas de mot de passe dans ChloroLive », « le lien ne sert qu’une fois », « demandez à un administrateur de réinitialiser votre second facteur ». Le gris y hiérarchise quelque chose qui n’a pas de hiérarchie, et il le fait sur la PREMIÈRE page que voit quelqu’un qui arrive — souvent sur un portable, en plein jour, pour relever un lien reçu par courriel. Le texte passe donc en White sand, la couleur de la charte pour ce qui se lit. `var(--sand)`, JAMAIS `#FFF6E7` ÉCRIT EN DUR : la charte vit dans les variables de `:root`, et une valeur recopiée est une valeur qui survivra au jour où la palette bouge. POURQUOI CINQ RÈGLES ET NON UNE SEULE POSÉE SUR LE CONTENEUR. Un `main.ensemble { color: … }` aurait l’air de tout peindre et n’aurait peint QUE ce qui n’avait pas déjà de couleur : l’héritage ne bat pas une règle directe, et `.aide` comme `.champ > span` en portent une. Les deux tiers du texte de la page seraient restés gris, sous une règle qui donne l’illusion du contraire. On vise donc les porteurs UN PAR UN. ET L’ALERTE EST ÉCARTÉE PAR CONSTRUCTION — `:not(.alerte)` n’est pas un ornement. `js/connexion.js` pose « aide alerte » sur les refus : lien périmé, code faux, serveur muet. La production leur donne Terracotta avec `.aide.alerte`, qui pèse (0,2,0) ; la règle ci-dessous pèse (0,3,1) et l’écraserait sans ce `:not`. La page dirait alors « votre code est incorrect » exactement du même ton qu’elle explique où trouver ce code — la seule chose qui distingue une panne d’une explication, sur un écran qui n’a ni icône ni son, disparaîtrait en silence, et rien ne le signalerait : aucun banc ne mesure une couleur à l’écran. C’est la ligne qu’on « simplifiera » dans un an en la croyant redondante. Elle ne l’est pas. CE QUI NE CHANGE PAS, ET IL FAUT LE DIRE : `.titre` reste Pollen (les trois panneaux), `.marque` garde son sand et son mint, et `#qui` — l’étiquette qui porte l’adresse du compte quand on arrive avec une session déjà ouverte — reste en `--doux`. Cette pastille n’est pas du texte à lire, c’est un état affiché : elle dit DE QUI est la session ouverte, à côté du bouton qui la ferme. La passer en sand la mettrait au même niveau que les phrases, et la ligne de la marque se lirait comme un quatrième paragraphe. POIDS : `main.ensemble` et non `.aide` seule. La feuille de production ne connaît pas cette page ; celle-ci ne doit rien apprendre aux douze autres, où le gris a son sens. `main` est unique dans le document, la règle est donc close sur cette page-ci sans `!important` et sans toucher à la feuille reprise verbatim (voir PROVENANCE.sha256). */ /* (0,3,1) — bat `.aide` (0,1,0) de la production, et ne rencontre jamais `.aide.alerte`, qui ne correspond pas au sélecteur. */ main.ensemble .aide:not(.alerte) { color: var(--sand); } /* (0,2,2) — bat `.champ > span` (0,1,1). Les deux libellés de la page, « Adresse e-mail professionnelle » et « Code à six chiffres ». */ main.ensemble .champ > span { color: var(--sand); } /* LE PARAGRAPHE SANS CLASSE — « Vous êtes conduit vers votre espace de travail », injecté par `rendreDestination()` (`js/connexion.js`). Il ne souffrait pas du défaut remonté : n’ayant pas de classe, il héritait de `--texte` (#e8f0ea) et n’était donc pas gris. Il suit quand même, et c’est l’ADJACENCE qui l’impose : il se pose immédiatement sous `#bienvenue`, qui est une `.aide` et vient de passer en sand. Deux blancs voisins qui ne sont pas le même blanc — l’un tire au vert, l’autre au jaune — ne se lisent pas comme une hiérarchie, ils se lisent comme un défaut d’impression. Isolés, ces deux tons sont indiscernables ; côte à côte, la différence se voit. `p:not([class])` et non `#vers-le-travail p` : ce qu’on décrit, c’est « un paragraphe de cette page qui ne se réclame de rien d’autre est du texte courant ». Tous les autres `

` d’ici portent `aide`, injectés compris. (0,2,1) — il suffit de battre l’héritage du `body`. */ main.ensemble p:not([class]) { color: var(--sand); } /* ET LE LIEN QU’IL CONTIENT, QUI N’AVAIT AUCUNE COULEUR DU TOUT. Ce `` est le seul du produit à ne porter ni `.btn` ni `.onglet` : partout ailleurs les liens sont des boutons ou des onglets, et les treize feuilles de page ne leur donnent qu’un `text-decoration`. Aucune feuille ne style `a` nu. Celui-ci tombait donc sur le bleu du navigateur, #0000EE, posé sur le fond #0d1a15 : 1,9 pour 1 de contraste — un lien qu’on ne voit pas sur l’écran où il est le dernier recours quand la redirection n’a pas lieu. Visité, le violet fait pire. Mint est l’accent des outils (c’est déjà la couleur de `.btn:hover`) et donne 7,6 pour 1 sur ce fond. Le soulignement du navigateur est laissé en place : la couleur ne doit pas être seule à dire que c’est un lien. (0,2,1) — une règle d’auteur, quelle qu’elle soit, bat la feuille du navigateur ; les liens à classe, eux, ne correspondent pas. */ main.ensemble a:not([class]) { color: var(--mint); } /* -------------------------------------------------------------------------- `hidden` DOIT CACHER. Ne pas retirer cette règle : ce n'est pas une redondance de la feuille du navigateur. -------------------------------------------------------------------------- La page de connexion empile ses trois moments — lien, code, session ouverte — dans un seul `

` et n'en montre qu'un, en posant l'attribut `hidden` sur les autres. Or `css/salle-de-redaction.css` donne un `display` à deux des classes employées ici : .fiche-boite { … display:flex … } (les trois panneaux) .ensemble { … display:flex … } (la colonne) Une règle d'auteur à classe pèse 0,1,0 ; la règle `[hidden]{display:none}` de la feuille du NAVIGATEUR ne pèse rien face à elle. `hidden` cessait donc d'agir, et les panneaux s'affichaient ensemble — dont « session ouverte », avant même la connexion. La feuille de production prévoit bien `.fiche[hidden]` pour la fiche modale, mais pas pour `.fiche-boite` sortie de son cadre, ce que fait cette page. ET DES BANCS QUI VÉRIFIAIENT SEULEMENT QUE `hidden` ÉTAIT POSÉ PASSAIENT pendant que la page était cassée à l'écran : le JavaScript faisait bien son travail, c'est la feuille qui l'annulait. C'est pourquoi la vérification lit LA FEUILLE, et pas seulement l'attribut. Le correctif est ÉCRIT LARGE, et `!important` y est nécessaire, pas décoratif : `[hidden]` seul pèse 0,0,1 et reperdrait contre n'importe quelle classe. Ainsi la prochaine page qui réemploiera `.fiche-boite`, ou toute autre classe portant un `display`, héritera de la correction au lieu de retomber dans le piège — c'est aussi ce que fait déjà `css/editor.css`. Le correctif vit ICI et non dans `css/salle-de-redaction.css` : cette feuille-là est reprise verbatim du dépôt d'origine (voir PROVENANCE.sha256) et la modifier ferait diverger le moteur du journal. */ [hidden] { display: none !important; }