/* Formulaire de demande : une colonne, libellés visibles, zones de saisie de 56 px, texte de 19 px. */
.hatem-formulaire {
	--hd-encre: var(--wp--preset--color--encre, #15171A);
	--hd-encre-2: var(--wp--preset--color--encre-2, #4B4F55);
	--hd-trait: var(--wp--preset--color--trait, #E4E0D6);
	--hd-surface: var(--wp--preset--color--surface, #FFFFFF);
	--hd-jaune: var(--wp--preset--color--jaune, #FFD43B);
	--hd-focus: var(--wp--preset--color--focus, #1F5FD0);
	--hd-erreur: #A1260D;
	display: grid; gap: 26px; max-width: 40rem;
	font-size: 1.1875rem; line-height: 1.5; color: var(--hd-encre);
}
.hatem-formulaire .champ { display: grid; gap: 6px; }
.hatem-formulaire label { font-weight: 600; font-size: 1.1875rem; }
.hatem-formulaire .facultatif { font-weight: 400; color: var(--hd-encre-2); }
.hatem-formulaire .champ-aide { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--hd-encre-2); }
.hatem-formulaire input[type="text"],
.hatem-formulaire input[type="email"],
.hatem-formulaire input[type="tel"],
.hatem-formulaire select,
.hatem-formulaire textarea {
	width: 100%; min-height: 56px; padding: 12px 16px;
	font: inherit; font-size: 1.1875rem; color: var(--hd-encre);
	background: var(--hd-surface); border: 1.5px solid #8A8F96; border-radius: 12px;
	-webkit-appearance: none; appearance: none;
}
.hatem-formulaire select {
	padding-right: 48px; cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315171A' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 16px center; background-size: 20px;
}
.hatem-formulaire textarea { min-height: 9rem; resize: vertical; line-height: 1.5; }
.hatem-formulaire input:focus-visible, .hatem-formulaire select:focus-visible, .hatem-formulaire textarea:focus-visible {
	outline: 3px solid var(--hd-focus); outline-offset: 2px; border-color: var(--hd-encre);
}
.hatem-formulaire [aria-invalid="true"] { border-color: var(--hd-erreur); border-width: 2px; }
.hatem-formulaire .champ-erreur-texte {
	margin: 0; font-size: 1rem; font-weight: 500; color: var(--hd-erreur);
	display: flex; gap: 8px; align-items: baseline;
}
.hatem-formulaire .champ-erreur-texte::before { content: "!"; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--hd-erreur); color: #FFFFFF; font-size: 0.8125rem; font-weight: 700; transform: translateY(3px); }
.hatem-formulaire .champ-compteur { margin: 0; font-size: 1rem; color: var(--hd-encre-2); }
.hatem-formulaire .champ-compteur.trop { color: var(--hd-erreur); font-weight: 500; }
.hatem-formulaire .hatem-message { border-radius: 16px; padding: 16px 20px; font-size: 1.0625rem; line-height: 1.55; }
.hatem-formulaire .hatem-message p { margin: 0; }
.hatem-formulaire .hatem-message-erreur { background: #FBEAE5; border: 1.5px solid var(--hd-erreur); color: var(--hd-encre); }
.hatem-formulaire .hatem-message-ok { background: #EAF4EA; border: 1.5px solid #2E6B32; }
.hatem-formulaire .champ-piege { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.hatem-formulaire .hatem-envoi { display: grid; gap: 12px; justify-items: start; }
.hatem-formulaire .hatem-envoyer {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 56px; padding: 10px 28px; border: 0; border-radius: 999px;
	background: var(--hd-jaune); color: var(--hd-encre);
	font: inherit; font-size: 1.0625rem; font-weight: 500; cursor: pointer;
	transition: background-color 200ms ease;
}
.hatem-formulaire .hatem-envoyer:hover { background: #F2C400; }
.hatem-formulaire .hatem-envoyer:focus-visible { outline: 3px solid var(--hd-focus); outline-offset: 3px; }
.hatem-formulaire .hatem-envoyer[disabled] { opacity: 0.7; cursor: progress; }
.hatem-formulaire .hatem-sous-bouton { margin: 0; font-size: 1rem; color: var(--hd-encre-2); }
@media (max-width: 47.4375em) {
	.hatem-formulaire .hatem-envoi, .hatem-formulaire .hatem-envoyer { width: 100%; }
}