/**
 * Message d'erreur rattaché à son champ (cf. assets/js/form-field-errors.js).
 *
 * Rouge sobre, jamais le rose de marque : une erreur ne doit pas se confondre
 * avec un élément d'interface engageant.
 */

.li-field-error {
	margin: .45rem 0 0;
	padding-left: .75rem;
	border-left: 3px solid #D1344B;
	color: #B02138;
	font-size: .9rem;
	line-height: 1.45;
	font-weight: 500;
}

.hp-form__field--invalid input:not([type="hidden"]),
.hp-form__field--invalid select,
.hp-form__field--invalid textarea {
	border-color: #D1344B;
	box-shadow: 0 0 0 3px rgba(209, 52, 75, .12);
}

.hp-form__field--invalid input:focus,
.hp-form__field--invalid select:focus,
.hp-form__field--invalid textarea:focus {
	border-color: #B02138;
	box-shadow: 0 0 0 3px rgba(209, 52, 75, .2);
}