/* ====================================================================
   eSoucoulou — Authentification (connexion + inscription)
   Split-screen brandé + habillage des formulaires Tutor/BuddyPress/WP.
   Charte : vert signature, Outfit/Plus Jakarta Sans, coins arrondis.
   ==================================================================== */

.eso-auth {
	--auth-green: var(--eso-green, #1aaf1a);
	--auth-green-dark: var(--eso-green-dark, #128a12);
	--auth-ink: var(--eso-gray-900, #212121);
	--auth-muted: var(--eso-gray-500, #757575);
	--auth-line: var(--eso-gray-200, #e0e0e0);
	--auth-field-bg: var(--eso-gray-50, #fafafa);
	--auth-radius: var(--eso-radius-lg, 18px);

	min-height: calc(100vh - var(--eso-header-height, 72px));
	display: flex;
	align-items: stretch;
	background: radial-gradient(1200px 600px at 100% 0%, var(--es-brand-soft) 0%, transparent 60%),
		var(--eso-white, var(--es-surface));
	font-family: var(--eso-font-body, system-ui, sans-serif);
}

.eso-auth-grid {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	min-height: inherit;
}

/* ---------- Panneau valeur (gauche) ---------- */
.eso-auth-aside {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	color: #fff;
	background: linear-gradient(150deg, var(--auth-green) 0%, var(--auth-green-dark) 55%, #0d6b0d 100%);
	border-radius: 0 32px 32px 0;
	padding: clamp(2rem, 4vw, 4rem);
}
.eso-auth-aside__blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(8px);
	opacity: 0.35;
	pointer-events: none;
}
.eso-auth-aside__blob--1 { width: 360px; height: 360px; top: -120px; right: -120px; background: rgba(255,255,255,0.18); }
.eso-auth-aside__blob--2 { width: 260px; height: 260px; bottom: -100px; left: -80px;  background: rgba(212,160,23,0.30); }

.eso-auth-aside__inner { position: relative; z-index: 1; max-width: 420px; }
.eso-auth-aside__logo { display: inline-flex; margin-bottom: 2rem; text-decoration: none; color: #fff; font-weight: 800; font-size: 1.25rem; }
.eso-auth-aside__title {
	font-family: var(--eso-font-display, system-ui, sans-serif);
	font-size: clamp(1.6rem, 2.6vw, 2.25rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0 0 0.75rem;
	color: #fff;
}
.eso-auth-aside__sub { font-size: 1.0625rem; opacity: 0.92; margin: 0 0 2rem; }

.eso-auth-perks { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 0.875rem; }
.eso-auth-perks li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.9375rem; opacity: 0.96; }
.eso-auth-perks__ic {
	flex: 0 0 auto;
	width: 34px; height: 34px;
	display: grid; place-items: center;
	background: rgba(255,255,255,0.16);
	border-radius: 10px;
	font-size: 1rem;
}
.eso-auth-aside__foot { font-size: 0.9375rem; opacity: 0.92; margin: 0; }
.eso-auth-aside__foot a { color: #fff; font-weight: 700; text-decoration: underline; }

/* ---------- Colonne formulaire (droite) ---------- */
.eso-auth-main { display: flex; align-items: center; justify-content: center; padding: clamp(1.5rem, 4vw, 3.5rem); }
.eso-auth-card { width: 100%; max-width: 420px; }

/* Onglets */
.eso-auth-tabs {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: var(--eso-gray-100, var(--es-surface-2));
	border-radius: var(--eso-radius-full, 9999px);
	padding: 5px;
	margin-bottom: 1.75rem;
}
.eso-auth-tab {
	position: relative;
	z-index: 1;
	border: 0;
	background: transparent;
	cursor: pointer;
	padding: 0.7rem 1rem;
	font-family: var(--eso-font-display, system-ui, sans-serif);
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--auth-muted);
	border-radius: var(--eso-radius-full, 9999px);
	transition: color var(--eso-transition-base, 250ms);
}
.eso-auth-tab.is-active { color: var(--auth-green-dark); }
.eso-auth-tab__indicator {
	position: absolute;
	top: 5px; left: 5px;
	width: calc(50% - 5px);
	height: calc(100% - 10px);
	background: var(--es-surface);
	border-radius: var(--eso-radius-full, 9999px);
	box-shadow: var(--eso-shadow-sm, 0 1px 3px rgba(0,0,0,0.1));
	transition: transform var(--eso-transition-base, 250ms);
}
.eso-auth[data-active="inscription"] .eso-auth-tab__indicator { transform: translateX(100%); }

/* Panneaux */
.eso-auth-pane[hidden] { display: none; }
.eso-auth-pane { animation: eso-auth-fade 280ms ease; }
@keyframes eso-auth-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.eso-auth-h1 {
	font-family: var(--eso-font-display, system-ui, sans-serif);
	font-size: 1.5rem;
	letter-spacing: -0.02em;
	margin: 0 0 0.35rem;
	color: var(--auth-ink);
}
.eso-auth-lead { color: var(--auth-muted); font-size: 0.9375rem; margin: 0 0 1.5rem; }
.eso-auth-note { color: var(--auth-muted); font-size: 0.8125rem; margin: 0.5rem 0 1rem; }

.eso-btn-block { width: 100%; justify-content: center; }
.eso-auth-altlink { text-align: right; margin: 0.5rem 0 0; font-size: 0.875rem; }
.eso-auth-altlink a { color: var(--auth-green-dark); text-decoration: none; }
.eso-auth-altlink a:hover { text-decoration: underline; }

.eso-auth-switch { text-align: center; margin: 1.5rem 0 0; font-size: 0.9375rem; color: var(--auth-muted); }
.eso-auth-switch__btn { border: 0; background: none; color: var(--auth-green-dark); font-weight: 700; cursor: pointer; padding: 0; font-size: inherit; }
.eso-auth-switch__btn:hover { text-decoration: underline; }

.eso-auth-legal { font-size: 0.75rem; color: var(--auth-muted); margin: 1rem 0 0; text-align: center; }
.eso-auth-legal a { color: var(--auth-green-dark); }

.eso-auth-back { text-align: center; margin: 1.75rem 0 0; }
.eso-auth-back a { color: var(--auth-muted); text-decoration: none; font-size: 0.875rem; }
.eso-auth-back a:hover { color: var(--auth-ink); }

/* ====================================================================
   HABILLAGE des formulaires internes (Tutor LMS / BuddyPress / WP natif)
   Sélecteurs génériques pour rester robuste aux variations de markup.
   ==================================================================== */

/* Champs texte / email / password */
.eso-auth-form input[type="text"],
.eso-auth-form input[type="email"],
.eso-auth-form input[type="password"],
.eso-auth-form input[type="tel"],
.eso-auth-form .tutor-form-control,
.eso-auth-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]) {
	width: 100%;
	border: 1.5px solid var(--auth-line);
	border-radius: var(--eso-radius-md, 12px);
	background: var(--auth-field-bg);
	padding: 0.75rem 0.9rem;
	font-size: 1rem;
	font-family: inherit;
	color: var(--auth-ink);
	margin: 0.25rem 0 0.9rem;
	transition: border-color var(--eso-transition-fast, 150ms), box-shadow var(--eso-transition-fast, 150ms), background var(--eso-transition-fast, 150ms);
}
.eso-auth-form input:focus {
	border-color: var(--auth-green);
	background: var(--es-surface);
	box-shadow: 0 0 0 3px rgba(26,175,26,0.12);
	outline: none;
}
.eso-auth-form label {
	display: block;
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--eso-gray-700, var(--es-text-2));
	margin-top: 0.25rem;
}

/* Boutons de soumission des plugins → bouton brandé */
.eso-auth-form button[type="submit"],
.eso-auth-form input[type="submit"],
.eso-auth-form .tutor-btn,
.eso-auth-form .tutor-btn-primary {
	width: 100%;
	border: 0;
	border-radius: var(--eso-radius-full, 9999px);
	background: linear-gradient(135deg, var(--auth-green), var(--auth-green-dark));
	color: #fff !important;
	font-family: var(--eso-font-display, system-ui, sans-serif);
	font-weight: 700;
	font-size: 1rem;
	padding: 0.8rem 1.5rem;
	cursor: pointer;
	box-shadow: var(--eso-shadow-green, 0 8px 24px rgba(26,175,26,0.25));
	margin-top: 0.5rem;
	transition: transform var(--eso-transition-fast, 150ms), box-shadow var(--eso-transition-fast, 150ms);
}
.eso-auth-form button[type="submit"]:hover,
.eso-auth-form input[type="submit"]:hover,
.eso-auth-form .tutor-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(26,175,26,0.32); }

/* "Se souvenir / Rester connecté" */
.eso-auth-form .login-remember,
.eso-auth-form label[for*="remember"] { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; color: var(--auth-muted); margin: 0.25rem 0 0.75rem; }

/* Liens secondaires des formulaires plugins */
.eso-auth-form a { color: var(--auth-green-dark); }

/* ---------- MASQUAGE de la friction sur l'inscription ---------- */
/* Identifiant : auto-rempli depuis l'e-mail (cf. JS) → on le masque visuellement.
   On garde le champ dans le DOM pour que la soumission reste valide. */
.eso-auth-form--register [class*="username"],
.eso-auth-form--register [id*="username"],
.eso-auth-form--register p:has(input[name="user_login"]),
.eso-auth-form--register p:has(input[name="username"]) {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap;
}
/* Sélecteur de visibilité xProfile BuddyPress ("Ce champ peut être vu par : Tous") */
.eso-auth-form--register .field-visibility-settings,
.eso-auth-form--register .field-visibility-settings-toggle,
.eso-auth-form--register .field-visibility-settings-notoggle,
.eso-auth-form--register .visibility-toggle-link { display: none !important; }
/* Indicateur de robustesse + case "mot de passe faible" (friction inutile à l'inscription) */
.eso-auth-form--register .pw-weak,
.eso-auth-form--register .description.indicator-hint { display: none !important; }
/* Titres de section redondants ("Vos informations") quand un seul groupe reste */
.eso-auth-form--register legend { font-size: 0.8125rem; color: var(--auth-muted); font-weight: 600; }

/* Messages d'erreur / succès des plugins → cohérence visuelle */
.eso-auth-form .tutor-alert,
.eso-auth-form .bp-feedback,
.eso-auth-form #message {
	border-radius: var(--eso-radius-md, 12px);
	border-left: 4px solid var(--auth-green);
	padding: 0.75rem 1rem;
	font-size: 0.875rem;
	margin-bottom: 1rem;
}

/* ====================================================================
   Responsive : on empile, le panneau valeur passe en bandeau réduit.
   ==================================================================== */
@media (max-width: 880px) {
	.eso-auth-grid { grid-template-columns: 1fr; }
	.eso-auth-aside { border-radius: 0; padding: 2rem 1.5rem; }
	.eso-auth-aside__inner { max-width: 560px; margin: 0 auto; }
	.eso-auth-perks { display: none; }          /* on garde le bandeau léger sur mobile */
	.eso-auth-aside__sub { margin-bottom: 0; }
	.eso-auth-main { padding: 2rem 1.25rem 3rem; }
}
@media (max-width: 520px) {
	.eso-auth-aside__title { font-size: 1.4rem; }
}

/* Respect des préférences de mouvement réduit */
@media (prefers-reduced-motion: reduce) {
	.eso-auth-pane, .eso-auth-tab__indicator { animation: none; transition: none; }
}

/* ====================================================================
   v1.14.1 — Correctifs page connexion / inscription
   ==================================================================== */

/* 1) Masque le titre anglais redondant rendu par le formulaire Tutor
   ("Hi, Welcome back!"). Nos titres ("Bon retour", "Créez votre compte")
   sont placés hors de .eso-auth-form, donc jamais affectés. */
.eso-auth-form h1,
.eso-auth-form h2,
.eso-auth-form h3 { display: none !important; }

/* 2) Décalage du champ "Confirmation du mot de passe" : on masque le
   panneau de robustesse Tutor (qui s'affichait comme une grande carte)
   et on uniformise tous les conteneurs de champ. */
.eso-auth-form--register .tutor-password-strength,
.eso-auth-form--register .tutor-password-strength-checker,
.eso-auth-form--register .password-strength-checker,
.eso-auth-form--register .tutor-password-feedback,
.eso-auth-form--register .tutor-form-text-feedback,
.eso-auth-form--register .password-strength-meter {
    display: none !important;
}
.eso-auth-form--register .tutor-form-group,
.eso-auth-form--register .tutor-input-group,
.eso-auth-form--register .tutor-form-wrap,
.eso-auth-form--register .tutor-mb-16,
.eso-auth-form--register .tutor-mb-12 {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 0.85rem !important;
}
.eso-auth-form--register .tutor-input-group input,
.eso-auth-form--register .tutor-form-wrap input { width: 100% !important; }

/* 3) "Vide" en haut/bas sur mobile : la page ne force plus 100vh quand
   le contenu est court (connexion). Le formulaire se cale en haut. */
@media (max-width: 880px) {
    .eso-auth { min-height: auto !important; }
    .eso-auth-main {
        align-items: flex-start;
        padding: 1.5rem 1.25rem 2rem !important;
    }
    .eso-auth-aside { padding: 1.5rem 1.5rem !important; }
    .eso-auth-aside__title { margin-bottom: 0.5rem; }
}

/* Sur grand écran, on cale aussi le formulaire vers le haut pour réduire
   le vide visible sur l'onglet connexion (plus court). */
@media (min-width: 881px) {
    .eso-auth-main { align-items: flex-start; padding-top: clamp(2.5rem, 6vh, 5rem); }
}

/* ====================================================================
   v1.14.6 — Lisibilité des liens du formulaire d'auth
   ("S'inscrire maintenant", "Mot de passe oublié ?" apparaissaient
   en vert sur vert / illisibles). On force des liens texte propres,
   sans fond, sauf le vrai bouton de soumission.
   ==================================================================== */
.eso-auth-form a,
.eso-auth-form .tutor-btn-link,
.eso-auth-form .tutor-login-link,
.eso-auth-form a.tutor-btn {
    background: none !important;
    background-color: transparent !important;
    color: var(--eso-green-dark) !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-weight: 600;
    text-decoration: none;
}
.eso-auth-form a:hover,
.eso-auth-form .tutor-btn-link:hover {
    color: var(--eso-green) !important;
    text-decoration: underline;
}
/* Le bouton de soumission (« Se connecter » / « Créer mon compte ») garde
   son fond vert et son texte blanc. */
.eso-auth-form button[type="submit"],
.eso-auth-form input[type="submit"],
.eso-auth-form .tutor-btn-primary {
    background: var(--eso-green) !important;
    color: #fff !important;
    border: none !important;
    padding: 12px 20px !important;
    border-radius: 12px !important;
    font-weight: 700;
}
.eso-auth-form button[type="submit"]:hover,
.eso-auth-form .tutor-btn-primary:hover {
    background: var(--eso-green-dark) !important;
}
/* Pas de surlignage de sélection vert agressif dans le formulaire. */
.eso-auth-form ::selection { background: rgba(26,175,26,0.2); color: var(--eso-black); }