/* ==========================================================================
   EKLAIA — Pages d'authentification
   Même langage visuel que la landing « Deep Studio », appliqué au layout
   du panneau. Portée : body.is-auth-page (classe déjà posée par MagicAI sur
   /login, /register et /forgot-password).

   Le balisage des formulaires n'est PAS modifié : le JS de connexion cible
   #email, #password, #remember, #recaptcha, #redirect. On habille les
   classes existantes (.lqd-input, .lqd-btn…).
   ========================================================================== */

body.is-auth-page {
	--void: #05060b;
	--carbon: #0a0c16;
	--slab: #0e1120;

	--iris: #6d5bff;
	--iris-lo: #4a37e8;
	--magenta: #ff3d9a;
	--cyan: #35e7ff;

	--chalk: #f2f4ff;
	--haze: #a3aac9;
	--dim: #6c7597;

	--rim: rgba(255, 255, 255, 0.09);
	--rim-hi: rgba(255, 255, 255, 0.22);
	--glass: rgba(255, 255, 255, 0.026);
	--glass-hi: rgba(255, 255, 255, 0.05);

	--display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
	--body: 'Manrope', 'Segoe UI', system-ui, sans-serif;
	--mono: 'JetBrains Mono', ui-monospace, monospace;

	background: var(--void) !important;
	color: var(--haze) !important;
	font-family: var(--body);
}

/* Le layout panneau impose des fonds clairs : on les neutralise ici. */
body.is-auth-page .lqd-page,
body.is-auth-page .lqd-page-wrapper,
body.is-auth-page .lqd-page-content-wrap,
body.is-auth-page .lqd-page-content {
	background: transparent !important;
}

/* --------------------------------------------------------------------------
   Atmosphère
   -------------------------------------------------------------------------- */

.ekla-auth-atmos {
	position: fixed;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.ekla-auth-atmos i {
	position: absolute;
	display: block;
	border-radius: 50%;
	filter: blur(90px);
}

.ekla-auth-atmos i:nth-child(1) {
	width: 55vw;
	height: 55vw;
	top: -18vw;
	left: -10vw;
	background: radial-gradient(circle at 40% 40%, rgba(109, 91, 255, 0.7), transparent 62%);
}

.ekla-auth-atmos i:nth-child(2) {
	width: 42vw;
	height: 42vw;
	bottom: -14vw;
	right: -8vw;
	background: radial-gradient(circle at 50% 50%, rgba(255, 61, 154, 0.5), transparent 64%);
}

.ekla-auth-atmos i:nth-child(3) {
	width: 34vw;
	height: 34vw;
	top: 38vh;
	left: 44%;
	background: radial-gradient(circle at 50% 50%, rgba(53, 231, 255, 0.28), transparent 66%);
}

/* --------------------------------------------------------------------------
   Structure
   -------------------------------------------------------------------------- */

.ekla-auth {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	min-height: 100vh;
}

.ekla-auth-head {
	position: absolute;
	z-index: 3;
	inset-inline: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.6rem clamp(1.25rem, 4vw, 3rem);
}

.ekla-auth-head img {
	height: 30px;
	width: auto;
	display: block;
}

.ekla-auth-back {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.844rem;
	font-weight: 600;
	color: var(--haze);
	text-decoration: none;
	transition: color 220ms ease;
}

.ekla-auth-back:hover {
	color: var(--chalk);
}

.ekla-auth-back svg {
	width: 16px;
	height: 16px;
}

/* Colonne formulaire */
.ekla-auth-pane {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(6rem, 12vh, 8rem) clamp(1.25rem, 4vw, 3rem) clamp(3rem, 8vh, 5rem);
}

.ekla-auth-card {
	width: 100%;
	max-width: 27rem;
	padding: clamp(1.6rem, 3vw, 2.6rem);
	border-radius: 26px;
	border: 1px solid var(--rim);
	background: linear-gradient(168deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.014) 42%),
		var(--slab);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.06);
	text-align: start;
	position: relative;
}

.ekla-auth-card::before {
	content: '';
	position: absolute;
	top: -1px;
	left: 16%;
	right: 16%;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--rim-hi) 30%, var(--rim-hi) 70%, transparent);
}

/* Colonne argumentaire */
.ekla-auth-aside {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.6rem;
	padding: clamp(6rem, 12vh, 8rem) clamp(2rem, 5vw, 4.5rem) clamp(3rem, 8vh, 5rem);
	border-inline-start: 1px solid var(--rim);
	background: linear-gradient(200deg, rgba(109, 91, 255, 0.1), transparent 55%);
}

.ekla-auth-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	align-self: flex-start;
	font-family: var(--mono);
	font-size: 0.688rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--haze);
	padding: 0.44rem 0.9rem 0.44rem 0.72rem;
	border: 1px solid var(--rim);
	border-radius: 999px;
	background: var(--glass);
}

.ekla-auth-eyebrow::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--cyan);
	box-shadow: 0 0 0 3px rgba(53, 231, 255, 0.16), 0 0 14px var(--cyan);
	flex: none;
}

.ekla-auth-aside h2 {
	font-family: var(--display);
	font-size: clamp(1.9rem, 3vw, 2.8rem);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -0.035em;
	color: var(--chalk);
	margin: 0;
	max-width: 15em;
}

.ekla-auth-points {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	max-width: 30rem;
}

.ekla-auth-points li {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	font-size: 0.938rem;
	line-height: 1.5;
	color: var(--haze);
}

.ekla-auth-points svg {
	flex: none;
	margin-top: 3px;
	width: 18px;
	height: 18px;
	color: var(--iris);
}

.ekla-auth-points strong {
	color: var(--chalk);
	font-weight: 700;
}

.ekla-auth-engines {
	margin-top: 0.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--rim);
}

.ekla-auth-engines p {
	font-family: var(--mono);
	font-size: 0.625rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--dim);
	margin: 0 0 0.9rem;
}

.ekla-auth-engines div {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.4rem;
}

.ekla-auth-engines span {
	font-family: var(--display);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--chalk);
	opacity: 0.45;
}

.ekla-auth-engines img {
	height: 20px;
	width: auto;
	opacity: 0.5;
	filter: brightness(0) invert(1);
}

/* --------------------------------------------------------------------------
   Typographie du formulaire
   -------------------------------------------------------------------------- */

body.is-auth-page .ekla-auth-card h1 {
	font-family: var(--display);
	font-size: clamp(1.65rem, 3vw, 2.05rem);
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 1.1;
	color: var(--chalk) !important;
	/* Les vues d'origine posent mb-11 ; on impose notre propre respiration. */
	margin: 0 0 1.9rem !important;
}

.ekla-auth-sub {
	font-size: 0.875rem;
	color: var(--haze);
	margin: 0 0 1.9rem;
}

/* --------------------------------------------------------------------------
   Champs
   -------------------------------------------------------------------------- */

body.is-auth-page .lqd-input-label,
body.is-auth-page .lqd-input-label-txt {
	font-family: var(--mono) !important;
	font-size: 0.625rem !important;
	font-weight: 500 !important;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dim) !important;
}

body.is-auth-page .lqd-input {
	border-radius: 13px !important;
	border: 1px solid var(--rim) !important;
	background: rgba(255, 255, 255, 0.03) !important;
	color: var(--chalk) !important;
	font-family: var(--body) !important;
	font-size: 0.938rem !important;
	height: 3rem !important;
	padding-inline: 0.95rem !important;
	box-shadow: none !important;
	transition: border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

body.is-auth-page .lqd-input::placeholder {
	color: var(--dim) !important;
	opacity: 1;
}

body.is-auth-page .lqd-input:focus,
body.is-auth-page .lqd-input:focus-visible {
	outline: 0 !important;
	border-color: rgba(109, 91, 255, 0.65) !important;
	background: rgba(255, 255, 255, 0.05) !important;
	box-shadow: 0 0 0 4px rgba(109, 91, 255, 0.16) !important;
}

/* Remplissage automatique du navigateur : sinon fond blanc illisible */
body.is-auth-page .lqd-input:-webkit-autofill,
body.is-auth-page .lqd-input:-webkit-autofill:hover,
body.is-auth-page .lqd-input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--chalk);
	-webkit-box-shadow: 0 0 0 1000px #14172a inset;
	caret-color: var(--chalk);
}

body.is-auth-page .lqd-show-password {
	color: var(--dim);
}

body.is-auth-page .lqd-show-password:hover {
	background: var(--glass-hi) !important;
	color: var(--chalk);
}

/* Case à cocher */
body.is-auth-page input[type='checkbox'].lqd-input {
	width: 18px !important;
	height: 18px !important;
	min-height: 0 !important;
	padding: 0 !important;
	border-radius: 6px !important;
	accent-color: var(--iris);
	flex: none;
}

body.is-auth-page .lqd-input-label:has(input[type='checkbox']) .lqd-input-label-txt {
	font-family: var(--body) !important;
	font-size: 0.844rem !important;
	letter-spacing: 0;
	text-transform: none;
	color: var(--haze) !important;
}

/* --------------------------------------------------------------------------
   Boutons et liens
   -------------------------------------------------------------------------- */

body.is-auth-page .lqd-btn {
	border-radius: 13px !important;
	font-family: var(--body) !important;
	font-weight: 700 !important;
	letter-spacing: -0.01em;
	transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 260ms ease,
		background 260ms ease, border-color 260ms ease;
}

body.is-auth-page .lqd-btn-primary {
	min-height: 3rem;
	color: #fff !important;
	border: 0 !important;
	background: linear-gradient(120deg, var(--iris-lo), var(--iris) 45%, var(--magenta)) !important;
	background-size: 220% 100% !important;
	background-position: 0% 50% !important;
	box-shadow: 0 12px 34px -14px rgba(109, 91, 255, 0.85),
		inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

body.is-auth-page .lqd-btn-primary:hover {
	transform: translateY(-2px);
	background-position: 100% 50% !important;
	box-shadow: 0 18px 46px -14px rgba(255, 61, 154, 0.7),
		inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
}

/* Boutons de connexion sociale */
body.is-auth-page .lqd-btn-outline {
	min-height: 3rem;
	color: var(--chalk) !important;
	border: 1px solid var(--rim) !important;
	background: var(--glass-hi) !important;
	box-shadow: none !important;
}

body.is-auth-page .lqd-btn-outline:hover {
	transform: translateY(-2px);
	border-color: var(--rim-hi) !important;
	background: rgba(255, 255, 255, 0.08) !important;
}

body.is-auth-page a {
	color: var(--haze);
}

body.is-auth-page .ekla-auth-card a:not(.lqd-btn) {
	color: var(--chalk);
	text-decoration-color: rgba(255, 255, 255, 0.3);
	text-underline-offset: 3px;
	transition: color 200ms ease;
}

body.is-auth-page .ekla-auth-card a:not(.lqd-btn):hover {
	color: var(--cyan);
}

/* Le thème d'origine force un indigo peu lisible sur fond sombre */
body.is-auth-page .text-indigo-600 {
	color: var(--cyan) !important;
}

/* Séparateur « ou » */
body.is-auth-page .ekla-auth-card .bg-foreground\/10 {
	background: var(--rim) !important;
}

body.is-auth-page .lqd-auth-form-foot-text {
	margin-top: 2rem !important;
	padding-top: 1.5rem;
	border-top: 1px solid var(--rim);
	font-size: 0.875rem;
	color: var(--haze);
	text-align: center;
}

/* Cartes et tableaux éventuels (mode démo) */
body.is-auth-page .lqd-card {
	border-color: var(--rim) !important;
	background: var(--glass) !important;
	color: var(--haze) !important;
}

/* --------------------------------------------------------------------------
   Adaptatif
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
	.ekla-auth {
		grid-template-columns: 1fr;
	}

	.ekla-auth-aside {
		display: none;
	}

	.ekla-auth-pane {
		padding-top: clamp(6.5rem, 16vh, 9rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	body.is-auth-page *,
	body.is-auth-page *::before,
	body.is-auth-page *::after {
		transition-duration: 0.001ms !important;
		animation-duration: 0.001ms !important;
	}
}