/*
 * Le Grand Frère — écrans de connexion natifs de WordPress (wp-login.php, renommé /connexion/
 * par WPS Hide Login) : connexion, mot de passe oublié, nouveau mot de passe, confirmation par e-mail.
 * Chargée par lgf_connexion_feuilles() (php/wordpress.php) après css/tokens.css et
 * css/components.css, et après la feuille « login » de WordPress, qu'elle remplace visuellement.
 * Uniquement des jetons de css/tokens.css (contrôlé par design/check_design.py).
 * Les sélecteurs commencent par « body.login #login » pour primer sur login.css, forms.css
 * et buttons.css sans !important.
 * Règles d'usage : design/DESIGN.md
 */

/* ---------- Page ---------- */
body.login {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	min-height: 100%;
	padding: var(--lgf-espace-7) var(--lgf-marge-mobile);
	background: var(--lgf-fond);
	color: var(--lgf-texte);
	font-family: var(--font-texte);
	font-size: var(--lgf-corps-taille);
	line-height: var(--lgf-corps-interligne);
}
/* Ruban quadricolore tout en haut du site */
body.login::before {
	content: "";
	position: fixed;
	z-index: 10;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--lgf-bleu-500) 0 25%, var(--lgf-turquoise-500) 25% 50%, var(--lgf-jaune-400) 50% 75%, var(--lgf-corail-500) 75% 100%);
}
@media (min-width: 768px) {
	body.login {
		padding: var(--lgf-espace-8) var(--lgf-marge-tablette);
	}
}

/* ---------- Carte : logo, titre, messages, formulaire, liens ---------- */
body.login #login {
	display: flex;
	flex-direction: column;
	gap: var(--lgf-espace-5);
	box-sizing: border-box;
	width: 100%;
	max-width: 440px;
	margin: auto;
	padding: var(--lgf-espace-6) var(--lgf-espace-5);
	border: var(--lgf-trait) solid var(--lgf-bordure);
	border-radius: var(--lgf-rayon-lg);
	background: var(--lgf-blanc);
	box-shadow: var(--lgf-ombre-carte);
}
@media (min-width: 768px) {
	body.login #login {
		padding: var(--lgf-espace-7) var(--lgf-espace-6);
	}
}
body.login-action-confirm_admin_email #login {
	max-width: 640px;
}
body.interim-login {
	padding: var(--lgf-espace-4);
}
body.interim-login::before {
	display: none;
}
body.interim-login #login {
	margin: 0 auto;
	box-shadow: none;
}

/* Logo complet (img/logo/logo.svg) : 56 px de haut, lien vers l'accueil */
body.login #login h1 {
	margin: 0;
	text-align: center;
}
body.login #login h1 a {
	display: block;
	width: 251px;
	max-width: 100%;
	height: 56px;
	margin: 0 auto;
	background: url("../img/logo/logo.svg") center / contain no-repeat;
	text-indent: -9999px;
	overflow: hidden;
}

/* Titre et phrase de l'écran (lgf_connexion_intro) */
.lgf-connexion-intro {
	display: flex;
	flex-direction: column;
	gap: var(--lgf-espace-2);
	text-align: center;
}
body.login #login .lgf-connexion-intro__titre {
	margin: 0;
	font-family: var(--font-titres);
	font-size: var(--lgf-h2-taille);
	line-height: var(--lgf-h2-interligne);
	font-weight: var(--lgf-h2-graisse);
	color: var(--lgf-encre);
}
body.login #login .lgf-connexion-intro__texte {
	margin: 0;
	font-size: var(--lgf-corps-taille);
	line-height: var(--lgf-corps-interligne);
	color: var(--lgf-texte);
}
body.login #login .lgf-connexion-intro .lgf-btn {
	margin-top: var(--lgf-espace-4);
}

/* ---------- Liens (même rendu que .lgf-lien) ---------- */
body.login #login a:not(.lgf-btn) {
	color: var(--lgf-bleu-500);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-decoration-color: color-mix(in srgb, var(--lgf-bleu-500) 30%, transparent);
	text-underline-offset: 4px;
	transition: color var(--lgf-duree-rapide) var(--lgf-courbe), text-decoration-color var(--lgf-duree-rapide) var(--lgf-courbe);
}
body.login #login a:not(.lgf-btn):hover {
	color: var(--lgf-bleu-700);
	text-decoration-color: var(--lgf-corail-500);
}
body.login #login a:focus {
	box-shadow: none;
	outline: 0;
}
body.login #login a:focus-visible,
body.login #login button:focus-visible,
body.login #login input:is([type="submit"], [type="checkbox"]):focus-visible {
	outline: var(--lgf-trait-fort) solid var(--lgf-bleu-500);
	outline-offset: 2px;
}
body.login #login h1 a {
	text-decoration: none;
}

/* ---------- Messages : encarts du système de design ---------- */
/* Information par défaut ; erreur, succès et attention selon la classe posée par WordPress */
body.login #login .message,
body.login #login .notice,
body.login #login .success,
body.login #login #login_error {
	--lgf-connexion-encart-icone: url("../img/icons/info.svg");
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	gap: var(--lgf-espace-1) var(--lgf-espace-3);
	align-items: start;
	margin: 0;
	padding: var(--lgf-espace-4);
	border: 0;
	border-radius: var(--lgf-rayon-lg);
	background: var(--lgf-bleu-50);
	box-shadow: none;
	color: var(--lgf-texte);
	font-size: var(--lgf-corps-taille);
	line-height: var(--lgf-corps-interligne);
}
body.login #login .message::before,
body.login #login .notice::before,
body.login #login .success::before,
body.login #login #login_error::before {
	content: "";
	grid-row: 1;
	grid-column: 1;
	width: 24px;
	height: 24px;
	background: var(--lgf-bleu-500);
	-webkit-mask: var(--lgf-connexion-encart-icone) center / contain no-repeat;
	mask: var(--lgf-connexion-encart-icone) center / contain no-repeat;
}
body.login #login :is(.message, .notice, .success, #login_error) > * {
	grid-column: 2;
	margin: 0;
	font-size: var(--lgf-corps-taille);
	line-height: var(--lgf-corps-interligne);
}
body.login #login :is(.message, .notice, .success, #login_error) strong {
	font-weight: var(--lgf-corps-fort-graisse);
	color: var(--lgf-encre);
}
body.login #login .login-error-list {
	display: grid;
	gap: var(--lgf-espace-1);
	padding: 0;
	list-style: none;
}
body.login #login .login-error-list li + li {
	margin: 0;
}
body.login #login #login_error,
body.login #login .notice-error {
	--lgf-connexion-encart-icone: url("../img/icons/circle-x.svg");
	background: var(--lgf-rouge-50);
}
body.login #login #login_error::before,
body.login #login .notice-error::before {
	background: var(--lgf-rouge-600);
}
body.login #login .success,
body.login #login .notice-success {
	--lgf-connexion-encart-icone: url("../img/icons/circle-check.svg");
	background: var(--lgf-vert-50);
}
body.login #login .success::before,
body.login #login .notice-success::before {
	background: var(--lgf-vert-700);
}
body.login #login .notice-warning {
	--lgf-connexion-encart-icone: url("../img/icons/triangle-alert.svg");
	background: var(--lgf-jaune-50);
}
body.login #login .notice-warning::before {
	background: var(--lgf-jaune-800);
}

/* ---------- Formulaire ---------- */
body.login #login form {
	display: flex;
	flex-direction: column;
	gap: var(--lgf-espace-4);
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	overflow: visible;
}
/* Pas de secousse en cas d'erreur : l'encart suffit */
body.login #login form.shake {
	animation: none;
	transform: none;
}
body.login #login form p {
	margin: 0;
}
body.login #login form br {
	display: none;
}

/* Étiquettes : toujours visibles au-dessus du champ */
body.login #login form label {
	display: block;
	margin: 0 0 var(--lgf-espace-2);
	font-size: var(--lgf-etiquette-taille);
	line-height: var(--lgf-etiquette-interligne);
	font-weight: var(--lgf-etiquette-graisse);
	color: var(--lgf-encre);
}
body.login #login .user-pass1-wrap > p {
	margin: 0;
}

/* Champs : 48 px, rayon md, contour lgf-bordure-champ */
body.login #login form input:is([type="text"], [type="password"], [type="email"], [type="tel"], [type="number"]),
body.login #login form .input {
	box-sizing: border-box;
	width: 100%;
	min-height: var(--lgf-hauteur-controle);
	max-height: none;
	margin: 0;
	padding: 0 var(--lgf-espace-4);
	border: var(--lgf-trait) solid var(--lgf-bordure-champ);
	border-radius: var(--lgf-rayon-md);
	background: var(--lgf-blanc);
	box-shadow: none;
	color: var(--lgf-encre);
	font-family: var(--font-texte);
	font-size: var(--lgf-corps-taille);
	line-height: var(--lgf-corps-interligne);
	transition: border-color var(--lgf-duree-rapide) var(--lgf-courbe);
}
body.login #login form input:is([type="text"], [type="password"], [type="email"]):hover {
	border-color: var(--lgf-texte-discret);
}
body.login #login form input:is([type="text"], [type="password"], [type="email"], [type="tel"], [type="number"]):focus,
body.login #login form .input:focus {
	outline: var(--lgf-trait-fort) solid var(--lgf-bleu-500);
	outline-offset: 1px;
	border-color: var(--lgf-bleu-500);
	box-shadow: none;
}
/* Identifiants refusés : les champs de connexion passent en erreur */
body.login #login:has(#login_error) #loginform .input {
	border-color: var(--lgf-rouge-600);
}

/* Mot de passe : bouton « afficher / masquer » dans le champ, icônes Lucide */
body.login #login .wp-pwd {
	position: relative;
}
body.login #login input.password-input {
	padding-right: calc(var(--lgf-cible-tactile) + var(--lgf-espace-2));
	font-family: var(--font-texte);
}
body.login #login .button.wp-hide-pw {
	position: absolute;
	top: 2px;
	right: 2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--lgf-cible-tactile);
	height: var(--lgf-cible-tactile);
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--lgf-rayon-md);
	background: transparent;
	box-shadow: none;
	color: var(--lgf-texte-discret);
	transition: color var(--lgf-duree-rapide) var(--lgf-courbe);
}
body.login #login .button.wp-hide-pw:hover {
	background: transparent;
	color: var(--lgf-bleu-500);
}
body.login #login .button.wp-hide-pw:focus {
	border: 0;
	background: transparent;
	box-shadow: none;
}
body.login #login .button.wp-hide-pw:focus-visible {
	outline-offset: -2px;
}
body.login #login .button.wp-hide-pw .dashicons {
	position: static;
	width: 20px;
	height: 20px;
	background: currentColor;
	-webkit-mask: url("../img/icons/eye.svg") center / contain no-repeat;
	mask: url("../img/icons/eye.svg") center / contain no-repeat;
}
body.login #login .button.wp-hide-pw .dashicons-hidden {
	-webkit-mask-image: url("../img/icons/eye-off.svg");
	mask-image: url("../img/icons/eye-off.svg");
}
body.login #login .button.wp-hide-pw .dashicons::before {
	content: none;
}

/* Robustesse du nouveau mot de passe : texte et couleur (jamais la couleur seule) */
body.login #login #pass-strength-result {
	box-sizing: border-box;
	width: 100%;
	margin: var(--lgf-espace-2) 0 0;
	padding: var(--lgf-espace-2) var(--lgf-espace-3);
	border: 0;
	border-radius: var(--lgf-rayon-md);
	background: var(--lgf-fond);
	color: var(--lgf-texte-discret);
	font-size: var(--lgf-etiquette-taille);
	line-height: var(--lgf-etiquette-interligne);
	font-weight: var(--lgf-etiquette-graisse);
	text-align: left;
}
body.login #login #pass-strength-result:is(.short, .bad) {
	background: var(--lgf-jaune-50);
	color: var(--lgf-jaune-800);
}
body.login #login #pass-strength-result.good {
	background: var(--lgf-bleu-50);
	color: var(--lgf-bleu-500);
}
body.login #login #pass-strength-result.strong {
	background: var(--lgf-vert-50);
	color: var(--lgf-vert-700);
}
body.login #login #pass1:is(.short, .bad, .good, .strong) {
	border-color: var(--lgf-bordure-champ);
}
body.login #login #pass1:focus {
	border-color: var(--lgf-bleu-500);
	box-shadow: none;
}
body.login #login .indicator-hint {
	margin: 0;
	padding: 0;
	font-size: var(--lgf-petit-taille);
	line-height: var(--lgf-petit-interligne);
	color: var(--lgf-texte-discret);
}

/* Cases à cocher (« Se souvenir de moi », confirmation d'un mot de passe faible) */
body.login #login form .forgetmenot {
	display: flex;
	align-items: center;
	gap: var(--lgf-espace-3);
	float: none;
	min-height: var(--lgf-cible-tactile);
	margin: 0;
}
/* Affichée par WordPress (display: block) quand le mot de passe est faible : case calée à gauche du libellé */
body.login #login .pw-weak {
	position: relative;
	margin: var(--lgf-espace-3) 0 0;
	padding-left: calc(20px + var(--lgf-espace-3));
}
body.login #login form .pw-weak input[type="checkbox"] {
	position: absolute;
	top: 2px;
	left: 0;
}
body.login #login form input[type="checkbox"] {
	-webkit-appearance: auto;
	appearance: auto;
	flex: none;
	width: 20px;
	height: 20px;
	min-width: 0;
	margin: 0;
	vertical-align: middle;
	box-shadow: none;
	accent-color: var(--lgf-bleu-500);
	cursor: pointer;
}
body.login #login form input[type="checkbox"]::before {
	content: none;
}
body.login #login form :is(.forgetmenot, .pw-weak) label {
	display: inline;
	margin: 0;
	font-size: var(--lgf-corps-taille);
	line-height: var(--lgf-corps-interligne);
	font-weight: var(--lgf-corps-graisse);
	color: var(--lgf-texte);
	cursor: pointer;
}

/* ---------- Boutons ---------- */
/* Envoi : bouton principal corail, pleine largeur (formulaire étroit) */
body.login #login form .button-primary {
	float: none;
	box-sizing: border-box;
	width: 100%;
	min-height: var(--lgf-hauteur-controle);
	margin: 0;
	padding: 0 var(--lgf-espace-5);
	border: var(--lgf-trait-fort) solid transparent;
	border-radius: var(--lgf-rayon-md);
	background: var(--lgf-corail-600);
	box-shadow: none;
	color: var(--lgf-blanc);
	font-family: var(--font-texte);
	font-size: var(--lgf-bouton-taille);
	line-height: var(--lgf-bouton-interligne);
	font-weight: var(--lgf-bouton-graisse);
	text-shadow: none;
	white-space: normal;
	cursor: pointer;
	transition: background-color var(--lgf-duree-rapide) var(--lgf-courbe), box-shadow var(--lgf-duree-base) var(--lgf-courbe), transform var(--lgf-duree-base) var(--lgf-courbe);
}
body.login #login form .button-primary:hover {
	border-color: transparent;
	background: var(--lgf-corail-700);
	box-shadow: var(--lgf-ombre-bouton);
	color: var(--lgf-blanc);
	transform: translateY(-2px);
}
body.login #login form .button-primary:focus {
	border-color: transparent;
	background: var(--lgf-corail-600);
	box-shadow: none;
	color: var(--lgf-blanc);
}
body.login #login form .button-primary:active {
	background: var(--lgf-corail-700);
	transform: none;
}
body.login #login form .button-primary:is(:disabled, [disabled]) {
	border-color: var(--lgf-bordure);
	background: var(--lgf-bordure);
	box-shadow: none;
	color: var(--lgf-texte-discret);
	transform: none;
	cursor: not-allowed;
}

/* « Générer un mot de passe » et autres boutons WordPress : bouton secondaire */
body.login #login .button:not(.button-primary, .wp-hide-pw) {
	box-sizing: border-box;
	min-height: var(--lgf-hauteur-controle);
	margin: 0;
	padding: 0 var(--lgf-espace-5);
	border: var(--lgf-trait-fort) solid var(--lgf-bleu-500);
	border-radius: var(--lgf-rayon-md);
	background: var(--lgf-blanc);
	box-shadow: none;
	color: var(--lgf-bleu-500);
	font-family: var(--font-texte);
	font-size: var(--lgf-bouton-taille);
	line-height: var(--lgf-bouton-interligne);
	font-weight: var(--lgf-bouton-graisse);
	white-space: normal;
	transition: background-color var(--lgf-duree-rapide) var(--lgf-courbe), color var(--lgf-duree-rapide) var(--lgf-courbe);
}
body.login #login .button:not(.button-primary, .wp-hide-pw):hover {
	background: var(--lgf-bleu-500);
	color: var(--lgf-blanc);
}
body.login #login .button:not(.button-primary, .wp-hide-pw):focus {
	box-shadow: none;
}
body.login #login .reset-pass-submit {
	display: flex;
	flex-direction: column;
	gap: var(--lgf-espace-3);
}
body.login #login .reset-pass-submit .button {
	width: 100%;
}

/* ---------- Liens sous le formulaire ---------- */
body.login #login #nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 var(--lgf-espace-5);
	margin: calc(-1 * var(--lgf-espace-2)) 0 0;
	padding: 0;
	font-size: 0;
	text-align: center;
}
body.login #login #nav a {
	display: inline-flex;
	align-items: center;
	min-height: var(--lgf-cible-tactile);
	font-size: var(--lgf-corps-taille);
	line-height: var(--lgf-corps-interligne);
	font-weight: var(--lgf-corps-fort-graisse);
}

/* Pied de la carte : retour au site et politique de confidentialité, sous un filet */
body.login #login #backtoblog {
	margin: 0;
	padding: var(--lgf-espace-4) 0 0;
	border-top: var(--lgf-trait) solid var(--lgf-bordure);
	font-size: var(--lgf-petit-taille);
	line-height: var(--lgf-petit-interligne);
	text-align: center;
}
body.login #login .privacy-policy-page-link {
	width: auto;
	margin: calc(var(--lgf-espace-2) - var(--lgf-espace-5)) 0 0;
	font-size: var(--lgf-petit-taille);
	line-height: var(--lgf-petit-interligne);
	text-align: center;
}
body.login #login :is(#backtoblog, .privacy-policy-page-link) a {
	display: inline-flex;
	align-items: center;
	gap: var(--lgf-espace-1);
	min-height: var(--lgf-cible-tactile);
	color: var(--lgf-texte-discret);
	text-decoration-color: color-mix(in srgb, var(--lgf-texte-discret) 30%, transparent);
}
body.login #login :is(#backtoblog, .privacy-policy-page-link) a:hover {
	color: var(--lgf-bleu-700);
	text-decoration-color: var(--lgf-corail-500);
}
body.login #login #backtoblog .lgf-icone {
	width: 16px;
	height: 16px;
}

/* Sélecteur de langue (désactivé côté PHP, site en français seulement) */
body.login .language-switcher {
	display: none;
}