/* Formulaires d'inscription à la newsletter (extension Newsletter) aux couleurs du site : champ e-mail et bouton rose
   sur une ligne, étiquette gardée pour les lecteurs d'écran. Bloc du bas de l'accueil (section 6ba1f69) en carte menthe.
   Module newsletter ; textes ajoutés par assets/newsletter.js. Sélecteurs renforcés : le kit Elementor stylise tous les
   champs et boutons du site (.elementor-kit-… input:not([type=button])…). */

.tnp-subscription {
	max-width: 560px;
	margin: 0 auto;
	font-family: Roboto, sans-serif;
	container-type: inline-size; /* champ et bouton empilés si le formulaire est étroit (voir @container plus bas) */
}
/* Le formulaire du bas de l'accueil avait des marges latérales en % dans Elementor (30 à 40 % de chaque côté selon
   l'écran) : trop étroit, le champ e-mail disparaissait derrière le bouton. */
body .elementor-20 .elementor-element.elementor-element-c36bd4c > .elementor-widget-container {
	width: 100%;
	max-width: 560px;
	margin-right: auto;
	margin-left: auto;
}
.tnp-subscription .tnp-field-email {
	position: relative;
	margin: 0;
}
.tnp-subscription .tnp-field-email label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.tnp-subscription .jm-nl__ligne {
	display: flex;
	gap: 8px;
	padding: 6px;
	border: 1px solid #cfe2da;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 6px 20px rgba(1, 100, 88, .1);
}
.tnp-subscription .jm-nl__ligne:focus-within {
	border-color: #23a69a;
	box-shadow: 0 0 0 3px rgba(35, 166, 154, .2), 0 6px 20px rgba(1, 100, 88, .1);
}
.tnp-subscription .jm-nl__ligne .tnp-field {
	margin: 0;
}
.tnp-subscription .jm-nl__ligne .tnp-field-email {
	flex: 1;
	min-width: 0;
}
body .tnp-subscription .tnp-field-email input.tnp-email {
	width: 100%;
	height: 48px;
	padding: 0 16px 0 46px;
	border: 0;
	border-radius: 999px;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23016458' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E") no-repeat 16px 50% / 20px;
	color: #1c2b28;
	font-size: 16px;
	box-shadow: none;
	outline: none;
}
body .tnp-subscription .tnp-field-email input.tnp-email::placeholder {
	color: #7c8f89;
}
body .tnp-subscription .tnp-field-button input.tnp-submit {
	height: 48px;
	margin: 0 !important; /* le CSS de la page d'accueil impose un bouton gris (« !important ») */
	padding: 0 26px;
	border: 0;
	border-radius: 999px !important;
	background: #d22467 !important;
	color: #fff !important;
	font: 600 16px/48px Roboto, sans-serif;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}
body .tnp-subscription .tnp-field-button input.tnp-submit:hover,
body .tnp-subscription .tnp-field-button input.tnp-submit:focus-visible {
	background: #b0225c !important;
	transform: translateY(-1px);
}
.tnp-subscription .jm-nl__note {
	margin: 12px 0 0;
	color: #5f6f6b;
	font-size: 13px;
	text-align: center;
}

/* Bloc du bas de l'accueil : carte menthe arrondie. */
.elementor-element-6ba1f69 > .elementor-container {
	padding: 44px 32px 40px;
	border-radius: 28px;
	background: linear-gradient(135deg, #e6f1eb 0%, #f4f9f6 100%);
}
.elementor-element-6ba1f69 .elementor-element-0adbf6e {
	display: none; /* espace vide sous le formulaire */
}

/* Formulaire étroit (mobile, colonne étroite, texte agrandi) : champ et bouton l'un sous l'autre. */
@container (max-width: 400px) {
	.tnp-subscription .jm-nl__ligne {
		flex-direction: column;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
	}
	.tnp-subscription .jm-nl__ligne:focus-within {
		box-shadow: none;
	}
	body .tnp-subscription .tnp-field-email input.tnp-email {
		border: 1px solid #cfe2da;
		background-color: #fff;
	}
	body .tnp-subscription .tnp-field-button input.tnp-submit {
		width: 100% !important;
	}
}
@media (max-width: 600px) {
	.elementor-element-6ba1f69 > .elementor-container {
		padding: 32px 18px 28px;
		border-radius: 20px;
	}
}
