/*
 * login.css — écran de connexion.
 *
 * Deux champs, un bouton. La session dure un an : on ne revient pas ici.
 */

.login {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding-top: var(--space-7);
}

.login__title {
	margin: 0;
	font-size: var(--text-2xl);
}

.login__lead {
	margin: 0;
	color: var(--color-text-muted);
}

.login__error {
	margin: 0;
	padding: var(--space-3);
	border-radius: var(--radius-sm);
	background: var(--color-surface-sunken);
	color: var(--color-danger);
	font-size: var(--text-sm);
}

.login__form {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	margin-top: var(--space-2);
}

.login__field {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.login__label {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.login__input {
	min-height: var(--touch-target);
	padding-inline: var(--space-3);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
}

.login__input:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 1px;
}

.login__submit {
	background: var(--color-accent);
	color: var(--color-accent-contrast);
	border-radius: var(--radius-full);
	font-size: var(--text-base);
}