/*
 * Formulaire d'infolettre du pied de page (Rezom, lot 5).
 * Couleurs de css/base/_variables.scss : noir #1a1b13 (fond du pied de page), clair #f8f5f5,
 * rouge #e04c18 (contraste 3,5:1 sur le noir : réservé aux bordures et au focus, jamais au texte),
 * vert #95c6b6 (message de succès, contraste supérieur à 9:1).
 */

.rezom-infolettre {
	margin-top: 4vh;
	max-width: 560px;
	color: #f8f5f5;
}

.rezom-infolettre__titre {
	margin: 0 0 8px;
	color: #f8f5f5; /* le thème colore les h3 en gris foncé, illisible sur le noir */
	font-family: 'acumin_pro_condensedbold', sans-serif;
	font-size: 150%;
	text-transform: uppercase;
}

.rezom-infolettre__intro {
	margin: 0 0 16px;
}

.rezom-infolettre__ligne {
	display: flex;
	flex-wrap: wrap;
	gap: 0 16px;
}

.rezom-infolettre__ligne .rezom-infolettre__champ {
	flex: 1 1 200px;
}

.rezom-infolettre__champ {
	margin-bottom: 12px;
}

.rezom-infolettre__champ label {
	display: block;
	margin-bottom: 4px;
	font-family: 'acumin_pro_condensedbold', sans-serif;
	text-transform: uppercase;
}

.rezom-infolettre__champ input {
	box-sizing: border-box;
	width: 100%;
	min-height: 44px; /* cible tactile confortable */
	padding: 8px 12px;
	border: 2px solid #f8f5f5;
	border-radius: 0;
	background: #1a1b13;
	color: #f8f5f5;
	font-size: 100%;
}

.rezom-infolettre__champ input[aria-invalid="true"],
.rezom-infolettre__consentement input[aria-invalid="true"] {
	border-color: #e04c18;
	outline: 2px solid #e04c18;
}

.rezom-infolettre__consentement {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 4px 0 8px;
}

.rezom-infolettre__consentement input {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: #e04c18;
}

.rezom-infolettre__mention {
	margin: 0 0 16px;
	color: rgba(255, 255, 255, 0.7);
	font-size: 80%;
}

.rezom-infolettre a {
	color: inherit;
	text-decoration: underline;
}

.rezom-infolettre a:hover {
	text-decoration-color: #e04c18;
}

.rezom-infolettre__bouton {
	min-height: 44px;
	padding: 8px 24px;
	border: 2px solid #f8f5f5;
	border-radius: 0;
	background: #f8f5f5;
	color: #1a1b13;
	font-family: 'acumin_pro_condensedbold', sans-serif;
	font-size: 120%;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.rezom-infolettre__bouton:hover {
	background: #1a1b13;
	color: #f8f5f5;
	box-shadow: inset 0 -4px 0 #e04c18;
}

.rezom-infolettre__bouton[disabled] {
	opacity: 0.6;
	cursor: wait;
}

.rezom-infolettre input:focus-visible,
.rezom-infolettre__bouton:focus-visible,
.rezom-infolettre a:focus-visible {
	outline: 3px solid #e04c18;
	outline-offset: 2px;
}

.rezom-infolettre__retour {
	margin: 12px 0 0;
	min-height: 1.5em;
}

.rezom-infolettre__retour.is-succes {
	color: #95c6b6;
}

.rezom-infolettre__retour.is-erreur:not(:empty) {
	padding-left: 10px;
	border-left: 4px solid #e04c18;
}

/*
 * Sous 53em (point de rupture du pied de page dans rezom.scss), la colonne des liens ne fait que 55 %
 * de la largeur : on l'élargit pour que le formulaire ne soit pas tassé sur mobile et tablette.
 */
@media screen and (max-width: 52.99em) {
	#colophon .container-nav-footer .mentions {
		flex-basis: 100%;
		box-sizing: border-box;
		padding-right: 5%;
	}
}

/* Champ piège : hors de l'écran (pas display:none, que certains robots repèrent). */
.rezom-infolettre__piege {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}