/* ============================================================
   Atlas Connect · Topbar — profil compte + boutons utilitaires
   Composant PARTAGÉ entre les 3 portails (client / technicien /
   admin) : même structure, même taille, même typographie —
   seule la couleur de rôle change, via [data-role] sur le
   <header class="topbar">.
   ============================================================ */
.topbar[data-role="tech"]{--tb-accent:#a855f7;--tb-accent-2:#c084fc;--tb-border:rgba(168,85,247,.35);--tb-border-h:rgba(168,85,247,.6);--tb-glow:rgba(168,85,247,.28);--tb-ava:linear-gradient(155deg,#6d28d9,#a855f7)}
.topbar[data-role="client"]{--tb-accent:#3b82f6;--tb-accent-2:#60a5fa;--tb-border:rgba(59,130,246,.35);--tb-border-h:rgba(59,130,246,.6);--tb-glow:rgba(59,130,246,.28);--tb-ava:linear-gradient(155deg,#2563eb,#60a5fa)}
.topbar[data-role="admin"]{--tb-accent:#f4b942;--tb-accent-2:#ffd76a;--tb-border:rgba(244,185,66,.35);--tb-border-h:rgba(244,185,66,.6);--tb-glow:rgba(244,185,66,.28);--tb-ava:linear-gradient(155deg,#8a5a00,#d99b16)}

/* ---- boutons utilitaires (thème, notifications/messages) ---- */
.tb-util{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;background:var(--glass);border:1px solid var(--tb-border,var(--line));color:var(--mid);cursor:pointer;transition:border-color .2s,box-shadow .2s,color .2s,background .2s}
.tb-util svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2}
.tb-util:hover{border-color:var(--tb-border-h,var(--line2));color:var(--txt);background:rgba(255,255,255,.06);box-shadow:0 0 0 1px var(--tb-border-h,transparent),0 6px 18px -8px var(--tb-glow,transparent)}
.tb-util-badge{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:50px;background:var(--tb-accent);color:#0a1230;font-family:'Space Grotesk',sans-serif;font-size:.62rem;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid #070d24}
body.theme-light .tb-util-badge{color:#fff;border-color:#f4f7fe}

/* ---- pastille compte ---- */
.tb-acct{display:flex;align-items:center;gap:12px;height:44px;padding:5px 16px 5px 5px;border-radius:16px;background:var(--glass);border:1px solid var(--tb-border,var(--line2));cursor:pointer;transition:border-color .2s,box-shadow .2s,background .2s;font:inherit;text-align:left}
.tb-acct:hover,.tb-acct[aria-expanded="true"],.tb-acct.open{border-color:var(--tb-border-h);background:rgba(255,255,255,.06);box-shadow:0 0 0 1px var(--tb-border-h,transparent),0 8px 22px -10px var(--tb-glow,transparent)}
.tb-acct-ava{position:relative;width:34px;height:34px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.8rem;color:#fff;background:var(--tb-ava);overflow:visible}
.tb-acct-ava.is-round{border-radius:50%}
.tb-acct-online{position:absolute;bottom:-2px;right:-2px;width:11px;height:11px;border-radius:50%;background:#22c55e;box-shadow:0 0 6px #22c55e;border:2px solid #0a1230}
.tb-acct-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.tb-acct-name{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.85rem;color:var(--txt);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}
.tb-acct-role{display:inline-flex;align-items:center;gap:5px;font-size:.71rem;font-weight:600;color:var(--tb-accent);white-space:nowrap}
.tb-acct-role svg{width:12px;height:12px;stroke:var(--tb-accent);fill:none;stroke-width:2.2;flex-shrink:0}
.tb-acct-caret{width:15px;height:15px;stroke:var(--dim);fill:none;stroke-width:2;flex-shrink:0;margin-left:1px;transition:transform .2s}
.tb-acct[aria-expanded="true"] .tb-acct-caret,.tb-acct.open .tb-acct-caret{transform:rotate(180deg)}
body.theme-light .tb-acct-online{border-color:#fff}

/* ---- déploiement du menu compte (PARTAGÉ : knowledge / véhicule /
   talent / profil — la page Missions a ses propres règles inline).
   Le menu .tb-menu (base cachée dans atlas-admin.css) s'ouvre au
   survol, au clic (classe .open posée par atlas-topbar-tech.js)
   et au clavier (focus-within). ---- */
#tbTechAdmin{position:relative}
#tbTechAdmin:hover .tb-menu,
#tbTechAdmin.open .tb-menu,
#tbTechAdmin:focus-within .tb-menu{opacity:1;visibility:visible;transform:none}
#tbTechAdmin:hover .tb-acct-caret,
#tbTechAdmin.open .tb-acct-caret{transform:rotate(180deg)}

@media(max-width:1280px){
  .tb-acct-meta{display:none}
  .tb-acct{padding:5px;width:44px;justify-content:center;gap:0}
  .tb-acct-caret{display:none}
}