/*
 * Wide / in-content newsletter styles — "bandeau menthe minimal".
 * Shortcode : [biais_newsletter_large]
 * Note : Poppins est supposée déjà chargée par le thème.
 *
 * Tout est scopé sous .bnl-wrap et verrouillé en !important pour neutraliser
 * les styles globaux du thème Astra (tailles de <p>, styles de formulaire).
 */

.bnl-wrap,
.bnl-wrap *,
.bnl-wrap *::before,
.bnl-wrap *::after {
	box-sizing: border-box;
	font-family: 'Poppins', system-ui, -apple-system, sans-serif;
}

.bnl-wrap {
	background: #e1f5ee;
	border: 1px solid #b9e6d6;
	border-radius: 14px;
	padding: 1.6rem 1.75rem;
	text-align: center;
	margin: 1.75rem 0;
}

.bnl-wrap .bnl-eyebrow {
	font-size: 10px !important;
	line-height: 1.4 !important;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #178e79;
	font-weight: 600;
	margin: 0 0 0.5rem !important;
}

.bnl-wrap .bnl-title {
	font-size: 19px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	letter-spacing: -0.01em;
	color: #0a3129;
	max-width: 460px;
	margin: 0 auto 1rem !important;
}

.bnl-wrap .bnl-title em {
	font-style: normal;
	font-weight: 600;
	color: #178e79;
}

/* Formulaire : pilules, centré, empilé en mobile */
.bnl-wrap .bnl-form {
	display: flex;
	gap: 8px;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	max-width: 460px;
	margin: 0 auto;
}

/* Sélecteur ultra-renforcé (html body + .bnl-form + attribut) + !important
   pour battre les styles de formulaire d'Astra qui gonflent la hauteur. */
html body .bnl-wrap .bnl-form input.bnl-input,
html body .bnl-wrap .bnl-form input.bnl-input[type="email"] {
	flex: 1 1 200px;
	min-width: 0;
	width: auto !important;
	height: 46px !important;
	min-height: 46px !important;
	max-height: 46px !important;
	padding: 0 18px !important;
	line-height: 46px !important;
	border-radius: 999px !important;
	border: 1px solid #9ad9c1 !important;
	background: #ffffff !important;
	color: #0a3129 !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	outline: none;
	box-shadow: none;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.bnl-wrap input.bnl-input::placeholder { color: #7ba394; }

.bnl-wrap input.bnl-input:focus {
	border-color: #178e79 !important;
	box-shadow: 0 0 0 3px rgba(15, 107, 91, 0.12) !important;
}

.bnl-wrap input.bnl-input.is-error {
	border-color: #d98a8a !important;
	box-shadow: 0 0 0 3px rgba(217, 138, 138, 0.15) !important;
}

.bnl-wrap button.bnl-btn {
	flex: 0 0 auto;
	width: auto !important;
	height: 46px !important;
	min-height: 46px !important;
	max-height: 46px !important;
	padding: 0 26px !important;
	border-radius: 999px !important;
	background: #178e79 !important;
	color: #ffffff !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	border: none !important;
	cursor: pointer;
	transition: background 0.2s, transform 0.1s, opacity 0.15s;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.bnl-wrap button.bnl-btn:hover:not(:disabled) { background: #0f6e56 !important; }
.bnl-wrap button.bnl-btn:active:not(:disabled) { transform: scale(0.98); }
.bnl-wrap button.bnl-btn:disabled { cursor: default; opacity: 0.7; }

.bnl-wrap .bnl-msg {
	font-size: 11px !important;
	line-height: 1.45 !important;
	color: #5c8377;
	margin: 0.75rem 0 0 !important;
	min-height: 16px;
	font-weight: 400;
	transition: color 0.2s;
}

.bnl-wrap .bnl-msg.is-error   { color: #b4534f; }
.bnl-wrap .bnl-msg.is-success { color: #178e79; }

.bnl-wrap .bnl-legal {
	font-size: 10px !important;
	line-height: 1.5 !important;
	color: #6d8a80;
	margin: 0.6rem 0 0 !important;
	font-weight: 400;
}

.bnl-wrap .bnl-legal a {
	color: #178e79;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.bnl-wrap .bnl-legal a:hover { color: #0a3129; }

@media (min-width: 600px) {
	.bnl-wrap .bnl-form { flex-wrap: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
	.bnl-wrap .bnl-btn,
	.bnl-wrap .bnl-input,
	.bnl-wrap .bnl-msg { transition: none; }
}
