/*
 * Écran plein page du mot de passe (page-templates/activite.php,
 * inc/password-form.php). Ni en-tête ni pied de page tant que le mot de
 * passe n'est pas saisi : un document à part, pas une fenêtre séparée —
 * voir le commentaire en tête de page-templates/activite.php pour les
 * trois raisons qui écartent cette dernière.
 */

.aspacam-password-page {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.aspacam-password-page__inner {
	flex: 1 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--aspacam-theme-space-lg) var(--aspacam-theme-container-padding);
}

.aspacam-password-page__box {
	/*
	 * "width: 100%" en plus de "max-width" : sans lui, la boîte (élément flexible
	 * du conteneur ci-dessus) se contracte à la largeur de son contenu au lieu
	 * d'utiliser toute la place offerte jusqu'à 400px — ce qui coupait le texte
	 * du sujet 7 une ligne trop tôt, même sur un écran large.
	 */
	width: 100%;
	max-width: 400px;
	text-align: center;
}

.aspacam-password-page__logo {
	display: block;
	width: 64px;
	height: 64px;
	margin: 0 auto var(--aspacam-theme-space-md);
}

.aspacam-password-page__logo img {
	display: block;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
}

.aspacam-password-page__logo--placeholder {
	border-radius: 50%;
	background-color: var(--aspacam-theme-color-border);
}

.aspacam-password-page__title {
	margin-bottom: var(--aspacam-theme-space-md);
}

.aspacam-password-form {
	text-align: left;
}

.aspacam-password-form__error {
	color: var(--aspacam-theme-color-red);
	font-weight: bold;
}

/*
 * Centrés, contrairement au reste du formulaire (étiquette, champ) : ce sont
 * des phrases d'explication, pas des éléments de saisie alignés à gauche.
 */
.aspacam-password-form__text {
	margin-bottom: var(--aspacam-theme-space-md);
	text-align: center;
	color: var(--aspacam-theme-color-text-muted);
}

/*
 * Un bloc qui ne se coupe jamais : il bascule entier sur sa ligne plutôt
 * que de se couper au milieu (sujet 7, étape 2quater — posé alors pour
 * « Demandez-le au bureau. », sert depuis au lien « Adhérer sur
 * HelloAsso »).
 */
.aspacam-password-form__nowrap {
	white-space: nowrap;
}

/*
 * Le lien d'adhésion, sous le bouton, centré et en petit : une piste pour
 * qui n'a pas le mot de passe, pas l'action attendue de l'écran.
 */
.aspacam-password-form__join {
	margin: var(--aspacam-theme-space-md) 0 0;
	text-align: center;
	font-size: var(--aspacam-theme-font-size-small);
}

.aspacam-password-form__field label {
	display: block;
	margin-bottom: var(--aspacam-theme-space-xs);
}

/*
 * Moins haut et moins épais qu'avant (sujet 8, étape 2quater) : l'écran du
 * mot de passe paraissait lourd. Taille de police ramenée à la taille de
 * base du site (1rem) — encore assez grande pour éviter le zoom automatique
 * de Safari sur mobile, qui se déclenche sous 16px.
 */
.aspacam-password-form__field input {
	width: 100%;
	padding: var(--aspacam-theme-space-xs) var(--aspacam-theme-space-md);
	border: 1px solid var(--aspacam-theme-color-border);
	border-radius: 8px;
	font-size: 1rem;
	font-family: inherit;
}

.aspacam-password-form__toggle {
	margin-top: var(--aspacam-theme-space-xs);
	font-size: var(--aspacam-theme-font-size-small);
}

/*
 * Largeur ramenée à celle de son texte, centré sous le champ, plutôt qu'un
 * bouton pleine largeur aussi haut que le champ : c'est lui qui donnait à
 * tout l'écran son aspect lourd (sujet 8, étape 2quater). Reste un vrai
 * bouton, cliquable et bien visible — certains claviers de téléphone n'ont
 * pas de touche d'envoi, l'entrée manuelle du mot de passe doit toujours
 * pouvoir se valider autrement qu'avec la touche Entrée.
 */
.aspacam-password-form .aspacam-button {
	display: block;
	width: fit-content;
	margin: var(--aspacam-theme-space-md) auto 0;
	font-size: var(--aspacam-theme-font-size-base);
}