/* ========================================================================== Liquid Glass (style iOS 26) — version optimisée GPU Chargé APRÈS styles.css : ces règles écrasent les anciennes couches verre. BUDGET DE RENDU Un `backdrop-filter` coûte proportionnellement à la SURFACE de l'élément, et chaque occurrence est une capture + un filtrage distincts. Deux règles suivies ici : 1. Un seul vrai backdrop-filter par niveau de fond. Un élément muni d'un backdrop-filter devient un « backdrop root » : ses descendants ne filtrent que l'image DÉJÀ filtrée par l'ancêtre. Re-flouter le panel, les boutons ou l'avatar à l'intérieur de la carte coûtait 1,13 Mpx par frame pour un gain visuel quasi nul — ils sont désormais peints avec des dégradés statiques. 2. Aucune bordure claire. Le bord-lentille réfracté (4 bandes filtrées le long du contour) a été retiré : à toute largeur il se lisait comme une bordure blanche peinte. Le bloc ne porte donc plus qu'un seul backdrop-filter, celui du verre lui-même. Retour arrière : supprimer le vers ce fichier dans index.html. ========================================================================== */ :root{ /* --- Le verre lui-même ------------------------------------------------ */ --lg-blur: 16px; /* iOS floute peu... */ --lg-sat: 190%; /* ...mais sursature beaucoup */ --lg-bright: 1.06; --lg-contrast: 1.06; /* --- Teinte du verre -------------------------------------------------- */ --lg-tint: 255 255 255; /* Densité du verre. Volontairement basse sur la grande carte, qui ne porte que le titre et les liens, posés sur la partie claire du fond. La densité nécessaire à la lecture est reportée sur .lg-inner, sous le corps de texte : le fond de la page est clair en haut et sombre en bas, donc aucune couleur de texte unique n'y serait lisible sans cette matière. */ --lg-tint-a: .09; /* --- Reflet spéculaire (piloté par le pointeur en JS) ----------------- */ --lg-spec: 1; --lg-mx: 50%; --lg-my: 14%; /* au repos : dans le bloc, pas collé au bord */ } /* -------------------------------------------------------------------------- 1. Corps du verre — le SEUL élément à porter un backdrop-filter de flou -------------------------------------------------------------------------- */ .lg{ position:relative; isolation:isolate; overflow:hidden; /* Teinte plus dense en haut (épaisseur du verre) + grain anti-banding. Le grain est une couche de background, pas un calque : coût nul. */ background: linear-gradient(180deg, rgb(var(--lg-tint) / calc(var(--lg-tint-a) + .02)), rgb(var(--lg-tint) / var(--lg-tint-a)) 44%, rgb(var(--lg-tint) / calc(var(--lg-tint-a) + .015))), var(--noise); background-size:auto, 180px 180px; border:0; backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)) brightness(var(--lg-bright)) contrast(var(--lg-contrast)); -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)) brightness(var(--lg-bright)) contrast(var(--lg-contrast)); /* Aucun liseré clair : le bloc est délimité par ses ombres portées et par la rupture de netteté du fond, pas par une bordure. Même à 1px, un liseré blanc se lisait comme un cadre peint. */ box-shadow: 0 2px 6px rgba(0,0,0,.10), 0 14px 36px rgba(0,0,0,.16), 0 44px 96px rgba(0,0,0,.22), /* Assise sombre : donne du volume sans ajouter de blanc */ inset 0 -14px 34px -16px rgba(0,0,0,.28); } /* Sans backdrop-filter (vieux Firefox) : verre opaque de secours */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .lg{ background:rgba(255,255,255,.34); } } /* -------------------------------------------------------------------------- 2. Reflet spéculaire mobile — ::before Neutralise aussi les propriétés héritées des anciennes règles .card/.panel -------------------------------------------------------------------------- */ .lg::before{ content:""; position:absolute; inset:0; padding:0; border-radius:inherit; pointer-events:none; z-index:0; mask:none; -webkit-mask:none; background: /* Tache de lumière principale, suit le pointeur */ radial-gradient(105% 70% at var(--lg-mx) var(--lg-my), rgba(255,255,255,.24), rgba(255,255,255,.06) 28%, transparent 60%), /* Dispersion chromatique : le verre sépare légèrement les couleurs */ radial-gradient(70% 50% at calc(var(--lg-mx) + 12%) calc(var(--lg-my) + 12%), rgba(120,170,255,.16), transparent 52%), radial-gradient(66% 48% at calc(var(--lg-mx) - 14%) calc(var(--lg-my) + 16%), rgba(255,140,225,.13), transparent 50%), /* Balayage diagonal type verre poli */ linear-gradient(118deg, rgba(255,255,255,.09) 0%, transparent 30%, transparent 68%, rgba(255,255,255,.07) 100%); mix-blend-mode:screen; opacity:var(--lg-spec); } /* L'ancienne couche de grain en mix-blend-mode est supprimée : le grain est passé dans le background de .lg, ce qui retire un calque de blend par bloc. */ .lg::after{ display:none; } /* Le contenu reste au-dessus des couches de verre */ .lg > *{ position:relative; z-index:1; } /* -------------------------------------------------------------------------- 4. Surfaces verre INTERNES — sans backdrop-filter Elles vivent dans le backdrop root de .lg : le fond qu'elles verraient est déjà flouté et uniforme, donc un filtre supplémentaire ne produirait presque rien de visible. Dégradés + arêtes suffisent. -------------------------------------------------------------------------- */ .lg-inner{ position:relative; isolation:isolate; overflow:hidden; background: linear-gradient(180deg, rgb(var(--lg-tint) / .30), rgb(var(--lg-tint) / .24) 46%, rgb(var(--lg-tint) / .28)); border:0; backdrop-filter:none; -webkit-backdrop-filter:none; /* Comme le bloc porteur : pas de liseré clair. Ses ombres portées et sa teinte plus dense suffisent à le détacher du verre qui l'entoure. */ box-shadow: inset 0 -12px 30px -16px rgba(0,0,0,.24), 0 2px 8px rgba(0,0,0,.09), 0 16px 38px rgba(0,0,0,.14); } /* Bord-lentille du bloc interne : dégradés statiques, aucun filtre */ .lg-inner::before{ content:""; position:absolute; inset:0; padding:0; border-radius:inherit; pointer-events:none; z-index:0; mask:none; -webkit-mask:none; mix-blend-mode:screen; opacity:.8; /* Uniquement le reflet mobile : les dégradés de bord ont été retirés avec les liserés, ils en faisaient partie. */ background: radial-gradient(105% 65% at var(--lg-mx) var(--lg-my), rgba(255,255,255,.13), transparent 58%); } /* Retire la couche de grain en soft-light héritée de styles.css */ .lg-inner::after{ display:none; } .lg-inner > *{ position:relative; z-index:1; } /* Boutons et tags : 12 backdrop-filter remplacés par des dégradés */ .lg-pill{ position:relative; /* Un peu plus dense que le verre porteur : mesuré, le texte des tags tombait à 4,56:1 sur les zones sombres du fond, soit tout juste le seuil WCAG AA. */ background:linear-gradient(180deg, rgba(255,255,255,.36), rgba(255,255,255,.20)); border:0; backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow: inset 0 1px 0 rgba(255,255,255,.46), inset 0 -1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(255,255,255,.13), inset 0 4px 10px -8px rgba(255,255,255,.40), 0 3px 10px rgba(0,0,0,.14), 0 10px 26px rgba(0,0,0,.12); /* On n'anime que transform + box-shadow : jamais un filtre, dont chaque frame de transition déclencherait un nouveau filtrage. */ transition:transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease; } @media (hover:hover){ .lg-pill:hover{ transform:translateY(-1.5px) scale(1.03); filter:none; background:linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,.19)); box-shadow: inset 0 1px 0 rgba(255,255,255,.60), inset 0 -1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.18), inset 0 6px 14px -8px rgba(255,255,255,.55), 0 4px 12px rgba(0,0,0,.16), 0 16px 34px rgba(0,0,0,.16); } .lg-pill:active{ transform:translateY(0) scale(.985); } } /* Avatar : même verre, sans pseudo-élément (le contenu est un nœud texte) */ .avatar{ background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.10)); border:0; color:rgba(18,22,28,.86); backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow: inset 0 1px 0 rgba(255,255,255,.52), inset 0 -1px 0 rgba(255,255,255,.13), inset 0 0 0 1px rgba(255,255,255,.15), inset 0 5px 12px -10px rgba(255,255,255,.50), 0 3px 10px rgba(0,0,0,.14), 0 12px 28px rgba(0,0,0,.14); } /* -------------------------------------------------------------------------- 5. Ajustements par bloc -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 6. Garde-fous -------------------------------------------------------------------------- */ /* Mobile : le coût d'un flou croît avec son rayon, et les GPU y sont plus modestes. Bande de bord et flou réduits. */ @media (max-width:480px){ .card.lg{ --lg-blur:12px; } } /* Écran très dense : le filtrage porte sur les pixels physiques, donc 4× plus de travail en @2x. On allège le rayon plutôt que l'effet. */ @media (min-resolution:2dppx){ .card.lg{ --lg-blur:14px; } } /* Transparence réduite : on retire tout filtrage (accessibilité + perf) */ @media (prefers-reduced-transparency:reduce){ .lg{ backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(255,255,255,.42); } .lg::before{ display:none; } } @media (prefers-reduced-motion:reduce){ .lg-pill{ transition:none !important; } }