/* ===========================================================================
   Awoui — LE COMPTE DANS LE BANDEAU (25/09/2026).
   Connecté, « Se connecter » cède la place à son avatar — celui choisi sur
   /profil, dans son cadre — et à un menu : son esp@ce, son profil, sortir.
   Même verre, mêmes gestes que le sélecteur de langue (assets/langue.css) :
   survol, focus clavier, ou clic (`.is-open` posée par js/entete-compte.js).
   Les couleurs des cadres sont celles de css/espace.css, reprises ici parce
   que le bandeau est sur TOUTES les pages et espace.css sur deux seulement.
   =========================================================================== */
.has-compte{position:relative;display:inline-flex;align-items:center}
.nav-compte{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 6px 0 3px;
  background:none;border:0;color:var(--muted);font:inherit;font-size:13px;font-weight:600;
  cursor:pointer;-webkit-appearance:none;appearance:none;white-space:nowrap;transition:color .2s}
.nav-compte:hover,.nav-compte:focus-visible{color:var(--text)}
.nav-compte .compte-chev{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .2s}
.has-compte:hover .compte-chev,.has-compte.is-open .compte-chev{transform:rotate(180deg)}

/* l'avatar : un anneau (le cadre) autour d'un disque */
.compte-av{display:inline-grid;place-items:center;padding:2px;border-radius:50%;background:var(--line);flex:0 0 auto}
.compte-av.cadre-marque,.compte-av.cadre-aurore{background:var(--brand-conic)}
.compte-av.cadre-emeraude{background:var(--emerald)}
.compte-av.cadre-cyan{background:var(--cyan)}
.compte-av.cadre-iris{background:var(--iris)}
.compte-av.cadre-or{background:var(--gold);box-shadow:0 0 10px 0 var(--gold)}
.compte-av.cadre-premiere,.compte-av.cadre-pionnier{background:var(--grad-fill)}
.compte-av>span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--bg-2);color:var(--text);overflow:hidden}
.compte-av .esp-av-svg{width:100%;height:100%}
.compte-av .esp-av-ini{font-family:var(--fd);font-weight:700;font-size:26px;fill:var(--text)}
.compte-av .esp-av-ic{color:var(--brand-cyan)}

/* le menu : le même verre que .lang-drop */
.compte-drop{position:absolute;top:100%;right:0;transform:translateY(10px);
  min-width:236px;margin-top:10px;
  background:var(--glass-menu);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid var(--line-2);border-radius:var(--r);padding:8px;
  display:grid;gap:2px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s,transform .22s,visibility .22s;
  box-shadow:var(--sh-2);z-index:60}
.compte-drop::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
.has-compte:hover .compte-drop,.has-compte:focus-within .compte-drop,
.has-compte.is-open .compte-drop{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.has-compte.is-shut:hover .compte-drop,.has-compte.is-shut:focus-within .compte-drop{opacity:0;visibility:hidden;pointer-events:none}
.compte-qui{display:grid;grid-template-columns:auto 1fr;column-gap:10px;row-gap:1px;align-items:center;padding:8px 11px 10px;border-bottom:1px solid var(--line-2);margin-bottom:4px;min-width:0}
.compte-qui .compte-av{grid-row:1/3}
.compte-qui b,.compte-qui i{grid-column:2}
.compte-av.grand>span{width:38px;height:38px}
.compte-av.grand .esp-av-ini{font-size:24px}
.compte-qui b{font-size:13.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.compte-qui i{font-style:normal;font-family:var(--fm);font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.compte-drop a,.compte-drop button{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:11px;
  background:none;border:0;width:100%;color:var(--text);font:inherit;font-size:13.5px;text-align:left;
  text-decoration:none;cursor:pointer;-webkit-appearance:none;appearance:none}
.compte-drop a:hover,.compte-drop button:hover,.compte-drop a:focus-visible,.compte-drop button:focus-visible{background:var(--glass-item-hover)}
.compte-drop svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.compte-drop .sortir{color:var(--muted)}
.compte-drop .sortir:hover{color:var(--text)}

/* le menu mobile : le nom, puis les deux gestes, à la place de « Se connecter » */
.mm-compte{display:grid;gap:8px;padding-top:10px;border-top:1px solid var(--line-2);margin-top:6px}
.mm-compte b{font-size:14px;color:var(--text)}
.mm-compte .btn{justify-content:center}