/**
 * Formulaires.
 *
 * Styles volontairement neutres : ils s'appuient sur les tokens du site, donc
 * un formulaire prend l'allure du site sans code supplémentaire.
 */

.narra-form {
	max-width: 620px;
	margin: 0;
}

.narra-form-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 18px;
}

.narra-form label {
	font-size: 14px;
	font-weight: 600;
	color: var( --ink );
}

.narra-form input,
.narra-form select,
.narra-form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var( --line );
	border-radius: calc( var( --radius ) / 2 );
	background: var( --paper );
	color: var( --ink );
	font: inherit;
	font-size: 16px; /* évite le zoom automatique sur iOS */
}

.narra-form textarea {
	resize: vertical;
}

.narra-form input:focus,
.narra-form select:focus,
.narra-form textarea:focus {
	outline: 2px solid var( --purple );
	outline-offset: 1px;
	border-color: transparent;
}

.narra-form-consent {
	margin: 0 0 18px;
	font-size: 13px;
	color: var( --muted );
}

.narra-form-error {
	margin: 0 0 18px;
	padding: 12px 14px;
	border-radius: calc( var( --radius ) / 2 );
	background: color-mix( in srgb, var( --pink ) 14%, transparent );
	color: var( --ink );
	font-size: 14px;
}

.narra-form-done {
	padding: 20px 22px;
	border: 1px solid var( --line );
	border-radius: var( --radius );
	background: var( --soft );
}

.narra-form-done p {
	margin: 0;
	color: var( --ink );
}

/* Champ leurre : retiré de l'affichage sans display:none, que certains robots
   détectent et contournent. */
.narra-form-trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}