/* Externalise depuis la modification #56, bloc inline #51 — position et ordre de cascade inchanges */

/* G6M_LOGIN_LEFT_PREMIUM_V402
   Left-column Connexion redesign ONLY.
   Does NOT touch .g6m397-col--present, stage BG, shell glass, or palette tokens.
   Rhythm: 8px base / 24px section gaps. */

html#XF[data-template="login"],
html body[data-template="login"],
html body.template-login {
	--g6m402: V402;
	--g6m402-gap: 24px;
	--g6m402-gap-md: 16px;
	--g6m402-gap-sm: 8px;
	--g6m402-field-h: 56px;
	--g6m402-btn-h: 56px;
	--g6m402-r: 14px;
}

/* —— Left column stack —— */
html#XF[data-template="login"] .g6m397-col--form {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	gap: 0 !important;
	min-width: 0 !important;
	padding-right: 16px !important;
}

/* Hero: logo → title → subtitle */
html#XF[data-template="login"] .g6m397-col--form .g6m-login-hero {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: var(--g6m402-gap-sm) !important;
	margin: 0 0 var(--g6m402-gap) !important;
	padding: 0 !important;
	text-align: left !important;
}

html#XF[data-template="login"] .g6m397-col--form .g6m-login-hero__logo {
	height: 36px !important;
	max-width: 220px !important;
	margin: 0 0 var(--g6m402-gap-sm) !important;
}

html#XF[data-template="login"] .g6m397-col--form .g6m-login-hero__title {
	margin: 0 !important;
	font-size: 1.2rem !important;
	font-weight: 750 !important;
	line-height: 1.3 !important;
	letter-spacing: -0.015em !important;
	color: #fff !important;
}

html#XF[data-template="login"] .g6m397-col--form .g6m-login-hero__sub {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	color: var(--g6m397-muted, rgba(245, 245, 247, 0.62)) !important;
	font-family: var(--g6m397-font, Inter, system-ui, sans-serif) !important;
	font-size: 0.84rem !important;
	font-weight: 450 !important;
	line-height: 1.45 !important;
	max-width: 36ch !important;
}

html#XF[data-template="login"] .g6m397-col--form .g6m-login-lead {
	display: none !important;
}

/* Form rhythm */
html#XF[data-template="login"] .g6m397-col--form form.block .block-body {
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
}

html#XF[data-template="login"] .g6m397-col--form form.block .block-body > .formRow.formRow--input {
	margin: 0 0 var(--g6m402-gap-md) !important;
	gap: var(--g6m402-gap-sm) !important;
}

html#XF[data-template="login"] .g6m397-col--form form.block .block-body > .formRow.formRow--input .formRow-label,
html#XF[data-template="login"] .g6m397-col--form form.block .block-body > .formRow.formRow--input > dt {
	margin: 0 !important;
	padding: 0 !important;
	color: var(--g6m397-pink, #ff2fae) !important;
	font-size: 0.68rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	line-height: 1.3 !important;
}

/* Uniform fields */
html#XF[data-template="login"] .g6m397-col--form form.block .block-body > .formRow.formRow--input .input,
html#XF[data-template="login"] .g6m397-col--form form.block .block-body > .formRow.formRow--input input.input,
html#XF[data-template="login"] .g6m397-col--form form.block .inputGroup input.input,
html#XF[data-template="login"] .g6m397-col--form form.block .inputGroup input[type="password"] {
	height: var(--g6m402-field-h) !important;
	min-height: var(--g6m402-field-h) !important;
	max-height: var(--g6m402-field-h) !important;
	padding: 0 14px 0 52px !important;
	border-radius: var(--g6m402-r) !important;
	box-sizing: border-box !important;
	line-height: 1.3 !important;
}

html#XF[data-template="login"] .g6m397-col--form form.block .inputGroup:has(input[type="password"]) > input.input {
	padding-right: calc(var(--g6m397-eye, 52px) + 6px) !important;
}

/* Valid check on login field */
html#XF[data-template="login"] .g6m397-col--form form.block .block-body > .formRow.formRow--input:first-of-type > dd {
	position: relative !important;
}

html#XF[data-template="login"] .g6m397-col--form form.block .block-body > .formRow.formRow--input:first-of-type input.input:valid:not(:placeholder-shown) {
	padding-right: 44px !important;
	border-color: rgba(52, 211, 153, 0.55) !important;
}

html#XF[data-template="login"] .g6m397-col--form form.block .block-body > .formRow.formRow--input:first-of-type > dd::after {
	content: "" !important;
	position: absolute !important;
	top: calc(var(--g6m402-field-h) / 2) !important;
	right: 14px !important;
	z-index: 4 !important;
	width: 16px !important;
	height: 16px !important;
	transform: translateY(-50%) scale(0) !important;
	opacity: 0 !important;
	pointer-events: none !important;
	background: #34d399 !important;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / contain !important;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / contain !important;
	transition: opacity 180ms ease, transform 180ms ease !important;
}

html#XF[data-template="login"] .g6m397-col--form form.block .block-body > .formRow.formRow--input:first-of-type:has(input.input:valid:not(:placeholder-shown)) > dd::after {
	opacity: 1 !important;
	transform: translateY(-50%) scale(1) !important;
}

/* Forgot under password — right aligned */
html#XF[data-template="login"] .g6m397-col--form .g6m402-forgot {
	display: flex !important;
	justify-content: flex-end !important;
	width: 100% !important;
	margin: calc(var(--g6m402-gap-sm) * -0.5) 0 var(--g6m402-gap-md) !important;
	padding: 0 !important;
}

html#XF[data-template="login"] .g6m397-col--form .g6m402-forgot a,
html#XF[data-template="login"] .g6m397-col--form a.g6m402-forgot-link {
	display: inline-flex !important;
	margin: 0 !important;
	padding: 0 !important;
	color: var(--g6m397-cyan, #00d8ff) !important;
	font-size: 0.8rem !important;
	font-weight: 550 !important;
	line-height: 1.35 !important;
	text-decoration: none !important;
	text-align: right !important;
	white-space: nowrap !important;
}

html#XF[data-template="login"] .g6m397-col--form .g6m402-forgot a:hover,
html#XF[data-template="login"] .g6m397-col--form .g6m402-forgot a:focus-visible {
	color: #7de9ff !important;
	text-decoration: underline !important;
	outline: none !important;
}

/* Hide old meta side-by-side forgot placement */
html#XF[data-template="login"] .g6m397-col--form .g6m397-meta {
	display: contents !important;
}

html#XF[data-template="login"] .g6m397-col--form .g6m397-meta > div:has(a[href*="lost-password"]),
html#XF[data-template="login"] .g6m397-col--form .g6m397-forgot-original {
	display: none !important;
}

/* Cloudflare dedicated block */
html#XF[data-template="login"] .g6m397-col--form form.block .formRow:has(.cf-turnstile),
html#XF[data-template="login"] .g6m397-col--form form.block .formRow:has([data-xf-init="turnstile"]),
html#XF[data-template="login"] .g6m397-col--form form.block .formRow[context="xf_login"] {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 0 var(--g6m402-gap) !important;
	padding: 16px !important;
	border-radius: var(--g6m402-r) !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	background: rgba(255, 255, 255, 0.035) !important;
	box-shadow: none !important;
	gap: 0 !important;
	text-align: center !important;
}

html#XF[data-template="login"] .g6m397-col--form form.block .formRow:has(.cf-turnstile) > dd,
html#XF[data-template="login"] .g6m397-col--form form.block .formRow[context="xf_login"] > dd {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	margin: 0 auto !important;
	padding: 0 !important;
}

html#XF[data-template="login"] .g6m397-col--form form.block .formRow:has(.cf-turnstile) .cf-turnstile,
html#XF[data-template="login"] .g6m397-col--form form.block .formRow[context="xf_login"] .cf-turnstile,
html#XF[data-template="login"] .g6m397-col--form form.block .formRow[context="xf_login"] iframe {
	display: block !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Remember standalone after CF */
html#XF[data-template="login"] .g6m397-col--form form.block .formRow:has(input[name="remember"]),
html#XF[data-template="login"] .g6m397-col--form .g6m402-remember {
	display: block !important;
	margin: 0 0 var(--g6m402-gap) !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
}

html#XF[data-template="login"] .g6m397-col--form form.block label.iconic:has(> input[name="remember"]) {
	display: inline-flex !important;
	align-items: flex-start !important;
	gap: 12px !important;
	padding: 0 !important;
	max-width: 100% !important;
}

/* CTA premium spacing — same gradient */
html#XF[data-template="login"] .g6m397-col--form form.block .formSubmitRow,
html#XF[data-template="login"] .g6m397-col--form form.block .formSubmitRow-controls {
	margin: 0 0 var(--g6m402-gap) !important;
	padding: 0 !important;
}

html#XF[data-template="login"] .g6m397-col--form form.block .formSubmitRow .button.button--primary,
html#XF[data-template="login"] .g6m397-col--form form.block button[type="submit"].button--primary {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 12px !important;
	width: 100% !important;
	min-height: var(--g6m402-btn-h) !important;
	height: var(--g6m402-btn-h) !important;
	padding: 0 22px !important;
	border-radius: var(--g6m402-r) !important;
	line-height: 1 !important;
	letter-spacing: 0.09em !important;
}

html#XF[data-template="login"] .g6m397-col--form form.block .formSubmitRow .button.button--primary .button-text,
html#XF[data-template="login"] .g6m397-col--form form.block button[type="submit"].button--primary .button-text {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 12px !important;
	line-height: 1 !important;
}

html#XF[data-template="login"] .g6m397-col--form .g6m402-cta-arrow {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 1rem !important;
	height: 1rem !important;
	margin-left: 2px !important;
	flex: 0 0 auto !important;
	opacity: 0.95 !important;
}

html#XF[data-template="login"] .g6m397-col--form .g6m402-cta-arrow svg {
	width: 14px !important;
	height: 14px !important;
	display: block !important;
	stroke: currentColor !important;
	fill: none !important;
}

/* Signup secondary card */
html#XF[data-template="login"] .g6m397-col--form .g6m397-create,
html#XF[data-template="login"] .g6m397-col--form .block-outer--after {
	margin: 0 0 var(--g6m402-gap) !important;
	padding: 16px !important;
	border-radius: var(--g6m402-r) !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	background: rgba(255, 255, 255, 0.03) !important;
	text-align: center !important;
}

html#XF[data-template="login"] .g6m397-col--form .g6m397-create__title,
html#XF[data-template="login"] .g6m397-col--form .g6m397-create .block-outer-middle {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 10px !important;
}

html#XF[data-template="login"] .g6m397-col--form .g6m397-create__title-text {
	display: block !important;
	color: #fff !important;
	font-size: 0.92rem !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
}

html#XF[data-template="login"] .g6m397-col--form .g6m397-create__desc {
	display: block !important;
	margin: 0 !important;
	color: var(--g6m397-muted, rgba(245, 245, 247, 0.62)) !important;
	font-size: 0.8rem !important;
	font-weight: 450 !important;
	line-height: 1.4 !important;
}

html#XF[data-template="login"] .g6m397-col--form .g6m397-create__cta,
html#XF[data-template="login"] .g6m397-col--form .block-outer--after .button,
html#XF[data-template="login"] .g6m397-col--form .block-outer--after a.button {
	min-height: 44px !important;
	border-radius: 12px !important;
	border: 1px solid rgba(0, 216, 255, 0.4) !important;
	background: rgba(0, 216, 255, 0.06) !important;
	color: #7de9ff !important;
	letter-spacing: 0.06em !important;
}

/* Quick login INSIDE left column */
html#XF[data-template="login"] .g6m397-col--form .g6m397-quick {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

html#XF[data-template="login"] .g6m397-col--form .g6m397-quick__head {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	margin: 0 0 var(--g6m402-gap-md) !important;
	color: rgba(245, 245, 247, 0.55) !important;
	font-size: 0.7rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
}

html#XF[data-template="login"] .g6m397-col--form .g6m397-quick__head::before,
html#XF[data-template="login"] .g6m397-col--form .g6m397-quick__head::after {
	content: "" !important;
	flex: 1 1 auto !important;
	height: 1px !important;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent) !important;
}

html#XF[data-template="login"] .g6m397-col--form .g6m397-quick__grid,
html#XF[data-template="login"] .g6m397-col--form .g6m397-quick .listHeap {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 10px !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

html#XF[data-template="login"] .g6m397-col--form .g6m397-quick__grid > li:nth-child(3),
html#XF[data-template="login"] .g6m397-col--form .g6m397-quick .listHeap > li:nth-child(3) {
	grid-column: 1 / -1 !important;
}

html#XF[data-template="login"] .g6m397-col--form .g6m397-quick .g6m-login-social__btn,
html#XF[data-template="login"] .g6m397-col--form .g6m397-quick .button--provider,
html#XF[data-template="login"] .g6m397-col--form .g6m397-quick .js-webauthnStart {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	width: 100% !important;
	min-height: 48px !important;
	height: 48px !important;
	padding: 0 14px !important;
	border-radius: var(--g6m402-r) !important;
	line-height: 1 !important;
	box-sizing: border-box !important;
}

/* Hide orphan quick outside left col if any leftover */
html#XF[data-template="login"] .p-body-inner > .g6m397-quick {
	display: none !important;
}

/* Secure/legal stay below card — unchanged visually, just spacing if quick moved */
html#XF[data-template="login"] .g6m397-secure {
	margin-top: 8px !important;
}

/* —— Responsive left column —— */
@media (max-width: 900px) {
	html#XF[data-template="login"] .g6m397-col--form {
		padding-right: 0 !important;
	}
	html#XF[data-template="login"] .g6m397-col--form .g6m-login-hero {
		align-items: center !important;
		text-align: center !important;
	}
	html#XF[data-template="login"] .g6m397-col--form .g6m-login-hero__sub {
		max-width: 42ch !important;
		text-align: center !important;
	}
}

@media (max-width: 480px) {
	html#XF[data-template="login"],
	html body[data-template="login"] {
		--g6m402-gap: 20px;
		--g6m402-gap-md: 14px;
	}
	html#XF[data-template="login"] .g6m397-col--form .g6m397-quick__grid,
	html#XF[data-template="login"] .g6m397-col--form .g6m397-quick .listHeap {
		grid-template-columns: 1fr !important;
	}
	html#XF[data-template="login"] .g6m397-col--form .g6m402-forgot a {
		white-space: normal !important;
		text-align: right !important;
	}
}

/* END G6M_LOGIN_LEFT_PREMIUM_V402 */