/*deplacement des div*/
:root { --log-panel-w: 0px; }

/* ── Inputs globaux thémés ─────────────────────────── */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="color"]):not([type="image"]):not(.cmn-toggle),
textarea,
select {
    background-color: var(--bg-darkest);
    border: 1px solid var(--border-medium);
    border-radius: 3px;
    color: var(--text-primary);
    transition: border-color 0.15s, background-color 0.15s;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="color"]):not([type="image"]):not(.cmn-toggle):focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--interactive-secondary);
    background-color: var(--bg-darker);
}

.movedroite{
cursor: move;
}
.ecran2,.invbox,.conteneur_sac,.conteneur_inv12,.conteneur_sac_autre,.lookatwho,.lookatmeuble,.conteneur_inv2,.conteneur_inv3{
position: absolute;
box-shadow: inset 0px 0px 10px 0px #070707, 0px 5px 5px 0px #070707;
/*z-index: 500;*/
background: none repeat scroll 0 0 var(--overlay-black-darker);
border:1px solid #303030;
}
#personnage{
position: absolute;
background: none repeat scroll 0 0 var(--overlay-black-darkest);
}
/*shadow*/
#designperso{
box-shadow: 0px 10px 20px 0px #070707;
/*transition-duration: 0.8s;*/
}
/*
perso
*/
#designperso{
position: absolute;
width:308px;
height:168px;
background: var(--t-screen);
border: 1px solid var(--frame-border);
border-radius: 3px;
left:27px;
top:20px;

}
#persodeplace{
position: absolute;
top: 0px;
width: 100%;
height: 10px;
cursor: move;

}
#personnage{
color: var(--t-text2);
cursor: default;
font-family: "Titillium Web","Trebuchet MS","Helvetica","Arial","Verdana","sans-serif";
font-variant: small-caps;
height: 130px;
left: 9px;
top: 10px;
width: 290px;
}
.showinfo{
height:160px;
font-variant: normal;
}
#astp, #gainpvpf, #pertefaimsoif, #expeinfo{
background-color: #333333;
border-top: 1px solid #303030;
bottom: 1px;
box-shadow: 0 5px 20px 0 #070707 inset;
font-size: 90%;
position: absolute;
text-align: center;
width: 100%;
}
#astp span{
display: inline-block;
margin-left: 2px;
margin-right: 2px;
}
#titre_perso, #pognon, #zone_avatar, #alimentation, #zone_info_perso1, #sante, #forme,#pseudoig{
position: absolute;
}
#pseudoig{
left: 75px;
font-size: 150%;
font-variant: small-caps;
color: var(--t-player);
font-style: bold;
top:8px;

}
#titre_perso{
top: 30px;
left: 85px;
font-size: 96%;
}
#pognon{
right: 8px;
bottom:20px;
}
#zone_avatar{
width:55px;
height:55px;
overflow: hidden; 
border-radius: 2px;
left: 10px;
top:10px;
}
#alimentation{
left :8px;
bottom: 20px;
font-size: 80%;
cursor: pointer;
}
#zone_info_level{
position: absolute;
top: 70px;
left: 25px;
color:var(--text-primary);
}
#info_level:hover{
cursor: pointer;
}
#info_xp{
position: absolute;
left: 90px;
top: 15px;
}
#zone_info_perso1{
display: inline-block;
left:75px;
top :45px;
width:215px;
height:38px;
font-size: 92%;
color:var(--text-secondary);
cursor: pointer;
}
#forme_poz{
position: absolute;
display: block;
top: 20px;
width: 220px;
}
#sante_poz{
position: absolute;
display: block;
width: 220px;
}
#forme_poz div,#sante_poz div{
display: inline;
margin-left: 4px;
}
.barrevide{
display:inline-block;
width:12px;
height:4px;
border:1px solid #333;
background-color:var(--t-danger);
line-height: 0px;
}
.barrepleine{
display:inline-block;
background-color:var(--t-player);
line-height: 0px;
}
/* Couleurs spécifiques widget perso : santé vs forme */
#santecontrol .barrepleine,
#grabpv .barrepleine{
background-color:var(--widget-player-health);
}
#formecontrol .barrepleine,
#grabpf .barrepleine{
background-color:var(--widget-player-energy);
}
.barre{
display:inline-block;
width:12px;
height:4px;
border:1px solid #333;
line-height: 0px;
}

/* === Affichage PV/PF : style barres (alternatif aux petits carrés) === */
.pbar-row { display:flex; align-items:center; gap:4px; }
.pbar-track { width:140px; flex:none; height:4px; background:color-mix(in srgb, var(--t-danger) 35%, var(--t-screen)); border:1px solid var(--t-border); border-radius:2px; overflow:hidden; }
.pbar-fill { height:100%; border-radius:3px; transition:width 0.45s ease; }
.pbar-fill.pv { background:var(--widget-player-health, #4c9); }
.pbar-fill.fo { background:var(--widget-player-energy, #c90); }
.pbar-val { color:inherit; white-space:nowrap; }
.pbar-sep { opacity:0.4; }

/* Mode barres : override du layout de #zone_info_perso1 */
#zone_info_perso1[data-pvpf="bar"] {
    height:38px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:2px 4px;
    gap:2px;
    box-sizing:border-box;
}
#zone_info_perso1[data-pvpf="bar"] #sante_poz,
#zone_info_perso1[data-pvpf="bar"] #forme_poz {
    position:static;
    display:block;
    width:auto;
}
/* #sante_poz div { display:inline } s'applique à tous les descendants :
   on réinitialise en block, puis on surcharge .pbar-row en flex */
#zone_info_perso1[data-pvpf="bar"] #sante_poz div,
#zone_info_perso1[data-pvpf="bar"] #forme_poz div {
    display:block;
    margin-left:0;
}
#zone_info_perso1[data-pvpf="bar"] #sante_poz .pbar-row,
#zone_info_perso1[data-pvpf="bar"] #forme_poz .pbar-row {
    display:flex;
    align-items:center;
}
#action, .infoperso{
position: absolute;
width:100%;
bottom:1px;
background-color: #333;
border-top:1px solid #303030;
box-shadow: inset 0px 5px 20px 0px #070707;
text-align: center;
font-size: 90%;
}

/*info afk en frontperso*/
#afkvisu{
position: absolute;
top: 20px;
right: 15px;
}
/*
Zone TCHAT
*/
/* === Zone TCHAT === */
#zone_tchat {
    padding: 0;
    z-index: 600;
    background: var(--t-screen);
    border: 1px solid var(--frame-border);
    border-radius: 6px;
    box-shadow: none;
    overflow: hidden;
}
#zone_tchat.tchat-docked.tchat-open,
#zone_tchat.tchat-detached {
    box-shadow: 0 8px 24px rgba(0,0,0,0.75), inset 0 1px 0 rgba(100,98,90,0.15);
}
/* DOCKED (par défaut) — en haut à gauche, position fixed */
#zone_tchat.tchat-docked {
    position: fixed;
    top: 70px;
    left: 28px;
    width: clamp(260px, 26vw, 380px);
    height: 150px;
    border-top: none;
    transform: translateY(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#zone_tchat.tchat-docked.tchat-open {
    transform: translateY(0);
    border-top: 1px solid var(--border-dark);
}
/* DETACHED — position fixed, draggable (comme log/online) */
#zone_tchat.tchat-detached {
    position: fixed;
    top: 320px;
    left: 28px;
    width: 310px;
    height: 300px;
    border-top: 1px solid var(--border-dark);
    transition: height 0.2s ease;
}
#zone_tchat.tchat-detached.tchat-minimized {
    height: 26px !important;
}
#zone_tchat.tchat-detached.tchat-minimized #zone_tchat_hidden {
    display: none;
}
#zone_tchat.tchat-detached.tchat-minimized .tchat-input-bar {
    display: none;
}
body.nav_collapsed #zone_tchat.tchat-docked {
    top: 0;
}

#tchat-toolbar {
    display: flex;
    align-items: center;
    height: 26px;
    padding: 0 6px;
    gap: 4px;
    background: var(--t-screen);
    border-bottom: 1px solid var(--border-dark);
    cursor: default;
    flex-shrink: 0;
    user-select: none;
}
#tchat-toolbar:active { cursor: default; }
#zone_tchat.tchat-detached #tchat-toolbar { cursor: grab; }
#zone_tchat.tchat-detached #tchat-toolbar:active { cursor: grabbing; }

#tchat-drag-handle {
    cursor: grab;
    color: rgba(200, 196, 184, 0.3);
    font-size: 1em;
    line-height: 1;
    flex-shrink: 0;
    display: none;
}
#tchat-drag-handle:active { cursor: grabbing; }
#zone_tchat.tchat-detached #tchat-drag-handle {
    display: block;
}

.tchat-title {
    flex: 1;
    font-size: 0.78em;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--t-accent1) 55%, transparent);
    pointer-events: none;
}

.tchat-input-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 32px;
    background: var(--t-screen);
    border-top: 1px solid var(--border-dark);
    display: flex;
    align-items: center;
    padding: 0 8px;
}
.tchat-input-bar form {
    width: 100%;
    margin: 0;
    padding: 0;
}
#message {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: rgba(212, 200, 160, 0.85);
    font-size: 0.9em;
    font-family: inherit;
    padding: 2px 0;
    box-sizing: border-box;
    position: static;
    height: auto;
    margin: 0;
    left: auto;
    bottom: auto;
    max-width: none;
    box-shadow: none;
    border-image: none;
}
#zone_tchat_hidden {
    position: absolute;
    top: 26px;
    left: 0;
    right: 0;
    bottom: 32px;
    overflow: hidden;
}
#room{
    position: absolute;
    width: 100%;
    border-radius: 3px;
    bottom: 0px;
    color: var(--t-player);
}
#chan{
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 3px;
    word-wrap: break-word;
    position: relative;
    bottom: 0px;
    overflow: hidden;
    padding: 5px;
    box-sizing: border-box;
}
.tchatmess{
    display: block;
}
.miaou{
    left: 1px; 
    bottom: 0px;
    word-wrap: break-word;
    margin: 2px 0 0 0;
font-size: 100%;
line-height: 150%;
}
/* Heure dans les messages — couleur atténuée, ref themes.html .lmsg b */
.miaou > b {
    color: var(--t-text3);
    margin-right: 4px;
    font-weight: normal;
}

.cri > b {
opacity: 0.8;
font-size: 98%;
}
.cri {
opacity: 0.8;
font-size: 102%;
}

.chuchotement > b{
opacity: 0.65;
font-size: 89%
}
.chuchotement {
color: #909090;
opacity: 0.9;
font-size: 93%;
}

.parle{
font-size: 96%;
opacity: 0.9;
}
.parle > b{
font-size: 96%;
opacity: 0.8;
}

.mj .couleur3 {
margin-left: 2px;
}

.mj {
padding: 5px 14px 9px 10px;
background: #ff00002e;
border: 1px solid #5a2424;
overflow: hidden;
margin: 6px;
}

.mj:before {
content: 'MJ :';
display: block;
font-weight: bold;
font-size: 47px;
font-style: italic;
color: #8461613b;
margin: 5px 0 0 0;
height: 0;
}

/* God log — styles par source */
.log-meteo  { border-left: 3px solid #90a8b8; padding-left: 5px; color: #90a8b8; }
.log-event  { border-left: 3px solid #9070c0; padding-left: 5px; color: #b090e0; }
.log-mj     { border-left: 3px solid #D2C556; padding-left: 5px; color: #D2C556; }
.log-admin  { border-left: 3px solid #2fb8c4; padding-left: 5px; color: #5fcdd6; }

/* === Effets d'impact sur la carte === */
@keyframes cyb-hit-target {
  0%   { box-shadow: inset 0 0 0    0   rgba(255,30,30,0); }
  18%  { box-shadow: inset 0 0 90px 30px rgba(255,30,30,0.65); }
  38%  { box-shadow: inset 0 0 40px 8px  rgba(255,30,30,0.20); }
  58%  { box-shadow: inset 0 0 80px 25px rgba(255,30,30,0.55); }
  78%  { box-shadow: inset 0 0 40px 8px  rgba(255,30,30,0.15); }
  100% { box-shadow: inset 0 0 40px 10px rgba(7,7,7,1); }
}
@keyframes cyb-hit-witness {
  0%   { box-shadow: inset 0 0 0    0   rgba(200,100,20,0); }
  30%  { box-shadow: inset 0 0 60px 15px rgba(200,100,20,0.38); }
  100% { box-shadow: inset 0 0 40px 10px rgba(7,7,7,1); }
}
@keyframes cyb-shake {
  0%, 100% { transform: translate(0,0); }
  20% { transform: translate(-4px, 2px); }
  40% { transform: translate( 4px,-2px); }
  60% { transform: translate(-3px, 3px); }
  80% { transform: translate( 3px,-1px); }
}
@keyframes cyb-shake-light {
  0%, 100% { transform: translate(0,0); }
  25% { transform: translate(-2px, 1px); }
  50% { transform: translate( 2px,-1px); }
  75% { transform: translate(-1px, 1px); }
}
@keyframes cyb-hit-attacker {
  0%   { box-shadow: inset 0 0 0    0   rgba(120,200,230,0); }
  35%  { box-shadow: inset 0 0 26px 5px rgba(120,200,230,0.16); }
  100% { box-shadow: inset 0 0 0    0   rgba(120,200,230,0); }
}
#grillemap.cyb-hit-target   { animation: cyb-hit-target   1.4s ease-out forwards; }
#grillemap.cyb-hit-witness  { animation: cyb-hit-witness  0.9s ease-out forwards; }
#grillemap.cyb-hit-attacker { animation: cyb-hit-attacker 0.35s ease-out; }
#mapp.cyb-shake       { animation: cyb-shake       0.45s ease-in-out; }
#mapp.cyb-shake-light { animation: cyb-shake-light 0.30s ease-in-out; }
/* === Fin Zone Tchat === */

/*

Zone DRoite IG

*/
#droite{
position: absolute;
left: 487px;
top: 40px;
}
/*Info lieux - batiment ..*/
/* ── Barre de statut tactique (header carte, façon design B) ──── */
#deplacecarte{
    cursor: move;
    height: 32px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    background: color-mix(in srgb, #000 22%, var(--bg-darker));
    border-bottom: 1px solid color-mix(in srgb, var(--interactive-secondary) 22%, transparent);
}
#informations{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    z-index: 499;
    pointer-events: none;
    overflow: hidden;
    white-space: nowrap;
    font-family: 'Courier New', Courier, monospace;
}
#map-status-left{
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
}
/* LED façon barre OS du communicateur */
#map-status-led{
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--interactive-primary);
    box-shadow: 0 0 6px var(--interactive-primary);
    animation: mapStatusLed 2.4s ease-in-out infinite;
}
@keyframes mapStatusLed { 0%,100%{opacity:1;} 50%{opacity:.35;} }
#informations_lieux{
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
#informations_lieux > div{
    display: inline;
    font-size: 0.78em;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--t-text2);
}
#informations_lieux > div + div::before{
    content: '· ';
    color: var(--t-text3);
}
/* Groupe droit : jauges Tens/AR + barres réseau */
#map-status-right{
    display: flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
}
#designcarte {
    position: absolute;
    box-sizing: border-box; /* la bordure 1px est incluse → écran (475) flush des 2 côtés */
    height: calc(var(--map-view-h, 475px) + 34px); /* 475 + 32 (top map) + 2 (bordures) = 509 */
    width: calc(var(--map-view-w, 475px) + 2px);   /* 475 + 2 (bordures) = 477 */
    background-color: var(--t-screen);
    background-image:
        radial-gradient(circle, color-mix(in srgb, var(--t-accent1) 7%, transparent) 1px, transparent 1px),
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 3px,
            rgba(0,0,0,0.10) 3px,
            rgba(0,0,0,0.10) 4px
        );
    background-size: 4px 4px, 100% 4px;
    /* Cadre unifié : même token que toutes les fenêtres principales */
    border: 1px solid var(--frame-border);
    box-shadow: 0 10px 40px rgba(0,0,0,0.9);
}
/* ── HUD fixe au toggle de la top-barre ────────────────────────
   resizeW() retire le padding-top:70 de #main_container quand la nav est
   masquée (body.nav_collapsed) → tout le board, dont le widget perso et la
   carte, remonte de 70px. On compense par un margin-top equivalent pour que
   ces fenetres restent ancrees visuellement (comme les fenetres detachees en
   position:fixed). margin-top (et non transform) : n'interfere pas avec
   l'animation d'apparition (cyb-reveal-settle) ni avec les coords de drag
   sauvegardees (.css('top') reste relatif au parent positionne). */
body.nav_collapsed #designperso,
body.nav_collapsed #droite {
    margin-top: 70px;
}
/* ══════════════════════════════════════════════════════════════
   HUD — FUTURISTIC FRAME SYSTEM
   Coins asymétriques, ticks de bord, extensions extérieures
   Chaque coin a des bras de longueurs différentes pour l'effet scan.
   TL = long-H / court-V  |  TR = court-H / long-V
   BL = court-H / long-V  |  BR = long-H / court-V
   ══════════════════════════════════════════════════════════════ */

/* DESIGNCARTE : coins retirés — un seul jeu de coins, porté par #mapp
   (l'écran), pour éviter les doublons avec le cadre et le header. */

/* ── DESIGNPERSO : coins moyens asymétriques + ticks ───────── */
#designperso::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background:
        /* TL — long-H 20px, court-V 9px */
        linear-gradient(var(--t-hud-c58), var(--t-hud-c58)) top left     / 20px 2px  no-repeat,
        linear-gradient(var(--t-hud-c58), var(--t-hud-c58)) top left     / 2px  9px  no-repeat,
        /* TR — court-H 9px, long-V 20px */
        linear-gradient(var(--t-hud-c58), var(--t-hud-c58)) top right    / 9px  2px  no-repeat,
        linear-gradient(var(--t-hud-c58), var(--t-hud-c58)) top right    / 2px  20px no-repeat,
        /* BL — court-H 9px, long-V 20px */
        linear-gradient(var(--t-hud-c58), var(--t-hud-c58)) bottom left  / 9px  2px  no-repeat,
        linear-gradient(var(--t-hud-c58), var(--t-hud-c58)) bottom left  / 2px  20px no-repeat,
        /* BR — long-H 20px, court-V 9px */
        linear-gradient(var(--t-hud-c58), var(--t-hud-c58)) bottom right / 20px 2px  no-repeat,
        linear-gradient(var(--t-hud-c58), var(--t-hud-c58)) bottom right / 2px  9px  no-repeat;
}

/* ── DESIGNPERSO : marques extérieures ─────────────────────── */
#designperso::after {
    content: '';
    position: absolute;
    inset: -8px;
    pointer-events: none;
    z-index: 2;
    background:
        linear-gradient(var(--t-hud-c50), var(--t-hud-c50)) top left     / 16px 1px  no-repeat,
        linear-gradient(var(--t-hud-c50), var(--t-hud-c50)) top left     / 1px  16px no-repeat,
        linear-gradient(var(--t-hud-c50), var(--t-hud-c50)) top right    / 16px 1px  no-repeat,
        linear-gradient(var(--t-hud-c50), var(--t-hud-c50)) top right    / 1px  16px no-repeat,
        linear-gradient(var(--t-hud-c50), var(--t-hud-c50)) bottom left  / 16px 1px  no-repeat,
        linear-gradient(var(--t-hud-c50), var(--t-hud-c50)) bottom left  / 1px  16px no-repeat,
        linear-gradient(var(--t-hud-c50), var(--t-hud-c50)) bottom right / 16px 1px  no-repeat,
        linear-gradient(var(--t-hud-c50), var(--t-hud-c50)) bottom right / 1px  16px no-repeat;
}

/* inner corner marks on floating panels — removed per design revision */

.mpouti {
    cursor: pointer;
}
/* Couleur d'action par outil (façon design B, teintes thémées douces) */
#outil_map .mpouti { --tool-c: var(--t-accent1); }
#deplacer { --tool-c: #3aa9a0; }   /* déplacer  (#029990) */
#Attaquer { --tool-c: #d2645a; }   /* attaquer  (#FF0000) */
#Soigner  { --tool-c: #a87ab0; }   /* soigner   (#A552AB) */
#Donner   { --tool-c: #6fc79a; }   /* donner    (#6FF5AE) */
#Analyser { --tool-c: #5a8ab0; }   /* analyser  (#5285AB) */
#Arreter  { --tool-c: #c2843f; }   /* arrêter   (#cc6633) */

/* Hover — bordure + halo dans la couleur d'action (design B) */
#outil_map .mpouti:hover,
#outil_perso .mpouti:hover {
    border-color: color-mix(in srgb, var(--tool-c, var(--t-accent1)) 55%, transparent) !important;
    box-shadow: 0 0 10px color-mix(in srgb, var(--tool-c, var(--t-accent1)) 24%, transparent);
}
/* Outil actif — bordure pleine + glow interne dans la couleur d'action */
#outil_map div[active="1"],
#outil_perso div[active="1"] {
    background-color: color-mix(in srgb, var(--tool-c, var(--t-accent1)) 9%, var(--bg-darkest)) !important;
    border-color: color-mix(in srgb, var(--tool-c, var(--t-accent1)) 75%, transparent) !important;
    box-shadow: inset 0 0 8px color-mix(in srgb, var(--tool-c, var(--t-accent1)) 22%, transparent) !important;
}
#outil_sac{
position: absolute;
top: 55px;
min-width:490px;
}
.conteneur_sac,.conteneur_inv12,.conteneur_inv2,.conteneur_inv3{
display: block;
line-height: 0px;
}
.sac6{
width: 170px;
height: 110px;
}
.sac4{
width: 227px;
height: 55px;
}
.sac2{
width: 116px;
height: 55px;
}
.sac3{
width: 171px;
height: 55px;
}
.sac10{
width: 282px;
height: 110px;
}
#outil_inventaire{
position: absolute;
}
#invpersonnage{
position: relative;
width: 100%;
height: 250px;
box-sizing: border-box;
/* Surcharge l'overlay noir pur de .invbox (rgba(0,0,0,.6) + #303030 + #070707)
   qui figeait le fond en noir hors thème — on suit l'écran thémé + bordure thémée. */
background: var(--t-screen);
border: 1px solid var(--frame-border);
box-shadow: inset 0 0 10px rgba(0,0,0,0.45);
}
#statisf{
display: none;
}
#statis{
display: none;
}
#statisferme{
display: none;
}
#statis span{
display: none;
}

/* #perso-panel-stats — obsolète, conservé pour compatibilité */
#perso-panel-stats { display: none; }

/* ── Fenêtre statistiques ─────────────────────────────────── */
/* Ancré : position calculée dynamiquement par JS (collée sous #designperso) */
#perso-stats-win {
    position: absolute;
    /* top/left injectés par syncStatsDockPosition() */
    width: 308px;
    background: var(--t-screen);
    border: 1px solid var(--frame-border);
    border-top: none;
    box-shadow: none;
    font-family: "Titillium Web","Trebuchet MS",sans-serif;
    font-variant: small-caps;
    font-size: 0.82em;
    z-index: 1010;
    overflow: hidden;
    display: none;
}
#perso-stats-win.stats-open {
    display: block;
    border-top: 1px solid var(--border-dark);
    box-shadow: 0 8px 24px rgba(0,0,0,0.75), inset 0 1px 0 rgba(100,98,90,0.15);
}
/* Détaché : flottant libre (position fixed, JS positionne) */
#perso-stats-win.stats-detached {
    position: fixed;
    left: auto;
    top: auto;
    border-top: 1px solid var(--border-dark);
    box-shadow: 0 8px 24px rgba(0,0,0,0.75), inset 0 1px 0 rgba(100,98,90,0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#perso-stats-win.stats-detached.stats-minimized {
    height: 26px !important;
}
#perso-stats-win.stats-detached #perso-stats-body {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: none;
    min-height: 0;
}
#perso-stats-win.stats-detached #perso-stats-body::-webkit-scrollbar { display: none; }
/* Toolbar */
#perso-stats-toolbar {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    height: 26px;
    gap: 4px;
    padding: 0 6px;
    background: var(--t-screen);
    border-bottom: 1px solid var(--border-dark);
    cursor: default;
    flex-shrink: 0;
}
#perso-stats-win.stats-detached #perso-stats-toolbar { cursor: grab; }
#perso-stats-win.stats-detached #perso-stats-toolbar:active { cursor: grabbing; }
.perso-stats-drag {
    color: rgba(200, 196, 184, 0.35);
    font-size: 1em;
    line-height: 1;
    flex-shrink: 0;
    cursor: grab;
    display: none;
}
.perso-stats-drag:active { cursor: grabbing; }
#perso-stats-win.stats-detached .perso-stats-drag { display: block; }
.perso-stats-title {
    flex: 1;
    font-size: 0.78em;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--t-player) 50%, transparent);
    pointer-events: none;
}
#perso-stats-body {
    padding: 4px 6px 6px;
}
.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 2px;
    border-bottom: 1px solid rgba(80, 78, 72, 0.15);
}
.stat-row:last-child { border-bottom: none; }
.stat-label {
    color: rgba(190, 185, 175, 0.55);
    font-variant: small-caps;
    font-size: 0.9em;
}
.stat-row > div {
    color: var(--t-player);
    font-size: 0.9em;
    min-width: 28px;
    text-align: right;
}

/* Barre de tabs du panneau personnage */
#perso-tab-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 24px;
    display: flex;
    border-top: 1px solid var(--border-light);
    z-index: 4;
}
.perso-tab {
    flex: 1;
    text-align: center;
    line-height: 24px;
    font-size: 0.8em;
    cursor: pointer;
    color: rgba(175, 170, 160, 0.55);
    font-variant: small-caps;
    letter-spacing: 0.04em;
    transition: color 0.15s, background 0.15s;
    border-right: 1px solid rgba(90, 85, 80, 0.3);
}
.perso-tab:last-child {
    border-right: none;
}
.perso-tab:hover {
    color: var(--t-player);
    background: color-mix(in srgb, var(--t-player) 6%, transparent);
}
.perso-tab.tab-active {
    color: color-mix(in srgb, var(--t-player) 82%, #fff);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--t-player) 16%, transparent) 0%,
        transparent 95%);
    border-top: 1px solid color-mix(in srgb, var(--t-player) 70%, transparent);
    margin-top: -1px;
    font-weight: 500;
}

/* Point de statut sur l'onglet Quêtes */
#tab-perso-quetes { position: relative; }
#tab-perso-quetes.qte-dot-claim::after,
#tab-perso-quetes.qte-dot-progress::after {
    content: '';
    position: absolute;
    top: 5px;
    right: 5px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    pointer-events: none;
}
#tab-perso-quetes.qte-dot-claim::after {
    background: var(--interactive-primary, #c5d4a0);
    box-shadow: 0 0 5px var(--interactive-primary, #c5d4a0);
}
#tab-perso-quetes.qte-dot-progress::after {
    background: var(--interactive-secondary, #c9a227);
    opacity: 0.75;
}

/* Stats : position statique dans le nouveau panneau */
#agi, #pun, #res, #obs, #dis, #med, #pro, #eco, #ing, #inf {
    position: static;
    top: auto;
    left: auto;
}

/* ── Fenêtre inventaire ─────────────────────────────────── */
#perso-inv-win {
    position: absolute;
    width: 290px;
    background: var(--t-screen);
    border: 1px solid var(--frame-border);
    border-top: none;
    box-shadow: none;
    font-family: "Titillium Web","Trebuchet MS",sans-serif;
    font-variant: small-caps;
    font-size: 0.82em;
    z-index: 1010;
    display: none;
}
#perso-inv-win.inv-open {
    display: block;
    border-top: 1px solid var(--border-dark);
    box-shadow: 0 8px 24px rgba(0,0,0,0.75), inset 0 1px 0 rgba(100,98,90,0.15);
}
#perso-inv-win.inv-detached {
    position: fixed;
    left: auto;
    top: auto;
    border-top: 1px solid var(--border-dark);
    box-shadow: 0 8px 24px rgba(0,0,0,0.75), inset 0 1px 0 rgba(100,98,90,0.15);
    display: flex;
    flex-direction: column;
}
#perso-inv-win.inv-detached #perso-inv-body {
    flex: 1;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}
/* Échelle du paper-doll détaché : suit la taille des sacs (--sac-scale) par
   défaut → au détachement l'inventaire prend directement la taille des objets
   en sac. Override explicite via --inv-scale posé au resize. Re-ancré : plus de
   classe .inv-detached → retour aux 40px natifs, et le sac n'est jamais touché
   (on ne fait que LIRE --sac-scale, jamais l'écrire). */
#perso-inv-win.inv-detached #inventaire {
    width: 100%;
    height: 100%;
}
#perso-inv-win.inv-detached #invpersonnage {
    width: 290px;
    height: 250px;
    transform: scale(var(--inv-scale, var(--sac-scale, 1)));
    transform-origin: top left;
}
#perso-inv-toolbar {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    height: 26px;
    gap: 4px;
    padding: 0 6px;
    background: var(--t-screen);
    border-bottom: 1px solid var(--border-dark);
    cursor: default;
    flex-shrink: 0;
}
#perso-inv-win.inv-detached #perso-inv-toolbar { cursor: grab; }
#perso-inv-win.inv-detached #perso-inv-toolbar:active { cursor: grabbing; }
.perso-inv-drag {
    color: rgba(200, 196, 184, 0.35);
    font-size: 1em;
    line-height: 1;
    flex-shrink: 0;
    cursor: grab;
    display: none;
}
.perso-inv-drag:active { cursor: grabbing; }
#perso-inv-win.inv-detached .perso-inv-drag { display: block; }
.perso-inv-title {
    flex: 1;
    font-size: 0.78em;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--t-player) 50%, transparent);
    pointer-events: none;
}
#perso-inv-body {
    padding: 4px 6px 6px;
}

/* ── Fenêtre actions passives ─────────────────────────────── */
#perso-action-win {
    position: absolute;
    width: 290px;
    background: var(--t-screen);
    border: 1px solid var(--frame-border);
    border-top: none;
    box-shadow: none;
    font-family: "Titillium Web","Trebuchet MS",sans-serif;
    font-variant: small-caps;
    font-size: 0.82em;
    z-index: 1010;
    overflow: hidden;
    display: none;
}
#perso-action-win.action-open {
    display: block;
    border-top: 1px solid var(--border-dark);
    box-shadow: 0 8px 24px rgba(0,0,0,0.75), inset 0 1px 0 rgba(100,98,90,0.15);
}
#perso-action-win.action-detached {
    position: fixed;
    left: auto;
    top: auto;
    border-top: 1px solid var(--border-dark);
    box-shadow: 0 8px 24px rgba(0,0,0,0.75), inset 0 1px 0 rgba(100,98,90,0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#perso-action-win.action-detached.action-minimized {
    height: 26px !important;
}
#perso-action-win.action-detached #perso-action-body {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: none;
    min-height: 0;
}
#perso-action-win.action-detached #perso-action-body::-webkit-scrollbar { display: none; }
#perso-action-toolbar {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    height: 26px;
    gap: 4px;
    padding: 0 6px;
    background: var(--t-screen);
    border-bottom: 1px solid var(--border-dark);
    cursor: default;
    flex-shrink: 0;
}
#perso-action-win.action-detached #perso-action-toolbar { cursor: grab; }
#perso-action-win.action-detached #perso-action-toolbar:active { cursor: grabbing; }
.perso-action-drag {
    color: rgba(200, 196, 184, 0.35);
    font-size: 1em;
    line-height: 1;
    flex-shrink: 0;
    cursor: grab;
    display: none;
}
.perso-action-drag:active { cursor: grabbing; }
#perso-action-win.action-detached .perso-action-drag { display: block; }
.perso-action-title {
    flex: 1;
    font-size: 0.78em;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--t-player) 50%, transparent);
    pointer-events: none;
}
#perso-action-body {
    padding: 4px 6px 6px;
}
.action-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 2px;
    border-bottom: 1px solid rgba(80, 78, 72, 0.15);
    cursor: pointer;
    border-left: 2px solid transparent;
    transition: background 0.1s ease, border-color 0.1s ease;
}
.action-row:last-child { border-bottom: none; }
.action-row:hover {
    background: color-mix(in srgb, var(--t-accent1) 7%, transparent);
    border-left-color: color-mix(in srgb, var(--t-accent1) 40%, transparent);
}
.action-row:hover .action-win-label {
    color: color-mix(in srgb, var(--t-player) 75%, transparent);
}
.action-row:hover .action-win-icon {
    border-color: color-mix(in srgb, var(--interactive-secondary) 48%, transparent) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 12px color-mix(in srgb, var(--interactive-secondary) 22%, transparent);
}
.action-win-icon {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
}
.action-win-label {
    color: rgba(190, 185, 175, 0.55);
    font-variant: small-caps;
    font-size: 0.9em;
}
#perso-action-body .mpouti:hover {
    border-color: color-mix(in srgb, var(--interactive-secondary) 55%, transparent) !important;
    box-shadow: 0 0 10px color-mix(in srgb, var(--interactive-secondary) 24%, transparent);
}
#perso-action-body div[active="1"] {
    border-color: color-mix(in srgb, var(--interactive-secondary) 80%, transparent) !important;
    box-shadow: inset 0 0 8px color-mix(in srgb, var(--interactive-secondary) 22%, transparent) !important;
}

/* ─── Barre d'action passive ancrée à la carte (3e hôte) ──────────────────────
   Aspect IDENTIQUE à #outil_map (même cadre ::before, même tuiles 46px), SANS
   titlebar. Le panneau est déplacé dans #designcarte (JS setActionHost) → il
   suit la carte. Pas de z-index hardcodé : il vit dans le flux de #designcarte.
   L'onglet « Action » l'affiche/masque (état enregistré). */
#perso-action-win.action-on-map {
    position: absolute;
    width: auto;
    min-width: 0;
    z-index: auto;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    gap: 4px;
    background: none;
    border: none;
    box-shadow: none;
    overflow: visible;
}
#perso-action-win.action-on-map::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--t-screen);
    border: 1px solid color-mix(in srgb, var(--t-accent1) 12%, transparent);
    z-index: -1;
    pointer-events: none;
}
/* pas de titlebar en mode carte */
#perso-action-win.action-on-map #perso-action-toolbar { display: none; }
/* corps : bande d'icônes, labels masqués */
#perso-action-win.action-on-map #perso-action-body {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0;
}
#perso-action-win.action-on-map .action-win-label { display: none; }
#perso-action-win.action-on-map .action-row {
    display: flex;
    padding: 0;
    border: none;
    background: transparent;
    flex-shrink: 0;
}
#perso-action-win.action-on-map .action-row:hover { background: transparent; }
/* tuiles 46px comme #outil_map */
#perso-action-win.action-on-map .action-win-icon {
    width: 46px;
    height: 46px;
    background-size: 40px 40px, 100% 100%;
}
/* orientation : bas = ligne, côtés = colonne */
#perso-action-win.action-map-bottom #perso-action-body { flex-direction: row; }
#perso-action-win.action-map-left  #perso-action-body,
#perso-action-win.action-map-right #perso-action-body { flex-direction: column; }
/* offsets relatifs à #designcarte (grille 475px, top intérieur 32px) — mêmes
   ancrages que #outil_map à 6 icônes */
#perso-action-win.action-map-bottom { top: calc(var(--map-view-h, 475px) + 36px); left: calc((var(--map-view-w, 475px) - 304px) / 2); }
#perso-action-win.action-map-left   { top: calc(32px + (var(--map-view-h, 475px) - 304px) / 2); left: -58px; }
#perso-action-win.action-map-right  { top: calc(32px + (var(--map-view-h, 475px) - 304px) / 2); left: calc(var(--map-view-w, 475px) + 4px); }
/* Si les deux barres sont en bas : côte à côte, pair centré sous la carte.
   Dock 5 icônes (254px) + 16px gap + panneau passif 6 icônes (304px) = 574px
   Dock 6 icônes marshal (304px) + 16px gap + panneau passif (304px)  = 624px */
#designcarte.dock-bottom #perso-action-win.action-map-bottom {
    left: calc((var(--map-view-w, 475px) - 574px) / 2 + 270px); /* à droite du dock (254 + 16) */
}
#designcarte.dock-bottom:has(#outil_map.has-marshal) #perso-action-win.action-map-bottom {
    left: calc((var(--map-view-w, 475px) - 624px) / 2 + 320px); /* à droite du dock marshal (304 + 16) */
}
#designcarte.dock-bottom:has(#perso-action-win.action-map-bottom) #outil_map {
    left: calc((var(--map-view-w, 475px) - 574px) / 2); /* décale le dock pour centrer la paire */
}
#designcarte.dock-bottom:has(#perso-action-win.action-map-bottom) #outil_map.has-marshal {
    left: calc((var(--map-view-w, 475px) - 624px) / 2);
}

/* Si les deux barres sont à gauche : empilées verticalement, paire centrée.
   Dock 5 icônes (254px) + 16px gap + panneau passif (304px) = 574px
   Dock 6 icônes marshal (304px) + 16px gap + panneau passif (304px)  = 624px */
#designcarte.dock-left #perso-action-win.action-map-left {
    top: calc(32px + (var(--map-view-h, 475px) - 574px) / 2 + 270px); /* sous le dock (254+16) */
}
#designcarte.dock-left:has(#outil_map.has-marshal) #perso-action-win.action-map-left {
    top: calc(32px + (var(--map-view-h, 475px) - 624px) / 2 + 320px); /* sous le dock marshal (304+16) */
}
#designcarte.dock-left:has(#perso-action-win.action-map-left) #outil_map {
    top: calc(32px + (var(--map-view-h, 475px) - 574px) / 2); /* décale le dock pour centrer la paire */
}
#designcarte.dock-left:has(#perso-action-win.action-map-left) #outil_map.has-marshal {
    top: calc(32px + (var(--map-view-h, 475px) - 624px) / 2);
}

/* Si les deux barres sont à droite */
#designcarte.dock-right #perso-action-win.action-map-right {
    top: calc(32px + (var(--map-view-h, 475px) - 574px) / 2 + 270px); /* sous le dock (254+16) */
}
#designcarte.dock-right:has(#outil_map.has-marshal) #perso-action-win.action-map-right {
    top: calc(32px + (var(--map-view-h, 475px) - 624px) / 2 + 320px); /* sous le dock marshal (304+16) */
}
#designcarte.dock-right:has(#perso-action-win.action-map-right) #outil_map {
    top: calc(32px + (var(--map-view-h, 475px) - 574px) / 2); /* décale le dock pour centrer la paire */
}
#designcarte.dock-right:has(#perso-action-win.action-map-right) #outil_map.has-marshal {
    top: calc(32px + (var(--map-view-h, 475px) - 624px) / 2);
}

/* Ordre inversé (dock-barres-swap) : panneau passif en premier ──────────────
   Bas  : action à gauche, dock à droite (304+16=320px d'offset pour le dock)
   Côtés : action en haut, dock en bas */
#designcarte.dock-bottom.dock-barres-swap #perso-action-win.action-map-bottom {
    left: calc((var(--map-view-w, 475px) - 574px) / 2); /* action en premier (gauche) */
}
#designcarte.dock-bottom.dock-barres-swap:has(#outil_map.has-marshal) #perso-action-win.action-map-bottom {
    left: calc((var(--map-view-w, 475px) - 624px) / 2);
}
#designcarte.dock-bottom.dock-barres-swap:has(#perso-action-win.action-map-bottom) #outil_map {
    left: calc((var(--map-view-w, 475px) - 574px) / 2 + 320px); /* dock après l'action (304+16) */
}
#designcarte.dock-bottom.dock-barres-swap:has(#perso-action-win.action-map-bottom) #outil_map.has-marshal {
    left: calc((var(--map-view-w, 475px) - 624px) / 2 + 320px);
}
#designcarte.dock-left.dock-barres-swap #perso-action-win.action-map-left {
    top: calc(32px + (var(--map-view-h, 475px) - 574px) / 2); /* action en haut */
}
#designcarte.dock-left.dock-barres-swap:has(#outil_map.has-marshal) #perso-action-win.action-map-left {
    top: calc(32px + (var(--map-view-h, 475px) - 624px) / 2);
}
#designcarte.dock-left.dock-barres-swap:has(#perso-action-win.action-map-left) #outil_map {
    top: calc(32px + (var(--map-view-h, 475px) - 574px) / 2 + 320px); /* dock sous l'action (304+16) */
}
#designcarte.dock-left.dock-barres-swap:has(#perso-action-win.action-map-left) #outil_map.has-marshal {
    top: calc(32px + (var(--map-view-h, 475px) - 624px) / 2 + 320px);
}
#designcarte.dock-right.dock-barres-swap #perso-action-win.action-map-right {
    top: calc(32px + (var(--map-view-h, 475px) - 574px) / 2); /* action en haut */
}
#designcarte.dock-right.dock-barres-swap:has(#outil_map.has-marshal) #perso-action-win.action-map-right {
    top: calc(32px + (var(--map-view-h, 475px) - 624px) / 2);
}
#designcarte.dock-right.dock-barres-swap:has(#perso-action-win.action-map-right) #outil_map {
    top: calc(32px + (var(--map-view-h, 475px) - 574px) / 2 + 320px); /* dock sous l'action (304+16) */
}
#designcarte.dock-right.dock-barres-swap:has(#perso-action-win.action-map-right) #outil_map.has-marshal {
    top: calc(32px + (var(--map-view-h, 475px) - 624px) / 2 + 320px);
}


/* ── Fenêtre évolution ─────────────────────────────────── */
#perso-evo-win {
    position: absolute;
    width: 290px;
    background: var(--t-screen);
    border: 1px solid var(--frame-border);
    border-top: none;
    box-shadow: none;
    font-family: "Titillium Web","Trebuchet MS",sans-serif;
    font-variant: small-caps;
    font-size: 0.82em;
    z-index: 1010;
    overflow: hidden;
    display: none;
}
#perso-evo-win.evo-open {
    display: block;
    border-top: 1px solid var(--border-dark);
    box-shadow: 0 8px 24px rgba(0,0,0,0.75), inset 0 1px 0 rgba(100,98,90,0.15);
}
#perso-evo-win.evo-detached {
    position: fixed;
    left: auto;
    top: auto;
    border-top: 1px solid var(--border-dark);
    box-shadow: 0 8px 24px rgba(0,0,0,0.75), inset 0 1px 0 rgba(100,98,90,0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#perso-evo-win.evo-detached.evo-minimized {
    height: 26px !important;
}
#perso-evo-win.evo-detached #perso-evo-body {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: none;
    min-height: 0;
}
#perso-evo-win.evo-detached #perso-evo-body::-webkit-scrollbar { display: none; }
#perso-evo-toolbar {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    height: 26px;
    gap: 4px;
    padding: 0 6px;
    background: var(--t-screen);
    border-bottom: 1px solid var(--border-dark);
    cursor: default;
    flex-shrink: 0;
}
#perso-evo-win.evo-detached #perso-evo-toolbar { cursor: grab; }
#perso-evo-win.evo-detached #perso-evo-toolbar:active { cursor: grabbing; }
.perso-evo-drag {
    color: rgba(200, 196, 184, 0.35);
    font-size: 1em;
    line-height: 1;
    flex-shrink: 0;
    cursor: grab;
    display: none;
}
.perso-evo-drag:active { cursor: grabbing; }
#perso-evo-win.evo-detached .perso-evo-drag { display: block; }
.perso-evo-title {
    flex: 1;
    font-size: 0.78em;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--t-player) 50%, transparent);
    pointer-events: none;
}
#perso-evo-body {
    padding: 4px 6px 8px;
}
.evo-section {
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(80,78,72,0.2);
}
.evo-section:last-child { border-bottom: none; margin-bottom: 0; }
.evo-section-title {
    font-size: 0.72em;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--interactive-secondary) 65%, transparent);
    padding: 3px 0 4px;
    border-bottom: 1px solid color-mix(in srgb, var(--interactive-secondary) 20%, transparent);
    margin-bottom: 4px;
}
.evo-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 2px;
    border-bottom: 1px solid rgba(80,78,72,0.1);
}
.evo-row:last-child { border-bottom: none; }
.evo-label {
    color: rgba(190,185,175,0.55);
    font-variant: small-caps;
    font-size: 0.88em;
}
.evo-val {
    color: var(--t-player);
    font-size: 0.88em;
    text-align: right;
}
.evo-val.positive { color: var(--interactive-primary); }
.evo-val.negative { color: var(--interactive-danger); }
.evo-val.neutral  { color: var(--interactive-tertiary); }
.evo-val-combat { color: var(--interactive-secondary); }
.evo-talents-btn {
    width: 100%;
    padding: 6px 10px;
    background: var(--bg-darkest, #111);
    color: var(--interactive-secondary, #c9a227);
    border: 1px solid var(--border-medium, #3a3e4e);
    border-radius: var(--radius-small, 4px);
    cursor: pointer;
    font-size: 0.86em;
    font-weight: bold;
    transition: border-color .12s, background .12s;
}
.evo-talents-btn:hover {
    border-color: var(--interactive-secondary, #c9a227);
    background: color-mix(in srgb, var(--interactive-secondary, #c9a227) 12%, var(--bg-darkest, #111));
}
#evo-effets-content {
    font-size: 0.82em;
    line-height: 1.5;
    color: rgba(190,185,175,0.7);
}
.evo-effet-name { color: var(--interactive-secondary); }
.evo-effet-timer { color: var(--interactive-tertiary); font-size: 0.85em; }
.evo-effet-none { color: rgba(150,145,135,0.35); font-style: italic; font-size: 0.82em; }
#evo-xp-info {
    font-size: 0.82em;
    color: rgba(190,185,175,0.65);
    margin-bottom: 6px;
    line-height: 1.5;
}
.evo-xp-bars {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.evo-xp-bar-row {
    display: flex;
    align-items: center;
    gap: 5px;
}
.evo-xp-bar-label {
    font-size: 0.72em;
    color: rgba(190,185,175,0.45);
    min-width: 34px;
    text-align: right;
    flex-shrink: 0;
}
.evo-xp-bar-track {
    flex: 1;
    height: 6px;
    background: rgba(40,38,35,0.8);
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid rgba(80,78,72,0.35);
}
.evo-xp-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}
.evo-xp-prev { background: rgba(100,98,90,0.5); }
.evo-xp-cur  { background: color-mix(in srgb, var(--interactive-primary) 70%, transparent); }
.evo-xp-next { background: rgba(40,38,35,0.3); }
.evo-xp-current-row .evo-xp-bar-label { color: color-mix(in srgb, var(--t-player) 70%, transparent); }
.evo-xp-current-row .evo-xp-bar-track {
    height: 9px;
    border-color: color-mix(in srgb, var(--interactive-primary) 35%, transparent);
}
.evo-xp-bar-pct {
    font-size: 0.68em;
    color: rgba(190,185,175,0.35);
    min-width: 26px;
    text-align: left;
    flex-shrink: 0;
}
.evo-xp-current-row .evo-xp-bar-pct { color: color-mix(in srgb, var(--t-player) 55%, transparent); }

/* === PANNEAU QUÊTES (pull-tab fixe, slide-down depuis le haut) === */
/* Styles communs : actifs en mode ancré ET détaché */
#perso-quetes-win {
    background: var(--t-screen);
    border: 1px solid var(--frame-border);
    border-top: none;
    overflow: hidden;
    font-family: "Titillium Web","Trebuchet MS",sans-serif;
    font-variant: small-caps;
    font-size: 0.82em;
}
#perso-quetes-win.quetes-docked {
    position: fixed;
    top: 70px;
    right: calc(var(--log-panel-w, 80px) + var(--online-panel-w, 70px));
    left: auto;
    transform: translateY(-100%);
    width: clamp(200px, 22vw, 300px);
    box-shadow: none;
    z-index: 1987;
    display: block;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), right 0.3s ease;
}
#perso-quetes-win.quetes-docked.quetes-open {
    transform: translateY(0);
    border-top: 1px solid var(--border-dark);
    box-shadow: 0 8px 24px rgba(0,0,0,0.75), inset 0 1px 0 rgba(100,98,90,0.15);
}
body.nav_collapsed #perso-quetes-win.quetes-docked {
    top: 0;
}
#perso-quetes-win.quetes-detached {
    position: fixed;
    left: auto;
    top: auto;
    border-top: 1px solid var(--border-dark);
    box-shadow: 0 8px 24px rgba(0,0,0,0.75), inset 0 1px 0 rgba(100,98,90,0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#perso-quetes-win.quetes-detached.quetes-minimized {
    height: 26px !important;
}
#perso-quetes-win.quetes-detached #perso-quetes-body {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: none;
    min-height: 0;
}
#perso-quetes-win.quetes-detached #perso-quetes-body::-webkit-scrollbar { display: none; }
#perso-quetes-toolbar {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    height: 26px;
    gap: 4px;
    padding: 0 6px;
    background: var(--t-screen);
    border-bottom: 1px solid var(--border-dark);
    cursor: default;
    flex-shrink: 0;
}
#perso-quetes-win.quetes-detached #perso-quetes-toolbar { cursor: grab; }
#perso-quetes-win.quetes-detached #perso-quetes-toolbar:active { cursor: grabbing; }
.perso-quetes-drag {
    color: rgba(200, 196, 184, 0.35);
    font-size: 1em;
    line-height: 1;
    flex-shrink: 0;
    cursor: grab;
    display: none;
}
.perso-quetes-drag:active { cursor: grabbing; }
#perso-quetes-win.quetes-detached .perso-quetes-drag { display: block; }
.perso-quetes-title {
    flex: 1;
    font-size: 0.78em;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--t-player) 50%, transparent);
    pointer-events: none;
}
#perso-quetes-body {
    padding: 4px 6px 8px;
    overflow-y: auto;
    max-height: 420px;
    scrollbar-width: thin;
}
#perso-quetes-body .qte-loading {
    font-variant: normal;
}

#outil_stuff{
position: absolute;
width: 55px;
height:50px;
}

.conteneur_sac_meuble, .conteneur_sac_don{
box-shadow: inset 0px 0px 10px 0px #070707, 0px 5px 5px 0px #070707;
background: none repeat scroll 0 0 var(--overlay-black-darker);
border:5px double #282828;
}

/* === Taille des objets dans les conteneurs PERSO ===
   Pilotée par --sac-img (préférence joueur, slider dans Paramètres > Interface).
   La case = image + 14px de bordure interne ; footprint = case + 2px de marge.
   Périmètre : sac, munitions (inv12) et poches (inv2/inv3) UNIQUEMENT.
   Les conteneurs de meuble / don gardent leur taille fixe (cf. règles dédiées). */
:root { --sac-img: 40px; }

/* Dimensions du conteneur : pilotées par règle CSS (reflow live au changement
   de --sac-img), via le nb de colonnes/lignes posé en custom props par le PHP.
   +2px = marge anti-débordement (sinon la dernière colonne peut wrapper). */
.conteneur_sac.indexbox, .conteneur_inv12.indexbox, .conteneur_inv2.indexbox, .conteneur_inv3.indexbox {
width: calc(var(--sac-cols, 5) * (var(--sac-img, 40px) + 16px) + 2px);
height: calc(var(--sac-rows, 1) * (var(--sac-img, 40px) + 16px));
}

.conteneur_sac .wrapcasesac, .conteneur_inv12 .wrapcasesac,.conteneur_inv2 .wrapcasesac,.conteneur_inv3 .wrapcasesac{
position: relative;
display: inline-block;
width: calc(var(--sac-img, 40px) + 14px);
height: calc(var(--sac-img, 40px) + 14px);
margin: 1px;
}

.conteneur_sac .casesacss,.conteneur_inv12 .casesacss,.conteneur_inv2 .casesacss,.conteneur_inv3 .casesacss {
position: absolute;
width: calc(var(--sac-img, 40px) + 14px);
height: calc(var(--sac-img, 40px) + 14px);
box-shadow: inset 1px 2px 1px #2c2c2c, 1px 2px 1px #101010, inset 0px 0px 10px 0px var(--sac-case-shadow, #070707);
background-color: var(--sac-case-bg, #DADADA);
}

/* === Bordure des cases PERSO — préférence joueur thémée ===
   Type piloté par l'attribut data-sac-border sur <html> (none par défaut =
   aucun border, comportement d'origine). Couleur via --sac-case-border.
   Périmètre : sac, munitions (inv12), poches (inv2/inv3). */
html[data-sac-border="classic"] .conteneur_sac .casesacss,
html[data-sac-border="classic"] .conteneur_inv12 .casesacss,
html[data-sac-border="classic"] .conteneur_inv2 .casesacss,
html[data-sac-border="classic"] .conteneur_inv3 .casesacss,
html[data-sac-border="classic"] #invpersonnage .items_inv {
border: 1px solid var(--sac-case-border, #303030);
}

/* Découpé / octogonal : même clip que les icônes d'outils (style_icones.css) */
html[data-sac-border="cut"] .conteneur_sac .casesacss,
html[data-sac-border="cut"] .conteneur_inv12 .casesacss,
html[data-sac-border="cut"] .conteneur_inv2 .casesacss,
html[data-sac-border="cut"] .conteneur_inv3 .casesacss,
html[data-sac-border="cut"] #invpersonnage .items_inv {
border: 1px solid var(--sac-case-border, #303030);
clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

/* Coins seulement : marques d'angle en L via un ::after (n'écrase pas le fond) */
html[data-sac-border="corners"] .conteneur_sac .casesacss::after,
html[data-sac-border="corners"] .conteneur_inv12 .casesacss::after,
html[data-sac-border="corners"] .conteneur_inv2 .casesacss::after,
html[data-sac-border="corners"] .conteneur_inv3 .casesacss::after,
html[data-sac-border="corners"] #invpersonnage .items_inv::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background:
    linear-gradient(var(--sac-case-border,#303030), var(--sac-case-border,#303030)) top left     / 9px 1px no-repeat,
    linear-gradient(var(--sac-case-border,#303030), var(--sac-case-border,#303030)) top left     / 1px 9px no-repeat,
    linear-gradient(var(--sac-case-border,#303030), var(--sac-case-border,#303030)) top right    / 9px 1px no-repeat,
    linear-gradient(var(--sac-case-border,#303030), var(--sac-case-border,#303030)) top right    / 1px 9px no-repeat,
    linear-gradient(var(--sac-case-border,#303030), var(--sac-case-border,#303030)) bottom left  / 9px 1px no-repeat,
    linear-gradient(var(--sac-case-border,#303030), var(--sac-case-border,#303030)) bottom left  / 1px 9px no-repeat,
    linear-gradient(var(--sac-case-border,#303030), var(--sac-case-border,#303030)) bottom right / 9px 1px no-repeat,
    linear-gradient(var(--sac-case-border,#303030), var(--sac-case-border,#303030)) bottom right / 1px 9px no-repeat;
}

/* Image de l'objet : suit --sac-img (le CSS écrase le width="40" inline du PHP) */
.conteneur_sac .items_sac img, .conteneur_inv12 .items_sac img, .conteneur_inv2 .items_sac img, .conteneur_inv3 .items_sac img,
.conteneur_sac .munition_sac img, .conteneur_inv12 .munition_sac img, .conteneur_inv2 .munition_sac img, .conteneur_inv3 .munition_sac img {
width: var(--sac-img, 40px);
height: var(--sac-img, 40px);
}

/* === Conteneurs MEUBLE / DON : taille fixe, hors préférence joueur === */
.conteneur_sac_meuble .wrapcasesac, .conteneur_sac_don .wrapcasesac{
position: relative;
display: inline-block;
width: 54px;
height: 54px;
margin: 2px;
}

.conteneur_sac_meuble .casesacss, .conteneur_sac_don .casesacss {
position: absolute;
width: 54px;
height: 54px;
box-shadow: inset 1px 2px 1px #2c2c2c, 1px 2px 1px #101010, inset 0px 0px 10px 0px #070707;
background-color: #DADADA;
}

/* === Sac d'un AUTRE personnage (lookatwho) — identité « FOUILLE / intrusion » ===
   Fenêtre = chrome titlebar teintée danger (.sac-autre-win/.sac-autre-bar) +
   grille (.conteneur_sac_autre). Taille des objets pilotée par --sac-img
   (préférence joueur), grille via --sac-cols/--sac-rows posés par le PHP.
   Cases : cosmétique des cases sac (--sac-case-*) + hover ambré. */

/* Fenêtre conteneur : cadre + frame, sizée par son contenu. Drag + z-index
   gérés en JS (zindex global, cf. piège #4) — pas de z-index hardcodé ici. */
.sac-autre-win {
    position: fixed;
    top: 90px;
    right: 30px;
    display: inline-flex;
    flex-direction: column;
    background: var(--bg-darker);
    border: 1px solid var(--interactive-danger-border, #c04030);
    border-radius: var(--radius-medium);
    box-shadow:
        var(--shadow-panel, 0 8px 24px rgba(0,0,0,0.6)),
        inset 0 0 22px color-mix(in srgb, var(--interactive-danger, #e07050) 7%, transparent);
    overflow: hidden;
    animation: panelAppear 0.25s ease-out;
}

/* Barre de titre : dégradé danger + scanline subtile, sert de handle de drag. */
.sac-autre-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: 28px;
    padding: 0 6px 0 10px;
    cursor: move;
    user-select: none;
    position: relative;
    overflow: hidden;
    color: var(--t-text1, #ecf0f1);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--interactive-danger, #e07050) 26%, transparent),
        color-mix(in srgb, var(--interactive-danger, #e07050) 10%, transparent));
    border-bottom: 1px solid var(--interactive-danger-border, #c04030);
}
.sac-autre-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 3px);
    mix-blend-mode: overlay;
}
.sac-autre-bar-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.66em;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px #000;
}
.sac-autre-bar-ico {
    color: var(--interactive-danger, #e07050);
    font-size: 1.05em;
    filter: drop-shadow(0 0 3px color-mix(in srgb, var(--interactive-danger, #e07050) 60%, transparent));
}
.sac-autre-bar-close {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xs);
    cursor: pointer;
    font-size: 10px;
    color: var(--interactive-danger, #e07050);
    background: color-mix(in srgb, var(--interactive-danger, #e07050) 16%, transparent);
    transition: background 0.15s, color 0.15s;
}
.sac-autre-bar-close:hover {
    background: color-mix(in srgb, var(--interactive-danger, #e07050) 40%, transparent);
    color: #fff;
}

/* Grille nichée dans la fenêtre : neutralise le frame/positionnement du conteneur
   de base (.conteneur_sac_autre est aussi position:absolute via la règle commune). */
.sac-autre-win .conteneur_sac_autre {
    position: static;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 7px;
    line-height: 0;
}
.conteneur_sac_autre.indexbox {
    width: calc(var(--sac-cols, 5) * (var(--sac-img, 40px) + 16px) + 2px);
    height: calc(var(--sac-rows, 1) * (var(--sac-img, 40px) + 16px));
}
.conteneur_sac_autre .items_sac {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--sac-img, 40px) + 14px);
    height: calc(var(--sac-img, 40px) + 14px);
    margin: 1px;
    padding: 0;
    position: relative;
    border-radius: var(--radius-xs);
    background-color: var(--sac-case-bg, #DADADA);
    box-shadow: inset 1px 2px 1px #2c2c2c, 1px 2px 1px #101010, inset 0 0 10px 0 var(--sac-case-shadow, #070707);
}
.conteneur_sac_autre .items_sac img {
    width: var(--sac-img, 40px);
    height: var(--sac-img, 40px);
}

#invpersonnage > .items_inv{
/*background: #b0b0b0;*/
}

/*action*/
#outil_perso {
    left: 6px;
    position: absolute;
    top: 119px;    /* 46 + (475-330)/2 — centred on map */
    width: 56px;
    height: 330px;
}
/* Separator between stealth group and work group */
#outil_perso::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 163px;
    width: 24px;
    height: 1px;
    background: color-mix(in srgb, var(--t-accent1) 25%, transparent);
}
.outil_perso {
    left: 5px;
    position: absolute;
    top: 118px;
    width: 58px;
    height: 332px;
    z-index: -1;
    background: var(--t-screen);
    border: 1px solid color-mix(in srgb, var(--t-accent1) 12%, transparent);
    border-top: 2px solid color-mix(in srgb, var(--t-accent1) 28%, transparent);
}
#outil_option div:focus { 
outline: none; 
background-color:var(--t-accent1d);
}
#outil_option{
position: absolute;
top: 350px;
left: -25px;
width: 25px;
}
#outil_option2{
left: 17px;
position: absolute;
top: 382px;
width: 25px;
}
/* #outil_haut removed — log button removed */
/* alertes Tens/Rech dans le widget perso */
/* Jauges Tens/AR — désormais dans la barre de statut (header carte) */
#labelInTens, #labelInCrim {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.66em;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: var(--radius-xs, 2px);
    background: color-mix(in srgb, var(--interactive-secondary) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--interactive-secondary) 30%, transparent);
    color: var(--interactive-secondary);
    white-space: nowrap;
}
#labelInTens .alerte-label, #labelInCrim .alerte-label { opacity: .75; }
#labelInCrim.alerte-danger {
    color: var(--interactive-danger, #e07050);
    background: color-mix(in srgb, var(--interactive-danger, #e07050) 12%, transparent);
    border-color: color-mix(in srgb, var(--interactive-danger, #e07050) 35%, transparent);
}
#InTensVal, #InCrimVal {
    font-weight: bold;
    font-variant: normal;
    letter-spacing: 0.03em;
}
/*countdown (valeur masquée, logique JS conservée)*/
#countdown { display: none !important; }

/* ── Overlay "trop vite" sur la carte ────────────────────────── */
#animationtimer {
    position: absolute;
    top: 32px;    /* aligne sur mapp */
    left: 0;
    width: var(--map-view-w, 475px);
    height: var(--map-view-h, 475px);
    z-index: 498;
    pointer-events: none;
    border: 2px solid transparent;
}
@keyframes toofast-flash {
    0%   { border-color: transparent;                                        background: transparent; }
    15%  { border-color: color-mix(in srgb, var(--t-accent1) 60%, transparent); background: color-mix(in srgb, var(--t-accent1) 6%, transparent); }
    55%  { border-color: color-mix(in srgb, var(--t-accent1) 20%, transparent); background: transparent; }
    100% { border-color: transparent;                                        background: transparent; }
}
#animationtimer.too-fast {
    animation: toofast-flash 0.55s ease-out forwards;
}
/* ── Jauge de SOUFFLE (barre rapide de cadence combat/déplacement) ──────
   Pilotée en JS par cybSouffleRender() (scaleX = souffle/max, couleur selon niveau).
   Remplace l'ancienne barre de cooldown one-shot. */
#map-cooldown-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: color-mix(in srgb, var(--t-accent1) 65%, transparent);
    transform-origin: left center;
    transform: scaleX(1);
    opacity: 0.30;
    z-index: 210;
    pointer-events: none;
    transition: transform 0.15s linear, background 0.25s linear, opacity 0.25s linear;
}


/*GP carte*/
/* outil_map — dock configurable (right/left/bottom) */
#outil_map {
    position: absolute;
    box-sizing: border-box; /* width/height = épaisseur totale (padding inclus) → offsets symétriques */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    gap: 4px;
}
#outil_map::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--t-screen);
    border: 1px solid color-mix(in srgb, var(--t-accent1) 12%, transparent);
    z-index: -1;
    pointer-events: none;
}
/* Dock droit (par défaut) — boîtes 46px : 5 icônes = 254px, 6 = 304px, dock = 54px */
#designcarte.dock-right #outil_map {
    flex-direction: column;
    left: calc(var(--map-view-w, 475px) + 4px);    /* bord droit carte + 4 */
    top: calc(32px + (var(--map-view-h, 475px) - 254px) / 2);  /* centré vert. sur la carte (5 icônes = 254) */
    width: 54px;
}
#designcarte.dock-right #outil_map.has-marshal {
    top: calc(32px + (var(--map-view-h, 475px) - 304px) / 2);  /* centré vert. sur la carte (6 icônes marshall = 304) */
}
/* Dock gauche */
#designcarte.dock-left #outil_map {
    flex-direction: column;
    left: -58px;    /* 0 - 4 - 54 */
    top: calc(32px + (var(--map-view-h, 475px) - 254px) / 2);  /* centré vert. sur la carte */
    width: 54px;
}
#designcarte.dock-left #outil_map.has-marshal {
    top: calc(32px + (var(--map-view-h, 475px) - 304px) / 2);  /* centré vert. sur la carte (6 icônes marshall = 304) */
}
/* Dock bas */
#designcarte.dock-bottom #outil_map {
    flex-direction: row;
    top: calc(var(--map-view-h, 475px) + 36px);    /* sous la carte */
    left: calc((var(--map-view-w, 475px) - 254px) / 2);  /* centré horiz. sur la carte (5 icônes = 254) */
    height: 54px;
}
#designcarte.dock-bottom #outil_map.has-marshal {
    left: calc((var(--map-view-w, 475px) - 304px) / 2);  /* centré horiz. sur la carte (6 icônes marshall = 304) */
}
#designcarte.dock-bottom #outil_map::before {
    border-left: 2px solid color-mix(in srgb, var(--t-accent1) 28%, transparent);
}
/* Force les icônes du dock en flux flex (override position:absolute des icônes) */
#outil_map > div {
    position: relative;
    top: auto;
    left: auto;
    flex-shrink: 0;
}
/*inventaire sous la carte*/
.scrollog{
/*background-color: #333;*/
}
#outil_option2 div{
background-color: #000;
    color: #bbb;
    display: inline-block;
    font-size: 85%;
    height: 21px;
    margin: 2px;
    position: relative;
    text-align: center;
    vertical-align: top;
    width: 21px;

}
/* #outil_haut div removed — styles moved to #outil_log in style_icones.css */
#outil_stuff div, #outil_option div{
    background-color: #000;
vertical-align: top;
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 1px;
border: 1px solid #303030;
box-shadow:  0px 1px 4px 0px #070707,inset 0px 0px 3px 0px #101010;
text-align: center;
font-size: 85%;
color: #bbb;

}
.scrollog{
background: none repeat scroll 0 0 #000;
border: 1px solid #303030;
color: #bbb;
display: inline-block;
font-size: 85%;
height: 20px;
margin: 1px;
position: relative;
text-align: center;
vertical-align: top;
width: 20px;
top: 6px;
left: -2px;
}
#foutilog{
position: absolute;
right: 0px;
width: 10px;
cursor: pointer;
height: 100%;
top:0px;
}

#outil_menu  div, #outil_perso  div {
    height: 50px;
    width: 50px;
}
/* Icônes carte : boîte 46px = même tuile que le communicateur */
#outil_map div {
    height: 46px;
    width: 46px;
}
/*MODULE MAPP*/
#grillemap{
position: absolute;
display: inline-block;
width: var(--map-view-w, 475px);
height: var(--map-view-h, 475px);
z-index: 100;
background-repeat: no-repeat;


}
#grillemap .divmap{
position: relative;
width: var(--map-tile, 25px);
height: var(--map-tile, 25px);
float:left;
opacity: 1.0;
display: inline-block;
}
#cachezone{
position: absolute;
z-index: 103;
}
#Z1, #Z2, #Z3{
width: var(--map-view-w, 475px);
height: var(--map-view-h, 475px);
position: absolute;
display: inline-block;
background-repeat: no-repeat;
/* Au-dessus de #persomapp (105) et #lagrille (109) : les zones masquent
   les bots et tokens des zones privées non accessibles au joueur. */
z-index: 110;
}
#mapp{
position: absolute;
display: inline-block;
width: var(--map-view-w, 475px);
height: var(--map-view-h, 475px);
top : 32px;
left: 0;
overflow: hidden;
cursor: pointer;
/* Plus de bordure pleine : coins HUD égaux via ::before (cf. ci-dessous) */
box-shadow:
    0 0 0 1px rgba(0,0,0,0.85),
    inset 0 0 60px rgba(0,0,0,0.55),
    inset 0 0 20px rgba(0,0,0,0.30);
}
/* Coins HUD ÉGAUX (bras H = bras V, identiques aux 4 coins) */
#mapp::before{
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 250;
    background:
        linear-gradient(var(--t-hud-c68), var(--t-hud-c68)) top left     / 18px 2px  no-repeat,
        linear-gradient(var(--t-hud-c68), var(--t-hud-c68)) top left     / 2px  18px no-repeat,
        linear-gradient(var(--t-hud-c68), var(--t-hud-c68)) top right    / 18px 2px  no-repeat,
        linear-gradient(var(--t-hud-c68), var(--t-hud-c68)) top right    / 2px  18px no-repeat,
        linear-gradient(var(--t-hud-c68), var(--t-hud-c68)) bottom left  / 18px 2px  no-repeat,
        linear-gradient(var(--t-hud-c68), var(--t-hud-c68)) bottom left  / 2px  18px no-repeat,
        linear-gradient(var(--t-hud-c68), var(--t-hud-c68)) bottom right / 18px 2px  no-repeat,
        linear-gradient(var(--t-hud-c68), var(--t-hud-c68)) bottom right / 2px  18px no-repeat;
}
/* ── Viseur de carte premium : équerres + icône 40px selon l'outil ──
   La couleur inline (border/box-shadow posée par le JS via couleurcible)
   est neutralisée : le réticule reste thémé, l'OUTIL est identifié par
   l'icône 40px centrée. L'animation surclasse le box-shadow inline. */
#mapcible{
position: absolute;
display: none;
width: var(--map-tile, 25px);
height: var(--map-tile, 25px);
cursor: pointer;
z-index: 200;
top: var(--map-center-y, 225px);
left: var(--map-center-x, 225px);
--cible-c: var(--t-hud-c68);
border: none !important;
/* 4 équerres égales aux coins de la case cible */
background:
    linear-gradient(var(--cible-c),var(--cible-c)) top left     / 7px 2px no-repeat,
    linear-gradient(var(--cible-c),var(--cible-c)) top left     / 2px 7px no-repeat,
    linear-gradient(var(--cible-c),var(--cible-c)) top right    / 7px 2px no-repeat,
    linear-gradient(var(--cible-c),var(--cible-c)) top right    / 2px 7px no-repeat,
    linear-gradient(var(--cible-c),var(--cible-c)) bottom left  / 7px 2px no-repeat,
    linear-gradient(var(--cible-c),var(--cible-c)) bottom left  / 2px 7px no-repeat,
    linear-gradient(var(--cible-c),var(--cible-c)) bottom right / 7px 2px no-repeat,
    linear-gradient(var(--cible-c),var(--cible-c)) bottom right / 2px 7px no-repeat;
animation: cibleGlow 1.8s ease-in-out infinite;
}
@keyframes cibleGlow{
    0%,100%{ box-shadow: 0 0 3px color-mix(in srgb, var(--cible-c) 22%, transparent); }
    50%    { box-shadow: 0 0 8px color-mix(in srgb, var(--cible-c) 45%, transparent); }
}
/* Icône 40px centrée sur la case (déborde du carré 25px) */
#mapcible::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    transform: translate(-50%, -50%);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.75));
}
#mapcible[action="10"]::before{ background-image: url('../img/design/icones/new/40px/DEPLACER.png'); }
#mapcible[action="7"]::before { background-image: url('../img/design/icones/new/40px/ATTAQUER.png'); }
#mapcible[action="11"]::before{ background-image: url('../img/design/icones/new/40px/SOIGNER.png'); }
#mapcible[action="15"]::before{ background-image: url('../img/design/icones/new/40px/ECHANGER.png'); }
#mapcible[action="3"]::before { background-image: url('../img/design/icones/new/40px/ANALYSER.png'); }
#mapcible[action="26"]::before{ background-image: url('../img/design/icones/new/40px/ARRESTATION.png'); }
#mapgpsguide{
position: absolute;
top: 6px;
right: 6px;
z-index: 240;
display: flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
border-radius: 4px;
border: 1px solid color-mix(in srgb, var(--t-accent1) 50%, transparent);
background: color-mix(in srgb, var(--bg-darkest) 78%, transparent);
box-shadow: 0 0 14px color-mix(in srgb, var(--t-accent1) 25%, transparent);
color: var(--t-accent1);
font-size: 0.78em;
font-weight: bold;
pointer-events: auto;
}
#mapgpsguide.hide,
#mapgps_target.hide{
display: none !important;
}
#mapgpsguide_arrow{
display: inline-block;
width: 16px;
height: 16px;
fill: var(--t-accent1);
transform-origin: center center;
transition: transform 0.18s linear;
}
#mapgpsguide_txt{
white-space: nowrap;
}
#mapgpsguide_stop{
cursor: pointer;
opacity: .75;
font-size: .9em;
line-height: 1;
padding: 0 2px;
}
#mapgpsguide_stop:hover{
opacity: 1;
color: var(--t-text1);
}
#mapgps_target{
position: absolute;
width: 25px;
height: 25px;
border: 2px solid color-mix(in srgb, var(--t-accent1) 90%, transparent);
box-shadow: 0 0 8px color-mix(in srgb, var(--t-accent1) 75%, transparent), inset 0 0 8px color-mix(in srgb, var(--t-accent1) 35%, transparent);
background: color-mix(in srgb, var(--t-accent1) 15%, transparent);
z-index: 238;
pointer-events: none;
animation: gpsPulse 1s ease-in-out infinite;
}
@keyframes gpsPulse {
0% { transform: scale(1); opacity: .65; }
50% { transform: scale(1.06); opacity: 1; }
100% { transform: scale(1); opacity: .65; }
}
#dechetsmap, #decorsmap,#maprue, #meublemap,#batimap,#persomapp,#decors{
position:absolute;
z-index: 105;
/*top:25px;*/
}
#lagrille{
position:absolute;
z-index: 109;
/* Vignettage : portée proportionnelle à la taille de carte (calc(var(--map-view-*)))
   → suit l'élargissement et toute future taille. Renforcé sur les côtés gauche/droite,
   qui sont désormais les extrémités les plus éloignées du joueur. */
box-shadow:
    inset 0 0 calc(var(--map-view-w, 475px) * 0.16) rgba(0,0,0,0.70),
    inset 0 0 40px rgba(0,0,0,0.38),
    inset 0 6px calc(var(--map-view-h, 475px) * 0.045) rgba(0,0,0,0.95),
    inset 0 -6px calc(var(--map-view-h, 475px) * 0.045) rgba(0,0,0,0.95),
    inset calc(var(--map-view-w, 475px) * 0.025) 0 calc(var(--map-view-w, 475px) * 0.12) rgba(0,0,0,0.62),
    inset calc(var(--map-view-w, 475px) * -0.025) 0 calc(var(--map-view-w, 475px) * 0.12) rgba(0,0,0,0.62);
width: 100%;
height: 100%;
}
#dechetsmap div, #maprue div,#decors div{
width: 25px;
height: 25px;
}

#decorsmap div{

}
/*
Affichage des perso
*/
#mapp #persomapp span{
border: 2px solid #999999;
box-shadow: 0px 2px 2px 1px #006064;
width: 6px;
height:6px;
border-radius: 50px;
z-index: 135;
background-color: #006064;
}

#mapp #persomapp span.deco, #mapp #persomapp span.dead{
box-shadow: none;
z-index: 134;
}
#mapp #persomapp span.moi{
z-index: 136;
}

/* === BOTS SUR LA CARTE — calque persistant + animations (étape 0) ===
   Nœuds créés/réconciliés par cybBots (ingame.php) ; le sprite vient des
   classes .dNNN générées (style_decors_mapp.php). Pas de z-index : les
   bots restent sous les tokens joueurs (z 135+), comme avant. */
#persomapp .bot-token{
position: absolute;
transition: left .65s ease-in-out, top .65s ease-in-out; /* glisse case à case (= WALK_MS) */
transform-origin: 50% 100%;
animation: bot-idle var(--bot-idle-dur, 3.2s) ease-in-out var(--bot-idle-delay, 0s) infinite;
}
/* resnap caméra : repositionnement sans glisse */
#persomapp .bot-token.bot-snap{
transition: none;
}
/* PNJ : token ROND comme un token joueur (dimensions posées en JS, calées sur
   l'arc PV). Image en cover + bord circulaire ; l'arc .token-hparc l'enveloppe. */
#persomapp .bot-token.pnj-token{
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
border-radius: 50%;
box-shadow: 0 0 0 1px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.12);
animation: none; /* token façon joueur : stable, pas de respiration (la marche reste animée) */
}
/* Bulle « j'ai quelque chose à dire » (dialogue/quête dispo) au-dessus du token */
#persomapp .pnj-token .pnj-bubble{
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
margin-bottom: 2px;
font-size: 13px;
line-height: 1;
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
pointer-events: none;
animation: pnj-bob 1.8s ease-in-out infinite;
}
@keyframes pnj-bob{
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(-3px); }
}
/* Réplique d'ambiance (bark) : bulle de texte transitoire au-dessus du PNJ */
#persomapp .pnj-token .pnj-bark{
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%) translateY(4px);
margin-bottom: 6px;
max-width: 160px;
padding: 4px 8px;
font-size: 11px;
line-height: 1.35;
text-align: center;
white-space: normal;
color: var(--t-text1, #ecf0f1);
background: var(--bg-darker, #1a1e28);
border: 1px solid var(--border-medium, rgba(140,135,125,0.4));
border-radius: var(--radius-medium, 6px);
box-shadow: 0 3px 10px rgba(0,0,0,0.45);
opacity: 0;
transition: opacity .35s ease, transform .35s ease;
pointer-events: none;
z-index: 2;
}
#persomapp .pnj-token .pnj-bark.show{
opacity: 1;
transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce){
#persomapp .pnj-token .pnj-bubble{ animation: none; }
}
/* ombre au sol : ancre le sprite dans le décor */
#persomapp .bot-token::after{
content: "";
position: absolute;
left: 50%;
bottom: -2px;
width: 72%;
height: 6px;
transform: translateX(-50%);
background: radial-gradient(ellipse at center, rgba(0,0,0,.36) 0%, rgba(0,0,0,0) 70%);
pointer-events: none;
}
/* respiration au repos (durée/phase aléatoires par bot, posées en JS) */
@keyframes bot-idle{
0%, 100% { transform: scaleY(1); }
50% { transform: scaleY(.94) scaleX(1.03); }
}
/* trottinement pendant la glisse */
#persomapp .bot-token.bot-walk{
animation: bot-step .16s ease-in-out infinite alternate;
}
@keyframes bot-step{
from { transform: translateY(0) rotate(-3deg); }
to { transform: translateY(-2px) rotate(3deg); }
}
/* apparition / disparition (sortie de champ ou mort) */
#persomapp .bot-token.bot-spawn{
animation: bot-spawn .45s ease-out;
}
@keyframes bot-spawn{
from { opacity: 0; transform: scale(.5); }
to { opacity: 1; transform: scale(1); }
}
#persomapp .bot-token.bot-despawn{
animation: bot-despawn .45s ease-in forwards;
pointer-events: none;
}
@keyframes bot-despawn{
to { opacity: 0; transform: scaleY(.35); }
}
/* touché : PV en baisse détectée au sync */
#persomapp .bot-token.bot-hurt{
animation: bot-hurt .4s ease-out;
}
@keyframes bot-hurt{
0% { filter: brightness(2.6) saturate(.3); transform: scale(1.12); }
100% { filter: none; transform: scale(1); }
}
/* morsure : ruée vers la cible (--lx/--ly posés par cybBots.attackMe) */
#persomapp .bot-token.bot-lunge{
animation: bot-lunge .4s cubic-bezier(.2, .9, .3, 1.4);
}
@keyframes bot-lunge{
0%, 100% { transform: translate(0, 0) scale(1); }
35% { transform: translate(var(--lx, 0px), var(--ly, 0px)) scale(1.18); }
}
@media (prefers-reduced-motion: reduce){
#persomapp .bot-token,
#persomapp .bot-token.bot-walk,
#persomapp .bot-token.bot-spawn,
#persomapp .bot-token.bot-hurt,
#persomapp .bot-token.bot-lunge{
animation: none;
transition: none;
}
}
/* touché PvP temps réel (cybCombat / push Mercure ph/pd) : on flashe l'avatar
   et NON le wrapper, qui porte le translateX(-50%) de centrage du token. */
.token-perso.token-hurt .token-avatar{
animation: token-hurt .46s ease-out;
}
@keyframes token-hurt{
0%   { filter: brightness(2.6) saturate(.4) drop-shadow(0 0 6px var(--interactive-danger, #e07050)); }
100% { filter: none; }
}
/* soigné PvP temps réel (push Mercure ph + s:1) : flash vert au lieu de rouge. */
.token-perso.token-heal .token-avatar{
animation: token-heal .46s ease-out;
}
@keyframes token-heal{
0%   { filter: brightness(1.8) saturate(1.3) drop-shadow(0 0 6px var(--interactive-primary, #8fb996)); }
100% { filter: none; }
}
@media (prefers-reduced-motion: reduce){
.token-perso.token-hurt .token-avatar,
.token-perso.token-heal .token-avatar{ animation: none; }
}

/* === TOKENS PERSONNAGES SUR LA CARTE === */
.token-perso {
  position: absolute;
  cursor: pointer;
  display: block;
  overflow: visible;
  transform: translateX(-50%);
}
/* Ombre au sol isométrique : ellipse colorée (entourant l'ombre noire) */
.token-perso::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) scaleY(0.4);
  width: 22px;
  height: 13px;
  background: var(--tc, #006064);
  border-radius: 50%;
  filter: blur(6px);
  opacity: 0.35;
  z-index: -1;
  pointer-events: none;
}
/* Ombre noire centrale au sol */
.token-perso::after {
  content: '';
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) scaleY(0.4);
  width: 12px;
  height: 10px;
  background: #000;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.55;
  z-index: -1;
  pointer-events: none;
}
.token-perso.token-moi::before {
  width: 22px;
  height: 13px;
  top: 20px;
  opacity: 0.35;
  filter: blur(6px);
}
.token-perso .token-avatar {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}
/* Arc de vie — quart de cercle bas-droite */
.token-hparc {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  overflow: visible;
}
/* Barre de vie */
.token-hpbar {
  width: 22px;
  height: 2px;
  background: rgba(20,20,20,0.65);
  border-radius: 1px;
  overflow: hidden;
  position: relative;
}
.token-hpbar-miss {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  background: #b91c1c;
  border-radius: 0 1px 1px 0;
}
/* Hors-ligne / AFK */
.token-perso.deco {
  opacity: 0.55;
}
.token-perso.deco::before {
  display: none;
}
.token-perso.deco .token-avatar {
  filter: grayscale(0.75) brightness(0.55);
}
/* Mort */
.token-perso.dead {
  opacity: 0.7;
}
.token-dead-wrap {
  position: relative;
  width: 22px;
  height: 22px;
}
.token-dead-wrap .token-tache {
  position: absolute;
  top: 0; left: 0;
  width: 22px;
  height: 22px;
  object-fit: cover;
  border-radius: 0;
  opacity: 0.85;
}
.token-dead-wrap .token-dead-avatar {
  position: absolute;
  top: 0; left: 0;
  opacity: 0.45;
  mix-blend-mode: luminosity;
}
/* Personnage caché visible (fufu repéré) — ombre au sol blanche, plus grande */
.token-perso.token-fufu-visible::before {
  background: #e0e0e0;
  width: 26px;
  height: 14px;
  opacity: 0.45;
  filter: blur(6px);
}
/* Personnage qui repère notre fufu — ombre au sol rouge, plus grande */
.token-perso.token-spotted::before {
  background: #ED5C6B;
  width: 26px;
  height: 14px;
  opacity: 0.45;
  filter: blur(6px);
}
/* Survol depuis le panel des présents */
.token-perso.token-highlight::before {
  background: #b91c1c;
  width: 26px;
  height: 14px;
  opacity: 0.5;
  filter: blur(6px);
}
/* Notre personnage — ombre au sol plus marquée (z-index géré en inline) */
.token-perso.token-moi {
}
/* ======================================= */
#lagrille div span{
z-index: 135;
}
#lagrille div span .c1{
background-color: var(--interactive-info, #006064);  /* Exp */
}
#lagrille div span .c2{
background-color: var(--interactive-danger, #640000); /* Argent */
}
#lagrille div span .c3{
background-color: var(--interactive-secondary, #645900); /* Stat */
}
.zone_protection{
/*background: none repeat scroll 0 0 var(--overlay-black-light);*/
z-index: 150;
border: 1px dashed #101010;
}
/*MODULE PRESENCES*/
#zone_online_data {
    position: fixed;
    top: 70px;
    right: var(--log-panel-w);
    left: auto;
    transform: translateY(-100%);
    width: clamp(200px, 20vw, 320px);
    height: 150px;
    padding: 0;
    z-index: 1988;
    background: var(--t-screen);
    border: 1px solid var(--frame-border);
    border-top: none;
    box-shadow: none;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), right 0.3s ease;
}
#zone_online_data.online-open {
    transform: translateY(0);
    border-top: 1px solid var(--border-dark);
    box-shadow: 0 8px 24px rgba(0,0,0,0.75), inset 0 1px 0 rgba(100,98,90,0.15);
}
#zone_online_data.online-detached {
    position: fixed;
    right: auto;
    transform: none;
    border-top: 1px solid var(--border-dark);
    box-shadow: 0 8px 24px rgba(0,0,0,0.75), inset 0 1px 0 rgba(100,98,90,0.15);
    transition: height 0.2s ease;
    overflow: hidden;
}
#zone_online_data.online-detached.online-minimized {
    height: 26px !important;
}
#zone_online_data.online-detached.online-minimized #zone_online_hidden {
    display: none;
}
body.nav_collapsed #zone_online_data.online-docked {
    top: 0;
}
/* Online toolbar */
#online-toolbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 26px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 6px;
    background: var(--t-screen);
    border-bottom: 1px solid var(--border-dark);
    z-index: 1;
    cursor: default;
}
#zone_online_data.online-detached #online-toolbar { cursor: grab; }
#zone_online_data.online-detached #online-toolbar:active { cursor: grabbing; }
.online-drag-handle {
    cursor: grab;
    color: rgba(200, 196, 184, 0.35);
    font-size: 1em;
    line-height: 1;
    flex-shrink: 0;
    display: none;
}
.online-drag-handle:active { cursor: grabbing; }
#zone_online_data.online-detached .online-drag-handle {
    display: block;
}
.online-title {
    flex: 1;
    font-size: 0.78em;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(201, 162, 39, 0.5);
    pointer-events: none;
}
/* Zone online content */
#zone_online_hidden {
    position: absolute;
    top: 26px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    scrollbar-width: none;
}
#zone_online_hidden::-webkit-scrollbar { display: none; }
#zone_online {
    display: block;
    width: 100%;
    box-sizing: border-box; /* padding inclus dans les 100% → pas de débordement +12px */
    padding: 4px 6px;
    font-variant: small-caps;
    border-radius: 5px;
}
/* Online pull tab */
#online-pull-tab {
    position: fixed;
    top: 70px;
    right: var(--log-panel-w);
    left: auto;
    transform: none;
    /* Plancher : au-dessus du décor (<=600) pour rester cliquable, sous la bande
       des fenêtres de jeu (zindex >= 1000) qui le recouvrent au focus. À l'ouverture/
       focus, le JS l'élève dans la bande zindex ; à la fermeture, il redescend ici. */
    z-index: 999;
    min-width: 70px;
    height: 20px;
    padding: 0 8px;
    background: var(--t-screen);
    border-radius: 0 0 0 6px;
    border: 1px solid rgba(201, 162, 39, 0.35);
    border-top: none;
    border-right: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    color: rgba(201, 162, 39, 0.5);
    font-size: 0.78em;
    line-height: 1;
    user-select: none;
    backdrop-filter: blur(6px);
    transition: color 0.2s, top 0.35s cubic-bezier(0.4, 0, 0.2, 1), right 0.3s ease;
}
body.nav_collapsed #online-pull-tab { top: 0; }
#online-pull-tab:hover {
    color: rgba(201, 162, 39, 1);
    background: rgba(20, 16, 4, 0.9);
    border-color: rgba(201, 162, 39, 0.7);
}
.nb-present-tab {
    font-weight: bold;
    font-size: 1.1em;
    color: rgba(201, 162, 39, 0.85);
}

/* Quêtes pull tab */
#quetes-pull-tab {
    position: fixed;
    top: 70px;
    right: calc(var(--log-panel-w, 80px) + var(--online-panel-w, 70px));
    left: auto;
    transform: none;
    z-index: 999;
    min-width: 60px;
    height: 20px;
    padding: 0 8px;
    background: var(--t-screen);
    border-radius: 0 0 0 6px;
    border: 1px solid rgba(197, 212, 160, 0.35);
    border-top: none;
    border-right: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    color: rgba(197, 212, 160, 0.5);
    font-size: 0.78em;
    line-height: 1;
    user-select: none;
    backdrop-filter: blur(6px);
    transition: color 0.2s, top 0.35s cubic-bezier(0.4, 0, 0.2, 1), right 0.3s ease;
}
body.nav_collapsed #quetes-pull-tab { top: 0; }
#quetes-pull-tab:hover {
    color: rgba(197, 212, 160, 1);
    background: rgba(10, 14, 10, 0.9);
    border-color: rgba(197, 212, 160, 0.7);
}
#quetes-pull-tab.quetes-tab-open {
    border-radius: 0 0 6px 6px;
    border: 1px solid rgba(197, 212, 160, 0.35);
    border-top: none;
}
#quetes-pull-tab.qte-dot-claim::after {
    content: '';
    position: absolute;
    top: 3px;
    right: 4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--interactive-primary, #c5d4a0);
    animation: qte-dot-pulse 1.5s ease-in-out infinite;
}
#quetes-pull-tab.qte-dot-progress::after {
    content: '';
    position: absolute;
    top: 3px;
    right: 4px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--interactive-secondary, #c9a227);
    opacity: 0.7;
}
@keyframes qte-dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.6; transform: scale(0.8); }
}
@media (prefers-reduced-motion: reduce) {
    #quetes-pull-tab.qte-dot-claim::after { animation: none; }
}

/* Tchat pull tab */
#tchat-pull-tab {
    position: fixed;
    top: 70px;
    left: 28px;
    transform: none;
    z-index: 1986;
    width: 80px;
    height: 20px;
    background: var(--t-screen);
    border-radius: 0 0 6px 0;
    border: 1px solid color-mix(in srgb, var(--t-accent1) 35%, transparent);
    border-top: none;
    border-left: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: color-mix(in srgb, var(--t-accent1) 50%, transparent);
    font-size: 0.78em;
    line-height: 1;
    user-select: none;
    backdrop-filter: blur(6px);
    transition: color 0.2s, top 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
body.nav_collapsed #tchat-pull-tab { top: 0; }
#tchat-pull-tab:hover {
    color: var(--t-accent1);
    background: var(--t-screen);
    border-color: color-mix(in srgb, var(--t-accent1) 70%, transparent);
}
#tchat-pull-tab.tchat-tab-open {
    border-radius: 0 0 0 6px;
    border: 1px solid color-mix(in srgb, var(--t-accent1) 35%, transparent);
    border-top: none;
}
.tchat-unread-count {
    font-weight: bold;
    font-size: 1.05em;
    color: color-mix(in srgb, var(--t-accent1) 85%, transparent);
}

.avataronline{
float: left;
clear: both;
padding: 0px;
margin-left: 4px;
margin-top: 4px;
width: 35px;
height: 35px;
overflow: hidden;
border-radius: 20px;
}
.wraponline{
display: inline-block;
width: 110px;
min-height: 45px;
padding: 2px;
overflow: hidden;
box-shadow: inset 1px 1px 1px #2c2c2c, 1px 1px 1px #2c2c2c;
cursor: pointer;
}
.present{
font-size: 100%;
display: block;
height: 25px;
padding-top: 2px;
padding-left: 40px;
color:var(--t-text2);
}
.deconline{
color: #555;
}
.infos{
position: absolute;
padding-left: 10px;
bottom: 0px;
}
/*zone fourre tout a gauche.*/
.ici{
min-width: 80px;
background-color: var(--bg-darkest);
padding-left: 8px;
padding-right: 23px;
padding-top: 8px;
padding-bottom: 8px;
z-index: 600;
position:absolute;
top:100px;
left:100px;
border:1px dashed #909090;
border-radius:3px;
}
.icimeuble {
    min-width: 130px;
    background: var(--bg-darker);
    border: 1px solid var(--border-medium, #5a5850);
    border-left: 2px solid #e67e22;
    border-radius: 4px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.6);
    padding: 2px;
    z-index: 2000;
    position: absolute;
    /* On laisse le JS s'occuper du top/left pour être précis */
}

.icimeuble-header {
    padding: 4px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    margin-bottom: 2px;
}

.icimeuble-header span {
    font-size: 9px;
    text-transform: uppercase;
    color: #777;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.meuble-menu-item {
    padding: 6px 10px;
    color: var(--t-text1);
    cursor: pointer;
    font-family: var(--font-family-base, "Segoe UI", Tahoma, sans-serif);
    font-size: 12px;
    border-radius: 2px;
    transition: background 0.15s ease, color 0.15s ease;
    display: flex;
    align-items: center;
}

.meuble-menu-item:hover {
    background: var(--interactive-primary-glow);
    color: var(--interactive-primary);
}

.meuble-menu-item.active {
    color: var(--t-text3);
    background: var(--bg-darkest);
    cursor: default;
    pointer-events: none;
}

.icimeuble-close {
    position: absolute;
    top: 2px;
    right: 6px;
    color: #555;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    transition: color 0.2s;
}

.icimeuble-close:hover {
    color: #e74c3c !important;
}

.no_eta:hover{
color: var(--interactive-secondary);
}
.no_eta_css{
margin: 2px;

}
/* ==========================================
   Info item popup (FakeTool)
   ========================================== */
.infoitem {
    position: absolute;
    left: 360px;
    top: 140px;
    width: 260px;
    z-index: 999999;
    background: var(--bg-darkest);
    border: 1px solid var(--border-dark);
    border-radius: 6px;
    box-shadow: 0 8px 24px var(--overlay-black-very-dark), inset 0 1px 0 rgba(100, 98, 90, 0.15);
    overflow: hidden;
    animation: panelAppear 0.2s ease-out;
}
/* ── Classes win-bar (référence themes.html) ─────────────────────── */
.win-bar,
.infoitem-titlebar,
.ent-titlebar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 36px;
    padding: 0 10px 0 12px;
    background: var(--t-bg1);
    border-bottom: 1px solid var(--t-border);
    user-select: none;
    transition: background 0.38s, border-color 0.38s;
    font-size:12px;
}
/* Coins hauts arrondis correspondant au parent */
.ent-titlebar {
    border-radius: var(--radius-large) var(--radius-large) 0 0;
}
.infoitem-titlebar {
    border-radius: 6px 6px 0 0;
}
.win-bar,
.ent-titlebar {
    cursor: move;
}
.win-bar-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.win-title,
.infoitem-name {
    font-size: 0.76em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--t-text1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.38s;
}
.win-subtitle {
    font-size: 0.70em;
    color: var(--t-text3);
    letter-spacing: 0.5px;
    transition: color 0.38s;
}
.win-close,
.infoitem-close {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
    flex-shrink: 0;
    color: var(--t-danger);
    background: rgba(200, 80, 60, 0.15);
    transition: background 0.15s, color 0.38s;
}
.win-close:hover,
.infoitem-close:hover {
    background: rgba(200, 80, 60, 0.35);
    color: #fff;
}
.infoitem-body {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    align-items: flex-start;
}
.infoitem-details {
    flex: 1;
    min-width: 0;
}
.infoitem-desc {
    font-size: 0.75em;
    color: var(--t-text3);
    font-style: italic;
    line-height: 1.4;
    margin-bottom: 6px;
}
.infoitem-sign {
    font-size: 0.75em;
    color: var(--interactive-secondary);
    margin-bottom: 5px;
}
.infoitem-stats {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 0.8em;
    color: var(--t-text1);
    line-height: 1.7;
}
.infoitem-stats span {
    display: block;
}
.infoitem-footer {
    display: flex;
    justify-content: space-between;
    padding: 5px 12px 7px;
    font-size: 0.7em;
    color: var(--t-text3);
    border-top: 1px solid rgba(70, 68, 62, 0.4);
}
.infoitem-zoom {
    cursor: zoom-in;
    position: relative;
    transition: box-shadow 0.15s;
}
.infoitem-zoom::after {
    content: '⊕';
    position: absolute;
    bottom: 1px;
    right: 1px;
    font-size: 9px;
    color: var(--interactive-secondary);
    line-height: 1;
    pointer-events: none;
}
.infoitem-zoom:hover {
    box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.55), 1px 2px 1px #2c2c2ca3 inset, 0 0 21px 0 #070707ed inset;
}
.infoitem-bigview {
    position: absolute;
    z-index: 9999999;
    background: var(--bg-darkest);
    border: 1px solid rgba(201, 162, 39, 0.45);
    border-radius: 6px;
    box-shadow: 0 12px 30px var(--overlay-black-very-dark);
    overflow: hidden;
    animation: panelAppear 0.15s ease-out;
}
.infoitem-bigview-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 28px;
    padding: 0 6px;
    background: var(--bg-darker);
    border-bottom: 1px solid var(--border-medium);
    cursor: move;
    user-select: none;
}
.infoitem-bigview img {
    display: block;
}
/* FIN info item popup */
/* === LOG PANEL === */
#log {
    position: fixed;
    top: 70px;
    right: 0;
    left: auto;
    transform: translateY(-100%);
    width: clamp(280px, 28vw, 480px);
    height: 150px;
    padding: 0;
    z-index: 1990;
    background: var(--t-screen);
    border: 1px solid var(--frame-border);
    border-top: none;
    box-shadow: none;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#log.log-open {
    transform: translateY(0);
    border-top: 1px solid var(--border-dark);
    box-shadow: 0 8px 24px rgba(0,0,0,0.75), inset 0 1px 0 rgba(100,98,90,0.15);
}
#log.log-detached {
    position: fixed;
    right: auto;
    transform: none;
    border-top: 1px solid var(--border-dark);
    box-shadow: 0 8px 24px rgba(0,0,0,0.75), inset 0 1px 0 rgba(100,98,90,0.15);
    transition: height 0.2s ease;
    overflow: hidden;
}
#log.log-detached.log-minimized {
    height: 26px !important;
}
#log.log-detached.log-minimized #contlog {
    display: none;
}
body.nav_collapsed #log.log-docked {
    top: 0;
}
#vuelog {
    display: block;
    width: 100%;
    box-sizing: border-box; /* padding inclus dans les 100% → pas de débordement +12px */
    word-wrap: break-word;
    padding: 4px 6px;
}
#contlog {
    position: absolute;
    top: 26px;
    left: 0;
    right: 0;
    bottom: 0;
    font-size: 88%;
    color: var(--t-player);
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
}
#contlog::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}
.newlog, .Boxselected {
    background-color: var(--t-accent1d);
}
/* Log toolbar */
#log-toolbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 26px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 6px;
    background: var(--t-screen);
    border-bottom: 1px solid var(--border-dark);
    z-index: 1;
    cursor: default;
}
#log.log-detached #log-toolbar { cursor: grab; }
#log.log-detached #log-toolbar:active { cursor: grabbing; }
/* Pendant l'expansion de la nav: garde les panneaux fermes a top:0 (au-dessus du viewport)
   jusqu'a ce que la nav ait couvert la zone 0-70px (z-index 2000 > 1990/1988) */
body.nav-expanding #log.log-docked:not(.log-open) {
    top: 0;
}
body.nav-expanding #zone_online_data.online-docked:not(.online-open) {
    top: 0;
}
body.nav-expanding #log-pull-tab {
    top: 0;
}
body.nav-expanding #online-pull-tab {
    top: 0;
}

.log-drag-handle {
    cursor: grab;
    color: rgba(200, 196, 184, 0.35);
    font-size: 1em;
    line-height: 1;
    flex-shrink: 0;
    display: none;
}
.log-drag-handle:active {
    cursor: grabbing;
}
#log.log-detached .log-drag-handle {
    display: block;
}
.log-title {
    flex: 1;
    font-size: 0.78em;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--t-player) 50%, transparent);
    pointer-events: none;
}
.log-btn {
    cursor: pointer;
    color: rgba(200, 196, 184, 0.3);
    font-size: 0.9em;
    line-height: 1;
    flex-shrink: 0;
    padding: 2px 3px;
    transition: color 0.15s;
}
.log-btn:hover {
    color: var(--t-text1);
}
/* Log pull tab (docked mode only) */
#log-pull-tab {
    position: fixed;
    top: 70px;
    right: 0;
    left: auto;
    transform: none;
    /* Plancher : au-dessus du décor (<=600) pour rester cliquable, sous la bande
       des fenêtres de jeu (zindex >= 1000) qui le recouvrent au focus. À l'ouverture/
       focus, le JS l'élève dans la bande zindex ; à la fermeture, il redescend ici. */
    z-index: 999;
    width: 80px;
    height: 20px;
    background: rgba(10, 14, 14, 0.75);
    border-radius: 0 0 0 6px;
    border: 1px solid color-mix(in srgb, var(--t-player) 35%, transparent);
    border-top: none;
    border-right: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: color-mix(in srgb, var(--t-player) 50%, transparent);
    font-size: 0.78em;
    line-height: 1;
    user-select: none;
    backdrop-filter: blur(6px);
    transition: color 0.2s, top 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Quand le log est ouvert, le pull tab descend sous le log pour ne pas masquer les boutons */
#log-pull-tab.log-tab-open {
    border-radius: 0 0 6px 6px;
    border: 1px solid color-mix(in srgb, var(--t-player) 35%, transparent);
    border-top: none;
}
#log-pull-tab:hover {
    color: var(--t-player);
    background: rgba(10, 20, 20, 0.9);
    border-color: color-mix(in srgb, var(--t-player) 70%, transparent);
}
body.nav_collapsed #log-pull-tab {
    top: 0;
}

/* ── Apparition des fenêtres à la restauration de position ──
   Option Paramètres « Effet d'apparition » (ct_ui_reveal). Le placement est
   instantané (plus de glissement depuis la position par défaut) ; on remplace
   le glissement par une apparition. Liste des fenêtres concernées centralisée
   ci-dessous (réutilisée par le masquage initial anti-flash). */
@keyframes cyb-ui-settle {
    from { opacity: 0; transform: translateY(16px) scale(0.94); }
    to   { opacity: 1; transform: none; }
}
.cyb-reveal-settle { animation: cyb-ui-settle 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
/* Masquage dès le premier paint (retiré par applyUI une fois positionné) →
   évite le flash « position par défaut » avant la restauration. Filet de
   sécurité JS : la classe est retirée au pire après 1.2s même si applyUI échoue. */
html.cyb-ui-revealing #designperso,
html.cyb-ui-revealing #designcarte,
html.cyb-ui-revealing .conteneur_sac,
html.cyb-ui-revealing .conteneur_inv12,
html.cyb-ui-revealing .conteneur_inv2,
html.cyb-ui-revealing .conteneur_inv3,
html.cyb-ui-revealing #log.log-detached,
html.cyb-ui-revealing #zone_online_data.online-detached,
html.cyb-ui-revealing #zone_tchat.tchat-detached,
html.cyb-ui-revealing #perso-stats-win.stats-detached,
html.cyb-ui-revealing #perso-inv-win.inv-detached,
html.cyb-ui-revealing #perso-action-win.action-detached,
html.cyb-ui-revealing #perso-evo-win.evo-detached {
    opacity: 0;
}
.InfoDeco{
background-color: #000;
}
.ecran2{
position: absolute;
display: inline-block;
width: 435px;
height: 435px;
top : 50px;
left:4px;
overflow: hidden;
box-shadow: 0 0 1px 1px var(--t-accent1d);
border: 1px solid var(--t-accent1d);
padding: 20px;
z-index: 501
}
#outil_tchato{
position: absolute;
left: -12px;
top: 5px;
width: 10px;
height: 120px;
background-image: url("../img/design/site/new/tchatf.png");
background-repeat: no-repeat;
cursor: pointer;
}
#outil_tchat{
position: absolute;
left: -45px;
top: 5px;
width: 30px;
height: 120px;
background-image: url("../img/design/site/new/tchato.png");
background-repeat: no-repeat;
cursor: pointer;
padding-left: 15px;
}
#foutiltchat{
position: absolute;
left: 0px;
top: 0px;
width: 10px;
height: 100%;
cursor: pointer; 
}
.movemebox_tchat{
cursor: move;
}
#outil_onlineo{
position: absolute;
right: -15px;
top: 8px;
width: 10px;
height: 110px;
background-image: url("../img/design/site/new/presentf.png");
background-repeat: no-repeat;
cursor: pointer;
}
#outil_online{
position: absolute;
right: -45px;
top: 8px;
width: 35px;
height: 110px;
background-image: url("../img/design/site/new/presento.png");
background-repeat: no-repeat;

}
#outil_onlinef{
position: absolute;
right: 0px;
top: 0px;
width: 10px;
height: 100%;
cursor: pointer; 
}
.movemebox_online{
cursor: move;
}
.closemebox{
top: 5px;
cursor: pointer;
right: -30px;
}
.movemebox{
top: 30px;
cursor: move;
right: -30px;
}
#outils_zoneperso{
height: 40px;
position: absolute;
right: -7px;
top: -5px;
width: 30px;
}
.movemeperso{
cursor: move;
}
.closemebox,.movemebox{
position: absolute;
display: inline-block;
width: 20px;
height: 20px;
margin: 1px;
text-align: center;
font-size: 85%;
border: 1px solid #303030;
box-shadow:  0px 1px 4px 0px #070707;
color: #bbb;
line-height: 18px;
}
.inv1, .inv2,.inv3 , .inv4, .inv5, .inv6, .inv7,
 .inv11, .inv8,  .inv9, .inv10, .inv12{
position: absolute;
width:40px;
height:40px;
box-shadow: inset 1px 2px 1px #2c2c2c, 1px 2px 1px #101010, inset 0px 0px 10px 0px var(--sac-case-shadow, #070707);
padding: 2px;
background-color: var(--sac-case-bg, #DADADA);
}
#invpersonnage div{
cursor: pointer;
}
.inv1{
top:20px;
}
.inv2{
top:70px;
}
.inv3{
top:120px;
}
.inv4 , .inv7, .inv11{  
top:170px;
}
.inv5{
left:110px;
top:20px;
}
.inv8{
left:10px;
top:20px;
}
.inv9{
left:10px;
top:70px;
}
.inv10{
left:110px;
top:70px;
}
.inv12{
left:10px;
top:120px;
}
.inv6{
left:190px;
top:20px;
}
.inv7{
left:190px;
top:70px;
}
.inv1, .inv2, .inv3, .inv4{
left:60px;
}
.inv11{
left:10px;
}

.inv1_look, .inv2_look,.inv3_look , .inv4_look, .inv5_look, .inv6_look, .inv7_look,
 .inv11_look, .inv8_look,  .inv9_look, .inv10_look, .inv12_look{
position: absolute;
width:40px;
height:40px;
box-shadow: inset 1px 2px 1px #2c2c2c, 1px 2px 1px #101010, inset 0px 0px 10px 0px #070707;
padding: 2px;
background-color: #DADADA;
}

.inv1_look{
top:20px;
}
.inv2_look{
top:70px;
}
.inv3_look{
top:120px;
}
.inv4_look , .inv7_look, .inv11_look{  
top:170px;
}
.inv5_look{
left:110px;
top:20px;
}
.inv8_look{
left:10px;
top:20px;
}
.inv9_look{
left:10px;
top:70px;
}
.inv10_look{
left:110px;
top:70px;
}
.inv12_look{
left:10px;
top:120px;
}
.inv6_look{
left:190px;
top:20px;
}
.inv7_look{
left:190px;
top:70px;
}
.inv1_look, .inv2_look, .inv3_look, .inv4_look{
left:60px;
}
.inv11_look{
left:10px;
}


/*rezible*/
.ui-icon { width: 16px; height: 16px; background-image: url(../img/design/icones/ui-icons_222222_256x240.png)/*{iconsContent}*/; }
.ui-resizable { position: relative;}
.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block;}
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0px; }
.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0px; }
.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0px; height: 100%; }
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0px; height: 100%; }
.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}
.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }

/* Interaction states
----------------------------------*/
.ui-state-default, .ui-widget-content .ui-state-default { border: 1px solid #d3d3d3/*{borderColorDefault}*/; background: #e6e6e6/*{bgColorDefault}*/ /*{bgImgUrlDefault}*/ 0/*{bgDefaultXPos}*/ 50%/*{bgDefaultYPos}*/ repeat-x/*{bgDefaultRepeat}*/; font-weight: normal/*{fwDefault}*/; color: #555555/*{fcDefault}*/; outline: none; }
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #555555/*{fcDefault}*/; text-decoration: none; outline: none; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus { border: 1px solid #999999/*{borderColorHover}*/; background: #dadada/*{bgColorHover}*/ /*{bgImgUrlHover}*/ 0/*{bgHoverXPos}*/ 50%/*{bgHoverYPos}*/ repeat-x/*{bgHoverRepeat}*/; font-weight: normal/*{fwDefault}*/; color: #212121/*{fcHover}*/; outline: none; }
.ui-state-hover a, .ui-state-hover a:hover { color: #212121/*{fcHover}*/; text-decoration: none; outline: none; }
.ui-state-active, .ui-widget-content .ui-state-active { border: 1px solid #aaaaaa/*{borderColorActive}*/; background: #ffffff/*{bgColorActive}*/ /*{bgImgUrlActive}*/ 0/*{bgActiveXPos}*/ 50%/*{bgActiveYPos}*/ repeat-x/*{bgActiveRepeat}*/; font-weight: normal/*{fwDefault}*/; color: #212121/*{fcActive}*/; outline: none; }
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #212121/*{fcActive}*/; outline: none; text-decoration: none; }

/* Repère « ici tu peux déposer » pendant un drag (zones droppables : cases
   d'inventaire, conteneurs, carte…). Classe maison ct-drop-active posée par JS
   (cf. ingame.php) : on N'utilise PAS .ui-state-active pour éviter le style
   jQuery UI par défaut (bordure claire + fond). Ici uniquement un liseré
   pointillé gris neutre, SANS fond ni bordure → la case/carte reste intacte
   dessous. outline (et non border) → aucun décalage de layout. */
.ui-droppable.ct-drop-active {
    outline: 1px solid color-mix(in srgb, var(--t-text1) 65%, transparent);
    outline-offset: -2px;
}

/* Interaction Cues
----------------------------------*/
.ui-state-highlight, .ui-widget-content .ui-state-highlight {border: 1px solid #fcefa1/*{borderColorHighlight}*/; background: #fbf9ee/*{bgColorHighlight}*/ /*{bgImgUrlHighlight}*/ 0/*{bgHighlightXPos}*/ 50%/*{bgHighlightYPos}*/ repeat-x/*{bgHighlightRepeat}*/; color: #363636/*{fcHighlight}*/; }
.ui-state-highlight a, .ui-widget-content .ui-state-highlight a { color: #363636/*{fcHighlight}*/; }
.ui-state-error, .ui-widget-content .ui-state-error {border: 1px solid #cd0a0a/*{borderColorError}*/; background: #fef1ec/*{bgColorError}*/ /*{bgImgUrlError}*/ 0/*{bgErrorXPos}*/ 50%/*{bgErrorYPos}*/ repeat-x/*{bgErrorRepeat}*/; color: #cd0a0a/*{fcError}*/; }
.ui-state-error a, .ui-widget-content .ui-state-error a { color: #363636/*{fcError}*/; }
.ui-state-error-text, .ui-widget-content .ui-state-error-text { color: #cd0a0a/*{fcError}*/; }
.ui-state-disabled, .ui-widget-content .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; }
.ui-priority-primary, .ui-widget-content .ui-priority-primary { font-weight: bold; }
.ui-priority-secondary, .ui-widget-content .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; }


/*Bouton switch menu Ig*/
.cmn-toggle {
  position: absolute;
  margin-left: -50px;
  visibility: hidden;
}
.cmn-toggle + label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  user-select: none;
}
input.cmn-toggle-round + label {
  padding: 2px;
  width: 30px;
  height: 12px;
  background-color: #dddddd;
  border-radius: 60px;
  float: right;
}
#switchafk input.cmn-toggle-round + label {
  top: 13px;
  right: 60px;

}
#switchdrag input.cmn-toggle-round + label {
  top: 13px;
  right:35px;

}

#switchtchatsound input.cmn-toggle-round + label {
  top: 13px;
  right:35px;

}
input.cmn-toggle-round + label:before,
input.cmn-toggle-round + label:after {
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  content: "";
}
input.cmn-toggle-round + label:before {
  right: 1px;
  background-color: #999;
  border-radius: 60px;
  transition: background 0.4s;
}
input.cmn-toggle-round + label:after {
  width: 12px;
  background-color: #fff;
  border-radius: 60px;
  box-shadow: 0 2px 5px var(--overlay-black-light);
  transition: margin 0.4s;
}
input.cmn-toggle-round:checked + label:before {
  background-color: #8ce196;
}
input.cmn-toggle-round:checked + label:after {
  margin-left: 20px;
}
#switchafk input.cmn-toggle-round:checked + label:before {
  background-color: var(--t-danger);
}

/*MODULE MESSAGERIE*/
#menucom{
position: absolute;
display: inline-block;
width: 475px;
height: 55px;
top : 475px;
left:44px;
overflow: hidden;
z-index: 500;
border-top:1px solid var(--t-accent1d);
background: none repeat scroll 0 0 rgba(10, 10, 10, 0.99);
}
#messagerie{
position: absolute;
display: inline-block;
width: 475px;
height: 100%;
overflow: hidden;
z-index: 500;
box-shadow: inset 0px -50px 50px 10px #070707;
background-image: url('../img/design/com/com_mess_inter1.png');
}
.boitemess{
display: inline-block;
margin: 1px;
padding: 5px;
width: 300px;
word-wrap:break-word;
overflow: hidden;
height: 12px;
}
#infomess{
position: absolute;
left: 190px;
top:12px;
}
.mess{
max-width: 98%x;
padding: 18px;
padding-bottom: 50px;
word-wrap: break-word;
}
#contenumess{
position: absolute;
top:20px;
left: 20px;
width: 432px;
display: block;
position: relative;
height:330px;
overflow: auto;
text-align:justify;
}
#contenumess_rep{
position: absolute;
top:20px;
left: 20px;
width: 432px;
display: block;
position: relative;
height:150px;
overflow: auto;
}
.datemessage{
position: absolute;
top :10px;
right: 35px;
}
.inline{
display: inline;
vertical-align: top;
clear: both;
}
.pseudomessage{
position: absolute;
display: inline;
vertical-align: top;
font-variant: small-caps;
font-weight: 700;
}
.datemess{
position: absolute;
display: inline;
top: 30px;
}
.sujetmess{
position: absolute;
display: inline-block;
top: 50px;
}
.entetemess{
position: relative;
height: 50px;
border-top:3px solid #101010;
padding: 15px;
padding-bottom: 30px;
background: none repeat scroll 0 0 var(--overlay-black-darker);
}
.entetemess img{
padding: 5px;
margin-right: 10px;
}
/*NOUVEAU MESS*/
.menunewmes{
box-shadow: 0px 0px 4px 0px #b90b0b;
}
.btn_mess{
font-size: 75%;
width: 35px;
height: 35px;
overflow: hidden;
display: inline-block;
position: center;
background-color: transparent;
border-radius: 2px;
margin-left: 5px;
margin-top: 10px;
text-decoration: none;
text-align: center;
border: 0px;
}
.btn_mess:hover,.btn_mess:focus{
cursor: pointer;
background-color: var(--t-accent1d);
}
#messaff{
position: relative;
}
#messform{
padding-top: 5px;
}
#messform > input{
margin: 2px;
border-radius: 2px;
color: #ddd;
box-shadow: none;
background: none;
font-size: 13px;
}
#messujet{
width: 420px;
}
#messform > textarea{
border-radius: 2px;
color: #ddd;
box-shadow: none;
background: none;
resize: none;
}
#messform2{
padding-top: 5px;
}
#messtxt{
height: 263px;
width: 420px;
font-size: 13px;
margin: 2px;
}
#messtxt_rep{
height: 170px;
width: 424px;
font-size: 13px;
margin-left: 20px;
border-top: 1px solid #101010;
border-radius: 2px;
color: #ddd;
box-shadow: none;
background: none;
resize: none;
}
.wrapmess{
padding: 2px;
position: relative;
border-bottom: 1px dashed #101010;
cursor: pointer;
}
.wrapmess:hover{
border-bottom:1px dashed #707070;
color: #e38c11;
}
.newmes{
background: none repeat scroll 0 0 rgba(185, 11, 11, 0.5);
}
.newmes:hover{
background-image: linear-gradient(to bottom, #ED5C6B, #b90b0b);
padding-left: 5px;
color: #ddd;
}
.newmes:active{
background-image: linear-gradient(to bottom, #b90b0b, #ED5C6B);
}
#ecran_com{
position: absolute;
display: inline-block;
width: 475px;
height: 420px;
top:55px;
left:44px;
overflow: hidden;
background-color: #000;
}
#menu_mess{
position: absolute;
right: 55px;
bottom:15px;
}
#visu_mess{
position: absolute;
top: 20px;
left: 20px;
width: 435px;
height: 360px;
}
.new_btn{
width: 35px;
height: 35px;
display: inline-block;
background-color: transparent;
border-radius: 2px;
margin-left: 5px;
margin-top:10px;
cursor: pointer;
border: 0px;
}
.com004{
position: relative;
top: 6px;
}
#messform2 .com004{
position: relative;
top: 8px;
left: 45px;
}
#messform2 .com001{
position: relative;
top: 8px;
left: 50px;
}
.fleche_droite,.fleche_gauche, .page_courante{
width: 35px;
height: 35px;
background-color: transparent;
cursor: pointer;
position: absolute;
}
.fleche_droite{
background-image: url('../img/design/com/com_mess__suiv.png');
top: 5px;
left: 90px;
}
.fleche_gauche{
background-image: url('../img/design/com/com_mess__prec.png');
top: 5px;
left: 15px;
}
.page_courante{
background-image: url('../img/design/com/com_mess__act.png');
text-decoration: none;
text-align: center;
color: #000;
font-weight: 700;
padding-top: 8px;
top: 5px;
left: 55px;
}
#acc_mabout {
    background: var(--bg-medium);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-large);
    padding: 20px;
    font-size: 13px;
    box-shadow: inset 0 1px 0 rgba(120, 115, 105, 0.1), var(--shadow-soft);
}

.footermess{
position: absolute;
width: 200px;
bottom: -10px;
height: 25px;
}
.footermess2{
position: absolute;                
width: 200px;
bottom: 30px;
height: 25px;
left: 50px;
}
#visu_mess .closefaq{
right : 5px;
display: inline;
float: right;
position: relative;

}

/* =====================================================================
   TUTORIEL / HINTS D'INTERFACE  (cf. js/cyb_tuto.js)
   Halo pulsant sur la cible + anneau lumineux + bulle d'explication.
   Couleurs/rayons en variables de thème (piège #6) avec fallback.
   ===================================================================== */

/* Halo appliqué directement sur la cible (pull-tab, onglet, bouton…). */
@keyframes cyb-tuto-pulse {
    0%   { box-shadow: 0 0 0 0 var(--interactive-secondary-glow, rgba(215,175,105,0.45)); }
    70%  { box-shadow: 0 0 0 8px rgba(215,175,105,0); }
    100% { box-shadow: 0 0 0 0 rgba(215,175,105,0); }
}
.cyb-tuto-pulse {
    /* Uniquement l'animation : NE PAS toucher position/border-radius de la cible
       (les pull-tabs et boutons nav sont position:fixed — un position:relative
       les sortirait de leur ancrage). Le box-shadow suit la forme de l'élément. */
    animation: cyb-tuto-pulse 1.4s ease-out infinite;
}

/* Flèche de la barre du haut (très atténuée par défaut) : on la rend franchement
   visible quand le tuto la cible. Aucun changement de géométrie → anneau aligné. */
.nav_collapse_btn.cyb-tuto-pulse,
.nav_expand_btn.cyb-tuto-pulse {
    color: var(--interactive-secondary, #c9a227);
    background: rgba(201, 162, 39, 0.22);
    border-color: var(--interactive-secondary-border, rgba(215, 175, 105, 0.7));
    text-shadow: 0 0 6px var(--interactive-secondary-glow, rgba(215, 175, 105, 0.6));
}

/* Anneau lumineux dessiné PAR-DESSUS la cible (élément body-level fixe :
   échappe aux stacking contexts du plateau, ne bloque jamais le clic). */
@keyframes cyb-tuto-ring {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
}
.cyb-tuto-ring {
    position: fixed;
    pointer-events: none;
    border: 2px solid var(--interactive-secondary, #c9a227);
    border-radius: var(--radius-medium, 6px);
    box-shadow: 0 0 12px 2px var(--interactive-secondary-glow, rgba(215,175,105,0.45));
    animation: cyb-tuto-ring 1.4s ease-in-out infinite;
}

/* Bulle d'explication */
.cyb-tuto-bubble {
    position: fixed;
    max-width: 280px;
    min-width: 180px;
    background: var(--bg-darker, #1a1e28);
    border: 1px solid var(--interactive-secondary-border, rgba(215,175,105,0.7));
    border-radius: var(--radius-medium, 6px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.7);
    padding: 12px 14px 10px;
    color: var(--t-text1, #ecf0f1);
    font-size: 0.86em;
    line-height: 1.45;
}
.cyb-tuto-title {
    color: var(--interactive-secondary, #c9a227);
    font-weight: bold;
    letter-spacing: 0.4px;
    margin-bottom: 5px;
    padding-right: 14px;
}
.cyb-tuto-text {
    color: var(--t-text2, #bdc3c7);
}
.cyb-tuto-text b { color: var(--t-text1, #ecf0f1); }
.cyb-tuto-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}
.cyb-tuto-step {
    margin-right: auto;
    font-size: 0.85em;
    color: var(--text-muted, #95a5a6);
    letter-spacing: 0.5px;
}
.cyb-tuto-btn {
    padding: 5px 12px;
    border: 1px solid var(--border-medium, rgba(255,255,255,0.18));
    border-radius: var(--radius-small, 4px);
    background: transparent;
    color: var(--t-text2, #bdc3c7);
    cursor: pointer;
    font-size: 0.92em;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.cyb-tuto-btn:hover {
    color: var(--t-text1, #ecf0f1);
    border-color: var(--interactive-secondary-border, rgba(215,175,105,0.7));
}
.cyb-tuto-btn-primary {
    background: var(--interactive-secondary, #c9a227);
    border-color: var(--interactive-secondary, #c9a227);
    color: var(--bg-darkest, #11141b);
    font-weight: bold;
}
.cyb-tuto-btn-primary:hover {
    background: var(--interactive-secondary-light, #e0c580);
    border-color: var(--interactive-secondary-light, #e0c580);
    color: var(--bg-darkest, #11141b);
}
.cyb-tuto-close {
    position: absolute;
    top: 6px;
    right: 9px;
    cursor: pointer;
    color: var(--text-muted, #95a5a6);
    font-size: 1.3em;
    line-height: 1;
    opacity: 0.6;
}
.cyb-tuto-close:hover { opacity: 1; color: var(--t-text1, #ecf0f1); }

/* Accessibilité : pas d'animation si l'utilisateur l'a désactivée. */
@media (prefers-reduced-motion: reduce) {
    .cyb-tuto-pulse, .cyb-tuto-ring { animation: none; }
}