/* =============================================================================
   com'ing — Habillage des formulaires Fluent Forms
   Source : deliverables/ux/maquette-contact/form.css (Uma, 2026-10-20), porté tel quel par Devon.
   Enfilé après layout.css (handle coming-forms, inc/assets.php) et chargé dans l'éditeur.
   Prérequis : inc/forms.php désactive le thème visuel par défaut de Fluent
   (filtre fluentform/load_default_public) ; la feuille structurelle « fluent-form-styles » reste chargée.
   Portée : tous les formulaires Fluent Forms du site.
   Seule valeur hors palette : --wp--custom--color--error (theme.json > settings.custom.color.error, terracotta #A4442A).
   ============================================================================= */

body .fluentform {
	--ff-ink: var(--wp--preset--color--ink-900);
	--ff-muted: var(--wp--preset--color--ink-500);
	--ff-accent: var(--wp--preset--color--olive-900);
	--ff-num: var(--wp--preset--color--olive-700);
	--ff-error: var(--wp--custom--color--error, #A4442A); /* terracotta, choix de Farah (contact-refonte.md §3.10) */
	--ff-field-bg: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--body);
	color: var(--ff-ink);
}
body .fluentform * { box-sizing: border-box; }

/* ---------- Grille : conteneurs 2 colonnes (Nom | Email, etc.) ---------- */
body .fluentform .frm-fluent-form { counter-reset: coming-field; }
body .fluentform .ff-t-container { display: flex; gap: 0 1.5rem; margin: 0 0 1.75rem; } /* Devon : rythme entre rangées 2 colonnes (le dernier groupe d'une cellule n'a pas de marge) */
@media (max-width: 767px) { body .fluentform .ff-t-container > .ff-t-cell + .ff-t-cell { margin-top: 1.75rem; } }
body .fluentform .ff-t-container > .ff-t-cell { flex: 1 1 0; min-width: 0; padding: 0 !important; }
@media (max-width: 767px) { body .fluentform .ff-t-container { display: block; } }

/* ---------- Groupes : rythme vertical régulier, pas de boîtes ---------- */
body .fluentform .ff-el-group { margin: 0 0 1.75rem; }
body .fluentform .ff-el-group:last-child { margin-bottom: 0; }
/* champ court seul sur sa ligne : classe à saisir dans Fluent > champ > Avancé > « Container Class » */
body .fluentform .coming-ff-narrow { max-width: 26rem; }

/* ---------- Libellés : petites capitales + numéro serif italique vert (01, 02…) ---------- */
body .fluentform .ff-el-input--label { counter-increment: coming-field; display: flex; align-items: baseline; gap: 0.6em; margin: 0 0 0.6rem; padding: 0; }
body .fluentform .ff-el-input--label::before {
	content: counter(coming-field, decimal-leading-zero);
	content: counter(coming-field, decimal-leading-zero) / ""; /* décoratif : non lu par les lecteurs d'écran */
	font-family: var(--wp--preset--font-family--accent); font-style: italic; font-weight: 400;
	font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--ff-num); flex: none; min-width: 1.6em;
}
body .fluentform .ff-el-input--label label,
body .fluentform .ff-el-input--label legend {
	margin: 0; padding: 0; font-size: 0.8125rem; font-weight: 600; line-height: 1.3;
	letter-spacing: 0.12em; text-transform: uppercase; color: var(--ff-ink);
}
/* astérisque « obligatoire » : vert texte, pas rouge (la couleur d'erreur est réservée aux erreurs) */
body .fluentform .ff-el-is-required.asterisk-right label::after { content: " *"; content: " *" / ""; color: var(--ff-num); margin-left: 0.15em; }
body .fluentform .ff-el-is-required.asterisk-left label::before { content: none; }
/* aide sous champ */
body .fluentform .ff-el-help-message { margin-top: 0.45rem; font-size: 0.875rem; font-style: normal; color: var(--ff-muted); }

/* ---------- Champs : fond blanc doux, coins hauts arrondis, filet bas ---------- */
body .fluentform .ff-el-form-control {
	display: block; width: 100%; min-height: 52px; margin: 0;
	padding: 0.85rem 1rem;
	font: 400 1.0625rem/1.4 var(--wp--preset--font-family--body); /* >= 16px : pas de zoom auto sur iOS */
	color: var(--ff-ink);
	background: var(--ff-field-bg);
	border: 0;
	border-bottom: 1.5px solid var(--ff-muted);            /* 6,9:1 sur blanc : limite de champ visible (WCAG 1.4.11) */
	border-radius: var(--wp--custom--radius--field) var(--wp--custom--radius--field) 0 0;
	box-shadow: none;
	transition: border-color var(--wp--custom--motion--d-quick), box-shadow var(--wp--custom--motion--d-quick);
	-webkit-appearance: none; appearance: none;
}
body .fluentform .ff-el-form-control::placeholder { color: var(--ff-muted); opacity: 1; }
body .fluentform .ff-el-form-control:hover { border-bottom-color: var(--ff-ink); }
body .fluentform .ff-el-form-control:focus { outline: none; border-bottom-color: var(--ff-accent); box-shadow: inset 0 -2px 0 var(--ff-accent); }
body .fluentform .ff-el-form-control:focus-visible { outline: 2px solid var(--ff-ink); outline-offset: 3px; }
body .fluentform textarea.ff-el-form-control { min-height: 9.5rem; resize: vertical; }
body .fluentform select.ff-el-form-control {
	padding-right: 2.75rem; cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23141310' stroke-width='1.6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 1rem center; background-size: 14px 9px;
}

/* ---------- Cases « Service souhaité » / radios « Budget » : en pastilles ---------- */
body .fluentform .ff-el-group:has(.ff-el-form-check:not(.ff-el-tc)) .ff-el-input--content { display: flex; flex-wrap: wrap; gap: 0.5rem; }
body .fluentform .ff-el-form-check:not(.ff-el-tc) { margin: 0; }
body .fluentform .ff-el-form-check:not(.ff-el-tc) .ff-el-form-check-label {
	display: inline-flex; align-items: center; gap: 0.55rem; min-height: 44px; margin: 0;
	padding: 0.45rem 1rem 0.45rem 0.8rem;
	border: 1.5px solid var(--ff-accent); border-radius: var(--wp--custom--radius--button);
	background: transparent; color: var(--ff-accent);
	font-size: 0.9375rem; font-weight: 500; line-height: 1.2; cursor: pointer;
	transition: background-color var(--wp--custom--motion--d-quick), color var(--wp--custom--motion--d-quick);
}
/* la vraie case reste dans le DOM et au clavier ; elle devient le « point » de la pastille */
body .fluentform .ff-el-form-check:not(.ff-el-tc) .ff-el-form-check-input {
	-webkit-appearance: none; appearance: none; flex: none; margin: 0;
	width: 1.1rem; height: 1.1rem; border: 1.5px solid currentColor; border-radius: 50%;
	background: transparent center / 0.7rem no-repeat; cursor: pointer;
}
body .fluentform .ff-el-form-check:not(.ff-el-tc) .ff-el-form-check-input:focus-visible { outline: none; }
body .fluentform .ff-el-form-check:not(.ff-el-tc) .ff-el-form-check-label:has(input:focus-visible) { outline: 2px solid var(--ff-ink); outline-offset: 3px; }
@media (hover: hover) { body .fluentform .ff-el-form-check:not(.ff-el-tc) .ff-el-form-check-label:hover { background: color-mix(in srgb, var(--ff-accent) 8%, transparent); } }
/* coché : pastille pleine + coche (l'état ne repose pas que sur la couleur) */
body .fluentform .ff-el-form-check:not(.ff-el-tc) .ff-el-form-check-label:has(input:checked) { background: var(--ff-accent); color: var(--wp--preset--color--white); }
body .fluentform .ff-el-form-check:not(.ff-el-tc) .ff-el-form-check-input:checked {
	background-color: var(--wp--preset--color--white); border-color: var(--wp--preset--color--white);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' fill='none' stroke='%233F4A1E' stroke-width='2'/%3E%3C/svg%3E");
}
/* Boutons radio (Budget indicatif) : même pastille ; coché = point plein (et non une coche), pour distinguer « un seul choix » */
body .fluentform .ff-el-form-check:not(.ff-el-tc) input[type="radio"]:checked {
	background-image: radial-gradient(circle, var(--ff-accent) 0 38%, transparent 42%);
	background-size: 100% 100%;
}

/* ---------- Consentement RGPD (case carrée douce + texte) ---------- */
body .fluentform .ff-el-tc { margin: 0; }
body .fluentform .ff-el-tc .ff-el-form-check-label { display: flex; align-items: flex-start; gap: 0.75rem; margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--ff-ink); cursor: pointer; }
body .fluentform .ff-el-tc .ff-el-form-check-input {
	-webkit-appearance: none; appearance: none; flex: none; margin: 0.1rem 0 0;
	width: 1.375rem; height: 1.375rem; border: 1.5px solid var(--ff-muted); border-radius: 0.3rem; background: var(--ff-field-bg) center / 0.85rem no-repeat; cursor: pointer;
}
body .fluentform .ff-el-tc .ff-el-form-check-input:checked {
	background-color: var(--ff-accent); border-color: var(--ff-accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E");
}
body .fluentform .ff-el-tc a { color: var(--ff-accent); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
body .fluentform .ff_gdpr_field, body .fluentform .ff-el-group:has(.ff-el-tc) { padding-top: 1.5rem; border-top: 1px solid rgba(20, 19, 16, 0.2); }

/* ---------- Turnstile : le widget (iframe Cloudflare) n'est pas stylable ; on gère seulement sa place ---------- */
body .fluentform .ff-el-turnstile { min-height: 65px; max-width: 100%; }
body .fluentform .ff-el-group:has(.ff-el-turnstile) { margin-bottom: 1.25rem; }

/* ---------- Bouton d'envoi : pilule olive + volet noir (= boutons du thème) ---------- */
body .fluentform .ff_submit_btn_wrapper { margin-top: 0.5rem; }
body .fluentform .ff-btn-submit {
	position: relative; isolation: isolate; overflow: hidden;
	display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
	min-height: 52px; padding: 0.95em 1.9em; margin: 0;
	font: 500 1rem/1.1 var(--wp--preset--font-family--body);
	/* !important : Fluent Forms peut écrire la couleur du bouton en style en ligne (réglage du bouton) */
	background: var(--ff-accent) !important; color: var(--wp--preset--color--white) !important;
	border: 1.5px solid var(--ff-accent) !important; border-radius: var(--wp--custom--radius--button) !important;
	box-shadow: none; cursor: pointer; opacity: 1;
}
body .fluentform .ff-btn-submit::before { content: ""; position: absolute; inset: -1px; z-index: -1; background: var(--wp--preset--color--ink-900); transform: scaleX(0); transform-origin: left center; transition: transform var(--wp--custom--motion--d-base) var(--wp--custom--motion--ease-io); }
body .fluentform .ff-btn-submit::after { content: "→"; content: "→" / ""; transition: transform var(--wp--custom--motion--d-quick) var(--wp--custom--motion--ease-out); }
body .fluentform .ff-btn-submit:hover::before, body .fluentform .ff-btn-submit:focus-visible::before { transform: scaleX(1); }
body .fluentform .ff-btn-submit:hover::after { transform: translateX(4px); }
body .fluentform .ff-btn-submit:focus-visible { outline: 2px solid var(--ff-ink); outline-offset: 3px; }
body .fluentform .ff-btn-submit:disabled, body .fluentform .ff-btn-submit.disabled { opacity: 0.6; cursor: progress; }
@media (max-width: 767px) { body .fluentform .ff-btn-submit { width: 100%; } }

/* ---------- Erreurs : texte + icône, jamais la couleur seule ---------- */
body .fluentform .ff-el-is-error .ff-el-form-control { border-bottom-color: var(--ff-error); box-shadow: inset 0 -2px 0 var(--ff-error); }
body .fluentform .ff-el-is-error .ff-el-form-check-label { border-color: var(--ff-error); }
body .fluentform .ff-el-is-error .ff-el-tc .ff-el-form-check-input { border-color: var(--ff-error); }
body .fluentform .error.text-danger {
	display: flex; align-items: flex-start; gap: 0.45rem; margin-top: 0.5rem;
	font-size: 0.875rem; font-weight: 500; line-height: 1.4; color: var(--ff-error);
}
body .fluentform .error.text-danger::before {
	content: "!"; content: "!" / ""; flex: none; display: grid; place-items: center;
	width: 1.15rem; height: 1.15rem; margin-top: 0.05rem; border-radius: 50%;
	background: var(--ff-error); color: var(--wp--preset--color--white); font-size: 0.75rem; font-weight: 700; line-height: 1;
}
/* récapitulatif d'erreurs global éventuel en haut */
body .fluentform .ff-errors-in-stack { margin-top: 1rem; color: var(--ff-error); font-size: 0.875rem; }

/* ---------- Succès : bandeau olive FIN (retour Farah r3) ----------
   1-2 lignes, padding réduit, texte 1rem, icône centrée verticalement ;
   grand espace au-dessus pour ne plus coller au bouton « Envoyer ma demande »
   (Fluent affiche le message sous le formulaire quand le comportement après envoi = « Réinitialiser le formulaire »). */
body .ff-message-success {
	display: flex; align-items: center; gap: 0.75rem;
	margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0 0;
	padding: 0.85rem 1.25rem;
	background: var(--wp--preset--color--olive-900); color: var(--wp--preset--color--white);
	border: 0; border-radius: var(--wp--custom--radius--field); box-shadow: none;
	font-size: 1rem; font-weight: 500; line-height: 1.45;
}
body .ff-message-success::before {
	content: ""; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1.5px solid var(--wp--preset--color--olive-300);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' fill='none' stroke='%23B9C58F' stroke-width='1.8'/%3E%3C/svg%3E") center / 0.8rem no-repeat;
}
/* si le message remplace le formulaire (comportement « Masquer le formulaire ») : pas de marge orpheline en haut */
body .fluentform .frm-fluent-form[style*="display: none"] + .ff-message-success,
body .fluentform .ff-message-success:first-child { margin-top: 0; }
body .ff-message-success p { margin: 0; }
body .ff-message-success a { color: var(--wp--preset--color--white); }