/**
 * Écran de connexion (wp-login.php) — habillage aux couleurs du thème.
 *
 * Feuille autonome chargée par LoginServiceProvider après la feuille « login »
 * du core : elle ne dépend ni de Tailwind ni d'un build Vite.
 *
 * Les jetons reprennent ceux de timeline.css afin que l'écran de connexion et la
 * page d'accueil partagent exactement la même palette.
 */

body.login {
	--tl-bg: #06070a;
	--tl-line: rgba(255, 255, 255, 0.08);
	--tl-line-strong: rgba(255, 255, 255, 0.17);
	--tl-text: #eceff5;
	--tl-muted: #8a91a3;
	--tl-dim: #565d6e;
	--tl-accent: #f5c451;
	--tl-accent-soft: rgba(245, 196, 81, 0.13);
	--tl-radius: 16px;

	min-height: 100vh;
	/* Même dégradé que la scène du globe : l'écran de connexion prolonge
	   visuellement la page d'accueil. */
	background:
		radial-gradient(78% 68% at 50% 40%, transparent 38%, rgba(0, 0, 0, 0.62) 100%),
		radial-gradient(125% 100% at 68% 18%, #111a2b 0%, #070911 45%, #04050a 100%);
	background-attachment: fixed;
	color: var(--tl-text);
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	letter-spacing: 0;
}

#login {
	width: min(400px, calc(100vw - 32px));
	padding: clamp(40px, 9vh, 96px) 0 32px;
}

/* ------------------------------------------------------------------ *
 * En-tête : logo ACF ou signature typographique
 * ------------------------------------------------------------------ */

#login h1 {
	margin: 0 0 22px;
	text-align: center;
}

/* Sans logo renseigné dans les options ACF, le nom du site est affiché en
   toutes lettres : le core le masque par défaut (text-indent négatif et logo
   WordPress en fond), il faut donc défaire les deux. */
.tam-login--wordmark #login h1 a {
	width: auto;
	height: auto;
	margin: 0;
	background: none;
	color: var(--tl-text);
	font-size: clamp(20px, 4.4vw, 27px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-indent: 0;
	text-transform: uppercase;
	overflow: visible;
	transition: color 0.3s;
}

.tam-login--wordmark #login h1 a:hover,
.tam-login--wordmark #login h1 a:focus-visible {
	color: var(--tl-accent);
}

/* Avec un logo, ThemeServiceProvider::changeLoginLogo() pose l'image en fond :
   on se contente ici de garder le texte masqué. */
.tam-login--logo #login h1 a {
	color: transparent;
}

/* Surtitre : reprend l'étiquette d'accent de la page d'accueil (.tl__eyebrow). */
.tam-login__eyebrow {
	margin: 0 0 10px;
	color: var(--tl-accent);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-align: center;
	text-transform: uppercase;
}

.tam-login__intro {
	margin: 0 0 24px;
	color: var(--tl-muted);
	font-size: 12.5px;
	line-height: 1.5;
	text-align: center;
}

/* ------------------------------------------------------------------ *
 * Carte du formulaire
 * ------------------------------------------------------------------ */

.login form {
	margin: 0;
	padding: 28px 26px 24px;
	border: 1px solid var(--tl-line);
	border-radius: var(--tl-radius);
	/* Même dégradé que le panneau chronologique. */
	background: linear-gradient(180deg, #0a0c12 0%, #06070a 55%);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
	overflow: visible;
}

.login form .forgetmenot {
	margin-bottom: 0;
	font-weight: 400;
}

.login label,
.login form .forgetmenot label {
	display: block;
	margin-bottom: 7px;
	color: var(--tl-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
}

.login form .forgetmenot label {
	display: inline;
	margin-bottom: 0;
	letter-spacing: 0.08em;
}

/* Champs de saisie */
.login form .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
	width: 100%;
	margin: 0 0 18px;
	padding: 11px 13px;
	border: 1px solid var(--tl-line-strong);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.03);
	box-shadow: none;
	color: var(--tl-text);
	font-family: inherit;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	transition: border-color 0.3s, background 0.3s;
}

.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
	border-color: var(--tl-accent);
	background: rgba(245, 196, 81, 0.06);
	outline: none;
	box-shadow: 0 0 0 3px var(--tl-accent-soft);
}

.login input::placeholder {
	color: var(--tl-dim);
}

/* Le champ mot de passe est encapsulé par le core pour porter l'œil
   afficher/masquer : la marge passe sur le conteneur. */
.login .wp-pwd {
	margin-bottom: 18px;
}

.login .wp-pwd .input,
.login .wp-pwd input[type="text"],
.login .wp-pwd input[type="password"] {
	margin-bottom: 0;
	padding-right: 46px;
}

.login .wp-pwd .button.wp-hide-pw {
	top: 1px;
	right: 1px;
	width: 42px;
	height: calc(100% - 2px);
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--tl-muted);
	transition: color 0.3s;
}

.login .wp-pwd .button.wp-hide-pw:hover,
.login .wp-pwd .button.wp-hide-pw:focus {
	background: transparent;
	color: var(--tl-accent);
	outline: none;
}

.login .wp-pwd .button.wp-hide-pw .dashicons {
	width: 20px;
	height: 20px;
	font-size: 20px;
}

/* Case « Se souvenir de moi » */
.login input[type="checkbox"] {
	width: 17px;
	height: 17px;
	margin: -3px 6px 0 0;
	border: 1px solid var(--tl-line-strong);
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.03);
	box-shadow: none;
	transition: border-color 0.3s, background 0.3s;
}

.login input[type="checkbox"]:checked {
	border-color: var(--tl-accent);
	background: var(--tl-accent-soft);
}

.login input[type="checkbox"]:checked::before {
	margin: -3px 0 0 -3px;
	color: var(--tl-accent);
	content: "\f147";
}

.login input[type="checkbox"]:focus {
	border-color: var(--tl-accent);
	box-shadow: 0 0 0 3px var(--tl-accent-soft);
	outline: none;
}

/* ------------------------------------------------------------------ *
 * Bouton d'envoi — même pastille dorée que .tl-info__open
 * ------------------------------------------------------------------ */

.login .button-primary,
.login form .submit .button {
	float: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: auto;
	margin: 34px 0 0;
	padding: 12px 18px;
	border: 1px solid rgba(245, 196, 81, 0.4);
	border-radius: 999px;
	background: rgba(245, 196, 81, 0.08);
	box-shadow: none;
	color: var(--tl-text);
	cursor: pointer;
	font-family: inherit;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-shadow: none;
	text-transform: uppercase;
	transition: border-color 0.3s, background 0.3s, color 0.3s;
}

.login .button-primary:hover,
.login .button-primary:focus,
.login .button-primary:active {
	border-color: var(--tl-accent);
	background: rgba(245, 196, 81, 0.16);
	color: var(--tl-text);
	transform: none;
}

.login .button-primary:focus-visible {
	box-shadow: 0 0 0 3px var(--tl-accent-soft);
	outline: none;
}

/* ------------------------------------------------------------------ *
 * Messages et erreurs
 * ------------------------------------------------------------------ */

.login #login_error,
.login .message,
.login .success,
.login .notice {
	margin: 0 0 20px;
	padding: 12px 15px;
	border: 1px solid var(--tl-line-strong);
	border-left-width: 3px;
	border-radius: 10px;
	background: rgba(10, 12, 18, 0.9);
	box-shadow: none;
	color: var(--tl-text);
	font-size: 13px;
	line-height: 1.5;
}

.login #login_error {
	border-left-color: #e2725b;
}

.login .message,
.login .success {
	border-left-color: var(--tl-accent);
}

.login #login_error a,
.login .message a {
	color: var(--tl-accent);
}

/* ------------------------------------------------------------------ *
 * Liens sous le formulaire
 * ------------------------------------------------------------------ */

.login #nav,
.login #backtoblog {
	margin: 16px 0 0;
	padding: 0;
	text-align: center;
}

.login #nav a,
.login #backtoblog a,
.login .privacy-policy-link {
	color: var(--tl-muted);
	font-size: 12px;
	letter-spacing: 0.04em;
	text-decoration: none;
	transition: color 0.3s;
}

.login #nav a:hover,
.login #nav a:focus,
.login #backtoblog a:hover,
.login #backtoblog a:focus,
.login .privacy-policy-link:hover {
	color: var(--tl-accent);
}

.login #nav a:focus-visible,
.login #backtoblog a:focus-visible {
	box-shadow: none;
	outline: 1px solid var(--tl-accent);
	outline-offset: 3px;
}

/* Le site étant privé, « Retour vers … » renverrait vers l'accueil, qui
   redirige aussitôt vers cet écran : le lien est retiré pour éviter la boucle.
   LoginServiceProvider le supprime déjà côté PHP ; cette règle couvre les
   écrans où le core le réémet (mot de passe perdu, inscription…). */
.login #backtoblog {
	display: none;
}

/* Sélecteur de langue (multisite/Polylang) */
.login .language-switcher {
	margin-top: 20px;
	text-align: center;
}

.login .language-switcher select {
	border: 1px solid var(--tl-line);
	border-radius: 8px;
	background-color: rgba(255, 255, 255, 0.03);
	color: var(--tl-muted);
	font-family: inherit;
	font-size: 12px;
}

.login .language-switcher .button {
	border: 1px solid var(--tl-line);
	border-radius: 8px;
	background: transparent;
	box-shadow: none;
	color: var(--tl-muted);
	font-size: 12px;
	text-shadow: none;
}

.login .language-switcher .dashicons {
	color: var(--tl-muted);
}

/* ------------------------------------------------------------------ *
 * Confort de lecture
 * ------------------------------------------------------------------ */

/* Le remplissage automatique de Chrome repeint le champ en blanc : la teinte
   est réimposée par une ombre interne, seul levier accepté par le navigateur. */
.login input:-webkit-autofill,
.login input:-webkit-autofill:hover,
.login input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 60px #0d1018 inset;
	-webkit-text-fill-color: var(--tl-text);
	caret-color: var(--tl-text);
}

@media (prefers-reduced-motion: reduce) {
	.login * {
		transition: none !important;
	}
}