; ici ils portent une action. On leur rend le doigt, jamais l'allure. */ #onboard-screen[data-s2] [role="button"], #finSaison[data-s2] [role="button"], #nouvelleSaison[data-s2] [role="button"] { cursor: pointer; -webkit-tap-highlight-color: transparent; } /* ── 4. SPLASH · CE QUI RESTE DE L'APP ────────────────────────────────────── ① l'état de connexion (js/pwa.js pose `.off` sur #spConn) ; ② la mise en scène du titre, reprise des keyframes de brutal.css — le splash de la saison 1 claquait à l'arrivée puis respirait, la maquette est figée. On garde le mouvement : c'est un JEU. */ #splash[data-s2] .s2-sp .chip svg { width: 15px; height: 15px; flex-shrink: 0; } #splash[data-s2] .s2-sp .chip .sp-c.off { display: none; } #splash[data-s2] .s2-sp .chip.off .sp-c.on { display: none; } #splash[data-s2] .s2-sp .chip.off .sp-c.off { display: inline; } /* HORS LIGNE : bloc rouge, encre crème — et son ombre reste celle du splash (noire sur le bleu, magenta sur le prune), jamais rouge sur rouge. */ #splash[data-s2] .s2-sp .chip.off { background: #FF3B3B; color: #FFFEF7; } #splash[data-s2] .s2-sp .title .l1 { animation: sp-slam .34s cubic-bezier(.22, 1.2, .32, 1) both, sp-wob1 4s ease-in-out 1s infinite; } #splash[data-s2] .s2-sp .title .l2 { animation: sp-slam2 .34s cubic-bezier(.22, 1.2, .32, 1) .12s both, sp-wob2 4.4s ease-in-out 1.2s infinite; } /* LA BARRE EST LE VRAI CHARGEMENT. brutal.css l'anime avec `.go` (85 %) puis `.loaded` (100 %), mais ses sélecteurs n'ont pas d'ID : redits ici, sinon la barre de cet écran-ci reste bloquée à 6 % et le splash ment. */ #splash[data-s2] .s2-sp .bar > i { width: 6%; transition: width var(--dur-xl) var(--ease-out); } #splash.go[data-s2] .s2-sp .bar > i { width: 85%; } #splash.loaded[data-s2] .s2-sp .bar > i { width: 100%; transition: width var(--dur-m) var(--ease-out); } /* ── 5. LE CHOIX · LES DEUX PORTES ────────────────────────────────────────── `.s2-door` est une carte de proto : son ombre est portée par ::before, et tout son intérieur est cliquable. */ #onboard-screen[data-s2] .s2-door .bd * { pointer-events: none; } #onboard-screen[data-s2] .s2-door { -webkit-tap-highlight-color: transparent; } /* ── 6. CRÉATION DE PROFIL ────────────────────────────────────────────────── ① AVATARS.box() rend `` avec SON bord de 3 px (brutal.css). Posé dans le `.avatar` de proto, qui a déjà le sien, ça faisait un double cadre — même correctif que saison2-app.css pour les cartes de l'accueil. ② la maquette montre 10 styles sur 5 colonnes ; l'app en a 12. En 5 colonnes la dernière rangée n'en porterait que 2 : 4 colonnes × 3 rangées, même composant, aucune tête coupée. ③ l'input vide qu'on valide : le tremblement d'app.css (@keyframes ob-shake). */ #onboard-screen[data-s2] .avatar > :is(.ava-emo, .ava-fr) { width: 100%; height: 100%; border: 0; box-shadow: none; display: block; } #onboard-screen[data-s2] .avatar > .ava-emo > img { width: 100%; height: 100%; display: block; } #onboard-screen[data-s2] .s2-avgrid { grid-template-columns: repeat(4, 1fr); } #onboard-screen[data-s2] .s2-avgrid .avatar { cursor: pointer; } #onboard-screen[data-s2] #obPreview { cursor: pointer; } #onboard-screen[data-s2] .s2-sw i { cursor: pointer; } #onboard-screen[data-s2] #obNick.shake { animation: ob-shake .42s; } /* le pseudo tapé ne doit pas pousser la carte d'aperçu hors de la colonne */ #onboard-screen[data-s2] .s2-you .nk { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── 7. FIN DE SAISON ─────────────────────────────────────────────────────── ① la bande défile : deux moitiés identiques, donc une largeur double ; ② le palier réel (« PODIUM · TOP 3 ») est plus long que « LÉGENDE » de la maquette : il tient sur une ligne, il ne se coupe pas ; ③ la colonne du milieu défile, la mixtape et le bouton restent en bas. */ #finSaison[data-s2] .s2-band .run { width: max-content; } #finSaison[data-s2] .rank-chip { white-space: nowrap; } #finSaison[data-s2] #fszWon { display: flex; flex-direction: column; gap: 10px; } #finSaison[data-s2] #fszWon > .listcard { margin-bottom: 0; } #finSaison[data-s2] .s2-rank .n { flex-shrink: 0; } #finSaison[data-s2] .s2-mix, #finSaison[data-s2] .cta { flex-shrink: 0; } /* ── 8. NOUVELLE SAISON ───────────────────────────────────────────────────── La liste « CE QUI ARRIVE » défile si la saison en annonce beaucoup ; le bouton ENTRER, lui, ne sort jamais de l'écran (la leçon de l'ancien écran, où le numéro mangeait toute la place). */ #nouvelleSaison[data-s2] #nszList { display: flex; flex-direction: column; gap: 10px; } #nouvelleSaison[data-s2] #nszList > .listcard { margin-bottom: 0; } #nouvelleSaison[data-s2] .cta, #nouvelleSaison[data-s2] .badge-grid { flex-shrink: 0; } #nouvelleSaison[data-s2] .badge .nm { text-align: center; } /* ── 9. LES LISTCARD DE CES DEUX ÉCRANS ───────────────────────────────────── atelier.css définit en GLOBAL un `.s2-card` à lui (bord + fond + ombre sur la racine) et il est chargé AVANT le socle : sans ça, la carte de saison portait un second encadré. Même désarmement que saison2-app.css. */ #nouvelleSaison[data-s2] .card.s2-card { border: 0; background: none; box-shadow: none; padding: 0; color: inherit; } /* ── 10. LES LIENS ────────────────────────────────────────────────────────── Rien de ces écrans n'est un aujourd'hui, mais un composant de proto posé sur un lien se retrouverait souligné en bleu par-dessus sa couleur. */ #onboard-screen[data-s2] a, #finSaison[data-s2] a, #nouvelleSaison[data-s2] a { text-decoration: none; color: inherit; } /* ── 11. L'EMOJI D'UNE PASTILLE NE RÉTRÉCIT PAS ───────────────────────────── Dans une rangée serrée il tombait à un filet de 2 px (déjà vu sur RÉGLAGES). */ #finSaison[data-s2] .pill .nemoji, #nouvelleSaison[data-s2] .pill .nemoji { flex-shrink: 0; } /* ── 12. MOUVEMENT RÉDUIT ─────────────────────────────────────────────────── Le système le demande : plus de rayons qui tournent, plus de bande qui défile, plus de titre qui claque. L'écran reste lisible, entier. */ @media (prefers-reduced-motion: reduce) { #splash[data-s2] .s2-sp .rays, #splash[data-s2] .s2-sp .polas img, #splash[data-s2] .s2-sp .title .l1, #splash[data-s2] .s2-sp .title .l2, #onboard-screen[data-s2] .s2-floats img, #nouvelleSaison[data-s2] .s2-floats img, #finSaison[data-s2] .s2-band .run { animation: none !important; } #splash[data-s2] .s2-sp .title .l1 { transform: rotate(-2deg); } #splash[data-s2] .s2-sp .title .l2 { transform: rotate(2deg) translateY(-8px); } } /* ── 13. AUCUNE BANNIÈRE PAR-DESSUS LE PARCOURS D'ENTRÉE ──────────────────── « Installe HOMIES », « Sois alerté de tes défis » (js/pwa.js) sont posées sur : elles recouvraient le bouton C'EST PARTI de la création de profil et le bas de la fin de saison. Elles ne disparaissent pas — elles attendent l'accueil, où elles ont un sens. (`:has` : si le navigateur ne le connaît pas, on retombe sur le comportement d'aujourd'hui — la bannière s'affiche, rien n'est cassé.) */ body:has(#onboard-screen) .pwa-banner, body:has(#finSaison:not([hidden])) .pwa-banner, body:has(#nouvelleSaison:not([hidden])) .pwa-banner, body:has(#wrapped:not([hidden])) .pwa-banner { display: none !important; } /* ── 14. LES QUATRE BADGES DE LA NOUVELLE SAISON EN PEAU SOMBRE ───────────── brutal.css (chantier dark-mode) éteint TOUTES les `.badge .ic` en ABÎME : `background:var(--paper) !important; border-color:#FFD600 !important`. C'est le bon choix pour la grille de badges du profil, dont le contenu suit `--ink` — mais pas ici : la maquette 05 garde les quatre aplats JAUNES en NÉON, avec l'encre et le bord NOIRS et l'ombre magenta. On les rallume, uniquement sur cet écran. Le `!important` n'est pas un raccourci : c'est la seule façon de repasser devant un `!important`. */ html[data-theme="abime"] #nouvelleSaison[data-s2] .badge-grid .badge .ic { background: var(--yellow) !important; border-color: #0A0A0A !important; } html[data-theme="abime"] #nouvelleSaison[data-s2] .badge-grid .badge .ic { color: #0A0A0A; } /* ── 15. GRAND ÉCRAN ──────────────────────────────────────────────────────── `min-width` UNIQUEMENT : la base téléphone au-dessus n'est pas touchée. Le splash de la saison 1 avait une mise en scène GSAP dédiée au web (js/splash-web.js) ; celle-ci visait des classes qui n'existent plus, elle est mise au vestiaire. Sans quoi que ce soit en face, le titre se perdait au milieu d'un 1440×900. On lui rend sa masse, et on borne les colonnes des quatre écrans pour qu'une carte ne s'étire pas sur toute la largeur (au-delà de ~260 px, l'inclinaison d'un bloc devient un trapèze). */ @media (min-width: 900px) { #splash[data-s2] .s2-sp .title .l1 { font-size: 150px; } #splash[data-s2] .s2-sp .title .l2 { font-size: 132px; } #splash[data-s2] .s2-sp .stamp { font-size: 24px; padding: 11px 24px; } #splash[data-s2] .s2-sp .tiles i { width: 104px; height: 104px; } #splash[data-s2] .s2-sp .tiles i img { width: 62px; height: 62px; } #splash[data-s2] .s2-sp .polas img { width: 62px; height: 62px; } #splash[data-s2] .s2-sp .bar, #splash[data-s2] .s2-sp .chips { width: min(620px, 70vw); margin-inline: auto; } #finSaison[data-s2] > .s2, #nouvelleSaison[data-s2] > .s2 { padding-inline: max(16px, calc((100vw - 560px) / 2)); } /* 19/10 — l'entrée (DE RETOUR OU TOUT NEUF, création du profil) n'est plus une colonne de téléphone : 1100 px, et la création se range sur deux colonnes (le personnage à gauche, le pseudo et ta carte à droite). */ #onboard-screen[data-s2] > .s2 { padding-inline: max(16px, calc((100vw - 1100px) / 2)); } #onboard-screen[data-s2] #obChoice .stack { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } #onboard-screen[data-s2] #obChoice .h.xl { font-size: clamp(56px, 5vw, 96px); } #onboard-screen[data-s2] #obCreate .s2-scroll { display: block !important; column-count: 2; column-gap: 36px; } #onboard-screen[data-s2] #obCreate .s2-scroll > * { break-inside: avoid; } /* la bande de fin de saison traverse l'écran ENTIER, pas la colonne : sinon elle devient un bandeau de 560 px posé au milieu d'un grand écran. */ #finSaison[data-s2] .s2-band { margin-inline: calc(-1 * max(16px, (100vw - 560px) / 2)); } } /* ============================================================ TA MIXTAPE sur l'écran de FIN DE SAISON — la même carte que sur l'accueil : emoji animé encadré avec son ombre, l'icône reprise en fond, le texte sur une ligne. ============================================================ */ #finSaison[data-s2] .s2-mix > .bd { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 12px; } #finSaison[data-s2] .s2-mix > .bd::before { content: ''; position: absolute; right: -14px; top: 50%; transform: translateY(-50%); width: 112px; height: 112px; pointer-events: none; opacity: .18; background: url(https://fonts.gstatic.com/s/e/notoemoji/latest/1f3b6/512.gif) center / contain no-repeat; } #finSaison[data-s2] .s2-mix > .bd > * { position: relative; z-index: 1; } #finSaison[data-s2] .s2-mix .ph { width: 70px; height: 70px; flex: none; display: flex; align-items: center; justify-content: center; border: 4px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); background: var(--paper); } #finSaison[data-s2] .s2-mix .ph img { width: 54px; height: 54px; object-fit: contain; } #finSaison[data-s2] .s2-mix .tx { flex: 1; min-width: 0; } #finSaison[data-s2] .s2-mix .t { display: block; font-family: var(--font-d); font-size: 23px; letter-spacing: .5px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #finSaison[data-s2] .s2-mix .d { display: block; margin-top: 5px; font-family: var(--font-m); font-weight: 700; font-size: 9px; letter-spacing: 1.1px; opacity: .72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-skin="neon"][data-theme] #finSaison[data-s2] .s2-mix .ph { box-shadow: 5px 5px 0 var(--magenta); }