/* ====== Header de luxe + dropdown compte ====== */

/* conteneur nav déjà défini (site-header, navbar, brand, logo, main-nav, nav-toggle, mobile-nav...) */

/* Pastille compte (chip) */
.account { position: relative; }
.account-chip{
  background:var(--panel); border:1px solid var(--border);
  border-radius:14px; padding:6px 10px; cursor:pointer; color:var(--ink);
}
.chip-inner{ display:flex; align-items:center; gap:10px; }
.avatar{
  width:28px;height:28px;border-radius:50%; display:grid;place-items:center;
  background:linear-gradient(135deg,#60a5fa33,#22d3ee33); color:#fff; font-weight:800; font-size:13px;
  border:1px solid var(--border);
}
.chip-text{ line-height:1.1 }
.chip-name{ font-weight:800; max-width:160px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.chip-sub{ font-size:11px; color:var(--muted) }
.chev{ opacity:.8 }

/* Menu déroulant */
.account-menu{
  position:absolute; right:0; top:calc(100% + 8px);
  min-width:220px; background:var(--panel); border:1px solid var(--border); border-radius:14px;
  box-shadow:var(--shadow); padding:6px; display:none; z-index:20;
}
.account.open .account-menu{ display:block; }
.menu-item{
  display:block; padding:10px 12px; border-radius:10px; color:var(--ink); font-weight:700;
}
.menu-item:hover{ background:rgba(255,255,255,.06) }
.menu-sep{ height:1px; background:var(--border); margin:6px 0 }

/* Menu principal – resserré pour la lisibilité */
.main-nav a{ padding:6px 10px; border-radius:10px }
.main-nav a:hover{ background:rgba(255,255,255,.06) }

/* Mobile nav: déjà présent. Améliore l’espacement pour le doigt */
.mobile-nav a{ padding:13px 8px; font-size:16px }

/* Petites retouches: éviter le débordement quand le nom est long */
.account .btn, .account .btn-ghost, .chip-name { max-width:200px }
@media (max-width:1100px){ .chip-name{ max-width:140px } }
@media (max-width:900px){ .chip-name{ max-width:120px } }