/**
 * Vauban — Pages de connexion dédiées (/connexion-*).
 *
 * Feuille AUTONOME (hors design system). Mise en page 2 colonnes sur PC
 * (panneau de marque à dégradé fixe + panneau formulaire), empilée sur mobile.
 * Palette locale --vlogin-* : le panneau de marque garde un dégradé indigo FIXE
 * (texte blanc toujours lisible, indépendant du thème) ; le panneau formulaire
 * s'adapte clair / sombre via prefers-color-scheme. Toutes les couleurs de texte
 * sont explicites et scopées sous .vauban-login-page pour rester immunes aux
 * styles du thème (Astra) chargés par wp_head().
 */

.vauban-login-page {
	--vlogin-brand-1:     #4F46E5;
	--vlogin-brand-2:     #7C3AED;
	--vlogin-on-brand:    #FFFFFF;
	--vlogin-on-brand-mut: rgba(255, 255, 255, 0.82);

	--vlogin-bg:          #EEF0F6;
	--vlogin-bg-accent:   #E3E6F2;
	--vlogin-card:        #FFFFFF;
	--vlogin-text:        #1E293B;
	--vlogin-muted:       #64748B;
	--vlogin-border:      #E2E6F0;
	--vlogin-field-bg:    #FFFFFF;
	--vlogin-field-border:#CBD2E0;
	--vlogin-primary:     #4F46E5;
	--vlogin-primary-2:   #7C3AED;
	--vlogin-primary-ink: #FFFFFF;
	--vlogin-focus:       rgba(79, 70, 229, 0.18);
	--vlogin-error-bg:    #FDECEC;
	--vlogin-error-bd:    #F5C2C2;
	--vlogin-error-ink:   #9B1C1C;
	--vlogin-info-bg:     #EEF2FF;
	--vlogin-info-bd:     #C7D2FE;
	--vlogin-info-ink:    #3730A3;
	--vlogin-shadow:      0 24px 60px rgba(15, 23, 42, 0.16);
}

@media (prefers-color-scheme: dark) {
	.vauban-login-page {
		--vlogin-bg:          #0F141F;
		--vlogin-bg-accent:   #161D2C;
		--vlogin-card:        #1B2333;
		--vlogin-text:        #E8ECF4;
		--vlogin-muted:       #95A0B5;
		--vlogin-border:      #2A3346;
		--vlogin-field-bg:    #131A27;
		--vlogin-field-border:#37425A;
		--vlogin-primary:     #818CF8;
		--vlogin-primary-2:   #A78BFA;
		--vlogin-primary-ink: #0F141F;
		--vlogin-focus:       rgba(129, 140, 248, 0.26);
		--vlogin-error-bg:    #3A1D1D;
		--vlogin-error-bd:    #5C2B2B;
		--vlogin-error-ink:   #F3B4B4;
		--vlogin-info-bg:     #1E2740;
		--vlogin-info-bd:     #36406A;
		--vlogin-info-ink:    #C7D2FE;
		--vlogin-shadow:      0 24px 60px rgba(0, 0, 0, 0.5);
	}
}

.vauban-login-page {
	margin: 0;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--vlogin-text);
	background:
		radial-gradient(1200px 600px at 50% -10%, var(--vlogin-bg-accent), transparent 60%),
		var(--vlogin-bg);
	-webkit-font-smoothing: antialiased;
}

.vauban-login-page * {
	box-sizing: border-box;
}

.vauban-login-page .vlogin-shell {
	width: 100%;
	max-width: 940px;
}

.vauban-login-page .vlogin-split {
	display: flex;
	width: 100%;
	min-height: 520px;
	border-radius: 20px;
	overflow: hidden;
	background: var(--vlogin-card);
	box-shadow: var(--vlogin-shadow);
}

/* ---- Colonne de marque (gauche) — dégradé FIXE, texte blanc ---- */
.vauban-login-page .vlogin-aside {
	flex: 0 0 44%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 48px 44px;
	background: linear-gradient(150deg, var(--vlogin-brand-1), var(--vlogin-brand-2));
	color: var(--vlogin-on-brand);
}

.vauban-login-page .vlogin-mark {
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 16px;
	margin: 0 0 26px;
	color: var(--vlogin-on-brand);
	background: rgba(255, 255, 255, 0.16);
}

.vauban-login-page .vlogin-eyebrow {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--vlogin-on-brand-mut);
}

.vauban-login-page .vlogin-title {
	margin: 0 0 14px;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.18;
	color: var(--vlogin-on-brand);
}

.vauban-login-page .vlogin-desc {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--vlogin-on-brand-mut);
}

/* ---- Colonne formulaire (droite) — adaptative clair / sombre ---- */
.vauban-login-page .vlogin-panel {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 48px 48px;
	background: var(--vlogin-card);
}

.vauban-login-page .vlogin-panel-inner {
	width: 100%;
	max-width: 380px;
	margin: 0 auto;
}

.vauban-login-page .vlogin-formtitle {
	margin: 0 0 22px;
	font-size: 20px;
	font-weight: 700;
	color: var(--vlogin-text);
}

.vauban-login-page .vlogin-notice {
	margin: 0 0 18px;
	padding: 11px 14px;
	border-radius: 10px;
	font-size: 13.5px;
	line-height: 1.45;
}

.vauban-login-page .vlogin-notice--error {
	background: var(--vlogin-error-bg);
	border: 1px solid var(--vlogin-error-bd);
	color: var(--vlogin-error-ink);
}

.vauban-login-page .vlogin-notice--info {
	background: var(--vlogin-info-bg);
	border: 1px solid var(--vlogin-info-bd);
	color: var(--vlogin-info-ink);
}

.vauban-login-page .vlogin-lead {
	margin: 0 0 20px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--vlogin-muted);
}

.vauban-login-page .vlogin-field {
	margin: 0 0 16px;
}

.vauban-login-page .vlogin-label {
	display: block;
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--vlogin-text);
}

.vauban-login-page .vlogin-input-wrap {
	position: relative;
}

.vauban-login-page .vlogin-input {
	width: 100%;
	padding: 11px 13px;
	font-size: 15px;
	color: var(--vlogin-text);
	background: var(--vlogin-field-bg);
	border: 1px solid var(--vlogin-field-border);
	border-radius: 10px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vauban-login-page .vlogin-input-wrap .vlogin-input {
	padding-right: 44px;
}

.vauban-login-page .vlogin-input:focus {
	outline: none;
	border-color: var(--vlogin-primary);
	box-shadow: 0 0 0 4px var(--vlogin-focus);
}

.vauban-login-page .vlogin-input::placeholder {
	color: var(--vlogin-muted);
}

.vauban-login-page .vlogin-pass-toggle {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: none;
	border-radius: 8px;
	background: transparent;
	color: var(--vlogin-muted);
	cursor: pointer;
}

.vauban-login-page .vlogin-pass-toggle:hover {
	color: var(--vlogin-text);
}

.vauban-login-page .vlogin-pass-toggle:focus-visible {
	outline: 2px solid var(--vlogin-primary);
	outline-offset: 1px;
}

.vauban-login-page .vlogin-pass-toggle.is-visible {
	color: var(--vlogin-primary);
}

.vauban-login-page .vlogin-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 4px 0 22px;
	font-size: 13px;
}

.vauban-login-page .vlogin-remember {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--vlogin-muted);
	cursor: pointer;
}

.vauban-login-page .vlogin-remember input {
	width: 15px;
	height: 15px;
	accent-color: var(--vlogin-primary);
}

.vauban-login-page .vlogin-forgot {
	color: var(--vlogin-primary);
	text-decoration: none;
}

.vauban-login-page .vlogin-forgot:hover {
	text-decoration: underline;
}

.vauban-login-page .vlogin-submit {
	width: 100%;
	padding: 12px 16px;
	font-size: 15px;
	font-weight: 600;
	color: var(--vlogin-primary-ink);
	background: linear-gradient(135deg, var(--vlogin-primary), var(--vlogin-primary-2));
	border: none;
	border-radius: 10px;
	cursor: pointer;
	transition: filter 0.15s ease, transform 0.05s ease;
}

.vauban-login-page .vlogin-submit:hover {
	filter: brightness(1.05);
}

.vauban-login-page .vlogin-submit:active {
	transform: translateY(1px);
}

.vauban-login-page .vlogin-submit:focus-visible {
	outline: 2px solid var(--vlogin-primary);
	outline-offset: 2px;
}

.vauban-login-page .vlogin-foot {
	margin: 22px 0 0;
	text-align: center;
	font-size: 13px;
}

.vauban-login-page .vlogin-foot a {
	color: var(--vlogin-muted);
	text-decoration: none;
}

.vauban-login-page .vlogin-foot a:hover {
	color: var(--vlogin-text);
	text-decoration: underline;
}

/* ============ Responsive ============ */

/* Tablette / petit écran : empilement des deux colonnes. */
@media (max-width: 820px) {
	.vauban-login-page {
		padding: 0;
		align-items: stretch;
	}
	.vauban-login-page .vlogin-shell {
		max-width: 560px;
		margin: 0 auto;
	}
	.vauban-login-page .vlogin-split {
		flex-direction: column;
		min-height: 100vh;
		border-radius: 0;
		box-shadow: none;
	}
	.vauban-login-page .vlogin-aside {
		flex: 0 0 auto;
		padding: 40px 32px 34px;
	}
	.vauban-login-page .vlogin-mark {
		margin-bottom: 18px;
	}
	.vauban-login-page .vlogin-title {
		font-size: 25px;
	}
	.vauban-login-page .vlogin-panel {
		flex: 1 1 auto;
		padding: 34px 32px 40px;
	}
	.vauban-login-page .vlogin-panel-inner {
		max-width: 460px;
	}
}

/* Mobile. */
@media (max-width: 480px) {
	.vauban-login-page .vlogin-aside {
		padding: 32px 22px 26px;
	}
	.vauban-login-page .vlogin-title {
		font-size: 22px;
	}
	.vauban-login-page .vlogin-desc {
		font-size: 14px;
	}
	.vauban-login-page .vlogin-panel {
		padding: 28px 22px 34px;
	}
}

/* Confort large écran : on autorise un peu plus de largeur. */
@media (min-width: 1280px) {
	.vauban-login-page .vlogin-shell {
		max-width: 1040px;
	}
}