:root{--abyss:#02070a;--ink:#d7e2df;--verdigris:#35c4a5;--old-gold:#d6b25e;--violet:#c8a3ff;--bleu-scene:#7fb0d8;--rouge:#e07a7a;}
    *{box-sizing:border-box;} html,body{height:100%;}
    body{margin:0;color:var(--ink);font-family:ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;
      background:radial-gradient(ellipse at 14% 0%,rgba(31,103,84,.16),transparent 42%),
                 radial-gradient(ellipse at 86% 6%,rgba(88,28,72,.14),transparent 40%),var(--abyss);
      /* ⚠️ `100vh` N'EST PAS LA HAUTEUR VISIBLE SUR MOBILE : c'est celle de
         l'écran SANS la barre d'adresse, donc plus grande que ce qu'on voit. Le
         bas de la page passait dessous et, `overflow:hidden` aidant, devenait
         inatteignable — il fallait zoomer pour y accéder (Vincent, 28/09/2026,
         côté MJ où la barre du haut est plus haute). `dvh` suit la barre d'adresse.
         La ligne `vh` reste AVANT, comme repli pour les vieux navigateurs. */
      display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden;}
    .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}
    button{font:inherit;cursor:pointer;}
    a{text-decoration:none;}

    /* ⚠️ LA CARTE EST CENTRÉE PAR `margin:auto`, PAS par `align-items/justify-content:center`. Centrer le
       conteneur ET le laisser défiler (`overflow:auto`) est un piège classique : quand la carte est plus
       haute que l'écran, elle déborde autant EN HAUT qu'EN BAS, et le haut est INATTEIGNABLE — on ne défile
       pas vers des positions négatives. Sur téléphone (carte de 691 px, écran de 420 à 664), « Accueil » et
       le titre étaient coupés et il fallait dézoomer (Vincent, 02/10/2026). Avec `margin:auto` : centrée
       quand ça tient, défilante depuis le haut quand ça ne tient pas. Rien ne change sur ordinateur. */
    #ecranAuth,#ecranHub,#ecranMdp{flex:1;display:none;padding:1rem;overflow:auto;}
    #ecranAuth>.panneau,#ecranHub>.panneau,#ecranMdp>.panneau{margin:auto;}
    .panneau{width:100%;max-width:420px;border:1px solid rgba(53,196,165,.3);border-radius:.8rem;padding:1.6rem;
      background:linear-gradient(160deg,rgba(13,22,25,.97),rgba(5,11,14,.98));box-shadow:0 20px 60px rgba(0,0,0,.5);}
    .panneau h1{margin:0 0 .3rem;font-size:1.3rem;color:var(--verdigris);text-shadow:0 0 18px rgba(53,196,165,.3);}
    .panneau p{margin:0 0 1rem;font-size:.8rem;opacity:.6;}
    .panneau label{display:block;font-size:.72rem;font-weight:700;opacity:.8;margin:.7rem 0 .25rem;text-transform:uppercase;letter-spacing:.04em;}
    .panneau input,.panneau select{width:100%;font:inherit;padding:.6rem .7rem;border-radius:.45rem;border:1px solid rgba(53,196,165,.4);background:#0d1619;color:var(--ink);}
    .go{width:100%;margin-top:1rem;padding:.7rem;border-radius:.5rem;font-weight:800;letter-spacing:.03em;color:#eafff7;
      background:linear-gradient(135deg,#126954,#2bb894);border:1px solid rgba(107,236,201,.42);}
    .go.secondaire{background:rgba(214,178,94,.12);border:1px solid rgba(214,178,94,.45);color:var(--old-gold);}
    .err{color:#fca5a5;font-size:.78rem;margin-top:.7rem;min-height:1em;}
    .hub-sep{display:flex;align-items:center;gap:.6rem;margin:1.3rem 0 .2rem;color:rgba(215,226,223,.4);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;}
    .hub-sep::before,.hub-sep::after{content:"";flex:1;height:1px;background:rgba(79,112,103,.3);}

    #ecranSalle{flex:1;display:none;flex-direction:column;min-height:0;}
    .topbar{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;padding:.6rem 1rem;border-bottom:1px solid rgba(53,196,165,.25);
      background:linear-gradient(180deg,rgba(13,22,25,.97),rgba(5,11,14,.9));}
    .salle-nom{font-weight:800;color:var(--verdigris);text-shadow:0 0 16px rgba(53,196,165,.3);}
    .badge-mj{font-size:.62rem;font-weight:800;background:rgba(159,106,216,.25);border:1px solid rgba(159,106,216,.6);color:var(--violet);padding:.05rem .4rem;border-radius:999px;vertical-align:middle;margin-left:.3rem;}
    .msg.soin{border-left:3px solid #35c4a5;background:rgba(53,196,165,.07);}
    .soin-mental{color:#c084fc;font-weight:700;}
    .soin-physique{color:#fb923c;font-weight:700;}
    .etatconn{font-size:.72rem;opacity:.7;}
    .etatconn[data-etat="ok"]{opacity:.75;color:var(--verdigris);}
    .etatconn[data-etat="attente"]{opacity:.9;color:#d6b25e;}
    .etatconn[data-etat="ko"]{opacity:1;color:#e2725b;font-weight:700;}
    .pill{font-size:.74rem;padding:.18rem .55rem;border-radius:999px;background:rgba(2,7,10,.6);border:1px solid rgba(79,112,103,.35);white-space:nowrap;}
    .pill.toi{border-color:rgba(214,178,94,.55);color:var(--old-gold);}
    .grow{flex:1;}
    .btn{font-weight:700;font-size:.78rem;padding:.42rem .8rem;border-radius:.45rem;border:1px solid;background:transparent;color:var(--ink);display:inline-flex;align-items:center;gap:.35rem;}
    .btn i, .btn svg { width:14px; height:14px; }
    .btn-or{background:rgba(214,178,94,.12);border-color:rgba(214,178,94,.45);color:var(--old-gold);}
    .btn-rouge{background:rgba(124,34,34,.25);border-color:rgba(218,72,72,.5);color:#fca5a5;}
    .btn-accueil{text-decoration:none;line-height:1;padding:.32rem .5rem;display:inline-flex;align-items:center;}
    .btn-accueil svg{width:1.05rem;height:1.05rem;}
    .panneau-entete{display:flex;justify-content:flex-start;margin:-.3rem 0 .5rem;}
    .lien-accueil{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--old-gold);text-decoration:none;opacity:.8;transition:opacity .15s;}
    .lien-accueil:hover{opacity:1;}
    .lien-accueil svg{width:.95rem;height:.95rem;}
    .btn-accueil:hover{filter:brightness(1.35);}

    /* ⚠️ `overflow:hidden` est INDISPENSABLE : le chat rangé est décalé hors
       cadre, et sans ça il élargit la page — une barre de défilement apparaît
       le long du bord, des deux côtés (signalé par Vincent le 26/09/2026).
       Sans danger pour les fenêtres flottantes : elles sont posées sur `body`,
       pas ici. Seule la bande vit dans ce conteneur, et elle est dans le cadre. */
    .corps{flex:1;display:flex;min-height:0;gap:.6rem;padding:.6rem;position:relative;overflow:hidden;}
    /* Intervertir les colonnes : `row-reverse` change l'ORDRE VISUEL sans
       toucher au balisage — la poignée de largeur reste entre les deux, et
       aucun script n'a à déplacer d'élément. */
    .corps.chat-a-gauche{flex-direction:row-reverse;}
    /* Le chat GLISSE depuis son bord en fondu, exactement comme la fiche (`#iframeFiche`, plus bas) :
       0,26 s, `ease`, `transform` + `opacity`. Il animait sa MARGE — impossible de passer de « hors flux »
       (rangé, `position:absolute`) à « dans le flux » (revenu) par la marge : il apparaissait d'un coup,
       seul le fondu jouait (Vincent, 02/10/2026). Revenu, il pousse toujours la fiche d'un coup : animer la
       largeur ferait redessiner l'iframe à chaque image. Le mouvement est celui de `.chat-replie`
       (translateX ±110 %), qui sait déjà de quel côté il est. */
    .col-chat{transition:transform .26s ease, opacity .26s ease;}
    /* SEUL L'ÉTAT RANGÉ sort du flux. Quand le chat revient, il redevient une
       colonne comme avant : il POUSSE la fiche et garde sa poignée de largeur.
       Le faire passer par-dessus épargnait un reflow à l'iframe, mais faisait
       disparaître la poignée et ramenait le chat à 400 px au lieu de sa
       largeur réglée — deux choses tout de suite visibles à l'usage. */
    .col-chat.chat-replie{position:absolute;top:.6rem;bottom:.6rem;right:.6rem;
      width:var(--l-chat,400px);max-width:calc(100% - 1.2rem);margin:0 !important;
      opacity:0;pointer-events:none;transform:translateX(110%);}
    .corps.chat-a-gauche .col-chat.chat-replie{right:auto;left:.6rem;transform:translateX(-110%);}
    /* Revenu : dans le flux, mais un liseré rappelle qu'il repartira seul. */
    .col-chat.chat-revenu{box-shadow:0 0 0 1px rgba(53,196,165,.4),0 0 22px rgba(53,196,165,.12);}
    /* ⚠️ Le retour temporaire passe PAR-DESSUS la fiche au lieu de la pousser.
       Pousser reviendrait à redimensionner l'`<iframe>` à chaque message : la
       fiche Hornet se re-dispose entièrement, et le défilement saute sous les
       yeux du joueur. Superposer ne lui coûte aucun reflow. */

    /* LA BANDE, quand le chat est rangé. Fine, discrète — et surtout DANS LE
       FLUX : elle a sa propre colonne, comme le chat en tout petit, au lieu
       d'être posée par-dessus. En `position:absolute` elle chevauchait la
       fiche, dont la bordure et la barre de défilement passaient dessous : les
       deux « s'imbriquaient mal » (Vincent, 26/09/2026). Étant le dernier
       enfant du conteneur, elle suit le côté toute seule — `row-reverse` la
       renvoie à gauche sans une ligne de plus. */
    .bande-chat{flex:0 0 14px;align-self:stretch;
      display:none;align-items:center;justify-content:center;cursor:pointer;
      border:1px solid rgba(53,196,165,.3);border-radius:.3rem;background:rgba(2,7,10,.45);}
    /* Rangé, la poignée de largeur n'a plus rien à séparer : elle s'efface
       pour de bon, sinon elle laisse une colonne vide à côté de la bande. */
    .corps.chat-range .poignee-largeur{display:none !important;}
    .bande-chat:hover{background:rgba(53,196,165,.12);border-color:rgba(53,196,165,.6);}
    .bande-dedans{display:flex;flex-direction:column;align-items:center;gap:.3rem;color:var(--verdigris);}
    /* ⚠️ Lucide REMPLACE le <i> par un <svg> : une règle qui ne vise que `i`
       ne s'applique jamais, et l'icône garde ses 24 px par défaut. */
    .bande-chat i,.bande-chat svg{width:10px;height:10px;}
    /* ⚠️ La pastille ne DÉBORDE PAS. Collée au bord, la bande n'a pas de
       « dehors » : ce qui dépasse tombe hors de la fenêtre et se fait rogner.
       Elle est donc dans le flux, empilée au-dessus de l'icône. */
    .bande-pastille{min-width:12px;height:12px;padding:0 1px;border-radius:7px;line-height:1;
      background:var(--old-gold);color:#1a1205;font-size:.46rem;font-weight:800;
      display:none;align-items:center;justify-content:center;}
    .bande-pastille.on{display:flex;}

    /* Le petit menu de disposition, dans la barre du haut. */
    .dispo-menu{position:relative;display:inline-block;}
    .dispo-titre{font-size:.64rem;text-transform:uppercase;letter-spacing:.09em;opacity:.5;
      padding:.45rem .5rem .2rem;}
    .dispo-titre + .dispo-item,.dispo-titre + .dispo-bascule{margin-top:0;}
    #reglageSon .dispo-reglage{border-top:none;margin-top:0;padding-top:.2rem;}
    .mob-switch button{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;}
    .mob-switch i,.mob-switch svg{width:14px;height:14px;}
    /* ⚠️ Encore Lucide : sans viser aussi `svg`, l'icône garde ses 24 px et le
       bouton paraît énorme à côté des autres. Troisième fois en deux jours. */
    #btnDispo{display:inline-flex;align-items:center;justify-content:center;padding:.3rem .45rem;}
    #btnDispo i,#btnDispo svg{width:15px;height:15px;}
    .dispo-boite{position:absolute;top:calc(100% + .35rem);right:0;z-index:70;width:255px;
      border:1px solid rgba(53,196,165,.3);border-radius:.5rem;background:rgba(2,7,10,.97);
      box-shadow:0 10px 30px rgba(0,0,0,.6);padding:.35rem;}
    .dispo-item{display:flex;align-items:center;gap:.45rem;width:100%;font:inherit;font-size:.76rem;
      padding:.4rem .5rem;border-radius:.35rem;border:1px solid transparent;background:transparent;
      color:var(--ink);cursor:pointer;text-align:left;}
    .dispo-item:hover{border-color:rgba(53,196,165,.45);background:rgba(53,196,165,.1);color:var(--verdigris);}
    .dispo-item i,.dispo-item svg{width:15px;height:15px;flex:0 0 15px;}
    .dispo-reglage{display:flex;flex-direction:column;gap:.25rem;padding:.45rem .5rem .3rem;
      border-top:1px solid rgba(79,112,103,.3);margin-top:.25rem;font-size:.76rem;}
    .dispo-bascule{display:flex;align-items:center;gap:.45rem;font-size:.76rem;cursor:pointer;
      padding:.4rem .5rem;border-radius:.35rem;}
    .dispo-bascule:hover{background:rgba(53,196,165,.1);color:var(--verdigris);}
    .dispo-bascule input{accent-color:var(--verdigris);}
    .dispo-reglage b{color:var(--verdigris);}
    .dispo-reglage input[type=range]{width:100%;accent-color:var(--verdigris);}
    .dispo-reglage .aide{font-size:.66rem;opacity:.6;line-height:1.35;}
    @media (max-width:900px){ .dispo-menu{display:none;} }
    .col-fiche{flex:1.7;display:flex;flex-direction:column;min-width:0;border:1px solid rgba(53,196,165,.22);border-radius:.6rem;overflow:hidden;background:rgba(2,7,10,.4);position:relative;}
    .col-fiche .lbl{font-size:.72rem;padding:.35rem .7rem;color:rgba(215,226,223,.55);background:rgba(2,7,10,.5);border-bottom:1px solid rgba(79,112,103,.3);}
    .col-fiche iframe{flex:1;width:100%;border:0;background:#02070a;}
    .bandeau-vues{display:flex;gap:.3rem;padding:.35rem .4rem;overflow-x:auto;background:rgba(2,7,10,.6);border-bottom:1px solid rgba(79,112,103,.3);flex:0 0 auto;}
    /* ⚠️ SUR ORDINATEUR, une 2e ligne plutôt qu'un défilement horizontal (Vincent, 03/10/2026 : « le curseur pour aller de
       droite à gauche dans le bandeau, c'est vraiment pas fou »). SUR TÉLÉPHONE ça reste un défilement (règle de départ
       du bandeau, et la place manque trop pour une 2e ligne sans pousser la scène). Seuil : LARGEUR_MOBILE (900px,
       js/salle-espace.js) — le même que celui qui empile les colonnes. */
    @media (min-width:901px){ .bandeau-vues{flex-wrap:wrap;row-gap:.3rem;overflow-x:visible;} }
    .vue-onglet{white-space:nowrap;font-size:.72rem;font-weight:700;padding:.3rem .6rem;border-radius:.4rem;border:1px solid rgba(79,112,103,.4);background:rgba(2,7,10,.4);color:rgba(215,226,223,.7);cursor:pointer;}
    .vue-onglet.on{border-color:rgba(53,196,165,.6);background:rgba(53,196,165,.14);color:var(--verdigris);}
    .vue-x{margin-left:.4rem;opacity:.5;font-weight:400;}
    .vue-x:hover{opacity:1;color:#fca5a5;}
    .vue-vis-btn{flex:0 0 auto;font-size:.7rem;font-weight:700;padding:.25rem .55rem;border-radius:.4rem;border:1px solid rgba(214,178,94,.45);background:rgba(214,178,94,.12);color:var(--old-gold);cursor:pointer;white-space:nowrap;}
    .dest-cases{display:flex;flex-wrap:wrap;gap:.3rem;}
    .dest-chip{font-size:.72rem;padding:.2rem .55rem;border-radius:999px;border:1px solid rgba(79,112,103,.4);background:rgba(2,7,10,.4);color:rgba(215,226,223,.7);cursor:pointer;}
    .dest-chip.on{border-color:rgba(53,196,165,.6);background:rgba(53,196,165,.16);color:var(--verdigris);}
    .sp-tabs{display:flex;flex-wrap:wrap;gap:.25rem;padding:.35rem;flex:0 0 auto;border-bottom:1px solid rgba(79,112,103,.3);}
    .sp-tab{white-space:nowrap;font-size:.72rem;font-weight:700;padding:.35rem .55rem;border-radius:.4rem .4rem 0 0;color:rgba(215,226,223,.55);border:1px solid transparent;border-bottom:none;background:transparent;cursor:pointer;}
    .sp-tab.on{color:var(--verdigris);background:rgba(2,7,10,.45);border-color:rgba(79,112,103,.3);}
    .sp-vue{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;}
    .prive-tag{font-size:.62rem;opacity:.65;margin-left:.45rem;color:var(--verdigris);white-space:nowrap;}
    .qui.mj{color:#ff5a5a !important;font-weight:800;}
    .auto-toggle{display:inline-flex;align-items:center;gap:.25rem;font-size:.74rem;opacity:.85;cursor:pointer;user-select:none;}
    .trade-overlay{position:fixed;inset:0;z-index:80;background:rgba(2,7,10,.78);display:flex;align-items:center;justify-content:center;padding:1rem;}
    .boite-suppr{max-width:24rem;text-align:center;padding:1.4rem 1.3rem 1.2rem;}
    .boite-suppr h3{margin:0 0 .9rem;font-size:1.12rem;color:#fca5a5;line-height:1.3;}
    .suppr-texte{margin:0 0 .5rem;font-size:.95rem;line-height:1.55;}
    .suppr-texte b{color:var(--old-gold);font-size:1.05rem;}
    .suppr-avert{margin:0 0 1.1rem;font-size:.86rem;line-height:1.55;opacity:.7;}
    .suppr-lbl{display:block;font-size:.88rem;margin-bottom:.45rem;}
    .suppr-lbl b{color:#fca5a5;letter-spacing:.02em;}
    .suppr-champ{width:100%;font:inherit;font-size:1rem;text-align:center;padding:.6rem .7rem;border-radius:.45rem;border:1px solid rgba(218,72,72,.5);background:#0d1619;color:var(--ink);outline:none;}
    .suppr-champ:focus{border-color:#da4848;}
    .suppr-boutons{display:flex;gap:.6rem;margin-top:1.1rem;}
    .suppr-boutons .go-mini{flex:1;font-size:.9rem;padding:.55rem .6rem;}
    .suppr-boutons .suppr-go{background:rgba(124,34,34,.4);border:1px solid rgba(218,72,72,.55);color:#fca5a5;}
    .suppr-boutons .suppr-go:disabled{opacity:.4;cursor:not-allowed;}
    .suppr-boutons .suppr-go:not(:disabled){cursor:pointer;}
    .suppr-boutons .suppr-go:not(:disabled):hover{background:rgba(160,42,42,.6);color:#ffd9d9;}
    .trade-box{background:#0d1619;border:1px solid rgba(53,196,165,.4);border-radius:.6rem;padding:1rem 1.1rem;width:min(360px,92vw);box-shadow:0 10px 40px rgba(0,0,0,.6);}
    .trade-lbl{display:block;font-size:.72rem;opacity:.6;margin:.55rem 0 .2rem;}
    .trade-sel{width:100%;font:inherit;padding:.45rem .5rem;border-radius:.4rem;border:1px solid rgba(53,196,165,.35);background:#0b1316;color:var(--ink);}
    .trade-notif{background:rgba(53,196,165,.1) !important;border:1px solid rgba(53,196,165,.35);border-radius:.5rem;padding:.5rem .6rem;}
    .trade-actions-row{display:flex;gap:.4rem;margin-top:.45rem;}
    /* LE BLOC NE S'ETIRE PAS. Sa largeur est celle de son contenu le plus
       large — les huit des, 304 px — et rien d'autre. C'est ce qui rend toute
       la barre immobile : « Echange », pousse au bord droit de CE bloc et non
       de la colonne, tombe sous d100 et n'en bouge plus. Avant, il etait
       ancre au bord droit de la colonne et glissait de 254 a 604 px selon la
       largeur du panneau. Le max-width evite qu'il deborde si la colonne
       devient plus etroite que les des. Le margin-left:auto colle ce bloc au
       bord DROIT de la colonne, aligne avec « Envoyer » : il se deplace donc
       avec ce bord quand on etire, mais d'un seul tenant — rien ne s'ecarte
       ni ne se deforme a l'interieur. */
    /* Le decalage cale le bord gauche d'« Echange » sur celui d'« Envoyer ».
       Il vaut exactement la difference de largeur des deux boutons (91 - 86).
       Valeur MESUREE, pas devinee : un test la verifie au pixel pres, et
       tombera si un des deux libelles change. */
    .bloc-des{width:max-content;max-width:100%;margin-left:auto;margin-right:5px;}
    .ligne-des{display:flex;flex-wrap:wrap;gap:.25rem;align-items:center;margin-bottom:.4rem;}
    /* Les des forment un groupe : ils se repartissent entre eux quand la place
       manque, sans jamais entrainer le modificateur ni le bouton d'echange. */
    .des-groupe{display:flex;flex-wrap:wrap;gap:.25rem;flex:1 1 auto;min-width:0;}
    /* Seconde rangee : le modificateur a gauche, l'echange pousse a droite. */
    /* CETTE RANGEE EST ENTIEREMENT FIGEE. Rien n'y bouge quand le panneau
       change de largeur : ni les des au-dessus, ni les deux champs, ni
       « Echange ». Le bouton etait auparavant pousse au bord droit par un
       margin-left:auto — il gardait sa taille mais sa POSITION glissait (254 px
       du bord gauche a 350 px de panneau, 604 px a 700 px). Il est maintenant
       ANCRE au bord droit, au-dessus d'« Envoyer ». LE RESTE NE BOUGE PAS :
       les huit des restent serres a gauche, avec le meme espacement a toutes
       les largeurs, et « Des »/« Modif. » calent sous d2. On a essaye de les
       etaler d'un bord a l'autre (space-between) : sur un panneau large les
       des se retrouvaient separes par de grands vides. Une seule chose
       s'elargit dans toute la barre : la zone de saisie.
       La rangee ne se replie pas non plus : si on y ajoute un element un jour,
       ca debordera au lieu de passer a la ligne. Le plancher de 350 px
       (js/salle-espace.js) est justement mesure pour que tout tienne. */
    .ligne-des-bas{flex-wrap:nowrap;}
    .ligne-des-bas .trade-btn{margin-left:auto;flex:0 0 auto;white-space:nowrap;}
    .de-btn{font:inherit;font-size:.73rem;font-weight:700;padding:.3rem .45rem;border-radius:.4rem;border:1px solid rgba(53,196,165,.4);background:rgba(53,196,165,.1);color:var(--verdigris);cursor:pointer;transition:background .12s;}
    .de-btn:hover{background:rgba(53,196,165,.24);}
    .de-btn.trade-btn{font-size:.95rem;padding:.25rem .5rem;}
    .des-num{width:2.7rem;font:inherit;font-size:.73rem;padding:.3rem;border-radius:.4rem;border:1px solid rgba(53,196,165,.35);background:#0d1619;color:var(--ink);text-align:center;}
    .des-mod{width:3.4rem;}
    .ligne-mod{display:flex;align-items:center;gap:.45rem;margin-bottom:.4rem;}
    .des-lbl{font-size:.72rem;opacity:.75;white-space:nowrap;font-weight:600;}
    /* ⚠️ ALIGNEMENT DE LA BARRE DE DÉS : le padding horizontal de .63rem (au lieu de .7rem)
       compense exactement la largeur de l'icône SVG Lucide (85,81 px au total contre 85,86 px
       avec l'emoji 🤝 d'origine). Avec .7rem, le bouton mesure 88,03 px et son bord gauche
       déborde de 2 px à gauche d'« Envoyer » (247 vs 249 px à 350 px), ce qui fait échouer
       la non-régression [BARRE]. Avec .63rem, le bord gauche tombe pile sur celui d'« Envoyer »
       (249, 329, 459, 599 px) ET le bord droit reste aligné sous d100 (335, 415, 545, 685 px). */
    .de-btn.trade-btn{font-size:.74rem;padding:.32rem .63rem;background:rgba(214,178,94,.16);border-color:rgba(214,178,94,.5);color:var(--old-gold);}
    .cat-menu{position:relative;display:inline-block;}
    .cat-titre{display:inline-flex;align-items:center;gap:.3rem;font-size:.74rem;font-weight:700;padding:.3rem .5rem;border-radius:.4rem;color:rgba(215,226,223,.7);background:rgba(2,7,10,.4);border:1px solid rgba(79,112,103,.3);cursor:pointer;white-space:nowrap;}
    /* ⚠️ Lucide remplace le <i> par un <svg> : viser les DEUX, sinon l'icône
       reste à 24 px et le bouton paraît énorme (quatrième occurrence). */
    .cat-titre i,.cat-titre svg{width:13px;height:13px;}
    .cat-titre.ouvert{border-color:rgba(53,196,165,.6);background:rgba(53,196,165,.14);color:var(--verdigris);}
    /* ─ Bouton PNJ dans le bandeau : couleur or de la fiche, distinct des partages ─ */
    .cat-titre.pnj{border-color:rgba(214,178,94,.5);color:var(--old-gold);}
    .cat-titre.pnj.ouvert{border-color:rgba(214,178,94,.75);background:rgba(214,178,94,.14);color:var(--old-gold);}
    /* Pastille PNJ : or au lieu du vert des partages */
    .cat-titre.pnj .cat-pastille{background:rgba(214,178,94,.2);color:var(--old-gold);}
    /* Vignette PNJ : 16/10 comme la Scène, nom et boutons par-dessus en bas, pastille en haut */
    .pnj-vig{position:relative;border:1px solid rgba(79,112,103,.45);border-radius:.5rem;
      cursor:pointer;overflow:hidden;transition:border-color .15s;background:#0a1417;aspect-ratio:16/10;}
    .pnj-vig:hover{border-color:rgba(214,178,94,.5);}
    .pnj-vig.on{border-color:rgba(214,178,94,.7);box-shadow:0 0 0 1px rgba(214,178,94,.25) inset;}
    .pnj-vig .portrait{position:absolute;inset:0;display:grid;place-items:center;
      background:linear-gradient(135deg,#0f1c1f,#192a2e);color:rgba(215,226,223,.35);}
    .pnj-vig .portrait img{width:100%;height:100%;object-fit:cover;display:block;}
    .pnj-vig .portrait i,.pnj-vig .portrait svg{width:26px;height:26px;}
    .pnj-vig .lbl{position:absolute;left:0;right:0;bottom:0;padding:.35rem .45rem .3rem;
      background:linear-gradient(to top,rgba(2,7,10,.98) 0%,rgba(2,7,10,.85) 65%,rgba(2,7,10,0) 100%);
      display:flex;flex-direction:column;gap:.2rem;z-index:1;}
    .pnj-vig .nom{font-size:.72rem;font-weight:600;color:#e8f1ee;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;display:block;}
    .pnj-vig .actions{display:flex;gap:.25rem;align-items:center;justify-content:flex-end;width:100%;}
    .pnj-vig .ic{opacity:.6;display:inline-flex;cursor:pointer;color:#e8f1ee;}
    .pnj-vig .ic:hover{opacity:1;}
    .pnj-vig .ic i,.pnj-vig .ic svg{width:14px;height:14px;}
    .pnj-vig .ic.sup:hover{color:#fca5a5;}
    /* Pastille « Affiché » : par-dessus en haut */
    .pnj-vig .pnj-affi{position:absolute;top:.25rem;right:.25rem;z-index:2;
      font-size:.6rem;font-weight:800;padding:.05rem .3rem;border-radius:999px;
      background:rgba(214,178,94,.2);color:var(--old-gold);border:1px solid rgba(214,178,94,.5);
      white-space:nowrap;}
    /* Panneau étroit pour la catégorie Joueurs : laisse voir la fiche derrière */
    /* Panneau de VIGNETTES (PNJ et Joueurs) : la MEME largeur pour les deux,
       et au plus 4 vignettes par ligne — 4 × 158 px + 3 gouttières + le
       padding. Avant : pleine largeur pour les PNJ, 420 px pour les Joueurs.
       Deux panneaux voisins, deux largeurs, sans raison. Sous 680 px la
       grille tombe d'elle-même à 3, puis 2, puis 1 colonne. */
    #catPanneau.etroit{right:auto;width:min(650px, calc(100% - .8rem));}
    .cat-pastille{font-size:.62rem;font-weight:800;padding:0 .3rem;border-radius:999px;
      background:rgba(53,196,165,.2);color:var(--verdigris);}
    /* Un trait entre les GROUPES du bandeau : le décor, ce que le MJ pilote,
       les fiches et les gens, le son, puis les partages. Sans eux, neuf
       boutons alignés se lisent comme une seule liste indifférenciée. */
    .bandeau-vues .sep-bandeau{width:1px;flex:0 0 auto;align-self:stretch;
      margin:.15rem .3rem;background:rgba(79,112,103,.5);}
    /* ⚠️ « Joueurs » porte l'OR de la fiche, comme PNJ : ce sont des fiches de
       personnages, pas des partages. Deux classes, jamais `.joueurs` seule. */
    .cat-titre.joueurs{border-color:rgba(214,178,94,.5);color:var(--old-gold);}
    .cat-titre.joueurs.ouvert{background:rgba(214,178,94,.14);}
    /* La pastille suit la couleur de son onglet : or pour Joueurs comme pour
       PNJ, vert pour les partages. Sans cette règle elle restait verte, seule
       couleur qui jurait dans le bandeau (Vincent, 28/09/2026). */
    .cat-titre.joueurs .cat-pastille{background:rgba(214,178,94,.2);color:var(--old-gold);}
    .cat-menu.actif .cat-titre{color:var(--verdigris);border-color:rgba(53,196,165,.5);}
    .cat-liste{position:absolute;top:100%;left:0;margin-top:.2rem;z-index:30;flex-direction:column;gap:.15rem;background:#0d1619;border:1px solid rgba(53,196,165,.4);border-radius:.4rem;padding:.3rem;min-width:170px;max-height:250px;overflow:auto;box-shadow:0 8px 24px rgba(0,0,0,.5);}
    .cat-item{display:flex;align-items:center;gap:.3rem;font-size:.76rem;padding:.3rem .4rem;border-radius:.3rem;cursor:pointer;white-space:nowrap;}
    .cat-item:hover{background:rgba(53,196,165,.12);}
    .cat-item.on{background:rgba(53,196,165,.2);color:var(--verdigris);}
    .vue-fleche{margin-left:auto;opacity:.6;cursor:pointer;padding:0 .15rem;font-weight:700;}
    .vue-fleche:hover{opacity:1;color:var(--verdigris);}
    /* ⚠️ LE PANNEAU FLOTTE, il ne pousse plus la fiche vers le bas (demande de
       Vincent, 26/09/2026) : « il ne pousse en rien vers le bas, il passe juste
       par-dessus ». D'où `position:absolute` — et `.col-fiche` doit donc être
       `position:relative`, sinon le panneau se calerait sur la page entière.
       ⚠️ Son `top` est MESURÉ à l'ouverture (hauteur réelle du bandeau), pas
       codé en dur : le bandeau grandit avec le nombre d'onglets. */
    .cat-panneau{position:absolute;left:.4rem;right:.4rem;z-index:6;background:#0d1619;
      border:1px solid rgba(53,196,165,.45);border-radius:.6rem;padding:.6rem .7rem;
      max-height:74%;overflow:auto;box-shadow:0 18px 40px rgba(0,0,0,.65);}
    .cat-creer input{font:inherit;}
    /* Le bouton « Texte » porte la couleur des indices texte (le violet des
       étiquettes), pour qu'on distingue les deux sortes SANS lire. */
    .go-mini.ind-texte{border-color:rgba(200,163,255,.5);background:rgba(200,163,255,.12);color:var(--violet);flex:0 0 auto;}
    .ind-sep{width:1px;align-self:stretch;background:rgba(79,112,103,.45);flex:0 0 auto;margin:0 .1rem;}
    .cat-pan-x{background:none;border:0;color:inherit;cursor:pointer;opacity:.6;display:inline-flex;padding:.1rem;}
    .cat-pan-x:hover{opacity:1;}
    .cat-pan-x i,.cat-pan-x svg{width:15px;height:15px;}
    .cat-pan-tete .g{display:inline-flex;align-items:center;gap:.4rem;}
    .cat-pan-tete .g i,.cat-pan-tete .g svg{width:15px;height:15px;}
    .cat-pan-tete .cpt{font-weight:400;opacity:.5;font-size:.78rem;}
    /* ⚠️ EN VIGNETTES, pas en liste de noms — même raison que la bibliothèque de
       la Scène : « Plan du manoir » ne dit rien tant qu'on ne l'a pas vu. */
    .cat-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.5rem;}
    .cat-vig{position:relative;border:1px solid rgba(79,112,103,.45);border-radius:.5rem;
      overflow:hidden;background:rgba(2,7,10,.55);cursor:pointer;aspect-ratio:16/10;}
    .cat-vig:hover{border-color:rgba(53,196,165,.5);}
    .cat-vig.on{border-color:rgba(53,196,165,.7);box-shadow:0 0 0 1px rgba(53,196,165,.25) inset;}
    .cat-vig .apercu{position:absolute;inset:0;display:grid;place-items:center;background:#0a1417;}
    .cat-vig .apercu img{width:100%;height:100%;object-fit:cover;display:block;}
    .cat-vig.texte .apercu{background:linear-gradient(135deg,#1a1630,#241f3f);color:var(--violet);}
    .cat-vig .apercu i,.cat-vig .apercu svg{width:22px;height:22px;}
    .cat-vig .lbl{position:absolute;left:0;right:0;bottom:0;padding:.35rem .45rem .3rem;
      background:linear-gradient(to top,rgba(2,7,10,.98) 0%,rgba(2,7,10,.85) 65%,rgba(2,7,10,0) 100%);
      display:flex;flex-direction:column;gap:.2rem;z-index:1;}
    .cat-vig .ligne-nom{width:100%;min-width:0;}
    .cat-vig .nom{font-size:.72rem;font-weight:600;color:#e8f1ee;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;display:block;}
    .cat-vig .cpi-genre{position:absolute;top:.25rem;right:.25rem;z-index:2;
      font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
      padding:.08rem .35rem;border-radius:999px;background:rgba(214,178,94,.14);
      border:1px solid rgba(214,178,94,.4);color:var(--old-gold);margin-left:0;}
    .cat-vig .actions{display:flex;gap:.25rem;align-items:center;justify-content:space-between;width:100%;}
    .cat-vig .actions .cat-vig-outils{display:inline-flex;gap:.25rem;align-items:center;margin-left:auto;}
    .cat-vig .cat-droits{position:absolute;inset:0;z-index:5;overflow:auto;
      background:rgba(2,7,10,.95);padding:.4rem .5rem;display:flex;flex-wrap:wrap;align-content:flex-start;gap:.3rem;}
    .cat-vig .cat-droits .drt-titre{width:100%;font-size:.65rem;font-weight:700;color:var(--verdigris);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.1rem;}
    .cat-vig .ic{opacity:.6;display:inline-flex;cursor:pointer;color:#e8f1ee;}
    .cat-vig .ic:hover{opacity:1;}
    .cat-vig .ic i,.cat-vig .ic svg{width:14px;height:14px;}
    .cat-vig .ic.sup:hover{color:#fca5a5;}
    .cat-vig .drt-resume{padding:.1rem .35rem;font-size:.62rem;align-self:center;}
    /* La poignée n'apparaît qu'au survol : une vignette doit d'abord se
       regarder. ⚠️ Un test doit donc survoler avant de l'attraper. */
    .cat-vig .lst-poignee, .pnj-vig .lst-poignee{position:absolute;top:.2rem;left:.2rem;display:none;
      background:rgba(2,7,10,.75);border-radius:.3rem;padding:.12rem;z-index:3;}
    .cat-vig:hover .lst-poignee, .pnj-vig:hover .lst-poignee{display:inline-flex;}
    .cat-vide{grid-column:1/-1;font-size:.8rem;opacity:.5;padding:.4rem .1rem;}
    .cat-pan-tete{display:flex;justify-content:space-between;align-items:center;font-weight:800;color:var(--verdigris);font-size:.88rem;margin-bottom:.55rem;}
    .cat-pan-x{cursor:pointer;opacity:.7;font-size:1.05rem;padding:0 .3rem;}
    .cat-pan-x:hover{opacity:1;}
    .cat-pan-items{display:flex;flex-wrap:wrap;gap:.45rem;}
    .cat-pan-item{display:flex;flex-direction:column;gap:.35rem;font-size:.82rem;padding:.5rem .6rem;border-radius:.45rem;border:1px solid rgba(79,112,103,.45);background:rgba(2,7,10,.5);min-width:210px;cursor:pointer;}
    .cat-pan-item:hover{border-color:rgba(53,196,165,.5);}
    .cat-pan-item.on{border-color:rgba(53,196,165,.7);background:rgba(53,196,165,.14);}
    .cpi-tete{display:flex;align-items:center;justify-content:space-between;gap:.5rem;}
    .cpi-label{cursor:pointer;font-weight:600;}
    .cpi-label:hover{color:var(--verdigris);}
    .cat-droits{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.1rem;}
    .cat-droits-wrap{display:flex;flex-direction:column;gap:.3rem;}
    .drt-resume{font-size:.7rem;color:var(--verdigris);cursor:pointer;border:1px solid rgba(53,196,165,.4);background:rgba(53,196,165,.1);padding:.22rem .5rem;border-radius:.3rem;align-self:flex-start;white-space:nowrap;}
    .drt-resume:hover{background:rgba(53,196,165,.2);}
    .drt-resume.reserve{color:var(--old-gold);border-color:rgba(214,178,94,.45);background:rgba(214,178,94,.1);}
    .drt-env{font:inherit;font-size:.68rem;font-weight:700;padding:.28rem .6rem;align-self:flex-start;background:rgba(214,178,94,.18);border:1px solid rgba(214,178,94,.5);color:var(--old-gold);cursor:pointer;border-radius:.3rem;}
    .drt-env:hover{background:rgba(214,178,94,.32);}
    .titre-trash{cursor:pointer;opacity:.55;font-size:.9rem;}
    .titre-trash:hover,.titre-trash.actif{opacity:1;color:#f0a3a3;}
    .de-btn.a-suppr{background:rgba(218,72,72,.2)!important;border-color:rgba(218,72,72,.55)!important;color:#f0a3a3!important;}
    .part-titre{font-size:.72rem;font-weight:700;color:var(--verdigris);opacity:.85;padding:.6rem .7rem .25rem;border-top:1px solid rgba(79,112,103,.25);margin-top:.3rem;}
    .liste-part{display:flex;flex-direction:column;gap:.4rem;padding:.2rem .5rem .6rem;}
    .liste-part .cpi-label-o{cursor:pointer;font-weight:600;}
    .liste-part .cpi-label-o:hover{color:var(--verdigris);}
    .part-vide{opacity:.5;font-size:.78rem;padding:.3rem .55rem;}
    .drt-chip{font-size:.67rem;padding:.2rem .45rem;border-radius:.3rem;border:1px solid rgba(79,112,103,.45);background:rgba(2,7,10,.4);color:rgba(215,226,223,.6);cursor:pointer;white-space:nowrap;}
    .drt-chip.on{border-color:rgba(53,196,165,.6);background:rgba(53,196,165,.18);color:var(--verdigris);}
    .cat-pan-item .vue-x{opacity:.75;cursor:pointer;}
    .cat-pan-item .vue-suppr{opacity:.7;cursor:pointer;}
    .cpi-actions{display:inline-flex;gap:.45rem;align-items:center;flex-shrink:0;}
    /* Le crayon de renommage. Taille et fond explicites : un bouton d'action
       ne doit pas dependre du CDN Lucide pour exister — sans icone rendue, un
       <i> vide ne fait aucun pixel et le bouton devient introuvable. */
    .vue-renom{display:inline-flex;align-items:center;justify-content:center;
               width:22px;height:22px;flex:0 0 auto;cursor:pointer;opacity:.75;
               border-radius:.3rem;border:1px solid rgba(79,112,103,.4);
               background:rgba(2,7,10,.4);color:rgba(215,226,223,.8);margin-left:.3rem;}
    .vue-renom:hover{opacity:1;border-color:rgba(53,196,165,.5);color:var(--verdigris);}
    .vue-renom svg{width:13px;height:13px;}
    /* La mention « texte » / « image » : elle seule distingue les deux sortes
       d'indices quand le nom ne le dit pas. */
    .cpi-genre{font-size:.62rem;font-weight:700;text-transform:uppercase;
               letter-spacing:.06em;padding:.08rem .35rem;border-radius:999px;
               background:rgba(214,178,94,.14);border:1px solid rgba(214,178,94,.4);
               color:var(--old-gold);flex:0 0 auto;margin-left:.3rem;}
    .cpi-label-o svg,.cpi-label svg{width:13px;height:13px;vertical-align:-.12em;}
    .cat-pan-item .vue-suppr:hover{opacity:1;}
    .res.echec{color:#ff9ed2 !important;}
    .res.echec-crit{color:#e0218a !important;font-weight:800;}
    .res.succes-crit{color:#2bff88 !important;font-weight:800;text-shadow:0 0 9px rgba(43,255,136,.6);}

    .col-chat{flex:1;min-width:300px;max-width:430px;display:flex;flex-direction:column;border:1px solid rgba(53,196,165,.25);border-radius:.6rem;overflow:hidden;
      background:linear-gradient(180deg,rgba(13,22,25,.96),rgba(5,11,14,.97));}
    .d-tabs{display:flex;gap:.3rem;padding:.4rem .4rem 0;border-bottom:1px solid rgba(79,112,103,.3);}
    .dtab{flex:1;text-align:center;font-size:.82rem;font-weight:700;padding:.5rem;border-radius:.4rem .4rem 0 0;color:rgba(215,226,223,.55);border:1px solid transparent;border-bottom:none;background:transparent;}
    .dtab.on{color:var(--verdigris);background:rgba(2,7,10,.45);border-color:rgba(79,112,103,.3);}
    /* Poignee de largeur : separe la fiche du panneau de droite. Discrete au
       repos, elle s'allume au survol. Masquee en affichage mobile, ou les
       colonnes sont empilees. */
    /* L'onglet du MJ se distingue par sa couleur : ce qu'on y lit n'est vu
       que de lui, et on doit le savoir d'un coup d'œil. */
    /* UNE COULEUR PAR NATURE D'ONGLET : on distingue d'un coup d'œil le décor
       commun (bleu), ce que le MJ pilote (violet) et sa propre fiche (or).
       Le bleu est volontairement doux — il ne doit pas crier plus fort que la
       scène qu'il annonce. L'or est celui de la fiche elle-même. */
    .vue-onglet.vue-scene{border-color:rgba(127,176,216,.5);color:var(--bleu-scene);}
    .vue-onglet.vue-scene.on{background:rgba(127,176,216,.14);border-color:rgba(127,176,216,.75);}
    .vue-onglet.vue-fiche{border-color:rgba(214,178,94,.5);color:var(--old-gold);}
    .vue-onglet.vue-fiche.on{background:rgba(214,178,94,.14);border-color:rgba(214,178,94,.78);}
    .vue-onglet.vue-mj{border-color:rgba(159,106,216,.5);color:var(--violet);}
    .vue-onglet.vue-mj.on{background:rgba(159,106,216,.14);border-color:rgba(159,106,216,.75);}
    .vue-onglet.vue-mj svg{width:13px;height:13px;vertical-align:-.12em;}

    .scen-ap{max-height:30vh;overflow:auto;border:1px dashed rgba(53,196,165,.4);
             border-radius:.45rem;padding:.4rem;background:rgba(53,196,165,.04);}
    .scen-ap-zone{font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;
                  color:var(--old-gold);margin:.4rem 0 .2rem;}
    .scen-ap-zone:first-child{margin-top:0;}
    .scen-ap-et{display:flex;gap:.4rem;align-items:flex-start;padding:.25rem .3rem;font-size:.8rem;}
    .scen-ap-et b{font-weight:600;}
    .scen-ap-et em{display:block;font-style:normal;font-size:.74rem;
                   color:rgba(215,226,223,.5);white-space:pre-wrap;}
    .scen-choix-liste{display:flex;flex-direction:column;gap:.25rem;max-height:46vh;overflow:auto;}
    .scen-choix{display:flex;align-items:center;gap:.45rem;padding:.4rem .5rem;border-radius:.38rem;
                border:1px solid rgba(79,112,103,.3);background:rgba(2,7,10,.45);cursor:pointer;font-size:.8rem;}
    .scen-choix:hover{border-color:rgba(53,196,165,.5);}
    .scen-choix span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    .scen-choix em{font-size:.66rem;font-style:normal;color:rgba(215,226,223,.4);}
    .scen-choix em.ok{color:var(--verdigris);}
    .scen-choix svg{width:14px;height:14px;}

    /* ---- SCÉNARIO DU MJ ------------------------------------------------
       Une page à part entière dans la colonne de gauche. Les zones se replient
       — ce n'est PAS le « bandeau déroulant » que Vincent refusait : on replie
       une zone entière qu'on ne joue pas ce soir, jamais la note d'une étape,
       qui reste toujours lisible d'un coup. */
    .scen-tete{display:flex;align-items:center;gap:.5rem;margin-bottom:.6rem;flex-wrap:wrap;}
    /* `.go-mini` porte flex:1 ailleurs (elle remplit sa rangée dans les
       formulaires du MJ). Ici les boutons doivent garder leur taille, sinon
       ils s'étirent et écrasent la jauge de progression. */
    .scen-tete .go-mini{flex:0 0 auto;font-size:.74rem;padding:.3rem .6rem;
                        display:inline-flex;align-items:center;gap:.3rem;}
    .scen-tete .go-mini svg{width:13px;height:13px;}
    .scen-titre .go-mini{flex:0 0 auto;width:26px;height:26px;padding:0;
                         display:grid;place-items:center;}
    .scen-titre .go-mini svg{width:13px;height:13px;}
    .scen-compte{font-size:.74rem;font-weight:700;color:var(--verdigris);white-space:nowrap;}
    .scen-jauge{flex:1;min-width:110px;height:6px;border-radius:999px;background:rgba(2,7,10,.7);
                border:1px solid rgba(79,112,103,.3);overflow:hidden;}
    .scen-jauge i{display:block;height:100%;width:0;background:linear-gradient(90deg,#126954,#2bb894);
                  transition:width .2s;}
    .scen-deux{flex:1;min-height:0;display:flex;gap:.8rem;align-items:stretch;}
    .scen-liste{flex:0 0 310px;display:flex;flex-direction:column;gap:.25rem;overflow:auto;padding-right:.2rem;}
    .scen-detail{flex:1;min-width:0;border:1px solid rgba(53,196,165,.35);border-radius:.5rem;
                 background:rgba(53,196,165,.04);padding:.8rem;overflow:auto;
                 display:flex;flex-direction:column;}

    
    /* --- CHAPITRES --- */
    .scen-chap { border:1px solid rgba(200,163,255,.35);border-radius:.5rem;margin-bottom:.5rem;overflow:hidden;background:rgba(200,163,255,.04); }
    .scen-chap-t { display:flex;align-items:center;gap:.45rem;padding:.45rem .55rem;cursor:pointer; background:rgba(200,163,255,.08);border-bottom:1px solid rgba(200,163,255,.2); }
    .scen-chap-t.sans-chap { background:transparent; border-bottom:none; opacity:0.6; padding-top:0; padding-bottom:.2rem; }
    .scen-chap-t .num { font-size:.62rem;font-weight:800;color:var(--violet);border:1px solid rgba(200,163,255,.5); border-radius:.3rem;padding:.02rem .3rem; }
    .scen-chap-t .nom { flex:1;font-weight:800;font-size:.86rem;color:#e6dcf5; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .scen-chap-t .cpt { font-size:.66rem;color:#a996c4; }
    .scen-chap-t .fl { color:#8a7aa3;font-size:.7rem; transition:transform .15s; }
    .scen-chap.plie .fl { transform:rotate(-90deg); }
    .scen-chap-corps { padding:.35rem .45rem .45rem; display:flex; flex-direction:column; gap:.22rem; }
    .scen-chap.ok { border-color:rgba(53,196,165,.45);background:rgba(53,196,165,.05); }
    .scen-chap.ok .scen-chap-t { background:rgba(53,196,165,.1);border-bottom:none; }
    .scen-chap.ok .num { color:var(--verdigris);border-color:rgba(53,196,165,.5); }
    .scen-chap.ok .nom { color:#9fd8c8; }
    .scen-coche { width:16px;height:16px;border-radius:50%;background:var(--verdigris);color:#04221b; display:grid;place-items:center;font-size:.62rem;font-weight:900;flex:0 0 auto; }
    .scen-chap.avenir { opacity:.55; }
    .scen-nouv-chap { display:inline-block; padding:.4rem .6rem; color:var(--violet); font-weight:700; cursor:pointer; font-size:.76rem; opacity:.7; margin-top:.3rem; }
    .scen-nouv-chap:hover { background: rgba(200,163,255,.1); border-radius:.4rem; opacity:1; }
    .scen-chap-t .scen-cx, .scen-chap-t .scen-renom { flex:0 0 auto; color:rgba(215,226,223,.4); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:.2rem; border-radius:.3rem; border:none; background:transparent; }
    .scen-chap-t .scen-cx:hover { color:#fca5a5; background:rgba(252,165,165,.1); }
    .scen-chap-t .scen-renom:hover { color:#fff; background:rgba(255,255,255,.1); }
    .scen-chap-t .scen-cx svg, .scen-chap-t .scen-renom svg { width:13px; height:13px; }
    
    .scen-zone-tete.ok { color:var(--verdigris); }
    .zc { width:12px;height:12px;border-radius:50%;background:var(--verdigris);color:#04221b;display:grid;place-items:center;font-size:.5rem;font-weight:900; }

    .scen-zone-tete{display:flex;align-items:center;gap:.4rem;padding:.35rem .4rem;margin-top:.45rem;
                    border-radius:.35rem;cursor:pointer;color:var(--old-gold);
                    font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;}
    .scen-zone:first-child 
    /* --- CHAPITRES --- */
    .scen-chap { border:1px solid rgba(200,163,255,.35);border-radius:.5rem;margin-bottom:.5rem;overflow:hidden;background:rgba(200,163,255,.04); }
    .scen-chap-t { display:flex;align-items:center;gap:.45rem;padding:.45rem .55rem;cursor:pointer; background:rgba(200,163,255,.08);border-bottom:1px solid rgba(200,163,255,.2); }
    .scen-chap-t.sans-chap { background:transparent; border-bottom:none; opacity:0.6; padding-top:0; padding-bottom:.2rem; }
    .scen-chap-t .num { font-size:.62rem;font-weight:800;color:var(--violet);border:1px solid rgba(200,163,255,.5); border-radius:.3rem;padding:.02rem .3rem; }
    .scen-chap-t .nom { flex:1;font-weight:800;font-size:.86rem;color:#e6dcf5; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .scen-chap-t .cpt { font-size:.66rem;color:#a996c4; }
    .scen-chap-t .fl { color:#8a7aa3;font-size:.7rem; transition:transform .15s; }
    .scen-chap.plie .fl { transform:rotate(-90deg); }
    .scen-chap-corps { padding:.35rem .45rem .45rem; display:flex; flex-direction:column; gap:.22rem; }
    .scen-chap.ok { border-color:rgba(53,196,165,.45);background:rgba(53,196,165,.05); }
    .scen-chap.ok .scen-chap-t { background:rgba(53,196,165,.1);border-bottom:none; }
    .scen-chap.ok .num { color:var(--verdigris);border-color:rgba(53,196,165,.5); }
    .scen-chap.ok .nom { color:#9fd8c8; }
    .scen-coche { width:16px;height:16px;border-radius:50%;background:var(--verdigris);color:#04221b; display:grid;place-items:center;font-size:.62rem;font-weight:900;flex:0 0 auto; }
    .scen-chap.avenir { opacity:.55; }
    .scen-nouv-chap { display:inline-block; padding:.4rem .6rem; color:var(--violet); font-weight:700; cursor:pointer; font-size:.76rem; opacity:.7; margin-top:.3rem; }
    .scen-nouv-chap:hover { background: rgba(200,163,255,.1); border-radius:.4rem; opacity:1; }
    .scen-chap-t .scen-cx, .scen-chap-t .scen-renom { flex:0 0 auto; color:rgba(215,226,223,.4); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:.2rem; border-radius:.3rem; border:none; background:transparent; }
    .scen-chap-t .scen-cx:hover { color:#fca5a5; background:rgba(252,165,165,.1); }
    .scen-chap-t .scen-renom:hover { color:#fff; background:rgba(255,255,255,.1); }
    .scen-chap-t .scen-cx svg, .scen-chap-t .scen-renom svg { width:13px; height:13px; }
    
    .scen-zone-tete.ok { color:var(--verdigris); }
    .zc { width:12px;height:12px;border-radius:50%;background:var(--verdigris);color:#04221b;display:grid;place-items:center;font-size:.5rem;font-weight:900; }

    .scen-zone-tete{margin-top:0;}
    .scen-zone-tete:hover{background:rgba(214,178,94,.07);}
    .scen-zone-tete .nom{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    .scen-zone-tete .n{font-size:.62rem;letter-spacing:0;color:rgba(215,226,223,.4);font-weight:700;}
    .scen-zone-tete .chev{transition:transform .15s;}
    .scen-zone.plie .chev{transform:rotate(-90deg);}
    .scen-zone.plie .scen-etapes{display:none;}
    .scen-zone.plie 
    /* --- CHAPITRES --- */
    .scen-chap { border:1px solid rgba(200,163,255,.35);border-radius:.5rem;margin-bottom:.5rem;overflow:hidden;background:rgba(200,163,255,.04); }
    .scen-chap-t { display:flex;align-items:center;gap:.45rem;padding:.45rem .55rem;cursor:pointer; background:rgba(200,163,255,.08);border-bottom:1px solid rgba(200,163,255,.2); }
    .scen-chap-t.sans-chap { background:transparent; border-bottom:none; opacity:0.6; padding-top:0; padding-bottom:.2rem; }
    .scen-chap-t .num { font-size:.62rem;font-weight:800;color:var(--violet);border:1px solid rgba(200,163,255,.5); border-radius:.3rem;padding:.02rem .3rem; }
    .scen-chap-t .nom { flex:1;font-weight:800;font-size:.86rem;color:#e6dcf5; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .scen-chap-t .cpt { font-size:.66rem;color:#a996c4; }
    .scen-chap-t .fl { color:#8a7aa3;font-size:.7rem; transition:transform .15s; }
    .scen-chap.plie .fl { transform:rotate(-90deg); }
    .scen-chap-corps { padding:.35rem .45rem .45rem; display:flex; flex-direction:column; gap:.22rem; }
    .scen-chap.ok { border-color:rgba(53,196,165,.45);background:rgba(53,196,165,.05); }
    .scen-chap.ok .scen-chap-t { background:rgba(53,196,165,.1);border-bottom:none; }
    .scen-chap.ok .num { color:var(--verdigris);border-color:rgba(53,196,165,.5); }
    .scen-chap.ok .nom { color:#9fd8c8; }
    .scen-coche { width:16px;height:16px;border-radius:50%;background:var(--verdigris);color:#04221b; display:grid;place-items:center;font-size:.62rem;font-weight:900;flex:0 0 auto; }
    .scen-chap.avenir { opacity:.55; }
    .scen-nouv-chap { display:inline-block; padding:.4rem .6rem; color:var(--violet); font-weight:700; cursor:pointer; font-size:.76rem; opacity:.7; margin-top:.3rem; }
    .scen-nouv-chap:hover { background: rgba(200,163,255,.1); border-radius:.4rem; opacity:1; }
    .scen-chap-t .scen-cx, .scen-chap-t .scen-renom { flex:0 0 auto; color:rgba(215,226,223,.4); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:.2rem; border-radius:.3rem; border:none; background:transparent; }
    .scen-chap-t .scen-cx:hover { color:#fca5a5; background:rgba(252,165,165,.1); }
    .scen-chap-t .scen-renom:hover { color:#fff; background:rgba(255,255,255,.1); }
    .scen-chap-t .scen-cx svg, .scen-chap-t .scen-renom svg { width:13px; height:13px; }
    
    .scen-zone-tete.ok { color:var(--verdigris); }
    .zc { width:12px;height:12px;border-radius:50%;background:var(--verdigris);color:#04221b;display:grid;place-items:center;font-size:.5rem;font-weight:900; }

    .scen-etapes{display:flex;flex-direction:column;gap:.22rem;}
    .scen-barre-edit{display:flex;align-items:center;gap:.5rem;margin:-.2rem 0 .6rem;
                     padding:.4rem .55rem;border-radius:.4rem;flex-wrap:wrap;
                     background:rgba(214,178,94,.08);border:1px solid rgba(214,178,94,.35);}
    .scen-barre-edit > span{font-size:.74rem;font-weight:700;color:var(--old-gold);flex:1;min-width:90px;}
    .scen-barre-edit .go-mini{flex:0 0 auto;font-size:.74rem;padding:.3rem .6rem;
                              display:inline-flex;align-items:center;gap:.3rem;}
    .scen-barre-edit .go-mini svg{width:13px;height:13px;}
    .scen-barre-edit .go-mini:disabled{opacity:.4;cursor:not-allowed;}
    .go-mini.actif{border-color:rgba(214,178,94,.7);background:rgba(214,178,94,.2);}
    /* La case de SÉLECTION est ronde, la case « fait » est carrée : deux
       gestes différents ne doivent pas se ressembler. */
    .scen-sel{width:16px;height:16px;border-radius:50%;flex:0 0 auto;cursor:pointer;
              border:1.5px solid rgba(214,178,94,.55);background:rgba(2,7,10,.6);
              display:grid;place-items:center;color:transparent;}
    .scen-sel.on{background:rgba(214,178,94,.3);color:var(--old-gold);}
    .scen-sel svg{width:11px;height:11px;}
    .scen-lg.pris{border-color:rgba(214,178,94,.6);background:rgba(214,178,94,.1);}
    .scen-zx{width:20px;height:20px;padding:0;border-radius:.25rem;flex:0 0 auto;
             border:1px solid rgba(218,72,72,.45);background:rgba(218,72,72,.12);
             color:#f0a3a3;cursor:pointer;display:grid;place-items:center;}
    .scen-zx svg{width:12px;height:12px;}
    .scen-zone-vide{font-size:.74rem;color:rgba(215,226,223,.35);font-style:italic;
                    padding:.35rem .5rem;}

    .scen-lg{display:flex;align-items:center;gap:.4rem;padding:.38rem .5rem;border-radius:.38rem;
             border:1px solid rgba(79,112,103,.3);background:rgba(2,7,10,.45);cursor:pointer;font-size:.79rem;}
    .scen-lg.on{border-color:rgba(53,196,165,.6);background:rgba(53,196,165,.12);}
    .scen-lg.fait{opacity:.5;}
    .scen-lg.fait b{text-decoration:line-through;}
    .scen-lg b{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    /* La case doit rester CARRÉE : sans flex:0 0 auto elle s'étire sur toute
       la largeur libre et mange le titre. */
    .scen-case{width:16px;height:16px;border-radius:.25rem;flex:0 0 auto;cursor:pointer;
               border:1.5px solid rgba(53,196,165,.5);background:rgba(2,7,10,.6);
               display:grid;place-items:center;color:transparent;}
    .scen-case svg{width:11px;height:11px;}
    .fait > .scen-case,.scen-lg.fait .scen-case{background:rgba(53,196,165,.25);color:var(--verdigris);}
    /* ⚠️ Dans le titre de l'etape, la classe `fait` est posee SUR la case elle-meme
       (`<span class="scen-case fait">`), pas sur un parent — les deux regles ci-dessus
       (`.fait > .scen-case`, `.scen-lg.fait .scen-case`) ne s'appliquaient donc jamais la :
       la case restait visuellement decochee meme apres un clic qui l'avait bien cochee en
       donnee. Trouve par Vincent le 30/09/2026. */
    .scen-case.fait{background:rgba(53,196,165,.25);color:var(--verdigris);}
    /* LA SCÈNE. Le décor que toute la table regarde. */
    /* ⚠️ Lucide, toujours : sans viser `svg`, l'icône garde ses 24 px et
       écrase le libellé de l'onglet. */
    .vue-onglet i,.vue-onglet svg{width:13px;height:13px;vertical-align:-2px;}
    /* Les boutons de la modale gardent leur largeur naturelle : étirés sur
       toute la ligne, « Fermer » et « Retirer la scène » pèsent autant que
       l'action principale, ce qu'ils ne valent pas. */
    #modaleScene .go-mini{flex:0 0 auto;display:inline-flex;align-items:center;gap:.35rem;}
    #modaleScene .scene-barre .go-mini{white-space:nowrap;}
    .scene-msg{margin-top:.5rem;padding:.4rem .6rem;border-radius:.4rem;font-size:.76rem;
      border:1px solid rgba(53,196,165,.4);background:rgba(53,196,165,.1);color:var(--verdigris);}
    .scene-msg.rate{border-color:rgba(218,72,72,.5);background:rgba(218,72,72,.12);color:#f0a3a3;}
    .scene-barre{display:flex;gap:.4rem;align-items:center;margin-bottom:.5rem;flex-wrap:wrap;}
    .scene-filtres{display:flex;gap:.4rem;align-items:center;margin-bottom:.5rem;}
    .scene-filtres .scene-cherche{font:inherit;font-size:.72rem;padding:.2rem .45rem;width:150px;
      border-radius:.4rem;border:1px solid rgba(79,112,103,.4);background:rgba(2,7,10,.6);color:var(--ink);}
    /* Les DOSSIERS : un simple regroupement, repliable. Une image sans dossier
       n'est pas « mal rangée » — elle s'affiche en tête, sans en-tête. */
    .scene-dossier{grid-column:1/-1;display:flex;align-items:center;gap:.35rem;cursor:pointer;
      font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:var(--old-gold);
      padding:.35rem .1rem .1rem;border-top:1px solid rgba(79,112,103,.25);margin-top:.2rem;}
    .scene-dossier:hover{color:#f0d79a;}
    .scene-dossier i,.scene-dossier svg{width:12px;height:12px;}
    .scene-dossier .n{opacity:.55;font-weight:400;}
    .scene-dossier .chev{transition:transform .15s;}
    /* Le crayon ne s'affiche qu'au survol : un en-tête de dossier doit rester
       une ligne de rangement, pas une barre d'outils. */
    .scene-dossier .dos-renom{margin-left:.35rem;opacity:0;background:none;border:0;padding:.1rem;
      color:inherit;cursor:pointer;display:inline-flex;align-items:center;}
    .scene-dossier:hover .dos-renom{opacity:.6;}
    .scene-dossier .dos-renom:hover{opacity:1;}
    .scene-dossier .dos-renom i,.scene-dossier .dos-renom svg{width:12px;height:12px;}
    .scene-dossier.plie .chev{transform:rotate(-90deg);}
    .scene-filtres .eti-btn.on{background:rgba(53,196,165,.16);color:var(--verdigris);border-color:rgba(53,196,165,.5);}
    .scene-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.5rem;
      max-height:52vh;overflow:auto;padding:.15rem;}
    .scene-vig{position:relative;border:1px solid rgba(79,112,103,.35);border-radius:.45rem;overflow:hidden;
      cursor:pointer;background:rgba(2,7,10,.6);aspect-ratio:16/10;}
    .scene-vig img{width:100%;height:100%;object-fit:cover;display:block;}
    .scene-vig:hover{border-color:rgba(53,196,165,.7);}
    .scene-vig.on{border-color:var(--old-gold);box-shadow:0 0 0 1px var(--old-gold);}
    /* « Ce que le MJ regarde » (03/10/2026, étape 2 du marqueur œil) : un CONTOUR (outline), pas une bordure — il s'ajoute à
       `.on` au lieu de la remplacer quand les deux coïncident. */
    .scene-vig.regarde{outline:2px solid var(--bleu-scene);outline-offset:2px;}
    .scene-vig .lbl{position:absolute;left:0;right:0;bottom:0;padding:.3rem .4rem;font-size:.66rem;font-weight:700;
      color:#e8f1ee;background:linear-gradient(to top,rgba(2,7,10,.95),rgba(2,7,10,0));
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    /* Le nombre de campagnes où l'image sert. Discret mais toujours visible :
       il change ce que « supprimer » veut dire. */
    .scene-vig-n{position:absolute;top:.25rem;left:.25rem;min-width:16px;height:16px;padding:0 3px;
      border-radius:9px;background:var(--old-gold);color:#1a1205;font-size:.6rem;font-weight:800;
      display:flex;align-items:center;justify-content:center;line-height:1;}
    /* ⚠️ DEUX CLASSES, pas une : `.scene-vig .x` est déclarée APRÈS et, à
       spécificité égale, c'est la dernière qui gagne — la corbeille se posait
       exactement SUR le crayon (mêmes coordonnées au pixel près) et avalait
       tous les clics. Impossible de renommer quoi que ce soit.
       Même piège que les boutons d'étiquettes du scénario. */
    /* ⚠️ DEUX CLASSES : `.lst-poignee` est déclarée plus bas avec
       `display:inline-flex` et, à spécificité égale, la dernière gagne — la
       poignée restait visible en permanence sur chaque vignette. */
    .scene-vig .scene-poignee{position:absolute;top:.2rem;left:.2rem;display:none;z-index:2;
      background:rgba(2,7,10,.75);border-radius:.3rem;padding:.1rem .15rem;}
    .scene-vig:hover .scene-poignee{display:inline-flex;}
    .scene-vig.lst-fantome{opacity:.35;}
    .scene-vig .x.x-renom{right:1.6rem;color:var(--verdigris);}
    .scene-vig .x{position:absolute;top:.2rem;right:.2rem;display:none;border:none;cursor:pointer;
      background:rgba(2,7,10,.75);color:#f0a3a3;border-radius:.3rem;padding:.12rem .25rem;}
    .scene-vig:hover .x{display:block;}
    .scene-vig .x i,.scene-vig .x svg{width:12px;height:12px;}
    .scene-grille-vide{grid-column:1/-1;text-align:center;opacity:.45;font-size:.8rem;font-style:italic;padding:1.5rem;}
    #scenePartage{overflow:hidden;}
    .scene-vide{display:flex;flex-direction:column;align-items:center;gap:.5rem;
      color:rgba(215,226,223,.35);font-size:.85rem;text-align:center;padding:1.5rem;}
    .scene-vide i,.scene-vide svg{width:36px;height:36px;opacity:.5;}
    .scene-nom{position:absolute;left:0;right:0;bottom:0;padding:.5rem .9rem;
      font-size:.82rem;font-weight:700;color:var(--old-gold);letter-spacing:.02em;
      background:linear-gradient(to top,rgba(2,7,10,.92),rgba(2,7,10,0));pointer-events:none;}
    /* Le bleu de l'onglet Scène : le bouton appartient visiblement à la même
       chose, et ne se confond pas avec les actions de partage (or). */
    /* ⚠️ On vise l'IDENTIFIANT, pas la classe : `.go-mini` est déclarée après
       `.scene-choisir` et, à spécificité égale, la dernière gagne — le bouton
       restait vert. Quatrième fois que ce piège tombe en deux jours. */
    .scene-choisir{position:absolute;top:.6rem;right:.6rem;display:inline-flex;align-items:center;gap:.35rem;}
    #btnSceneChoisir{border-color:rgba(127,176,216,.5);background:rgba(127,176,216,.12);color:var(--bleu-scene);}
    #btnSceneChoisir:hover{border-color:rgba(127,176,216,.8);background:rgba(127,176,216,.22);}
    .scene-choisir i,.scene-choisir svg{width:14px;height:14px;}
    .scen-pts{display:flex;gap:2px;flex:0 0 auto;}
    .scen-pt{width:7px;height:7px;border-radius:50%;}
    /* Les ÉTIQUETTES d'étape. Une liste de quarante lignes se lit mal : tout
       s'y ressemble. La couleur dit de quoi il s'agit avant même de lire. */
    .scen-eti{display:inline-flex;align-items:center;gap:.25rem;flex:0 0 auto;
      padding:.08rem .35rem;border-radius:.8rem;font-size:.62rem;font-weight:700;
      border:1px solid currentColor;background:rgba(2,7,10,.4);max-width:170px;}
    .scen-eti i,.scen-eti svg{width:10px;height:10px;flex:0 0 10px;}
    .scen-eti .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;opacity:.9;}
    .eti-lieu{color:var(--verdigris);}
    .eti-libre{color:var(--bleu-scene);}
    .eti-pnj{color:var(--old-gold);}
    .eti-indice{color:var(--violet);}
    .eti-combat{color:#f0a3a3;}
    /* Le choix de l'étiquette, dans le détail de l'étape. */
    .eti-choix{display:flex;gap:.3rem;flex-wrap:wrap;margin:.1rem 0 .4rem;}
    .eti-btn{font:inherit;font-size:.66rem;font-weight:700;padding:.2rem .45rem;cursor:pointer;
      display:inline-flex;align-items:center;gap:.25rem;border-radius:.8rem;
      border:1px solid rgba(79,112,103,.45);background:transparent;color:rgba(215,226,223,.6);}
    .eti-btn i,.eti-btn svg{width:11px;height:11px;}
    /* ⚠️ Deux classes, pas une : `.eti-btn` est déclarée APRÈS `.eti-lieu`, et
       à spécificité égale c'est la dernière qui gagne — les boutons d'ajout
       ressortaient tous gris. */
    .eti-btn.eti-lieu{color:var(--verdigris);}
    .eti-btn.eti-pnj{color:var(--old-gold);}
    .eti-btn.eti-indice{color:var(--violet);}
    .eti-btn.eti-combat{color:#f0a3a3;}
    /* Le bleu de la scene, deja desature comme le reste de la palette : une
       etiquette libre annonce, elle ne crie pas. Deux classes ici aussi. */
    .eti-btn.eti-libre{color:var(--bleu-scene);}
    .eti-btn:hover{border-color:currentColor;}
    .eti-btn.on{background:rgba(2,7,10,.55);}
    /* Dans la LISTE : compact, juste la couleur et l'icône. */
    .scen-etis{display:flex;gap:2px;flex:0 0 auto;align-items:center;}
    .scen-eti-c{display:inline-flex;align-items:center;justify-content:center;
      width:15px;height:15px;border-radius:50%;border:1px solid currentColor;background:rgba(2,7,10,.5);}
    .scen-eti-c i,.scen-eti-c svg{width:9px;height:9px;}
    .scen-eti-plus{font-size:.6rem;opacity:.6;margin-left:1px;}
    /* Les étiquettes libres, collées au titre de l'étape : elles se lisent avec
       lui, sans le pousser — le titre garde toute sa place et elles vont à la
       ligne s'il le faut. */
    /* Assez grosses pour se lire sans se pencher : 0.8rem contre 0.68 dans le
       récapitulatif d'avant — c'est la taille que Vincent a validée sur
       maquette, aux deux largeurs de colonne. */
    .scen-etis-titre{display:inline-flex;flex-wrap:wrap;gap:.35rem;
      vertical-align:middle;font-weight:400;min-width:0;}
    .scen-etis-titre .scen-eti{font-size:.8rem;padding:.22rem .55rem;}
    .scen-etis-titre .scen-eti i,.scen-etis-titre .scen-eti svg{width:13px;height:13px;flex:0 0 13px;}
    .scen-etis-titre .scen-eti-x,.scen-etis-titre .scen-eti-fiche{width:15px;height:15px;}
    .scen-etis-titre .scen-eti-x svg,.scen-etis-titre .scen-eti-fiche svg{width:11px;height:11px;}
    /* Dans le DÉTAIL : le récap complet, sous la note. */
    .eti-recap{display:flex;flex-wrap:wrap;gap:.3rem;margin:.1rem 0 .4rem;}
    .eti-rien{font-size:.7rem;opacity:.45;font-style:italic;}
    .scen-eti-x,.scen-eti-fiche{display:inline-flex;align-items:center;justify-content:center;
      border:none;background:transparent;color:inherit;cursor:pointer;opacity:.6;padding:0;margin-left:.1rem;}
    .scen-eti-x:hover,.scen-eti-fiche:hover{opacity:1;}
    .scen-eti-x i,.scen-eti-x svg,.scen-eti-fiche i,.scen-eti-fiche svg{width:10px;height:10px;}
    .eti-nom{display:flex;gap:.35rem;align-items:center;margin-bottom:.4rem;}
    .eti-nom input{flex:1;min-width:0;font:inherit;font-size:.74rem;padding:.25rem .45rem;
      border-radius:.35rem;border:1px solid rgba(79,112,103,.4);background:rgba(2,7,10,.6);color:var(--ink);}

    .scen-fil{font-size:.68rem;color:rgba(215,226,223,.4);margin-bottom:.35rem;
              display:flex;align-items:center;gap:.25rem;}
    .scen-fil svg{width:12px;height:12px;}
    /* ⚠️ UNE GRILLE, PAS UN FLEX QUI SE REPLIE : la case, le bloc « titre +
       étiquettes », puis les deux boutons. Chacun garde sa colonne — en flex,
       les étiquettes qui passent à la ligne comptaient comme des enfants de
       plus et FAISAIENT DESCENDRE la corbeille sur une ligne à elle. */
    .scen-titre{margin:0 0 .5rem;font-size:1.2rem;color:var(--ink);
      display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;
      align-items:start;column-gap:.5rem;}
    /* Le titre et ses étiquettes dans un MÊME bloc : sans lui, `.txt{flex:1}`
       prenait toute la largeur et repoussait les étiquettes contre le crayon,
       à l'autre bout de la ligne (constaté par Vincent le 26/09/2026). */
    .scen-titre .scen-bloc{display:flex;align-items:center;gap:.4rem;
      flex-wrap:wrap;row-gap:.35rem;min-width:0;}
    .scen-titre .scen-case{margin-top:.28rem;}
    .scen-titre .go-mini{margin-top:.1rem;}
    .scen-titre .scen-case{width:19px;height:19px;}
    .scen-titre .scen-case svg{width:13px;height:13px;}
    /* ⚠️ `flex:1` laissait le titre RÉTRÉCIR SOUS SON PROPRE TEXTE quand les
       étiquettes réclamaient la place : les lettres débordaient de leur boîte
       et se superposaient à la première étiquette (capture de Vincent,
       26/09/2026). Il garde donc sa largeur (`flex:0 0 auto`) et ce sont les
       étiquettes qui passent à la ligne — c'est le sens de la variante
       retenue : on n'ampute rien, on descend. */
    .scen-titre .txt{flex:0 0 auto;}
    .scen-rang{display:flex;gap:.3rem;flex-wrap:wrap;margin-bottom:.55rem;align-items:center;}
    .scen-note{flex:1;min-height:150px;width:100%;font:inherit;font-size:.86rem;line-height:1.6;
               background:rgba(2,7,10,.55);color:rgba(215,226,223,.88);resize:vertical;
               border:1px solid rgba(79,112,103,.25);border-radius:.4rem;padding:.55rem .65rem;}
    .scen-note::placeholder{color:rgba(215,226,223,.3);font-style:italic;}
    .scen-min{font-size:.64rem;text-transform:uppercase;letter-spacing:.08em;
              color:rgba(215,226,223,.35);font-weight:700;margin:.75rem 0 .3rem;}
    .scen-lien{font-size:.74rem;font-weight:700;padding:.25rem .55rem;border-radius:.35rem;
               display:inline-flex;align-items:center;gap:.32rem;cursor:pointer;
               border:1px solid rgba(53,196,165,.4);background:rgba(53,196,165,.1);color:var(--verdigris);}
    .scen-lien.ind{border-color:rgba(214,178,94,.4);background:rgba(214,178,94,.1);color:var(--old-gold);}
    .scen-lien.part{border-color:rgba(53,196,165,.6);}
    .scen-etat{font-style:normal;font-size:.64rem;font-weight:700;opacity:.65;
               padding-left:.15rem;}
    .scen-lien.ajout{border-style:dashed;border-color:rgba(79,112,103,.5);background:transparent;
                     color:rgba(215,226,223,.45);}
    .scen-lien svg{width:13px;height:13px;}
    .scen-vide{color:rgba(215,226,223,.4);font-size:.85rem;padding:1.2rem .5rem;text-align:center;}
    .go-mini.sec{border-color:rgba(214,178,94,.45);background:rgba(214,178,94,.1);color:var(--old-gold);}
    
/* ── L'ENCART D'INFOS (colonne scenario) ─────────────────────────────────── */
.scen-cote{flex:0 0 465px;display:flex;flex-direction:column;gap:.5rem;min-width:0;padding-left:.3rem;}
.carte{border:1px solid rgba(127,176,216,.35);border-radius:.5rem;overflow:hidden;
       background:rgba(2,7,10,.5);flex:0 0 auto;}
.carte .tt{display:flex;align-items:center;justify-content:space-between;gap:.4rem;
           padding:.35rem .5rem;font-size:.7rem;font-weight:700;color:var(--bleu-scene);
           border-bottom:1px solid rgba(127,176,216,.25);text-transform:uppercase;letter-spacing:.05em;}
.carte .bt{font-size:.68rem;font-weight:700;padding:.18rem .5rem;border-radius:.3rem;
           text-transform:none;letter-spacing:0;
           border:1px solid rgba(127,176,216,.5);color:var(--bleu-scene);background:rgba(127,176,216,.12);cursor:pointer;}
.carte .vis{height:170px;position:relative;
     background:radial-gradient(120% 120% at 35% 25%,#2a4a6b,#13232f 60%,#0a141c);}
.carte .vis .nom{position:absolute;left:0;right:0;bottom:0;padding:.3rem .45rem;font-size:.74rem;font-weight:600;
          background:linear-gradient(to top,rgba(2,7,10,.95),rgba(2,7,10,0));}
.carte .vis.vide{background:#0a1417;display:grid;place-items:center;color:#4d5c59;font-size:.8rem;}

.scen-infos{flex:1;min-height:0;border:1px solid rgba(79,112,103,.35);border-radius:.5rem;
       padding:.6rem .7rem;overflow:auto;background:rgba(2,7,10,.35);}
.scen-infos .ent{display:flex;align-items:center;gap:.45rem;font-size:.88rem;font-weight:700;
            margin-bottom:.5rem;min-height:26px;}
.scen-infos .haut{display:flex;gap:.7rem;align-items:flex-start;}
.scen-infos .gauche{flex:1;min-width:0;}
.scen-infos .photo{flex:0 0 84px;height:112px;overflow:hidden;
       margin:-.6rem -.7rem .15rem .15rem;
       border-left:1px solid rgba(214,178,94,.45);
       border-bottom:1px solid rgba(214,178,94,.45);
       border-radius:0 .45rem 0 .4rem;
       background:linear-gradient(140deg,#3a2f4e,#6b4a7a 45%,#241b33);}
.scen-infos .photo.vide{background:#0e1a1d;display:grid;place-items:center;color:#3f4e4b;font-size:1.4rem;
            border-left-color:rgba(79,112,103,.35);border-bottom-color:rgba(79,112,103,.35);}

.scen-champs{display:grid;grid-template-columns:auto minmax(0,1fr);
        gap:.26rem .55rem;font-size:.79rem;align-items:baseline;}
.scen-champ{display:contents;}
.scen-champ .k{color:#7f918d;white-space:nowrap;}
.scen-champ .k::after{content:' :';opacity:.6;}
.scen-champ .v.vide{color:#4d5c59;font-style:italic;}

.scen-infos .desc{font-size:.79rem;color:#b7c6c2;margin-top:.55rem;padding-top:.5rem;
      border-top:1px solid rgba(79,112,103,.3);line-height:1.55; white-space:pre-wrap;}
.scen-infos .barre-bas{display:flex;gap:.45rem;align-items:center;flex-wrap:wrap;
           margin-top:.6rem;padding-top:.55rem;border-top:1px solid rgba(79,112,103,.3);}
.scen-infos .crayon{font-size:.74rem;font-weight:700;padding:.25rem .6rem;border-radius:.3rem;
        border:1px solid rgba(79,112,103,.45);background:rgba(2,7,10,.6);color:#9fb3ae;cursor:pointer;}
.scen-infos .lien{font-size:.74rem;font-weight:700;color:var(--old-gold);
      border:1px solid rgba(214,178,94,.45);background:rgba(214,178,94,.1);
      border-radius:.3rem;padding:.25rem .6rem;cursor:pointer;}
.scen-infos .rien{color:#4d5c59;font-size:.79rem;text-align:center;padding:1.6rem .5rem;line-height:1.7;}

.scen-infos .saisie{font:inherit;font-size:.79rem;color:var(--ink);background:rgba(2,7,10,.75);
        border:1px solid rgba(53,196,165,.45);border-radius:.25rem;padding:.14rem .35rem;width:100%;}
.scen-infos textarea.saisie{min-height:60px;resize:vertical;line-height:1.5;margin-top:.55rem;}
.scen-infos .bt-ok{font-size:.74rem;font-weight:700;padding:.25rem .7rem;border-radius:.3rem;
       border:1px solid rgba(53,196,165,.55);background:rgba(53,196,165,.16);color:var(--verdigris);cursor:pointer;}
.scen-infos .bt-non{font-size:.74rem;font-weight:700;padding:.25rem .7rem;border-radius:.3rem;
        border:1px solid rgba(214,178,94,.45);background:rgba(214,178,94,.1);color:var(--old-gold);cursor:pointer;}
.scen-infos .refus{margin-top:.4rem;font-size:.72rem;color:#fca5a5;}
.scen-infos .saisie.mauvais{border-color:#fca5a5;}

@media (max-width:900px){
  .scen-deux{flex-direction:column;min-height:0;}
  .scen-liste{flex:0 0 auto;max-height:38vh;}
  .scen-detail{min-height:0;}
  .scen-cote{flex:1;min-height:0;padding-left:0;}
  
  /* L'encart remplace le détail sous 900px */
  .scen-deux.mobile-encart .scen-detail { display: none !important; }
  .scen-deux:not(.mobile-encart) .scen-cote { display: none !important; }
  .scen-btn-retour { display: inline-flex !important; }
}

    /* ---- FENETRES FLOTTANTES (js/salle-espace.js) ----------------------
       Elles se posent par-dessus tout, fiche comprise. Le z-index reste sous
       celui du voile de glissement (99998) pour que le voile les couvre aussi
       pendant un geste. */
    .fen-flot{position:fixed;background:#0d1619;
              border:1px solid rgba(53,196,165,.4);border-radius:.6rem;
              box-shadow:0 14px 48px rgba(0,0,0,.65);display:flex;
              flex-direction:column;min-width:220px;min-height:140px;overflow:hidden;}
    .fen-flot.fen-indice{border-color:rgba(214,178,94,.45);}
    .fen-tete{display:flex;align-items:center;gap:.5rem;padding:.4rem .5rem;
              background:rgba(2,7,10,.6);border-bottom:1px solid rgba(79,112,103,.3);
              cursor:grab;user-select:none;flex:0 0 auto;}
    .fen-tete:active{cursor:grabbing;}
    .fen-titre{flex:1;min-width:0;display:flex;align-items:center;gap:.4rem;
               font-size:.76rem;font-weight:700;color:var(--verdigris);}
    .fen-titre span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .fen-indice .fen-titre{color:var(--old-gold);}
    /* padding:0 est INDISPENSABLE : un <button> en porte un par defaut, et
       l'icone, plus large que la zone de contenu restante, debordait alors de
       2,5 px vers la droite — visible des qu'on survole, puisque le fond
       epouse le bouton et non l'icone. */
    .fen-btn{flex:0 0 auto;width:20px;height:20px;border:0;padding:0;
             border-radius:.25rem;background:transparent;color:rgba(215,226,223,.55);
             cursor:pointer;display:grid;place-items:center;}
    .fen-btn:hover{background:rgba(255,255,255,.08);color:var(--ink);}
    .fen-fermer:hover{background:rgba(220,70,70,.22);color:#ff9d9d;}
    .fen-btn svg{width:13px;height:13px;display:block;stroke-width:2;}
    .fen-titre svg{width:14px;height:14px;flex:0 0 auto;}
    /* Le bouton montre l'ACTION, pas l'etat : un trait quand la fenetre est
       ouverte (« reduis-moi »), un carre quand elle est repliee. */
    .fen-flot .fen-ico-carre{display:none;}
    .fen-flot.fen-reduite .fen-ico-moins{display:none;}
    .fen-flot.fen-reduite .fen-ico-carre{display:block;}
    /* ⚠️ RÉDUITE = PETITE ET DE LARGEUR FIXE (Vincent, 03/10/2026 : « la largeur de la bande dépend de l'image, on se retrouve avec
       des bandes ultra-larges alors que c'est réduit »). La largeur posée en ligne par le JS (celle de l'image, retenue par joueur
       et par salle) est écrasée par `!important` TANT QUE la fenêtre est réduite, et reprend ses droits à l'agrandissement : on ne
       touche pas à la valeur retenue. Le titre se raccourcit tout seul (« … »). */
    .fen-flot.fen-reduite{height:auto !important;min-height:0;width:260px !important;min-width:0;max-width:260px !important;}
    .fen-flot.fen-reduite .fen-corps,
    .fen-flot.fen-reduite .fen-coin{display:none;}
    .fen-flot.fen-reduite .fen-tete{border-bottom:0;}
    .fen-corps{flex:1;min-height:0;overflow:auto;}
    .fen-corps img{display:block;width:100%;height:100%;object-fit:contain;background:#050d10;}
    .fen-texte{padding:.7rem .8rem;font-size:.84rem;}
    .fen-texte h4{margin:0 0 .5rem;color:var(--old-gold);font-size:.95rem;}
    .fen-para{white-space:pre-wrap;line-height:1.55;}
    .fen-coin{position:absolute;right:0;bottom:0;width:16px;height:16px;cursor:nwse-resize;
              background:linear-gradient(135deg,transparent 50%,rgba(53,196,165,.5) 50%);}
    /* Le bouton « ouvrir en fenetre », dans le bandeau des partages. */
    /* Taille et fond explicites : un bouton d'action ne doit pas dependre
       d'une librairie distante pour exister. Si le CDN Lucide ne repond pas,
       il reste cliquable. */
    .vue-detacher{opacity:.55;cursor:pointer;display:inline-flex;align-items:center;
                  justify-content:center;width:22px;height:22px;flex:0 0 auto;
                  border-radius:.3rem;border:1px solid rgba(214,178,94,.35);
                  background:rgba(214,178,94,.1);color:var(--old-gold);margin-left:.3rem;}
    .vue-detacher:hover{opacity:1;background:rgba(214,178,94,.22);}

    .vue-detacher svg{width:13px;height:13px;}
    @media (max-width:900px){ .fen-flot,.vue-detacher{display:none !important;} }
    /* La poignée ne fait que 7 px, mais les deux espacements du conteneur
       (.6rem de chaque côté) portaient l'écart entre les colonnes à ~26 px.
       Les marges négatives les mangent : l'écart tombe à ~14 px SANS réduire
       la zone qu'on peut attraper — la poignée garde ses 7 px cliquables, elle
       empiète simplement un peu sur ses voisines, d'où le `z-index`. */
    .poignee-largeur{flex:0 0 7px;cursor:col-resize;border-radius:3px;background:transparent;
      position:relative;z-index:5;margin:0 -6px;align-self:stretch;transition:background .12s;}
    .poignee-largeur::before{content:'';position:absolute;top:50%;left:50%;
      transform:translate(-50%,-50%);width:3px;height:34px;border-radius:2px;
      background:rgba(53,196,165,.3);transition:background .12s,height .12s;}
    .poignee-largeur:hover{background:rgba(53,196,165,.08);}
    .poignee-largeur:hover::before{background:rgba(53,196,165,.75);height:54px;}
    .vue-droite{flex:1;display:flex;flex-direction:column;min-height:0;}
    #notesPerso{flex:1;width:100%;resize:none;font:inherit;font-size:.86rem;line-height:1.4;padding:.7rem .8rem;border:0;outline:none;background:#0b1316;color:var(--ink);}
    .notes-barre{display:flex;gap:.3rem;padding:.4rem;border-bottom:1px solid rgba(79,112,103,.3);}
    .notes-barre select{flex:1;min-width:0;font:inherit;font-size:.82rem;padding:.35rem;border-radius:.4rem;border:1px solid rgba(53,196,165,.35);background:#0d1619;color:var(--ink);}
    .notes-barre button{padding:.35rem .6rem;border-radius:.4rem;border:1px solid rgba(53,196,165,.35);background:rgba(2,7,10,.5);color:var(--ink);}
    #noteTitre{font:inherit;font-weight:700;font-size:.85rem;padding:.5rem .8rem;border:0;border-bottom:1px solid rgba(79,112,103,.3);background:#0b1316;color:var(--old-gold);outline:none;}
    #flux{flex:1;overflow-y:auto;padding:.6rem .7rem;display:flex;flex-direction:column;gap:.4rem;}
    .msg{font-size:.86rem;line-height:1.35;word-wrap:break-word;}
    /* ===== Horodatage : present, mais qui ne tire pas l'oeil ===== */
    .lien-chat{color:var(--verdigris);text-decoration:underline;text-underline-offset:2px;word-break:break-all;}
    .lien-chat:hover{color:#6becc9;}
    .msg-heure{float:right;margin:.15rem 0 0 .5rem;font-size:.64rem;font-variant-numeric:tabular-nums;
               color:var(--ink);opacity:.3;white-space:nowrap;cursor:default;}
    .msg:hover .msg-heure{opacity:.55;}
    .jour-sep{display:flex;align-items:center;gap:.6rem;margin:.6rem 0 .35rem;opacity:.45;}
    .jour-sep::before,.jour-sep::after{content:'';flex:1;height:1px;background:rgba(79,112,103,.45);}
    .jour-sep span{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--old-gold);white-space:nowrap;}
    .msg .qui{font-weight:700;color:#8fd3c4;} .msg.moi .qui{color:var(--old-gold);}
    .msg .perso{color:var(--old-gold);font-weight:600;}
    .msg.jet{background:rgba(2,7,10,.55);border:1px solid rgba(53,196,165,.18);border-radius:.4rem;padding:.3rem .55rem;}
    .msg.jet .form{color:rgba(215,226,223,.6);} .msg.jet .res{font-weight:800;color:var(--verdigris);}
    .msg.systeme{font-size:.76rem;opacity:.55;font-style:italic;text-align:center;}
    /* Un événement de fiche : le ton d'une note de jeu, pas d'un résultat de
       dé — on ne veut pas qu'il crie plus fort qu'un jet. */
    .msg.evt{background:rgba(159,106,216,.1);border:1px solid rgba(159,106,216,.3);
             border-radius:.4rem;padding:.3rem .55rem;}
    .msg.evt .evt-nom{font-weight:700;color:var(--violet);}
    .msg.evt .evt-res{font-weight:700;color:#cbb3e8;}
    .msg.indice{background:rgba(214,178,94,.12);border:1px solid rgba(214,178,94,.4);border-radius:.4rem;padding:.35rem .55rem;color:var(--old-gold);}
    .msg .voir-media{color:var(--verdigris);font-weight:700;}
    .saisie{border-top:1px solid rgba(79,112,103,.3);padding:.55rem;display:flex;flex-direction:column;gap:.4rem;background:rgba(2,7,10,.5);}
    .saisie .ligne{display:flex;gap:.4rem;}
    #saisieTexte{flex:1 1 auto;min-width:0;font:inherit;font-size:.85rem;padding:.5rem .6rem;border-radius:.4rem;border:1px solid rgba(53,196,165,.4);background:#0d1619;color:var(--ink);}
    #btnEnvoyer{flex:0 0 auto;white-space:nowrap;background:linear-gradient(135deg,#126954,#2bb894);border:1px solid rgba(107,236,201,.42);color:#eafff7;font-weight:700;padding:0 .9rem;border-radius:.4rem;}
    .aide{font-size:.7rem;color:rgba(215,226,223,.5);} .aide code{color:var(--old-gold);background:rgba(214,178,94,.08);padding:0 .25rem;border-radius:3px;}
    .mes-salles{display:flex;flex-direction:column;gap:.35rem;max-height:170px;overflow:auto;margin-top:.4rem;}
    .salle-item{display:flex;align-items:center;gap:.5rem;padding:.45rem .6rem;border-radius:.45rem;border:1px solid rgba(79,112,103,.3);background:rgba(2,7,10,.4);cursor:pointer;font-size:.82rem;}
    .salle-item:hover{border-color:rgba(53,196,165,.5);background:rgba(2,7,10,.6);}
    .salle-item .code{font-weight:800;color:var(--verdigris);font-family:ui-monospace,monospace;letter-spacing:.04em;}
    .salle-item .role{font-size:.6rem;font-weight:800;padding:.07rem .4rem;border-radius:999px;}
    .salle-item .role.mj{background:rgba(159,106,216,.22);border:1px solid rgba(159,106,216,.55);color:var(--violet);}
    .salle-item .role.joueur{background:rgba(53,196,165,.14);border:1px solid rgba(53,196,165,.4);color:var(--verdigris);}
    .fiches-barre{display:flex;gap:.4rem;padding:.5rem;border-bottom:1px solid rgba(79,112,103,.3);}
    .go-mini{flex:1;padding:.5rem;border-radius:.4rem;font-weight:700;font-size:.8rem;color:#eafff7;background:linear-gradient(135deg,#126954,#2bb894);border:1px solid rgba(107,236,201,.42);}
    .go-mini.sec{background:rgba(214,178,94,.12);border:1px solid rgba(214,178,94,.45);color:var(--old-gold);}
    .liste-fiches{flex:1;overflow:auto;padding:.5rem;display:flex;flex-direction:column;gap:.35rem;}
    .fiche-item{display:flex;align-items:center;gap:.5rem;padding:.5rem .6rem;border-radius:.45rem;border:1px solid rgba(79,112,103,.3);background:rgba(2,7,10,.4);cursor:pointer;}
    .fiche-item:hover{border-color:rgba(53,196,165,.5);}
    /* ===== Reorganisation des listes : poignee + fleches ===== */
    .lst-poignee{display:inline-flex;align-items:center;flex:0 0 auto;color:rgba(215,226,223,.35);cursor:grab;touch-action:none;padding:.1rem;}
    .lst-poignee:active{cursor:grabbing;}
    .lst-poignee:hover{color:var(--verdigris);}
    /* Icones Lucide : alignees sur le texte, a sa taille. */
    svg.ic, i.ic { width:1em; height:1em; vertical-align:-.14em; flex:none; display:inline-block; }
    .ic-txt { display:contents; }
    .lst-poignee svg{width:.95rem;height:.95rem;}
    .lst-fleches{display:inline-flex;flex-direction:column;flex:0 0 auto;gap:1px;margin-left:auto;}
    .lst-fl{line-height:1;font-size:.55rem;padding:1px 4px;border-radius:.2rem;border:1px solid rgba(79,112,103,.4);
            background:rgba(2,7,10,.5);color:rgba(215,226,223,.55);cursor:pointer;}
    .lst-fl:hover{border-color:var(--verdigris);color:var(--verdigris);}
    .lst-fantome{opacity:.4;background:rgba(53,196,165,.12);}
    .liste-vide{display:flex;flex-direction:column;align-items:center;gap:.55rem;padding:.9rem .6rem;text-align:center;}
    .liste-vide span{font-size:.8rem;opacity:.6;}
    .liste-vide .go-mini{flex:0 0 auto;padding:.45rem .9rem;font-size:.8rem;}
    /* Sur telephone, les fleches sont le seul moyen confortable : on les grossit. */
    @media (max-width:760px){
      .lst-fl{font-size:.7rem;padding:3px 8px;}
      .lst-poignee svg{width:1.1rem;height:1.1rem;}
    }
    .cat-pan-item .lst-fleches{flex-direction:row;margin-left:0;}
    .fiche-item.active{border-color:rgba(53,196,165,.7);background:rgba(53,196,165,.1);}
    .fiche-item .nom{flex:1;min-width:0;font-size:.85rem;font-weight:600;display:flex;align-items:center;gap:.45rem;}
    .fiche-item .nom svg{width:1.05em;height:1.05em;flex:none;opacity:.7;}
    .fiche-item .suppr{background:none;border:none;opacity:.5;font-size:.85rem;color:var(--ink);}
    .fiche-item .suppr:hover{opacity:1;}
    .perso{color:var(--old-gold);}
    /* --- Bascule mobile (fiche ↔ panneau) --- */
    .mob-switch{display:none;gap:.4rem;padding:.4rem .6rem;background:rgba(2,7,10,.55);border-bottom:1px solid rgba(79,112,103,.3);}
    .mob-switch button{flex:1;padding:.55rem;border-radius:.4rem;font-weight:700;font-size:.85rem;border:1px solid rgba(53,196,165,.35);background:rgba(2,7,10,.4);color:var(--ink);}
    .mob-switch button.on{background:rgba(53,196,165,.16);border-color:rgba(53,196,165,.6);color:var(--verdigris);}
    @media (max-width:820px){
      .mob-switch{display:flex;}
      .corps{flex-direction:column;gap:.4rem;}
      .col-fiche,.col-chat{max-width:none;width:100%;min-width:0;flex:1;min-height:0;}
      .poignee-largeur{display:none;}
      #corps.mob-fiche .col-chat{display:none;}
      #corps.mob-panneau .col-fiche{display:none;}
      .topbar{gap:.35rem .6rem;padding:.5rem .6rem;}
      .topbar .salle-nom{font-size:.9rem;}
      .col-chat{min-height:60vh;}
      /* ⚠️ LA BARRE DU HAUT DOIT TENIR SUR UNE LIGNE. Chez le MJ elle passait sur
         TROIS lignes, ce qui poussait toute la salle vers le bas. Les libellés
         disparaissent, les icônes restent — et chaque bouton garde son `title` et
         son `aria-label`, donc rien n'est perdu pour qui a besoin du texte. */
      #btnQuitter span{display:none;}
      #btnQuitter{padding:.4rem .55rem;}
      #scenePartage, #scenarioVue{
        overflow-y:auto;
        min-height:0;
        -webkit-overflow-scrolling:touch;
      }
    }

    /* Icônes Lucide de l'interface (double ciblage i, svg pour taille et alignement) */
    .go i, .go svg { width:1.15rem; height:1.15rem; vertical-align:-.2em; }
    .go-mini i, .go-mini svg { width:13px; height:13px; vertical-align:-.14em; }
    .dtab i, .dtab svg { width:14px; height:14px; vertical-align:-.15em; }
    .sp-tab i, .sp-tab svg { width:13px; height:13px; vertical-align:-.14em; }
    .dest-chip i, .dest-chip svg { width:11px; height:11px; vertical-align:-.12em; }
    .drt-chip i, .drt-chip svg { width:11px; height:11px; vertical-align:-.12em; }
    .de-btn.trade-btn i, .de-btn.trade-btn svg { width:14px; height:14px; vertical-align:-.15em; }
    .de-btn.son-custom i, .de-btn.son-custom svg { width:13px; height:13px; vertical-align:-.12em; }
    #btnAjoutSon i, #btnAjoutSon svg { width:13px; height:13px; vertical-align:-.12em; }
    .titre-trash i, .titre-trash svg { width:13px; height:13px; vertical-align:-.12em; }
    #btnSupprNote i, #btnSupprNote svg { width:13px; height:13px; vertical-align:-.12em; }
    .fiche-item .suppr i, .fiche-item .suppr svg { width:13px; height:13px; vertical-align:-.12em; }
    .vue-suppr i, .vue-suppr svg { width:13px; height:13px; vertical-align:-.12em; }
    .part-titre i, .part-titre svg { width:14px; height:14px; vertical-align:-.15em; }
    .aide i, .aide svg { width:13px; height:13px; vertical-align:-.14em; }
    h1 i, h1 svg { width:1.15em; height:1.15em; vertical-align:-.15em; }
    h3 i, h3 svg { width:1.05em; height:1.05em; vertical-align:-.12em; }
  
/* Bande son (mission 06) */
    /* ⚠️ LARGEUR FIXE ET CHIFFRES ALIGNÉS : sans `tabular-nums`, les chiffres
       n'ont pas la même largeur et le temps « saute » à chaque seconde, ce qui
       fait tressauter toute la barre de progression à côté. */
    #bandeSon .bs-temps{font-size:.72rem;color:rgba(215,226,223,.55);white-space:nowrap;
      font-variant-numeric:tabular-nums;flex:0 0 auto;min-width:2.6rem;text-align:center;}
.bande-son { display:none; align-items:center; gap:.4rem; padding:.3rem .5rem; background:rgba(2,7,10,.8); border-bottom:1px solid rgba(79,112,103,.3); flex:0 0 auto; }
.bande-son .bs-btn { background:transparent; border:none; color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center; padding:.3rem; border-radius:.3rem; transition:color .1s, background .1s; }
.bande-son .bs-btn:hover { color:var(--verdigris); background:rgba(255,255,255,.05); }
.bande-son .bs-btn i, .bande-son .bs-btn svg { width:16px; height:16px; }
.bande-son .bs-titre { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:.75rem; opacity:.8; padding:0 .4rem; }
.bande-son .bs-prog { flex:1; min-width:50px; cursor:pointer; }
@media (max-width:900px) { .bande-son { display:none !important; } }

/* ⚠️ Le réglage de son quand il est accueilli dans le panneau de droite
   (affichage mobile). Le bloc garde ses classes `.dispo-*`, dessinées pour un
   menu déroulant sombre : on ne lui redonne ici que son cadre. */
/* ===== LE SON SUR MOBILE : un onglet, et un encart qui s'ouvre =====
   Le menu Disposition est masque sous 900 px ; sans ca, un joueur sur
   telephone n'a ni volume ni coupure. Le bouton vit dans la barre d'onglets
   du chat, JAMAIS flottant en bas a droite : la zone de saisie y occupe les
   150 derniers pixels, et « Envoyer » (x 310->401, y 743->779) chevaucherait
   un bouton pose dans le coin. Mesure le 29/09/2026. */
/* ⚠️ PAS la classe `.dtab` : ce n'est PAS un onglet, il ne change pas de vue.
   Un controle de non-regression compte `.d-tabs .dtab` et en attend QUATRE
   (test-salle-regressions.py, « les quatre onglets existent »). Lui donner
   `.dtab` le faisait passer pour un cinquieme onglet et cassait ce controle
   — a juste titre. La classe est donc autonome. */
.dtab-son { margin-left:auto; font-size:.82rem; font-weight:700; padding:.5rem;
  border-radius:.4rem .4rem 0 0; color:rgba(215,226,223,.55);
  border:1px solid transparent; border-bottom:none; background:transparent; cursor:pointer; }
.dtab-son.on { color:var(--verdigris); background:rgba(2,7,10,.45); border-color:rgba(79,112,103,.3); }
.dtab-son i, .dtab-son svg { width:15px; height:15px; }

/* ⚠️ Son `top` est MESURÉ à l'ouverture (voir salle-scene.js), jamais écrit :
   laissé au flux, il s'ouvrait PAR-DESSUS le bouton et le second clic ne
   l'atteignait plus. Même piege, même parade que `#catPanneau`. */
#sonMobileEncart { position:absolute; z-index:60; right:.4rem;
  padding:.5rem .55rem; border-radius:.5rem;
  border:1px solid rgba(53,196,165,.4); background:rgba(2,7,10,.97);
  box-shadow:0 8px 24px rgba(0,0,0,.55); }
#sonMobileEncart #reglageSon { display:block !important; }
#sonMobileEncart .dispo-titre { margin-top:0; }

/* ⚠️ LE CURSEUR EST VERTICAL (demande de Vincent, mobile seulement). Il tient
   alors dans la largeur d'une icone, sous le bouton qui l'ouvre.
   `writing-mode` est la facon moderne ; `slider-vertical` reste la pour les
   navigateurs qui ne l'ont pas encore. */
#sonMobileEncart .dispo-reglage { display:flex; flex-direction:column;
  align-items:center; gap:.4rem; border-top:none; margin-top:.3rem; padding-top:.3rem; }
#sonMobileEncart .dispo-reglage input[type=range] {
  writing-mode: vertical-lr; direction: rtl;
  -webkit-appearance: slider-vertical; appearance: slider-vertical;
  width:24px; height:120px; }

#btnSonFlottant {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: none;
  background: var(--verdigris);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  font-weight: bold;
  padding: .75rem 1.5rem;
  border-radius: 2rem;
  border: 1px solid var(--verdigris);
}

    /* FICHE ESCAMOTABLE */
    #iframeFiche { transition: transform .26s ease, opacity .26s ease; }
    /* ⚠️ LE CADRE DE L'ÉTAT RANGÉ EST LE MÊME QUE CELUI DE L'ÉTAT SORTI.
       Seuls l'opacité et le glissement changent. Il partait de `top:.6rem` :
       son haut tombait à 72 px alors que le bandeau d'onglets finit à 74, et
       pendant les 260 ms de transition la fiche était dessinée PAR-DESSUS les
       onglets — « ça vomit sur cette partie-là » (Vincent, 29/09/2026).
       Deux cadres différents, c'est une géométrie qui saute en plus du glissement. */
    #iframeFiche.fiche-replie {
      position: absolute; top: var(--top-fiche, 0px); left: 0;
      height: calc(100% - var(--top-fiche, 0px));
      width: var(--l-fiche,400px); max-width: 100%; margin: 0 !important;
      opacity: 0; pointer-events: none; transform: translateX(-110%);
      z-index: 60; display: block !important;
    }
    .corps.chat-a-gauche #iframeFiche.fiche-replie { left: auto; right: 0; transform: translateX(110%); }
    #iframeFiche.fiche-revenue, #iframeFiche.fiche-retenue {
      position: absolute; top: var(--top-fiche, 0px); left: 0;
      height: calc(100% - var(--top-fiche, 0px));
      width: var(--l-fiche,400px); max-width: 100%; margin: 0 !important;
      z-index: 60; display: block !important;
    }
    /* ⚠️ 60, PAS 1000 (07/10/2026). La fiche sortie (et sa poignée, 61) doit passer AU-DESSUS de la scène et de ses barres (20 au plus),
       mais SOUS les fenêtres : `.trade-overlay` (toutes les modales, 80), l'annonce du tour (85), « Qui va ? » (130)… À 1000 / 1001, la
       poignée — une bande invisible de 14 px — avalait les clics au milieu de la bibliothèque des scènes, et la fiche sortie recouvrait
       toute fenêtre ouverte par-dessus. Contrôle `[LA FICHE SORTIE PASSE SOUS LES FENETRES]` de tools/test-salle-fiche-escamotable.py. */
    #iframeFiche.fiche-revenue {
      box-shadow: 0 0 0 1px rgba(53,196,165,.4), 0 0 22px rgba(53,196,165,.12);
    }
    .corps.chat-a-gauche #iframeFiche.fiche-revenue, .corps.chat-a-gauche #iframeFiche.fiche-retenue {
      left: auto; right: 0;
    }
    
    .bande-fiche {
      flex: 0 0 14px; align-self: stretch;
      display: none; align-items: center; justify-content: center; cursor: pointer;
      border: 1px solid rgba(53,196,165,.3); border-radius: .3rem; background: rgba(2,7,10,.45);
    }
    .bande-fiche.inerte { opacity: 0.3; pointer-events: none; }
    .bande-fiche:hover { background: rgba(53,196,165,.12); border-color: rgba(53,196,165,.6); }
    .bande-fiche i, .bande-fiche svg { width: 10px; height: 10px; color: var(--verdigris); }
    
    .poignee-largeur-fiche {
      position: absolute; top: var(--top-fiche, 0px); bottom: 0; width: 14px;
      cursor: ew-resize; z-index: 61; left: var(--l-fiche, 400px);
    }
    .corps.chat-a-gauche .poignee-largeur-fiche { left: auto; right: var(--l-fiche, 400px); }
    /* ⚠️ MÊME STYLE QUE LA POIGNÉE DU CHAT (`.poignee-largeur`, ~ligne 774) —
       demande de Vincent : la barre pleine hauteur en vert vif était trop
       voyante. Au survol : 54 px et `rgba(53,196,165,.75)`, pas 100 % et
       `--verdigris`. Deux poignées qui font le même geste doivent se ressembler. */
    .poignee-largeur-fiche { border-radius: 3px; background: transparent; transition: background .12s; }
    .poignee-largeur-fiche::before {
      content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
      width: 3px; height: 34px; border-radius: 2px; background: rgba(53,196,165,.3); transition: background .12s, height .12s;
    }
    .poignee-largeur-fiche:hover { background: rgba(53,196,165,.08); }
    .poignee-largeur-fiche:hover::before, .corps.fiche-en-reglage .poignee-largeur-fiche::before {
      background: rgba(53,196,165,.75); height: 54px;
    }
    
    /* Ne jamais afficher sur mobile, o les colonnes sont empiles */
    @media (max-width: 900px) {
      .bande-fiche { display: none !important; }
      .poignee-largeur-fiche { display: none !important; }
      #iframeFiche.fiche-replie, #iframeFiche.fiche-revenue, #iframeFiche.fiche-retenue {
        position: static; width: 100%; max-width: none; transform: none; opacity: 1; pointer-events: auto; display: block !important;
      }
    }


/* Le crayon de renommage de la campagne (MJ), juste apres « CODE ». Qualifie par
   l'identifiant : un <button> nu prend le fond clair du navigateur. */
#salleNom #btnRenommerCampagne{background:transparent;border:1px solid transparent;color:var(--ink);
  opacity:.7;cursor:pointer;padding:.1rem .25rem;margin:0 .15rem;border-radius:.3rem;
  vertical-align:middle;line-height:1;display:inline-flex;align-items:center;}
#salleNom #btnRenommerCampagne:hover{opacity:1;border-color:rgba(53,196,165,.5);background:rgba(53,196,165,.12);}
#salleNom #btnRenommerCampagne i,#salleNom #btnRenommerCampagne svg{width:15px;height:15px;}
#salleNom #nomCampagne{font-weight:600;color:var(--ink);margin-left:.2rem;}
.salle-item .nom-salle{color:var(--ink);opacity:.85;font-weight:600;}

/* ==== INFO SALLE (téléphone) — le bouton remplace titre, état et présents ====
   Qualifié par identifiant : une classe seule perdrait contre les règles de la
   barre déclarées plus haut. Couleur = #etatConn (frère précédent) :
   sans état = jaune, ok = vert, ko = rouge. */
#btnInfoSalle{display:none;align-items:center;gap:.4rem;height:34px;padding:0 .8rem;border-radius:999px;cursor:pointer;
  font:inherit;font-weight:800;font-size:.85rem;border:1.5px solid rgba(214,178,94,.7);color:#d6b25e;background:rgba(214,178,94,.1);}
#btnInfoSalle .code{font-family:ui-monospace,monospace;letter-spacing:.04em;}
#btnInfoSalle i,#btnInfoSalle svg{width:15px;height:15px;}
#etatConn[data-etat="ok"] ~ #btnInfoSalle{border-color:rgba(53,196,165,.7);color:var(--verdigris);background:rgba(53,196,165,.1);}
#etatConn[data-etat="ko"] ~ #btnInfoSalle{border-color:rgba(224,122,122,.7);color:#e07a7a;background:rgba(224,122,122,.1);}
#infoSalleBoite{position:fixed;left:.6rem;right:.6rem;z-index:70;background:#0d1619;border:1px solid rgba(53,196,165,.4);
  border-radius:.6rem;box-shadow:0 14px 40px rgba(0,0,0,.65);padding:.7rem .8rem;font-size:.82rem;max-height:70vh;overflow:auto;}
#infoSalleBoite h4{margin:.1rem 0 .4rem;font-size:.66rem;text-transform:uppercase;letter-spacing:.07em;color:#7f918d;font-weight:800;}
#infoSalleBoite h4:not(:first-child){margin-top:.8rem;}
#infoSalleBoite .is-lig{display:flex;align-items:center;gap:.5rem;padding:.3rem 0;border-bottom:1px solid rgba(79,112,103,.2);}
#infoSalleBoite .is-lig .k{color:#7f918d;font-size:.72rem;width:76px;flex:0 0 auto;}
#infoSalleBoite .is-lig .v{flex:1;font-weight:600;min-width:0;overflow-wrap:anywhere;}
#infoSalleBoite .is-lig .v.code{color:var(--verdigris);font-family:ui-monospace,monospace;font-weight:800;letter-spacing:.04em;}
#infoSalleBoite .is-mini{font:inherit;font-size:.7rem;border:1px solid rgba(79,112,103,.5);border-radius:.35rem;padding:.2rem .5rem;
  color:#b7c6c2;background:transparent;display:inline-flex;gap:.25rem;align-items:center;cursor:pointer;min-height:30px;}
#infoSalleBoite .is-mini i,#infoSalleBoite .is-mini svg{width:13px;height:13px;}
#infoSalleBoite .is-pt{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:.4rem;background:#d6b25e;}
#infoSalleBoite .is-pt.ok{background:var(--verdigris);}
#infoSalleBoite .is-pt.ko{background:#e07a7a;}
#infoSalleBoite .is-joueur{display:flex;align-items:center;padding:.2rem 0;}
#infoSalleBoite .is-toi{opacity:.6;font-size:.72rem;margin-left:.3rem;}
@media (max-width:900px){
  #ecranSalle .topbar{flex-wrap:nowrap;gap:.5rem;}
  #ecranSalle .topbar #salleNom,#ecranSalle .topbar #etatConn,#ecranSalle .topbar .lbl-presents,
  #ecranSalle .topbar #listeJoueurs,#ecranSalle .topbar .grow{display:none !important;}
  #ecranSalle .topbar #btnInfoSalle{display:inline-flex;margin:0 auto;}
}

/* Repli d'une ZONE (remis avec les chapitres) : les etapes sont des freres de l'en-tete,
   pas des enfants — c'est ce qui permet de deposer une etape sous n'importe quelle zone. */
.scen-lg.zplie{display:none;}
.scen-zone-tete.plie{opacity:.6;}
.scen-zone-tete.plie .chev{transform:rotate(-90deg);}

/* Une zone qu'on vient de creer clignote, pour qu'on la retrouve. */
@keyframes scenNouvelle { 0%,60% { background:rgba(214,178,94,.45); } 100% { background:transparent; } }
.scen-zone-tete.nouvelle{animation:scenNouvelle 2.2s ease;}

/* Le crayon de renommage d'une ZONE (comme celui d'un chapitre). Qualifie : `.scen-zone-tete` est declare plus haut. */
.scen-zone-tete .scen-zren{flex:0 0 auto;color:rgba(215,226,223,.4);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  padding:.2rem;border:0;background:transparent;border-radius:.25rem;}
.scen-zone-tete .scen-zren:hover{color:#fff;background:rgba(255,255,255,.1);}
.scen-zone-tete .scen-zren svg{width:13px;height:13px;}
/* L'en-tete d'une zone : le NOM s'etire, le compteur et le crayon vont a droite, la fleche garde une taille normale.
   Sans ca tout etait colle a gauche et le crayon tombait au MILIEU de l'en-tete : cliquer « au milieu » renommait. */
.scen-zone-tete .nom{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.scen-zone-tete .chev{width:.9rem;height:.9rem;flex:0 0 auto;}

/* Un chapitre VIDE doit pouvoir recevoir une zone ou une etape : sans hauteur, il n'y avait rien ou lacher. */
.scen-chap-corps:empty{min-height:2.6rem;align-items:center;justify-content:center;border:1px dashed rgba(200,163,255,.3);border-radius:.4rem;}
.scen-chap-corps:empty::after{content:'Dépose une zone ici';font-size:.72rem;color:rgba(215,226,223,.35);font-style:italic;}

/* ==== LE SCENARIO SE MODIFIE SUR PLACE : outils au survol, lignes « + » sous chaque zone / chapitre ==== */
#scenListe .scen-outils{display:inline-flex;gap:.1rem;flex:0 0 auto;margin-left:auto;opacity:0;transition:opacity .12s;}
#scenListe .scen-lg:hover .scen-outils,#scenListe .scen-zone-tete:hover .scen-outils,#scenListe .scen-chap-t:hover .scen-outils,
#scenListe .scen-outils:focus-within{opacity:1;}
@media (hover:none){ #scenListe .scen-outils{opacity:.7;} }    /* pas de survol au doigt : toujours visibles, en plus discret */
#scenListe .scen-outils button{width:22px;height:22px;display:inline-grid;place-items:center;border:0;background:transparent;
  color:rgba(215,226,223,.6);border-radius:.3rem;cursor:pointer;padding:0;}
#scenListe .scen-outils button:hover{color:#fff;background:rgba(255,255,255,.1);}
#scenListe .scen-outils .scen-cx:hover,#scenListe .scen-outils .scen-zx:hover,#scenListe .scen-outils .scen-ssup:hover{color:#fca5a5;background:rgba(252,165,165,.1);}
#scenListe .scen-outils button svg{width:13px;height:13px;}
#scenListe .scen-ajout{display:flex;align-items:center;gap:.3rem;font-size:.7rem;font-weight:600;color:rgba(215,226,223,.4);
  border:1px dashed rgba(79,112,103,.35);border-radius:.35rem;padding:.24rem .45rem;margin:.18rem 0 .1rem;cursor:pointer;}
#scenListe .scen-ajout:hover{color:var(--verdigris);border-color:rgba(53,196,165,.55);}
#scenListe .scen-ajout.zone{color:rgba(214,178,94,.6);border-color:rgba(214,178,94,.3);margin-top:.4rem;}
#scenListe .scen-ajout.zone:hover{color:var(--old-gold);border-color:rgba(214,178,94,.6);}
#scenListe .scen-ajout.zplie{display:none;}
#scenListe .scen-ajout svg{width:12px;height:12px;}
#scenListe .scen-edit{flex:1 1 auto;min-width:0;width:100%;font:inherit;color:var(--ink);background:#02070a;
  border:1px solid rgba(53,196,165,.7);border-radius:.3rem;padding:.12rem .35rem;outline:none;}
#scenListe.en-selection .scen-ajout,#scenListe.en-selection .scen-outils{display:none;}
#scenListe .scen-chap-corps{min-height:2.6rem;}

/* ==== RIEN N'EST JAMAIS ATTENUE, ET TOUT S'ALIGNE (Vincent, 30/09/2026 : « je t'ai pas demande un changement de couleur ») ====
   Les couleurs d'origine reviennent : chapitre vide, « Sans chapitre » et zone repliee ne sont plus grises. La zone repliee
   se reconnait a sa fleche, pas a sa couleur. */
#scenListe .scen-chap.avenir{opacity:1;}
#scenListe .scen-chap-t.sans-chap{opacity:1;}
#scenListe .scen-zone-tete.plie{opacity:1;}
/* Les lignes « + » : lisibles (elles sont l'action principale d'un chapitre vide), pas seulement pointillees. */
#scenListe .scen-ajout{color:rgba(215,226,223,.72);border-color:rgba(79,112,103,.6);}
#scenListe .scen-ajout.zone{color:rgba(214,178,94,.92);border-color:rgba(214,178,94,.5);}
/* Les poignees des trois niveaux (chapitre, zone, etape) tombent dans la MEME colonne : celle de la poignee d'une etape
   (bordure du chapitre + marge du corps + bordure de la ligne + son retrait). */
#scenListe .scen-chap-t{padding-left:calc(.45rem + 1px + .5rem);padding-right:calc(.45rem + 1px + .5rem);}
#scenListe .scen-zone-tete{padding-left:calc(1px + .5rem);padding-right:calc(1px + .5rem);}
/* Les outils FLOTTENT sur la ligne au lieu de lui prendre de la place : les compteurs et pastilles gardent leur
   place a droite, alignes d'un niveau a l'autre. Au survol, ils passent par-dessus. */
#scenListe .scen-lg,#scenListe .scen-zone-tete,#scenListe .scen-chap-t{position:relative;}
#scenListe .scen-outils{position:absolute;right:calc(.45rem + 1px);top:50%;transform:translateY(-50%);margin-left:0;
  background:rgba(5,13,16,.94);border-radius:.35rem;padding:0 .1rem;z-index:2;}

/* « Sans chapitre » : la meme bande que les chapitres numerotes (fond, separateur, hauteur), pour que la liste soit homogene. */
#scenListe .scen-chap-t.sans-chap{background:rgba(200,163,255,.08);border-bottom:1px solid rgba(200,163,255,.2);
  padding-top:.4rem;padding-bottom:.4rem;border-radius:.5rem .5rem 0 0;}
/* Le numero d'un chapitre a une largeur FIXE : « Sans chapitre » porte un numero invisible de la meme taille, et son nom tombe au meme endroit. */
#scenListe .scen-chap-t .num{display:inline-block;min-width:1.2rem;text-align:center;box-sizing:border-box;}
#scenListe .scen-chap-t.sans-chap{cursor:pointer;}

/* LES CHAPITRES NE SE RETRECISSENT PLUS (Vincent, 30/09/2026, en zoomant) : la liste est une colonne flexible, et ses enfants
   avaient le droit de RETRECIR (flex-shrink:1, + overflow:hidden donc pas de hauteur minimale) : avec beaucoup de chapitres,
   chacun etait ecrase a la hauteur de son en-tete, et la liste n'avait plus rien a faire defiler. Ils gardent leur hauteur
   naturelle et c'est la LISTE qui defile. */
#scenListe > .scen-chap,#scenListe > .scen-nouv-chap,#scenListe > .scen-vide,#scenListe > .scen-ajout{flex:0 0 auto;}

/* ==== LE SCENARIO S'ADAPTE A LA PLACE QU'IL A VRAIMENT (Vincent, 30/09/2026, en zoomant) ====
   Trois colonnes : liste (310 px fixes) + detail + « Scene en cours » (465 px FIXES). Quand on zoome, les deux colonnes fixes ne
   retrecissaient pas : c'est le DETAIL qui etait ecrase (28 px a 125 %). On mesure donc la place du scenario lui-meme, pas celle
   de l'ecran (elle change aussi quand on elargit le chat) : des que le detail passerait sous ~200 px (conteneur < 1000 px ; a 1500 px de fenetre il mesure 1009 et le detail 204 px : inchange), la colonne
   de droite se retire et un clic sur une etiquette ouvre son encart A LA PLACE du detail, avec « Retour » — exactement le mecanisme du
   telephone. A 100 % sur un ecran de 1536 px le detail fait ~244 px : rien ne change. */
.scen-deux{container-type:inline-size;container-name:scen;}
@container scen (max-width: 1000px){
  .scen-deux.mobile-encart .scen-detail{display:none !important;}
  .scen-deux:not(.mobile-encart) .scen-cote{display:none !important;}
  .scen-btn-retour{display:inline-flex !important;}
  .scen-deux .scen-cote{flex:1 1 auto;}
}

/* ⚠️ « Copier la fiche pour une IA » (fenêtre d'import du scénario) : un petit bouton DANS une phrase d'aide.
   Il héritait de la taille d'un bouton d'action (35 px, comme « Annuler »). Visé par son identifiant : aucune
   classe générique écrite plus bas (.go-mini…) ne peut le regrossir. Mêmes valeurs que `.scen-tete .go-mini`. */
#btnScenFicheIA{flex:0 0 auto;display:inline-flex;align-items:center;gap:.3rem;width:auto;
  font-size:.72rem;padding:.15rem .5rem;margin:.45rem 0 0 .25rem;vertical-align:baseline;}
#btnScenFicheIA svg,#btnScenFicheIA i{width:13px;height:13px;}

/* ==== L'IMPORT DU SCÉNARIO : le texte à gauche, l'aperçu DESSINÉ à droite (maquette validée le 30/09/2026) ====
   Tout est qualifié par #modaleScenColler : `.go-mini`, `.scen-ap-*` et consorts sont déclarés plus haut ou plus bas. */
#modaleScenColler #scenCollerBoite{width:min(1120px,96vw);max-height:94vh;overflow:auto;}
#modaleScenColler .scen-coller-deux{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;}
#modaleScenColler .scen-coller-deux > div{min-width:0;}
#modaleScenColler #scenCollerTexte{width:100%;height:min(52vh,460px);resize:vertical;
  font-family:ui-monospace,Consolas,monospace;font-size:.78rem;line-height:1.55;}
#modaleScenColler #scenCollerApercu{max-height:min(52vh,460px);height:min(52vh,460px);overflow:auto;padding:.6rem;}
#modaleScenColler .scen-ap-zone{display:flex;align-items:center;gap:.35rem;text-transform:none;letter-spacing:0;}
#modaleScenColler .scen-ap-zone.ap-chap{font-size:.82rem;font-weight:800;color:var(--violet);margin:.3rem 0 .3rem;}
#modaleScenColler .scen-ap-zone.ap-zone{font-size:.76rem;font-weight:700;color:var(--verdigris);margin:.45rem 0 .25rem .8rem;}
#modaleScenColler .scen-ap-zone svg{width:13px;height:13px;}
#modaleScenColler .scen-ap-et{display:block;margin:.3rem 0 .3rem 1.4rem;padding:.45rem .55rem;font-size:.8rem;
  border:1px solid rgba(53,196,165,.18);border-radius:.45rem;background:rgba(2,7,10,.45);}
#modaleScenColler .ap-tete{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;}
#modaleScenColler .ap-titre{font-weight:700;font-size:.85rem;}
#modaleScenColler .ap-eti{display:inline-flex;align-items:center;gap:.25rem;font-size:.72rem;font-weight:700;
  padding:.04rem .45rem;border-radius:999px;border:1px solid currentColor;background:rgba(255,255,255,.04);}
#modaleScenColler .ap-eti svg{width:11px;height:11px;}
#modaleScenColler .ap-note{margin:.35rem 0 .1rem;font-size:.78rem;color:#c5d2ce;white-space:pre-wrap;
  border-left:2px solid rgba(255,255,255,.12);padding-left:.5rem;}
#modaleScenColler .ap-note .ap-h{display:block;color:var(--old-gold);font-weight:800;}
#modaleScenColler .ap-note mark{background:rgba(214,178,94,.25);color:inherit;}
#modaleScenColler .ap-it{font-style:italic;}
#modaleScenColler .ap-c-rouge{color:#e07a7a;} #modaleScenColler .ap-c-or{color:var(--old-gold);}
#modaleScenColler .ap-c-vert{color:var(--verdigris);} #modaleScenColler .ap-c-violet{color:var(--violet);}
#modaleScenColler .ap-c-bleu{color:var(--bleu-scene);}
#modaleScenColler .ap-champs{display:grid;grid-template-columns:auto 1fr;gap:.05rem .6rem;margin:.35rem 0 0 .2rem;font-size:.72rem;}
#modaleScenColler .ap-champs .k{color:#8a9b97;}
#modaleScenColler .ap-ch-t{grid-column:1/-1;font-weight:700;color:var(--ink);}
#modaleScenColler .ap-part{display:flex;align-items:center;gap:.3rem;margin-top:.3rem;font-size:.72rem;color:#8a9b97;}
#modaleScenColler .ap-part svg{width:13px;height:13px;}
#modaleScenColler .ap-res{color:var(--old-gold);font-size:.66rem;border:1px solid rgba(214,178,94,.4);border-radius:999px;padding:0 .35rem;}
#modaleScenColler .scen-ap-ignore{margin-top:.5rem;font-size:.72rem;}
#modaleScenColler .ap-err{margin:.25rem 0 .25rem 1.4rem;color:#e07a7a;background:rgba(224,122,122,.1);
  border:1px solid rgba(224,122,122,.45);border-radius:.4rem;padding:.25rem .5rem;}
#btnScenExemple{flex:0 0 auto;display:inline-flex;align-items:center;gap:.3rem;width:auto;
  font-size:.72rem;padding:.15rem .5rem;margin:.45rem 0 0 .25rem;vertical-align:baseline;}
#btnScenExemple svg,#btnScenExemple i{width:13px;height:13px;}
@media (max-width:820px){
  #modaleScenColler .scen-coller-deux{grid-template-columns:1fr;}
  #modaleScenColler #scenCollerTexte{height:190px;}
  #modaleScenColler #scenCollerApercu{height:auto;max-height:34vh;}
}

/* ==== UNE IMAGE SANS ADRESSE (importée d'un scénario) : « lien à ajouter », jamais un cadre vide ==== */
.cat-vig .apercu.sans-lien{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;
  color:var(--old-gold);background:rgba(214,178,94,.08);border:1px dashed rgba(214,178,94,.5);font-size:.74rem;font-weight:700;}
.cat-vig .apercu.sans-lien svg{width:22px;height:22px;}
.cat-droits .drt-note{font-size:.72rem;color:#c5d2ce;line-height:1.4;}
#scenPartages .scen-lien.sans-lien{border-style:dashed;border-color:rgba(214,178,94,.6);color:var(--old-gold);}
#modaleScenColler .ap-res.ap-sans{color:var(--old-gold);border-color:rgba(214,178,94,.6);background:rgba(214,178,94,.08);}

/* ── La fenêtre d'envoi des partages (maquette validée le 30/09/2026, option A) ──
   Posée SOUS la vignette, dans #catPanneau (qui défile : elle défile avec lui), flèche centrée
   sur le bouton « Réserve ▾ » cliqué (variable --fl, mesurée en JS). Qualifiée par #catPanneau :
   la dernière règle écrite gagne, et ce fichier est long. */
#catPanneau .drt-pop{position:absolute;z-index:20;box-sizing:border-box;background:#0f1a1e;border:1px solid rgba(53,196,165,.55);border-radius:.6rem;padding:.6rem;box-shadow:0 12px 32px rgba(0,0,0,.6);}
#catPanneau .drt-pop::before{content:"";position:absolute;top:-7px;left:var(--fl,40px);width:12px;height:12px;background:#0f1a1e;border-left:1px solid rgba(53,196,165,.55);border-top:1px solid rgba(53,196,165,.55);transform:rotate(45deg);}
#catPanneau .drt-pop h4{margin:0 0 .45rem;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--verdigris);display:flex;justify-content:space-between;align-items:center;gap:.5rem;}
#catPanneau .drt-pop h4 span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#catPanneau .drt-pop .drt-chips{display:flex;flex-wrap:wrap;gap:.35rem;}
#catPanneau .drt-pop .drt-chip{font-size:.74rem;padding:.2rem .6rem;border-radius:.4rem;}
#catPanneau .drt-pop .drt-chip.res{font-size:.68rem;border-style:dashed;text-transform:none;letter-spacing:0;flex:0 0 auto;color:var(--old-gold);border-color:rgba(214,178,94,.5);}
#catPanneau .drt-pop .drt-note{font-size:.78rem;line-height:1.4;color:var(--old-gold);}
#catPanneau .cat-vig.drt-ouvert{border-color:var(--old-gold);box-shadow:0 0 0 1px rgba(214,178,94,.45) inset;}
#catPanneau .cat-pan-tete .cat-tout-reserve{margin-left:auto;margin-right:.6rem;display:inline-flex;align-items:center;gap:.3rem;font:inherit;font-size:.72rem;font-weight:600;padding:.25rem .6rem;border-radius:.4rem;border:1px dashed rgba(214,178,94,.5);background:transparent;color:var(--old-gold);cursor:pointer;}
#catPanneau .cat-pan-tete .cat-tout-reserve:hover:not(:disabled){background:rgba(214,178,94,.14);}
#catPanneau .cat-pan-tete .cat-tout-reserve:disabled{opacity:.4;cursor:default;}
#catPanneau .cat-pan-tete .cat-tout-reserve i,#catPanneau .cat-pan-tete .cat-tout-reserve svg{width:13px;height:13px;}

/* Le rond blanc des partages DÉPLOYÉS, à côté du total vert (demande de Vincent, 02/10/2026).
   Qualifié par `.cat-titre` : `.cat-pastille` est déclarée plus haut et gagnerait sinon. */
.cat-titre .cat-pastille.deploye{background:rgba(127,176,216,.2);color:var(--bleu-scene);margin-left:.2rem;min-width:1.05rem;text-align:center;}

/* ── LE PING sur la scène (maquette validée le 02/10/2026) ──
   Le calque couvre la scène, ne reçoit aucun clic, et les marqueurs gardent LEUR taille à l'écran : ils ne sont
   pas dans l'image zoomée, leur position est recalculée (voir `placerPing`). Qualifié par #scenePartage : la
   dernière règle écrite gagne, et ce fichier est long. */
#scenePartage{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;}
#scenePartage #scenePings{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:4;}
#scenePartage .scene-ping{position:absolute;width:0;height:0;}
#scenePartage .scene-ping .cercle{position:absolute;left:-26px;top:-26px;width:52px;height:52px;border-radius:50%;border:3px solid var(--c);box-shadow:0 0 14px var(--c);opacity:0;animation:ping-onde 2.4s ease-out forwards;}
#scenePartage .scene-ping .cercle:nth-child(2){animation-delay:.35s;}
#scenePartage .scene-ping .cercle:nth-child(3){animation-delay:.7s;}
#scenePartage .scene-ping .coeur{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:var(--c);animation:ping-coeur 2.4s ease-out forwards;}
#scenePartage .scene-ping .nom{position:absolute;left:14px;top:-34px;white-space:nowrap;font-size:.74rem;font-weight:700;color:#06110f;background:var(--c);padding:.1rem .45rem;border-radius:.3rem;line-height:1.3;animation:ping-coeur 2.4s ease-out forwards;}
#scenePartage .scene-ping.a-gauche .nom{left:auto;right:14px;}
#scenePartage .scene-ping.en-bas .nom{top:14px;}
#scenePartage .scene-ping-charge{position:absolute;width:0;height:0;}
#scenePartage .scene-ping-charge::before{content:"";position:absolute;left:-20px;top:-20px;width:40px;height:40px;border-radius:50%;border:3px solid var(--c);opacity:.9;animation:ping-charge var(--duree,500ms) linear forwards;}
@keyframes ping-onde{0%{transform:scale(.2);opacity:.95}70%{opacity:.6}100%{transform:scale(1.6);opacity:0}}
@keyframes ping-coeur{0%{opacity:1}80%{opacity:1}100%{opacity:0}}
@keyframes ping-charge{0%{transform:scale(1.9);opacity:.15}100%{transform:scale(.8);opacity:.95}}
/* L'onglet Scène clignote une seconde quand on regarde autre chose : rien n'est imposé. */
#bandeauVues .vue-onglet.vue-scene.ping-signal{animation:ping-clignote .45s ease-in-out 2;box-shadow:0 0 0 2px var(--cp,#fff);}
@keyframes ping-clignote{50%{background:rgba(127,176,216,.5);border-color:#fff;}}

/* ── L'ÉDITEUR DE NOTES (js/editeur-texte.js ; maquette validée, version 2 : on écrit dans le rendu) ──
   Les couleurs sont LUES DANS LE THÈME (`--rouge`, `--old-gold`, `--verdigris`, `--violet`, `--bleu-scene`) :
   rien n'est écrit en dur ici. Tout est qualifié par `.edt` : `.go-mini` et consorts sont déclarés plus haut
   dans ce long fichier et gagneraient sinon. */
.edt{display:flex;flex-direction:column;flex:1;min-height:0;}
.edt .edt-barre{display:flex;flex-wrap:wrap;gap:.2rem;align-items:center;padding:.25rem;border:1px solid rgba(79,112,103,.3);border-bottom:none;border-radius:.4rem .4rem 0 0;background:rgba(2,7,10,.5);opacity:.55;transition:opacity .15s,border-color .15s;}
.edt:focus-within .edt-barre{opacity:1;border-color:rgba(53,196,165,.55);background:rgba(53,196,165,.07);}
.edt .edt-barre button{background:transparent;border:1px solid transparent;color:var(--ink);border-radius:.3rem;width:30px;height:28px;display:grid;place-items:center;cursor:pointer;padding:0;}
.edt .edt-barre button:hover{border-color:rgba(53,196,165,.5);background:rgba(53,196,165,.12);}
.edt .edt-barre button i,.edt .edt-barre button svg{width:15px;height:15px;}
.edt .edt-sep{width:1px;height:18px;background:rgba(79,112,103,.45);margin:0 .15rem;}
.edt .edt-pastille{display:block;width:16px;height:16px;border-radius:50%;border:1.5px solid rgba(255,255,255,.2);}
.edt .edt-note{flex:1;min-height:11rem;border:1px solid rgba(79,112,103,.3);border-radius:0 0 .4rem .4rem;background:#02070a;color:rgba(215,226,223,.9);padding:.55rem .7rem;font-size:.86rem;line-height:1.6;outline:none;overflow:auto;}
.edt:focus-within .edt-note{border-color:rgba(53,196,165,.55);}
.edt .edt-note:empty::before{content:attr(data-vide);color:rgba(215,226,223,.3);font-style:italic;}
.edt .edt-note p,.edt .edt-note div{margin:.15rem 0;}
.edt .edt-note h5{margin:.55rem 0 .15rem;font-size:1.05rem;color:var(--old-gold);font-weight:800;}
.edt .edt-note h5:first-child{margin-top:0;}
.edt .edt-note ul{margin:.2rem 0;padding-left:1.3rem;}
.edt .edt-note mark,.edt .edt-note span[style*="background"]{background:rgba(214,178,94,.28) !important;color:inherit;padding:0 .15rem;border-radius:.15rem;}
.edt .edt-note .c-rouge{color:var(--rouge);} .edt .edt-note .c-or{color:var(--old-gold);} .edt .edt-note .c-vert{color:var(--verdigris);}
.edt .edt-note .c-violet{color:var(--violet);} .edt .edt-note .c-bleu{color:var(--bleu-scene);}

/* La LECTURE d'un champ d'étiquette mis en forme (js/editeur-texte.js, `rendreLigne`) : mêmes couleurs que l'éditeur de
   notes, lues dans le thème. Qualifié par `.edt-lecture`. */
.edt-lecture .c-rouge{color:var(--rouge);} .edt-lecture .c-or{color:var(--old-gold);} .edt-lecture .c-vert{color:var(--verdigris);}
.edt-lecture .c-violet{color:var(--violet);} .edt-lecture .c-bleu{color:var(--bleu-scene);}
.edt-lecture mark{background:rgba(214,178,94,.28);color:inherit;padding:0 .15rem;border-radius:.15rem;}

/* « Coller un scénario » : les DEUX boutons sur la même ligne, et les deux cadres alignés par le haut (chacun a son
   étiquette au-dessus : « Ton scénario » / « Aperçu en direct »). Qualifié par #modaleScenColler. */
#modaleScenColler .scen-coller-boutons{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:0 0 .55rem;}

/* Glisser-déposer d'une image (MJ) : la zone qui recevra le fichier S'ALLUME. Qualifié par #id : `.cat-titre`,
   `.scene-dossier` et `#catPanneau` ont des règles plus bas. */
#bandeauVues .cat-titre.depot-cible,
#bandeauVues .vue-onglet.depot-cible,
#catPanneau.depot-cible,
#catPanneau .scene-dossier.depot-cible{outline:2px dashed var(--old-gold);outline-offset:-2px;background:rgba(214,178,94,.16);}
#catPanneau.depot-cible{outline-offset:-4px;}
/* L'iframe de la fiche avale les glissers : pendant le geste elle ne reçoit plus rien, ils retombent sur la page. */
body.depot-fichier #iframeFiche, body.depot-fichier iframe{pointer-events:none;}
#depotAide{position:fixed;left:50%;bottom:1.2rem;transform:translateX(-50%);z-index:200;pointer-events:none;
  background:#0d1a1d;color:var(--ink);border:1px solid var(--old-gold);border-radius:8px;padding:.45rem .9rem;font-size:.85rem;box-shadow:0 4px 18px rgba(0,0,0,.5);}

/* Dépôt d'un lot d'images : la fenêtre « Où ranger ? » et la liste des noms. Qualifié par #id. */
#modaleDepotDest .depot-dest{display:grid;gap:.4rem;margin:.55rem 0;}
#modaleDepotDest .depot-dest .go-mini{justify-content:flex-start;gap:.5rem;}
#modaleDepotLot .trade-box{max-width:560px;width:calc(100vw - 2rem);}
#modaleDepotLot .depot-lot-lignes{max-height:46vh;overflow:auto;display:grid;gap:.4rem;margin:.2rem 0 .6rem;}
#modaleDepotLot .depot-lot-ligne{display:grid;grid-template-columns:64px minmax(0,1fr);gap:.55rem;align-items:center;}
#modaleDepotLot .depot-lot-ligne img{width:64px;height:40px;object-fit:cover;border-radius:5px;background:#0d1a1d;border:1px solid rgba(255,255,255,.12);}
#modaleDepotLot .depot-lot-barre{display:flex;gap:.5rem;margin-top:.7rem;}

/* La disquette de la note d'étape : en bas à droite du détail (flex colonne → margin-top:auto la pousse en bas).
   Qualifié par #scenSauve : `.go-mini` et `.scen-detail` ont des règles plus bas. */
#scenSauve{align-self:flex-end;margin-top:auto;padding-top:.6rem;display:flex;align-items:center;gap:.5rem;font-size:.72rem;color:rgba(215,226,223,.55);}
#scenSauve .go-mini{padding:.28rem .45rem;}
#scenSauve .go-mini svg,#scenSauve .go-mini i{width:15px;height:15px;}
#scenSauve[data-etat="modifie"] .scen-sauve-txt{color:var(--old-gold);}
#scenSauve[data-etat="encours"] .scen-sauve-txt{color:var(--bleu-scene);}
#scenSauve[data-etat="echec"] .scen-sauve-txt{color:var(--rouge);font-weight:700;}
#scenSauve[data-etat="echec"] .go-mini{border-color:var(--rouge);color:var(--rouge);}
/* Compteur de chapitres : à gauche du compteur d'étapes, séparé par un point médian. Qualifié par #id. */
#scenarioVue #scenCompteChap::after{content:"·";margin-left:.5rem;color:rgba(215,226,223,.4);font-weight:400;}

/* ---- LE MODE ÉDITION DU SCÉNARIO (03/10/2026) : cases rondes et poignées des étiquettes, bouton Trier, barre qui passe à la ligne.
   Tout est qualifié (#scenarioVue / #scenDetail) : `.go-mini`, `.scen-eti` et `.scen-barre-edit` ont des règles plus haut. */
#scenarioVue .scen-barre-edit{flex-wrap:wrap;}
#scenarioVue .scen-barre-edit .scen-nettoie{display:inline-flex;align-items:center;gap:.4rem;flex:0 0 auto;padding:.2rem .35rem;border:1px dashed rgba(214,178,94,.5);border-radius:.4rem;}
#scenarioVue .scen-barre-edit select{font-size:.74rem;padding:.28rem .4rem;background:#0a1518;color:var(--ink);border:1px solid rgba(215,226,223,.3);border-radius:.38rem;}
#scenarioVue .scen-barre-edit select:disabled{opacity:.4;cursor:not-allowed;}
#scenDetail .eti-recap-edition{display:flex;flex-wrap:wrap;gap:.45rem;margin:.2rem 0 .5rem;}
#scenDetail .eti-ed{display:inline-flex;align-items:center;gap:.25rem;border-radius:999px;}
#scenDetail .eti-ed .eti-grip{width:14px;height:20px;display:grid;place-items:center;color:rgba(215,226,223,.5);cursor:grab;touch-action:none;}
#scenDetail .eti-ed .eti-grip svg{width:12px;height:12px;}
#scenDetail .eti-ed .eti-sel{width:16px;height:16px;border-radius:50%;flex:0 0 auto;border:1.5px solid rgba(215,226,223,.45);display:grid;place-items:center;color:transparent;cursor:pointer;}
#scenDetail .eti-ed .eti-sel.on{background:rgba(214,178,94,.3);border-color:var(--old-gold);color:var(--old-gold);}
#scenDetail .eti-ed .eti-sel svg{width:11px;height:11px;}
#scenDetail .eti-ed.pris .scen-eti{box-shadow:0 0 0 2px rgba(214,178,94,.7);}
#scenDetail .eti-ed.glisse{opacity:.55;}
#scenDetail .entete-min{display:flex;align-items:center;gap:.7rem;margin-bottom:.3rem;}
/* « Trier » est un OUTIL, pas une catégorie : gris neutre (l'or est celui des PNJ). */
#scenDetail .entete-min .eti-trier{flex:0 0 auto;width:auto;display:inline-flex;align-items:center;gap:.3rem;font-size:.7rem;padding:.2rem .55rem;
  background:rgba(215,226,223,.07);border-color:rgba(215,226,223,.45);color:var(--ink);text-transform:none;letter-spacing:0;}
#scenDetail .entete-min .eti-trier svg{width:12px;height:12px;}
/* Au doigt les cases de 16 px sont trop petites : 24 px sur écran tactile seulement. */
@media (pointer:coarse){
  #scenDetail .eti-ed .eti-sel{width:24px;height:24px;}
  #scenDetail .eti-ed .eti-sel svg{width:15px;height:15px;}
  #scenDetail .eti-ed .eti-grip{width:22px;height:28px;}
  #scenarioVue .scen-liste .scen-sel{width:24px;height:24px;}
  #scenarioVue .scen-liste .scen-sel svg{width:15px;height:15px;}
}

/* ---- LA BARRE D'OUTILS DE LA TABLE (03/10/2026) : posée sur la scène, déplaçable, verticale ou horizontale. Tout est qualifié par
   #scenePartage : `.go-mini`, `button` et les règles de la scène sont plus haut dans le fichier. ---- */
#scenePartage .barre-outils{position:absolute;z-index:6;display:flex;gap:.25rem;padding:.3rem;border-radius:.6rem;background:rgba(6,14,16,.92);
  border:1px solid rgba(215,226,223,.18);box-shadow:0 8px 24px rgba(0,0,0,.55);}
#scenePartage .barre-outils.vert{flex-direction:column;}
#scenePartage .barre-outils.horiz{flex-direction:row;align-items:center;}
#scenePartage .barre-outils .bo{width:34px;height:34px;padding:0;display:grid;place-items:center;border-radius:.45rem;border:1px solid transparent;color:var(--ink);background:transparent;cursor:pointer;}
#scenePartage .barre-outils .bo:hover{background:rgba(255,255,255,.06);}
#scenePartage .barre-outils .bo svg,#scenePartage .barre-outils .bo i{width:17px;height:17px;}
#scenePartage .barre-outils .bo.on{background:rgba(127,176,216,.18);border-color:rgba(127,176,216,.7);color:var(--bleu-scene);}
#scenePartage .barre-outils .bo-grip{width:34px;height:14px;display:grid;place-items:center;color:rgba(215,226,223,.4);cursor:grab;touch-action:none;}
#scenePartage .barre-outils.horiz .bo-grip{width:14px;height:34px;}
#scenePartage .barre-outils.prise .bo-grip{cursor:grabbing;}
#scenePartage .barre-outils .bo-grip svg,#scenePartage .barre-outils .bo-grip i{width:13px;height:13px;}
#scenePartage .barre-outils.horiz .bo-grip i,#scenePartage .barre-outils.horiz .bo-grip svg{transform:rotate(90deg);}
#scenePartage .barre-outils .bo-sep{height:1px;background:rgba(215,226,223,.15);margin:.15rem .2rem;}
/* Le chevron qui REPLIE la barre (07/10/2026), juste après la poignée ; repliée, seuls la poignée, « MJ » et lui restent. */
#scenePartage .barre-outils .bo-pli{flex:0 0 auto;width:34px;height:20px;padding:0;display:grid;place-items:center;border-radius:.35rem;border:0;
  background:rgba(53,196,165,.1);color:var(--verdigris);cursor:pointer;}
#scenePartage .barre-outils.horiz .bo-pli{width:20px;height:34px;}
#scenePartage .barre-outils.barre-mj .bo-pli{background:rgba(214,178,94,.12);color:var(--old-gold);}
#scenePartage .barre-outils .bo-pli:hover{background:rgba(53,196,165,.2);}
#scenePartage .barre-outils .bo-pli svg,#scenePartage .barre-outils .bo-pli i{width:14px;height:14px;}
#scenePartage .barre-outils.pliee > :not(.bo-grip):not(.bo-pli):not(.bo-etq){display:none !important;}
@media (pointer:coarse){ #scenePartage .barre-outils .bo-pli{width:44px;height:28px;} #scenePartage .barre-outils.horiz .bo-pli{width:28px;height:44px;} }
#scenePartage .barre-outils.horiz .bo-sep{width:1px;height:auto;margin:.2rem .15rem;}
#scenePartage .barre-outils .pastille-c{width:16px;height:16px;border-radius:50%;border:2px solid #02070a;box-shadow:0 0 0 1px rgba(215,226,223,.5);display:block;}
#scenePartage.mode-pointer #sceneImg{cursor:crosshair !important;}
#scenePartage .bo-pop{position:absolute;z-index:7;background:#0a1518;border:1px solid rgba(215,226,223,.22);border-radius:.55rem;padding:.55rem;box-shadow:0 10px 30px rgba(0,0,0,.6);font-size:.76rem;color:var(--ink);}
#scenePartage .bo-pop .bo-pop-titre{font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:rgba(215,226,223,.55);margin-bottom:.35rem;}
#scenePartage .bo-pop .bo-pop-aide{font-size:.7rem;color:rgba(215,226,223,.55);margin-top:.4rem;}
#scenePartage .bo-couleurs{display:grid;grid-template-columns:repeat(4,24px);gap:.4rem;}
#scenePartage .bo-couleurs .bo-couleur{width:24px;height:24px;padding:0;border-radius:50%;border:0;display:block;cursor:pointer;}
#scenePartage .bo-couleurs .bo-couleur.on{box-shadow:0 0 0 2px #02070a,0 0 0 4px #efe6d2;}
@media (pointer:coarse){
  #scenePartage .barre-outils .bo{width:44px;height:44px;}
  #scenePartage .bo-couleurs{grid-template-columns:repeat(4,34px);}
  #scenePartage .bo-couleurs .bo-couleur{width:34px;height:34px;}
}

/* ---- La fenêtre d'accueil de la fiche rangée (03/10/2026). Qualifié par #modaleAccueilFiche : `.trade-box` et `button` ont des règles plus haut. ---- */
#modaleAccueilFiche .trade-box{width:min(430px,92vw);padding:1.1rem 1.2rem 1rem;}
#modaleAccueilFiche h3{margin:0 0 .5rem;font-size:1rem;color:var(--verdigris);display:flex;align-items:center;gap:.45rem;}
#modaleAccueilFiche h3 svg,#modaleAccueilFiche h3 i{width:17px;height:17px;}
#modaleAccueilFiche p{margin:.35rem 0;font-size:.84rem;line-height:1.5;color:var(--ink);}
#modaleAccueilFiche .acc-bord{color:var(--old-gold);font-weight:800;}
#modaleAccueilFiche .acc-ic{width:14px;height:14px;vertical-align:-2px;}
#modaleAccueilFiche .acc-schema{display:flex;margin:.7rem 0;height:74px;}
#modaleAccueilFiche .acc-mini{flex:1;border:1px solid rgba(215,226,223,.22);border-radius:.4rem;display:flex;overflow:hidden;font-size:.6rem;color:rgba(215,226,223,.6);position:relative;}
#modaleAccueilFiche .acc-b{flex:0 0 12px;background:rgba(214,178,94,.28);border:0 solid var(--old-gold);display:grid;place-items:center;color:var(--old-gold);}
#modaleAccueilFiche .acc-b svg,#modaleAccueilFiche .acc-b i{width:8px;height:8px;}
#modaleAccueilFiche .acc-s{flex:1;display:grid;place-items:center;}
#modaleAccueilFiche .acc-c{flex:0 0 26%;border:0 solid rgba(215,226,223,.18);display:grid;place-items:center;}
#modaleAccueilFiche .acc-mini > :first-child.acc-b{border-right-width:1px;}
#modaleAccueilFiche .acc-mini > :last-of-type.acc-b{border-left-width:1px;}
#modaleAccueilFiche .acc-mini .acc-c:last-of-type{border-left-width:1px;}
#modaleAccueilFiche .acc-mini > .acc-c:first-child{border-right-width:1px;}
#modaleAccueilFiche .acc-roue{position:absolute;right:5px;top:3px;color:var(--old-gold);}
#modaleAccueilFiche .acc-roue svg,#modaleAccueilFiche .acc-roue i{width:11px;height:11px;}
#modaleAccueilFiche .acc-valider{display:flex;justify-content:flex-end;margin-top:.6rem;}
#modaleAccueilFiche .acc-valider button{flex:0 0 auto;width:auto;background:rgba(53,196,165,.2);border:1px solid rgba(53,196,165,.7);color:var(--ink);border-radius:.45rem;padding:.4rem .9rem;font-weight:700;cursor:pointer;}
@media (max-width:1100px){ #modaleAccueilFiche .acc-schema{display:none;} }
/* ---- L'ONGLET « SCÈNE » PARTAGÉ EN DEUX (03/10/2026, étape 2 du marqueur œil) : « Préparation » (or) à gauche, le nombre de
   joueurs présents chez eux (vert) à droite. Qualifié par les classes dédiées `seg-scene*` : aucun risque de collision avec
   `.vue-onglet`, dont les règles (couleurs, tailles d'icônes) restent plus haut dans le fichier. ---- */
.vue-onglet.coupe-scene{padding:0;overflow:visible;border-color:rgba(214,178,94,.75);display:inline-flex;}
.seg-scene{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .55rem;cursor:pointer;}
.seg-scene.seg-prepa{color:var(--old-gold);border-radius:.35rem 0 0 .35rem;}
.seg-scene.seg-prepa.actif{background:rgba(214,178,94,.16);box-shadow:inset 0 -3px 0 var(--old-gold);}
.seg-scene.seg-table{color:var(--verdigris);border-left:1px solid rgba(214,178,94,.45);border-radius:0 .35rem .35rem 0;}
.seg-scene.seg-table.actif{background:rgba(53,196,165,.16);box-shadow:inset 0 -3px 0 var(--verdigris);}
.seg-scene i,.seg-scene svg{width:13px;height:13px;vertical-align:-2px;}
.seg-scene-fin{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;margin-left:.15rem;
  color:rgba(214,178,94,.85);border:1px solid rgba(214,178,94,.5);}
.seg-scene-fin:hover{background:rgba(214,178,94,.18);}
.seg-scene-fin i,.seg-scene-fin svg{width:9px;height:9px;}

/* ---- LA SCÈNE ET LE DOIGT (03/10/2026, iPad de Vincent) : sans ceci, pincer dans la scène zoomait la PAGE ENTIÈRE (le geste par défaut
   du navigateur) et un glissement faisait défiler la page. Le zoom et le déplacement de la scène sont gérés par js/salle-scene.js
   (`brancherZoomScene`). ⚠️ `touch-action` retire le geste au navigateur dans CETTE zone seulement : le reste du site garde le sien. ---- */
#scenePartage{touch-action:none;}

/* ==== L'ŒIL DES SCÈNES — étapes 3 à 5 (04/10/2026, maquettes/maquette-oeil-final.html) ====================================
   ⚠️ TOUT est qualifié (deux classes ou un identifiant) et posé EN FIN de fichier : `.scene-vig .x`, `.go-mini`… sont
   déclarées plus haut et gagneraient sinon à spécificité égale. */
/* L'œil, à droite du badge doré et de la poignée (qui occupent le coin à .2rem) : le nom garde toute sa largeur. */
.scene-vig .scene-oeil{position:absolute;top:.2rem;left:1.55rem;z-index:3;height:22px;min-width:22px;padding:0;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;gap:.15rem;cursor:pointer;touch-action:none;
  background:rgba(2,7,10,.82);border:1px solid rgba(255,255,255,.7);color:#fff;font-family:inherit;font-size:.62rem;font-weight:800;line-height:1;}
.scene-vig .scene-oeil > i,.scene-vig .scene-oeil > svg{width:12px;height:12px;flex:0 0 auto;}
.scene-vig .scene-oeil.ici{padding:0 .4rem 0 .15rem;border-color:#bff5e6;cursor:grab;}
.scene-vig .scene-oeil.ici > svg{width:18px;height:18px;padding:3px;border-radius:50%;background:var(--verdigris);color:#02221b;box-sizing:border-box;}
.scene-vig .scene-oeil .oeil-nb{display:inline-flex;align-items:center;gap:.12rem;}
.scene-vig .scene-oeil .oeil-nb svg,.scene-vig .scene-oeil .oeil-nb i{width:11px;height:11px;}
.scene-vig .scene-oeil:hover{filter:brightness(1.25);}
.scene-vig.oeil-cible{outline:2px dashed var(--verdigris);outline-offset:2px;}
.scene-oeil.oeil-fantome{position:fixed;z-index:200;pointer-events:none;height:26px;display:inline-flex;align-items:center;gap:.15rem;
  padding:0 .45rem 0 .2rem;border-radius:999px;background:var(--verdigris);color:#02221b;border:2px solid #bff5e6;
  box-shadow:0 8px 20px rgba(0,0,0,.6);font:800 .66rem/1 ui-sans-serif,system-ui,sans-serif;}
.scene-oeil.oeil-fantome svg{width:13px;height:13px;}
body.oeil-glisse,body.oeil-glisse *{cursor:grabbing !important;user-select:none;}
@media (pointer:coarse){
  .scene-vig .scene-oeil{height:30px;min-width:30px;left:1.75rem;}
  .scene-vig .scene-oeil.ici > svg{width:22px;height:22px;}
}
/* La fenêtre « Qui va sur cette image ? » — au-dessus de la bibliothèque (une modale, z-index 80). */
#oeilQuiVa.oeil-quiva{position:fixed;z-index:130;width:310px;max-width:calc(100vw - 16px);max-height:70vh;overflow:auto;
  background:#0d1619;border:1px solid rgba(53,196,165,.6);border-radius:.6rem;padding:.6rem .7rem;box-shadow:0 14px 34px rgba(0,0,0,.6);
  font-size:.78rem;color:var(--ink);box-sizing:border-box;}
#oeilQuiVa.oeil-quiva::before{content:'';position:absolute;top:-6px;left:var(--fl,28px);width:10px;height:10px;transform:rotate(45deg);
  background:#0d1619;border-left:1px solid rgba(53,196,165,.6);border-top:1px solid rgba(53,196,165,.6);}
#oeilQuiVa.oeil-quiva.feuille{left:0;right:0;bottom:0;top:auto;width:auto;max-width:none;border-radius:.8rem .8rem 0 0;padding:.8rem .9rem 1rem;}
#oeilQuiVa.oeil-quiva.feuille::before{display:none;}
#oeilQuiVa .t{font-weight:800;color:var(--verdigris);margin-bottom:.45rem;display:flex;align-items:center;gap:.35rem;}
#oeilQuiVa .t svg{width:14px;height:14px;flex:0 0 auto;}
#oeilQuiVa .oeil-l{display:flex;align-items:center;gap:.45rem;padding:.32rem .45rem;border-radius:.4rem;border:1px solid rgba(215,226,223,.18);margin:.25rem 0;cursor:pointer;}
#oeilQuiVa .oeil-l:has(input:checked){border-color:rgba(53,196,165,.7);background:rgba(53,196,165,.12);}
#oeilQuiVa .oeil-l.tous{font-weight:800;}
#oeilQuiVa .oeil-l.ici{opacity:.55;cursor:default;}
#oeilQuiVa .oeil-l.absent .n{opacity:.5;font-style:italic;}
#oeilQuiVa .t span{min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;}
#oeilQuiVa .oeil-l input{margin:0;width:15px;height:15px;flex:0 0 auto;accent-color:var(--verdigris);}
#oeilQuiVa .oeil-l .pt{width:10px;height:10px;border-radius:50%;flex:0 0 auto;border:1px solid rgba(255,255,255,.6);}
#oeilQuiVa .oeil-l .n{min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;}
/* Une pastille d'exception : bornée, jamais plus large que ce qu'il reste au nom (le nom d'image peut être très long). */
#oeilQuiVa .oeil-l em{margin-left:auto;flex:0 0 auto;max-width:33%;overflow:hidden;text-overflow:ellipsis;font-style:normal;font-size:.66rem;color:var(--muet,#8a9b97);white-space:nowrap;
  padding:.08rem .45rem;border-radius:999px;border:1px solid rgba(215,226,223,.25);}
#oeilQuiVa .oeil-l.tous em{max-width:none;}
#oeilQuiVa .oeil-l em.part{color:#9db5ff;border-color:rgba(79,124,255,.55);}
#oeilQuiVa .oeil-l em.ici{color:var(--verdigris);border-color:rgba(53,196,165,.55);}
#oeilQuiVa .oeil-note{font-size:.7rem;color:var(--old-gold);margin:.35rem 0;}
#oeilQuiVa .b{display:flex;gap:.4rem;margin-top:.55rem;flex-wrap:wrap;}
#oeilQuiVa .b .go-mini{display:inline-flex;align-items:center;gap:.3rem;}
#oeilQuiVa .b .oeil-envoyer{flex:1 1 auto;justify-content:center;}
#oeilQuiVa .b .oeil-envoyer:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.6);}
@media (pointer:coarse){ #oeilQuiVa .oeil-l{padding:.55rem .55rem;} #oeilQuiVa .oeil-l input{width:22px;height:22px;} }
/* Le message bref en bas de la scène, avec « Annuler » (6 s) — au-dessus des pings. */
#scenePartage .oeil-toast{position:absolute;left:50%;bottom:2.6rem;transform:translateX(-50%);z-index:8;max-width:92%;display:none;
  align-items:center;gap:.5rem;padding:.4rem .65rem;border-radius:.5rem;background:#0e1a1c;border:1px solid rgba(53,196,165,.6);
  font-size:.78rem;color:var(--ink);box-shadow:0 8px 22px rgba(0,0,0,.55);}
#scenePartage .oeil-toast.visible{display:flex;}
/* ⚠️ `left:50%` ne laisse au bloc que la MOITIÉ de la largeur (le texte passait sur 4 lignes à 420 px) : on lui rend la sienne.
   Sur écran étroit, la barre d'outils naît en bas : le message se pose au-dessus d'elle. */
#scenePartage .oeil-toast{width:max-content;max-width:calc(100% - 1.5rem);box-sizing:border-box;}
@media (max-width:600px){ #scenePartage .oeil-toast{bottom:4.6rem;} }
/* La bibliothèque « Choisir la scène » ouverte (z-index 80) : le bandeau « Annuler » passe au-dessus, en bas de l'écran. */
#scenePartage .oeil-toast.sur-modale{position:fixed;bottom:1.2rem;z-index:125;max-width:calc(100vw - 1.5rem);}
#scenePartage .oeil-toast > svg{width:14px;height:14px;flex:0 0 auto;color:var(--verdigris);}
#scenePartage .oeil-toast .oeil-annuler{display:inline-flex;align-items:center;gap:.3rem;font-family:inherit;font-size:.74rem;font-weight:700;padding:.25rem .55rem;border-radius:.4rem;
  cursor:pointer;border:1px solid rgba(214,178,94,.55);background:rgba(214,178,94,.14);color:var(--old-gold);white-space:nowrap;}
#scenePartage .oeil-toast .oeil-annuler svg{width:12px;height:12px;}
/* L'onglet partagé : un compteur par groupe, « Prép. » sur écran étroit, le clignotement du groupe qui pingue. */
.seg-scene .lib-court{display:none;}
@media (max-width:600px){ .seg-scene .lib-long{display:none;} .seg-scene .lib-court{display:inline;} }
.seg-scene.seg-table:not(:last-child){border-radius:0;}
/* Un groupe dont personne n'est connecté : le chiffre reste, en gris (compteur de l'onglet et œil des vignettes). */
#bandeauVues .seg-scene.seg-table.tous-absents{color:rgba(215,226,223,.42);}
.scene-vig .scene-oeil .oeil-nb.tous-absents{color:rgba(215,226,223,.5);}
.seg-scene.seg-table.ping-signal{animation:ping-clignote .45s ease-in-out 2;box-shadow:inset 0 0 0 2px var(--cp,#fff);}
#bulleGroupes.bulle-groupes{position:fixed;z-index:140;max-width:min(380px,calc(100vw - 16px));pointer-events:none;background:#101418;
  border:1px solid rgba(53,196,165,.5);border-radius:.4rem;padding:.35rem .6rem;font-size:.74rem;line-height:1.6;color:var(--ink);
  box-shadow:0 8px 22px rgba(0,0,0,.55);}
#bulleGroupes.bulle-groupes .bg-titre{font-weight:800;color:var(--verdigris);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#bulleGroupes.bulle-groupes .bg-ligne{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#bulleGroupes.bulle-groupes .bg-ligne.absent{opacity:.6;}
#bulleGroupes.bulle-groupes .bg-aide{margin-top:.25rem;padding-top:.25rem;border-top:1px solid rgba(215,226,223,.14);font-size:.66rem;color:var(--muet,#8a9b97);white-space:nowrap;}
/* La zone de l'onglet Scène que décrit la bulle ouverte. */
#bandeauVues .seg-scene.bulle-on{box-shadow:inset 0 0 0 1.5px rgba(53,196,165,.85);}

/* 04/10/2026 — le panneau du bandeau (Joueurs, PNJ, Cartes…) passe PAR-DESSUS la barre d'outils de la scène. Les deux avaient z-index 6 ;
   à niveau égal le dernier du document gagne, et la scène vient après : la barre recouvrait le panneau et ses boutons étaient inatteignables. */
#catPanneau.cat-panneau{z-index:9;}

/* L'enveloppe (04/10/2026) : la pastille des réponses non lues, le bouton de l'écran des salles, les lignes de « Info salle ». */
#btnSignalerBug{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:.3rem .45rem;}   /* même gabarit que le « ? » (#btnAide) */
#btnSignalerBug > i,#btnSignalerBug > svg{width:15px;height:15px;}
#btnSignalerBug .env-pastille,#btnEnvHub .env-pastille{position:absolute;top:-6px;right:-6px;background:var(--old-gold);color:#111;font-size:.6rem;font-weight:800;border-radius:999px;padding:0 .3rem;line-height:15px;}
#btnSignalerBug .env-pastille:empty,#btnEnvHub .env-pastille:empty,#infoSalleBoite .env-pastille:empty{display:none;}
#btnEnvHub{position:relative;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;margin-left:auto;cursor:pointer;
  border-radius:.45rem;border:1px solid rgba(215,226,223,.35);background:rgba(255,255,255,.04);color:#d7e2df;}
#btnEnvHub i,#btnEnvHub svg{width:17px;height:17px;}
#ecranHub #btnEnvHub + #btnAideHub{margin-left:.4rem;}
#infoSalleBoite .is-env{display:flex;flex-direction:column;gap:.3rem;margin:0 0 .6rem;}
#infoSalleBoite .is-env .is-env-l{display:flex;align-items:center;gap:.55rem;width:100%;padding:.55rem .7rem;border:1px solid rgba(215,226,223,.18);border-radius:.5rem;background:transparent;color:var(--ink);font:inherit;font-size:.85rem;text-align:left;cursor:pointer;}
#infoSalleBoite .is-env .is-env-l:disabled{opacity:.45;cursor:default;}
#infoSalleBoite .is-env .is-env-l svg,#infoSalleBoite .is-env .is-env-l i{width:16px;height:16px;flex:0 0 auto;}
#infoSalleBoite .is-env .env-pastille{margin-left:auto;background:var(--old-gold);color:#111;font-size:.62rem;font-weight:800;border-radius:999px;padding:0 .35rem;line-height:15px;}

/* ---- La barre du MJ et le carrousel de tour (lot 2, 04/10/2026 ; maquettes barres-carrousel et carrousel-dexterite) ---- */
#scenePartage .barre-outils.barre-mj{border-color:rgba(214,178,94,.55);}
#scenePartage .barre-outils.barre-mj .bo-etq{font-size:.55rem;font-weight:800;letter-spacing:.08em;color:var(--old-gold);text-align:center;align-self:center;}
#scenePartage .barre-outils.barre-mj .bo.on{background:rgba(214,178,94,.16);border-color:rgba(214,178,94,.7);color:var(--old-gold);}
#scenePartage .barre-outils.carr-boite{z-index:5;padding:.35rem .45rem;max-width:calc(100% - 8px);}
#scenePartage .carr-boite .carr-corps{display:flex;align-items:center;gap:.55rem;min-width:0;}
#scenePartage .carr-boite .carr-round{font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--old-gold);writing-mode:vertical-rl;transform:rotate(180deg);}
#scenePartage .carr-boite .carr-jetons{display:flex;gap:.45rem;align-items:flex-start;overflow-x:auto;min-width:0;scrollbar-width:thin;}
#scenePartage .carr-boite .carr-jeton{display:flex;flex-direction:column;align-items:center;gap:.1rem;width:62px;flex:0 0 auto;cursor:default;user-select:none;}
#scenePartage .carr-boite .carr-rond{position:relative;width:42px;height:42px;border-radius:50%;overflow:hidden;display:grid;place-items:center;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#2c5b78,#4a8fb5);border:2px solid rgba(215,226,223,.35);}
#scenePartage .carr-boite .carr-rond img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
#scenePartage .carr-boite .carr-jeton.pnj .carr-rond{background:linear-gradient(135deg,#5a2b2b,#9a4a4a);}
#scenePartage .carr-boite .carr-jeton.cache .carr-rond{opacity:.45;border-style:dashed;}
#scenePartage .carr-boite .carr-jeton.moi .carr-rond{border-color:var(--verdigris);}
#scenePartage .carr-boite .carr-jeton.tour .carr-rond{border-color:var(--old-gold);box-shadow:0 0 0 3px rgba(214,178,94,.35),0 0 14px rgba(214,178,94,.55);}
#scenePartage .carr-boite .carr-jeton.tour .carr-nom{color:var(--old-gold);}
#scenePartage .carr-boite .carr-jeton.arrive{opacity:.55;}
#scenePartage .carr-boite .carr-nom{font-size:.68rem;text-align:center;line-height:1.1;max-width:62px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#scenePartage .carr-boite .carr-val{font-size:.66rem;font-family:ui-monospace,monospace;color:#efe6d2;}
#scenePartage .carr-boite .carr-val small,#scenePartage .carr-boite .carr-etq{font-size:.58rem;color:rgba(215,226,223,.55);}
#scenePartage .carr-boite .carr-main{font-size:.68rem;font-weight:800;color:var(--old-gold);line-height:1.15;padding-left:.45rem;border-left:1px solid rgba(215,226,223,.15);white-space:nowrap;}
#scenePartage .carr-boite .carr-actions{display:flex;flex-direction:column;gap:.25rem;padding-left:.45rem;border-left:1px solid rgba(215,226,223,.15);}
#scenePartage .carr-boite .carr-bt{display:inline-flex;align-items:center;gap:.3rem;font:inherit;font-size:.72rem;font-weight:700;padding:.3rem .55rem;border-radius:.4rem;cursor:pointer;
  border:1px solid rgba(215,226,223,.3);background:rgba(255,255,255,.04);color:var(--ink);white-space:nowrap;}
#scenePartage .carr-boite .carr-bt.or{border-color:rgba(214,178,94,.7);background:rgba(214,178,94,.14);color:var(--old-gold);}
#scenePartage .carr-boite .carr-bt svg,#scenePartage .carr-boite .carr-bt i{width:13px;height:13px;}
#scenePartage .bo-pop.carr-menu{min-width:250px;max-width:300px;}
#scenePartage .carr-menu .carr-m-l{display:flex;align-items:center;gap:.45rem;width:100%;padding:.4rem .35rem;border:0;border-radius:.35rem;background:transparent;color:var(--ink);font:inherit;font-size:.78rem;text-align:left;cursor:pointer;}
#scenePartage .carr-menu .carr-m-l:hover{background:rgba(255,255,255,.06);}
#scenePartage .carr-menu .carr-m-l:disabled{opacity:.45;cursor:default;}
#scenePartage .carr-menu .carr-m-l.dang{color:#e07a7a;}
#scenePartage .carr-menu .carr-m-l svg,#scenePartage .carr-menu .carr-m-l i,#scenePartage .carr-menu .carr-m-sous svg{width:14px;height:14px;flex:0 0 auto;}
#scenePartage .carr-menu .carr-m-sep{height:1px;background:rgba(215,226,223,.12);margin:.3rem .1rem;}
#scenePartage .carr-menu .carr-m-sous{display:flex;align-items:center;gap:.4rem;font-size:.7rem;color:rgba(215,226,223,.6);margin:.15rem .3rem;}
#scenePartage .carr-menu .carr-m-radio{display:block;padding:.3rem .35rem;border-radius:.35rem;font-size:.78rem;cursor:pointer;}
#scenePartage .carr-menu .carr-m-radio.on{background:rgba(214,178,94,.12);}
#scenePartage .carr-menu .carr-m-radio small{display:block;margin-left:1.35rem;font-size:.66rem;color:rgba(215,226,223,.55);}
#scenePartage .carr-menu .carr-m-radio select{font:inherit;font-size:.74rem;padding:.05rem .2rem;}
#scenePartage .carr-menu .carr-m-note.err{font-size:.7rem;color:#e07a7a;margin:.2rem .3rem;}
#scenePartage .carr-menu .carr-m-valeur{display:flex;gap:.35rem;margin:.2rem 0 .3rem;}
#scenePartage .carr-menu .carr-m-valeur input{flex:1;min-width:0;}
#scenePartage .carr-menu .carr-m-ok{font:inherit;font-size:.74rem;font-weight:700;padding:.2rem .6rem;border-radius:.35rem;border:1px solid rgba(214,178,94,.6);background:rgba(214,178,94,.12);color:var(--old-gold);cursor:pointer;}
#scenePartage #carrMsg{position:absolute;left:50%;bottom:1rem;transform:translateX(-50%);z-index:9;display:none;width:max-content;max-width:calc(100% - 1.5rem);box-sizing:border-box;
  background:rgba(6,14,16,.95);border:1px solid rgba(214,178,94,.55);border-radius:.5rem;padding:.4rem .7rem;font-size:.76rem;color:var(--ink);}
#scenePartage #carrMsg.err{border-color:rgba(224,122,122,.6);color:#f0a3a3;}
#carrDepart .carr-depart{max-width:420px;width:100%;}
#carrDepart .carr-d-sec{font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:rgba(215,226,223,.55);margin:.6rem 0 .25rem;}
#carrDepart .carr-d-l{display:flex;align-items:center;gap:.45rem;padding:.3rem .2rem;font-size:.85rem;cursor:pointer;}
#carrDepart .carr-d-l em{font-style:normal;font-size:.72rem;color:rgba(215,226,223,.5);}
#carrDepart .carr-d-vide{font-size:.76rem;color:rgba(215,226,223,.5);padding:.2rem;}
#carrDepart .carr-d-libre input{width:100%;}
@media (pointer:coarse){ #scenePartage .carr-boite .carr-bt{padding:.5rem .7rem;} #scenePartage .carr-menu .carr-m-l{padding:.65rem .4rem;} }

/* ---- Le pointeur laser (lot 3, 04/10/2026, js/salle-laser.js) : un calque de dessin sur la scène, qui ne prend aucun clic ---- */
#scenePartage #sceneLaser{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4;}
#scenePartage.mode-laser #sceneImg{cursor:crosshair !important;}

/* ---- Le carrousel : taille libre, en-tête (round + flèches), curseur du tour, annonce au centre (04/10/2026) ----
   La taille se règle par `--carr-k` (poignée dans le coin) : tout ce qui suit la TAILLE se multiplie par elle. Ces règles
   viennent APRÈS celles du lot 2 et les qualifient pareil : à spécificité égale la dernière gagne. */
/* Le carrousel (6) est AU-DESSUS de la barre du MJ (ramenée à 5) : agrandi, il peut la recouvrir, et sa poignée doit rester atteignable pour le rétrécir. */
#scenePartage .barre-outils.barre-mj{z-index:5;}
#scenePartage .barre-outils.carr-boite{--carr-k:1;z-index:6;padding:.35rem .45rem calc(.35rem + 6px);}
#scenePartage .carr-boite .carr-corps{flex-direction:column;align-items:stretch;gap:calc(.3rem * var(--carr-k));}
#scenePartage .carr-boite .carr-tete{display:flex;align-items:center;gap:.35rem;border-bottom:1px solid rgba(215,226,223,.1);padding-bottom:.25rem;}
#scenePartage .carr-boite .carr-round{writing-mode:horizontal-tb;transform:none;font-size:calc(.62rem * var(--carr-k));margin-right:auto;white-space:nowrap;}
#scenePartage .carr-boite .carr-rd{display:inline-grid;place-items:center;width:22px;height:22px;padding:0;border-radius:.3rem;cursor:pointer;
  border:1px solid rgba(214,178,94,.6);background:rgba(255,255,255,.04);color:var(--old-gold);}
#scenePartage .carr-boite .carr-rd:disabled{opacity:.35;cursor:default;}
#scenePartage .carr-boite .carr-rd svg,#scenePartage .carr-boite .carr-rd i{width:13px;height:13px;}
#scenePartage .carr-boite .carr-rang{display:flex;align-items:center;gap:.55rem;min-width:0;}
#scenePartage .carr-boite .carr-jeton{width:calc(62px * var(--carr-k));}
#scenePartage .carr-boite .carr-rond{width:calc(42px * var(--carr-k));height:calc(42px * var(--carr-k));font-size:calc(1rem * var(--carr-k));}
#scenePartage .carr-boite .carr-nom{font-size:calc(.68rem * var(--carr-k));max-width:calc(62px * var(--carr-k));}
#scenePartage .carr-boite .carr-val{font-size:calc(.66rem * var(--carr-k));}
#scenePartage .carr-boite .carr-val small,#scenePartage .carr-boite .carr-etq{font-size:calc(.58rem * var(--carr-k));}
#scenePartage .carr-boite .carr-main{font-size:calc(.68rem * var(--carr-k));display:flex;flex-direction:column;align-items:center;gap:.15rem;}
#scenePartage .carr-boite .carr-bt{font-size:calc(.72rem * var(--carr-k));}
#scenePartage .carr-boite .carr-curseur{display:grid;place-items:center;color:var(--old-gold);cursor:grab;touch-action:none;margin-top:.1rem;padding:2px 6px;}
#scenePartage .carr-boite .carr-curseur svg,#scenePartage .carr-boite .carr-curseur i{width:calc(14px * var(--carr-k));height:calc(14px * var(--carr-k));fill:currentColor;}
#scenePartage .carr-boite .carr-jeton.cible .carr-rond{outline:2px dashed var(--verdigris);outline-offset:3px;}
#scenePartage .carr-boite .carr-taille{position:absolute;right:3px;bottom:3px;width:16px;height:16px;cursor:nwse-resize;touch-action:none;opacity:.7;
  background:linear-gradient(135deg,transparent 0 48%,rgba(215,226,223,.7) 48% 56%,transparent 56% 70%,rgba(215,226,223,.7) 70% 78%,transparent 78%);}
#scenePartage .carr-boite .carr-taille:hover,#scenePartage .carr-boite.prise .carr-taille{opacity:1;}
.carr-fantome{position:fixed;z-index:95;pointer-events:none;transform:translate(-50%,-50%);color:var(--old-gold);}
.carr-fantome svg,.carr-fantome i{width:24px;height:24px;fill:currentColor;filter:drop-shadow(0 2px 6px rgba(0,0,0,.7));}
@media (pointer:coarse){ #scenePartage .carr-boite .carr-taille{width:28px;height:28px;} #scenePartage .carr-boite .carr-rd{width:32px;height:32px;} }

/* L'annonce du tour : sur `body`, au milieu de l'écran, sans jamais prendre un clic. */
#carrAnnonce{position:fixed;inset:0;z-index:85;display:grid;place-items:center;pointer-events:none;}
#carrAnnonce .carr-an-carte{display:flex;flex-direction:column;align-items:center;gap:.6rem;padding:2.4rem 3.2rem;
  background:radial-gradient(closest-side,rgba(6,14,16,.78),rgba(6,14,16,0));animation:carrAnnonceFondu 3.6s ease both;}
#carrAnnonce .carr-an-av{position:relative;overflow:hidden;width:clamp(120px,24vmin,200px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  font-size:clamp(3rem,10vmin,5rem);font-weight:900;color:#fff;background:linear-gradient(135deg,#2c5b78,#4a8fb5);border:4px solid var(--old-gold);
  box-shadow:0 0 0 6px rgba(214,178,94,.25),0 0 40px rgba(214,178,94,.55);}
#carrAnnonce .carr-an-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
#carrAnnonce .carr-an-av.pnj{background:linear-gradient(135deg,#5a2b2b,#9a4a4a);}
#carrAnnonce .carr-an-av.mj{background:radial-gradient(circle at 30% 25%,#8a6f2a,#3a2f12 72%);}
#carrAnnonce .carr-an-mj{font-family:Georgia,'Times New Roman',serif;font-weight:900;letter-spacing:.04em;font-size:clamp(3.4rem,11vmin,6rem);line-height:1;
  background:linear-gradient(180deg,#fff3c4,#d6b25e 55%,#8a6f2a);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));}
#carrAnnonce .carr-an-txt{font-size:.95rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(239,230,210,.85);text-shadow:0 2px 12px rgba(0,0,0,.9);}
#carrAnnonce .carr-an-nom{font-size:clamp(1.5rem,5vmin,2.3rem);font-weight:900;color:#efe6d2;text-shadow:0 2px 18px rgba(0,0,0,.9);margin-top:-.3rem;max-width:80vw;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* 3,6 s (Vincent, 04/10/2026 : « un peu plus longtemps », +50 %) ; le fondu d'entrée (~0,36 s) et de sortie (~0,54 s) gardent leur vitesse. */
@keyframes carrAnnonceFondu{0%{opacity:0;transform:scale(.92);}10%{opacity:1;transform:scale(1);}85%{opacity:1;transform:scale(1);}100%{opacity:0;transform:scale(1.03);}}

/* Le chat : une annonce de combat (début, fin, round) — centrée, en majuscules, dorée, sans nom ni personnage. */
#flux .msg.combat{text-align:center;font-weight:800;letter-spacing:.12em;font-size:.78rem;color:var(--old-gold);padding:.45rem .5rem;margin:.35rem 0;
  border-top:1px solid rgba(214,178,94,.3);border-bottom:1px solid rgba(214,178,94,.3);background:rgba(214,178,94,.06);}

/* La fenêtre « Lancer le combat » : chaque PNJ a sa case « caché », cochée d'office (l'effet de surprise). */
#carrDepart .carr-d-ligne{display:flex;align-items:center;gap:.5rem;}
#carrDepart .trade-actions{margin-top:.9rem;}
#carrDepart .carr-d-ligne .carr-d-l,#carrDepart .carr-d-ligne .carr-d-libre{flex:1;min-width:0;}
#carrDepart .carr-d-cache{display:flex;align-items:center;gap:.3rem;flex:0 0 auto;font-size:.72rem;color:rgba(215,226,223,.7);cursor:pointer;padding:.2rem .3rem;border-radius:.3rem;}
#carrDepart .carr-d-cache svg,#carrDepart .carr-d-cache i{width:13px;height:13px;}
#carrDepart .carr-d-cache:has(input:checked){color:var(--old-gold);}

/* Un participant EN ATTENTE du round suivant (ajouté en cours de combat) : grisé et sauté par « Suivant ». Au SURVOL, chez le MJ seul,
   il change de couleur pour qu'on le repère (Vincent, 04/10/2026) ; un clic ouvre son menu, qui propose « Jouer dès ce round ». */
#scenePartage .carr-boite.carr-mj .carr-jeton.arrive{cursor:pointer;transition:opacity .12s;}
#scenePartage .carr-boite.carr-mj .carr-jeton.arrive:hover{opacity:1;}
#scenePartage .carr-boite.carr-mj .carr-jeton.arrive:hover .carr-rond{outline:2px dashed var(--verdigris);outline-offset:3px;}
#scenePartage .carr-boite.carr-mj .carr-jeton.arrive:hover .carr-nom,#scenePartage .carr-boite.carr-mj .carr-jeton.arrive:hover .carr-etq{color:var(--verdigris);}
#scenePartage .carr-menu .carr-m-l.carr-m-ceround{color:var(--verdigris);font-weight:700;}

/* Le halo doré du jeton dont c'est le tour était ROGNÉ EN HAUT (Vincent, 05/10/2026) : la rangée défile de côté (`overflow-x:auto`), ce qui coupe
   aussi ce qui dépasse en hauteur — il restait 0 px au-dessus du rond, le halo en demande ~17. Un peu d'espace en haut et sur les côtés, qui suit
   la taille du carrousel (`--carr-k`), laisse le halo entier. Capture avant/après : maquettes/halo-carrousel/. */
#scenePartage .carr-boite .carr-jetons{padding:calc(9px * var(--carr-k)) calc(6px * var(--carr-k)) calc(2px * var(--carr-k));}

/* ---- LA GRILLE DE LA SCÈNE (06/10/2026, js/salle-grille.js ; maquette maquettes/maquette-grille.html) ----------------------
   ⚠️ Tout est QUALIFIÉ par #scenePartage / #grillePop : salle.css est plein de règles génériques qui écraseraient une classe seule. */
#scenePartage #sceneQuadrillage{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;}
#scenePartage.gr-glisse, #scenePartage.gr-glisse #sceneImg{cursor:move;}
#scenePartage #grillePop.gr-pop{width:300px;padding:.6rem .7rem .7rem;border-color:rgba(214,178,94,.45);font-size:.8rem;}
#scenePartage #grillePop.gr-pop.gr-feuille{left:0;right:0;bottom:0;top:auto;width:auto;border-radius:.8rem .8rem 0 0;}
#grillePop .gr-t{display:flex;align-items:center;gap:.4rem;font-weight:700;color:var(--old-gold);margin-bottom:.45rem;}
#grillePop .gr-t svg{width:16px;height:16px;}
#grillePop .gr-t .gr-x{margin-left:auto;width:26px;height:26px;padding:0;display:grid;place-items:center;border:0;border-radius:.35rem;background:transparent;color:rgba(215,226,223,.7);cursor:pointer;}
#grillePop .gr-t .gr-x:hover{background:rgba(255,255,255,.07);color:var(--ink);}
#grillePop .gr-t .gr-x svg{width:15px;height:15px;}
#grillePop .gr-inter{display:flex;align-items:center;gap:.5rem;width:100%;padding:.2rem 0;border:0;background:transparent;color:var(--ink);font:inherit;cursor:pointer;text-align:left;}
#grillePop .gr-inter .gr-bascule{flex:0 0 auto;width:30px;height:16px;border-radius:9px;background:rgba(215,226,223,.25);position:relative;transition:background .15s;}
#grillePop .gr-inter .gr-bascule::after{content:"";position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:#fff;transition:left .15s;}
#grillePop .gr-inter[aria-checked="true"] .gr-bascule{background:rgba(53,196,165,.7);}
#grillePop .gr-inter[aria-checked="true"] .gr-bascule::after{left:16px;}
#grillePop .gr-l{display:flex;align-items:center;gap:.4rem;margin:.45rem 0;flex-wrap:wrap;}
#grillePop .gr-l .gr-n{width:5.6rem;color:rgba(215,226,223,.8);}
#grillePop .gr-btn{width:28px;height:28px;min-width:28px;padding:0;display:inline-grid;place-items:center;border-radius:.4rem;border:1px solid rgba(215,226,223,.2);background:rgba(255,255,255,.04);color:var(--ink);cursor:pointer;touch-action:none;}
#grillePop .gr-btn:hover{background:rgba(255,255,255,.09);}
#grillePop .gr-btn svg{width:15px;height:15px;}
#grillePop .gr-curseur{flex:1;min-width:80px;accent-color:var(--old-gold);}
#grillePop .gr-cadenas{display:flex;align-items:center;gap:.35rem;padding:.15rem .3rem;border:0;border-radius:.35rem;background:transparent;color:rgba(215,226,223,.8);font:inherit;font-size:.75rem;cursor:pointer;}
#grillePop .gr-cadenas:hover{background:rgba(255,255,255,.06);}
#grillePop .gr-cadenas svg{width:14px;height:14px;color:var(--old-gold);}
#grillePop .gr-pave{display:grid;grid-template-columns:repeat(3,28px);grid-template-rows:repeat(2,28px);gap:3px;}
#grillePop .gr-pave #grHaut{grid-column:2;grid-row:1;} #grillePop .gr-pave #grGauche{grid-column:1;grid-row:2;}
#grillePop .gr-pave #grBas{grid-column:2;grid-row:2;} #grillePop .gr-pave #grDroite{grid-column:3;grid-row:2;}
#grillePop .gr-aide{font-size:.7rem;color:rgba(215,226,223,.55);line-height:1.35;}
#grillePop .gr-coul{width:22px;height:22px;padding:0;border-radius:50%;border:2px solid #0a1518;box-shadow:0 0 0 1px rgba(215,226,223,.4);cursor:pointer;}
#grillePop .gr-coul.on{box-shadow:0 0 0 2px var(--old-gold);}
#grillePop .gr-pied{border-top:1px solid rgba(215,226,223,.18);margin-top:.6rem;padding-top:.55rem;}
#grillePop .gr-etat{font-size:.72rem;margin-bottom:.5rem;color:rgba(215,226,223,.7);}
#grillePop .gr-etat.gr-or{color:var(--old-gold);}
#grillePop .gr-etat.gr-vert{color:var(--verdigris);}
#grillePop .gr-conf{font-size:.75rem;color:var(--rouge);margin-bottom:.4rem;}
#grillePop .gr-boutons{display:flex;gap:.4rem;justify-content:flex-end;flex-wrap:wrap;}
#grillePop .gr-b2, #grillePop .gr-b1{padding:.35rem .7rem;border-radius:.4rem;font:inherit;font-size:.78rem;cursor:pointer;}
#grillePop .gr-b2{border:1px solid rgba(215,226,223,.2);background:transparent;color:var(--ink);}
#grillePop .gr-b2.gr-danger{border-color:rgba(224,122,122,.7);color:var(--rouge);}
#grillePop .gr-b1{border:1px solid rgba(53,196,165,.7);background:rgba(53,196,165,.18);color:var(--verdigris);font-weight:700;}
#grillePop .gr-b1:disabled{opacity:.55;cursor:default;}
@media (pointer:coarse){
  #grillePop .gr-btn{width:36px;height:36px;min-width:36px;}
  #grillePop .gr-pave{grid-template-columns:repeat(3,36px);grid-template-rows:repeat(2,36px);}
  #grillePop .gr-coul{width:30px;height:30px;}
}

/* ---- LA BARRE DE ZOOM ET LES BARRES DE DÉFILEMENT (06/10/2026, js/salle-zoom.js ; maquette maquettes/maquette-zoom.html) ----------
   Fixe sur le bord droit, un peu au-dessus du centre (décision de Vincent). Qualifié par #scenePartage / #sceneZoom. */
#scenePartage #sceneZoom.zoom-barre{position:absolute;right:16px;top:42%;transform:translateY(-50%);z-index:6;display:flex;flex-direction:column;align-items:center;gap:.3rem;
  padding:.4rem .3rem;border-radius:.7rem;background:rgba(6,14,16,.92);border:1px solid rgba(215,226,223,.18);box-shadow:0 8px 24px rgba(0,0,0,.55);touch-action:none;}
#sceneZoom .zoom-val{font-size:.68rem;font-weight:700;color:var(--ink);min-width:2.6rem;text-align:center;}
#sceneZoom .zoom-bt{width:30px;height:30px;padding:0;display:grid;place-items:center;border-radius:.4rem;border:1px solid transparent;background:transparent;color:var(--ink);cursor:pointer;}
#sceneZoom .zoom-bt:hover:not(:disabled){background:rgba(255,255,255,.07);}
#sceneZoom .zoom-bt:disabled{opacity:.35;cursor:default;}
#sceneZoom .zoom-bt svg{width:16px;height:16px;}
#sceneZoom .zoom-rail{--zoom-f:0;position:relative;width:18px;height:150px;cursor:pointer;outline:none;}
#sceneZoom .zoom-rail::before{content:"";position:absolute;left:7px;top:0;bottom:0;width:4px;border-radius:2px;background:rgba(215,226,223,.2);}
#sceneZoom .zoom-rail .zoom-plein{position:absolute;left:7px;bottom:0;width:4px;height:calc(var(--zoom-f) * 100%);border-radius:2px;background:var(--bleu-scene);}
#sceneZoom .zoom-rail .zoom-bouton{position:absolute;left:50%;bottom:calc(var(--zoom-f) * 100%);width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--bleu-scene);transform:translate(-50%,50%);}
#sceneZoom .zoom-rail:focus-visible .zoom-bouton{box-shadow:0 0 0 3px rgba(127,176,216,.45);}
#scenePartage .zoom-defil{position:absolute;z-index:4;border-radius:4px;background:rgba(215,226,223,.08);touch-action:none;}
#scenePartage .zoom-defil.v{right:3px;top:6px;bottom:16px;width:8px;}
#scenePartage .zoom-defil.h{left:6px;right:16px;bottom:3px;height:8px;}
#scenePartage .zoom-defil .zoom-pouce{position:absolute;border-radius:4px;background:rgba(215,226,223,.45);cursor:pointer;}
#scenePartage .zoom-defil.v .zoom-pouce{left:0;right:0;}
#scenePartage .zoom-defil.h .zoom-pouce{top:0;bottom:0;}
#scenePartage .zoom-defil:hover .zoom-pouce, #scenePartage .zoom-defil.prise .zoom-pouce{background:rgba(215,226,223,.7);}
#scenePartage.zoom-prise, #scenePartage.zoom-prise #sceneImg{cursor:grabbing;}
@media (max-width:600px){ #sceneZoom .zoom-rail{height:90px;} }
@media (pointer:coarse){
  #sceneZoom .zoom-bt{width:38px;height:38px;}
  #sceneZoom .zoom-rail{width:26px;}
  #sceneZoom .zoom-rail::before, #sceneZoom .zoom-rail .zoom-plein{left:11px;}
  #scenePartage .zoom-defil.v{width:12px;} #scenePartage .zoom-defil.h{height:12px;}
}
/* ---- LA RÈGLE ET LES OPTIONS DE LA TABLE (06/10/2026, js/salle-regle.js ; maquette maquettes/maquette-regle.html) ----------------
   Qualifié par #scenePartage / #regleChoix / #optionsPop : jamais une classe seule. */
#scenePartage #sceneRegle{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4;}
#scenePartage.mode-regle #sceneImg{cursor:crosshair !important;}
#scenePartage #regleRappel{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:6;max-width:calc(100% - 24px);width:max-content;padding:.35rem .7rem;border-radius:.5rem;
  background:rgba(6,14,16,.92);border:1px solid rgba(127,176,216,.55);color:var(--ink);font-size:.74rem;text-align:center;pointer-events:none;}
#scenePartage #regleActions{position:absolute;z-index:6;display:flex;gap:.3rem;}
#scenePartage #regleActions button{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .55rem;border-radius:.4rem;font:inherit;font-size:.74rem;cursor:pointer;
  border:1px solid rgba(215,226,223,.25);background:rgba(6,14,16,.94);color:var(--ink);}
#scenePartage #regleActions #regleTerminer{border-color:rgba(53,196,165,.7);color:var(--verdigris);font-weight:700;}
#scenePartage #regleActions button svg{width:14px;height:14px;}
#scenePartage #regleChoix.rg-choix{width:210px;}
#regleChoix .rg-opt{position:relative;display:flex;align-items:flex-start;gap:.45rem;width:100%;padding:.35rem .3rem;border:0;border-radius:.4rem;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer;}
#regleChoix .rg-opt:hover{background:rgba(255,255,255,.06);}
#regleChoix .rg-opt small{display:block;font-size:.68rem;color:rgba(215,226,223,.55);}
#regleChoix .rg-opt .rg-rd{flex:0 0 auto;width:14px;height:14px;margin-top:2px;border-radius:50%;border:2px solid rgba(215,226,223,.5);}
#regleChoix .rg-opt[aria-pressed="true"] .rg-rd{border-color:var(--bleu-scene);background:radial-gradient(circle,var(--bleu-scene) 0 3px,transparent 4px);}
#regleChoix .rg-opt .rg-bulle{display:none;position:absolute;left:calc(100% + 10px);top:0;width:230px;padding:.45rem .55rem;border-radius:.45rem;background:#0a1518;border:1px solid rgba(127,176,216,.55);
  font-size:.7rem;line-height:1.4;color:var(--ink);box-shadow:0 8px 24px rgba(0,0,0,.6);z-index:2;pointer-events:none;}
#regleChoix .rg-opt:hover .rg-bulle{display:block;}
@media (hover:none){ #regleChoix .rg-opt:hover .rg-bulle{display:none;} }
#scenePartage #optionsPop.op-pop{width:300px;padding:.6rem .7rem .7rem;border-color:rgba(214,178,94,.45);font-size:.8rem;}
#scenePartage #optionsPop.op-pop.op-feuille{left:0;right:0;bottom:0;top:auto;width:auto;border-radius:.8rem .8rem 0 0;}
#optionsPop .op-t{display:flex;align-items:center;gap:.4rem;font-weight:700;color:var(--old-gold);margin-bottom:.35rem;}
#optionsPop .op-t svg{width:16px;height:16px;}
#optionsPop .op-t .op-x{margin-left:auto;width:26px;height:26px;padding:0;display:grid;place-items:center;border:0;border-radius:.35rem;background:transparent;color:rgba(215,226,223,.7);cursor:pointer;}
#optionsPop .op-t .op-x:hover{background:rgba(255,255,255,.07);color:var(--ink);}
#optionsPop .op-t .op-x svg{width:15px;height:15px;}
#optionsPop .op-sect{font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:rgba(215,226,223,.55);margin:.6rem 0 .3rem;padding-top:.45rem;border-top:1px solid rgba(215,226,223,.14);}
#optionsPop .op-t + .op-sect{border-top:0;padding-top:0;}
#optionsPop .op-aide{font-size:.72rem;color:rgba(215,226,223,.6);line-height:1.35;}
#optionsPop .op-n{font-size:.75rem;color:rgba(215,226,223,.8);margin-bottom:.2rem;}
#optionsPop .op-l{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-bottom:.35rem;}
#optionsPop .op-champ{width:4rem;padding:.25rem .35rem;border-radius:.35rem;border:1px solid rgba(215,226,223,.25);background:rgba(255,255,255,.04);color:var(--ink);font:inherit;}
#optionsPop .op-seg{display:inline-flex;border:1px solid rgba(215,226,223,.22);border-radius:.4rem;overflow:hidden;}
#optionsPop .op-seg button{padding:.25rem .55rem;border:0;background:transparent;color:rgba(215,226,223,.75);font:inherit;font-size:.74rem;cursor:pointer;}
#optionsPop .op-seg button[aria-pressed="true"]{background:rgba(214,178,94,.2);color:var(--old-gold);font-weight:700;}
#optionsPop .op-inter, #optionsPop .op-radio{display:flex;align-items:flex-start;gap:.5rem;width:100%;padding:.3rem 0;border:0;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer;}
#optionsPop .op-inter small, #optionsPop .op-radio small{display:block;font-size:.68rem;color:rgba(215,226,223,.55);line-height:1.35;}
#optionsPop .op-inter .op-bascule{flex:0 0 auto;width:30px;height:16px;margin-top:2px;border-radius:9px;background:rgba(215,226,223,.25);position:relative;transition:background .15s;}
#optionsPop .op-inter .op-bascule::after{content:"";position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:#fff;transition:left .15s;}
#optionsPop .op-inter[aria-checked="true"] .op-bascule{background:rgba(53,196,165,.7);}
#optionsPop .op-inter[aria-checked="true"] .op-bascule::after{left:16px;}
#optionsPop .op-radio .op-rd{flex:0 0 auto;width:14px;height:14px;margin-top:2px;border-radius:50%;border:2px solid rgba(215,226,223,.5);}
#optionsPop .op-radio[aria-pressed="true"] .op-rd{border-color:var(--old-gold);background:radial-gradient(circle,var(--old-gold) 0 3px,transparent 4px);}
@media (pointer:coarse){
  #scenePartage #regleActions button{padding:.5rem .8rem;font-size:.85rem;}
  #optionsPop .op-seg button{padding:.45rem .7rem;}
}

/* ---- LES ZONES (07/10/2026, js/salle-zones.js ; maquette maquettes/maquette-zones.html) -----------------------------------------
   Qualifié par #scenePartage / #zonePop / #zoneChoix / #zoneConf : jamais une classe seule. */
#scenePartage #sceneZones{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;}
#scenePartage.mode-zone #sceneImg{cursor:crosshair !important;}
#scenePartage #zoneChoix.zn-choix{width:auto;}
#zoneChoix .zn-formes{display:grid;grid-template-columns:repeat(4,56px);gap:.3rem;}
#zoneChoix .zn-forme{position:relative;display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.35rem .1rem;border-radius:.45rem;border:1px solid transparent;background:transparent;color:rgba(215,226,223,.85);font:inherit;font-size:.68rem;cursor:pointer;}
#zoneChoix .zn-forme:hover{background:rgba(255,255,255,.06);}
#zoneChoix .zn-forme svg{width:20px;height:20px;}
#zoneChoix .zn-forme[aria-pressed="true"]{border-color:rgba(127,176,216,.7);background:rgba(127,176,216,.15);color:var(--bleu-scene);}
#zoneChoix .zn-forme .zn-bulle{display:none;position:absolute;left:0;top:calc(100% + 8px);width:230px;padding:.45rem .55rem;border-radius:.45rem;background:#0a1518;border:1px solid rgba(127,176,216,.55);
  font-size:.7rem;line-height:1.4;color:var(--ink);text-align:left;box-shadow:0 8px 24px rgba(0,0,0,.6);z-index:2;pointer-events:none;}
#zoneChoix .zn-forme .zn-bulle b{color:var(--bleu-scene);}
#zoneChoix .zn-forme:hover .zn-bulle{display:block;}
@media (hover:none){ #zoneChoix .zn-forme:hover .zn-bulle{display:none;} }
#scenePartage #zonePop.zn-pop{width:260px;padding:.5rem .6rem .6rem;font-size:.78rem;border-color:rgba(230,111,166,.6);}
#scenePartage #zonePop.zn-pop.zn-feuille{left:0;right:0;bottom:0;top:auto;width:auto;border-radius:.8rem .8rem 0 0;}
#zonePop .zn-t{display:flex;align-items:center;gap:.35rem;font-weight:700;margin-bottom:.4rem;}
#zonePop .zn-t svg{width:15px;height:15px;flex:0 0 auto;}
#zonePop .zn-t .zn-titre{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#zonePop .zn-t .zn-x{width:26px;height:26px;padding:0;display:grid;place-items:center;border:0;border-radius:.35rem;background:transparent;color:rgba(215,226,223,.7);cursor:pointer;}
#zonePop .zn-t .zn-x:hover{background:rgba(255,255,255,.07);color:var(--ink);}
#zonePop .zn-t .zn-x svg{width:15px;height:15px;}
#zonePop .zn-l{display:flex;align-items:center;gap:.4rem;margin:.3rem 0;flex-wrap:wrap;color:rgba(215,226,223,.8);}
#zonePop .zn-l .zn-n{width:3.9rem;}
#zonePop .zn-champ{padding:.22rem .35rem;border-radius:.35rem;border:1px solid rgba(215,226,223,.25);background:rgba(255,255,255,.04);color:var(--ink);font:inherit;}
#zonePop .zn-champ.zn-nom{flex:1;min-width:0;}
#zonePop .zn-champ.zn-num{width:3.6rem;text-align:right;}
#zonePop .zn-case{display:flex;align-items:center;gap:.4rem;margin:.35rem 0;cursor:pointer;}
#zonePop .zn-inter{display:flex;align-items:center;gap:.5rem;width:100%;margin:.35rem 0 .1rem;padding:.15rem 0;border:0;background:transparent;color:var(--ink);font:inherit;cursor:pointer;text-align:left;}
#zonePop .zn-inter .zn-bascule{flex:0 0 30px;height:16px;border-radius:9px;background:rgba(215,226,223,.25);position:relative;}
#zonePop .zn-inter .zn-bascule::after{content:"";position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:#fff;transition:left .15s;}
#zonePop .zn-inter[aria-checked="true"] .zn-bascule{background:rgba(214,178,94,.75);}
#zonePop .zn-inter[aria-checked="true"] .zn-bascule::after{left:16px;}
#zonePop .zn-gris, #zoneConf .zn-gris{color:rgba(215,226,223,.55);font-size:.7rem;}
#zonePop .zn-aide{margin-top:.4rem;line-height:1.35;}
#zonePop .zn-info{display:flex;gap:.35rem;align-items:flex-start;margin:.4rem 0 .1rem;padding:.35rem .45rem;border-radius:.4rem;background:rgba(127,176,216,.08);color:rgba(215,226,223,.75);font-size:.7rem;line-height:1.35;}
#zonePop .zn-info svg{width:13px;height:13px;flex:0 0 auto;margin-top:1px;color:var(--bleu-scene);}
#zonePop .zn-boutons, #zoneConf .zn-boutons{display:flex;gap:.35rem;justify-content:flex-end;margin-top:.5rem;flex-wrap:wrap;}
#zonePop .zn-b2, #zoneConf .zn-b2{display:inline-flex;align-items:center;gap:.25rem;padding:.28rem .6rem;border-radius:.4rem;border:1px solid rgba(215,226,223,.25);background:transparent;color:var(--ink);font:inherit;font-size:.74rem;cursor:pointer;}
#zonePop .zn-b2 svg, #zoneConf .zn-b2 svg{width:13px;height:13px;}
#zonePop .zn-b2.zn-danger, #zoneConf .zn-b2.zn-danger{border-color:rgba(224,122,122,.7);color:var(--rouge);}
#zonePop .zn-b1{padding:.28rem .7rem;border-radius:.4rem;border:1px solid rgba(53,196,165,.7);background:rgba(53,196,165,.18);color:var(--verdigris);font:inherit;font-weight:700;font-size:.74rem;cursor:pointer;}
#zonePop:not(.zn-feuille) .zn-b1{display:none;}
#scenePartage #zoneConf.zn-conf{position:absolute;z-index:8;left:50%;top:50%;transform:translate(-50%,-50%);width:360px;max-width:calc(100% - 24px);background:#0a1518;
  border:1px solid rgba(224,122,122,.55);border-radius:.7rem;padding:.8rem .9rem;font-size:.82rem;color:var(--ink);box-shadow:0 14px 40px rgba(0,0,0,.7);line-height:1.45;}
#zoneConf .zn-conf-t{display:flex;align-items:center;gap:.4rem;font-weight:700;color:var(--rouge);margin-bottom:.4rem;}
#zoneConf .zn-conf-t svg{width:16px;height:16px;}
@media (pointer:coarse){
  #zonePop .zn-champ{padding:.45rem .5rem;}
  #zonePop .zn-b2, #zonePop .zn-b1, #zoneConf .zn-b2{padding:.5rem .85rem;font-size:.85rem;}
  #zoneChoix .zn-formes{grid-template-columns:repeat(4,64px);}
}

/* ---- LES JETONS (07/10/2026, js/salle-pions.js ; maquettes maquette-pions.html et -v2.html) ---------------------------------------
   Qualifié par #scenePartage / #pionPop / #bo-jeton : jamais une classe seule. */
#scenePartage #scenePions{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4;}
#scenePartage .barre-outils #bo-jeton .pn-av{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#2b3a44 center/cover no-repeat;font-weight:800;font-size:.8rem;color:#efe6d2;}
#scenePartage .barre-outils #bo-jeton{cursor:grab;}
#scenePartage #pionPop.pn-pop{width:272px;padding:.5rem .6rem .6rem;font-size:.78rem;}
#scenePartage #pionPop.pn-pop.pn-feuille{left:0;right:0;bottom:0;top:auto;width:auto;border-radius:.8rem .8rem 0 0;}
#pionPop .pn-t{display:flex;align-items:center;gap:.35rem;font-weight:700;margin-bottom:.35rem;}
#pionPop .pn-t svg{width:15px;height:15px;flex:0 0 auto;}
#pionPop .pn-t .pn-titre{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#pionPop .pn-t .pn-x{width:26px;height:26px;padding:0;display:grid;place-items:center;border:0;border-radius:.35rem;background:transparent;color:rgba(215,226,223,.7);cursor:pointer;}
#pionPop .pn-t .pn-x svg{width:15px;height:15px;}
#pionPop .pn-sect{font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;color:rgba(215,226,223,.5);margin:.55rem 0 .2rem;border-top:1px solid rgba(215,226,223,.15);padding-top:.4rem;}
#pionPop .pn-sect.pn-sect1{border-top:0;padding-top:0;margin-top:0;}
#pionPop .pn-l{display:flex;align-items:center;gap:.4rem;margin:.3rem 0;flex-wrap:wrap;color:rgba(215,226,223,.8);}
#pionPop .pn-l .pn-n{width:4rem;}
#pionPop .pn-btn{width:28px;height:26px;padding:0;display:inline-grid;place-items:center;border-radius:.4rem;border:1px solid rgba(215,226,223,.25);background:transparent;color:var(--ink);cursor:pointer;}
#pionPop .pn-btn:hover{background:rgba(255,255,255,.07);}
#pionPop .pn-btn svg{width:14px;height:14px;}
#pionPop .pn-curseur{flex:1;min-width:90px;accent-color:var(--bleu-scene);}
#pionPop .pn-gris{color:rgba(215,226,223,.55);font-size:.7rem;}
#pionPop .pn-aide{margin-top:.4rem;line-height:1.35;}
#pionPop .pn-inter{display:flex;align-items:center;gap:.5rem;width:100%;margin:.2rem 0;padding:.15rem 0;border:0;background:transparent;color:var(--ink);font:inherit;cursor:pointer;text-align:left;}
#pionPop .pn-inter .pn-bascule{flex:0 0 30px;height:16px;border-radius:9px;background:rgba(215,226,223,.25);position:relative;}
#pionPop .pn-inter .pn-bascule::after{content:"";position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:#fff;transition:left .15s;}
#pionPop .pn-inter[aria-checked="true"] .pn-bascule{background:rgba(53,196,165,.7);}
#pionPop .pn-inter[aria-checked="true"] .pn-bascule::after{left:16px;}
#pionPop .pn-boutons{display:flex;gap:.35rem;justify-content:flex-end;margin-top:.5rem;flex-wrap:wrap;}
#pionPop .pn-b2{display:inline-flex;align-items:center;gap:.25rem;padding:.28rem .6rem;border-radius:.4rem;border:1px solid rgba(215,226,223,.25);background:transparent;color:var(--ink);font:inherit;font-size:.74rem;cursor:pointer;}
#pionPop .pn-b2 svg{width:13px;height:13px;}
#pionPop .pn-b2.pn-danger{border-color:rgba(224,122,122,.7);color:var(--rouge);}
#pionPop .pn-b1{padding:.28rem .7rem;border-radius:.4rem;border:1px solid rgba(53,196,165,.7);background:rgba(53,196,165,.18);color:var(--verdigris);font:inherit;font-weight:700;font-size:.74rem;cursor:pointer;}
#pionPop:not(.pn-feuille) .pn-b1{display:none;}
@media (pointer:coarse){
  #pionPop .pn-btn{width:40px;height:36px;}
  #pionPop .pn-b2, #pionPop .pn-b1{padding:.5rem .85rem;font-size:.85rem;}
}

/* ---- LES JETONS — LOT B : le MJ (07/10/2026, js/salle-pions.js) -------------------------------------------------------------------- */
#scenePartage.pn-arme #sceneImg{cursor:crosshair !important;}
#pionPop .pn-seg{display:inline-flex;border:1px solid rgba(215,226,223,.25);border-radius:.4rem;overflow:hidden;}
#pionPop .pn-seg button{padding:.22rem .5rem;border:0;background:transparent;color:rgba(215,226,223,.75);font:inherit;font-size:.72rem;cursor:pointer;}
#pionPop .pn-seg button[aria-pressed="true"]{background:rgba(214,178,94,.2);color:var(--old-gold);font-weight:700;}
#pionPop .pn-cache{display:block;margin:-.1rem 0 .2rem 2.6rem;}
#scenePartage #pionChoix.pn-choix{width:290px;padding:.5rem .6rem .6rem;font-size:.78rem;border-color:rgba(214,178,94,.45);max-height:70vh;overflow:auto;}
#scenePartage #pionChoix.pn-choix.pn-feuille{left:0;right:0;bottom:0;top:auto;width:auto;border-radius:.8rem .8rem 0 0;}
#pionChoix .pn-t{display:flex;align-items:center;gap:.35rem;font-weight:700;color:var(--old-gold);margin-bottom:.3rem;}
#pionChoix .pn-t svg{width:15px;height:15px;}
#pionChoix .pn-t .pn-titre{flex:1;}
#pionChoix .pn-t .pn-x{width:26px;height:26px;padding:0;display:grid;place-items:center;border:0;border-radius:.35rem;background:transparent;color:rgba(215,226,223,.7);cursor:pointer;}
#pionChoix .pn-t .pn-x svg{width:15px;height:15px;}
#pionChoix .pn-gris{color:rgba(215,226,223,.55);font-size:.7rem;line-height:1.35;}
#pionChoix .pn-sect{font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;color:rgba(215,226,223,.5);margin:.55rem 0 .3rem;border-top:1px solid rgba(215,226,223,.15);padding-top:.4rem;}
#pionChoix .pn-puces{display:flex;flex-wrap:wrap;gap:.3rem;}
#pionChoix .pn-puce{display:inline-flex;align-items:center;gap:.35rem;max-width:100%;padding:.2rem .5rem .2rem .2rem;border-radius:999px;border:1px solid rgba(215,226,223,.22);background:rgba(255,255,255,.04);color:var(--ink);font:inherit;font-size:.74rem;cursor:grab;}
#pionChoix .pn-puce:hover{background:rgba(255,255,255,.08);}
#pionChoix .pn-puce .pn-pav{flex:0 0 22px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#2b3a44 center/cover no-repeat;box-shadow:0 0 0 2px var(--c);font-weight:800;font-size:.7rem;color:#efe6d2;}
#pionChoix .pn-puce .pn-pnom{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:9rem;}
#pionChoix .pn-l{display:flex;align-items:center;gap:.4rem;}
#pionChoix .pn-champ{flex:1;min-width:0;padding:.25rem .4rem;border-radius:.35rem;border:1px solid rgba(215,226,223,.25);background:rgba(255,255,255,.04);color:var(--ink);font:inherit;}
@media (pointer:coarse){ #pionChoix .pn-puce{padding:.4rem .7rem .4rem .3rem;} #pionPop .pn-seg button{padding:.45rem .6rem;} }

/* ---- Jetons : l'historique (07/10/2026) ---- */
#pionPop .pn-btn.pn-large{width:auto;padding:0 .5rem;gap:.25rem;display:inline-flex;align-items:center;font:inherit;font-size:.72rem;}
#pionPop .pn-btn:disabled{opacity:.35;cursor:default;}

/* ---- LA SÉLECTION MULTIPLE — lot C (07/10/2026, js/salle-selection.js ; maquette maquette-pions-v2.html §4) ----------------------
   Qualifié par #scenePartage / #selPop / #selRect : jamais une classe seule. */
#scenePartage #selRect{position:absolute;z-index:6;pointer-events:none;border:1.5px dashed #7fb0d8;background:rgba(127,176,216,.08);border-radius:2px;}
#scenePartage.mode-selection #sceneImg{cursor:crosshair !important;}
#scenePartage #selPop.sl-pop{width:262px;padding:.5rem .6rem .6rem;font-size:.78rem;border-color:rgba(127,176,216,.55);}
#scenePartage #selPop.sl-pop.sl-feuille{left:0;right:0;bottom:0;top:auto;width:auto;border-radius:.8rem .8rem 0 0;}
#selPop .sl-t{display:flex;align-items:center;gap:.35rem;font-weight:700;margin-bottom:.35rem;color:#7fb0d8;}
#selPop .sl-t svg{width:15px;height:15px;flex:0 0 auto;}
#selPop .sl-titre{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#selPop .sl-x{width:26px;height:26px;padding:0;display:grid;place-items:center;border:0;border-radius:.35rem;background:transparent;color:rgba(215,226,223,.7);cursor:pointer;}
#selPop .sl-x svg{width:15px;height:15px;}
#selPop .sl-gris{color:rgba(215,226,223,.55);font-size:.7rem;}
#selPop .sl-noms{margin-bottom:.35rem;line-height:1.35;overflow-wrap:anywhere;}
#selPop .sl-l{display:flex;align-items:center;gap:.4rem;margin:.35rem 0;flex-wrap:wrap;color:rgba(215,226,223,.8);}
#selPop .sl-n{width:3.6rem;}
#selPop .sl-seg{display:inline-flex;border:1px solid rgba(215,226,223,.25);border-radius:.4rem;overflow:hidden;}
#selPop .sl-seg button{padding:.22rem .5rem;border:0;background:transparent;color:rgba(215,226,223,.75);font:inherit;font-size:.72rem;cursor:pointer;}
#selPop .sl-seg button[aria-pressed="true"]{background:rgba(214,178,94,.2);color:var(--old-gold);font-weight:700;}
#selPop .sl-b2{display:inline-flex;align-items:center;gap:.25rem;padding:.28rem .6rem;border-radius:.4rem;border:1px solid rgba(215,226,223,.25);background:transparent;color:var(--ink);font:inherit;font-size:.74rem;cursor:pointer;}
#selPop .sl-b2 svg{width:13px;height:13px;}
#selPop .sl-b2.sl-or{border-color:rgba(214,178,94,.7);color:var(--old-gold);}
#selPop .sl-b2.sl-danger{border-color:rgba(224,122,122,.7);color:var(--rouge);}
#selPop .sl-boutons{display:flex;gap:.35rem;justify-content:flex-end;margin-top:.5rem;flex-wrap:wrap;}
#selPop .sl-conf{margin-top:.5rem;color:var(--rouge);font-weight:700;}
#selPop .sl-aide{margin-top:.45rem;line-height:1.35;}
@media (pointer:coarse){
  #selPop .sl-b2{padding:.5rem .85rem;font-size:.85rem;}
  #selPop .sl-seg button{padding:.45rem .6rem;}
  #selPop .sl-x{width:38px;height:38px;}
}

/* ---- Un PNJ déjà sur la carte (07/10/2026, js/salle-pions.js, pionDemanderDoublon) ---- */
#scenePartage #pionDouble.pn-double{left:50%;top:40%;transform:translate(-50%,-50%);width:min(330px,calc(100% - 24px));z-index:8;padding:.6rem .7rem;font-size:.8rem;border-color:rgba(214,178,94,.6);}
#pionDouble .pn-dt{display:flex;align-items:center;gap:.4rem;font-weight:700;color:var(--old-gold);margin-bottom:.3rem;}
#pionDouble .pn-dt svg{width:15px;height:15px;flex:0 0 auto;}
#pionDouble .pn-gris{color:rgba(215,226,223,.6);font-size:.72rem;}
#pionDouble .pn-boutons{display:flex;gap:.35rem;justify-content:flex-end;margin-top:.6rem;flex-wrap:wrap;}
#pionDouble .pn-b2{display:inline-flex;align-items:center;gap:.25rem;padding:.3rem .6rem;border-radius:.4rem;border:1px solid rgba(215,226,223,.25);background:transparent;color:var(--ink);font:inherit;font-size:.74rem;cursor:pointer;}
#pionDouble .pn-b2 svg{width:13px;height:13px;}
#pionDouble .pn-b2.pn-or{border-color:rgba(214,178,94,.7);color:var(--old-gold);font-weight:700;}
@media (pointer:coarse){ #pionDouble .pn-b2{padding:.55rem .85rem;font-size:.85rem;} }

/* ---- LES PLANS — MJ (07/10/2026, js/salle-selection.js ; maquette maquette-plans.html) : juste au-dessus du zoom, même largeur ---- */
#scenePartage #scenePlans.pl-barre{right:16px;z-index:6;display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.35rem .25rem;border-radius:.7rem;
  background:rgba(6,14,16,.92);border:1px solid rgba(214,178,94,.55);box-shadow:0 8px 24px rgba(0,0,0,.55);box-sizing:border-box;}
#scenePlans .pl-etq{font-size:.5rem;font-weight:800;letter-spacing:.06em;color:var(--old-gold);}
#scenePlans .pl-bt{width:100%;max-width:38px;padding:.2rem 0 .15rem;display:flex;flex-direction:column;align-items:center;gap:1px;border-radius:.4rem;border:1px solid transparent;background:transparent;color:rgba(215,226,223,.8);cursor:pointer;font:inherit;}
#scenePlans .pl-bt:hover{background:rgba(255,255,255,.07);}
#scenePlans .pl-bt svg{width:16px;height:16px;}
#scenePlans .pl-bt span{font-size:.5rem;font-weight:700;}
#scenePlans .pl-bt[aria-pressed="true"]{background:rgba(214,178,94,.2);border-color:rgba(214,178,94,.7);color:var(--old-gold);}
#scenePlans .pl-tous{width:100%;border:0;border-top:1px solid rgba(215,226,223,.15);padding:.2rem 0 0;margin-top:.1rem;background:transparent;font:inherit;font-size:.55rem;color:rgba(215,226,223,.6);cursor:pointer;}
#scenePlans .pl-tous[aria-pressed="true"]{color:var(--verdigris);font-weight:800;}
#scenePlans .pl-tous:disabled{opacity:.35;cursor:default;}
#scenePlans.pl-range{border-color:rgba(127,176,216,.6);}
@media (pointer:coarse){ #scenePlans .pl-bt{padding:.35rem 0;} #scenePlans .pl-tous{padding:.35rem 0 .1rem;} }
/* l'icône « Poser un jeton » du MJ : le rond avec un bonhomme + un petit « + » doré */
#scenePartage .barre-outils #bo-pnj{position:relative;}
#scenePartage .barre-outils #bo-pnj .pn-plus{position:absolute;right:3px;bottom:3px;width:11px;height:11px;border-radius:50%;background:var(--old-gold);color:#02070a;display:grid;place-items:center;font-size:10px;font-weight:900;line-height:1;pointer-events:none;}

/* ---- LA RÉSERVE « OBJETS » ET LES JETONS D'OBJET (07/10/2026, js/salle-objets.js, js/salle-pions.js ; maquette maquette-objets.html) ----
   Qualifié par #catGrille / #pionPop / #objetFen : jamais une classe seule. */
#catGrille.ob-mode{display:block;}
#catGrille.ob-mode .ob-barre{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.5rem;}
#catGrille.ob-mode .ob-aide{font-size:.7rem;color:rgba(215,226,223,.55);}
/* La ligne de création du Coffre, comme celle des Cartes / Images / Indices (lien + nom + « + », Déposer, Nouveau dossier). */
#catGrille.ob-mode .ob-creer{display:flex;gap:.4rem;align-items:center;margin-bottom:.3rem;}
#catGrille.ob-mode .ob-creer input{font:inherit;padding:.45rem .6rem;border-radius:.4rem;border:1px solid rgba(53,196,165,.35);background:#0d1619;color:var(--ink);min-width:0;}
#catGrille.ob-mode .ob-creer #obUrl{flex:1;}
#catGrille.ob-mode .ob-creer #obNomNouv{width:6rem;flex:0 0 auto;padding:.45rem .4rem;}
#catGrille.ob-mode .ob-creer .ob-ic2{flex:0 0 auto;display:inline-grid;place-items:center;width:34px;height:34px;border-radius:.4rem;border:1px solid rgba(53,196,165,.55);background:rgba(53,196,165,.12);color:var(--verdigris);cursor:pointer;padding:0;}
#catGrille.ob-mode .ob-creer .ob-ic2.sec{border-color:rgba(215,226,223,.3);background:transparent;color:var(--ink);}
#catGrille.ob-mode .ob-creer .ob-ic2 svg{width:16px;height:16px;}
#catGrille.ob-mode .ob-aide{display:block;margin:0 0 .5rem;}
#catGrille.ob-mode .ob-dossier .ob-ic{width:22px;height:22px;padding:0;display:inline-grid;place-items:center;border-radius:.3rem;border:0;background:transparent;color:rgba(215,226,223,.7);cursor:pointer;margin-left:.15rem;}
#catGrille.ob-mode .ob-dossier .ob-ic:hover{background:rgba(215,226,223,.12);color:var(--ink);}
#catGrille.ob-mode .ob-dossier .ob-ic svg{width:13px;height:13px;}
#catGrille.ob-mode .ob-dossier .ob-ic:first-of-type{margin-left:auto;}
#catGrille.ob-mode .ob-vide.ob-vide-dos{font-size:.72rem;padding:.2rem .4rem .5rem;}
@media (max-width:600px){ #catGrille.ob-mode .ob-creer #obNomNouv{width:4.2rem;} #catGrille.ob-mode .ob-creer{gap:.3rem;} }
#catGrille.ob-mode .ob-b, #objetFen .ob-b, #objetConf .ob-b{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .65rem;border-radius:.4rem;border:1px solid rgba(53,196,165,.55);background:rgba(53,196,165,.1);color:var(--verdigris);font:inherit;font-size:.76rem;cursor:pointer;}
#catGrille.ob-mode .ob-b svg{width:14px;height:14px;}
#catGrille.ob-mode .ob-vide{font-size:.78rem;color:rgba(215,226,223,.6);padding:.6rem 0;}
#catGrille.ob-mode .ob-dossier{display:flex;align-items:center;gap:.35rem;font-size:.72rem;color:rgba(215,226,223,.65);margin:.6rem 0 .3rem;cursor:pointer;user-select:none;}
#catGrille.ob-mode .ob-dossier svg{width:14px;height:14px;}
#catGrille.ob-mode .ob-dossier .ob-n{font-size:.62rem;padding:0 .35rem;border-radius:.6rem;background:rgba(215,226,223,.12);}
#catGrille.ob-mode .ob-vigs{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.45rem;}
#catGrille.ob-mode .ob-vig{position:relative;aspect-ratio:16/10;border-radius:.45rem;overflow:hidden;border:1px solid rgba(215,226,223,.18);cursor:grab;
  background:repeating-conic-gradient(#1b2427 0 25%,#141c1e 0 50%) 0/14px 14px;}
#catGrille.ob-mode .ob-vig img{position:absolute;inset:8% 10% 30%;width:80%;height:62%;object-fit:contain;pointer-events:none;}
#catGrille.ob-mode .ob-vig .ob-taille{position:absolute;top:4px;right:4px;font-size:.6rem;font-weight:800;padding:.05rem .3rem;border-radius:.3rem;background:rgba(214,178,94,.25);color:var(--old-gold);}
#catGrille.ob-mode .ob-vig .ob-bas{position:absolute;left:0;right:0;bottom:0;padding:.25rem .35rem;background:linear-gradient(transparent,rgba(0,0,0,.85));display:flex;align-items:center;gap:.2rem;font-size:.7rem;}
#catGrille.ob-mode .ob-vig .ob-bas b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#catGrille.ob-mode .ob-vig .ob-ic{width:22px;height:22px;padding:0;display:grid;place-items:center;border-radius:.3rem;border:0;background:rgba(0,0,0,.45);color:var(--ink);cursor:pointer;}
#catGrille.ob-mode .ob-vig .ob-ic svg{width:13px;height:13px;}
@media (pointer:coarse){ #catGrille.ob-mode .ob-vig .ob-ic{width:32px;height:32px;} }
#objetFen.ob-fen, #objetConf.ob-fen{position:fixed;inset:0;z-index:120;display:grid;place-items:center;background:rgba(0,0,0,.55);}
#objetFen .ob-boite, #objetConf .ob-boite{width:min(340px,calc(100vw - 24px));padding:.8rem .9rem;border-radius:.6rem;background:#0a1518;border:1px solid rgba(214,178,94,.55);color:var(--ink);font-size:.82rem;}
#objetFen .ob-ft, #objetConf .ob-ft{display:flex;align-items:center;gap:.4rem;font-weight:700;color:var(--old-gold);margin-bottom:.5rem;}
#objetFen .ob-ft svg, #objetConf .ob-ft svg{width:16px;height:16px;}
#objetFen label{display:flex;flex-direction:column;gap:.2rem;margin:.35rem 0;font-size:.74rem;color:rgba(215,226,223,.7);}
#objetFen input{padding:.35rem .5rem;border-radius:.35rem;border:1px solid rgba(215,226,223,.3);background:#02070a;color:var(--ink);font:inherit;}
#objetFen .ob-boutons, #objetConf .ob-boutons{display:flex;justify-content:flex-end;gap:.4rem;margin-top:.7rem;}
#objetFen .ob-b.ob-ok{font-weight:700;}
#objetConf .ob-b.ob-danger{border-color:rgba(224,122,122,.7);color:var(--rouge);background:transparent;}
#objetConf .ob-txt{line-height:1.45;}
#pionPop .pn-nb{width:3.2rem;padding:.12rem .25rem;border-radius:.3rem;border:1px solid rgba(215,226,223,.3);background:#02070a;color:var(--ink);font:inherit;text-align:center;}
#pionPop .pn-btn[aria-pressed="true"]{border-color:rgba(214,178,94,.7);color:var(--old-gold);}
#pionPop .pn-puces-preter{display:flex;flex-wrap:wrap;gap:.3rem;margin:.15rem 0 .25rem;}
#pionPop .pn-prete{display:inline-flex;align-items:center;gap:.3rem;padding:.15rem .5rem;border-radius:.8rem;border:1px solid rgba(215,226,223,.3);background:transparent;color:var(--ink);font:inherit;font-size:.72rem;cursor:pointer;}
#pionPop .pn-prete .pn-pt{width:8px;height:8px;border-radius:50%;}
#pionPop .pn-prete.on{border-color:var(--verdigris);background:rgba(53,196,165,.16);color:var(--verdigris);font-weight:700;}
@media (pointer:coarse){ #pionPop .pn-prete{padding:.4rem .7rem;} }