/* COPIE AUTOMATIQUE DE public/base/rail-pied-retenu.css -- NE PAS EDITER ICI. La source est au banc ; `python tools/base/porter_reprise.py` refait cette copie, et son mode `verifier` signale toute divergence. */ /* * LE PIED DU RAIL, POUR LES TROIS RAILS -- COUCHE RETENUE. * * RETENU A L ATELIER. Reprise telle quelle de `rail-pied-essai.css`, * a un point pres : le produit n'a plus besoin du selecteur `data-rail-pied` * que le script d'etude posait, puisque le gabarit emet le pied lui-meme. * * LE PIED DE PAGE COUTAIT 95 PX A CHAQUE ECRAN pour quatre liens qu'on ouvre * deux fois par an, une mention d'editeur et un etat qui est vert la quasi * totalite du temps. Et il etait en bas d'un document qui defile : pour le lire * il fallait aller au bout de la page, si bien que l'etat -- la seule chose qui * puisse devenir urgente -- etait ce qu'on voyait le moins. * * ICI IL NE DEFILE PLUS. La liste defile, la tete et le pied gardent leur * place. L'etat est visible en permanence sans rien couter au contenu. * * LES LIENS SONT DANS UN VOLET, ET SEULEMENT DANS LE RAIL PRINCIPAL. Quatre * liens permanents sous les vraies entrees seraient quatre lignes de bruit ; * replies, ils sont a un clic. Le rail du visualiseur porte l'etat et la * mention, pas les liens : la barre du haut ramene a l'espace ou ils sont. * * IL A SA PROPRE FEUILLE, ET IL PORTE SES PROPRES VALEURS DE REPLI. * Les deux rails ne chargent pas les memes feuilles : les pages de resultats * prennent la base entiere, celles de l'espace n'ont que la maquette de leur * rail. Ecrit dans la coquille, ce pied ne rendait rien sur la moitie des pages * ou il vit -- `--texte-calme` et `--e-4` n'y resolvent pas, et une `var()` * orpheline ne previent personne. * * DEUX REPARATIONS ONT ETE ESSAYEES ET JETEES, l'une et l'autre parce qu'elles * repeignaient le produit pour un pied de rail : * * toute la base sous les pages de l'espace 23 % des pixels deplaces * le socle seul, qui pourtant ne peint rien 24 % encore * * LE SOCLE N EST PAS NEUTRE : il redefinit neuf jetons que `jetons.css` porte * deja -- `--surface-carte`, `--accent-aplat`, `--texte-fort`, * `--espace-section` entre autres -- et le produit s'en sert partout. Poser des * definitions par-dessus d'autres definitions n'est jamais sans effet, meme * quand la feuille ne contient pas une seule regle qui peigne. * * D'ou les replis ci-dessous : sur une page de resultats les jetons de la base * gagnent, ailleurs les valeurs ecrites ici prennent le relais, et aucune autre * page ne bouge d'un pixel. */ .rail-pied, .prat-rail__defile { --pied-e2: var(--e-2, 4px); --pied-e3: var(--e-3, 6px); --pied-e4: var(--e-4, 8px); --pied-e5: var(--e-5, 10px); --pied-filet: var(--filet-epaisseur, 1px); /* LES REPLIS SE PRENNENT SUR L ENCRE DU RAIL. J'y avais mis les valeurs du theme sombre : sur une page de l'espace en theme clair -- et ces pages en ont un, il vient de leur propre feuille -- ca faisait du texte clair sur un fond clair. Le pied etait la, et illisible. Une valeur ecrite en dur ne peut pas suivre un theme qu'elle ne connait pas ; `currentColor` le suit toujours, puisque le rail pose deja l'encre qui va sur son fond. Sur une page de resultats, les jetons de la base passent devant et rien ne change. */ --pied-trait: var(--filet-neutre-bloc, color-mix(in srgb, currentColor 16%, transparent)); --pied-texte: var(--texte-calme, color-mix(in srgb, currentColor 76%, transparent)); --pied-vif: var(--texte-vif, currentColor); --pied-mention: var(--texte-second, color-mix(in srgb, currentColor 56%, transparent)); --pied-survol: var(--surface-discrete, color-mix(in srgb, currentColor 10%, transparent)); --pied-rayon: var(--rayon-controle, 8px); } /* UN MEME VOILE NE PESE PAS LE MEME POIDS SELON LE THEME, et le repli de la mention l'a paye. 56 % de l'encre rend 5,43 sur le rail sombre et 3,96 sur le rail clair, pour un seuil de 4,5 : « © 2026 Strannik Online » tombait sous le seuil sur toute page a rail qui n'a pas le socle, c'est-a-dire l'espace praticien et l'administration. Le socle le savait deja -- son `--voile-texte-second` passe de 0,56 a 0,74 en clair -- mais il n'est pas charge la ou ce repli sert. A 74 %, la mesure rend 7,4. LE BALAYAGE NE L AVAIT PAS VU : `etats.py` echantillonne le fond sur la capture, et un rail `fixed` sur une page plus haute que l'ecran n'y rend pas tous ses textes. Le rapport a ete recalcule par composition des couleurs. Sur une page de resultats, `--texte-second` existe et rien ne change. */ html[data-theme="clair"] .rail-pied, html[data-theme="clair"] .prat-rail__defile { --pied-mention: var(--texte-second, color-mix(in srgb, currentColor 74%, transparent)); } .rail-pied { flex: none; display: flex; flex-direction: column; gap: var(--pied-e2); /* IL EST COLLE EN BAS, ET `auto` EST CE QUI L Y COLLE. Le rail est une colonne flex : une marge automatique y absorbe toute la place libre, donc le pied descend jusqu'au bord quel que soit le nombre d'entrees. LE RAIL DE L ESPACE N EN AVAIT PAS BESOIN -- sa partie qui defile porte `flex: 1 1 auto` et pousse deja le pied -- mais celui du VISUALISEUR n'a pas de partie qui defile : neuf planches, et le pied venait se poser juste dessous, au milieu du rail, avec du vide en dessous de lui. Une marge automatique regle les deux cas d'une ligne, et ne change rien la ou quelque chose poussait deja. L ESPACEMENT AU-DESSUS RESTE, il est porte par le remplissage : sans lui, le filet de separation viendrait coller la derniere entree. */ margin-top: auto; padding-top: var(--pied-e4); border-top: var(--pied-filet) solid var(--pied-trait); } /* MEME BOITE QUE LES ENTREES AU-DESSUS : le volet n'est pas une exception dans la colonne, c'est une entree de plus qui se deplie. */ .rail-pied__titre { display: flex; align-items: center; gap: var(--pied-e2); box-sizing: border-box; min-height: 38px; padding: 0 var(--pied-e4) 0 var(--pied-e5); border: var(--pied-filet) solid transparent; border-radius: var(--pied-rayon); color: var(--pied-texte); font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; list-style: none; } .rail-pied__titre::-webkit-details-marker { display: none; } /* LE MEME CHEVRON QUE LES DEPLIANTS DU RAIL, MEME MARGE DE CINQ PIXELS. Un carre de six tourne de quarante-cinq degres a une encre de 8,49 : aligner les boites laisserait l'encre trois pixels plus a droite. */ .rail-pied__titre::after { content: ""; flex: none; margin-left: auto; margin-right: 5px; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--duree-effleurement, .16s) var(--courbe, ease); } .rail-pied__legal[open] .rail-pied__titre::after { transform: rotate(45deg); } .rail-pied__titre:hover { color: var(--pied-vif); } .rail-pied__liens { display: flex; flex-direction: column; padding-bottom: var(--pied-e2); } .rail-pied__liens a { padding: var(--pied-e2) var(--pied-e5); border-radius: var(--pied-rayon); color: var(--pied-texte); font-size: 12px; line-height: 18px; text-decoration: none; } .rail-pied__liens a:hover { background: var(--pied-survol); color: var(--pied-vif); } /* L ETAT GARDE SON COMPOSANT. C'est un bouton vivant qui se resonde toutes les trente secondes ; le recopier en aurait fait une image qui dirait « tout va bien » un quart d'heure apres la panne. On ne pose donc que sa place. */ /* LA MEME HAUTEUR DE LIGNE DANS LES DEUX RAILS. Sans elle, la mention faisait 12 px sur une page de l'espace et 16,5 sur une page de resultats : les deux rails n'heritent pas de la meme, et deux pieds identiques ne se posaient pas au meme endroit. Un nombre entier, comme pour les onglets. */ .rail-pied__etat { padding: 0 var(--pied-e5); font-size: 11.5px; line-height: 16px; } /* LE COMPOSANT DU PRODUIT SE RANGE SUR LA COLONNE. Il apporte son propre remplissage de 10 px et sa taille de 12 : sa pastille tombait 10 px a droite de tout le reste, et son texte se repliait sur deux lignes faute de 12 px. Les deux corrections se tiennent : sans remplissage il commence ou commence la mention, et les 20 px rendus -- plus les 7 de la taille du bloc, que le bouton ecrasait -- font tenir « Tous les services fonctionnent » sur une ligne. 153,4 px pour 168 disponibles, et les trois autres langues sont plus courtes. */ .rail-pied__etat .etat-systeme, .rail-pied__etat .etat-systeme__bouton { display: flex; width: 100%; max-width: 100%; margin: 0; padding: 0; justify-content: flex-start; text-align: left; font-size: inherit; } /* UNE LIGNE, ET QUI NE SE REPLIE JAMAIS. Le repli n'etait pas un accident de largeur a corriger une fois : c'est une phrase qui change avec l'etat et avec la langue. On dit donc la regle, et le texte se coupe plutot que de pousser la colonne. */ .rail-pied__etat .etat-systeme__texte { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 16px; } /* A GAUCHE, COMME TOUT LE RESTE DE LA COLONNE. Le pied de page la centrait, ce qui a du sens sur 920 px et se lit comme un decalage sur 232. */ /* UN CRAN D ECART AVEC L ETAT. Les deux lignes se lisent l'une apres l'autre et ne disent pas la meme chose : l'une peut devenir urgente, l'autre ne changera jamais. Quatre pixels de plus suffisent a les separer sans ouvrir un blanc dans une colonne. */ .rail-pied__mention { margin-top: var(--pied-e2); padding: 0 var(--pied-e5); color: var(--pied-mention); font-size: 11px; line-height: 16px; text-align: left; } /* LE PANNEAU DE L ETAT FAIT 290 PX DANS UNE COLONNE DE 232, donc il etait coupe : on cliquait, il s'ouvrait, et l'on n'en voyait qu'une tranche. LA POSITION FIXE NE L A PAS LIBERE. Le rail du visualiseur porte un `backdrop-filter`, et un filtre d'arriere-plan fait de l'element un bloc conteneur pour ses descendants fixes : mesure, 255 px de large dans un rail de 256, quand la regle en demandait 290. Il n'etait jamais sorti. LE SORTIR DU DOM N EST PAS UNE OPTION NON PLUS : le script du produit met a jour chaque ligne par `racine.querySelector(...)` depuis `.etat-systeme`. Deplace, le panneau ne serait plus trouve par les mises a jour. IL PREND DONC LA LARGEUR DE LA COLONNE, remplissage compris, et s'ouvre au-dessus de son bouton. Deux cent trois pixels au lieu de deux cent quatre-vingt-dix, et il se lit en entier, la ou l'on vient de cliquer. */ .rail-pied__etat .etat-systeme { position: relative; } .rail-pied__etat .etat-systeme__panneau { /* LA BOITE COMPTE SES BORDS. Sans cette ligne le panneau mesurait 324 px sur une page de l'espace et 290 sur une page de resultats : la base pose `border-box` partout, la page de l'espace ne l'a pas, et les 30 px de remplissage plus les deux du filet s'ajoutaient a la largeur. */ box-sizing: border-box; position: absolute; top: auto; right: auto; bottom: calc(100% + var(--pied-e3)); left: calc(-1 * var(--pied-e5)); width: calc(100% + 2 * var(--pied-e5)); max-width: none; max-height: 60vh; overflow-y: auto; } /* LE RAIL DE L ESPACE PREND LA FORME DE L AUTRE : une tete, une liste qui defile, un pied qui reste. Il defilait en entier, donc un pied pose dedans serait parti avec le reste des le premier ecran un peu charge. */ .prat-rail:has(.rail-pied) { overflow-y: hidden; } .prat-rail__defile { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: clip; /* DE L AIR ENTRE LES ONGLETS ET LA BARRE DE DEFILEMENT. Elle prend dix pixels dans la largeur du contenu, et les onglets s'arretaient a quatre dixiemes de pixel d'elle : sans fond ca ne se voyait pas, mais depuis que « Mode presentiel » est un aplat cyan, l'aplat vient toucher la barre. Le rembourrage d'un conteneur qui defile se place entre son contenu et sa barre, donc il ne coute rien quand il n'y a pas de barre. ET C EST MOI QUI AI FAIT APPARAITRE CETTE BARRE : mesure sur un ecran de 688 px de haut, le rail rendait 422 px pour 422 disponibles, pile. Les 54 px du bouton l'ont fait deborder. */ padding-right: var(--pied-e3); } /* REPLIE, LES ONGLETS SONT DES CARRES CENTRES : un rembourrage a droite les pousserait a gauche de trois pixels. */ html[data-rail="replie"] .prat-rail__defile { padding-right: 0; } /* REPLIE EN ICONES, LE PIED SE REPLIE AUSSI. Il ne reste que l'etat, qui est la seule chose qu'on puisse avoir a lire en urgence ; les liens et la mention n'ont pas de sens dans quarante-deux pixels. IL SUIT L ETAT DU RAIL, plus la largeur de l'ecran : c'est le bouton qui replie, et le pied doit se replier avec ce qu'il termine. SEUL LE RAIL DE L ESPACE SE REPLIE, donc seul son pied se replie. Sans le prefixe, la mention disparaissait aussi du rail du visualiseur : mesure a 1100, `mention: false` sur une colonne qui avait toute la place de la porter. */ html[data-rail="replie"] .prat-rail .rail-pied__legal, html[data-rail="replie"] .prat-rail .rail-pied__mention { display: none; } html[data-rail="replie"] .prat-rail .rail-pied__etat { padding: 0; } /* ET SON LIBELLE PART AVEC LE RESTE. « Tous les services fonctionnent » fait 151 px ; la colonne en fait 62. Mesure avant correction : le pied commencait a x = -52, donc cinquante-deux pixels de texte HORS DE L ECRAN, a gauche du rail. On lisait « s services fonctionnent » en bas de page sans savoir d'ou ca sortait. LA PASTILLE SUFFIT, et c'est meme tout l'interet : un point vert ou rouge se lit d'un coup d'oeil, c'est la forme la plus courte de cette information, et le panneau s'ouvre au clic pour le detail. Le libelle reste dans le balisage -- c'est le rail qui le coupe -- donc il se dit toujours a qui ne voit pas l'ecran. */ html[data-rail="replie"] .prat-rail .rail-pied__etat .etat-systeme__texte { display: none; } /* LA PASTILLE SEULE SE CENTRE, sous les icones des onglets. Rangee a gauche dans une colonne de 62 px, elle ne tombait sous aucune d'elles. */ html[data-rail="replie"] .prat-rail .rail-pied__etat .etat-systeme__bouton { justify-content: center; width: 100%; } /* LE PANNEAU NE PEUT PLUS PRENDRE LA LARGEUR DE LA COLONNE : elle fait 62 px. Mesure avant correction, 61 px de large sur 289 de haut, une bande de texte illisible. Il prend donc une largeur a lui et depasse du rail -- ce que le rail peut enfin permettre, puisque la liste defile maintenant dans sa propre enveloppe et qu'il n'a plus rien a couper. */ html[data-rail="replie"] .prat-rail:has(.rail-pied) { overflow: visible; } html[data-rail="replie"] .prat-rail .rail-pied__etat .etat-systeme__panneau { left: 0; width: 260px; } /* SOUS 760, LE PIED DE PAGE REPREND SON TRAVAIL. Le rail de l'espace disparait et celui du visualiseur se deroule en tete de page : dans un cas le pied partirait avec le rail, dans l'autre il se retrouverait EN HAUT de l'ecran. Les deux sont pires que le pied de page d'origine, qui redevient donc le bon endroit. */ @media (max-width: 760px) { .rail-pied { display: none; } } @media (min-width: 761px) { body:has(.rail-pied) .lk-app-footer { display: none; } }