/*
Pas de carte ni de fond : un filet marqué ouvre la section, et les champs sont
simplement soulignés. Ça se lit comme un formulaire à remplir à la main plutôt
que comme des champs d'application.
*/
.lingerie-measurement-form {
	margin: var(--space-5) 0;
	padding-top: var(--space-4);
	border-top: var(--border-width-rule) solid var(--color-rule);
}

.lingerie-measurement-form__heading {
	display: block;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--letter-spacing-label);
	text-transform: uppercase;
	color: var(--color-text);
	margin-bottom: var(--space-2);
}

.lingerie-measurement-form__intro {
	font-size: var(--font-size-sm);
	line-height: var(--line-height-base);
	color: var(--color-text-muted);
	margin: 0 0 var(--space-4);
}

/*
Taille habituelle : obligatoire, et posée avant les mesures parce qu'elle les préremplit.
Encadrée plutôt que soulignée, pour se distinguer des quatre champs qu'elle alimente.
*/
.lingerie-reference-size {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	margin: 0 0 var(--space-4);
	max-width: 16rem;
}

.lingerie-reference-size label {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--letter-spacing-label-sm);
	text-transform: uppercase;
	color: var(--color-text);
}

.lingerie-reference-size .required {
	color: var(--color-accent-text);
	border: 0;
	text-decoration: none;
}

.lingerie-reference-size select {
	width: 100%;
	background-color: var(--color-surface);
	border: 1px solid var(--color-rule);
	border-radius: var(--radius-sm);
	padding: var(--space-2) var(--space-3);
	font-family: var(--font-body);
	font-size: var(--font-size-base);
	color: var(--color-text);
}

.lingerie-reference-size select:focus {
	outline: 2px solid var(--color-accent);
	outline-offset: 1px;
}

.lingerie-measurement-form__hint {
	font-size: var(--font-size-xs);
	line-height: var(--line-height-base);
	color: var(--color-text-muted);
	margin: var(--space-3) 0 0;
}

.lingerie-measurement-form__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
}

.lingerie-measurement-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	margin: 0;
}

.lingerie-measurement-field label {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--letter-spacing-label-sm);
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.lingerie-measurement-field input {
	width: 100%;
	background-color: transparent;
	border: 0;
	border-bottom: 1px solid var(--color-rule);
	border-radius: var(--radius-sm);
	padding: var(--space-2) var(--space-1);
	font-family: var(--font-body);
	font-size: var(--font-size-base);
	color: var(--color-text);
	transition: border-color var(--transition-base);
}

.lingerie-measurement-field input:focus {
	outline: none;
	border-bottom-width: var(--border-width-rule);
	border-bottom-color: var(--color-accent);
}

.lingerie-measurement-field input:invalid:not(:placeholder-shown) {
	border-bottom-color: var(--color-accent-text);
}

/*
Deux colonnes seulement à partir de 480px : sur petit écran, la saisie des mesures
doit rester confortable, c'est là que passe l'essentiel du trafic.
*/
@media (min-width: 480px) {
	.lingerie-measurement-form__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-3) var(--space-4);
	}
}