/*
 * Formulaire de demande de devis (EDL Core).
 *
 * Mise en page et états seulement, valables avec n'importe quel thème :
 * couleurs, polices et boutons viennent du thème. Le thème peut définir
 * --edl-couleur-erreur pour adapter la couleur des erreurs à son fond.
 */

.edl-demande {
	container-type: inline-size;
	scroll-margin-top: 1.5rem;
}

.edl-formulaire {
	display: grid;
	gap: 1.5rem;
	margin: 0;
}

/* Champ : libellé, aide, erreur, puis le champ, empilés. */
.edl-champ,
.edl-groupe {
	display: grid;
	align-content: start;
	gap: 0.5rem;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.edl-groupe > legend {
	margin-bottom: 0.5rem;
	padding: 0;
}

.edl-champ > label,
.edl-groupe > legend {
	font-weight: 600;
}

.edl-champ__requis {
	font-weight: 400;
}

.edl-champ__aide,
.edl-champ__erreur,
.edl-formulaire__note {
	margin: 0;
	font-size: 0.875em;
}

.edl-champ__erreur {
	color: var(--edl-couleur-erreur, #b32d2e);
	font-weight: 600;
}

.edl-champ input,
.edl-champ select,
.edl-champ textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 3rem;
	margin: 0;
	padding: 0.75rem 0.875rem;
	font: inherit;
}

.edl-champ textarea {
	min-height: 9rem;
	resize: vertical;
}

.edl-champ [aria-invalid="true"] {
	border-color: var(--edl-couleur-erreur, #b32d2e);
	box-shadow: 0 0 0 1px var(--edl-couleur-erreur, #b32d2e);
}

/* Téléphone / e-mail et code postal / commune : côte à côte s'il y a la place,
   champs alignés sur la même ligne même si un seul affiche une erreur. */
.edl-groupe__champs {
	display: grid;
	align-items: end;
	gap: 1rem;
}

@container (min-width: 34rem) {
	.edl-groupe__champs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.edl-formulaire__envoyer {
	cursor: pointer;
}

@container (max-width: 33.99rem) {
	.edl-formulaire__envoyer {
		width: 100%;
	}
}

/* Récapitulatif des erreurs, en tête du formulaire. */
.edl-formulaire__erreurs {
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	border: 2px solid var(--edl-couleur-erreur, #b32d2e);
	border-radius: 8px;
}

.edl-formulaire__erreurs-titre {
	margin: 0 0 0.5rem;
	font-weight: 700;
}

.edl-formulaire__erreurs ul {
	margin: 0;
	padding-left: 1.25rem;
}

.edl-formulaire__erreurs a {
	color: inherit;
}

/* Confirmation d'envoi. */
.edl-demande--envoyee {
	padding: 1.25rem 1.5rem;
	border: 2px solid currentColor;
	border-radius: 8px;
}

.edl-demande--envoyee > p {
	margin: 0.5rem 0 0;
}

.edl-demande__titre {
	font-weight: 700;
}

.edl-demande--envoyee > .edl-demande__titre {
	margin-top: 0;
}

/* Champ piège : hors de l'écran, ignoré au clavier et par les lecteurs d'écran. */
.edl-champ-piege {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}