/**
 * Bloc « mein/newsletter » — bandeau d'inscription à la newsletter.
 *
 * Styles en CLASSES uniquement (aucun style inline dans render.php).
 * Fidèle à la section NEWSLETTER de la maquette « Blog » : bandeau vert dégradé
 * pleine largeur, titre + intro centrés, formulaire pill. Réutilise les tokens de
 * theme.json : dégradé preset (cta-sauge, identique au dégradé de la maquette),
 * couleurs (crème, texte-sombre, titres) et polices (serif / sans).
 *
 * Enqueue automatique : déclaré via « style » dans block.json, WordPress ne
 * charge cette feuille que lorsque le bloc est présent sur la page.
 */

/* --- Bandeau : dégradé de fond (preset cta-sauge de theme.json) -------- */

.mein-newsletter {
	position: relative;
	overflow: hidden; /* clippe les orbes → aucun débordement horizontal de page */
	background: var(--wp--preset--gradient--cta-sauge);
}

/* --- Conteneur centré --------------------------------------------------- */

.mein-newsletter__inner {
	position: relative;
	z-index: 1;
	max-width: 720px;
	margin: 0 auto;
	padding: clamp(56px, 8vw, 104px) clamp(20px, 5vw, 64px);
	text-align: center;
}

/* --- Titre : Cormorant crème ------------------------------------------- */

.mein-newsletter__titre {
	margin: 0 0 18px;
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 500;
	font-size: clamp(28px, 4.2vw, 50px);
	line-height: 1.12;
	color: var(--wp--preset--color--creme);
	text-wrap: balance;
}

/* --- Intro : crème ------------------------------------------------------ */

/*
 * CORRECTIF D'AUDIT — WCAG 1.4.3 Contraste minimum (niveau AA).
 *
 * L'intro était en crème à 86 %. Mesuré au navigateur, glyphes rendus transparents
 * pour photographier le fond réel sous le texte : le dégradé vaut #6A7855 à cet
 * endroit, et la crème voilée n'y donnait que 3,75:1. À 17 px en graisse 400, ce
 * n'est pas du « grand texte » : le seuil est bien 4,5:1.
 *
 * La crème pleine ne suffisait pas non plus (4,44:1). Le blanc pur donne 4,74:1.
 * Même arbitrage que partout ailleurs sur ce projet quand du texte clair se pose
 * sur le sauge : c'est le blanc qui passe, pas la crème.
 *
 * Le titre, lui, reste en crème : à 50 px il relève du grand texte (seuil 3:1) et
 * mesure 4,37:1.
 */
.mein-newsletter__intro {
	margin: 0 auto 32px;
	max-width: 520px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: clamp(15px, 1.5vw, 17px);
	line-height: 1.65;
	color: #ffffff;
}

/* --- Formulaire : input + bouton en pilule ----------------------------- */

.mein-newsletter__form {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	max-width: 520px;
	margin: 0 auto;
}

/* Masque le label visuellement tout en le gardant lisible aux lecteurs d'écran. */
.mein-newsletter__label.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.mein-newsletter__input {
	flex: 1 1 240px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 15px;
	color: var(--wp--preset--color--titres);
	background: var(--wp--preset--color--creme);
	border: none;
	border-radius: 999px;
	padding: 15px 22px;
	outline: none;
}

.mein-newsletter__bouton {
	flex: 0 0 auto;
	background: var(--wp--preset--color--creme);
	color: var(--wp--preset--color--texte-sombre);
	border: none;
	padding: 15px 30px;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.mein-newsletter__bouton:hover,
.mein-newsletter__bouton:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}

.mein-newsletter__bouton:focus-visible {
	outline: 2px solid var(--wp--preset--color--creme);
	outline-offset: 3px;
}

/* Placeholder statique désactivé : curseur neutre, opacité conservée pour la démo. */
.mein-newsletter__input:disabled,
.mein-newsletter__bouton:disabled {
	cursor: default;
	opacity: 1;
}

.mein-newsletter__bouton:disabled:hover {
	transform: none;
	box-shadow: none;
}

/* =========================================================================
 * Formulaire RÉEL (Fluent Forms) dans le bandeau — correctifs d'audit
 *
 * DETTE ASSUMÉE, À LIRE AVANT D'AJOUTER UN QUATRIÈME CONTEXTE
 * ----------------------------------------------------------
 * Le socle de présentation du formulaire Fluent Forms est désormais DUPLIQUÉ dans
 * trois feuilles, chacune scopée sur sa racine :
 *
 *   1. carte Contact      → assets/css/contact.css      (.mein-contact-form-card)
 *   2. modale des popups  → assets/css/popup.css        (dialog.mein-popup)
 *   3. bandeau newsletter → ce fichier                  (.mein-newsletter)
 *
 * C'est un choix explicite pour cette version : extraire un socle commun
 * obligerait à refactoriser contact.css, qui est déjà en service et dont les
 * valeurs sont mesurées. Le coût de la duplication reste inférieur au risque de
 * toucher à l'existant.
 *
 * SI UN QUATRIÈME CONTEXTE APPARAÎT, C'EST LE MOMENT D'EXTRAIRE. La règle de
 * décision est posée ici pour que la question ne se repose pas à chaque fois.
 *
 * ATTENTION, LES VALEURS NE SE RECOPIENT PAS D'UN CONTEXTE À L'AUTRE. Les deux
 * premiers contextes posent le formulaire sur de la CRÈME ; celui-ci le pose sur
 * un DÉGRADÉ SAUGE FONCÉ. Les contrastes s'y inversent : ce qui passe sur crème
 * échoue ici, et réciproquement. Toutes les valeurs ci-dessous ont été mesurées
 * au navigateur sur CE fond, glyphes rendus transparents pour photographier le
 * dégradé réellement présent sous chaque texte. Fonds relevés : #677552 sous les
 * libellés du formulaire, #697754 sous le message d'erreur, #6B7956 au point le
 * plus clair de la colonne de contenu (valeur retenue comme pire cas).
 *
 * SPÉCIFICITÉ. Fluent Forms génère lui-même
 * « form.fluent_form_N .ff-btn-submit:not(.ff_btn_no_style) », soit (0,3,1), dans
 * un <style> imprimé APRÈS cette feuille. Les sélecteurs ci-dessous montent donc
 * volontairement à (0,4,0) au minimum : quatre classes battent trois classes quel
 * que soit le nombre d'éléments, et l'ordre de chargement cesse d'être en jeu.
 * ====================================================================== */

/*
 * 1. Libellés, consigne du captcha, astérisque — WCAG 1.4.3 (niveau AA).
 *
 * Ces textes héritaient du token « texte » (#6B6157), pensé pour un fond clair :
 * mesuré à 1,22:1 sur le dégradé, c'est-à-dire illisible. Le blanc pur donne
 * 4,95:1 sous les libellés et 4,67:1 au pire point de la colonne.
 * La crème ne suffisait pas partout (4,63:1 ici mais 4,37:1 au pire point).
 */
.mein-newsletter .mein-newsletter__form .frm-fluent-form .ff-el-input--label label,
.mein-newsletter .mein-newsletter__form .frm-fluent-form .mein-turnstile-label,
.mein-newsletter .mein-newsletter__form .frm-fluent-form .mein-turnstile-aide {
	color: #ffffff;
	font-family: var(--wp--preset--font-family--sans);
}

/* L'astérisque « requis ». L'information n'est pas portée par lui seul :
   aria-required="true" est posé sur le champ (vérifié dans l'arbre
   d'accessibilité), l'astérisque n'est qu'un rappel visuel. */
.mein-newsletter .mein-newsletter__form .frm-fluent-form .ff-el-is-required.asterisk-right label:after {
	color: #ffffff;
}

/*
 * 2. Champ de saisie — WCAG 1.4.11 (niveau AA).
 *
 * Le fond blanc du champ tranche sur le dégradé à 4,95:1 : la zone de saisie est
 * identifiable par son fond seul, bien au-delà des 3:1 exigés. Aucune bordure
 * n'est donc nécessaire ici, contrairement à la modale où le champ blanc se posait
 * sur une carte crème (1,03:1) et où la bordure était le seul repère.
 *
 * Le placeholder de Fluent Forms (#868E96) ne donne que 3,32:1 sur le blanc du
 * champ : sous le seuil, alors que c'est bien du texte. On le passe au token
 * « texte », mesuré à 6,05:1. Le libellé visible reste la vraie étiquette
 * (WCAG 3.3.2), le placeholder n'est qu'un exemple de saisie.
 */
.mein-newsletter .mein-newsletter__form .frm-fluent-form .ff-el-form-control {
	width: 100%;
	padding: 14px 20px;
	border: none;
	border-radius: 999px;
	background: #ffffff;
	color: var(--wp--preset--color--titres);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 15px;
}

.mein-newsletter .mein-newsletter__form .frm-fluent-form .ff-el-form-control::placeholder {
	color: var(--wp--preset--color--texte);
	opacity: 1;
}

/*
 * 3. Bouton d'envoi — WCAG 1.4.11 (niveau AA).
 *
 * Défaut le plus visible du bandeau : le bouton généré par Fluent Forms est sauge
 * (#6B7A58) POSÉ SUR UN DÉGRADÉ SAUGE. Mesuré, sa surface et son fond ne sont
 * séparés que de 1,05:1 : il ne se lisait tout simplement pas comme un bouton.
 *
 * On revient au traitement de la maquette, déjà porté par le bouton statique de ce
 * bloc (.mein-newsletter__bouton) : pastille claire sur fond sombre. Le fond crème
 * tranche à 4,50:1 sur le dégradé, et le libellé en « texte-sombre » donne 9,57:1
 * sur cette crème.
 */
.mein-newsletter .mein-newsletter__form .frm-fluent-form .ff-btn-submit {
	display: inline-flex;
	align-items: center;
	padding: 15px 30px;
	border: none;
	border-radius: 999px;
	background: var(--wp--preset--color--creme);
	color: var(--wp--preset--color--texte-sombre);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.mein-newsletter .mein-newsletter__form .frm-fluent-form .ff-btn-submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}

/*
 * 4. Anneaux de focus — WCAG 2.4.7 (niveau AA).
 *
 * Fluent Forms ne pose aucun indicateur sur son bouton d'envoi (outline à 0,
 * vérifié) et remplace celui du champ par une bordure bleue, ici invisible
 * puisqu'on a retiré la bordure.
 *
 * L'anneau est posé avec un décalage : il se dessine donc SUR LE DÉGRADÉ, jamais
 * sur l'élément. C'est exactement le piège relevé sur le CTA de la modale, où un
 * anneau crème avait été choisi « pour le fond sauge du bouton » alors qu'il
 * tombait sur la carte crème. Ici le raisonnement tient, parce que ce qui entoure
 * est bien le dégradé sombre : crème sur dégradé, mesuré à 4,50:1.
 */
.mein-newsletter .mein-newsletter__form .frm-fluent-form .ff-el-form-control:focus,
.mein-newsletter .mein-newsletter__form .frm-fluent-form .ff-btn-submit:focus-visible {
	outline: 2px solid var(--wp--preset--color--creme);
	outline-offset: 3px;
}

/*
 * 5. Messages d'erreur — WCAG 1.4.3 (niveau AA).
 *
 * Le rouge par défaut du plugin (#F56C6C) tombe à 1,66:1 sur le dégradé.
 *
 * AUCUNE teinte rosée ne tient sur ce fond : mesurées, les plus pâles plafonnent à
 * 4,34:1 au mieux, et il faut atteindre le blanc quasi pur pour passer 4,5:1, ce
 * qui ne se lit plus comme une erreur. On renverse donc le problème et on donne au
 * message sa propre pastille claire, comme le fait déjà le message de succès page
 * Contact. Le fond crème tranche à 4,50:1 sur le dégradé, et le rouge terre du
 * projet y donne 5,59:1.
 *
 * Le rouge ne porte jamais l'information seul (WCAG 1.4.1) : le message est
 * textuel, annoncé via le role="alert" du plugin, et relié au champ par
 * contact-form-a11y.js, désormais chargé sur cette page.
 */
.mein-newsletter .mein-newsletter__form .frm-fluent-form .error,
.mein-newsletter .mein-newsletter__form .frm-fluent-form .text-danger {
	display: inline-block;
	margin-top: 8px;
	padding: 8px 14px;
	border-radius: 10px;
	background: var(--wp--preset--color--creme);
	color: #b3382a;
	font-family: var(--wp--preset--font-family--sans);
	line-height: 1.5;
	text-align: left;
}

/* Message de confirmation : même pastille, teinte sauge foncée (5,60:1 sur crème),
   alignée sur le traitement de la page Contact. */
.mein-newsletter .mein-newsletter__form .frm-fluent-form .ff-message-success,
.mein-newsletter .mein-newsletter__form--shortcode .ff-message-success {
	padding: 14px 20px;
	border-radius: 14px;
	background: var(--wp--preset--color--creme);
	color: var(--wp--preset--color--sauge-fonce);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 15px;
}

/* Le formulaire réel n'est pas la rangée « input + bouton » de la maquette :
   Fluent Forms empile ses groupes. On neutralise le flex hérité pour éviter que
   libellés, champ, captcha et bouton ne se disputent une seule ligne. */
.mein-newsletter .mein-newsletter__form--shortcode {
	display: block;
	text-align: left;
}

@media (prefers-reduced-motion: reduce) {

	.mein-newsletter .mein-newsletter__form .frm-fluent-form .ff-btn-submit {
		transition: none;
	}

	.mein-newsletter .mein-newsletter__form .frm-fluent-form .ff-btn-submit:hover {
		transform: none;
	}
}

/* --- Orbes décoratives (fidèles au design) ----------------------------- */

.mein-newsletter__orbe {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.mein-newsletter__orbe--1 {
	top: -90px;
	right: -60px;
	width: 320px;
	height: 320px;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0));
}

.mein-newsletter__orbe--2 {
	bottom: -100px;
	left: -50px;
	width: 300px;
	height: 300px;
	background: radial-gradient(circle, rgba(227, 196, 187, 0.18), rgba(227, 196, 187, 0));
}

/* --- Responsive : réduit les orbes sur mobile -------------------------- */

@media (max-width: 600px) {
	.mein-newsletter__orbe--1 {
		width: 220px;
		height: 220px;
	}

	.mein-newsletter__orbe--2 {
		width: 200px;
		height: 200px;
	}
}

/* --- Respect de prefers-reduced-motion --------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.mein-newsletter__bouton {
		transition: none;
	}

	.mein-newsletter__bouton:hover,
	.mein-newsletter__bouton:focus-visible {
		transform: none;
	}
}