/* Intranet YesPiscine — page de connexion (1.18.0).
 * Comme le site yespiscine.fr : dégradé profond, logo officiel, vagues dans les bleus de la charte
 * (bleu #289ED9, turquoise #2ABAD9, lagon #7BC9D2), formulaire sur fond blanc sous un filet dégradé. */
@font-face { font-family: "Manrope"; font-weight: 400; font-display: swap; src: url("../fonts/manrope-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 600; font-display: swap; src: url("../fonts/manrope-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 700; font-display: swap; src: url("../fonts/manrope-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 500; font-display: swap; src: url("../fonts/outfit-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 600; font-display: swap; src: url("../fonts/outfit-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 700; font-display: swap; src: url("../fonts/outfit-latin-700-normal.woff2") format("woff2"); }

html { -webkit-tap-highlight-color: transparent; }
body.login.yp-login {
	--profond: #0D4059; --eau: #1D77A5; --bleu: #289ED9; --turquoise: #2ABAD9; --lagon: #7BC9D2;
	--plage: #FFFFFF; --pierre: #E8EFF1; --filet: #D3E4EA; --texte: #16232D; --doux: #52667A; --alerte: #A3441B; --ok: #1E7A4E;
	margin: 0; min-height: 100vh; min-height: 100dvh;
	display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(420px, 1fr); grid-template-rows: 1fr auto;
	background: var(--plage); color: var(--texte);
	font-family: "Manrope", system-ui, "Segoe UI", Arial, sans-serif; font-size: 16px; line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}
body.login.yp-login .clear { display: none; }

/* ---------- Le panneau de marque ---------- */
.ypl-hero {
	grid-column: 1; grid-row: 1 / span 2; position: relative; overflow: hidden; min-height: 100%;
	background:
		radial-gradient(70% 55% at 85% 10%, rgba(42, 186, 217, .35), transparent 70%),
		linear-gradient(115deg, #0D4059 0%, #0D4059 34%, #1A6F9E 70%, #289ED9 100%);
	isolation: isolate;
}
.ypl-brand { position: absolute; left: clamp(32px, 6vw, 96px); right: clamp(32px, 6vw, 96px); top: 42%; transform: translateY(-50%); color: #fff; z-index: 2; }
.ypl-logo { display: block; width: min(380px, 100%); height: auto; image-rendering: auto; }
.ypl-slogan { margin: 22px 0 0; font-family: "Outfit", system-ui, sans-serif; font-weight: 500; font-size: clamp(20px, 1.9vw, 27px); line-height: 1.25; color: #fff; letter-spacing: -.005em; }
.ypl-tag { margin: 12px 0 0; font-family: "Outfit", system-ui, sans-serif; font-weight: 600; font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--lagon); }

/* Les vagues : trois nappes qui défilent à des vitesses différentes, la dernière dans la couleur de la page. */
.ypl-waves { position: absolute; left: 0; right: 0; bottom: -3px; height: 34%; min-height: 150px; z-index: 1; pointer-events: none; }
.ypl-wave { position: absolute; left: 0; bottom: 0; width: 200%; height: 100%; display: block; will-change: transform; backface-visibility: hidden; animation: ypl-houle 22s linear infinite; }
.ypl-wave--1 { fill: rgba(123, 201, 210, .38); animation-duration: 26s; }
.ypl-wave--2 { fill: rgba(42, 186, 217, .45); height: 82%; animation-duration: 18s; animation-direction: reverse; }
.ypl-wave--3 { fill: rgba(40, 158, 217, .72); height: 62%; animation-duration: 14s; }
@keyframes ypl-houle { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Filet dégradé de la charte au-dessus du formulaire (comme l'en-tête du site). */
body.login.yp-login::before { content: ""; grid-column: 2; grid-row: 1; align-self: start; height: 4px; background: linear-gradient(90deg, #289ED9 0%, #2ABAD9 55%, #7BC9D2 100%); }

/* ---------- La plage : le formulaire ---------- */
body.login.yp-login #login { grid-column: 2; grid-row: 1; align-self: center; justify-self: center; width: min(380px, calc(100% - 56px)); padding: 56px 0 12px; margin: 0; }
body.login.yp-login #login h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
body.login.yp-login .yp-login__head { margin: 0 0 28px; }
body.login.yp-login .yp-login__head h2 { margin: 0; font-family: "Outfit", system-ui, sans-serif; font-weight: 600; font-size: 44px; line-height: 1.05; letter-spacing: -.02em; color: var(--profond); }
body.login.yp-login .yp-login__head p { margin: 10px 0 0; color: var(--doux); font-size: 16px; max-width: 32ch; }

body.login.yp-login form { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; overflow: visible; }
body.login.yp-login #login form p, body.login.yp-login #login .user-pass-wrap { margin: 0 0 18px; }
body.login.yp-login label { display: block; color: var(--texte); font-weight: 700; font-size: 14px; margin-bottom: 7px; line-height: 1.4; }
body.login.yp-login label span { color: var(--doux); }
body.login.yp-login form .input, body.login.yp-login input[type="text"], body.login.yp-login input[type="password"], body.login.yp-login input[type="email"] {
	width: 100%; min-height: 54px; margin: 0; padding: 12px 16px; font-size: 17px; font-family: inherit; color: var(--texte);
	background: #fff; border: 1.5px solid var(--filet); border-radius: 12px; box-shadow: 0 1px 0 rgba(13, 64, 89, .04);
	transition: border-color .15s ease, box-shadow .15s ease;
}
body.login.yp-login form .input:hover { border-color: #B5D2DC; }
body.login.yp-login form .input:focus, body.login.yp-login input:focus { border-color: var(--turquoise); outline: 0; box-shadow: 0 0 0 4px rgba(42, 186, 217, .2); }
body.login.yp-login .wp-pwd { position: relative; }
body.login.yp-login .wp-pwd .input { padding-right: 54px; }
body.login.yp-login .button.wp-hide-pw { position: absolute; right: 5px; top: 5px; height: 44px; width: 44px; min-height: 0; border: 0; border-radius: 9px; background: transparent; color: var(--eau); box-shadow: none; }
body.login.yp-login .button.wp-hide-pw:hover { background: #EEF6F9; }
body.login.yp-login .button.wp-hide-pw:focus-visible { box-shadow: 0 0 0 3px rgba(42, 186, 217, .35); }
body.login.yp-login .ypl-otp-toggle { display: block; margin: -6px 0 16px; padding: 4px 0; border: 0; background: none; color: var(--eau); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(29, 119, 165, .35); }
body.login.yp-login .ypl-otp-toggle:hover { color: var(--profond); }
body.login.yp-login .ypl-otp-toggle:focus-visible { outline: 3px solid rgba(42, 186, 217, .5); outline-offset: 2px; border-radius: 4px; }
body.login.yp-login #yp_otp { letter-spacing: .22em; font-variant-numeric: tabular-nums; }
body.login.yp-login #login form .forgetmenot { display: flex; align-items: center; gap: 10px; float: none; margin: 2px 0 24px; }
body.login.yp-login #login form .forgetmenot label { margin: 0; font-weight: 600; }
body.login.yp-login input[type="checkbox"] { width: 21px; height: 21px; margin: 0; border-radius: 6px; border: 1.5px solid #9CC3D1; accent-color: var(--eau); box-shadow: none; }
body.login.yp-login input[type="checkbox"]:checked::before { margin: -1px 0 0 -1px; }
body.login.yp-login #login form .submit { margin: 0; clear: both; }
body.login.yp-login.wp-core-ui .button-primary {
	float: none; width: 100%; min-height: 56px; padding: 0 20px; font-size: 17px; font-weight: 700; font-family: inherit; letter-spacing: .01em;
	background: var(--profond); border: 0; border-radius: 12px; color: #fff; text-shadow: none;
	box-shadow: 0 10px 22px -10px rgba(13, 64, 89, .7); transition: background .15s ease, transform .1s ease;
}
body.login.yp-login.wp-core-ui .button-primary:hover { background: var(--eau); color: #fff; }
body.login.yp-login.wp-core-ui .button-primary:focus { background: var(--profond); color: #fff; box-shadow: 0 10px 22px -10px rgba(13, 64, 89, .7); outline: 0; }
body.login.yp-login.wp-core-ui .button-primary:focus-visible { background: var(--eau); box-shadow: 0 0 0 4px rgba(42, 186, 217, .4); }
body.login.yp-login.wp-core-ui .button-primary:active { transform: translateY(1px); }
body.login.yp-login .button-secondary:not(.wp-hide-pw) { min-height: 46px; border-radius: 10px; border-color: var(--filet); color: var(--eau); }
body.login.yp-login .indicator-hint, body.login.yp-login .description { color: var(--doux); font-size: 13px; }
body.login.yp-login #pass-strength-result { border-radius: 8px; }

/* Messages : sans cadre lourd. */
body.login.yp-login .message, body.login.yp-login .notice, body.login.yp-login #login_error, body.login.yp-login .success {
	margin: 0 0 22px; padding: 12px 16px; border: 0; border-radius: 12px; box-shadow: none; font-size: 15px; color: var(--texte); background: #EAF6FA;
}
body.login.yp-login #login_error, body.login.yp-login .notice-error { background: #FCEDE5; color: #7A3212; }
body.login.yp-login .success, body.login.yp-login .notice-success { background: #E5F4EC; color: #155C3A; }
body.login.yp-login #login .yp-login__head + .message { background: none; padding: 0; margin: -14px 0 24px; color: var(--doux); }

/* Liens */
body.login.yp-login #nav, body.login.yp-login #backtoblog { margin: 22px 0 0; padding: 0; text-align: center; font-size: 15px; }
body.login.yp-login #backtoblog, body.login.yp-login .privacy-policy-page-link, body.login.yp-login .language-switcher { display: none; }
body.login.yp-login #nav a, body.login.yp-login .message a { color: var(--eau); font-weight: 700; text-decoration: none; }
body.login.yp-login #nav a:hover, body.login.yp-login #nav a:focus { color: var(--profond); text-decoration: underline; text-underline-offset: 3px; }
body.login.yp-login a:focus { box-shadow: none; outline: 0; }
body.login.yp-login a:focus-visible { box-shadow: 0 0 0 3px rgba(42, 186, 217, .35); border-radius: 4px; outline: 0; }
body.login.yp-login .yp-login__foot { grid-column: 2; grid-row: 2; margin: 0 auto; padding: 0 28px 28px; max-width: 380px; text-align: center; font-size: 13px; color: var(--doux); }

/* ---------- Téléphone et tablette : le panneau en haut, terminé par les vagues, puis le formulaire ---------- */
@media (max-width: 900px) {
	body.login.yp-login { display: block; background: var(--plage); }
	body.login.yp-login::before { display: none; }
	.ypl-hero { height: 34vh; height: 34dvh; min-height: 230px; max-height: 320px; }
	.ypl-brand { top: 40%; left: 24px; right: 24px; }
	.ypl-logo { width: min(250px, 72vw); }
	.ypl-slogan { margin-top: 12px; font-size: 18px; }
	.ypl-tag { display: none; }
	.ypl-waves { height: 34%; min-height: 80px; }
	.ypl-wave--3 { fill: #FFFFFF; height: 78%; }
	/* Le bas du panneau se fond dans la page : aucun liseré entre la vague blanche et le formulaire. */
	.ypl-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 4px; background: #FFFFFF; z-index: 2; }
	body.login.yp-login #login { width: auto; max-width: 440px; margin: 0 auto; padding: 10px 22px 8px; }
	body.login.yp-login .yp-login__head { margin-bottom: 18px; }
	body.login.yp-login .yp-login__head h2 { font-size: 30px; }
	body.login.yp-login .yp-login__head p { margin-top: 4px; font-size: 15px; }
	body.login.yp-login #login form p, body.login.yp-login #login .user-pass-wrap { margin-bottom: 14px; }
	body.login.yp-login #login form .forgetmenot { margin-bottom: 18px; }
	body.login.yp-login .yp-login__foot { padding: 18px 24px 28px; padding-bottom: max(28px, env(safe-area-inset-bottom)); }
}
@media (max-width: 900px) and (max-height: 700px) {
	.ypl-hero { height: 27vh; min-height: 170px; }
	.ypl-slogan { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.ypl-wave { animation: none; }
	body.login.yp-login * { transition: none !important; }
}
body.login.yp-login .button.wp-hide-pw:focus, body.login.yp-login input[type="checkbox"]:focus { box-shadow: none; outline: 0; }
body.login.yp-login input[type="checkbox"]:focus-visible { box-shadow: 0 0 0 3px rgba(42, 186, 217, .45); }