/**
 * Écran de connexion natif de WordPress, aux couleurs du club.
 *
 * Cet écran n'est pas rendu par le thème : ni theme.json, ni site.css ne s'y
 * appliquent. Il est pourtant le premier — et parfois le seul — que voient les
 * membres dont le mot de passe a été réinitialisé. D'où cette feuille, qui
 * reprend les mêmes valeurs que la charte, écrites en dur faute de pouvoir
 * lire les variables générées par theme.json.
 */

:root {
	--sub-abysse: #142f52;
	--sub-profond: #1d5480;
	--sub-lien: #1d6493;
	--sub-lagon: #2e8fc0;
	--sub-ecume: #e9f4fa;
	--sub-ardoise: #566b84;
	--sub-brume-fonce: #7a8ca6;
	--sub-corail-fonce: #c0561a;
	--sub-alerte: #b82a1e;
	--sub-sable: #f2c14e;
}

body.login {
	background: linear-gradient(168deg, #1d5480 0%, #1b3c63 48%, #142f52 100%);
	background-attachment: fixed;
	color: #cfddec;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Le logo du club remplace celui de WordPress — et le nom du club redevient
   lisible : le cœur le rejette hors écran (`text-indent: -9999px`), ce qui
   laissait un pictogramme seul au-dessus d'un formulaire. Sur un écran atteint
   par courriel, on doit pouvoir vérifier d'un coup d'œil où l'on est. */
.login h1 a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	background-image: url(../img/logo.png);
	background-size: 72px 72px;
	background-position: center top;
	width: auto;
	height: auto;
	padding-top: 86px;
	margin: 0 auto 22px;
	overflow: visible;
	text-indent: 0;
	color: #fff;
	font-family: Outfit, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.2;
}

.login h1 a:hover {
	color: var(--sub-sable);
}

.login form {
	background: #fff;
	border: 0;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(20, 47, 82, 0.28);
	padding: 28px 26px 24px;
}

.login form .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
	background: #fff;
	border: 1.5px solid var(--sub-brume-fonce);
	border-radius: 4px;
	color: var(--sub-abysse);
	/* Sous 16 px, Safari iOS zoome la page à la prise de focus. */
	font-size: 16px;
	padding: 11px 13px;
}

.login form label,
.login .login-remember label {
	color: var(--sub-abysse);
	font-size: 14.5px;
}

.login form .input:focus,
.login input[type="checkbox"]:focus {
	border-color: var(--sub-lagon);
	box-shadow: none;
}

/* Le focus clavier reste visible partout — règle du projet. */
.login :where(a, button, input, .button):focus-visible {
	outline: 2px solid var(--sub-lagon);
	outline-offset: 2px;
}

.login #backtoblog a:focus-visible,
.login #nav a:focus-visible,
.login .privacy-policy-link:focus-visible,
.login .language-switcher :focus-visible {
	outline-color: var(--sub-sable);
}

.wp-core-ui .button-primary {
	background: var(--sub-corail-fonce);
	border: 0;
	border-radius: 12px;
	box-shadow: none;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	min-height: 44px;
	padding: 0 22px;
	text-shadow: none;
}

.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:focus {
	background: #9e4614;
	box-shadow: none;
}

/* Liens hors du panneau : ils sont sur le fond sombre. */
.login #backtoblog a,
.login #nav a,
.login .privacy-policy-link {
	color: #b0c4da;
}

.login #backtoblog a:hover,
.login #nav a:hover,
.login .privacy-policy-link:hover {
	color: #fff;
}

/* Dans le panneau blanc, on repasse au bleu de lien de la charte. */
.login form a {
	color: var(--sub-lien);
}

/* Messages : le fond change, jamais la seule bordure — une erreur ne doit pas
   ressembler à une information. */
.login .message,
.login .notice,
.login #login_error,
.login .success {
	border-left-width: 4px;
	border-radius: 12px;
	box-shadow: none;
	padding: 14px 18px;
}

.login .message,
.login .notice-info {
	background: #e4eff8;
	border-left-color: var(--sub-lagon);
	color: #153f63;
}

.login #login_error,
.login .notice-error {
	background: #fdeceb;
	border-left-color: var(--sub-alerte);
	color: #7a2413;
}

.login .success,
.login .notice-success {
	background: #e4f2ec;
	border-left-color: #17795e;
	color: #0d4433;
}

.login .notice-warning {
	background: #fdf4e0;
	border-left-color: var(--sub-sable);
	color: #4a3a10;
}

/* Indicateur de robustesse du mot de passe (écran de réinitialisation). */
.login .pw-weak,
.login #pass-strength-result {
	border-radius: 4px;
	font-size: 13.5px;
}

/* Bouton secondaire — « Modifier » du sélecteur de langue. Laissé au thème de
   l'administration, il posait le bleu WordPress au milieu de la charte. */
.wp-core-ui .button:not(.button-primary):not(.wp-hide-pw),
.wp-core-ui .button-secondary {
	background: transparent;
	border: 1.5px solid #b0c4da;
	border-radius: 8px;
	color: #cfddec;
	min-height: 40px;
}

.wp-core-ui .button:not(.button-primary):not(.wp-hide-pw):hover,
.wp-core-ui .button-secondary:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: #fff;
	color: #fff;
}

/* Le bouton « afficher le mot de passe » vit à l'intérieur du champ : il ne
   porte ni fond ni bordure, sous peine de couper le champ en deux. */
.login .wp-hide-pw {
	background: transparent;
	border: 0;
	color: var(--sub-profond);
}

.login .wp-hide-pw:hover {
	color: var(--sub-lien);
}

/* Le mot de passe proposé doit tenir en entier dans le champ.
 *
 * Sur l'écran de réinitialisation, WordPress remplit `#pass1` par un mot de
 * passe de **24 caractères** (`wp_ajax_generate_password`), affiché en clair et
 * en chasse fixe. Le panneau du cœur fait 320 px : une fois retirés les marges
 * du formulaire, les 13 px de retrait et les 40 px réservés au bouton
 * « afficher », il reste 213 px de texte pour 230 px de mot de passe. Les deux
 * derniers caractères sortent du champ.
 *
 * Rien ne le signale : pas de barre de défilement, pas de coupure visible. Le
 * membre lit ce qu'on lui montre, l'enregistre — WordPress reçoit et stocke le
 * mot de passe **entier**, celui-là — puis se voit refuser la connexion avec la
 * version tronquée qu'il a recopiée. D'où l'impression que le champ n'a pas été
 * transmis, alors qu'il l'a été trop complètement pour l'œil.
 *
 * On élargit donc le panneau sur ces deux écrans — `rp` à l'arrivée du lien,
 * `resetpass` au retour d'erreur — plutôt que de réduire la police : sous
 * 16 px, Safari iOS zoome à la prise de focus (voir plus haut). */
body.login-action-rp #login,
body.login-action-resetpass #login {
	width: 400px;
	max-width: calc(100vw - 32px);
}

/* Sur un téléphone, la largeur ne suffit plus : on reprend la place sur les
   marges du formulaire, qui ne coûtent rien à la lisibilité. */
@media (max-width: 440px) {
	.login #resetpassform {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* Sous 350 px de large, la place manque même sans les marges : on cède alors
   sur la taille du texte, seul réglage qui reste. Le zoom de Safari iOS est un
   désagrément ; un mot de passe coupé est une porte fermée. La police suit la
   largeur pour que la règle vaille jusqu'aux plus petits écrans. */
@media (max-width: 349px) {
	.login #resetpassform .password-input {
		font-size: 3.9vw;
	}
}

.login .language-switcher {
	margin-top: 18px;
}

.login .language-switcher label {
	color: #b0c4da;
}