/* un overlay qui couvrirait la sortie, un monstre visible ou le héros
     devient translucide pour ne rien cacher de crucial */
  #log, #hint, #minimap{transition:opacity .25s}
  #log.ghost, #hint.ghost{opacity:.14}
  #minimap.ghost{opacity:.25}
  /* ACCESSIBLE AUSSI À L'ÉCRAN DE TITRE (2026-09-04, demande Pixel).
     Deux choses l'en empêchaient. `position:absolute` la plaçait par rapport à
     #gameWrap, réduit à presque rien tant que la partie n'a pas commencé : la
     console s'ouvrait bel et bien, mais deux pixels de large et 221 px AU-DESSUS
     du haut de l'écran (mesuré). En `fixed`, elle se cale sur la fenêtre, ce qui
     ne change rien en jeu où #gameWrap l'occupe déjà entièrement.
     Et son z-index de 60 la laissait DERRIÈRE l'écran de titre (120) ; passée
     au-dessus, #cheatPicker suit pour rester devant elle comme avant. */
  #consolePanel{
    position:fixed; left:12px; right:12px; bottom:12px;
    max-width:560px; margin:0 auto;
    background:rgba(12,10,16,.94);
    border:1px solid var(--target, #5cc8d8);
    border-radius:8px; overflow:hidden;
    box-shadow:0 6px 24px rgba(0,0,0,.5);
    font-family:"Consolas","Menlo",monospace; font-size:.8rem;
    z-index:130;              /* au-dessus de l'écran de titre (120) */
  }
  #consolePanel.hidden{display:none}
  #consoleOut{
    max-height:180px; overflow-y:auto;
    padding:8px 10px; color:#b8d0c8; line-height:1.5;
    white-space:pre-wrap; word-break:break-word;
  }
  #consoleOut .cmd{color:#7fd0f0}
  #consoleOut .err{color:#ff8877}
  #consoleOut .ok{color:#9fe0a0}
  #consoleOut .hdr{color:#ffd860; font-weight:bold}
  #consoleOut .hint{color:#8a7ab0; font-style:italic}
  #consoleRow{
    display:flex; align-items:center; gap:6px;
    border-top:1px solid var(--panel-edge);
    background:rgba(30,26,38,.9); padding:6px 10px;
  }
  #consolePrompt{color:var(--target,#5cc8d8); font-weight:bold}
  #consoleInput{
    flex:1; background:transparent; border:none; outline:none;
    color:#eaf2ee; font-family:inherit; font-size:.85rem;
  }
  #hint{
    position:absolute; right:12px; bottom:52px;
    max-width:250px;
    font-size:.72rem; color:var(--ink-dim);
    background:rgba(20,16,24,.92);
    border:1px solid var(--panel-edge);
    border-radius:6px; padding:6px 10px;
    pointer-events:none;
    line-height:1.6;
    display:none;                 /* caché par défaut : révélé par le bouton « ? » */
  }
  #hint.show{ display:block; }
  /* deux variantes de contenu dans le même panneau : desktop (souris/clavier)
     par défaut, mobile (gestes tactiles) affiché à la place sur petit écran
     — voir 13-mobile.css */
  .hint-mobile{ display:none; }
  #hintToggle{
    position:absolute; right:12px; bottom:12px; z-index:6;
    width:32px; height:32px; border-radius:50%;
    background:rgba(20,16,24,.8); border:1px solid var(--panel-edge);
    color:var(--ink); font-size:1rem; font-weight:bold; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background .12s, transform .12s;
  }
  #hintToggle:hover{ background:var(--accent-dim,#5c4a78); transform:scale(1.08); }
  #hintToggle.active{ background:var(--accent,#e0a83c); color:#141018; }
  /* encart séparé : PV / PA / PM / Armure, posé sur la carte en haut à gauche */
  #vitals{
    position:absolute; left:12px; top:12px; z-index:5;
    display:flex; flex-direction:column; gap:6px;
    background:rgba(20,16,24,.82); border:1px solid var(--panel-edge);
    border-radius:10px; padding:8px 12px;
    box-shadow:0 4px 14px rgba(0,0,0,.5);
    max-width:390px; box-sizing:border-box;   /* jamais plus large que le journal (synchronisé par applyLogSize) */
  }
  #vitals .stat{ font-size:.9rem; }
  #vitals .stat b{ font-size:1.05rem; }
  /* résumé synthétique des bonus/malus du perso, sous les PA/PM */
  #statDetail{ display:flex; flex-wrap:wrap; align-items:center; gap:4px;
    margin-top:2px; padding-top:6px; border-top:1px solid var(--panel-edge);
    max-width:190px; cursor:help; }
  #statDetail:empty{ display:none }
  #statDetail .sd-lbl{ font-size:.6rem; text-transform:uppercase; letter-spacing:.05em;
    color:var(--ink-dim); margin-right:1px; align-self:center }
  #statDetail .sd-chip{ font-size:.72rem; font-weight:bold; color:var(--ink);
    background:#2a2436; border:1px solid var(--panel-edge); border-radius:5px;
    padding:1px 5px; line-height:1.35; white-space:nowrap }
  #statDetail .sd-chip.sd-fx{ border-color:#5c4a78; background:#241d2e }
  #statDetail .sd-chip.sd-buff{ color:#ffb04a; border-color:#7a5a2a }
  /* flex-basis:100% force les Malus à passer à la LIGNE SUIVANTE, séparés des Bonus */
  #statDetail .sd-lbl-malus{ color:#e06a52; flex-basis:100%; margin:3px 0 0 }
  #statDetail .sd-chip.sd-malus{ color:#ff8a6a; border-color:#7a3428; background:#2e1c1a }

  /* ---------- Contrat de niveau actif (js/77) ----------
     (2026-08-11, retour Pixel : « les contrats ne doivent pas se superposer
     à d'autres affichages » — un badge flottant en position:absolute au même
     coin que #vitals le chevauchait pile. Rattaché DANS #vitals (voir
     index.html, en dernier enfant après #statDetail) : il s'empile
     normalement DANS le flux du panneau au lieu d'être positionné par-dessus,
     donc jamais de recouvrement, quelle que soit la hauteur des deux blocs.) */
  #contractBadge{
    display:none; flex-direction:column; gap:2px;
    margin-top:2px; padding-top:6px; border-top:1px solid var(--panel-edge);
    font-size:.78rem; letter-spacing:.02em; max-width:220px;
  }
  #contractBadge.show{ display:flex }
  #contractBadge .contract-head{ display:flex; align-items:center; gap:6px; font-weight:700 }
  #contractBadge .contract-icon{ font-size:1rem; line-height:1 }
  #contractBadge .contract-label{ color:var(--accent,#e0a83c) }
  #contractBadge.failed .contract-label{ color:#ff8a7a; text-decoration:line-through; text-decoration-color:#ff5040 }
  #contractBadge .contract-body{ font-size:.72rem; color:var(--ink-dim,#b7abc8); display:flex; flex-direction:column; gap:1px }
  #contractBadge.failed .contract-body{ color:#e59a9a; text-decoration:line-through; text-decoration-color:#ff5040 }
  #contractBadge .contract-sub.done{ color:#7fd88f; text-decoration:none }
  kbd{
    background:#2a2434; border:1px solid #3c3448; border-radius:3px;
    padding:0 5px; font-family:inherit; font-size:.68rem;
  }

  /* ---------- Écrans : connexion / classe / personnalisation ---------- */
  #classPick, #loginPick, #customPick, #homeMenu, #modePick{
    position:absolute; inset:0;
    display:none;
    align-items:center; justify-content:center;
    background:rgba(8,6,12,.78);
    z-index:11;
  }
  #classPick.show, #loginPick.show, #customPick.show, #homeMenu.show, #modePick.show{display:flex}
  /* #customPick peut maintenant s'ouvrir PAR-DESSUS #homeMenu (lobby coop
     resté affiché en dessous — voir coopOpenCustomize(), js/58) : sans ce
     z-index plus élevé, les deux écrans partagent le même z-index (11) et
     #homeMenu (plus loin dans le DOM) passerait au-dessus, rendant l'écran
     de personnalisation invisible bien que techniquement "ouvert". */
  #customPick{ z-index:13; }
  .home-btn{
    display:block; width:100%; text-align:left;
    background:#2a2436; border:1px solid var(--panel-edge); color:var(--ink);
    border-radius:10px; padding:14px 18px; margin:8px 0; cursor:pointer;
    font-size:1rem; transition:transform .08s, border-color .12s, box-shadow .12s;
  }
  .home-btn:hover:not([disabled]){ border-color:var(--target); box-shadow:0 0 8px rgba(92,200,216,.4); transform:translateY(-1px) }
  .home-btn small{ display:block; color:var(--ink-dim); font-size:.74rem; margin-top:3px }
  .home-btn[disabled]{ opacity:.5; cursor:default }
  .home-back{ background:none; border:none; color:var(--ink-dim); cursor:pointer; margin-top:10px; font-size:.85rem }
  .home-back:hover{ color:var(--ink) }
  #homeMapList{ display:flex; flex-direction:column; gap:6px; max-height:220px; overflow-y:auto; margin-top:6px }
  #homeMapList .hm-row{ display:flex; align-items:center; gap:8px; background:#241d2c;
    border:1px solid var(--panel-edge); border-radius:8px; padding:8px 10px; cursor:pointer; font-size:.85rem }
  #homeMapList .hm-row:hover{ border-color:var(--target) }
  #homeMapList .hm-empty{ color:var(--ink-dim); font-style:italic; font-size:.8rem }

  /* ---- Éditeur de carte : PAGE plein écran ---- */
  #mapEditor{
    position:fixed; inset:0; display:none; flex-direction:column;
    background:var(--bg, #14101c); z-index:40;
  }
  #mapEditor.show{display:flex}
  /* ---------- Éditeur de path d'attaque de boss ---------- */
  #patEd{ position:fixed; inset:0; display:none; z-index:60;
    background:rgba(8,6,12,.72); align-items:center; justify-content:center; }
  #patEd.show{ display:flex }
  .pat-shell{ width:min(940px,94vw); max-height:92vh; display:flex; flex-direction:column;
    background:var(--panel,#241826); border:1px solid var(--panel-edge,#4a3050);
    border-radius:12px; box-shadow:0 18px 60px rgba(0,0,0,.6); overflow:hidden }
  .pat-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    padding:9px 14px; border-bottom:1px solid var(--panel-edge); background:var(--panel) }
  .pat-head h2{ font-size:1rem; margin:0 }
  .pat-tip{ font-size:.72rem; color:var(--ink-dim) }
  .pat-body{ display:flex; gap:12px; padding:12px; min-height:0; flex:1 }
  .pat-canvaswrap{ flex:1; display:flex; align-items:center; justify-content:center;
    background:#0e0a14; border:1px solid var(--panel-edge); border-radius:8px; overflow:auto; min-height:0 }
  #patCanvas{ image-rendering:pixelated; cursor:crosshair; touch-action:none }
  .pat-side{ width:260px; flex:none; display:flex; flex-direction:column; gap:8px; overflow-y:auto }
  .pat-side .ed-group{ display:flex; flex-direction:column; gap:6px }
  .pat-side label{ font-size:.76rem; color:var(--ink-dim) }
  .pat-side select, .pat-side input{ background:#1a1420; color:var(--ink);
    border:1px solid var(--panel-edge); border-radius:6px; padding:5px 7px; font-size:.8rem; width:100% }
  /* même skin neutre que .ed-side button / .ed-x (voir plus bas) : un seul
     style de bouton "normal" dans tout l'éditeur, celui du reste du jeu
     (var(--panel)/--panel-edge/--ink) plutôt qu'une teinte rose isolée. */
  .pat-side button{ background:var(--panel); border:1px solid var(--panel-edge); color:var(--ink);
    border-radius:6px; padding:6px 9px; cursor:pointer; font-size:.78rem; flex:1 }
  .pat-side button:hover{ border-color:var(--accent-dim) }
  .pat-modes{ display:flex; flex-direction:column; gap:4px }
  .pat-modes label{ display:flex; align-items:center; gap:6px; color:var(--ink); font-size:.78rem; cursor:pointer }
  .pat-modes small{ color:var(--ink-dim) }
  .pat-turns{ display:flex; flex-wrap:wrap; gap:4px }
  .pat-turns .pat-tt{ background:#2a1e30; border:1px solid #4a3050; color:var(--ink);
    border-radius:6px; padding:4px 9px; cursor:pointer; font-size:.78rem }
  .pat-turns .pat-tt.on{ background:var(--accent); color:#1a1208; border-color:transparent; font-weight:700 }
  .ed-head{
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    padding:8px 14px; border-bottom:1px solid var(--panel-edge); background:var(--panel);
    flex:none;
  }
  .ed-head h2{ font-size:1.02rem; margin:0 }
  .ed-tip{ font-size:.72rem; color:var(--ink-dim) }
  .ed-brush{ display:flex; align-items:center; gap:6px; font-size:.76rem; color:var(--ink-dim); margin-left:auto }
  .ed-brush input[type=range]{ width:110px }
  .ed-brush b{ color:var(--ink); min-width:34px; text-align:right }
  .ed-zoom{ display:flex; gap:4px }
  .ed-headbtn{ padding:6px 14px !important; font-weight:bold }
  /* même skin que .ed-side button (plus bas) : Annuler/Rétablir/Zoom/Fermer
     n'ont aucune raison d'avoir une couleur différente des autres boutons
     "normaux" de l'éditeur — un seul style neutre, celui du reste du jeu. */
  .ed-x{ background:var(--panel); border:1px solid var(--panel-edge); color:var(--ink);
         border-radius:6px; padding:5px 11px; cursor:pointer; font-size:.8rem }
  .ed-x:hover{ border-color:var(--accent-dim) }
  .ed-body{ display:flex; gap:10px; flex:1; min-height:0; padding:10px }
  .ed-palette{ display:flex; flex-direction:column; gap:4px; width:150px; flex:none; overflow-y:auto }
  .ed-palette .ed-cat{ font-size:.7rem; color:var(--ink-dim); margin-top:6px; text-transform:uppercase; letter-spacing:.04em }
  .ed-tool{
    display:flex; align-items:center; gap:7px;
    background:#241d2c; border:1px solid var(--panel-edge);
    border-radius:6px; padding:5px 8px; cursor:pointer;
    color:var(--ink); font-size:.8rem; text-align:left;
  }
  .ed-tool:hover{ border-color:var(--accent-dim) }
  .ed-tool.active{ border-color:var(--target); box-shadow:0 0 6px rgba(92,200,216,.5); background:#2c2740 }
  .ed-sw{ width:15px; height:15px; border-radius:3px; border:1px solid rgba(255,255,255,.2); flex:none }
  .ed-palsel{ width:100%; background:#1a1524; color:var(--ink);
              border:1px solid var(--target); border-radius:6px; padding:4px 6px;
              font-size:.76rem; margin:-1px 0 2px }
  .ed-desc{ font-size:.7rem; color:var(--ink-dim); line-height:1.35;
            background:#1a1524; border:1px solid var(--panel-edge); border-radius:6px;
            padding:5px 7px; margin:-1px 0 3px }
  /* z-index relevé (2026-09-03) : à 60, l'infobulle se retrouvait SOUS
     certains écrans plein cadre définis PLUS LOIN dans le DOM (ex. l'arbre de
     talents, lui aussi à 60 — à z-index égal, l'ordre du document tranche, et
     #talentShop vient après #edTip dans index.html). Relevée au-dessus de
     TOUTE fenêtre modale courante (la plus haute, #introLore, est à 150) :
     l'infobulle doit rester lisible par-dessus n'importe quel écran d'où on
     peut la déclencher, aujourd'hui comme pour un futur écran. */
  .ed-tip-box{
    position:fixed; z-index:200; display:none; pointer-events:none;
    max-width:280px; background:#0e0b16; color:var(--ink);
    border:1px solid var(--target); border-radius:8px; padding:7px 10px;
    font-size:.74rem; line-height:1.4; box-shadow:0 6px 20px rgba(0,0,0,.6);
  }
  .ed-tip-box b{ color:#ffd860 }
  /* Fenêtre d'info monstre ÉPINGLÉE (clic droit sur un ennemi/allié) : contrairement
     à l'infobulle au survol, elle reste affichée en position fixe tant qu'on ne la
     ferme pas, et son contenu se met à jour en continu (PV, effets actifs…). */
  .pinned-tip-box{
    position:fixed; z-index:59; display:none; pointer-events:auto;
    max-width:230px; top:180px; right:12px;
    background:#0e0b16; color:var(--ink);
    border:1px solid var(--target); border-radius:8px; padding:8px 10px 7px;
    font-size:.74rem; line-height:1.4; box-shadow:0 6px 20px rgba(0,0,0,.6);
  }
  .pinned-tip-box b{ color:#ffd860 }
  #enemyTipPinnedClose{
    position:absolute; top:3px; right:6px; cursor:pointer;
    color:#8a8a94; font-size:.8rem; line-height:1;
  }
  #enemyTipPinnedClose:hover{ color:#e0574a }
  .ed-canvaswrap{ position:relative; flex:1; display:flex;
                  background:#0c0a12; border:1px solid var(--panel-edge); border-radius:8px; overflow:auto }
  #edCanvas{ image-rendering:pixelated; cursor:crosshair; display:block; margin:auto;
             width:auto !important; height:auto !important; flex:none; max-width:none; max-height:none }
  .ed-status{ position:absolute; left:8px; bottom:6px; font-size:.72rem; color:var(--ink-dim);
              background:rgba(0,0,0,.5); padding:2px 6px; border-radius:4px; pointer-events:none }
  .ed-side{ width:236px; flex:none; display:flex; flex-direction:column; gap:8px; overflow-y:auto }
  .ed-group{ display:flex; flex-direction:column; gap:5px }
  .ed-group label{ font-size:.74rem; color:var(--ink-dim) }
  .ed-side select, .ed-side input{
    background:#241d2c; border:1px solid var(--panel-edge); color:var(--ink);
    border-radius:6px; padding:5px 7px; font-size:.8rem; width:100%;
  }
  .ed-actions2{ display:flex; gap:6px; flex-wrap:wrap }
  .ed-side button{
    background:#2a2436; border:1px solid var(--panel-edge); color:var(--ink);
    border-radius:6px; padding:6px 9px; cursor:pointer; font-size:.78rem; flex:1;
  }
  .ed-side button:hover{ border-color:var(--accent-dim) }
  /* action principale : MÊME or que #btnEndTurn/la boutique — un seul signal
     "action principale" dans toute la page, au lieu du vert isolé d'avant
     (qui n'était en plus pas repris dans l'éditeur de path : .pat-side
     appliquait sa PROPRE couleur pour le même rôle). */
  .ed-primary{ background:var(--accent) !important; border-color:var(--accent) !important;
               color:#1a1208 !important; font-weight:700 }
  .ed-sep{ border:none; border-top:1px solid var(--panel-edge); margin:4px 0 }
  .ed-list{ display:flex; flex-direction:column; gap:4px; max-height:150px; overflow-y:auto }
  .ed-list .ed-row{ display:flex; align-items:center; gap:6px; background:#241d2c;
                    border:1px solid var(--panel-edge); border-radius:6px; padding:4px 7px; font-size:.76rem }
  .ed-list .ed-row span{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer }
  .ed-list .ed-del{ color:#e08080; cursor:pointer; padding:0 4px }
  .ed-empty{ font-size:.74rem; color:var(--ink-dim); font-style:italic }
  #edMonPanel, #edObjPanel{ background:#221b2e; border:1px solid var(--target); border-radius:8px; padding:8px }
  .ed-field{ display:flex; align-items:center; gap:6px; font-size:.76rem; color:var(--ink-dim); margin-top:4px }
  .ed-field span{ width:52px }
  .ed-field input[type=number]{ width:auto; flex:1 }
  .ed-field input[type=range]{ flex:1 }
  .ed-sublabel{ font-size:.72rem; color:var(--ink-dim); margin-top:6px }
  .ed-drops{ display:grid; grid-template-columns:1fr 1fr; gap:2px 8px; max-height:120px; overflow-y:auto;
             background:#1a1524; border:1px solid var(--panel-edge); border-radius:6px; padding:5px }
  .ed-drops label{ display:flex; align-items:center; gap:4px; font-size:.72rem; color:var(--ink); cursor:pointer }
  .ed-drops input{ width:auto !important }
  .ed-fills{ display:grid; grid-template-columns:1fr 1fr; gap:5px }
  .ed-x[disabled]{ opacity:.4; cursor:default }
  /* petit écran : l'éditeur défile, rien n'est coupé */
  @media (max-height:720px), (max-width:1100px){
    .ed-body{ overflow:auto }
  }
  .cp-card{
    background:var(--panel);
    border:1px solid var(--accent-dim);
    border-radius:12px;
    padding:24px 28px;
    max-width:780px; width:94%;
    max-height:88%; overflow:auto;
    box-shadow:0 0 40px rgba(224,168,60,.15), 0 12px 40px rgba(0,0,0,.6);
  }
  .cp-card h2{
    color:var(--accent);
    font-size:1.2rem; letter-spacing:.12em; text-transform:uppercase;
    margin-bottom:16px; text-align:center;
  }
  /* --- connexion --- */
  /* Élargie de 430 à 520 px (2026-08-20) : le classement y gagne de la place et,
     combiné aux lignes sur deux niveaux (08-personnalisation-victoire.css), plus
     rien n'est tronqué. `min()` garde la carte dans l'écran sur mobile, où c'est
     la mise sur deux lignes qui fait tout le travail. */
  .lp-card{max-width:min(520px, 94vw)}
  #loginList{display:flex; flex-direction:column; gap:8px; margin-bottom:14px}
  .lp-item{
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    padding:10px 12px;
    background:#231d2c; border:1px solid var(--panel-edge); border-radius:8px;
    cursor:pointer;
    transition:border-color .12s, background .12s;
  }
  .lp-item:hover{border-color:var(--target); background:#1e2b33}
  .lp-name{color:var(--ink); font-weight:700}
  .lp-meta{color:var(--ink-dim); font-size:.78rem; flex:1}

  /* ---------- ÉTAPE 2 DE LA CONNEXION : liste des personnages du compte
       (voir showCharPick(), js/57). Même carte que l'écran de compte pour que
       l'enchaînement des deux étapes se lise comme une continuité. ---------- */
  #charPick{ position:absolute; inset:0; display:none; align-items:center;
             justify-content:center; background:rgba(8,6,12,.9); z-index:22 }
  #charPick.show{ display:flex }
  .lp-note-inline{ font-size:.72rem; color:var(--ink-dim) }
  /* Le champ de création était COLLÉ à la dernière ligne de la liste, sans rien
     pour dire que c'est une autre action (2026-08-20, retour Pixel). On l'isole
     par un filet et de l'air, comme une section à part. */
  #charPick .lp-new{ margin-top:14px; padding-top:12px;
    border-top:1px solid var(--panel-edge,#3a3050) }
  #charList{ margin-bottom:2px }
  /* AVATAR : le sprite réel du personnage (canvas), rendu en pixel-art net.
     Repli sur l'emoji de classe quand aucun sprite n'est disponible. */
  .lp-avatar{ flex:0 0 auto; width:34px; height:34px; margin-right:8px;
    display:flex; align-items:center; justify-content:center;
    border-radius:8px; background:#1a1626; border:1px solid var(--panel-edge,#3a3050);
    font-size:1.2rem; overflow:hidden }
  .lp-avatar-cv{ width:32px; height:32px; image-rendering:pixelated; display:block }
  .lp-back{ margin-top:12px; padding:8px 18px; border-radius:8px }

  /* Bouton d'installation (PWA, js/85) : masqué tant que le navigateur n'a pas
     signalé que c'est possible — inutile de proposer ce qu'on ne peut pas faire. */
  #pwaInstall{ display:none; margin-top:10px; padding:9px 16px; border-radius:9px;
    font-size:.82rem; background:#243a2c; border:1px solid #3f6a4c; color:#bfe6cb }
  #pwaInstall.show{ display:inline-block }
  #pwaInstall.pwa-ios{ background:#243046; border-color:#3f5a7a; color:#cfe0f5;
    font-size:.76rem; cursor:default }

  /* ---------- GESTION DES COMPTES (administration, js/86) ----------
     Même carte que les autres écrans plein cadre. z-index 26 : au-dessus des
     écrans de connexion (22) mais SOUS la confirmation (30), qui doit toujours
     passer devant ce qui l'a déclenchée. */
  #adminPanel{ position:absolute; inset:0; display:none; align-items:center;
               justify-content:center; background:rgba(8,6,12,.92); z-index:26 }
  #adminPanel.show{ display:flex }
  #adminPanel .card{ max-width:min(640px, 94vw); max-height:88vh; overflow-y:auto; text-align:left }
  #adminList{ display:flex; flex-direction:column; gap:10px; margin:8px 0 }
  .adm-compte{ border:1px solid var(--panel-edge,#3a3050); border-radius:10px;
               padding:9px 11px; background:#1a1626 }
  .adm-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; margin-bottom:6px }
  .adm-head b{ font-size:.95rem }
  .adm-meta{ font-size:.7rem; color:var(--ink-dim) }
  .adm-persos{ display:flex; flex-direction:column; gap:4px; margin-bottom:7px }
  .adm-perso{ display:flex; align-items:center; gap:8px; flex-wrap:wrap;
              padding:5px 8px; border-radius:7px; background:#15111d }
  .adm-nom{ font-weight:600; font-size:.8rem }
  .adm-perso .adm-meta{ flex:1 }
  .adm-perso button, .adm-actions button{ padding:4px 9px; font-size:.68rem; white-space:nowrap }
  .adm-actions{ display:flex; gap:7px; flex-wrap:wrap; border-top:1px solid var(--panel-edge,#3a3050); padding-top:7px }
  .adm-vide{ font-size:.76rem; color:var(--ink-dim); font-style:italic }