/* =============================================================================
   ACADÉMIE ZÉRO LIMITE — Page de connexion
   Layout: panneau gauche (photo Martin) + panneau droit (formulaire)
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ── Globals ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html,
body.login {
	margin: 0 !important;
	padding: 0 !important;
	min-height: 100vh;
	font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	background: #0F172A !important;  /* fond foncé pour la zone gauche */
	color: #1E293B;
}

/* Panneau blanc fixe qui couvre la zone droite (42%) */
body.login::after {
	content: '';
	position: fixed;
	inset: 0 0 0 58%;
	background: #ffffff;
	z-index: 5;  /* sous le contenu du formulaire */
}

/* ── Panneau gauche (photo + branding) ───────────────────────────────────────
   Créé via ::before sur le body. La photo de Martin est définie inline via
   la propriété CSS injectée par PHP (url dynamique).
   ────────────────────────────────────────────────────────────────────────── */
body.login::before {
	content: '';
	position: fixed;
	inset: 0 42% 0 0;          /* occupe 58% gauche */
	background-color: #0A3340;
	background-image: var(--azl-login-photo);
	background-size: cover;
	background-position: center top;
	z-index: 0;
}

/* Dégradé sombre sur la gauche pour lisibilité du texte */
body.login::after {
	content: '';
	position: fixed;
	inset: 0 42% 0 0;
	background: linear-gradient(
		to bottom,
		rgba(10, 51, 64, 0.55) 0%,
		rgba(10, 51, 64, 0.30) 40%,
		rgba(10, 51, 64, 0.75) 100%
	);
	z-index: 1;
}

/* ── Branding affiché sur le panneau gauche ─────────────────────────────────── */
.azl-login-branding {
	position: fixed;
	inset: auto auto 0 0;
	width: 58%;
	z-index: 2;
	padding: 48px 56px;
	pointer-events: none;
}

.azl-login-branding__logo {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
}

.azl-login-branding__logo-icon {
	width: 36px;
	height: 36px;
	background: var(--azl-login-color-logo-bg, #1E95B0);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	overflow: hidden;
	color: #ffffff;
}

.azl-login-branding__logo-icon svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
}

.azl-login-branding__logo-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

body.login.azl-login--logo-bg-transparent .azl-login-branding__logo-icon,
body.login.azl-login--logo-bg-transparent .azl-login-logo__icon {
	background: transparent;
	border-radius: 0;
}

body.login.azl-login--logo-bg-transparent.azl-login--custom-logo .azl-login-branding__logo-icon img,
body.login.azl-login--logo-bg-transparent.azl-login--custom-logo .azl-login-logo__icon img {
	object-fit: contain;
}

.azl-login-branding__logo-text {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}

.azl-login-branding__logo-text span:first-child {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--azl-login-color-line1, rgba(255, 255, 255, 0.7));
}

.azl-login-branding__logo-text span:last-child {
	font-size: 18px;
	font-weight: 800;
	color: var(--azl-login-color-line2, #ffffff);
	letter-spacing: -0.02em;
}

.azl-login-branding__logo-text span:last-child em {
	font-style: normal;
	color: var(--azl-login-color-accent, #1E95B0);
}

.azl-login-branding__tagline {
	font-size: 13px;
	font-weight: 400;
	color: var(--azl-login-color-tagline, rgba(255, 255, 255, 0.65));
	line-height: 1.6;
	max-width: 340px;
}

/* ── Panneau droit (formulaire) ─────────────────────────────────────────────── */
body.login #login {
	position: fixed !important;
	z-index: 10 !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 58% !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 40px 56px !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	background: #ffffff !important;
	overflow-y: auto !important;
}


/* Masque le h1 WordPress par défaut (remplacé par login_message) */
body.login #login h1 {
	display: none;
}

.azl-login-logo {
	display: flex;
	align-items: center;
	gap: 10px;
}

.azl-login-logo__icon {
	width: 40px;
	height: 40px;
	background: var(--azl-login-color-logo-bg, #1E95B0);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	overflow: hidden;
	color: #ffffff;
}

.azl-login-logo__icon svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
}

.azl-login-logo__icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.azl-login-logo__text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.azl-login-logo__text span:first-child {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #64748B;
}

.azl-login-logo__text span:last-child {
	font-size: 20px;
	font-weight: 800;
	color: #0F172A;
	letter-spacing: -0.03em;
	font-family: 'Plus Jakarta Sans', sans-serif;
}

.azl-login-logo__text span:last-child em {
	font-style: normal;
	color: var(--azl-login-color-accent, #1E95B0);
}

/* ── Titre et sous-titre du formulaire ─────────────────────────────────────── */
.azl-login-welcome {
	margin: 32px 0 0;
}

.azl-login-welcome h2 {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 26px;
	font-weight: 800;
	color: #0F172A;
	letter-spacing: -0.03em;
	line-height: 1.2;
	margin: 0 0 6px;
}

.azl-login-welcome p {
	font-size: 14px;
	color: #64748B;
	margin: 0 0 28px;
}

/* ── Labels ─────────────────────────────────────────────────────────────────── */
body.login label {
	font-size: 13px;
	font-weight: 600;
	color: #334155;
	display: block;
	margin-bottom: 6px;
	font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ── Inputs ─────────────────────────────────────────────────────────────────── */
body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"] {
	width: 100%;
	height: 48px;
	border: 1.5px solid #E2E8F0;
	border-radius: 10px;
	padding: 0 16px;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 14px;
	color: #1E293B;
	background: #F8FAFC;
	box-shadow: none;
	transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
	-webkit-appearance: none;
	margin-bottom: 0;
}

body.login input[type="text"]:focus,
body.login input[type="password"]:focus,
body.login input[type="email"]:focus {
	border-color: #1E95B0;
	background: #ffffff;
	box-shadow: 0 0 0 3px rgba(30, 149, 176, 0.15);
	outline: none;
}

/* ── Checkbox "Se souvenir de moi" ─────────────────────────────────────────── */
body.login p.forgetmenot {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 16px 0 20px;
}

body.login p.forgetmenot label {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	color: #475569;
	cursor: pointer;
}

body.login input[type="checkbox"] {
	width: 16px;
	height: 16px;
	border: 1.5px solid #CBD5E1;
	border-radius: 4px;
	accent-color: #1E95B0;
	cursor: pointer;
	flex-shrink: 0;
}

/* ── Bouton submit ───────────────────────────────────────────────────────────── */
body.login .button-primary,
body.login input[type="submit"] {
	width: 100%;
	height: 50px;
	background: #1E95B0;
	color: #ffffff;
	border: none;
	border-radius: 10px;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.01em;
	cursor: pointer;
	transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
	box-shadow: 0 4px 16px rgba(30, 149, 176, 0.30);
	text-shadow: none;
	-webkit-appearance: none;
	display: block;
}

body.login .button-primary:hover,
body.login input[type="submit"]:hover {
	background: #167B92;
	box-shadow: 0 6px 20px rgba(30, 149, 176, 0.40);
	transform: translateY(-1px);
}

body.login .button-primary:active,
body.login input[type="submit"]:active {
	transform: translateY(0);
}

/* ── Liens bas de formulaire ─────────────────────────────────────────────────── */
body.login #nav,
body.login #backtoblog {
	text-align: center;
	margin-top: 16px;
	padding: 0;
}

body.login #nav a,
body.login #backtoblog a {
	font-size: 13px;
	color: #64748B;
	text-decoration: none;
	font-family: 'Plus Jakarta Sans', sans-serif;
	transition: color 0.15s;
}

body.login #nav a:hover,
body.login #backtoblog a:hover {
	color: #1E95B0;
}

body.login #backtoblog {
	margin-top: 8px;
}

/* ── Messages d'erreur / notices ─────────────────────────────────────────────── */
body.login #login_error,
body.login .message,
body.login .success {
	border-radius: 8px;
	border-left: 3px solid;
	padding: 12px 14px;
	font-size: 13px;
	font-family: 'Plus Jakarta Sans', sans-serif;
	margin-bottom: 16px;
	line-height: 1.5;
}

body.login #login_error {
	border-color: #EF4444;
	background: #FEF2F2;
	color: #991B1B;
}

body.login .message {
	border-color: #1E95B0;
	background: #E6F4F8;
	color: #0F4D5C;
}

body.login .success {
	border-color: #16A34A;
	background: #F0FDF4;
	color: #166534;
}

/* ── Espacement du formulaire ────────────────────────────────────────────────── */
body.login form {
	padding: 0;
	margin: 0;
	background: transparent;
	box-shadow: none;
	border: none;
}

body.login form .input-text-wrap,
body.login form p {
	margin-bottom: 16px;
}

body.login form p:last-child {
	margin-bottom: 0;
}

/* Masque les éléments WordPress non nécessaires */
body.login #login_form .two-factor-prompt,
.language-switcher-login-form,
#login .privacy-policy-page-link {
	display: none !important;
}

/* ── Responsive ───────────────────────────────────────────────────────────────
   Desktop utilise left:58% !important — il faut tout réécraser en mobile.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
	html,
	body.login {
		background: #ffffff !important;
		overflow-x: hidden !important;
	}

	/* Masque panneau photo + dégradé */
	body.login::before,
	body.login::after {
		content: none !important;
		display: none !important;
	}

	.azl-login-branding {
		display: none !important;
	}

	/* Formulaire pleine largeur (annule left:58% !important) */
	body.login #login {
		position: relative !important;
		inset: auto !important;
		top: auto !important;
		right: auto !important;
		bottom: auto !important;
		left: auto !important;
		width: 100% !important;
		max-width: 440px !important;
		min-height: 100vh !important;
		margin: 0 auto !important;
		padding: 48px 24px 40px !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
		background: #ffffff !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
		box-sizing: border-box !important;
	}

	.azl-login-logo {
		max-width: 100%;
	}

	.azl-login-logo__text span:last-child {
		font-size: 18px;
		word-break: break-word;
	}

	.azl-login-welcome h2 {
		font-size: 22px;
	}

	.azl-login-welcome p {
		font-size: 14px;
		margin-bottom: 24px;
	}

	body.login form,
	body.login form .input,
	body.login input[type="text"],
	body.login input[type="password"],
	body.login input[type="email"],
	body.login .button.button-primary,
	body.login #wp-submit {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	body.login .forgetmenot {
		display: flex;
		align-items: flex-start;
		gap: 8px;
		max-width: 100%;
	}

	body.login .forgetmenot label {
		white-space: normal;
		line-height: 1.4;
	}

	body.login #nav,
	body.login #backtoblog {
		max-width: 100%;
		padding: 0 4px;
		word-break: break-word;
	}

	body.login #nav a,
	body.login #backtoblog a {
		display: inline-block;
		max-width: 100%;
	}
}

@media (max-width: 480px) {
	body.login #login {
		padding: 36px 20px 32px !important;
		justify-content: flex-start !important;
		padding-top: 56px !important;
	}

	.azl-login-logo__icon {
		width: 36px;
		height: 36px;
	}

	.azl-login-welcome {
		margin-top: 24px;
	}

	.azl-login-welcome h2 {
		font-size: 20px;
	}
}