/* ========================================================================== LA CAPSULE QUI SE RESSERRE AU DÉFILEMENT — bureau-b1, 12/09/2026 La feuille de « navbar.js ». Elle n'ajoute que deux états à la capsule de navigation : resserrée, et survolée. Elle ne redessine rien de ce que la « capsule charbon » a posé — mêmes couleurs, même rayon, même filet. ⚠️ TOUT PASSE PAR « transform », ET CE N'EST PAS UN CHOIX DE CONFORT. ajusterNav() (app.js) mesure la capsule et descend d'un cran d'affichage quand elle déborde ; un ResizeObserver la rappelle. Animer une largeur ou une marge la ferait se remesurer à chaque image et osciller entre deux crans. Une transformation ne change pas la taille de mise en page : le mesureur ne voit rien passer. ⚠️ LA CAPSULE SERT DE REPÈRE À TOUT L'ÉCRAN : son resserrement est discret (7 %). Aceternity fait passer sa barre de 100 % à 40 % de large, mais la sienne est pleine largeur au repos — celle de Louis est déjà une pilule à largeur de contenu. La moitié de l'effet est acquise ; forcer la seconde moitié donnerait treize icônes de trente pixels. ========================================================================== */ /* --- 1. L'état resserré ------------------------------------------------------ Elle se compacte, se soulève d'un cheveu, et son ombre s'ouvre — c'est l'ombre, plus que l'échelle, qui donne l'impression qu'elle décolle. Le dégradé charbon devient légèrement translucide et prend un flou : c'est la signature du composant d'origine (« backdropFilter: blur(10px) »), et elle ne se voit QUE là, quand du contenu passe dessous. Au repos la capsule reste pleine, comme la « capsule charbon » l'a voulue. */ @media (min-width: 981px) { :root:not([data-barre="gauche"]) .appli .lateral .nav { transform-origin: 50% 0; transition: transform calc(.26s * var(--anim-vit, 1)) cubic-bezier(.22, .61, .36, 1), box-shadow calc(.26s * var(--anim-vit, 1)) ease; } /* 🔥 PAS DE « background-color » DANS CETTE TRANSITION. C'est la faute la plus coûteuse de ce chantier, et elle mérite d'être écrite en entier. Le fond de la capsule vient de « background: var(--ile, var(--surf-1)) » (app.css). En ajoutant « background-color » à la liste des propriétés animées, LA CAPSULE A CESSÉ D'ÊTRE PEINTE : le charbon disparaissait et les icônes flottaient sur la page. Au repos, sans qu'aucune classe ne soit posée, sans transformation en cours. CE QUI A RENDU LA CHASSE LONGUE : getComputedStyle continuait d'annoncer « rgb(30, 33, 52) », la géométrie était juste, l'audit ne signalait rien, et aucune erreur n'était levée. Trois instruments verts pour un défaut qu'on voit à l'œil nu. Seule la lecture du PIXEL PEINT l'a montré, et seule la comparaison AVEC / SANS la feuille a désigné le coupable : feuille entière 1 363 pixels sombres ✘ capsule absente sans le bloc @media 39 165 ✔ sans la transition 38 801 ✔ sans « background-color » 38 944 ✔ ← ce qu'on garde J'ai d'abord accusé « will-change » et « backdrop-filter », que j'avais écrits aussi. Les mesures les ont innocentés ; ils restent retirés parce qu'ils ne servaient à rien — le flou n'a rien à flouter derrière une capsule opaque —, mais ce n'étaient pas eux. On n'anime donc ici que ce qui bouge vraiment : la transformation et l'ombre. */ /* --- LE VERRE, DEMANDÉ LE 12/09 ------------------------------------------ « Je veux que quand on descend la nav bar devienne translucide un peu liquid glass transparente. » ⚠️ LE FOND ET LE FLOU SONT POSÉS, JAMAIS ANIMÉS — et c'est la leçon du paragraphe ci-dessus, appliquée. « background-color » et « backdrop-filter » ne figurent PAS dans la liste des propriétés transitionnées : ils basculent d'un coup avec la classe, pendant que la transformation et l'ombre, elles, glissent. Un flou animé coûte une passe de composition par image, sur un élément qui se transforme déjà. 🔥 LE DOSAGE EST MESURÉ, ET LE PREMIER ÉTAIT MAUVAIS. À 58 % de l'île, le fond PEINT de la capsule tombait à rgb(119, 121, 137) au-dessus d'une page claire — un gris moyen. Les icônes, en --ile-txt-2 (#b9bccd), y passaient sous 2,5:1, alors qu'elles tiennent 8,4:1 sur le fond plein. Le verre demandé coûtait la lisibilité de la barre, et rien ne l'aurait signalé : ni l'audit, ni une erreur, ni le style calculé — qui continue d'annoncer la couleur déclarée, pas celle qu'on voit. Deux corrections, prises ensemble : le fond remonte à 78 % → fond peint rgb(77, 79, 94) environ les icônes passent à --ile-txt (#e7e8f2) DANS CET ÉTAT SEULEMENT Le verre reste franc — on voit passer ce qui défile dessous — et les chiffres sont dans le rapport de ce chantier. */ :root:not([data-barre="gauche"]) .appli .lateral .nav.nv-serre { transform: translateY(-2px) scale(.93); background-color: color-mix(in srgb, var(--ile, #1e2134) 78%, transparent); /* ⚠️ ESSAI EN COURS — 12/09/2026, plainte « un gros bloc blanc ou noir autour de la nav bar quand je glisse vers le bas », relevée par bureau-a8. Le flou est LE suspect unique : posé sur un élément qui porte aussi une transformation, c'est la combinaison qui fait peindre à Chromium un rectangle NON DÉCOUPÉ par le rayon, à la couleur moyenne du fond — donc blanc en clair, noir en sombre, exactement ce qui est décrit. ⚠️ NI LUI NI MOI NE L'AVONS REPRODUIT : sept conditions de son côté (Chrome visible, sans GPU, WebView2 à 100 % et 115 %, défilement progressif avec rafale de captures), sondes de pixels sur 26 images, fond stable à rgb(7,9,18) en sombre et rgb(244,243,251) en clair. Le suspect est désigné, pas prouvé. Ceci est donc un ESSAI, à rétablir tel quel si le bloc persiste chez lui. LA TRANSLUCIDITÉ RESTE. Le « liquid glass » est une demande explicite du même jour ; on ne la retire pas pour éprouver autre chose. Le fond à 78 % continue de laisser voir ce qui défile dessous — c'est le flou seul, la part qui coûte une passe de composition et qui produit l'artefact, qui est suspendu. -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); */ /* 🔥 AUCUN BLANC SUR LE POURTOUR — demande de Kentin, 12/09 : « quand je descends il y a une bande blanche autour de la nav barre, je veux que tu l'enlèves ». Trois sources, et il fallait les trois : le trait clair que j'avais posé (rgba blanc à 14 %), le reflet intérieur du haut (blanc à 7 %), et LA BORDURE D'ORIGINE de la capsule — rgba(255,255,255,.08), posée par app.css et que mon état ne faisait qu'éclaircir. Retirer les deux miennes n'aurait pas suffi. Ce liseré n'était pas un oubli : un bord clair en haut, un bord sombre en bas, c'est la réfraction sur l'arête d'un verre. Mais l'écran est le sien, et une arête ne vaut pas qu'on la défende. Le relief est donc porté par l'OMBRE PORTÉE seule, qui ne dépose aucune bande claire. */ border-color: transparent; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .32), 0 18px 40px -18px rgba(0, 0, 0, .70), 0 2px 10px -4px rgba(0, 0, 0, .45); } /* Les icônes montent d'un niveau de texte tant que le fond est translucide : --ile-txt au lieu de --ile-txt-2. Elles redescendent d'elles-mêmes quand la capsule reprend son fond plein. */ :root:not([data-barre="gauche"]) .appli .lateral .nav.nv-serre button { color: var(--ile-txt, #e7e8f2); } } /* --- LES DEUX BLOCS SE RAPPROCHENT, DEMANDÉ LE 12/09 ------------------------- « Et que Larry sur la gauche et la connexion se rapprochent de la nav bar. » C'est le second temps du Resizable Navbar : les éléments périphériques convergent vers le centre pendant que la barre se compacte. Ici, la marque « L A R R Y » et le menu de compte. ⚠️ PAR « translate », PAS PAR UNE MARGE. Même raison que pour la capsule : ajusterNav() mesure les collisions entre la marque, la capsule et le bloc du compte. Une marge animée le ferait remesurer en boucle. ⚠️ CE QUE ÇA NE MET PAS À L'ABRI, ET QUI EST MESURÉ PLUS BAS : getBoundingClientRect, lui, VOIT les transformations. ajusterNav ne se rejoue qu'au redimensionnement — pas au défilement —, donc le cas à vérifier est « fenêtre redimensionnée alors que la barre est resserrée ». Le rapprochement est volontairement court (32 px) et il s'arrête sous 1 200 px, où la barre n'a plus de marge à rendre. */ @media (min-width: 1200px) { :root:not([data-barre="gauche"]) .appli.nv-proche .lateral > .marque, :root:not([data-barre="gauche"]) .appli.nv-proche .lateral > .bas { transition: translate calc(.26s * var(--anim-vit, 1)) cubic-bezier(.22, .61, .36, 1); } :root:not([data-barre="gauche"]) .appli.nv-proche.nv-serree .lateral > .marque { translate: 32px 0; } :root:not([data-barre="gauche"]) .appli.nv-proche.nv-serree .lateral > .bas { translate: -32px 0; } } /* --- 2. Le halo du survol ---------------------------------------------------- Il glisse d'une entrée à l'autre au lieu d'apparaître sous chacune. Posé DANS la capsule et DERRIÈRE les entrées : l'entrée active porte déjà sa pastille pleine, et un halo par-dessus l'éteindrait. « position: relative » sur la capsule ne déplace rien — elle est déjà en flux — mais elle donne au halo son origine. */ :root:not([data-barre="gauche"]) .appli .lateral .nav { position: relative; } :root:not([data-barre="gauche"]) .appli .lateral .nav > button { position: relative; z-index: 1; } .nv-halo { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 999px; background: rgba(255, 255, 255, .09); opacity: 0; pointer-events: none; transition: transform calc(.22s * var(--anim-vit, 1)) cubic-bezier(.22, .61, .36, 1), width calc(.22s * var(--anim-vit, 1)) cubic-bezier(.22, .61, .36, 1), opacity calc(.16s * var(--anim-vit, 1)) ease; } .nv-halo.vu { opacity: 1; } /* Barre à gauche : la colonne n'est pas « position: relative » (règle ci-dessus réservée à la capsule), le halo se repérait donc sur un ancêtre et tombait plus haut que l'entrée survolée. Les entrées de la colonne ont déjà leur propre fond au survol : le halo n'a rien à y faire. */ :root[data-barre="gauche"] .nv-halo { display: none; } /* --- 3. Mouvement réduit ------------------------------------------------------ La capsule garde ses deux états — ils portent une information, on sait qu'on a défilé — mais elle y arrive sans glisser. Le halo, lui, ne fait que décorer : il ne se pose pas du tout. */ @media (prefers-reduced-motion: reduce) { :root:not([data-barre="gauche"]) .appli .lateral .nav { transition: none; } .nv-halo { display: none; } }