/* ========================================================================= UST — jetons du système Direction retenue au banc : « Adaptation » (_design/ARBITRAGE.md). La page s'adresse à une rétine ouverte depuis vingt minutes. Toute l'interface tient entre L 5 % et L 22 % ; les photographies de l'auteur sont la seule source de lumière. Les neutres ne sont pas choisis : ils sont RECOPIÉS du k-means sur 219 029 pixels de signal des 136 astrophotos. Trois lois de palette (ARBITRAGE §5), qui expliquent chaque jeton : 1. Loi d'accent — l'accent d'interface dérive de la teinte des NEUTRES mesurés (H 352). La bande H 9-20, la braise des nébulosités, reste la propriété exclusive des photographies : aucun chrome ne s'y aventure. 2. La lampe n'éclaire que ce que la main touche — liens, bouton, soulignement de nav, index de graduation. Rien d'autre. 3. Aucune surface claire, nulle part. CONTRASTES RECALCULÉS À LA FORMULE WCAG 2.x SUR CES HEXADÉCIMAUX EXACTS, et confrontés au tableau §5 de l'arbitrage. Dix d'entre eux tombent au centième près. UN SEUL DIVERGE, et il n'est pas arrondi : --gradue #867678 sur --nuit = 4,58:1 (le §5 annonce 4,63:1) 4,63:1 est la valeur de #877778, soit un point de rouge et de bleu de plus. Le §5 impose l'hexadécimal, pas le ratio : l'hexadécimal est donc conservé et le chiffre corrigé. Sans conséquence fonctionnelle — 4,58:1 passe l'AA du texte (4,5) sur le fond, et 3,74:1 sur carte tient le plancher de WCAG 1.4.11 (3,0) pour un objet graphique porteur, qui est son emploi. ========================================================================= */ :root { /* --- Les dix jetons de la palette (+ le fond) — ARBITRAGE §5 ---------- Ratio /nuit et /ciel recalculés à la formule WCAG 2.x, sRGB. */ --nuit: #0D0A0C; /* fond global, sous le seuil du signal */ --ciel: #242022; /* cartes et panneaux · cluster 39 % 1,22 / — */ --filet: #353032; /* bordures au seuil · 21 % 1,52 /1,24 */ --filet-haut: #534648; /* piste, filets réveillés · 10 % 2,19 /1,79 */ --gradue: #867678; /* graduations, seuils, index vide 4,58 /3,74 */ --texte: #EFE7E9; /* encre principale 16,21/13,24 */ --champ: #A6ACBA; /* corps, chapôs, liens de nav 8,66 /7,08 */ --label: #B0A1A2; /* labels et notes en chasse fixe 7,94 /6,49 */ --lampe: #F9435B; /* L'ACCENT, H 352 5,61 /4,58 */ --lampe-haute: #FFB3BF; /* on monte la lampe : survol, focus 11,68 /9,54 */ --lampe-nuit: #4E1020; /* palier sombre, DÉCOR SEUL 1,33 / — */ /* --- LE FOND DU BOUTON PRINCIPAL, ET LUI SEUL ------------------------- Le bouton portait --nuit sur --lampe : 5,61:1, conforme. Le donneur d'ordre le veut en blanc. Or son libellé fait 14 à 15 px en graisse 600 : ce n'est PAS du grand texte au sens WCAG (qui commence à 18,66 px en gras ou 24 px), le seuil applicable reste donc 4,5:1, et blanc sur --lampe ne donne que 3,51:1. Échec. La lampe ne bouge pas d'un point : elle reste l'accent des liens, des graduations, du soulignement de nav et des index. C'est le FOND DU BOUTON qui descend, et lui seul. Ratios recalculés à la formule WCAG 2.x sur ces hexadécimaux exacts : #FFFFFF sur --lampe-bouton 5,60:1 (l'ancien état valait 5,61:1) #FFFFFF sur --lampe-bouton-haute 4,86:1 (survol, seuil 4,5 tenu) Teinte mesurée du fond : H 350,8, à 1,3° de la teinte des neutres (H 352) dont la loi n° 1 fait dériver l'accent. L'écart est invisible et l'aplat reste hors de la bande braise H 9-20 réservée aux photographies ; c'est l'hexadécimal du donneur d'ordre qui est conservé, comme --gradue plus haut, et l'écart qui est écrit. LE SURVOL EST DÉRIVÉ, JAMAIS RETAPÉ : un pas du fond vers la lampe. La direction du système — « on monte la lampe » — est tenue, mais bornée, parce qu'au-delà de ce pas le blanc repasse sous 4,5:1. */ --lampe-bouton: #C9203A; --lampe-bouton-haute: color-mix(in srgb, var(--lampe-bouton) 70%, var(--lampe)); --encre-bouton: #FFFFFF; /* --- La rampe de l'accent : dérivée, jamais retapée à la main --------- Un seul accent, une seule rampe. Toute transparence de la lampe se calcule ici et nulle part ailleurs. */ --halo: color-mix(in srgb, var(--lampe) 30%, transparent); --halo-fort: color-mix(in srgb, var(--lampe) 46%, transparent); --lampe-bord: color-mix(in srgb, var(--lampe) 45%, transparent); /* C7 : l'en-tête prend un fond tokenisé, jamais un backdrop-filter. */ /* LES CHAMPS DE SAISIE SE VOIENT, ET C'EST UNE CORRECTION DU 15/09/2026. Ils n'étaient qu'un filet bas en --filet-haut : rien ne disait où écrire, et le donneur d'ordre l'a dit avec ses mots. Un champ est maintenant une boîte, et la boîte doit tenir le seuil de 3:1 de la 1.4.11 CONTRE SES DEUX SUPPORTS, parce qu'un formulaire vit tantôt sur --nuit, tantôt sur --ciel. Mesuré à la formule WCAG sur les hexadécimaux exacts : --filet 1,52:1 sur nuit 1,24:1 sur ciel échec --filet-haut 2,19:1 1,79:1 échec, c'était l'état --gradue 4,58:1 3,74:1 tenu des deux côtés C'est donc --gradue qui porte le contour, et lui seul le porte : aucun remplissage ne tient 3:1 sans devenir un aplat clair qui écraserait la nuit. Le fond n'a pas à le tenir, il n'est là que pour l'affordance, la tache plus claire qui dit « on écrit ici » ; à 8 % il vaut 1,16:1 sur nuit et 1,24:1 sur ciel, et l'encre --texte y garde 13,93:1 et 10,70:1. */ --saisie-fond: color-mix(in srgb, var(--texte) 8%, transparent); --saisie-bord: var(--gradue); --saisie-bord-actif: var(--lampe); --voile-entete: color-mix(in srgb, var(--nuit) 92%, transparent); --selection: color-mix(in srgb, var(--lampe) 88%, var(--nuit)); /* --- LE VOILE DU HÉROS, ET SES DEUX VALEURS SONT MESURÉES ------------- L'accueil pose son titre, son chapô et ses appels SUR une photographie du ciel. Tous les rapports de contraste de cette feuille sont calculés sur --nuit : sans voile, ils ne veulent plus rien dire là où le texte est posé, et le chapô en --champ tombe sous le seuil dès qu'un amas d'étoiles passe dessous. La mesure a été faite sur le rendu, pas au jugé : la photographie a été servie sans voile, les pixels sous la boîte du titre et sous celle du chapô ont été relevés aux deux points de rupture, et le voile composé par-dessus jusqu'à ce que le pixel LE PLUS CLAIR de la zone de texte tienne son seuil. Relevé, aux deux points de rupture : sans voile ........................ 1,00:1 partout. Le voile n'est pas un effet, c'est la condition. opacité minimale, titre (3:1) ..... 0,495 opacité minimale, chapô (4,5:1) ... 0,78 opacité minimale, surtitre ........ 0,80 opacité minimale, crédit .......... 0,805 <- c'est elle qui commande --voile-hero vaut 0,97, au-dessus de ce minimum : la marge tient une autre photographie du catalogue, le jour où l'objet le plus travaillé change. Rendu obtenu, contre la valeur du jeton sur --nuit pur : titre 15,31 / 15,56 (16,21) chapô 8,18 / 8,31 (8,66) surtitre et crédit 7,50 / 7,68 (7,94) --voile-hero sous le texte : le fond y redevient --nuit à la mesure, et les ratios du tableau tiennent tels quels. --voile-hero-ouvert sur la photographie, où aucun texte n'est posé. Il ne l'éteint pas, il la tient sous le seuil du signal (loi n° 3). */ --voile-hero: color-mix(in srgb, var(--nuit) 97%, transparent); --voile-hero-ouvert: color-mix(in srgb, var(--nuit) 28%, transparent); /* --- Les trois familles — ARBITRAGE §6, toutes auto-hébergées (C6) ---- Display Spectral · Corps Epilogue · Donnée Martian Mono. Règle dure : tout nombre mesuré est en Martian Mono, y compris dans le h1 ; l'unité reste dans la famille de la prose. */ --f-display: Spectral, "Iowan Old Style", Georgia, "Times New Roman", serif; --f-corps: Epilogue, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --f-data: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* Graisses employées, et elles seules : les woff2 sont instanciés dessus. */ --g-display: 300; /* §6 : remontée de 200 à 300, les déliés tiennent */ --g-display-forte:400; --g-corps: 400; --g-corps-moyen: 500; --g-corps-fort: 600; --g-mono: 300; --g-mono-fort: 500; /* --- Échelle fluide, une seule voie : clamp 320 -> 1440 --------------- Display plafonné à 96 px (§6) : à 128 px le h1 perçait la loi n° 3. Mono planchée à 12 px (C8) : la donnée est le contenu, pas une note. */ --d-display: clamp(2.75rem, 1.25rem + 6.2vw, 6rem); /* 44 -> 96 px */ /* LE H1 DE L'ACCUEIL AU PLANCHER DE L'ÉCHELLE, ET POURQUOI IL LUI FAUT SON PROPRE PALIER. --d-display est plat à 44 px sous 387 px de large : c'est le plancher voulu. Or le h1 de l'accueil porte « photographie pas. » soudé par une espace insécable — un bloc de 17 signes qui, mesuré au rendu, réclame 326 px à 44 px de corps. La colonne en offre 280 à 320 px de large et 317 à 360 : le titre débordait, et le héros, qui recadre sa photographie, le coupait. Mesuré sur l'état d'origine, sans recadrage : la page entière défilait de 26 px à l'horizontale à 320. Ce jeton descend le titre à 37 px au plancher et rejoint --d-display à 390, où le bloc entre. Il ne sert QU'À CE TITRE et qu'en dessous de 24,5rem : au-delà, l'échelle commune reprend, et l'insécable retrouve son office, qui est d'empêcher « pas. » de rester seul en fin de ligne. */ --d-hero-etroit: clamp(2.3125rem, .05rem + 11.2vw, 2.75rem); /* 37 -> 44 px */ --d-h2: clamp(1.875rem, 1.41rem + 2.32vw, 3.5rem); /* 30 -> 56 px */ --d-h3: clamp(1.25rem, 1.107rem + .71vw, 1.75rem); /* 20 -> 28 px */ --d-h4: clamp(1.0625rem, 1.027rem + .18vw, 1.1875rem); /* 17 -> 19 */ --d-lead: clamp(1.125rem, 1.054rem + .36vw, 1.375rem);/* 18 -> 22 px */ --d-corps: clamp(1rem, .964rem + .18vw, 1.125rem); /* 16 -> 18 px */ --d-petit: clamp(.875rem, .857rem + .09vw, .9375rem); /* 14 -> 15 px */ --d-mono: clamp(.75rem, .72rem + .13vw, .8125rem); /* 12 -> 13 px */ --i-serre: 1.02; /* titrage display */ --i-titre: 1.18; /* h3, h4 */ --i-corps: 1.6; /* prose */ --i-mono: 1.5; --l-display: -.022em; --l-mono: .01em; --l-brow: .14em; /* --- Espacement ------------------------------------------------------- */ --e-1: .5rem; --e-2: .75rem; --e-3: 1rem; --e-4: 1.5rem; --e-5: 2rem; --e-6: 2.5rem; --e-7: 3rem; --e-8: 4rem; --section: clamp(4.5rem, 3.11rem + 6.96vw, 9.375rem); /* 72 -> 150 */ --section-large: clamp(5.5rem, 3.61rem + 9.45vw, 12rem); /* 88 -> 192 */ --marge: clamp(1.25rem, .55rem + 3.5vw, 2.5rem); /* --- L'EN-TÊTE : SA HAUTEUR EST UN JETON, PLUS UN NOMBRE RECOPIÉ ------ Le sceau est servi à 64 px (sceau(64), inc/entete.php) dans une barre à min-height 4,5rem et padding 0 : il restait 4 px au-dessus et 4 en dessous. « Le logo absolument collé ». --air-entete pose cet air, et --h-entete en découle au lieu d'être écrit à la main. Le jeton n'est pas un confort : TROIS RÈGLES se calaient sur 4,5rem sans le savoir — le panneau du menu mobile, la barre alphabétique du lexique et les scroll-margin des ancres. Elles lisent maintenant le jeton, et la première retouche de hauteur ne les désalignera plus. La barre garde la même hauteur au repos et collée : la bascule data-collee ne change qu'un fond et la couleur d'un filet déjà posé, transparent au repos. Aucun saut au moment du basculement. */ /* POURQUOI LE SCEAU RESTE À 64 px, MAINTENANT QU'IL PORTE LE LOGO DU CLIENT. La question a été posée : monter la barre à 96 px pour que la marque se lise. Elle est refusée sur mesure, et voici la mesure. Le troisième glyphe du logo validé est le pied de la lunette, sans barre horizontale : la marque se lit « USI » à 48, 64, 80, 96 ET 132 px. Aucune hauteur de barre ne fait revenir un T qui n'est pas dessiné. Ce qui se lit vraiment, en pixels d'appareil, tiré du maître de 1254 px : 48 64 80 96 132 anneau or, densité 1 0,57 0,77 0,96 1,15 1,58 anneau or, densité 2 1,15 1,53 1,91 2,30 3,16 jambage du U 2,60 3,47 4,34 5,21 7,16 fût du 3e glyphe 2,37 3,16 3,96 4,75 6,53 « by Gus » 0,15 0,20 0,26 0,31 0,42 « by Gus » reste sous le pixel PARTOUT, jusqu'à 132 px en densité 2 (0,84) : ce n'est pas 96 px qui le sauve, rien ne le sauve à ces tailles. Le sigle, lui, tient déjà largement à 64 px. L'ANNEAU RENDU, REMESURÉ À LA RECETTE sur les pixels composés par le navigateur (médiane du pic radial, 1 440 angles, tube blanc écarté), vaut 4,40:1 sur --nuit à 64 px en densité 1 et 9,34:1 en densité 2, contre un seuil de 3:1 pour un objet graphique. La pose annonçait 8,10:1 et 13,68:1 : c'était le haut de la distribution, pas sa médiane. Le sens ne change pas, le chiffre oui. Le tableau complet est au-dessus de .marque dans composants.css. Passer à 6rem coûterait 32 px de hauteur à --h-entete, donc au héros qui tombe au pixel sur la fenêtre à 1440x900, 1366x768, 1280x800 et 1024x768, pour ne rien rendre lisible de plus. On ne les dépense pas. Le sceau n'est d'ailleurs pas seul à porter la marque en en-tête : il est décoratif (alt vide, aria-hidden), et le nom est écrit à côté de lui. */ --sceau-entete: 4rem; /* 64 px, la taille servie par sceau(64) */ --air-entete: var(--e-2); /* 12 px au-dessus et sous le bloc de marque */ --h-entete: calc(var(--sceau-entete) + 2 * var(--air-entete)); /* 88 px */ /* LA BARRE PLUS SON FILET. --h-entete est la hauteur de la BOÎTE de la barre ; .nav pose en plus un filet de 1 px sous elle, et .nav est en `sticky`, donc dans le flux : elle mange 89 px du premier écran. Le héros pleine page les retranche pour tomber exactement sur la fenêtre. Sans ce jeton, le héros dépasserait d'un pixel et la page défilerait au premier écran. Le panneau du menu mobile, lui, se cale sur --h-entete : il recouvre le filet, il ne se pose pas dessous. */ --h-nav: calc(var(--h-entete) + 1px); /* 89 px */ /* --- LE PLANCHER DE L'OUVERTURE EN BANDEAU --------------------------- La doctrine de cohérence (_design/COHERENCE.md) donne quatre crans d'ouverture, et un seul demande une hauteur écrite : le BANDEAU, qui pose la même photographie voilée que le héros de l'accueil sur une fraction de sa hauteur. Les deux autres crans se mesurent sur leur contenu, et le quatrième — la pleine fenêtre — est celui de l'accueil, qui a déjà --h-nav pour se retrancher de la fenêtre. CE JETON EST UN PLANCHER, JAMAIS UN PLAFOND. Un bandeau dont le chapô tient quatre lignes est plus haut que le jeton, et c'est normal : on ne coupe pas un texte pour tenir une hauteur. La dose se règle sur la longueur du chapô, qui est une décision d'écriture, pas sur un `max-height`, qui serait un rognage. LE RAPPORT AU HÉROS EST LA RAISON DES DEUX BORNES. L'ouverture d'une page de rang inférieur doit se lire d'emblée comme MOINS que l'accueil, sans quoi les deux se confondent et la hiérarchie du site disparaît. Le héros vaut la fenêtre moins la barre : 811 px sur un écran de 900, 679 px sur un portable de 768. Le bandeau plafonne à 416 px, soit un peu plus de la moitié du premier et moins des deux tiers du second : l'écart se voit sans qu'on ait à comparer deux onglets. Au plancher, 272 px tiennent le surtitre, deux lignes de titre à 44 px et une ligne de crédit sans que la photographie devienne un liseré. */ --h-ouv-bandeau: clamp(17rem, 9.8rem + 18vw, 26rem); /* 272 -> 416 px */ /* --- LA COLONNE DE DROITE DU GABARIT DE MESSAGE ---------------------- Le carnet du client (§2.7) dessine un message en deux colonnes : à gauche le message, à droite la FICHE MEMBRE, avec le nom d'utilisateur, la photo, le rang, le nombre de messages, la date et l'heure d'inscription, le matériel utilisé et la localisation. C'EST LE SEUL JETON QUE LE LOT DU FORUM AJOUTE, et il est mesuré, pas choisi. Ce qui commande sa largeur est la LIGNE LA PLUS LONGUE que la fiche doit tenir sans se couper, et il y en a deux candidates : « 02/09/2026 à 18 h 03 », en Martian Mono à --d-mono ... MESURE « Unistellar eQuinox 2 », le plus long des neuf noms d'appareils, en Epilogue à --d-petit ................................. MESURE RELEVÉ AU RENDU, au binaire chrome-headless-shell, à 1440x900 et à 1024x768, sur le contenu de la fiche, ligne par ligne : « 02/09/2026 à 20 h 03 » date et heure, Martian Mono ...... 175 px « Saint-Girons, Occitanie FR » la localisation ............ 193 px « Matériel utilisé » le surtitre du bloc ................... 174 px « Unistellar eQuinox 2 » le plus long des neuf noms ....... 147 px « Administrateur » le rang ............................... 152 px « Localisation » le plus long des libellés ................ 130 px C'EST LA DATE QUI COMMANDE, et elle commande seule : c'est la seule de ces lignes qui ne peut PAS se couper sans devenir fausse, et sa largeur est invariante, puisque Martian Mono est à chasse fixe et que la donnée est en tabular-nums. Toutes les dates du site font 175 px à cet endroit. Le minimum est donc 175 + 32 de retrait + 1 de filet = 208 px. 15rem en donne 240, soit 207 px de contenu. Les 32 px au-dessus du minimum ne sont pas du confort : ce sont eux qui tiennent la localisation (193 px) sur UNE ligne au lieu de deux, à côté de chaque message. Qui descend ce jeton sous 13,5rem coupe la date en deux. LE POINT DE REPLI EST MESURÉ AVEC : à 62rem, la colonne de gauche garde 590 px, tout près des 608 px de --lecture. Un cran plus bas, à 768, elle tomberait à 352 px, soit 58 % de la mesure de lecture, et le carnet n'aurait plus deux colonnes mais une colonne et une gouttière. Sous 62rem la fiche passe donc SOUS le corps, et ce jeton ne sert plus. */ --forum-fiche: 15rem; /* 240 px */ /* --- LA TAILLE SERVIE DES ICÔNES 3D ---------------------------------- Les cinq objets sont des carrés de même poids optique : une seule taille les tient tous, il n'y a rien à rattraper objet par objet. Deux emplois, donc deux jetons, et pas un nombre écrit dans une règle : --orne l'ornement d'une section, à côté de sa tête. Il plafonne à 176 px : au-delà il ferait concurrence au titre, et le contour de la nébuleuse commence à se voir vers 220 px. --orne-hero l'icône du héros, à droite du descriptif d'ouverture. Elle est seule sur sa colonne et peut monter à 288 px. Le plancher (96 px, 128 px) est la taille de repli, quand la rangée se plie et que l'icône passe sur sa propre ligne. Les dérivés servis sont de 160, 320 et 480 : la plus grande valeur de ces clamps reste sous le 320, donc aucune icône n'est jamais agrandie. */ --orne: clamp(6rem, 4rem + 5vw, 11rem); /* 96 -> 176 px */ --orne-hero: clamp(8rem, 4rem + 10vw, 18rem); /* 128 -> 288 px */ --gouttiere: var(--e-4); --contenu: 77.5rem; /* 1240 px */ /* La colonne de texte du héros. Elle sert DEUX fois — la grille et la largeur du crédit — et c'est la raison du jeton : la géométrie du voile est calée sur elle, un texte qui déborderait de cette largeur sortirait de la partie pleine du voile et perdrait son contraste. */ --hero-colonne: 34rem; /* 544 px */ --etroit: 45rem; /* 720 px */ --lecture: 38rem; /* 608 px */ /* --- Rayons ----------------------------------------------------------- */ --r: 1rem; /* cartes, panneaux */ --r-s: .5rem; --r-pill: 100vw; --r-media: var(--r); --r-pied: 0; /* le pied est un filet, plus une capsule */ /* --- Ombres : jamais dures, jamais une teinte hors rampe -------------- */ --ombre-carte: 0 0 46px -12px var(--halo); --ombre-index: 0 0 8px 0 var(--halo-fort); --ombre-bouton:0 0 26px 0 var(--halo); --ombre-bouton-haute: 0 0 34px 0 var(--halo-fort); --anneau: 0 0 0 1px var(--filet); /* --- La graduation, élément signature — ARBITRAGE §7 ------------------ Deux instruments, deux axes, jamais confondus : l'épaisseur de piste est le premier signe visible qui les sépare. */ --grad-piste-objet: 3px; --grad-piste-appareil: 6px; --grad-index: 2px; --grad-boite-objet: 14px; --grad-boite-appareil: 20px; --grad-ligne: calc(var(--d-mono) * var(--i-mono)); /* --- Barème de motion — ARBITRAGE §8 ---------------------------------- Cinq durées, une courbe, trois cadences. Aucune durée hors ce tableau ne doit apparaître dans un composant. */ --t-micro: 100ms; /* survol de lien de nav */ --t-ui: 200ms; /* couleurs, bordures, halos, opacité d'index */ --t-panneau: 300ms; /* bascule d'en-tête à 80 px de défilement */ --t-pose: 400ms; /* tracé de graduation, scaleX 0 -> 1 */ --t-revele: 560ms; /* entrée de bloc, jouée une fois */ --courbe: cubic-bezier(.22, .61, .36, 1); --t-retard-pose: 120ms; /* retard du tracé */ --t-retard-index: 420ms; /* retard de l'allumage de l'index */ --t-cadence: 80ms; /* décalage entre frères, via --i */ /* --- LA RONDE DES CONSTRUCTEURS, demande client du 14/09/2026 ------------ --t-ronde DÉROGATION NOMMÉE AU BARÈME, ET LA SEULE. Les cinq durées ci-dessus plafonnent à 560 ms parce qu'elles se jouent une fois ; la ronde de l'accueil est la seule animation INFINIE du site, et une durée qui se répète n'est pas de la même famille. Elle est hors barème parce qu'infinie, sur demande du client (14/09/2026 : les constructeurs « en cercle, en mouvement »). 60 s par tour, soit 6° par seconde : la vitesse angulaire d'une trotteuse, qu'on voit tourner sans la fixer, et un logo met 12 s à passer de son poste au poste voisin, ce qui laisse le lire. Entre 40 et 60 s l'œil suit ; sous 30 s ça tourne pour tourner. Coupée sous prefers-reduced-motion, et mise en pause par un bouton visible (WCAG 2.2.2). --r-ronde LE RAYON DE L'ORBITE, et la largeur de référence des logos : un logo de facteur 1 (Celestron) fait exactement un rayon de large, les quatre autres suivent facteurStrict de donnees/logos-constructeurs.json, qui égalise leurs hauteurs de lettre. À un rayon r, la capitale de chacun vaut donc 0,098 x r (Celestron : 49 px de lettre pour 500 d'encre). Les trois bornes sont mesurées, pas choisies : plancher 7,25rem = 116 px, à 390 de large. Capitales à 11,4 px (seuil 11). Corde entre deux postes voisins 2 r sin 36° = 136,4 px, pour un logo le plus large de 1,0547 r = 122,3 px plus 8 px d'air = 130,3 : aucun chevauchement. Emprise 2 r + 122,3 = 354,3 px dans 390 : elle déborde la colonne de contenu (345 px) de 5 px de chaque côté, dans la marge, et la page ne défile pas. À 7rem la capitale tomberait à 10,98 px : sous le seuil. pente 22vw : elle décolle du plancher à 527 px et touche le plafond à 727 px, avant la tablette. plafond 10rem = 160 px : la base de la planche retenue au relevé des logos (src/assets/constructeurs/_controle/ planche-retenue-nuit-et-ciel.png, rangée « base 160 px ») et la largeur à laquelle les dérivés WebP sont taillés en densité 1. Au-delà, ZWO dépasserait les 89 px que son seul fichier officiel autorise à la densité 2. */ --t-ronde: 60s; --r-ronde: clamp(7.25rem, 22vw, 10rem); /* --- L'ENTRÉE EN TROIS TEMPS : DÉROGATION NOMMÉE AU BARÈME, 14/09/2026 --- Demande client du 14/09/2026, carnet §2.1, piste 1 : « le logo est frappé par des étoiles qui s'accélèrent de plus en plus, et finit sur l'éclipse totale ». Une séquence de 3 000 ms, jouée UNE FOIS PAR SESSION, et rien sous prefers-reduced-motion. Le barème plafonne à 560 ms parce qu'il décrit des transitions d'interface ; ceci est une partition, jouée une fois, et ses durées sont écrites ICI, toutes, pour que composants.css §9 et le script de scène (inc/pied.php) n'en portent aucune : le script les lit par getComputedStyle, il ne recopie pas 3000. LES TROIS TEMPS, ET LEURS BORNES (la partition du lot d'images) : temps 1 l'approche et le choc 0 -> --entree-t1-fin (1 600) temps 2 les éclats --entree-t2-debut -> -fin (1 450 -> 2 350) temps 3 le passage du disque --entree-t3-debut -> fin (2 250 -> 3 000) (il passe, freine, s'arrête sur le sceau, tient, puis s'efface) Les temps se recouvrent, c'est voulu : les éclats naissent pendant que les dernières étoiles frappent, le disque part pendant que les éclats s'éteignent. LA CADENCE DU TEMPS 1, ET L'ARITHMÉTIQUE QUI LA TIENT. Quatorze étoiles partent à --entree-cadence l'une de l'autre (le brief donne 60 à 90 ms ; 70 est retenu), et les trois dernières à --entree-rafale : départs 0, 70, ... 700, puis 740, 780, 820. Chacune vole --entree-vol = 750 ms en ease-in pur : la onzième (index 10, etoile-quatre) touche à 10 x 70 + 750 = 1 450, qui EST --entree-t2-debut, la première gerbe naît de ce choc ; la dernière touche à 820 + 750 = 1 570, sous --entree-t1-fin. Les trois chocs que le sceau encaisse (index 7, 10, 13) tombent à 1 240, 1 450 et 1 570 : espacés de plus de --entree-choc, les trois animations ne se chevauchent pas. --entree-mort est la disparition au contact, sur les 60 derniers ms du vol. LE TEMPS 2 : la gerbe pousse en --entree-gerbe-pousse puis s'éteint en --entree-gerbe-eteint ; brisures et étincelles volent --entree-eclat-vol en décélérant. Le dernier choc est à 1 570 : 1 570 + 700 = 2 270, sous --entree-t2-fin. LE TEMPS 3, RÉÉCRIT LE 15/09/2026, ET POURQUOI. Les trois nombres du brief du 14/09 sont incompatibles, c'est mesuré : un disque qui traverse de -85vw à +38vw en 750 ms passe sur le sceau à 1,6 px par milliseconde, et la couverture totale n'a duré que 12 ms (fuite du sceau hors disque : 100 % à 2 700, 57,5 % à 2 750, 0,089 % à 2 795, 0 à 2 805, 11,5 % à 2 820, 64,1 % à 2 850), pendant que le fondu du calque, lui, courait sur 200 ms : l'éclipse totale, l'image que le client demande en dernier, se voyait à 13 % d'opacité. Arbitrage du 15/09 : LE DISQUE FREINE ET S'ARRÊTE SUR LE SCEAU. Il part à --entree-t3-debut, court --entree-t3-course en --entree-courbe-eclat (la même décélération que les éclats : l'énergie se dépense) et s'arrête centré sur le sceau à --entree-t3-arret. Il y TIENT --entree-t3-tenue, à pleine opacité : c'est pendant cette tenue que le FOND du calque et le SCEAU s'effacent, et pas le disque, donc la page se découvre AUTOUR d'un disque noir qui ne bouge plus. Le disque seul s'efface ensuite en --entree-eclipse-fin, et le calque est retiré à --entree-duree. 2 250 départ | 2 550 arrêt centré | 2 850 fin de tenue | 3 000 retrait L'arithmétique est tenue par calc() et non par des nombres recopiés : --entree-t3-course est l'écart départ/arrêt, --entree-eclipse-fin est ce qui reste de --entree-duree après l'arrêt et la tenue. Trois jetons du 14/09 sont morts avec l'ancien temps 3 et ont été retirés : --entree-retrait (le fondu du calque entier n'existe plus), --entree-eclipse-a (le disque ne sort plus à droite, il s'arrête au centre) et --entree-courbe-disque (la courbe calculée pour une traversée à vitesse presque constante, sans objet pour un freinage). COUVERTURE AVANT EFFACEMENT, mesurée à la reprise : la fuite du sceau hors du disque tombe à 0 AVANT --entree-t3-arret, c'est-à-dire avant que le sceau ne commence à s'effacer ; avant cela le disque mord le sceau, qui est encore à opacité 1 : c'est le passage du cercle noir sur le logo. LES DEUX COURBES DE LA PHRASE DU CLIENT : --entree-courbe-choc ease-in PUR : la vitesse monte jusqu'au contact, « des étoiles qui s'accélèrent de plus en plus ». --entree-courbe-eclat l'inverse, les éclats DÉCÉLÈRENT : l'énergie est dépensée. LA TAILLE DU DISQUE, MESURÉE (inc/donnees/entree.json) : le disque lunaire opaque n'occupe que 77 % du sprite, donc --entree-eclipse vaut 1,30 pour que le DISQUE NOIR fasse 200 px, la taille du logo. C'est la demande du 15/09/2026, qui remplace le 1,55 d'avant : un disque de 238 px, un cinquième plus large que le logo. IL NE COUVRE PLUS TOUT LE SCEAU, et ce n'est plus nécessaire depuis que le sceau s'efface de lui-même pendant la tenue. Le tube du télescope déborde l'anneau or jusqu'à 57,9 % de la largeur du médaillon : son objectif dépasse du disque à deux heures, 1,627 % des pixels du sceau, à pleine opacité de l'arrivée (2 550 ms) au début du fondu, 0,127 à 2 700, nul à 2 850. Fuite mesurée aux autres échelles : 135 % 1,147 % ; 140 % 0,691 % ; 145 % 0,289 % ; 150 % 0,014 % ; 155 % 0,000 %. Le sprite de 640 px, rendu à la densité 2,46, couvre au plus un médaillon de 246 px : --entree-medaillon plafonne à 200 px, et son plancher de 132 px est la taille de l'ancien rideau, sceau(132). Les huit sprites (48 800 octets) sont rendus à la moitié de leur taille native, jamais plus. */ --entree-duree: 3000ms; --entree-t1-fin: 1600ms; --entree-t2-debut: 1450ms; --entree-t2-fin: 2350ms; --entree-t3-debut: 2250ms; /* le disque part hors champ, à gauche */ --entree-t3-arret: 2550ms; /* il s'arrête, centré sur le sceau */ --entree-t3-course: calc(var(--entree-t3-arret) - var(--entree-t3-debut)); /* 300 ms */ --entree-t3-tenue: 300ms; /* il tient, opaque ; fond et sceau s'effacent */ --entree-eclipse-fin: calc(var(--entree-duree) - var(--entree-t3-arret) - var(--entree-t3-tenue)); /* 150 ms */ --entree-cadence: 70ms; /* entre deux départs d'étoile (brief : 60 à 90) */ --entree-rafale: 40ms; /* les trois derniers départs */ --entree-vol: 750ms; /* le vol d'une étoile, du bord au centre */ --entree-choc: 90ms; /* le sceau encaisse : 1 -> .985 -> 1.008 -> 1 */ --entree-mort: 60ms; /* l'étoile s'éteint au contact */ --entree-gerbe-pousse: 120ms; /* la gerbe pousse, scaleX .2 -> 1 */ --entree-gerbe-eteint: 180ms; /* puis s'éteint */ --entree-eclat-vol: 700ms; /* brisures et étincelles, 40 à 140 px */ --entree-courbe-choc: cubic-bezier(.55, 0, 1, 1); --entree-courbe-eclat: cubic-bezier(.1, .7, .3, 1); --entree-medaillon: clamp(132px, 24vw, 200px); --entree-eclipse: 1.30; /* 130 % : le disque noir fait la taille du logo */ --entree-eclipse-de: -85vw; /* d'où part le disque : hors champ, à gauche */ /* --- Focus ------------------------------------------------------------ */ --focus-couleur: var(--lampe-haute); --focus-l: 2px; --focus-o: 3px; color-scheme: dark; } /* ========================================================================= ALIAS DE TRANSITION — À SUPPRIMER Les 61 pages ont été écrites sur le vocabulaire de la direction précédente (« le temps de pose », accent braise). Elles sont reprises page par page. D'ici là ces alias les branchent sur la palette arbitrée, pour qu'aucune page ne serve une couleur invalide ni une braise dans le chrome. Aucune règle NOUVELLE ne doit utiliser un nom de cette liste. ========================================================================= */ :root { --fond: var(--nuit); --fond-2: var(--ciel); --nuit-2: var(--ciel); --surface: var(--ciel); --carte: var(--ciel); --carte-haute: var(--filet); --texte-2: var(--champ); --cendre: var(--champ); --lait: var(--texte); --filet-fort: var(--filet-haut); --accent: var(--lampe); --accent-texte: var(--lampe); --sur-accent: var(--nuit); --braise: var(--lampe); /* loi n° 1 : plus de braise en chrome */ --braise-clair: var(--lampe-haute); --braise-sombre:var(--lampe-nuit); --braise-o12: color-mix(in srgb, var(--lampe) 12%, transparent); --braise-o20: color-mix(in srgb, var(--lampe) 20%, transparent); --braise-o30: var(--halo); --lait-o10: var(--filet); --lait-o20: var(--filet-haut); --t-hero: var(--d-display); --t-h1: var(--d-display); --t-h2: var(--d-h2); --t-h3: var(--d-h3); --t-h4: var(--d-h4); --t-corps: var(--d-corps); --t-petit: var(--d-petit); --t-data: var(--d-mono); --t-brow: var(--d-mono); --d-1: var(--t-micro); --d-2: var(--t-ui); --d-3: var(--t-panneau); --d-4: var(--t-pose); --d-5: var(--t-revele); --courbe-2: var(--courbe); --ombre-aura: var(--ombre-carte); --ombre-glow: var(--ombre-carte); } /* Loi n° 3 : aucune surface claire, nulle part. Les enveloppes de thème clair de la direction précédente sont neutralisées, pas supprimées : une page qui porte encore .t-clair reste lisible, en nuit. */ .t-clair, .t-braise { color-scheme: dark; } .t-braise { --fond: var(--lampe-nuit); --fond-2: var(--lampe-nuit); }