/* =====================================================================
   Habbom CMS — thème complet « Moderne Sombre »
   La mise en page du thème « Habbo Moderne » (titres Ubuntu Condensed en majuscules, boîtes à bordure,
   boutons à ombre portée, pied de page collé en bas, aucun emoji) avec les couleurs et les images
   du thème « Nocturne violet » (indigo, ardoise, violet, bandeau en pixels).
   Chargé après app.css, seulement quand ce thème est choisi (Paramètres → Fond du site). Les emojis sont retirés par theme-moderne.js.
   ===================================================================== */
:root{
  --neon:#3a3854;--neon-hi:#5a5876;--neon-d:#3d3b55;--neon-deep:#2b2a3e;--neon-soft:#b88cf2;--neon-ink:#fff;--neon-rgb:169,95,214;
  --bg:#2b2a3e;--bg-rgb:43,42,62;
  --panel:#3d3b55;--panel2:#1d1c2b;--field:#fff;--line:#55536f;--line2:#5a5876;
  --text:#ffffff;--muted:#b9b6cc;--cream:#ffffff;
  --danger:#ff6b81;--warn:#ffb86b;
  --mo-deep:#2b2a3e;--mo-mid:#33324a;--mo-box:#3d3b55;--mo-border:#55536f;--mo-band:#1d1c2b;--mo-dark:#1d1c2b;
  --mo-blue:#3a3854;--mo-blue-b:#5a5876;--mo-blue-h:#8a87a8;
  --mo-green:#a95fd6;--mo-green-b:#d9b8f2;--mo-green-h:#bf7ee6;--mo-green-hb:#ead7fa;--mo-green-a:#8c45bb;
  --mo-yellow:#c06ff0;--mo-yellow-b:#d28cf5;
  --mo-link:#b88cf2;--mo-shadow:0 3px 0 1px rgba(0,0,0,.3);
  --title:"Ubuntu Condensed","Ubuntu","Trebuchet MS",Tahoma,sans-serif;
  --body:"Ubuntu","Trebuchet MS","Lucida Grande",Tahoma,sans-serif;
  --r:5px;--r-s:4px;
}
body{color:var(--text);font-family:var(--body)}
::selection{background:rgba(169,95,214,.55);color:#fff}
a{color:var(--mo-link)}
a:hover{color:#fff}
h1,h2,h3{font-family:var(--title);font-weight:400;letter-spacing:.01em;color:#fff}
h1{text-transform:uppercase}
.wrap>h1,.wrap>.page-head h1,.wrap>.row h1,main>h1{text-transform:uppercase;text-shadow:0 2px 0 rgba(0,0,0,.35)}
h3{color:var(--mo-link)}
.muted,.meta,.hint{color:var(--muted)}

/* ---------------- En-tête : ciel bleu avec nuages en pixels, barre noire translucide, navigation blanche */
.topbar{position:relative;background:none;border-bottom:0;backdrop-filter:none;-webkit-backdrop-filter:none}
.topbar::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,.28)),
    url('themes/moderne-nuage-gauche.png') left top/auto 130% no-repeat,
    url('themes/moderne-nuage-droite.png') right top/auto 130% no-repeat,
    linear-gradient(180deg,#2b2a3e,#3a3854 60%,#5a5876);
  image-rendering:pixelated}
.topbar-in{min-height:110px;padding:12px 0}
.topbar-in,.tabs-in,.wrap{width:min(100% - 28px,1200px)}
.brand span{color:#fff;font:400 34px/1 var(--title);text-transform:uppercase;letter-spacing:.02em;
  text-shadow:0 3px 0 #1d1c2b,2px 0 0 #1d1c2b,-2px 0 0 #1d1c2b,0 -2px 0 #1d1c2b,0 6px 6px rgba(0,0,0,.35)}
.brand img{filter:drop-shadow(0 3px 0 rgba(0,0,0,.35))}
.tool,.me-chip{background:var(--mo-blue);border:2px solid var(--mo-blue-b);border-radius:var(--r);color:#fff;box-shadow:var(--mo-shadow)}
.tool:hover,.tool:focus-visible,.tool[aria-expanded="true"],.me-chip:hover{background:var(--mo-blue-b);border-color:var(--mo-blue-h);color:#fff}
.me-name{color:#fff}
.me-name small{color:#d9b8f2}
.home-btn{background:var(--mo-green);border:2px solid var(--mo-green-b);border-radius:var(--r);color:#fff;box-shadow:var(--mo-shadow);font-weight:700}
.home-btn:hover,.home-btn.on{background:var(--mo-green-h);border-color:var(--mo-green-hb);color:#fff}
.tool.tool-logout{background:var(--mo-blue);border:2px solid var(--mo-blue-b);color:#fff}
.tool.tool-logout:hover{background:#5c2d42;border-color:#ff9aa9;color:#fff}

.tabs{background:rgba(255,255,255,.94);border-top:0;border-bottom:0;box-shadow:0 2px 0 rgba(0,0,0,.25)}
.tabs-in{gap:2px}
.tabs a,.tabs .tab-off{position:relative;padding:16px 14px 14px;color:var(--mo-deep);font:500 15px/1 var(--body);border:0;background:none;text-shadow:none;letter-spacing:0}
.tabs a:hover{color:var(--mo-blue);background:none}
.tabs a.on{color:var(--mo-blue);background:none}
.tabs a.on::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:4px;background:var(--mo-blue-b)}
.tabs .tab-off{opacity:.5}
.tabs .tab-off small{border-color:rgba(43,42,62,.4);color:var(--mo-deep)}
.badge{border:2px solid #fff}

/* ---------------- Boîtes : bleues, bordure bleu clair, bandeau plus foncé */
.card,.md{background:var(--mo-box);border:3px solid var(--mo-border);border-radius:var(--r);box-shadow:0 1px 2px rgba(0,0,0,.3)}
.card.glow{box-shadow:0 1px 2px rgba(0,0,0,.3)}
.card>h2:first-child,.card>.row:first-child,.card>.gift-head:first-child{margin:-16px -16px 6px;padding:10px 16px;background:var(--mo-band);border-bottom:1px solid var(--mo-border);border-radius:2px 2px 0 0}
.card>h2:first-child,.card>.row:first-child>h2,.card>.row:first-child h2,.card>.gift-head:first-child h2{color:#fff;font:400 22px/1.15 var(--title);text-transform:uppercase;letter-spacing:.02em}
.card>.row:first-child .meta,.card>.gift-head:first-child .meta{color:var(--muted)}
.tile{background:var(--mo-band);border:2px solid var(--mo-border);border-radius:var(--r);box-shadow:0 1px 2px rgba(0,0,0,.3)}
.tile:hover{border-color:var(--mo-blue-h);transform:translateY(-2px)}
.post,.friend,.member,.badge-item,.ol-card,.hot-room{background:var(--mo-band);border:2px solid var(--mo-border);border-radius:var(--r)}
.post:hover,.member:hover,.friend:hover,.ol-card:hover{border-color:var(--mo-blue-h)}
.empty{color:var(--muted)}
.chip{background:var(--mo-band);border-color:var(--mo-border);color:#fff}
.flash{border-radius:var(--r)}
.push-banner{background:var(--mo-box);border:3px solid var(--mo-border);border-radius:var(--r);color:#fff}
.push-banner b{color:var(--mo-yellow-b)}
.notice{background:var(--mo-dark);color:#e9e6f6;border-top:0}

/* ---------------- Boutons : bleus à ombre portée, verts pour l'action principale */
button,.btn{border:2px solid var(--mo-blue-b);border-radius:var(--r);background:var(--mo-blue);color:#fff;font:500 14px/1.1 var(--body);box-shadow:var(--mo-shadow);text-shadow:none}
button:hover,.btn:hover{background:var(--mo-blue-b);border-color:var(--mo-blue-h);color:#fff}
button:active,.btn:active{transform:translateY(2px);box-shadow:0 1px 0 1px rgba(0,0,0,.3)}
button[type=submit]:not(.ghost):not(.danger):not(.warn):not(.small):not(.mini):not(.swatch):not(.sw),.btn.primary{background:var(--mo-green);border-color:var(--mo-green-b);color:#fff;text-transform:uppercase}
button[type=submit]:not(.ghost):not(.danger):not(.warn):not(.small):not(.mini):not(.swatch):not(.sw):hover,.btn.primary:hover{background:var(--mo-green-h);border-color:var(--mo-green-hb);color:#fff}
.btn.ghost,button.ghost{background:transparent;color:#fff;border-color:var(--mo-border)}
.btn.ghost:hover,button.ghost:hover{background:var(--mo-band);border-color:var(--mo-blue-h);color:#fff}
.btn.danger,button.danger{background:#4a2a3a;border-color:#7a3a52;color:#fff}
.btn.danger:hover,button.danger:hover{background:#5c2d42;border-color:#ff9aa9}
.btn.warn,button.warn{background:var(--mo-yellow);border-color:var(--mo-yellow-b);color:#ffffff}
.btn.warn:hover,button.warn:hover{background:var(--mo-yellow-b);color:#ffffff}
button.solid-danger{background:#5c2d42;border-color:#ff9aa9;color:#fff}
input[type=file]::file-selector-button{background:var(--mo-blue);color:#fff;border:2px solid var(--mo-blue-b);border-radius:var(--r-s)}
.lb-kinds a{background:var(--mo-band);border:2px solid var(--mo-border);color:#fff;border-radius:var(--r)}
.lb-kinds a.on{background:var(--mo-blue);border-color:var(--mo-blue-h);color:#fff}

/* ---------------- Champs : blancs, texte bleu nuit */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),textarea,select{background:#fff;color:var(--mo-deep);border:2px solid #dcdbe4;border-radius:var(--r-s);font:500 14px/1.35 var(--body)}
input::placeholder,textarea::placeholder{color:#7d7a92}
input:focus,textarea:focus,select:focus{border-color:var(--mo-blue-b);box-shadow:0 0 0 3px rgba(169,95,214,.35);outline:0}
select option{background:#fff;color:var(--mo-deep)}
label{color:#e9e6f6}

/* ---------------- Pied de page : bande bleu très foncé pleine largeur */
.site-foot{width:100%;max-width:none;margin-top:40px;padding:24px max(14px,calc((100% - 1200px)/2));background:var(--mo-dark);border:0;border-top:3px solid var(--mo-band);border-radius:0;color:var(--muted);font-size:14px;line-height:1.7}
.site-foot b{color:#fff}
.site-foot a,.foot-install{color:var(--mo-link);font-weight:500}
.site-foot a:hover,.foot-install:hover{color:#fff}
body{padding-bottom:0}

/* ---------------- Gros bouton « Entrer dans l'hôtel » : illustration de l'hôtel + bouton vert en flèche */
.enter-wrap .enter-hotel,.enter-hotel{border:3px solid var(--mo-border);border-radius:var(--r);color:#fff;
  background:linear-gradient(90deg,rgba(43,42,62,.95) 0%,rgba(43,42,62,.75) 40%,rgba(43,42,62,.15) 75%,rgba(43,42,62,.35) 100%),
    url('themes/moderne-hotel.png') right center/auto 100% no-repeat,var(--mo-box);
  image-rendering:pixelated;box-shadow:0 1px 2px rgba(0,0,0,.3);animation:none}
.enter-wrap .eh-bg,.enter-wrap .eh-city,.enter-hotel .eh-bg,.enter-hotel .eh-city,.eh-aura{display:none}
.eh-glow{background:radial-gradient(closest-side,rgba(169,95,214,.45),transparent);opacity:.5}
.eh-tx small{color:#e9e6f6;opacity:1}
.eh-tx b{position:relative;display:inline-block;justify-self:start;padding:12px 22px;border:2px solid var(--mo-green-b);border-right:0;border-radius:var(--r) 0 0 var(--r);
  background:var(--mo-green);color:#fff;font:400 clamp(20px,3vw,28px)/1 var(--title);text-transform:uppercase;letter-spacing:.02em;
  filter:drop-shadow(-1px 4px 0 rgba(0,0,0,.3));image-rendering:auto;transition:background .15s;text-shadow:none;margin-right:28px;overflow-wrap:normal}
.eh-tx b::after{content:"";position:absolute;top:-2px;right:-26px;bottom:-2px;width:26px;background:var(--mo-green-b);clip-path:polygon(0 0,100% 50%,0 100%)}
.eh-tx b::before{content:"";position:absolute;top:0;right:-22px;bottom:0;width:22px;background:var(--mo-green);clip-path:polygon(0 0,100% 50%,0 100%);z-index:1}
.enter-hotel:hover .eh-tx b,.enter-hotel:hover .eh-tx b::before{background:var(--mo-green-h)}
.enter-hotel:hover .eh-tx b{border-color:var(--mo-green-hb)}
.enter-hotel:hover .eh-tx b::after{background:var(--mo-green-hb)}
.eh-go{background:var(--mo-green);border:2px solid var(--mo-green-b);color:#fff}
.eh-live{background:var(--mo-band);color:#fff;border:2px solid var(--mo-border)}
.eh-live b,.eh-live strong{color:var(--mo-yellow-b)}
a.btn[href^="jeu.php"]{background:var(--mo-green);border-color:var(--mo-green-b);color:#fff;text-transform:uppercase}
a.btn[href^="jeu.php"]:hover{background:var(--mo-green-h);border-color:var(--mo-green-hb);color:#fff}
.join-btn{background:var(--mo-yellow);border:2px solid var(--mo-yellow-b);color:#ffffff;border-radius:var(--r);font:500 15px/1.1 var(--body);text-transform:uppercase}
.join-btn:hover{background:var(--mo-yellow-b);color:#ffffff}
.tools .tool-play{background:var(--mo-green)!important;border-color:var(--mo-green-b)!important;color:#fff!important}
.tools .tool-play:hover{background:var(--mo-green-h)!important;border-color:var(--mo-green-hb)!important}
@media (prefers-reduced-motion: reduce){.enter-wrap .enter-hotel,.enter-hotel{animation:none}}

/* ---------------- Récompense du jour */
.gift-btn:not(:disabled){background:var(--mo-green);border-color:var(--mo-green-b);color:#fff}
.gift-btn:not(:disabled):hover{background:var(--mo-green-h);border-color:var(--mo-green-hb)}
.gift-days li{background:var(--mo-band);color:#fff;border:2px solid var(--mo-border);border-radius:var(--r);font-weight:500}
.gift-days li.done{background:var(--mo-green);border-color:var(--mo-green-b);color:#fff}
.gift-days li.today{border-color:var(--mo-yellow-b);box-shadow:0 0 0 2px rgba(210,140,245,.5)}
.gift-days li.next{color:#fff}

/* ---------------- Page Équipe */
.team-box>.row:first-child{justify-content:center;position:relative}
.team-box>.row:first-child h2{flex:0 1 auto;text-align:center}
.team-chip{background:none!important;border:0!important;padding:0!important;color:#fff!important;font:400 22px/1.2 var(--title)!important;text-transform:uppercase;box-shadow:none!important}
.team-box .member .av{border-radius:50%;box-shadow:0 0 0 3px var(--mo-blue-b);background:var(--mo-deep)}
.team-box .member-bio{color:var(--muted)}

/* ---------------- Page de connexion : ciel à nuages en haut, boîtes bleues */
.auth-tabs{background:var(--mo-band);border:2px solid var(--mo-border);border-radius:var(--r)}
.auth-tabs button{background:transparent;color:var(--muted);box-shadow:none;border:0;text-transform:uppercase}
.auth-tabs button.on{background:var(--mo-blue);color:#fff}
.ui-auto,.login-text{color:var(--muted)}
.ui-auto a,.login-text a{color:var(--mo-link)}
.back-link{background:var(--mo-band);border:2px solid var(--mo-border);color:#fff;border-radius:var(--r)}
body.login{padding-top:0;place-items:start center}
body.login>main{padding-top:24px}
body.login>main::before{content:"";position:absolute;left:0;right:0;top:0;height:170px;z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.1)),
    url('themes/moderne-nuage-gauche.png') left top/auto 100% no-repeat,
    url('themes/moderne-nuage-droite.png') right top/auto 100% no-repeat,
    linear-gradient(180deg,#2b2a3e,#5a5876);
  image-rendering:pixelated;box-shadow:0 4px 0 0 rgba(255,255,255,.94)}
body.login .logo{width:100%;height:auto;max-width:100%;max-height:220px;object-fit:contain;margin:6px auto 30px;filter:drop-shadow(0 4px 0 rgba(0,0,0,.3))}
body.login #loginBox,body.login #regBox,body.login .join-box{overflow:hidden}
body.login #loginBox>h2:first-child,body.login #regBox>h2:first-child{text-align:center}
/* Pied de page de la connexion / inscription : un cadre flottant, de la même largeur que les autres boîtes */
body.login>main{padding-bottom:32px}
body.login .site-foot{width:100%;max-width:100%;margin:4px 0 0;padding:14px 16px;background:var(--mo-box);border:3px solid var(--mo-border);border-radius:var(--r);
  box-shadow:0 1px 2px rgba(0,0,0,.3);color:var(--muted);font-size:13px;line-height:1.6;display:flex;flex-direction:column;align-items:center;gap:4px}
body.login .site-foot>span{display:block;text-align:center}
body.login .site-foot .foot-install{margin-right:10px}

/* ---------------- Aperçus des fonds (Paramètres) */
.swatch{border:2px solid var(--mo-dark);padding:0}
.swatch.on{border-color:var(--mo-yellow-b);box-shadow:0 0 0 2px var(--mo-dark)}
.swatch.on::after{background:var(--mo-yellow-b);color:var(--mo-deep)}

/* ---------------- Version Smartphone */
.m-top{background:linear-gradient(180deg,rgba(0,0,0,.4),rgba(0,0,0,.25)),
    url('themes/moderne-nuage-gauche.png') left top/auto 120% no-repeat,
    url('themes/moderne-nuage-droite.png') right top/auto 120% no-repeat,
    linear-gradient(180deg,#2b2a3e,#3a3854);image-rendering:pixelated;border-bottom:0}
.m-brand span{color:#fff;font-family:var(--title);text-transform:uppercase}
.m-tabs{background:rgba(255,255,255,.96);border-top:0;box-shadow:0 -2px 0 rgba(0,0,0,.2)}
.m-tabs a{color:var(--mo-deep)}
.m-tabs a.on{color:var(--mo-blue)}

/* ---------------- Pied de page toujours collé en bas de l'écran (pages internes, même peu remplies) */
body:not(.login):not(.reg):not(.tk-embed){display:flex;flex-direction:column;box-sizing:border-box;min-height:100vh;min-height:100dvh}
body:not(.login):not(.reg):not(.tk-embed)>main.wrap{flex:1 0 auto;align-self:center;align-content:start}
body:not(.login):not(.reg):not(.tk-embed)>.site-foot{flex-shrink:0}

/* ---------------- Pas d'emojis ni d'icônes décoratives (voir theme-moderne.js) : juste le texte */
.hbm-hide{display:none!important}
.pt-ic,.eh-ic,.notif-ic,.adm-tile-ic,.adm-cat-ic,.doc-ic,.log-ic,.an-ic,.role-ic,.pw-ic,.dlg-ic{display:none!important}

/* ---------------- Logo du thème (assets/themes/moderne-logo.png) */
.brand.logo-only img{height:64px;width:auto;max-width:min(320px,46vw);object-fit:contain;filter:drop-shadow(0 4px 0 rgba(0,0,0,.3))}
.m-brand.logo-only img{height:40px!important;width:auto;max-width:52vw;object-fit:contain}
body.login .logo{max-height:170px}


/* =====================================================================
   Moderne Sombre : les images et les surfaces du thème Nocturne violet
   ===================================================================== */
:root{--mo-dark:#1d1c2b;--nc-nav:#47465e;--nc-foot:#4a4862;--nc-link:#b88cf2}
/* En-tête : l'image du thème Nocturne, assombrie */
.topbar::before{background:linear-gradient(180deg,rgba(26,24,42,.5),rgba(26,24,42,.7)),url('themes/nocturne-header.jpg') center 42%/cover no-repeat,#2b2a3e;image-rendering:auto}
.topbar-in{min-height:130px}
.brand span{text-shadow:0 3px 0 #1d1c2b,2px 0 0 #1d1c2b,-2px 0 0 #1d1c2b,0 -2px 0 #1d1c2b,0 6px 8px rgba(0,0,0,.45)}
/* Navigation : bande ardoise, liens violets (comme Nocturne) */
.tabs{background:var(--nc-nav);box-shadow:0 4px 14px rgba(0,0,0,.18)}
.tabs a,.tabs .tab-off{color:var(--nc-link)}
.tabs a:hover{color:#dcc2ff}
.tabs a.on{color:#d28cf5}
.tabs a.on::after{background:#c06ff0;border-radius:3px 3px 0 0}
.tabs .tab-off small{border-color:rgba(184,140,242,.5);color:var(--nc-link)}
.badge{border-color:var(--nc-nav)}
/* Pied de page ardoise */
.site-foot{background:var(--nc-foot);border-top:0;color:#e9e6f6}
.site-foot a,.foot-install{color:#fff}
.site-foot a:hover,.foot-install:hover{color:var(--nc-link)}
body.login .site-foot{background:var(--mo-box);border:3px solid var(--mo-border)}
/* Champs blancs, texte indigo */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),textarea,select{color:#2b2a3e;border-color:transparent}
select option{color:#2b2a3e}
/* Boutons « attention » : ambre de Nocturne */
.btn.warn,button.warn{background:#4a3a24;border-color:#7a5e34;color:#ffd39a}
.btn.warn:hover,button.warn:hover{background:#5c482c;color:#ffe2b8}
.join-btn{background:#2d2b42;border-color:#5a5876;color:#fff}
.join-btn:hover{background:#38364f;color:#fff}
/* Bouton « Entrer dans l'hôtel » : la ville en pixels de Nocturne */
.enter-wrap .enter-hotel,.enter-hotel{
  background:linear-gradient(90deg,rgba(26,24,42,.94) 0%,rgba(26,24,42,.72) 38%,rgba(26,24,42,.28) 72%,rgba(26,24,42,.5) 100%),
    linear-gradient(180deg,rgba(26,24,42,.15),rgba(26,24,42,.55)),
    url('themes/nocturne-enter.jpg') 50% 22%/cover no-repeat,#2b2a3e;image-rendering:auto}
/* Connexion / inscription : bandeau du haut avec l'image de Nocturne */
body.login>main::before{background:linear-gradient(180deg,rgba(26,24,42,.5),rgba(26,24,42,.7)),url('themes/nocturne-header.jpg') center 42%/cover no-repeat,#2b2a3e;
  image-rendering:auto;box-shadow:0 4px 0 0 var(--nc-nav)}
body.login .logo{filter:drop-shadow(0 6px 10px rgba(0,0,0,.55))}
/* Version Smartphone */
.m-top{background:linear-gradient(180deg,rgba(26,24,42,.55),rgba(26,24,42,.78)),url('themes/nocturne-header.jpg') center 42%/cover no-repeat,#2b2a3e;image-rendering:auto}
.m-tabs{background:var(--nc-nav);box-shadow:0 -2px 0 rgba(0,0,0,.2)}
.m-tabs a{color:var(--nc-link)}
.m-tabs a.on{color:#fff}

/* ---------------- Page de chargement (connexion / déconnexion) : toujours centrée au milieu de l'écran */
body:has(> .box > .bar){display:grid!important;place-items:center!important;padding:0!important;min-height:100vh;min-height:100dvh;margin:0}
body:has(> .box > .bar)>.box{margin:0}