/* =========================================================================
   css/login.css — écran de connexion + chip du profil connecté (F1,
   MISSION2 point 7). Tout en variables (--txt/--muted/--accent…) : les
   tokens suivent le thème nuit unique du fond tiré (les 41 fonds sont sombres).
   Cartes profil en lens-hover (point 10) — timing homogène ~180 ms.
   ========================================================================= */

/* ---- Écran plein écran ---------------------------------------------------- */
/* Léger voile flouté : lisible aussi quand l'écran surgit AU-DESSUS d'une vue
   (session expirée → 401). z-index > modale (500), < tooltip global (640). */
.login-screen{position:fixed;inset:0;z-index:560;display:grid;place-items:center;
  padding:24px;overflow:auto;background:rgba(8,10,14,.30);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}

.login-panel{width:min(560px,100%)}
.login-content{padding:36px 34px 32px;text-align:center}

/* ---- Marque + titres ------------------------------------------------------ */
.login-brand{font-size:17px;font-weight:800;letter-spacing:-.02em;opacity:.9}
.login-title{margin:18px 0 0;font-size:26px;font-weight:800;letter-spacing:-.03em}
.login-sub{margin:8px auto 0;max-width:380px;color:var(--muted);font-size:13.5px;line-height:1.55}

/* ---- Cartes profil (lens-hover — point 10) -------------------------------- */
.login-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px}
@media (max-width:560px){.login-cards{grid-template-columns:1fr}}
.login-card{padding:0;border-radius:18px;cursor:pointer;font:inherit;color:var(--txt);
  transition:transform .18s ease}
.login-card:hover{transform:translateY(-3px)}
.login-card .lg-content{display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:22px 12px 18px}
.login-card-name{font-size:14.5px;font-weight:750;letter-spacing:-.01em}
.login-card-sub{font-size:11.5px;color:var(--muted)}

/* ---- Avatar-pastille (couleur stable par profil via --pc) ----------------- */
.login-avatar{display:grid;place-items:center;flex:none;width:54px;height:54px;
  border-radius:50%;font-size:22px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--pc),color-mix(in srgb,var(--pc) 62%,#0b1018));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 12px rgba(0,0,0,.25)}
.login-avatar.sm{width:20px;height:20px;font-size:10.5px;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}

/* ---- Formulaire (mot de passe / setup) ------------------------------------ */
.login-back{position:absolute;top:18px;left:18px}
.login-panel{position:relative}
.login-who{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:4px}
.login-form{display:flex;flex-direction:column;gap:8px;max-width:320px;margin:20px auto 0;
  text-align:left}
.login-label{font-size:11.5px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em;margin-top:6px}
.login-form .field{width:100%}
.login-err{margin:2px 0 0;min-height:18px;font-size:12.5px;font-weight:600;color:var(--danger)}
.login-submit{margin-top:6px;justify-content:center;color:#fff;
  /* Gradient assombri (35 % noir) : l'accent2 tiré du fond peut être clair
     (or, sable) — blanc sur accent brut tombait sous 4.5:1 (BRIEF). */
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--accent) 65%,#10131a),
    color-mix(in srgb,var(--accent2) 65%,#10131a))}

/* Lien discret « Mot de passe oublié ? » (et « J'ai déjà un code ») */
.login-forgot{margin:14px auto 0;display:block;border:none;background:none;cursor:pointer;
  color:var(--muted);font:inherit;font-size:12.5px;font-weight:600;
  text-decoration:underline;text-underline-offset:3px}
.login-forgot:hover{color:var(--txt)}

/* ---- Chip du profil connecté (près du wordmark) --------------------------- */
#auth-chip{position:fixed;top:10px;left:118px;z-index:95}
.auth-chip-btn{display:flex;align-items:center;gap:7px;padding:4px 10px 4px 5px;
  border-radius:999px;border:1px solid var(--line);background:var(--glass);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:var(--txt);font:inherit;font-size:12px;font-weight:650;cursor:pointer;
  transition:background .16s ease}
.auth-chip-btn:hover{background:color-mix(in srgb, var(--accent) 14%, transparent)}
.auth-chip-btn .ic.sm{width:12px;height:12px;color:var(--dim)}
.auth-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:196px;
  padding:6px;border-radius:14px;z-index:96}
.auth-menu button{display:flex;align-items:center;gap:9px;width:100%;padding:9px 11px;
  border:none;background:none;border-radius:9px;color:var(--txt);font:inherit;
  font-size:13px;font-weight:600;cursor:pointer;text-align:left;
  transition:background .16s ease}
.auth-menu button:hover{background:color-mix(in srgb, var(--accent) 14%, transparent)}
.auth-menu .ic{width:15px;height:15px;color:var(--muted);flex:none}
@media (max-width:640px){
  #auth-chip{left:auto;right:16px}
  .auth-menu{left:auto;right:0}
}

/* ---- Mouvement réduit ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .login-card,.auth-chip-btn,.auth-menu button{transition:none}
  .login-card:hover{transform:none}
}