/* ===================================================================== LES POLICES SONT SERVIES PAR LE SITE, PAS PAR GOOGLE. ===================================================================== Elles etaient chargees depuis `fonts.googleapis.com` sur les dix pages : chaque visiteur transmettait son adresse IP a Google, aux Etats-Unis, sans le savoir et avant tout consentement possible. Ce n'est pas un temoin — un bandeau n'y aurait rien change — c'est un transfert de donnee personnelle vers un tiers, qu'un tribunal allemand a deja sanctionne. Les servir d'ici supprime le probleme au lieu de le declarer. Et cela accelere le chargement : deux connexions et deux allers-retours en moins sur chaque page, la ou les polices bloquent l'affichage du texte. SEULES LES GRAISSES EMPLOYEES SONT EMBARQUEES. La demande a Google en reclamait huit ; le code n'en utilise que six — Manrope 500 a 800, Bricolage 700 et 800. Les deux autres etaient telechargees pour rien. 116 Ko au total. `font-display: swap` : le texte s'affiche immediatement dans une police de secours, puis bascule. Sans lui, une police lente laisse la page muette. Le sous-ensemble « latin » suffit : il porte tous les accents francais, les guillemets et les ligatures. Verifie glyphe par glyphe. ===================================================================== */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url('/polices/manrope-500.woff2') format('woff2'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url('/polices/manrope-600.woff2') format('woff2'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url('/polices/manrope-700.woff2') format('woff2'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url('/polices/manrope-800.woff2') format('woff2'); } @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 700; font-display: swap; src: url('/polices/bricolage-700.woff2') format('woff2'); } @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 800; font-display: swap; src: url('/polices/bricolage-800.woff2') format('woff2'); } /* chronos.css - jetons de style et coquille commune. * * Rupture assumee avec la regle « chaque page porte son CSS » : a cinq pages, * la maintenir cinq fois garantissait cinq divergences. Ce fichier porte * l'identite et les composants partages ; chaque page garde en ligne ce qui * ne sert qu'a elle. * * Il est servi en no-store comme le HTML : une feuille en cache est un * correctif que personne ne voit. * * Direction : le spectre. Le jeu ordonne le temps, l'ecran le colore. Une seule * rampe traverse tout le site, de l'indigo profond a l'ambre, et la place d'une * carte sur cette rampe dit sa place dans le temps. Rien d'autre n'est colore. */ /* ------------------------------------------------------------------ jetons */ :root { color-scheme: dark; --nuit: #07080E; --nuit-2: #0C0E18; --voile: rgba(255, 255, 255, .045); --voile-2: rgba(255, 255, 255, .075); --trait: rgba(255, 255, 255, .09); --trait-vif: rgba(255, 255, 255, .18); --texte: #EDEEF5; /* CES DEUX GRIS ONT ETE REMONTES LE 13 AOUT 2026. `--texte-3` mesurait 3,35 sur le fond nuit et 2,97 sur une carte, tres en dessous des 4,5 exiges pour du texte : le compte a rebours, les dates et les onglets non selectionnes s'y lisaient mal. Une joueuse l'a signale. Le theme clair avait deja recu ce traitement en 25.1 ; le sombre, non — l'attention etait allee au nouveau, et l'ancien avait garde son defaut. */ --texte-2: #9CA3C5; --texte-3: #7981A8; /* LES SIX VALEURS QUE LE THEME CLAIR REDEFINIT, ET QUI N'EXISTAIENT PAS. Elles nomment ce qui, jusqu'ici, etait ecrit en dur un peu partout : le fond d'une carte, celui d'un creux, l'encre posee SUR une teinte vive. Sans elles, un theme clair aurait demande de retoucher trente regles au lieu d'un bloc. */ --carte: linear-gradient(165deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .028)); --creux: rgba(255, 255, 255, .075); --ombre-forte: rgba(0, 0, 0, .45); --sur-teinte: var(--nuit); /* La lueur coloree des cartes n'existe que sur fond sombre : sur blanc, elle salit au lieu d'eclairer. Le theme clair la met a zero. */ --lueur: 1; /* L'arc-en-ciel. Cinq arrets pour cinq cartes : ce n'est pas une coincidence, la carte en place n prend l'arret n. L'ordre des couleurs est celui du prisme, du rouge au bleu, et il court du plus ancien au plus recent : la couleur dit la place sur l'axe avant qu'on ait lu la date. Une sixieme teinte, le violet, ne sert qu'aux degrades et a la marque : elle ferme l'arc sans avoir a etre portee par une carte. */ --s1: #FF3B5C; --s2: #FF9F0A; --s3: #FFD60A; --s4: #34D399; --s5: #38BDF8; --s6: #A78BFA; --spectre: linear-gradient(100deg, var(--s1), var(--s2) 21%, var(--s3) 40%, var(--s4) 60%, var(--s5) 80%, var(--s6)); /* Les memes teintes, mais destinees au TEXTE. Sur fond nuit elles se confondent avec les precedentes ; sur fond clair, le jaune vif tombe a 1,4 de contraste et il faut les assombrir. Deux jeux permettent de garder l'arc-en-ciel eclatant sur les surfaces tout en gardant les dates lisibles. */ --t1: var(--s1); --t2: var(--s2); --t3: var(--s3); --t4: var(--s4); --t5: var(--s5); --t6: var(--s6); /* LES COULEURS DES RESEAUX, ET NON CELLES DE L'ARC. Les boutons de partage prenaient une teinte du jeu : le X portait le jaune, qui tombe a 4,65 sur blanc et se lit mal. Une marque se reconnait d'abord a sa couleur — le bleu de Bluesky, le violet de Mastodon —, et l'emprunter rend le bouton lisible avant meme qu'on ait vu le pictogramme. Le X n'a pas de couleur : il est noir, donc il s'inverse d'un theme a l'autre. C'est la seule des trois dans ce cas. */ --bluesky: #0085FF; --mastodon: #6364FF; --x: #FFFFFF; /* Le vert de la reussite et le rouge de l'echec reprennent deux teintes de l'arc. Ils ne s'y confondent pas : depuis que les cartes verrouillees s'allument de leur PROPRE couleur, aucune carte n'utilise plus le vert pour dire « bien place ». Ces deux jetons ne servent qu'aux petits temoins, ou vert et rouge se lisent sans apprentissage. */ /* La couleur des actions. Volontairement en dehors de l'arc : un bouton n'est pas une carte, et il ne doit jamais laisser croire qu'il en porte la couleur. */ /* LE VIOLET PORTE DU TEXTE BLANC, ET IL A DU S'ASSOMBRIR POUR CELA. Le bouton portait l'encre du fond — presque noire — sur un degrade allant de #7C6BFF a #5B4BE0 : 5,15 en haut, 3,36 en bas, sous le seuil sur la moitie de sa hauteur. Le blanc n'allait pas mieux dans l'autre sens : 3,89 en haut. Le degrade descend donc d'un dixieme. Le blanc passe alors partout — 4,69 au pire — et la teinte reste franchement violette. Une joueuse a demande le texte blanc ; la mesure lui donne raison, mais il fallait toucher au fond pour que ce soit vrai. */ --action: #5143C9; --action-clair: #6F60E5; /* L'encre des boutons violets : blanche dans les deux themes, la couleur du bouton ne changeant pas avec le theme. */ --sur-action: #FFFFFF; --juste: #34D399; --faux: #FF3B5C; --r-s: 10px; --r: 16px; --r-l: 22px; --ombre: 0 24px 60px -20px rgba(0, 0, 0, .9); --ombre-vive: 0 32px 70px -18px rgba(0, 0, 0, .95); /* Ressort commun a tous les deplacements. Un easing unique fait que tout le site bouge de la meme facon, ce qui se remarque moins mais se sent. */ --ressort: cubic-bezier(.22, 1.4, .36, 1); --doux: cubic-bezier(.3, .8, .3, 1); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--trait-vif) transparent; } body { margin: 0; min-height: 100dvh; background: var(--nuit); color: var(--texte); font-family: Manrope, -apple-system, "Segoe UI", system-ui, sans-serif; font-size: 16px; line-height: 1.5; /* `overflow-x: clip` et non `hidden`. `hidden` fait du body un conteneur de defilement : `position: sticky` cesse alors de se referer a la fenetre, et `window.scrollY` ne bouge plus. Deux mecanismes en dependaient sans que je le sache — l'en-tete colle et le mode compact, qui restait sans effet. `clip` rogne ce qui deborde sans creer de conteneur : c'est ce qu'on voulait depuis le debut. */ overflow-x: hidden; /* repli pour les moteurs qui ignorent `clip` */ overflow-x: clip; padding-bottom: env(safe-area-inset-bottom); } /* Halo de fond. Deux taches tres diffuses aux extremites du spectre : de la profondeur sans motif, et rien qui bouge derriere le texte. */ body::before { content: ""; position: fixed; inset: -20% -10% auto; height: 70vh; pointer-events: none; z-index: 0; background: radial-gradient(50% 60% at 22% 0%, rgba(75, 91, 216, .30), transparent 70%), radial-gradient(45% 55% at 82% 12%, rgba(230, 76, 121, .16), transparent 70%); filter: blur(20px); /* LES DEUX HALOS NE VALENT QUE SUR FOND SOMBRE. Ils eclairent le haut de la page d'un bleu et d'un rose tres dilues. Sur un fond clair, ils la salissent : `--lueur` les efface d'un coup, sans qu'il faille une seconde regle dans le bloc du theme. */ opacity: var(--lueur); } body > * { position: relative; z-index: 1; } a { color: inherit; } /* SELECTION DE TEXTE : desactivee sur l'ossature, gardee sur le contenu. Sur telephone, un doigt pose pour faire defiler declenche une selection des qu'il s'attarde un peu — et le texte surligne reste, avec sa poignee et son menu contextuel. La protection existait sur les cartes du plateau ; elle manquait partout ailleurs, c'est-a-dire justement la ou l'on pose le doigt. Les elements d'interface — en-tete, onglets, boutons, libelles — n'ont aucune raison d'etre selectionnables. Le CONTENU le reste : un titre de carte, un intitule, un texte de regles peuvent vouloir etre copies. */ h1, h2, h3, .oeil, .onglet, .bouton, .entete, .pied, .avis, .avancement, .consigne, .minuit, .jetons, .jetons-mot, .rang, .legende, .mesure, nav, button, label, summary { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } /* Le menu contextuel de l'appui long ne s'ouvre pas sur l'ossature : il interrompt le defilement et n'a rien a proposer d'utile. */ .entete, nav, .onglet, .bouton, button { -webkit-touch-callout: none; } /* Le rectangle gris que certains navigateurs mobiles peignent au toucher est remplace par nos propres etats : il apparaissait meme sur un simple appui de defilement, et il est toujours en retard d'une fraction de seconde. */ a, button, .onglet, .bouton, [role="button"] { -webkit-tap-highlight-color: transparent; } /* Le defilement reste fluide et ne rebondit pas horizontalement : un deplacement lateral involontaire suffisait a interrompre le geste vertical et a laisser le doigt sur du texte. */ html { overscroll-behavior-x: none; } /* Le rognage horizontal est declare une seule fois, plus haut, sur `body`. Il l'etait deux fois, et la seconde en `hidden` annulait la premiere. */ /* Le cadre de page. Cette regle etait recopiee dans chaque fichier, avec pour seule variation la largeur : la page « a propos », ecrite plus tard, l'avait simplement oubliee et heritait des marges du navigateur. Une regle repetee six fois finit toujours par manquer une fois. La largeur reste reglable page par page, par --large. */ main { max-width: var(--large, 760px); margin: 0 auto; padding: 30px 22px 40px; } button { font: inherit; } ::selection { background: color-mix(in srgb, var(--s6) 45%, transparent); } :focus-visible { outline: 2px solid var(--s2); outline-offset: 3px; border-radius: 4px; } /* ===================================================================== LE THEME CLAIR ===================================================================== Il ne redefinit que des variables : aucune regle du jeu ne connait de couleur en dur, et c'est ce qui rend la bascule possible sans toucher au reste. Le bloc est ecrit DEUX fois — une pour le reglage du systeme, une pour le choix explicite du joueur — parce qu'un `@media` ne peut pas etre annule par un attribut, et qu'il faut pouvoir choisir le sombre sur un appareil regle en clair. Le media vient EN PREMIER, l'attribut ensuite : a specificite egale, la derniere regle l'emporte, et le choix du joueur doit primer sur le systeme. ===================================================================== */ @media (prefers-color-scheme: light) { :root:not([data-theme="sombre"]) { color-scheme: light; /* LE FOND EST GRIS, LES CARTES SONT BLANCHES — l'inverse du theme sombre. Un fond blanc avec des cartes blanches donnait 1,03 de contraste : la carte n'existait plus. Dans les deux themes, elle doit se detacher du fond ; la direction s'inverse, pas le principe. */ --nuit: #F0F1F6; --nuit-2: #E7E9F1; --carte: linear-gradient(165deg, #FFFFFF, #FAFAFD); /* PLUS APPUYES QU'EN SOMBRE. Un gris pale sur blanc se voit beaucoup moins qu'un gris sombre sur noir a ecart de luminance egal : mesure a 1,14 contre 1,16 pour les memes valeurs, et pourtant le pave vide disparaissait. */ --voile: rgba(20, 22, 31, .055); --voile-2: rgba(20, 22, 31, .10); --trait: rgba(20, 22, 31, .12); --trait-vif: rgba(20, 22, 31, .26); --creux: rgba(20, 22, 31, .22); --ombre-forte: rgba(20, 22, 31, .18); /* `--ombre-vive` MANQUAIT A CE BLOC. Le theme clair redefinissait `--ombre-forte` mais pas sa voisine : les menus qui tombent — le tiroir du compte, le panneau des reglages — gardaient une ombre a 95 % de noir sur un fond gris pale, la ou toutes les autres surfaces avaient ete adoucies. La geometrie ne change pas, seule l'encre. */ --ombre-vive: 0 32px 70px -18px rgba(20, 22, 31, .28); /* --texte-3 mesurait 4,00 sur ce fond, sous les 4,5 exiges : la date, les onglets et les noms de categories s'effacaient. Les trois descendent. */ --texte: #14161F; --texte-2: #41465C; --texte-3: #616780; /* LES TEINTES VIVES NE CHANGENT PAS. Elles servent aux SURFACES — pastille du rang, liseré, paves, fond de datation — ou elles portent une encre sombre : une pastille jaune vif avec un chiffre sombre donne 12,8 de contraste, le meilleur du jeu. Ce sont les memes couleurs qu'en sombre, et c'est voulu. */ --sur-teinte: #14161F; --lueur: 0; /* Les teintes de TEXTE, elles, sont assombries : sur blanc, le jaune vif ne donne que 1,41 et le vert 1,92. Ces variantes gardent le ton et passent toutes les 4,5. */ --t1: #DB324F; --t2: #A86806; --t3: #897305; --t4: #20825E; --t5: #247CA3; --t6: #7E69BE; /* Bluesky et Mastodon descendent d'un cran : leurs couleurs officielles donnent 3,62 et 4,38 sur blanc, sous les 4,5. L'ecart est infime et la marque reste reconnaissable. Le X, lui, redevient noir — sa couleur. */ --bluesky: #0075E0; --mastodon: #6162F9; --x: #000000; } } [data-theme="clair"] { color-scheme: light; /* LE FOND EST GRIS, LES CARTES SONT BLANCHES — l'inverse du theme sombre. Un fond blanc avec des cartes blanches donnait 1,03 de contraste : la carte n'existait plus. Dans les deux themes, elle doit se detacher du fond ; la direction s'inverse, pas le principe. */ --nuit: #F0F1F6; --nuit-2: #E7E9F1; --carte: linear-gradient(165deg, #FFFFFF, #FAFAFD); /* PLUS APPUYES QU'EN SOMBRE. Un gris pale sur blanc se voit beaucoup moins qu'un gris sombre sur noir a ecart de luminance egal : mesure a 1,14 contre 1,16 pour les memes valeurs, et pourtant le pave vide disparaissait. */ --voile: rgba(20, 22, 31, .055); --voile-2: rgba(20, 22, 31, .10); --trait: rgba(20, 22, 31, .12); --trait-vif: rgba(20, 22, 31, .26); --creux: rgba(20, 22, 31, .22); --ombre-forte: rgba(20, 22, 31, .18); /* `--ombre-vive` MANQUAIT A CE BLOC. Le theme clair redefinissait `--ombre-forte` mais pas sa voisine : les menus qui tombent — le tiroir du compte, le panneau des reglages — gardaient une ombre a 95 % de noir sur un fond gris pale, la ou toutes les autres surfaces avaient ete adoucies. La geometrie ne change pas, seule l'encre. */ --ombre-vive: 0 32px 70px -18px rgba(20, 22, 31, .28); /* --texte-3 mesurait 4,00 sur ce fond, sous les 4,5 exiges : la date, les onglets et les noms de categories s'effacaient. Les trois descendent. */ --texte: #14161F; --texte-2: #41465C; --texte-3: #616780; /* LES TEINTES VIVES NE CHANGENT PAS. Elles servent aux SURFACES — pastille du rang, liseré, paves, fond de datation — ou elles portent une encre sombre : une pastille jaune vif avec un chiffre sombre donne 12,8 de contraste, le meilleur du jeu. Ce sont les memes couleurs qu'en sombre, et c'est voulu. */ --sur-teinte: #14161F; --lueur: 0; /* Les teintes de TEXTE, elles, sont assombries : sur blanc, le jaune vif ne donne que 1,41 et le vert 1,92. Ces variantes gardent le ton et passent toutes les 4,5. */ --t1: #DB324F; --t2: #A86806; --t3: #897305; --t4: #20825E; --t5: #247CA3; --t6: #7E69BE; /* Bluesky et Mastodon descendent d'un cran : leurs couleurs officielles donnent 3,62 et 4,38 sur blanc, sous les 4,5. L'ecart est infime et la marque reste reconnaissable. Le X, lui, redevient noir — sa couleur. */ --bluesky: #0075E0; --mastodon: #6162F9; --x: #000000; } /* ------------------------------------------------------------ typographie */ .deploie { font-family: "Bricolage Grotesque", Manrope, sans-serif; font-weight: 800; letter-spacing: -.03em; line-height: 1.02; } .oeil { font-size: .68rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--texte-3); margin: 0; } .chiffre { font-family: "Bricolage Grotesque", Manrope, sans-serif; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; } /* ---------------------------------------------------------------- entete */ .entete { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 20px; /* LA ZONE SURE DU HAUT, pour l'application installee. Dans un navigateur, la barre d'etat du telephone est au-dessus de la page et `env(safe-area-inset-top)` vaut zero : cette regle n'y change rien. Installe en plein ecran avec `black-translucent`, le contenu passe SOUS l'heure et la batterie, et la marque s'y serait trouvee a moitie cachee. */ padding: calc(12px + env(safe-area-inset-top, 0px)) 22px 12px; background: color-mix(in srgb, var(--nuit) 72%, transparent); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-bottom: 1px solid var(--trait); } .marque { font-family: "Bricolage Grotesque", Manrope, sans-serif; font-weight: 800; font-size: 1.12rem; letter-spacing: .01em; text-decoration: none; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px; } /* La marque porte le spectre en miniature : cinq barres montantes, la meme idee que le plateau. */ /* LE SCEAU : cinq traits sur une ligne de temps. Le carre en degrade ne disait rien du jeu — il aurait pu servir a n'importe quelle application. Cinq traits de hauteur croissante, poses sur un axe, disent la chronologie et les cinq cartes d'une grille. Les traits sont des enfants generes en style : le balisage n'a pas a porter cinq elements pour un logo, et l'ancien `` suffit. */ .sceau { width: 22px; height: 20px; flex: 0 0 auto; position: relative; display: flex; align-items: flex-end; gap: 2px; background: none; border-radius: 0; } /* L'axe : le trait horizontal sur lequel les barres reposent. */ .sceau::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; border-radius: 1px; background: var(--trait-vif); } .sceau i { flex: 1; border-radius: 1.5px 1.5px 0 0; display: block; } .sceau i:nth-child(1) { height: 34%; background: var(--s1); } .sceau i:nth-child(2) { height: 52%; background: var(--s2); } .sceau i:nth-child(3) { height: 70%; background: var(--s3); } .sceau i:nth-child(4) { height: 85%; background: var(--s4); } .sceau i:nth-child(5) { height: 100%; background: var(--s5); } .menu { display: flex; gap: 4px; margin-left: auto; flex: 0 1 auto; min-width: 0; align-items: center; } /* LES ICONES SONT RESERVEES AU MENU MOBILE. Sur ordinateur, les onglets sont en ligne et n'ont pas besoin d'un point d'accroche : les libelles suffisent, et les dessins s'empilaient au-dessus d'eux en debordant du bandeau. Ils servent dans un panneau plein ecran, ou l'oeil parcourt une liste verticale. */ /* LES ICONES NE PARAISSENT QUE DANS LE PANNEAU MOBILE. Le selecteur s'appuie sur un fait de structure plutot que sur une largeur : sur telephone le panneau est deplace hors de l'en-tete, `.entete > .menu` ne le designe donc plus. Sur ordinateur il y reste, et ses icones se masquent. Une regle qui suit la structure vaut mieux qu'une regle qui suit un point de rupture : elle ne peut pas se desaccorder du script. */ .entete > .menu .ico { display: none; } /* La mention de paternite n'appartient qu'au panneau de telephone : dans le bandeau d'ordinateur, elle ferait une entree de navigation de plus. Meme selecteur structurel que les icones. */ .entete > .menu .copyright { display: none; } /* SUR ORDINATEUR, L'ENTREE S'ABREGE — ELLE NE DISPARAIT PAS. J'avais commence par la masquer : la navigation passe de 446 a 585 pixels avec elle, dans un bandeau qui occupe deja 951 pixels. Mais deux pages seulement portent un lien vers les mentions dans leur pied, et la page de jeu n'en a pas du tout : la masquer aurait prive le jeu de tout acces sur ordinateur, alors que la loi demande qu'elles soient joignables depuis toutes les pages. « Mentions » suffit la ou la place manque, et rend cinquante pixels. Le libelle entier reste sur telephone, ou le panneau est plein ecran. */ /* LE RACCOURCI « MENTIONS » A ETE RETIRE. Les trois pages de reference vivent desormais dans le menu « ? », ou la place ne manque plus : le libelle entier y tient, et c'est celui que la loi attend. */ /* LES TROIS PAGES DE REFERENCE SE REPLIENT DERRIERE UN « ? », SUR ORDINATEUR. Regles, A propos et Mentions legales ne se consultent qu'au besoin, et elles occupaient trois places dans une ligne qui debordait deja - la pastille de niveau venait mordre sur la date. Elles rendent environ 230 pixels. Le bouton emprunte la mecanique des reglages : meme classe, donc meme panneau, meme fermeture au clic ailleurs et a Echap. Rien de nouveau a maintenir. SUR TELEPHONE, RIEN NE CHANGE : le panneau est plein ecran, la place ne manque pas, et trois entrees repliees derriere un signe y seraient plus difficiles a atteindre que trois lignes. */ .entete > .menu .aide .panneau a { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: var(--r-s); color: var(--texte); text-decoration: none; font-size: .88rem; font-weight: 500; white-space: nowrap; transition: background .15s; } .entete > .menu .aide .panneau a:hover { background: var(--voile-2); } /* L'icone reparait ICI, alors qu'elle est masquee dans la ligne du bandeau : dans un menu deroulant elle donne au regard le meme point d'accroche que dans le panneau du telephone. */ .entete > .menu .aide .panneau .ico { display: inline-flex; } .entete > .menu .aide .panneau .ico svg { width: 17px; height: 17px; } .entete > .menu .aide > .ouvre { font-family: "Bricolage Grotesque", Manrope, sans-serif; font-weight: 800; font-size: 1.02rem; line-height: 1; } /* LES REGLAGES SE REPLIENT DERRIERE UN BOUTON, SUR ORDINATEUR. Ils etaient purement masques : le menu du bandeau est une ligne de navigation, et un reglage n'y a pas sa place. C'etait defendable pour un seul interrupteur, celui des sons. Il y en a deux depuis le theme clair, et le theme se change surtout sur ordinateur — ou il n'etait donc pas atteignable. Mesure : le bandeau occupe deja 951 pixels a lui seul et deborde des 900. Deux boutons de plus n'y tiennent pas ; un seul, oui, qui ouvre les autres. */ .entete > .menu .bascule-effets { display: none; } .entete > .menu .reglages.ouverts .bascule-effets { display: block; } /* SUR TELEPHONE, LE CONTENEUR EST TRANSPARENT. `display: contents` le fait disparaitre de la mise en page sans masquer ce qu'il contient : les deux reglages se posent directement dans le panneau deplie, exactement comme avant qu'il existe. `display: none` les aurait masques avec lui — le conteneur ne doit rien changer la ou il ne sert pas. Le bouton qui les revele, lui, n'a de sens que sur ordinateur. */ /* SUR TELEPHONE, LE CONTENEUR *ET* SON PANNEAU S'EFFACENT. `display: contents` avait ete pose sur `.reglages` seul, en 25.9. Mais les deux boutons vivent dans un `.panneau` a l'interieur : celui-ci restait un bloc de largeur pleine, et les boutons se centraient DANS LUI. Comme il n'etait lui-meme centre par rien, ils paraissaient decales. Le defaut ne se voyait pas au bon endroit : la regle de centrage des boutons etait juste, c'est leur conteneur qui manquait a l'appel. */ .reglages, .reglages > .panneau { display: contents; } .reglages > .ouvre { display: none; } .entete > .menu .reglages { display: block; position: relative; } .entete > .menu .reglages > .ouvre { display: flex; } /* LA ROUE ETAIT UN CARACTERE, ELLE DEVIENT UN DESSIN. « ⚙ » a beau etre demande a 1 rem, il n'occupe qu'une part de sa boite et varie d'une police a l'autre : il paraissait plus petit que les liens voisins, qui font 15 pixels. Un joueur l'a signale — « presque invisible ». Un SVG se dimensionne exactement : 19 pixels, soit un quart de plus que le texte du menu, et la meme epaisseur de trait que le reste du jeu. La couleur monte aussi d'un cran : `--texte-3` est la teinte des mentions secondaires, trop discrete pour une commande. */ .reglages > .ouvre { width: 36px; height: 36px; align-items: center; justify-content: center; color: var(--texte-2); background: none; border: 1px solid transparent; border-radius: 11px; cursor: pointer; transition: color .18s, border-color .18s, background .18s; } /* 17 px et non 19 : reglee a l'oeil par une joueuse, et elle a raison — a 19 la roue pesait plus que les liens du menu, qu'elle accompagne. */ .reglages > .ouvre svg { width: 17px; height: 17px; display: block; } .reglages > .ouvre:hover, .reglages.ouverts > .ouvre { color: var(--texte); border-color: var(--trait-vif); background: var(--voile); } /* LE PANNEAU DES REGLAGES PARLE LA LANGUE DU TIROIR DU COMPTE. Les deux sont le meme objet : un menu qui tombe sous un bouton de l'en-tete, a huit ou dix pixels dessous, aligne a droite pour ne pas sortir de la fenetre. Ils avaient pourtant deux fonds, deux traits, deux rayons et deux ombres differents — et le voisin immediat est celui du compte, a quelques centimetres. On reprend donc ses valeurs plutot que d'en inventer. Le remplissage de 7 px et la gouttiere de 4 px viennent de la : les entrees se touchent presque, ce qui les fait lire comme une liste et non comme deux commandes independantes. */ .entete > .menu .reglages.ouverts .panneau { position: absolute; top: calc(100% + 10px); right: 0; display: flex; flex-direction: column; gap: 4px; padding: 7px; min-width: 210px; background: var(--nuit-2); border: 1px solid var(--trait-vif); border-radius: var(--r); box-shadow: var(--ombre-vive); animation: tomber .18s var(--doux); z-index: 50; } /* LES DEUX REGLAGES N'AVAIENT AUCUN STYLE SUR ORDINATEUR. Leur habillage — la pastille a bord arrondi, le trait pointille quand le reglage est coupe — n'est ecrit que dans le media a 720 px, donc pour le panneau plein ecran du telephone. Sur ordinateur, ils tombaient dans ce menu en boutons BRUTS du navigateur : fond gris, bordure biseautee, police du systeme. Un morceau d'interface d'un autre siecle au milieu du jeu. Ils prennent ici la forme des entrees du tiroir du compte, qui est la forme d'une commande de menu dans ce projet : pleine largeur, texte a gauche, fond au survol seulement. */ .entete > .menu .reglages .panneau .bascule-effets { appearance: none; display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: none; border: 0; border-radius: var(--r-s); padding: 9px 11px; color: var(--texte); font: inherit; font-size: .88rem; font-weight: 500; cursor: pointer; transition: background .15s, color .15s; } .entete > .menu .reglages .panneau .bascule-effets:hover { background: var(--voile-2); } /* Un reglage coupe s'ecrit en gris, comme sur telephone. Le trait pointille de la version mobile n'a pas de sens ici : ces entrees n'ont pas de bordure. */ .entete > .menu .reglages .panneau .bascule-effets[aria-pressed="false"] { color: var(--texte-3); } .entete > .menu .reglages .panneau { display: none; } .menu a { flex: 0 0 auto; white-space: nowrap; text-decoration: none; color: var(--texte-2); font-size: .86rem; font-weight: 500; padding: 7px 12px; border-radius: 999px; transition: color .18s, background .18s; } .menu a:hover { color: var(--texte); background: var(--voile); } .menu a[aria-current="page"] { color: var(--texte); background: var(--voile-2); } /* ------------------------------------------------------- menu du compte */ .compte { position: relative; flex: 0 0 auto; } .compte-bouton { display: inline-flex; align-items: center; gap: 9px; background: var(--voile); border: 1px solid var(--trait); border-radius: 999px; padding: 5px 13px 5px 5px; color: var(--texte); cursor: pointer; max-width: 210px; transition: border-color .18s, background .18s; } .compte-bouton:hover { background: var(--voile-2); border-color: var(--trait-vif); } .portrait { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: var(--spectre); } .compte-bouton .nom { font-size: .85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .tiroir { position: absolute; top: calc(100% + 10px); right: 0; min-width: 230px; background: var(--nuit-2); border: 1px solid var(--trait-vif); border-radius: var(--r); box-shadow: var(--ombre-vive); padding: 7px; display: none; animation: tomber .18s var(--doux); } .tiroir[data-ouvert="1"] { display: block; } @keyframes tomber { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .tiroir-entete { padding: 9px 11px 11px; border-bottom: 1px solid var(--trait); margin-bottom: 6px; } .tiroir-entete .nom { font-weight: 700; font-size: .95rem; } .tiroir-entete .lien-compte { font-size: .78rem; color: var(--texte-3); margin-top: 2px; } .tiroir button, .tiroir a { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: none; border: 0; color: var(--texte); font-size: .88rem; padding: 9px 11px; border-radius: var(--r-s); cursor: pointer; text-decoration: none; transition: background .15s; } .tiroir button:hover, .tiroir a:hover { background: var(--voile-2); } .tiroir .sortir { color: var(--faux); } /* --------------------------------------------------------------- boutons */ .bouton { appearance: none; border: 0; border-radius: 999px; padding: 14px 30px; font-weight: 700; font-size: .95rem; letter-spacing: -.01em; color: var(--sur-action); /* Un violet franc, pas l'arc-en-ciel. Le degrade spectral portait une information sur les cartes : la place sur l'axe. L'etaler sur les boutons le vidait de son sens et saturait l'ecran, d'autant que l'arc est passe de cinq teintes sourdes a six teintes vives. La couleur reste donc reservee au plateau, a la marque et au palmares. Le degrade vertical n'est pas decoratif : il donne au bouton un relief que les bornes d'arcade ont toujours eu. */ background: linear-gradient(180deg, var(--action-clair), var(--action)); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 9px; /* Meme hauteur qu'un champ de saisie. Un bouton pose a cote d'un champ, comme « Partager » sur la page de jeu, doit s'aligner au pixel avec lui. */ min-height: 48px; transition: filter .2s, transform .16s var(--ressort), box-shadow .2s; box-shadow: 0 10px 26px -12px var(--action); } .bouton:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); } .bouton:active:not(:disabled) { transform: translateY(1px) scale(.99); } .bouton:disabled { background: var(--voile); color: var(--texte-3); box-shadow: none; cursor: default; } .bouton.fantome { background: var(--voile); color: var(--texte); border: 1px solid var(--trait); box-shadow: none; font-weight: 600; } .bouton.fantome:hover { background: var(--voile-2); border-color: var(--trait-vif); } .bouton.petit { padding: 10px 18px; font-size: .86rem; } /* `creux` est un alias de `fantome` : la page de jeu demandait cette classe pour les boutons de regie, elle n'existait pas, et ces boutons retombaient sur le style principal. Quatre boutons d'administration en pleine couleur au bas de l'ecran de jeu, c'est exactement ce qu'ils ne devaient pas etre. */ .bouton.creux { background: var(--voile); color: var(--texte); border: 1px solid var(--trait); box-shadow: none; font-weight: 600; } .bouton.creux:hover { background: var(--voile-2); border-color: var(--trait-vif); } /* Une action destructrice se signale par sa bordure, pas par un aplat rouge qui attirerait l'oeil vers ce qu'il ne faut surtout pas cliquer par megarde. La regle ne depend pas de `creux` : un `bouton danger` pose seul doit avoir l'air de ce qu'il est, et non du bouton principal. */ .bouton.danger { background: transparent; color: var(--faux); border: 1px solid color-mix(in srgb, var(--faux) 45%, transparent); box-shadow: none; font-weight: 600; } .bouton.danger:hover:not(:disabled) { background: color-mix(in srgb, var(--faux) 12%, transparent); border-color: var(--faux); filter: none; } /* L'attribut hidden pose display:none dans la feuille du navigateur, mais .bouton pose display:inline-flex, qui a la meme specificite et gagne parce qu'il vient apres. Sans cette regle, cacher un bouton ne le cache pas. Le defaut s'est vu sur « Journées précédentes », affiche alors qu'il n'y avait plus rien a charger. */ .bouton[hidden], [hidden] { display: none !important; } /* --------------------------------------------------------------- surfaces */ .carte { background: var(--voile); border: 1px solid var(--trait); border-radius: var(--r); padding: 20px; } .champ { width: 100%; background: var(--voile); border: 1px solid var(--trait); border-radius: var(--r-s); color: var(--texte); font: inherit; font-size: .95rem; padding: 13px 15px; /* Hauteur posee explicitement plutot que deduite du remplissage : un champ `type=email` et un champ `type=text` ne se calculent pas tout a fait de la meme facon d'un navigateur a l'autre, et deux champs cote a cote finissent par differer de un ou deux pixels. */ min-height: 48px; transition: border-color .18s, background .18s; } .champ::placeholder { color: var(--texte-3); } .champ:focus { outline: none; border-color: var(--s2); background: var(--voile-2); } /* Grille d'emojis rendue en CSS plutot qu'en caracteres : les emojis carres n'ont pas la meme taille d'une plateforme a l'autre et cassent l'alignement. */ .trace { display: flex; flex-direction: column; gap: 4px; } .trace-ligne { display: flex; gap: 4px; } .pave { width: 15px; height: 15px; border-radius: 4px; background: var(--voile-2); } /* Une colonne, une teinte : la grille partagee se lit comme le plateau, et le destinataire retrouve l'ordre des places sans legende. */ .pave.bon { background: var(--juste); } .trace-ligne .pave.bon:nth-child(1) { background: var(--s1); box-shadow: 0 0 12px -3px var(--s1); } .trace-ligne .pave.bon:nth-child(2) { background: var(--s2); box-shadow: 0 0 12px -3px var(--s2); } .trace-ligne .pave.bon:nth-child(3) { background: var(--s3); box-shadow: 0 0 12px -3px var(--s3); } .trace-ligne .pave.bon:nth-child(4) { background: var(--s4); box-shadow: 0 0 12px -3px var(--s4); } .trace-ligne .pave.bon:nth-child(5) { background: var(--s5); box-shadow: 0 0 12px -3px var(--s5); } /* La ligne d'avis reserve sa hauteur MEME VIDE, pour que l'apparition d'un message ne fasse pas sauter la page. C'est voulu — mais quand rien ne suit, cette reserve creuse un trou. Le `:empty` la supprime alors : le contenu d'apres remonte, et le saut redoute n'a pas lieu puisqu'il n'y a rien a deplacer. */ .avis { font-size: .9rem; line-height: 1.55; color: var(--texte-2); margin: 14px 0 0; min-height: 1.3em; } .avis:empty { min-height: 0; margin: 0; } /* L'apparition d'un message rend sa hauteur a l'element, ce qui deplace ce qui suit. La transition rend ce mouvement lisible plutot que brutal : on voit l'espace s'ouvrir, on ne subit pas un saut. */ .avis { transition: min-height .18s var(--doux), margin .18s var(--doux); } .avis.vif { color: var(--s5); } .avis.erreur { color: var(--faux); } .pastille { width: 7px; height: 7px; border-radius: 50%; background: var(--voile-2); flex: 0 0 auto; transition: background .25s, box-shadow .25s; } .pastille.faite { background: var(--juste); box-shadow: 0 0 10px -1px var(--juste); } .pastille.ratee { background: var(--faux); } .pastille.encours { background: var(--s5); box-shadow: 0 0 10px -1px var(--s5); } /* La marque d'un onglet : un pictogramme de categorie, dont la COULEUR dit l'etat de la grille. La pastille ronde qu'elle remplace portait l'etat mais rien de la categorie — on voyait qu'une grille etait finie sans savoir laquelle. Quatre etats, et le quatrieme comptait autant que les autres : commencee mais pas finie, c'est celle vers laquelle il faut revenir. */ .marque { flex: 0 0 auto; display: inline-flex; color: var(--texte-3); transition: color .25s, filter .25s; } .marque svg { width: 17px; height: 17px; display: block; } .marque.faite { color: var(--juste); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--juste) 55%, transparent)); } .marque.ratee { color: var(--faux); } .marque.encours { color: var(--s3); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--s3) 50%, transparent)); } /* L'onglet actif eclaircit son icone meme sans etat : on doit voir ou l'on est, y compris sur une grille pas encore commencee. */ .onglet[aria-selected="true"] .marque { color: var(--texte); } .onglet[aria-selected="true"] .marque.faite { color: var(--juste); } .onglet[aria-selected="true"] .marque.ratee { color: var(--faux); } .onglet[aria-selected="true"] .marque.encours { color: var(--s3); } /* ----------------------------------------------------------- menu mobile */ /* Trois barres aux couleurs de l'arc, echo de la marque. Un pictogramme neutre aurait fait etranger sur un ecran ou la couleur porte du sens ; celui-ci reprend les teintes du plateau. */ .bouton-menu { display: none; flex-direction: column; justify-content: center; gap: 3px; transition: gap .24s var(--ressort); width: 42px; height: 42px; padding: 0 9px; border: 1px solid var(--trait); border-radius: 11px; background: var(--voile); cursor: pointer; flex: 0 0 auto; } .bouton-menu span { display: block; height: 2.5px; border-radius: 2px; /* `clip-path` s'anime entre deux polygones de meme nombre de points : le rectangle est donc decrit comme un polygone, et non implicitement. */ clip-path: polygon(0% 0%, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%); transition: height .24s var(--ressort), clip-path .24s var(--ressort), border-radius .2s; } .bouton-menu span:nth-child(1) { background: var(--s1); } .bouton-menu span:nth-child(2) { background: var(--s2); } .bouton-menu span:nth-child(3) { background: var(--s3); } .bouton-menu span:nth-child(4) { background: var(--s4); } .bouton-menu span:nth-child(5) { background: var(--s5); } /* Ouvert, CHAQUE barre devient un chevron : cinq chevrons emboites, un par couleur de l'arc. La premiere version n'en gardait que deux et effacait les trois autres — on perdait trois couleurs sur cinq, alors qu'elles sont la signature du jeu. Ici rien ne disparait : les barres se plient, et l'ensemble pointe vers le haut pour dire que le panneau remonte. `clip-path` fait le pliage : un rectangle devient un V par decoupe, ce qu'aucune rotation ne permet sur une barre droite. */ .entete.menu-ouvert .bouton-menu { gap: 0; } .entete.menu-ouvert .bouton-menu span { height: 7px; clip-path: polygon(0% 68%, 50% 0%, 100% 68%, 100% 100%, 50% 32%, 0% 100%); } /* ------------------------------------------------------------------ pied */ .pied { border-top: 1px solid var(--trait); margin-top: 64px; padding: 24px 0 40px; font-size: .82rem; color: var(--texte-3); line-height: 1.7; } .pied a { color: var(--texte-2); } /* La mention de paternite se detache des liens du pied : elle en dit la fin, pas une entree de plus. */ .pied .droits { margin-top: 14px; color: var(--texte-3); } .pied .droits a { color: inherit; } /* ---------------------------------------------------------- adaptations */ @media (max-width: 720px) { /* Les marges laterales se resserrent sur telephone. Cette regle etait, elle aussi, recopiee dans chaque page, et manquait dans la derniere ecrite. */ main { padding: 22px 14px 36px; } /* UN SEUL BANDEAU sur telephone : marque, compte, bouton de menu. Les quatre onglets prenaient une ligne entiere sous la marque — une cinquantaine de pixels voles au plateau, pour une navigation qu'on utilise une fois par session. Ils se replient derriere le bouton. */ .entete { padding: calc(9px + env(safe-area-inset-top, 0px)) 14px 9px; gap: 10px; flex-wrap: wrap; } .bouton-menu { display: flex; } /* Sur la page de jeu, la marque partage la ligne avec le numero, la date et le compte a rebours. Sous 380 pixels, le mot « Chronos » cede la place : le sceau colore suffit a identifier le site, et la date compte davantage ici. La marque garde sa taille partout ailleurs. */ .entete { flex-wrap: nowrap; } .entete .marque { flex: 0 0 auto; min-width: 0; } /* Le bouton de menu ferme la ligne, tout a droite : c'est la que le pouce le trouve sans traverser l'ecran. */ .bouton-menu { margin-left: auto; } .compte-bouton .nom { display: none; } .compte-bouton { padding: 5px; } /* LE MENU PREND TOUT L'ECRAN. Deplie sous le bandeau, il repoussait le jeu vers le bas : le plateau bougeait derriere, et l'on ne savait plus si l'on jouait ou si l'on naviguait. Un panneau plein ecran tranche — on est dans le menu, ou dans le jeu, jamais entre les deux. */ .menu { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; /* LE CENTRAGE DEBORDE PAR LE HAUT QUAND LE CONTENU EST TROP GRAND. `justify-content: center` centre le contenu sur la hauteur disponible. Tant qu'il tient, tout va bien. Des qu'il depasse — six entrees, le bloc Bluesky, le compte, la deconnexion, les deux reglages —, le centrage le fait deborder des DEUX cotes a parts egales, et le debordement du haut passe SOUS le remplissage de 80 px : la premiere entree venait se poser par-dessus la marque « Chronos », qui reste au-dessus du panneau puisque le bouton doit rester atteignable pour refermer. Vu sur iPhone en theme sombre, « Aujourd'hui » a cheval sur le logo. Le mot-cle `safe` dit exactement cela : centre tant que ca tient, et aligne au debut des que ca deborde — le remplissage haut est alors respecte, et la barre de defilement du panneau donne acces au reste. LES DEUX DECLARATIONS SONT NECESSAIRES, dans cet ordre : un navigateur qui ignore `safe` rejette la seconde et garde la premiere, donc le comportement actuel. Aucun ne se retrouve sans centrage. */ justify-content: center; justify-content: safe center; gap: 4px; margin: 0; padding: 80px 20px calc(28px + env(safe-area-inset-bottom, 0px)); background: var(--nuit); /* La barre de defilement du panneau traversait le bandeau : le panneau couvre l'ecran entier, sa barre montait donc jusqu'en haut, par-dessus la marque. Elle est masquee — le contenu tient largement, et s'il debordait, le glissement fonctionne toujours. */ overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; /* Ferme, il est hors d'atteinte : `visibility` retire aussi les liens du parcours au clavier, ce qu'une simple opacite ne fait pas. */ opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s var(--doux), transform .24s var(--ressort), visibility .2s; } /* Le panneau n'est plus enfant de l'en-tete : la classe qui l'ouvre est portee par le corps de page. */ body.menu-ouvert .menu { opacity: 1; visibility: visible; transform: none; } /* La page ne defile pas derriere le panneau : sans cela, on fait glisser le jeu sans le voir, et l'on ne retrouve plus sa place en refermant. */ body.menu-ouvert { overflow: hidden; } .menu a { display: flex; align-items: center; gap: 14px; padding: 15px 16px; border-radius: 12px; font-size: 1.15rem; font-weight: 600; color: var(--texte-2); /* LES ENTREES S'ALIGNENT A GAUCHE, COMME CELLES DU TIROIR. Sans largeur declaree, chaque lien se reduisait a son libelle et le panneau les centrait : les pictogrammes formaient une ligne brisee, decalee au gre de la longueur des mots. Les entrees du compte, juste en dessous, etaient deja alignees — le commentaire du tiroir dit d'ailleurs « elles sont voisines dans le meme panneau, elles doivent s'aligner ». La regle n'avait simplement pas ete portee ici. Une joueuse l'a releve : « quand il y a des picto c'est toujours plus chic de les aligner ». */ align-self: stretch; text-align: left; } /* L'icone donne au regard un point d'accroche : dans une liste de mots, on retrouve un dessin plus vite qu'un libelle. */ /* Chaque entree porte sa teinte, posee par le script. La valeur de repli garde un gris si la variable manque — une page servie sans JavaScript, par exemple. */ .menu .ico { display: inline-flex; flex: 0 0 auto; color: var(--teinte-ico, var(--texte-3)); } .menu .ico svg { width: 21px; height: 21px; display: block; } /* LA PAGE COURANTE SE MARQUE PAR LE GRAS, PLUS PAR LA COULEUR. Le vert designait la page ouverte ; il ne peut plus le faire maintenant que chaque entree a la sienne. Le gras et la teinte pleine du texte s'en chargent, et le fond legerement appuye qui existait deja. */ .menu a[aria-current="page"] { font-weight: 800; color: var(--texte); background: var(--voile-2); } /* L'en-tete passe au-dessus du panneau quand celui-ci est ouvert : le bouton doit rester atteignable pour refermer, et la marque sert de repere. */ body.menu-ouvert .entete { z-index: 70; background: transparent; backdrop-filter: none; border-color: transparent; } body.menu-ouvert .entete .tete { visibility: hidden; } .menu::-webkit-scrollbar { display: none; } /* LA MENTION DE PATERNITE EST POSEE AU BAS DU PANNEAU. En position absolue et non dans le flux : le panneau centre ses entrees, et une marge automatique aurait tout renvoye en haut de l'ecran pour gagner un alignement en bas. Le panneau est en `position: fixed`, il sert donc de referent. */ /* L'interrupteur des effets : discret, sous les entrees, au-dessus de la mention. Il ressemble aux entrees du menu sans en etre une — pas d'icone, un corps plus petit, et la couleur du texte secondaire. */ /* LE PANNEAU DES REGLAGES, CENTRE MEME S'IL RESTE UNE BOITE. `display: contents` a ete pose sur `.reglages` et sur son `.panneau` pour qu'ils s'effacent ici — mais deux tentatives de centrage ont echoue, et la capture montre les deux boutons alignes sur un meme bord gauche malgre des largeurs differentes : c'est la signature d'une boite, pas d'un centrage rate. Une regle plus specifique doit donc l'emporter quelque part. Plutot que de continuer a chercher laquelle, on centre la boite ET son contenu : le resultat est le meme qu'elle s'efface ou non. */ .menu .reglages, .menu .reglages > .panneau { display: flex; flex-direction: column; align-items: center; width: 100%; gap: 0; } .menu .reglages > .ouvre { display: none; } .menu .bascule-effets { appearance: none; display: flex; align-items: center; justify-content: center; /* CENTRES POUR DE VRAI, ET NON ETIRES. `width: auto` avec des marges laterales etirait le bouton sur toute la largeur du panneau : son libelle etait alors centre dans une boite pleine, ce qui donne un centrage apparent mais une pastille demesuree pour trois mots. La meme joueuse qui a demande l'alignement des liens a demande l'inverse ici, et les deux vont ensemble : les entrees de navigation s'alignent parce qu'elles forment une liste ; ces deux boutons se centrent parce qu'ils n'en font pas partie. `align-self: center` avec `width: fit-content` : la pastille epouse son texte, et c'est elle qui se centre. */ align-self: center; width: fit-content; margin: 18px 0 0; padding: 12px 20px; border: 1px solid var(--trait); border-radius: 999px; background: none; color: var(--texte-2); font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; transition: color .2s, border-color .2s; } .menu .bascule-effets[aria-pressed="false"] { color: var(--texte-3); border-style: dashed; } .menu .bascule-effets:hover { color: var(--texte); border-color: var(--trait-vif); } .menu .copyright { /* DANS LE FLUX, ET NON EN POSITION ABSOLUE. Elle flottait au bas du panneau : tenable pour une ligne, plus pour deux. Le credit remontait alors sur le compte a rebours, qui vit dans une autre page et ne pouvait pas le savoir — deux elements qui s'ignorent, l'un pose au-dessus de l'autre. Rendue au flux, elle se pose APRES le compte a rebours au lieu de flotter par-dessus. Une marge simple et non `margin-top: auto` : le panneau porte `justify-content: center`, et une marge automatique absorberait tout l'espace libre — les entrees de navigation remonteraient en haut de l'ecran. Une troisieme ligne, un jour, ne cassera rien : elle poussera. */ margin-top: 14px; padding-bottom: env(safe-area-inset-bottom, 0px); /* `display: flex` EXPLICITE, et c'est ce qui manquait. Il venait de `.menu a` tant que le conteneur etait un lien. Devenu un `
` pour porter le lien vers le compte de MJ, il a perdu la disposition sans perdre `flex-direction` — qui ne fait rien sur un bloc. Les deux lignes se juxtaposaient. LECON : changer le TYPE d'un element lui fait perdre tout ce qu'il heritait de son ancien selecteur, y compris ce qu'on ne voyait pas. Deux lignes : la mention de paternite et le credit. `column` plutot que le retour a la ligne naturel, qui dependrait de la largeur de l'ecran. `text-align: center` explicite : `.menu a` porte un alignement a gauche pour les entrees de navigation, et le conteneur en heriterait par ses enfants. Il n'est pas une entree de navigation. */ display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2px; padding: 10px; font-size: .8rem; font-weight: 500; color: var(--texte-3); } /* Le credit est plus discret que la mention qu'il suit : c'est une seconde ligne, pas une seconde signature. */ .menu .copyright .conseil { font-size: .74rem; opacity: .8; } /* LES DEUX LIENS PRENNENT LEUR STYLE ICI, PAS DE `.menu a`. Le conteneur etait un `` ; il est devenu un `
` pour pouvoir porter le lien vers le compte de MJ — deux liens imbriques n'etant pas valides. Les regles de `.menu a` ne s'appliquent donc plus a lui, et ses enfants, eux, les recevraient toutes : pastille, remplissage, alignement a gauche. On les remet a plat. */ .menu .copyright a { display: inline; padding: 0; border-radius: 0; background: none; font-size: inherit; font-weight: inherit; color: inherit; text-align: inherit; } .menu .copyright a:hover { color: var(--texte-2); background: none; } /* Le compte est dans le menu : son tiroir s'affiche a plat, a la suite des pages, plutot que de flotter au-dessus. Le bouton qui l'ouvrait n'a plus lieu d'etre — le panneau est deja ouvert. */ .menu .compte { width: 100%; margin: 0; } .menu .compte-bouton { display: none; } .menu .tiroir { position: static; display: flex; flex-direction: column; opacity: 1; transform: none; pointer-events: auto; width: 100%; min-width: 0; margin: 6px 0 0; padding: 8px 0 0; border: 0; border-top: 1px solid var(--trait); border-radius: 0; background: none; box-shadow: none; } /* Les entrees du compte portent leurs icones comme celles des pages : elles sont voisines dans le meme panneau, elles doivent s'aligner. */ .menu .tiroir a, .menu .tiroir .sortir { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; font-size: 1.05rem; text-align: left; width: 100%; } .menu .tiroir .ico { display: inline-flex; flex: 0 0 auto; color: var(--texte-3); } .menu .tiroir .ico svg { width: 20px; height: 20px; display: block; } /* L'action destructrice teinte son icone comme son libelle. */ .menu .tiroir .sortir .ico { color: currentColor; } .menu .tiroir-entete { padding: 4px 12px 8px; } .menu a { padding: 11px 12px; border-radius: 10px; font-size: .95rem; } .menu a[aria-current="page"] { background: var(--voile-2); } } @media (max-width: 380px) { .entete .marque { font-size: 0; gap: 0; } /* le sceau reste, le mot part */ .entete .marque .sceau { font-size: 1rem; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }