/**
 * Feuille SCOPÉE de la page Contact — carte formulaire + rendu Fluent Forms.
 *
 * Chargée UNIQUEMENT sur la page Contact (présence du shortcode Fluent Forms ou du
 * bloc mein/coordonnees), via mein_enqueue_contact_assets() dans functions.php.
 * Même mécanisme que single-article.css (wp_enqueue_style + filemtime, dépendance
 * « mein-main »).
 *
 * PRINCIPE : on N'ÉCRASE PAS le balisage de Fluent Forms (on garde ses classes
 * ff-*). On restyle son rendu à l'intérieur de la carte crème « .mein-contact-form-card »
 * pour coller à la maquette Contact : champs fond sable, coins arrondis, focus
 * sauge, bouton pastille sauge. Les sélecteurs sont préfixés par la classe de la
 * carte (portée) et par « .frm-fluent-form » (spécificité suffisante pour battre le
 * thème par défaut « ffs_default » de Fluent Forms, quel que soit l'ordre de
 * chargement des feuilles).
 *
 * Réutilise les tokens de theme.json (sable, crème, sauge, titres, texte, polices).
 */

/* =========================================================================
 * 1. Carte crème contenant le formulaire (bloc core/group stylé).
 * ====================================================================== */

.mein-contact-form-card {
	background: var(--wp--preset--color--creme);
	border: 1px solid rgba(59, 50, 43, 0.06);
	border-radius: 24px;
	padding: clamp(28px, 4vw, 44px);
	box-shadow: 0 26px 60px -40px rgba(74, 63, 53, 0.45);
}

/* Titre de la carte : Cormorant, calé sur la maquette (plus petit que le H2 global). */
.mein-contact-form-card__titre {
	margin: 0 0 8px;
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 600;
	font-size: clamp(24px, 3vw, 32px);
	line-height: 1.15;
	color: var(--wp--preset--color--titres);
}

/* Sous-titre de la carte. */
.mein-contact-form-card__intro {
	margin: 0 0 28px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--wp--preset--color--texte);
}

/* =========================================================================
 * 2. Rendu Fluent Forms scopé dans la carte.
 * ====================================================================== */

/* Espacement vertical entre les groupes de champs. */
.mein-contact-form-card .frm-fluent-form .ff-el-group {
	margin-bottom: 18px;
}

.mein-contact-form-card .frm-fluent-form .ff-el-group:last-of-type {
	margin-bottom: 0;
}

/* Libellés de champ. */
.mein-contact-form-card .frm-fluent-form .ff-el-input--label label {
	margin-bottom: 8px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--texte);
}

/* Astérisque « requis » : teinte sauge discrète. */
.mein-contact-form-card .frm-fluent-form .ff-el-is-required.asterisk-right label:after {
	color: var(--wp--preset--color--sauge);
}

/* Champs de saisie (input + textarea) : fond sable, coins arrondis, bordure fine.
 *
 * CORRECTIF D'AUDIT — WCAG 1.4.11 Contraste non textuel (niveau AA).
 * La bordure d'origine, rgba(59, 50, 43, 0.12), se composait en #E4DFD7 et ne
 * donnait que 1,24:1 sur la carte crème et 1,17:1 sur le fond sable du champ.
 * Or le fond sable ne tranche lui-même que de 1,06:1 sur la carte : la bordure
 * était donc le SEUL repère désignant la zone de saisie, et elle était en dessous
 * du seuil de 3:1.
 * Teinte chaude accordée à la charte, mesurée à 3,54:1 sur la carte et 3,34:1 sur
 * le fond du champ : le repère tient des deux côtés. Même valeur que dans la
 * modale des popups, où le constat était identique.
 */
.mein-contact-form-card .frm-fluent-form .ff-el-form-control {
	width: 100%;
	padding: 13px 16px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 15px;
	color: var(--wp--preset--color--titres);
	background: var(--wp--preset--color--sable);
	border: 1px solid #8c8272;
	border-radius: 12px;
	box-shadow: none;
	transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

.mein-contact-form-card .frm-fluent-form textarea.ff-el-form-control {
	min-height: 120px;
	resize: vertical;
}

/* Survol : bordure sauge voilée (cohérent avec la maquette). */
.mein-contact-form-card .frm-fluent-form .ff-el-form-control:hover {
	border-color: rgba(107, 122, 88, 0.55);
}

/* Focus clavier : bordure sauge + halo discret (accessibilité). */
.mein-contact-form-card .frm-fluent-form .ff-el-form-control:focus {
	outline: none;
	border-color: var(--wp--preset--color--sauge);
	box-shadow: 0 0 0 3px rgba(107, 122, 88, 0.16);
}

/* Placeholders.
 *
 * CORRECTIF D'AUDIT — WCAG 1.4.3 (niveau AA). « texte-discret » (#9A8F7E) ne donne
 * que 2,90:1 sur le fond sable du champ. Un placeholder est du TEXTE : le seuil de
 * 4,5:1 s'y applique. Le token « texte » est mesuré à 5,52:1 sur ce même fond.
 * Le libellé visible reste la vraie étiquette du champ (WCAG 3.3.2) ; le
 * placeholder n'est qu'un exemple de saisie, mais il doit rester lisible.
 */
.mein-contact-form-card .frm-fluent-form .ff-el-form-control::placeholder {
	color: var(--wp--preset--color--texte);
	opacity: 1;
}

/* =========================================================================
 * 3. Bouton d'envoi : pastille sauge pleine (fidèle à la maquette + au CTA).
 * ====================================================================== */

/*
 * CORRECTIF D'AUDIT — WCAG 1.4.3 Contraste minimum (niveau AA).
 *
 * ATTENTION, CE CORRECTIF AVAIT DÉJÀ ÉTÉ ÉCRIT ICI ET N'AVAIT JAMAIS PRIS EFFET.
 *
 * Le commentaire d'origine annonçait un libellé en blanc pur à 4,62:1. Mesuré au
 * navigateur sur la page servie, le bouton rendait en réalité la CRÈME, à 4,32:1 :
 * l'échec AA était toujours là, masqué par un commentaire qui affirmait le
 * contraire. C'est précisément ce genre de commentaire qui fait qu'on ne revérifie
 * jamais.
 *
 * CAUSE : Fluent Forms génère, à partir des réglages du bouton stockés en base, la
 * règle « form.fluent_form_N .ff-btn-submit:not(.ff_btn_no_style) », de spécificité
 * (0,3,1), dans un <style> imprimé APRÈS cette feuille. Le sélecteur d'origine,
 * « .mein-contact-form-card .frm-fluent-form .ff-btn-submit », ne pesait que
 * (0,3,0) : il perdait, silencieusement.
 *
 * REMÈDE PAR LA SPÉCIFICITÉ, ET POURQUOI. Sur le formulaire d'inscription, le même
 * défaut a été corrigé À LA SOURCE, dans mein-core/inc/inscription-form.php. Ici ce
 * n'est pas possible : la définition du formulaire de contact vit dans
 * mein-core/inc/contact-form.php, hors du périmètre de cette intervention. On
 * s'appuie donc sur les DEUX classes que le bouton porte déjà (« ff-btn » et
 * « ff-btn-submit »), ce qui monte à (0,4,0) : quatre classes battent trois classes
 * quel que soit le nombre d'éléments, et l'ordre de chargement cesse d'être en jeu.
 *
 * À REPRENDRE À LA SOURCE le jour où contact-form.php sera ouvert : la couleur
 * stockée en base restera fausse tant qu'elle n'y sera pas corrigée, et tout
 * nouveau contexte d'affichage de ce formulaire repartira du mauvais pied.
 *
 * Blanc pur (et non crème) : 4,62:1 contre 4,32:1, mesurés. Au survol, le fond
 * devient sauge-fonce, soit 5,98:1.
 */
.mein-contact-form-card .frm-fluent-form .ff-btn.ff-btn-submit {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 34px;
	border: none;
	border-radius: 999px;
	background: var(--wp--preset--color--sauge);
	color: #fff;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.mein-contact-form-card .frm-fluent-form .ff-btn-submit:hover {
	background: var(--wp--preset--color--sauge-fonce);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}

.mein-contact-form-card .frm-fluent-form .ff-btn-submit:focus-visible {
	outline: 2px solid var(--wp--preset--color--sauge);
	outline-offset: 3px;
}

/* =========================================================================
 * 4. Messages de confirmation / erreur (teintes de la charte).
 * ====================================================================== */

.mein-contact-form-card .frm-fluent-form .ff-message-success {
	padding: 13px 16px;
	border-radius: 12px;
	background: var(--wp--preset--color--vert-voile);
	color: var(--wp--preset--color--sauge-fonce);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 14px;
}

/* Messages d'erreur — CORRECTIF DE CONTRASTE (WCAG 1.4.3, niveau AA).
   Fluent Forms les affiche dans sa teinte « text-danger » #F56C6C, qui ne donne
   que 2,71:1 sur la carte crème (#FBF7EF) — mesuré au navigateur, très en dessous
   du seuil de 4,5:1 exigé pour du texte de 12 px. Le défaut préexistait sur les
   erreurs de champ ; l'ajout du captcha lui a donné un message de plus. On pose
   un rouge terre, accordé à la famille terracotta de la charte, à 5,62:1.
   Le rouge ne porte JAMAIS l'information seul (WCAG 1.4.1) : le message est
   textuel, il est annoncé via role="alert" et relié au champ par aria-describedby
   (voir assets/js/contact-form-a11y.js). */
.mein-contact-form-card .frm-fluent-form .error,
.mein-contact-form-card .frm-fluent-form .text-danger {
	color: #B3382A;
	font-family: var(--wp--preset--font-family--sans);
	line-height: 1.5;
}

/* =========================================================================
 * 5. Captcha Cloudflare Turnstile (dernier champ, avant le bouton d'envoi).
 *
 * LIBELLÉ ET CONSIGNE — le balisage nommé (« Vérification anti-spam » +
 * consigne en clair) est produit par mein-core, via le filtre officiel
 * « fluentform/rendering_field_html_turnstile ». Sans lui, le seul élément
 * exposé aux lecteurs d'écran est l'iframe Cloudflare, nommée en anglais et
 * sans indication d'obligation (WCAG 3.3.2). Ces deux textes ne sont PAS mis
 * à l'échelle avec le widget : ils restent lisibles à 100 % quel que soit le
 * viewport.
 * ====================================================================== */

/* Libellé : <span> (et non <label>, qui serait orphelin faute de « for »).
   Il reprend exactement la présentation des libellés de champ. */
.mein-contact-form-card .frm-fluent-form .mein-turnstile-label {
	display: block;
	margin-bottom: 8px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--texte);
}

/* Astérisque « requis » : la règle du plugin ne vise que <label>, on la reporte
   sur le <span> pour garder le repère visuel des autres champs obligatoires.
   La seconde déclaration donne à ce contenu généré un texte de remplacement VIDE :
   sans elle, l'astérisque entre dans le nom accessible du groupe, qui devient
   « Vérification anti-spam (obligatoire) * » (relevé dans l'arbre d'accessibilité).
   L'obligation est déjà dite par la mention masquée ; l'astérisque n'est qu'un
   repère visuel. Les navigateurs qui ignorent la syntaxe « / "" » retombent sur la
   première déclaration : l'astérisque reste affiché, rien n'est perdu. */
.mein-contact-form-card .frm-fluent-form .ff-el-is-required.asterisk-right .mein-turnstile-label:after {
	content: " *";
	content: " *" / "";
	color: var(--wp--preset--color--sauge);
}

/* Consigne : couleur « texte » (5,66:1 sur la carte crème). On évite
   « texte-discret », qui ne donnerait que 2,98:1 — sous le seuil AA de 4,5:1. */
.mein-contact-form-card .frm-fluent-form .mein-turnstile-aide {
	margin: 10px 0 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 13px;
	line-height: 1.5;
	color: var(--wp--preset--color--texte);
}

/* -------------------------------------------------------------------------
 * Adaptation aux très petits viewports.
 *
 * Le widget vit dans une iframe de dimensions FIXES, MESURÉES à 300 × 65 px
 * (window.innerWidth/innerHeight relevés dans le cadre challenges.cloudflare.com).
 * Cette iframe est enfermée dans un shadow root CLOS : aucune règle CSS de la
 * page ne peut l'atteindre. Seule une mise à l'échelle du conteneur agit.
 *
 * SEUIL DE DÉBORDEMENT — mesuré, et non calculé. Le bord gauche du widget est
 * à 49 px (20 padding racine + 1 bordure + 28 padding de carte), donc son bord
 * droit tombe à 349 px. Relevés à transform neutralisé (documentElement) :
 *     viewport 320 → scrollWidth 349 pour clientWidth 320  → débordement
 *     viewport 360 → scrollWidth 360 = clientWidth 360     → aucun
 *     viewport 398 / 400                                   → aucun
 * Le débordement n'apparaît donc QUE sous 349 px, et non « sous ~400 px »
 * comme estimé initialement : à 400 px la largeur utile est de 302 px, le
 * widget en réclame 300. Le palier passe de 400 px à 348 px, ce qui rend leur
 * taille normale au widget sur la quasi-totalité des téléphones actuels
 * (360, 375, 390, 393, 412 px), où il était réduit sans nécessité.
 *
 * POURQUOI transform: scale() MALGRÉ TOUT, sous 349 px : la seule alternative
 * y serait un défilement horizontal de page, proscrit (WCAG 1.4.10). Le
 * déplacement de la zone cliquable, redouté, n'a PAS lieu : un clic à la
 * position mise à l'échelle (70,6 ; 399,7) coche bien la case du challenge et
 * remplit le jeton — vérifié sur la clé de test 3x00000000000000000000FF.
 * Réserve assumée : sous ce palier, le texte et la case du widget sont rendus
 * à 72 % (voir le compte rendu d'audit — la taille compacte native de Turnstile,
 * 150 × 140 px, lèverait cette réserve mais change l'aspect du widget).
 * ---------------------------------------------------------------------- */

@media (max-width: 348px) {
	.mein-contact-form-card .frm-fluent-form .ff-el-turnstile {
		transform: scale(0.72);
		transform-origin: left top;
		/* La mise à l'échelle ne libère pas la place réservée dans le flux.
		   Hauteur MESURÉE du conteneur : 73 px (et non 65) ; on récupère donc
		   73 − (73 × 0,72) ≈ 20 px de vide résiduel, pas 18. */
		margin-bottom: -20px;
	}
}

/* =========================================================================
 * 6. Respect de prefers-reduced-motion.
 * ====================================================================== */

@media (prefers-reduced-motion: reduce) {
	.mein-contact-form-card .frm-fluent-form .ff-el-form-control,
	.mein-contact-form-card .frm-fluent-form .ff-btn-submit {
		transition: none;
	}

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