/* =========================================================================== DIAPORAMA DES CLASSEMENTS — surcouche plein ecran =========================================================================== Destination : l'ecran du lounge. On le regarde de loin, debout, sans souris. Trois consequences qui expliquent tout ce fichier : • les tailles sont en vmin, pas en px — le meme fichier doit tenir sur un televiseur de 55 pouces et sur le portable de l'accueil ; • rien n'est cliquable A L'INTERIEUR, parce que tout l'ecran est un bouton de sortie : un visiteur qui touche l'ecran doit revenir au menu, pas declencher autre chose ; • aucune couleur n'est ecrite en dur. Tout passe par les jetons du theme actif, donc l'Alpine Race Lounge herite du diaporama sans une ligne de plus (marques/alpine-race-lounge/alpine.css redefinit ces memes jetons). =========================================================================== */ /* --------------------------------------------------------------------------- 1) Le bouton — volontairement efface --------------------------------------------------------------------------- Il vit dans l'en-tete de l'accueil, a cote d'entrees de navigation qui, elles, s'adressent aux visiteurs. Celui-ci s'adresse a l'equipe : il doit etre trouvable sans etre propose. D'ou l'icone seule, sans libelle, a 35 % d'opacite — et le libelle qui n'apparait qu'au survol et au clavier. --------------------------------------------------------------------------- */ .diapo-btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid transparent; border-radius: var(--radius-pill); background: none; color: var(--txt-mute); cursor: pointer; opacity: .35; transition: opacity .2s, color .2s, border-color .2s, background .2s; } .diapo-btn:hover, .diapo-btn:focus-visible { opacity: 1; color: var(--gold); border-color: var(--line-strong); background: var(--gold-dim); } .diapo-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* Le libelle est present dans le balisage — donc lu par les lecteurs d'ecran et par la recherche du navigateur — mais reduit a rien tant qu'on ne le sollicite pas. `max-width` s'anime, `display:none` ne s'animerait pas. */ .diapo-btn .diapo-btn-txt { max-width: 0; overflow: hidden; white-space: nowrap; font-family: var(--f-tech), monospace; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; transition: max-width .28s cubic-bezier(.16, 1, .3, 1); } .diapo-btn:hover .diapo-btn-txt, .diapo-btn:focus-visible .diapo-btn-txt { max-width: 160px; } /* Au doigt : pas de survol possible, donc surface de frappe confortable et opacite relevee -- sinon le bouton resterait introuvable au toucher. Sous 720px le lanceur est deja cache avec .head-right (voir noyau/vitrine.css) ; cette regle sert donc les tablettes et les ecrans tactiles de 720px et plus, pas le telephone. */ @media (pointer: coarse) { .diapo-btn { min-height: 40px; min-width: 40px; justify-content: center; opacity: .5; } } /* --------------------------------------------------------------------------- 2) La surcouche, et la disposition permanente --------------------------------------------------------------------------- TOUT EST POSE EN POURCENTAGES DE LA COUCHE, et c'est ce qui remplace le modele en colonne du lot precedent. Les cinq blocs ne se poussent plus les uns les autres : chacun occupe une place declaree, releve sur le croquis. bloc gauche haut largeur hauteur carte du circuit 65 % 5 % 31 % 14 % trace 65 % 19 % 31 % 44,5 % classement 3 % 58 % 59 % 39 % pied 65 % — 31 % — (cale en bas, 3 %) Le canvas, lui, occupe TOUTE la couche, en fond. POURQUOI DES POURCENTAGES ET NON DES vh/vw : la couche est `position: fixed; inset: 0`, donc son pourcentage EST le pourcentage de fenetre — mais il le reste si un jour elle cessait de l'etre. Les TAILLES DE TEXTE, elles, continuent de suivre la hauteur (voir plus bas) : ce sont deux questions differentes, et les melanger est ce qui avait fait deborder la premiere version en vmin. CE QUE LA DISPOSITION DONNE SUR UN MUR DE 1 920 x 1 080, en pixels CSS — calcule le 30 aout 2026, meme perimetre que le pave de geometrie de noyau/diaporama.js : carte x 1248 -> 1843 y 54 -> 205 trace x 1248 -> 1843 y 205 -> 686 classement x 58 -> 1190 y 626 -> 1048 le disque centre (600 ; 420), rayon 600,5 D'ou les deux faits qui commandent tout le reste : le filet part de (815 ; 260), sort du disque et rejoint le bord gauche de la carte SANS croiser ni le classement ni le trace ; et 67,7 % de la surface du classement est posee SUR le disque — la majorite du bloc, pas une bordure. Le panneau du classement est donc OPAQUE, et non un voile. --------------------------------------------------------------------------- */ #diapo { position: fixed; inset: 0; z-index: 99998; /* sous #vmodal (99999) : une decision staff prime */ display: none; overflow: hidden; cursor: pointer; /* tout l'ecran ferme : le pointeur doit le dire partout */ background: var(--bg); opacity: 0; transition: opacity .35s ease; /* CHAQUE TAILLE EST BORNEE PAR LA HAUTEUR ET PAR LA LARGEUR, ET C'EST LA PLUS PETITE DES DEUX QUI SORT. Chaque taille s'ecrit en trois termes : clamp( plancher , min( part de HAUTEUR , part de LARGEUR ) , plafond ) ^ ^ ^ ^ reste lisible borne verticale borne horizontale tres grand sur un mobile ecran LEQUEL DES DEUX COMMANDE DEPEND DU FORMAT, et le dire est tout le point de ce paragraphe. Pour chaque taille il existe un rapport largeur/hauteur de BASCULE, egal au quotient de ses deux coefficients : au-dessus la hauteur commande, au-dessous la largeur. LA REFERENCE EST LE MUR DU LOUNGE, 1 920 x 1 080, soit un rapport de 1,778 : --t-titre 5,2vh / 3,4vw bascule a 1,529 hauteur 56,2 px --t-etiq 1,9vh / 1,5vw bascule a 1,267 hauteur 20,5 px --t-ligne 3,1vh / 1,2vw bascule a 2,583 LARGEUR 23,0 px --t-detail 1,6vh / 1,2vw bascule a 1,333 hauteur 17,3 px --t-ligne EST DONC L'EXCEPTION, ET ELLE EST VOULUE. Sa bascule tombe a 2,583, c'est-a-dire au-dessus de tout format d'ecran courant : c'est la LARGEUR qui pose la police du classement partout, et pas seulement sur une fenetre etroite. Une version de ce paragraphe annoncait que toutes les tailles derivaient de la hauteur et rangeait le terme de largeur en « fenetre etroite » ; c'etait faux pour celle-la, et le corps du texte ci-dessous le disait deja en toutes lettres. ET LES TERMES DE LARGEUR SONT CALIBRES PAR LA MESURE, pas au juge. Le motif : une colonne de classement disposait d'environ 564 px sur un 1 920 x 1 080 au lot precedent ; la bande basse n'en donne plus que 354 (1 132,8 px de panneau, moins deux gouttieres, divises par trois). C'est 63 % de la largeur d'avant, et c'est le NOM DU PILOTE qui payait la difference — il l'avait deja payee une fois, quand trois classements se sont partages l'ecran. --t-ligne VAUT POURTANT 1,2vw, soit 23,0 px, contre 16,1 px quand la ligne tenait sur une seule rangee. DEUX CHANGEMENTS l'ont rendu, et aucun n'a retire d'information : - le PRENOM s'abrege a l'affichage (voir abreger() dans diaporama.js) ; - l'ECART EST DESCENDU SOUS LE NOM, en seconde rangee. Il elargissait la piste du chrono, et cette largeur se prenait sur le nom. On lisait cela comme un arbitrage entre garder l'ecart et lire le nom ; c'en etait pas un. La place perdue etait VERTICALE — une ligne fait environ 70 px de haut pour 23 px de texte — et il y avait de quoi loger une rangee de plus sans rien supprimer. Voir .diapo-row. LES DEUX CONTRAINTES SE REFERMENT AU MEME ENDROIT, et c'est le fait a retenir avant de toucher a ces valeurs. La largeur n'a PAS cesse d'etre limitante — une version de ce commentaire l'a ecrit, et c'etait faux. MESURE sur les 34 noms du cycle : le dernier reglage qui tient est 24,96 px, le premier nom coupe arrive a 25,15 px, et a 26,88 px CINQ noms sur 34 sont coupes, le pire de 24,5 px. La hauteur, elle, se ferme vers 25,0 px. Les deux butent donc a un pas l'une de l'autre, et c'est ce qui rend le choix ci-dessous etroit des deux cotes. CE QUE LE REGLAGE DONNE AILLEURS QU'AU MUR, ET POURQUOI ON NE REND PAS LA MAIN A LA HAUTEUR. Sur un format plus carre la hauteur a du mou : a 1 280 x 960, --t-ligne tombe a 15,36 px la ou son terme 3,1vh en autoriserait 29,76. La tentation est de laisser la hauteur reprendre la main quand elle est large ; LA MESURE L'INTERDIT. La piste du nom vaut colonne moins 38 px de chrome fixe — --l-pos, deux --l-creux, deux --l-marge, tous trois COLLES A LEUR PLANCHER a tout format usuel, donc qui ne retrecissent PAS avec la fenetre — moins les 6,1em du chrono. Elle se ferme donc PLUS VITE que la largeur : format --t-ligne plus grosse police sans nom coupe marge 1 920 x 1 080 23,04 px 24,91 px 1,87 px 1 600 x 900 19,20 px 20,26 px 1,06 px 1 280 x 960 15,36 px 15,61 px 0,25 px A 1 280 de large il ne reste que 0,25 px de police avant que « E. Di Cristofaro » soit coupe. Le mou VERTICAL n'est donc pas depensable : il n'y a pas de place HORIZONTALE en face. Rendre la main a la hauteur y doublerait presque la police et couperait des noms sur toutes les lignes. (D'OU VIENT CHAQUE COLONNE, parce que les deux n'ont pas le meme statut. La colonne --t-ligne est MESUREE au navigateur, sur cette feuille, taille de vue imposee a chacun des trois formats : 23,04 / 19,20 / 15,36 px, en lisant font-size sur .diapo-nom apres document.fonts.ready. La colonne du plafond, elle, est DERIVEE — piste = colonne - 38 - 6,1 x police, largeur du nom proportionnelle a la police — et le modele est calibre sur les deux mesures du balayage ci-dessous : il rend +23,7 px de marge et 24,91 px de dernier reglage tenant a 1 920 x 1 080, la ou le balayage a mesure +23,8 et 24,96.) CE QUE CE FORMAT COUTE VRAIMENT est une police sous les 16,1 px que ce fichier appelle lui-meme « lisible et inconfortable », avec de la hauteur inutilisee a cote. Le remede n'est pas la police, c'est l'EMPILEMENT, qui ne se declenche aujourd'hui qu'au-dessous de 1 000 px de large. C'est un manque CONNU et ECRIT, pas un reglage a corriger ici : le mur vise fait 1 920 de large. */ --t-titre: clamp(22px, min(5.2vh, 3.4vw), 76px); /* nom du circuit */ --t-etiq: clamp(10px, min(1.9vh, 1.5vw), 22px); /* discipline, pays, carte du groupe */ --t-ligne: clamp(12px, min(3.1vh, 1.2vw), 40px); /* rang, pilote, chrono */ --t-detail: clamp(9px, min(1.6vh, 1.2vw), 18px); /* « Aucun chrono », note */ /* LA RESPIRATION PAIE LA SECONDE RANGEE, et c'est le seul poste qui l'a payee. Une ligne porte desormais DEUX lignes de texte — le nom et son ecart — donc le bloc a grandi de moitie a police egale. La marge interieure de chaque ligne se resserre d'autant : c'est de l'air qu'on rend au TEXTE, qui est ce qu'on vient lire, et la seconde rangee en apporte deja par elle-meme. MESURE sur le PIRE des neuf ecrans, pas sur un seul : a 1,2vw le bloc demande 356 px des 381 que le panneau offre, il reste donc 25 px. Assez pour qu'une police de marque plus haute ne declenche pas ajuster() a chaque ecran — verifie sur les deux marques. */ --e-ligne: min(.35vh, 1.8vw); /* respiration d'une ligne */ /* Les trois mesures horizontales de la ligne, regroupees ici parce qu'elles se relisent ensemble et que la media query « une colonne » les rend toutes les trois d'un coup. Toutes les trois ont ete resserrees avec --t-ligne : c'est leur somme qui decide de ce qui reste au nom du pilote. */ --l-pos: clamp(16px, min(3.4vh, .62vw), 64px); /* colonne du rang */ --l-creux: clamp(5px, min(1.2vh, .24vw), 26px); /* gouttiere de la ligne */ --l-marge: clamp(6px, min(1.3vh, .3vw), 22px); /* retrait gauche/droite */ /* LA PISTE DU CHRONO EST BORNEE, ET ELLE NE PORTE PLUS QUE LE CHRONO. --------------------------------------------------------------------------- Elle valait `auto`, donc elle se dimensionnait SUR LE CONTENU DE SA PROPRE LIGNE : la colonne du nom, en `1fr`, recevait ce qui restait et VARIAIT d'une ligne a l'autre — mesure, 145 a 165 px sur un meme ecran. Un balayage conduit sur UN ecran ne pouvait donc rien promettre sur les autres, et « Alexandre Rosenberg » ressortait coupe sur Nordschleife et sur Cota alors qu'il passait sur Daytona. CE QUI VARIAIT ETAIT L'ECART, pas le chrono. L'ecart a depuis quitte cette cellule pour la seconde rangee — voir .diapo-row — et la piste n'a plus a porter que le temps, qui s'ecrit toujours M:SS.mmm en chiffres a chasse fixe. Elle est donc exactement constante, et le balayage redevient une promesse. EN `em`, ET IL A FALLU TROIS TENTATIVES POUR L'ECRIRE JUSTE. Les deux premieres sont le meme piege, sous deux noms : `13,6ch` puis `10em` se resolvent contre la police de .diapo-row — qui n'en avait pas, donc les 16 px du document — et non contre celle de la cellule. La piste rendait 160 px au lieu de 240 et le chrono debordait sur les quinze lignes. .diapo-row porte desormais sa police, ce qui rend les deux unites justes. LA TROISIEME ETAIT UNE ERREUR DE MESURE, ET ELLE MERITE D'ETRE DITE : une sonde avait releve 2,984em pour huit glyphes. Elle avait copie la police de la cellule AVANT que Nulshock ne soit appliquee, et mesurait donc la police de repli, presque deux fois plus etroite. La piste posee a 3,5em laissait 52 px de chrono dehors. TOUTE MESURE DE CHASSE ICI DOIT ATTENDRE `document.fonts.ready` — c'est le meme piege que pour la largeur des noms, et il a coute deux fois. MESURE DU 30 AOUT 2026, piste laissee libre et relevee sur les NEUF ecrans du cycle, polices chargees, police de ligne a 23,04 px : « 5:00.445 » 133,4 px 5,792em le plus large du cycle reel « 12:34.567 » 134,5 px 5,839em un tour de plus de dix minutes Les deux se tiennent : Nulshock a des chiffres a chasse fixe, et le caractere de plus est un deux-points, etroit. 6,1em COUVRE LES DEUX avec environ 6 px de reserve. Cette piste est prise DIRECTEMENT sur le nom du pilote : ne l'elargir qu'avec une mesure, et jamais sans avoir attendu les polices. */ --l-chrono: 6.1em; --e-panneau: min(1.8vh, 2.2vw); /* marge interieure des blocs */ } #diapo.on { display: block; } #diapo.shown { opacity: 1; } /* --- le fond, ET IL A CHANGE DE REGIME AVEC LA MISE EN PAGE ---------------- Le globe n'est plus une vignette de 113 px qui prend l'ecran le temps d'un vol : il occupe la couche EN PERMANENCE, et les deux couches decoratives se peignent SUR le fond dont ses cotes doivent se detacher. Ce qui n'etait vrai que pendant le vol l'est donc devenu tout le temps. LE LOT PRECEDENT AVAIT DEJA MESURE CE QUE CES COUCHES COUTENT, et il avait du poser une classe `#diapo.vol` pour les eteindre le temps du vol. Sur le theme Alpine, la trame SEULE faisait passer le pire pixel du disque de 3,029:1 a 2,997:1 — sous le seuil de 3:1 d'un element graphique non textuel. CETTE CLASSE DISPARAIT, ET SES VALEURS DESCENDENT DANS LES REGLES DE BASE. C'est le meme reglage, applique tout le temps parce que le globe est la tout le temps — pas un affaiblissement decide au gout. Une surcharge temporaire pour un etat qui n'existe plus serait du code mort. ET LA DERIVE NE PERD PAS SON EMPLOI. Elle existait pour prouver qu'un ecran fixe n'a pas plante ; c'est desormais le globe qui s'oriente toutes les vingt secondes et le point qui parcourt le trace qui le disent, bien mieux qu'un degrade. Elle redevient ce qu'elle aurait toujours du etre a cet endroit : une profondeur, pas un signe de vie. AGIR SUR LE FOND PLUTOT QUE SUR L'ENCRE, et c'est ce qui rend ce choix preferable a un alpha plus fort : monter les cotes chargerait l'or d'e-motion sur --bg, ou le globe commence a disputer la vedette au classement — et c'est le classement qu'on vient lire. Ici l'encre ne bouge pas, la promesse d'heritage des marques non plus, et les deux themes gagnent. ------------------------------------------------------------- */ #diapo::before { content: ""; position: absolute; inset: -25%; background: radial-gradient(46% 52% at 22% 28%, rgba(var(--brand-rgb), .08), transparent 62%), radial-gradient(38% 44% at 80% 76%, rgba(var(--brand-rgb), .05), transparent 58%); animation: diapo-derive 38s ease-in-out infinite alternate; } /* La trame diagonale de l'accueil : c'est elle qui rattache l'ecran au reste du site. Elle reste, a une opacite qui ne mange plus le contraste du globe. */ #diapo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, .015) 0 1px, transparent 1px 9px); opacity: .22; } @keyframes diapo-derive { from { transform: translate3d(-3%, -2%, 0) scale(1.04); } to { transform: translate3d(3%, 2%, 0) scale(1.12); } } /* --------------------------------------------------------------------------- 3) Le globe, en fond de couche --------------------------------------------------------------------------- UN DISQUE PLUS GRAND QUE LA FENETRE N'EST HAUTE : il affleure le bord gauche et deborde par le HAUT, jamais a droite ni en bas. La geometrie n'est pas ici : elle est en options de creer(), dans noyau/diaporama.js, qui la porte avec sa mesure et avec la raison pour laquelle deux bords seulement sont concernes. Ce bloc ne fait que donner au canvas toute la couche et le mettre au fond. LA BOITE AUTOUR DU CANVAS N'EST PAS DE L'EMBALLAGE. La sonde de couleurs de noyau/globe-rendu.js se pose sur le PARENT du canvas et y lit les deux jetons d'encre ci-dessous : poses sur le canvas lui-meme, elle ne les verrait pas — elle n'est pas son enfant. C'est la seule raison qui reste a cette boite, l'ancienne (porter un pseudo-element de repere, qu'un element REMPLACE ne rend pas) ayant disparu avec le repere : l'epingle est desormais un SVG, et elle se pose la ou le circuit est vraiment. L'ENCRE DU GLOBE EST RELEVEE ICI, ET SEULEMENT ICI. --------------------------------------------------------------------------- Le globe de emotion-globe.html se regarde a cinquante centimetres ; celui-ci se regarde a trois metres et occupe l'ecran entier. Les memes valeurs ne peuvent pas servir les deux. DEUX MARQUES, DEUX LUMINANCES, UNE SEULE ENCRE. L'encre est un alpha pose sur var(--brand-rgb), et les deux marques livrees n'ont pas la meme couleur : l'or e-motion (197, 166, 79) sur #0a0a0b, le bleu Alpine (78, 147, 214) sur #0B0D10. A alpha egal, le bleu contraste MOINS, et c'est Alpine qui commande — le theme s'appelle « race lounge », et c'est justement le mur qu'on vise. UNE ENCRE COMMUNE PLUTOT QU'UNE SURCHARGE PAR MARQUE, et c'est un choix : ce fichier s'ouvre en promettant que l'Alpine Race Lounge herite du diaporama « sans une ligne de plus ». Une valeur par marque tiendrait aussi, mais elle ferait dependre la lisibilite du mur de ce que la PROCHAINE marque pense a redefinir. tests/globe-rendu.test.mjs boucle donc sur les feuilles trouvees dans le dossier marques et exige 3:1 pour toutes — la prochaine marque tombera dans ce test avant de tomber sur un mur. LE LIMBE GARDE SON AVANCE SUR LES COTES, comme dans la page de detail (.35 contre .16) : c'est lui qui dit le bord du monde, et deux traits de meme encre feraient de la silhouette une cote parmi les autres. --------------------------------------------------------------------------- */ .diapo-globe { position: absolute; inset: 0; z-index: 0; pointer-events: none; /* tout l'ecran ferme deja : rien a intercepter */ /* Lus par la sonde de noyau/globe-rendu.js, qui se pose sur le PARENT du canvas — c'est-a-dire cette boite. Poses ailleurs (sur :root, sur #diapo) ils repeindraient aussi le globe de la page de detail. */ --globe-cote: rgba(var(--brand-rgb), .65); --globe-limbe: rgba(var(--brand-rgb), .80); } .diapo-globe canvas { display: block; width: 100%; height: 100%; } /* --------------------------------------------------------------------------- 4) L'epingle et son filet --------------------------------------------------------------------------- Le circuit courant vient sous une ANCRE FIXE de l'ecran, pas au centre du disque : c'est ce qui rend le filet stable. Un point qui se poserait ailleurs a chaque circuit ferait danser la ligne, et c'est exactement ce qu'on remarque de loin. LE SVG COUVRE LA COUCHE ET NE PORTE PAS DE viewBox : sans viewBox, une unite utilisateur vaut un pixel CSS, ce qui est justement l'unite dans laquelle marqueurs() rend ses positions. Aucune conversion, donc aucune occasion de se tromper d'echelle. Les COORDONNEES sont ecrites par noyau/diaporama.js, les COULEURS et les epaisseurs sont ici. Les rayons des deux cercles font exception et sont calcules en JavaScript : l'attribut `r` n'est pilotable par feuille de style que sur les moteurs recents, et la destination de cet ecran est un navigateur de televiseur. --------------------------------------------------------------------------- */ /* `width`/`height` A 100 % ET PAS SEULEMENT `inset: 0` — un est un element REMPLACE, et `inset` ne l'etire pas : sa boite gardait la taille intrinseque par defaut, 300 x 150. L'epingle a (815 ; 260) et l'arrivee du filet a (1248 ; 173) tombaient donc HORS de cette boite et ne se peignaient que par la grace d'`overflow: visible`. Un moteur de televiseur qui rognerait la racine SVG les ferait disparaitre toutes les deux d'un coup. Avec les deux dimensions posees, la boite couvre la couche et le rendu ne depend plus du debordement. `overflow: visible` reste, pour le halo des cercles. */ .diapo-filet { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; pointer-events: none; } /* Posee par masquerFilet() : marqueur non `vu`, circuit absent de lieux.js, ou diaporama ferme. `display` et non `opacity` — un filet a opacite nulle resterait un objet dont la position, elle, continuerait de mentir. */ .diapo-filet.off { display: none; } .diapo-filet-trait { stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; opacity: .55; } /* Anneau creux et non pastille pleine : la cote que l'epingle designe doit rester visible dessous. Le coeur, lui, dit le lieu exact. */ .diapo-epingle-anneau { fill: none; stroke: var(--gold); stroke-width: 2; filter: drop-shadow(0 0 6px rgba(var(--brand-rgb), .9)); } .diapo-epingle-coeur { fill: var(--gold); } /* --------------------------------------------------------------------------- 5) Les cinq blocs --------------------------------------------------------------------------- LE FOND SE PREND SUR --panel, QUI EST DEJA OPAQUE DES DEUX COTES — #151517 sur e-motion, #14181C sur alpine. L'opacite vient donc gratuitement, et il n'y a rien a inventer : c'est le jeton de panneau de la marque, celui que tout le reste du site utilise. ET ELLE EST NECESSAIRE AUX TROIS, PAS SEULEMENT AU CLASSEMENT. Sur un 1 920 x 1 080 le disque s'arrete a x = 1 200 et ne touche ni la carte (x >= 1 248) ni le trace (x >= 1 248) ; mais le rayon suit le PLUS PETIT cote de la fenetre, si bien qu'une fenetre carree rapproche le bord droit du disque des blocs de droite — sur 1 080 x 1 080, il atteint x = 938 quand la carte commence a 702. Un fond opaque sur les trois rend la question sans objet a toute taille de mur, au lieu de la rouvrir a chaque format. --------------------------------------------------------------------------- */ .diapo-carte, .diapo-trace-boite, .diapo-classement { position: absolute; z-index: 2; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--e-panneau); } /* LA CARTE ET LE TRACE SONT SOUDES EN UNE SEULE FICHE — deux noeuds, parce que peindre() les reecrit separement, un seul cadre a l'oeil : la carte perd sa bordure basse et ses angles bas, le trace sa bordure haute et ses angles hauts, et ils partagent deja le meme fond opaque. La carte passe de 22 % a 14 % de hauteur : trois lignes n'ont jamais eu besoin de 240 px, et le trace prend la place rendue (44,5 % au lieu de 37). Le contenu de la carte s'appuie en bas, contre le trace qu'il nomme. LES CHIFFRES SONT MESURES A LA TACHE 5 DU PLAN DU 4 SEPT. 2026 — voir tools/mesurer-mur.mjs, et la table dans le commentaire de .diapo-groupe. */ .diapo-carte { left: 65%; top: 5%; width: 31%; height: 14%; display: flex; flex-direction: column; justify-content: flex-end; gap: min(.6vh, .8vw); overflow: hidden; border-bottom: none; border-radius: var(--radius-sm) var(--radius-sm) 0 0; padding-bottom: 0; } .diapo-trace-boite { left: 65%; top: 19%; width: 31%; height: 44.5%; display: flex; align-items: center; justify-content: center; border-top: none; border-radius: 0 0 var(--radius-sm) var(--radius-sm); } .diapo-classement { left: 3%; top: 58%; width: 59%; height: 39%; overflow: hidden; } /* LE PIED EST UN SOCLE, PAS UN CADRE — meme fond opaque que les trois blocs, mais sans bordure : il porte les neuf points de la pagination et la consigne de sortie, pas un contenu qu'on encadre. Ni mention de marque ni compteur « 1 / 9 » depuis le lot du 4 sept. 2026 : la marque signe en haut a gauche (.diapo-marque), et le compte se lit sur les points. ET IL LUI FAUT CE FOND, CE QUI N'ETAIT PAS EVIDENT. Une premiere version le laissait transparent, en se disant que la zone sous le trace est hors du disque. C'EST VRAI SUR UN MUR 16:9 ET FAUX EN DESSOUS. Le bord droit du disque tombe a centreX x L + rayonRatio x min(L, H), soit 0,3125 L + 0,556 min(L, H) ; il atteint le pied (a 65 % de L) des que min(L, H) / L > 0,607, c'est-a-dire des que le rapport de forme descend sous 1,65:1. MESURE du 30 aout 2026 : 1920 x 1080 (1,78:1) bord droit 1200 le pied est libre 1600 x 900 (1,78:1) bord droit 1000 le pied est libre 3840 x 2160 (1,78:1) bord droit 2401 le pied est libre 1200 x 1000 (1,20:1) bord droit 931 LE DISQUE EST SOUS LE PIED 1024 x 1024 (1,00:1) bord droit 889 LE DISQUE EST SOUS LE PIED Un 1280 x 960 — du 4:3, et il en reste sur les postes d'accueil — tombe donc du mauvais cote. Le texte du pied est dim et petit : pose sur le graticule, il devient illisible sans que personne ne le signale. */ .diapo-foot { position: absolute; left: 65%; bottom: 3%; width: 31%; z-index: 2; background: var(--panel); border-radius: var(--radius-sm); padding: var(--e-panneau); display: flex; flex-direction: column; align-items: flex-end; gap: min(.6vh, .8vw); text-align: right; font-family: var(--f-tech), monospace; font-size: clamp(9px, min(1.5vh, 1.1vw), 16px); /* 0,16em : l'espacement avait ete resserre pour que « Touchez l'ecran pour revenir au menu » tienne sur une ligne (mesure du 4 septembre 2026). La mention est retiree depuis le 22 septembre 2026 ; l'espacement reste, il ne coute rien aux points qui demeurent seuls dans le pied. */ letter-spacing: .16em; text-transform: uppercase; color: var(--txt-mute); } /* --------------------------------------------------------------------------- 5 bis) La signature, et la carte du groupe --------------------------------------------------------------------------- LA SIGNATURE est posee SUR le globe, en haut a gauche, la ou le disque ne porte que de l'ocean et du graticule a 1920 x 1080. C'est un logotype : exempte du critere de contraste WCAG 1.4.3, il peut aller la ou une etiquette ne pourrait pas. L'ombre portee le decolle du graticule sans lui mettre de boite. Les deux lignes a cote — la salle, « En direct » — sont courtes et grasses, et la mesure de la tache 5 verifie qu'elles ne croisent aucune cote. Le logo est un CLONE de celui de la page (voir batir() dans noyau/diaporama.js) : cette feuille ne connait aucun chemin. Le filet vertical n'apparait qu'a cote d'un logo — sans logo, un filet qui ne separe rien. `min(...vh, ...vw)` : une taille physique constante d'un format a l'autre, la plus petite des deux bornes qui sort — la regle de tout ce fichier. */ .diapo-marque { position: absolute; left: 3%; top: 4.5%; z-index: 3; display: flex; align-items: center; gap: min(1.2vh, 1.1vw); filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .8)); } .diapo-marque-logo { height: clamp(28px, min(6.4vh, 5vw), 84px); width: auto; display: block; } .diapo-marque-sep { display: none; width: 1px; height: clamp(28px, min(6.4vh, 5vw), 84px); background: linear-gradient(var(--line-strong), transparent); } .diapo-marque-logo + .diapo-marque-sep { display: block; } .diapo-marque-txt { display: flex; flex-direction: column; gap: min(.6vh, .5vw); } .diapo-marque-salle { font-family: var(--f-primary), sans-serif; font-weight: 700; font-size: clamp(11px, min(1.75vh, 1.3vw), 22px); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); } /* Le point vert NE PULSE PAS, dans aucun regime : un mur qui clignote en coin pendant trois minutes attire l'oeil la ou il n'y a rien a lire. */ .diapo-marque-direct { font-family: var(--f-tech), monospace; font-size: clamp(9px, min(1.25vh, .95vw), 16px); letter-spacing: .22em; text-transform: uppercase; color: var(--txt-dim); display: flex; align-items: center; gap: .55em; } .diapo-marque-direct::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); } /* LA CARTE DU GROUPE prend le creux que le panneau de l'ecurie occupait sous le trace, et s'y donne une vraie hauteur : 20 %, contre les 8 % du panneau. Meme cadre que la fiche au-dessus. Le contenu vient de lieux.js par peindreGroupe() ; `hidden` tant qu'il n'est pas la, et la regle [hidden] est d'auteur pour la meme raison que .diapo-clrt[hidden] plus bas : `display: flex` gagnerait sinon sur la feuille de l'agent utilisateur. LA HAUTEUR EST UN BUDGET POUR SIX CENTRES, PAS POUR LES CINQ DU JOUR, et c'est le correctif de la revue du 4 sept. 2026. C'est la SEULE zone du mur dont le contenu grandit avec la donnee — noyau/lieux.js dit lui-meme « Ajouter un centre ici l'ajoute au mur » — et `overflow: hidden` coupait en silence : a 17 %, un sixieme centre debordait aux trois formats, et les CINQ centres livres debordaient deja a 1280 x 960. tools/mesurer-mur.mjs mesure donc la carte DEUX FOIS, avec les centres livres puis avec un sixieme centre factice, et refuse un scrollHeight superieur au clientHeight. 19 % ne suffisait pas (coupe de 2 px a 1280 x 960), 20 % passe partout : c'est la plus petite valeur mesuree qui tienne. ATTENTION EN RELISANT CES CHIFFRES : `justify-content: center` fait deborder le contenu des DEUX cotes, donc un scrollHeight qui depasse de n px signale un manque reel de 2n px. Une carte a rallonger se calcule sur le double de ce que l'outil affiche. MESURE DU 4 SEPTEMBRE 2026, tools/mesurer-mur.mjs, apres la revue finale. « restant » = clientHeight - scrollHeight de la carte ; 0 = rien n'est coupe (les deux passes, cinq centres livres puis six) : 1920x1080 groupe y 718 -> 934 marge/trace 32.4 px marge/pied 41.1 px restant 5c 0 6c 0 1600x900 groupe y 599 -> 779 marge/trace 27 px marge/pied 34 px restant 5c 0 6c 0 1280x960 groupe y 638 -> 830 marge/trace 28.8 px marge/pied 19.5 px restant 5c 0 6c 0 Le 1280x960 porte en plus le serrage `@media (max-aspect-ratio: 3/2)` de .diapo-groupe-liste ci-dessous : la hauteur seule n'y suffisait pas, le pied ne laissant que 48,3 px quand il en fallait 35 de plus. */ .diapo-groupe { position: absolute; left: 65%; top: 66.5%; width: 31%; height: 20%; z-index: 2; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--e-panneau); display: flex; flex-direction: column; justify-content: center; gap: min(1.1vh, .9vw); overflow: hidden; } .diapo-groupe[hidden] { display: none; } .diapo-groupe-titre { font-family: var(--f-tech), monospace; font-size: var(--t-etiq); letter-spacing: .3em; text-transform: uppercase; color: var(--gold); } /* En flex-wrap : un sixieme centre se replie sur une ligne de plus au lieu de deborder. Les noms ne se coupent pas — un centre coupe en deux se lirait comme deux centres. */ .diapo-groupe-liste { display: flex; flex-wrap: wrap; gap: min(.6vh, .5vw) 1.6em; font-family: var(--f-body), sans-serif; font-weight: 600; font-size: calc(var(--t-etiq) * 1.25); color: var(--txt); } .diapo-groupe-centre { display: flex; align-items: center; gap: .5em; white-space: nowrap; } .diapo-groupe-drapeau { height: 1.05em; width: auto; border-radius: 2px; } /* Le centre a venir : en gris, avec son annee. Le retrait suit le champ `ouvre` de lieux.js et disparait avec lui. */ .diapo-groupe-avenir { color: var(--txt-mute); } /* LE 4:3 SERRE LA LISTE, COMME IL SERRE DEJA LA BANDE (voir le @media (max-aspect-ratio: 3/2) de .diapo-clrt-detail plus bas). MESURE, pas suppose : a 1280 x 960 la colonne ne fait que 397 px, chaque centre y prend presque toute la largeur, et les six centres de la mesure demandaient 35 px de plus que la carte n'en a — un creux que la hauteur seule ne pouvait pas payer, le pied etant a 9,9 px sous elle. Le corps resserre fait tenir deux centres courts par ligne au lieu d'un, et c'est la qu'est le gain. */ @media (max-aspect-ratio: 3/2) { .diapo-groupe-liste { font-size: calc(var(--t-etiq) * 1.05); gap: min(.6vh, .5vw) 1.2em; } } /* LES POINTS DU PIED, a la place de « 1 / 9 » : un par ecran, le courant en or. Ils se posent dans .diapo-foot, aligne a droite, et n'ont pas d'animation propre — l'entree du pied les fond deja. */ .diapo-points { display: flex; align-items: center; gap: .5em; } .diapo-points i { display: block; width: .5em; height: .5em; border-radius: 50%; background: var(--line-strong); } .diapo-points i.on { background: var(--gold); box-shadow: 0 0 6px rgba(var(--brand-rgb), .6); } /* --------------------------------------------------------------------------- 6 bis) LE PANNEAU DE L'ECURIE, ET SON LOGO --------------------------------------------------------------------------- LA PLACE. La bande vit en haut a gauche, sous la signature, sur le globe : voir le commentaire de .diapo-clrt plus bas pour la garde sur l'epingle. Elle a vecu jusqu'au 4 sept. 2026 dans la colonne de droite, sous le trace ; ce creux porte desormais la carte du groupe (section 5 bis). LE LOGO EST DESORMAIS DEDANS, PAS AU-DESSUS — CONSTAT DU CLIENT, PAS UNE AFFAIRE DE GOUT. Il a longtemps vecu en bandeau superpose : positionne en absolu par-dessus le panneau et le globe, `right: 0`, une ombre portee pour se detacher du graticule. Deux defauts s'ensuivaient — mesures, pas supposes : il debordait du bloc jusqu'au bord droit de l'ecran, la ou tous les autres blocs s'arretent a 96 %, et il pesait bien plus lourd a l'oeil que le reste du panneau. Le client a demande les deux corrections a la fois, dans le meme message : DANS le bloc, et beaucoup plus petit. Voir .diapo-clrt-logo plus bas pour la taille, et noyau/diaporama.js (batir(), peindre()) pour ce que ce deplacement simplifie cote script — le logo herite desormais du hidden du panneau, il n'a plus le sien. CE QUI DISPARAIT AVEC LE BANDEAU SUPERPOSE : l'exception WCAG 1.4.3 pour texte de logotype ne repond plus a rien, puisque le logo est maintenant sur le meme --panel opaque que le TEXTE du panneau — au meme contraste garanti que lui, donc sans besoin de l'exception. L'ombre portee n'a plus d'objet non plus : elle decollait le logo du graticule du globe, or il ne touche plus le globe du tout. LE TEXTE DU PANNEAU, LUI, N'A JAMAIS EU BESOIN DE CETTE EXCEPTION — il reste sur --panel opaque, comme les quatre autres blocs, et pour la raison deja mesuree ailleurs dans ce fichier : 1,29:1 sur une cote et 1,08:1 sur le limbe, pour un seuil AA a 4,5:1. --------------------------------------------------------------------------- */ /* UN LOGO SE RECONNAIT, IL NE SE LIT PAS — d'ou la cible, et pas une autre. PAS 40 % COMME UNE PREMIERE ESTIMATION LE SUPPOSAIT — VERIFIE SUR LE FICHIER REEL au lieu d'etre recopie : logo.webp empile « SCHUMACHER » puis, separe par une bande de 8 px sans encre, le sous-titre « CLRT » ; scanne canal alpha par rangee (seuil 128/255), le mot « SCHUMACHER » a lui seul couvre les rangees 0 a 56, soit 57 px sur 113 — 50 % de la hauteur du fichier, pas 40. */ .diapo-clrt-logo { /* ~26 px a 1920x1080 : le lettrage se reconnait, il ne s'epelle pas. Le fichier fait 9,06:1 — a 26 px de haut il en fait 235 de large, un tiers de la bande, pose AU-DESSUS du texte et non a cote (voir .diapo-clrt). Plus grand, la bande descendrait sur l'anneau de l'epingle. */ height: clamp(16px, min(2.4vh, 2.6vw), 40px); width: auto; object-fit: contain; flex: 0 0 auto; } /* LA BANDE A QUITTE LA COLONNE DE DROITE POUR LE HAUT A GAUCHE, SOUS LA SIGNATURE — composition C de la spec du 4 sept. 2026 : la parente E-MOTION / Schumacher CLRT se lit d'abord, la ou l'oeil commence. EMPILEE, PAS EN LIGNE — DECISION DU CLIENT DU 4 SEPT. 2026, SUR MESURE. La premiere forme posait le logo a gauche et le texte a sa droite. A 36 % de large (691 px a 1920x1080) le logo prenait 294 px et laissait 306 px a la ligne des dates, qui en demande 450 avec sa pastille : « EN COURS » se coupait en « EN ». Empilee — le logo, puis le detail, puis les dates — chaque ligne a toute la largeur de la bande, et le detail le plus long du calendrier (« Spa-Francorchamps - Porsche Mobil 1 Supercup », 44 caracteres) tient sur une seule ligne. C'est aussi, mot pour mot, la demande du 3 septembre : le logo, puis « Circuit - competition », puis les dates. LA GARDE SUR L'EPINGLE, ET ELLE EST MESUREE. L'epingle du circuit courant est a (815 ; 260) sur un mur de 1920 x 1080 — voir le bloc de geometrie en tete de noyau/diaporama.js — et son anneau descend jusqu'a 248 et commence a 803 en largeur. La bande doit donc finir AU-DESSUS de 248 et A GAUCHE de 803 : `top: 12 %` (130 px) et `max-width: 36 %` (691 px, donc un bord droit a 749). Empilee, elle mesure environ 108 px de haut : elle finit vers 238. C'est l'etat que tools/mesurer-mur.mjs force avant de mesurer, avec le detail le plus long. La table des trois formats est dans le commentaire ci-dessous, completee a la tache 5. PAS DE `width`, UN `max-width` : la bande prend la largeur de son contenu, et un etat court (la carte d'identite de l'ecurie, apres la saison) ne tire pas un panneau vide jusqu'a l'epingle. MESURE DU 4 SEPTEMBRE 2026, tools/mesurer-mur.mjs, apres la revue finale. L'ETAT FORCE EST LE PIRE, ET IL EST DERIVE DE LA DONNEE : le detail le plus long de LT_COURSES.manches (« Spa-Francorchamps - Porsche Mobil 1 Supercup », 44 caracteres) et la periode la plus large que periodeFr() puisse rendre, a cheval sur deux mois (« du 28 septembre au 2 octobre »), avec la plus large des trois pastilles que ecurieDuCircuit() rend (« En cours », huit caracteres contre sept et cinq pour les deux autres — et ce caractere de plus suffisait a faire passer la pastille a la ligne suivante). « restant » = clientWidth - scrollWidth de la bande ; 0 = rien n'est coupe : 1920x1080 bande y 130 -> 238 marge/anneau 10.3 px marge/droite 95.3 px marge/signature 11.9 px restant 0 1600x900 bande y 108 -> 198 marge/anneau 8.6 px marge/droite 77.6 px marge/signature 9.9 px restant 0 1280x960 bande y 115 -> 203 marge/anneau 17.3 px marge/droite 103.0 px marge/signature 10.6 px restant 0 Le 1280x960 porte le serrage `@media (max-aspect-ratio: 3/2)` plus bas — sans lui, marge/anneau y mesurait -15 px (la bande mordait l'anneau). */ .diapo-clrt { position: absolute; left: 3%; top: 12%; max-width: 36%; z-index: 2; background: var(--panel); border-left: 3px solid var(--gold); border-radius: var(--radius-sm); padding: min(1vh, 1.1vw) min(1.5vh, 1.7vw); display: flex; flex-direction: column; align-items: flex-start; gap: min(.7vh, .6vw); line-height: 1.1; text-align: left; overflow: hidden; } .diapo-clrt-corps { display: flex; flex-direction: column; align-items: flex-start; gap: min(.3vh, .3vw); min-width: 0; max-width: 100%; } /* SANS CETTE REGLE, `hidden` NE CACHE RIEN. La feuille de l'agent utilisateur pose `[hidden] { display: none }`, mais cette regle est D'ORIGINE AGENT UTILISATEUR et perd TOUJOURS face a une regle D'AUTEUR, quelle que soit sa propre specificite : l'origine se compare AVANT la specificite dans la cascade. `.diapo-clrt` pose une regle d'auteur, `display: flex`, necessaire quand le panneau est visible — et cette regle d'auteur l'emportait donc MEME quand `hidden` etait pose. CONSTATE EN CONSOLE : `clrt.hidden === true` ET `getComputedStyle(clrt) .display === "flex"` EN MEME TEMPS. peindre() pose `clrt.hidden = true` a la peremption sans vider `innerHTML` — la boite restait donc affichee, remplie de son DERNIER contenu peint : pas un cadre vide sur le mur, un texte perime qui reste lisible. LE LOGO N'A PLUS BESOIN DE SA PROPRE REGLE POUR LA MEME RAISON : depuis qu'il est premier enfant de .diapo-clrt et non plus un frere en position absolue, cette seule regle le couvre deja. `display: none` sur le parent retire tout son sous-arbre du rendu, quel que soit le display que porterait un enfant — il n'y a donc plus de concurrence de specificite a regler pour lui non plus. */ .diapo-clrt[hidden] { display: none; } /* TROIS LIGNES, PAS QUATRE — DEMANDE DU CLIENT. .diapo-clrt-titre a disparu : le panneau ne peint plus logo + titre + detail + quand, mais logo + detail + quand. ec.titre survit dans l'objet que rend ecurieDuCircuit() (noyau/diaporama.js) — les tests le lisent encore — il n'a simplement plus de ligne a lui sur le mur. DETAIL HERITE DU POIDS ET DU CORPS DE L'ANCIEN TITRE, PAS DE SA CASSE. Avant ce correctif, titre valait calc(--t-etiq * 1.22) en gras (700), pendant que detail valait * 1.09 en graisse normale, sur --txt-mute — la ligne discrete sous le titre marque. Detail est maintenant seule a nommer le circuit et le championnat (voir ecurieDuCircuit()) : elle recoit donc le poids du titre disparu (700) et un corps du meme ordre — 1.22 etait la valeur HISTORIQUE du titre, 1.2 est celle qui a ete mesuree pour la bande empilee et c'est celle que la regle porte —, et sa couleur passe a --txt-strong — sur --txt-mute, une ligne plus grande et plus grasse restait visuellement EFFACEE derriere « quand » juste en dessous, qui porte --txt, quasi identique a --txt-strong dans les deux marques (voir marques/e-motion/emotion.css et marques/alpine-race-lounge/alpine.css) : sans ce changement de couleur, la ligne « forte » demandee n'aurait pas ete plus forte que la secondaire. LETTER-SPACING ET CAPITALES NE SUIVENT PAS, VOLONTAIREMENT. text-transform et letter-spacing habillaient un COURT libelle fixe (« PROCHAINE MANCHE », un nom d'ecurie) ; detail porte maintenant circuit + championnat, une chaine bien plus longue et VARIABLE (44 caracteres au plus dans le calendrier livre, et tools/mesurer-mur.mjs derive desormais ce pire cas de LT_COURSES au lieu de le porter en dur — voir le rapport de cette tache) — meme convention que .diapo-nom plus bas dans ce fichier, seule autre ligne de CONTENU variable en gras + --txt-strong de tout ce fichier, et qui ne porte ni l'un ni l'autre non plus. Ajouter les deux aurait aggrave le risque de depassement que ce corps plus grand pose deja a lui seul — voir le rapport de cette tache pour la mesure (scrollWidth vs clientWidth) aux trois formats requis. */ /* LES DEUX LIGNES SE REPLIENT, LA PASTILLE NE SE COUPE JAMAIS. La ligne de detail porte circuit + championnat, variable et longue ; sur deux lignes elle reste lisible, coupee elle ne le serait plus. LA LIGNE DES DATES SUIT LA MEME REGLE DEPUIS LA REVUE DU 4 SEPT. 2026, ET C'EST UN CORRECTIF, PAS UN GOUT. Elle portait `white-space: nowrap`, cense empecher « EN / COURS » de se scinder — vu une fois sur une maquette. Mais contre l'`overflow: hidden` de la bande, nowrap ne repousse pas le debordement : il le change en TRONCATURE SILENCIEUSE. MESURE, sur la periode la plus large que periodeFr() puisse rendre, celle a cheval sur deux mois (« du 28 septembre au 2 octobre » + pastille) : a 1280 x 960 la ligne demandait 29 px de plus que la bande n'en offre, et ces 29 px etaient coupes sans que rien ne le dise. LA REGLE EST DONC AILLEURS : `normal` ici, `nowrap` sur .diapo-clrt-etat plus bas. La pastille est un seul mot insecable — elle ne se scinde dans aucun cas ; elle reste sur la ligne des dates tant que la largeur le permet, et passe ENTIERE a la ligne suivante sinon. Une bande qui grandit d'une ligne se voit, une pastille coupee ne se voyait pas. ET CETTE LIGNE DE PLUS EST MESUREE ELLE AUSSI : tools/mesurer-mur.mjs releve `bande.bottom -> anneau.top` sur ce meme pire cas, parce qu'une bande plus haute descend vers l'anneau de l'epingle. C'est ce qui a fait resserrer le corps des dates a .74 dans le palier 4:3 plus bas : a .8, la pastille « En cours » passait a la ligne et la bande finissait EXACTEMENT sur le haut de l'anneau (marge 0,0 px). */ .diapo-clrt-detail { font-size: calc(var(--t-etiq) * 1.2); font-weight: 700; color: var(--txt-strong); } .diapo-clrt-quand { font-family: var(--f-tech), monospace; font-size: var(--t-etiq); color: var(--txt); white-space: normal; } /* SEUL LE 4:3 A BESOIN DE CE SERRAGE — mesure de tools/mesurer-mur.mjs du 4 septembre 2026 : la bande y mordait l'anneau de 15 px sans lui. Les deux formats 16:9 restent sur les regles genereuses au-dessus. LES DATES SONT PASSEES DE .9 A .74 A LA REVUE DU MEME JOUR, et pour la meme raison mesuree, sur le pire cas force par l'outil (periode a cheval sur deux mois + pastille « En cours ») a 1280 x 960 : .9 la ligne demandait 29 px de plus que la bande n'en offre, et `white-space: nowrap` les faisait COUPER en silence .8 la pastille passe a la ligne, la bande grandit de 16 px et finit exactement sur le haut de l'anneau — marge 0,0 px .74 dates et pastille sur une seule ligne, marge/anneau 17,3 px, et la bande fait 439 px pour un plafond de 460,8 (36 %) : 22 px de reserve, soit deux caracteres de plus si la donnee en amene Aucun des deux coefficients ne depasse la regle genereuse (1.2 et 1.0). */ @media (max-aspect-ratio: 3/2) { .diapo-clrt-detail { font-size: calc(var(--t-etiq) * 1.05); } .diapo-clrt-quand { font-size: calc(var(--t-etiq) * .74); } } /* Le seul endroit colore du panneau : l'etat se lit d'un coup d'oeil depuis le fond de la salle, le reste se lit en s'approchant. */ .diapo-clrt-etat { margin-left: .4em; padding: .05em .5em; border-radius: 999px; background: var(--gold-dim); color: var(--gold); font-weight: 700; white-space: nowrap; } /* Sous 1 000 px de large la mise en page s'empile et la colonne de droite n'existe plus. Le panneau part avec elle : il n'y a pas de place, et un panneau pense pour un mur de lounge y couvrirait le classement. La signature et la carte du groupe partent avec elle, pour la meme raison : l'empilement est le mode « quelqu'un l'a ouvert sur son telephone », correct sans etre soigne. LE LOGO N'A PLUS BESOIN DE SA PROPRE LIGNE ICI NON PLUS, ET POUR LA MEME RAISON QUE POUR `.diapo-clrt[hidden]` PLUS HAUT : premier enfant de .diapo-clrt, il disparait deja avec son parent. Le poser quand meme ne changerait rien au rendu — juste une ligne de plus a lire qui ferait croire a une regle qui lui serait propre. */ @media (max-width: 1000px) { .diapo-clrt, .diapo-marque, .diapo-groupe { display: none; } } /* --- la carte du circuit --------------------------------------------------- */ .diapo-circ { font-family: var(--f-primary), sans-serif; font-size: var(--t-titre); font-weight: 800; line-height: .94; letter-spacing: .01em; text-transform: uppercase; color: var(--txt); text-wrap: balance; } .diapo-pays { font-family: var(--f-tech), monospace; font-size: var(--t-etiq); letter-spacing: .3em; text-transform: uppercase; color: var(--gold); } /* LA LONGUEUR SE DIT « RELEVEE », JAMAIS « longueur du circuit » — et la note est aussi grande que la question qu'elle previent. On integre la vitesse sur le temps du meilleur tour telemetre, donc la TRAJECTOIRE REELLEMENT PARCOURUE et non l'axe du circuit : Daytona tombe a +0,5 % de ses 5,729 km officiels, Monza a +2,7 % de ses 5,793 km. Le chiffre est juste, il ne mesure simplement pas la meme chose que celui des livres. La ligne DISPARAIT quand la mesure manque — voir longueur() dans noyau/diaporama.js. Elle ne s'invente pas, c'est deja le contrat du trace. */ .diapo-carte-km { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 .6em; font-family: var(--f-tech), monospace; color: var(--txt-mute); } .diapo-km-val { font-size: var(--t-etiq); font-weight: 700; color: var(--txt-strong); font-variant-numeric: tabular-nums; } .diapo-km-note { font-size: var(--t-detail); letter-spacing: .1em; text-transform: uppercase; } /* --- le trace -------------------------------------------------------------- */ .diapo-trace { display: block; width: 100%; height: 100%; overflow: visible; /* le point deborde du chemin de la moitie de son epaisseur */ } .diapo-trace-fond { fill: none; stroke: var(--line-strong); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; } /* LE TOUR ACCUMULE — traduction de la planche ASYMPTOTE dans le temps. La planche validee par le client superpose cent tours d'un meme circuit : le ruban qui en ressort s'ouvre la ou les pilotes divergent et se resserre en un fil unique la ou ils s'accordent — l'or ne s'allume que la ou la donnee s'accumule. Cet ecran-ci n'a qu'UN trace par circuit ; l'accumulation ne peut donc pas se jouer ENTRE tours comme sur la planche, elle se joue DANS LE TEMPS, au fil du tour que le point parcourt : ce chemin se revele progressivement au passage du point et RESTE allume derriere lui. A la fin des vingt secondes, le trace entier est en or — le tour vient d'etre accumule. OR PLEIN depuis le 8 septembre 2026, contre 30 % auparavant : sur le mur, la portion parcourue ne se distinguait pas assez du fond gris ; le sillage qui suivait la tete est retire le meme jour, il se lisait comme une trainee. L'ecran suivant repart de zero : trace() est rappelee avec une instance neuve de ce chemin. MEME pathLength QUE LE POINT, ET C'EST CE QUI REND LE CALCUL TRIVIAL. Sur un chemin normalise a 1000, `stroke-dasharray: 1000` (dash de 1000, vide de 1000) pose UN SEUL tiret qui, a dashoffset 0, couvre tout le trace ; a dashoffset 1000, il tombe entierement hors du trace et rien ne se voit. Faire glisser dashoffset de 1000 a 0 revele donc le trace DU DEBUT VERS LA FIN, exactement la portion deja parcourue par le point — sans second calcul, et sans jamais depasser sa position. */ .diapo-trace-acquis { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: diapo-acquis var(--diapo-duree, 20s) linear forwards; } @keyframes diapo-acquis { to { stroke-dashoffset: 0; } } /* LA LIGNE DE DEPART — un repere, pas une animation. Un trait blanc court EN TRAVERS du trace, a l'origine du chemin, la ou le point part et revient : sans lui, rien ne disait ou commence le tour. Meme mecanisme que le point, un tiret unique sur une copie du trace — mais SANS pathLength : le tiret se mesure en unites de la boite (100x100), comme le fond, pour avoir la meme epaisseur sur les onze circuits quelle que soit la longueur de leur trace. Aux bouts DROITS (butt) et plus large que le point (7 contre 6) : la longueur du tiret (0,9) devient l'epaisseur d'un trait pose en travers, et sa largeur de trait la longueur de ce trait — il depasse le point d'un demi de chaque cote, on le voit donc meme quand la tete est dessus. Le tiret part de l'origine (dashoffset 0) et s'etend sur 0,9 dans le sens du tour ; le vide de 9999 depasse la longueur de n'importe quel trace, un seul tiret par tour. Dessine AU-DESSUS de l'acquis, qui l'engloutirait sinon des la premiere seconde, et SOUS le point, qui le franchit au depart et a l'arrivee. Rien a geler sous mouvement reduit : il ne bouge pas. */ .diapo-trace-depart { fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: butt; stroke-dasharray: .9 9999; stroke-dashoffset: 0; opacity: .92; } /* Le point n'est pas un cercle : c'est un TIRET UNIQUE, arrondi aux deux bouts, sur une copie du trace. pathLength="1000" normalise la longueur du chemin — la meme regle vaut donc pour les onze circuits, quelle que soit leur longueur reelle, et sans une mesure de JavaScript. `stroke-width` reste en unites de la boite (100x100), pas en longueur normalisee : 6, c'est 6 % du cadre. Moins que les 9 du bandeau, parce que le trace y tenait dans 113 px et qu'il en occupe maintenant pres de 400 : a taille egale de point, il aurait ecrase le trace qu'il parcourt. */ .diapo-trace-point { fill: none; stroke: var(--gold); stroke-width: 6; stroke-linecap: round; stroke-dasharray: .5 999.5; stroke-dashoffset: 0; filter: drop-shadow(0 0 5px rgba(var(--brand-rgb), .9)); animation: diapo-tour var(--diapo-duree, 20s) linear forwards; } /* `forwards`, et surtout pas `infinite` : quand l'epreuve suivante tarde, le diaporama laisse l'ecran courant en place plutot que d'afficher du noir. Le point se gare alors sur la ligne d'arrivee et attend. Le tour est fini, l'ecran pas encore — le faire reboucler mentirait sur « un tour = un ecran ». */ @keyframes diapo-tour { to { stroke-dashoffset: -1000; } } /* --- indicateur de temps de secours ---------------------------------------- Quand le circuit a un trace, c'est le POINT qui dit le temps qui passe. Sinon la barre du haut revient : un ecran qui n'indiquerait plus rien du temps restant serait une regression, pas une simplification. Les deux lisent la meme duree, --diapo-duree, posee par le JavaScript. */ .diapo-prog { position: absolute; top: 0; left: 0; height: 3px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--gold), var(--gold-soft)); box-shadow: 0 0 18px -2px rgba(var(--brand-rgb), .8); z-index: 3; } .diapo-prog.run { animation: diapo-avance var(--diapo-duree, 20s) linear forwards; } @keyframes diapo-avance { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* --------------------------------------------------------------------------- 6) Le classement --------------------------------------------------------------------------- TROIS COLONNES DE CINQ, et le nombre vient de la place. La bande fait 39 % de la hauteur, soit 421 px sur un 1 080 : six emplacements — un titre de colonne et cinq lignes — y tiennent a 70 px chacun. Trois colonnes de dix y tomberaient a 35 px, ce qui ne se lit pas debout au fond d'un lounge. LA HAUTEUR NE PERD PRESQUE RIEN par rapport au lot precedent (environ 80 px par ligne) ; C'EST LA LARGEUR QUI S'ETAIT RESSERREE — de 564 px de colonne a 354 (mesure, gouttieres comprises). Le nom du pilote payait cette difference, et il la payait POUR LA DEUXIEME FOIS : le lot precedent lui avait deja retire la colonne du vehicule. CE QUI A TRANCHE, ET C'ETAIT UNE MESURE. Ligne sur une seule rangee et prenom entier, la plus grosse police tenant les noms sans en couper un valait 16,1 px. A cette taille, la hauteur de capitale fait 7,2 mm sur un 55 pouces, 8,5 sur un 65, 9,8 sur un 75 — soit 8 a 11 minutes d'arc a trois metres, contre environ 17 recommandees pour de la signalisation (5 etant la simple acuite). Lisible, et inconfortable. DEUX GESTES ONT RENDU CETTE HAUTEUR AU TEXTE, ET AUCUN N'A RETIRE D'INFORMATION : - le PRENOM se reduit a son initiale — voir abreger() dans noyau/diaporama.js — ce qui libere environ 40 % de la largeur du nom ; - l'ECART DESCEND SOUS LE NOM, en seconde rangee, et rend TOUTE la largeur qu'il prenait dans la piste du chrono — 5,3em, une centaine de pixels par ligne. C'est de loin le plus gros des deux. Le second est celui qu'on avait failli manquer : on lisait la situation comme un arbitrage entre garder l'ecart et lire le nom, alors que la place perdue etait VERTICALE. Une ligne de 70 px de haut pour 23 px de texte avait de quoi loger une rangee de plus. Ce n'etait pas un compromis a trancher, c'etait une colonne mal placee. RESULTAT : 23,0 px au lieu de 16,1, soit 43 % de plus, sans toucher au croquis et sans qu'aucune information quitte l'ecran. LE BALAYAGE QUI A FIXE CES VALEURS — mesure du 30 aout 2026, sur le navigateur, a 1 920 x 1 080, theme e-motion. PERIMETRE : LES NEUF ECRANS DU CYCLE, 133 lignes, 34 pilotes distincts. Et ils ont ete releves SUR LES ECRANS REELLEMENT PEINTS — un observateur de mutations a recopie chaque ecran a mesure que le diaporama tournait — plutot que redemandes a l'API, qui venait de nous mettre en limitation de debit. C'est la meme donnee, sans un appel de plus. TROIS PIEGES DE MESURE, tous payes ici : - `scrollWidth` SE BORNE A `clientWidth` des que le contenu tient : il rend zero pour « ca passe » comme pour « ca passe tout juste ». La marge se mesure donc contre une sonde de meme police, pas contre lui ; - une lecture prise AVANT `document.fonts.ready` donne un autre resultat : 11,5 px de marge au lieu de 19,1 sur un meme reglage, les metriques de marque n'etant pas encore appliquees ; - et le NAVIGATEUR GARDE LA FEUILLE EN CACHE : un balayage lance apres une modification du CSS, sans rechargement dur, mesure l'ANCIENNE feuille. Une serie entiere a ete refaite pour cela — la piste du chrono rendait encore ses 8,8em d'avant. Le nom qui decide est « E. Di Cristofaro » sur Monza, le plus long patronyme du roster une fois le prenom abrege. --t-ligne police noms coupes marge du nom reserve verticale 1,30vw 25,0 px 0 -0,3 px 5 px 1,25vw 24,0 px 0 +11,7 px 18 px 1,20vw 23,0 px 0 +23,8 px 25 px <- retenu 1,15vw 22,1 px 0 +35,9 px 35 px 1,10vw 21,1 px 0 +48,0 px 48 px (a --e-ligne .35vh et --l-chrono 6,1em, les valeurs livrees.) LES DEUX CONTRAINTES SE REJOIGNENT ICI, et c'est ce qui rend le choix simple : au-dessus de 1,25vw la largeur redevient limitante — le premier nom se coupe a 25,15 px — et la hauteur se ferme au meme endroit, 5 px de reserve seulement. En dessous, les deux s'ouvrent ensemble. ON RETIENT 1,20vw / 23,0 px. La cible etait 22 a 24 px ; cette valeur est au milieu, avec 25 px de reserve verticale et 23,8 px de marge horizontale sur e-motion. ON NE PREND PAS 24,0 px, et le motif est plus court qu'il n'y parait : il ne resterait que 11,7 px de largeur, et surtout la taille ne serait qu'a 0,96 px du premier nom coupe. Un roster change toutes les semaines ; un reglage a un pixel de la casse n'est pas un reglage. ET C'EST ALPINE QUI COMMANDE, PAS E-MOTION — l'inverse de ce qu'une version de ce commentaire affirmait. Barlow n'est pas plus etroit que Source Sans 3, il est plus LARGE : 151,77 px contre 149,21 pour « E. Di Cristofaro » a 23,04 px, trois methodes concordantes (Range sur le noeud texte, sonde heritant de la cellule, canvas.measureText). La marge alpine sur ce nom est donc de 21,2 px et non de 68,9 — le chiffre faux venait d'une sonde qui recopiait `getComputedStyle(el).font`, LEQUEL REND UNE CHAINE VIDE sur ce moteur : la sonde mesurait alors la police heritee du corps du document, et ne se trompait que la ou celle-ci differait de celle de la cellule, c'est-a- dire sur alpine seulement. Sur le roster alpine du jour, le pire nom est « L. SALVATORE » a +28,6 px. LE COUT DU REGLAGE NE SE MESURE PAS SUR LE ROSTER DU JOUR, et ce commentaire dit lui-meme que le roster change toutes les semaines. Les 34 noms ci-dessus sont ceux d'un mardi ; le depot porte son propre releve bien plus large — verification/tests/fixtures/sessions.json, 610 noms distincts. Passes par abreger() et mesures dans la vraie piste a 23,04 px, NEUF DEBORDENT : N. Ahangama Walawage +67,3 px de trop X. De Vleeschauwer +22,2 R. Loureiro Pereira +14,4 L. COTTEZ-ABRATE +13,4 F. Galy-Charbonne +12,4 E. Tsobanopoulos +4,7 P. BRAGA SANTOS +3,8 R. Vanden Broeck +2,6 A. Nunes Madeira +0,7 NEUF SUR 610, ET L'ELLIPSE FAIT SON TRAVAIL : ce n'est pas une casse, c'est un nom tronque proprement, et il faudrait descendre bien au-dessous de 23 px pour les loger tous — « N. Ahangama Walawage » demande 240 px de piste quand la colonne entiere en fait 354. On ne redimensionne pas un mur pour 1,5 % du fichier ; on ecrit ce que le reglage coute. POUR MEMOIRE, CE QUE CETTE LIGNE A PERDU ET GAGNE : le vehicule au lot precedent, le prenom a ce lot — et en echange la police est passee de 16,1 a 23,0 px, soit 43 % de plus. L'ecart, lui, n'a rien perdu : il a change de place. `overflow: hidden` sur le panneau, et le filet de securite d'ajuster() en plus : le premier garantit qu'aucune ligne ne bave HORS du panneau opaque — ce qui la poserait sur le globe nu — le second evite qu'elle soit coupee. Les deux sont necessaires, et dans cet ordre : mieux vaut un classement reduit qu'un classement tronque, mais mieux vaut un classement tronque qu'un classement illisible par-dessus une sphere. --------------------------------------------------------------------------- */ /* `flex: 0 0 auto` sur les colonnes : le bloc garde sa HAUTEUR NATURELLE, il ne se laisse pas comprimer. Laisser le modele flexible le retrecir produisait le pire des deux mondes : la boite retrecissait, les lignes non. L'origine en HAUT A GAUCHE n'est pas un detail : elle fixe les deux bords qui ne doivent pas bouger — le bas remonte (c'est lui qui debordait) et la gauche reste alignee sur le bord du panneau. */ .diapo-rows { display: flex; flex-direction: row; align-items: flex-start; gap: min(1.4vh, 1.6vw); transform-origin: 0 0; } /* `min-width: 0` n'est PAS decoratif : sans lui, un enfant de flex refuse de descendre sous la largeur minimale de son contenu, et les trois colonnes deborderaient au lieu de se partager la place. */ .diapo-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: min(.7vh, .9vw); } /* Ces trois titres se lisent en meme temps : l'or de l'un contre l'or de l'autre ferait trois accents concurrents la ou le circuit doit rester le seul titre de l'ecran. La bordure gauche transparente de 3 px n'est pas decorative : .diapo-row et .diapo-vide la portent (c'est elle qui prend la couleur du rang sur le podium), et sans elle le titre commencait 3 px a gauche de la colonne du rang qu'il annonce. Un decalage qu'on ne nomme pas, mais que l'oeil voit. */ .diapo-col-titre { font-family: var(--f-tech), monospace; font-size: var(--t-etiq); letter-spacing: .14em; text-transform: uppercase; color: var(--txt-mute); padding: 0 var(--l-marge); border-left: 3px solid transparent; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Une colonne sans chrono le DIT. Sous le theme Alpine, qui ne montre que les chronos de son propre centre, c'est le cas courant : une colonne simplement absente laisserait croire a une panne du site. */ .diapo-vide { font-family: var(--f-tech), monospace; font-size: var(--t-detail); letter-spacing: 1px; text-transform: uppercase; color: var(--txt-mute); padding: var(--e-ligne) var(--l-marge); border-radius: var(--radius-sm); border-left: 3px solid transparent; background: var(--panel-2); } /* TROIS colonnes et non quatre : la voiture a quitte la ligne le jour ou trois classements se sont partages l'ecran. La quatrieme piste, gardee vide, aurait laisse une gouttiere morte a droite du chrono — une grille compte ses ecarts entre toutes ses pistes declarees, fussent-elles a zero. `minmax(7ch, 1fr)` sur la colonne du nom, et ce n'est pas decoratif : .diapo-nom porte overflow:hidden, ce qui ramene son minimum automatique a ZERO. Rien n'empecherait donc la colonne d'etre ecrasee par ses voisines. 7ch et non 9 : la colonne a perdu 35 % de sa largeur, et un plancher trop haut ferait deborder la grille au lieu de couper un nom. LE FOND EST OPAQUE, ET C'EST LE POINT DE L'ETAPE 4. Une ligne a rgba(var(--panel-rgb), .55) laissait passer le graticule : sur un panneau pose a 67,7 % sur le disque, cela remettait la sphere sous le texte. Le panneau est deja opaque, mais la ligne se peint PAR-DESSUS lui — un alpha ici ne montrerait pas le globe, seulement le panneau, et c'est bien pourquoi le panneau doit rester opaque : les deux se repondent. */ .diapo-row { display: grid; /* LA LIGNE PORTE ELLE-MEME SA POLICE, ET CE N'EST PAS REDONDANT AVEC SES ENFANTS. `em` et `ch` dans `grid-template-columns` se resolvent contre la police de L'ELEMENT QUI PORTE LA GRILLE — ici .diapo-row — et non contre celle des cellules. Tant que seuls .diapo-pos, .diapo-nom et .diapo-chrono posaient --t-ligne, la ligne heritait des 16 px du document : --l-chrono a 10em rendait 160 px au lieu de 240, et le chrono debordait de sa piste sur les quinze lignes de l'ecran. La poser ici rend les deux unites justes. */ font-size: var(--t-ligne); /* DEUX RANGEES, ET C'EST CE QUI REND SA TAILLE AU NOM DU PILOTE. --------------------------------------------------------------------------- L'ecart vivait DANS la cellule du chrono. Il y elargissait la PISTE du chrono — 194 px des 354 de la colonne a 22 px de police — et cette largeur se prenait entierement sur le nom. On a longtemps lu cela comme un arbitrage entre garder l'ecart et lire le nom ; c'en etait pas un. LA PLACE PERDUE ETAIT VERTICALE, PAS HORIZONTALE. Une ligne fait environ 70 px de haut pour 19 px de texte : il y avait de quoi loger une seconde rangee sans rien retirer. L'ecart descend donc SOUS le nom, en petit, et rend TOUTE sa largeur. On garde l'information ET la taille — ce n'etait pas un compromis a trancher, c'etait une colonne mal placee. Le rang et le chrono s'etendent sur les deux rangees et se centrent : ils appartiennent a la ligne entiere, pas a sa premiere moitie. */ grid-template-columns: var(--l-pos) minmax(7ch, 1fr) var(--l-chrono); grid-template-rows: auto auto; column-gap: var(--l-creux); row-gap: 0; padding: var(--e-ligne) var(--l-marge); border-radius: var(--radius-sm); border-left: 3px solid transparent; background: var(--panel-2); } /* Les trois premieres lignes portent la couleur de leur rang : c'est le seul endroit du diaporama ou la couleur informe au lieu de decorer. */ .diapo-row[data-rang="1"] { border-left-color: var(--p1); background: var(--gold-dim); } .diapo-row[data-rang="2"] { border-left-color: var(--p2); } .diapo-row[data-rang="3"] { border-left-color: var(--p3); } /* Le rang appartient a la ligne entiere : il couvre les deux rangees et se centre dessus, plutot que de se caler sur la premiere. */ .diapo-pos { grid-area: 1 / 1 / 3 / 2; align-self: center; font-family: var(--f-tech), monospace; font-size: var(--t-ligne); font-weight: 700; color: var(--txt-mute); text-align: right; font-variant-numeric: tabular-nums; } .diapo-row[data-rang="1"] .diapo-pos { color: var(--p1); } .diapo-row[data-rang="2"] .diapo-pos { color: var(--p2); } .diapo-row[data-rang="3"] .diapo-pos { color: var(--p3); } .diapo-nom { grid-area: 1 / 2 / 2 / 3; align-self: end; font-size: var(--t-ligne); font-weight: 600; color: var(--txt-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Le chrono garde sa colonne, mais sa piste ne porte plus QUE lui : l'ecart l'a quittee pour la seconde rangee. C'est ce qui a permis de la recaler sur le pire chrono REEL au lieu d'un pire cas synthetique. */ .diapo-chrono { grid-area: 1 / 3 / 3 / 4; align-self: center; text-align: right; font-family: var(--f-tech), monospace; font-size: var(--t-ligne); font-weight: 700; color: var(--txt); font-variant-numeric: tabular-nums; white-space: nowrap; } .diapo-row[data-rang="1"] .diapo-chrono { color: var(--gold); } /* L'ECART EST DESCENDU SOUS LE NOM, ET IL N'A PLUS DE RESERVE A TENIR. --------------------------------------------------------------------------- Il vivait dans la cellule du chrono, avec une largeur minimale pour que les chronos ne dansent pas d'une ligne a l'autre. Cette reserve etait prise sur la colonne du nom, et c'est elle qui plafonnait la police du classement. En seconde rangee, la question ne se pose plus : il occupe la largeur du nom, qui ne bouge pas d'une ligne a l'autre, donc il n'y a plus rien a reserver et plus rien a faire danser. `min-width` et `margin-left` partent avec. IL GARDE UNE HAUTEUR MEME VIDE, et c'est la seule chose a laquelle il faut penser ici : la premiere ligne de chaque colonne EST la reference, son ecart est donc la chaine vide. Une cellule vide serait haute de zero, la rangee avec elle, et le podium serait plus court que les lignes suivantes — la meme danse qu'on vient de supprimer, retournee a la verticale. D'ou min-height. */ .diapo-ecart { grid-area: 2 / 2 / 3 / 3; min-height: 1.15em; font-size: .58em; font-weight: 600; letter-spacing: .04em; color: var(--txt-mute); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* LE DRAPEAU NE DOIT PAS FAIRE GRANDIR LA LIGNE, et c'est la seule contrainte qui compte ici. .diapo-ecart reserve min-height: 1.15em ; une image plus haute que cette reserve pousserait la rangee, donc la ligne, donc les cinq lignes de la colonne — et ajuster() repondrait en RETRECISSANT le classement pour le faire rentrer. On aurait paye en taille de police un drapeau cense ne rien couter. 1.05em contre 1.15 de reserve : la marge est mince et volontaire. A 1 920 x 1 080 cela fait environ 14 px de haut pour une source de 48 — un drapeau se reconnait a ses couleurs bien avant ses details. vertical-align cale le bas du drapeau sur la ligne de base du chiffre. flex-shrink: 0 le protege : .diapo-ecart coupe son texte a l'ellipse, et sans cela une longue chaine d'ecart ecraserait l'image avant le texte. */ .diapo-drapeau { height: 1.05em; width: auto; flex-shrink: 0; margin-right: .55em; vertical-align: -.14em; border-radius: 1px; } /* --------------------------------------------------------------------------- 7) L'etat : chargement, absence de donnees --------------------------------------------------------------------------- IL NE REMPLACE PLUS LA SCENE, il la masque. Les cinq blocs restent en vie sous lui — c'est ce qui permet au JavaScript de n'avoir plus aucune logique de remplacement d'ecran — et le globe continue de se peindre derriere : il est un fond, pas un contenu, et le faire disparaitre pour dire « chargement » serait plus alarmant que rassurant. --------------------------------------------------------------------------- */ .diapo-etat-boite { position: absolute; inset: 0; z-index: 5; display: none; align-items: center; justify-content: center; } /* LE SOCLE, ET IL PORTE LE MEME --panel OPAQUE QUE LES CINQ BLOCS. La boite ci-dessus couvre la couche pour centrer, elle ne peint rien : le globe reste visible tout autour du message, ce qui est le comportement voulu. Le TEXTE, lui, tombe au centre de l'ecran — c'est-a-dire SUR le disque — et s'y lisait a 1,29:1 sur une cote, 1,08:1 sur le limbe (e-motion), 1,76:1 et 1,32:1 (alpine), quand --txt-mute est calibre pour 5,27:1 et 5,54:1 sur --bg et que le seuil AA d'un texte est de 4,5:1. Cela se produisait A CHAQUE OUVERTURE, le temps du chargement. C'etait la meme question que pour le classement, sur la seule surface de texte qui n'avait pas recu de panneau. */ .diapo-etat-socle { display: flex; flex-direction: column; align-items: center; gap: 2.4vmin; padding: min(4vh, 6vw) min(6vh, 9vw); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); font-family: var(--f-tech), monospace; font-size: clamp(11px, 1.9vmin, 20px); letter-spacing: .3em; text-transform: uppercase; text-align: center; color: var(--txt-mute); } #diapo.etat .diapo-etat-boite { display: flex; } /* LE FILET PART AVEC LES BLOCS, et il le faut : il arrive sur le bord gauche de la carte, qui vient de passer en `visibility: hidden`. Laisse visible, il pointerait vers un panneau invisible — une ligne qui finit dans le vide, et une epingle qui designe un circuit dont l'ecran ne dit plus rien. LA BARRE DE TEMPS AUSSI, ET C'EST UN DEFAUT DE CE LOT-CI. etat() ne detruit plus la scene, il la masque — mais .diapo-prog n'est retiree que par peindre() et par la fermeture, jamais par etat(). Or suivant() peut basculer en etat EN COURS DE CYCLE, catalogue devenu vide ou tous les ecrans en echec : la barre de l'ecran PRECEDENT restait alors figee a plein par-dessus le message, annoncant un decompte qui ne court plus. Elle se masque donc avec le reste. ELLE SE MASQUE, ELLE NE S'ARRETE PAS : `visibility: hidden` laisse l'animation courir, et c'est voulu — le prochain peindre() recree la barre de toute facon, et l'arreter ici demanderait de toucher a .run, dont le commentaire de la section « mouvement reduit » dit qu'elle informe. LE PANNEAU DE L'ECURIE SUIT LA MEME REGLE, pour la meme raison : sans elle, une reouverture montrerait le circuit de la session precedente pendant le chargement du suivant. SON LOGO N'A PAS BESOIN DE SA PROPRE ENTREE ICI, ET C'EST UNE DIFFERENCE AVEC `display`, PAS UN OUBLI : `visibility` SE TRANSMET AUX DESCENDANTS alors que `display` ne le fait pas — un enfant sans `visibility` a lui herite donc deja de celle de son parent. Premier enfant de .diapo-clrt, le logo n'a jamais besoin d'etre nomme a part dans une regle qui pose `visibility`, seulement dans une qui pose `display` (voir le media (max-width: 1000px) plus haut, qui lui non plus ne le nomme plus). LA CARTE DU GROUPE SUIT, LA SIGNATURE NON, ET C'EST UNE DECISION. Sans cette entree, la carte du groupe restait SEULE ALLUMEE en bas a droite pendant que tout le reste disparaissait — sur « Aucun chrono a afficher », ou pendant une reouverture. Un bloc isole sur un ecran vide se lit comme un defaut d'affichage, pas comme une information. .diapo-marque, elle, RESTE VISIBLE EXPRES : c'est la signature de la marque, pas l'etat d'un ecran. Une salle qui charge son mur montre encore a qui il est — c'est le seul bloc dont le contenu ne vient d'aucun ecran et ne perime jamais. Son absence de cette liste est donc un choix, et c'est cette phrase-la qui le dit. */ #diapo.etat .diapo-carte, #diapo.etat .diapo-trace-boite, #diapo.etat .diapo-classement, #diapo.etat .diapo-foot, #diapo.etat .diapo-prog, #diapo.etat .diapo-filet, #diapo.etat .diapo-groupe, #diapo.etat .diapo-clrt { visibility: hidden; } .diapo-spin { width: clamp(26px, 4.4vmin, 54px); height: clamp(26px, 4.4vmin, 54px); border: 2px solid var(--line); border-top-color: var(--gold); border-radius: 50%; animation: diapo-tourne .9s linear infinite; } @keyframes diapo-tourne { to { transform: rotate(360deg); } } /* --------------------------------------------------------------------------- 8) Entrees animees --------------------------------------------------------------------------- Le decalage entre les lignes (--i, pose par le JavaScript) fait descendre le classement du premier vers le cinquieme. Ce n'est pas qu'un effet : l'oeil suit la cascade et arrive sur le podium avant tout le reste. IL N'Y A PLUS DE SORTIE A ANIMER. La scene ne part plus : ses blocs restent et changent de contenu. `.diapo-scene.sort` et son fondu disparaissent donc avec l'architecture qui les demandait — un ecran qui se remplit n'a rien a faire sortir. --------------------------------------------------------------------------- */ .diapo-circ { animation: diapo-entre-g .65s cubic-bezier(.16, 1, .3, 1) .06s both; } .diapo-pays, .diapo-carte-km { animation: diapo-fondu .6s ease .28s both; } .diapo-foot > * { animation: diapo-fondu .6s ease .5s both; } /* Les titres de colonne et la mention d'absence entrent AVANT les lignes qu'ils annoncent — 0,1 s contre 0,22 s pour la premiere ligne. Un titre qui arriverait apres son classement se lirait comme une correction. */ .diapo-col-titre, .diapo-vide { animation: diapo-fondu .45s ease .1s both; } .diapo-row { animation: diapo-entre-b .5s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(.22s + var(--i, 0) * .075s); } @keyframes diapo-entre-g { from { opacity: 0; transform: translate3d(-2.6vmin, 0, 0); } to { opacity: 1; transform: none; } } @keyframes diapo-entre-b { from { opacity: 0; transform: translate3d(0, 1.8vmin, 0); } to { opacity: 1; transform: none; } } @keyframes diapo-fondu { from { opacity: 0; } to { opacity: 1; } } /* --------------------------------------------------------------------------- 9) Reglage systeme « mouvement reduit » --------------------------------------------------------------------------- Tout le mouvement decoratif tombe. L'indicateur de temps, lui, RESTE anime — barre ou point selon le circuit : il ne decore pas, il indique le temps qui passe, et le supprimer retirerait une information a ceux qui ont justement demande moins d'effets. C'est pourquoi ni .diapo-prog ni .diapo-trace-point ne figurent dans la liste ci-dessous. Ne pas les y ajouter. .diapo-trace-acquis, LUI, Y FIGURE — DIFFERENCE AVEC LE POINT, PAS OUBLI. Il traduit la meme information que le point porte deja (le temps qui passe, vu comme une accumulation) sous une forme purement decorative : le supprimer ne retire aucune information, puisque le point continue seul de la porter. `animation: none` le fige sur le stroke-dashoffset de sa propre regle, 1000, qui est INVISIBLE (voir son commentaire plus haut) : l'ecran retrouve fond, ligne de depart et tete des que l'animation s'arrete, jamais un ecran plus pauvre. .diapo-trace-depart n'est pas anime : rien a geler. (Le sillage qui suivait la tete, retire le 8 septembre 2026, avait besoin d'une regle separee `opacity: 0` ici — son tiret de 90 sur une periode de 1000 restait visible a tout dashoffset fige. La regle est partie avec lui ; ne pas la recreer pour l'acquis, qui n'en a aucun besoin.) ET NI .diapo-filet NI .diapo-globe N'Y FIGURENT NON PLUS : le globe reste dessine sous mouvement reduit, l'epingle reste juste et le filet reste accroche. Il informe, il ne decore pas. C'est la scene qui fait sauter sa camera au lieu de la faire voler, et ce reglage-la vit dans noyau/globe-rendu.js. --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { #diapo, #diapo::before, .diapo-circ, .diapo-pays, .diapo-carte-km, .diapo-col-titre, .diapo-vide, .diapo-foot > *, .diapo-row, .diapo-trace-acquis, .diapo-btn, .diapo-btn .diapo-btn-txt { animation: none !important; transition: none !important; transform: none !important; } .diapo-btn .diapo-btn-txt { max-width: 160px; } } /* --------------------------------------------------------------------------- 10) Quand la disposition en pourcentages ne tient plus --------------------------------------------------------------------------- ELLE TIENT TANT QUE L'ECRAN EST LARGE, et l'ecran du lounge l'est par definition. En dessous de 1 000 px, deux choses cassent ensemble : les trois colonnes du classement n'ont plus la largeur (a 375 px, chacune en ferait 104 quand la position plus le chrono en demandent deja 119), et les blocs de droite deviennent trop etroits pour porter un nom de circuit. ON ABANDONNE DONC LA DISPOSITION LIBRE et on empile, dans l'ordre de lecture : carte, trace, classement, pied. Le globe reste en fond — il ne coute rien et il dit toujours OU — et le filet se cache, parce qu'un filet qui traverserait un empilement vertical ne relierait plus rien de lisible. Ce n'est pas la destination du diaporama : c'est le mode « quelqu'un l'a ouvert sur son telephone », et il doit rester correct sans etre soigne. --------------------------------------------------------------------------- */ @media (max-width: 1000px) { #diapo { overflow-y: auto; } .diapo-filet { display: none; } /* `fixed` PLUTOT QUE `absolute`, ET C'EST LE DEFILEMENT QUI L'IMPOSE. Empile, le contenu depasse la fenetre — 897 px pour 812 sur un 375 x 812 — et la couche defile. Un globe en `absolute; inset: 0` reste colle au HAUT DU CONTENU : il ne mesure alors que la premiere hauteur de fenetre, et le bas de la page defilee se retrouve sur --bg nu, sans sphere. En `fixed` il se cale sur la fenetre et reste derriere tout le defilement. */ .diapo-globe { position: fixed; } /* `relative` ET SURTOUT PAS `static`, ET CELA S'EST VU A L'ECRAN. `position: static` rend `z-index` SANS EFFET : les cinq blocs sortent alors de l'ordre des elements positionnes, et le canvas du globe — lui absolu, a z-index 0 — repasse PAR-DESSUS leurs fonds et leur texte. MESURE du 30 aout 2026 a 375 x 812 : le graticule et les cotes traversaient le trace et se lisaient entre les lignes du classement, alors meme que les fonds sont opaques. `relative` garde l'empilement en flux normal ET le z-index, donc les blocs masquent a nouveau. */ .diapo-carte, .diapo-trace-boite, .diapo-classement, .diapo-foot { position: relative; left: auto; top: auto; bottom: auto; width: auto; height: auto; margin: min(1.6vh, 3vw); } .diapo-trace-boite { height: 34vh; } .diapo-foot { align-items: flex-start; text-align: left; } /* `align-items` repasse a `stretch` : en colonne, c'est l'axe transversal — laisse a `flex-start`, chaque classement se contentait de sa largeur de contenu. En ligne, au contraire, `flex-start` est indispensable : il empeche une colonne de trois chronos de s'etirer a la hauteur de sa voisine qui en a cinq. */ .diapo-rows { flex-direction: column; align-items: stretch; gap: min(.8vh, 1vw); } .diapo-col { flex: 0 0 auto; } /* Une fois empilee, la ligne retrouve TOUTE la largeur : les termes en vw resserres plus haut n'ont plus lieu d'etre et reprennent des valeurs larges. */ #diapo { --t-titre: clamp(22px, min(5vh, 9vw), 64px); --t-ligne: clamp(11px, min(1.5vh, 4.6vw), 40px); --e-ligne: min(.4vh, .6vw); --l-pos: clamp(24px, min(2.4vh, 7vw), 78px); --l-creux: clamp(8px, min(1.2vh, 3vw), 34px); --l-marge: clamp(8px, min(1vh, 2.6vw), 26px); } /* Empile, le titre de colonne redevient le seul intertitre a cet endroit de l'ecran, plus une etiquette parmi trois : il reprend l'or et la chasse large. */ .diapo-col-titre { color: var(--gold); letter-spacing: .42em; margin-top: min(1.2vh, 1.6vw); } } /* Sur 375 px, chaque pixel rendu a la colonne du nom se voit : mesure faite au lot precedent, il manquait 2, 6 et 13 px aux trois noms les plus longs du classement. La colonne du rang tient deux chiffres en 24 px, et une gouttiere de 8 separe encore clairement. */ @media (max-width: 620px) { #diapo { --l-pos: 24px; --l-creux: 8px; --l-marge: 8px; } }