/* Atelier — page de connexion */
@font-face { font-family: "Atelier Sans"; src: url("fonts/poppins-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Atelier Sans"; src: url("fonts/poppins-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atelier Sans"; src: url("fonts/poppins-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Atelier Sans"; src: url("fonts/poppins-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Atelier Titre"; src: url("fonts/fraunces-latin-opsz-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root { color-scheme: light; --l-papier: #f4f2ed; --l-encre: #16181b; --l-gris: #6c6a66; --l-filet: #d8d4cb; --l-alerte: #b04a22; --l-accent: #0d2051; }
@media (prefers-color-scheme: dark) {
	:root { color-scheme: dark; --l-papier: #121315; --l-encre: #ece9e2; --l-gris: #95918a; --l-filet: #2c2d30; --l-alerte: #e08a62; --l-accent: #a9b8e6; }
}

html, body.login { background: var(--l-papier); }
body.login {
	margin: 0; min-height: 100vh; min-height: 100dvh;
	display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, 1fr);
	font-family: "Atelier Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--l-encre); -webkit-font-smoothing: antialiased;
}
body.login * { box-sizing: border-box; }

/* Panneau marque */
.atelier-login-cote {
	grid-column: 1; grid-row: 1 / span 3; min-height: 100vh; min-height: 100dvh;
	background: #16181b; color: #f4f2ed;
	display: flex; flex-direction: column; justify-content: space-between;
	padding: clamp(32px, 5vw, 72px);
}
.atelier-login-surtitre { margin: 0; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(244, 242, 237, .55); }
.atelier-login-nom { margin: 0; font-family: "Atelier Titre", Georgia, serif; font-weight: 300; font-size: clamp(64px, 9vw, 132px); line-height: .95; letter-spacing: -.035em; }
.atelier-login-texte { margin: 18px 0 0; max-width: 30ch; font-size: 15px; font-weight: 300; line-height: 1.55; color: rgba(244, 242, 237, .7); }
.atelier-login-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 28px 40px; padding-top: 28px; border-top: 1px solid rgba(244, 242, 237, .18); }
.atelier-login-logos img { height: 30px; width: auto; opacity: .75; }

/* Colonne formulaire */
#login { grid-column: 2; grid-row: 1; align-self: center; justify-self: center; width: 100%; max-width: 360px; padding: 48px 24px 0; margin: 0; }
#login h1 { margin: 0 0 8px; text-align: left; }
#login h1 a {
	background: none !important; width: auto; height: auto; margin: 0; padding: 0;
	text-indent: 0; overflow: visible; text-decoration: none;
	font-family: "Atelier Titre", Georgia, serif; font-size: 34px; font-weight: 400; letter-spacing: -.02em; line-height: 1; color: var(--l-encre);
}
#login h1 a::after { content: "Connexion"; display: block; margin-top: 12px; font-family: "Atelier Sans", sans-serif; font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--l-gris); }
#login h1 a:focus { box-shadow: none; outline: 1px solid var(--l-encre); outline-offset: 6px; }

#loginform, .login form { background: transparent; border: 0; box-shadow: none; padding: 0; margin-top: 28px; overflow: visible; }
.login label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--l-gris); }
.login form .input, .login input[type="text"], .login input[type="password"] {
	background: transparent; color: var(--l-encre);
	border: 0; border-bottom: 1px solid var(--l-encre); border-radius: 0; box-shadow: none;
	font-family: inherit; font-size: 17px; padding: 8px 0; margin: 6px 0 22px; min-height: 44px;
}
.login form .input:focus, .login input[type="text"]:focus, .login input[type="password"]:focus { outline: none; box-shadow: 0 1px 0 var(--l-accent); border-bottom-color: var(--l-accent); }
.login .wp-pwd { position: relative; }
.login .button.wp-hide-pw { color: var(--l-gris); background: transparent; border: 0; box-shadow: none; height: 44px; top: 6px; right: 0; min-width: 0; }
.login .button.wp-hide-pw:focus { box-shadow: none; outline: 1px solid var(--l-encre); }
.login .button.wp-hide-pw .dashicons { color: var(--l-gris); }

.login .forgetmenot { float: none; margin: 0 0 22px; }
.login .forgetmenot label { font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--l-encre); }
.login input[type="checkbox"] { border-radius: 0; border-color: var(--l-encre); background: transparent; box-shadow: none; accent-color: var(--l-encre); }
.login input[type="checkbox"]:checked::before { filter: grayscale(1) brightness(0); }
@media (prefers-color-scheme: dark) { .login input[type="checkbox"]:checked::before { filter: grayscale(1) brightness(0) invert(1); } }

.login .submit { float: none; }
.login .button-primary, .wp-core-ui .button-primary {
	float: none; width: 100%; height: auto; min-height: 50px; padding: 0 24px;
	background: var(--l-encre); border: 1px solid var(--l-encre); border-radius: 0; box-shadow: none; text-shadow: none;
	color: var(--l-papier); font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
	transition: background .2s, color .2s;
}
.login .button-primary:hover, .login .button-primary:focus, .wp-core-ui .button-primary:hover, .wp-core-ui .button-primary:focus {
	background: transparent; border-color: var(--l-encre); color: var(--l-encre); box-shadow: none;
}

/* Messages */
.login #login_error, .login .message, .login .success, .login .notice {
	background: transparent; box-shadow: none; border: 0; border-left: 2px solid var(--l-alerte);
	margin: 22px 0 0; padding: 8px 14px; font-size: 14px; color: var(--l-alerte);
}
.login .message, .login .success { border-left-color: var(--l-encre); color: var(--l-encre); }

/* Éléments WordPress inutiles */
.login #nav, .login #backtonav, .login .privacy-policy-page-link, .login .language-switcher { display: none; }

.atelier-login-aide { grid-column: 2; grid-row: 2; justify-self: center; width: 100%; max-width: 360px; margin: 28px 0 48px; padding: 18px 24px 0; font-size: 12px; color: var(--l-gris); border-top: 1px solid var(--l-filet); }

/* Mobile : formulaire seul */
@media (max-width: 860px) {
	body.login { grid-template-columns: 1fr; }
	.atelier-login-cote { display: none; }
	#login, .atelier-login-aide { grid-column: 1; }
	#login { padding-top: 12vh; }
	#login h1 a { font-size: 44px; }
}

/* Centrage vertical de la colonne formulaire */
body.login { grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr); }
.atelier-login-cote { grid-row: 1 / -1; }
#login { grid-row: 2; padding-top: 0; }
.atelier-login-aide { grid-row: 3; align-self: start; margin-top: 24px; }
.atelier-login-logos img { filter: brightness(0) invert(1); opacity: .7; }
@media (max-width: 860px) { #login { padding-top: 0; } }

/* Desktop : « Atelier » est déjà dans le panneau, le titre du formulaire devient « Connexion » */
@media (min-width: 861px) {
	#login h1 a { font-size: 0; }
	#login h1 a::after { margin-top: 0; font-family: "Atelier Sans", sans-serif; font-size: 30px; font-weight: 500; letter-spacing: -.03em; text-transform: none; color: var(--l-encre); }
}
@media (prefers-color-scheme: dark) {
	.atelier-login-cote { background: #1c1e22; border-right: 1px solid #2c2d30; }
}

/* Liens et boutons secondaires (dont l'écran de vérification en deux étapes) : plus de bleu WordPress */
.login a, .login a:visited { color: var(--l-encre); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.login a:hover, .login a:focus { color: var(--l-gris); box-shadow: none; outline: none; }
.login .button:not(.button-primary):not(.wp-hide-pw), .wp-core-ui .button-secondary:not(.wp-hide-pw) {
	display: block; width: 100%; min-height: 46px; margin-top: 10px; padding: 0 18px;
	background: transparent; color: var(--l-encre); border: 1px solid var(--l-filet); border-radius: 0; box-shadow: none;
	font-family: inherit; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; text-align: center;
}
.login .button:not(.button-primary):not(.wp-hide-pw):hover, .wp-core-ui .button-secondary:not(.wp-hide-pw):hover { border-color: var(--l-encre); background: transparent; color: var(--l-encre); }
.login form p { color: var(--l-encre); }
.login .backup-methods-wrap, .login .two-factor-backup-methods { margin: 28px 0 0; padding: 18px 0 0; border-top: 1px solid var(--l-filet); font-size: 13px; color: var(--l-gris); }
.login .backup-methods-wrap ul, .login .two-factor-backup-methods ul, .login #login ul { list-style: none; margin: 8px 0 0; padding: 0; }
.login .backup-methods-wrap li, .login #login li { margin: 6px 0; padding-left: 14px; position: relative; }
.login .backup-methods-wrap li::before, .login #login li::before { content: "–"; position: absolute; left: 0; color: var(--l-gris); }
.login #backtoblog, .login p#backtoblog { display: none; }
.login input::placeholder { color: color-mix(in srgb, var(--l-gris) 60%, transparent); letter-spacing: .3em; }

/* Lien « mot de passe oublié » */
.atelier-login-aide { line-height: 1.7; }
.atelier-login-aide a { color: var(--l-encre); text-decoration: none; border-bottom: 1px solid var(--l-filet); }
.atelier-login-aide a:hover { border-bottom-color: currentColor; }