/* =========================================================================
   Mon compte — visiteur (v3) : woocommerce/myaccount/form-login.php
   S'appuie sur kg-accueil.css (jetons .kgv, polices, .kg-ico, .kgv-c-*).
   Préfixe .kgl-* ; chargé seulement par inc/kgl-connexion.php (body.kgl-on).
   ========================================================================= */

/* Pleine largeur : on neutralise le titre et le conteneur WoodMart. */
.kgl-on .main-page-wrapper { padding-top: 0 !important; }
.kgl-on #main-content.container,
.kgl-on #main-content { max-width: none; padding: 0; }
.kgl-on .wd-page-title { display: none; }
.kgl-on .entry-content > .woocommerce > .woocommerce-notices-wrapper:not(:empty) {
	max-width: 1240px;
	margin: 24px auto 0;
	padding: 0 24px;
}

.kgl {
	--kgl-field: #f8fafc;
	--kgl-focus: rgba(99, 102, 241, .18);
	background: var(--kgv-soft);
	padding-bottom: 96px;
}

/* ---------- En-tête ---------- */
.kgl-hero {
	position: relative;
	padding: 34px 0 150px;
	background:
		radial-gradient(60% 120% at 85% 0%, rgba(139, 92, 246, .35) 0%, transparent 60%),
		radial-gradient(50% 90% at 10% 100%, rgba(255, 107, 53, .22) 0%, transparent 65%),
		radial-gradient(120% 90% at 20% 0%, #1b2160 0%, var(--kgv-navy) 55%, #070a22 100%);
	color: #aab4d4;
	overflow: hidden;
	isolation: isolate;
}
.kgl-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px);
	background-size: 22px 22px;
	mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
	-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}

.kgl-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 40px;
	font-size: 14px;
	color: #8b95c9;
}
.kgl-crumbs a { color: #c7d2fe !important; }
.kgl-crumbs a:hover { color: #fff !important; }
.kgl-crumbs .kg-ico { width: 15px; height: 15px; opacity: .5; }
.kgl-crumbs span { color: #fff; }

.kgl-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 18px !important;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .14);
	font-family: var(--kgv-title);
	font-size: 13px;
	font-weight: 500;
	color: #e0e7ff;
}
.kgl-eyebrow .kg-ico { width: 15px; height: 15px; color: var(--kgv-amber); }

.kgv .kgl-title {
	color: #fff;
	font-size: clamp(34px, 5vw, 52px);
	font-weight: 600;
	line-height: 1.08;
}
.kgl-title span {
	background: linear-gradient(100deg, #ffb07a, var(--kgv-orange) 55%, #ff8fb8);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.kgv .kgl-lead {
	max-width: 560px;
	margin-top: 16px;
	font-size: 18px;
	line-height: 1.55;
	color: #b8c1e3;
}

/* ---------- Cartes ---------- */
.kgl-body { position: relative; margin-top: -104px; }

.kgl-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
	align-items: start;
}
.kgl-grid--solo { grid-template-columns: minmax(0, 520px); }

.kgl-card {
	background: #fff;
	border: 1px solid var(--kgv-line);
	border-radius: var(--kgv-radius);
	box-shadow: var(--kgv-shadow-lg);
	padding: 34px;
}
.kgl-card__head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 26px;
}
.kgv .kgl-card__head h2 { font-size: 24px; font-weight: 600; line-height: 1.2; }
.kgv .kgl-card__head p { margin-top: 4px; font-size: 15px; color: var(--kgv-text); }

.kgl-badge {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 52px;
	height: 52px;
	border-radius: 16px;
	color: var(--c);
	background: color-mix(in srgb, var(--c) 12%, #fff);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent);
}
.kgl-badge .kg-ico { width: 24px; height: 24px; }

/* ---------- Champs ---------- */
.kgl-field { margin: 0 0 18px !important; }
.kgl-field label {
	display: block;
	margin-bottom: 7px;
	font-family: var(--kgv-title);
	font-size: 14px;
	font-weight: 500;
	color: var(--kgv-ink);
}
.kgl-field .required { color: var(--kgv-orange); border: 0; text-decoration: none; }
.kgl-field small { display: block; margin-top: 6px; font-size: 13px; color: var(--kgv-muted); }

.kgl .kgl-input {
	width: 100%;
	height: 50px;
	padding: 0 16px;
	border: 1.5px solid var(--kgv-line);
	border-radius: 14px;
	background: var(--kgl-field);
	font-family: var(--kgv-body);
	font-size: 16px;
	color: var(--kgv-ink);
	box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.kgl .kgl-input::placeholder { color: #a3adc2; }
.kgl .kgl-input:hover { border-color: #cbd5e1; }
.kgl .kgl-input:focus {
	outline: none;
	border-color: var(--kgv-indigo);
	background: #fff;
	box-shadow: 0 0 0 4px var(--kgl-focus);
}
.kgl .kgl-input--code { text-transform: uppercase; letter-spacing: .12em; font-weight: 600; }
.kgl .kgl-input--code::placeholder { letter-spacing: .04em; font-weight: 400; text-transform: none; }

.kgl .kgl-pass { position: relative; display: block !important; }
/* WooCommerce ajoute son propre bouton aux mots de passe d'un <form> : on garde le nôtre. */
.kgl .show-password-input { display: none !important; }
.kgl .kgl-pass .kgl-input { padding-right: 52px; }
.kgl .kgl-eye {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--kgv-muted);
	box-shadow: none;
	cursor: pointer;
}
.kgl .kgl-eye:hover { color: var(--kgv-ink); background: rgba(15, 23, 42, .05); }
.kgl .kgl-eye:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 0; }
.kgl-eye .kg-ico { width: 20px; height: 20px; }
.kgl-eye__hide,
.kgl-eye[aria-pressed="true"] .kgl-eye__show { display: none; }
.kgl-eye[aria-pressed="true"] .kgl-eye__hide { display: block; }

.kgl-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
	margin: 4px 0 22px;
}
.kgl-check {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 15px;
	color: var(--kgv-text);
	cursor: pointer;
}
.kgl .kgl-check input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--kgv-indigo);
}
.kgl-lost {
	font-family: var(--kgv-title);
	font-size: 14px;
	font-weight: 500;
	color: var(--kgv-indigo) !important;
}
.kgl-lost:hover { text-decoration: underline !important; }

/* ---------- Boutons ---------- */
.kgl .kgl-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 54px;
	padding: 14px 22px;
	border: 0;
	border-radius: 16px;
	background: linear-gradient(135deg, #7c7ff5, var(--kgv-indigo) 45%, var(--kgv-violet));
	box-shadow: 0 12px 28px -10px rgba(99, 102, 241, .75), inset 0 1px 0 rgba(255, 255, 255, .25);
	font-family: var(--kgv-title);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: #fff;
	cursor: pointer;
	transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.kgl .kgl-submit:hover {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 18px 34px -10px rgba(99, 102, 241, .85), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.kgl .kgl-submit:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 3px; }
.kgl .kgl-submit:disabled { opacity: .6; cursor: wait; transform: none; }
.kgl .kgl-submit .kg-ico { transition: transform .2s ease; }
.kgl .kgl-submit:hover .kg-ico { transform: translateX(3px); }
.kgl .kgl-submit--orange {
	background: linear-gradient(135deg, #ff8a4c, #f0521a);
	box-shadow: 0 12px 28px -10px rgba(255, 107, 53, .75), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.kgl .kgl-submit--orange:hover { box-shadow: 0 18px 34px -10px rgba(255, 107, 53, .85), inset 0 1px 0 rgba(255, 255, 255, .25); }

/* ---------- Accès élève ---------- */
.kgl-pupil {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 26px;
	padding: 16px 18px;
	border-radius: 18px;
	border: 1.5px dashed color-mix(in srgb, var(--kgv-green) 45%, var(--kgv-line));
	background: color-mix(in srgb, var(--kgv-green) 6%, #fff);
	transition: border-color .2s ease, transform .2s ease;
}
.kgl-pupil:hover { border-style: solid; border-color: var(--kgv-green); transform: translateY(-2px); }
.kgl-pupil .kgl-badge { width: 44px; height: 44px; border-radius: 14px; }
.kgl-pupil .kgl-badge .kg-ico { width: 22px; height: 22px; }
.kgl-pupil__text { flex: 1; min-width: 0; }
.kgl-pupil__text strong { display: block; font-family: var(--kgv-title); font-size: 15px; font-weight: 600; color: var(--kgv-ink); }
.kgl-pupil__text span { display: block; font-size: 14px; color: var(--kgv-text); }
.kgl-pupil__go { color: #15803d; transition: transform .2s ease; }
.kgl-pupil:hover .kgl-pupil__go { transform: translateX(4px); }

/* ---------- Choix du profil ---------- */
.kgl-roles { display: grid; gap: 14px; }
.kgl .kgl-role {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 18px 18px 18px 16px;
	border: 1.5px solid var(--kgv-line);
	border-radius: 18px;
	background: #fff;
	box-shadow: none;
	text-align: left;
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.4;
	color: inherit;
	cursor: pointer;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background-color .2s ease;
}
.kgl .kgl-role:hover {
	border-color: color-mix(in srgb, var(--c) 55%, var(--kgv-line));
	background: color-mix(in srgb, var(--c) 4%, #fff);
	box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--c) 70%, transparent);
	transform: translateY(-2px);
}
.kgl .kgl-role:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 2px; }
.kgl-role__ico {
	display: grid;
	place-items: center;
	flex: none;
	width: 54px;
	height: 54px;
	border-radius: 16px;
	color: #fff;
	background: linear-gradient(135deg, color-mix(in srgb, var(--c) 75%, #fff), var(--c));
	box-shadow: 0 10px 20px -10px var(--c);
}
.kgl-role__ico .kg-ico { width: 26px; height: 26px; }
.kgl-role__text { flex: 1; min-width: 0; }
.kgl-role__text strong { display: block; font-family: var(--kgv-title); font-size: 17px; font-weight: 600; color: var(--kgv-ink); }
.kgl-role__text span { display: block; margin-top: 3px; font-family: var(--kgv-body); font-size: 14px; font-weight: 400; color: var(--kgv-text); white-space: normal; }
.kgl-role__go { color: var(--c); transition: transform .2s ease; }
.kgl .kgl-role:hover .kgl-role__go { transform: translateX(4px); }

.kgl-perks {
	display: grid;
	gap: 10px;
	margin-top: 26px !important;
	padding-top: 22px !important;
	border-top: 1px solid var(--kgv-line);
}
.kgl-perks li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--kgv-text); }
.kgl-perks .kg-ico { width: 18px; height: 18px; color: var(--kgv-indigo); }

/* ---------- Formulaires d'inscription ---------- */
.kgl .kgl-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 18px;
	font-family: var(--kgv-title);
	font-size: 14px;
	font-weight: 500;
	color: var(--kgv-text) !important;
}
.kgl .kgl-back:hover { color: var(--kgv-ink) !important; }
.kgl-back .kg-ico { width: 16px; height: 16px; transition: transform .2s ease; }
.kgl-back:hover .kg-ico { transform: translateX(-3px); }

.kgl #kg-step-teacher .kgl-submit,
.kgl #kg-step-student .kgl-submit { margin-top: 6px; }

/* Erreurs : kg-register.js les affiche en display:block. */
.kgl .kgl-error {
	display: none;
	margin: 0 0 18px;
	padding: 12px 14px;
	border-radius: 12px;
	border: 1px solid #fecaca;
	background: #fef2f2;
	font-size: 14px;
	color: #b91c1c;
}

.kgl-success { padding: 30px 0 12px; text-align: center; }
.kgl-success .kgl-badge { width: 72px; height: 72px; border-radius: 22px; margin-bottom: 18px; }
.kgl-success .kgl-badge .kg-ico { width: 34px; height: 34px; }
.kgv .kgl-success h2 { font-size: 26px; }
.kgv .kgl-success p { margin-top: 6px; color: var(--kgv-text); }

/* ---------- Messages WooCommerce (ramenés dans la carte) ---------- */
.kgl-notices:empty { display: none; }
.kgl-notices { margin-bottom: 18px; }
.kgl-notices .woocommerce-notices-wrapper > * { margin: 0 0 10px; }
.kgl-notices .woocommerce-error,
.kgl-notices .woocommerce-message,
.kgl-notices .woocommerce-info {
	position: relative;
	margin: 0;
	padding: 12px 14px 12px 44px !important;
	border-radius: 12px;
	font-size: 14px;
	line-height: 1.5;
	list-style: none;
}
.kgl-notices .woocommerce-error:before,
.kgl-notices .woocommerce-message:before,
.kgl-notices .woocommerce-info:before { left: 14px !important; top: 13px !important; transform: none !important; }
.kgl-notices .woocommerce-error { background: #fef2f2 !important; border: 1px solid #fecaca; color: #b91c1c !important; }
.kgl-notices .woocommerce-error a, .kgl-notices .woocommerce-error strong { color: #991b1b !important; }
.kgl-notices .woocommerce-message { background: #f0fdf4 !important; border: 1px solid #bbf7d0; color: #15803d !important; }
.kgl-notices .woocommerce-info { background: #eef2ff !important; border: 1px solid #c7d2fe; color: #4338ca !important; }

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
	.kgl-grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
}
@media (max-width: 600px) {
	.kgl { padding-bottom: 56px; }
	.kgl-hero { padding: 22px 0 120px; }
	.kgl-crumbs { margin-bottom: 26px; }
	.kgv .kgl-lead { font-size: 16px; }
	.kgl-body { margin-top: -88px; padding: 0 16px; }
	.kgl-card { padding: 24px 20px; border-radius: 18px; }
	.kgl-card__head { gap: 12px; }
	.kgv .kgl-card__head h2 { font-size: 21px; }
	.kgl-badge { width: 46px; height: 46px; border-radius: 14px; }
	.kgl .kgl-role { padding: 14px; gap: 12px; }
	.kgl-role__ico { width: 46px; height: 46px; border-radius: 14px; }
}

/* ---------- Niveaux de classe (inscription enseignant) ---------- */
.kgl-optional { font-weight: 400; color: var(--kgv-muted); }
.kgl-field .kg-levels-label {
	display: block;
	margin-bottom: 7px;
	font-family: var(--kgv-title);
	font-size: 14px;
	font-weight: 500;
	color: var(--kgv-ink);
}
.kgl-field .kg-level { display: inline-flex; margin: 0; }