/* ===================================================================== WTV web — la barre flottante du bas, en verre TOUT ICI EST EXPRIME EN PIXELS D'ECRAN, jamais dans la grille de 1920. La page est reduite par un `zoom` ; `--wtv-u` vaut un pixel d'ecran exprime dans cette grille, et toutes les mesures passent par lui. ---- D'ou vient cette recette --------------------------------------- Empilement repris de `dpawlikowski/liquid-glass` (MIT), lu dans son code et non dans sa vitrine. Quatre couches, et il suffit qu'une manque pour que ce ne soit plus du verre mais un rectangle flou : -1 la TEINTE, qui adoucit ce qui est vu au travers 0 la BRILLANCE de surface, un degrade oriente 2 le CONTENU 3 les ARETES CHROMATIQUES, en `mix-blend-mode: screen` La quatrieme est celle que j'avais oubliee, et c'est precisement le liseré irisé visible sur la barre de Netflix : un filet ROUGE a gauche, CYAN a droite. C'est la lumiere qui se decompose en traversant le bord du materiau. Sans elle, l'objet reste plat. ---- Ce qui n'est PAS possible ici ---------------------------------- La vraie refraction — l'image derriere qui ondule — passe par `backdrop-filter: url(#filtre-svg)`. Dans la bibliotheque, elle est verrouillee derriere `@supports (backdrop-filter: url(...))`, que Safari ne satisfait pas ; leur repli demande une copie FIGEE du fond, inutilisable sur une page qui defile. Verifie dans leur source le 16/09/2026. Inutile de rechercher : sur iPhone, le depoli sature plus les arêtes chromatiques est le maximum atteignable. ===================================================================== */ #wtv-barre { position: fixed; left: 50%; bottom: calc(14 * var(--wtv-u) + env(safe-area-inset-bottom) / var(--wtv-echelle, 1)); transform: translateX(-50%); z-index: 9400; display: none; align-items: stretch; gap: calc(2 * var(--wtv-u)); padding: calc(7 * var(--wtv-u)) calc(13 * var(--wtv-u)); max-width: calc(var(--wtv-largeur, 100%) - 16 * var(--wtv-u)); box-sizing: border-box; /* Une vraie capsule : le rayon depasse la demi-hauteur, donc les bouts sont des demi-cercles quoi qu'il arrive. C'est ce qui distingue la barre de Netflix d'un rectangle aux coins adoucis. */ border-radius: 999px; /* `isolation` retient le `screen` des aretes a l'interieur. */ isolation: isolate; /* La BRILLANCE de surface : un degre oriente, plus clair la ou la lumiere entre. */ background: linear-gradient(142deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 38%, rgba(255,255,255,.09) 100%); border: var(--wtv-u) solid rgba(255,255,255,.22); box-shadow: 0 calc(16 * var(--wtv-u)) calc(44 * var(--wtv-u)) rgba(0,0,0,.42), inset 0 var(--wtv-u) 0 rgba(255,255,255,.34); -webkit-backdrop-filter: blur(calc(13 * var(--wtv-u))) saturate(185%); backdrop-filter: blur(calc(13 * var(--wtv-u))) saturate(185%); font: 500 calc(11 * var(--wtv-u))/1.15 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; } html.wtv-barre-on #wtv-barre { display: flex; } html.is-playing #wtv-barre { display: none !important; } #wtv-barre::before, #wtv-barre::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; } /* La TEINTE. Sombre et non blanche : la barre se pose sur une application noire, un voile blanc la ferait flotter comme un calque etranger au lieu de s'y fondre. */ #wtv-barre::before { z-index: -1; background: rgba(22, 22, 26, .52); } /* Les ARETES CHROMATIQUES. `screen` eclaircit sans jamais masquer ce qu'il y a dessous — d'ou un liseré qui vit au lieu d'un trait peint. */ #wtv-barre::after { z-index: 3; box-shadow: inset calc(1.4 * var(--wtv-u)) 0 rgba(255, 86, 116, .40), inset calc(-1.4 * var(--wtv-u)) 0 rgba(54, 226, 255, .36), inset 0 calc(1.2 * var(--wtv-u)) rgba(255,255,255,.50), inset 0 calc(-18 * var(--wtv-u)) calc(30 * var(--wtv-u)) rgba(255,255,255,.07); mix-blend-mode: screen; } /* ---- Les entrees ---------------------------------------------------- */ #wtv-barre .wbar__b { position: relative; z-index: 2; appearance: none; -webkit-appearance: none; border: 0; background: transparent; padding: 0; color: rgba(255,255,255,.62); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(4 * var(--wtv-u)); flex: 1 1 auto; min-width: calc(58 * var(--wtv-u)); padding: calc(8 * var(--wtv-u)) calc(6 * var(--wtv-u)); border-radius: 999px; cursor: pointer; transition: color .2s ease, background .2s ease; } #wtv-barre .wbar__b svg { width: calc(25 * var(--wtv-u)); height: calc(25 * var(--wtv-u)); display: block; } #wtv-barre .wbar__b span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* LA PASTILLE, unique et mobile. Elle n'appartient a aucun bouton : elle vit dans la capsule et se deplace vers celui qui vient d'etre choisi. C'est ce qui fait qu'on lit un DEPLACEMENT et non deux fonds qui changent au meme instant. La courbe part vite et finit en douceur — un objet qui a de l'elan, pas une valeur qu'on interpole. La largeur suit avec la meme courbe, sinon la pastille se deforme pendant le trajet. */ #wtv-barre .wbar__pastille { position: absolute; /* `left: 0` et non la marge de la capsule : `offsetLeft`, qui sert au deplacement, la compte deja — la poser ici la comptait deux fois. */ left: 0; top: calc(7 * var(--wtv-u)); bottom: calc(7 * var(--wtv-u)); z-index: 1; border-radius: 999px; background: rgba(255,255,255,.17); box-shadow: inset 0 var(--wtv-u) 0 rgba(255,255,255,.22); opacity: 0; transition: transform .42s cubic-bezier(.32,.72,0,1), width .42s cubic-bezier(.32,.72,0,1), opacity .2s ease; pointer-events: none; } /* Le texte et le trait s'eclaircissent, mais plus AUCUN fond ici : il ferait double emploi avec la pastille et trahirait le deplacement. */ #wtv-barre .wbar__b.is-pris { color: #fff; } #wtv-barre .wbar__b:active { background: rgba(255,255,255,.10); } #wtv-barre .wbar__face { width: calc(25 * var(--wtv-u)); height: calc(25 * var(--wtv-u)); border-radius: calc(8 * var(--wtv-u)); background-size: cover; background-position: center; background-color: #3a3a3f; display: block; box-shadow: inset 0 0 0 var(--wtv-u) rgba(255,255,255,.22); } @media (max-width: 340px) { #wtv-barre .wbar__b { min-width: calc(44 * var(--wtv-u)); } #wtv-barre .wbar__b > span { display: none; } } /* ---- Le menu du haut ne sert plus, DANS LES DEUX SENS --------------- La barre du bas le remplace en portrait comme en paysage : garder les deux affichait deux fois les memes sections, l'une sous l'encoche et l'autre sous le pouce. La regle porte donc sur le TOUCHER, comme celle du glissement — a la souris, le menu du haut reste le bon. */ html.wtv-tactile #screen-home .topnav { display: none; } html.wtv-debout #screen-home .rails { padding-top: calc(16 * var(--wtv-u)); } /* La reserve vaut EXACTEMENT l'empreinte de la barre : sa hauteur (60), plus les 14 qui la separent du bas. Rien de plus. Elle etait a 104, et comme elle est comprise DANS la hauteur de l'ecran, elle ne s'y ajoutait pas — elle la rognait. On perdait donc trente pixels de noir sous la barre, en plus de remonter tout le contenu. Et la barre etant translucide, la derniere rangee gagne a passer derriere elle plutot qu'a s'arreter avant. */ /* LA RESERVE DU BAS, une seule et pour les deux orientations. Trois choses s'additionnaient sans se connaitre : le conteneur des rangees porte 90 unites de marge basse, la derniere rangee 34 de plus, et j'avais ajoute 76 pixels d'ecran par-dessus. A la fin du defilement cela faisait 152 px de noir mort sous la derniere affiche — la bande qu'il avait entouree en rouge, et que ma premiere correction avait DOUBLEE au lieu de la supprimer. On efface donc les deux premieres et on n'en garde qu'une, calculee : la barre fait 69 px de haut et flotte a 14 px du bord, donc son milieu est a 48 px du bas. En s'arretant la, la derniere rangee passe DERRIERE le verre au lieu de s'arreter avant lui — c'est tout l'interet d'une barre translucide. */ html.wtv-tactile #screen-home .rails { padding-bottom: 0; } html.wtv-tactile #screen-home .rails > *:last-child { margin-bottom: 0; } html.wtv-tactile.wtv-barre-on #screen-home { padding-bottom: calc(46 * var(--wtv-u) + env(safe-area-inset-bottom) / var(--wtv-echelle, 1)); } /* ===================================================================== LA FEUILLE DU PROFIL Meme materiau que la barre — teinte, brillance, aretes chromatiques — posee juste au-dessus d'elle et alignee sur son bord droit, la ou vit le bouton qui l'ouvre. Elle monte en s'ouvrant : le mouvement dit d'ou elle vient. ===================================================================== */ #wtv-feuille { position: fixed; /* `left` est pose par barre.js, sur le centre du bouton Profil. Le `right` ne sert que le temps du premier rendu. */ right: calc(14 * var(--wtv-u)); bottom: calc(84 * var(--wtv-u) + env(safe-area-inset-bottom) / var(--wtv-echelle, 1)); z-index: 9401; display: none; flex-direction: column; min-width: calc(196 * var(--wtv-u)); padding: calc(7 * var(--wtv-u)); box-sizing: border-box; border-radius: calc(20 * var(--wtv-u)); isolation: isolate; background: linear-gradient(150deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 44%, rgba(255,255,255,.09) 100%); border: var(--wtv-u) solid rgba(255,255,255,.22); box-shadow: 0 calc(14 * var(--wtv-u)) calc(38 * var(--wtv-u)) rgba(0,0,0,.46), inset 0 var(--wtv-u) 0 rgba(255,255,255,.30); -webkit-backdrop-filter: blur(calc(14 * var(--wtv-u))) saturate(185%); backdrop-filter: blur(calc(14 * var(--wtv-u))) saturate(185%); font: 500 calc(13 * var(--wtv-u))/1.2 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; /* Elle SORT du bouton : elle part petite, depuis son bord bas, et s'epanouit vers le haut. C'est l'origine de la transformation qui raconte cela — en bas et au centre, donc sur le bouton lui-meme. La courbe depasse legerement avant de se poser : une bulle qui s'echappe, pas un panneau qui apparait. */ transform-origin: bottom center; opacity: 0; transform: translateX(-50%) translateY(calc(10 * var(--wtv-u))) scale(.86); transition: opacity .16s ease, transform .34s cubic-bezier(.22,1.25,.36,1); } #wtv-feuille.is-on { display: flex; opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } /* Les entrees arrivent l'une apres l'autre, tres vite : le regard suit la feuille qui s'ouvre au lieu de recevoir trois lignes d'un bloc. */ #wtv-feuille .wfeu__b { opacity: 0; transform: translateY(calc(5 * var(--wtv-u))); transition: opacity .2s ease, transform .26s cubic-bezier(.32,.72,0,1); } #wtv-feuille.is-on .wfeu__b { opacity: 1; transform: translateY(0); } #wtv-feuille.is-on .wfeu__b:nth-child(1) { transition-delay: .04s; } #wtv-feuille.is-on .wfeu__b:nth-child(2) { transition-delay: .08s; } #wtv-feuille.is-on .wfeu__b:nth-child(3) { transition-delay: .12s; } #wtv-feuille::before, #wtv-feuille::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; } #wtv-feuille::before { z-index: -1; background: rgba(22, 22, 26, .56); } #wtv-feuille::after { z-index: 3; box-shadow: inset calc(1.4 * var(--wtv-u)) 0 rgba(255, 86, 116, .34), inset calc(-1.4 * var(--wtv-u)) 0 rgba(54, 226, 255, .30), inset 0 calc(1.2 * var(--wtv-u)) rgba(255,255,255,.44); mix-blend-mode: screen; } #wtv-feuille .wfeu__b { position: relative; z-index: 2; appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: rgba(255,255,255,.92); display: flex; align-items: center; gap: calc(11 * var(--wtv-u)); padding: calc(11 * var(--wtv-u)) calc(13 * var(--wtv-u)); border-radius: calc(13 * var(--wtv-u)); text-align: left; width: 100%; cursor: pointer; transition: background .18s ease; } #wtv-feuille .wfeu__b svg { width: calc(19 * var(--wtv-u)); height: calc(19 * var(--wtv-u)); flex: 0 0 auto; } #wtv-feuille .wfeu__b span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #wtv-feuille .wfeu__b:active { background: rgba(255,255,255,.14); } html.is-playing #wtv-feuille { display: none !important; }