/* COPIE AUTOMATIQUE DE public/base/seuils-retenus.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. */ /* ========================================================================= LES QUATRE SEUILS ========================================================================= LE PRODUIT EN ECRIT VINGT-NEUF. 822 regles sous `@media`, reparties sur vingt-neuf largeurs differentes, dont 720, 760 et 768 -- trois seuils a huit pixels d'ecart qui ne decrivent pas trois moments de la mise en page, mais le meme, decide trois fois par trois personnes. Idem pour 880, 899 et 900 ; idem pour 980 et 1000 ; idem pour 1180 et 1200. ON NE LES A PAS FUSIONNES AU JUGEMENT. On a rendu la page a une echelle de largeurs, de 320 a 1440, et releve a chacune l'etat des objets que la base porte -- afficher ou non, en ligne ou en colonne, combien de colonnes, fixe ou dans le flux. Une largeur ou rien ne bascule n'est pas un seuil, quoi qu'en dise la feuille. Puis on a resserre a 4 px autour de chaque bascule pour en trouver la valeur exacte. QUATRE MOMENTS, ET PAS UN DE PLUS : 640 le telephone 760 le rail apparait 900 la disposition large : la barre reprend ses trois colonnes, le tableau redevient un tableau 1200 le rail se deplie et montre ses libelles DEUX FAUX SEUILS ECARTES EN CHEMIN. Le releve grossier en donnait six ; deux n'existaient pas. Le remplissage horizontal de la barre change bien entre 1360 et 1440, mais GRADUELLEMENT -- il est deja fluide. Un pas de 40 px fait passer une variation continue pour une marche : c'est en resserrant a 4 px qu'on voit qu'elle bouge partout, donc nulle part en particulier. LE PIEGE DE LA MESURE, paye une fois : la HAUTEUR d'un element change a chaque pixel parce que le texte se replie. Gardee dans la signature, elle faisait ressembler chaque pas a un palier -- quinze « seuils » dont treize n'etaient que du texte changeant de ligne. La marge automatique du pied faisait la meme chose. On ne releve que ce qui SAUTE. ========================================================================= LE RAIL A TROIS ETATS, PAS DEUX ========================================================================= C'est le seul objet de la base qui en a trois, et c'est ce qui justifie deux de nos quatre seuils : sous 760 absent la place manque, le menu du compte prend le relais 760 a 1200 replie 62 px, les icones seules : on sait ou l'on est sans perdre la largeur du contenu au-dela deploye 232 px, les libelles LA COQUE SUIT EXACTEMENT LES MEMES TROIS ETATS, sans quoi le contenu passe sous le rail ou laisse une bande vide. C'est ecrit ici, au meme endroit, pour qu'on ne puisse pas changer l'un sans voir l'autre. ========================================================================= CE QUE CETTE FEUILLE NE FAIT PAS ========================================================================= SOUS 900 px, LA BARRE PERD SA NAVIGATION et c'est le dessin du produit : les six entrees passent dans le menu du compte. La base le reproduit ; savoir si ce menu suffit sur telephone est une question de produit, pas de feuille de style, et elle reste ouverte. Les grilles internes de chaque ecran -- deux colonnes de cartes, paires de chiffres cote a cote -- ne sont pas ici : elles appartiennent au fichier de leur page. Cette feuille ne porte que ce qui est partage. ========================================================================= */ /* ------------------------------------------------------------------------- AU-DELA DE 1200 — le rail deploye ------------------------------------------------------------------------- C'est l'etat par defaut de la base : on ecrit les largeurs en RETIRANT, pas en ajoutant. Une base qui part du telephone et empile les ajouts finit par demander trois regles pour comprendre un element ; celle qui part du grand et retire n'en demande qu'une par palier. ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- LE RAIL REPLIE — un ETAT, pas une largeur ------------------------------------------------------------------------- CE QUI A CHANGE, ET POURQUOI. Le repli etait decide par la seule largeur de l'ecran : sous 1200 px les libelles partaient, au-dessus ils revenaient, et personne ne pouvait en decider autrement. Or le rail prend 256 px a toutes les largeurs, y compris quand on veut la place pour lire un tableau large. Le repli devient donc une COMMANDE -- un bouton en tete du rail -- et son etat vit sur `` en `data-rail`. IL N Y A PLUS DE REQUETE DE MEDIA ICI, et c'est voulu : une meme mise en forme ecrite a deux endroits -- une fois pour la largeur, une fois pour le bouton -- finit par diverger, et l'on corrige alors la moitie du defaut. Le script pose l'etat de depart AVANT le premier rendu, a partir du choix memorise ou, a defaut, de la largeur. La largeur decide toujours ; elle ne decide simplement plus toute seule. SANS SCRIPT, LE RAIL RESTE DEPLOYE. Ce n'est pas un defaut : une colonne de 256 px sur un ecran de 1100 est large, elle n'est pas cassee. Dupliquer tout ce bloc dans un repli de secours couterait plus cher que ce qu'il repare. ------------------------------------------------------------------------- */ /* LE REPLI N EXISTE QU AU-DESSUS DE 760 PX, ET C EST LA BONNE PORTE. ------------------------------------------------------------------------- Sous 760, le rail du visualiseur se deroule dans la page : il n'a plus de colonne a gagner, donc plus rien a replier. J'avais d'abord ANNULE le repli depuis le bloc de 760, regle par regle -- et j'ai perdu la course de poids deux fois. `body:has(.viz-rail) { --retrait-rail: 0 }` pese (0,2,0) contre (0,3,0) pour `html[data-rail="replie"] body:has(.viz-rail)`, et la neutralisation du `display` des enfants ne disait rien de la LARGEUR du rail. CE QUE CA DONNAIT EN REEL, a 699 px, vu dans le navigateur : rail large de 62 px, contenu redevenu visible dedans, libelles debordant de leur boite, et le contenu de la page decale de 62 px pour un rail qui n'etait plus une colonne. Aucune mesure de banc ne l'avait vu : elles portaient sur 1440, 1180, 960, 760 et 390 -- le defaut vit entre 640 et 760. ON NE CONTRE PAS, ON FAIT RENONCER. Le repli est borne a son domaine, les trois regles d'annulation disparaissent, et il n'y a plus de course a perdre. Meme geste que pour les cartes a barres : dire la verite sur le domaine plutot qu'ajouter du poids. ------------------------------------------------------------------------- */ @media (min-width: 761px) { html[data-rail="replie"] .prat-rail { width: var(--rail-replie); padding-inline: var(--e-5); } html[data-rail="replie"] .prat-rail__libelle, html[data-rail="replie"] .prat-rail__compte { display: none; } /* LE BLOC D IDENTITE SE CACHE SANS PARTIR, pour la meme raison que les surtitres : il occupe 56 px en tete du rail, et sans eux les sept onglets remontaient d'autant. Replie, le premier onglet tombait 56 px plus haut qu'ouvert -- le repli deplacait ce qu'on venait de viser, et deplier le remettait ailleurs. REPLIE, ON SAIT DEJA DANS QUEL ESPACE ON EST : la barre du haut le dit, et l'icone courante le confirme. C'est bien un bloc a cacher ; c'est sa PLACE qu'il ne faut pas rendre. */ html[data-rail="replie"] .prat-rail__qui { visibility: hidden; overflow: hidden; width: 100%; } /* LE BOUTON, LUI, RESTE VISIBLE. Il est maintenant DANS la tete, et `visibility` descend : cache avec le bloc d'identite, il n'y aurait plus rien pour deplier le rail -- et un rail qu'on ne peut plus rouvrir n'est pas replie, il est perdu. La regle ci-dessus ne vise que le bloc d'identite, mais on le dit ici parce que c'est le genre de chose qu'on casse en deplacant un element d'un cran. */ /* LE BOUTON SE POSE SUR LA TETE, IL NE S AJOUTE PAS A ELLE. ------------------------------------------------------------------------- Empile au-dessus du bloc d'identite cache, il rendait sa propre hauteur et les sept onglets redescendaient de trente-six pixels : mesure, 165 deploye contre 201 replie, donc le repli deplacait a nouveau ce qu'on venait de viser -- exactement le defaut qu'on venait de corriger. Pose EN ABSOLU dans la tete, il occupe la place que le bloc d'identite reserve deja, et la tete garde la hauteur qu'elle a ouverte. `inset: 0` avec `margin: auto` le centre dans cette boite : c'est la seule facon de le centrer sans connaitre la hauteur, qui depend de la longueur du nom. `visibility: visible` PARCE QUE LA TETE EST CACHEE ET QUE CA DESCEND : sans cette ligne il disparaitrait avec elle, et un rail qu'on ne peut plus rouvrir n'est pas replie, il est perdu. */ html[data-rail="replie"] .rail-tete { position: relative; } /* CETTE REGLE NE VAUT QUE DANS LA TETE DES RAILS D ESPACE. Ecrite sans ancetre, elle attrapait aussi le chevron du visualiseur, dont la rangee n'est pas positionnee : son bloc de reference devenait le RAIL, et `inset: 0` plus `margin: auto` le centrait au milieu d'une colonne de huit cents pixels -- mesure, y = 467. Un `position: absolute` cherche son ancetre positionne ; si on ne lui en donne pas, il en trouve un beaucoup plus loin. */ html[data-rail="replie"] .rail-tete .rail-bascule { position: absolute; inset: 0; margin: auto; visibility: visible; } /* ET SON TEXTE RESTE SUR UNE LIGNE, sans quoi la place rendue n'est pas la bonne. « Florent Naudin » tient sur une ligne dans 232 px ; dans les 42 px du rail replie il se coupait en quatre, et le bloc cache mesurait alors 91 px au lieu de 56 -- les onglets descendaient de trente-cinq pixels au lieu de rester ou ils etaient. On cache un bloc, on ne le redimensionne pas. UN NOM PLUS LONG QUE LE RAIL DEPLOYE ferait l'inverse : deux lignes ouvert, une seule repliee, donc vingt pixels d'ecart. Le cas existe et il est petit ; le corriger demanderait de mesurer le bloc en JavaScript, ce qui coute plus que ce qu'il repare. */ html[data-rail="replie"] .prat-rail__qui > * { white-space: nowrap; } /* LES SURTITRES SE CACHENT SANS PARTIR, et c'est ce qui aligne les deux etats. En `display: none` ils rendaient leur hauteur : les sept onglets remontaient de quarante-cinq pixels, donc aucun ne tombait au meme endroit qu'ouvert, et le repli deplacait tout ce qu'on venait de viser. En `visibility: hidden` la boite reste, l'onglet garde son niveau, et le mot ne se lit plus. `overflow: hidden` PARCE QUE LE MOT EST TOUJOURS LA : « Mon activite » fait plus de quarante-deux pixels et debordait du rail, invisible mais compte dans la largeur defilable du document. */ html[data-rail="replie"] .prat-rail__groupe { visibility: hidden; overflow: hidden; /* LES MARGES LATERALES PARTENT AVEC LE MOT, et c'est ce qui manquait. `width: 100%` prend la largeur du rail -- 41 px -- mais la marge de 10 pousse la boite a droite : elle courait de 20 a 61 dans un cadre qui s'arrete a 51, donc dix pixels dehors et vingt de largeur defilable en trop. Le mot etait bien cache ; sa BOITE, non. Une boite de mise en page sans encre pese quand meme. */ margin-inline: 0; width: 100%; } /* LA COLONNE DES ONGLETS PREND TOUTE LA LARGEUR DU RAIL, et sans cette ligne rien de ce qui suit ne sert a rien. `align-items: center` sur le rail faisait retracter cette colonne sur son contenu : dix-neuf pixels, la largeur d'une icone. Les onglets mesuraient donc 21 x 21 dans un rail qui leur en offrait 42 -- le carre etait ecrit, il n'etait pas rendu. */ html[data-rail="replie"] .prat-rail__defile { width: 100%; align-self: stretch; } /* CARRE, ET DE LA MEME HAUTEUR QU OUVERT. `aspect-ratio` seul redonnerait un carre, mais de 42 px, quand l'onglet deploye en fait 40 : les sept onglets se decalaient d'un cran de plus a chaque rangee. La hauteur est donc celle de l'etat ouvert, et la largeur suit le rail. */ html[data-rail="replie"] .prat-rail__lien { flex: none; width: 100%; /* `border-box`, SANS QUOI LES QUARANTE DEVIENNENT QUARANTE-DEUX : le filet transparent de l'etat au repos s'ajoute a la hauteur, et deux pixels par onglet font quatorze sur sept rangees. Mesure : 42 replie contre 40 ouvert, et le dernier onglet decale de quatorze pixels. */ box-sizing: border-box; height: 40px; justify-content: center; padding: 0; } /* LE CREUX RESTE, ET IL EN A PLUS BESOIN QU OUVERT : sans libelle ni gras, il est le SEUL signe qui dise ou l'on se trouve. Il vaut la peine d'etre ecrit ici plutot que laisse a l'heritage -- la regle deployee pose un remplissage et un rayon de controle que le carre replie ne veut pas des deux cotes. */ html[data-rail="replie"] .prat-rail__lien[aria-current="page"] { background: var(--creux-fond); box-shadow: var(--creux-relief); border-radius: var(--rayon-controle); } /* LA GOUTTIERE SUIT LE RAIL. Le contenu recule de la largeur du rail ; si elle ne suivait pas, le rail passerait par-dessus lui ou laisserait un vide de deux cents pixels. IL FAUT DIRE « ET PAS DE RAIL DE VISUALISEUR », parce que le rail de l'espace est encore DANS LE DOCUMENT quand celui du visualiseur le remplace : la coquille le masque (`body:has(.viz-rail) .prat-rail`), elle ne le retire pas. `:has(.prat-rail)` matchait donc sur une page de resultats, la gouttiere tombait a 62 px pendant que le rail visible en mesurait 256, et le contenu passait DESSOUS. Mesure a 900 px : le rail couvrait 194 px de la colonne. */ html[data-rail="replie"] body:has(.prat-rail):not(:has(.viz-rail)) { --retrait-rail: var(--rail-replie); } /* ------------------------------------------------------------------------- LE RAIL DU VISUALISEUR SE REPLIE AUTREMENT : IL S EFFACE ------------------------------------------------------------------------- IL N A PAS D ETAT « ICONES », et la raison est ecrite depuis l'atelier : ses entrees ne peuvent pas devenir des pictogrammes -- neuf notions abstraites feraient neuf devinettes. Il est la en entier, ou il n'y est pas. REPLIE, IL NE LAISSE DONC QUE SON BOUTON. Une bande de quarante-deux pixels ou l'on clique pour le faire revenir, et douze cents pixels rendus a la planche qu'on lit -- ce qui est exactement la raison pour laquelle on replie un rail devant un resultat. CE N EST PAS LA MEME COMMANDE QUE « MASQUER », et c'est pourquoi le bouton reste : un rail qu'on ne peut plus rouvrir n'est pas replie, il est perdu. ------------------------------------------------------------------------- */ html[data-rail="replie"] .viz-rail { width: var(--rail-replie); padding-inline: var(--e-5); align-items: center; overflow: visible; /* LE CHEVRON RESTE EN HAUT. Seule sa rangee survit au repli, et le rail repartit l'espace entre ses enfants : avec un enfant unique, elle se retrouvait au MILIEU de la colonne -- mesure, y = 467 dans un rail de 900. On ne cherche pas un bouton de repli a mi-hauteur d'une bande vide, on le cherche la ou le rail commence. */ justify-content: flex-start; } /* TOUT SAUF LA RANGEE QUI PORTE LE BOUTON. Nommer ce qui reste plutot que ce qui part : le rail du visualiseur porte huit blocs et en gagnera d'autres, et une liste de ce qu'on cache serait fausse des le neuvieme. CETTE REGLE A FAIT DISPARAITRE LE CHEVRON, et c'est la deuxieme fois que le meme geste casse la meme chose. Elle disait « tout sauf le bouton » quand le bouton etait un enfant DIRECT du rail ; en le remontant sur la ligne du retour, il est devenu petit-fils, donc il est parti avec sa rangee. Le rail se repliait et ne se depliait plus : signale sur « Mes resultats », ou il n'y a meme pas de lien de retour pour trahir la rangee cachee. ON CACHE DONC LA RANGEE PAR SON CONTENU, pas la rangee elle-meme. Un rail qu'on ne peut plus rouvrir n'est pas replie, il est perdu -- c'est ecrit deux fois dans cette feuille, et ca n'a pas suffi. */ html[data-rail="replie"] .viz-rail > *:not(.viz-rail__qui) { display: none; } html[data-rail="replie"] .viz-rail__qui > *:not(.rail-bascule) { display: none; } /* Et la rangee rend sa place au chevron : sans lien de retour a gauche, il n'a plus de raison de tenir le bord droit. `flex: none` PARCE QU ELLE EST SEULE. Devenue le dernier enfant visible d'un rail qui fait toute la hauteur de l'ecran, elle s'etirait sur huit cents pixels et centrait le chevron au MILIEU d'une bande vide -- mesure, y = 467 dans un rail de 900, alors que la rangee, elle, commencait bien a 83. On ne cherche pas un bouton de repli a mi-hauteur, on le cherche la ou le rail commence. */ html[data-rail="replie"] .viz-rail__qui { flex: none; justify-content: center; } html[data-rail="replie"] body:has(.viz-rail) { --retrait-rail: var(--rail-replie); } } /* ------------------------------------------------------------------------- SOUS 900 — la disposition se resserre ------------------------------------------------------------------------- LE SEUIL LE PLUS CHARGE, et le seul ou la barre change de nature : elle cesse d'etre une grille de trois colonnes pour devenir une ligne qui se replie. Sa navigation passe dans le menu du compte, et le prenom s'efface -- la pastille suffit a dire de qui il s'agit quand la place manque. LE TABLEAU REDEVIENT UNE LISTE DE CARTES. Chaque cellule montre alors l'etiquette de sa colonne, qui etait cachee au-dessus : sans en-tete pour dire ce qu'on lit, la valeur seule ne veut rien dire. ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- LA BARRE DU HAUT SE VIDE PAR ETAGES, DANS UN ORDRE ------------------------------------------------------------------------- TROIS COLONNES QUI NE SE CHEVAUCHENT JAMAIS. La barre est une grille `auto 1fr auto` : la marque et le compte prennent ce qu'il leur faut, la rangee prend le reste. Le chevauchement est donc structurellement impossible -- mais la rangee est en `overflow: hidden` et CENTREE : quand le reste ne suffit plus, elle se coupe aux DEUX bouts, en silence, et une destination disparait sans que rien ne le dise. L ORDRE EST UNE DECISION, PAS UN EFFET DE BORD. Partent d'abord les deux ESPACES (praticien, administration) : on y va souvent, mais on sait ou ils sont, et le rail de l'espace ou l'on se trouve les redit. Puis la BOUTIQUE, avec son filet -- un trait qui ne separe plus rien est un defaut, pas une economie. Puis la rangee entiere. A chaque etage, tout reste atteignable depuis le menu du compte, qui porte les memes liens. LES SEUILS SONT MESURES, ET PAR LANGUE. Releve du 12/09/2026 sur la barre d'un administrateur (le cas le plus garni), en additionnant la largeur des ENFANTS de la rangee : la rangee elle-meme est la colonne `1fr`, elle valait 857 a 1440 et 1017 a 1600 pour exactement les memes six onglets, donc sa largeur ne dit rien de ce qu'ils demandent. langue marque compte parcours boutique espaces || tout -esp -bout fr 240 257 369 88 262 || 1307 1045 952 en 240 257 327 64 264 || 1243 979 910 ru 265 257 394 87 345 || 1439 1094 1002 de 240 257 379 64 213 || 1244 1031 962 UN SEUL SEUIL POUR LES QUATRE AURAIT ETE UN SEUIL RUSSE. « Кабинет специалиста » et « Администрирование » demandent 345 la ou « Fachbereich » et « Verwaltung » demandent 213 : 132 px d'ecart, et la marque russe en ajoute 25. Aligner tout le monde sur le pire aurait retire les onglets a un lecteur anglais sur un ecran ou ils tenaient largement. LES NOMBRES CI-DESSOUS SONT LE RELEVE + 32, soit seize pixels d'air de chaque cote : au seuil nu, les onglets touchent la marque et le compte. Arrondis a cinq pixels. LES ETATS S EMBOITENT, donc les seuils valent pour tout le monde : un client sans espace praticien n'a pas de premier etage, et son « tout » est exactement le « -esp » de la table. Rien a recalculer par profil. POURQUOI LE DEFAUT PRECEDENT AVAIT SURVECU : les mesures portaient sur 1340, 900 et 390, et il vivait ENTRE deux de ces largeurs. Trois nombres choisis a la main ne couvrent pas une plage. ------------------------------------------------------------------------- */ /* LE PRENOM NE POUSSE PLUS LA COLONNE DU COMPTE. Sans borne, un prenom long elargit le compte, la colonne `1fr` se resserre d'autant, et la rangee se coupe -- a une largeur que les seuils ci-dessus ne peuvent pas prevoir, puisqu'elle depend de qui est connecte. Le nom complet est dans le menu, juste en dessous : ce qui est ici sert a se reconnaitre, pas a se lire. */ .lk-top-bar__prenom { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* --- Premier etage : les deux espaces ------------------------------------- */ @media (max-width: 1340px) { html[lang="fr"] .lk-top-bar__travail { display: none; } html[lang="fr"] .lk-top-bar__filet:not(:has(+ .lk-top-bar__link--boutique)) { display: none; } } @media (max-width: 1280px) { html[lang="en"] .lk-top-bar__travail, html[lang="de"] .lk-top-bar__travail { display: none; } /* LE FILET PART AVEC EUX S IL N A PLUS RIEN A SEPARER. Une personne sans boutique n'a que les espaces a droite du trait : les espaces partis, il pendrait apres le dernier onglet du parcours. On teste la PRESENCE de la boutique dans le balisage et non son rendu -- `:has()` lit la structure, et la structure, elle, ne bouge pas avec la largeur. */ html[lang="en"] .lk-top-bar__filet:not(:has(+ .lk-top-bar__link--boutique)), html[lang="de"] .lk-top-bar__filet:not(:has(+ .lk-top-bar__link--boutique)) { display: none; } } @media (max-width: 1475px) { html[lang="ru"] .lk-top-bar__travail { display: none; } html[lang="ru"] .lk-top-bar__filet:not(:has(+ .lk-top-bar__link--boutique)) { display: none; } } /* --- Deuxieme etage : la boutique, et le filet avec elle ------------------ */ @media (max-width: 1080px) { html[lang="fr"] .lk-top-bar__link--boutique, html[lang="fr"] .lk-top-bar__filet { display: none; } } @media (max-width: 1015px) { html[lang="en"] .lk-top-bar__link--boutique, html[lang="en"] .lk-top-bar__filet { display: none; } } @media (max-width: 1130px) { html[lang="ru"] .lk-top-bar__link--boutique, html[lang="ru"] .lk-top-bar__filet { display: none; } } @media (max-width: 1065px) { html[lang="de"] .lk-top-bar__link--boutique, html[lang="de"] .lk-top-bar__filet { display: none; } } /* --- Troisieme etage : la rangee entiere ---------------------------------- */ @media (max-width: 985px) { html[lang="fr"] .lk-top-bar__nav { display: none; } } @media (max-width: 945px) { html[lang="en"] .lk-top-bar__nav { display: none; } } @media (max-width: 1035px) { html[lang="ru"] .lk-top-bar__nav { display: none; } } @media (max-width: 995px) { html[lang="de"] .lk-top-bar__nav { display: none; } } /* ------------------------------------------------------------------------- SOUS 1200 — LE RAIL DEVIENT UN TIROIR : IL PASSE PAR-DESSUS, IL NE POUSSE PLUS ------------------------------------------------------------------------- CE QUE LE PRODUIT FAISAIT. Sous 1200 px le rail se repliait tout seul, et l'ouvrir repoussait la page de 256 px. Sur une tablette, c'est un quart de la largeur pris a la lecture. Et pour le rail du VISUALISEUR c'etait pire que genant : ses entrees n'ont pas d'icone (contrairement aux rails praticien et administration), donc replie il ne restait rien -- mesure du 12/09/2026 a 900, 760 et 390 px : zero onglet visible sur neuf, et la rangee du haut cachee elle aussi. Un client ouvrait ses resultats et ne pouvait atteindre aucune des huit autres planches. LA MESURE QUI FIXE LA REGLE. La matrice des interconnexions ne descend pas sous 620 px : elle se lit dans les deux sens, donc elle ne se replie pas en cartes comme une liste, il n'y a pas d'ordre de lecture unique a retrouver. Avec le remplissage de page il lui faut 684, et le rail deploye en prend 256. EN DESSOUS DE 940 PX, OUVRIR LE RAIL EN POUSSANT LA PAGE CASSE LA MATRICE. Le tiroir n'est donc pas un confort sous ce seuil, il est la seule facon d'ouvrir le rail sans rien perdre. ON PART DE 1200 ET NON DE 940, parce que c'est la que le rail se replie deja de lui-meme : entre les deux, ne pas pousser ne coute rien, et deux seuils pour un seul comportement finissent par diverger. COMMENT. Le rail est deja `position: fixed` : il ne pousse rien par lui-meme. Ce qui pousse, c'est `--retrait-rail`, le retrait que la coque et le pied se donnent pour lui faire de la place. On le fige donc a la largeur REPLIEE, quel que soit l'etat du rail. Ouvert, celui-ci s'elargit par-dessus le contenu, qui ne bouge pas d'un pixel. PAS DE VOILE derriere le tiroir, c'est une decision de l'Admin : on l'ouvre pour choisir un onglet en gardant la matrice sous les yeux, et l'assombrir reviendrait a cacher ce qu'on est venu lire. Une ombre portee suffit a dire qu'il flotte au-dessus. ------------------------------------------------------------------------- */ @media (max-width: 1200px) { body:has(.prat-rail), body:has(.viz-rail) { --retrait-rail: var(--rail-replie); } /* IL FLOTTE, DONC IL PORTE UNE OMBRE. Sans voile, c'est la seule chose qui distingue un tiroir pose sur la page d'une colonne qui l'a repoussee. ET IL CESSE D ETRE TRANSPARENT, PARCE QU IL N A PLUS RIEN DERRIERE LUI QUI LUI APPARTIENNE. Le rail est translucide a 0,28 avec un flou de 14 px : en colonne c'est juste, il laisse passer la lumiere du fond de page, qui est SON fond. Pose sur le contenu, il laisse passer le contenu -- on lit la matrice a travers les onglets. Le voile monte donc au barreau 12, « l'opacite pleine sans la durete du 1 ». LE JETON SE REECRIT, LA COULEUR NON : `--surface-sombre-rgb` se retourne avec le theme (5 8 13 en sombre, 244 246 249 en clair). Ecrire la teinte en dur aurait donne un panneau noir sur une page claire. */ html[data-rail="ouvert"] .prat-rail, html[data-rail="ouvert"] .viz-rail { background: rgba(var(--surface-sombre-rgb), var(--voile-12)); box-shadow: 0 0 0 1px var(--filet-rail, transparent), 18px 0 44px rgba(var(--black-rgb), 0.42); } } @media (max-width: 900px) { .lk-top-bar { display: flex; flex-wrap: wrap; position: relative; padding-inline: var(--e-9); } .lk-top-bar__nav, .lk-top-bar__prenom { display: none; } .lk-content { padding: var(--e-9) var(--e-9) var(--e-11); } /* Le tableau se replie en cartes : chaque ligne devient un bloc, et chaque cellule reprend le nom de sa colonne. */ .liste-carte, .liste-carte tbody, .liste-carte tr, .liste-carte td, table.responsive-table:has(.responsive-table__label), table.responsive-table:has(.responsive-table__label) tbody, table.responsive-table:has(.responsive-table__label) tr, table.responsive-table:has(.responsive-table__label) td { display: block; width: 100%; } .liste-carte thead, table.responsive-table:has(.responsive-table__label) thead { display: none; } .responsive-table__label { display: block; } } /* ------------------------------------------------------------------------- UNE PAGE A RAIL REPLIE SES TABLEAUX PLUS TOT, DE LA LARGEUR DU RAIL ------------------------------------------------------------------------- LE SEUIL DE 900 MESURE LA FENETRE, PAS LA PLACE. Un tableau ne deborde pas d'une fenetre, il deborde de la COLONNE qu'on lui laisse -- et sur une page a rail cette colonne fait 126 px de moins. Releve a 960 : la page dispose de 834 px de contenu, c'est-a-dire exactement ce qu'une page sans rail offre a 826. Le tableau de l'aide en demande 933, celui des clients 858 : tous deux debordaient dans une bande ou la regle les croyait au large. LE SEUIL SE DEDUIT, IL NE SE CHOISIT PAS : 900 + 126 = 1026, arrondi a 1040 pour les langues aux entetes plus longs. En dessous, la page a rail se replie comme une page etroite se replie deja. NE SE REPLIE QUE CE QUI SAIT SE REPLIER. `:has(.responsive-table__label)` demande au tableau s'il porte le nom de ses colonnes dans ses cellules : sans ces etiquettes, replier le tableau efface l'entete et ne le remplace par rien. Deux tableaux du produit n'en ont pas -- ceux des traitements, qui defilent dans leur propre cadre et n'ont donc rien a se faire pardonner. La regle se maintient toute seule : le jour ou quelqu'un ajoute les etiquettes, le repli suit, et pas avant. ------------------------------------------------------------------------- */ @media (max-width: 1040px) and (min-width: 901px) { body:has(.prat-rail) .liste-carte, body:has(.prat-rail) .liste-carte tbody, body:has(.prat-rail) .liste-carte tr, body:has(.prat-rail) .liste-carte td, body:has(.prat-rail) table.responsive-table:has(.responsive-table__label), body:has(.prat-rail) table.responsive-table:has(.responsive-table__label) tbody, body:has(.prat-rail) table.responsive-table:has(.responsive-table__label) tr, body:has(.prat-rail) table.responsive-table:has(.responsive-table__label) td { display: block; width: 100%; } body:has(.prat-rail) .liste-carte thead, body:has(.prat-rail) table.responsive-table:has(.responsive-table__label) thead { display: none; } body:has(.prat-rail) .responsive-table__label { display: block; } } /* ------------------------------------------------------------------------- SOUS 760 — le rail s efface ------------------------------------------------------------------------- Meme replie, il prendrait 62 px sur 700 : un dixieme de la largeur pour une colonne d'icones. Le menu du compte porte alors toute la navigation. ------------------------------------------------------------------------- */ @media (max-width: 760px) { .prat-rail { display: none; } /* LE RAIL DU VISUALISEUR NE DISPARAIT PAS : IL SE DEROULE DANS LA PAGE. Quand il ne portait que neuf liens, l'effacer ne coutait rien -- la rangee d'onglets revenait et la navigation etait sauve. Il porte maintenant la seance, la consultation, le partage, les programmes et la note : l'effacer les emporterait tous, et la rangee d'onglets ne les rendrait pas, ils n'y ont jamais ete. Il cesse donc d'etre fixe et devient un bloc en tete de page, sur toute la largeur. Rien n'est perdu, rien n'est range derriere un bouton, et la page reprend ses 100 % pour les resultats. */ .viz-rail { position: static; width: auto; margin-bottom: var(--e-8); border-right: 0; border-bottom: var(--filet-epaisseur) solid var(--filet-rail); /* Deroule, il n'a plus de hauteur a remplir : c'est la page qui defile, et la liste des planches ne defile plus toute seule. */ overflow: visible; animation: none; } .viz-rail__planches { overflow: visible; } /* ET LA CHAINE DE DEFILEMENT SE DEFAIT AVEC LUI. * * `coquille-retenue` fait du `