/*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(--border-light);
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(--border-dark);
    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: 210px;
    left: 28px;
    width: 291px;
    height: 305px;
    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 #c87832; padding-left: 5px; color: #e09050; }

/* === 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); }
}
#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; }
#mapp.cyb-shake { animation: cyb-shake 0.45s ease-in-out; }
/* === Fin Zone Tchat === */

/*

Zone DRoite IG

*/
#droite{
position: absolute;
left: 387px;
top: 40px;
}
/*Info lieux - batiment ..*/
#deplacecarte{
    cursor: move;
    height: 32px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    background: linear-gradient(180deg, color-mix(in srgb, var(--t-accent1) 7%, transparent) 0%, transparent 100%);
}
#informations{
    position: absolute;
    top: 0;
    left: 4px;
    right: 4px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 499;
    pointer-events: none;
    overflow: hidden;
    white-space: nowrap;
}

#informations_lieux > div{
    display: inline-flex;
    margin-left: 2px;
    padding: 1px 4px;
    font-size: 0.85em;
}
#designcarte {
    position: absolute;
    height: 509px;
    width: 479px;
    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;
    border: 1px solid color-mix(in srgb, var(--t-accent1) 18%, transparent);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.9), 0 10px 40px rgba(0,0,0,0.9);
}
/* ══════════════════════════════════════════════════════════════
   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 principaux + ticks mi-bord ─────────── */
#designcarte::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 498;
    background:
        /* TL — long-H 26px, court-V 11px */
        linear-gradient(var(--t-hud-c68), var(--t-hud-c68)) top left     / 26px 2px  no-repeat,
        linear-gradient(var(--t-hud-c68), var(--t-hud-c68)) top left     / 2px  11px no-repeat,
        /* TR — court-H 11px, long-V 26px */
        linear-gradient(var(--t-hud-c68), var(--t-hud-c68)) top right    / 11px 2px  no-repeat,
        linear-gradient(var(--t-hud-c68), var(--t-hud-c68)) top right    / 2px  26px no-repeat,
        /* BL — court-H 11px, long-V 26px */
        linear-gradient(var(--t-hud-c68), var(--t-hud-c68)) bottom left  / 11px 2px  no-repeat,
        linear-gradient(var(--t-hud-c68), var(--t-hud-c68)) bottom left  / 2px  26px no-repeat,
        /* BR — long-H 26px, court-V 11px */
        linear-gradient(var(--t-hud-c68), var(--t-hud-c68)) bottom right / 26px 2px  no-repeat,
        linear-gradient(var(--t-hud-c68), var(--t-hud-c68)) bottom right / 2px  11px no-repeat;
}

/* ── DESIGNCARTE : marques extérieures ─────────────────────── */
#designcarte::after {
    content: '';
    position: absolute;
    inset: -10px;
    pointer-events: none;
    z-index: 498;
    background:
        linear-gradient(var(--t-hud-c60), var(--t-hud-c60)) top left     / 24px 1px  no-repeat,
        linear-gradient(var(--t-hud-c60), var(--t-hud-c60)) top left     / 1px  24px no-repeat,
        linear-gradient(var(--t-hud-c60), var(--t-hud-c60)) top right    / 24px 1px  no-repeat,
        linear-gradient(var(--t-hud-c60), var(--t-hud-c60)) top right    / 1px  24px no-repeat,
        linear-gradient(var(--t-hud-c60), var(--t-hud-c60)) bottom left  / 24px 1px  no-repeat,
        linear-gradient(var(--t-hud-c60), var(--t-hud-c60)) bottom left  / 1px  24px no-repeat,
        linear-gradient(var(--t-hud-c60), var(--t-hud-c60)) bottom right / 24px 1px  no-repeat,
        linear-gradient(var(--t-hud-c60), var(--t-hud-c60)) bottom right / 1px  24px no-repeat;
}

/* ── 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;
}
/* CRT dirty-screen hover for action/tool buttons */
#outil_map .mpouti:hover,
#outil_perso .mpouti:hover {
    background-color: rgba(14,20,15,0.97) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t-accent1) 52%, transparent);
    border-radius: 2px;
}
/* Active tool — inner glow thémé */
#outil_map div[active="1"],
#outil_perso div[active="1"] {
    background-color: color-mix(in srgb, var(--t-accent2) 8%, var(--bg-darkest)) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t-accent2) 90%, transparent), inset 0 0 8px color-mix(in srgb, var(--t-accent2) 20%, 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;
}
#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(--border-dark);
    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) 7%, transparent);
}
.perso-tab.tab-active {
    color: var(--t-player);
    background: color-mix(in srgb, var(--t-player) 10%, transparent);
    border-top: 1px solid color-mix(in srgb, var(--t-player) 35%, transparent);
    margin-top: -1px;
}

/* 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(--border-dark);
    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;
}
#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(--border-dark);
    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 {
    background-color: rgba(14,20,15,0.85) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t-accent1) 40%, 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 {
    background-color: color-mix(in srgb, var(--t-accent1) 8%, var(--bg-darkest)) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t-accent1) 52%, transparent);
    border-radius: 2px;
}
#perso-action-body div[active="1"] {
    background-color: color-mix(in srgb, var(--t-accent2) 8%, var(--bg-darkest)) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t-accent2) 90%, transparent), inset 0 0 8px color-mix(in srgb, var(--t-accent2) 20%, transparent) !important;
}


/* ── Fenêtre évolution ─────────────────────────────────── */
#perso-evo-win {
    position: absolute;
    width: 290px;
    background: var(--t-screen);
    border: 1px solid var(--border-dark);
    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-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); }

#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;
}

.conteneur_sac .wrapcasesac, .conteneur_inv12 .wrapcasesac,.conteneur_inv2 .wrapcasesac,.conteneur_inv3 .wrapcasesac, .conteneur_sac_meuble .wrapcasesac, .conteneur_sac_don .wrapcasesac{
position: relative;
display: inline-block;
width: 54px;
height: 54px;
margin: 1px;
}

.conteneur_sac_meuble .wrapcasesac, .conteneur_sac_don .wrapcasesac{
  margin: 2px;
}

.conteneur_sac .casesacss,.conteneur_inv12 .casesacss,.conteneur_inv2 .casesacss,.conteneur_inv3 .casesacss,.conteneur_sac_meuble .casesacss, .conteneur_sac_don .casesacss {
position: absolute;
/*display: inline-block;*/
width: 54px;
height: 54px;
box-shadow: inset 1px 2px 1px #2c2c2c, 1px 2px 1px #101010, inset 0px 0px 10px 0px #070707;
background-color: #DADADA;
/*margin: 1px;*/
/* padding: 7px; */
}

.conteneur_sac_autre .items_sac {
    background-color: #DADADA;
    box-shadow: 1px 2px 1px #2c2c2c inset, 1px 2px 1px #101010, 0 0 10px 0 #070707 inset;
    display: inline-block;
    height: 40px;
    margin: 5px;
    padding: 2px;
    position: relative;
    width: 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 */
#bandeaumapp{
    position: absolute;
    top: 0px;
    height: 28px;
    background: var(--overlay-black-darker);
    width: 100%;
    z-index: 199;
    display: flex;
    align-items: center;
    padding: 0 6px;
    box-sizing: border-box;
    gap: 10px;
    justify-content: flex-end;
    border-bottom: 1px solid color-mix(in srgb, var(--t-accent1) 8%, transparent);
}
#labelInTens, #labelInCrim {
    font-size: 0.76em;
    white-space: nowrap;
    color: rgba(140,138,130,0.7);
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}
#InTens, #InCrim {
    width: 26px;
    background: transparent;
    border: none;
    border-bottom: 1px solid color-mix(in srgb, var(--t-accent1) 45%, transparent);
    color: var(--t-accent1);
    font-family: inherit;
    font-size: 0.88em;
    text-align: center;
    pointer-events: none;
    padding: 0;
}
/*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: 2px;
    width: 475px;
    height: 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;
}
/* ── Barre de cooldown (défile de gauche à droite en 2s) ──────── */
#map-cooldown-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: color-mix(in srgb, var(--t-accent1) 65%, transparent);
    transform-origin: left center;
    transform: scaleX(0);
    opacity: 0;
    z-index: 210;
    pointer-events: none;
}
@keyframes cooldown-fill {
    0%    { transform: scaleX(0); opacity: 0.7; }
    87.5% { transform: scaleX(1); opacity: 0.7; }
    100%  { transform: scaleX(1); opacity: 0;   }
}
#map-cooldown-bar.bar-active {
    animation: cooldown-fill 2.29s linear forwards;
}

#labelInTens{
    position: static;
    left: auto;
    display: flex;
    align-items: center;
    font-size: 10px;
    font-variant: small-caps;
}
#labelInCrim{
    position: static;
    left: auto;
    display: flex;
    align-items: center;
    font-size: 10px;
    font-variant: small-caps;
}
#InCrim{
    display: inline-block;
    width: 26px;
    background: transparent;
    cursor: default;
    padding: 0;
    border: none;
    border-bottom: 1px solid color-mix(in srgb, var(--t-accent1) 45%, transparent);
    text-align: center;
    font-size: 80%;
    color: var(--t-accent1);
    z-index: 199;
}
#InTens{
    display: inline-block;
    width: 26px;
    background: transparent;
    cursor: default;
    padding: 0;
    border: none;
    border-bottom: 1px solid color-mix(in srgb, var(--t-accent1) 45%, transparent);
    text-align: center;
    font-size: 80%;
    color: var(--t-accent1);
    z-index: 199;
}

/*GP carte*/
/* outil_map — dock configurable (right/left/bottom) */
#outil_map {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    gap: 4px;
    z-index: 500;
}
#outil_map::before {
    content: '';
    position: absolute;
    inset: 0;
    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);
    z-index: -1;
    pointer-events: none;
}
/* Dock droit (par défaut) */
#designcarte.dock-right #outil_map {
    flex-direction: column;
    left: 481px;    /* 2 + 475 + 4 */
    top: 133px;     /* 32 + (475 - 274) / 2 */
    width: 58px;
}
/* Dock gauche */
#designcarte.dock-left #outil_map {
    flex-direction: column;
    left: -60px;    /* 2 - 4 - 58 */
    top: 133px;
    width: 58px;
}
/* Dock bas */
#designcarte.dock-bottom #outil_map {
    flex-direction: row;
    top: 511px;     /* 32 + 475 + 4 */
    left: 103px;    /* 2 + (475 - 274) / 2 */
    height: 58px;
}
#designcarte.dock-bottom #outil_map::before {
    border-top: 1px solid color-mix(in srgb, var(--t-accent1) 12%, transparent);
    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,#outil_map  div {
    
   /* display: inline-block;*/
   /* font-size: 85%;*/
    height: 50px;
   /* margin: 2px;*/

    /*text-align: center;*/
    width: 50px;
    /*position: absolute;*/
}
/*MODULE MAPP*/
#grillemap{
position: absolute;
display: inline-block;
width: 475px;
height: 475px;
z-index: 100;
background-repeat: no-repeat;


}
#grillemap .divmap{
position: relative;
width: 25px;
height: 25px;
float:left;
opacity: 1.0;
display: inline-block;
}
#cachezone{
position: absolute;
z-index: 103;
}
#Z1, #Z2, #Z3{
width: 475px;
height: 475px;
position: absolute;
display: inline-block;
background-repeat: no-repeat;

}
#mapp{
position: absolute;
display: inline-block;
width: 475px;
height: 475px;
top : 32px;
left:2px;
overflow: hidden;
cursor: pointer;
border: 1px solid color-mix(in srgb, var(--t-accent1) 32%, transparent);
box-shadow:
    0 0 0 1px rgba(0,0,0,0.85),
    0 0 14px 4px color-mix(in srgb, var(--t-accent1) 12%, transparent),
    inset 0 0 60px rgba(0,0,0,0.55),
    inset 0 0 20px rgba(0,0,0,0.30);
}
/* #mapp::after — scanlines removed, CRT pattern on #designcarte frame instead */
#mapcible{
position: absolute;
display: none;
width: 25px;
height: 25px;
border: 1px solid var(--t-accent1);
cursor: pointer;
box-shadow: 0 0 1px 1px var(--t-accent1);
z-index: 200;
top: 225px;
left: 225px;
}
#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;
box-shadow:
    inset 0 0 90px rgba(0,0,0,0.75),
    inset 0 0 30px rgba(0,0,0,0.45),
    inset 0 4px 14px rgba(0,0,0,0.98),
    inset 0 -4px 14px rgba(0,0,0,0.98),
    inset 4px 0 14px rgba(0,0,0,0.65),
    inset -4px 0 14px rgba(0,0,0,0.65);
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;
}

/* === 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: #006064;  
}
#lagrille div span .c2{
background-color: #640000; 
}
#lagrille div span .c3{
background-color: #645900; 
}
.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(--border-dark);
    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%;
    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;
    z-index: 1987;
    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);
}

/* 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: all 0.2s ease;
    display: flex;
    align-items: center;
}

.meuble-menu-item:hover {
    background: rgba(230, 126, 34, 0.15);
    color: #e67e22;
    padding-left: 14px;
}

.meuble-menu-item.active {
    color: var(--t-player);
    background: color-mix(in srgb, var(--t-player) 10%, transparent);
    border-right: 2px solid var(--t-player);
    cursor: default;
    pointer-events: none;
}

.meuble-menu-item span {
    margin-right: 6px;
    font-size: 14px;
}

.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(--border-dark);
    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%;
    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;
    z-index: 1989;
    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;
}
/* Save UI animation */
@keyframes ui-saved {
    0%   { box-shadow: 0 0 0 0 rgba(201,162,39,0.6); color: #f0d060; }
    70%  { box-shadow: 0 0 0 8px rgba(201,162,39,0); }
    100% { box-shadow: none; color: inherit; }
}
.ui-saving {
    animation: ui-saved 0.9s ease forwards;
}
.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 #070707;
padding: 2px;
background-color: #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; }

/* 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;

}