/* ============================================================
   Skin'Fû — mise en page mobile (≤ 1100px)

   Sur ordinateur, l'accueil est une application à écran fixe : la bannière
   est en position:fixed, la galerie défile dans sa propre zone, et tout est
   composé à des dimensions de référence puis mis à l'échelle d'un bloc par
   `zoom` (accueil.css:34). Cette échelle ne dépend que de la HAUTEUR de la
   fenêtre — en 375x812 la page était donc dessinée 7 % plus GRANDE que sur
   un 1440x900 : bannière à left:-555, cartes de galerie de 40x286 px, noms
   réduits à « S… ».

   Sous le seuil, accueil.js neutralise l'échelle (SEUIL_MOBILE) et cette
   feuille rend la page à ce qu'elle doit être : un document qui défile.

   Ordre voulu, de haut en bas :
     1. le logo Skin'Fû et son texte
     2. le personnage et son socle, la signature en haut à droite de lui
     3. la bascule de pose
     4. la carte du skin mis en avant

   Le seuil 1100 est celui de builder/mobile.js. Ne pas le désaligner.
   ============================================================ */

@media (max-width: 1100px) {

  /* ── Le cadre ─────────────────────────────────────────────────────
     Ceinture et bretelles : accueil.js pose déjà --sk-echelle à 1, mais si
     le script échoue la page doit rester lisible plutôt que déformée. */
  #sf-cadre { zoom: 1; }

  /* ── Le décor de fond ─────────────────────────────────────────────
     body::before porte le décor, en position:fixed / inset:0 / cover.
     Il ne se DÉPLAÇAIT pas : sa position de fond est restée identique à la
     mesure, avant et après défilement. C'est sa TAILLE qui changeait —
     897 px de haut puis 964 — et comme l'image est en `cover`, elle se
     recalcule et saute à chaque variation.

     `inset: 0` fait suivre au fond toute variation de la hauteur du
     viewport : barre d'adresse qui se rétracte, clavier qui s'ouvre,
     rotation, panneau dépliant qui change la hauteur du document. On le
     détache donc du viewport en lui figeant ses deux dimensions. lvh est
     la hauteur barre d'adresse repliée : elle ne varie plus. */
  body::before {
    bottom: auto;
    right: auto;
    width: 100vw;
    height: 100lvh;
    min-height: 100lvh;
  }

  /* Le faisceau vert sous le logo (.sf-titre::after) est animé par une
     translation calibrée sur la largeur du titre au format bureau : elle
     l'envoyait à +224 px sur un titre de 300, donc hors de l'écran. On
     borne son parcours au titre, et on recentre le trait. */
  .sf-titre { overflow: hidden; }
  .sf-titre::before { left: 0; right: 0; width: auto; margin: 0 auto; }

  /* ── L'en-tête, sur une seule ligne ───────────────────────────────
     Deux pièges cumulés ici.

     1. .sf-nav est en position:absolute avec un left calculé pour un
        bandeau large : il sortait de 19 px.
     2. L'en-tête est HORS de #sf-cadre et se dimensionne par sa propre
        variable, --sf-echelle-entete = innerHeight / 1121 (compte.js:15).
        Sur un téléphone haut ce rapport approche 1 : l'en-tête rendait
        alors à sa taille de RÉFÉRENCE, celle prévue pour un 1920, d'où un
        bandeau qui mangeait un tiers de l'écran. Faire dépendre une taille
        d'écran d'un ratio calé sur une maquette ne tient pas ici : on le
        neutralise et on dimensionne explicitement.

     Résultat : logo, navigation et compte sur une ligne, 41 px. */
  .sf-entete {
    zoom: 1;
    display: flex; flex-wrap: nowrap; align-items: center;
    height: auto; min-height: 0;
    padding: 5px 8px; gap: 6px;
  }
  .sf-entete .sf-logo { order: 1; flex: 0 0 auto; }
  .sf-entete .sf-logo img { height: 26px; }
  /* Badge de version, visible des seuls administrateurs (compte.js:47) :
     on le garde — il sert — mais discret et sans forcer de retour ligne. */
  .sf-entete .sf-version {
    order: 2; flex: 0 0 auto;
    font-size: 9px; padding: 2px 6px; opacity: .7; white-space: nowrap;
  }
  .sf-entete .sf-nav {
    order: 3;
    position: static; inset: auto; transform: none;
    flex: 1 1 auto; min-width: 0;
    display: flex; justify-content: center; flex-wrap: nowrap; gap: 2px;
  }
  .sf-entete .sf-nav a {
    padding: 5px; font-size: 11.5px; letter-spacing: 0; white-space: nowrap;
  }
  .sf-entete .sf-compte,
  .sf-entete .sfc-hote { order: 4; flex: 0 0 auto; margin-left: 0; }
  .sf-entete .sf-profil-interieur,
  .sf-entete .sfc-connexion {
    padding: 3px 9px 3px 4px; font-size: 11.5px; white-space: nowrap;
  }
  .sf-entete .sf-compte img { width: 20px; height: 20px; }

  /* ── La bannière ──────────────────────────────────────────────────
     De trois colonnes (560 + 1fr + 400 = 960 px minimum) à une seule, et
     hors du position:fixed. On garde une grille plutôt que de passer en
     flex : elle sert à faire cohabiter la signature et le personnage dans
     la MÊME cellule, ce qui place l'une sur l'autre sans positionnement
     absolu à recaler. Une seule mécanique, pas deux superposées.

     Le placement est réécrit sur chaque enfant : .sf-heros porte
     `grid-column: 2` (accueil.css:190) et, sur un gabarit à une colonne,
     cela créait une colonne implicite de 824 px. */
  .sf-banniere {
    position: static;
    height: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    padding: 10px 16px 20px;
  }
  .sf-banniere > * {
    width: auto; max-width: 100%; min-width: 0;
    justify-self: stretch;
  }

  .sf-presentation { grid-row: 1; grid-column: 1; display: flex; flex-direction: column; gap: 12px; }
  .sf-concours-carte { grid-row: 2; grid-column: 1; margin: 0; }
  .sf-poses        { grid-row: 3; grid-column: 1; }
  .sf-heros        { grid-row: 4; grid-column: 1; }
  .sf-vedette      { grid-row: 5; grid-column: 1; }

  /* La bascule de pose passe au-dessus du personnage, juste sous le compteur
     « X skins partagés » : elle n'a plus rien à faire entre lui et sa carte.
     Elle cesse aussi d'être pleine largeur — 343 px pour un mot. */
  .sf-poses { display: flex; justify-content: center; margin: 0; }
  .sf-poses .sf-bouton {
    width: auto; flex: 0 0 auto; align-self: center;
    padding: 4px 12px; font-size: 12px; gap: 5px; min-height: 0;
  }
  .sf-poses .sf-bouton svg { width: 12px; height: 12px; flex: 0 0 12px; }

  /* La carte perd les 128 px de marge haute prévus pour le bureau : elle se
     lit collée au personnage, qu'elle décrit. */
  .sf-vedette { margin: 0; }

  /* Le nombre et son libellé étaient alignés sur la ligne de base, ce qui
     décalait le « 260 » (46 px de haut) par rapport au texte (48 px). */
  .sf-compteur { align-items: center; gap: 10px; }

  /* Le logo centré, et le texte débarrassé de son retrait de 96 px hérité
     du bureau — il le comprimait à 247 px et le décalait à droite. */
  .sf-titre { margin-top: 0; max-width: 300px; margin-left: auto; margin-right: auto; }
  .sf-sous-intro { margin-left: 0; width: 100%; max-width: 100%; }
  /* Les deux appels à l'action côte à côte et resserrés : empilés et pleine
     largeur, ils mangeaient 127 px avant le personnage. */
  .sf-actions { display: flex; flex-direction: row; gap: 8px; margin: 10px 0 14px; }
  .sf-actions .sf-bouton {
    flex: 1 1 0; min-width: 0;
    justify-content: center;
    padding: 9px 10px; font-size: 13px; gap: 6px;
    white-space: nowrap;
  }
  .sf-actions .sf-bouton svg { width: 15px; height: 15px; flex: 0 0 15px; }

  /* ── Les quatre atouts ────────────────────────────────────────────
     Ils prenaient 199 px en deux colonnes entre le texte et le personnage,
     avec des intitulés coupés en plein mot (« Personnalisatio »). Réduits à
     une rangée d'icônes : le texte s'ouvre au toucher, dans le panneau que
     mobile.js insère juste dessous. Sans le script, les icônes restent
     visibles et inertes — rien n'est perdu de vue. */
  .sf-atouts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
  }
  .sf-atouts li {
    display: grid; place-items: center;
    min-height: 44px;            /* cible tactile confortable */
    padding: 10px 4px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    cursor: pointer;
  }
  .sf-atouts li strong,
  .sf-atouts li span { display: none; }
  .sf-atouts li svg { width: 22px; height: 22px; }
  .sf-atouts li.est-ouvert {
    border-color: rgba(120, 230, 160, .55);
    background: rgba(120, 230, 160, .08);
  }
  .sf-atout-detail {
    margin-top: 8px; padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    background: rgba(0, 0, 0, .28);
  }
  .sf-atout-detail strong { display: block; margin-bottom: 3px; }
  .sf-atout-detail span { font-size: 13px; opacity: .85; }

  /* Le voile de lecture débordait de 110 px à droite : on le resserre. */
  .sf-presentation::before { inset: -20px -20px 10px -20px; }

  /* ── Le personnage ────────────────────────────────────────────────
     C'est le sujet de l'outil. Le point clef : .canvas-wrap tirait sa
     HAUTEUR de --sf-vh puis sa largeur d'aspect-ratio:1 — il se
     dimensionnait donc par la hauteur de l'écran, soit 824 px de large sur
     un téléphone. On inverse : la largeur commande, la hauteur suit. Le
     canevas est déjà fluide (ResizeObserver dans skinator.js) et en
     pointer-events:none, donc aucun conflit avec le défilement tactile. */
  .sf-heros .canvas-wrap {
    height: auto;
    width: 100%;
    max-width: 100%;
    transform: none;
  }

  /* Particules décoratives : 989 px de large, purement ornementales. */
  .sf-particules { display: none; }

  /* ── La signature ─────────────────────────────────────────────────
     Elle était en position:absolute avec left:-40px, un décalage prévu pour
     un grand écran : sur 375 elle partait hors champ à gauche. Elle partage
     désormais la cellule du personnage, calée en haut à droite et réduite. */
  .sf-signature {
    grid-row: 3; grid-column: 1;
    position: relative; top: auto; left: auto; right: auto; margin: 0;
    justify-self: end; align-self: start;
    width: auto; max-width: 52%;
    z-index: 3;
    pointer-events: none;   /* décor : ne vole pas le tap au personnage */
  }
  .sf-signature img { width: 100%; height: auto; max-width: none; }

  /* ── La galerie ───────────────────────────────────────────────────
     repeat(6, 1fr) donnait des colonnes de 44 px. Deux colonnes, et la zone
     de défilement propre disparaît au profit du document (la max-height
     posée par ajusterGrille est retirée côté JS). */
  .sf-cartes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: none;
    overflow: visible;
    gap: 10px;
    padding: 2px;
  }

  /* ── La galerie : son cadre ───────────────────────────────────────
     .sf-place est un cale qui réserve la hauteur de la bannière quand
     celle-ci est en position:fixed. Ici elle est dans le flux : le cale ne
     réservait donc que du vide — 395 px entre la carte et la galerie. */
  .sf-place { display: none; }

  /* 40 px de marge latérale sur un écran de 375. */
  .sf-galerie { padding: 18px 16px 24px; }

  .sf-onglets { flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; }

  /* ── Le filtre par classe ─────────────────────────────────────────
     .sf-classes est en `flex: 1 1 0` et partageait sa ligne avec la barre
     d'outils (250 px) : il ne lui restait que 16 px pour 18 visages, soit
     2 px par bouton. On lui donne sa propre ligne, en trois rangées de
     six : 42 px par visage, lisible et atteignable au doigt. */
  .sf-galerie-entete .sf-classes {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    min-width: 0;
  }
  .sf-galerie-entete .sf-classes .sf-classe-visage {
    width: 100%; height: auto; aspect-ratio: 1;
    padding: 0; min-width: 0;
  }
  .sf-galerie-entete .sf-classes .sf-classe-visage img {
    width: 100%; height: 100%; object-fit: contain;
  }
  .sf-galerie-entete .sf-outils-galerie { flex: 1 1 100%; }

  /* « Prochain concours dans N jours » est un <span> d'infobulle placé DANS
     le bouton, en position:absolute avec une translation de -107 px : il
     apparaît au survol sur ordinateur. Au doigt le survol n'existe pas, et
     la bulle restait affichée en travers des onglets. L'information est
     déjà portée par le badge « à venir » du bouton et par son title. */
  .sf-concours { position: static; max-width: 100%; flex-wrap: wrap; margin: 8px auto 0; }
  .sf-concours-bulle { display: none; }

  /* ── La fiche d'un skin ───────────────────────────────────────────
     C'est la vue qu'on ouvre depuis un lien partagé sur Discord : le
     parcours mobile le plus fréquent. Sur ordinateur elle flotte au centre
     d'un fond fixe non défilable — le bouton « Ouvrir » finissait à
     top:879 / left:-220, hors d'atteinte quel que soit le défilement.
     Ici elle occupe l'écran et défile, le personnage en premier. */
  .sf-modale-fond { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px; }
  .sf-modale {
    width: 100%;
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .sf-modale-scene { order: -1; }
  .sf-modale-scene .sf-heros { max-width: 100%; }

  /* ── Le pied ──────────────────────────────────────────────────────
     .sf-pied-signature dépassait de 11 px. Surtout : ne JAMAIS régler ça
     par `overflow-x` sur body — cela fait de body un conteneur de
     défilement et casse le `position: sticky` de l'en-tête, qui se met
     alors à défiler avec la page au lieu de rester en haut. On borne le
     pied lui-même. */
  .sf-pied { overflow-x: clip; }
  .sf-pied-signature { max-width: 100%; overflow-wrap: anywhere; }
}


/* ============================================================
   L'ATELIER (/skinfu/skin/) — ≤ 1100px

   Sur ordinateur, trois colonnes : Corps à gauche, la scène au centre,
   l'Équipement à droite (skinator.css:104 — 400 + 420 + 540, soit 1360 px
   minimum). Sur 375, les panneaux se posaient à 29-319, 329-633 et
   643-1034 : seul celui de gauche était à l'écran, et `html, body
   { overflow: hidden }` (skinator.css:19) rendait les 659 px restants
   définitivement inatteignables — tout le catalogue d'équipement compris.

   On garde l'architecture à écran fixe, qui est la bonne ici, mais en
   vertical : la scène en haut, toujours visible, et un seul panneau à la
   fois dessous. Le personnage ne quitte jamais l'écran pendant qu'on
   l'habille, ce qui est tout l'intérêt de l'outil.

   skinator-ui.js neutralise l'échelle sous le même seuil, et mobile.js
   injecte la barre d'onglets et double le clic droit par un appui long.
   ============================================================ */

@media (max-width: 1100px) {

  #sk-cadre { zoom: 1; height: 100%; width: 100%; }

  .sk-grille-principale {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    gap: 0;
    padding: 0;
  }

  /* ── La scène, en haut et fixe ────────────────────────────────────
     40 % de la hauteur : assez pour lire le personnage, assez peu pour
     laisser travailler le panneau du dessous. Le canevas se cale sur la
     hauteur disponible et garde son carré. */
  /* Le socle et le personnage en haut, l'interface en bas, et le
     défilement ne touche que celle-ci — la scène est un frère de taille
     imposée, pas un bloc du flux, donc le personnage ne bouge jamais
     (vérifié : scène à top 40 avant comme après défilement).

     La part est FIXE, et c'est délibéré. Une scène élastique — qui prend
     ce que l'onglet courant n'utilise pas — supprime les vides mais fait
     changer le personnage de taille à chaque changement d'onglet : il
     passait de 386 à 500 px. Une taille constante vaut mieux qu'un gain
     de place, quitte à laisser un onglet défiler. 58 % : le personnage
     reste à 448 px partout, Corps et Équipement tiennent sans défilement,
     Couleurs et Pose défilent. */
  .sk-scene {
    order: 1;
    flex: 0 0 58%;
    height: 58%;
    min-height: 0;
    width: 100%;
    padding: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Le point délicat. Le moteur dimensionne le canevas en pixels depuis
     `aCouvrir = max(cadre.clientWidth, cadre.clientHeight)` — 772 px ici
     (skinator.js:208). Il déborde donc volontairement de sa case, pour
     qu'une arrivée puisse traverser l'écran ; sur ordinateur la scène est
     en overflow:visible et ce débordement, transparent, passe derrière
     les panneaux sans gêner.

     En fenêtre réduite et rognée, ce même débordement coupait la
     composition : le socle sortait de 97 px en haut et 96 en bas, et
     comme l'ensemble est centré sur le SOCLE et non sur le personnage,
     c'est la tête qui disparaissait.

     La case tire sa taille de sa LARGEUR (flex: 1 1 auto la fait grandir)
     et `aspect-ratio: 1` en déduit la hauteur : la contraindre en hauteur
     n'a d'effet qu'en lui retirant d'abord sa croissance.

     ponytail: le 72 % est réglé à l'œil sur le rendu, pas déduit. À cette
     taille le socle fait 373 px et remplit la largeur de l'écran ; il
     dépasse de 33 px en haut et en bas, mais ce dépassement est la marge
     transparente de la planche, pas du dessin — rien de visible n'est
     coupé. Au-delà, la case bute sur max-width et la plate-forme se met à
     être rognée pour de bon. Si les proportions du socle changent dans le
     moteur, c'est ce nombre qu'il faut reprendre. */
  .sk-scene .canvas-wrap {
    flex: 0 0 auto;
    height: 72%;
    width: auto;
    max-width: 100%;
    transform: none;
  }

  /* ── Les commandes de la scène ────────────────────────────────────
     Flèches, Animé et Sauvegarder flottaient au milieu de la scène, loin
     de l'interface. Elles sont positionnées par rapport à .canvas-wrap,
     leur bloc conteneur, et non à la scène : un `bottom: 8px` les laissait
     donc 71 px au-dessus du bord.

     La case fait 72 % de la scène et y est centrée : il reste (100−72)/2
     = 14 % de scène sous elle, soit 14/72 ≈ 19 % de sa propre hauteur.
     Un bottom négatif de cet ordre les ramène au bord bas. Les deux
     valeurs suivent donc le 72 % ci-dessus : changer l'un, revoir l'autre. */
  .sk-scene .pose-group,
  .sk-scene .sk-sauver { top: auto; bottom: -17%; }
  .sk-scene .sk-fleche { top: auto; bottom: calc(-17% + 46px); }

  /* « Création de … », visible quand on ouvre le skin de quelqu'un
     d'autre, était en bottom: 28 % — calé pour le grand écran, il
     retombait en plein sur le socle. Même compensation que ci-dessus, vers
     le haut cette fois, et une pastille plus compacte. Mesuré à 9 px du
     bord haut de la scène. */
  .sk-auteur {
    top: calc(-19% + 8px); bottom: auto; left: 4px;
    padding: 5px 12px 5px 5px; gap: 7px;
  }
  .sk-auteur img,
  .sk-auteur-initiale { width: 30px; height: 30px; }
  .sk-auteur-texte small { font-size: 10px; }
  .sk-auteur-texte strong { font-size: 12px; }
  /* Ce qui restait dans la scène et n'a pas été déplacé par mobile.js. */
  .sk-scene .sk-rangee-corps,
  .sk-scene .pose-variantes,
  .sk-scene .pose-compagnons { display: none; }

  /* Les deux colonnes sont vidées de leur contenu par mobile.js, qui le
     répartit dans .mob-sk-panneau. Ne restent que leurs en-têtes et leurs
     enveloppes : on les retire.

     Conditionné à data-mob-onglets, le marqueur que pose mobile.js. Sans
     cette garde, un script absent ou servi depuis le cache pendant qu'une
     feuille fraîche s'applique — ce qui arrive entre un push et son bump,
     les deux fichiers portant le même ?v= — masquait les colonnes sans que
     rien les remplace : le catalogue devenait introuvable et le panneau
     d'aperçu restait vide. Mieux vaut une mise en page non adaptée qu'une
     interface amputée. */
  .sk-grille-principale[data-mob-onglets] .sk-gauche,
  .sk-grille-principale[data-mob-onglets] .sk-droite { display: none; }

  /* ── Le panneau, entre la scène et les onglets ────────────────────── */
  /* Le panneau occupe ce que la scène laisse, et défile au-delà. */
  .mob-sk-panneau {
    order: 2;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 10px 14px;
  }
  .mob-sk-groupe { display: none; }
  .sk-grille-principale[data-panneau="corps"]      .mob-sk-groupe[data-onglet="corps"],
  .sk-grille-principale[data-panneau="couleurs"]   .mob-sk-groupe[data-onglet="couleurs"],
  .sk-grille-principale[data-panneau="equipement"] .mob-sk-groupe[data-onglet="equipement"],
  .sk-grille-principale[data-panneau="pose"]       .mob-sk-groupe[data-onglet="pose"] {
    display: block;
    margin-bottom: 12px;
  }
  /* Les blocs d'origine se contraignaient en hauteur pour la mise en page
     à trois colonnes : ici c'est le panneau qui défile. */
  .mob-sk-groupe .sk-bloc,
  .mob-sk-groupe > * { height: auto; min-height: 0; max-height: none; }

  /* Les 18 classes tenaient sur une colonne de 400 px : ici six par rangée. */
  .mob-sk-groupe .sk-classes {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
  }
  .mob-sk-groupe .sk-classes > * { width: 100%; height: auto; aspect-ratio: 1; min-width: 0; }

  /* ── Les coiffures ────────────────────────────────────────────────
     .sk-poses est une rangée `nowrap` où .sk-coiffures était coincée à
     94 px à côté des outils de scène (251 px), en overflow:hidden : les
     vignettes s'empilant tous les 60 px, 2 des 22 coiffures étaient
     visibles et 20 purement inaccessibles. La rangée passe en colonne et
     les coiffures prennent la largeur : quatre rangées de six. */
  .mob-sk-groupe .sk-poses {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .mob-sk-groupe .sk-coiffures {
    width: 100%; height: auto; max-height: none;
    overflow: visible;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 5px;
  }
  .mob-sk-groupe .sk-coiffures > * {
    width: 100%; height: auto; aspect-ratio: 1; min-width: 0; margin: 0;
  }
  /* Zoom, annulation et exports PNG/GIF : des commandes d'atelier posé,
     sans objet au doigt. Elles rendent leur place aux coiffures. */
  .mob-sk-groupe .sk-outils-scene { display: none; }

  /* ── La fiche d'un équipement ─────────────────────────────────────
     « Clic sur une couleur pour trier le catalogue » (skinator-ui.js:662)
     est une consigne de souris : elle mangeait la largeur et repoussait
     les pastilles en colonne. Retirée, les couleurs se déploient à
     l'horizontale, sur deux rangées. */
  .mob-sk-groupe .sk-detail-astuce { display: none; }
  .mob-sk-groupe .sk-pastilles {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, auto);
    justify-content: start;
    gap: 5px;
  }

  /* ── Les lignes de couleur ────────────────────────────────────────
     Neuf lignes de 36 px, soit 356, pour un panneau plafonné à 327 : ça
     débordait de 29 px. Resserrées, elles tiennent en 269. */
  .mob-sk-groupe .sk-zones { gap: 2px; }
  .mob-sk-groupe .sk-zone { min-height: 0; padding: 0; }
  .mob-sk-groupe .sk-zone-puce { width: 26px; height: 26px; }
  .mob-sk-groupe .sk-zone-hexa { height: 26px; min-height: 0; }
  .mob-sk-groupe .sk-zone .sk-icone { width: 26px; height: 26px; }

  /* ── La barre d'onglets, en bas ───────────────────────────────────── */
  .mob-sk-onglets {
    order: 3;
    flex: 0 0 auto;
    display: flex;
    gap: 5px;
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255, 255, 255, .12);
    background: rgba(6, 12, 18, .92);
  }
  .mob-sk-onglets button {
    flex: 1;
    min-height: 44px;          /* cible tactile confortable */
    padding: 8px 4px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 9px;
    background: rgba(255, 255, 255, .04);
    color: #e8f2ff;
    font: 600 13px/1 'Rajdhani', system-ui, sans-serif;
  }
  .mob-sk-onglets button.est-actif {
    border-color: rgba(120, 230, 160, .6);
    background: rgba(120, 230, 160, .12);
  }

  /* ── Les codes, derrière un bouton ────────────────────────────────── */
  .mob-sk-bouton-code {
    display: block; width: 100%;
    min-height: 40px; margin-bottom: 8px;
    padding: 9px 12px;
    border: 1px dashed rgba(255, 255, 255, .2);
    border-radius: 9px;
    background: transparent;
    color: #cfe0ef;
    font: 600 13px/1 'Rajdhani', system-ui, sans-serif;
  }
  .mob-sk-code-cache { display: none; }
  .mob-sk-code-actions { display: flex; gap: 8px; margin-top: 8px; }
  .mob-sk-code-actions button {
    flex: 1; min-height: 40px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 8px;
    background: rgba(255, 255, 255, .05);
    color: #e8f2ff;
    font: 600 13px/1 'Rajdhani', system-ui, sans-serif;
  }

  /* ── Le catalogue en plein écran ──────────────────────────────────── */
  .mob-sk-catalogue {
    position: fixed; inset: 0; z-index: 900;
    display: flex; flex-direction: column;
    background: #070d14;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  }
  .mob-sk-catalogue[hidden] { display: none; }
  .mob-sk-catalogue-entete {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 8px;
    padding-bottom: 8px;
  }
  .mob-sk-catalogue-entete input { flex: 1 1 auto; min-width: 0; min-height: 40px; }
  .mob-sk-fermer {
    flex: 0 0 auto; width: 40px; height: 40px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 9px;
    background: rgba(255, 255, 255, .05);
    color: #e8f2ff; font-size: 16px;
  }
  .mob-sk-catalogue .sk-catalogue {
    flex: 1 1 auto; min-height: 0;
    max-height: none; height: auto;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  body.mob-sk-fige { overflow: hidden; }

  /* ── La barre d'essai ─────────────────────────────────────────────
     Elle ne paraît que pendant l'essai d'une pièce, le catalogue effacé,
     pour qu'on juge sur le personnage avant de confirmer. */
  .mob-sk-essai {
    position: fixed; z-index: 910;
    left: 0; right: 0; bottom: 0;
    display: flex; gap: 8px;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
    background: rgba(6, 12, 18, .96);
    border-top: 1px solid rgba(255, 255, 255, .14);
  }
  .mob-sk-essai[hidden] { display: none; }
  .mob-sk-essai button {
    flex: 1; min-height: 46px;
    border-radius: 10px;
    font: 700 15px/1 'Rajdhani', system-ui, sans-serif;
  }
  .mob-sk-retour {
    border: 1px solid rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .06);
    color: #e8f2ff;
  }
  .mob-sk-equiper {
    border: 1px solid rgba(120, 230, 160, .7);
    background: rgba(120, 230, 160, .22);
    color: #eafff2;
  }
}