/* ==========================================================
   BIM-BEE.FR — Feuille de style commune (login / lobby / salon)
   Structure Yahoo! Jeux (années 2000) — thème ViVa-Tchat
   ========================================================== */
:root{
  --bg:#0a0612;
  --bg2:#120a20;
  --panel:#1a0f2e;
  --panel2:#22143b;
  --line:#3a2260;
  --line2:#5a2f8f;
  --mag:#ff2bd6;
  --vio:#9b4dff;
  --pink:#ff6fb5;
  --cyan:#34e7ff;
  --gold:#ffd84a;
  --green:#3dff9a;
  --red:#ff4d6d;
  --txt:#f1e8ff;
  --txt2:#b9a6d9;
  --txt3:#7d6a9e;
  --glow:0 0 12px rgba(255,43,214,.55);
  --glow2:0 0 18px rgba(155,77,255,.55);
  --r:10px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{
  font-family:"Segoe UI",Tahoma,Verdana,Arial,sans-serif;
  font-size:14px;color:var(--txt);
  background:
    radial-gradient(1200px 600px at 15% -10%,rgba(255,43,214,.18),transparent 60%),
    radial-gradient(900px 500px at 110% 10%,rgba(155,77,255,.22),transparent 60%),
    var(--bg);
  background-attachment:fixed;
}
a{color:var(--pink);text-decoration:none}
a:hover{color:var(--mag);text-shadow:var(--glow)}
button{font-family:inherit;cursor:pointer}
.hidden{display:none!important}

/* ---------- Logo ---------- */
.bb-logo{font-weight:900;letter-spacing:-1px;line-height:1;white-space:nowrap}
.bb-logo .b1{color:var(--mag);text-shadow:var(--glow)}
.bb-logo .b2{color:var(--vio);text-shadow:var(--glow2)}
.bb-logo .ex{color:var(--gold);text-shadow:0 0 10px rgba(255,216,74,.6)}
.bb-logo small{font-size:.42em;font-weight:700;color:var(--txt2);letter-spacing:2px;margin-left:6px;vertical-align:middle;text-transform:uppercase}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid var(--line2);background:linear-gradient(180deg,#2c1850,#1d1036);
  color:var(--txt);padding:7px 14px;border-radius:7px;font-size:13px;font-weight:600;
  transition:.15s;
}
.btn:hover{border-color:var(--mag);box-shadow:var(--glow)}
.btn-main{background:linear-gradient(180deg,var(--mag),#b0168f);border-color:var(--mag);color:#fff}
.btn-main:hover{filter:brightness(1.12)}
.btn-vio{background:linear-gradient(180deg,var(--vio),#6b26c9);border-color:var(--vio);color:#fff}
.btn-sm{padding:4px 9px;font-size:12px}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}

/* ---------- Champs ---------- */
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.field label{font-size:12px;color:var(--txt2);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.inp,select.inp{
  width:100%;background:#0f0820;border:1px solid var(--line);color:var(--txt);
  padding:10px 12px;border-radius:8px;font-size:14px;outline:none;transition:.15s;
}
.inp:focus{border-color:var(--mag);box-shadow:var(--glow)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.radio-group{display:flex;gap:8px}
.radio-group label{
  flex:1;text-align:center;padding:9px;border:1px solid var(--line);border-radius:8px;
  cursor:pointer;color:var(--txt2);text-transform:none;font-size:14px;letter-spacing:0;
}
.radio-group input{display:none}
.radio-group input:checked+span{color:#fff}
.radio-group label:has(input:checked){border-color:var(--mag);background:rgba(255,43,214,.12);box-shadow:var(--glow);color:#fff}
.chk{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:var(--txt2);margin-bottom:10px}
.chk input{margin-top:2px;accent-color:var(--mag)}
.msg-err{background:rgba(255,77,109,.12);border:1px solid var(--red);color:#ffc2cd;padding:8px 10px;border-radius:7px;font-size:13px;margin-bottom:10px}
.msg-ok{background:rgba(61,255,154,.1);border:1px solid var(--green);color:#c8ffe2;padding:8px 10px;border-radius:7px;font-size:13px;margin-bottom:10px}

/* ==========================================================
   EN-TÊTE STYLE YAHOO (lobby + salon)
   ========================================================== */
.yh-top{
  background:linear-gradient(180deg,#1c0f33,#120a22);
  border-bottom:2px solid var(--mag);box-shadow:0 2px 20px rgba(255,43,214,.25);
}
.yh-top-in{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:18px;padding:10px 16px}
.yh-top .bb-logo{font-size:30px}
.yh-search{flex:1;display:flex;max-width:460px}
.yh-search input{flex:1;border-radius:8px 0 0 8px;border-right:none}
.yh-search button{border-radius:0 8px 8px 0}
.yh-user{margin-left:auto;text-align:right;font-size:12px;color:var(--txt2);line-height:1.5}
.yh-user b{color:var(--gold)}
.yh-tabs{max-width:1200px;margin:0 auto;display:flex;gap:2px;padding:0 16px;overflow-x:auto}
.yh-tabs a{
  padding:8px 16px;color:var(--txt2);font-weight:600;font-size:13px;white-space:nowrap;
  border:1px solid transparent;border-bottom:none;border-radius:8px 8px 0 0;
}
.yh-tabs a.on,.yh-tabs a:hover{color:#fff;background:var(--mag);text-shadow:none;box-shadow:none}

.yh-wrap{max-width:1200px;margin:14px auto;padding:0 16px}
.yh-crumb{font-size:12px;color:var(--txt3);margin-bottom:10px}
.yh-crumb a{color:var(--txt2)}

/* Boîte style Yahoo (titre en bandeau) */
.box{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:14px}
.box-h{
  background:linear-gradient(90deg,rgba(255,43,214,.35),rgba(155,77,255,.25));
  padding:8px 12px;font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.6px;
  display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line2);
}
.box-b{padding:10px 12px}

/* ---------- Footer ---------- */
.yh-foot{text-align:center;color:var(--txt3);font-size:11px;padding:20px 10px 30px;border-top:1px solid var(--line);margin-top:20px}
.yh-foot a{color:var(--txt2);margin:0 6px}

/* scrollbars */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:6px}
::-webkit-scrollbar-track{background:transparent}