/* ============================================================ LE VERRE — la part qui ne change pas d'une frame à l'autre. Voir src/glass.js pour le flou, qui lui est peint dans le canvas du film. ============================================================ Ce fichier ne contient QUE des valeurs constantes : une teinte, une chute de lumière, un liseré. C'est le partage qui rend l'effet gratuit — le compositeur rasterise ce calque UNE fois et le réutilise à chaque image, pendant que le canvas, lui, refait son flou. Y mettre le moindre `backdrop-filter` annulerait tout le bénéfice : le compositeur devrait relire le canvas sous-jacent soixante fois par seconde, ce qui est exactement ce que la voie canvas existe pour éviter. Tout est conditionné à `html.has-glass`, posée par mountGlass() et par lui seul. Sans le flou dessous, ce liseré serait un rectangle lumineux tracé sur une image nette — un ornement sans cause, donc pire que rien. */ html.has-glass .glass { /* Le contour, en un seul chemin à trou. Le « trou » est fabriqué par un pont parcouru DEUX FOIS en sens inverse (`0 0` → coin haut-gauche du cadre, puis retour à `0 0` en fin de liste). Les deux passages sont exactement superposés, donc ils s'annulent — sous la règle pair-impair comme sous la règle non nulle — et il ne reste que l'anneau. Un pont parcouru une seule fois laisserait un coin de tarte en travers de la gouttière gauche. Les valeurs viennent de --rule-side / --rule-top / --rule-bottom, déclarées sur .glass dans style.css : le CSS et src/glass.js lisent ainsi les mêmes trois nombres, au lieu d'en tenir chacun une copie. Le canvas arrondit au pixel (comme le cadre), le CSS non — l'écart maximal est d'un demi-pixel, mesuré, et il porte sur une teinte à 5 % d'opacité, pas sur une arête. */ clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, var(--rule-side) var(--rule-top), calc(100% - var(--rule-side)) var(--rule-top), calc(100% - var(--rule-side)) var(--rule-bottom), var(--rule-side) var(--rule-bottom), var(--rule-side) var(--rule-top), 0 0 ); /* Deux couches, du dessus vers le dessous : 1. la CHUTE DE LUMIÈRE. Un halo sombre qui n'existe qu'aux bords de l'écran et vaut zéro jusqu'à 58 % du rayon — donc rien du tout sur l'arête intérieure, qui est le seul endroit où le verre doit être clair. C'est ce qui donne l'épaisseur : une plaque de verre est plus dense là où on la voit de biais. 0,17 au coin extrême est la limite avant que le coin ne se lise comme une vignette de photographie ; 2. la TEINTE. Un voile de blanc de plomb — le blanc du film (--film-light) et surtout pas du blanc pur, qui virerait au laiteux d'interface sur une huile. Son opacité a été RÉGLÉE PAR LA MESURE et pas à l'œil, parce qu'elle coûte quelque chose : la marque et le bouton « Écrire » vivent dans cette bande, et sur les plans sombres ils sont en crème — un voile clair rapproche donc l'encre de son fond. À 5,5 %, le premier essai, le pire des six arrêts (la marque à y = 700, fond à 84,6, en 1440×754) tombait de 5,29:1 à 4,74:1, c'est-à-dire à 0,24 du minimum WCAG. À 3 % la même mesure donne 4,98:1, et sur les plans clairs le voile continue de RENDRE du contraste à l'encre (7,89 → 8,01 pour la marque à y = 2000). Ce qui a tranché : le voile n'était pas ce qui faisait lire le verre. Le flou, le liseré et la chute de lumière le font ; lui n'ajoutait qu'une brume, au prix d'un demi-point de contraste sur le seul texte permanent de la page. */ background: radial-gradient(130% 100% at 50% 46%, rgba(20, 18, 15, 0) 58%, rgba(20, 18, 15, 0.17) 100%), linear-gradient(rgba(226, 220, 204, 0.03), rgba(226, 220, 204, 0.03)); } /* Le LISERÉ SPÉCULAIRE, sur l'arête intérieure. C'est lui qui fait croire à une épaisseur, et c'est le seul endroit du verre qui mérite du soin. L'élément est posé exactement sur le rectangle du cadre, sans fond : la découpe du parent l'efface donc entièrement, et il ne reste que ses ombres PORTÉES vers l'extérieur, c'est-à-dire dans le verre. Le trait de lumière est ainsi du bon côté par construction, sans avoir à le placer au pixel. Trois ombres, chacune pour une raison : · 1 px net à 22 % — l'arête elle-même, celle qu'on voit ; · 3 px à 9 % — le congé, la petite courbure qui empêche l'arête d'être une découpe au cutter ; · 22 px à 5,5 % — la lumière qui rentre dans l'épaisseur et s'y perd. Sans elle l'arête est un trait posé sur du flou ; avec elle, le flou paraît COMMENCER à l'arête, ce qui est toute la différence entre un cadre et une vitre. Les trois sont prélevées sur --film-light et non sur du blanc : sur une huile, une lumière blanche pure se lit comme un néon. */ html.has-glass .glass::before { content: ''; position: absolute; left: var(--rule-side); right: var(--rule-side); top: var(--rule-top); bottom: calc(100% - var(--rule-bottom)); box-shadow: 0 0 0 1px rgba(226, 220, 204, 0.22), 0 0 3px 0 rgba(226, 220, 204, 0.09), 0 0 22px 2px rgba(226, 220, 204, 0.055); } /* Sous 340 px de large, src/divider.js ne trace plus les montants (sa constante FRAME_MIN_WIDTH) et src/glass.js ne floute plus que le haut et le bas. Le CSS doit suivre la MÊME décision, sur ses deux pièces, sinon il contredit le canvas : · le trou de la découpe s'élargit à toute la largeur. Sans ça, les deux gouttières verticales resteraient teintées alors qu'elles ne sont plus floutées — une bande de verre sans verre dessous, c'est-à-dire un voile posé sur l'image pour rien ; · le liseré déborde des deux bords. Posé sur les quatre côtés alors que deux seulement portent un filet, il inventerait un cadre là où il n'y en a plus. */ @media (max-width: 339px) { html.has-glass .glass { clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, 0 var(--rule-top), 100% var(--rule-top), 100% var(--rule-bottom), 0 var(--rule-bottom), 0 var(--rule-top), 0 0 ); } html.has-glass .glass::before { left: -2px; right: -2px; } } /* Le verre reste en `prefers-reduced-motion` : ce n'est pas une animation, c'est une matière. Rien ici ne bouge, et rien ne doit donc être neutralisé — la déclaration est là pour que la prochaine main qui ajoutera une transition trouve l'endroit où la couper, plutôt que de la laisser passer. */ @media (prefers-reduced-motion: reduce) { html.has-glass .glass, html.has-glass .glass::before { transition: none; animation: none; } }