/* ============================================================================ LE LABORATOIRE · interface B, « le pupitre du professeur » LE MODE FANTÔME (SPECS 2.13) ---------------------------------------------------------------------------- Feuille de la page d'essai public/pupitre.html, chargée APRÈS pupitre/socle.css, après les sept feuilles d'étape, après celle du classement général et après celle du chat : la dernière de toutes. Ce n'est pas une étape du plan de bascule : c'est une fonction du jeu. Une fois éliminé, ou arrivé en retard, on continue de répondre « pour du beurre » ; le mode n'a pas d'écran, il écrit sur ceux de la manche et de la fin. Ce que cette feuille habille, ET RIEN D'AUTRE (test/pupitre-feuilles.test.js) : .texte-fantome la classe qu'app.js pose sur la ligne des vies des résultats (#recap-vies) quand le mode y écrit : le score du fantôme, ou « Reste là : tu joues la suite en fantôme. » .annonce-fantome la classe qu'app.js pose sur l'écran de l'annonce quand la ligne des joueurs en lice porte une phrase du mode .en-fantome la classe que pupitre.js pose sur le cadran des vies quand il montre les points d'un fantôme #btn-fantomes le bouton « Fantômes » de l'écran de fin .fin-gestes la rangée des deux gestes de l'écran de fin .avec-fantomes, .liste-fantomes les deux classes qu'app.js pose sur l'écran de fin : il y a un classement des fantômes ; c'est lui que la liste montre MODE COUPÉ, RIEN D'ELLE NE S'APPLIQUE, sauf une règle : la rangée des gestes n'est pas une boîte (display: contents), « Partager mon résultat » garde la place que la feuille de la fin lui donne. Aucune feuille d'étape n'est retouchée. Le langage de l'assemblage (socle, section 5 bis) : ce qui se touche tient sur un pied de laiton (« Fantômes » est la touche de verre de tout bouton secondaire, sur son pied), ce qui informe est de verre (le score dans le bilan, les points sur le cadran). Pour mesurer : npm run pupitre:mesurer -- --ecrans=fantome (les états vivent dans outils/parcours-du-pupitre/fantome.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'ANNONCE D'UNE MANCHE, POUR UN FANTÔME ---------------------------------------------------------------------------- La ligne des joueurs en lice (trois mots, sur une ligne) porte une phrase : « Tu es éliminé, mais tu joues encore : en fantôme, pour du beurre. », puis « 12 joueurs en lice · toi, en fantôme ». Elle prend sa rangée, sur toute la largeur du carton, en police courante, et passe à la ligne. ========================================================================== */ #ecran-annonce.annonce-fantome:not(.annonce-finale) > .annonce-joueurs { grid-column: 1 / -1; grid-row: 5; justify-self: center; max-width: 100%; margin-top: calc(6 * var(--u)); padding: 0; border-left: 0; white-space: normal; text-wrap: balance; text-align: center; font-family: var(--police-texte); font-weight: 700; letter-spacing: 0; line-height: 1.3; font-size: var(--taille-texte); color: var(--accent-vif); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); } /* (côte à côte avec les joueurs en lice sur ordinateur et téléphone couché, la difficulté reprend le milieu) */ #ecran-annonce.annonce-fantome:not(.annonce-finale) > .annonce-difficulte { grid-column: 1 / -1; justify-self: center; padding-left: 0; padding-right: 0; } /* ============================================================================ 2. LES RÉSULTATS D'UNE MANCHE : LA LIGNE DU FANTÔME ---------------------------------------------------------------------------- Le socle ne montre pas la ligne des vies des résultats (les cœurs sont sur leur cadran). Quand le mode y écrit, elle se montre, dans le bilan, entre le verdict et la liste des éliminés : « 6 points · série de 3 · 3ᵉ fantôme sur 12 », ou, sur l'écran de l'élimination, « Reste là : tu joues la suite en fantôme. ». Téléphone debout : UNE ligne ; app.js raccourcit le score là où il ne tient pas (la série d'abord, puis le mot « fantôme »), les points de suspension ne sont que le dernier recours. Sur ordinateur et téléphone couché, le bilan est une colonne étroite et haute : la ligne passe sur deux. ========================================================================== */ #recap-vies.texte-fantome { display: block; align-self: stretch; min-width: 0; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--police-texte); font-weight: 700; letter-spacing: 0; line-height: 1.3; font-size: var(--taille-note); color: var(--accent-vif); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); } @media (orientation: landscape) and (max-height: 560px) { #recap-vies.texte-fantome { white-space: normal; overflow: visible; text-wrap: balance; } } @media (min-width: 900px) and (min-aspect-ratio: 21/20) and (min-height: 561px) { /* après le verdict (même rang que lui dans le bilan), juste au-dessus des éliminés */ #recap-vies.texte-fantome { order: 2; white-space: normal; overflow: visible; text-wrap: balance; font-size: calc(17 * var(--u)); } } /* ============================================================================ 3. LE CADRAN DES VIES D'UN FANTÔME ---------------------------------------------------------------------------- Ses points à la place des cœurs (« 6 pts »), et « Fantôme » gravé au bas de la face au lieu de « Vies » (pupitre.js, montrerLesPointsDuFantome). ========================================================================== */ .cadran-vies.en-fantome .vies-libelle { font-size: calc(var(--diametre) * 0.21); letter-spacing: 0; white-space: nowrap; color: var(--accent-vif); } /* (2026-10-16 : les cadrans du téléphone ont rétréci ; « Fantôme », plus long que « Vies », serre ses lettres et sa taille pour rester dans la face) */ .cadran-vies.en-fantome .cadran-nom { letter-spacing: 0; font-size: max(7px, calc(var(--diametre) * 0.095)); } /* ============================================================================ 4. L'ÉCRAN DE FIN : « FANTÔMES », ET LE CLASSEMENT DES FANTÔMES ---------------------------------------------------------------------------- Les deux gestes de l'écran tiennent sur UNE rangée (.fin-gestes). Sans classement des fantômes, la rangée n'est pas une boîte : « Partager mon résultat » est rangé par la feuille de la fin, comme avant. ========================================================================== */ .fin-gestes { display: contents; } #ecran-fin.couronnement-seul #btn-fantomes { display: none; } /* Il y a un classement des fantômes : la rangée devient une boîte, à la place que le partage avait. Le partage garde le laiton, « Fantômes » est de verre. */ #ecran-fin.avec-fantomes .fin-gestes { flex: none; align-self: stretch; min-width: 0; display: flex; align-items: stretch; gap: var(--ecart); margin-bottom: calc(4 * var(--u)); /* l'épaisseur des touches reste visible */ } #ecran-fin.avec-fantomes.couronnement-seul .fin-gestes { display: none; } #ecran-fin.avec-fantomes .fin-gestes > #btn-partager { flex: 1 1 0; min-width: 0; margin: 0; align-self: stretch; } #ecran-fin.avec-fantomes .fin-gestes > #btn-fantomes { flex: 1 1 0; min-width: 0; margin: 0; } /* à côté du partage, le bouton des fantômes ne prend que sa largeur, et les deux resserrent leurs marges : « Partager mon résultat » y tient sur deux lignes */ #ecran-fin.avec-fantomes .fin-gestes > #btn-partager:not([hidden]) + #btn-fantomes { flex: 0 0 auto; } #ecran-fin.avec-fantomes .fin-gestes > #btn-partager:not([hidden]), #ecran-fin.avec-fantomes .fin-gestes > #btn-partager:not([hidden]) + #btn-fantomes { padding-left: calc(12 * var(--u)); padding-right: calc(12 * var(--u)); letter-spacing: 0.04em; } /* Le classement des fantômes, dans la liste même du classement de la partie. Une ligne : la pastille du rang, le pseudo (abrégé s'il est long), ses points (toujours lus en entier). Il ne désigne aucun gagnant : pas d'étoile. */ #ecran-fin.liste-fantomes #fin-classement > li > .fantome-pseudo { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #ecran-fin.liste-fantomes #fin-classement > li > .fantome-points { flex: none; white-space: nowrap; color: var(--accent-vif); } #ecran-fin.liste-fantomes #fin-classement > li[value="1"]::after { display: none; } @media (orientation: landscape) and (max-height: 560px) { #ecran-fin.avec-fantomes .fin-gestes { grid-column: 2; grid-row: 2; align-self: center; margin-top: calc(6 * var(--u)); margin-bottom: calc(8 * var(--u)); } } @media (min-width: 900px) and (min-aspect-ratio: 21/20) and (min-height: 561px) { #ecran-fin.avec-fantomes .fin-gestes { grid-column: 2; grid-row: 2; margin-top: var(--ecart); } }