/* ============================================================================
   HOMIES — SAISON 2 · LA COLLE DES 6 SOUS-ÉCRANS DE RÉGLAGES (dernière vague)
   APPARENCE · AUDIO · GAMEPLAY · NOTIFICATIONS · DONNÉES · À PROPOS
   ----------------------------------------------------------------------------
   Même principe que les vagues précédentes : `saison2-socle.css` porte TOUT le
   dessin (il est généré, on n'y touche pas). Ce fichier ne dessine presque
   rien : il fait entrer ces six écrans dans le shell de la PWA et désarme les
   quelques endroits où une feuille plus ancienne contredit le socle.

   Les six sections portent `data-s2` (la peau), `data-s2-interne` (elles
   occupent tout le cadre, sans la barre du bas — c'est déjà écrit dans
   saison2-internes.css, on le réutilise tel quel) et `data-s2-set` (le seul
   sélecteur propre à ce fichier).

   Il ne touche ni proto.css, ni brutal.css, ni app.css, ni saison2-socle.css,
   ni les colles saison2-{app,host,play,entree,internes}.css.
   Mobile d'abord : tout ce qui suit est la base téléphone.
   ============================================================================ */

/* ── 1. CE QUE L'ANCIEN ÉCRAN LAISSAIT DERRIÈRE LUI ─────────────────────────
   Les six écrans étaient bâtis sur `.setv` + `.subhead` + `.grp-t` + `.row`
   d'app.css. Ce markup n'existe plus : rien à neutraliser de ce côté. En
   revanche `#sec-donnees` portait un `display` sur son ID dans app.css — on
   s'assure qu'il ne gêne pas la bascule `.sec.active`. */
.sec[data-s2-set]:not(.active) { display: none; }

/* ── 2. LA BARRE DU HAUT ────────────────────────────────────────────────────
   `.top.s2-bar` est la barre des écrans internes. Le bouton retour est un
   <button> : app.css lui donnerait son allure de bouton de formulaire. Le
   socle décrit `.iconbtn` en entier, il suffit de rendre le bouton neutre. */
[data-s2-set] .s2 .top .iconbtn {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  color: inherit; padding: 0;
}

/* ── 2 bis. UN NOM DE CLASSE DÉJÀ PRIS : `.nm` ──────────────────────────────
   `profil.css` déclare `.nm { color: var(--ink) }` en GLOBAL. Le socle, lui,
   laisse `.s2-fn .nm` hériter de son parent — et c'est exactement ce dont il
   a besoin : sur le duo de police choisi (aplat jaune), le nom doit prendre
   l'encre du bloc. La règle globale l'écrasait, et le nom restait clair sur
   jaune en ABÎME. On lui rend son héritage, uniquement ici.
   (Les autres `.s2-*` d'atelier.css et de saison2.css sont déjà désarmés par
   `saison2-internes.css`, que ces écrans chargent comme les autres internes.) */
[data-s2-set] .s2 .s2-fn .nm { color: inherit; }

/* ── 3. LES CONTRÔLES SEGMENTÉS ─────────────────────────────────────────────
   Les maquettes écrivent `<span class="o" data-v="…">`, pas des <button> :
   proto.css les habille déjà (`.seg .o`). On rend juste le doigt possible et
   on empêche la sélection de texte sur un appui long. */
[data-s2-set] .s2 .seg .o {
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
[data-s2-set] .s2 .seg .o:active { filter: brightness(.94); }

/* ── 4. LES BLOCS CLIQUABLES ────────────────────────────────────────────────
   Pastilles de thème, duos de police, fonds de jeu : ce sont des <span> avec
   `role="button"`. Ils s'enfoncent comme tout le reste de la saison 2. */
[data-s2-set] .s2 :is(.s2-th2, .s2-fn, .s2-bg)[role="button"] {
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
[data-s2-set] .s2 :is(.s2-fn, .s2-bg)[role="button"]:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
[data-s2-set] .s2 .s2-th2[role="button"]:active .sw { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }

/* ── 5. DONNÉES · LA CARTE DE COMPTE EN INVITÉ ──────────────────────────────
   Le socle peint `.s2-acct` en CYAN : c'est l'état « connecté ». En invité, la
   progression n'est nulle part — l'aplat passe au JAUNE, la couleur de ce qui
   demande une action. L'ombre reste noire (le fond est clair), et en NÉON elle
   reste magenta comme partout : jamais la couleur du bloc. */
[data-s2] .s2-acct.invite > .bd { background: var(--yellow); }
html[data-skin="neon"][data-theme] [data-s2] .s2-acct.invite > .bd { background: #FFD600; }

/* ── 6. DONNÉES · LES BOUTONS DE NETTOYAGE ET DE DANGER ─────────────────────
   `.btn.block` de proto.css est décrit pour un <a> ou un <span> : sur un
   <button>, le navigateur impose sa propre police et son alignement. */
[data-s2-set] .s2 button.btn { -webkit-appearance: none; appearance: none; }
[data-s2-set] .s2 button.btn .nemoji { width: 16px; height: 16px; flex: none; }

/* ── 7. À PROPOS · LA LIGNE DE SUPPORT EST UN LIEN ──────────────────────────
   `#ap-contact` est un <a> qui porte `.listcard` : on lui retire le soulignage
   et la couleur de lien, le reste vient de proto.css. */
[data-s2-set] .s2 a.listcard { text-decoration: none; color: inherit; display: block; }

/* ── 8. À PROPOS · LA VERSION SE TAPE SEPT FOIS ─────────────────────────────
   `.vr` est le geste secret qui ouvre l'espace créateur : il doit se toucher
   sans déclencher la sélection de texte. */
[data-s2-set] .s2 .s2-ab .vr { -webkit-user-select: none; user-select: none; cursor: pointer; }

/* ── 9. LA LISTE DES BOTS PORTE SA PROPRE COLONNE ───────────────────────────
   `#gp-bots` et `#nt-apercus` sont des conteneurs écrits par app.js : sans
   `display:contents`, leurs cartes se colleraient les unes aux autres au lieu
   de prendre le `gap` de `.s2-scroll`. */
[data-s2-set] .s2 :is(#gp-bots, #nt-apercus, #dn-acct, #app-bg-last) {
  display: flex; flex-direction: column; gap: 10px;
}

/* ── 10. LA GRILLE DE THÈMES À QUATRE COLONNES TIENT SUR 320 px ─────────────
   Le socle pose `repeat(4,1fr)`. Sous 340 px de large, les noms de thème sont
   coupés : on passe à trois colonnes. C'est la SEULE règle de largeur, et elle
   va vers le bas (les écrans plus larges gardent la base). */
@media (max-width: 339px) {
  [data-s2-set] .s2 .s2-thgrid { grid-template-columns: repeat(3, 1fr); }
  [data-s2-set] .s2 .s2-bgs { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================================
   TABLETTE ET PC — uniquement en min-width, le mobile ne bouge pas.
   ============================================================================ */
@media (min-width: 720px) {
  /* les grilles respirent : une colonne de plus, rien d'autre */
  [data-s2-set] .s2 .s2-thgrid { grid-template-columns: repeat(6, 1fr); }
  [data-s2-set] .s2 .s2-fngrid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1280px) {
  /* RÉGLAGES EN MAÎTRE / DÉTAIL : responsive.css ouvre le sous-écran à DROITE
     d'une liste qui reste à gauche (`body.set-split`, posée par app.js). Ce
     montage a été écrit pour l'ancien markup `.setv` ; la liste de gauche est
     l'écran RÉGLAGES de la vague 1, dont le `.s2` est déjà `position:absolute`
     — dans une colonne de grille, elle ne s'affiche plus.
     Tant que la vague 1 n'aura pas rouvert ce mode, on ne le fait pas semblant :
     le sous-écran prend TOUT le cadre, exactement comme sur téléphone, et on
     revient par la flèche. Rien d'autre ne bouge. */
  body.set-split main.home-wrap:has(> .sec.active[data-s2-set]) { display: block; }
  body.set-split main.home-wrap:has(> .sec.active[data-s2-set]) > #sec-reglages { display: none !important; }
}

/* ── 11. NÉON · LA PASTILLE POSÉE SUR LA CARTE DE COMPTE ────────────────────
   Le socle rend sa clarté à une `.pill` posée sur un aplat accent, mais sa
   liste ne connaissait pas encore `.s2-acct` (cyan quand on est connecté,
   jaune en invité) : la pastille y restait sombre sur clair, illisible.
   Son ombre est NOIRE — ni la couleur du bloc (clair), ni celle du fond. */
html[data-skin="neon"][data-theme] [data-s2] .s2-acct .pill {
  background: #FFFEF7; color: #0A0A0A; border-color: #0A0A0A; box-shadow: 3px 3px 0 #0A0A0A;
}

/* ── 12. ABÎME · L'ENCRE SUR UN APLAT CLAIR ────────────────────────────────
   En ABÎME, `--ink` devient CLAIR (le thème est sombre). Tout ce qui est posé
   sur un aplat d'accent — jaune, cyan, vert — se retrouvait donc écrit en
   blanc sur jaune : 1,36 de contraste, illisible. Le socle règle déjà le cas
   pour NÉON (`color:#0A0A0A` sur les aplats) ; il n'existait pas pour ABÎME.
   On le pose ici pour les six écrans de réglages, relevé par relevé :
     · la ligne du thème actif (aplat jaune) ;
     · le duo de police choisi et le fond de jeu choisi (aplat jaune) ;
     · le bandeau-chiffre des écrans AUDIO et GAMEPLAY (cyan, vert) ;
     · la carte de compte de DONNÉES (cyan connecté, jaune en invité).
   ⚠ Le même défaut existe sur des écrans des vagues 1 et 3 (`#sec-defis`,
   `#sec-saison`, `#sec-mes-quiz` et le bloc de thème de `#sec-reglages`, qui
   emploient les mêmes `.s2-hero` et `.s2-themes`). On ne les touche pas ici :
   ils sortent du périmètre de cette vague, et la correction est la même
   règle, à généraliser d'un seul coup. */
html[data-theme="abime"]:not([data-skin="neon"]) [data-s2-set] .s2 :is(
  .s2-themes .act,
  .s2-fn.on,
  .s2-bg.on,
  .s2-hero .bd,
  .s2-acct > .bd,
  .listcard.on > .bd) { color: #0A0A0A; }
html[data-theme="abime"]:not([data-skin="neon"]) [data-s2-set] .s2 :is(
  .s2-themes .act .d,
  .s2-fn.on .ds,
  .s2-bg.on .pr,
  .listcard.on .desc) { color: rgba(10, 10, 10, .6); }
/* une pastille posée sur ces aplats redevient un petit bloc clair */
html[data-theme="abime"]:not([data-skin="neon"]) [data-s2-set] .s2 :is(.s2-hero, .s2-acct) .pill {
  background: #FBFBFB; color: #0A0A0A; border-color: #0A0A0A; box-shadow: 3px 3px 0 #0A0A0A;
}

/* ── L'ESPACE CRÉATEUR — les cinq chiffres, un par ligne ───────────────────
   Edwin : « il faut que tu me crées une interface bien correcte pour pouvoir
   maximiser les points, les XP ». Cinq champs, chacun indépendant : poser une
   XP ne doit plus forcer 9 999 parties et 9 999 victoires du même geste. */
.bc-ov .cr-fields { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 10px; width: 100%; }
.bc-ov .cr-row {
  display: flex; align-items: center; gap: 10px;
  border: 3px solid var(--ink); background: var(--paper); box-shadow: 3px 3px 0 var(--ink); padding: 8px 10px;
}
.bc-ov .cr-row > span {
  flex: 0 0 96px; font-family: var(--fb); font-weight: 800; font-size: 10px; letter-spacing: .8px;
}
.bc-ov .cr-row input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font-family: var(--fd); font-size: 17px; color: var(--ink); text-align: right;
}
.bc-ov .cr-row input::placeholder { font-family: var(--fb); font-weight: 700; font-size: 10px; opacity: .45; }
.bc-ov .cr-note {
  font-family: var(--fb); font-weight: 700; font-size: 9.5px; line-height: 1.6; text-align: center;
  color: color-mix(in srgb, var(--ink) 60%, transparent); margin-bottom: 10px;
}
html[data-skin="neon"][data-theme] .bc-ov .cr-row { box-shadow: 3px 3px 0 var(--magenta); }
