/* ============================================================================
HOMIES — SAISON 2 · LE SOCLE DES MAQUETTES DANS L'APP
----------------------------------------------------------------------------
Ce fichier donne à l'app le VOCABULAIRE des 132 écrans validés de la saison 2
(brandnew/tools/s2/*.mjs, rendus dans brandnew/drafts/_saison2-parcours-complet.html).
Il est chargé APRÈS brutal.css et app.css.
⚠ NOM DU FICHIER — public/css/saison2.css EXISTE DÉJÀ : c'est la feuille des
trois formats LA TAUPE · LA TOUR · L'ARÈNE, chargée par /host et /play. On ne
l'écrase pas. Ce socle-ci s'appelle donc saison2-socle.css.
── 1. proto.css est DÉJÀ dans l'app ──────────────────────────────────────
index.html, host.html et play.html chargent /css/proto.css AVANT brutal.css.
Les 28 composants « des maquettes » (card, listcard, cta, pill, emoji-box,
avatar, medal, badge, badge-grid, xpbar, levelbar, level-badge, statcard,
lbrow, qcard, options, hud, input, stepper, codecells, rank-chip, progress,
bottomnav, brand, iconbtn, sheet, toast, ptile, playcard) sont donc déjà
servis, avec les tokens de l'app (--paper, --ink, --magenta) et les tokens de
proto (--bd, --bd-strong, --sh, --sh-cta, que brutal.css ne définit pas).
On ne les recopie PAS ici : les dupliquer, c'est créer une deuxième vérité.
Ce fichier ne porte que ce qui manque vraiment : les arbitrages (8 annoncés,
9 trouvés) et le socle s2-*.
── 2. LE SCOPE [data-s2] ─────────────────────────────────────────────────
TOUT ce fichier est scopé par [data-s2]. Un écran intégré porte cet attribut
sur son conteneur racine (celui qui jouait le rôle de .dev dans l'atelier) :
Rien ici ne peut donc toucher un écran existant : sans [data-s2] dans la
chaîne d'ancêtres, aucune règle ne s'applique. C'est ça, l'arbitrage des 8
collisions — on n'écrase jamais la classe de l'app, on la redit seulement à
l'intérieur d'un écran saison 2. Un overlay monté sur doit porter
data-s2 lui aussi, sinon il retombe sur le rendu de l'app.
── 3. LA PEAU NÉON ───────────────────────────────────────────────────────
Les maquettes écrivent .dev.dk ; l'app a déjà le thème, posé par applyTheme()
(public/js/app.js) : NÉON = data-theme="abime" + data-skin="neon", et
brutal.css §NÉON pose exactement les tokens de la maquette (--paper #31202F,
--ink #F6EEE3, --gray #3E2A3B, --magenta #FF5CA8). La traduction est donc :
.dev.dk → html[data-skin="neon"][data-theme]
.dev:not(.dk) → html:not([data-theme="abime"]):not([data-skin])
Le second sélecteur d'attribut n'est pas décoratif : .dev.dk pesait (0,2,0),
html[data-skin="neon"] ne pèse que (0,1,1) — l'écart avec les règles claires
s'inversait. Avec [data-theme] en plus on repasse à (0,2,1) : l'ordre des
maquettes est conservé partout.
« Clair » = tout ce qui n'est pas ABÎME, puisque ABÎME, SYSTEM et NÉON posent
tous les trois data-theme="abime".
── 4. LA RÈGLE D'OMBRE (brandnew/tools/s2/socle.mjs) ─────────────────────
Un fond et son ombre n'ont jamais la même couleur, ni la couleur de ce qu'il
y a derrière. Sur un aplat clair l'ombre est noire ; sur le prune NÉON elle
est magenta ; un bloc magenta prend une ombre jaune ; un bloc noir ne prend
JAMAIS d'ombre noire. Les règles portées plus bas l'appliquent déjà, cas par
cas, avec leurs commentaires d'origine : ne pas les « simplifier ».
============================================================================ */
/* ============================================================================
LES ARBITRAGES — 8 ANNONCÉS, 9 TROUVÉS
----------------------------------------------------------------------------
Huit composants existent dans proto.css ET dans brutal.css/app.css. brutal.css
étant chargé APRÈS proto.css, c'est lui qui gagne aujourd'hui dans l'app, avec
une AUTRE structure. Verdict pour chacun ci-dessous. Règle appliquée :
l'app garde raison partout, les maquettes ne reprennent la main que sous
[data-s2].
Le neuvième — .stamp — ne figurait sur aucune liste : il ne se voit qu'à
l'écran, parce qu'il ne casse rien tant que personne ne donne un content au
pseudo-élément. Voir son verdict plus bas.
============================================================================ */
/* ── 1/8 · .btn ─────────────────────────────────────────────────────────────
app : taille unique (20px / bord 4px / ombre 6px) + :hover, :active,
:disabled et la variante .ink à ombre magenta.
maquettes: trois tailles .sm/.md/.lg + .block, ombre au token --sh.
VERDICT — presque rien à faire : .btn.sm / .btn.md / .btn.lg / .btn.block de
proto.css pèsent (0,2,0) et gagnent DÉJÀ sur le .btn (0,1,0) de brutal.css,
et les 132 écrans ne posent jamais un .btn nu. Il ne reste que l'ombre de
base (6px au lieu de --sh) et l'écart de gap. On les recale, et on REDIT
:active et .ink derrière, sinon notre règle (0,2,0), chargée plus tard, les
éteindrait — le bouton perdrait son enfoncement au doigt. */
[data-s2] .btn { gap: 8px; box-shadow: var(--sh) var(--sh) 0 var(--ink); }
[data-s2] .btn.sm { box-shadow: 3px 3px 0 var(--ink); }
[data-s2] .btn.ink { box-shadow: var(--sh) var(--sh) 0 var(--magenta); }
/* redit APRÈS, sinon la règle du dessus (même poids, chargée plus tard) éteindrait
le survol et l'enfoncement de l'app. Valeurs de l'app, au pixel : on ne change
pas le game-feel d'un bouton, on ne change que son ombre au repos. */
/* ⚠ PLUS D'ÉLÉVATION AU SURVOL. Edwin, sur PC : « quand je mets la souris
dessus il y a une élévation, l'ombre est complètement noire, c'est quoi ce
design moche ? Pourquoi on n'a pas un truc uniforme, comme les clics qu'on a
de base ? » Le bouton se SOULEVAIT de 2 px et son ombre passait de 5 à 8 —
un geste que rien d'autre dans le jeu ne fait. Le survol ne déplace plus
rien : il ne fait que dire « c'est cliquable » (le curseur). Le seul geste
du jeu, c'est l'APPUI, et il est le même partout — voir la règle unique en
bas de ce fichier. */
[data-s2] .btn:hover { transform: none; box-shadow: var(--sh) var(--sh) 0 var(--ink); }
[data-s2] .btn.sm:hover { box-shadow: 3px 3px 0 var(--ink); }
[data-s2] .btn.ink:hover { box-shadow: var(--sh) var(--sh) 0 var(--magenta); }
/* ── 2/8 · .opt (la réponse A/B/C/D) ────────────────────────────────────────
app : .opt > .bd padding 15/14, lettre dans .letter-wrap > .lbox,
état marqué par .ocheck (la pastille ronde).
maquettes: .opt > .bd padding 13/12, lettre dans .lwrap > .lbox, état marqué
par le TAMPON PENCHÉ .stamp (validé s27), coche et croix tracées.
VERDICT — les maquettes, mais uniquement sous [data-s2]. Les deux nomment
leurs enfants différemment (.letter-wrap vs .lwrap, .ocheck vs .stamp) : rien
ne se chevauche côté lettre. Ne collisionnent vraiment que .opt .bd,
.opt .text et les trois états .opt.selected/.correct/.wrong .bd, où brutal
gagne par l'ordre source. On les redit à la valeur des maquettes.
À RETENIR À L'INTÉGRATION : l'écran s2 écrit .lwrap et .stamp. S'il écrivait
.letter-wrap/.ocheck, il retomberait sur le rendu de l'app — et ce serait
juste aussi. On ne mélange pas les deux dans un même écran. */
[data-s2] .opt .bd { padding: 13px 12px; }
[data-s2] .opt .text { font-size: 16px; }
/* proto épaissit le bord à 5px sur SÉLECTIONNÉ et BONNE RÉPONSE seulement ;
brutal met 4px sur les trois. On rend les valeurs de la maquette. */
[data-s2] .opt.selected .bd,
[data-s2] .opt.correct .bd { border-width: 5px; }
[data-s2] .opt.wrong .bd { border-width: var(--bd); }
/* ⚠ LE PIÈGE VU À L'ŒIL SUR LA PAGE TÉMOIN : la bonne réponse restait ROUGE.
proto.css écrit .opt.correct .bd { background:var(--green) } AVANT
.opt.c-red .bd { background:var(--red) } de brutal.css — même poids (0,3,0),
c'est donc la couleur de la CASE qui gagnait sur la couleur de l'ÉTAT.
L'état doit toujours passer devant. */
[data-s2] .opt.correct .bd { background: var(--green); color: var(--ink); }
[data-s2] .opt.wrong .bd { background: var(--red); color: var(--paper); }
/* NON TOUCHÉS, volontairement : .opt:active (scale .97), .opt.selected/.correct
(scale 1.03) et .opt.faded viennent de l'app et ne contredisent pas la
maquette — ils l'animent. Les fonds vert/rouge et le tampon .stamp sont déjà
servis par proto.css : brutal ne les touche pas (il a son propre .ocheck). */
/* ── 8+1/8 · .stamp — LA COLLISION QUI N'ÉTAIT PAS SUR LA LISTE ────────────
Trouvée à l'œil sur la page témoin : la coche du tampon sortait en pavé noir
au lieu du trait tracé. brutal.css définit un .stamp à lui (l'effet tampon
des blocs cliquables) avec un .stamp::before SANS content — il ne dessine
donc rien tout seul, et personne ne l'avait vu. Mais proto.css, lui, DONNE un
content au ::before du tampon de réponse : le pseudo-élément naît, et hérite
au passage des right:-6px / bottom:-6px / background:var(--ink) de brutal,
que proto ne remet jamais à zéro. La coche s'étirait en bloc d'encre.
VERDICT — on désarme les quatre propriétés de brutal sur le SEUL tampon de
réponse. La croix de .opt.wrong garde son fond crème, qui vient de proto et
pèse plus lourd. */
[data-s2] .opt .stamp::before,
[data-s2] .opt .stamp::after { right: auto; bottom: auto; z-index: auto; }
[data-s2] .opt.selected .stamp::before,
[data-s2] .opt.correct .stamp::before { background: none; }
/* ── 3/8 · .seg (le contrôle segmenté) ──────────────────────────────────────
app : .seg { display:flex } + enfants , séparateur border-left.
maquettes: .seg { display:inline-flex } + enfants .o, séparateur border-right.
VERDICT — l'app, et RIEN à déclarer ici. Les enfants ne se marchent pas
dessus ( vs .o), et les 22 contrôles segmentés des 132 écrans
écrivent TOUS « seg s2-seg » : .s2-seg (porté plus bas) repose lui-même son
display, donc la racine de l'app ne se voit jamais.
⚠ ESSAI ÉCARTÉ : on avait d'abord écrit [data-s2] .seg { display:inline-flex }.
Effet de bord — .progress est bâtie avec des enfants .seg dans proto.css, et
la règle les touchait aussi. Une règle inutile qui casse un autre composant :
on l'a retirée. */
/* ── 4/8 · .sticker — LE CAS QUI A COÛTÉ LE PLUS CHER ───────────────────────
app : UN seul niveau. .sticker porte le bord, le fond et la box-shadow,
et brutal.css NEUTRALISE .sticker::before { content:none } parce
que la pseudo-ombre noire de proto.css recouvrait son fond coloré.
maquettes: DEUX niveaux. .sticker::before = l'ombre, .sticker > .bd = le bord
et le fond.
VERDICT — les maquettes sous [data-s2], et c'est obligatoire : les 59
stickers des 132 écrans écrivent .
Dans l'app telle quelle, brutal peint le cadre sur la RACINE pendant que
.sticker .bd (0,2,0) de proto peint le sien à l'intérieur : DOUBLE CADRE.
On désarme donc la racine et on rallume le ::before — uniquement ici. */
[data-s2] .sticker { padding: 0; border: 0; background: none; box-shadow: none; }
[data-s2] .sticker::before { content: ''; }
/* et on redit les variantes de couleur au bon niveau (l'app les pose sur la
racine, qu'on vient de vider) */
[data-s2] .sticker.magenta .bd { background: var(--magenta); color: var(--paper); }
[data-s2] .sticker.cyan .bd { background: var(--cyan); color: var(--ink); }
[data-s2] .sticker.green .bd { background: var(--green); color: var(--ink); }
[data-s2] .sticker.red .bd { background: var(--red); color: var(--paper); }
/* ── 5/8 · .toggle-btn (AJOUTER → ACTIVÉ) ───────────────────────────────────
app : n'en définit PAS l'allure. Il l'ajoute seulement à deux listes de
sélecteurs — une transition, et un :active { transform:scale(.95) }.
maquettes: définissent l'allure complète, et un :active en enfoncement
(translate + ombre à zéro).
VERDICT — l'app sur le fond (rien à reprendre, proto.css décrit déjà tout le
composant et gagne), les maquettes sur le doigt : dans un écran s2, tous les
blocs s'enfoncent, un seul qui rétrécit jure. Un seul sélecteur à redire. */
[data-s2] .toggle-btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
/* ── 6/8 · .topbar ──────────────────────────────────────────────────────────
app : position:sticky, z-index 40, bord bas 4px.
maquettes: statique, flex-shrink:0, bord bas --bd (3px).
VERDICT — l'app, sans réserve. Le sticky est ce qui tient la barre du haut
quand le contenu défile, et AUCUN des 132 écrans n'utilise .topbar (ils
posent leur propre .s2 .top). Collision théorique : rien à arbitrer, rien
n'est écrit ici. Si un écran s2 a besoin d'une barre du haut, il prend celle
de l'app telle quelle. */
/* ── 7/8 · .type-pill (le label de manche) ──────────────────────────────────
app : display:inline-block + une MARGE en dur (12px 14px 8px), .bd en
16px / padding 8px 16px.
maquettes: inline-flex, aucune marge (l'écran place la pastille lui-même),
.bd en 13px / padding 6px 14px.
VERDICT — les maquettes sous [data-s2]. La marge en dur de l'app est le vrai
problème : dans un écran s2, la pastille est posée dans un flex avec son
propre gap, et ces 14px de côté la décalaient de tout le reste. Les 62
type-pill des maquettes sont à la petite taille. */
[data-s2] .type-pill { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; margin: 0; }
[data-s2] .type-pill .bd { padding: 6px 14px; font-size: 13px; gap: 7px; }
/* ── 8/8 · .marquee (le bandeau défilant) ───────────────────────────────────
app : la racine + un enfant .track animé.
maquettes: la racine seule (padding 5px 0, 11px, interlettre 2px), pas
d'enfant, pas d'animation.
VERDICT — l'app. Sa version est un sur-ensemble : les deux posent le même
bandeau d'encre, l'app sait en plus le faire défiler. Et aucun des 132 écrans
n'écrit .marquee. Rien à redire ici non plus. */
/* ============================================================================
ABÎME ET SYSTEM — LE GARDE-FOU DE LISIBILITÉ
----------------------------------------------------------------------------
Les maquettes ont tranché deux peaux : la claire et NÉON. Les 13 thèmes de
APP_THEMES ne posent un problème que pour trois d'entre eux, et pour une seule
raison : ABÎME, SYSTEM et NÉON RETOURNENT --ink (il devient clair). Les neuf
autres thèmes ne touchent qu'au fond et à l'accent, --ink reste #0A0A0A, et
les composants suivent tout seuls.
Restent donc ABÎME et SYSTEM (NÉON est déjà décidé plus bas, on l'exclut) :
un composant dont le FOND est une couleur vive FIXE — jaune, vert, cyan,
#FFE99C — mais dont le TEXTE suit --ink devient clair sur clair. C'est
exactement le défaut que brutal.css corrige déjà à la main pour les écrans de
l'app (html[data-theme="abime"] .home-v4 .cta-card .main { color:#0A0A0A }).
On fait pareil, mais uniquement sous [data-s2] : sur un aplat vif, le texte
redevient de l'encre. Les bords et les ombres, eux, ne bougent pas — clairs
sur fond sombre, c'est la doctrine d'ABÎME et elle marche.
⚠ C'EST LA SEULE CHOSE QUE CE FICHIER DÉCIDE ET QUE LES MAQUETTES N'ONT PAS
TRANCHÉE. À revoir avec Edwin si un écran s2 doit vivre en ABÎME.
============================================================================ */
html[data-theme="abime"]:not([data-skin="neon"]) [data-s2] :is(
.btn.yellow, .btn.green, .btn.cyan,
.pill.yellow, .pill.green, .pill.cyan,
.listcard.on .bd, .listcard.sel .bd,
.cta.go .bd,
.opt.c-yellow .bd, .opt.correct .bd,
.statcard.a, .statcard.b, .statcard.c,
.lbrow.me,
.rank-chip.gold,
.sticker .bd,
.toggle-btn.on,
.toast,
.codecells .cell.filled,
.type-pill .bd,
.playcard .lvltag,
.seg .o.on
) { color: #0A0A0A; }
/* .desc et les libellés secondaires ne suivent pas : ils recalculent leur
couleur depuis --ink (color-mix), donc ils restent clairs sur l'aplat. */
html[data-theme="abime"]:not([data-skin="neon"]) [data-s2] :is(
.listcard.on .desc, .listcard.sel .desc
) { color: rgba(10, 10, 10, .62); }
/* les symboles TRACÉS (− et + du stepper, la coche du tampon) sont peints en
var(--ink) : sur l'aplat jaune ou vert, ils doivent redevenir de l'encre. */
html[data-theme="abime"]:not([data-skin="neon"]) [data-s2] :is(
.stepper .sbtn::before, .stepper .sbtn::after,
.opt.selected .stamp::before, .opt.correct .stamp::before
) { border-color: #0A0A0A; background: #0A0A0A; }
html[data-theme="abime"]:not([data-skin="neon"]) [data-s2] :is(
.opt.selected .stamp, .opt.correct .stamp
) { border-color: #0A0A0A; box-shadow: 4px 4px 0 #0A0A0A; }
/* la coche est tracée avec un BORD, pas un fond : on lui rend son fond vide */
html[data-theme="abime"]:not([data-skin="neon"]) [data-s2] :is(
.opt.selected .stamp::before, .opt.correct .stamp::before
) { background: none; }
/* ------------------------------------------------------------------
LES QUATRE TROUS DU GARDE-FOU, TROUVÉS EN MESURANT L'APP EN ABÎME
------------------------------------------------------------------
Le garde-fou ci-dessus ne peignait que le bloc porteur de l'aplat. Mesure
faite en cliquant les 5 onglets et les 6 sous-réglages en ABÎME : douze
familles de texte passaient quand même sous 2.2 de contraste. Quatre causes,
et aucune n'est une couleur « mal choisie » — ce sont des règles qui se
croisent.
------------------------------------------------------------------ */
/* ① Le texte d'un aplat vif n'est pas dans le bloc, il est DANS ses enfants.
`.s2-door .bd` reçoit bien l'encre, mais « JE RÉCUPÈRE » vit dans un `.t`
qui recalcule sa couleur depuis --ink : blanc sur cyan, 1.64. Idem pour
REJOINDRE (.t/.s sur jaune), « / 11 » (.tot), le nom du thème actif (.n),
et le nom d'un objet possédé (.nm). On descend aux enfants, comme NÉON le
fait déjà pour `.s2-door .bd *`. */
html[data-theme="abime"]:not([data-skin="neon"]) [data-s2] :is(
.s2-door .bd, .s2-act .bd, .s2-mix .bd, .s2-hero .bd, .s2-jeu .bd,
.s2-item.s2-own .bd, .s2-themes .act, .cta .bd
) :is(.t, .s, .n, .d, .k, .nm, .tot, .lb, .tx, span, small, b, i, em, strong) {
color: #0A0A0A;
}
/* le second niveau d'un aplat (sous-titre, unité) garde son retrait */
html[data-theme="abime"]:not([data-skin="neon"]) [data-s2] :is(
.s2-door .bd, .s2-act .bd, .s2-hero .bd, .s2-themes .act
) :is(.s, .d, .tot, .desc) { color: rgba(10, 10, 10, .62); }
/* ② Une pill posée sur un aplat de couleur est un PETIT APLAT CLAIR à encre
noire — c'est ce que disent les maquettes. Le socle ne lui donnait que
l'encre : en thème clair `--paper` était crème et le compte y était, en
ABÎME `--paper` devient #121212 et « FIN DANS 96 J » s'écrivait en noir sur
du noir. On lui rend son fond. */
html[data-theme="abime"]:not([data-skin="neon"]) [data-s2] :is(
.s2-card, .s2-door, .s2-mix, .s2-hero, .s2-act, .s2-item
) .pill {
background: #FFFEF7; border-color: #0A0A0A; box-shadow: 3px 3px 0 #0A0A0A;
}
/* ③ `#sec-reglages .pill { background: var(--paper) }` (reglages.css) porte un
id : aucune combinaison de classes ne peut le battre, et il vole son jaune à
`.pill.yellow`. Le garde-fou y peignait ensuite l'encre → « 13 THÈMES » en
noir sur noir. `!important` est ici la seule arme contre une spécificité d'id
venue d'une feuille d'écran que la saison 2 ne réécrit pas. */
[data-s2] .pill.yellow { background: var(--yellow) !important; }
[data-s2] .pill.green { background: var(--green) !important; }
[data-s2] .pill.cyan { background: var(--cyan) !important; }
[data-s2] .pill.red { background: var(--red) !important; }
[data-s2] .pill.magenta { background: var(--magenta) !important; }
/* ------------------------------------------------------------------
⑥ LE CRÈME POSÉ SUR UN APLAT CLAIR — trouvé en balayant 15 écrans
------------------------------------------------------------------
Mes mesures ne portaient que sur les 5 onglets. En ouvrant RANGS, SAISON,
CHOISIS TON JEU, SOLO et MAQUIS, trois familles de plus sont apparues — et
celles-là tombent AUSSI en thème clair : ce ne sont pas des accidents de
thème, ce sont des textes crème posés sur un aplat clair.
· `.s2-saison .st` et `.nm` sont écrits en `var(--paper)` : la maquette pose
cette carte sur un fond SOMBRE. Dans l'app, une carte de rang atteint
(`.listcard.s2-fait .bd`) est JAUNE — le crème y disparaît (1,40).
· `.s2-band .run` (le bandeau qui défile) suit `--ink` sur un jaune FIXE :
illisible dès que `--ink` s'éclaircit, donc en ABÎME et en NÉON (1,36).
· `.pill.magenta` : en ABÎME, `--magenta` VAUT DU CYAN (brutal.css, thème
ABÎME) — la pastille devient un aplat clair et son texte crème tombe à
1,64. Son encre doit suivre son fond, pas son nom.
------------------------------------------------------------------ */
[data-s2] :is(.listcard.s2-fait, .s2-fait) .bd,
[data-s2] :is(.listcard.s2-fait, .s2-fait) .bd :is(.st, .nm, .name, .desc, .t, .s, span, b, small) { color: #0A0A0A; }
[data-s2] :is(.listcard.s2-fait, .s2-fait) .bd .sticker .bd { color: #0A0A0A; }
html[data-theme="abime"]:not([data-skin="neon"]) [data-s2] .s2-band .run,
html[data-theme="abime"]:not([data-skin="neon"]) [data-s2] .s2-band .run span { color: #0A0A0A; }
html[data-theme="abime"] [data-s2] .pill.magenta { color: #0A0A0A; }
/* ④ `.badge-prog` porte une couleur FIGÉE dans proto.css, pensée pour le thème
clair : vert foncé #2e7d43 pour un badge obtenu, encre à 50 % pour un badge
en cours. Sur le #121212 d'ABÎME, les 81 compteurs de la page STATS
tombaient à 1.06. NÉON a déjà sa version ; ABÎME n'en avait pas. */
html[data-theme="abime"]:not([data-skin="neon"]) [data-s2] .badge .badge-prog { color: #5BE885; }
html[data-theme="abime"]:not([data-skin="neon"]) [data-s2] .badge.locked .badge-prog { color: rgba(251, 251, 251, .55); }
/* ------------------------------------------------------------------
LA GRILLE DE BADGES : QUATRE TUILES PAR LIGNE, ET LA MÊME HAUTEUR
------------------------------------------------------------------
`.badge` est une colonne libre : sa hauteur dépend du nom. « TIREUR » tient
sur une ligne, « PREMIER CLASH » sur deux — d'où des tuiles de tailles
différentes, des lignes qui ondulent et un compteur qui vient buter contre le
nom du voisin. On donne au nom la place de DEUX lignes, toujours, et on cale
le compteur en bas : les 27 badges forment enfin une grille régulière.
------------------------------------------------------------------ */
[data-s2] .badge-grid { align-items: start; }
[data-s2] .badge { height: 100%; justify-content: flex-start; }
[data-s2] .badge .nm {
min-height: 2.3em; /* 2 lignes à line-height 1.15, toujours */
display: flex; align-items: center; justify-content: center;
width: 100%;
}
[data-s2] .badge .badge-prog { margin-top: auto; }
/* ⑤ LE PODIUM, trouvé en jouant une partie entière de LA TAUPE en ABÎME.
Deux composants que seule la fin de partie fait apparaître, donc qu'aucun
balayage des onglets ne pouvait voir :
· `.s2-rkb` — le numéro de rang sur sa médaille. Les trois fonds sont FIXES
et clairs (jaune, #DADADA, orange) mais le chiffre suit --ink : 1.35.
NÉON avait déjà sa règle, ABÎME non.
· `.s2-gain.zero` — le gain d'un joueur qui n'a rien marqué. Son encre est
figée en #0A0A0A (elle est pensée pour le vert) pendant que son fond suit
`--gray2`, qui devient #242424 en ABÎME : « +0 » en noir sur du noir, 1.28.
NÉON le repeint déjà en gris clair ; on fait le même geste. */
html[data-theme="abime"]:not([data-skin="neon"]) [data-s2] .s2-rkb { color: #0A0A0A; }
html[data-theme="abime"]:not([data-skin="neon"]) [data-s2] .s2-rkb:not(.gold):not(.silver):not(.bronze) { background: #C8C8C8; }
html[data-theme="abime"]:not([data-skin="neon"]) [data-s2] .s2-gain.zero { background: #C8C8C8; }
/* ============================================================
COLLISIONS AVEC LES FEUILLES DÉJÀ CHARGÉES PAR L'APP
Ces classes `s2-` existaient AVANT le socle, dans des feuilles non scopées.
Elles ne sont pas redéfinies ici : on neutralise seulement ce qui traverse.
============================================================ */
/* `saison2.css` (les 3 formats de la saison 2, chargé par /host et /play) pose
`.s2-ttl { flex:1 }` sans scope : dans un écran s2, la barre de titre
s'étirait et poussait tout le reste. Le socle la veut à sa taille. */
[data-s2] .s2-ttl { flex: none; }
/* `atelier.css` définit ses propres `.s2-card` et `.s2-tick` en global, et se
charge AVANT le socle : d'où un second encadré autour de la carte de saison,
et une coche empilée sur la coche tracée (un pavé noir). */
[data-s2] .s2-card { border: 0; background: none; padding: 0; box-shadow: none; }
[data-s2] .s2-tick::after { content: none; }
/* ============================================================================
LE RYTHME VERTICAL : L'ÉCART QU'ON VOIT VAUT --s2-r
----------------------------------------------------------------------------
HISTORIQUE, pour qu'on ne refasse pas le tour une troisième fois.
1. On avait inventé une échelle 12 / 24 px et posé des marges partout, SANS
alléger le contenu : sur DÉFIS la maquette montrait neuf quêtes, l'app
n'en montrait plus que quatre. Edwin a dit non — à juste titre.
2. On a donc tout retiré et laissé le `gap:8px` des maquettes. Mais l'ombre
dure d'une carte déborde de --sh (5 px) SOUS sa boîte : l'écart RÉELLEMENT
VU ne valait plus que 3 px. Edwin, sur son téléphone : « il n'y a pas
d'espace entre les 4 cards », « les cards ne respirent toujours pas ».
3. Ce qu'on écrit ici, et qui n'est plus un jugement mais une mesure : le gap
vaut --s2-r, et chaque bloc qui pose une ombre la RÉSERVE en marge basse.
L'écart VU vaut donc --s2-r partout — 12 px, le même après une carte
qu'après un bandeau. On ne rajoute PAS de --s2-rs avant les séparateurs
des cinq onglets : le trait fait déjà la coupure, et c'est ce qui avait
fait perdre cinq quêtes à DÉFIS.
⚠ CES DEUX TOKENS ÉTAIENT UTILISÉS SANS ÊTRE DÉFINIS. `saison2-internes.css`
(la boutique, l'échelle des rangs, l'historique, les potes), `saison2-host.css`
(#playersWall, le mur des joueurs du salon) et `saison2-hostgame.css` écrivent
déjà `gap: var(--s2-r)`. Sans déclaration, `var(--s2-r)` est INVALIDE et
`gap` retombe sur `normal`, c'est-à-dire ZÉRO : c'est la vraie cause du
« y'a pas d'espace » de la boutique et du « toujours pas le cas » du salon —
la règle était écrite, elle ne s'appliquait simplement jamais.
============================================================================ */
[data-s2] { --s2-r: 12px; --s2-rs: 24px; }
/* la colonne qui défile */
[data-s2] .s2 .s2-scroll { gap: var(--s2-r); }
/* ⚠ LE PIÈGE DU CONTENEUR INTERMÉDIAIRE, rencontré trois fois : `.hub-grid`
(CHOISIS TON JEU) est en `display:contents`, ses cartes sont donc rangées par
le flex de `.s2-scroll` MAIS ne sont pas ses enfants au sens du sélecteur.
`.s2-scroll > .listcard { margin-bottom:0 }` du socle ne les atteignait pas :
les 10 px de proto s'AJOUTAIENT au gap et le rythme du hub ondulait
(8 px entre deux cartes, 18 px entre deux lignes). On vise les deux. */
/* un bloc qui pose une ombre dure la RÉSERVE : sinon elle mange l'écart et deux
cartes se touchent. Les ombres du socle débordent de --sh sous la boîte. */
[data-s2] .s2 :is(.s2-scroll, .hub-grid) > :is(.card, .listcard, .lbrow, .cta,
.seg, .s2-ink, .s2-grid2, .s2-grid3, .badge-grid, .hvsec) { margin-bottom: var(--sh); }
/* un séparateur, un intertitre : pas d'ombre, donc rien à réserver. */
[data-s2] .s2 :is(.s2-scroll, .hub-grid) > :is(.s2-div, .s2-head, .eyebrow, .s2-sub) { margin-bottom: 0; }
/* une grille à PLUSIEURS RANGÉES (les cadres de la boutique, les modes et les
badges de STATS) est une colonne elle aussi : ses rangées se lisent avec le
même écart que deux blocs, ombre réservée. La gouttière HORIZONTALE, elle,
ne bouge pas — 10 px et 9 px, les valeurs des maquettes : c'est elle qui
fixe la largeur des tuiles. */
[data-s2] .s2 :is(.s2-grid2, .s2-grid3, .badge-grid) { row-gap: calc(var(--s2-r) + var(--sh)); }
/* 4 bis · `1fr` N'EST PAS UNE COLONNE ÉGALE.
Mesuré sur les 27 badges de STATS : les icônes, toutes carrées et toutes en
`width:100%`, sortaient à 48, 58, 62 et 72 px de côté dans la MÊME rangée.
`1fr` vaut `minmax(auto, 1fr)` : une colonne dont le contenu est plus large
(« FRAPPE FORTE », « HIGH SCORER ») s'élargit aux dépens des autres. Les
tuiles n'avaient donc jamais la même taille, et la grille ondulait.
`minmax(0, 1fr)` rend des colonnes vraiment égales ; le nom retourne à la
ligne au lieu de pousser sa colonne. */
[data-s2] .s2 .s2-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-s2] .s2 .s2-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
[data-s2] .s2 .badge-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
[data-s2] .s2 :is(.badge, .statcard, .s2-md) { min-width: 0; }
/* …et le nom du badge TIENT SUR UNE LIGNE, coupée par des points de suspension.
C'est la règle du brandbook (« un titre de carte tient sur une ligne »), et
Edwin la redemande sur STATS : « titre sur une seule ligne, si c'est long
rajoute des … ou coupe ». On avait d'abord fait l'inverse — le nom retournait
à la ligne — parce que `profil.css` ferme mal une règle et lâche un `.nm`
GLOBAL (`white-space:nowrap; overflow:hidden`) : le nom, centré par un flex,
débordait DES DEUX CÔTÉS et « ESPRIT D'ÉQUIPE » se lisait « SPRIT D'ÉQUIP ».
Le vrai correctif n'était pas de le laisser passer sur deux lignes, c'était
le `text-overflow` qui manquait, plus une boîte de bloc pleine largeur pour
qu'il coupe À DROITE et non des deux côtés. Le nom entier reste dans
l'infobulle de la tuile. */
[data-s2] .s2 .badge .nm {
display: block; width: 100%; text-align: center;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* et les tuiles d'une rangée ont la MÊME hauteur : l'icône de chacune part du
haut, le compteur reste calé en bas (c'est ce que `.badge{height:100%}`
cherchait à faire — avec `align-items:start`, il ne pouvait pas). */
[data-s2] .s2 .badge-grid { align-items: stretch; }
/* ============================================================================
LE BADGE « NOUVEAU »
----------------------------------------------------------------------------
Edwin : « il y a des nouveaux modes de jeu où c'est marqué NOUVEAU sur des
cadres, c'est très mal fait, c'est très moche. »
Ce qu'il y avait : une pastille MAGENTA posée sur la carte CRÉER, elle-même
magenta (`.news-dot`, brutal.css), et une pastille penchée de 6° qui sortait
du coin de la tuile de pack (`.new-badge`, brutal.css + saison2-host.css).
Fond sur fond de la même couleur, rotation au hasard, débordement.
Ce qu'on met à la place, avec le vocabulaire du brandbook et rien d'autre :
un petit APLAT JAUNE, encre noire, bord noir de 3 px, ombre dure décalée de
3 px, capitales, aucune rotation, calé À L'INTÉRIEUR du coin de la carte.
L'aplat est jaune parce qu'il se pose toujours sur une TUILE DE COULEUR
(magenta de CRÉER, couleur de pack) : jaune sur couleur tranche dans les
trois peaux, et l'ombre noire n'est jamais la couleur du bloc ni celle du
fond derrière.
Le markup est rendu par QZ.newBadge() (public/js/content.js) et par le point
« nouveautés » de l'accueil (public/js/app.js) : les deux écrivent `s2-new`.
============================================================================ */
[data-s2] .s2-new {
/* calé À L'INTÉRIEUR du bord de la carte : décalé de --bd, son ombre de 3 px
retombe pile sur le bord et ne sort jamais du bloc. */
position: absolute; top: var(--bd); right: var(--bd); z-index: 4;
display: inline-block; pointer-events: none;
font-family: var(--font-d); font-size: 10px; line-height: 1; letter-spacing: 1.4px;
padding: 5px 8px;
background: var(--yellow); color: #0A0A0A;
border: var(--bd) solid #0A0A0A;
box-shadow: 3px 3px 0 #0A0A0A;
}
/* le fantôme décoratif de CRÉER occupait déjà ce coin : il descend. */
[data-s2] .s2-act:has(.s2-new) .gh { top: auto; bottom: 10px; }
/* 5 · UN ÉTAT VIDE NE SE POSE PAS EN HAUT D'UN DÉSERT.
Quand la colonne n'a plus qu'un seul bloc à montrer — « LE CLASSEMENT EST
VIERGE », « RIEN ICI POUR L'INSTANT » — il se centre dans la place qui reste
au lieu de se coller en haut avec la moitié basse de l'écran en papier nu. */
[data-s2] .s2 .s2-scroll > :last-child:has(> .card:only-child, > .s2-ink:only-child) {
margin-block: auto;
}
/* ==========================================================================
PORTÉ DE socle.mjs › CSS
========================================================================== */
/* ============================================================
ÉCRANS SAISON 2 — classes NOUVELLES (préfixe s2-). Elles POSENT les
composants : plein écran, trame, titres géants. Tout ce qui a un bord, une
ombre ou une couleur vient de proto.css.
============================================================ */
/* ⚠ POURQUOI `clip` ET PAS `hidden`. Edwin : « on peut glisser à gauche et à
droite, raison pour laquelle on a l'impression que l'ombre est coupée depuis
le début ». Mesuré sur le classement : 402 px de contenu pour 390 de large.
Les 12 px viennent des RÉSERVES D'OMBRE — `.s2-scroll` et `.s2-chips`
débordent volontairement de 6 px de chaque côté pour que l'ombre dure des
cartes ne soit pas rognée par leur propre `overflow`. C'est voulu, et ça ne
dépasse jamais du cadre visible.
Le problème n'était donc pas le débordement, c'était `overflow:hidden` : il
fabrique une ZONE DÉFILANTE. Au doigt, l'écran partait de 12 px sur le côté
et tout ce qui touche le bord se faisait trancher.
`overflow:clip` coupe exactement au même endroit mais ne crée AUCUNE zone
défilante : plus rien à faire glisser, et pas un pixel de rendu ne change. */
/* ⚠ `overflow-x` SEULEMENT. Le raccourci `overflow:clip` coupait AUSSI la
verticale : le podium de LA TOUR, plus haut que l'écran, devenait
impossible à faire défiler et ses boutons passaient hors cadre.
On bloque l'horizontale (c'était le but) et on laisse chaque écran
rendre la verticale quand son contenu dépasse. */
[data-s2] .s2 { position:absolute; inset:0; display:flex; flex-direction:column;
overflow-x:hidden; overflow-x:clip; overflow-y:hidden;
background:var(--paper);
background-image:radial-gradient(color-mix(in srgb,var(--ink) 9%,transparent) 1.5px, transparent 1.6px);
background-size:18px 18px; padding:18px 16px; gap:12px; }
[data-s2] .s2 .sp { flex:1; min-height:0; }
[data-s2] .s2 .ln { display:flex; align-items:center; gap:9px; }
[data-s2] .s2 .top { display:flex; align-items:center; justify-content:space-between; gap:9px; flex-shrink:0; }
[data-s2] .s2 .eyebrow { font-family:var(--font-m); font-weight:800; font-size:10px; letter-spacing:2.4px;
color:color-mix(in srgb,var(--ink) 55%,transparent); }
[data-s2] .s2 .h { font-family:var(--font-d); font-size:30px; line-height:.94; letter-spacing:.6px; text-transform:uppercase; }
[data-s2] .s2 .h.xl { font-size:42px; }
[data-s2] .s2 .stack { display:flex; flex-direction:column; gap:10px; min-width:0; }
[data-s2] .s2 .center { align-items:center; text-align:center; }
/* le numéro de saison, traité comme un objet : masse Anton + calque décalé */
[data-s2] .s2-num { position:relative; display:inline-block; font-family:var(--font-d); line-height:.8;
letter-spacing:-5px; font-size:104px; }
/* le calque décalé est posé AVANT dans le DOM (pas de z-index négatif : il
passerait derrière le fond de la carte et disparaîtrait). */
[data-s2] .s2-num .off { position:absolute; left:7px; top:7px; color:transparent; -webkit-text-stroke:3px var(--ink); }
[data-s2] .s2-num .fg { position:relative; }
/* la carte de saison — PLEINE LARGEUR, pas d'air perdu à gauche et à droite.
Le numéro tient la gauche, le nom et les dates la droite : deux fois moins
haute qu'en colonne, et le bloc remplit le cadre.
Pas de rotation : au-delà de ~260px de large, une carte inclinée devient un
trapèze (la leçon des cartes sur grand écran). */
[data-s2] .s2-card { align-self:stretch; }
[data-s2] .s2-card .bd { display:flex; align-items:center; gap:16px; padding:12px 14px;
background:var(--magenta); color:var(--paper); }
/* dans la carte, le numéro est PLEIN : le calque décalé mordait le nom et la date */
[data-s2] .s2-card .s2-num .off { display:none; }
[data-s2] .s2-card .tx { flex:1; min-width:0; }
[data-s2] .s2-card .nm { font-family:var(--font-d); font-size:38px; line-height:1; letter-spacing:1px;
color:var(--paper); -webkit-text-stroke:3px var(--ink); paint-order:stroke fill; }
[data-s2] .s2-card .dates { font-family:var(--font-m); font-weight:800; font-size:9.5px; letter-spacing:1.4px; margin-top:7px; }
[data-s2] .s2-card .s2-num { font-size:64px; flex:none; letter-spacing:-3px; }
/* ============================================================
SPLASH — même densité que celui de la saison 1 (rayons, confettis,
polaroïds, titre qui mange l'écran, barre jaune). Ce qui change : le
tampon de saison, les tuiles, la peau.
============================================================ */
[data-s2] .s2-sp { --sp-bg:#2D5BFF; --sp-i:#0A0A0A; --sp-w:#FFFEF7; --sp-y:#FFD600; --sp-m:#FF2E93;
--sp-r:#FF5252; --sp-c:#5BD8E5;
/* l'OMBRE a son propre token : noire sur le bleu, magenta sur le prune.
« jamais d'ombre noire sur fond sombre » — brandbook, règle d'or. */
--sp-sh:#0A0A0A; --sp-ray:rgba(255,255,255,.09);
position:absolute; inset:0; overflow:hidden; background:var(--sp-bg);
display:flex; flex-direction:column; align-items:center; padding:16px; }
html[data-skin="neon"][data-theme] [data-s2] .s2-sp { --sp-bg:#1C0F1A; --sp-m:#FF5CA8; --sp-c:#C271FF; --sp-sh:#FF5CA8;
--sp-ray:rgba(255,92,168,.13); }
/* ── LA NUIT (18 h → 6 h) : NOIR, PAS BLEU ──────────────────────────────────
`html.sp-night` est posé dès le par offline-assets.js. La règle
n'existait que pour l'ANCIEN splash (.splash-screen) : le nouveau restait
bleu vif à 22 h. Edwin : « quand il fait nuit, le splash ne doit pas être
bleu, ça doit être en noir, comme ce qu'on avait avant ».
L'ombre passe au magenta — une ombre noire sur du noir ne se voit pas. */
html.sp-night [data-s2] .s2-sp { --sp-bg:#0B0B0E; --sp-sh:#FF2E93;
--sp-ray:rgba(255,255,255,.055); }
/* le tampon EST magenta : son ombre ne peut pas l'être aussi. Jaune, comme le
sticker de marque du brandbook sur fond sombre. */
html[data-skin="neon"][data-theme] [data-s2] .s2-sp .stamp { box-shadow:5px 5px 0 var(--sp-y); }
/* ⚠ UN CALQUE QUI TOURNE DOIT ÊTRE UN CARRÉ, PAS UN RECTANGLE.
Avec inset:-40%, les bords droits du rectangle rentraient dans le cadre en
tournant : on voyait les rayons « coupés ». Ici un carré de 1100px centré sur
le point de fuite (44% de la hauteur) : sa DIAGONALE couvre les 390×844 dans
toutes les positions — le coin le plus loin est à ~511px, il en reste 550. */
[data-s2] .s2-sp .rays { position:absolute; top:44%; left:50%; width:1100px; height:1100px;
margin:-550px 0 0 -550px; background:
repeating-conic-gradient(from 0deg, var(--sp-ray) 0 4deg, transparent 4deg 9deg);
animation:s2spin 110s linear infinite; }
@keyframes s2spin{ to{ transform:rotate(360deg); } }
[data-s2] .s2-sp > *:not(.rays):not(.confs):not(.polas) { position:relative; }
[data-s2] .s2-sp .sp { flex:1; min-height:0; }
[data-s2] .s2-sp .chips { width:100%; display:flex; justify-content:space-between; }
[data-s2] .s2-sp .chip { font-family:var(--font-d); font-size:13px; letter-spacing:1px; padding:6px 12px;
border:var(--bd) solid var(--sp-i); background:var(--sp-w); box-shadow:4px 4px 0 var(--sp-sh);
display:inline-flex; align-items:center; gap:6px; color:var(--sp-i); }
[data-s2] .s2-sp .chip.y { background:var(--sp-y); }
/* confettis — les mêmes formes que le splash d'origine */
[data-s2] .s2-sp .confs { position:absolute; inset:0; pointer-events:none; }
[data-s2] .s2-sp .confs i { position:absolute; display:block; }
[data-s2] .s2-sp .confs .ring { border-radius:50%; }
[data-s2] .s2-sp .confs .tri { width:0; height:0; border-style:solid; }
[data-s2] .s2-sp .confs .plus::before,
[data-s2] .s2-sp .confs .plus::after { content:''; position:absolute; inset:0;
background:currentColor; }
[data-s2] .s2-sp .confs .plus::before { clip-path:polygon(40% 0,60% 0,60% 100%,40% 100%); }
[data-s2] .s2-sp .confs .plus::after { clip-path:polygon(0 40%,100% 40%,100% 60%,0 60%); }
[data-s2] .s2-sp .confs .star { clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
/* les polaroïds d'emoji qui flottent */
[data-s2] .s2-sp .polas img { position:absolute; width:42px; height:42px; padding:6px; background:var(--sp-w); opacity:.92;
border:var(--bd) solid var(--sp-i); box-shadow:4px 4px 0 var(--sp-sh); box-sizing:content-box;
animation:s2f 5s ease-in-out infinite; }
[data-s2] .s2-sp .polas img:nth-child(2n) { animation-duration:6.5s; animation-direction:reverse; }
/* le nom du jeu mange l'écran */
[data-s2] .s2-sp .title { font-family:var(--font-d); color:var(--sp-w); text-align:center; line-height:.82;
text-transform:uppercase; text-shadow:6px 6px 0 var(--sp-i); }
[data-s2] .s2-sp .title .l1 { display:block; font-size:84px; letter-spacing:-1.5px; transform:rotate(-2deg); }
[data-s2] .s2-sp .title .l2 { display:block; font-size:74px; letter-spacing:.5px; transform:rotate(2deg) translateY(-8px); }
/* EXCEPTION ASSUMÉE à la grammaire d'ombre : le titre n'est pas un bloc posé sur
un aplat, c'est du texte posé sur le FOND de l'écran. Deux valeurs claires
empilées (crème + jaune) bavaient — on sépare : HOMIES en crème ombré magenta,
PARTY en JAUNE PLEIN ombré noir. Le titre redevient la seule masse de l'écran. */
/* ESSAI DEMANDÉ PAR EDWIN (26/09) : ombre NOIRE sur le titre. Le jaune sur le
crème lui faisait mal aux yeux. C'est une entorse à « jamais d'ombre noire sur
fond sombre » — le fond ici est l'encre de l'écran, pas un bloc ; à trancher à l'œil. */
html[data-skin="neon"][data-theme] [data-s2] .s2-sp .title .l1 { color:var(--sp-w); text-shadow:7px 7px 0 #0A0A0A; }
html[data-skin="neon"][data-theme] [data-s2] .s2-sp .title .l2 { color:var(--sp-y); text-shadow:7px 7px 0 #0A0A0A; }
[data-s2] .s2-sp .stamp { font-family:var(--font-d); font-size:16px; letter-spacing:2px; padding:8px 16px;
border:var(--bd-strong) solid var(--sp-i); background:var(--sp-m); color:var(--sp-w);
box-shadow:5px 5px 0 var(--sp-sh); transform:rotate(-2deg); display:inline-flex; align-items:center; gap:9px; }
html[data-skin="neon"][data-theme] [data-s2] .s2-sp .stamp { color:#0A0A0A; }
/* le point qui clignote de LIVE NOW — repris du splash d'origine
(public-v1/css/brutal.css › .sp-live .dot). Le tampon dit que le jeu
tourne ; il ne porte PAS le nom de la saison. */
[data-s2] .s2-sp .stamp .dot { width:10px; height:10px; border-radius:50%;
background:currentColor; flex:none; animation:sp-blink 1s steps(2) infinite; }
@keyframes sp-blink { 50% { opacity:.25; } }
@media (prefers-reduced-motion: reduce) { [data-s2] .s2-sp .stamp .dot { animation:none; } }
[data-s2] .s2-sp .tiles { display:flex; gap:11px; }
[data-s2] .s2-sp .tiles i { width:72px; height:72px; border:var(--bd-strong) solid var(--sp-i);
box-shadow:5px 5px 0 var(--sp-sh); display:flex; align-items:center; justify-content:center; }
[data-s2] .s2-sp .tiles i img { width:42px; height:42px; }
[data-s2] .s2-sp .tiles i:nth-child(1) { background:var(--sp-w); transform:rotate(-4deg); }
[data-s2] .s2-sp .tiles i:nth-child(2) { background:var(--sp-y); }
[data-s2] .s2-sp .tiles i:nth-child(3) { background:var(--sp-r); transform:rotate(4deg); }
[data-s2] .s2-sp .bar { width:100%; height:22px; border:var(--bd) solid var(--sp-i); background:var(--sp-w);
box-shadow:4px 4px 0 var(--sp-sh); }
[data-s2] .s2-sp .bar i { display:block; height:100%; background:var(--sp-y); border-right:var(--bd) solid var(--sp-i); }
[data-s2] .s2-sp .chg { font-family:var(--font-d); font-size:14px; letter-spacing:2px; padding:7px 15px;
border:var(--bd) solid var(--sp-i); background:var(--sp-w); box-shadow:4px 4px 0 var(--sp-sh); color:var(--sp-i); }
/* les emojis animés qui gravitent — la signature de la marque */
[data-s2] .s2-floats { position:absolute; inset:0; pointer-events:none; z-index:0; }
[data-s2] .s2-floats img { position:absolute; width:38px; height:38px; animation:s2f 5s ease-in-out infinite; }
[data-s2] .s2-floats img:nth-child(2n) { animation-duration:6.5s; animation-direction:reverse; }
@keyframes s2f{ 50%{ transform:translateY(-14px) rotate(8deg); } }
[data-s2] .s2 > *:not(.s2-floats) { position:relative; z-index:1; }
/* le récap est en position:fixed dans l'app (il couvre le vrai écran) :
dans l'atelier on le ramène dans son téléphone. */
[data-s2] #wrapped { position:absolute; }
/* le bilan : un chiffre qui prend toute la place */
[data-s2] .s2-rank { display:flex; align-items:center; gap:14px; }
[data-s2] .s2-rank .n { font-family:var(--font-d); font-size:72px; line-height:.82; letter-spacing:-2px; }
[data-s2] .s2-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
[data-s2] .s2-grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
/* bande défilante */
[data-s2] .s2-band { overflow:hidden; border-block:var(--bd) solid var(--ink); background:var(--yellow); flex-shrink:0;
margin:0 -16px; }
[data-s2] .s2-band .run { display:flex; white-space:nowrap; font-family:var(--font-d); font-size:13px; letter-spacing:3px;
padding:5px 0; animation:s2run 14s linear infinite; color:var(--ink); }
[data-s2] .s2-band .run span { padding-right:26px; }
@keyframes s2run{ to{ transform:translateX(-50%); } }
/* la grille d'avatars de la création de profil */
[data-s2] .s2-avgrid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; border:var(--bd) solid var(--ink);
box-shadow:var(--sh) var(--sh) 0 var(--ink); background:var(--paper); padding:9px; }
[data-s2] .s2-avgrid .avatar { width:100%; height:auto; aspect-ratio:1; box-shadow:none; border-width:var(--bd); }
[data-s2] .s2-avgrid .sel { outline:4px solid var(--magenta); outline-offset:-4px; }
/* 8 pastilles dans 248 px : 8×24 + 7×6 = 234. Ni retour à la ligne, ni coupe.
SEULE ENTORSE ASSUMÉE à la règle d'ombre : ce sont des blocs clairs, mais leur
ombre reste crème. Une frange magenta fausserait la lecture d'un échantillon de
couleur, et serait invisible sur la pastille magenta. */
[data-s2] .s2-sw { display:flex; gap:6px; min-width:0; }
[data-s2] .s2-sw i { width:24px; height:24px; flex:0 1 24px; min-width:0;
border:var(--bd) solid var(--ink); box-shadow:2px 2px 0 var(--ink); display:block; }
[data-s2] .s2-sw i.sel { box-shadow:0 0 0 2px var(--ink), 3px 3px 0 var(--ink); }
/* ============================================================
LE STICKER HOMIES — brandbook §02-A, repris à la lettre :
bloc magenta, bord encre 4px, Anton capitales letter-spacing 2.5px en
couleur papier, ombre en pseudo-élément décalée de 5px, éclair ⚡ animé à
gauche à hauteur de casse. Sur fond sombre l'ombre passe en JAUNE.
============================================================ */
[data-s2] .s2-logo { position:relative; display:inline-block; }
[data-s2] .s2-logo::before { content:''; position:absolute; top:5px; left:5px; right:-5px; bottom:-5px; background:var(--ink); }
[data-s2] .s2-logo .body { position:relative; padding:6px 12px; border:var(--bd-strong) solid var(--ink);
background:var(--magenta); display:flex; align-items:center; gap:9px; }
[data-s2] .s2-logo .body span { font-family:var(--font-d); font-size:16px; letter-spacing:1.5px; color:var(--paper); }
[data-s2] .s2-logo .body img { width:16px; height:16px; }
html[data-skin="neon"][data-theme] [data-s2] .s2-logo::before { background:#FFD600; }
/* les deux portes du premier lancement */
[data-s2] .s2-door .bd { display:flex; align-items:center; gap:13px; padding:15px 14px; }
[data-s2] .s2-door .t { font-family:var(--font-d); font-size:21px; letter-spacing:.8px; line-height:1; }
[data-s2] .s2-door .g { font-family:var(--font-m); font-weight:800; font-size:10px; letter-spacing:1.2px; margin-top:6px;
display:inline-flex; align-items:center; gap:6px; }
/* le logo Google, le vrai, dans un CARRÉ — rayon 0, c'est la règle de la maison.
(La pastille ronde de app.css .ob-gmini est un corps étranger dans cette DA.) */
[data-s2] .s2-door .g i { width:22px; height:22px; flex-shrink:0; font-style:normal;
background:#FFFFFF; border:var(--bd) solid #0A0A0A; display:flex;
align-items:center; justify-content:center; padding:2px; }
[data-s2] .s2-door .g i svg { width:100%; height:100%; display:block; }
/* ============================================================
NÉON — LES DEUX RÈGLES, ET RIEN D'AUTRE
① L'OMBRE EST MAGENTA. Partout, quel que soit le bloc.
Décision d'Edwin du 26/09, après les trois essais côte à côte :
crème = halo blanc qui crie plus fort que le contenu ; noir = invisible
(1,25 de contraste sur le prune) ; magenta = on voit le relief.
Comme proto.css écrit ses ombres en var(--ink) en dur et que --ink passe
en crème ici, chaque composant est repris AVEC SA TAILLE D'ORIGINE.
② LES APLATS ACCENT GARDENT L'ENCRE NOIRE (règle s28). Sur un fond jaune,
cyan, vert ou magenta, le texte et la bordure restent noirs ; seules les
surfaces d'ENCRE passent en crème.
============================================================ */
/* ① les ombres — pseudo-éléments (taille portée par --sh / --sh-cta) */
html[data-skin="neon"][data-theme] [data-s2] :is(.card, .listcard, .cta, .sticker, .type-pill, .brand, .s2-logo, .qcard)::before {
background:#FF5CA8; }
/* ⚠ SAUF LES BLOCS QUI SONT EUX-MÊMES MAGENTA : leur ombre passe en JAUNE.
UN FOND ET SON OMBRE N'ONT JAMAIS LA MÊME COULEUR. */
html[data-skin="neon"][data-theme] [data-s2] :is(.cta:not(.go), .s2-card, .s2-logo, .sticker.magenta, .brand, .s2-act.mg)::before { background:#FFD600; }
html[data-skin="neon"][data-theme] [data-s2] :is(.rank-chip:not(.gold), .level-badge) { box-shadow:2px 2px 0 #FFD600; }
/* fond magenta -> jaune */
html[data-skin="neon"][data-theme] [data-s2] .rank-chip.gold { box-shadow:2px 2px 0 #FF5CA8; }
/* fond jaune -> magenta */
/* ① les ombres — box-shadow, chacune à sa taille de proto.css */
html[data-skin="neon"][data-theme] [data-s2] :is(.btn, .s2-avgrid) { box-shadow:var(--sh) var(--sh) 0 #FF5CA8; }
html[data-skin="neon"][data-theme] [data-s2] :is(.btn.sm, .pill, .emoji-box, .iconbtn, .statcard, .badge .ic, .level-badge,
.xpbar, .seg, .codecells .cell) { box-shadow:3px 3px 0 #FF5CA8; }
html[data-skin="neon"][data-theme] [data-s2] :is(.avatar, .input) { box-shadow:4px 4px 0 #FF5CA8; }
html[data-skin="neon"][data-theme] [data-s2] :is(.medal, .stepper .sbtn) { box-shadow:2px 2px 0 #FF5CA8; }
/* les pastilles du nuancier sont de petits aplats clairs posés sur le prune :
ombre magenta comme tous les aplats clairs — sauf celle qui EST magenta. */
html[data-skin="neon"][data-theme] [data-s2] .s2-sw i { box-shadow:2px 2px 0 #FF5CA8; }
html[data-skin="neon"][data-theme] [data-s2] .s2-sw i.mag { box-shadow:2px 2px 0 #FFD600; }
html[data-skin="neon"][data-theme] [data-s2] .s2-avgrid .avatar { box-shadow:none; }
html[data-skin="neon"][data-theme] [data-s2] .s2-sp { --sp-sh:#FF5CA8; }
html[data-skin="neon"][data-theme] [data-s2] .s2-sp .stamp { box-shadow:5px 5px 0 #FFD600; }
/* ② les aplats accent : encre et bordure NOIRES */
html[data-skin="neon"][data-theme] [data-s2] :is(.sticker .bd, .btn.yellow, .btn.green, .btn.cyan, .type-pill .bd,
.pill.yellow, .pill.green, .pill.cyan, .cta .bd, .listcard.sel .bd, .listcard.on .bd,
.medal, .rank-chip, .badge .ic, .s2-band, .s2-band .run, .statcard.a, .seg .o.on,
.stepper .sbtn, .s2-card .bd, .s2-door .bd, .s2-mix .bd,
.s2-logo .body) { color:#0A0A0A; border-color:#0A0A0A; }
html[data-skin="neon"][data-theme] [data-s2] .s2-door .bd * { color:#0A0A0A; }
html[data-skin="neon"][data-theme] [data-s2] :is(.s2-logo .body span, .cta .bd) { color:#0A0A0A; }
/* posé SUR un aplat accent, ce qui est « papier » redevient crème : sinon la
boîte à emoji fait un trou sombre au milieu du cyan. */
html[data-skin="neon"][data-theme] [data-s2] :is(.s2-door, .s2-mix, .s2-card, .s2-act, .statcard.a, .statcard.b, .statcard.c,
.listcard.sel, .listcard.on) :is(.emoji-box, .btn, .g i) {
background:#FFFEF7; color:#0A0A0A; border-color:#0A0A0A; box-shadow:3px 3px 0 #0A0A0A; }
/* la coche garde SON vert et ses traits : seule son ombre passe au noir, parce
qu'elle est posée sur l'aplat jaune de la ligne cochée. */
html[data-skin="neon"][data-theme] [data-s2] :is(.listcard.sel, .listcard.on, .s2-themes .act) .s2-tick { box-shadow:3px 3px 0 #0A0A0A; border-color:#0A0A0A; }
/* (celles-là sont posées sur un aplat CLAIR : leur ombre noire s'y voit.) */
/* PAS DE FILTRE SUR LES AVATARS. Essayé le 26/09 pour calmer les aplats saturés
sur le sombre : le brandbook exclut les filtres, et le même joueur n'avait pas
la même couleur d'une peau à l'autre. Retiré. */
/* titres détourés : le contour suit l'encre noire, pas le thème */
html[data-skin="neon"][data-theme] [data-s2] .s2-card .nm { color:#F6EEE3; -webkit-text-stroke-color:#0A0A0A; }
html[data-skin="neon"][data-theme] [data-s2] :is(.s2-num .off, .s2-card .s2-num .off) { -webkit-text-stroke-color:#0A0A0A; }
/* la carte joueur en aperçu — ce que les autres verront */
[data-s2] .s2-you .bd { display:flex; align-items:center; gap:12px; padding:12px; }
[data-s2] .s2-you .nk { font-family:var(--font-d); font-size:20px; letter-spacing:.5px; line-height:1; }
/* l'appel du récap — l'écran suivant, annoncé comme un objet */
[data-s2] .s2-mix .bd { display:flex; align-items:center; gap:12px; padding:13px; background:var(--yellow); }
[data-s2] .s2-mix .bd > div { min-width:0; }
[data-s2] .s2-mix .t { font-family:var(--font-d); font-size:19px; letter-spacing:.6px; line-height:1;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
[data-s2] .s2-mix .d { font-family:var(--font-m); font-weight:700; font-size:10px; opacity:.65; margin-top:4px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* ============================================================
§ 2 — LES 5 ONGLETS DE LA BARRE DU BAS
Classes de MISE EN PLACE uniquement. Les bords, les ombres et les couleurs
continuent de venir de proto.css.
============================================================ */
/* la barre du bas sort du padding de l'écran et se colle au bord */
[data-s2] .s2-nav { margin:0 -16px -18px; }
[data-s2] .s2-nav .it { opacity:.72; }
[data-s2] .s2-nav .it.on { opacity:1; }
html[data-skin="neon"][data-theme] [data-s2] .bottomnav .it.on .lbl { color:#0A0A0A; border-color:#0A0A0A; }
/* la zone qui défile. Les 6 px rendus à droite laissent passer l'ombre des
cartes (::before déborde de 5 px) : sans eux, overflow-x la rognait. */
/* ⚠ `clip` et pas `hidden` : `hidden` cache le débordement mais fabrique
quand même une zone défilante — l'écran se laissait pousser au doigt. */
[data-s2] .s2-scroll { flex:1; min-height:0; overflow-y:auto; overflow-x:clip;
display:flex; flex-direction:column; gap:8px; padding:0 6px 6px; margin:0 -6px;
scrollbar-width:none; }
[data-s2] .s2-scroll::-webkit-scrollbar { display:none; }
/* la colonne a déjà son gap : la marge basse des cartes de liste ferait double */
[data-s2] .s2-scroll > .listcard { margin-bottom:0; }
/* séparateur de section : un trait, un mot, un trait */
/* proto serre .listcard .name à line-height 1.1 : combiné à overflow:hidden,
l'accent des CAPITALES (le É de NÉON, de DÉMASQUÉE) était rasé. On desserre —
la hauteur des lignes ne bouge pas, c'est l'emoji-box qui la donne. */
[data-s2] .s2 .listcard .name { line-height:1.36; }
[data-s2] .s2-div { display:flex; align-items:center; gap:9px; flex-shrink:0; }
[data-s2] .s2-div i { flex:1; height:3px; background:var(--ink); }
[data-s2] .s2-div span { font-family:var(--font-d); font-size:12px; letter-spacing:2.2px; flex-shrink:0; }
/* ---------- ACCUEIL ----------
Composition reprise de la maquette de référence s28 §1 : un HÉROS de saison à
artwork, CRÉER/REJOINDRE en deux grandes cartes hautes, puis des blocs de
FORMES DIFFÉRENTES (progression, bandeau d'encre, carte à avatars, section à
filet). Seul le CONTENU est le nôtre : ni RANKED, ni BRAQUAGE, ni BLITZ.
------------------------------------------------------------------ */
/* la barre du haut : la marque, la cloche, l'avatar. Rien d'autre — pas de
carte joueur qui mange le premier écran. */
[data-s2] .s2-bell { position:relative; }
[data-s2] .s2-bell .nemoji { width:20px; height:20px; }
[data-s2] .s2-bell .dot { position:absolute; top:-5px; right:-5px; width:11px; height:11px;
background:var(--red); border:2px solid #0A0A0A; }
/* LE HÉROS DE SAISON — un bloc à ARTWORK, pas un aplat : trame de points et
hachures diagonales, toutes deux tracées en MOTIF (jamais un dégradé de
surface, le brandbook les interdit). */
/* ⚠ « > » obligatoire : le sticker du countdown porte lui aussi un .bd —
en descendant, il héritait la hauteur de 170 px du héros. */
[data-s2] .s2-saison > .bd { position:relative; overflow:hidden; height:150px; background:var(--magenta); }
[data-s2] .s2-saison .art { position:absolute; inset:0;
background-image:
radial-gradient(rgba(10,10,10,.30) 1.7px, transparent 1.8px),
repeating-linear-gradient(-30deg, rgba(10,10,10,.20) 0 4px, transparent 4px 20px);
background-size:10px 10px, auto; }
[data-s2] .s2-saison .cd { position:absolute; top:11px; right:11px; z-index:2; }
[data-s2] .s2-saison .in { position:absolute; left:14px; right:14px; bottom:13px; z-index:2; }
[data-s2] .s2-saison .st { font-family:var(--font-m); font-weight:800; font-size:10.5px; letter-spacing:2.8px;
color:var(--paper); }
[data-s2] .s2-saison .nm { display:flex; align-items:center; gap:11px; margin-top:2px;
font-family:var(--font-d); font-size:50px; line-height:.94; letter-spacing:1px;
color:var(--paper); text-shadow:5px 5px 0 #0A0A0A; }
[data-s2] .s2-saison .nm img { width:36px; height:36px; filter:drop-shadow(3px 3px 0 #0A0A0A); }
/* le tampon d'encre : un aplat, sans ombre — donc jamais de noir sur du noir */
[data-s2] .s2-saison .tp { display:inline-block; margin-top:9px; font-family:var(--font-d); font-size:11.5px;
letter-spacing:1.8px; background:#0A0A0A; color:var(--yellow); padding:5px 10px; }
/* en NÉON, le héros n'est pas le light recolorié : l'artwork devient une nuit
traversée de néons magenta, et le tampon passe en jaune pour rester lisible. */
html[data-skin="neon"][data-theme] [data-s2] .s2-saison > .bd { background:#1C0F1A; }
html[data-skin="neon"][data-theme] [data-s2] .s2-saison .art { background-image:
radial-gradient(rgba(255,92,168,.34) 1.7px, transparent 1.8px),
repeating-linear-gradient(-30deg, rgba(255,92,168,.17) 0 4px, transparent 4px 20px); }
html[data-skin="neon"][data-theme] [data-s2] .s2-saison .st { color:#FFFEF7; }
html[data-skin="neon"][data-theme] [data-s2] .s2-saison .nm { color:#FFFEF7; text-shadow:5px 5px 0 #FF5CA8; }
html[data-skin="neon"][data-theme] [data-s2] .s2-saison .nm img { filter:drop-shadow(3px 3px 0 #FF5CA8); }
html[data-skin="neon"][data-theme] [data-s2] .s2-saison .tp { background:#FFD600; color:#0A0A0A; }
/* le sticker du compte à rebours est JAUNE et posé sur le héros : son ombre ne
peut être ni jaune ni la couleur du fond. En LIGHT le héros est magenta, donc
ombre noire ; en NÉON le héros est une nuit, donc l'ombre magenta par défaut —
une ombre noire s'y serait dissoute (noir sur noir). */
html:not([data-theme="abime"]):not([data-skin]) [data-s2] .s2-saison .cd .sticker::before { background:#0A0A0A; }
/* ============================================================
LE HÉROS DU JOUEUR — même grammaire que le héros de saison (artwork, sticker
posé, gros titre, tampon), appliquée à la carte du joueur : c'est LUI qui
ouvre l'écran, pas la saison.
============================================================ */
[data-s2] .s2-moi > .bd { position:relative; overflow:hidden; background:var(--cyan); padding:13px; }
[data-s2] .s2-moi .art { position:absolute; inset:0;
background-image:
radial-gradient(rgba(10,10,10,.26) 1.7px, transparent 1.8px),
repeating-linear-gradient(-30deg, rgba(10,10,10,.16) 0 4px, transparent 4px 20px);
background-size:10px 10px, auto; }
[data-s2] .s2-moi .in { position:relative; z-index:2; display:flex; gap:13px; align-items:flex-start; }
[data-s2] .s2-moi .av { flex:none; width:78px; height:78px; border:var(--bd-strong) solid var(--ink);
box-shadow:var(--sh) var(--sh) 0 var(--ink); transform:rotate(-3deg); background:var(--paper); }
[data-s2] .s2-moi .av img { width:100%; height:100%; display:block; }
[data-s2] .s2-moi .tx { flex:1; min-width:0; padding-right:74px; }
/* la place du sticker du djai */
[data-s2] .s2-moi .hello { font-family:var(--font-m); font-weight:800; font-size:9.5px; letter-spacing:2.4px;
color:color-mix(in srgb,var(--ink) 65%,transparent); }
[data-s2] .s2-moi .nk { font-family:var(--font-d); font-size:40px; line-height:.92; letter-spacing:.5px;
color:var(--paper); text-shadow:4px 4px 0 var(--ink);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
[data-s2] .s2-moi .tp { display:inline-block; margin-top:7px; font-family:var(--font-d); font-size:11px;
letter-spacing:1.6px; background:#0A0A0A; color:var(--yellow); padding:4px 9px; }
[data-s2] .s2-moi .cd { position:absolute; top:11px; right:11px; z-index:3; }
[data-s2] .s2-moi .bas { position:relative; z-index:2; display:flex; align-items:center; gap:8px; margin-top:11px; }
[data-s2] .s2-moi .bas .xpbar { flex:1; }
/* en NÉON, le héros du joueur devient une nuit traversée de néons — pas le
light recolorié. Son artwork reprend le magenta de la saison. */
html[data-skin="neon"][data-theme] [data-s2] .s2-moi > .bd { background:#1C0F1A; }
html[data-skin="neon"][data-theme] [data-s2] .s2-moi .art { background-image:
radial-gradient(rgba(255,92,168,.32) 1.7px, transparent 1.8px),
repeating-linear-gradient(-30deg, rgba(255,92,168,.16) 0 4px, transparent 4px 20px); }
html[data-skin="neon"][data-theme] [data-s2] .s2-moi .hello { color:color-mix(in srgb,#FFFEF7 60%,transparent); }
html[data-skin="neon"][data-theme] [data-s2] .s2-moi .nk { color:#FFFEF7; text-shadow:4px 4px 0 #FF5CA8; }
html[data-skin="neon"][data-theme] [data-s2] .s2-moi .tp { background:#FFD600; color:#0A0A0A; }
html[data-skin="neon"][data-theme] [data-s2] .s2-moi .av { border-color:#0A0A0A; box-shadow:var(--sh) var(--sh) 0 #FF5CA8; }
/* le sticker du djai est JAUNE et posé sur le héros : ombre noire sur le cyan
du light, magenta sur la nuit du NÉON. */
html:not([data-theme="abime"]):not([data-skin]) [data-s2] .s2-moi .cd .sticker::before { background:#0A0A0A; }
/* la saison redescend en BANDEAU COMPACT : elle n'ouvre plus l'écran */
[data-s2] .s2-sline .bd { display:flex; align-items:center; gap:10px; padding:9px 11px;
background:var(--magenta); color:var(--paper); }
[data-s2] .s2-sline .n { font-family:var(--font-d); font-size:26px; line-height:1; letter-spacing:-1px; }
[data-s2] .s2-sline .t { flex:1; min-width:0; font-family:var(--font-d); font-size:16px; letter-spacing:1px; }
[data-s2] .s2-sline .d { font-family:var(--font-m); font-weight:800; font-size:9px; letter-spacing:1.2px; opacity:.85; }
/* le sticker jaune est posé sur l'aplat MAGENTA du bandeau : ombre noire dans
les deux peaux — le magenta s'y confondrait avec le fond. */
[data-s2] .s2-sline .sticker::before,
html[data-skin="neon"][data-theme] [data-s2] .s2-sline .sticker::before { background:#0A0A0A; }
/* la carte de progression : le niveau, l'XP, la série, le djai */
[data-s2] .s2-prog .bd { display:flex; flex-direction:column; gap:9px; padding:11px 12px; }
[data-s2] .s2-prog .pills { display:flex; gap:7px; }
[data-s2] .s2-prog .pills .pill { flex:1; justify-content:center; }
/* le bandeau d'ENCRE du rendez-vous du jour : un bloc sombre — donc une ombre
MAGENTA. Jamais de noir sur du noir. */
[data-s2] .s2-ink { display:flex; align-items:center; gap:9px; flex-shrink:0; padding:11px 12px;
background:#0A0A0A; border:var(--bd) solid #0A0A0A; box-shadow:5px 5px 0 var(--magenta); }
/* ⚠ UN BANDEAU D'ENCRE N'A PAS SA PLACE SUR UN APLAT CLAIR.
Mesuré, toutes les issues sont bouchées : une ombre claire s'y dissout
(magenta sur violet 1,33 · sur orange 1,70 · sur rouge 1,09 ; jaune sur vert
1,12), et une ombre noire prend la couleur du bloc lui-même — l'interdit.
Donc sur ces écrans le bandeau devient un bloc CRÈME, encre et ombre NOIRES,
comme tout ce qui se pose sur un aplat. */
[data-s2] :is(.s2-fb.rate, .s2-cg, .s2-closed, .s2-deal) .s2-ink {
background:#FFFEF7; border-color:#0A0A0A; box-shadow:5px 5px 0 #0A0A0A; }
[data-s2] :is(.s2-fb.rate, .s2-cg, .s2-closed, .s2-deal) .s2-ink .z { color:#0A0A0A; }
[data-s2] :is(.s2-fb.rate, .s2-cg, .s2-closed, .s2-deal) .s2-ink .x { color:rgba(10,10,10,.62); }
/* …mais en NÉON ces mêmes aplats deviennent très sombres (le rouge tombe à
#7A1B2E, le violet et le vert virent au noir) : l'ombre noire y disparaît à
son tour. Le bloc reste crème, seule l'ombre suit la peau. */
html[data-skin="neon"][data-theme] [data-s2] :is(.s2-fb.rate, .s2-cg, .s2-closed, .s2-deal) :is(.s2-ink, .s2-tbar) {
box-shadow:5px 5px 0 #FF5CA8; }
/* même cas, sur un écran qui n'était pas dans la liste : le bloc de progression
du verdict raté portait du violet sur du rouge (1,44). Il est lui-même NOIR,
donc ni noir (sa couleur) ni une teinte voisine du rouge : crème, qui tranche
des deux côtés (19,58 contre le bloc, 3,16 sur le rouge clair, 4,7 sur le sombre). */
[data-s2] .s2-fb.rate .s2-tpg,
html[data-skin="neon"][data-theme] [data-s2] .s2-fb.rate .s2-tpg { box-shadow:5px 5px 0 #F6EEE3; }
[data-s2] .s2-ink .nemoji { width:21px; height:21px; flex-shrink:0; }
[data-s2] .s2-ink .z { font-family:var(--font-d); font-size:15px; letter-spacing:1px; color:var(--yellow);
white-space:nowrap; }
[data-s2] .s2-ink .x { margin-left:auto; text-align:right; font-family:var(--font-m); font-weight:800;
font-size:8.5px; letter-spacing:.8px; line-height:1.35; color:#CFC3CE; }
/* la carte à avatars : qui est là, tout de suite */
[data-s2] .s2-duo .bd { display:flex; align-items:center; gap:11px; padding:10px 12px; }
[data-s2] .s2-duo .info { flex:1; min-width:0; }
[data-s2] .s2-duo .t { font-family:var(--font-d); font-size:15.5px; letter-spacing:.4px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
[data-s2] .s2-duo .d { margin-top:3px; font-family:var(--font-m); font-weight:700; font-size:9.5px;
letter-spacing:.5px; color:color-mix(in srgb,var(--ink) 60%,transparent);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* empilés, ils se chevauchent : leur ombre ferait une bouillie, ils n'en ont pas */
[data-s2] .s2-avs { display:flex; flex-shrink:0; }
[data-s2] .s2-avs .avatar { box-shadow:none; }
[data-s2] .s2-avs .avatar + .avatar { margin-left:-13px; transform:rotate(4deg); }
html[data-skin="neon"][data-theme] [data-s2] .s2-avs .avatar { box-shadow:none; }
/* la section à filet : un mot, un trait, un lien */
[data-s2] .s2-head { display:flex; align-items:center; gap:10px; flex-shrink:0; padding-top:2px; }
[data-s2] .s2-head .t { flex-shrink:0; font-family:var(--font-d); font-size:17px; letter-spacing:1.4px; }
[data-s2] .s2-head i { flex:1; height:3px; background:var(--ink); }
[data-s2] .s2-head a { flex-shrink:0; font-family:var(--font-d); font-size:12px; letter-spacing:1.2px;
color:var(--magenta); }
/* la dernière partie : le rang en pastille penchée, le score à droite */
[data-s2] .s2-hot .pos { flex-shrink:0; font-family:var(--font-d); font-size:16px; padding:5px 8px;
background:var(--yellow); color:#0A0A0A; border:2.5px solid var(--ink);
box-shadow:2px 2px 0 var(--ink); transform:rotate(-3deg); }
[data-s2] .s2-hot .pts { flex-shrink:0; font-family:var(--font-d); font-size:15px; color:var(--magenta); }
/* aplat jaune sur fond sombre : bordure noire, ombre magenta */
html[data-skin="neon"][data-theme] [data-s2] .s2-hot .pos { border-color:#0A0A0A; box-shadow:2px 2px 0 #FF5CA8; }
/* la carte du joueur : avatar + pseudo + rang, puis ses trois chiffres */
[data-s2] .s2-pc .bd { padding:11px; display:flex; flex-direction:column; gap:10px; }
[data-s2] .s2-pc .hd { display:flex; align-items:center; gap:11px; min-width:0; }
[data-s2] .s2-pc .hi { font-family:var(--font-m); font-weight:800; font-size:9.5px; letter-spacing:1.8px;
color:color-mix(in srgb,var(--ink) 55%,transparent); }
[data-s2] .s2-pc .nm { font-family:var(--font-d); font-size:26px; line-height:1; letter-spacing:.5px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:4px 0 7px; }
/* les deux grandes portes : CRÉER et REJOINDRE */
[data-s2] .s2-act .bd { position:relative; overflow:hidden; height:148px; padding:13px 12px 12px;
display:flex; flex-direction:column; align-items:flex-start; }
[data-s2] .s2-act .gh { position:absolute; right:10px; top:10px; width:48px; height:48px; opacity:.16; }
/* (tronquée par le bord, elle se lisait comme un défaut de rendu, pas comme un motif) */
/* CRÉER est magenta comme dans la maquette de référence : sur un aplat magenta,
l'encre est le papier (convention de .s2-card), et en NÉON elle repasse noire. */
[data-s2] .s2-act.mg .bd { color:var(--paper); }
/* line-height 1 + overflow:hidden rasait l'accent du É de CRÉER */
[data-s2] .s2-act .t { display:block; font-family:var(--font-d); font-size:26px; line-height:1.2; letter-spacing:.5px;
max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
[data-s2] .s2-act .s { display:block; font-family:var(--font-m); font-weight:800; font-size:9px; letter-spacing:1.2px;
margin-top:5px; opacity:.7; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
[data-s2] .s2-act .lb { display:block; min-width:0; max-width:100%; }
[data-s2] .s2-act .sp { flex:1; }
/* la carte de saison, version bandeau : deux fois moins haute */
[data-s2] .s2-card.sm .bd { padding:10px 12px; gap:13px; }
[data-s2] .s2-card.sm .s2-num { font-size:46px; letter-spacing:-2px; }
[data-s2] .s2-card.sm .nm { font-size:26px; -webkit-text-stroke-width:2.5px; }
[data-s2] .s2-card.sm .dates { font-size:8.5px; margin-top:5px; }
/* posée sur le magenta, la pill redevient un petit aplat clair à encre noire */
[data-s2] .s2-card .pill { color:#0A0A0A; }
/* ---------- DÉFIS ---------- */
/* le compteur du haut : un chiffre qui prend la place */
[data-s2] .s2-hero .bd { position:relative; overflow:hidden; padding:11px 13px;
display:flex; align-items:center; gap:14px; }
[data-s2] .s2-hero .gh { position:absolute; right:-14px; bottom:-20px; width:92px; height:92px; opacity:.18; }
[data-s2] .s2-hero .n { font-family:var(--font-d); font-size:52px; line-height:.85; letter-spacing:-2px; }
[data-s2] .s2-hero .n small { font-size:26px; letter-spacing:0; opacity:.5; }
[data-s2] .s2-hero .k { font-family:var(--font-d); font-size:16px; letter-spacing:1.2px; line-height:1.05; }
/* une quête : titre + jauge, la récompense à droite.
⚠ proto donne à .xpbar « flex:1 » (donc flex-basis:0) : empilée en COLONNE
elle s'écrasait à 6 px, on ne voyait que ses bords. On lui rend sa hauteur. */
[data-s2] .s2-q .info { display:flex; flex-direction:column; gap:6px; }
[data-s2] :is(.s2-q, .s2-acc) .xpbar { flex:none; width:100%; }
/* « DÉFI ACCOMPLI » et « THÈME ACTIF » sont des états POSÉS, pas pressés.
.listcard.sel est l'état ENFONCÉ : proto éteint son ::before et décale son
corps de --sh — la ligne PERD son ombre et se creuse à côté de ses voisines.
On prend donc .listcard.on, qui garde l'ombre, et on n'ajoute QUE le fond,
plus franc que le #FFE99C de proto. Aucune classe de proto n'est redéfinie. */
[data-s2] .listcard.s2-fait .bd { background:var(--yellow); }
/* la coche, TRACÉE en CSS — jamais le glyphe */
[data-s2] .s2-tick { position:relative; width:30px; height:30px; flex-shrink:0;
border:var(--bd) solid var(--ink); background:var(--green); box-shadow:2px 2px 0 var(--ink); }
[data-s2] .s2-tick::after { content:''; position:absolute; left:50%; top:47%; width:9px; height:16px;
margin:-10px 0 0 -5px; box-sizing:border-box; border:solid var(--ink); border-width:0 4px 4px 0;
transform:rotate(45deg); }
/* ---------- STATS ---------- */
[data-s2] .s2-id .bd { display:flex; flex-direction:column; gap:12px; padding:12px; }
[data-s2] .s2-id .hd { display:flex; align-items:center; gap:12px; min-width:0; }
[data-s2] .s2-id .nm { font-family:var(--font-d); font-size:26px; line-height:1; letter-spacing:.5px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
[data-s2] .s2-id .fl { display:flex; align-items:center; gap:6px; margin-top:7px; min-width:0;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
font-family:var(--font-m); font-weight:800; font-size:9px; letter-spacing:.9px; }
[data-s2] .s2-id .fl img { width:22px; height:15px; }
/* LE DRAPEAU EST UNE IMAGE LOCALE (public/flags/XX.png), jamais un emoji.
Le fichier fait 1 600 px de large : sans taille imposée il faisait exploser
la largeur de l'écran. Taille unique, ici et partout. */
[data-s2] .s2-flag { width:22px; height:15px; flex-shrink:0; display:block; object-fit:cover;
border:2px solid var(--ink); }
/* le taux de réussite : le chiffre d'abord, la jauge dessous */
[data-s2] .s2-acc .bd { display:flex; align-items:center; gap:14px; padding:12px 14px; }
[data-s2] .s2-acc .n { font-family:var(--font-d); font-size:50px; line-height:.85; letter-spacing:-1.5px; }
[data-s2] .s2-acc .tx { flex:1; min-width:0; display:flex; flex-direction:column; gap:7px; }
/* ---------- CLASSEMENT ----------
PLUS D'ESCALIER. Les dix premiers forment UNE SEULE liste, sur la même
grille : rang · médaille · avatar · pseudo · drapeau · score. Les trois
premiers se reconnaissent du premier coup d'œil — bloc de rang or, argent,
bronze, médaille animée, bord épais et ombre plus longue — sans changer de
forme ni sortir de la colonne. */
[data-s2] .s2-top { display:flex; flex-direction:column; gap:8px; }
[data-s2] .lbrow.s2-lbt { gap:7px; padding:9px 10px; border-width:var(--bd-strong); box-shadow:var(--sh) var(--sh) 0 var(--ink); }
[data-s2] .s2-lbt .nm { font-size:16px; }
[data-s2] .s2-lbt .sc { font-size:18px; }
/* le bloc de rang : c'est LUI qui porte le métal, pas la ligne — la médaille
et l'avatar gardent ainsi tout leur contraste. */
[data-s2] .s2-rkb { flex-shrink:0; display:flex; align-items:center; justify-content:center;
width:32px; align-self:stretch; font-family:var(--font-d); font-size:21px; line-height:1;
border:var(--bd) solid var(--ink); background:var(--gray2); }
[data-s2] .s2-rkb.gold { background:var(--yellow); }
[data-s2] .s2-rkb.silver { background:#DADADA; }
[data-s2] .s2-rkb.bronze { background:var(--orange); }
/* la ligne du joueur : proto la peint en jaune (.lbrow.me) ; dans le top 3 le
bloc de rang reste bronze, donc on la reconnaît sans confusion. */
[data-s2] .s2-lbt .toi { flex-shrink:0; font-family:var(--font-d); font-size:10px; letter-spacing:1px;
border:2px solid var(--ink); background:var(--magenta); color:var(--paper);
box-shadow:2px 2px 0 var(--ink); padding:3px 5px; }
html[data-skin="neon"][data-theme] [data-s2] .lbrow.s2-lbt { box-shadow:var(--sh) var(--sh) 0 #FF5CA8; }
html[data-skin="neon"][data-theme] [data-s2] :is(.s2-rkb, .s2-lbt .toi) { border-color:#0A0A0A; }
html[data-skin="neon"][data-theme] [data-s2] .s2-rkb { color:#0A0A0A; }
html[data-skin="neon"][data-theme] [data-s2] .s2-lbt .toi { box-shadow:2px 2px 0 #FFD600; color:#FFFEF7; }
html[data-skin="neon"][data-theme] [data-s2] .s2-lbt.me .toi { box-shadow:2px 2px 0 #0A0A0A; }
/* deux onglets, deux moitiés égales */
[data-s2] .s2-seg { display:flex; align-self:stretch; }
[data-s2] .s2-seg .o { flex:1; display:flex; align-items:center; justify-content:center; gap:7px; }
/* ---------- RÉGLAGES ---------- */
[data-s2] .s2-chev { font-family:var(--font-d); font-size:24px; line-height:1; flex-shrink:0;
color:color-mix(in srgb,var(--ink) 70%,transparent); }
/* ---------- RÉGLAGES · LE CHOIX DE THÈME ----------
UN SEUL bloc et UN SEUL pas d'espacement (9 px) du haut en bas. La première
ligne dit lequel tourne — aplat jaune AVEC SON OMBRE, coche tracée ; la
grille dessous dit qu'on peut en changer. ABÎME et NÉON ne sont plus deux
carrés noirs jumeaux : chaque pastille montre son fond ET ses deux accents
(cyan/bleu pour l'abîme, magenta/jaune pour le néon). */
[data-s2] .s2-themes .bd { display:flex; flex-direction:column; gap:9px; padding:9px; }
[data-s2] .s2-themes .hd { display:flex; align-items:center; gap:9px; }
[data-s2] .s2-themes .hd .t { flex:1; min-width:0; font-family:var(--font-d); font-size:16px; letter-spacing:1.2px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
[data-s2] .s2-themes .act { display:flex; align-items:center; gap:9px; padding:8px 9px; margin:0 4px 4px 0;
border:var(--bd) solid var(--ink); background:var(--yellow); box-shadow:4px 4px 0 var(--ink); }
[data-s2] .s2-themes .act .tx { flex:1; min-width:0; display:flex; flex-direction:column; }
[data-s2] .s2-themes .act .n { display:block; font-family:var(--font-d); font-size:19px; letter-spacing:.6px; line-height:1.3;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
[data-s2] .s2-themes .act .d { display:block; font-family:var(--font-m); font-weight:700; font-size:9px; letter-spacing:.7px;
margin-top:3px; color:rgba(10,10,10,.6); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* ⚠ PAS « .lab » : proto.css s'en sert pour la PAGE galerie (fond gris,
min-height:100vh) — le mot avalait tout l'écran. */
[data-s2] .s2-themes .hint { font-family:var(--font-m); font-weight:800; font-size:9px; letter-spacing:2.4px;
color:color-mix(in srgb,var(--ink) 55%,transparent); }
[data-s2] .s2-thgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
[data-s2] .s2-th2 { display:flex; flex-direction:column; gap:5px; min-width:0; }
[data-s2] .s2-th2 .sw { height:46px; border:var(--bd) solid var(--ink); box-shadow:3px 3px 0 var(--ink);
background:var(--b); display:flex; flex-direction:column; justify-content:flex-end; gap:4px;
padding:6px; overflow:hidden; }
[data-s2] .s2-th2 .sw i { display:block; height:8px; background:var(--a); }
[data-s2] .s2-th2 .sw u { display:block; height:5px; width:55%; background:var(--a2); }
[data-s2] .s2-th2 .nm { font-family:var(--font-m); font-weight:800; font-size:8.5px; letter-spacing:.5px;
text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* ⚠ la pastille de la ligne active n'est PAS dans un .s2-th2 : elle n'héritait
donc ni de sa hauteur ni de son habillage, et tombait à 0 px de haut — un
trou de 33 px à gauche du nom du thème. Elle se décrit ici, en entier. */
[data-s2] .s2-themes .act .sw { width:46px; height:40px; flex:none;
border:var(--bd) solid var(--ink); box-shadow:3px 3px 0 var(--ink); background:var(--b);
display:flex; flex-direction:column; justify-content:flex-end; gap:4px; padding:5px; overflow:hidden; }
[data-s2] .s2-themes .act .sw i { display:block; height:7px; background:var(--a); }
[data-s2] .s2-themes .act .sw u { display:block; height:5px; width:55%; background:var(--a2); }
/* la pastille est NOIRE et posée sur un aplat JAUNE : son ombre ne peut être ni
noire (la couleur du bloc), ni jaune (celle du fond) — donc magenta. */
[data-s2] .s2-themes .act .sw,
html[data-skin="neon"][data-theme] [data-s2] .s2-themes .act .sw { box-shadow:3px 3px 0 #FF2E93; border-color:#0A0A0A; }
/* UNE PASTILLE SOMBRE NE PORTE JAMAIS UNE OMBRE NOIRE. */
[data-s2] .s2-th2.nuit .sw { box-shadow:3px 3px 0 var(--magenta); }
html[data-skin="neon"][data-theme] [data-s2] .s2-th2 .sw { box-shadow:3px 3px 0 #FF5CA8; }
html[data-skin="neon"][data-theme] [data-s2] .s2-th2.nuit .sw { box-shadow:3px 3px 0 #FFD600; }
html[data-skin="neon"][data-theme] [data-s2] .s2-themes .act { background:#FFD600; color:#0A0A0A; border-color:#0A0A0A;
box-shadow:4px 4px 0 #FF5CA8; }
/* chaque section des réglages a sa couleur, comme les cat-icon de l'app.
Aucune n'est magenta : en NÉON l'ombre des boîtes EST magenta. */
[data-s2] .emoji-box.s2-c1 { background:var(--green); }
[data-s2] .emoji-box.s2-c2 { background:var(--yellow); }
[data-s2] .emoji-box.s2-c3 { background:var(--purple); }
[data-s2] .emoji-box.s2-c4 { background:var(--cyan); }
[data-s2] .emoji-box.s2-c5 { background:var(--blue); }
[data-s2] .emoji-box.s2-c6 { background:var(--orange); }
[data-s2] .emoji-box.s2-c7 { background:var(--red); }
/* la ligne réservée à l'admin : visible, mais pas au même rang que les autres */
[data-s2] .listcard.s2-admin .bd { background:var(--gray2); }
html[data-skin="neon"][data-theme] [data-s2] .listcard.s2-admin .bd { background:#3E2A3B; }
html[data-skin="neon"][data-theme] [data-s2] .badge .badge-prog { color:#5BE885; }
/* ---------- NÉON : les composants que le § 1 n'avait pas encore croisés ---------- */
html[data-skin="neon"][data-theme] [data-s2] :is(.lbrow, .toast) { box-shadow:4px 4px 0 #FF5CA8; }
html[data-skin="neon"][data-theme] [data-s2] .toggle-btn { box-shadow:3px 3px 0 #FF5CA8; }
html[data-skin="neon"][data-theme] [data-s2] :is(.s2-tick, .avatar-lv .lv) { box-shadow:2px 2px 0 #FF5CA8; }
/* le badge de niveau, la jauge d'XP et le bouton magenta sont EUX-MÊMES magenta :
ombre JAUNE. ⚠ le bloc magenta du § 1 pèse 0,4,0 (son :is contient « .badge .ic ») :
il faut donc passer par .s2 pour le dépasser, sinon la correction ne prend pas. */
html[data-skin="neon"][data-theme] [data-s2] .s2 .level-badge { box-shadow:3px 3px 0 #FFD600; }
/* ⚠ RÈGLE GÉNÉRALE, pas une rustine par écran : en NÉON --magenta vaut
#FF5CA8, qui est AUSSI la couleur d'ombre par défaut. Un bouton magenta se
retrouvait donc avec une ombre de sa propre couleur — 1,00 de contraste.
Partout, son ombre est JAUNE. (Trouvé sur le lot des overlays.) */
html[data-skin="neon"][data-theme] [data-s2] .btn.magenta { box-shadow:var(--sh) var(--sh) 0 #FFD600; }
html[data-skin="neon"][data-theme] [data-s2] .btn.sm.magenta { box-shadow:3px 3px 0 #FFD600; }
/* ⚠ .xpbar a un fond PRUNE — c'est son remplissage qui est magenta. Elle suit
donc la règle des blocs d'encre : ombre magenta, comme tout le reste du prune. */
/* …et son texte court sur DEUX fonds : le remplissage magenta ET la partie vide.
L'encre noire seule ne suffit pas (elle disparaissait sur le vide prune), et
le crème non plus (illisible sur le magenta). On rend donc la partie vide
CRÈME : une seule encre, noire, lisible d'un bout à l'autre de la barre. */
html[data-skin="neon"][data-theme] [data-s2] .xpbar { background:#FFFEF7; border-color:#0A0A0A; box-shadow:3px 3px 0 #FF5CA8; }
html[data-skin="neon"][data-theme] [data-s2] .xpbar .txt { color:#0A0A0A; }
[data-s2] .xpbar .txt { padding:0 9px; }
/* sinon la bordure du remplissage tranche la dernière lettre */
html[data-skin="neon"][data-theme] [data-s2] .xpbar .fill { border-color:#0A0A0A; }
/* aplats accent : encre et bordure NOIRES */
html[data-skin="neon"][data-theme] [data-s2] :is(.lbrow.me, .statcard.b, .statcard.c, .toggle-btn.on, .s2-tick,
.s2-act .bd, .s2-hero .bd, .badge .ic) { color:#0A0A0A; border-color:#0A0A0A; }
html[data-skin="neon"][data-theme] [data-s2] .s2-act .bd * { color:#0A0A0A; }
/* le sous-titre de proto (.desc) se calcule sur --ink : posé sur un aplat JAUNE
il devenait crème sur jaune, illisible. On le rebascule sur l'encre noire. */
html[data-skin="neon"][data-theme] [data-s2] :is(.listcard.sel, .listcard.on, .s2-hero) :is(.desc, .name, .k, .n) { color:#0A0A0A; }
html[data-skin="neon"][data-theme] [data-s2] :is(.listcard.sel, .listcard.on, .s2-hero) .desc { color:rgba(10,10,10,.62); }
/* la pill posée sur un aplat accent redevient un petit bloc clair */
html[data-skin="neon"][data-theme] [data-s2] :is(.s2-door, .s2-mix, .s2-card, .s2-hero) .pill {
background:#FFFEF7; color:#0A0A0A; border-color:#0A0A0A; box-shadow:3px 3px 0 #0A0A0A; }
/* la coche garde SON vert et ses traits : seule son ombre passe au noir, parce
qu'elle est posée sur l'aplat jaune de la ligne cochée. */
html[data-skin="neon"][data-theme] [data-s2] :is(.listcard.sel, .listcard.on, .s2-themes .act) .s2-tick { box-shadow:3px 3px 0 #0A0A0A; border-color:#0A0A0A; }
/* ============================================================
§ 3 — LES ÉCRANS INTERNES (ouverts DEPUIS un onglet)
Pas de barre du bas : une barre du haut avec un RETOUR. Classes de mise en
place uniquement ; bords, ombres et couleurs viennent toujours de proto.css.
============================================================ */
[data-s2] .s2-bar { display:flex; align-items:center; gap:10px; flex-shrink:0; min-width:0; }
[data-s2] .s2-bar .iconbtn { font-size:24px; line-height:1; padding-bottom:3px; }
[data-s2] .s2-bar .page-title { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* la rangée de filtres/onglets : elle défile, elle ne passe jamais à la ligne.
Les 6 px rendus de chaque côté laissent passer l'ombre des pastilles sans
décaler la rangée — cf. le même procédé sur `.s2-scroll`. Ce débordement ne
fait plus glisser l'écran : `.s2` est en `overflow:clip` (voir sa règle). */
[data-s2] .s2-chips { display:flex; gap:7px; flex-shrink:0; overflow-x:auto; padding:0 6px 5px; margin:0 -6px;
scrollbar-width:none; }
[data-s2] .s2-chips::-webkit-scrollbar { display:none; }
[data-s2] .s2-chips .btn { flex:none; }
/* ---------- 11 · HUB « CHOISIS TON JEU » ----------
La porte principale est un bloc à ARTWORK (trame + hachures, comme les héros
du § 2), les autres jeux des tuiles .s2-act, et les jeux pas prêts des lignes
verrouillées qui disent BIENTÔT. */
[data-s2] .s2-jeu > .bd { position:relative; overflow:hidden; display:flex; align-items:center; gap:13px;
padding:13px; background:var(--cyan); }
[data-s2] .s2-jeu .art { position:absolute; inset:0;
background-image:
radial-gradient(rgba(10,10,10,.26) 1.7px, transparent 1.8px),
repeating-linear-gradient(-30deg, rgba(10,10,10,.16) 0 4px, transparent 4px 20px);
background-size:10px 10px, auto; }
[data-s2] .s2-jeu .emoji-box,
[data-s2] .s2-jeu .in,
[data-s2] .s2-jeu .btn { position:relative; z-index:2; }
[data-s2] .s2-jeu .in { flex:1; min-width:0; }
[data-s2] .s2-jeu .t { display:block; font-family:var(--font-d); font-size:30px; line-height:1.14; letter-spacing:.5px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
[data-s2] .s2-jeu .d { display:block; margin-top:4px; font-family:var(--font-m); font-weight:700; font-size:9.5px;
letter-spacing:.6px; color:rgba(10,10,10,.65); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
html[data-skin="neon"][data-theme] [data-s2] .s2-jeu > .bd { background:#1C0F1A; }
html[data-skin="neon"][data-theme] [data-s2] .s2-jeu .art { background-image:
radial-gradient(rgba(255,92,168,.32) 1.7px, transparent 1.8px),
repeating-linear-gradient(-30deg, rgba(255,92,168,.16) 0 4px, transparent 4px 20px); }
html[data-skin="neon"][data-theme] [data-s2] .s2-jeu .t { color:#FFFEF7; text-shadow:3px 3px 0 #FF5CA8; }
html[data-skin="neon"][data-theme] [data-s2] .s2-jeu .d { color:rgba(255,254,247,.62); }
/* le bloc d'EVENT : un pavé d'encre avec sa photo encadrée. Bloc sombre =
OMBRE COLORÉE, dans les deux peaux. */
[data-s2] .s2-ev::before { background:var(--magenta); }
[data-s2] .s2-ev > .bd { display:flex; align-items:center; gap:11px; padding:11px; background:#0A0A0A;
border-color:#0A0A0A; }
[data-s2] .s2-ev .ph { flex:none; width:74px; height:74px; overflow:hidden; background:#1C0F1A;
border:var(--bd) solid #FFD600; }
[data-s2] .s2-ev .ph img { width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
[data-s2] .s2-ev .in { flex:1; min-width:0; }
[data-s2] .s2-ev .t { display:block; font-family:var(--font-d); font-size:23px; line-height:1.15; letter-spacing:.6px;
color:var(--yellow); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
[data-s2] .s2-ev .d { display:block; margin-top:5px; font-family:var(--font-m); font-weight:700; font-size:9px;
line-height:1.4; letter-spacing:.5px; color:#CFC3CE; }
[data-s2] .s2-ev .live.or { background:var(--yellow); }
[data-s2] .s2-ev .live { display:inline-flex; align-items:center; gap:6px; margin-top:7px;
font-family:var(--font-d); font-size:10px; letter-spacing:1.4px; color:#0A0A0A;
background:var(--red); border:2px solid #0A0A0A; padding:2px 7px; }
/* la ligne d'un jeu qui n'est PAS prêt : grisée, et le mot BIENTÔT */
[data-s2] .listcard.s2-soon > .bd { background:var(--gray2); }
[data-s2] .s2-soon .emoji-box .nemoji { filter:grayscale(1); opacity:.5; }
html[data-skin="neon"][data-theme] [data-s2] .listcard.s2-soon > .bd { background:#3E2A3B; }
/* ---------- 12 · RANGS ----------
Le rang courant est un HÉROS (artwork + gros nom), l'échelle une seule
colonne qui se lit du sommet vers le bas. */
[data-s2] .s2-now > .bd { position:relative; overflow:hidden; padding:13px; background:var(--green); }
[data-s2] .s2-now .art { position:absolute; inset:0;
background-image:
radial-gradient(rgba(10,10,10,.26) 1.7px, transparent 1.8px),
repeating-linear-gradient(-30deg, rgba(10,10,10,.16) 0 4px, transparent 4px 20px);
background-size:10px 10px, auto; }
[data-s2] .s2-now .in { position:relative; z-index:2; display:flex; align-items:center; gap:13px; }
[data-s2] .s2-now .tx { flex:1; min-width:0; }
[data-s2] .s2-now .k { font-family:var(--font-m); font-weight:800; font-size:9.5px; letter-spacing:2.4px;
color:rgba(10,10,10,.65); }
[data-s2] .s2-now .nm { font-family:var(--font-d); font-size:36px; line-height:1.02; letter-spacing:.5px;
color:var(--paper); text-shadow:4px 4px 0 var(--ink);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
[data-s2] .s2-now .bas { position:relative; z-index:2; margin-top:11px; display:flex; align-items:center; gap:8px; }
[data-s2] .s2-now .em { flex:none; width:64px; height:64px; border:var(--bd-strong) solid var(--ink);
background:var(--paper); box-shadow:var(--sh) var(--sh) 0 var(--ink); transform:rotate(-3deg);
display:flex; align-items:center; justify-content:center; }
[data-s2] .s2-now .em .nemoji { width:42px; height:42px; }
/* l'ombre du carré d'emoji déborde de 5 px : sans cette marge elle passait
sur le mot RANG ACTUEL. */
[data-s2] .s2-now .em { margin-right:7px; }
html[data-skin="neon"][data-theme] [data-s2] .s2-now > .bd { background:#1C0F1A; }
html[data-skin="neon"][data-theme] [data-s2] .s2-now .art { background-image:
radial-gradient(rgba(255,92,168,.32) 1.7px, transparent 1.8px),
repeating-linear-gradient(-30deg, rgba(255,92,168,.16) 0 4px, transparent 4px 20px); }
html[data-skin="neon"][data-theme] [data-s2] .s2-now .k { color:rgba(255,254,247,.6); }
html[data-skin="neon"][data-theme] [data-s2] .s2-now .nm { color:#FFFEF7; text-shadow:4px 4px 0 #FF5CA8; }
html[data-skin="neon"][data-theme] [data-s2] .s2-now .em { border-color:#0A0A0A; box-shadow:var(--sh) var(--sh) 0 #FF5CA8; }
/* un palier pas encore atteint : l'emoji s'éteint, comme un badge verrouillé */
[data-s2] .s2-lk .emoji-box { background:var(--gray2); }
[data-s2] .s2-lk .emoji-box .nemoji { filter:grayscale(1); opacity:.45; }
html[data-skin="neon"][data-theme] [data-s2] .s2-lk .emoji-box { background:#3E2A3B; }
/* posé sur l'aplat JAUNE de la ligne courante, un sticker magenta ne peut pas
porter une ombre magenta : elle repasse en noir. */
html[data-skin="neon"][data-theme] [data-s2] :is(.listcard.on, .s2-fait) .sticker.magenta::before { background:#0A0A0A; }
/* le numéro de palier, à gauche de la ligne */
[data-s2] .s2-pal { flex:none; width:26px; text-align:center; font-family:var(--font-d); font-size:15px;
color:color-mix(in srgb,var(--ink) 55%,transparent); }
/* ---------- 13 · SAISON ---------- */
/* le lot d'un palier : le bloc de rang (métal) tient la gauche, le djai la droite */
[data-s2] .s2-lot .bd { gap:10px; }
[data-s2] .s2-lot .s2-rkb { width:58px; font-size:13px; letter-spacing:.3px; }
/* un chiffre-titre et sa légende, hors carte de liste */
[data-s2] .s2-big { font-family:var(--font-d); font-size:22px; line-height:1.15; letter-spacing:.4px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
[data-s2] .s2-sub { font-family:var(--font-m); font-weight:700; font-size:9px; letter-spacing:.6px; margin-top:3px;
color:color-mix(in srgb,var(--ink) 58%,transparent); }
/* ---------- 14 · HISTORIQUE ---------- */
[data-s2] .s2-h .bd { gap:10px; }
[data-s2] .s2-h .res { flex:none; text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
[data-s2] .s2-h .pts { font-family:var(--font-d); font-size:16px; line-height:1; }
[data-s2] .s2-h .pts small { font-family:var(--font-m); font-weight:700; font-size:8px; letter-spacing:.8px; opacity:.6; }
[data-s2] .s2-tagw { font-family:var(--font-d); font-size:11px; letter-spacing:1px; padding:3px 7px; line-height:1;
border:2px solid var(--ink); background:var(--green); color:#0A0A0A; box-shadow:2px 2px 0 var(--ink); }
[data-s2] .s2-tagw.lose { background:var(--gray2); }
[data-s2] .s2-tagw.train { background:var(--paper); }
html[data-skin="neon"][data-theme] [data-s2] .s2-tagw { border-color:#0A0A0A; box-shadow:2px 2px 0 #FF5CA8; }
html[data-skin="neon"][data-theme] [data-s2] .s2-tagw.lose { background:#C8C8C8; }
html[data-skin="neon"][data-theme] [data-s2] .s2-tagw.train { background:#FFFEF7; }
/* la pastille du mode porte SA couleur : sur cet aplat, bordure noire. */
html[data-skin="neon"][data-theme] [data-s2] .s2-h .emoji-box { border-color:#0A0A0A; }
/* ---------- 15 · POTES ---------- */
[data-s2] .s2-add { display:flex; gap:8px; flex-shrink:0; align-items:stretch; }
[data-s2] .s2-add .input { flex:1; min-width:0; font-size:13px; padding:11px 12px;
color:color-mix(in srgb,var(--ink) 42%,transparent);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
[data-s2] .s2-add .btn { flex:none; }
/* la coche et la croix, TRACÉES — jamais le glyphe */
[data-s2] .s2-ok,
[data-s2] .s2-no { position:relative; width:32px; height:32px; flex:none;
border:var(--bd) solid var(--ink); box-shadow:2px 2px 0 var(--ink); }
[data-s2] .s2-ok { background:var(--green); }
[data-s2] .s2-no { background:var(--red); }
[data-s2] .s2-ok::after { content:''; position:absolute; left:50%; top:47%; width:9px; height:16px;
margin:-10px 0 0 -5px; box-sizing:border-box; border:solid #0A0A0A; border-width:0 4px 4px 0;
transform:rotate(45deg); }
[data-s2] .s2-no::before,
[data-s2] .s2-no::after { content:''; position:absolute; left:50%; top:50%; width:4px; height:18px;
margin:-9px 0 0 -2px; background:#0A0A0A; }
[data-s2] .s2-no::before { transform:rotate(45deg); }
[data-s2] .s2-no::after { transform:rotate(-45deg); }
html[data-skin="neon"][data-theme] [data-s2] :is(.s2-ok, .s2-no) { border-color:#0A0A0A; box-shadow:2px 2px 0 #FF5CA8; }
/* la présence : un carré, jamais une pastille ronde */
[data-s2] .s2-dot { display:inline-block; width:9px; height:9px; flex:none; border:2px solid var(--ink);
background:var(--green); margin-right:5px; vertical-align:-1px; }
[data-s2] .s2-dot.jeu { background:var(--yellow); }
[data-s2] .s2-dot.off { background:var(--gray); }
html[data-skin="neon"][data-theme] [data-s2] .s2-dot { border-color:#0A0A0A; }
[data-s2] .listcard.s2-off .bd { background:var(--gray2); }
html[data-skin="neon"][data-theme] [data-s2] .listcard.s2-off .bd { background:#3E2A3B; }
/* PAS de filtre sur l'avatar (règle du socle) : c'est la LIGNE qui s'éteint. */
[data-s2] .s2-off .name,
[data-s2] .s2-off .desc { opacity:.75; }
/* ---------- 16 · PROFIL ---------- */
[data-s2] .s2-cov > .bd { padding:0; overflow:hidden; }
[data-s2] .s2-cov .im { display:block; width:100%; height:100px; object-fit:cover;
border-bottom:var(--bd) solid var(--ink); }
[data-s2] .s2-cov .in { position:relative; display:flex; align-items:flex-end; gap:14px; padding:9px 12px 11px; }
/* ⚠ la marge négative se porte sur L'AVATAR SEUL. Posée sur la ligne, elle
faisait monter le pseudo AUSSI : il se retrouvait écrit par-dessus l'image. */
[data-s2] .s2-cov .avatar-lv { margin-top:-38px; }
[data-s2] .s2-cov .id { flex:1; min-width:0; padding-bottom:3px; }
[data-s2] .s2-cov .nm { font-family:var(--font-d); font-size:26px; line-height:1; letter-spacing:.5px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
[data-s2] .s2-cov .fl { display:flex; align-items:center; gap:6px; margin-top:6px; min-width:0;
font-family:var(--font-m); font-weight:800; font-size:9px; letter-spacing:.9px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
html[data-skin="neon"][data-theme] [data-s2] .s2-cov .im { border-color:#0A0A0A; }
/* le badge de niveau collé à l'avatar EST magenta : en NÉON son ombre passe au
jaune (la règle magenta par défaut lui donnait la couleur de son propre fond). */
html[data-skin="neon"][data-theme] [data-s2] .s2 .avatar-lv .lv { box-shadow:2px 2px 0 #FFD600; border-color:#0A0A0A; }
/* le bloc de rang du profil */
[data-s2] .s2-rk2 .bd { display:flex; flex-direction:column; gap:10px; padding:11px 12px; }
[data-s2] .s2-rk2 .hd { display:flex; align-items:center; gap:11px; min-width:0; }
[data-s2] .s2-rk2 .tx { flex:1; min-width:0; }
[data-s2] .s2-rk2 .k { font-family:var(--font-m); font-weight:800; font-size:9px; letter-spacing:1.8px;
color:color-mix(in srgb,var(--ink) 55%,transparent); }
[data-s2] .s2-rk2 .nm { font-family:var(--font-d); font-size:24px; line-height:1.1; letter-spacing:.5px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
[data-s2] .s2-rk2 .nx { font-family:var(--font-m); font-weight:700; font-size:9px; letter-spacing:.8px;
color:color-mix(in srgb,var(--ink) 60%,transparent); }
/* une stat de mode : emoji, libellé, chiffres */
[data-s2] .s2-md { border:var(--bd) solid var(--ink); box-shadow:3px 3px 0 var(--ink); background:var(--paper);
padding:8px 5px; text-align:center; }
[data-s2] .s2-md .nemoji { width:22px; height:22px; }
[data-s2] .s2-md .l { font-family:var(--font-d); font-size:10px; letter-spacing:.5px; margin-top:4px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
[data-s2] .s2-md .v { font-family:var(--font-m); font-weight:700; font-size:9px; margin-top:2px;
color:color-mix(in srgb,var(--ink) 60%,transparent); }
html[data-skin="neon"][data-theme] [data-s2] .s2-md { box-shadow:3px 3px 0 #FF5CA8; }
/* ---------- 17 · BOUTIQUE ---------- */
/* l'article mis en avant : sa vraie image, encadrée, et son prix */
/* ⚠ UNE BANNIÈRE SE MONTRE EN BANNIÈRE. Edwin, à propos de GEAR 5 : « je pense
que c'est une bannière, mais de la façon dont tu l'as affichée, c'est comme
si c'était une image ». Elle tenait dans une vignette carrée de 86 px,
penchée, à côté du titre : on ne voyait pas ce qu'on achetait. La boutique de
la saison 1 faisait mieux — l'article s'affiche AU FORMAT DE CE QU'IL EST.
La vedette passe donc en colonne : la bannière en grand, pleine largeur et
au bon rapport, puis le nom, le type et le prix en dessous. */
[data-s2] .s2-art > .bd { display:flex; flex-direction:column; gap:0; padding:0; background:var(--purple); }
[data-s2] .s2-art .ph { display:block; width:100%; height:auto; aspect-ratio:16/7; overflow:hidden;
background:var(--paper); border:0; border-bottom:var(--bd-strong) solid var(--ink);
box-shadow:none; transform:none; }
[data-s2] .s2-art .ph img { width:100%; height:100%; object-fit:cover; display:block; }
[data-s2] .s2-art .in { flex:1; min-width:0; padding:11px 12px 12px; }
[data-s2] .s2-art .t { display:block; font-family:var(--font-d); font-size:25px; line-height:1.12; letter-spacing:.5px;
color:var(--paper); text-shadow:3px 3px 0 var(--ink);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
[data-s2] .s2-art .d { display:block; margin-top:5px; font-family:var(--font-m); font-weight:700; font-size:9px;
letter-spacing:.6px; color:var(--paper); }
[data-s2] .s2-art .bas { display:flex; align-items:center; gap:7px; margin-top:9px; }
html[data-skin="neon"][data-theme] [data-s2] .s2-art > .bd { background:#1C0F1A; }
html[data-skin="neon"][data-theme] [data-s2] .s2-art .t { color:#FFFEF7; text-shadow:3px 3px 0 #FF5CA8; }
/* ⚠ var(--paper) vaut le PRUNE en NÉON : la légende disparaissait sur la nuit. */
html[data-skin="neon"][data-theme] [data-s2] .s2-art .d { color:#CFC3CE; }
html[data-skin="neon"][data-theme] [data-s2] .s2-art .ph { border-color:#0A0A0A; box-shadow:var(--sh) var(--sh) 0 #FF5CA8; }
/* un cadre en vente : on montre LE CADRE, pas une icône de cadre */
[data-s2] .s2-item .bd { display:flex; flex-direction:column; align-items:center; gap:7px; padding:10px 8px; }
[data-s2] .s2-art .hv { font-family:var(--font-m); font-weight:800; font-size:8.5px; letter-spacing:.8px;
line-height:1.35; color:color-mix(in srgb,var(--ink) 70%,transparent); }
[data-s2] .s2-frm { width:56px; height:56px; padding:5px; background:var(--gray2); border:5px solid var(--yellow);
box-shadow:2px 2px 0 var(--ink); }
[data-s2] .s2-frm img { width:100%; height:100%; display:block; }
[data-s2] .s2-frm.neon { border-color:var(--magenta); }
[data-s2] .s2-frm.feu { border-color:var(--orange); }
[data-s2] .s2-frm.glace { border-color:var(--cyan); }
[data-s2] .s2-frm.arc { border-top-color:var(--red); border-right-color:var(--yellow);
border-bottom-color:var(--cyan); border-left-color:var(--green); }
html[data-skin="neon"][data-theme] [data-s2] .s2-frm { background:#3E2A3B; box-shadow:2px 2px 0 #FF5CA8; }
/* noir sur prune = invisible */
[data-s2] .s2-item .nm { font-family:var(--font-d); font-size:13px; letter-spacing:.5px; line-height:1.2;
max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* POSSÉDÉ = un état POSÉ (comme .listcard.on), jamais l'état enfoncé .sel */
[data-s2] .s2-own .bd { background:var(--yellow); }
html[data-skin="neon"][data-theme] [data-s2] .s2-own .bd { color:#0A0A0A; border-color:#0A0A0A; }
html[data-skin="neon"][data-theme] [data-s2] .s2-own .s2-tick { box-shadow:3px 3px 0 #0A0A0A; border-color:#0A0A0A; }
html[data-skin="neon"][data-theme] [data-s2] .s2-own :is(.nm, .name, .desc) { color:#0A0A0A; }
html[data-skin="neon"][data-theme] [data-s2] .s2-own .pill { background:#FFFEF7; color:#0A0A0A; border-color:#0A0A0A; box-shadow:3px 3px 0 #0A0A0A; }
/* le titre vendu : on l'écrit tel qu'il s'affichera sous le pseudo */
[data-s2] .s2-tt { flex:none; font-family:var(--font-d); font-size:12px; letter-spacing:1px; padding:5px 9px;
border:2.5px solid var(--ink); background:var(--cyan); color:#0A0A0A; box-shadow:2px 2px 0 var(--ink); }
[data-s2] .s2-tt.or { background:var(--yellow); }
[data-s2] .s2-tt.vi { background:var(--purple); color:var(--paper); }
html[data-skin="neon"][data-theme] [data-s2] .s2-tt { border-color:#0A0A0A; box-shadow:2px 2px 0 #FF5CA8; }
/* un pack d'émotes : les émotes elles-mêmes, en rang */
[data-s2] .s2-emo { display:flex; gap:4px; flex:none; }
[data-s2] .s2-emo .nemoji { width:20px; height:20px; }
/* ============================================================
§ 3b — LES 8 DERNIERS ÉCRANS INTERNES
MES QUIZ · ATELIER · SOLO · RAFALE · MAQUIS · L'ÉVEIL · JPO · LIVE OPS
Toujours des classes de MISE EN PLACE : bords, ombres et couleurs
continuent de venir de proto.css.
============================================================ */
[data-s2] .s2-grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
/* la frise d'étapes (ÉTAPE 1 SUR 3) — trois barres, pas de glyphe */
[data-s2] .s2-steps { display:flex; gap:6px; flex-shrink:0; }
[data-s2] .s2-steps i { flex:1; height:7px; background:var(--gray2); border:2px solid var(--ink); }
[data-s2] .s2-steps i.ok { background:var(--green); }
[data-s2] .s2-steps i.on { background:var(--magenta); }
html[data-skin="neon"][data-theme] [data-s2] .s2-steps i { border-color:#0A0A0A; }
html[data-skin="neon"][data-theme] [data-s2] .s2-steps i:not(.ok):not(.on) { background:#C8C8C8; }
/* ---------- 18 · MES QUIZ ----------
Un quiz = une pochette (l'emoji de couverture, sur le fond que lui donne
atelier.js), son titre, son compte de questions et ses deux actions. */
[data-s2] .s2-qz > .bd { display:flex; align-items:center; gap:11px; padding:10px 11px; }
[data-s2] .s2-qz .cv { flex:none; width:54px; height:54px; border:var(--bd) solid var(--ink);
box-shadow:3px 3px 0 var(--ink); display:flex; align-items:center; justify-content:center; }
[data-s2] .s2-qz .cv .nemoji { width:32px; height:32px; }
[data-s2] .s2-qz .in { flex:1; min-width:0; }
[data-s2] .s2-qz .nm { display:block; font-family:var(--font-d); font-size:18px; letter-spacing:.4px; line-height:1.25;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
[data-s2] .s2-qz .by { display:block; margin-top:3px; font-family:var(--font-m); font-weight:700; font-size:9px;
letter-spacing:.5px; color:color-mix(in srgb,var(--ink) 60%,transparent);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
[data-s2] .s2-qz .st { display:flex; gap:5px; margin-top:7px; }
html[data-skin="neon"][data-theme] [data-s2] .s2-qz .cv { border-color:#0A0A0A; box-shadow:3px 3px 0 #FF5CA8; }
/* la pastille d'action — verte quand ça se joue, orange quand c'est un brouillon */
[data-s2] .s2-mini { font-family:var(--font-d); font-size:10px; letter-spacing:1px; line-height:1; padding:4px 7px;
border:2px solid var(--ink); background:var(--paper); color:#0A0A0A; }
[data-s2] .s2-mini.go { background:var(--green); }
[data-s2] .s2-mini.dr { background:var(--orange); }
html[data-skin="neon"][data-theme] [data-s2] .s2-mini { border-color:#0A0A0A; background:#FFFEF7; }
html[data-skin="neon"][data-theme] [data-s2] .s2-mini.go { background:#5BE885; }
html[data-skin="neon"][data-theme] [data-s2] .s2-mini.dr { background:#FF9F45; }
/* ---------- 19 · ATELIER ----------
Les 25 types du moteur, rangés en trois paquets. Une tuile = un type. */
[data-s2] .s2-tp { border:var(--bd) solid var(--ink); box-shadow:3px 3px 0 var(--ink); background:var(--paper);
padding:8px 3px 7px; text-align:center; overflow:hidden; }
[data-s2] .s2-tp .nemoji { width:22px; height:22px; }
[data-s2] .s2-tp b { display:block; margin-top:4px; font-family:var(--font-d); font-weight:400; font-size:8.5px;
letter-spacing:.2px; line-height:1.22; }
[data-s2] .s2-tp.on { background:var(--yellow); }
html[data-skin="neon"][data-theme] [data-s2] .s2-tp { box-shadow:3px 3px 0 #FF5CA8; }
html[data-skin="neon"][data-theme] [data-s2] .s2-tp.on { color:#0A0A0A; border-color:#0A0A0A; }
/* un paquet de types : son intitulé et son aparté, sur une seule ligne */
[data-s2] .s2-gt { display:flex; align-items:baseline; gap:8px; flex-shrink:0; min-width:0; }
[data-s2] .s2-gt b { flex:none; font-family:var(--font-d); font-weight:400; font-size:14px; letter-spacing:1.3px; }
[data-s2] .s2-gt span { flex:1; min-width:0; font-family:var(--font-m); font-weight:800; font-size:8.5px; letter-spacing:1.2px;
color:color-mix(in srgb,var(--ink) 55%,transparent);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* ---------- 20 · SOLO / 21 · RAFALE ----------
Un réglage = son intitulé puis sa rangée de pastilles (les chips du § 3). */
[data-s2] .s2-set { font-family:var(--font-m); font-weight:800; font-size:9px; letter-spacing:2.2px; flex-shrink:0;
color:color-mix(in srgb,var(--ink) 55%,transparent); }
/* l'aire de jeu de RAFALE : proto pose .qcard et .options en pleine largeur
d'écran (marge de 16 px) ; dans le cadre du § 3 elles sont déjà dans la
colonne, on annule juste ce déport. Aucune propriété de forme n'est touchée. */
[data-s2] .s2-play .qcard { margin:0; }
[data-s2] .s2-play .options { padding:0; gap:9px; }
[data-s2] .s2-play .opt .bd { padding:10px 11px; }
[data-s2] .s2-play .opt .text { font-size:15px; }
/* proto écrit l'ombre de .qcard et de .opt dans un enfant .sh (pas un ::before) :
la règle magenta du socle ne la voyait pas, elle restait crème sur le prune. */
html[data-skin="neon"][data-theme] [data-s2] :is(.qcard, .opt) > .sh { background:#FF5CA8; }
html[data-skin="neon"][data-theme] [data-s2] .opt .bd { border-color:#0A0A0A; }
html[data-skin="neon"][data-theme] [data-s2] .opt .lwrap .lsh { background:#0A0A0A; }
html[data-skin="neon"][data-theme] [data-s2] .opt .lbox { background:#FFFEF7; color:#0A0A0A; border-color:#0A0A0A; }
html[data-skin="neon"][data-theme] [data-s2] .opt.c-yellow .bd { color:#0A0A0A; }
html[data-skin="neon"][data-theme] [data-s2] :is(.opt.c-violet, .opt.c-red, .opt.c-teal) .bd { color:#FFFEF7; }
html[data-skin="neon"][data-theme] [data-s2] .opt .stamp { border-color:#0A0A0A; box-shadow:4px 4px 0 #0A0A0A; }
/* le bandeau de RAFALE : la série et le score, au-dessus de la carte */
[data-s2] .s2-hud { display:flex; align-items:center; gap:8px; flex-shrink:0; }
[data-s2] .s2-hud .bg { font-family:var(--font-d); font-size:12px; letter-spacing:1.6px; padding:5px 9px;
border:2.5px solid var(--ink); background:var(--yellow); color:#0A0A0A; box-shadow:3px 3px 0 var(--ink); }
[data-s2] .s2-hud .sr { display:inline-flex; align-items:center; gap:5px; font-family:var(--font-d); font-size:19px; }
[data-s2] .s2-hud .sr .nemoji { width:20px; height:20px; }
[data-s2] .s2-hud .sc { margin-left:auto; font-family:var(--font-d); font-size:26px; line-height:1; letter-spacing:-.5px; }
html[data-skin="neon"][data-theme] [data-s2] .s2-hud .bg { border-color:#0A0A0A; box-shadow:3px 3px 0 #FF5CA8; }
/* le pied : la carte suivante arrive toute seule, la barre montre le temps */
[data-s2] .s2-nxt { flex-shrink:0; border:var(--bd) solid var(--ink); background:var(--paper);
box-shadow:5px 5px 0 var(--ink); }
[data-s2] .s2-nxt .tx { display:flex; align-items:center; gap:9px; padding:9px 11px;
font-family:var(--font-d); font-size:14px; letter-spacing:1.2px; }
[data-s2] .s2-nxt .tx i { font-style:normal; margin-left:auto; font-size:17px; }
[data-s2] .s2-nxt .br { height:9px; border-top:var(--bd) solid var(--ink); background:var(--gray2); }
[data-s2] .s2-nxt .br u { display:block; height:100%; background:var(--green); }
html[data-skin="neon"][data-theme] [data-s2] .s2-nxt { box-shadow:5px 5px 0 #FF5CA8; }
html[data-skin="neon"][data-theme] [data-s2] .s2-nxt .br { background:#3E2A3B; }
/* ---------- 22 · MAQUIS — LE MODE CARTE ----------
La peau du maquis (maquette s51) : tapis vert sombre, dos de carte, plaques.
Un bloc SOMBRE : son ombre est JAUNE en light, magenta en NÉON. */
[data-s2] .s2-mq > .bd { position:relative; overflow:hidden; display:flex; align-items:center; gap:13px;
padding:12px; background:#0E2A1C; border-color:#0A0A0A; }
[data-s2] .s2-mq::before { background:#FFC400; }
[data-s2] .s2-mq .art { position:absolute; inset:0;
background-image:repeating-linear-gradient(-30deg, rgba(18,184,106,.30) 0 3px, transparent 3px 17px),
repeating-linear-gradient(30deg, rgba(18,184,106,.30) 0 3px, transparent 3px 17px); }
[data-s2] .s2-mq .dos { position:relative; z-index:2; flex:none; width:72px; height:97px; display:block;
border:3px solid #FFC400; }
[data-s2] .s2-mq .in { position:relative; z-index:2; flex:1; min-width:0; }
[data-s2] .s2-mq .t { display:block; font-family:var(--font-d); font-size:38px; line-height:1; letter-spacing:1px;
color:#FFF6E3; text-shadow:4px 4px 0 #0A0A0A; }
[data-s2] .s2-mq .d { display:block; margin-top:7px; font-family:var(--font-m); font-weight:800; font-size:9px;
letter-spacing:2.2px; color:#5BE885; }
[data-s2] .s2-mq .w { display:block; margin-top:8px; font-family:var(--font-m); font-weight:700; font-size:9px;
line-height:1.5; color:#CFD4CB; }
/* la mise à l'aveugle : PRUDENT · NORMAL · TOUT */
[data-s2] .s2-mise { display:flex; gap:8px; flex-shrink:0; }
[data-s2] .s2-mise .m { flex:1; min-width:0; border:var(--bd) solid var(--ink); box-shadow:4px 4px 0 var(--ink);
background:var(--paper); padding:9px 3px; text-align:center; }
[data-s2] .s2-mise .m b { display:block; font-family:var(--font-d); font-weight:400; font-size:23px; line-height:1; }
[data-s2] .s2-mise .m span { display:block; margin-top:5px; font-family:var(--font-m); font-weight:800; font-size:8px;
letter-spacing:1.3px; color:color-mix(in srgb,var(--ink) 58%,transparent); }
[data-s2] .s2-mise .m.all { background:var(--red); color:#FFFEF7; }
[data-s2] .s2-mise .m.all span { color:rgba(255,254,247,.8); }
html[data-skin="neon"][data-theme] [data-s2] .s2-mise .m { box-shadow:4px 4px 0 #FF5CA8; }
html[data-skin="neon"][data-theme] [data-s2] .s2-mise .m.all { border-color:#0A0A0A; box-shadow:4px 4px 0 #FFD600; }
/* CARNAGE : la carte signature, une seule dans tout le paquet */
[data-s2] .s2-carn > .bd { padding:12px; background:var(--magenta); color:#FFFEF7; }
[data-s2] .s2-carn::before { background:#0A0A0A; }
html[data-skin="neon"][data-theme] [data-s2] .s2 .s2-carn::before { background:#FFD600; }
[data-s2] .s2-carn .t { display:block; font-family:var(--font-d); font-size:34px; line-height:1; letter-spacing:2px;
text-shadow:4px 4px 0 #0A0A0A; }
[data-s2] .s2-carn .d { display:block; margin-top:9px; font-family:var(--font-m); font-weight:700; font-size:9.5px;
line-height:1.5; }
[data-s2] .s2-carn .u { display:inline-block; margin-top:9px; font-family:var(--font-d); font-size:10px; letter-spacing:1.5px;
background:#0A0A0A; color:var(--yellow); padding:4px 9px; }
/* le multiplicateur du palier : ce qu'on voit AVANT de miser */
[data-s2] .s2-mult { flex:none; font-family:var(--font-d); font-size:19px; line-height:1; padding:6px 9px;
border:2.5px solid var(--ink); color:#0A0A0A; box-shadow:2px 2px 0 var(--ink); }
html[data-skin="neon"][data-theme] [data-s2] .s2-mult { border-color:#0A0A0A; box-shadow:2px 2px 0 #FF5CA8; }
/* ---------- 23 · L'ÉVEIL — L'UNIVERS « SYSTEM » ----------
Bleu-nuit et néon cyan, dans LES DEUX peaux : c'est l'univers de l'event,
pas celui de l'app. Bloc sombre ⇒ ombre CYAN, jamais noire. */
[data-s2] .s2-sys::before { background:#5BE8FF; }
[data-s2] .s2-sys > .bd { position:relative; overflow:hidden; padding:0; background:#061428; border-color:#0A0A0A; }
[data-s2] .s2-sys .ph { display:block; position:relative; height:132px; overflow:hidden;
border-bottom:3px solid #5BE8FF; }
[data-s2] .s2-sys .ph img { object-position:50% 40%; }
/* le chasseur, posé sur la bannière : un carré encadré de cyan, penché */
[data-s2] .s2-sys .ph .who { position:absolute; right:10px; bottom:9px; width:74px; height:74px; overflow:hidden;
background:#061428; border:3px solid #5BE8FF; box-shadow:4px 4px 0 #2D7DFF; transform:rotate(-3deg); }
[data-s2] .s2-sys .ph .who img { width:100%; height:100%; object-fit:cover; object-position:50% 20%; display:block; }
[data-s2] .s2-sys .ph img { width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
/* le voile n'est PAS un dégradé de surface : c'est une trame de balayage */
[data-s2] .s2-sys .ph i { position:absolute; inset:0;
background-image:repeating-linear-gradient(0deg, rgba(6,20,40,.34) 0 2px, transparent 2px 6px); }
[data-s2] .s2-sys .ph .tg { position:absolute; left:10px; bottom:9px; white-space:nowrap;
font-family:var(--font-d); font-size:11px;
letter-spacing:2px; background:#5BE8FF; color:#061428; border:2px solid #0A0A0A; padding:3px 8px; }
[data-s2] .s2-sys .in { display:block; padding:12px; }
[data-s2] .s2-sys .t { display:block; font-family:var(--font-d); font-size:34px; line-height:1; letter-spacing:1px;
color:#FFFEF7; text-shadow:4px 4px 0 #2D7DFF; }
[data-s2] .s2-sys .d { display:block; margin-top:8px; font-family:var(--font-m); font-weight:700; font-size:9px;
line-height:1.5; letter-spacing:.6px; color:#8FB6E8; }
[data-s2] .s2-sys .bas { display:flex; align-items:center; gap:7px; margin-top:10px; }
[data-s2] .s2-sys .st { font-family:var(--font-d); font-size:11px; letter-spacing:1.5px; padding:4px 9px;
border:2px solid #0A0A0A; background:#3E2A3B; color:#FFFEF7; }
[data-s2] .s2-sys .st.off { background:#C8C8C8; color:#0A0A0A; }
/* la ligne de SYSTEM : l'encadré bleu-nuit du jeu, dans les deux peaux */
[data-s2] .s2-sysl { display:flex; align-items:center; gap:10px; flex-shrink:0; padding:10px 12px;
background:#061428; border:var(--bd) solid #5BE8FF; box-shadow:5px 5px 0 #2D7DFF; }
[data-s2] .s2-sysl .nemoji { width:21px; height:21px; flex-shrink:0; }
[data-s2] .s2-sysl .z { font-family:var(--font-d); font-size:15px; letter-spacing:1.4px; color:#5BE8FF; white-space:nowrap; }
[data-s2] .s2-sysl .x { margin-left:auto; text-align:right; font-family:var(--font-m); font-weight:800; font-size:8.5px;
letter-spacing:.7px; line-height:1.35; color:#8FB6E8; }
/* le lot en image : le GIF qu'on a gagné, encadré */
[data-s2] .s2-gif { flex:none; width:46px; height:46px; overflow:hidden; background:var(--gray2);
border:var(--bd) solid var(--ink); box-shadow:2px 2px 0 var(--ink); }
[data-s2] .s2-gif img { width:100%; height:100%; object-fit:cover; display:block; }
html[data-skin="neon"][data-theme] [data-s2] .s2-gif { border-color:#0A0A0A; box-shadow:2px 2px 0 #FF5CA8; background:#3E2A3B; }
/* ---------- 24 · JPO — LA CHARTE EPITECH ----------
Bleu #013AFB dominant + blanc. Le vert #00FF97 est FLUO : il sert d'accent
et d'ombre, JAMAIS de texte. C'est une déclinaison, pas la peau HOMIES. */
[data-s2] .s2-ep::before { background:#00FF97; }
html[data-skin="neon"][data-theme] [data-s2] .s2 .s2-ep::before { background:#00FF97; }
/* ⚠ La charte EPITECH, c'est Anton + IBM Plex SANS — pas le Plex Mono de HOMIES.
On vise les CORPS DE TEXTE, jamais les conteneurs : viser les conteneurs
écrasait l'Anton des titres qu'ils portent (« PORTES OUVERTES » avait perdu
toute sa masse) tout en laissant les cartes voisines en Mono. Les titres,
pills et étiquettes restent en Anton. */
[data-s2] :is(.s2-ep, .s2-epm, .s2-epv) :is(.desc, .d, .s2-sub, .s2-set, .in, p, small),
[data-s2] .s2-jpo :is(.desc, .d, .s2-sub, .s2-set, .st) { font-family:'IBM Plex Sans', sans-serif; }
[data-s2] .s2-jpo .st { font-family:var(--font-d); }
/* les chips restent en Anton */
[data-s2] .s2-ep > .bd { position:relative; overflow:hidden; padding:14px 13px; background:#013AFB; border-color:#0A0A0A; }
[data-s2] .s2-ep .art { position:absolute; inset:0;
background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 2px, transparent 2px 24px); }
[data-s2] .s2-ep .in { position:relative; z-index:2; }
[data-s2] .s2-ep .lg { display:block; height:22px; width:auto; }
[data-s2] .s2-ep .t { display:block; margin-top:11px; font-family:var(--font-d); font-size:34px; line-height:1;
letter-spacing:1px; color:#FFFFFF; }
[data-s2] .s2-ep .d { display:block; margin-top:8px; font-family:'IBM Plex Sans', sans-serif; font-weight:600; font-size:10px;
line-height:1.5; letter-spacing:.5px; color:rgba(255,255,255,.82); }
[data-s2] .s2-ep .gr { display:block; height:9px; margin-top:11px; background:#00FF97; border:2px solid #0A0A0A; }
[data-s2] .s2-ep .bas { display:flex; align-items:center; gap:7px; margin-top:11px; }
[data-s2] .s2-ep .st { font-family:var(--font-d); font-size:11px; letter-spacing:1.5px; padding:4px 9px;
border:2px solid #0A0A0A; background:#FFFFFF; color:#013AFB; }
/* un mode ouvert à la JPO : carte blanche, texte bleu */
[data-s2] .s2-epm > .bd { background:#FFFFFF; border-color:#0A0A0A; }
[data-s2] .s2-epm :is(.name, .nm) { color:#013AFB; }
[data-s2] .s2-epm .desc { color:rgba(1,58,251,.62); }
[data-s2] .s2-epm .emoji-box { background:#013AFB; border-color:#0A0A0A; }
[data-s2] .s2-epm .s2-tt { background:#00FF97; color:#0A0A0A; border-color:#0A0A0A; }
html[data-skin="neon"][data-theme] [data-s2] .s2-epm .s2-tt { box-shadow:2px 2px 0 #013AFB; }
/* le champ de code, à la charte : bleu sur blanc */
[data-s2] .s2-code { display:flex; gap:7px; flex-shrink:0; }
[data-s2] .s2-code i { flex:1; height:48px; border:3px solid #0A0A0A; background:#FFFFFF; box-shadow:3px 3px 0 #00FF97;
font-style:normal; font-family:var(--font-d); font-size:24px; color:#013AFB;
display:flex; align-items:center; justify-content:center; }
[data-s2] .s2-code i.vide { background:#E8E8E8; color:rgba(1,58,251,.3); }
/* ---------- 25 · LIVE OPS — LE TABLEAU DE BORD ADMIN ----------
Se lit comme un tableau de bord : des compteurs, des salles, un état. */
[data-s2] .s2-room > .bd { display:flex; flex-direction:column; align-items:stretch; gap:7px; padding:10px 11px; }
[data-s2] .s2-room .hd { display:flex; align-items:center; gap:8px; min-width:0; }
[data-s2] .s2-room .cd { flex:none; font-family:var(--font-d); font-size:20px; letter-spacing:2.5px; }
[data-s2] .s2-room .st { flex:none; font-family:var(--font-d); font-size:10px; letter-spacing:1.2px; padding:3px 7px;
border:2px solid var(--ink); background:var(--green); color:#0A0A0A; }
[data-s2] .s2-room .st.jeu { background:var(--yellow); }
[data-s2] .s2-room .st.rev { background:var(--cyan); }
[data-s2] .s2-room .st.carn { background:var(--orange); }
[data-s2] .s2-room .st.end { background:var(--gray2); }
[data-s2] .s2-room .mid { font-family:var(--font-m); font-weight:700; font-size:9.5px; letter-spacing:.4px;
color:color-mix(in srgb,var(--ink) 62%,transparent);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
[data-s2] .s2-room .cs { display:flex; gap:5px; flex-wrap:wrap; }
[data-s2] .s2-room .c { font-family:var(--font-m); font-weight:800; font-size:8.5px; letter-spacing:.6px; padding:3px 6px;
border:2px solid var(--ink); background:var(--gray2); color:#0A0A0A; display:inline-flex; align-items:center; gap:4px; }
[data-s2] .s2-room .c .nemoji { width:12px; height:12px; }
[data-s2] .s2-room .c.ko { background:var(--red); color:#FFFEF7; }
[data-s2] .s2-room .det { border-top:3px solid var(--ink); margin-top:1px; padding-top:8px;
display:flex; flex-direction:column; gap:6px; }
[data-s2] .s2-room .dq { font-family:var(--font-d); font-size:12px; letter-spacing:.4px; line-height:1.3; }
[data-s2] .s2-room .pl { display:flex; align-items:center; gap:7px; min-width:0;
font-family:var(--font-m); font-weight:700; font-size:10px; }
[data-s2] .s2-room .pl .n { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
display:inline-flex; align-items:center; gap:5px; }
[data-s2] .s2-room .pl .n .nemoji { width:14px; height:14px; }
[data-s2] .s2-room .pl .s { flex:none; font-family:var(--font-d); font-size:14px; }
[data-s2] .s2-room .pl.off { opacity:.5; }
html[data-skin="neon"][data-theme] [data-s2] .s2-room :is(.st, .c) { border-color:#0A0A0A; }
html[data-skin="neon"][data-theme] [data-s2] .s2-room .det { border-top-color:#F6EEE3; }
/* la ligne « réservé admin » : un bloc d'encre, donc une ombre colorée */
[data-s2] .s2-adm { display:flex; align-items:center; gap:9px; flex-shrink:0; padding:10px 12px;
background:#0A0A0A; border:var(--bd) solid #0A0A0A; box-shadow:5px 5px 0 var(--cyan); }
[data-s2] .s2-adm .nemoji { width:20px; height:20px; flex-shrink:0; }
[data-s2] .s2-adm .z { font-family:var(--font-d); font-size:14px; letter-spacing:1.2px; color:#5BD8E5; white-space:nowrap; }
[data-s2] .s2-adm .x { margin-left:auto; text-align:right; font-family:var(--font-m); font-weight:800; font-size:8.5px;
letter-spacing:.7px; line-height:1.35; color:#CFC3CE; }
/* L'ÉVEIL garde SON ombre cyan en NÉON : la règle magenta du socle la lui
prenait, et l'univers SYSTEM perdait sa couleur. */
html[data-skin="neon"][data-theme] [data-s2] .s2 .s2-sys::before { background:#5BE8FF; }
/* NÉON : une pastille grise sur du prune, avec une encre noire, ne se lit pas.
Scopé à ce lot pour ne pas bouger les écrans déjà validés. */
/* un bloc de rang sans métal est sombre sur du prune : on lui rend un fond clair.
Vaut pour TOUS les lots, pas seulement celui où le défaut a été vu. */
html[data-skin="neon"][data-theme] [data-s2] .s2-rkb:not(.gold):not(.silver):not(.bronze) { background:#C8C8C8; }
/* le podium de l'event : trois cartes à image. Un nom de lot ne tenait pas sur
une ligne à côté du bloc de rang ET de la vignette ; on montre donc le GIF
en grand, et la nature du lot se dit une fois sous la grille. */
[data-s2] .s2-pod .bd { display:flex; flex-direction:column; gap:7px; padding:8px 7px; }
[data-s2] .s2-pod .s2-gif { width:100%; height:auto; aspect-ratio:1; box-shadow:none; }
[data-s2] .s2-pod .s2-rkb { width:100%; align-self:auto; height:24px; font-size:16px; }
[data-s2] .s2-pod .pr { font-family:var(--font-d); font-size:12px; letter-spacing:.4px; display:inline-flex;
align-items:center; gap:4px; }
[data-s2] .s2-pod .pr .nemoji { width:13px; height:13px; }
html[data-skin="neon"][data-theme] [data-s2] .s2-pod .s2-gif { box-shadow:none; }
html[data-skin="neon"][data-theme] [data-s2] .s2-room :is(.c:not(.ko), .st.end) { background:#C8C8C8; }
/* la croix de « HÔTE », TRACÉE en CSS — jamais le glyphe ✕ */
[data-s2] .s2-room .c.ko i { position:relative; width:9px; height:9px; display:inline-block; font-style:normal; }
[data-s2] .s2-room .c.ko i::before,
[data-s2] .s2-room .c.ko i::after { content:''; position:absolute; left:50%; top:50%;
width:2.5px; height:11px; margin:-5.5px 0 0 -1.25px; background:#FFFEF7; }
[data-s2] .s2-room .c.ko i::before { transform:rotate(45deg); }
[data-s2] .s2-room .c.ko i::after { transform:rotate(-45deg); }
/* ============================================================
§ 4 — LES SOUS-RÉGLAGES
APPARENCE · AUDIO · GAMEPLAY · NOTIFICATIONS · DONNÉES · À PROPOS.
Que de la MISE EN PLACE : les bords, les ombres et les couleurs viennent de
proto.css. Aucune classe de proto.css n'est redéfinie.
============================================================ */
/* un segment à DEUX lignes : la valeur, puis ce qu'elle veut dire */
[data-s2] .s2-segv .o { flex-direction:column; gap:2px; padding:7px 5px; min-width:0; }
[data-s2] .s2-segv .o b { font-family:var(--font-d); font-weight:400; font-size:15px; letter-spacing:.6px; line-height:1; }
[data-s2] .s2-segv .o small { font-family:var(--font-m); font-weight:800; font-size:7.5px; letter-spacing:.7px;
line-height:1; white-space:nowrap; opacity:.6; }
[data-s2] .s2-segv .o.on small { opacity:.85; }
html[data-skin="neon"][data-theme] [data-s2] .s2-segv .o small { opacity:.78; }
/* un thème qui se GAGNE (SYSTEM = top 10 de L'ÉVEIL) : le cadenas est TRACÉ,
jamais un glyphe — un corps et son anse, posés sur la pastille. */
[data-s2] .s2-th2 { position:relative; }
[data-s2] .s2-th2 .lk { position:absolute; right:3px; top:3px; width:16px; height:16px; display:flex;
align-items:center; justify-content:center; background:#FFD600; border:2px solid #0A0A0A; }
[data-s2] .s2-th2 .lk .nemoji { width:10px; height:10px; }
/* ---------- 26 · APPARENCE ---------- */
/* POLICE — chaque tuile est écrite AVEC ses deux vraies polices */
[data-s2] .s2-fngrid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
[data-s2] .s2-fn { display:flex; align-items:center; gap:8px; min-width:0; padding:7px 8px;
border:var(--bd) solid var(--ink); background:var(--paper); box-shadow:3px 3px 0 var(--ink); }
[data-s2] .s2-fn .aa { flex:none; font-size:22px; line-height:1; font-weight:400; }
[data-s2] .s2-fn .tx { flex:1; min-width:0; }
[data-s2] .s2-fn .nm { display:block; font-size:12px; line-height:1.1; letter-spacing:.3px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
[data-s2] .s2-fn .ds { display:block; margin-top:2px; font-size:7px; font-weight:700; letter-spacing:.3px;
color:color-mix(in srgb,var(--ink) 55%,transparent);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
[data-s2] .s2-fn.on { background:var(--yellow); }
html[data-skin="neon"][data-theme] [data-s2] .s2-fn { box-shadow:3px 3px 0 #FF5CA8; }
html[data-skin="neon"][data-theme] [data-s2] .s2-fn.on { color:#0A0A0A; border-color:#0A0A0A; }
html[data-skin="neon"][data-theme] [data-s2] .s2-fn.on .ds { color:rgba(10,10,10,.6); }
/* FOND DE JEU — l'aperçu est un APLAT (le brandbook exclut les dégradés de
surface) : on montre les DEUX couleurs du fond, coupées net. */
[data-s2] .s2-bgs { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
[data-s2] .s2-bg { display:block; min-width:0; border:var(--bd) solid var(--ink); background:var(--paper);
box-shadow:3px 3px 0 var(--ink); overflow:hidden; }
[data-s2] .s2-bg .pv { display:block; height:38px; border-bottom:var(--bd) solid var(--ink); background:#FFFEF7; }
[data-s2] .s2-bg .k { display:block; padding:5px 4px 0; text-align:center; font-family:var(--font-d);
font-size:9px; letter-spacing:.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
[data-s2] .s2-bg .pr { display:block; padding:2px 4px 5px; text-align:center; font-family:var(--font-m);
font-weight:800; font-size:7.5px; letter-spacing:.5px; color:color-mix(in srgb,var(--ink) 55%,transparent); }
[data-s2] .s2-bg .pr .nemoji { width:9px; height:9px; vertical-align:-1px; }
[data-s2] .s2-bg.on { background:var(--yellow); }
html[data-skin="neon"][data-theme] [data-s2] .s2-bg { box-shadow:3px 3px 0 #FF5CA8; }
html[data-skin="neon"][data-theme] [data-s2] .s2-bg .pv { border-bottom-color:#0A0A0A; }
html[data-skin="neon"][data-theme] [data-s2] .s2-bg.on { color:#0A0A0A; border-color:#0A0A0A; }
html[data-skin="neon"][data-theme] [data-s2] .s2-bg.on .pr { color:rgba(10,10,10,.6); }
[data-s2] .s2-bg .pv.dots { background-image:radial-gradient(rgba(10,10,10,.24) 1.6px, transparent 1.7px);
background-size:9px 9px; }
[data-s2] .s2-bg .pv.grille { background-image:
repeating-linear-gradient(0deg,transparent 0 9px,rgba(10,10,10,.22) 9px 11px),
repeating-linear-gradient(90deg,transparent 0 9px,rgba(10,10,10,.22) 9px 11px); }
[data-s2] .s2-bg .pv.mode { background:linear-gradient(to right,
#FFD600 0 25%,#FF5252 25% 50%,#5BD8E5 50% 75%,#5BE885 75% 100%); }
[data-s2] .s2-bg .pv.bonbon { background:linear-gradient(to bottom,#FFE3F3 0 50%,#E3F4FB 50% 100%); }
[data-s2] .s2-bg .pv.menthe { background:linear-gradient(to bottom,#DCFCE7 0 50%,#E5F6FF 50% 100%); }
[data-s2] .s2-bg .pv.coucher { background:linear-gradient(to bottom,#FFE9C7 0 50%,#FFD8E4 50% 100%); }
/* ---------- 29 · NOTIFICATIONS ---------- */
/* la notification telle qu'elle TOMBE sur l'écran du joueur */
[data-s2] .s2-push .bd { display:flex; align-items:flex-start; gap:9px; padding:10px 11px; }
[data-s2] .s2-push .ic { flex:none; width:28px; height:28px; display:flex; align-items:center; justify-content:center;
border:2.5px solid var(--ink); background:var(--magenta); box-shadow:2px 2px 0 var(--ink); }
[data-s2] .s2-push .ic .nemoji { width:17px; height:17px; }
[data-s2] .s2-push .tx { flex:1; min-width:0; }
[data-s2] .s2-push .t { display:block; font-family:var(--font-d); font-size:14px; letter-spacing:.4px; line-height:1.1;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
[data-s2] .s2-push .b { display:block; margin-top:4px; font-family:var(--font-m); font-weight:700; font-size:9px;
line-height:1.4; color:color-mix(in srgb,var(--ink) 62%,transparent); }
[data-s2] .s2-push .ag { flex:none; font-family:var(--font-m); font-weight:800; font-size:7px; letter-spacing:.7px;
color:color-mix(in srgb,var(--ink) 45%,transparent); }
/* la pastille EST magenta : en NÉON son ombre passe au jaune. */
html[data-skin="neon"][data-theme] [data-s2] .s2-push .ic { border-color:#0A0A0A; box-shadow:2px 2px 0 #FFD600; }
/* ---------- 30 · DONNÉES ---------- */
/* la carte de compte : un aplat CYAN (la coche verte doit s'y détacher) */
[data-s2] .s2-acct > .bd { position:relative; overflow:hidden; display:flex; align-items:center; gap:11px;
padding:12px; background:var(--cyan); }
[data-s2] .s2-acct .bg { position:absolute; inset:0; background-image:
repeating-linear-gradient(-45deg,transparent 0 11px,rgba(10,10,10,.07) 11px 22px); }
[data-s2] .s2-acct > .bd > * { position:relative; }
[data-s2] .s2-acct .in { flex:1; min-width:0; }
[data-s2] .s2-acct .k { display:block; font-family:var(--font-m); font-weight:800; font-size:8px; letter-spacing:1.3px;
color:rgba(10,10,10,.62); }
[data-s2] .s2-acct .n { display:block; font-family:var(--font-d); font-size:24px; line-height:1.15; letter-spacing:.5px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
[data-s2] .s2-acct .d { display:block; margin-top:3px; font-family:var(--font-m); font-weight:700; font-size:8px;
letter-spacing:.4px; color:rgba(10,10,10,.6); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
html[data-skin="neon"][data-theme] [data-s2] .s2-acct > .bd { color:#0A0A0A; border-color:#0A0A0A; }
html[data-skin="neon"][data-theme] [data-s2] .s2-acct .avatar { border-color:#0A0A0A; box-shadow:4px 4px 0 #0A0A0A; }
html[data-skin="neon"][data-theme] [data-s2] .s2-acct .s2-tick { border-color:#0A0A0A; box-shadow:2px 2px 0 #0A0A0A; }
html[data-skin="neon"][data-theme] [data-s2] .s2-acct .s2-tick::after { border-color:#0A0A0A; }
/* la zone de danger se voit de loin : le filet et le mot passent au rouge */
[data-s2] .s2-div.dz i { background:var(--red); }
[data-s2] .s2-div.dz span { color:var(--red); }
/* ---------- 31 · À PROPOS ---------- */
/* le pavé HOMIES. ⚠ PAS un .card : son ombre suivrait --ink, donc NOIRE sur
un fond noir. Il porte son propre fond #0A0A0A et une ombre MAGENTA. */
[data-s2] .s2-ab { position:relative; overflow:hidden; flex-shrink:0; display:flex; flex-direction:column;
align-items:center; gap:10px; padding:20px 14px 16px; background:#0A0A0A;
border:var(--bd-strong) solid #0A0A0A; box-shadow:var(--sh) var(--sh) 0 var(--magenta); }
[data-s2] .s2-ab .art { position:absolute; inset:0;
background-image:radial-gradient(rgba(246,238,227,.16) 1.6px, transparent 1.7px); background-size:14px 14px; }
[data-s2] .s2-ab > *:not(.art) { position:relative; }
[data-s2] .s2-ab .lg { font-family:var(--font-d); font-size:52px; line-height:.9; letter-spacing:2px;
color:#FFFEF7; text-shadow:5px 5px 0 var(--magenta); }
[data-s2] .s2-ab .tg { text-align:center; font-family:var(--font-m); font-weight:700; font-size:9.5px;
line-height:1.55; color:#CFC3CE; }
[data-s2] .s2-ab .vr { font-family:var(--font-d); font-size:13px; letter-spacing:2px; padding:6px 14px;
border:var(--bd) solid #0A0A0A; background:var(--yellow); color:#0A0A0A;
box-shadow:3px 3px 0 var(--magenta); }
/* le changelog : une pastille par ligne, tracée, jamais une puce de texte */
[data-s2] .s2-log .bd { display:flex; flex-direction:column; gap:8px; padding:10px 11px; }
[data-s2] .s2-log .hd { display:flex; align-items:center; gap:9px; }
[data-s2] .s2-log .hd .t { flex:1; min-width:0; font-family:var(--font-d); font-size:15px; letter-spacing:.8px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
[data-s2] .s2-cl { display:flex; align-items:flex-start; gap:8px; }
[data-s2] .s2-cl i { flex:none; width:9px; height:9px; margin-top:3px; background:var(--magenta);
border:2px solid var(--ink); }
[data-s2] .s2-cl span { flex:1; min-width:0; font-family:var(--font-m); font-weight:700; font-size:9.5px;
line-height:1.45; color:color-mix(in srgb,var(--ink) 74%,transparent); }
/* ============================================================
§ 5 — CRÉER UNE PARTIE : LE TUNNEL DE L'HÔTE
Huit écrans qui s'ENCHAÎNENT : même barre du haut (retour + titre + numéro
d'étape) et, sous elle, le chemin nommé PACKS · NIVEAU · FORMAT · RÉCAP.
Que de la MISE EN PLACE : bords, ombres et couleurs viennent de proto.css,
et aucune de ses classes n'est redéfinie.
============================================================ */
/* le numéro d'étape, à droite de la barre */
[data-s2] .s2-nb { flex:none; font-family:var(--font-d); font-size:13px; letter-spacing:1.4px; padding:4px 8px;
border:2.5px solid var(--ink); background:var(--paper); box-shadow:2px 2px 0 var(--ink); }
html[data-skin="neon"][data-theme] [data-s2] .s2-nb { background:#FFFEF7; color:#0A0A0A; border-color:#0A0A0A; box-shadow:2px 2px 0 #FF5CA8; }
/* LE CHEMIN — quatre cases NOMMÉES. Une barre de progression anonyme ne dit
pas ce qui reste à faire ; ici on lit d'où on vient et où on va. */
/* flèches de tendance TRACÉES, jamais les glyphes ▲ ▼ (règle du brandbook,
comme les coches et les croix). Elles suivent la couleur du texte. */
[data-s2] .s2-up,
[data-s2] .s2-dn { display:inline-block; width:0; height:0; vertical-align:1px;
border-left:5px solid transparent; border-right:5px solid transparent; }
[data-s2] .s2-up { border-bottom:7px solid currentColor; }
[data-s2] .s2-dn { border-top:7px solid currentColor; }
/* la coche du chemin d'étapes : deux barres tracées, jamais le glyphe ✓ */
[data-s2] .s2-wtick { position:relative; display:inline-block; width:9px; height:9px; margin-right:4px;
vertical-align:-1px; flex:none; }
[data-s2] .s2-wtick::before,
[data-s2] .s2-wtick::after { content:''; position:absolute; background:currentColor; }
[data-s2] .s2-wtick::before { left:0; bottom:1px; width:4px; height:2px; transform:rotate(45deg);
transform-origin:left bottom; }
[data-s2] .s2-wtick::after { left:3px; bottom:1px; width:8px; height:2px; transform:rotate(-50deg);
transform-origin:left bottom; }
[data-s2] .s2-way { display:flex; gap:5px; flex-shrink:0; }
[data-s2] .s2-way span { flex:1; min-width:0; text-align:center; padding:5px 2px; border:2px solid var(--ink);
background:var(--gray2); color:color-mix(in srgb,var(--ink) 55%,transparent);
font-family:var(--font-m); font-weight:800; font-size:7.5px; letter-spacing:.9px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
[data-s2] .s2-way span.ok { background:var(--green); color:#0A0A0A; }
[data-s2] .s2-way span.on { background:var(--magenta); color:var(--paper); }
html[data-skin="neon"][data-theme] [data-s2] .s2-way span { border-color:#0A0A0A; background:#C8C8C8; color:rgba(10,10,10,.6); }
html[data-skin="neon"][data-theme] [data-s2] .s2-way span.ok { background:#5BE885; color:#0A0A0A; }
html[data-skin="neon"][data-theme] [data-s2] .s2-way span.on { background:#FF5CA8; color:#0A0A0A; }
/* le pied du tunnel : il ne défile jamais, on voit toujours ce qu'on lance */
[data-s2] .s2-foot { display:flex; align-items:center; gap:9px; flex-shrink:0; }
[data-s2] .s2-foot .cta { flex:1; min-width:0; }
/* ---------- 32 · PARTIE RAPIDE ---------- */
/* le format TIRÉ AU SORT : un aplat plein, l'objet principal de l'écran */
[data-s2] .s2-rap > .bd { display:flex; align-items:center; gap:12px; padding:12px; }
[data-s2] .s2-rap .gh { width:46px; height:46px; flex-shrink:0; }
[data-s2] .s2-rap .tx { flex:1; min-width:0; }
[data-s2] .s2-rap .k { display:block; font-family:var(--font-m); font-weight:800; font-size:8px; letter-spacing:1.7px; }
[data-s2] .s2-rap .nm { display:block; margin-top:4px; font-family:var(--font-d); font-size:26px; line-height:1.15;
letter-spacing:.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
[data-s2] .s2-rap .tg { display:block; margin-top:5px; font-family:var(--font-m); font-weight:700; font-size:9px;
letter-spacing:.4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
html[data-skin="neon"][data-theme] [data-s2] .s2-rap > .bd { color:#0A0A0A; border-color:#0A0A0A; }
html[data-skin="neon"][data-theme] [data-s2] .s2-rap > .bd * { color:#0A0A0A; }
/* ce qui a été tiré : une puce par pack, avec son compte */
[data-s2] .s2-cats { display:flex; flex-wrap:wrap; gap:6px; }
[data-s2] .s2-cat { display:inline-flex; align-items:center; gap:5px; max-width:100%; padding:4px 7px;
border:2.5px solid var(--ink); background:var(--paper); box-shadow:2px 2px 0 var(--ink);
font-family:var(--font-m); font-weight:800; font-size:8.5px; letter-spacing:.5px; }
[data-s2] .s2-cat .nemoji { width:13px; height:13px; }
[data-s2] .s2-cat .s2-flag { width:15px; height:11px; border-width:1.5px; }
[data-s2] .s2-cat b { font-family:var(--font-d); font-weight:400; font-size:12px; letter-spacing:.3px; }
html[data-skin="neon"][data-theme] [data-s2] .s2-cat { box-shadow:2px 2px 0 #FF5CA8; }
/* ---------- 33 · LES PACKS ---------- */
/* une tuile = la VRAIE couleur du pack (packs/*.js) ; l'encre y est toujours
noire, sur les deux peaux, parce que l'aplat, lui, ne change pas. */
[data-s2] .s2-pkg { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
[data-s2] .s2-pk { position:relative; display:flex; flex-direction:column; gap:6px; min-width:0; padding:9px;
border:var(--bd) solid var(--ink); box-shadow:4px 4px 0 var(--ink); color:#0A0A0A; overflow:hidden; }
/* l'emoji du pack, en grand dans l'angle — `--fil` est posée par 03_packs.js,
qui lit la même table que l'icône du haut. Mêmes chiffres que partout
ailleurs dans le jeu : 80 px, opacité .15, angle bas-droit. */
[data-s2] .s2-pk::after {
content:''; position:absolute; right:-16px; bottom:-18px; z-index:0;
width:80px; height:80px; opacity:.15; pointer-events:none;
background:var(--fil) center / contain no-repeat;
}
/* sur un pack SOMBRE, le filigrane noir ne se voit pas : on l'éclaircit */
[data-s2] .s2-pk.dk::after { opacity:.28; }
[data-s2] .s2-pk > :not(.s2-pkx) { position:relative; z-index:2; }
/* ⚠ L'ICÔNE PORTE SON OMBRE. Edwin : « sur les mêmes cadres, il faut que les
emojis aient l'ombre portée noire ». Elle avait son bord mais pas son ombre :
c'était la seule icône du jeu à flotter sans relief. */
[data-s2] .s2-pk .ic { width:30px; height:30px; flex-shrink:0; display:flex; align-items:center;
justify-content:center; border:2.5px solid #0A0A0A; background:#FFFEF7;
box-shadow:3px 3px 0 #0A0A0A; position:relative; z-index:2; }
[data-s2] .s2-pk .ic .nemoji { width:20px; height:20px; }
[data-s2] .s2-pk .ic .s2-flag { width:22px; height:15px; border-width:0; }
[data-s2] .s2-pk .nm { font-family:var(--font-d); font-size:13px; letter-spacing:.3px; line-height:1.55;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
[data-s2] .s2-pk .ds { font-family:var(--font-m); font-weight:800; font-size:8px; letter-spacing:.6px;
color:rgba(10,10,10,.6); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
[data-s2] .s2-pk .stepper .sval { font-size:18px; min-width:20px; }
[data-s2] .s2-pk .stepper .sbtn { width:26px; height:26px; }
/* LA TUILE SOMBRE (le MIX) NE PEUT PAS PORTER UNE OMBRE NOIRE. */
[data-s2] .s2-pk.dk { color:#FFFEF7; box-shadow:4px 4px 0 var(--magenta); }
[data-s2] .s2-pk.dk .ds { color:rgba(255,254,247,.66); }
[data-s2] .s2-pk.dk .stepper .sbtn { border-color:#0A0A0A; box-shadow:2px 2px 0 #0A0A0A; }
/* pas possédé : le voile et le prix, comme dans l'app */
[data-s2] .s2-pk .lk { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
justify-content:center; gap:5px; background:rgba(10,10,10,.74); color:#FFFEF7;
font-family:var(--font-d); font-size:13px; letter-spacing:1px; }
[data-s2] .s2-pk .lk .nemoji { width:19px; height:19px; }
html[data-skin="neon"][data-theme] [data-s2] .s2-pk .stepper .sbtn { border-color:#0A0A0A; box-shadow:2px 2px 0 #0A0A0A; }
/* le bouton « en ajouter » : le + est TRACÉ, jamais le glyphe */
[data-s2] .s2-more { display:flex; align-items:center; justify-content:center; gap:9px; flex-shrink:0; padding:10px;
border:var(--bd) dashed var(--ink); background:var(--paper);
font-family:var(--font-d); font-size:13px; letter-spacing:1.4px; }
[data-s2] .s2-more i { position:relative; display:block; width:14px; height:14px; flex-shrink:0; }
[data-s2] .s2-more i::before,
[data-s2] .s2-more i::after { content:''; position:absolute; left:50%; top:50%; background:var(--ink); }
[data-s2] .s2-more i::before { width:14px; height:3px; margin:-1.5px 0 0 -7px; }
[data-s2] .s2-more i::after { width:3px; height:14px; margin:-7px 0 0 -1.5px; }
[data-s2] .s2-more.moins i::after { display:none; }
/* ---------- 34 · L'ÉDITEUR ---------- */
[data-s2] .s2-qn { flex:none; width:28px; height:28px; display:flex; align-items:center; justify-content:center;
border:2.5px solid var(--ink); background:var(--yellow); color:#0A0A0A; box-shadow:2px 2px 0 var(--ink);
font-family:var(--font-d); font-size:14px; }
html[data-skin="neon"][data-theme] [data-s2] .s2-qn { border-color:#0A0A0A; box-shadow:2px 2px 0 #FF5CA8; }
/* le titre du quiz : un vrai champ, posé comme dans l'app */
[data-s2] .s2-ttl { display:flex; align-items:center; gap:9px; flex-shrink:0; padding:10px 11px;
border:var(--bd) solid var(--ink); background:var(--paper); box-shadow:4px 4px 0 var(--ink); }
[data-s2] .s2-ttl .k { flex:none; font-family:var(--font-m); font-weight:800; font-size:8px; letter-spacing:1.5px;
color:color-mix(in srgb,var(--ink) 55%,transparent); }
[data-s2] .s2-ttl .v { flex:1; min-width:0; font-family:var(--font-d); font-size:18px; letter-spacing:.5px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
html[data-skin="neon"][data-theme] [data-s2] .s2-ttl { box-shadow:4px 4px 0 #FF5CA8; }
/* ---------- 35 · LE NIVEAU ---------- */
[data-s2] .s2-difs { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
[data-s2] .s2-dif { display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; padding:10px 4px;
border:var(--bd) solid var(--ink); background:var(--paper); box-shadow:4px 4px 0 var(--ink); }
[data-s2] .s2-dif .nemoji { width:28px; height:28px; }
[data-s2] .s2-dif .n { max-width:100%; font-family:var(--font-d); font-size:11.5px; letter-spacing:.4px; line-height:1.3;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
[data-s2] .s2-dif .g { display:flex; gap:2px; }
[data-s2] .s2-dif .g i { width:6px; height:6px; background:var(--gray2); border:1.5px solid var(--ink); }
[data-s2] .s2-dif .g i.f { background:var(--red); }
[data-s2] .s2-dif.on { background:var(--yellow); color:#0A0A0A; }
html[data-skin="neon"][data-theme] [data-s2] .s2-dif { box-shadow:4px 4px 0 #FF5CA8; }
html[data-skin="neon"][data-theme] [data-s2] .s2-dif .g i { border-color:#0A0A0A; background:#C8C8C8; }
html[data-skin="neon"][data-theme] [data-s2] .s2-dif .g i.f { background:#FF5252; }
html[data-skin="neon"][data-theme] [data-s2] .s2-dif.on { border-color:#0A0A0A; }
/* ---------- 38 · LE SALON (maquette validée s33b ②) ---------- */
/* la carte du code : l'objet le plus gros de l'écran, le QR vit DEDANS */
[data-s2] .s2-cod { display:flex; align-items:center; gap:11px; flex-shrink:0; padding:11px 12px;
border:var(--bd-strong) solid var(--ink); background:var(--yellow); color:#0A0A0A;
box-shadow:var(--sh) var(--sh) 0 var(--ink); }
/* LE LABEL AU-DESSUS DU CODE, À TOUTE LARGEUR. `.cl`, `.cd` et `.acts` sont
des : sans direction imposée ils coulent EN LIGNE dès que la largeur
le permet. À 390 px le code (36 px, interlettre 4) ne tenait pas à côté du
label et passait à la ligne — ça ressemblait à une colonne par accident. À
437 px il tenait : « CODE DE LA SALLE » se retrouvait à gauche et le code
collé à droite. La colonne est maintenant explicite. */
[data-s2] .s2-cod .lf { flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; }
[data-s2] .s2-cod .cl { font-family:var(--font-m); font-weight:800; font-size:8.5px; letter-spacing:2px;
color:rgba(10,10,10,.6); }
[data-s2] .s2-cod .cd { font-family:var(--font-d); font-size:36px; letter-spacing:4px; line-height:1.2; white-space:nowrap; }
[data-s2] .s2-cod .acts { display:flex; gap:6px; margin-top:7px; }
html[data-skin="neon"][data-theme] [data-s2] .s2-cod { border-color:#0A0A0A; box-shadow:var(--sh) var(--sh) 0 #FF5CA8; }
[data-s2] .s2-cbt { display:inline-flex; align-items:center; gap:5px; padding:4px 8px;
border:2.5px solid #0A0A0A; background:#FFFEF7; box-shadow:2px 2px 0 #0A0A0A; color:#0A0A0A;
font-family:var(--font-d); font-size:10px; letter-spacing:.6px; }
[data-s2] .s2-cbt .nemoji { width:13px; height:13px; }
/* COPIER : deux feuilles décalées, TRACÉES — 📋 n'existe pas en emoji animé */
[data-s2] .s2-cp { position:relative; display:block; width:16px; height:16px; flex-shrink:0; }
[data-s2] .s2-cp::before { content:''; position:absolute; left:0; top:0; width:11px; height:13px;
border:2.5px solid #0A0A0A; background:#FFD600; }
[data-s2] .s2-cp::after { content:''; position:absolute; right:0; bottom:0; width:11px; height:13px;
border:2.5px solid #0A0A0A; background:#FFFEF7; }
/* le QR, dessiné : trois repères et une trame carrée */
[data-s2] .s2-qr { position:relative; width:74px; height:74px; flex-shrink:0; background:#FFFEF7;
border:var(--bd) solid #0A0A0A; box-shadow:3px 3px 0 var(--magenta); }
[data-s2] .s2-qr i { position:absolute; width:17px; height:17px; border:4px solid #0A0A0A; }
[data-s2] .s2-qr i:nth-child(1) { top:5px; left:5px; }
[data-s2] .s2-qr i:nth-child(2) { top:5px; right:5px; }
[data-s2] .s2-qr i:nth-child(3) { bottom:5px; left:5px; }
[data-s2] .s2-qr u { position:absolute; inset:27px 6px 6px 27px;
background:repeating-conic-gradient(#0A0A0A 0 25%,#FFFEF7 0 50%); background-size:7px 7px; }
/* le bloc de deux actions : INVITER | UN BOT */
[data-s2] .s2-two { display:flex; gap:8px; flex-shrink:0; }
[data-s2] .s2-two > * { flex:1; min-width:0; }
/* une carte joueur : avatar, pseudo, pays · NIV, grade, puis l'action */
[data-s2] .s2-prow { display:flex; align-items:center; gap:10px; min-height:60px; padding:8px 10px;
border:var(--bd) solid var(--ink); background:var(--paper); box-shadow:4px 4px 0 var(--ink); }
[data-s2] .s2-prow.host { background:var(--yellow); color:#0A0A0A; }
[data-s2] .s2-prow .avatar { box-shadow:2px 2px 0 var(--ink); }
[data-s2] .s2-prow .meta { flex:1; min-width:0; }
[data-s2] .s2-prow .nm { font-family:var(--font-d); font-size:15px; letter-spacing:.4px; line-height:1.25;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
[data-s2] .s2-prow .cty { display:flex; align-items:center; gap:5px; margin-top:5px; min-width:0;
font-family:var(--font-m); font-weight:800; font-size:8.5px; letter-spacing:.5px;
color:color-mix(in srgb,var(--ink) 60%,transparent);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
[data-s2] .s2-prow.host .cty { color:rgba(10,10,10,.6); }
[data-s2] .s2-prow .bdg { display:flex; align-items:center; gap:4px; flex-shrink:0; }
/* la place vide : elle appelle le partage du code, elle ne se contente pas d'un trou */
[data-s2] .s2-prow.vide { background:var(--gray2); border-style:dashed; box-shadow:none;
color:color-mix(in srgb,var(--ink) 55%,transparent); }
[data-s2] .s2-prow .pha { width:42px; height:42px; flex-shrink:0; display:flex; align-items:center;
justify-content:center; border:2.5px dashed color-mix(in srgb,var(--ink) 45%,transparent);
font-family:var(--font-d); font-size:21px; }
html[data-skin="neon"][data-theme] [data-s2] .s2-prow { box-shadow:4px 4px 0 #FF5CA8; }
html[data-skin="neon"][data-theme] [data-s2] .s2-prow.host { border-color:#0A0A0A; }
html[data-skin="neon"][data-theme] [data-s2] .s2-prow.host .avatar { box-shadow:2px 2px 0 #0A0A0A; border-color:#0A0A0A; }
html[data-skin="neon"][data-theme] [data-s2] .s2-prow.vide { background:#3E2A3B; box-shadow:none; }
/* les badges de la ligne : HÔTE · TOI · le grade */
[data-s2] .s2-bm { flex:none; line-height:1; padding:4px 6px; border:2px solid var(--ink);
background:var(--paper); color:#0A0A0A; box-shadow:1px 1px 0 var(--ink);
font-family:var(--font-d); font-size:9px; letter-spacing:.8px; }
[data-s2] .s2-bm .nemoji { width:11px; height:11px; vertical-align:-1px; }
[data-s2] .s2-bm.host { background:var(--magenta); color:var(--paper); }
[data-s2] .s2-bm.rank { background:var(--cyan); }
/* « TOI » est un bloc d'ENCRE : son ombre est magenta, jamais noire */
[data-s2] .s2-bm.toi { background:#0A0A0A; color:var(--green); border-color:#0A0A0A; box-shadow:1px 1px 0 var(--magenta); }
/* en NÉON ces pastilles sont posées sur du PRUNE : une ombre noire s'y noie.
Magenta par défaut, noire seulement dans la ligne de l'hôte (aplat jaune). */
html[data-skin="neon"][data-theme] [data-s2] .s2-bm { background:#FFFEF7; border-color:#0A0A0A; box-shadow:1px 1px 0 #FF5CA8; }
/* dans la ligne de l'HÔTE, le fond est un aplat JAUNE : chaque pastille prend
l'ombre qui tranche sur le jaune ET sur sa propre couleur.
crème → noire · magenta → noire · noire → crème. */
html[data-skin="neon"][data-theme] [data-s2] .s2-prow.host .s2-bm { box-shadow:1px 1px 0 #0A0A0A; }
html[data-skin="neon"][data-theme] [data-s2] .s2-prow.host .s2-bm.toi { box-shadow:1px 1px 0 #F6EEE3; }
html[data-skin="neon"][data-theme] [data-s2] .s2-bm.host { background:#FF5CA8; color:#0A0A0A; box-shadow:1px 1px 0 #FFD600; }
html[data-skin="neon"][data-theme] [data-s2] .s2-bm.rank { background:#5BD8E5; }
html[data-skin="neon"][data-theme] [data-s2] .s2-bm.toi { background:#0A0A0A; color:#5BE885; box-shadow:1px 1px 0 #FFD600; }
/* ✏️ CYAN = modifier MON avatar · ✕ ROUGE = exclure un joueur.
Les deux signes sont TRACÉS en CSS, portés par un SANS fond. */
[data-s2] .s2-pen,
[data-s2] .s2-kick { display:flex; align-items:center; justify-content:center; width:28px; height:28px;
flex-shrink:0; border:2.5px solid var(--ink); box-shadow:2px 2px 0 var(--ink); }
[data-s2] .s2-pen { background:var(--cyan); }
[data-s2] .s2-kick { background:var(--red); }
[data-s2] .s2-pen i,
[data-s2] .s2-kick i { position:relative; display:block; width:16px; height:16px; }
[data-s2] .s2-pen i::before { content:''; position:absolute; left:50%; top:50%; width:5px; height:17px;
margin:-8.5px 0 0 -2.5px; background:#0A0A0A; transform:rotate(45deg);
clip-path:polygon(0 0,100% 0,100% 76%,50% 100%,0 76%); }
[data-s2] .s2-kick i::before,
[data-s2] .s2-kick i::after { content:''; position:absolute; left:50%; top:50%;
width:3px; height:16px; margin:-8px 0 0 -1.5px; background:#FFFEF7; }
[data-s2] .s2-kick i::before { transform:rotate(45deg); }
[data-s2] .s2-kick i::after { transform:rotate(-45deg); }
html[data-skin="neon"][data-theme] [data-s2] :is(.s2-pen, .s2-kick) { border-color:#0A0A0A; box-shadow:2px 2px 0 #FF5CA8; }
html[data-skin="neon"][data-theme] [data-s2] .s2-prow.host :is(.s2-pen, .s2-kick) { box-shadow:2px 2px 0 #0A0A0A; }
/* ---------- 39 · REJOINDRE (l'autre bout du salon) ---------- */
/* l'entrée EN DIRECT : un bloc d'encre, donc une ombre colorée */
[data-s2] .s2-live { display:flex; align-items:center; gap:9px; flex-shrink:0; padding:9px 11px;
background:#0A0A0A; border:var(--bd) solid #0A0A0A; box-shadow:4px 4px 0 var(--red); }
[data-s2] .s2-live .dot { flex:none; width:12px; height:12px; background:var(--red); border:2px solid #FFFEF7; }
[data-s2] .s2-live .tx { flex:1; min-width:0; }
[data-s2] .s2-live .t { display:block; font-family:var(--font-d); font-size:14px; letter-spacing:1px; color:#FFD600;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
[data-s2] .s2-live .s { display:block; margin-top:3px; font-family:var(--font-m); font-weight:700; font-size:8.5px;
letter-spacing:.3px; color:#CFC3CE; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
[data-s2] .s2-live .ar { flex:none; font-family:var(--font-d); font-size:20px; color:#FFFEF7; }
/* les deux chemins, séparés par un OU */
[data-s2] .s2-or { display:flex; align-items:center; gap:10px; flex-shrink:0; }
[data-s2] .s2-or i { flex:1; height:3px; background:color-mix(in srgb,var(--ink) 34%,transparent); }
[data-s2] .s2-or span { font-family:var(--font-d); font-size:12px; letter-spacing:2.5px; }
/* SCANNER : l'autre chemin, aussi gros que le premier */
[data-s2] .s2-scan { display:flex; align-items:center; gap:11px; flex-shrink:0; padding:11px;
border:var(--bd) solid var(--ink); background:var(--cyan); color:#0A0A0A;
box-shadow:var(--sh) var(--sh) 0 var(--ink); }
[data-s2] .s2-scan .nemoji { width:34px; height:34px; flex-shrink:0; }
[data-s2] .s2-scan .tx { flex:1; min-width:0; }
[data-s2] .s2-scan .t { display:block; font-family:var(--font-d); font-size:17px; letter-spacing:.7px; line-height:1.3;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
[data-s2] .s2-scan .s { display:block; margin-top:4px; font-family:var(--font-m); font-weight:700; font-size:8.5px;
letter-spacing:.3px; color:rgba(10,10,10,.62); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
[data-s2] .s2-scan .ar { flex:none; font-family:var(--font-d); font-size:22px; }
html[data-skin="neon"][data-theme] [data-s2] .s2-scan { border-color:#0A0A0A; box-shadow:var(--sh) var(--sh) 0 #FF5CA8; }
/* la palette de couleurs de l'avatar */
[data-s2] .s2-cols { display:flex; gap:6px; flex-shrink:0; }
[data-s2] .s2-cols i { flex:1; height:24px; border:2.5px solid var(--ink); }
[data-s2] .s2-cols i.on { border-width:5px; }
html[data-skin="neon"][data-theme] [data-s2] .s2-cols i { border-color:#0A0A0A; }
/* les cases du code : la peau NÉON leur rend une encre noire et une ombre magenta */
html[data-skin="neon"][data-theme] [data-s2] .codecells .cell { box-shadow:3px 3px 0 #FF5CA8; }
html[data-skin="neon"][data-theme] [data-s2] .codecells .cell.filled { color:#0A0A0A; border-color:#0A0A0A; }
/* retouches de mise en place du § 5 */
[data-s2] .s2-chips .pill { flex:none; }
[data-s2] .s2-dif .g i.a { background:var(--cyan); }
html[data-skin="neon"][data-theme] [data-s2] .s2-dif .g i.a { background:#5BD8E5; }
[data-s2] .s2-ttl .nemoji { width:18px; height:18px; flex:none; }
/* le « + AJOUTER » posé DANS une tuile de pack : compact, et toujours clair —
la tuile garde sa couleur sur les deux peaux, l'encre y reste noire. */
[data-s2] .s2-pk .s2-more { padding:5px 4px; gap:7px; font-size:10px; letter-spacing:.8px;
border-width:2.5px; border-color:#0A0A0A; background:#FFFEF7; color:#0A0A0A; }
[data-s2] .s2-pk .s2-more i { width:11px; height:11px; }
[data-s2] .s2-pk .s2-more i::before { width:11px; height:2.5px; margin:-1.25px 0 0 -5.5px; background:#0A0A0A; }
[data-s2] .s2-pk .s2-more i::after { width:2.5px; height:11px; margin:-5.5px 0 0 -1.25px; background:#0A0A0A; }
/* le tirage, en petit, dans le coin du hero de la PARTIE RAPIDE */
[data-s2] .s2-rap .s2-mini { flex:none; }
/* ============================================================
§ 6a — EN PARTIE : LE CŒUR DU JEU
Huit écrans PLEIN CADRE. En jeu il n'y a ni barre du bas ni marge d'écran :
le HUD tient en haut, l'aire de jeu prend tout le reste, le pied dit qui a
déjà répondu. Que de la MISE EN PLACE — bords, ombres et couleurs viennent
de proto.css, et aucune de ses classes n'est redéfinie ; on annule seulement
le déport d'écran de .qcard / .options, comme .s2-play le fait déjà pour
RAFALE.
============================================================ */
/* l'écran de jeu : plus de padding 18/16, la trame et les barres touchent les bords */
[data-s2] .s2.s2-g { padding:0; gap:0; }
/* une rangée de pills CENTRÉE qui retourne à la ligne : .s2-chips, lui, défile
et coupe ses bords — ce qui rognait les deux pills de l'écran 43. */
[data-s2] .s2-pills { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; }
/* ---------- ① LE HUD DU HAUT ----------
Un bloc d'ENCRE plein cadre : tout ce qu'on y pose porte une ombre COLORÉE. */
[data-s2] .s2-ghdr { display:flex; align-items:center; gap:9px; flex-shrink:0; padding:9px 11px;
background:#0A0A0A; }
/* la croix « quitter », TRACÉE en CSS — jamais le glyphe ✕ */
[data-s2] .s2-ghdr .x { position:relative; width:27px; height:27px; flex:none; border:2.5px solid #FFFEF7; }
[data-s2] .s2-ghdr .x::before,
[data-s2] .s2-ghdr .x::after { content:''; position:absolute; left:50%; top:50%;
width:3px; height:15px; margin:-7.5px 0 0 -1.5px; background:#FFFEF7; }
[data-s2] .s2-ghdr .x::before { transform:rotate(45deg); }
[data-s2] .s2-ghdr .x::after { transform:rotate(-45deg); }
[data-s2] .s2-ghdr .q { flex:none; font-family:var(--font-d); font-size:15px; letter-spacing:1.6px;
color:var(--yellow); white-space:nowrap; }
[data-s2] .s2-ghdr .sp { flex:1; }
/* le chrono PÈSE : c'est le plus gros chiffre de la barre. Bloc CLAIR posé sur
l'encre — son ombre ne peut être ni crème ni noire : magenta. */
[data-s2] .s2-ghdr .tm { flex:none; display:inline-flex; align-items:baseline; gap:4px; padding:2px 9px 3px;
border:2.5px solid #0A0A0A; background:#FFFEF7; box-shadow:3px 3px 0 var(--magenta); }
[data-s2] .s2-ghdr .tm b { font-family:var(--font-d); font-size:25px; line-height:1; color:#E02020; }
[data-s2] .s2-ghdr .tm i { font-style:normal; font-family:var(--font-m); font-weight:800; font-size:8px;
letter-spacing:.8px; color:rgba(10,10,10,.55); }
/* le ping : trois barres, pas une icône */
[data-s2] .s2-ping { flex:none; display:inline-flex; align-items:flex-end; gap:2px; height:15px; }
[data-s2] .s2-ping i { display:block; width:4px; background:#5BE885; }
[data-s2] .s2-ping i:nth-child(1) { height:6px; }
[data-s2] .s2-ping i:nth-child(2) { height:10px; }
[data-s2] .s2-ping i:nth-child(3) { height:15px; }
[data-s2] .s2-ping i.off { background:#4A4A4A; }
/* la mèche du temps : elle court sous le HUD, on la voit fondre */
[data-s2] .s2-fuse { flex-shrink:0; height:11px; background:var(--gray2); border-bottom:var(--bd) solid var(--ink); }
[data-s2] .s2-fuse i { display:block; height:100%; background:var(--red); border-right:var(--bd) solid var(--ink); }
html[data-skin="neon"][data-theme] [data-s2] .s2-fuse { background:#3E2A3B; border-bottom-color:#0A0A0A; }
html[data-skin="neon"][data-theme] [data-s2] .s2-fuse i { border-right-color:#0A0A0A; }
/* ---------- ② L'AIRE DE JEU ---------- */
[data-s2] .s2-gbody { flex:1; min-height:0; overflow-y:auto; overflow-x:clip; display:flex; flex-direction:column;
gap:10px; padding:11px 13px 13px; scrollbar-width:none; }
[data-s2] .s2-gbody::-webkit-scrollbar { display:none; }
[data-s2] .s2-gbody > .listcard { margin-bottom:0; }
/* ⚠ NE JAMAIS METTRE `flex:none` SUR TOUS LES ENFANTS DE `.s2-gbody`.
Je l'ai fait pour empêcher un écrasement — et j'ai cassé tout l'inverse :
`play.css` borne DÉJÀ cette colonne avec soin (`.mob-media` en
`flex:0 1 auto; max-height:34vh`, les cases de la grille à 15vh, la zone de
réponse à `min-height:34vh`). Le `flex:none` a supprimé ces bornes : chaque
image de « 4 IMAGES 1 MOT » prenait toute la largeur et un demi-écran de
haut, et on défilait sans fin. Les bornes de play.css sont les bonnes. */
/* en jeu, l'énoncé et les quatre réponses sont les plus gros objets de l'écran :
on leur rend la taille du brandbook (.s2-play les avait rétrécis pour tenir
dans la colonne étroite de RAFALE, au § 3b). */
[data-s2] .s2-g .qcard .bd { font-size:20px; padding:16px; }
/* ⚠ L'OMBRE MANGE LA GOUTTIÈRE. `.opt .sh` déborde de 5 px sous chaque réponse :
à 11 px de gap il ne restait que 6 px de blanc, et la colonne paraissait
soudée. Edwin : « lorsqu'on répond aux questions c'est groupé, en termes de
design c'est pas fou ». 16 px de gap = 11 px réellement vus. */
[data-s2] .s2-g .options { gap:16px; }
[data-s2] .s2-g .opt .bd { padding:15px 13px; }
[data-s2] .s2-g .opt .text { font-size:16px; }
/* l'étiquette de manche écrit son ombre dans un enfant .sh (pas un ::before) :
la règle magenta du socle ne la voyait pas. Scopé à l'écran de jeu pour ne
pas bouger les vignettes déjà validées. */
html[data-skin="neon"][data-theme] [data-s2] .s2-g .type-pill > .sh { background:#FF5CA8; }
/* ---------- ③ LE PIED : QUI A DÉJÀ RÉPONDU ---------- */
[data-s2] .s2-gfoot { display:flex; align-items:center; gap:9px; flex-shrink:0; padding:8px 12px;
border-top:var(--bd) solid var(--ink); background:var(--paper); }
[data-s2] .s2-gfoot .avs { display:flex; flex:none; }
[data-s2] .s2-gfoot .avs .avatar { box-shadow:none; }
[data-s2] .s2-gfoot .avs .avatar + .avatar { margin-left:-12px; }
html[data-skin="neon"][data-theme] [data-s2] .s2-gfoot .avs .avatar { box-shadow:none; border-color:#0A0A0A; }
/* ⚠ PAS « .t » : .s2-sent .t et .s2-tr .lb pèsent pareil et passent APRÈS —
le compteur du pied repassait en Anton 42 px et se faisait couper. */
[data-s2] .s2-gfoot .ct { flex:1; min-width:0; font-family:var(--font-d); font-size:12.5px; letter-spacing:1px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* ---------- ④ LE BANDEAU DE FORMAT (fmt-hud) — ICI : L'OBJECTIF DE LA TAUPE ----------
Un pavé d'ENCRE posé dans l'aire de jeu, donc une ombre VIOLETTE (la couleur
du format, jamais celle du bloc ni celle du fond). */
[data-s2] .s2-tpg { flex-shrink:0; padding:9px 11px; background:#0A0A0A; border:var(--bd) solid #0A0A0A;
box-shadow:5px 5px 0 var(--purple); }
[data-s2] .s2-tpg .hd { display:flex; align-items:center; gap:8px; min-width:0; }
[data-s2] .s2-tpg .k { flex:1; min-width:0; font-family:var(--font-m); font-weight:800; font-size:8.5px;
letter-spacing:1.9px; color:#CFC3CE; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
[data-s2] .s2-tpg .sus { flex:none; font-family:var(--font-d); font-size:10px; letter-spacing:1.2px;
background:var(--purple); color:#FFFEF7; border:2px solid #FFFEF7; padding:2px 7px; white-space:nowrap; }
[data-s2] .s2-tpg .g { margin-top:6px; font-family:var(--font-d); font-size:25px; line-height:1; color:var(--yellow);
white-space:nowrap; }
[data-s2] .s2-tpg .g span { font-size:14px; color:#CFC3CE; }
[data-s2] .s2-tpg .bar { margin-top:7px; height:11px; background:#3E2A3B; border:2px solid #FFFEF7; }
[data-s2] .s2-tpg .bar i { display:block; height:100%; background:var(--purple); border-right:2px solid #FFFEF7; }
/* ---------- 42 · ÇA COMMENCE (3 · 2 · 1) ----------
L'écran de lancement : un aplat à ARTWORK, le chiffre en masse, la frise des
trois temps. En NÉON ce n'est pas le light recolorié : c'est une nuit
traversée de néons magenta. */
[data-s2] .s2-ready { position:absolute; inset:0; overflow:hidden; display:flex; flex-direction:column;
align-items:center; gap:11px; padding:22px 16px; background:var(--magenta); }
[data-s2] .s2-ready .art { position:absolute; inset:0;
background-image:
radial-gradient(rgba(10,10,10,.30) 1.7px, transparent 1.8px),
repeating-linear-gradient(-30deg, rgba(10,10,10,.18) 0 4px, transparent 4px 20px);
background-size:10px 10px, auto; }
[data-s2] .s2-ready > *:not(.art):not(.s2-floats) { position:relative; z-index:2; }
[data-s2] .s2-ready .sp { flex:1; }
[data-s2] .s2-ready .k { font-family:var(--font-m); font-weight:800; font-size:10px; letter-spacing:3.2px;
color:var(--paper); }
[data-s2] .s2-ready .t { text-align:center; font-family:var(--font-d); font-size:46px; line-height:.95;
letter-spacing:1px; color:var(--paper); text-shadow:6px 6px 0 #0A0A0A; white-space:nowrap; }
[data-s2] .s2-ready .n { font-family:var(--font-d); font-size:158px; line-height:1; letter-spacing:-6px;
color:var(--paper); text-shadow:10px 10px 0 #0A0A0A; }
[data-s2] .s2-ready .dots { display:flex; gap:10px; }
[data-s2] .s2-ready .dots i { width:24px; height:24px; background:#0A0A0A; border:3px solid var(--paper); }
[data-s2] .s2-ready .dots i.on { background:var(--yellow); }
html[data-skin="neon"][data-theme] [data-s2] .s2-ready { background:#1C0F1A; }
html[data-skin="neon"][data-theme] [data-s2] .s2-ready .art { background-image:
radial-gradient(rgba(255,92,168,.34) 1.7px, transparent 1.8px),
repeating-linear-gradient(-30deg, rgba(255,92,168,.17) 0 4px, transparent 4px 20px); }
/* ⚠ var(--paper) vaut le PRUNE en NÉON : le nom de la partie disparaissait. */
html[data-skin="neon"][data-theme] [data-s2] .s2-ready .k { color:#F2E6F0; }
html[data-skin="neon"][data-theme] [data-s2] .s2-ready .t { color:#FFFEF7; text-shadow:6px 6px 0 #FF5CA8; }
html[data-skin="neon"][data-theme] [data-s2] .s2-ready .n { color:#FFFEF7; text-shadow:10px 10px 0 #FF5CA8; }
html[data-skin="neon"][data-theme] [data-s2] .s2-ready .dots i { border-color:#FFFEF7; }
/* les quatre emojis qui gravitent autour du chiffre — placés ici, pas dans une
balise