/* ----------- Thème & utilitaires (par-dessus Bootstrap) ----------- */
:root{
  --bg1:#0e0d13; --bg2:#17141f; --bg3:#1c1825;
  --panel:#1a1820; --panel-soft:#221e2a;
  --muted:#2a2733; --muted-40: rgba(255,255,255,.08);
  --text:#f5f5f7; --sub:#c9c9d4;
  --brand:#ff3b81; --brand-2:#ff7a59;
  --ok:#64d17a; --danger:#ff6363;
  --radius:1.1rem; --shadow:0 10px 30px rgba(0,0,0,.25);
  --header-h: 68px; /* hauteur approx du header pour la sidebar sticky */
}

/* Anti-scroll horizontal global */
html, body { overflow-x: hidden; }

/* Fond */
.bg-body-gradient{
  background: linear-gradient(160deg,var(--bg1) 0%,var(--bg2) 60%,var(--bg3) 100%);
  color: var(--text);
}

/* Header / Navbar */
.bg-nav{
  background: rgba(15,14,20,.75);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--muted-40);
}
.navbar .nav-link{ transition: .2s; }
.navbar .nav-link:hover{ color:#fff !important; }
.navbar-light-icon{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 30 30'%3e%3cpath stroke='%23fff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
.brand-mark{
  width:32px;height:32px;border-radius:50%;
  display:inline-block;box-shadow:0 4px 18px rgba(255,59,129,.45);
  background: radial-gradient(circle at 30% 30%,#ff99c2 0,var(--brand) 45%,#8a1c45 100%);
}



/* Panneaux / cartes */
.panel{
  background: var(--panel);
  border: 1px solid var(--muted);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card-soft{
  background: var(--panel-soft);
  border: 1px solid #2f2a38;
  border-radius: 1rem;
}
.border-muted-40{ border-color: var(--muted-40) !important; }

/* Avatars */
.avatar-lg{ width:44px;height:44px;background:#3a3547; }
.avatar-xs{ width:28px;height:28px;display:inline-block; background:#3a3647; }

/* Thumbs webcams */
.bg-thumb{ background:#2b2535; }
.play{
  width:56px;height:56px;border-radius:50%;
  background: rgba(0,0,0,.35);
  display:inline-grid; place-items:center; font-weight:800; color:#fff;
}

/* CTA boutons */
.btn-cta{
  background: linear-gradient(90deg,var(--brand),var(--brand-2));
  color:#fff; border:0; border-radius: .8rem; font-weight:600;
}
.btn-cta:hover{ opacity:.95; color:#fff; }
.btn-cta-alt{
  background: rgba(255,255,255,.08);
  color:#fff; border:1px solid rgba(255,255,255,.12);
  border-radius:.8rem; font-weight:600;
}
.btn-cta-alt:hover{ background: rgba(255,255,255,.12); color:#fff; }

/* Sidebar sticky (fixe à gauche en desktop, dessous en mobile via grid/order) */
.sticky-sidebar{
  top: calc(var(--header-h) + 16px);
  max-height: calc(100vh - var(--header-h) - 32px);
  overflow: hidden; /* masque bordures arrondies */
}
.online-list-container{
  overflow-y: auto;
  max-height: calc(100vh - var(--header-h) - 32px - 49px); /* 49 = header interne de la sidebar approx */
}

/* Ligne "membre" */
.hover-row{ border-radius:.75rem; }
.hover-row:hover{ background: rgba(255,255,255,.05) !important; }
.status-dot{
  width:10px;height:10px;border-radius:50%;
  display:inline-block;
}
.status-dot.online{ background: var(--ok); }
.status-dot.offline{ background: #555; }

/* Cartes internes */
.card .text-secondary{ color: var(--sub) !important; }

/* Coins arrondis harmonisés */
.rounded-4{ border-radius: var(--radius) !important; }

/* Utilitaires divers */
a{ text-decoration: none; }

/* Responsive affinement (Bootstrap gère déjà le layout) */
@media (max-width: 991.98px){
  /* Sidebar devient non-sticky en mobile, s’insère sous le contenu (ordre déjà géré par Bootstrap) */
  .sticky-sidebar{
    position: static !important;
    max-height: none;
  }
  .online-list-container{
    max-height: none;
  }
}

/*----------------custom code ----------------------- */

.welcome-title {
    color:red !important;
    font-size:24px;
    font-weight:bold;
}
.welcome-text{
    color:#000;
}

.membre-pseudo, .card-title{
    color:#ffffff !important;
}