/* ============================================================================ HOMIES — SAISON 2 · LA COLLE DES 15 ÉCRANS INTERNES (vague 3) ---------------------------------------------------------------------------- Mêmes principes que saison2-app.css (vague 1) : `saison2-socle.css` porte TOUT le dessin (il est généré, on n'y touche pas). Ce fichier ne dessine rien : il fait entrer un écran `.s2` dans le shell de la PWA, et il désarme les quelques endroits où une feuille plus ancienne (app.css, atelier.css, saison2.css, profil.css…) contredit le socle. Les 15 écrans se rangent en deux familles : · les écrans de `main.home-wrap` — ils portent `data-s2-interne` ; HUB, RANGS, SAISON, HISTORIQUE, POTES, PROFIL, BOUTIQUE, MES QUIZ, ATELIER (étape 1), LIVE OPS ; · les écrans plein cadre, déjà `position:fixed; inset:0` dans leur propre feuille — SOLO, RAFALE, MAQUIS, L'ÉVEIL, JPO. Là, `data-s2` se pose sur leur « stage », qui est déjà positionné. Il ne touche ni proto.css, ni brutal.css, ni app.css, ni saison2-socle.css, ni les colles saison2-{app,host,play,entree}.css. Mobile d'abord : tout ce qui suit est la base téléphone. ============================================================================ */ /* ── 1. UN ÉCRAN INTERNE OCCUPE TOUT LE CADRE ─────────────────────────────── `.s2` est `position:absolute; inset:0` : son conteneur doit donc être positionné ET avoir la taille du cadre. `.sec` d'app.css pose un max-width:780px, un margin auto et un padding : on les enlève ici. L'écran interne porte sa PROPRE barre du haut (retour + titre) : la `.topbar` de l'app ferait doublon, et la barre du bas n'existe pas dans les maquettes de ces écrans — on revient par la flèche. */ .sec[data-s2-interne] { position: absolute; inset: 0; max-width: none; margin: 0; padding: 0; } main.home-wrap:has(> .sec.active[data-s2-interne]) { position: relative; overflow: hidden; padding-bottom: 0; } body:has(.sec.active[data-s2-interne]) .topbar, body:has(.sec.active[data-s2-interne]) .bottom-nav { display: none; } /* ── 2. LES NOMS DE CLASSE DÉJÀ PRIS ──────────────────────────────────────── `.s2-ttl` (saison2.css), `.s2-card` et `.s2-tick` (atelier.css) sont définis en GLOBAL par des feuilles chargées avant le socle, qui les neutralise déjà sous `[data-s2]`. Il y en a un QUATRIÈME, que la vague 1 n'avait pas rencontré : `.s2-bar` — atelier.css en fait une jauge de progression (`height:19px; border; background; overflow:hidden`). Le socle s'en sert pour la barre du haut de TOUS les écrans internes : sans ce désarmement, la barre était haute de 19 px et son contenu débordait par-dessus. `[data-s2] .s2-bar` (0,2,0) du socle ne battait pas `.s2-bar` (0,1,0) sur les propriétés qu'il ne redit pas — on les remet ici à leur valeur neutre. LA LISTE COMPLÈTE, relevée dans atelier.css (seule feuille de l'app à définir des `.s2-*` en global, et chargée AVANT le socle) : .s2-bar → une jauge de 19 px (la barre du haut des écrans internes) ; .s2-h → l'entête d'un écran atelier (nos lignes d'historique) ; .s2-card → un cadre complet posé sur la RACINE (double encadré) ; .s2-tick → une coche en deux barres (pavé noir sur la coche du socle) ; .s2-chip, .s2-mini, .s2-grid2, .s2-ttl → même famille. Le désarmement se fait dans un `:where([data-s2])` : sa spécificité reste celle de la classe seule (0,1,0), donc il BAT atelier.css (chargé avant) et PERD contre le socle (`[data-s2] .s2-xxx`, 0,2,0). Autrement dit : le socle garde la main partout, et seules les propriétés qu'il ne dit pas retournent à zéro. */ :where([data-s2]) .s2-bar { height: auto; border: 0; background: none; overflow: visible; position: static; } :where([data-s2]) .s2-h { display: block; align-items: normal; gap: normal; padding: 0; } :where([data-s2]) .s2-ttl { font-family: inherit; font-size: inherit; letter-spacing: inherit; color: inherit; } :where([data-s2]) .s2-card { border: 0; background: none; box-shadow: none; padding: 0; color: inherit; } :where([data-s2]) .s2-tick { width: auto; height: auto; border: 0; background: none; flex: 0 0 auto; } :where([data-s2]) .s2-chip { display: inline-flex; border: 0; background: none; box-shadow: none; padding: 0; font-family: inherit; font-size: inherit; letter-spacing: inherit; color: inherit; white-space: normal; } :where([data-s2]) .s2-mini { font-family: inherit; font-size: inherit; font-weight: inherit; border: 0; padding: 0; background: none; color: inherit; } :where([data-s2]) .s2-grid2 { display: flex; grid-template-columns: none; gap: normal; } /* ── 2 bis. HUB : la grille d'app.css ne dessine plus rien ────────────────── `.hub-grid` est le conteneur qui porte, depuis toujours, la délégation de clic `[data-game]` d'app.js. On la garde dans le markup pour ne rien casser, mais `display:contents` la retire de la mise en page : les portes de jeu deviennent les enfants directs de `.s2-scroll` et prennent son `gap`. */ [data-s2] .s2 .hub-grid { display: contents; } /* ── 2 ter. LA COCHE D'atelier.css ────────────────────────────────────────── Le socle neutralise `.s2-tick::after` mais pas `::before` : atelier.css dessine sa coche en DEUX barres, et celle du bas s'ajoutait à la coche tracée du socle — un pavé noir à la place. */ [data-s2] .s2 .s2-tick::before { content: none; } /* …et son `::after` peint une BARRE NOIRE pleine. Le socle y redessine la coche en bordures, mais ne dit rien du fond : les deux se superposaient et donnaient un losange plein. Même règle à spécificité de classe. */ :where([data-s2]) .s2-tick::after { background: none; } /* ── 2 quater. LES LISTES RENDUES DANS UN CONTENEUR INTERMÉDIAIRE ─────────── `.s2-scroll` porte son `gap`, mais les écrans qui peignent leur liste dans un
(l'échelle des rangs, l'historique, les potes, la boutique) en sortent : ce
est un seul enfant. On lui rend la colonne. */ [data-s2] .s2 :is(#rk-ladder, #histo-list, #socialList, #sznTiers, #sznDefis, #atLists, #lo-rooms, .shop, .s2-liste) { display: flex; flex-direction: column; gap: var(--s2-r); min-width: 0; } /* …et le RYTHME s'y applique comme dans `.s2-scroll` : l'écart vu est le même partout (les tokens sont définis une seule fois, dans saison2-socle.css › LE RYTHME VERTICAL). Un bloc qui porte une ombre dure la réserve, sinon elle mange l'écart ; un bloc vide sort de la colonne. */ [data-s2] .s2 :is(#rk-ladder, #histo-list, #socialList, #sznTiers, #sznDefis, #atLists, #lo-rooms, .shop, .s2-liste) > :is(.card, .listcard, .s2-ink, .lbrow, .s2-grid2, .s2-grid3) { margin-bottom: var(--sh); } [data-s2] .s2 :is(#rk-ladder, #histo-list, #socialList, #sznTiers, #sznDefis, #atLists, #lo-rooms, .shop, .s2-liste) > :is(.ln, .seg, .statcard, .s2-md) { margin-bottom: 3px; } [data-s2] .s2 :is(#rk-ladder, #histo-list, #socialList, #sznTiers, #sznDefis, #atLists, #lo-rooms, .shop, .s2-liste) > :is(.s2-div, .eyebrow, .s2-head, .s2-sub) { margin-bottom: 0; } [data-s2] .s2 :is(#rk-ladder, #histo-list, #socialList, #sznTiers, #sznDefis, #atLists, #lo-rooms, .shop, .s2-liste) > :empty:not(.sp) { display: none; } /* `credits.css` (l'ANCIENNE boutique) écrit `#sec-credits .shop { padding:14px 16px 8px }` : la vitrine rentrait de 16 px de plus à l'intérieur d'un `.s2` qui a déjà son gouttière, et les tuiles étaient plus étroites que la barre du haut. On remet à plat. */ #sec-credits[data-s2] .shop { padding: 0; } /* ── 2 quinquies. POTES : le padding de l'ancien écran ───────────────────── app.css cale la liste et la barre d'ajout par `#sec-potes …` (0,2,0) : elles se retrouvaient décalées de 16 px à l'intérieur d'un `.s2` qui a déjà le sien. On les remet à plat. */ #sec-potes[data-s2] #socialList { padding: 0; } /* ── 3. LE `hidden` DES COMPOSANTS DE PROTO ───────────────────────────────── `.pill`, `.card`, `.btn`, `.seg`, `.listcard` posent un `display` : il bat le `[hidden]` de l'agent utilisateur, et un bloc masqué restait affiché. */ [data-s2-interne] [hidden], [data-s2] .s2 [hidden] { display: none !important; } /* ── 4. CE QUI EST CLIQUABLE, ET LES LIENS ────────────────────────────────── Les composants de proto sont des ; dans l'app ils portent une action. On leur rend le doigt, jamais l'allure. */ [data-s2-interne] [role="button"], [data-s2] .s2 [role="button"] { cursor: pointer; -webkit-tap-highlight-color: transparent; } [data-s2-interne] a, [data-s2] .s2 a { text-decoration: none; color: inherit; } /* Les maquettes composent avec des ; l'app a besoin de vrais