/*
 * Croset Annonces : page de connexion aux couleurs de la régie.
 * Le formulaire reste celui de WordPress ; seule l'apparence change.
 * L'image du logo est injectée par inc/login.php (plugins_url).
 */

body.login {
	--ca-red: #9a2421;
	--ca-red-800: #7e1d1b;
	--ca-red-50: #fbf2f1;
	--ca-ink: #1e1c1a;
	--ca-text: #3f3c39;
	--ca-muted: #6b665f;
	--ca-border: #e8e4dd;
	--ca-input: #d8d3ca;
	--ca-focus: 0 0 0 3px rgba(154, 36, 33, 0.28);

	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100vh;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var(--ca-text);
	background: #f8f7f4;
}

body.login #login {
	width: 360px;
	max-width: calc(100% - 32px);
	padding: 32px 0 24px;
}

/* Logo de la régie (640 x 384). */
body.login h1 a {
	width: 220px;
	height: 132px;
	margin: 0 auto 12px;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

body.login h1 a:focus {
	box-shadow: var(--ca-focus);
	outline: 1px solid transparent;
	border-radius: 6px;
}

body.login .ca-login-title {
	margin: 0 0 20px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-align: center;
	text-transform: uppercase;
	color: var(--ca-red);
}

/* Carte du formulaire. */
body.login form {
	margin-top: 0;
	padding: 26px 26px 28px;
	background: #fff;
	border: 1px solid var(--ca-border);
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(30, 28, 26, 0.04);
}

body.login label {
	font-size: 13px;
	font-weight: 600;
	color: var(--ca-ink);
}

body.login form .input,
body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"] {
	min-height: 42px;
	margin: 6px 0 18px;
	padding: 6px 12px;
	font-size: 16px;
	color: var(--ca-ink);
	background: #fff;
	border: 1px solid var(--ca-input);
	border-radius: 8px;
	box-shadow: none;
}

body.login form .input:focus,
body.login input[type="text"]:focus,
body.login input[type="password"]:focus,
body.login input[type="email"]:focus,
body.login input[type="checkbox"]:focus {
	border-color: var(--ca-red);
	box-shadow: var(--ca-focus);
	outline: 1px solid transparent;
}

body.login .wp-pwd .button.wp-hide-pw {
	min-height: 42px;
	margin-top: 6px;
	color: var(--ca-muted);
}

body.login .wp-pwd .button.wp-hide-pw:focus {
	border-color: var(--ca-red);
	box-shadow: var(--ca-focus);
}

body.login input[type="checkbox"] {
	border-color: #d3cdc4;
	border-radius: 4px;
}

body.login input[type="checkbox"]:checked::before {
	content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%239a2421%27%2F%3E%3C%2Fsvg%3E");
}

body.login .forgetmenot label {
	font-weight: 400;
	color: var(--ca-text);
}

body.login .button-primary {
	min-height: 40px;
	padding: 0 20px;
	font-size: 14px;
	font-weight: 600;
	line-height: 38px;
	color: #fff;
	background: var(--ca-red);
	border-color: var(--ca-red);
	border-radius: 8px;
	box-shadow: none;
	text-shadow: none;
}

body.login .button-primary:hover,
body.login .button-primary:focus,
body.login .button-primary:active {
	color: #fff;
	background: var(--ca-red-800);
	border-color: var(--ca-red-800);
}

body.login .button-primary:focus {
	box-shadow: var(--ca-focus);
}

/* Messages (erreur, déconnexion, mot de passe oublié). */
body.login .message,
body.login .notice,
body.login #login_error {
	margin: 0 0 16px;
	padding: 12px 14px;
	font-size: 14px;
	background: #fff;
	border: 1px solid var(--ca-border);
	border-left: 4px solid #2f7d4f;
	border-radius: 8px;
	box-shadow: none;
}

body.login #login_error,
body.login .notice-error {
	background: var(--ca-red-50);
	border-left-color: var(--ca-red);
}

/* Liens sous le formulaire. */
body.login #nav,
body.login #backtoblog {
	padding: 0;
	text-align: center;
}

body.login #nav {
	margin: 18px 0 0;
}

body.login #nav a,
body.login #backtoblog a,
body.login .privacy-policy-page-link a {
	color: var(--ca-muted);
}

body.login #nav a:hover,
body.login #nav a:focus,
body.login #backtoblog a:hover,
body.login #backtoblog a:focus {
	color: var(--ca-red);
}

/* Pas de front sur ce site : le lien « Aller sur le site » ne sert à rien. */
body.login #backtoblog {
	display: none;
}

@media (max-width: 480px) {
	body.login {
		justify-content: flex-start;
	}

	body.login form {
		padding: 20px 18px 22px;
	}
}