@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* ==========================================================================
   Variables
   ========================================================================== */

:root {
	--ac-bleu-invest: #07124a;
	--ac-orange: #f18815;
	--ac-gris-bleu: #798c9e;
	--ac-muted: #95aac9;
	--ac-bg: #f8f9fb;
	--ac-separator: #e3ebf6;
	--ac-border-input: #798c9e;
	--ac-radius-input: 6px;
	--ac-radius-btn: 8px;
}

/* ==========================================================================
   Base
   ========================================================================== */

html, body {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
}

body.login {
	background-color: var(--ac-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
}

/* Masque le logo WP par défaut */
body.login #login h1.wp-login-logo {
	display: none;
}

/* ==========================================================================
   Conteneur principal
   ========================================================================== */

body.login #login {
	width: 100%;
	max-width: 546px;
	padding: 36px 12px;
}

body.login #login > * {
	max-width: 100%;
}

/* ==========================================================================
   Logo
   ========================================================================== */

.ac-login-logo-wrapper {
	text-align: center;
	margin-bottom: 32px;
}

.ac-login-logo-link {
	text-decoration: none;
	display: inline-block;
}

.ac-login-logo {
	display: inline-flex;
	align-items: flex-end;
	gap: 1px;
	background: #fff;
	padding: 12px 35px;
	border-radius: 58px;
	border: 1px solid #E0E0E9;
	box-shadow: 0px 12px 25px rgba(175, 190, 206, 0.42);
}

.ac-login-logo .ac-logo-main {
	width: 148px;
	height: auto;
}

.ac-login-logo .ac-logo-ext {
	width: 29px;
	height: auto;
	margin-bottom: 1px;
}

/* ==========================================================================
   Titres et messages
   ========================================================================== */

.ac-login-heading {
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 31px;
	line-height: 1.13;
	color: var(--ac-bleu-invest);
	text-align: center;
	letter-spacing: -0.64px;
	margin: 0;
}

.ac-login-message {
	font-size: 14px;
	color: var(--ac-muted);
	text-align: center;
	line-height: 1.6;
	margin-top: 12px;
}

/* ==========================================================================
   Formulaire
   ========================================================================== */

.login form {
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 24px 0 0;
	margin: 0;
}

.login form label {
	font-size: 14px;
	color: var(--ac-bleu-invest);
	font-weight: 400;
}

.login form .input,
.login form input[type="text"],
.login form input[type="email"],
.login form input[type="password"] {
	background: #fff;
	border: 1px solid var(--ac-border-input);
	border-radius: var(--ac-radius-input);
	height: 38px;
	font-size: 14px;
	padding: 6px 12px;
	width: 100%;
	box-sizing: border-box;
}

.login form .input:focus,
.login form input[type="text"]:focus,
.login form input[type="email"]:focus,
.login form input[type="password"]:focus {
	border-color: var(--ac-orange);
	box-shadow: 0 0 0 1px var(--ac-orange);
	outline: none;
}

/* Champ mot de passe avec bouton show/hide */
.login form .wp-pwd {
	position: relative;
}

.login form .wp-pwd .input {
	padding-right: 40px;
}

body.login form .wp-pwd .button.wp-hide-pw {
	position: absolute;
	right: 0;
	top: 0;
	height: 38px !important;
	width: 39px !important;
	min-width: 0;
	box-sizing: border-box !important;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	line-height: normal !important;
	cursor: pointer;
	color: var(--ac-gris-bleu) !important;
	box-shadow: none !important;
}

body.login form .wp-pwd .button.wp-hide-pw:hover,
body.login form .wp-pwd .button.wp-hide-pw:focus {
	background: none !important;
	border: 0 !important;
	color: var(--ac-bleu-invest) !important;
	box-shadow: none !important;
	outline: none !important;
}

body.login form .wp-pwd .button.wp-hide-pw > .dashicons {
	top: 0;
}

.login form .wp-pwd .input {
	border-radius: var(--ac-radius-input);
}

/* ==========================================================================
   Ligne mot de passe (label + lien oublie)
   ========================================================================== */

.ac-password-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.5em;
}

.ac-password-label {
	flex: 1;
}

.ac-forgot-link {
	flex-shrink: 0;
}

.ac-forgot-password {
	font-size: 12px;
	color: var(--ac-muted);
	text-decoration: none;
}

.ac-forgot-password:hover {
	color: var(--ac-orange);
	text-decoration: underline;
}

/* ==========================================================================
   Checkbox "Se souvenir de moi"
   ========================================================================== */

.login form .forgetmenot {
	float: none !important;
	margin: 12px 0 0;
}

.login form .forgetmenot label {
	font-size: 12px;
	color: var(--ac-muted);
}

/* ==========================================================================
   Boutons
   ========================================================================== */

.button,
.wp-core-ui .button,
.wp-core-ui .button-primary {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	display: block;
	width: 100%;
	height: 49px;
	box-sizing: border-box;
	background-color: var(--ac-orange);
	border: 1px solid var(--ac-orange);
	color: #fff;
	font-size: 14px;
	padding: 0 21px !important;
	border-radius: var(--ac-radius-btn);
	text-align: center;
	line-height: 47px; /* 49px - 2px border */
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.button:hover,
.wp-core-ui .button:hover,
.wp-core-ui .button-primary:hover {
	background-color: #d9750f;
	border-color: #d9750f;
	color: #fff;
}

.button:focus,
.wp-core-ui .button:focus,
.wp-core-ui .button-primary:focus {
	box-shadow: 0 0 0 2px rgba(241, 136, 21, 0.3);
}

.submit {
	margin-top: 1rem !important;
	overflow: hidden; /* Contient le float du bouton WP */
}

/* Le bouton WP a float:right par défaut, on le neutralise */
.login form .submit #wp-submit {
	float: none !important;
}

/* ==========================================================================
   Séparateur "OU SE CONNECTER AVEC" / "OU S'INSCRIRE AVEC"
   ========================================================================== */

.ac-separator {
	display: flex;
	align-items: center;
	margin: 43px 0 0;
}

.ac-separator::before,
.ac-separator::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--ac-separator);
}

.ac-separator span {
	padding: 0 12px;
	color: var(--ac-bleu-invest);
	font-size: 14.5px;
	font-weight: 400;
	white-space: nowrap;
}

/* ==========================================================================
   Bouton secondaire (inscription / connexion link)
   ========================================================================== */

.ac-secondary-button {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	margin-top: 16px;
	padding: 9px 13px;
	border: 1px solid var(--ac-gris-bleu);
	border-radius: var(--ac-radius-input);
	background: transparent;
	color: #6e84a3;
	font-size: 14px;
	text-decoration: none;
	transition: all 0.2s ease;
}

.ac-secondary-button:hover {
	border-color: var(--ac-bleu-invest);
	color: var(--ac-bleu-invest);
	text-decoration: none;
}

/* ==========================================================================
   Boutons SSO
   ========================================================================== */

.ac-sso-buttons {
	display: flex;
	gap: 24px;
	justify-content: center;
	margin: 26px 0;
}

.ac-sso-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 166px;
	height: 49px;
	background: #fff;
	border: 1px solid #E0E0E9;
	border-radius: 8px;
	box-shadow: 0px 12px 25px rgba(175, 190, 206, 0.42);
	text-decoration: none;
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 14.75px;
	color: #1D1C2B;
	cursor: pointer;
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.ac-sso-button:hover {
	border-color: #c0c0cc;
	box-shadow: 0px 8px 18px rgba(175, 190, 206, 0.55);
	color: #1D1C2B;
	text-decoration: none;
}

.ac-sso-button svg {
	width: 17px;
	height: 17px;
	flex-shrink: 0;
}

@media (max-width: 600px) {
	.ac-sso-buttons {
		flex-direction: column;
		align-items: center;
		gap: 12px;
	}

	.ac-sso-button {
		width: 100%;
		max-width: 280px;
	}
}

/* ==========================================================================
   Liens de navigation (#nav, #backtoblog)
   ========================================================================== */

#nav,
#backtoblog {
	text-align: center;
	padding: 0;
	margin: 16px 0 0;
}

/* Masque le #backtoblog */
#backtoblog {
	display: none;
}

/* ==========================================================================
   Inscription : champs personnalisés
   ========================================================================== */

/* Masquer le champ user_login et le message reg_passmail */
body.login-action-register #user_login,
body.login-action-register label[for="user_login"],
body.login-action-register #reg_passmail {
	display: none !important;
}

/* Champs prénom/nom côte à côte */
.ac-name-fields {
	display: flex;
	gap: 16px;
	margin-bottom: 8px;
}

.ac-name-fields .ac-field-wrap {
	flex: 1;
	min-width: 0;
}

/* Champs mot de passe côte à côte */
.ac-password-fields {
	display: flex;
	gap: 16px;
	margin: 8px 0;
}

.ac-password-fields .ac-field-wrap {
	flex: 1;
	min-width: 0;
}

/* Bouton show/hide password sur l'inscription : centre verticalement
   dans l'input de 56px (floating label). Surcharge le top:0 du CSS login. */
body.login form .ac-password-fields .wp-pwd .button.wp-hide-pw {
	top: 50%;
	transform: translateY(-50%);
	height: 40px !important;
}

/* Style "floating label" pour les champs inscription
   Spécificité augmentée pour surcharger .login form .input */
.login form .ac-field-wrap {
	position: relative;
}

.login form .ac-field-wrap label {
	display: block;
	font-size: 13.5px;
	color: var(--ac-bleu-invest);
	font-weight: 400;
	margin-bottom: 0;
	position: absolute;
	top: 18px;
	left: 13px;
	pointer-events: none;
	transition: top 0.15s ease, font-size 0.15s ease;
	z-index: 1;
}

/* Label remonté au focus ou quand le champ a une valeur */
.login form .ac-field-wrap:focus-within label,
.login form .ac-field-wrap.has-value label {
	top: 6px;
	font-size: 11px;
}

.login form .ac-field-wrap input.input,
.login form .ac-field-wrap input[type="text"],
.login form .ac-field-wrap input[type="email"],
.login form .ac-field-wrap input[type="password"] {
	height: 56px;
	min-height: 56px;
	padding: 24px 12px 8px;
}

.login form .ac-field-wrap input:focus {
	border-color: var(--ac-orange);
	box-shadow: 0 0 0 1px var(--ac-orange);
	outline: none;
}

/* Texte d'aide statique sous le 1er champ password */
.ac-password-hint {
	margin: 6px 0 0;
	font-size: 12px;
	line-height: 1.4;
	color: var(--ac-gris-bleu, #6b7a90);
}

/* Indicateurs de force mot de passe */
.ac-password-strength {
	margin-top: 4px;
	font-size: 12px;
	padding: 4px 8px;
	border-radius: 3px;
	display: none;
}

.ac-password-strength.weak {
	background: #ffebee;
	color: #c62828;
	border: 1px solid #ef5350;
	display: block;
}

.ac-password-strength.medium {
	background: #fff3e0;
	color: #ef6c00;
	border: 1px solid #ff9800;
	display: block;
}

.ac-password-strength.strong {
	background: #e8f5e8;
	color: #2e7d32;
	border: 1px solid #4caf50;
	display: block;
}

.ac-password-match-error {
	background: #ffebee;
	color: #c62828;
	border: 1px solid #ef5350;
	padding: 4px 8px;
	border-radius: 3px;
	font-size: 12px;
	margin-top: 4px;
	display: none;
}

/* Email field en inscription (full width, style floating)
   Hérite du style .ac-field-wrap via la classe partagée */
body.login-action-register .login form .ac-register-email-wrap {
	margin-bottom: 0;
}

/* Bouton inscription disabled par défaut */
body.login-action-register .button-primary {
	opacity: 0.65;
	transition: opacity 0.2s ease;
}

body.login-action-register .button-primary.ac-form-valid {
	opacity: 1;
}

/* ==========================================================================
   Texte légal (inscription)
   ========================================================================== */

.ac-legal-text {
	font-size: 12px;
	color: var(--ac-muted);
	line-height: 1.6;
	margin-top: 16px;
}

.ac-legal-text a {
	color: var(--ac-orange);
	text-decoration: underline;
}

.ac-legal-text a:hover {
	text-decoration: none;
}

/* ==========================================================================
   Erreurs WP
   ========================================================================== */

#login_error {
	border-left-color: var(--ac-orange);
	border-radius: var(--ac-radius-input);
}

.login .message,
.login .success {
	border-left-color: var(--ac-orange);
	border-radius: var(--ac-radius-input);
}

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

@media screen and (max-width: 600px) {
	body.login #login {
		padding: 24px 16px;
	}

	.ac-name-fields,
	.ac-password-fields {
		flex-direction: column;
		gap: 8px;
	}

	.ac-login-heading {
		font-size: 24px;
	}
}