/**
 * Bloc d'inscription à la lettre d'information, dans le pied de page.
 *
 * Le bandeau tenait sur une colonne centrée : surtitre, titre, puis une seule
 * ligne soulignée où saisir son adresse. Il en tient deux désormais — le texte
 * à gauche, le formulaire à droite — et le formulaire demande trois choses,
 * prénom et nom sur une ligne, adresse en dessous, bouton en pleine largeur.
 *
 * Trois feuilles se partagent l'habillage, et le partage suit leur poids :
 *
 *   la définition du formulaire   la disposition des trois champs, où « cols »
 *                                 dit sur combien de douzièmes chacun s'étend.
 *                                 Voir tools/newsletter-fields.php.
 *   les réglages du formulaire    plus rien de visuel : les couleurs qu'ils
 *                                 engendrent sont recouvertes par celles d'ici.
 *   cette feuille                 les deux colonnes du bandeau, la géométrie
 *                                 des champs, les polices du site, et les
 *                                 couleurs.
 *
 * Les couleurs ont d'abord été réglées dans Forminator. Mais ces réglages
 * vivent en base, dans la définition du formulaire : un déploiement du thème ne
 * les emporte pas, et la production gardait le bouton bleu et les champs gris
 * par défaut. Écrites ici, elles voyagent avec le thème et le rendu est le même
 * partout, quels que soient les réglages du formulaire sur le site.
 *
 * D'où les sélecteurs longs : le CSS figé d'Elementor pèse trois classes, le
 * socle de Forminator quatre. Il en faut une de plus à chaque fois pour
 * trancher, et cela évite un !important à chaque ligne.
 *
 * La feuille que Forminator engendre à partir de ses réglages, elle, porte
 * l'identifiant du formulaire (#forminator-module-293) : couleurs, mais aussi
 * police, corps et graisse des champs et du bouton. Une règle sans identifiant
 * perd contre elle quel que soit l'ordre des feuilles — en local cela ne se
 * voyait pas, les réglages disant la même chose que cette feuille ; en
 * production ils disent bleu, 14 px et police héritée. Tout ce qu'elle touche
 * passe donc par l'identifiant du bandeau, #newsletter, posé par
 * template-parts/footer/newsletter.php dans les deux langues.
 *
 * Restait le CSS du Customizer, en base lui aussi : celui de la production
 * garde l'ancien habillage du champ unique, en « footer .forminator-… » et à
 * coups de !important. inc/assets.php l'écarte à la sortie, voir
 * vodun_strip_legacy_newsletter_css().
 */

/* -------------------------------------------------------------------------
   Les deux colonnes
   ---------------------------------------------------------------------- */

.newsletter-bloc.e-con > .e-con-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: 60px;
	row-gap: 0;
	align-content: center;
}

/* Surtitre et titre : première colonne, l'un au-dessus de l'autre. Ils étaient
   centrés, ils s'alignent maintenant sur le bord gauche de leur colonne. */

.newsletter-bloc.e-con .elementor-element.elementor-element-18d50f2 {
	grid-column: 1;
	grid-row: 1;
	text-align: left;
}

.newsletter-bloc.e-con .elementor-element.elementor-element-dcbdc40 {
	grid-column: 1;
	grid-row: 2;
	text-align: left;
}

/* Le formulaire occupe la seconde colonne sur toute la hauteur des deux
   lignes, et se centre face au texte. */

.newsletter-bloc.e-con .elementor-element.elementor-element-52b0bad {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	width: 100%;
}

/* -------------------------------------------------------------------------
   Le formulaire
   ---------------------------------------------------------------------- */

.newsletter-bloc .forminator-custom-form {
	max-width: none;
	margin: 0;
}

/* Les intitulés restent dans le balisage pour les lecteurs d'écran et pour les
   en-têtes de l'export, mais la maquette ne montre que les indications en
   filigrane : on les sort du flux sans les retirer. */

.newsletter-bloc .forminator-ui.forminator-custom-form .forminator-field label.forminator-label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Champs : le socle de Forminator les pose en 9 px de remplissage et 2 px
   d'arrondi, ce qui ne tient pas la comparaison avec le reste du pied de page.
   Les couleurs sont plus bas, à part. */

#newsletter .forminator-ui.forminator-custom-form[data-design="default"] .forminator-input {
	height: auto;
	padding: 18px 22px;
	border-width: 1px;
	border-radius: 8px;
	font-family: "Inter", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 22px;
}

/* Le bouton tenait dans une flèche de vingt pixels posée à droite de la ligne
   de saisie. Il occupe maintenant toute la largeur de la colonne, sous les
   champs, comme les trois lignes qui le précèdent. */

#newsletter .forminator-ui.forminator-custom-form[data-design="default"] .forminator-button-submit {
	display: flex;
	width: 100%;
	max-width: none;
	min-height: 60px;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 18px 22px;
	border: 0;
	border-radius: 8px;
	font-family: "Headline Gothic ATF", sans-serif;
	font-size: 22px;
	font-weight: 400;
	line-height: 22px;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: none;
}

/* -------------------------------------------------------------------------
   Couleurs
   ---------------------------------------------------------------------- */

/* Champs crème sur le rouge du bandeau ; ils blanchissent et se bordent de
   jaune au survol comme à la saisie. */

#newsletter .forminator-ui.forminator-custom-form[data-design="default"] .forminator-input {
	border-color: #FFFCF2;
	background-color: #FFFCF2;
	color: #1D1D1D;
}

#newsletter .forminator-ui.forminator-custom-form[data-design="default"] .forminator-is_hover .forminator-input,
#newsletter .forminator-ui.forminator-custom-form[data-design="default"] .forminator-is_active .forminator-input,
#newsletter .forminator-ui.forminator-custom-form[data-design="default"] .forminator-input:hover,
#newsletter .forminator-ui.forminator-custom-form[data-design="default"] .forminator-input:focus {
	border-color: #F2D22F;
	background-color: #FFFFFF;
	color: #1D1D1D;
}

#newsletter .forminator-ui.forminator-custom-form[data-design="default"] .forminator-input:focus {
	outline: 2px solid #F2D22F;
	outline-offset: 1px;
}

#newsletter .forminator-ui.forminator-custom-form[data-design="default"] .forminator-has_error .forminator-input {
	border-color: #E51919;
}

#newsletter .forminator-ui.forminator-custom-form[data-design="default"] .forminator-error-message {
	color: #333333;
}

#newsletter .forminator-ui.forminator-custom-form[data-design="default"] .forminator-input::placeholder {
	color: #6B6862;
	opacity: 1;
}

/* Bouton jaune, qui passe au crème au survol. */

#newsletter .forminator-ui.forminator-custom-form[data-design="default"] .forminator-button-submit {
	background-color: #F2D22F;
	color: #1D1D1D;
}

#newsletter .forminator-ui.forminator-custom-form[data-design="default"] .forminator-button-submit:hover,
#newsletter .forminator-ui.forminator-custom-form[data-design="default"] .forminator-button-submit:focus,
#newsletter .forminator-ui.forminator-custom-form[data-design="default"] .forminator-button-submit:active {
	background-color: #FFFCF2;
	color: #1D1D1D;
}

/* -------------------------------------------------------------------------
   Messages
   ---------------------------------------------------------------------- */

/* Réponse de Forminator juste après l'envoi : elle était détachée du flux et
   centrée sur la page entière, ce qui n'a plus de sens dans une colonne. */

.newsletter-bloc .forminator-response-message {
	position: static;
	transform: none;
	margin: 20px 0 0;
	padding: 15px 20px;
	border-radius: 8px;
	font-family: "Inter", sans-serif;
	font-size: 15px;
	line-height: 22px;
}

.newsletter-bloc .forminator-error-message {
	position: static;
	left: auto;
	transform: none;
	width: auto;
	margin: 8px 0 0;
	background: none;
	color: #FFFCF2;
	font-family: "Inter", sans-serif;
	font-size: 14px;
	line-height: 20px;
}

/* Message de retour du lien de confirmation, qui prend la place du formulaire.
   Voir inc/newsletter.php. */

.newsletter-message {
	padding: 30px 32px;
	border-radius: 8px;
	background: #FFFCF2;
	color: #1D1D1D;
	font-family: "Inter", sans-serif;
	font-size: 16px;
	line-height: 24px;
}

.newsletter-message p {
	margin: 0;
}

.newsletter-message p + p {
	margin-top: 10px;
}

.newsletter-message-titre {
	font-family: "Headline Gothic ATF", sans-serif;
	font-size: 26px;
	line-height: 28px;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   Tablette et mobile
   ---------------------------------------------------------------------- */

/* Les deux colonnes se dépilent au point de rupture tablette du site. Le
   formulaire, lui, replie ses champs tout seul sous 783 px : prénom et nom
   passent alors l'un sous l'autre. */

@media (max-width: 1024px) {

	.newsletter-bloc.e-con > .e-con-inner {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 25px;
	}

	.newsletter-bloc.e-con .elementor-element.elementor-element-18d50f2,
	.newsletter-bloc.e-con .elementor-element.elementor-element-dcbdc40,
	.newsletter-bloc.e-con .elementor-element.elementor-element-52b0bad {
		grid-column: 1;
		grid-row: auto;
	}
}

@media (max-width: 767px) {

	#newsletter .forminator-ui.forminator-custom-form[data-design="default"] .forminator-input,
	#newsletter .forminator-ui.forminator-custom-form[data-design="default"] .forminator-button-submit {
		padding: 15px 18px;
	}

	#newsletter .forminator-ui.forminator-custom-form[data-design="default"] .forminator-button-submit {
		min-height: 54px;
	}
}