/* ============================================================ play-responsive.css — écrans JOUEUR (play.html) sur web / PC. Règle d'or, identique à responsive.css : ce fichier n'utilise QUE des @media (min-width). Le CSS mobile de base — celui que voit la PWA installée sur téléphone — n'est JAMAIS modifié. Un écran de moins de 1024px ne voit aucune règle de ce fichier. Pourquoi un fichier à part : play.html ne charge pas host-responsive.css, et les écrans joueur réutilisent des noms de classes de l'hôte (.lb-*, .res-*). Les mélanger ferait s'appliquer des règles pensées pour le grand écran de l'hôte à l'écran du joueur. Ici, tout est explicitement « côté joueur ». Chargé en DERNIER dans play.html (après responsive.css). Paliers : 1024 (le jeu passe en 2 colonnes) · 1280 · 1600. Maquette de référence : design-mockups/s29-web-desktop.html (§6) et s29b / s29c / s29e. ============================================================ */ /* ============================================================ ≥ 1024px — LE JEU PASSE EN DEUX COLONNES Les écrans de jeu n'ont pas de rail de navigation : ils peuvent basculer dès 1024 (une grille 2×2 y donne ~460px par réponse, contre une barre de 1000px aujourd'hui). ============================================================ */ @media (min-width: 1024px) { /* ---------- QUESTION ------------------------------------- */ /* responsive.css bride .q-screen à 720px : trop étroit pour un 2×2. Mais plafonner LE CADRE encadrait le jeu de deux bandes grises (le fond du body dépasse de chaque côté). C'est le cadre qui prend toute la largeur — comme côté hôte — et les BLOCS qui sont plafonnés. */ body.dotted-bg .q-screen { max-width: none; width: 100%; } body.dotted-bg .q-screen > .ghdr, body.dotted-bg .q-screen > .type-pill, body.dotted-bg .q-screen > .fmt-hud, body.dotted-bg .q-screen > .q-card, body.dotted-bg .q-screen > .mob-media, body.dotted-bg .q-screen > .answer-zone, body.dotted-bg .q-screen > .gh-foot { max-width: min(92vw, 1200px); margin-inline: auto; width: 100%; box-sizing: border-box; } /* énoncé : on remonte de 25px à 28px, la question est le sujet */ body.dotted-bg .q-card .bd { font-size: clamp(22px, 2.4vw, 38px); line-height: 1.18; padding: clamp(14px, 1.4vw, 22px) clamp(16px, 1.6vw, 26px); } /* HUD de jeu : cible de clic confortable à la souris */ body.dotted-bg .ghdr .close, body.dotted-bg .ghdr .manche, body.dotted-bg .ghdr .timer, body.dotted-bg .ghdr .score { height: clamp(34px, 3vw, 46px); font-size: clamp(14px, 1.3vw, 20px); } body.dotted-bg .ghdr .close { width: clamp(34px, 3vw, 46px); } /* ---- LES RÉPONSES EN GRILLE 2×2 ---- .options-col = les modes « on tape un bouton » (quiz, vrai/faux, sondage, vote entre potes, intrus…). Les autres modes gardent leur colonne : slider d'estimation, glisser-déposer, saisie. */ body.dotted-bg .answer-zone.options-col { display: grid; grid-template-columns: 1fr 1fr; /* plafonné : en `1fr` pur, une réponse de deux caractères devient un pavé de 280px de haut sur un grand écran. On borne, et on centre le bloc de réponses dans la place restante. */ grid-auto-rows: minmax(96px, clamp(116px, 16vh, 178px)); gap: 14px; align-content: center; } /* CARTES DROITES SUR PC : l'inclinaison de 1 à 1,5° des réponses et de la pastille de type donne du caractère sur 360px ; sur une tuile de 540px elle se lit comme un trapèze de travers. Voir [[cartes-droites-sur-pc]]. */ body.dotted-bg .q-screen .type-pill, body.dotted-bg .q-screen .q-card, body.dotted-bg .answer-zone .opt { transform: none; } /* les blocs qui ne sont pas des réponses tiennent toute la largeur */ body.dotted-bg .answer-zone.options-col > .spectator-strip, body.dotted-bg .answer-zone.options-col > .micro-lbl, body.dotted-bg .answer-zone.options-col > .bombe-wait { grid-column: 1 / -1; } /* Étirer la cellule ne suffit pas : .opt porte son ombre dure dans un enfant .sh en position absolue, tandis que .bd (le bloc coloré) garde sa hauteur naturelle. Sans ceci, une grande cellule affiche un pavé NOIR sous chaque réponse. .bd doit remplir la cellule. */ body.dotted-bg .answer-zone.options-col > .opt { display: flex; } body.dotted-bg .answer-zone.options-col > .opt > .bd { flex: 1; } /* réponses : plus grandes qu'en mobile (responsive.css : 17px) */ /* le bloc est large (≈540px) : un texte de 19px s'y perd. On monte la typo ET on réduit la hauteur, sinon deux caractères flottent au milieu d'un pavé de 180px. */ body.dotted-bg .answer-zone .opt .bd { padding: clamp(12px, 1.3vw, 20px) clamp(14px, 1.6vw, 24px); font-size: clamp(18px, 1.7vw, 28px); gap: clamp(10px, 1.1vw, 18px); } body.dotted-bg .answer-zone .opt .lbox { width: clamp(36px, 3vw, 50px); height: clamp(36px, 3vw, 50px); font-size: clamp(18px, 1.6vw, 26px); } body.dotted-bg .answer-zone .opt .text { font-size: clamp(18px, 1.7vw, 28px); } /* modes « une seule colonne » (estimation, classer, anagramme, saisie, memory, hotspot…) : on recentre au lieu d'étirer. `overflow-y:auto` : la zone est un flex-item en `min-height:0`, donc sur un écran bas le contenu débordait SANS ascenseur — les boutons PLUS / MOINS étaient purement inaccessibles. */ body.dotted-bg .answer-zone:not(.options-col) { padding-inline: max(14px, calc((100% - 720px) / 2)); overflow-y: auto; } /* MEMORY : la grille est en 2 colonnes (pensée téléphone). Recentrée à 720px, ça donne des cases de 340×226 avec un emoji perdu au milieu. Quatre colonnes rendent la grille lisible d'un coup d'œil. */ body.dotted-bg .nt-memgrid { grid-template-columns: repeat(4, 1fr); gap: 14px; } body.dotted-bg .nt-memcell { aspect-ratio: 1; } body.dotted-bg .nt-memcell img { width: 64px; height: 64px; } /* PLUS OU MOINS : rien à corriger, le mode se comporte bien en large. (On garde juste un peu d'air entre les deux cartes.) */ body.dotted-bg .nt-ref { gap: 18px; } /* média (image, 4 images, dézoom, flou) : il a enfin de la place. .media-img EST la balise (classe posée dessus), pas un cadre. */ body.dotted-bg .mob-media { padding-inline: max(14px, calc((100% - 780px) / 2)); } body.dotted-bg .mob-media > .media-img { max-height: 40vh; } /* ---------- CLASSEMENT DE MANCHE -------------------------- */ #screen-leaderboard .lb-hero, #screen-leaderboard .lb-list, #screen-leaderboard .lb-bottom { max-width: 980px; margin-inline: auto; width: 100%; box-sizing: border-box; } /* les lignes sont larges : deux colonnes plutôt qu'une liste qui scrolle */ #screen-leaderboard .lb-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; align-content: start; } #screen-leaderboard .lb-title .body { font-size: clamp(22px, 2.2vw, 34px); } #screen-leaderboard .lb-emoji { width: 66px; height: 66px; } /* ---------- FIN DE PARTIE / PODIUM ------------------------ */ #screen-over .res-hero, #screen-over .res-scroll, #screen-over .res-foot { max-width: 1040px; margin-inline: auto; width: 100%; box-sizing: border-box; } #screen-over .res-ggt { font-size: clamp(38px, 4.4vw, 70px); } #screen-over .res-gge { width: 50px; height: 50px; } /* le podium est LE moment photo : il doit remplir, pas se tasser */ #screen-over .podium { gap: 18px; padding-top: 26px; } #screen-over .pod.gold .bd { min-height: 260px; } #screen-over .pod.silver .bd { min-height: 210px; } #screen-over .pod.bronze .bd { min-height: 190px; } /* la liste complète sous le podium (#fullBoard), en 2 colonnes */ #screen-over #fullBoard { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; align-content: start; } /* ---------- CARNAGE (choisir sa carte, puis sa cible) ------ */ #screen-carnage .cg-choices { width: min(94vw, 860px); gap: 18px; } #screen-carnage .cg-card { flex: 1; min-width: 220px; padding: 20px 16px; } #screen-carnage .cg-name { font-size: 22px; } #screen-carnage .cg-box { width: min(94vw, 720px); } /* la liste des cibles : deux colonnes, on voit tout le monde d'un coup */ #screen-carnage .cg-t-list { max-width: 780px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; overflow: visible; } /* ---------- SALLE D'ATTENTE ------------------------------- */ #screen-wait .wait-players { max-width: 880px; gap: 14px 16px; } #screen-wait .wait-ginfo { max-width: 880px; margin-inline: auto; } /* ---------- LES « MOMENTS » (prêt, envoyé, éliminé, fermé) -- Ils restent volontairement centrés — c'est un flash, pas un tableau de bord. On leur donne juste l'échelle du grand écran. */ body.dotted-bg .full { gap: 24px; padding: 40px; } body.dotted-bg .full .ttl { font-size: clamp(34px, 4vw, 58px); } body.dotted-bg .full .emoji { width: clamp(96px, 11vw, 168px); height: clamp(96px, 11vw, 168px); font-size: clamp(96px, 11vw, 168px); } body.dotted-bg .full .sub { font-size: 15px; } #screen-eliminated .elim-emoji { width: 150px; height: 150px; font-size: 150px; } #screen-eliminated .elim-title .body { font-size: clamp(34px, 4.2vw, 60px); } #screen-closed .closed-big { font-size: clamp(34px, 4.2vw, 60px); } #screen-closed .closed-door { width: 150px; height: 150px; font-size: 150px; } #screen-closed .closed-cta { max-width: 520px; margin-inline: auto; } /* ---------- TRANSITION DE MANCHE -------------------------- */ #screen-transition .trans-hero { transform: scale(1.25); transform-origin: center; } #screen-transition .trans-count { font-size: clamp(64px, 8vw, 120px); } /* ---------- FEEDBACK (CORRECT / RATÉ) --------------------- 2 secondes plein cadre : le verdict doit se lire de loin. */ .fb .hero .emoji { width: clamp(120px, 14vw, 220px); height: clamp(120px, 14vw, 220px); font-size: clamp(120px, 14vw, 220px); } .fb .hero .title-row .body { font-size: clamp(40px, 5.4vw, 76px); padding: clamp(8px, 1vw, 14px) clamp(24px, 3vw, 46px); } .fb .answer-block { max-width: 760px; margin-inline: auto; } .fb .delta-row .val { font-size: clamp(34px, 4vw, 60px); } /* ---------- REJOINDRE ------------------------------------- */ #screen-join .join-scroll { max-width: 620px; gap: 20px; } #screen-join .hero-title { font-size: clamp(32px, 3.4vw, 50px); } #screen-join .hero-sub { max-width: 420px; font-size: 13px; } /* pas de caméra sur un PC : le bouton « scanner » n'a rien à y faire */ #screen-join .scan-card { display: none; } #screen-join .or-sep { display: none; } #screen-join .join-foot .join-cta { max-width: 620px; margin-inline: auto; display: block; } } /* ============================================================ ≥ 1280px — UN CRAN DE PLUS C'est le palier où un portable courant (1280×800, 1366×768) a vraiment la place. Aucune hauteur fixe n'est introduite ici : 1366×768 ne laisse que ~650px utiles, tout doit pouvoir se comprimer. ============================================================ */ /* ============================================================ PLUS DE PALIERS ≥1280 / ≥1600 : tout est fluide (clamp + vw). C'est la recette des écrans grand format de la JPO — les tailles grandissent en continu avec l'écran au lieu de sauter d'un cran. Les deux blocs qui ne faisaient que redimensionner ont été retirés. ============================================================ */