/* -------------------------------------------------------------------------- */
/*   Pages Infolettre (template-infolettre-FR/EN.php) : formulaire ActiveCampaign */
/*   Reprend le design de l'ancien formulaire (Acoustic)                       */
/*   Préfixe #infolettre : passe devant le CSS injecté par ActiveCampaign        */
/* -------------------------------------------------------------------------- */

.home_link {
	display: block;
	position: relative;
	width: 250px;
	margin: 60px auto 0px;
}

#infolettre {
	box-sizing: border-box;
	max-width: 640px;
	margin: 0 auto;
	padding: 32px 48px;
	font-family: "Work sans", sans-serif;
	font-size: 16px;
	line-height: 26px;
	color: #000;
}

#infolettre *,
#infolettre *::before,
#infolettre *::after {
	box-sizing: border-box;
}

/* Conteneur du formulaire */
#infolettre form._form {
	max-width: 100% !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	font-family: "Work sans", sans-serif !important;
	color: #000 !important;
}

/* Logo et mention ActiveCampaign : le logo est déjà en haut de la page */
#infolettre form._form ._form-image,
#infolettre form._form ._form_element:has(> ._form-image),
#infolettre form._form ._form-branding {
	display: none !important;
}

#infolettre form._form ._form_element {
	margin: 0 0 30px !important;
}

/* Libellés (Prénom, Nom, Courriel, Langue, Je consens…) */
#infolettre form._form ._form-label,
#infolettre form._form legend._form-label {
	display: block !important;
	margin: 0 0 8px !important;
	padding: 0 !important;
	font-family: "Work sans", sans-serif !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 26px !important;
	letter-spacing: 0.32px;
	color: #17273e !important;
}

#infolettre form._form .field-required {
	margin-left: 4px;
	font-size: 16px !important;
	color: #17273e !important;
}

/* Champs texte */
#infolettre form._form input[type="text"],
#infolettre form._form input[type="email"],
#infolettre form._form input[type="tel"] {
	display: block !important;
	width: 100% !important;
	height: 40px !important;
	padding: 7px 20px 5px !important;
	border: 1px solid #dee4ef !important;
	border-radius: 20px !important;
	background: #fff !important;
	font-family: "Work sans", sans-serif !important;
	font-size: 13px !important;
	line-height: 26px !important;
	letter-spacing: 0.07px;
	color: #17273e !important;
	box-shadow: none !important;
	outline: none;
}

#infolettre form._form input[type="text"]:focus,
#infolettre form._form input[type="email"]:focus {
	border-color: #17273e !important;
}

#infolettre form._form input::placeholder {
	color: #b8b9c5 !important;
	font-size: 13px;
}

/* Lignes de choix (Langue et consentements) */
#infolettre form._form ._row._checkbox-radio {
	display: flex !important;
	align-items: center;
	margin: 0 0 12px 2px !important;
}

#infolettre form._form ._row._checkbox-radio label,
#infolettre form._form ._row._checkbox-radio span {
	display: inline !important;
	margin: 0 !important;
	font-family: "Work sans", sans-serif !important;
	font-size: 14px !important;
	line-height: 16px !important;
	letter-spacing: 0.16px;
	color: #13173d !important;
	cursor: pointer;
}

/* Langue : case carrée avec crochet, comme l'ancien formulaire */
#infolettre form._form input[type="radio"] {
	-webkit-appearance: none !important;
	appearance: none !important;
	flex: none;
	display: inline-block !important;
	width: 16px !important;
	height: 16px !important;
	margin: 0 14px 0 3px !important;
	border: 2px solid #17273e !important;
	border-radius: 2px !important;
	background: #fff no-repeat center / 12px 12px;
	cursor: pointer;
	vertical-align: middle !important;
}

#infolettre form._form input[type="radio"]:checked {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.2l3 3 6-6.4' fill='none' stroke='%2317273e' stroke-width='2'/%3E%3C/svg%3E");
}

/* Consentements : interrupteurs, comme l'ancien formulaire */
#infolettre form._form input[type="checkbox"] {
	-webkit-appearance: none !important;
	appearance: none !important;
	flex: none;
	display: inline-block !important;
	position: relative;
	width: 48px !important;
	height: 24px !important;
	margin: 0 8px 0 0 !important;
	border: 0 !important;
	border-radius: 12px !important;
	background: #c9ceda url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='9' fill='%23fff'/%3E%3C/svg%3E") no-repeat 3px center / 18px 18px;
	cursor: pointer;
	transition: background-color 0.2s, background-position 0.2s;
	vertical-align: middle !important;
}

#infolettre form._form input[type="checkbox"]:checked {
	background-color: #17273e;
	background-position: 27px center;
}

#infolettre form._form input[type="radio"]:focus-visible,
#infolettre form._form input[type="checkbox"]:focus-visible {
	outline: 2px solid #17273e;
	outline-offset: 2px;
}

/* Texte « Je peux me désinscrire… » */
#infolettre form._form ._html-code {
	font-family: "Work sans", sans-serif !important;
	font-size: 16px !important;
	line-height: 26px !important;
	color: #000 !important;
}

/* reCAPTCHA */
#infolettre form._form .g-recaptcha {
	margin-top: 10px;
}

/* Bouton M'inscrire */
#infolettre form._form ._button-wrapper {
	margin-top: 40px !important;
	text-align: center;
}

#infolettre form._form ._submit {
	display: inline-block !important;
	min-width: 98px;
	margin: 0 !important;
	padding: 14px 15px !important;
	border: 0 !important;
	border-radius: 40px !important;
	background: #17273e !important;
	font-family: "Work sans", sans-serif !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 26px !important;
	color: #fff !important;
	text-transform: none !important;
	cursor: pointer;
}

/* Message de confirmation après l'envoi */
#infolettre form._form ._form-thank-you {
	font-family: "Work sans", sans-serif !important;
	font-size: 18px !important;
	line-height: 28px !important;
	color: #17273e !important;
}

@media screen and (max-width: 667px) {
	body {
		margin: 0;
	}

	.home_link {
		width: 200px;
		margin-top: 40px;
	}

	#infolettre {
		padding: 24px 20px 40px;
	}

	#infolettre form._form ._submit {
		width: 100% !important;
	}
}

/* Très petits écrans : le reCAPTCHA (304 px de large) est réduit pour ne pas déborder */
@media screen and (max-width: 359px) {
	#infolettre form._form .g-recaptcha {
		transform: scale(0.9);
		transform-origin: 0 0;
	}
}