/* ============================================================================ HOMIES — SAISON 2 · LA COLLE DE LA BOUCLE DE JEU VUE PAR L'HÔTE (vague 5b) ---------------------------------------------------------------------------- Chargé APRÈS saison2-socle.css par public/host.html, et par public/play.html pour le seul écran « EN DIRECT ». Tout est scopé [data-s2] : un écran non intégré ne bouge pas d'un pixel. L'hôte JOUE sur son téléphone : ses écrans de partie (#screen-transition, #screen-question, #screen-feedback, #screen-reveal, #screen-podium) sont les MÊMES que ceux du joueur — maquettes 43, 44, 46, 47 et 49. Ce fichier est le jumeau de saison2-play.css : il ne redessine rien, il fait entrer ces écrans dans le shell de la page HÔTE et rattrape ce que host.css écrase au passage. Il ne touche ni proto.css, ni brutal.css, ni app.css, ni saison2-socle.css (généré), ni les colles des autres vagues. RÈGLE D'OMBRE : un fond et son ombre n'ont jamais la même couleur, ni celle du fond derrière. Aplat clair → ombre noire ; prune NÉON → magenta ; bloc magenta → jaune ; bloc noir → jamais d'ombre noire. ============================================================================ */ /* ── ① L'ÉCRAN OCCUPE TOUT LE CADRE ──────────────────────────────────────── `.s2` est déjà `position:absolute; inset:0` (socle), et saison2-host.css pose `section.screen[data-s2] { position:relative }`. Les deux autres racines de la boucle de jeu — le panneau de transition et le verdict — n'y étaient pas. */ section.screen[data-s2] { position: relative; } section.screen[data-s2].active > :is(.s2, .s2-tr, .s2-fb) { position: absolute; inset: 0; } /* `.pill`, `.btn`, `.s2-prow`… ont un `display` explicite : il gagne contre le display:none que le navigateur donne à [hidden]. Sans ça, une pastille masquée par le JS (catégorie inconnue, pas de bonne réponse) restait là. */ [data-s2] [hidden] { display: none !important; } /* ── ② LE PING RÉSEAU DE L'APP DANS UNE BARRE SAISON 2 ──────────────────── net-ping.js ne change pas : seule la forme devient celle de `.s2-ping`. */ [data-s2] .net-ping { flex: none; display: inline-flex; align-items: center; gap: 5px; } [data-s2] .net-ping .np-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 15px; } [data-s2] .net-ping .np-bars i { display: block; width: 4px; background: var(--green); } [data-s2] .net-ping .np-bars i:nth-child(1) { height: 6px; } [data-s2] .net-ping .np-bars i:nth-child(2) { height: 10px; } [data-s2] .net-ping .np-bars i:nth-child(3) { height: 15px; } [data-s2] .net-ping.ok .np-bars i:nth-child(3) { background: var(--yellow); } [data-s2] .net-ping.bad .np-bars i:nth-child(2), [data-s2] .net-ping.bad .np-bars i:nth-child(3) { background: var(--red); } [data-s2] .net-ping.off .np-bars i { background: #8A8A8A; } [data-s2] .net-ping .np-ms { font-family: var(--font-m); font-weight: 800; font-size: 8px; letter-spacing: .4px; color: color-mix(in srgb, var(--ink) 55%, transparent); } [data-s2] .s2-ghdr .net-ping .np-ms { color: #CFC3CE; } /* les emojis écrits par content.js portent class="noto" : on leur donne au moins la mise en place de `.nemoji`, sinon ils cadrent mal. */ [data-s2] .noto { display: inline-block; width: 1em; height: 1em; vertical-align: -.14em; object-fit: contain; } /* host.css redéfinit `.pill` pour son ancien en-tête — fond JAUNE — et gagne contre proto.css (même poids, chargé après). Résultat : la même manche affichait une pastille JAUNE chez l'hôte et CRÈME chez le joueur. On rend à `.pill` ce que proto.css lui donne, et rien de plus : les variantes .yellow / .green / .cyan / .red gardent leur couleur. Limité aux cinq écrans de cette vague : les écrans de la vague 4 (le salon, le tunnel de création) ne bougent pas. */ body.host-page [data-s2]:is(#screen-transition, #screen-question, #screen-feedback, #screen-reveal, #screen-podium) .pill { font-family: var(--font-d); font-size: 13px; letter-spacing: .5px; line-height: 1; height: 30px; padding: 0 11px; border: 2.5px solid var(--ink); background: var(--paper); box-shadow: 3px 3px 0 var(--ink); } /* ── ③ 44 · L'ÉCRAN DE QUESTION ──────────────────────────────────────────── Le bandeau de format (LA TAUPE · LA TOUR · L'ARÈNE · DUEL · ÉQUIPES · LA BOMBE · BATTLE) garde son rendu : il se cale seulement dans l'aire de jeu. */ [data-s2] .s2-gbody > .fmt-hud { flex-shrink: 0; margin: 0; } [data-s2] .s2-gbody > .fmt-hud[hidden] { display: none; } [data-s2] .s2-gbody > .mob-media:empty { display: none; } [data-s2] .s2-gbody > .mob-media { flex-shrink: 0; } /* ⚠ C'EST ICI QU'ON POUVAIT FAIRE GLISSER L'ÉCRAN DE JEU. Edwin : « le fait qu'on puisse glisser de gauche à droite ». Le piège est dans la spec CSS : quand `overflow-y` vaut `auto` et que `overflow-x` est laissé à `visible`, le navigateur CALCULE `overflow-x: auto`. La zone de réponses, qui ne défile que verticalement, devenait donc AUSSI une zone défilante horizontale — et comme l'ombre dure de chaque réponse déborde de 5 px de sa boîte, il y avait exactement 5 px à faire glisser au doigt. D'où l'impression, depuis le début, que l'ombre était coupée. Deux gestes, et les deux sont nécessaires : ① on RÉSERVE la place de l'ombre (à droite et en bas, là où elle tombe), sinon la couper serait juste l'autre moitié du défaut ; ② `overflow-x: clip` — et pas `hidden` : `hidden` cache le débordement mais fabrique quand même une zone défilante. `clip` n'en crée aucune. */ [data-s2] .s2-gbody > .answer-zone { padding: 0 var(--sh) var(--sh) 0; overflow-y: auto; overflow-x: clip; } /* ⚠ ET LA CEINTURE, EN PLUS DES BRETELLES. `overflow-x: clip` ne tient pas ici : la spec le DÉGRADE EN `hidden` dès que l'autre axe vaut `auto`, et `hidden` refabrique une zone défilante. Ce qui règle vraiment le défaut, c'est la réserve d'ombre au-dessus (plus rien ne déborde, donc plus rien à faire glisser). `touch-action: pan-y` verrouille le reste : le doigt ne peut QUE monter et descendre dans la zone de jeu, quoi qu'il arrive au contenu plus tard. */ [data-s2] .s2-gbody, [data-s2] .s2-gbody > .answer-zone { touch-action: pan-y; } /* ⚠ MÊME RÈGLE QUE DANS saison2-play.css, ET CHARGÉE APRÈS : c'est elle qui gagnait, donc corriger l'autre ne servait à rien. L'ombre de chaque réponse déborde de 5 px vers le bas : à 11 px de gouttière il ne restait que 6 px de blanc entre deux réponses, et la colonne paraissait soudée. 16 px = 11 vus. */ [data-s2] .s2-gbody > .answer-zone.options-col { display: flex; flex-direction: column; gap: 16px; } /* la maquette 44 pose les quatre réponses DROITES : l'inclinaison de l'app (.opt:nth-child(4n+k)) tordait la colonne et faisait déborder les ombres. */ [data-s2] .s2-g .opt { transform: none; } /* ⚠ PLUS DE ZOOM À LA SÉLECTION. Edwin, plusieurs fois : « quand je sélectionne, ça prend tout l'écran, il y a un effet de zoom, c'est comme si la carte était complètement coupée… on n'arrive pas à voir toute l'ombre ». `scale(1.03)` élargit la réponse de 11 px : son ombre, qui vit DÉJÀ 5 px en dehors de sa boîte, sortait du cadre et se faisait trancher à droite — avec la coche posée à cheval sur le bord. La réponse choisie s'ENFONCE, comme tous les blocs du jeu : elle se décale de son ombre au lieu de grossir. ⚠ Cette règle existait EN DOUBLE, ici et dans saison2-play.css : les deux sont corrigées, sinon la dernière chargée remet le zoom. */ [data-s2] .s2-g .opt.selected { transform: none; } /* le pied « qui a répondu » : vide, il ne laisse pas une bande orpheline */ [data-s2] .s2-gfoot:empty { display: none; } [data-s2] .s2-gfoot .avs { display: inline-flex; align-items: center; } [data-s2] .s2-gfoot .avs .ava-emo { width: 30px; height: 30px; border: 2.5px solid var(--ink); flex: none; } body.host-page [data-s2] .s2-gfoot .avs :is(.ava-img, .avatar) { width: 30px; height: 30px; border-width: 2.5px; flex: none; } [data-s2] .s2-gfoot .avs > * + * { margin-left: -12px; } [data-s2] .s2-gfoot .pill { flex: none; } /* PAR ÉQUIPE : deux lignes (ROUGE / BLEU) au lieu d'une */ body.host-page [data-s2] .s2-gfoot.by-team { flex-direction: column; align-items: stretch; gap: 6px; } body.host-page [data-s2] .s2-gfoot .tf-row { display: flex; align-items: center; gap: 8px; min-width: 0; } /* PRÉSENTATEUR (option « voir la bonne réponse ») : le repère reste celui de l'app, il se contente de tenir dans la colonne de la maquette. */ body.host-page [data-s2] #screen-question .pres-ans-hint { width: 100%; box-sizing: border-box; } /* ── ④ 46 · LE VERDICT ───────────────────────────────────────────────────── ⚠ CETTE RÈGLE RENDAIT LE VERDICT DÉFILANT. Edwin : « l'écran de résultat (correct et/ou faux), on peut scroller, ce qui ne doit pas être possible ». Elle avait été posée pour qu'une bonne réponse longue ne soit pas coupée — sauf que ce qui dépassait n'était pas le texte : c'était `.rays`, le soleil décoratif de 1 100 × 1 100 px, qui ajoutait à lui seul 360 px de large et 42 px de haut de vide défilant. Mesuré sur dix manches : le VRAI contenu tient toujours dans les 844 px. L'écran ne défile plus (`overflow:clip`, cf. le socle) et la seule partie qui peut vraiment s'allonger — la bonne réponse — défile chez elle. */ [data-s2] .s2-fb { overflow: hidden; overflow: clip; } [data-s2] .s2-fb > .s2-ttl.wide { max-height: 30vh; overflow-y: auto; scrollbar-width: none; } [data-s2] .s2-fb > .s2-ttl.wide::-webkit-scrollbar { display: none; } [data-s2] .s2-fb .s2-ttl .v { white-space: normal; line-height: 1.15; } [data-s2] .s2-fb .dl b { display: inline-flex; align-items: baseline; } [data-s2] .s2-fb .s2-chips { flex: none; } /* ── ⑤ 47 · LE CLASSEMENT ──────────────────────────────────────────────────*/ [data-s2] .s2-lbt .avatar.s { width: 34px; height: 34px; } [data-s2] .s2-lbt .cos-nick { font: inherit; } /* ── UN ÉLIMINÉ SE VOIT ──────────────────────────────────────────────────── Edwin : « la couleur de la carte de ceux qui sont éliminés doit être rouge avec un emoji squelette, comme la saison précédente ». La saison 1 peignait toute la ligne en rouge (public-v1 › .player-result.dead) ; la saison 2 se contentait d'un `opacity:.62` invisible — d'où « pourquoi il y a un 2ᵉ et un 3ᵉ au classement s'ils sont éliminés ? ». On reprend le traitement de la saison 1 : aplat rouge, pseudo crème, avatar en gris, badge 💀 + manche de sortie. L'ombre reste encre (le rouge n'est pas un fond sombre). */ [data-s2] .s2-lbt.dead { opacity: 1; background: var(--red); } [data-s2] .s2-lbt.dead .nm, [data-s2] .s2-lbt.dead .sc, [data-s2] .s2-lbt.dead .cos-nick { color: var(--paper); } [data-s2] .s2-lbt.dead .avatar { filter: grayscale(1); } [data-s2] .s2-lbt.dead .s2-rkb { background: var(--paper); color: var(--ink); } [data-s2] .s2-gain.out { display: inline-flex; align-items: center; gap: 5px; background: var(--ink); color: var(--yellow); border-color: var(--paper); box-shadow: 2px 2px 0 var(--paper); } [data-s2] .s2-gain.out .nemoji { width: 15px; height: 15px; } [data-s2] .s2-lbt .medal { flex: none; width: 26px; height: 26px; } [data-s2] .s2-lbt .medal .nemoji { width: 18px; height: 18px; } [data-s2] .s2-lbt .s2-rkb { width: 30px; } /* les bandeaux de format posés au-dessus de la liste (tour, arène, équipes) */ body.host-page [data-s2] #lbHead:empty { display: none; } body.host-page [data-s2] #lbHead { flex-shrink: 0; } /* la ligne « PROCHAINE · QUESTION n » + le bouton qui fait avancer la partie : ils appartiennent à l'hôte, le joueur a un bandeau d'attente à la place. */ body.host-page [data-s2] .s2 .lb-next { flex: none; padding: 0 6px 6px; } body.host-page [data-s2] .s2 .lb-next .mini { font-family: var(--font-m); font-weight: 800; font-size: 10px; letter-spacing: 1.4px; color: color-mix(in srgb, var(--ink) 58%, transparent); } body.host-page [data-s2] .s2 > #nextBtn { flex: none; margin: 0 6px 6px; } html[data-skin="neon"][data-theme] body.host-page [data-s2] .s2 .lb-next .mini { color: #CFC3CE; } /* ── ⑥ 49 · LA FIN DE PARTIE ───────────────────────────────────────────────*/ [data-s2] .s2-pod .avatar.s { width: 40px; height: 40px; } [data-s2] .s2-pod .cos-title { display: none; } /* la marche est étroite : le pseudo suffit */ [data-s2] .s2-pod .crown { position: absolute; top: -17px; left: 50%; margin-left: -13px; } [data-s2] .s2-pod .card { position: relative; } /* PAR ÉQUIPE : le podium devient un bloc (colonnes Rouge/Bleu) */ [data-s2] .s2-pod.pod-teams { display: block; } /* ⚠ LE DUEL OCCUPE TOUTE LA LARGEUR. `.s2-pod` est une grille de 3 colonnes (les marches 2·1·3) : le bloc du duel, enfant unique, se retrouvait dans la colonne de gauche et tenait sur un tiers de l'écran. Edwin : « l'écran résultat final du duel s'affiche mal, c'est coincé sur la gauche ». Même traitement que la vue par équipes. */ [data-s2] .s2-pod.pod-duel { display: block; } [data-s2] #fullBoard { display: flex; flex-direction: column; gap: 8px; } /* host.css habille `.res-foot` pour l'ancien pied (bordure, fond, padding) : ici c'est le `.s2-two` de la maquette qui commande. */ body.host-page [data-s2] .s2-two.res-foot { padding: 0; border-top: 0; background: none; } /* 49 · LE VERDICT DE FORMAT, AU VOCABULAIRE DE LA MAQUETTE QZ.taupeVerdictHtml (content.js, partagé avec le joueur) écrit .tp-verdict. La maquette en fait un bloc d'ENCRE à ombre COLORÉE : verte quand l'équipe gagne, rouge quand c'est la taupe. Jamais de noir sur noir. */ body.host-page [data-s2] #podS2 .tp-verdict { background: #0A0A0A; border-color: #0A0A0A; box-shadow: 5px 5px 0 var(--green); color: #FFFEF7; } body.host-page [data-s2] #podS2 .tp-verdict.ko { box-shadow: 5px 5px 0 var(--red); } body.host-page [data-s2] #podS2 .tp-vd-stamp { background: var(--green); color: #0A0A0A; border-color: #FFFEF7; box-shadow: none; font-size: 19px; } body.host-page [data-s2] #podS2 .tp-verdict.ko .tp-vd-stamp { background: var(--red); color: #FFFEF7; } body.host-page [data-s2] #podS2 .tp-vd-who b { color: var(--yellow); } body.host-page [data-s2] #podS2 .tp-vd-who i { color: #CFC3CE; opacity: 1; } body.host-page [data-s2] #podS2 .tp-vd-lines div { color: #9E8F9C; opacity: 1; } body.host-page [data-s2] #podS2 .tp-vd-lines div.on { color: #FFFEF7; } body.host-page [data-s2] #podS2 .tp-h { margin-top: 10px; } body.host-page [data-s2] #podS2:empty { display: none; } /* ── ⑦ 41 · PARTIES EN DIRECT (page JOUEUR) ────────────────────────────────*/ [data-s2] #liveList { display: flex; flex-direction: column; gap: 9px; } [data-s2] #liveList:empty { display: none; } [data-s2] .s2-prow.live-row { width: 100%; text-align: left; cursor: pointer; } [data-s2] .s2-prow.live-row .meta { display: block; } [data-s2] .s2-prow.live-row .nm { display: block; } [data-s2] .s2-prow.live-row:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); } /* la maquette montre trois étiquettes courtes (LA TAUPE · 12 Q · 5/8). L'app en écrit parfois une longue (« 1 JOUEUR » quand la salle n'a pas de plafond) : sans plafond, `overflow:hidden` la coupait net sous le bouton REJOINDRE. Ici elles passent à la ligne — rien n'est jamais tronqué. */ [data-s2] .s2-prow.live-row .tags { flex-wrap: wrap; overflow: visible; } [data-s2] .s2-prow.live-row .btn { flex: none; align-self: center; } html[data-skin="neon"][data-theme] [data-s2] .s2-prow.live-row:active { box-shadow: 2px 2px 0 #FF5CA8; } /* ── ⑧ COLLISION DE NOMS AVEC saison2.css ───────────────────────────────── public/css/saison2.css (LA TAUPE · LA TOUR · L'ARÈNE, chargée AVANT le socle par host.html comme par play.html) utilise DÉJÀ .s2-top, .s2-scroll et .s2-ttl — pour sa barre du haut, sa zone qui défile et son titre. Le socle ne redit que ce qui l'intéresse : le reste passait au travers et recentrait les lignes du classement sur un tiers de l'écran. */ [data-s2] .s2-top { align-items: stretch; padding: 0; border-bottom: 0; flex: 0 0 auto; } [data-s2] .s2-scroll { padding: 0 6px 6px; } [data-s2] .s2-ttl { flex: 0 0 auto; font-family: var(--font-m); font-size: inherit; letter-spacing: normal; } /* COLLISION INTERNE AU SOCLE : `.s2-big` y porte DEUX règles — le chiffre-titre et, bien plus bas, la taille d'un emoji de la galerie des types (56×56). La seconde gagne : on rend sa largeur au chiffre. */ [data-s2] :is(.s2-fb, .s2) .s2-big { width: auto; height: auto; } /* ── ⑨ NÉON : L'ÉTAT D'UNE RÉPONSE RÉVÉLÉE ──────────────────────────────── Le socle repeint .opt.correct / .opt.wrong avec var(--ink) / var(--paper). En NÉON ces deux tokens s'inversent (crème sur vert = illisible). On tranche comme côté joueur : sur un aplat VIF, l'encre est noire ; sur le rouge, le texte est crème. */ html[data-skin="neon"][data-theme] [data-s2] :is(.opt.correct, .opt.selected) .bd { color: #0A0A0A; } html[data-skin="neon"][data-theme] [data-s2] .opt.wrong .bd { color: #FFFEF7; } /* ── ⑩ ABÎME : L'ENCRE REDEVIENT NOIRE SUR LES APLATS VIFS ──────────────── Le socle fait déjà ce travail pour les composants qu'il connaît. La marche du podium n'y était pas : en ABÎME son texte restait clair sur or / argent / bronze. Les bords et les ombres ne bougent pas : clairs sur fond sombre, c'est la doctrine d'ABÎME. */ html[data-theme="abime"]:not([data-skin="neon"]) [data-s2] .s2-pod .card > .bd, html[data-theme="abime"]:not([data-skin="neon"]) [data-s2] .s2-pod .card > .bd :is(.nm, .sc, .rk) { color: #0A0A0A; } /* ── ⑫ « J'AI RÉPONDU » — QUATRE BLOCS RESTENT QUATRE BLOCS ────────────── `.opt.faded { opacity:.35 }` (brutal.css) éteint TOUT l'élément : le bord noir devient gris pâle, l'ombre `.sh` disparaît, et les trois réponses non choisies se transforment en aplats pastel sans boîte. On garde la boîte — bord et ombre PLEINS — et on éteint seulement la couleur : aplat gris du brandbook, texte assourdi. L'opacité retombe à 1, sinon elle repeint tout. Vaut pour l'hôte ET le joueur (ce fichier est chargé par les deux pages). */ [data-s2] .s2-g .opt.faded { opacity: 1; } [data-s2] .s2-g .opt.faded > .bd { background: var(--gray2); color: color-mix(in srgb, var(--ink) 55%, transparent); } [data-s2] .s2-g .opt.faded .lbox { background: var(--paper); color: color-mix(in srgb, var(--ink) 55%, transparent); } /* au REVEAL, la bonne et la mauvaise gardent leur aplat : elles ne sont jamais `.faded`, mais on le redit pour que l'ordre de chargement ne puisse pas les éteindre par accident. */ [data-s2] .s2-g .opt.faded.correct > .bd { background: var(--green); color: var(--ink); } [data-s2] .s2-g .opt.faded.wrong > .bd { background: var(--red); color: var(--paper); } /* NÉON : le gris du thème est le prune de surface — on garde l'encre claire assourdie, le bord noir et l'ombre magenta que le socle pose déjà. */ html[data-skin="neon"][data-theme] [data-s2] .s2-g .opt.faded > .bd { background: #3E2A3B; color: #9D8A99; } html[data-skin="neon"][data-theme] [data-s2] .s2-g .opt.faded .lbox { background: #3E2A3B; color: #9D8A99; } /* le tampon de la réponse choisie respirait mal contre le bord : on lui rend l'air de la maquette (il reste TRACÉ en CSS, jamais un glyphe). */ [data-s2] .s2-g .opt .stamp { right: 14px; } /* ── ⑬ LES EMOJIS QUI SONT LE JEU ──────────────────────────────────────── `[data-s2] .noto { width:1em }` (plus haut) cadre les emojis d'INTERFACE. Il pèse (0,2,0) et écrasait `.nt-memcell img` (0,1,1) de brutal.css : dans MÉMOIRE, l'emoji à mémoriser tombait à 16 px dans une case de 110 — on ne voyait rien. Ici l'emoji EST la question : il remplit sa case. ⚠ la taille reste BORNÉE : un GIF Noto fait 512 px de côté, et « remplir la case » en `flex:1` laissait l'image imposer sa largeur à la colonne — la grille retombait sur UNE colonne et l'emoji sortait du cadre. */ [data-s2] .s2-g .nt-memgrid { gap: var(--s2-r); grid-template-columns: repeat(2, minmax(0, 1fr)); } [data-s2] .s2-g .nt-memcell { padding: 8px; } [data-s2] .s2-g .nt-memcell .noto { width: 82px; height: 82px; max-width: 100%; } [data-s2] .s2-g .nt-memcell .qmark { font-size: 46px; } /* phase 2 : les cases non choisies s'éteignent comme les réponses (§ ⑫) — aplat gris, bord et ombre PLEINS, jamais un cadre gris pâle sans ombre. */ [data-s2] .s2-g .nt-memcell.faded { opacity: 1; background: var(--gray2); } [data-s2] .s2-g .nt-memcell.faded .qmark { color: color-mix(in srgb, var(--ink) 45%, transparent); } html[data-skin="neon"][data-theme] [data-s2] .s2-g .nt-memcell.faded { background: #3E2A3B; } /* « OÙ ÉTAIT 🚀 ? » : l'emoji cible est LA consigne — même cause, même taille. */ [data-s2] .s2-g .nt-memask { display: flex; align-items: center; justify-content: center; gap: 8px; } [data-s2] .s2-g .nt-memask .noto { width: 34px; height: 34px; } /* même cause, mêmes modes : la suite d'emojis d'un RÉBUS ou d'un TITRE EN EMOJIS est l'énoncé — elle remplit ses cases de 60 px. */ [data-s2] .s2-g :is(.nt-emojiseq, .nt-rebus) .e .noto { width: 100%; height: 100%; } /* ── ⑭ LE CLASSEMENT DÉGRAISSÉ ─────────────────────────────────────────── Le sous-titre repart vide quand il n'a rien à dire : sans ça il laissait une ligne blanche sous « CLASSEMENT ». */ [data-s2] .s2-lbh .tx .s:empty { display: none; } /* ── ⑮ LE LECTEUR D'EXTRAIT (BLIND TEST · DEVINE LE SON) ───────────────── content.js › blindMedia rend maintenant le lecteur des maquettes T17 / T21 : `.s2-play2` + `.s2-eq` (ou `.s2-spk`) + `.s2-pause` + `.s2-pbar`, tous posés par saison2-socle.css. Il ne manque ici que ce qu'une MAQUETTE ne pouvait pas montrer : un vrai bouton, et ses deux états. */ [data-s2] .s2-gbody > .mob-media > .s2-play2 { width: 100%; box-sizing: border-box; } /* `.s2-pause` devient un