/* ========================================================================== LE HALO QUI GLISSE, PORTÉ AUX RAILS D'ONGLETS — bureau-b1, 12/09/2026 Demande de Kentin : « j'adore le slide et la fluidité de la nav barre, je veux la même chose sur tous les widgets ». CE QU'IL APPELLE « LE SLIDE ». Dans la capsule de navigation, un rectangle arrondi translucide glisse d'une entrée à l'autre au fil du survol, au lieu d'apparaître sous chacune. C'est le seul objet de la barre qui se déplace ; le reste — le resserrement, l'ombre — est un changement d'état. Le geste qu'il aime est donc celui-là, et c'est celui-là qu'on porte ailleurs. OÙ. Sur les rails de boutons frères : les onglets d'un écran, les segments d'un filtre, les crans d'un fil. Partout où plusieurs boutons partagent une même ligne et où le curseur passe de l'un à l'autre — c'est la condition qui donne son sens au glissement. Un bouton isolé n'a rien à glisser vers. RÉPARTITION AVEC bureau-9a, ARRÊTÉE AVANT D'ÉCRIRE. Cette feuille ne touche à AUCUN bloc à surface : cartes, tuiles, îles et grammaires d'écran sont chez lui, dans animations.css — sa section « 4. CARTES ET BLOCS » les tenait déjà en partie, et une règle plus spécifique écrite ici l'aurait emporté sans que sa section le sache. ⚠️ LES JETONS VIENNENT D'animations.css, AVEC UN REPLI. « var(--m-court, .22s) » et non « var(--m-court) » : ces jetons vivent dans la feuille de bureau-9a, qui se retire en commentant une ligne d'index.html — c'est le principe même de nos fichiers séparés. Sans valeur de repli, mes transitions tomberaient à 0s et le halo sauterait au lieu de glisser, sans qu'aucune erreur ne le signale. ========================================================================== */ /* --- 1. Le rail ------------------------------------------------------------ ⚠️ « position: relative » N'EST PAS POSÉ ICI, ET C'EST DÉLIBÉRÉ. Relevé le 12/09 sur les treize écrans : les sept rails visés n'ont pas la même position calculée — « .acc-onglets » est en absolute, « .cli-segments » en sticky (c'est son filtre qui reste collé en haut quand la liste défile), les cinq autres en static. Une règle « position: relative » appliquée à tous décollerait le premier et DÉSOLIDARISERAIT le second de son défilement. C'est donc fluide.js qui pose la classe ci-dessous, et seulement sur les rails dont la position calculée vaut « static » — les trois autres sont déjà des blocs de référence, ils n'ont besoin de rien. */ .fl-rail { position: relative; } /* Les entrées reçoivent un rang d'empilement propre : sans lui, un bouton simplement positionné par app.css passerait devant le liseré selon son ordre dans le document, et le halo disparaîtrait sur la moitié d'un rail sans raison apparente. Elles restent DERRIÈRE lui (1 contre 3). */ .fl-rail > button, .fl-cadre > button { position: relative; z-index: 1; } /* --- 2. Le halo ------------------------------------------------------------ 🔥 IL PORTE DEUX CHOSES, ET C'EST UNE CORRECTION APRÈS MESURE. Premier jet : un rectangle translucide DERRIÈRE l'entrée, exactement comme dans la capsule. Il glissait parfaitement — et sur deux rails il était invisible. Lecture du pixel peint au centre de l'entrée survolée : .segmente halo rgb(242,245,251) sur rail rgb(255,255,255) ✔ vu .onglets halo rgb(211,214,223) sur rail rgb(239,239,248) ✔ vu .cli-onglets-piste halo rgb(255,255,255) sur rail rgb(244,243,251) ✘ .acc-onglets halo rgb(255,255,255) sur rail rgb(244,243,251) ✘ Les deux dernières valeurs ne sont pas le halo : c'est le fond du BOUTON. app.css:13931 donne aux entrées de ces rails « background: var(--gr-page-surf) » — un fond opaque AU REPOS, pas seulement au survol. La capsule de navigation, elle, a des entrées transparentes : c'est la seule raison pour laquelle un halo posé derrière s'y voit. Le mécanisme ne se transporte pas tel quel. ⚠️ ET AUCUN INSTRUMENT NE L'AURAIT DIT. Le halo était créé, il était en classe « vu », son opacité valait 1, sa position était juste au pixel, sa transformation glissait de 0 à 839 px. Six mesures vertes pour un objet que personne ne voit. Seule la lecture du pixel peint l'a montré — deuxième fois aujourd'hui, après le fond de la capsule. DEUXIÈME TENTATIVE, ÉCARTÉE ELLE AUSSI : une OMBRE PORTÉE sur l'objet, pour qu'il déborde de la pastille opaque au lieu de la teinter. Elle a marché sur quatre rails et pas sur le cinquième, qui est le plus employé de tous — « .gr-encoche-piste », présent sur sept écrans. Sondage d'une bande verticale de 78 pixels en travers de l'encoche, survolée puis non survolée : UN SEUL pixel change, de 15 niveaux. La raison est géométrique et sans appel : la piste mesure 43 px de haut et le bouton 43 px. Il la remplit. Aucun objet placé derrière lui n'a un pixel pour se montrer. CE QUI EST RETENU : LE HALO PASSE DEVANT, ET DEVIENT UN LISERÉ. Un anneau de 2 px dessiné sur le pourtour de l'entrée survolée. Il ne dépend d'aucune place libre, aucun fond opaque ne le masque, et il ne voile pas le texte — il se tient sur l'arête, là où il n'y a jamais de lettres. Le geste, lui, est identique : un seul objet, qui glisse d'une entrée à l'autre au lieu d'apparaître sous chacune. ⚠️ IL NE SE POSE PAS SUR L'ENTRÉE ACTIVE, et c'est encore la capsule qui le dit : le halo y est rangé DERRIÈRE les entrées précisément pour que la pastille pleine de l'onglet actif l'éteigne. Ici, devant, il faut l'écarter explicitement — sinon un anneau sombre viendrait cercler une pastille violette à texte blanc. ⚠️ SA COULEUR SE DÉDUIT DU RAIL, ELLE N'EST PAS ÉCRITE. Les rails vont du blanc pur (« .segmente ») au violet pâle (« .cli-segments », rgb(236,234,250)) en passant par le charbon (« .onglets » sur l'île sombre). Un blanc fixe serait invisible sur la plupart, un gris fixe salirait les autres. « currentColor » est la couleur de TEXTE du rail : sombre sur un rail clair, claire sur un rail sombre. Le halo suit donc le thème, l'île et la bascule jour / nuit sans qu'une seule couleur soit codée en dur. Le rayon, lui, est COPIÉ SUR LE BOUTON SURVOLÉ par fluide.js. Les rails ne s'accordent pas non plus là-dessus : 999 px pour les onglets en pastille, 11 px pour « .onglets ». Un rayon fixe aurait donné une pilule derrière un bouton carré. */ .fl-halo { position: absolute; left: 0; top: 0; z-index: 3; background: transparent; box-shadow: inset 0 0 0 2px color-mix(in srgb, currentColor 30%, transparent); opacity: 0; pointer-events: none; will-change: transform; transition: transform var(--m-court, .22s) var(--glisse, cubic-bezier(.22, .61, .36, 1)), width var(--m-court, .22s) var(--glisse, cubic-bezier(.22, .61, .36, 1)), height var(--m-court, .22s) var(--glisse, cubic-bezier(.22, .61, .36, 1)), opacity var(--m-vif, .14s) ease; } .fl-halo.vu { opacity: 1; } /* Le halo naît sous le bouton qu'il vise au lieu de venir de l'angle du rail : sans ça, le premier survol d'un écran donne un trait qui traverse toute la largeur. Il ne glisse qu'entre deux entrées, jamais depuis le néant. */ .fl-halo.pose { transition: opacity var(--m-vif, .14s) ease; } /* --- 3. Mouvement réduit ---------------------------------------------------- Le halo ne fait que décorer : il ne porte aucune information que la couleur du survol ne donne déjà. Sous « prefers-reduced-motion », il ne se pose pas du tout — même arbitrage que dans la capsule. */ @media (prefers-reduced-motion: reduce) { .fl-halo { display: none; } }