/* ============================================================================ LE LABORATOIRE · interface B, « le pupitre du professeur » LE CLASSEMENT GÉNÉRAL (SPECS 2.15) ---------------------------------------------------------------------------- Feuille de la page d'essai public/pupitre.html, chargée APRÈS pupitre/socle.css et après les sept feuilles d'étape. Ce n'est pas une étape du plan de bascule : c'est une fonction du jeu, arrivée pendant le chantier, qui a son écran et pose quelques pièces sur ceux des autres. Ce que cette feuille habille, ET RIEN D'AUTRE (test/pupitre-feuilles.test.js) : #ecran-classement l'écran « Classement général », et tout ce qu'il contient body[data-ecran="classement"] la page pendant qu'il est affiché (bulle, voiles) et les pièces que le classement général pose sur les écrans des autres, toutes reconnues à leur identifiant : #salon-classement la ligne de l'accueil (les chiffres du joueur) #btn-classement son bouton (volet public ouvert) #btn-classement-visiteur le bouton de l'écran de connexion #menu-classement l'entrée du menu #profil-classement la case de « Mon profil » #btn-classement-stats, #btn-regle-des-points les deux boutons des statistiques #consentement-annonce, .inscription-annonce l'annonce (fenêtre, inscription) Aucune feuille d'étape n'est retouchée : ces pièces sont lisibles avec le seul habillage du socle, et gardent leur place quand l'étape de leur écran range le reste (elles ne supposent aucune grille). Pour mesurer : npm run pupitre:mesurer -- --ecrans=classement-general (les états vivent dans outils/parcours-du-pupitre/classement.mjs). Règles d'écriture : celles du socle (tout en « u », couleurs du thème, ni color-mix(), ni :has(), ni « inset: », ni dvh hors de @supports). ========================================================================== */ /* ============================================================================ 1. L'ÉCRAN « CLASSEMENT GÉNÉRAL » ---------------------------------------------------------------------------- Il ne défile pas : seule sa LISTE défile, dans son cadre. Le titre, les deux onglets, la ligne « Toi » et « Retour » se voient toujours. Téléphone : une colonne ; le cadre de la liste prend la hauteur qui reste. Ordinateur et téléphone couché : deux colonnes ; à gauche ce qui se lit et se touche, à droite la liste, sur toute la hauteur. app.js pose deux classes sur l'écran : .regle-ouverte (« Comment gagner des points ? » est dépliée) et .visiteur (personne n'est connecté). ========================================================================== */ #ecran-classement { --cl-ligne: max(44px, calc(46 * var(--u))); /* une ligne de la liste, sur deux rangées */ display: grid; align-items: stretch; justify-items: stretch; text-align: left; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto auto auto minmax(calc(2 * var(--cl-ligne)), 1fr) auto auto; grid-template-areas: "titre titre" "onglets onglets" "phrase phrase" "moi moi" "podium podium" "liste liste" "regle outils" "note note"; gap: calc(6 * var(--u)) calc(8 * var(--u)); padding: calc(12 * var(--u)) calc(12 * var(--u)) calc(11 * var(--u)); /* L'écran ne défile pas : sa liste, oui. Sur un écran si court que même deux lignes de liste n'y tiennent plus avec le reste, il défile plutôt que de couper une phrase. */ overflow-x: hidden; overflow-y: auto; } /* Le titre : une plaque GRAVÉE EN CREUX, comme « Mes statistiques » et « Mon profil » (hors-partie.css), pas un grand titre de laiton : c'est une information, et la place va à la liste (socle, section 5 bis). Dix-huit lettres de Cinzel, sur une ligne. */ #ecran-classement > h2 { grid-area: titre; justify-self: center; align-self: center; display: inline-flex; align-items: center; justify-content: center; padding: calc(5 * var(--u)) calc(20 * var(--u)); border-radius: calc(5 * var(--u)); font-size: var(--taille-plaque); line-height: 1.2; letter-spacing: 0.16em; white-space: nowrap; color: var(--plaque-encre); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); background: var(--plaque-rivets), var(--plaque-fond); box-shadow: var(--plaque-ombre); --mesure: etiquette; } #ecran-classement > .classement-onglets { grid-area: onglets; } /* Deux onglets de largeurs inégales : « Depuis toujours » est plus long que « Ce mois-ci », et aucun des deux ne se coupe */ #ecran-classement .onglet { flex: 1 1 auto; white-space: nowrap; letter-spacing: 0; padding: 0 calc(6 * var(--u)); } /* « Classement d'octobre : 212 joueurs classés. Tout le monde repart de zéro le 1er novembre. » */ #classement-phrase { grid-area: phrase; text-align: center; font-size: var(--taille-note); line-height: 1.3; color: var(--texte-doux); text-wrap: balance; } /* La ligne du joueur : la couleur de « ta réponse », et elle commence par « Toi » */ #classement-moi { grid-area: moi; text-align: center; text-wrap: balance; padding: calc(6 * var(--u)) calc(12 * var(--u)); border-radius: calc(12 * var(--u)); font-size: var(--taille-texte); line-height: 1.3; color: var(--texte); background: linear-gradient(90deg, rgba(var(--moi-rvb), 0.22), rgba(var(--moi-rvb), 0.08)); box-shadow: inset 0 0 0 max(1.5px, calc(2 * var(--u))) var(--moi), 0 0 0 1px rgba(0, 0, 0, 0.75); } #classement-podium { grid-area: podium; text-align: center; font-size: var(--taille-note); line-height: 1.3; color: var(--accent-vif); text-wrap: balance; overflow-wrap: anywhere; } /* La liste : le verre simple du socle (une pièce qui défile ne porte pas le cerclage découpé). Elle prend la hauteur de sa rangée, jamais plus. */ #classement-liste { grid-area: liste; list-style: none; margin: 0; padding: calc(4 * var(--u)) calc(6 * var(--u)); min-width: 0; min-height: 0; border-radius: calc(14 * var(--u)); background: var(--verre-fond); box-shadow: var(--verre-anneau), 0 0 0 1px rgba(0, 0, 0, 0.75); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--metal-sombre) transparent; } /* Une ligne : la place, le pseudo (vingt caractères tiennent), puis les points et les parties */ #classement-liste > li { display: grid; grid-template-columns: calc(42 * var(--u)) minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: calc(8 * var(--u)); min-height: var(--cl-ligne); padding: calc(3 * var(--u)) calc(8 * var(--u)); } /* (un filet droit entre deux lignes : arrondie, chaque ligne recourbait le sien à ses deux bouts) */ #classement-liste > li + li { border-top: 1px solid rgba(var(--metal-clair-rvb), 0.18); } #classement-liste .classement-place { grid-column: 1; grid-row: 1 / 3; text-align: center; white-space: nowrap; font-family: var(--police-plateau); font-weight: 900; font-variant-numeric: lining-nums tabular-nums; font-size: max(14px, calc(16 * var(--u))); color: var(--metal-vif); --mesure: etiquette; /* un numéro de rang, comme la pastille .liste-rang du socle */ } #classement-liste .classement-pseudo { grid-column: 2 / 4; grid-row: 1; min-width: 0; font-weight: 700; font-size: var(--taille-texte); line-height: 1.2; overflow-wrap: anywhere; } #classement-liste .classement-points { grid-column: 2; grid-row: 2; font-weight: 700; font-size: var(--taille-note); line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--accent); white-space: nowrap; } #classement-liste .classement-parties { grid-column: 3; grid-row: 2; font-size: var(--taille-note); line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--texte-doux); white-space: nowrap; text-align: right; } /* La ligne du joueur connecté : la couleur de « ta réponse », ET la mention « (toi) » */ #classement-liste > li.moi { border-top-color: transparent; border-radius: calc(9 * var(--u)); background: linear-gradient(90deg, rgba(var(--moi-rvb), 0.28), rgba(var(--moi-rvb), 0.08)); box-shadow: inset 0 0 0 max(1.5px, calc(2 * var(--u))) var(--moi); } #classement-liste > li.moi + li { border-top-color: transparent; } #classement-liste .classement-toi { color: var(--moi-vif); white-space: nowrap; } /* « et 112 autres joueurs classés. » */ #classement-liste > li.classement-suite { display: block; min-height: 0; padding: calc(10 * var(--u)) calc(8 * var(--u)); text-align: center; font-size: var(--taille-note); color: var(--texte-doux); } /* À la place de la liste : mois sans partie, classement fermé, panne */ #classement-vide { grid-area: liste; align-self: center; text-align: center; text-wrap: balance; padding: calc(16 * var(--u)) calc(14 * var(--u)); border-radius: calc(14 * var(--u)); font-size: var(--taille-texte); line-height: 1.4; color: var(--texte-doux); background: rgba(var(--verre-bas), 0.55); box-shadow: inset 0 0 0 max(1px, calc(1.2 * var(--u))) rgba(var(--metal-clair-rvb), 0.4); } /* « Comment gagner des points ? » : une TOUCHE DE VERRE qui se déplie, à côté de « Retour ». Elle parle le langage commun (socle, section 5 bis) : debout sur son pied de laiton, cerclée de laiton clair, écrite comme un bouton, avec un chevron dessiné qui dit le sens (comme « Supprimer mon compte », hors-partie.css). Elle était une plaque de verre cerclée de sombre, précédée d'un « + » : rien ne la distinguait d'une information. Dépliée, la touche reste enfoncée, et sa réponse se lit dessous, dans une carte de verre à plat (une information). */ #classement-regle { grid-area: regle; align-self: start; min-width: 0; padding: 1px 1px calc(5 * var(--u)); } #classement-regle > summary { /* (marges et espacement des lettres un peu plus serrés que ceux d'un bouton : à côté de « Retour », sur téléphone, la question tient ainsi sur deux lignes, pas sur trois) */ display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--u)); min-height: var(--hauteur-bouton); padding: calc(6 * var(--u)) calc(9 * var(--u)); border-radius: calc(12 * var(--u)); cursor: pointer; list-style: none; font-family: var(--police-plateau); font-weight: 700; text-transform: uppercase; letter-spacing: 0; line-height: 1.12; font-size: var(--taille-bouton); text-align: center; text-wrap: balance; color: var(--metal-vif); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); background: linear-gradient(118deg, rgba(255, 255, 255, 0.085) 0%, rgba(255, 255, 255, 0) 24%), linear-gradient(180deg, rgba(var(--verre-haut), 0.86), rgba(var(--verre-bas), 0.92)); box-shadow: inset 0 0 0 max(1.2px, calc(1.5 * var(--u))) var(--metal-clair), 0 0 0 1px rgba(0, 0, 0, 0.8), var(--socle-verre); transition: transform 0.1s ease, filter 0.15s ease; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; } #classement-regle > summary::-webkit-details-marker { display: none; } /* le chevron : vers le bas, repliée ; vers le haut, dépliée (un dessin, pas un texte) */ #classement-regle > summary::after { content: ''; flex: none; width: calc(7 * var(--u)); height: calc(7 * var(--u)); margin-top: calc(-4 * var(--u)); border: solid currentColor; border-width: 0 max(1.5px, calc(2 * var(--u))) max(1.5px, calc(2 * var(--u))) 0; transform: rotate(45deg); } #classement-regle[open] > summary::after { margin-top: calc(4 * var(--u)); transform: rotate(-135deg); } #classement-regle > summary:hover { filter: brightness(1.2); } #classement-regle > summary:active { --pied: calc(1 * var(--u)); transform: translateY(var(--course)); } #classement-regle > summary:focus-visible { outline: var(--anneau-clavier); outline-offset: 3px; } /* dépliée : la touche reste enfoncée */ #classement-regle[open] > summary { --pied: calc(1 * var(--u)); transform: translateY(var(--course)); } /* sa réponse : une carte de verre à plat, cerclée de sombre (elle se lit, elle ne se touche pas) */ #classement-regle-texte { margin-top: calc(12 * var(--u)); padding: calc(10 * var(--u)) calc(14 * var(--u)) calc(12 * var(--u)); border-radius: calc(12 * var(--u)); font-size: var(--taille-texte); line-height: 1.42; color: var(--texte); text-wrap: pretty; background: rgba(var(--verre-bas), 0.6); box-shadow: inset 0 0 0 max(1px, calc(1.2 * var(--u))) rgba(var(--metal-clair-rvb), 0.42); } /* L'invitation du visiteur, ou le rappel du joueur dont la ligne est montrée */ #ecran-classement > .note { grid-area: note; text-align: center; text-wrap: balance; line-height: 1.32; } #ecran-classement > .barre-outils { grid-area: outils; align-self: start; flex-wrap: nowrap; } /* (« Retour » un peu moins large qu'un bouton ordinaire : la place va à la question d'à côté) */ #ecran-classement > .barre-outils > button { white-space: nowrap; padding-left: calc(16 * var(--u)); padding-right: calc(16 * var(--u)); } /* Le visiteur (deux boutons : « Créer un compte », « Retour ») : chacun sa rangée */ #ecran-classement.visiteur { grid-template-rows: auto auto auto auto auto minmax(calc(2 * var(--cl-ligne)), 1fr) auto auto auto; grid-template-areas: "titre titre" "onglets onglets" "phrase phrase" "moi moi" "podium podium" "liste liste" "regle regle" "note note" "outils outils"; } /* … et ses deux boutons tiennent côte à côte DANS le panneau (ils en sortaient des deux côtés sur téléphone, « Retour » coupé par le bord) : ils se partagent la largeur, leurs marges intérieures et l'espacement des lettres se resserrent, pas la police ; sur un écran plus étroit encore, ils passent l'un sous l'autre plutôt que de dépasser */ #ecran-classement.visiteur > .barre-outils { flex-wrap: wrap; } #ecran-classement.visiteur > .barre-outils > button { flex: 1 1 auto; padding-left: calc(10 * var(--u)); padding-right: calc(10 * var(--u)); letter-spacing: 0.04em; } /* La règle dépliée prend le cadre de la liste, le temps de la lire (la liste, le podium et le rappel reviennent quand on la replie) ; elle défile dans son cadre si la fenêtre est courte */ #ecran-classement.regle-ouverte { grid-template-rows: auto auto auto auto minmax(calc(2 * var(--cl-ligne)), 1fr) auto; grid-template-areas: "titre titre" "onglets onglets" "phrase phrase" "moi moi" "regle regle" "outils outils"; } #ecran-classement.regle-ouverte > #classement-podium, #ecran-classement.regle-ouverte > #classement-liste, #ecran-classement.regle-ouverte > #classement-vide, #ecran-classement.regle-ouverte > .note { display: none; } #ecran-classement.regle-ouverte > #classement-regle { align-self: stretch; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--metal-sombre) transparent; } /* Sur téléphone, devant cet écran, le professeur s'efface et sa bulle ne prend sa place que lorsqu'il parle (un message de l'équipe, deux lignes, le reste en pages) : la liste y gagne trois lignes. Sur ordinateur il garde sa place. */ body[data-ecran="classement"] .professeur, body[data-ecran="classement"] .bulle:not(.est-ouverte) { display: none; } body[data-ecran="classement"] .bulle { --bulle-lignes: 2; } /* Comme le profil et les statistiques : cet écran se lit sur n'importe quel appareil du compte, le voile « Partie suivie ailleurs » ne le couvre pas, et le bandeau de démonstration s'y efface */ body[data-ecran="classement"] #bandeau-ailleurs, body[data-ecran="classement"] #bandeau-demo { display: none; } /* ---------- téléphone couché, ordinateur : deux colonnes ---------- */ @media (orientation: landscape) and (max-height: 560px) { #ecran-classement { --cl-ligne: max(44px, calc(44 * var(--u))); grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: "titre onglets" "moi liste" "regle liste" "outils liste"; gap: calc(5 * var(--u)) calc(12 * var(--u)); padding: calc(8 * var(--u)) calc(12 * var(--u)); } /* la hauteur manque : la phrase, le podium et le rappel laissent la place */ #ecran-classement > #classement-phrase, #ecran-classement > #classement-podium, #ecran-classement > .note { display: none; } #ecran-classement > .barre-outils { justify-content: flex-start; align-self: end; } #ecran-classement.visiteur, #ecran-classement.regle-ouverte { grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: "titre onglets" "moi liste" "regle liste" "outils liste"; } #ecran-classement.regle-ouverte > #classement-liste, #ecran-classement.regle-ouverte > #classement-vide { display: block; } #ecran-classement.regle-ouverte > #classement-vide { align-self: center; } } @media (min-width: 900px) and (min-aspect-ratio: 21/20) and (min-height: 561px) { /* À gauche ce qui se lit (le titre, la phrase, « Toi », le podium, la règle, le rappel, « Retour ») ; à droite les deux onglets, et sous eux la liste, sur toute la hauteur */ #ecran-classement { --cl-ligne: calc(42 * var(--u)); grid-template-columns: calc(296 * var(--u)) minmax(0, 1fr); /* chaque pièce de gauche a sa rangée, à sa hauteur ; la rangée vide, avant le rappel, prend ce qui reste : « Retour » reste en bas, et rien ne passe sur rien quand la colonne est pleine */ grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto auto; grid-template-areas: "titre onglets" "phrase liste" "moi liste" "podium liste" "regle liste" ". liste" "note liste" "outils liste"; gap: calc(10 * var(--u)) calc(24 * var(--u)); padding: calc(20 * var(--u)) calc(26 * var(--u)) calc(18 * var(--u)); } #ecran-classement .onglet { letter-spacing: 0.06em; } #ecran-classement > .barre-outils { justify-content: flex-start; align-self: end; } /* le professeur et sa bulle gardent leur place, comme sur les autres écrans */ body[data-ecran="classement"] .professeur { display: block; } body[data-ecran="classement"] .bulle:not(.est-ouverte) { display: flex; } /* Sur ordinateur une ligne tient sur une rangée : la place, le pseudo, les points, les parties */ #classement-liste { padding: calc(6 * var(--u)) calc(10 * var(--u)); border-radius: calc(16 * var(--u)); } #classement-liste > li { grid-template-columns: calc(50 * var(--u)) minmax(0, 1fr) auto calc(88 * var(--u)); grid-template-rows: auto; column-gap: calc(12 * var(--u)); padding: calc(4 * var(--u)) calc(12 * var(--u)); } #classement-liste .classement-place { grid-row: 1; font-size: calc(18 * var(--u)); } #classement-liste .classement-pseudo { grid-column: 2; grid-row: 1; } #classement-liste .classement-points { grid-column: 3; grid-row: 1; font-size: var(--taille-texte); text-align: right; } #classement-liste .classement-parties { grid-column: 4; grid-row: 1; } /* Le visiteur et la règle dépliée gardent les deux colonnes : la liste reste à droite, la règle se lit à gauche (elle défile dans son cadre s'il le faut) */ #ecran-classement.visiteur { grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto auto; grid-template-areas: "titre onglets" "phrase liste" "moi liste" "podium liste" "regle liste" ". liste" "note liste" "outils liste"; } #ecran-classement.regle-ouverte { grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: "titre onglets" "moi liste" "regle liste" "outils liste"; } #ecran-classement.regle-ouverte > #classement-liste, #ecran-classement.regle-ouverte > #classement-vide { display: block; } #ecran-classement.regle-ouverte > #classement-vide { align-self: center; } /* la règle dépliée a la colonne de gauche pour elle : la phrase (elle redit « tout le monde repart de zéro »), le podium et le rappel reviennent quand on la replie */ #ecran-classement.regle-ouverte > #classement-phrase, #ecran-classement.regle-ouverte > #classement-podium, #ecran-classement.regle-ouverte > .note { display: none; } /* « Comment gagner des points ? » : sur deux lignes dans la colonne, comme le bouton du même nom des statistiques */ #classement-regle > summary { padding-left: calc(12 * var(--u)); padding-right: calc(12 * var(--u)); font-size: calc(var(--taille-bouton) * 0.9); } /* son texte, un peu plus serré : déplié, il tient dans la colonne à 1280 x 800 comme à 1920 x 1080 */ #classement-regle-texte { font-size: calc(14 * var(--u)); line-height: 1.4; margin-top: calc(10 * var(--u)); padding: calc(9 * var(--u)) calc(12 * var(--u)) calc(10 * var(--u)); } /* Le visiteur a deux boutons (« Créer un compte », « Retour ») : chacun sa rangée dans la colonne (sa barre passe déjà à la ligne, règle de la section 1) */ #ecran-classement.visiteur > .barre-outils > button { flex: 1 1 100%; } } /* ============================================================================ 2. LES PIÈCES POSÉES SUR LES AUTRES ÉCRANS ---------------------------------------------------------------------------- Chacune tient debout avec le seul habillage du socle (un bouton est déjà une touche de laiton ou de verre, une case une case). Cette feuille ne fait que les finir, sans rien supposer de la mise en page de leur écran. ========================================================================== */ /* ---------- L'accueil : la ligne du joueur (elle ne se touche pas), son bouton ---------- Refait le 2026-10-09 (hiérarchie des écrans hors partie : socle, section 12 bis ; SPECS 2.12). La LIGNE est une information : une ligne du carnet de l'accueil (.ligne-info), du texte posé à plat derrière une coupe, sans fond ni filet. Elle était une carte de verre de la largeur des boutons, juste au-dessus de celui du classement. Le BOUTON est une action secondaire : une tuile (.tuile-action), avec les autres, sous l'action principale. Les deux classes sont posées dans la page d'essai ; cette feuille ne donne que leur dessin, la même coupe que l'entrée du menu. */ #salon-classement, #btn-classement { --picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.6 4.4h8.8v4.4a4.4 4.4 0 0 1-8.8 0z'/%3E%3Cpath d='M7.6 6H4.7v1.1a3 3 0 0 0 3 3M16.4 6h2.9v1.1a3 3 0 0 1-3 3M12 13.2v3.4M8.4 19.7h7.2l-1.1-3.1H9.5z'/%3E%3C/svg%3E"); } #salon-classement { color: var(--texte); } /* ---------- L'écran de connexion : « Voir le classement général » ---------- Une tuile, avec « Créer un compte » et « Essayer le jeu… » (hors-partie.css la range) : la même coupe. */ #btn-classement-visiteur { --picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.6 4.4h8.8v4.4a4.4 4.4 0 0 1-8.8 0z'/%3E%3Cpath d='M7.6 6H4.7v1.1a3 3 0 0 0 3 3M16.4 6h2.9v1.1a3 3 0 0 1-3 3M12 13.2v3.4M8.4 19.7h7.2l-1.1-3.1H9.5z'/%3E%3C/svg%3E"); } /* ---------- Le menu : l'entrée « Classement général » ---------- Une touche du menu comme les autres (par-dessus.css la dessine) : il ne lui manquait que son pictogramme, une coupe, dessiné ici comme les leurs. */ #menu-classement { --picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.6 4.4h8.8v4.4a4.4 4.4 0 0 1-8.8 0z'/%3E%3Cpath d='M7.6 6H4.7v1.1a3 3 0 0 0 3 3M16.4 6h2.9v1.1a3 3 0 0 1-3 3M12 13.2v3.4M8.4 19.7h7.2l-1.1-3.1H9.5z'/%3E%3C/svg%3E"); } /* (deux tuiles, comme « Retour au jeu » : la coupe, et un point d'interrogation) */ #btn-classement-stats { --picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.6 4.4h8.8v4.4a4.4 4.4 0 0 1-8.8 0z'/%3E%3Cpath d='M7.6 6H4.7v1.1a3 3 0 0 0 3 3M16.4 6h2.9v1.1a3 3 0 0 1-3 3M12 13.2v3.4M8.4 19.7h7.2l-1.1-3.1H9.5z'/%3E%3C/svg%3E"); } #btn-regle-des-points { --picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.4'/%3E%3Cpath d='M9.5 9.7a2.6 2.6 0 1 1 3.8 2.3c-.9.5-1.3 1-1.3 1.9M12 16.7v.1'/%3E%3C/svg%3E"); } /* ---------- « Mes statistiques » : les deux boutons du classement ---------- Rangés avec « Retour au jeu », dans la même barre. Sur ordinateur, cette barre prend la rangée du haut (hors-partie.css) : « Retour au jeu » à gauche de la plaque du titre, le bouton du classement à sa DROITE, calé au bord. Il s'arrête avant la plaque, et son texte passe sur deux lignes s'il est long (« Comment gagner des points ? »). */ @media (min-width: 900px) and (min-aspect-ratio: 21/20) and (min-height: 561px) { #btn-classement-stats, #btn-regle-des-points { margin-left: auto; max-width: calc(296 * var(--u)); white-space: normal; line-height: 1.12; text-wrap: balance; } } /* ---------- « Mon profil » : la case, sur toute la largeur ---------- Sa PHRASE se lit, en police courante, comme celle des cases de l'inscription. Dans le formulaire du profil, tout