/* ─────────────────────────────────────────────
   Composant connexion Discord — Wiki Shevar'
   À inclure sur CHAQUE page via assets/js/auth-widget.js
   (voir ce fichier, qui charge ce CSS tout seul).
   ───────────────────────────────────────────── */

.auth-widget{
  position:fixed; top:1rem; right:1rem; z-index:100002;
  font-family:'Aldrich',sans-serif;
}

/* Sans ça, l'attribut HTML "hidden" perd face aux règles ci-dessous qui
   forcent display:flex/block sur ces mêmes éléments (les styles d'auteur
   passent toujours devant le style par défaut du navigateur pour [hidden],
   même sans rapport de spécificité) — le bouton restait visible en même
   temps que l'avatar une fois connecté. */
[hidden]{ display: none !important; }

.auth-login-btn{
  display:flex; align-items:center; gap:0.5rem;
  background:#0d1116; border:1.5px solid #30efc9; color:#30efc9;
  padding:0.6rem 1.1rem; border-radius:999px; text-decoration:none;
  font-family:'Audiowide',sans-serif; font-size:0.68rem; letter-spacing:0.04em; text-transform:uppercase;
  box-shadow:0 0 12px rgba(48,239,201,0.35), 0 0 26px rgba(48,239,201,0.15);
  transition:background 0.2s ease, box-shadow 0.2s ease;
}
.auth-login-btn svg{ width:1.15em; height:1.15em; flex-shrink:0; }
.auth-login-btn:hover{
  background:rgba(48,239,201,0.12);
  box-shadow:0 0 16px rgba(48,239,201,0.55), 0 0 34px rgba(48,239,201,0.25);
}

.auth-user{ position:relative; }

.auth-avatar-btn{
  width:48px; height:48px; border-radius:50%; padding:0; cursor:pointer;
  background:#0d1116; border:1.5px solid rgba(48,239,201,0.55); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 12px rgba(48,239,201,0.35);
  transition:border-color 0.2s ease, box-shadow 0.2s ease;
}
.auth-avatar-btn:hover, .auth-user.open .auth-avatar-btn{
  border-color:#30efc9; box-shadow:0 0 16px rgba(48,239,201,0.65);
}
.auth-avatar-img{ width:100%; height:100%; object-fit:cover; display:block; }

.auth-menu{
  position:absolute; top:60px; right:0; width:220px;
  background:#0a0d10; border:1px solid rgba(48,239,201,0.4); border-radius:12px;
  overflow:hidden; box-shadow:0 10px 40px rgba(0,0,0,0.55), 0 0 24px rgba(48,239,201,0.12);
  transform:translateY(-8px) scale(0.96); opacity:0; pointer-events:none;
  transition:transform 0.22s ease, opacity 0.22s ease;
}
.auth-user.open .auth-menu{ transform:translateY(0) scale(1); opacity:1; pointer-events:auto; }

.auth-menu-header{
  display:flex; align-items:center; gap:0.7rem; padding:0.8rem 0.9rem;
  background:#10151b; border-bottom:1px solid rgba(48,239,201,0.18);
}
.auth-menu-avatar{ width:34px; height:34px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.auth-menu-name{
  font-family:'Audiowide',sans-serif; font-size:0.7rem; color:#f9f9f9;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.auth-menu-item{
  display:block; width:100%; padding:0.75rem 0.9rem; text-align:left;
  font-family:'Aldrich',sans-serif; font-size:0.8rem; color:#c8cdd2; text-decoration:none;
  background:none; border:none; cursor:pointer; letter-spacing:0.02em;
  transition:background 0.15s ease, color 0.15s ease;
}
.auth-menu-item:hover{ background:rgba(48,239,201,0.08); color:#30efc9; }
.auth-menu-item.auth-menu-logout{ border-top:1px solid rgba(48,239,201,0.15); color:rgba(249,249,249,0.5); }
.auth-menu-item.auth-menu-logout:hover{ color:#ff8080; background:rgba(255,92,92,0.08); }

@media (max-width:640px){
  .auth-widget{ top:0.9rem; right:0.9rem; }
  .auth-login-btn{ width:44px; height:44px; padding:0; justify-content:center; border-radius:50%; }
  .auth-login-btn span{ display:none; }
  .auth-avatar-btn{ width:44px; height:44px; }
  .auth-menu{ width:min(240px, calc(100vw - 1.8rem)); top:56px; }
}