/* ========================================================================= ROAD TO - feuille de style DA SOBRE (V5) : on revient a une direction artistique simple et neutre (typo systeme, aplats, coins legerement arrondis, ombres douces). La DA "comics" (typo ultra-grasse, ombres dures, banniere inclinee) est mise de cote - elle sera retravaillee plus tard. Deux familles de couleur : --brand* : ROUGE, pour tout ce qui est GENERAL (titre, HUD, fiche) --phase-* : couleur SPECIFIQUE a la phase, definie par phase en JS --doom* : VERT Doomsday, reserve a la mention Doomsday ET a la barre de progression (elle mene a Doomsday) ========================================================================= */ :root { /* ⚠️ LA RAMPE D ENCRE (V44). Le noir pur n avait jamais ete CHOISI - il etait la depuis la V4 - et autour de lui QUATORZE gris ad hoc s etaient accumules - 08080C, 101018, 0D0D14, 0B0B11, 16161C, 1C1C23, 23232B, 2C2C34, 2E2E36, 33333D, 34343E, 3A3A44, 3A3A46, 6A6A76. Ce n etait pas une echelle, c etait de l accretion. ⚠️ ET ILS DERIVAIENT DEJA TOUS VERS LE BLEU-VIOLET (le bleu depasse le rouge de 4 a 8 points, sur les quatorze). La teinte froide n est donc pas une lubie de la V44 : elle etait deja la, prise a l oeil, une valeur a la fois. La V44 ne fait que l ECRIRE - meme teinte, chroma qui monte avec la clarte, HUIT degres au lieu de quatorze accidents. ⚠️ LE FOND QUITTE LE NOIR PUR. #000 sur un ecran OLED n est pas un fond, c est un TROU : l affiche n a plus de bord, la carte n a plus de surface, et il ne reste qu un accent qui pope dans le vide - le cliche visuel exact que la V44 vient corriger. --ink-0 est a peine leve, assez pour que le noir des affiches se detache du papier. */ /* ⚠️⚠️ V329 - VISUEL_B (B1). Les CLARTES sont celles de la palette Premium (un cran au-dessus du Visuel_A : surfaces plus lisibles, filets plus nets), la TEINTE est presque neutre - un souffle froid, jamais le gris-bleu ardoise que l auteur a juge « tres IA ». La palette Premium reste dans l historique git (commit df99dbb) ; celle du Visuel_A dans le tag `visuel-a`. ⚠️ Trois endroits RECOPIENT ces valeurs et bougent avec : FOND_SIGNE (js/profile.js), les replis du canvas (js/app.js) et les theme-color. */ --ink-0: #0B0B0E; /* le FOND de page */ --ink-1: #101014; /* un CREUX dans une surface (puits, piste) */ --ink-2: #16161B; /* la surface POSEE (panneau, champ, carte) */ --ink-3: #1E1E24; /* la surface ELEVEE (fiche, popover) */ --ink-4: #26262D; /* filet SOURD */ --ink-5: #303038; /* filet */ --ink-6: #404049; /* filet NET, bord eveille */ --ink-7: #75757F; /* un signe ETEINT (etoile vide, cadenas) */ /* ⚠️ L ENCRE SUR CLAIR est le fond de page, pas un gris de plus. Une pastille blanche ou coloree portait tantot 0B0B0E, tantot 06060A, tantot 08080C - trois valeurs pour une seule idee. */ --on-light: var(--ink-0); --ink: var(--ink-0); --panel: var(--ink-2); --panel-2: var(--ink-3); --rule: var(--ink-5); --paper: #F6F4EE; /* Le texte suit la meme discipline : TROIS degres, la ou six blancs casses se disputaient les memes roles - E4E4EA, DCDCE4, D8D8E0, D2D2DC. ⚠️ Et PAS de quatrieme. Un "--text-3" pour le texte eteint a ete ecrit puis retire dans la meme version : c'etait --ink-7 sous un second nom, donc un jeton qui n'aurait servi nulle part. Le degre existe, il s'appelle --ink-7, et son commentaire dit deja "un signe ETEINT". */ --text: #F4F4F6; /* ce qu on lit d abord */ --text-2: #E0E0E6; /* la prose, les valeurs */ --text-dim: #ABABB5; /* les intitules, les annees (7,3:1 sur --ink-3) */ /* Rouge de marque - UN SEUL rouge pour tous les elements generaux */ --brand: #E23636; --brand-deep: #7A1418; /* ⚠️⚠️ V230 - LE ROUGE SOUS UN TEXTE BLANC. Du blanc sur #E23636 donne 4,36:1, sous les 4,5 d'un texte en petit corps (S'inscrire, 11 px). Et `--brand` ne peut PAS etre fonce pour autant : il sert aussi de TEXTE rouge sur le fond sombre, ou il lui faut au moins la meme clarte - les deux seuils se croisent, aucun rouge unique ne passe les deux. C'est donc un jeton de SURFACE, pas un second rouge d'accent : 4,73:1 sous du blanc. Il ne sert qu'aux boutons PLEINS a petit texte ; le grand bouton ROAD TO (22-31 px, gras) est un « grand texte » et passe deja a 3:1. */ --brand-plein: #D83333; /* Vert Doomsday - echantillonne sur le logo officiel (vert pur) */ --doom: #00C400; --doom-soft: #6BF06B; --doom-deep: #013A01; /* ⚠️ V423 - EXPRESS PREND LA COULEUR DU FILM DE « ROAD TO » (demande de l auteur). `--roadto-teinte` est pose par `js/app.js` quand le film choisi en a une (Secret Wars) ; sinon, le vert des indispensables. */ /* ⚠️ V453 - EXPRESS PREND LE VERT DIRECTEMENT, PLUS PAR LE STATUT : il disait « le vert de ce qu il garde » quand le statut le plus fort etait vert. Le statut devient rouge ; Express, lui, garde le vert de ce qui est ACQUIS - c est ce sens-la qu il empruntait, pas le statut. */ --express: var(--roadto-teinte, var(--doom)); /* Etoile de notation et coeur favori */ --star: #FFC531; /* le JAUNE de la notation - c'est le DEFAUT */ --fav: #FF4D8D; /* coeur favori, rose */ /* V371 - le bouton Progression est DORE, fixe (il ne suit plus le profil). ⚠️ V447 - IL RETROUVE UN PORTEUR : « J ai devant moi ». Le bouton Progression de la V371 n existe plus, et le jeton etait reste declare sans emploi - exactement le code mort que la regle des porteurs interdit. Il redit la meme chose : l or, c est le PARCOURS - ce qu on se prepare a regarder - la ou `--route-accent` dit AVEC QUI on avance. */ --or-progression: #FCCF00; /* MA NOTE prend la COULEUR DU PROFIL (V63), sur la carte comme dans la fiche. C'est la seule note qui appartienne a quelqu'un : les deux autres rapportent un chiffre collectif, celle-ci porte une signature - la meme que la bulle du HUD. ⚠️ ELLE VAUT `--star` TANT QU'IL N'Y A PAS DE PROFIL, et ce repli est ce qui evite d'ecrire le jaune une seconde fois en JS : `profile.js` POSE la teinte quand un profil existe et RETIRE la propriete quand il n'y en a plus. Un litteral recopie dans le script serait le piege nº 6 - deux valeurs a tenir d'accord, avec une regle ecrite pour le dire. */ --star-mine: var(--star); /* ⚠️ V132 (C2b) - LA COULEUR DE L ETOILE DU DUO. Elle vaut le JAUNE par defaut, comme celle du profil, et `js/app.js` la POSE sur la racine quand un duo existe - puis la RETIRE quand il n y en a plus, au lieu d y reecrire le jaune : un litteral recopie serait deux valeurs a tenir d accord (piege nº 6). Elle passe par le plancher de contraste (V117). */ --star-duo: var(--star); /* Echelle d IMPORTANCE des statuts - independante de la phase : un "Bonus" reste orange que la fiche soit bleue ou rouge. */ --tier-must: var(--doom); /* Indispensable - vert Doomsday */ /* ⚠️⚠️ V131 - LES TROIS TEINTES DE LA BARRE HERO PASSENT PAR UN JETON DE ROUTE, ET C EST CE QUI EVITE UN CYCLE. La barre est la MEME sur les deux routes (decision de l auteur, 2 septembre 2026 : « identique en design, sauf la couleur ») : redefinir `--doom` sur la barre l aurait fait se referencer elle-meme - une propriete personnalisee circulaire ne rend pas du vert, elle rend RIEN, et la barre aurait disparu SANS qu aucune erreur ne se produise. ⚠️ LA FAMILLE `--doom*` NE BOUGE PAS D UN CHIFFRE : elle continue de peindre la mention Doomsday, le statut `--tier-must`, le compte de la route et le bouton de portee. Ce qui change de nom, ce sont les TROIS endroits qui peignent LA BARRE - et `peindreRoute()` ne pose que `--route-accent`, sur la racine ; les deux autres s en derivent en CSS. Un litteral recopie en JS aurait ete le piege nº 6. */ --route-accent: var(--doom); /* ⚠️⚠️ V203 (R1) - LE COULISSANT A SA COULEUR, ET ELLE NE SUIT PLUS LA ROUTE. La V192 lui avait donne `--route-accent` avec un argument qui paraissait bon - « la couleur de la route qu il synchronise » - et le retour le refuse : un interrupteur qui change de teinte quand on repeint la barre laisse croire qu il DIT quelque chose de la barre, alors qu il ne commande qu un versement. ⚠️ C EST UN JETON, PAS DEUX LITTERAUX : la couleur a DEUX porteurs (la piste, en `color-mix`, et la bille). Le commentaire de la V192 disait deja « un litteral ici aurait ete un second porteur » - il reste vrai, c est sa VALEUR qui change (piege nº 6). ⚠️ IL VAUT LE VERT DU SITE, qui est deja la teinte de ce qui est ACQUIS (`--tier-must`, le compte de la route). Le rouge de marque etait exclu : il dit « defaire » sur ce menu meme, deux lignes plus bas (`Rompre le duo`). Et `--star-mine` VARIE aussi - on aurait remplace un lien par un autre. 🔴 PRIX NOMME : sur un profil qui n a pas choisi de couleur, `--route-accent` VAUT deja `--doom`, donc rien ne change a l oeil pour ces comptes-la. Ce n est pas un echec - le defaut etait juste, c est le LIEN qui etait faux. */ --switch-on: var(--doom); --route-soft: var(--doom-soft); --route-deep: var(--doom-deep); /* ⚠️⚠️ V453 - LES TROIS STATUTS ONT DESORMAIS LEURS PROPRES JETONS, ET C EST UNE SEPARATION, PAS UN RENOMMAGE (decision de l auteur : rouge, ambre, bleu). `--tier-must` disait DEUX choses a la fois depuis la V46 : « ce statut est le plus fort » ET « ceci est acquis, fini, vu » - la coche d un titre vu, le compte d une route finie, le temps d une route bouclee, *Express*. Les deux sens sont restes accordes tant que le statut etait vert ; il devient rouge, et ils se separent. ⚠️ LA FAMILLE `--tier-*` NE CHANGE PAS D UN CHIFFRE : elle garde le sens « acquis » et tous ses porteurs. Ce qui bascule sur les jetons neufs, ce sont les SEULS porteurs de STATUT : le fanion, la legende, le mot de la fiche, le mot de la carte, les trois pastilles de filtre. La retrouver ailleurs, c est le sens « acquis », pas le statut. ⚠️ LE ROUGE N EST PAS `--brand`, ET C EST VOULU : le rouge de marque dit « tout ce qui est general » (V63) - liens, S inscrire, Rompre le duo. Un statut qui l emprunterait ferait dire deux choses au meme rouge. */ --statut-requis: #FF5148; /* le plus fort - rouge, jamais le rouge de marque */ /* ⚠️⚠️ V459 - L AMBRE DEVIENT UN JAUNE (retour de l auteur : « l ambre n est pas assez en contraste avec le rouge »). Et c etait mesurable : l ambre etait a 33 deg de teinte, le rouge a 3 - trente degres d ecart entre deux oranges, c est ce que l oeil lisait comme « la meme famille ». Celui-ci est a 48 deg, et il est moins sature : il s eloigne du rouge sans partir dans le fluo (« un jaune pas trop flashi »). ⚠️ IL RESTE A DISTANCE DU JAUNE DE LA NOTATION (`--star`, #FFC531, 42 deg et pleine saturation) : les etoiles sont franchement plus chaudes et plus vives. Les deux se croisent sur une affiche - c est le seul endroit du site ou deux jaunes se touchent, et c est pourquoi l ecart est garde. */ --statut-suggere: #EFD34C; /* ⚠️⚠️ V464 - LE CADRE D UNE AFFICHE N EST PLUS A LA COULEUR DE LA ROUTE (retour de l auteur : « ca alourdit le visuel [...] disparaitre ou devenir blanc/gris discret »). Il disait « vu » une troisieme fois, apres l image qui reprend ses couleurs et la coche verte - et il le disait avec la seule couleur que la page emploie deja partout ailleurs, celle de la route. ⚠️ DEUX JETONS, PARCE QUE DEUX ETATS : le cadre d une affiche VUE, et celui d une affiche SURVOLEE. Le survol est plus clair que l acquis - il doit se distinguer de lui sur la meme carte, sinon survoler une affiche vue ne produit rien. ⚠️ EN PART DE `--paper`, PAS EN BLANC ECRIT : le jour ou le blanc casse du site bouge, les cadres suivent. */ --cadre-vu: color-mix(in srgb, var(--paper) 45%, transparent); --cadre-survol: color-mix(in srgb, var(--paper) 78%, transparent); /* ⚠️⚠️ V480 - `--ruban-l` EST PARTI AVEC LA COLONNE QU IL MESURAIT. Le bandeau n est plus une bande verticale POSEE SUR l affiche : c est une languette horizontale collee SOUS elle, large comme l image. Il n y a donc plus de largeur a tenir d accord entre deux regles - la pile d etiquettes a recupere le coin. ⚠️ CE QUI RESTE UN JETON, C EST LA HAUTEUR : la languette la declare et le voile d angle du « i » la lit pour ne pas deborder dessus. */ --languette-h: 30px; --statut-optionnel: #6FA8FF; /* bleu : rien d urgent, et aucune parente avec les deux autres */ /* ⚠️ V305 - le recommande passe de l orange au JAUNE (decision de l auteur : vert > jaune > blanc). Un jaune CITRON, pas l or de `--star` (#FFC531) : l or dit « ma note » et « meneur », il ne doit pas dire un statut. ⚠️ V453 - IL NE DIT PLUS UN STATUT : il garde ses autres porteurs (le signalement, « a revoir », le titre qui deborde de la plage horaire). */ --tier-reco: #FFE14D; /* Recommande - jaune */ --tier-bonus: #FFFFFF; /* Bonus - blanc casse. Le bonus ne se distingue plus par une teinte de plus mais par l'absence de teinte : il n'appartient a aucun degre d'urgence. */ /* ⚠️⚠️ V153 - LES TROIS MEDAILLES DU PODIUM SONT DES JETONS, PLUS DES LITTERAUX. Elles etaient ecrites DEUX fois chacune (la marche et le numero de rang), et la V153 leur ajoute un troisieme porteur : le carre de rang du menu de classement. Trois valeurs x trois porteurs, c etaient neuf litteraux avec une regle ecrite « les trois doivent rester egales » - le piege nº 6 mot pour mot, sur des couleurs que personne ne verrait diverger. ⚠️ Ce ne sont PAS un quinzieme, seizieme et dix-septieme gris : elles ne sont pas neutres, elles nomment un metal. La rampe d encre n est pas touchee. */ --medal-or: #E8B923; --medal-argent: #C8CBD4; --medal-bronze: #B0793A; /* ⚠️ V115 - « --tier-free » EST PARTI AVEC SON STATUT. Il peignait le mot « Hors canon », qui ne designe plus aucune fiche depuis la V40 : un jeton sans porteur est du code mort (piege nº 4), et c'est le geste que la V59 a fait pour la gelule et la V97 pour « .archive-note ». */ /* Accent de phase - surcharge par phase via JS */ --phase-accent: #1E9BFF; --phase-accent-soft: #33C4FF; /* ⚠️ V136 - « --phase-tesseract » EST PARTI. Il etait POSE par app.js sur la section de route ET sur le panneau de fiche, et LU par personne : les liaisons qui s en servaient sont parties en V48. Un jeton pose et jamais relu donne au lecteur la preuve d un mecanisme qui n existe plus - piege nº 4, meme geste que « --tier-free » en V115. */ /* Echelle : tout l'espacement derive de --poster-w (proportionnel) */ --poster-w: clamp(122px, 10.8vw, 152px); --poster-ratio: 2 / 3; --title-fs: clamp(.92rem, 1.15vw, 1.06rem); --gap: calc(var(--poster-w) * 0.12); --mf-pad: 13px; /* padding du cadre du jalon */ /* ⚠️⚠️ V296 - L ECHELLE TYPOGRAPHIQUE UNIQUE (point [46] d UPDATEV3). Cent quatre-vingt-cinq « font-size » en rem litteral portaient QUARANTE valeurs differentes (.5, .55, .58, .6, .62, .64, .66, .67, .68, .7...), et VINGT-DEUX etaient SOUS le plancher de 10,5 px de la V230 - la regle etait ecrite, le fichier ne la tenait pas. Huit marches, pas une de plus : une valeur neuve se choisit ICI, jamais en litteral. ⚠️ LES DEUX PLANCHERS SONT DES MARCHES (V230, V279) : « micro » = 10,56 px, le plus petit corps d une ETIQUETTE qui ne se clique pas ; « xs » = 11,04 px (.69rem, celle de `.footer-nav a` en V279), le plus petit corps d un texte FONCTIONNEL (lien, bouton, pli). Un plancher se franchit, il ne se frole pas. ⚠️ CE QUI RESTE HORS ECHELLE, ET POURQUOI : les titres fluides en clamp() (ils suivent la largeur, une marche fixe les figerait), les « em » (ils sont RELATIFS a leur parent - le sous-titre de carte suit fitTitles), et l impression en pt (une autre surface). */ --fs-micro: .66rem; /* 10,56 px - etiquette, plancher V230 */ --fs-xs: .69rem; /* 11,04 px - fonctionnel, la valeur exacte de la V279 */ --fs-s: .78rem; /* 12,48 px */ --fs-m: .86rem; /* 13,76 px */ --fs-base: .95rem; /* 15,2 px */ --fs-l: 1.05rem; /* 16,8 px */ --fs-xl: 1.3rem; /* 20,8 px */ --fs-2xl: 1.5rem; /* 24 px */ /* ⚠️⚠️ V497 - LA TAILLE D UNE NOTE POSEE SUR UNE CARTE, ET IL N Y EN A QU UNE (retour de l auteur : « les notes communautaires et personnelles doivent etre de la meme taille de police que pour les duos ; idem pour le bandeau dans groupe du coup »). Elles etaient DEUX : la languette a `--fs-micro` depuis la V488, le bandeau du duo et celui du groupe a `--fs-s`. Un jeton, trois lecteurs - « idem pour le groupe » devient un fait de structure et non une ligne de plus a tenir d accord. ⚠️ SA VALEUR EST CELLE DU DUO, parce que c est le duo qui sert de reference dans le retour. C est donc un RENVERSEMENT partiel de la V488, qui avait descendu la languette « de 1 ou 2 tailles » sur ma proposition : l auteur tranche autrement, et l egalite des deux notes - le vrai correctif de la V488 - ne bouge pas d un mot. */ --fs-note-carte: var(--fs-s); /* ⚠️⚠️ V497 - LA PART DU CADRE QU OCCUPE LE DESSIN DE L ETOILE. Mesure par `getBBox()` sur le trace lui-meme : 18,17 unites de haut dans un cadre de 24, soit 0,757. Ce n est pas un reglage, c est un FAIT sur le dessin - et c est ce qui permet de demander « une etoile aussi haute que les chiffres » sans ecrire une taille en pixels. Le jour ou le trace change, cette ligne change avec lui, et les trois tailles d etoile suivent. */ --etoile-cadre: .757; /* ⚠️⚠️ V296 - L ECHELLE D ESPACEMENT, ET CE QU ELLE NE TOUCHE PAS. La V44 avait refuse de normaliser l espacement parce que « la moitie des valeurs ne sont pas du style mais des MESURES PORTANTES ». Elles sont nommees ici pour qu on ne les confonde plus : PORTANTES (ne passent JAMAIS par l echelle) - --poster-w, --gap, --mf-pad, --mf-off, --enc-off, --title-fs et la boite du titre (calc(--title-fs * 2.6)), --pastille, --bar-h, --roadto-drop, --head-h / --warn-h / --consent-h (mesurees). DE STYLE - tout le reste, et c est a elles que l echelle s adresse. ⚠️ Elle est APPLIQUEE aux ecarts de rangee (« gap ») en rem litteral ; les marges et remplissages y viendront au fil des retouches, jamais par un remplacement de masse sur 8 000 lignes (la faute de la V194). */ --sp-1: .25rem; --sp-2: .45rem; --sp-3: .7rem; --sp-4: 1rem; --sp-5: 1.5rem; /* V424 - l embleme d un ruban (duo ET groupe) : 36 px, 46 des 1200 px */ --ruban-emb: 36px; --ruban-ecart: var(--sp-5); /* V424 - l ecart entre deux cotes d un ruban */ /* ⚠️ LA COQUILLE (V42, coupee en DEUX BORNES en V76). Une seule variable pour la gouttiere du site : le HUD, la barre d outils, les bandeaux de route, les grilles, le pied de page. Elle etait ecrite en dur - « min(1320px, 100% - 1.75rem) » - a DEUX endroits (.wrap et .phase-header), et une regle disait qu ils devaient rester egaux. Une regle ecrite est le symptome d une variable manquante. ⚠️ 1680 et non 1320 : le reproche principal etait « trop centre ». La rangee, elle, prend toute la fenetre depuis la V11 - c est le PLAFOND de cartes par ligne qui la retenait au centre, pas la coquille. ⚠️⚠️ V76 - LE PLAFOND DE 1680 px TOMBE, REMPLACE PAR DEUX BORNES. Au-dela de 1720 px de fenetre, tout le surplus devenait de la MARGE : deux colonnes vides sur les grands ecrans. Monter le plafond (2100 ? 2560 ?) n aurait fait que repousser le meme probleme d un cran. Une seule borne ne pouvait pas servir les deux besoins : une SCENE (des cartes, des cases, des barres - ca s etale) et une COLONNE DE LECTURE (des phrases - ca ne s etale pas). Il en faut donc deux, et chaque bloc declare laquelle il prend. ⚠️ LA GOUTTIERE NE BOUGE PAS (2,5 rem), ET C EST CE QUI REND LE CHANGEMENT SUR : en dessous de 1720 px de fenetre, le « min() » retenait DEJA « 100% - 2.5rem » - la coquille y vaut donc exactement ce qu elle valait, au pixel. Toutes les mesures du projet (1680, 1280, 820, 375, 320 px) sont inchangees PAR CONSTRUCTION ; seul ce qui est plus large que 1720 px change. */ --shell: calc(100% - 2.5rem); /* ⚠️ LA COLONNE DE LECTURE. C est l ANCIENNE valeur de « --shell », gardee telle quelle : les bandeaux de prose (consentement, avertissement « sans compte », pied de page) ne gagnent rien a s etaler, et une ligne de 2 400 px ne se lit pas. La resserrer davantage - 72rem, 90ch - serait une decision TYPOGRAPHIQUE, donc son propre increment : ici on CESSE de la faire grandir, on ne la retrecit pas. */ --lisible: min(1680px, 100% - 2.5rem); --mf-off: calc(-2px - var(--mf-pad)); /* recalage vertical du cadre */ /* Les DEUX bandes figees, mesurees en JS (voir mesureSticky dans app.js). Ces valeurs ne sont qu'un repli avant le premier calcul. ⚠️ ELLES ETAIENT TROIS JUSQU'A LA V77. Le HUD et la barre d'outils se figeaient l'un sous l'autre ; ils ont fusionne en une seule ligne - les onglets, "Filtres" et la recherche, le profil - et "--tools-h" a disparu avec la bande qu'elle mesurait. ⚠️ ELLE N'A PAS ETE REMPLACEE PAR UN LITTERAL : c'est le piege nº 6, et la V43 a passe une version a le retirer. Ce qui reste s'empile DANS L'ORDRE DU FLUX - l'en-tete, puis l'avertissement "sans compte" - chacune sur la SOMME de la precedente. ⚠️ "--hud-h" EST DEVENUE "--head-h" : le HUD n'existe plus, et un nom qui designe un mecanisme disparu est une fausse piste laissee au prochain lecteur (regle V59). */ --head-h: 52px; /* V77 : la ligne fusionnee, une seule rangee */ --warn-h: 0px; /* l'avertissement est masque par defaut */ /* ⚠️ V145 - LA HAUTEUR DE LA BANNIERE DE CONSENTEMENT. Elle ne sert qu a l ecran d accueil, qui s ouvre desormais DESSOUS : c est sa reserve de bas de page. 0 des qu on a repondu, c est-a-dire presque toujours. */ --consent-h: 0px; /* V407 - la capsule Snapline tient DANS la bande figee (45 px) : plus rien ne pend sous elle. `--roadto-drop` et `--roadto-grow` sont partis avec le debordement qu ils mesuraient ; `--roadto-air` reste, c est l air. */ /* ⚠⚠ V205 - L AIR SOUS LA BANDE, ET CE N EST PAS `--roadto-drop`. Le debordement dit OU FINIT LE BOUTON ; cette valeur dit COMBIEN DE VIDE le suit. Les additionner dans un seul jeton aurait pousse l avertissement « sans compte » et le menu Progression de 14 px, pour un ecart qui ne les concerne pas : ils se calent sur le BAS DU BOUTON, jamais sur la respiration qui vient apres. ⚠ ELLE VAUT AUX DEUX REGIMES. Sous 1200 px le bouton est dans le flux et la bande le contient, mais l ecart entre la bande et la barre hero est la meme question - « ni trop compact, ni trop vide ». */ /* ⚠️ V458 - 14 px -> 9 px (retour de l auteur : « reduis les espaces vides, header | road to doomsday »). C est le seul endroit a changer : la bande le pose en marge, et les deux coins s en deduisent. */ --roadto-air: 9px; /* ⚠️⚠️ V458 - L ECART DES DEUX COINS A LA BANDE, ET C EST UN JETON PARCE QUE DEUX ELEMENTS LE PARTAGENT : les trois routes a gauche (V455) et Synchroniser a droite (V448). Tous deux remontent dans l air de la bande, et l ecart qui reste vaut `--coin-air` plus le padding de la zone. Un nombre recopie dans les deux regles aurait derive des la premiere retouche (piege nº 6). « Un leger espace, mais pas trop » : l effet de coin tient a ce que l ecart soit visible sans etre un vide. */ --coin-air: 4px; /* ⚠️ LES RAYONS DEVIENNENT UNE ECHELLE, ET SE RESSERRENT (V44). Cinq valeurs cohabitaient - 8, 12, 14, 4, 6 - plus quelques 3 et 5 glisses au fil des versions. Trois degres suffisent, et ils disent quelque chose : plus un objet FLOTTE, plus son rayon est grand. ⚠️ ET LE RAYON DE BASE PASSE DE 8 A 5. Huit pixels sur tout ce qui traine, c est la signature "rounded-lg" du gabarit. Surtout, la grammaire du site est faite de CADRES et d AFFICHES - et une affiche est un rectangle net. Un panneau moins arrondi se lit comme un imprime, pas comme une application. ⚠️ 50% n est PAS dans l echelle, et les 1-2px des barres du signe "+/-" non plus : ce ne sont pas des reglages, ce sont des faits geometriques - un cercle, et le bout arrondi d un trait de 2px d epaisseur. Les tokeniser les rendrait solidaires d une echelle de panneaux avec laquelle ils n ont rien a voir. */ /* ⚠️⚠️ V493 - LES QUATRE RAYONS DE SURFACE TOMBENT A ZERO (retour de l auteur : « applique sur de nombreux elements le format rectangle/carre plutot que bords arrondis »). C est la suite directe de la V479, qui l avait fait pour les seules affiches et ecrivait deja l argument : « la grammaire du site est faite de CADRES et d AFFICHES - et une affiche est un rectangle net ». Le retour l etend aux surfaces. ⚠️⚠️ UNE LIGNE PAR JETON, ET RIEN D AUTRE N EST TOUCHE : 107 regles changent de forme sans qu une seule d entre elles soit rouverte. C est tout l interet d une echelle - et c est aussi ce qui rend le retour en arriere possible en quatre chiffres. ⚠️ LES TROIS NOMS RESTENT, BIEN QU ILS VAILLENT LA MEME CHOSE. Ils ne disent pas un nombre, ils disent un RANG - ce qui est pose, ce qui flotte, ce qui est une vignette. Les fondre maintenant qu ils sont egaux rendrait impossible de les redifferencier plus tard sans relire 107 regles. ⚠️⚠️ `--r-pill` NE BOUGE PAS, ET C EST LA BORNE DU RETOUR (« pas sur TOUS les elements du site mais sur certains oui », V479). Une pastille, une puce de filtre, la barre « Annuler » ne sont pas des surfaces aux coins adoucis : ce sont des objets dont la FORME est un batonnet. Les mettre au carre ne serait pas retirer un arrondi, ce serait changer l objet. ⚠️ `50%` NE BOUGE PAS NON PLUS, pour la meme raison qu a la V331 : un cercle est un fait geometrique, pas un reglage. */ --r-1: 0; /* V493 - vignettes, focus, petites pastilles */ --r-2: 0; /* V493 - ce qui est POSE : cartes, champs, boutons */ --r-3: 0; /* V493 - ce qui FLOTTE : fiche, popover, cadre de jalon */ --r-bande: 0; /* V493 - le bandeau de route */ /* ⚠️ V479 - LE RAYON DES AFFICHES, ET IL VAUT ZERO (retour de l auteur : « faire un test que les affiches soient dans un rectangle... je crois que c est vraiment ca le AI slop »). Une affiche de cinema est un rectangle : elle est imprimee, pliee, glissee dans un cadre, et aucun de ces objets n a de coin rond. Les trois surfaces qui en portent une empruntaient `--r-2`, le rayon des BOUTONS - une commande et une image n ont pourtant pas la meme nature. ⚠️ UN JETON, PAS TROIS ZEROS RECOPIES : le jour ou l auteur veut 2 px, une ligne change, pas trois. ⚠️ ET LA PORTEE EST BORNEE PAR LE RETOUR LUI-MEME : « pas sur TOUS les elements du site, mais sur certains oui ». Les cartes, les champs et les fenetres gardent leur rayon. */ --r-affiche: 0; /* V479 - la grille, la fiche, la fenetre de note */ --r-pill: 999px; /* ⚠️ V201 - LA PASTILLE DE COULEUR, SA ROUE, SA BARRE, ET LES DEUX RENTREES QUI LES ALIGNENT : cinq lecteurs pour une seule valeur, qui etait ecrite cinq fois a la main (piege nº 6). Elle vaut 34 px partout, et 42 px dans `.sheet`, qui a grandi. */ --pastille: 34px; /* V432 - LA LARGEUR DE LA BARRE ET DE SES DEUX LIGNES (demande de l auteur : « trop large »). Une valeur, trois lecteurs : la barre, la ligne du dessous et la tete de la zone Parcours sous 1200 px. */ /* V434 - elle suit la fenetre (plus large, demande de l auteur), toujours centree : 52rem au moins, 80rem au plus. */ --barre-l: clamp(52rem, 66vw, 80rem); /* V431 - les jetons du flanc gauche (`--flanc-*`) sont partis avec le menu Parcours, leur dernier porteur. */ /* V408 - `--decompte-h` et `--pend-h` (V364) sont partis : le compte a rebours et le menu Parcours sont descendus dans la zone Parcours, dans le flux. Plus rien ne pend sous la bande figee. */ /* ⚠️ V92 - LE RYTHME D'UNE SECTION D'ONGLET, ECRIT UNE SEULE FOIS. Cette valeur etait recopiee a l'identique sur `.roadmap`, `.archive`, `.favs`, `.amis-tab` et `.account-tab` ; aligner `.soon` dessus en aurait fait une SIXIEME copie, avec une regle en commentaire pour dire qu'elles doivent rester egales - c'est le piege nº 6 mot pour mot. Un jeton qui porte un raccourci entier suit la maison (`--frame-dim`). */ --sect-pad: clamp(1.5rem, 3vw, 2.25rem) 0 clamp(2rem, 5vw, 3.5rem); /* ⚠️ V97 (D1) - LA RESPIRATION SOUS LA TETE D UNE SECTION D ONGLET. Elle etait portee par la DESCRIPTION, qui vient d etre retiree de quatre ecrans : sans elle, le titre de `Amis`, de `Duo` et de `Mes favoris` tombait a .5rem au-dessus de son contenu. La valeur passe donc sur le TITRE - mais `Mon compte` garde sa description, donc la valeur existe desormais a DEUX endroits et devait rester egale : c est le piege nº 6 mot pour mot, et un jeton est sa reponse. ⚠️ V98 - CINQ PORTEURS DEPUIS QUE LA SECTION EQUIPES EXISTE. */ --tete-gap: clamp(1.4rem, 3vw, 2.4rem); --frame: 1px solid var(--ink-6); --frame-dim: 1px solid var(--ink-5); /* ⚠️ L OMBRE DOUCE GENERIQUE ETAIT INERTE, et c est la vraie trouvaille de la V44. "0 2px 6px rgba(0,0,0,.6)" pose du NOIR A 60% sur un fond NOIR : elle ne rend litteralement aucun pixel de difference. Le site portait donc une elevation qui n existait pas. Sur fond sombre, la lumiere ne vient pas d en haut, elle vient de la SURFACE : un objet monte en s eclaircissant (la rampe d encre) et en attrapant la lumiere sur son arete haute (le filet interieur). Ce n est pas un effet, c est la seule elevation qui se VOIE ici. ⚠️ L ombre portee ne disparait pas - elle redevient ce qu elle aurait toujours du etre : reservee a ce qui flotte VRAIMENT au-dessus du reste, et alors profonde et large, jamais 2px/6px. */ --lift-0: inset 0 1px 0 rgba(255, 255, 255, .045); --lift-1: 0 10px 26px -12px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .055); --lift-2: 0 28px 70px -18px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .07); /* ======================= L APPARIEMENT (V44) ======================= ⚠️ --display ET --body ETAIENT LA MEME VALEUR. Une seule grotesque faisait tout : les boutons, les intitules, les titres de film ET les synopsis. Ce n etait pas un appariement typographique, c etait une police unique avec deux noms de variable - et c est la raison principale pour laquelle le site "sonnait" gabarit. LA REGLE, ET ELLE TIENT EN UNE LIGNE : ARCHIVO garde tout ce qui se CLIQUE ou se REPERE. LITERATA prend tout ce qui se LIT EN PHRASES. Ce n est pas un partage decoratif, c est un partage de FONCTION - et c est pourquoi il ne se discute pas au cas par cas : un intitule, une valeur, un statut, un titre de carte se REPERENT du coin de l oeil ; un synopsis, un resume de spoiler, une page de CGU se LISENT ligne a ligne. Deux gestes differents, deux voix. ⚠️ ET LES TITRES DE CARTE RESTENT ARCHIVO, PAS PAR GOUT MAIS PAR MECANIQUE : fitTitles() resserre la CHASSE (font-stretch) avant de reduire le corps, et c est l axe wdth d Archivo qui rend ce recours possible. Literata n a pas d axe de chasse - poser un titre de carte dessus casserait le seul mecanisme qui empeche les titres de deborder sur leurs voisins. ⚠️ ORBITRON NE BOUGE PAS D UN ELEMENT. La tentation etait de la promouvoir en voix d affichage puisqu elle etait deja la : c est exactement ce que CLAUDE.md interdit depuis la V14, et il a raison - une geometrique de ce genre est illisible en petit corps et perd tout effet des qu elle est repetee. Elle sert UN nombre. Un appariement se fait avec une police faite pour LIRE, pas avec celle qu on a sous la main. */ /* Literata (SIL OFL 1.1, TypeTogether), variable 400-600, sous-ensemble latin, 86 Ko, SERVIE EN LOCAL comme les deux autres - aucun CDN, le hors-ligne reste reel et sw.js la precache. ⚠️ Pourquoi celle-la, et le test qui a tranche : sur fond sombre les serifs a fort contraste MAIGRISSENT - les deliees disparaissent et le texte devient gris. Cinq candidates ont ete rendues cote a cote sur --ink-0, au corps REEL du synopsis (.95rem) et non en specimen : Petrona et Faustina, plus etroites et de hauteur d x plus basse, tombaient d un ton sous Archivo ; Newsreader tenait mais coutait 132 Ko. Literata a la plus grande hauteur d x et le plus faible contraste du lot - elle garde sa couleur sur le noir. */ /* ⚠️⚠️ V330 - VISUEL_B (B3) : QUATRE POLICES. Ce qui precede decrit le Visuel_A (tag `visuel-a`) et reste vrai sur son partage de FONCTION : une voix pour ce qui se repere, une pour ce qui se lit. Les voix changent : SAIRA (--display, --body) : tout ce qui se clique ou se repere. Elle a un axe de chasse (wdth 50-125), donc fitTitles garde son recours. SPECTRAL (--read) : ce qui se lit en phrases. Quatre fichiers statiques (400, 500, et leurs italiques - un VRAI italique, regle V44). ARCHIVO reste pour la BANDE FIGEE seule : Saira a des jambages hauts, la bande montait de 45 a 57 px (mesure de l essai). ORBITRON reste le pourcentage, et lui seul. Encode Sans (essai) et Literata (Visuel_A) partent. */ --read: "Spectral", Georgia, "Times New Roman", serif; /* Une SEULE exception a Archivo : le pourcentage de progression. Orbitron (SIL OFL 1.1, 11,8 Ko) est une geometrique spatiale - elle ne sert QU A ce nombre, qui est la promesse de Doomsday. Nulle part ailleurs. */ --cosmic: "Orbitron", "Archivo", system-ui, sans-serif; --display: "Saira", "Archivo", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif; --body: "Saira", "Archivo", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif; /* La voix de la bande figee (V330) : Archivo, pour tenir --head-h a 45 px. */ --bande: "Archivo", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif; /* ⚠️⚠️ V506 - L ECHELLE DE CHASSE, ET C EST L HISTOIRE DE LA V44 SUR L AUTRE AXE. La rampe d encre existe parce que quatorze gris ad hoc s etaient accumules ; l axe de CHASSE de Saira en etait au meme point - ONZE valeurs, dont cinq tassees entre 108 et 122 pour 99 emplois. Ce n etait pas une echelle, c etait de l accretion : `.card-title` portait 112 dans une regle et 118 dans une autre, `.route-opt` faisait 110 au repos et 116 a l etat courant, sans qu une seule ligne dise que c etaient deux marches. ⚠️ SIX MARCHES, ET CHACUNE REPOND A UNE QUESTION - c est ce qui la rend relisable. Trois etaient DEJA nommees dans DESIGN.md (route 58, etiquette 80, affichage 118) sans exister nulle part comme jeton ; les trois autres sont des roles qu on lisait dans le code sans pouvoir les nommer. ⚠️ DEUX REGROUPEMENTS, ET DEUX SEULEMENT : 108 et 110 rejoignent 112 (c est la valeur DOMINANTE des trois - 46 emplois contre 19 et 12, donc celle qui deplace le moins), 116 rejoint 118. Tout le reste est un renommage a l identique. Les 31 emplois qui bougent gagnent au plus 4 points de chasse, mesures au DOM : aucun debordement horizontal. ⚠️ LE `font-stretch: 62% 125%` DES @font-face N EST PAS DE CETTE ECHELLE et n y entre pas : c est un DESCRIPTEUR - il declare la plage que le fichier sait couvrir, pas un style. */ --ch-route: 58%; /* les titres de route - la signature de la page */ --ch-etiquette: 80%; /* les etiquettes : annee d une carte, intitule d une stat */ --ch-titre: 100%; /* les titres de FILM, casse normale - le contraste avec --ch-route est ce qui hierarchise la page */ --ch-ui: 112%; /* ce qui se clique ou se repere : onglets, boutons, menus */ --ch-affiche: 118%; /* l affichage : la capsule Snapline, les grands mots */ --ch-chiffre: 122%; /* un CHIFFRE qui est le sujet : une note, un rang, un pourcentage de profil. Le role que le code avait deja - neuf porteurs - et qu il ne savait pas dire. */ } /* ⚠️ V330 - LA BANDE FIGEE PARLE ARCHIVO : elle redefinit les deux voix pour tout ce qu elle contient (boutons, champ, menus deroulants compris). */ .topbar { --display: var(--bande); --body: var(--bande); font-family: var(--bande); } /* Archivo variable, servie EN LOCAL (aucun CDN, le hors-ligne reste reel). SIL Open Font License 1.1 - voir assets/fonts/LICENSE.txt */ @font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 800; font-stretch: 62% 125%; font-display: swap; src: url("../assets/fonts/archivo-var.woff2") format("woff2"); } /* V330 - Saira variable (chasse 50-125 %, graisse 100-900), SIL OFL 1.1, sous-ensemble latin, 99 Ko, servie EN LOCAL. */ @font-face { font-family: "Saira"; font-style: normal; font-weight: 100 900; font-stretch: 50% 125%; font-display: swap; src: url("../assets/fonts/saira-var.woff2") format("woff2"); } /* V330 - Spectral, SIL OFL 1.1, sous-ensemble latin : quatre fichiers statiques de 22 a 24 Ko (91 Ko en tout, contre 175 pour Literata). ⚠️ La regle de l italique ci-dessous (ecrite pour Literata) vaut pour elle : L ITALIQUE EST UN VRAI FICHIER, PAS UNE OBLIQUE SYNTHETIQUE. La premiere version de la V44 ne chargeait que le romain, au motif que 89 Ko pour quelques etait cher. Rendue, la page "A propos" montrait NEUF italiques - les titres de film s ecrivent en italique, c est une convention d edition et ces pages sont de l edition - tous PENCHES PAR LE MOTEUR, c est-a-dire un romain incline a la volee. Sur une grotesque ca passe inapercu ; sur un serif, dont l italique est un dessin a part entiere (le a devient rond, le f descend), l oblique synthetique est exactement le defaut "herite par defaut" que la V44 vient corriger. ⚠️ Et l argument du poids ne tient pas a l examen : le service worker precache DEJA soixante-seize affiches. 89 Ko, c est deux affiches. */ @font-face { font-family: "Spectral"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/spectral-400.woff2") format("woff2"); } @font-face { font-family: "Spectral"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("../assets/fonts/spectral-500.woff2") format("woff2"); } @font-face { font-family: "Spectral"; font-style: italic; font-weight: 400; font-display: swap; src: url("../assets/fonts/spectral-italic-400.woff2") format("woff2"); } @font-face { font-family: "Spectral"; font-style: italic; font-weight: 500 700; font-display: swap; src: url("../assets/fonts/spectral-italic-500.woff2") format("woff2"); } /* Orbitron variable, SIL OFL 1.1 - servie en local elle aussi (aucun CDN). Reservee au POURCENTAGE de progression : la seule exception a Archivo. */ @font-face { font-family: "Orbitron"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("../assets/fonts/orbitron-var.woff2") format("woff2"); } * { box-sizing: border-box; } /* ========================================================================= [hidden] BAT TOUTE CLASSE QUI POSE UN display. Regle de reset, unique !important du site. Le piege : la feuille du navigateur declare [hidden] { display: none }, mais c'est un selecteur d'ATTRIBUT - n'importe quel selecteur de CLASSE le bat. Un element que le JS masque par ".hidden = true" et que le CSS met en display: flex / inline-flex / grid / inline-block reste donc AFFICHE, avec le contenu du titre precedemment ouvert. Il a ete corrige quinze fois, une ligne a la fois, depuis la V13 : .meta-line (V13), .phase-chip (V39)... et il en manquait encore une, .cast-more, qui laissait le lien "Voir tout le casting sur TMDB" pointer vers le film precedent sur les fiches sans champ "tmdb" (Avengers: Doomsday). Une regle vaut mieux que seize. ⚠️ Pourquoi !important : sans lui la regle ne gagne que par ORDRE DE SOURCE, donc elle devrait vivre en BAS du fichier et se casserait au premier composant ajoute apres elle. La specificite continue d'arbitrer ENTRE declarations !important : ".foo[hidden] { display: flex !important }" reste disponible si un cas l'exige un jour. Aucun ne l'exige aujourd'hui. ========================================================================= */ [hidden] { display: none !important; } /* ⚠️ LA RESERVE DE DEFILEMENT COMPTE LES DEUX BANDES (V43, V77). Elles etaient trois ; la fusion de l'en-tete en a retire une. Avec la seule hauteur de l'en-tete, une ancre atterrirait SOUS l'avertissement fige - donc invisible, et sans rien pour le dire. */ html { scroll-padding-top: calc(var(--head-h) + var(--warn-h) + var(--fige-h, 0px) + 12px); } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; /* V329 (Visuel_B) - une lumiere de salle a peine levee au-dessus de la scene, neutre ; le fond reste --ink-0 partout ailleurs. */ background: radial-gradient(120% 60% at 50% -10%, #18181E 0%, var(--ink-0) 60%) fixed, var(--ink); color: var(--text); font-family: var(--body); -webkit-font-smoothing: antialiased; } /* Les elements d'affichage sont ELARGIS (axe wdth), pas seulement grassis : c'est ce qui leur donne de la prestance sans les rendre compacts. */ .phase-title, .stat-label, .stat-val, .stat-hours, .card-title, .modal-title, .fold-head, .status-badge { font-family: var(--display); font-weight: 800; font-stretch: var(--ch-ui); } .phase-title, .modal-title { font-stretch: var(--ch-affiche); } /* ⚠️ LA LISTE DE CE QUI SE LIT EN PHRASES (V44) - et elle est COURTE, ce qui est le signe qu'elle est juste. Un site d'interface a peu de vraie prose : l'accroche de l'accueil, le synopsis, les deux textes de spoiler, le bandeau de consentement, et les quatre pages documentaires (voir pages.css). Tout le reste se repere du coin de l'oeil et reste a Archivo. ⚠️ LE CORPS NE BOUGE PAS D'UN DIXIEME. Literata a une hauteur d'x plus grande qu'Archivo : au MEME corps elle parait deja un demi-point plus grosse. Remonter la taille "parce que c'est du serif" ferait deborder les blocs de la fiche, dont la hauteur est calee sur l'affiche. ⚠️ Et --text-2, pas --paper : sur fond sombre un serif blanc pur s'auréole. La couleur de lecture est la meme que celle qu'ils avaient. */ .landing-tagline, .modal-synopsis, .spoiler-resume, .spoiler-role, .consent-text, .consent-note { font-family: var(--read); font-weight: 400; /* Un serif se serre naturellement plus qu'une grotesque : on rend le dixieme de chasse que la police prend, on ne "corrige" pas la police. */ letter-spacing: .004em; } /* ⚠️ LE MODIFICATEUR NE POSE PAS UNE SECONDE « width », IL REDEFINIT LA BORNE QUE « .wrap » LIT. Deux declarations de meme specificite (0,1,0) ne se departagent que par l ORDRE DE SOURCE - et « une regle qui ne gagne que par ordre de source ne gagne pas, elle attend » (piege nº 2, V45). Une propriete personnalisee posee sur l element lui-meme, elle, est arbitree par la specificite du selecteur qui la pose : il n y a plus de course. */ .wrap { width: var(--borne, var(--shell)); margin-inline: auto; } .wrap--texte { --borne: var(--lisible); } /* --------------------------- Le nom du site ----------------------------- */ /* ⚠️ LE HEADER EST SUPPRIME (V59) : titre, accroche et leurs cinq regles. Ils repetaient sur la page principale ce que la page d'accueil dit deja, et ils le repetaient sur la seule bande que la roadmap doit occuper. ⚠️ CE QUI RESTE N EST PAS UN RESIDU. C'etait le seul

du document : sans lui la page n'a plus de nom pour un lecteur d'ecran ni de racine dans son plan. Il est donc masque VISUELLEMENT, pas retire - ce qui part, c'est ce qui s'affichait. ⚠️ ET `.doom` PART AVEC L ACCROCHE : c'etait son unique porteur du site. Les quatre pages documentaires ont leur propre `.doc-callout--doom`, qui ne depend pas de cette regle. Une classe sans porteur est du code mort (piege nº 4), et une classe utilitaire n'y echappe pas. */ /* ⚠️ V77 (B2) - IL REDEVIENT VISIBLE, ET C'EST LE MEME

. La V59 l'avait masque visuellement sans le retirer, precisement pour que la page garde un nom : il n'y a donc rien a recreer, seulement une regle a defaire. ⚠️ "GRAND, MAIS SANS PRENDRE TROP D'ESPACE" : il vit dans le FLUX, pas dans la bande figee - ce qu'il coute, on ne le paie qu'a l'arrivee. Le corps est borne par un clamp, la casse est celle du site (capitales, decision de DA), et la police est Archivo : un titre se REPERE, il ne se lit pas en phrases (appariement V44). */ /* ⚠⚠ V101 (D3) - IL EST DE NOUVEAU MASQUE VISUELLEMENT, COMME EN V59, ET POUR LA MEME RAISON EXACTE : « masque sans etre retire, precisement pour que la page garde un nom ». Ce qui a change entre-temps, c est que le mot ROAD TO est desormais A L ECRAN - il EST le grand bouton de la bande figee. Deux titres peints diraient deux fois la meme chose. ⚠ IL N EST PAS RETIRE DU DOM : le document doit garder son `

`. Meme technique que `.fmenu-label` (V54). */ .site-name--sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* V228 - LE LIEN D'EVITEMENT : hors ecran au repos, pose au-dessus de la bande figee (z-index 40) quand il a le focus. Il ne prend aucune place : il ne decale rien, ni au repos ni au focus. */ .evitement { position: absolute; left: .75rem; top: .6rem; z-index: 95; padding: .55rem .9rem; min-height: 34px; background: var(--ink-3); color: var(--text); border: 1px solid var(--ink-6); border-radius: var(--r-2); font-weight: 600; text-decoration: none; transform: translateY(-200%); } .evitement:focus { transform: none; } @media (prefers-reduced-motion: no-preference) { .evitement { transition: transform .15s ease; } } /* La cible d'un saut ne se cache pas sous la bande figee. */ .roadmap, .archive, #tabFav, #tabCompte { scroll-margin-top: calc(var(--head-h, 45px) + var(--warn-h, 0px)); } .roadmap:focus, .archive:focus, #tabFav:focus, #tabCompte:focus { outline: none; } /* ============== L EN-TETE FIGE (V77 - B2) ============================== UNE SEULE BANDE, ET ELLE EN REMPLACE DEUX. Jusqu'a la V76, le HUD (V52/V59) et la barre d'outils (V43/V54) se figeaient l'un sous l'autre : 201 px de reserve, payes a CHAQUE pixel de defilement. La ligne fusionnee porte les onglets, "Filtres", la recherche et le profil ; les cases, le titre et la barre de progression redescendent dans le FLUX. ⚠️ CE N'EST PAS UNE QUATRIEME BANDE, C'EN EST UNE QUI EN REMPLACE DEUX. La V41 avait refuse d'AJOUTER une bande figee, jamais d'en fusionner deux. ⚠️ ELLE GARDE LE VOILE ET L'OMBRE DU HUD, tires de la rampe (V44) : depuis que le fond de page a quitte le noir pur, un voile noir rendrait la bande PLUS SOMBRE que la page qu'elle recouvre. ⚠️ ET SON FILET DU BAS EST « LA BARRE DE SEPARATION DE LA LIGNE DES ONGLETS TOUT EN HAUT DE PAGE » - la seule que B5 garde. Elle etait portee par ".tabs" ; dans une ligne a trois colonnes, un "border-bottom" pose sur la colonne du milieu n'aurait trace qu'un bout de filet. */ .topbar { position: sticky; top: 0; z-index: 40; padding: .34rem 0 0; /* ⚠️⚠️ V441 - UNE SEULE ECHELLE POUR TOUTE LA BANDE (retour de l auteur : « les elements ne sont pas a la taille du header quand il est grossi »). La V440 faisait grandir la bande ET la capsule, chacune de son cote et chacune a son rythme : le reste - recherche, Filtres, drapeau, profil - gardait ses 34 px au milieu d un rang de 62, et les trois morceaux bougeaient sur 180 ms. D ou le defaut graphique signale. Desormais UN SEUL NOMBRE commande tout : `--tete-ech`. Tout ce qui vit dans la bande se mesure en `--pastille`, et `--pastille` vaut ce nombre fois 34. Rien n est recopie, rien ne peut se desynchroniser. ⚠️⚠️ AUCUNE TRANSITION SUR CE QUI TIENT DE LA PLACE : la bande change de taille en UNE IMAGE. Une animation, meme de 180 ms, c est dix images pendant lesquelles `--head-h` ment - la ligne figee (V427) et les bandeaux de saga se posent trop haut. C est deja ce qui avait fait retirer la transition du rembourrage en V440. */ --tete-ech: 1; --pastille: calc(34px * var(--tete-ech)); /* ⚠️⚠️ V449 - LA CAPSULE A LE DROIT D ETRE PLUS GRANDE QUE LE RANG, ET C EST LE SEUL ELEMENT DANS CE CAS (retour de l auteur : « plus imposante tout en respectant la taille du header et sans depasser »). Elle est hors du flux (V101), donc sa taille ne commande AUCUNE hauteur : elle peut remplir ce que le rembourrage laisse, la ou les autres la fixent. ⚠️ LE PLAFOND N EST PAS UN GOUT : le rang vaut 40 x l echelle (le plancher de `.identity`), la pastille 34 x l echelle. 40 / 34 = 1,176 - au-dela, la capsule serait plus haute que le rang et sortirait de la bande. On s arrete juste en dessous, et ce rapport se recalcule tout seul si un jour le plancher bouge. */ --caps-plus: 1; /* ⚠️⚠️ V440 - LA BANDE RESPIRE EN HAUT DE PAGE, ET SE RESSERRE AU DEFILEMENT (planche D1, demande de l auteur). C est la BANDE ENTIERE qui change, pas la seule capsule : `est-haut` est posee par `js/app.js` au premier pixel de defilement. ⚠️ LA CONTRAINTE DE LA V77 TIENT : une fois defilee, la bande revient a ses 45 px - c est-a-dire a ce qu elle coute pendant tout le reste de la lecture. Ce qu elle prend en plus, elle ne le prend qu a l arret. ⚠️ `--head-h` SUIT TOUT SEUL : elle est MESUREE (`mesureSticky`), et son ResizeObserver voit la bande grandir et retrecir. Aucun nombre ici. ⚠️⚠️ SA HAUTEUR NE S ANIME PAS, ET C EST MESURE : une transition sur le rembourrage fait LAGUER --head-h de 180 ms, donc la ligne figee (V427) et les bandeaux de saga se posent 16 px trop haut pendant ce temps. Seule la capsule s anime : elle est hors du flux, elle ne commande aucune hauteur. */ /* ⚠⚠ V101 (D3) - LA RESERVE DU GRAND BOUTON, ET C EST LE SEUL LEVIER. Un `margin-bottom` sur un element `sticky` pousse ce qui suit SANS grandir sa propre boite : `--head-h`, mesuree au `getBoundingClientRect`, ne bouge pas d un pixel. C est ce qui permet au bouton de DEPASSER de la bande sans l EPAISSIR - la contrainte ecrite de la fiche (la V77 a passe une version a ramener cette bande de 201 px a 45, et elle se paie a chaque pixel de defilement, V53). ⚠⚠ V110 (E4) - ET C EST POSE ICI PARCE QUE LA BANDE NE S EN VA JAMAIS. La V79 puis la V101 le justifiaient par la tete de page, MASQUEE sur cinq des sept ecrans : elle n existe plus du tout depuis E4, et la raison de fond est la meme, en plus forte. Une reserve doit etre portee par ce qui est TOUJOURS a l ecran. */ margin-bottom: var(--roadto-air); /* V408 : plus rien ne pend */ background: color-mix(in srgb, var(--ink-0) 95%, transparent); backdrop-filter: blur(8px); box-shadow: 0 1px 0 var(--rule), 0 12px 26px -8px rgba(0, 0, 0, .9); } /* ⚠️ TROIS COLONNES minmax(0,1fr) / auto / minmax(0,1fr), ET C'EST CE QUI EMPECHE LES ONGLETS DE SAUTER D'UN ONGLET A L'AUTRE. "Filtres" et la recherche suivent l'onglet (V52) : ils disparaissent sous Archives, Favoris, Compte et les apercus. Avec deux fractions EGALES de part et d'autre, la rangee du milieu reste centree sur la PAGE qu'elles soient la ou non - c'est le geste que la V59 avait pose pour le profil, reemploye tel quel. Il n'y a donc aucune place a « garder » ni a « rendre » a la main, et rien a mesurer pour ca. ⚠️ align-items: center - les trois blocs n'ont pas la meme hauteur, et c'est la ligne qui les tient, pas eux. */ .topbar.est-haut { padding: .5rem 0 .35rem; --tete-ech: 1.18; --caps-plus: 1.1; } /* ⚠️ PLUS AMPLE DES 621 px SEULEMENT : sur telephone la capsule vit entre le drapeau et le profil, et au-dela de ce facteur elle les touche (mesure a 375 px, essai « touche » de la V425). */ @media (min-width: 621px) { .topbar.est-haut { --tete-ech: 1.22; --caps-plus: 1.16; } } /* ⚠️ LES MENUS DE LA BANDE NE GRANDISSENT PAS AVEC ELLE : ils sont dedans par le document, pas par le regard. Leurs lignes gardent la cible du site. */ .topbar .fmenu-pop, .topbar .langue-pop, .topbar .profile-pop, .topbar .notif-pop { --tete-ech: 1; } .topbar-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: var(--sp-4); } /* A GAUCHE : le menu "Filtres" et la recherche, dans cet ordre (maquette D). Ils AGISSENT sur la rangee, donc ils suivent l'onglet - mais la LIGNE reste : c'est le conteneur qui se masque, pas la bande. */ .topbar-tools { grid-column: 1; grid-row: 1; justify-self: start; display: flex; align-items: center; gap: .55rem; width: 100%; min-width: 0; } /* ================ V306 - LE COMPTE A REBOURS (retour de l auteur) ======== ⚠️⚠️ V408 - IL QUITTE LA BANDE FIGEE POUR LE CENTRE DE LA ZONE PARCOURS (demande de l auteur) : « Road to » en blanc, le nom de la destination a sa couleur, puis les chiffres. Il est dans le flux : la bande ne le porte plus. ⚠️ DESSIN SOBRE, EN ARCHIVO (il n est pas en `--cosmic` : Orbitron ne sert qu au pourcentage). */ .decompte { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: .1rem .45rem; min-width: 0; font-family: var(--display); font-variant-numeric: tabular-nums; color: var(--text-2); text-align: center; } .decompte-titre { display: inline-flex; align-items: baseline; gap: .35rem; font-stretch: var(--ch-ui); font-weight: 800; font-size: var(--fs-s); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; } .decompte-road { color: var(--text); } .decompte-nom { color: var(--roadto-teinte, var(--doom)); } /* V371 - vert Doomsday ; V423 - ou la teinte du film choisi */ .decompte-case { display: inline-flex; align-items: baseline; gap: .12rem; } .decompte-val { font-stretch: var(--ch-affiche); font-weight: 700; font-size: var(--fs-m); color: var(--text); } .decompte-unite { font-size: var(--fs-micro); color: var(--text-dim); } .decompte-jour { font-weight: 700; font-size: var(--fs-s); color: var(--text); } /* ⚠️⚠️ V483 - « ROAD TO » PLUS IMPOSANT, MAIS PAS SUR TELEPHONE (retour de l auteur, deux phrases de la meme liste : « Road to doit etre plus imposant sans abuser non plus » et, pour le telephone, « le compte a rebours doit etre celui de la version actuelle - tient sur la largeur d une seule ligne uniquement »). ⚠️ UN SEUL CRAN DE L ECHELLE, PAS DEUX : le titre passe de `--fs-s` a `--fs-m`, les chiffres de `--fs-m` a `--fs-base`, l unite du plancher d etiquette a `--fs-s`. « Sans abuser » est une consigne, pas une figure de style - le compte a rebours reste le voisin de Complet/Express, pas leur titre. ⚠️ ET LE SEUIL EST 621 px, LE MEME QUE TOUTE LA ZONE PARCOURS : en dessous, la bande du compte a rebours prend deja la ligne entiere (voir plus bas), et un cran de plus la ferait passer a DEUX lignes. */ @media (min-width: 621px) { .decompte-titre { font-size: var(--fs-m); } .decompte-val { font-size: var(--fs-base); } .decompte-unite { font-size: var(--fs-s); } .decompte-jour { font-size: var(--fs-m); } } /* ============== LA TETE DE PAGE - ELLE N EXISTE PLUS (V110 - E4) ======= ⚠️⚠️ `.pagehead` ET `.pagehead-inner` SONT SUPPRIMEES, ET CE N EST PAS UN RANGEMENT. La V77 les avait posees pour porter le TITRE et les CASES ; le titre est parti dans la bande figee (V101), le bouton SYNCHRONISER aussi (V105), et le menu PROGRESSION vient de sortir du flux (E4). Il ne restait qu un conteneur vide portant son seul padding - c est-a-dire exactement les 27 px de PADDING VIDE que la V92 a passe une version a retirer, et que rien ne signale puisque le conteneur est vide, pas casse. ⚠️ CE QUI PART, PART EN ENTIER (piege nº 4) : la section, sa grille a trois colonnes, son `row-gap` et son repli sous 700 px. Une regle CSS dont l objet a disparu ne se laisse pas « au cas ou » - le code mort ne fait rien, une regle PERIMEE fait quelque chose de FAUX (lecon V59). */ /* ====== LE MENU PARCOURS (V80 -> V430) EST PARTI EN ENTIER (V431) ======== Demande de l auteur : *Suivi titres* et *Mon marathon* s ouvrent sous leurs portes (`.ancre-pop`, plus bas). Le flanc gauche qu il occupait sous 1200 px est vide : la reserve des rangees de cartes part avec lui. */ /* ================= LE BOUTON (V210 - partie 5, V203) ============ ⚠️⚠️ C EST `` EN MIROIR, ET IL EST CONSTRUIT COMME LUI - PAS COMME UN OBJET NEUF. Les trois regles que le menu Progression a payees (V80, V110) s appliquent mot pour mot : 1. `writing-mode`, JAMAIS `transform: rotate()` - une rotation tourne la boite SANS reserver sa place, donc deux valeurs a tenir d accord a la main (piege nº 6) ; 2. un CENTRAGE PAR MARGES - `top` calcule sur la bande figee, `bottom: 0`, `margin-block: auto` - il ne peut donc jamais se poser sous la bande, quelle que soit sa hauteur ; 3. un APLAT (--ink-1) - colle au bord sans fond, il flotterait par-dessus les affiches : illisible. ⚠️⚠️ MAIS LE SENS DE LECTURE S INVERSE, ET C EST LA PARTIE QU ON NE RECOPIE PAS. `Progression` est a GAUCHE : son libelle porte un `rotate(180deg)` pour se lire du bas vers le haut, et sa rangee est en `row-reverse` pour que le chevron ne se lise pas AVANT le mot. Ici le bouton est a DROITE et le retour demande qu il se lise « du S vers le L », c est-a-dire de HAUT en BAS : `writing-mode: vertical-rl` SEUL donne ce sens, donc PAS de rotation, et l ordre du document (libelle puis chevron) est deja le bon - donc PAS de `row-reverse`. On transpose, on ne recopie pas. ⚠️ `.socmenu-*` EST UN ESPACE DE NOMS. `.pmenu-pop` a deja donne une fois son `left` au popover de progression (V80), SANS qu aucune erreur ne se produise. ⚠️⚠️ LE PANNEAU VIT DANS LE FLUX DU CONTENEUR, PAS EN `position: absolute`, ET C EST CE QUI BORNE TOUT SANS UN CALCUL. `.socmenu` est une rangee `row-reverse` ancree au bord droit : le bouton reste colle au bord, la colonne des deux sous-boutons se pose a sa gauche, le panneau a gauche d elle. La hauteur du conteneur suit son plus grand enfant, donc `margin-block: auto` centre l ENSEMBLE - « il grandit ou rapetisse selon le nombre d elements » sans une seule hauteur ecrite. ⚠️ SON `z-index` EST UNE REGLE, JAMAIS UN ORDRE DE DOCUMENT (piege nº 2) : 30, comme `Progression` - sous l avertissement « sans compte » (35), sous la bande figee (40), sous l accueil (70), les fiches (78 et 80) et le bandeau de consentement (90). Les fenetres qu il OUVRE le recouvrent donc par construction. ⚠️ LE LOGO ET L ENCADREMENT SONT ILLUMINES A LA COULEUR DU PROFIL - `--star-mine`, qui passe deja par le PLANCHER DE CONTRASTE (V129). Une couleur presque noire ne peut donc pas rendre le bouton invisible. */ /* ⚠️⚠️ V293 - IL PASSE AU BORD GAUCHE, SOUS LE BOUTON PROGRESSION (voir `.progmenu`) : meme boite, meme centrage, rail pose en BAS. Ce qui est dit plus haut du bord DROIT (row-reverse, coin droit carre) est historique. */ /* ⚠️⚠️ V410 - LE PANNEAU DESCEND DE LA BANDE, A DROITE, sous le bouton des amis (entre la cloche et le profil). La boite est fixe : la bande l est. */ .socmenu { position: fixed; z-index: 30; top: calc(var(--head-h) + var(--warn-h) + .4rem); right: max(1rem, calc((100% - var(--shell)) / 2)); pointer-events: none; } .socmenu-pop { pointer-events: auto; } /* ⚠️ LE COIN DROIT EST CARRE, LE GAUCHE ARRONDI - l exact miroir de `Progression`. Le bouton est COLLE au bord de la fenetre, et un cote arrondi contre un bord droit laisserait deux croissants de fond. Meme valeur `--r-pill`, posee sur les deux coins qui FLOTTENT, et sur eux seuls. ⚠️ LA CIBLE DE 34 px SE TIENT PAR LA LARGEUR, comme celle de `Progression` et comme le coeur de favori (V6). En dessous, c est impossible au doigt. */ /* ⚠️⚠️ V220 - `.socmenu-btn`, `.socmenu-label` ET `.socmenu-caret` SONT PARTIES AVEC LEUR PORTEUR : le bouton n existe plus (renversement de la V210). Ce qu il portait - l aplat, le filet a la couleur du profil, le coin droit carre colle au bord - passe aux DEUX boutons, IDENTIQUES, « superposes avec un petit espace ». ⚠️ 40 x 44 px : au-dessus du plancher tactile de 34 px, et ce sont desormais les seules commandes de la couche sociale sur la page. */ /* V410 - le bouton des amis : le gabarit de la cloche, en BLANC pur, quelle que soit la couleur du profil (demande de l auteur). Ouvert, il s eclaircit. */ /* Deux classes : `.notifs-btn` vit plus bas dans la feuille et gagnerait a l ordre de source (piege nº 2). */ .notifs-btn.amis-btn { color: #FFFFFF; } .notifs-btn.amis-btn svg { width: 22px; height: 22px; } .notifs-btn.amis-btn[aria-expanded="true"] { background: var(--ink-3); border-color: var(--ink-6); } /* ⚠️ LA LARGEUR EST BORNEE ET LA HAUTEUR SUIT LE CONTENU - « ni trop petit ni trop large », « il grandit ou rapetisse selon le nombre d elements ». Le plafond compte ce qui est A DROITE du panneau (le bouton, la colonne des sous-boutons et leurs deux gouttieres) : sans ca, a 320 px, le panneau pousserait le bouton hors de la fenetre. Mesure a 320 px. ⚠️ V142 - MEME REPLI `vh` -> `dvh` que les trois autres surfaces flottantes qui defilent : `90vh` se resout sur la GRANDE fenetre du telephone. ⚠️ ET `overscroll-behavior: contain` : sans lui, arrive en bout de course, le geste CHAINE vers la page derriere. */ .socmenu-pop { /* ⚠️ V211 - LA LARGEUR CONFORTABLE DEMANDEE PAR LE RETOUR (« le panneau prend une largeur confortable sur grand ecran »). Elle reste BORNEE - « ni trop petit ni trop large » - et le plafond compte toujours ce qui est a sa droite, mesure a 320 px. ⚠️⚠️ « LES ELEMENTS GRANDISSENT PROPORTIONNELLEMENT » SE PAIE PAR LA LARGEUR, PAS PAR UNE MEDIA QUERY, ET C EST UNE DECISION. La ligne est un flex dont la colonne du pseudo porte `flex: 1 1 8rem` : elle prend TOUT ce que le panneau gagne, donc les lignes s allongent par construction. Grossir la BULLE, en revanche, demanderait de grossir le DESSIN - et depuis la V199 sa taille vit dans le JS, seule autorite sur elle. Une taille de boite ecrite ici pendant que le dessin reste a 28 px, ce seraient deux valeurs a tenir d accord dont une seule est visible (piege nº 6), et un embleme perdu au milieu de son cadre. */ /* ⚠️⚠️ V220 - RENVERSEMENT DE LA LARGEUR DE LA V211 : le panneau devient VERTICAL, « comme les listes d amis de LoL ou de Steam ». 46 rem etalaient une liste de NOMS sur 736 px, et une ligne de nom ne se lit pas mieux parce qu elle est longue. Il passe a 24 rem et prend de la HAUTEUR : une colonne se lit de haut en bas, et c est le sens d une liste de gens. ⚠️ LA HAUTEUR EST UN PLANCHER, PAS UNE VALEUR : borne par l espace sous la bande figee, donc il ne sort jamais de la fenetre. Le plafond compte le meme espace - `100dvh - 2rem` ignorait la bande, et un panneau long debordait par le bas. */ /* V293 - le panneau part a DROITE du rail, centre sur le flanc : il est sorti du flux pour ne pas grandir la boite partagee avec Progression. */ /* V410 - sous la bande, dans le flux de sa boite fixe : plus de rail a sa gauche. */ width: min(24rem, calc(100vw - 2rem)); --soc-place: calc(100vh - var(--head-h) - var(--warn-h) - 1.5rem); /* ⚠️ V303 - LE PLANCHER DE 34 REM EST PARTI (retour de l auteur : « des espaces vides qui ne servent a rien ») : le panneau prend la hauteur de son contenu, et seul le plafond reste, pour ne jamais sortir de la fenetre. */ max-height: var(--soc-place); overflow-y: auto; overscroll-behavior: contain; background: var(--ink-3); border: 1px solid var(--star-mine); border-radius: var(--r-3); box-shadow: var(--lift-2); } /* ⚠️ LES DEUX SECTIONS SONT DEPLACEES, JAMAIS REECRITES (geste V61, V155) : memes ids, memes classes, meme CSS - donc `js/amis.js` et `js/equipe.js` n ont pas change d une ligne, `MutationObserver` compris. Ce qu il reste a ecrire ici est ce que leur ancienne place leur donnait : elles etaient des SECTIONS DE PAGE, calees sur la coquille, elles sont maintenant le contenu d un panneau. */ .socmenu-pop .amis-tab { flex: none; padding: .9rem .95rem 1.1rem; } .socmenu-pop .wrap { width: 100%; } .socmenu-pop .amis-inner { max-width: none; } /* ⚠️ LA COLONNE EST GARDEE, ET AVEC ELLE L ETIREMENT (V59). Les cases s etirent a la plus large des trois pour que les trois valeurs tombent sur le meme axe VERTICAL : c est tout l interet de la colonne, et un depliage vers le bas la conserve telle quelle. La disposition en RANGEE, essayee le 31 aout, est ecartee - elle perdait cet axe et redonnait a chaque case le pave que la V14 avait retire, pour ne rien gagner une fois le panneau sous le bouton. */ .stats { display: flex; flex-direction: column; align-items: stretch; gap: .32rem; } /* ⚠️ LA CASE GRANDIT D UN CRAN ET REPREND SES HEURES (V59). Elle etait « compacte » parce que la V52 la voulait discrete a cote d une identite qui devenait le sujet ; les deux blocs ne se disputent plus rien depuis qu'ils sont independants, et la duree est precisement ce qu'on vient chercher. Trois valeurs - l intitule, le couple, les heures - et elles s alignent parce que la case s etire. ⚠️ V102 : elles ne sont plus « une par colonne », les heures ayant pris leur propre rang. L etirement, lui, fait exactement le meme travail. */ /* ⚠️ V102 (D9 a + e) - LE FILET VERTICAL ROUGE EST PARTI, ET LES HEURES SONT PASSEES SUR LEUR PROPRE RANG. Deux consequences qui ne se voient qu en les cherchant : 1. « position: relative » et « overflow: hidden » n existaient QUE pour le filet absolu (.stat::before). Une regle dont l objet a disparu ne se laisse pas « au cas ou » : le code mort ne fait rien, une regle perimee fait quelque chose de faux (lecon V59). Elles partent avec. 2. Le padding gauche valait .78rem contre .7rem a droite - l ecart degageait les 3 px du filet. Sans filet, la case redevient SYMETRIQUE, sinon il reste a l ecran le decalage d un objet absent. ⚠️ DEUX COLONNES, PLUS TROIS : l intitule et le couple sur le premier rang, les heures seules sur le second. */ .stat { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: var(--sp-3); row-gap: .1rem; padding: .3rem .7rem .34rem; background: var(--panel); border: var(--frame-dim); border-radius: var(--r-1); box-shadow: var(--lift-0); } .stat-label { font-family: var(--display); font-stretch: var(--ch-etiquette); font-weight: 700; font-size: var(--fs-micro); letter-spacing: .22em; text-transform: uppercase; color: var(--text-dim); } /* ⚠️⚠️ V103 (D9 c) - LA VALEUR DOUBLE EST DEVENUE UNE VALEUR COMMUTEE. La case portait DEUX nombres et une legende disait lesquels ; elle en porte UN, et deux boutons disent lequel. Partent avec le couple : .stat-pair, .stat-all, .stat-road et .stat-sep - le separateur n a plus rien a separer, et une classe sans porteur est du code mort (piege nº 4, geste de la gelule .profile-btn en V59). ⚠️ LA TEINTE EST PORTEE PAR LE CONTENEUR, PAS PAR LA VALEUR. Trois cases qui changeraient de couleur ensemble, c est UNE decision : la poser sur .stats la rend vraie pour les trois par construction, et le jour ou une quatrieme case arrive elle l herite sans qu on ait a y penser. ⚠️ LES DEUX TEINTES SONT CELLES DE LA V102, AU JETON PRES - blanc --text-2 pour le catalogue, vert --doom pour la route. Les boutons les reprennent : une commande qui dirait une couleur et une valeur une autre serait la legende fausse que la V102 vient justement de corriger. */ .stat-val { grid-column: 2; justify-self: end; font-family: var(--display); font-stretch: var(--ch-affiche); font-weight: 800; font-size: clamp(.96rem, 1.6vw, 1.14rem); line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--text-2); } /* ⚠️ V102 (D9 e + f) - LES HEURES ONT LEUR PROPRE RANG, ET LEUR FILET PART AVEC LEUR VOISIN. La V59 leur avait pose un plancher de 4,7 rem parce que le filet etait porte par la VALEUR : sans lui il se decalait d une ligne a l autre (mesure : « 2 h 06 » posait le sien 18 px a droite de celui de « 216 h 29 »), et trois traits verticaux a trois abscisses font sauter l alignement qui est tout l interet de la colonne. ⚠️ SEULES, LES HEURES N ONT PLUS DE VOISIN A SEPARER : le filet, le plancher et le padding qu il reservait partent ENSEMBLE (piege nº 4). ⚠️ ET L ALIGNEMENT NE DEPEND PLUS D UN PLANCHER : justify-self: end plus l etirement des cases (V59) posent les trois valeurs sur le meme bord droit PAR CONSTRUCTION, ce qu aucune longueur de nombre ne peut decaler. La contrainte est SUPPRIMEE, pas contournee. ⚠️ LA COULEUR PASSE AU GRIS (retour du 1er septembre 2026). Elles prenaient le rouge de la route « sans quoi la legende mentirait sur ce que le rouge designe » : la legende ne porte plus de rouge du tout, donc l argument tombe avec lui. Le gris est --text-dim, deja dans la rampe d encre (V44) - on n en invente PAS un quatorzieme. */ .stat-hours { grid-column: 2; justify-self: end; text-align: right; font-family: var(--display); font-stretch: var(--ch-ui); font-weight: 700; font-size: var(--fs-s); line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--text-dim); white-space: nowrap; } /* ⚠️ V103 (D9 d) - LES DEUX BOUTONS SONT CENTRES, ET LES CASES NE LE SONT PAS. La legende etait alignee a gauche ; la commande se pose au milieu de la colonne qu elle commande. ⚠️ Centrer ces deux-la ne touche PAS les cases : elles sont dans .stats, qui garde « column + stretch » (V59) - c est l etirement qui aligne les trois valeurs sur le meme axe vertical, et il n a rien a voir avec l axe de ce qui est en dessous. ⚠️ LA CIBLE FAIT 30 px DE HAUT, PAS 34. Les 34 px du coeur (V6), de la roue (V59) et du bouton « Progression » (V82) valent pour une cible ISOLEE sur une affiche ou dans une bande ; ici deux boutons se touchent presque, sur toute la largeur du panneau, et 34 px auraient ajoute deux fois - ils sont deja plus larges que hauts. La cible reste au-dessus du plancher tactile courant et le panneau est un popover absolu, donc ce qu elle coute en hauteur ne se paie nulle part ailleurs. */ /* ------------------ LE SELECTEUR DE ROUTE (V131 - C2c) -------------------- ⚠️⚠️ LES DEUX CLASSES SONT CELLES QUE LA V116 A RETIREES, ET ELLES REVIENNENT AVEC LEUR ECRAN. Elles dessinaient ce selecteur SANS QU AUCUN BALISAGE NE LES PORTE - du code mort « en preparation », piege nº 4 - et la V116 ecrivait mot pour mot : « C2c les redessinera avec son ecran ; une mise en forme posee d avance decide de la forme sans que personne l ait choisie. » C est cet ecran-la. ⚠️ IL EMPRUNTE LA FORME DU SELECTEUR DE PORTEE (V103), ET CE N EST PAS UNE COPIE : c est le meme objet - deux boutons voisins dans un popover, dont l etat actif se dit par la COULEUR de ce qu ils commandent, jamais par un aplat plein qui ferait de la commande le sujet du panneau (V49). ⚠️ LA CIBLE FAIT 30 px, COMME CELLE DE LA PORTEE : les 34 px du coeur (V6), de la roue (V59) et du crayon (V130) valent pour une cible ISOLEE ; ici deux boutons se touchent presque et sont plus larges que hauts. */ /* ⚠️⚠️ V160 (5d) - IL A QUITTE LE MENU PROGRESSION POUR LA BARRE HERO, ET LA MARGE A CHANGE DE COTE. Dans le menu il precedait les cases, donc il poussait PAR LE BAS ; sous le pourcentage il LEGENDE la barre, donc il respire par le HAUT et se colle a ce qui suit - le premier bandeau de saga porte deja le sien. Une marge basse gardee ici aurait creuse deux fois le meme vide. */ /* ⚠️ V191 - IL EST `relative` PARCE QUE LA ROUE CRANTEE S Y ANCRE, a `left: 100%` : elle ne prend donc pas un pixel de largeur et les deux boutons restent CENTRES sous la barre. */ .route-switch { position: relative; margin: .5rem 0 0; display: flex; justify-content: center; align-items: center; gap: .25rem; } /* ⚠️⚠️ V446 - LE MOT ACTIF EST NETTEMENT PLUS GROS QUE LES DEUX AUTRES (planche M2, choix de l auteur) : on doit savoir SUR QUELLE ROUTE on est sans rien lire. Blanc et souligne a la couleur de la route ; les deux autres restent sourds. AUCUN ENCADREMENT - l auteur l a ecrit deux fois. ⚠️ LA LIGNE NE SAUTE PAS QUAND ON CHANGE DE ROUTE : les trois boutons ont le meme plancher de hauteur, et c est la taille du texte qui change, pas la boite. */ .route-opt { appearance: none; cursor: pointer; min-height: 34px; padding: .3rem .55rem; display: inline-flex; align-items: center; background: transparent; border: 0; border-radius: var(--r-2); font-family: var(--display); font-stretch: var(--ch-ui); font-weight: 700; font-size: var(--fs-s); letter-spacing: .01em; color: var(--ink-7); transition: color .16s, background-color .16s; } .route-opt:hover { color: var(--text-2); background: var(--ink-4); } .route-opt:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; } .route-opt[aria-pressed="true"] { color: var(--paper); font-size: calc(var(--fs-l) * 1.1); font-stretch: var(--ch-affiche); letter-spacing: .02em; text-decoration: underline; text-decoration-color: var(--route-accent); text-decoration-thickness: 2px; /* 5 px : le trait passe sous les jambages, comme le ruban du duo (V435) */ text-underline-offset: 5px; } /* ⚠️ ET LA ROUTE DUO PORTE LA COULEUR CHOISIE A DEUX, avec un repli sur le vert Doomsday tant que personne ne l a choisie. La variable est posee sur la RACINE par `peindreRoute()` : la barre, l orbe, le halo, le pourcentage et ce bouton la lisent chacun de leur cote - geste de `--star-mine` (V63). ⚠️ Un litteral recopie ici serait le piege nº 6. */ /* V446 - le mot actif est BLANC ; ce qui porte la couleur de la route, c est son SOULIGNEMENT. Un mot colore et un mot blanc se comparaient mal. */ .route-opt--duo[aria-pressed="true"] { color: var(--paper); } /* ⚠️⚠️ V427 - LA LIGNE SOLO / DUO / GROUPE FIGEE sous l en-tete (et sous l avertissement sans compte) : la teinte de la bande, un filet, 40 px. ⚠️ LE BANDEAU DE LA ROUTE OUVERTE SE FIGE DESSOUS, dans sa route : on peut le replier ou tout cocher sans remonter (demande de l auteur). Son fond deborde en pleine largeur par une ombre coupee (`clip-path`), pas par une boite plus large - rien ne deborde horizontalement de la page. */ .route-fige { position: fixed; left: 0; right: 0; z-index: 34; top: calc(var(--head-h) + var(--warn-h)); background: color-mix(in srgb, var(--ink-0) 95%, transparent); backdrop-filter: blur(8px); box-shadow: 0 1px 0 var(--rule); } .route-fige .route-fige-in { margin: 0; min-height: 40px; } /* ⚠️⚠️ V455 - AU DEFILEMENT, ELLE GARDE SA FORME HORIZONTALE (demande de l auteur) : la colonne du coin est une mise en page de REPOS, pas une lecture. Mais son bandeau ne barre plus la page : il se reduit a la largeur des trois mots, centre, en pilule. ⚠️ SA HAUTEUR RESTE MESUREE (`--fige-h`), donc les bandeaux de saga se posent dessous sans qu un nombre soit recopie : c est la boite exterieure qui est mesuree, et elle ne change pas de hauteur - seule sa largeur bouge. ⚠️ LE FOND PART DE LA BOITE EXTERIEURE POUR ALLER SUR LA PILULE : un fond pleine largeur sous une pilule aurait fait deux plaques l une sur l autre. */ @media (min-width: 1200px) { .route-fige { background: none; backdrop-filter: none; box-shadow: none; } .route-fige .route-fige-in { width: max-content; max-width: calc(100vw - 2rem); margin-inline: auto; padding: .1rem 1.1rem; gap: .9rem; background: color-mix(in srgb, var(--ink-0) 92%, transparent); backdrop-filter: blur(8px); border-radius: var(--r-pill); box-shadow: 0 6px 20px -10px rgba(0, 0, 0, .95); } /* plus imposante qu au repos d avant, sans retrouver la taille de la colonne */ .route-fige .route-opt { font-size: var(--fs-base); } .route-fige .route-opt[aria-pressed="true"] { font-size: var(--fs-xl); } } /* deux classes : `.phase-header { position: relative }` vit plus bas (piege nº 2) */ .roadmap .phase-header { position: sticky; z-index: 20; top: calc(var(--head-h) + var(--warn-h) + var(--fige-h, 0px)); background: var(--ink-0); box-shadow: 0 0 0 100vmax var(--ink-0); clip-path: inset(-6px -100vmax -6px -100vmax); } /* ==================== LE RUBAN DU DUO (V162 - 5d) ======================== « Les deux pseudos cote a cote, separes par un filet vertical, l initiateur a gauche. » ⚠️ LE PREFIXE `.ruban-` EST UN ESPACE DE NOMS : `.duo-*` appartient a l ECRAN du duo depuis la V96, et le site a deja paye une collision de prefixes (`.pmenu-pop` donnant son `left` au popover de progression, V80). ⚠️ IL NE PORTE NI FOND NI CADRE. Ce qui le pose est la SURFACE de ce qui l entoure : il vit sous la barre hero, entre deux choses qui ont deja leur elevation. Un aplat de plus ici ferait de la legende un objet - et la regle « un seul objet plein appelle » vaut sur cet ecran comme ailleurs. */ /* ⚠️⚠️ V189 - LES DEUX COTES SONT DES COLONNES : LE PSEUDO PASSE SOUS L EMBLEME, CENTRE SUR LUI. Cote a cote, un pseudo long poussait l embleme hors de l axe et les deux cotes ne se repondaient plus ; empile, l embleme tient sa place quelle que soit la longueur du nom - c est le principe de la carte de film (chaque bloc a une hauteur fixe, donc les pastilles s alignent par construction). ⚠️ LE FILET RESTE AU MILIEU SANS RIEN CONNAITRE DES DEUX COTES : `align-items: center` le centre sur la plus haute des deux colonnes. */ .ruban { margin: .55rem 0 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; /* ⚠️ V195 - L ECART TIENT COMPTE DU CRAYON, QUI DEBORDE DE SA COLONNE : son dessin de 12 px est centre dans une cible de 34, donc il court jusqu a ~23 px du bord du nom. En dessous, il toucherait le filet. */ gap: var(--ruban-ecart); } /* ⚠️⚠️ V435 - LE FILET DU DUO EST LE CENTRE DE LA PAGE (demande de l auteur) : trois colonnes, les deux cotes de meme largeur, donc deux pseudos de longueurs differentes ne le decalent plus. Mon cote a gauche du filet, cale contre lui ; l autre (ou le [+]) a droite. */ .ruban { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } .ruban > .ruban-cote:first-child { grid-column: 1; justify-self: end; } .ruban > .ruban-filet { grid-column: 2; } .ruban > .ruban-plus, .ruban > .ruban-cote + .ruban-cote, .ruban > .ruban-plus + .ruban-cote { grid-column: 3; justify-self: start; } /* ⚠️ L ECART ENTRE L EMBLEME ET LE NOM PASSE DE .1 A .34 rem, sur retour d usage : colles, les deux se lisaient comme un seul bloc et le nom paraissait poser sur la bulle. */ .ruban-cote { display: flex; flex-direction: column; align-items: center; gap: .34rem; min-width: 0; } /* Le rang du nom : le pseudo, et le crayon qui le suit. ⚠️ V190 - IL EST `relative` PARCE QUE LE MENU DU SURNOM S Y ACCROCHE. Le menu vit DERRIERE le crayon (`js/duo.js` l y pose a chaque peinture), donc son ancre est ce rang-la, quel que soit le cote qui porte le crayon. */ .ruban-sous { position: relative; display: flex; align-items: flex-start; gap: .1rem; min-width: 0; max-width: 100%; } /* ============ LE MENU DU SURNOM (V190) - LE SEPTIEME DU SITE ============ ⚠️⚠️ IL PAIE LE PRIX ECRIT D UN MENU, ET IL EST ECRIT UNE FOIS : un seul menu ouvert a la fois (garde EN CAPTURE, et son declencheur n appelle PAS `stopPropagation()`), Echap qui rend le focus, un PREFIXE DE CLASSE a lui (`.rsurnom-`, parce que `.ruban-` decrit le ruban et `.duo-` l ecran du duo), et la borne `max-width: calc(100vw - 3rem)` MESUREE a 320 px. ⚠️ CE N EST PAS UNE FENETRE : il n entre donc PAS dans `libererDefilement()` ni dans l ordre d Echap global - un popover ne prend pas son defilement a la page (regle V106). */ .rsurnom-pop { position: absolute; z-index: 30; top: calc(100% + .35rem); left: 50%; transform: translateX(-50%); /* ⚠️⚠️ LA LARGEUR EST DECLAREE, ELLE N EST PAS DEDUITE, ET C EST UNE MESURE QUI L A DECIDE. Ecrit `width: max-content`, ce panneau rendait 21 px : la contribution intrinseque d un `` a largeur declaree ne remonte pas jusqu a son conteneur absolu, dont le bloc contenant est ici un rang de 49 px. Une largeur declaree ne depend de personne. ⚠️ LA BORNE EST MESUREE A 320 px : centre sous le crayon, un panneau de 14 rem depasserait de 2 px ; `calc(100vw - 8rem)` le ramene a 192 px, c est-a-dire dans la fenetre - la regle des menus (V80). */ width: min(14rem, calc(100vw - 8rem)); display: flex; flex-direction: column; gap: .4rem; padding: .6rem; background: var(--ink-1); border: var(--frame-dim); border-radius: var(--r-3); box-shadow: var(--lift-2); } /* ⚠️ LE CHAMP EST VIDE ET SON FOND EST GRIS ; SON PLACEHOLDER EST BLANC, ET C EST LE RETOUR QUI LE DIT. Un placeholder sourd se lit comme une consigne ; celui-ci porte une VALEUR - le pseudo qu on garde si l on n ecrit rien. */ .rsurnom-champ { width: 100%; min-width: 0; padding: .42rem .55rem; background: var(--ink-2); color: var(--text); border: var(--frame-dim); border-radius: var(--r-2); font-family: var(--body); font-size: var(--fs-s); } .rsurnom-champ::placeholder { color: var(--text); opacity: 1; } .rsurnom-champ:focus-visible { outline: 2px solid var(--route-accent); outline-offset: 1px; } /* ⚠️ « A LA COULEUR DU DUO » : `--route-accent` est deja borne par le plancher de contraste (V117) avant d etre posee sur la racine, donc un texte sombre dessus est lisible par construction. */ .rsurnom-ok { appearance: none; cursor: pointer; min-height: 34px; padding: .32rem .7rem; background: var(--route-accent); color: var(--ink-0); border: 0; border-radius: var(--r-2); font-family: var(--display); font-stretch: var(--ch-ui); font-weight: 700; font-size: var(--fs-xs); letter-spacing: .01em; } .rsurnom-ok:hover { filter: brightness(1.12); } .rsurnom-ok:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; } .rsurnom-msg { margin: 0; } /* ⚠️ L APERCU EST LA COMMANDE (V78), ET LA CIBLE FAIT AU MOINS 34 px comme le coeur (V6), la roue (V59) et le bouton Progression (V80). ⚠️⚠️ V189 - L EMBLEME ETAIT ETEINT, ET LA CAUSE TIENT EN UNE LIGNE MANQUANTE. `fillAvatar()` pose `--avatar-color` sur son hote et injecte un SVG en `currentColor` ; c est `.profile-avatar` qui LIT ce jeton (`color: var(--avatar-color)`), et ce bouton-ci ne porte pas cette classe. L embleme heritait donc de la couleur du bouton, c est-a-dire de rien. Il lit desormais le meme jeton - une variable deja posee, jamais une seconde formule. C est ce qui permet au cercle de couleur de partir : l embleme dit ce que ce cercle disait. ⚠️⚠️ V199 - LE CADRE ET L APLAT DE REPOS SONT PARTIS, comme sur `.profile-avatar` : c est le meme objet, il suit la meme regle. CE QUI RESTE EST L ETAT DE SURVOL - un fond qui apparait sous le doigt n est pas un cadre, c est ce qui dit que la bulle est un BOUTON (lecon de la V152 sur le code de secours : on ne depouille pas une commande au point qu elle cesse de se lire comme telle). Le rembourrage part avec le cadre : sans filet, il n y a plus rien dont s ecarter, et la cible reste a 40 px par son plancher. ⚠️ LA TAILLE MONTE DE ~18 % (34 -> 40 px de cible, 26 -> 31 px de dessin), ce que le retour demande. La cible ne descend jamais sous 34. ⚠️ V199 - LE DESSIN PASSE A 36 px : la place que le cadre liberait. */ .ruban-bulle { appearance: none; cursor: pointer; background: transparent; padding: 0; border: 0; color: var(--avatar-color, var(--brand)); display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; border-radius: var(--r-pill); transition: background-color .16s; } .ruban-bulle:hover { background: var(--ink-3); } .ruban-bulle:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; } /* ⚠️ LE PSEUDO EST EN BLANC, ET C EST LE RETOUR QUI LE DIT : ce qui porte la couleur de chacun est l EMBLEME au-dessus, pas le nom. Deux porteurs de la meme information auraient fait du ruban un nuancier - la raison pour laquelle un filtre actif peint son TEXTE et son rond, jamais un aplat. ⚠️ V189 - la phrase disait l ETOILE EN DESSOUS : le cercle de couleur est parti, et c est l embleme qui a pris sa charge. */ .ruban-nom { min-width: 0; max-width: 12ch; font-family: var(--display); font-stretch: var(--ch-ui); font-weight: 700; font-size: var(--fs-m); letter-spacing: .01em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ⚠️⚠️ V189 - LE SOULIGNEMENT DIT LEQUEL DES DEUX JE SUIS, ET CHACUN VOIT LE SIEN. Ce n est pas une decoration : le ruban nomme deux personnes au-dessus d une seule barre, et rien ne disait laquelle regarde. Il ne peut donc PAS venir du serveur, qui ne sait pas qui regarde - il se pose cote page, sur le cote qui porte MON identite, que `peindreRuban()` connait deja (`jeSuisAGauche`). ⚠️ IL PREND `--route-accent`, c est-a-dire la couleur du duo quand on est sur la route duo : un litteral ici aurait ete un second porteur de cette teinte (piege nº 6). ⚠️ `text-decoration`, PAS UNE BORDURE : une bordure aurait ajoute de la hauteur au rang, donc decale l un des deux cotes par rapport a l autre. */ .ruban-cote.is-moi .ruban-nom { text-decoration: underline; text-decoration-color: var(--route-accent); text-decoration-thickness: 2px; /* V435 - 5 px au lieu de 3 : le trait passait sur les jambages (y, p, q, g, j), le cyrillique et les ecritures asiatiques (demande de l auteur). */ text-underline-offset: 5px; } /* ⚠️⚠️ V163 (5d) - LE CRAYON EST EN EXPOSANT, ET C EST LA SEULE CHOSE QUE CETTE REGLE FAIT. Tout le reste - la cible de 34 px, le dessin de 13 px, le survol, l anneau de focus - vient de `.crayon` (V130), REEMPLOYEE telle quelle. Un second jeu de proprietes ici, c eut ete deux crayons qui divergent au premier reglage (V45). ⚠️⚠️ ET LA CIBLE RESTE A 34 px, ELLE NE SE RESSERRE PAS. Une premiere ecriture la ramenait a 26 px pour rapprocher les deux cotes : c est sous le plancher tactile du site (le coeur V6, la roue V59, le cercle d aide V62, le bouton Progression V80), et ce plancher est une regle ecrite, pas un gout. Ce qui se resserre, ce sont les MARGES - la cible deborde sur le vide, elle ne le cede pas. C est deja ce que fait le rang de favori depuis la V153 : « la cible pousse VERS LE HAUT, par un pseudo-element ». ⚠️⚠️ ET LES DEUX SELECTEURS SONT SCOPES A `.ruban-cote`, CE QUI N EST PAS DE LA COQUETTERIE : PIEGE Nº 2, ATTRAPE A LA MESURE. Ecrits `.ruban-crayon` (0,1,0) et `.ruban-crayon svg` (0,2,0), ils avaient EXACTEMENT le poids de `.crayon` et de `.crayon svg` - qui vivent 660 lignes plus BAS. A specificite egale, l ordre de source tranche : le dessin restait a 13 px et sa marge a 7 px, releve au DOM. « Une regle qui ne gagne que par ORDRE DE SOURCE ne gagne pas, elle attend. » Le site a deja sa reponse a cette forme-la, deux blocs plus loin : `.sheet-label .crayon svg` (V130). ⚠️ ON SCOPE, ON NE DEPLACE PAS le bloc sous `.crayon` : la famille `.ruban-*` est un espace de noms et elle se lit d un seul tenant. */ /* ⚠️⚠️ V195 - LE CRAYON SORT DU FLUX, ET CA REPARE DEUX DESALIGNEMENTS D UN COUP. Dans le flux, il faisait partie du rang du nom : le rang etait centre sur l embleme, donc LE NOM se retrouvait pousse a gauche de la moitie du crayon (mesure : embleme a 716, nom a 707) ; et sa hauteur de 34 px rendait la colonne du partenaire PLUS HAUTE que la mienne, donc `align-items: center` decalait les deux cotes verticalement de 5 px (mesure : 194 contre 199). Hors du flux, le nom se centre sur son embleme et les deux colonnes ont la MEME hauteur - les deux defauts tombent ensemble, parce qu ils n en faisaient qu un. ⚠️ C EST LE GESTE DU CRAYON DU POURCENTAGE (V165), DE LA ROUE CRANTEE (V191) ET DU GRAND BOUTON ROAD TO (V101) : un objet ancre sur un bord, qui ne prend pas un pixel a ce qu il legende. ⚠️ LA CIBLE RESTE A 34 px et DEBORDE sur la gouttiere du ruban - « la cible deborde sur le vide, elle ne le cede pas » (V153, V189). C est pourquoi `.ruban` gagne de l ecart : le dessin ne doit pas toucher le filet. */ .ruban-cote .ruban-crayon { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin: 0; } .ruban-cote .ruban-crayon svg { width: 12px; height: 12px; margin-top: 0; } /* ⚠️⚠️ V189 - `.ruban-etoile` EST PARTIE EN ENTIER, BALISAGE ET REGLE. Elle disait « cette couleur, c est cette personne » ; depuis que l embleme porte la couleur (voir `.ruban-bulle`), elle le REDISAIT. Deux porteurs de la meme information font un nuancier, pas une legende - et une classe sans porteur part en entier (piege nº 4). */ /* ⚠️ LE FILET EST VERTICAL, ET IL SE TIRE DE LA RAMPE (`--rule` = `--ink-5`) : pas un quatorzieme gris. Il grandit avec les deux colonnes (V189) : un trait de 18 px entre deux blocs de 60 px aurait cesse de les separer. */ .ruban-filet { width: 1px; height: 34px; flex: 0 0 auto; background: var(--rule); } /* ========= LA ROUE CRANTEE ET SON MENU (V191) - LE HUITIEME ============= ⚠️⚠️ `.ruban-roue` EST PARTIE AVEC SON BOUTON : la roue a quitte le ruban pour la droite du bouton DUO, et elle a change de nature - elle MENAIT a l onglet du duo, elle OUVRE un menu. Une classe sans porteur part en entier (piege nº 4). ⚠️⚠️ LE HUITIEME MENU PAIE LE PRIX ECRIT : un seul menu ouvert a la fois (garde EN CAPTURE, et son declencheur n appelle PAS `stopPropagation()`), Echap qui rend le focus, un PREFIXE DE CLASSE a lui (`.rduo-`), et la borne `max-width` MESUREE a 320 px. Ce n est pas une fenetre : il n entre pas dans `libererDefilement()` (regle V106). ⚠️ LE BOUTON EST HORS FLUX (`left: 100%`), donc les deux boutons de route restent centres sous la barre : c est le geste du crayon du pourcentage (V165). La cible fait 34 px, comme le coeur (V6) et la roue de profil (V59). */ .rduo { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); } /* ============ LE PANNEAU DE LEGENDE DES STATUTS ========================= ⚠️⚠️ V487 - IL N A PLUS QU UN SEUL OUVREUR : le bouton de statut pose sur la languette de chaque affiche (V485). Le (i) du bandeau de saga (V452), celui de la ligne des routes avant lui (V305, V446) et toutes leurs regles de placement sont partis en entier - `.legende`, `.legende-btn`, leurs etats au survol, leur ancrage a droite du bandeau et le `z-index` qui allait avec (retour de l auteur : « tu peux meme supprimer les 2 boutons »). Ce qui n a plus de porteur part en entier ; ce qui reste ci-dessous est le PANNEAU, qui, lui, a toujours le sien. ⚠️ `position: relative` NE REVIENT PAS SUR `.saga-band` : sa propre regle le porte deja, mille lignes plus bas. Deux ecrivains pour une declaration, ce sont deux endroits ou la retirer. */ /* ⚠️⚠️ V489 - IL FLOTTE, IL NE PEND PLUS (retour de l auteur : « le menu legende au clic du statut doit etre superpose, actuellement ca nous demande de scroller »). En absolu il restait borne par le bas de la page : ouvert depuis la derniere rangee, il tombait sous le pli. `fixed` + `poserPopover` (V209) le posent par calcul et le bornent a la fenetre sur les quatre bords - c est le dessin du menu des notes, au meme rang d empilement (85, au-dessus de la fiche), et les deux se lisent donc pareil. ⚠️ `left` ET `top` SONT ECRITS PAR LE MOTEUR, pas ici : ce zero n est qu un point de depart avant la premiere mesure. */ .legende-pop { position: fixed; z-index: 85; left: 0; top: 0; width: max-content; max-width: min(17rem, calc(100vw - 3rem)); margin: 0; padding: .6rem .7rem; list-style: none; display: grid; gap: .45rem; background: var(--ink-1); border: var(--frame-dim); border-radius: var(--r-3); box-shadow: var(--lift-2); text-align: left; } @media (max-width: 900px) { /* Mesure a 320 px : ouvert depuis le bouton (x = 69), le panneau finissait PILE sur le bord de la fenetre. `100vw - 6rem` lui rend une gouttiere. */ .legende-pop { max-width: calc(100vw - 6rem); } } .legende-item { display: flex; align-items: center; gap: .55rem; } .legende-item .status-fanion { flex: 0 0 auto; } .legende-mot { font-family: var(--display); font-stretch: var(--ch-ui); font-weight: 700; font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--text); } .legende-sens { display: block; font-size: var(--fs-xs); color: var(--text-dim); text-transform: none; letter-spacing: 0; font-weight: 500; } .rduo-btn { appearance: none; cursor: pointer; border: 0; background: transparent; padding: 5px; margin-left: .15rem; display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 34px; border-radius: var(--r-pill); color: var(--ink-7); transition: color .16s, background-color .16s; } .rduo-btn svg { width: 18px; height: 18px; } .rduo-btn:hover { color: var(--text-2); background: var(--ink-3); } .rduo-btn[aria-expanded="true"] { color: var(--text-2); background: var(--ink-3); } .rduo-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; } /* ⚠️ LE MENU S OUVRE A DROITE, comme le retour le demande - donc a cote de la roue, pas dessous. */ .rduo-pop { position: absolute; z-index: 30; left: calc(100% + .35rem); top: 50%; transform: translateY(-50%); width: min(15rem, calc(100vw - 3rem)); display: flex; flex-direction: column; gap: .45rem; padding: .6rem; background: var(--ink-1); border: var(--frame-dim); border-radius: var(--r-3); box-shadow: var(--lift-2); } /* ⚠️⚠️ SOUS 900 px IL BASCULE SOUS LA ROUE ET S ALIGNE A DROITE, ET C EST UNE MESURE : a 320 px la roue vit vers x = 240, donc un panneau ouvert VERS LA DROITE sortirait de la fenetre. Aligne par son bord droit, il s etale vers la gauche, la ou il y a la place. */ @media (max-width: 900px) { .rduo-pop { left: auto; right: 0; top: calc(100% + .35rem); transform: none; } } /* ============ V406 - LA BULLE DE L INVITE, SOUS DUO / GROUPE ============ Centree sous le selecteur, qui est lui-meme centre sous la barre : elle tient donc a 320 px sans bascule. Meme fond, meme cadre, meme ombre que les deux menus voisins (`.rduo-pop`, `.legende-pop`) - une famille de bulles. */ /* ⚠️ 31 ET NON 30 : a 320 px elle passe sous le rail social fixe (`#socMenu`, 30, plus loin dans le document) - mesure par `elementFromPoint`. */ .rinvite { position: absolute; z-index: 31; top: calc(100% + .35rem); left: 0; /* V408 : la route est au bord gauche */ width: min(19.5rem, calc(100vw - 2rem)); display: grid; gap: .3rem; padding: .7rem .8rem .55rem; background: var(--ink-1); border: var(--frame-dim); border-radius: var(--r-3); box-shadow: var(--lift-2); text-align: left; } .rinvite-titre { margin: 0; font-family: var(--display); font-stretch: var(--ch-ui); font-weight: 800; font-size: var(--fs-s); letter-spacing: .01em; color: var(--text-2); } .rinvite-titre:focus { outline: none; } .rinvite-txt { margin: 0; font-size: var(--fs-m); line-height: 1.45; color: var(--text-2); } .rinvite-note { margin: .15rem 0 0; font-size: var(--fs-s); color: var(--text-dim); } .rinvite-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .9rem; margin-top: .35rem; } .rinvite-creer, .rinvite-entrer { appearance: none; cursor: pointer; min-height: 34px; white-space: nowrap; font-family: var(--display); font-stretch: var(--ch-ui); font-weight: 800; font-size: var(--fs-xs); letter-spacing: .01em; transition: background-color .16s, color .16s; } /* Le geste principal est CERNE, jamais un aplat : c est le langage de « S inscrire » dans la bande (V321). */ .rinvite-creer { padding: .35rem .85rem; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1.5px var(--brand); } .rinvite-creer:hover { background: color-mix(in srgb, var(--brand-plein) 22%, transparent); } .rinvite-entrer { padding: .35rem .2rem; border: 0; background: transparent; color: var(--text-dim); text-decoration: underline; text-underline-offset: 3px; } .rinvite-entrer:hover { color: var(--paper); } .rinvite-creer:focus-visible, .rinvite-entrer:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; } /* ---- La ligne de reglage : le terme, le `?`, la bascule (V192) ---- */ .rduo-ligne { display: flex; align-items: center; gap: .35rem; } .rduo-terme { flex: 1 1 auto; min-width: 0; font-family: var(--display); font-stretch: var(--ch-ui); font-weight: 700; font-size: var(--fs-xs); letter-spacing: .01em; color: var(--text-2); } /* ⚠️ LE `?` EST LE CERCLE D AIDE DU SITE (V62) : meme forme, meme cible. */ .rduo-aide { appearance: none; cursor: pointer; flex: 0 0 auto; width: 17px; height: 17px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--ink-7); border: 1px solid var(--ink-5); border-radius: 50%; font-family: var(--display); font-size: var(--fs-xs); font-weight: 700; line-height: 1; } .rduo-aide:hover, .rduo-aide[aria-expanded="true"] { color: var(--text-2); border-color: var(--ink-6); } .rduo-aide:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* ⚠️⚠️ LE COULISSANT : GAUCHE = OFF, DROITE = ON. L etat se lit dans `aria-checked` (`role="switch"`), pas dans une classe - donc le dessin suit l attribut, et il ne peut pas mentir sur ce que le clavier annonce. ⚠️ LA CIBLE FAIT 34 px DE HAUT PAR SON PSEUDO-ELEMENT, pas par du padding : le padding aurait grandi la piste. C est le geste du rang de favori (V153) - la cible deborde sur le vide, elle ne le cede pas. ⚠️⚠️ V203 (R1) - ALLUME, IL PREND `--switch-on`, PLUS `--route-accent`. Il prenait la couleur de la route « qu il synchronise » (V192) ; le retour le refuse, et il a raison : cet interrupteur ne dit rien de la barre, il commande un versement. Sa couleur est donc UNIQUE, et le jeton vit sur `:root` - le jour ou un second coulissant arrive, il n y aura pas une seconde valeur a tenir d accord. Un litteral ici aurait ete un second porteur (piege nº 6), et ca n a pas change. */ .rduo-switch { appearance: none; cursor: pointer; flex: 0 0 auto; position: relative; width: 38px; height: 20px; padding: 0; background: var(--ink-4); border: 1px solid var(--ink-5); border-radius: var(--r-pill); transition: background-color .16s, border-color .16s; } .rduo-switch::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 34px; transform: translateY(-50%); } .rduo-switch-bille { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--text-2); transition: transform .16s, background-color .16s; } .rduo-switch[aria-checked="true"] { background: color-mix(in srgb, var(--switch-on) 45%, transparent); border-color: var(--switch-on); } .rduo-switch[aria-checked="true"] .rduo-switch-bille { transform: translateX(18px); background: var(--switch-on); } .rduo-switch:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* ⚠️ V269 - LE JETON ETAIT `--serif`, ET IL N A JAMAIS EXISTE. La prose du site est `--read` (Literata) ; `--serif` ne se declare nulle part, donc cette ligne heritait d Archivo - une phrase qui promet la voix de la prose et rend celle de l interface, SANS qu aucune erreur ne se produise. C est le piege nº 4 par l autre bout : un NOM sans porteur. */ .rduo-aide-txt { margin: 0; font-family: var(--read); font-size: var(--fs-xs); line-height: 1.45; color: var(--text-dim); } .rduo-msg { margin: 0; } /* ⚠️ EN ROUGE DE MARQUE, ET EN FIN DE MENU : c est la teinte du site pour ce qui reclame une decision - la meme que « Supprimer mon compte » (V78). */ .rduo-rompre { appearance: none; cursor: pointer; min-height: 34px; padding: .35rem .55rem; background: transparent; color: var(--brand); border: 1px solid color-mix(in srgb, var(--brand) 55%, transparent); border-radius: var(--r-2); font-family: var(--display); font-stretch: var(--ch-ui); font-weight: 700; font-size: var(--fs-xs); letter-spacing: .01em; text-align: center; } .rduo-rompre:hover { background: color-mix(in srgb, var(--brand) 14%, transparent); } .rduo-rompre:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* ⚠️ SOUS 480 px, LE NOM CEDE, JAMAIS L EMBLEME NI L ETOILE. C est la regle de la quatrieme case de la fiche (V132) : « c est le libelle qui cede (ellipse), jamais la valeur ». Ici la valeur est l IDENTITE - une bulle et une couleur - et elle tient dans 34 px. */ /* ⚠️⚠️ V195 - L ECART NE SE RESSERRE PLUS ICI, ET C EST UNE MESURE. Il valait `.5rem`, puis `1.1rem` : dans les deux cas le DESSIN du crayon touchait le filet (releve a 375 px : encre a 180-192, filet a 187). La raison est que l ecart necessaire ne depend pas de la largeur de l ecran - il depend de la CIBLE de 34 px, qui ne retrecit jamais (plancher tactile du site : le coeur V6, la roue V59, le cercle d aide V62). Une valeur de moins a tenir d accord avec une autre. */ @media (max-width: 480px) { .ruban-nom { max-width: 8ch; font-size: var(--fs-s); } .ruban-filet { height: 30px; } } /* ⚠️⚠️ V189 - SUR GRAND ECRAN, LE RUBAN PREND DE LA PLACE AU LIEU DE RESTER SERRE AU CENTRE. Le retour demande d utiliser toute la largeur disponible hors page principale ; le ruban vit DANS la barre hero, donc ce qui grandit ici, ce sont ses ELEMENTS et l ecart entre les deux cotes - jamais une seconde largeur a tenir d accord avec `--shell`. */ @media (min-width: 1200px) { .ruban { margin-top: .75rem; } :root { --ruban-emb: 46px; --ruban-ecart: 2.2rem; } /* V424 - duo et groupe */ .ruban-cote { gap: .45rem; } .ruban-bulle, .ruban-plus { min-width: 52px; min-height: 52px; padding: 6px; } /* ⚠️ V199 - L EMBLEME SUIT SA CIBLE, exactement comme la croix du `[+]` juste dessous : meme regle, une ligne plus bas. Sa taille de base est ecrite dans `js/duo.js` (36 px) ; ceci est une surcharge responsive, pas un second jeu de valeurs. */ .ruban-bulle svg { width: var(--ruban-emb); height: var(--ruban-emb); } .ruban-plus svg { width: 40px; height: 40px; } .ruban-nom { max-width: 16ch; font-size: var(--fs-base); } .ruban-filet { height: 44px; } } /* ⚠️ V213 - LES CINQ REGLES DU SELECTEUR DE SALLE SONT PARTIES AVEC LUI : `.salle-switch`, `.salle-label`, `.salle-select` et ses deux etats. « Une classe sans porteur part en entier » (piege nº 4), et `verif-selecteurs.js` le confirme - aucun jeton ne subsiste dans index.html ni dans les js/*.js. ⚠️ `.salle-dot` ETAIT RESTEE (la pastille de coequipier) ; elle est partie en V221 avec sa ligne. */ .stat-scope { margin: .42rem 0 0; display: flex; justify-content: center; align-items: center; gap: .25rem; } .stat-scope-btn { appearance: none; cursor: pointer; min-height: 30px; padding: .3rem .55rem; background: transparent; border: 0; border-radius: var(--r-2); font-family: var(--display); font-stretch: var(--ch-ui); font-weight: 700; font-size: var(--fs-s); letter-spacing: .01em; color: var(--ink-7); transition: color .16s, background-color .16s; } .stat-scope-btn:hover { color: var(--text-2); background: var(--ink-4); } .stat-scope-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; } /* ⚠️ L ETAT ACTIF SE DIT PAR LA COULEUR DU NOMBRE QU IL COMMANDE, jamais par un aplat : un aplat plein sur deux boutons voisins ferait de la commande le sujet du panneau, alors que le sujet est la case au-dessus (meme arbitrage que le cadre de l encart en V49). */ .stat-scope-btn--tout.is-on { color: var(--text-2); } /* ⚠️ V363 - LA TROISIEME PORTEE PREND `--tier-must`, QUI EST `--doom` : ce qu elle montre, ce sont exactement les INDISPENSABLES, et cette echelle a deja sa couleur. Une septieme teinte pour redire la meme chose serait un nuancier de plus (V54). */ .stat-scope-btn--express.is-on { color: var(--express); } /* ⚠️⚠️ ET LES BOUTONS TIENNENT SUR UNE LIGNE A 320 px : la boite s enroule plutot que de deborder - un troisieme bouton ne peut pas pousser le panneau hors de la fenetre (regle des menus, `max-width: calc(100vw - 3rem)`). */ .stat-scope { flex-wrap: wrap; } /* ⚠️⚠️ V131 - LA BARRE HERO EST LA MEME SUR LES DEUX ROUTES, ET C EST LA DECISION DE L AUTEUR (2 septembre 2026) : « identique en design, sauf la couleur ». Il n y a donc PAS de seconde barre - ni second `#progressFill`, ni second `#progressPct` -, ce qui garde vraie la phrase de la V88 (« la barre hero est unique par construction ») au lieu de la renverser. Le sortilege de Doom et Orbitron restent : ils appartiennent a CETTE barre, pas a la route qu elle compte. ⚠️ SEULE LA TEINTE CHANGE, ET ELLE PASSE PAR le jeton de ROUTE, pose sur la RACINE. Les endroits qui peignent la barre lisent deja une variable ; les reecrire un par un aurait ete autant de valeurs a tenir d accord (piege nº 6). */ /* ⚠️ DES QU UNE COULEUR EST CHOISIE, LES TEINTES DERIVEES SE RECALCULENT. `--route-accent` est posee sur la RACINE par `peindreRoute()` (geste de `--star-mine`, V63) ; celles-ci s en derivent ici, par `color-mix` - deja employe par le libelle de `MA NOTE` depuis la V63. Les ecrire en JS aurait mis des formules de couleur dans un fichier qui n en porte aucune. ⚠️⚠️ V188 - LA CLASSE DIT « UNE TEINTE EST POSEE », PLUS « ON EST EN DUO », ET LE RENOMMAGE EST LA MOITIE QUI COMPTE. La route solo gagne le meme choix de couleur : conditionner les derivees a `is-duo` aurait donne une barre solo dont l accent change mais dont la nappe, l orbe et le lit restent VERTS - c est-a-dire exactement le defaut que cette version corrige, deplace d une route a l autre. ⚠️ `--route-spark` EST UNE VARIABLE PARCE QU ELLE A SIX PORTEURS : cinq etincelles et l orbe. Six litteraux clairs, c eut ete le piege nº 6 sur une valeur dont la divergence ne leve rien. */ .hero-progress.is-teinte { --route-soft: color-mix(in srgb, var(--route-accent) 55%, #FFFFFF); --route-deep: color-mix(in srgb, var(--route-accent) 32%, #000000); } .hero-progress { --route-spark: color-mix(in srgb, var(--route-soft) 34%, #FFFFFF); } /* ---- Barre de progression : "conduit d'energie" facon sortilege de Doom --- Aucune diagonale, aucune rayure : l'energie est faite de nappes radiales qui DERIVENT lentement, d'etincelles qui scintillent et d'une orbe en tete de barre. La barre n'est pas un rectangle arrondi : ses extremites sont taillees en pointe (clip-path), comme un conduit. */ /* ================== LA BARRE HERO (V53) ============================== Elle a quitte le HUD. Le bandeau qui la porte est dans le FLUX : figer une quatrieme bande refait exactement la barre que la V41 a refusee, et la V43 a ecrit la regle - ce qu'on manie EN LISANT reste sous la main, le reste descend dans le flux. Une jauge ne se manie pas. ⚠️ ET ELLE NE SUIT PAS L ONGLET, contrairement a la barre d'outils. La V52 a pose le partage sans le nommer : ce qui suit l'onglet, c'est ce qui AGIT sur la rangee ; ce qui RAPPORTE reste. La colonne de stats reste visible sous les quatre apercus "Bientot", la barre aussi - elle dit ou l'on en est du parcours entier, pas de ce qui est a l'ecran. */ /* ⚠️ LA RESERVE DU HAUT SE RESSERRE (V77) : la tete de page la precede desormais avec la sienne, et la barre doit se lire « juste en dessous » du titre. */ /* V371 - le haut se resserre (SNAPLINE plus proche de la barre, demande de l auteur) */ .hero-progress { --hero-haut: clamp(.1rem, .3vw, .2rem); --bar-h: clamp(19px, 1.9vw, 24px); padding: var(--hero-haut) 0 clamp(.9rem, 2vw, 1.4rem); } /* La barre est CENTREE sur la page et bornee : elle ne s'etire pas d'un bord a l'autre de l'ecran, sinon le pourcentage se retrouve loin du regard. ⚠️ LA BORNE PASSE DE 760 A 980 px : en hero, une barre bornee a la largeur qu'elle avait dans une bande de 20 px de haut se lirait comme le meme objet deplace, pas comme le sujet de la zone. */ /* ⚠️ V408 - LE POURCENTAGE PASSE A DROITE DE LA BARRE (zone Parcours compacte) : une ligne au lieu de deux. Le crayon de couleur se pose a sa GAUCHE (a droite, il sortirait de la page). */ .progress { display: flex; align-items: center; gap: .7rem; width: min(var(--barre-l), 100%); margin-inline: auto; /* ⚠️ TROIS LITTERAUX DEVIENNENT UNE VARIABLE ET DEUX CALCULS. La pointe du conduit valait 10px pour une barre de 20, et l'orbe 15px avec sa marge de -7.5px "qui doit rester la moitie" - c'est le piege nº 6 du fichier, une regle ecrite au lieu d'une variable. La pointe est desormais la MOITIE de la hauteur (donc a 45 degres par construction, quelle que soit la hauteur), et l'orbe se centre par marges automatiques. */ /* V371b - `--bar-h` est pose sur `.hero-progress` : le ticket le lit aussi */ --bar-tip: calc(var(--bar-h) * .5); --orb: calc(var(--bar-h) * .72); } /* ====== LE BOUTON SYNCHRONISER (V71 · V79 · FIGE EN V105 - D4) ========== ⚠️⚠️ V105 (D4) - IL EST DANS LA BANDE FIGEE, ET C EST UN RENVERSEMENT DE LA V79. Elle l avait pose dans le FLUX, troisieme colonne de `.pagehead-inner`, en ecrivant : « il n entre PAS dans la bande figee, qui se paie a chaque pixel de defilement (V53) et que la V77 vient de ramener de 201 px a 45 ». Le sixieme retour tranche autrement. C est sa decision, et son abandon s ecrit - sinon quelqu un le ressortira du flux en lisant la V79 et pas la V105. ⚠️⚠️ ET LA BANDE NE GRANDIT PAS D UN PIXEL : C EST CE QUI REND LE RENVERSEMENT PAYABLE. La fiche annoncait « +34 px sur TOUS les ecrans, y compris ceux ou le bouton n existe pas », et laissait une question ouverte - garder sa place a vide (une bande plus haute pour rien) ou la rendre (la bande saute quand on cree son compte). LES DEUX BRANCHES DISPARAISSENT, et pas par astuce : `.identity` porte un PLANCHER de 40 px depuis la V77, taille pour que le profil et les deux boutons de l invite ne fassent jamais sauter la ligne. Le bloc y est un enfant de plus, et il tient DANS ce plancher - donc rien a reserver, rien a rendre, aucun saut. Mesure : `--head-h` vaut toujours 45 px. ⚠️ IL EST DONC HORIZONTAL, LEGENDE A GAUCHE. Empile (V79), il faisait 69 px et aurait commande la bande. A cote du bouton, ses deux lignes de .6rem font ~25 px : elles tiennent dans les 40. ⚠️ ET C EST L ORDRE DU DOCUMENT, pas un `order` en CSS - une inversion visuelle que le document ne porte pas est une inversion que le clavier ne voit pas (V45, V53, V77). ⚠️ LA BORNE DE 6,4 rem RESTE, ET ELLE CHANGE ENCORE D EMPLOI. Elle reservait une place a droite de la barre (V71), puis gardait etroite la troisieme colonne de la tete de page (V79) ; elle empeche desormais « Modifie ailleurs » de pousser la bulle de profil vers la gauche. Meme valeur, meme raison de fond : la reserve doit etre CONNUE quelle que soit la phrase. ⚠️ LA TETE DE PAGE Y GAGNAIT, ET DEPUIS LA V110 (E4) ELLE N EXISTE PLUS DU TOUT. Ce bouton l avait quittee en V105, le titre en V101, et le menu Progression a fini par en sortir : `.pagehead` etait un conteneur vide portant son seul padding. La hauteur ne quitte pas le flux pour la bande figee - elle disparait, et le conteneur avec. */ .hero-row { display: flex; flex-direction: column; align-items: center; } /* ================= LA CLOCHE (V167 - partie 5e) ======================== ⚠️ 34 px, ET C EST UN GABARIT, PAS UN GOUT : c est la cible du coeur de favori (V6), de la roue (V59) et du bouton Progression (V82) - le plancher au doigt du site. Le bouton Synchroniser, lui, fait 40 px parce qu il est SEUL dans du vide (V105) ; la cloche est collee a lui, elle n a pas besoin de la meme generosite. ⚠️ Et 34 tient dans le plancher de 40 px de `.identity`, donc la bande figee ne grandit pas d un pixel : `--head-h` vaut toujours 45. ⚠️ `flex: 0 0 auto` N EST PAS DECORATIF (lecon de la V105) : `.identity` est une rangee flex qui peut manquer de place, et a 320 px avec un pseudo long le bouton Synchroniser s etait laisse comprimer a 31 px. Ce qui cede, c est le pseudo - il a deja sa borne - jamais la cible. ⚠️ ELLE EST SOURDE AU REPOS, ET C EST LE CONTRAIRE DU BOUTON SYNCHRONISER. Celui-la porte la couleur du profil parce qu il est LE chemin vers la synchronisation ; une cloche allumee en permanence dirait « il y a du neuf » alors qu il n y a rien. Elle prend la teinte au SURVOL, et le rouge de marque quand quelque chose attend. */ .notifs-btn { appearance: none; cursor: pointer; position: relative; flex: 0 0 auto; width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--ink-2); color: var(--text-2); border: var(--frame-dim); border-radius: var(--r-2); box-shadow: var(--lift-0); transition: color .16s, border-color .16s, background .16s; } .notifs-btn svg { width: 20px; height: 20px; } .notifs-btn:hover { color: var(--paper); border-color: var(--ink-6); background: var(--ink-3); } .notifs-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; } .notifs-btn.is-neuf { color: var(--brand); border-color: var(--brand); } /* ⚠️ LA PASTILLE EST POSEE EN ABSOLU SUR L ARETE : elle ne coute pas un pixel a la cible, donc les 34 px restent 34. ⚠️ Et elle porte un LISERE DE FOND : sans lui, un point rouge sur un trait rouge (le bouton en etat neuf) se confondrait avec le cadre. */ .notifs-dot { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 2px var(--ink-2); } /* --------- LE MENU DE LA CLOCHE - cinquieme menu, cinquieme prefixe ------ ⚠️ IL EST LE FRERE DE `.fmenu-pop` (V54) ET DE `.pmenu-pop` (V78), DONC IL EN REPREND LES JETONS : `--ink-3`, `--frame`, `--r-3`, `--lift-2`. Un popover flotte, c est l echelle d elevation de la V44 - pas des valeurs choisies ici. ⚠️ `position: absolute`, donc il ne pese pas un pixel dans la hauteur de la bande figee, menu ouvert comme ferme. ⚠️ ET IL SE BORNE A LA FENETRE : un menu ouvert pres d un bord deborde sans lever d erreur, et ca se mesure a 320 px (regle du menu Filtres). */ .nmenu-pop { position: absolute; top: calc(100% + .45rem); right: 0; z-index: 4; width: 300px; max-width: calc(100vw - 3rem); padding: .45rem; background: var(--ink-3); border: var(--frame); border-radius: var(--r-3); box-shadow: var(--lift-2); } /* ⚠️⚠️ V197 (2-2) - LA TETE DU MENU PORTE LE FILET, PAS LE TITRE NI LA LISTE. Sur le titre seul il aurait la largeur du titre ; sur la liste, il aurait appartenu a ce qu il separe. Meme motif que `.account-modif` (V152) : filet + marge, et rien d autre - un troisieme dessin de separateur aurait ete un dessin de trop. */ .nmenu-tete { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-bottom: .3rem; margin-bottom: .35rem; border-bottom: var(--frame-dim); } .nmenu-titre { margin: .1rem .35rem; font-family: var(--display); font-stretch: var(--ch-ui); font-weight: 800; font-size: var(--fs-xs); letter-spacing: .01em; color: var(--text-dim); } /* ⚠️ 34 px DE HAUT, COMME `.nmenu-acte` JUSTE DESSOUS : c est le plancher tactile du site (le coeur V6, la roue V59, le bouton Progression V82, la cloche elle-meme), et deux cibles du meme menu qui ne feraient pas la meme taille seraient une irregularite qu on lit sans savoir la nommer. ⚠️ IL N EST PAS TEINTE : la regle du bouton plein (V51) veut qu un seul objet appelle, et dans ce menu c est « Accepter ». Vider est possible, il n est pas propose. */ .nmenu-vider { appearance: none; cursor: pointer; display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 34px; padding: .2rem .5rem; background: transparent; color: var(--text-dim); border: 0; border-radius: var(--r-1); font-family: var(--display); font-stretch: var(--ch-ui); font-weight: 700; font-size: var(--fs-xs); letter-spacing: .01em; transition: color .16s, background .16s; } .nmenu-vider:hover { color: var(--paper); background: var(--ink-2); } .nmenu-vider:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* ⚠️ LA LISTE DEFILE EN INTERNE, ELLE NE POUSSE PAS LE MENU HORS DE L ECRAN : cinquante lignes, c est plus haut que n importe quel telephone. ⚠️ `dvh` APRES `vh`, comme la fiche et le panneau de profil (V142) : `vh` se resout sur la GRANDE fenetre, celle qu on a barre d URL repliee. ⚠️ ET `overscroll-behavior: contain` : sans lui, arrive en bout de course, le geste CHAINE vers la page derriere - on croit que le menu ne defile pas alors que c est la page qui a pris le geste. */ .nmenu-liste { display: flex; flex-direction: column; gap: 1px; max-height: 60vh; max-height: 60dvh; overflow-y: auto; overscroll-behavior: contain; } /* ⚠️⚠️ V168 - LA LIGNE EST UN CONTENEUR, LE TEXTE EST LE BOUTON. La V167 en faisait un `