/* ==========================================================================
   wp-login.php aux couleurs du site.

   Chargée par inc/login.php via login_enqueue_scripts. Les valeurs sont
   écrites en clair : wp-login.php ne charge ni theme.json ni components.css,
   donc ni --wp--preset--* ni --lueur-* n'y existent.

   Les sélecteurs reprennent l'identifiant #login là où le CSS du cœur
   l'utilise. WordPress écrit « #login h1 a, .login h1 a » et
   « #login #nav » : sur un simple « .login h1 a », le cœur l'emporterait
   malgré l'ordre de chargement, l'identifiant pesant plus que deux classes.
   Cette feuille étant chargée après celles du cœur, une spécificité égale
   suffit — inutile d'aller au-delà, et surtout pas de !important.
   ========================================================================== */

:root {
	--login-ink: #22202a;
	/* Le violet clair du site (#9557e8) ne porte pas de texte blanc :
	   4,37:1, sous le seuil AA. Il reste pour le halo de focus, qui n'est
	   pas du texte ; les aplats qui portent du blanc prennent la variante
	   sombre, à 6,71:1. */
	--login-violet: #9557e8;
	--login-violet-dark: #7338c8;
	--login-violet-darker: #5f2ba8;
	--login-ivory: #fbf9f5;
	--login-line: #dce2e8;
	--login-muted: #66717d;
}

body.login {
	background: linear-gradient(165deg, #f6ecff, var(--login-ivory) 62%);
	color: var(--login-ink);
	/* Même pile que le site, sans la requête Google Fonts : cet écran reçoit
	   un mot de passe, autant qu'il ne dépende de personne. */
	font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

#login {
	width: min(24rem, 92vw);
	padding-top: 6vh;
}

#login h1 a,
.login h1 a {
	width: auto;
	height: auto;
	margin-bottom: 1.5rem;
	background: none;
	color: var(--login-ink);
	font-size: 1.4rem;
	font-weight: 800;
	letter-spacing: -.03em;
	text-indent: 0;
	text-decoration: none;
	line-height: 1.2;
}

#login form {
	margin-top: 1.25rem;
	padding: 1.75rem;
	border: 1px solid var(--login-line);
	border-radius: 1.25rem;
	background: #fff;
	box-shadow: 0 22px 60px rgba(78, 39, 122, .12);
}

#login form label,
#login label {
	color: var(--login-ink);
	font-size: .875rem;
	font-weight: 600;
}

#login input[type="text"],
#login input[type="password"],
#login input[type="email"] {
	padding: .7rem .85rem;
	border: 1px solid var(--login-line);
	border-radius: .7rem;
	background: #fff;
	font-size: 1rem;
	box-shadow: none;
}

#login input[type="text"]:focus,
#login input[type="password"]:focus,
#login input[type="email"]:focus {
	border-color: var(--login-violet);
	box-shadow: 0 0 0 3px rgba(149, 87, 232, .18);
	outline: 2px solid transparent; /* le halo tient lieu d'indicateur visible */
}

.wp-core-ui .button-primary {
	padding: .55rem 1.4rem;
	border: 0;
	border-radius: 999px;
	background: var(--login-violet-dark);
	color: #fff;
	font-weight: 700;
	text-shadow: none;
	box-shadow: none;
}

.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:focus {
	background: var(--login-violet-darker);
	color: #fff;
}

#login #nav,
#login #backtoblog {
	padding: 0 .5rem;
	margin-top: 1rem;
	text-align: center;
}

#login #nav a,
#login #backtoblog a,
#login a {
	color: var(--login-muted);
	font-size: .8125rem;
	font-weight: 600;
	text-decoration: none;
}

#login #nav a:hover,
#login #backtoblog a:hover,
#login a:hover,
#login a:focus {
	color: var(--login-violet-dark);
	text-decoration: underline;
}

.login .message,
.login .success {
	border-left-color: var(--login-violet);
	border-radius: .6rem;
}

.login #login_error {
	border-left-color: #a52828;
	border-radius: .6rem;
}

.login .privacy-policy-page-link { margin-top: 1.5rem; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: .01ms !important; }
}