/*
  VM Manager - login.css
  Ecrans d'identification et de reinitialisation (login.html, reset.html),
  charges avec theme.css uniquement.
*/
.auth-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;position:relative}
.auth-screen::before{content:'';position:absolute;width:640px;height:640px;background:radial-gradient(circle,var(--accent-dim) 0%,transparent 68%);top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}
.login-box{background:var(--bg2);border:1px solid var(--border);border-radius:20px;padding:40px 40px 32px;width:400px;max-width:100%;position:relative;z-index:1;box-shadow:var(--shadow);display:flex;flex-direction:column}
.login-logo{display:flex;align-items:center;justify-content:center;gap:10px;font-family:var(--police-titre);font-size:24px;font-weight:700;letter-spacing:-.4px;margin-bottom:4px}
.login-logo span{color:var(--accent-text)}
.login-sub{color:var(--text2);font-size:13.5px;margin-bottom:28px;text-align:center}
.auth-subtitle{font-family:var(--police-titre);font-size:16px;font-weight:700;margin-bottom:16px}
.auth-back{margin-top:12px;text-align:center}
.login-links{display:flex;justify-content:center;margin-top:14px}
.login-link{font-size:13px;color:var(--text2);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.login-link:hover{color:var(--accent-text)}
@keyframes shake{0%,100%{transform:translateX(0)}15%{transform:translateX(-8px)}30%{transform:translateX(8px)}45%{transform:translateX(-6px)}60%{transform:translateX(6px)}75%{transform:translateX(-3px)}90%{transform:translateX(3px)}}
.shake{animation:shake .5s cubic-bezier(.36,.07,.19,.97) both}

/* Le halo decoratif (::before, 640 px) depassait la largeur d'un telephone : la page defilait
   de cote (recette du 21.09.2026, D21). Il est purement visuel : on le rogne sur l'axe
   horizontal seulement, le defilement vertical du formulaire reste possible. */
.auth-screen { overflow-x: hidden; }

/* Lien vers la page de confidentialite : discret, sous la carte de connexion. */
.mentions { position: fixed; left: 0; right: 0; bottom: 14px; text-align: center; font-size: 12px; }
.mentions a { color: var(--text3, #8a93a3); text-decoration: none; }
.mentions a:hover { text-decoration: underline; }