/* NoorQuran — Avatar + menu compte dans l'en-tête. Autonome : ne dépend que de variables.css
   (tokens), donc fonctionne aussi sur reader.html / video.html qui ne chargent pas home.css. */

/* Bouton « Se connecter » (état déconnecté) */
.account-login { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 .9rem; border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border)); background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); border-radius: 999px; font: inherit; font-weight: 750; font-size: .88rem; text-decoration: none; cursor: pointer; transition: background .18s, border-color .18s, transform .18s; }
.account-login:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: var(--accent); transform: translateY(-1px); }
.account-login--icon { width: 40px; min-height: 40px; padding: 0; }
.account-login svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Avatar (état connecté) */
.account-pop { position: relative; display: inline-flex; }
.account-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); background: transparent; border-radius: 50%; cursor: pointer; overflow: hidden; transition: border-color .18s, transform .18s; }
.account-btn:hover { border-color: var(--accent); transform: translateY(-1px); }
.account-ava { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 800; font-size: .9rem; text-transform: uppercase; color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent); }
.account-ava img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* Menu déroulant (positionnement autonome) */
.account-menu { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); width: min(244px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-soft, 0 18px 48px rgba(0, 0, 0, .24)); padding: 8px; display: none; z-index: 200; }
.account-menu.open { display: block; }
.account-menu-head { padding: 6px 10px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--border); text-align: start; display: flex; flex-direction: column; gap: 2px; }
.account-menu-head strong { font-size: .95rem; font-weight: 850; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-menu-head span { font-size: .8rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-menu a, .account-menu button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; color: var(--text); border-radius: 10px; padding: .7rem; text-align: start; font: inherit; font-weight: 650; text-decoration: none; cursor: pointer; }
.account-menu a:hover, .account-menu button:not(:disabled):hover { background: var(--surface-soft); color: var(--accent); }
.account-menu button:disabled { opacity: .5; cursor: default; }
.account-menu .account-ico { width: 18px; height: 18px; flex: 0 0 auto; opacity: .85; display: inline-flex; }
.account-menu .account-ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.account-menu .account-signout { color: #e5675c; }
.account-menu .account-signout:hover { background: color-mix(in srgb, #e5484d 15%, transparent); color: #e5484d; }