/* CPTS Centre-Hérault — habillage de wp-login.php
   -------------------------------------------------------------------------
   Écran scindé : les bulles pleine couleur et le logo à gauche, le formulaire
   et ses liens à droite. Couvre les trois écrans servis par ce fichier —
   connexion, mot de passe oublié, réinitialisation.

   Les variables --cpts-login-logo et --cpts-login-bubbles sont injectées par
   includes/login.php, qui seul connaît l'URL du plugin.

   ATTENTION AUX SÉLECTEURS : `login`, `wp-core-ui` et `cpts-login` sont toutes
   portées par le même <body>. Un `.cpts-login .wp-core-ui` ne matche donc rien
   — il faut les accoler, ou passer par un descendant réel comme #login. */

body.cpts-login {
	--cpts-blue:   #3f87c0;
	--cpts-teal:   #2fa6b3;
	--cpts-navy:   #234155;
	--cpts-ink:    #2b3a47;
	--cpts-line:   #e4eaf0;

	--cpts-login-aside: 44vw;

	position: relative;
	min-height: 100vh;
	margin: 0;
	box-sizing: border-box;
	/* La colonne de gauche est sortie du flux et le corps se décale d'autant.
	   Surtout pas une grille sur <body> : tout ce qui s'y injecte à l'exécution
	   — la bannière de consentement, par exemple — deviendrait un item de
	   grille et ouvrirait une ligne fantôme sous les deux colonnes. */
	padding-left: var(--cpts-login-aside);
	background: #fff;
	font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ==========================================================================
   Colonne de gauche — bulles et logo
   ========================================================================== */

.cpts-login__aside {
	position: fixed;
	top: 0; bottom: 0; left: 0;
	width: var(--cpts-login-aside);
	display: flex; align-items: center; justify-content: center;
	padding: 40px;
	overflow: hidden;
	background: linear-gradient(160deg, #f7fafc 0%, #e7f0f7 100%);
}

/* Les bulles en blanc, révélées par leur seule ombre portée : chaque tracé
   garde sa forme et les recouvrements se lisent en relief. */
.cpts-login__bubbles {
	position: absolute;
	inset: -4%;
}
.cpts-login__bubbles svg {
	display: block;
	width: 100%;
	height: 100%;
}
.cpts-login__bubbles path {
	/* `fill` est un attribut de présentation : la règle CSS l'emporte sans
	   `!important`. Le mode de fusion, lui, est dans un attribut `style` du
	   SVG — il faut le forcer, sinon les blancs se multiplient en gris. */
	fill: #fff;
	mix-blend-mode: normal !important;
	filter: drop-shadow(0 10px 20px rgba(35, 65, 85, .16));
}

.cpts-login__mark {
	display: block;
	width: min(340px, 64%);
	aspect-ratio: 1;
	background-image: var(--cpts-login-logo);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	/* Couleurs d'origine : elles ressortent d'autant mieux que les bulles sont
	   passées en blanc. Au-dessus des bulles dans l'ordre d'empilement. */
	position: relative;
	z-index: 1;
}

/* ==========================================================================
   Colonne de droite — formulaire
   ========================================================================== */

body.cpts-login #login {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100vh;
	width: 100%;
	max-width: 430px;
	margin: 0 auto;
	padding: 48px 28px;
	box-sizing: border-box;
}

/* Le logo natif de WordPress fait doublon avec celui de gauche. */
body.cpts-login #login h1 { display: none; }

.cpts-login__intro {
	margin: 0 0 26px;
	font-size: 15px;
	font-weight: 600;
	color: var(--cpts-navy);
}

/* La colonne joue le rôle de carte : le formulaire n'a plus besoin d'habillage. */
body.cpts-login #login form {
	background: none;
	border: 0;
	box-shadow: none;
	border-radius: 0;
	padding: 0;
	margin: 0;
	overflow: visible;
}

body.cpts-login #login form label {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--cpts-navy);
}

body.cpts-login #login form .input,
body.cpts-login #login input[type="text"],
body.cpts-login #login input[type="password"],
body.cpts-login #login input[type="email"] {
	background: #fbfcfe;
	border: 1px solid #c9d5e0;
	border-radius: 10px;
	padding: 12px 14px;
	font-size: 15px;
	font-family: inherit;
	color: var(--cpts-ink);
	box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
body.cpts-login #login form .input:focus,
body.cpts-login #login input[type="text"]:focus,
body.cpts-login #login input[type="password"]:focus,
body.cpts-login #login input[type="email"]:focus {
	background: #fff;
	border-color: var(--cpts-blue);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cpts-blue) 18%, #fff);
	outline: none;
}

body.cpts-login #login .wp-pwd .button.wp-hide-pw { top: 3px; right: 3px; color: #6b7a89; }
body.cpts-login #login .wp-pwd .button.wp-hide-pw:hover { color: var(--cpts-blue); }
body.cpts-login #login .wp-pwd .button.wp-hide-pw:focus { box-shadow: none; }

/* ---- Bouton principal ---------------------------------------------------
   Reprend la signature du site : pilule pleine, dégradé bleu -> turquoise du
   logo, pleine largeur. La spécificité doit dépasser `.wp-core-ui
   .button-primary` de WordPress, d'où le body + #login. */

body.cpts-login #login .button-primary {
	display: block;
	float: none;
	width: 100%;
	height: auto;
	background: linear-gradient(135deg, var(--cpts-blue), var(--cpts-teal));
	border: 0;
	border-radius: 999px;
	box-shadow: 0 10px 22px color-mix(in srgb, var(--cpts-blue) 30%, transparent);
	padding: 13px 24px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .01em;
	line-height: 1.2;
	color: #fff;
	text-shadow: none;
	transition: filter .15s ease, transform .15s ease, box-shadow .2s ease;
}
body.cpts-login #login .button-primary:hover,
body.cpts-login #login .button-primary:focus {
	filter: brightness(.94);
	color: #fff;
	box-shadow: 0 12px 26px color-mix(in srgb, var(--cpts-blue) 38%, transparent);
}
body.cpts-login #login .button-primary:active { transform: translateY(1px); }
body.cpts-login #login .button-primary:focus-visible {
	outline: 2px solid var(--cpts-navy);
	outline-offset: 3px;
}

body.cpts-login #login .submit { margin-top: 26px; }
body.cpts-login #login .forgetmenot { float: none; margin: 18px 0 0; line-height: 1.4; }
body.cpts-login #login .forgetmenot label { font-weight: 500; color: #5a6b7b; }

/* ==========================================================================
   Messages, liens, captcha
   ========================================================================== */

body.cpts-login #login_error,
body.cpts-login .message,
body.cpts-login .notice {
	border-radius: 11px;
	border-left-width: 4px;
	padding: 13px 15px;
	margin: 0 0 22px;
	font-size: 14px;
	box-shadow: 0 6px 18px rgba(35, 65, 85, .07);
}
body.cpts-login #login_error { border-left-color: #b42318; }
body.cpts-login .message { border-left-color: var(--cpts-teal); }

body.cpts-login #nav,
body.cpts-login #backtoblog {
	margin: 18px 0 0;
	padding: 0;
	font-size: 13.5px;
}
body.cpts-login #backtoblog { margin-top: 8px; }
body.cpts-login #nav a,
body.cpts-login #backtoblog a {
	color: var(--cpts-navy);
	font-weight: 600;
	text-decoration: none;
}
body.cpts-login #nav a:hover,
body.cpts-login #backtoblog a:hover { color: var(--cpts-blue); text-decoration: underline; }

body.cpts-login .privacy-policy-page-link { margin: 22px 0 0; text-align: left; }
body.cpts-login .privacy-policy-page-link a { color: #6b7a89; font-size: 13px; }

.cpts-login__captcha { margin: 20px 0 0; }

/* ==========================================================================
   Sous 900px : les colonnes s'empilent
   ========================================================================== */

@media (max-width: 900px) {
	/* La colonne devient un bandeau en tête : on garde la signature visuelle
	   sans manger la moitié d'un écran de téléphone. En `absolute` plutôt qu'en
	   `fixed`, pour qu'il défile avec la page si le formulaire dépasse. */
	body.cpts-login {
		padding-left: 0;
		padding-top: 180px;
	}
	.cpts-login__aside {
		position: absolute;
		top: 0; bottom: auto; left: 0;
		width: 100%;
		height: 180px;
		padding: 26px;
	}
	body.cpts-login #login {
		min-height: 0;
		padding: 34px 24px 44px;
	}
	.cpts-login__mark { width: min(190px, 46%); }
}