/*
 * Les formulaires Fluent Forms, habillés comme la maquette.
 *
 * Fluent Forms charge sa feuille structurelle (colonnes, honeypot masqué,
 * placement des messages) ; sa feuille décorative n'est pas chargée
 * (inc/formulaires.php). Celle-ci pose sur son markup les règles que
 * styles-contact.css et styles-finale.css donnent au formulaire dessiné :
 * mêmes jetons, mêmes valeurs. Une règle reprise ici l'est mot pour mot de la
 * maquette ; si la maquette change, elle est à reporter.
 *
 * Deux portées : `.ct-form-pane` (le contact) et `.site-footer__nl--ff` (la
 * newsletter). Les sélecteurs visent les classes génériques de Fluent Forms
 * (`.ff-el-group`, `.ff-el-form-control`…), jamais un champ par son nom : un
 * champ ajouté depuis l'administration arrive habillé.
 *
 * Aucun !important : la spécificité suffit (trois classes contre deux chez
 * Fluent Forms).
 */

/* ── Le contact : la structure ─────────────────────────────────────────── */

.ct-form-pane .fluentform {
	display: block;
}
.ct-form-pane .fluentform .ff-el-group {
	margin-bottom: 16px;
}
.ct-form-pane .fluentform .ff-t-container {
	gap: 16px;
}
.ct-form-pane .fluentform .ff-t-cell .ff-el-group {
	margin-bottom: 0;
}
.ct-form-pane .fluentform .ff-t-container {
	margin-bottom: 16px;
}
/* Fluent Forms empile ses colonnes sous 768 px avec la classe .mobile ;
   la maquette les empile sous 640 px. On suit la maquette. */
@media (max-width: 640px) {
	.ct-form-pane .fluentform .ff-t-container {
		flex-direction: column;
	}
	.ct-form-pane .fluentform .ff-t-cell .ff-el-group {
		margin-bottom: 16px;
	}
	.ct-form-pane .fluentform .ff-t-cell:last-of-type .ff-el-group {
		margin-bottom: 0;
	}
}

/* ── Les libellés : .ct-label ──────────────────────────────────────────── */

.ct-form-pane .fluentform .ff-el-input--label {
	display: block;
	margin: 0 0 7px;
}
.ct-form-pane .fluentform .ff-el-input--label label {
	display: block;
	font-family: var(--font-mono);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-500);
	margin: 0;
	cursor: default;
}
/* L'astérisque : .ct-label .req */
.ct-form-pane .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after {
	content: " *";
	margin-left: 0;
	color: var(--terre-700);
}

/* ── Les champs : .ct-input, .ct-select, .ct-textarea ──────────────────── */

.ct-form-pane .fluentform .ff-el-form-control {
	width: 100%;
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	line-height: normal;
	color: var(--ink-900);
	background: var(--paper-0);
	border: 1px solid var(--paper-200);
	border-radius: var(--radius-md);
	padding: 12px 14px;
	box-shadow: none;
	transition: border-color var(--duration-base) var(--ease-out),
	            box-shadow var(--duration-base) var(--ease-out);
	-webkit-appearance: none;
	appearance: none;
}
.ct-form-pane .fluentform .ff-el-form-control::placeholder {
	color: var(--ink-300);
	opacity: 1;
}
.ct-form-pane .fluentform .ff-el-form-control:focus {
	outline: none;
	border-color: var(--sauge-500);
	box-shadow: 0 0 0 3px rgba(138, 154, 114, 0.18);
}
.ct-form-pane .fluentform textarea.ff-el-form-control {
	min-height: 132px;
	resize: vertical;
	line-height: 1.6;
}

/* Le select : chevron laiton, comme .ct-select-wrap::after. Le conteneur
   du champ porte le chevron, en position relative. */
.ct-form-pane .fluentform .ff-el-input--content:has(> select.ff-el-form-control) {
	position: relative;
}
.ct-form-pane .fluentform select.ff-el-form-control {
	padding-right: 40px;
	cursor: pointer;
}
.ct-form-pane .fluentform .ff-el-input--content:has(> select.ff-el-form-control)::after {
	content: "";
	position: absolute;
	right: 16px;
	top: 50%;
	width: 9px;
	height: 9px;
	border-right: 1.5px solid var(--laiton-700);
	border-bottom: 1.5px solid var(--laiton-700);
	transform: translateY(-65%) rotate(45deg);
	pointer-events: none;
}

/* ── Le consentement : .ct-consent ─────────────────────────────────────── */

/* La maquette écarte le consentement de 18 px sous le champ, mais son
   textarea, inline-block, ajoute 8 px de ligne ; Fluent Forms le met en bloc.
   Les 16 px du groupe précédent ne fusionnent pas (clearfix) : 16 + 10 = 26,
   comme la maquette. */
.ct-form-pane .fluentform .ff-el-tc {
	display: block;
	margin: 10px 0 4px;
}
.ct-form-pane .fluentform .ff-el-tc label.ff_tc_label {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	cursor: pointer;
}
.ct-form-pane .fluentform .ff-el-tc label.ff_tc_label > span,
.ct-form-pane .fluentform .ff-el-tc label.ff_tc_label > div {
	display: block;
	padding: 0;
	width: auto;
}
.ct-form-pane .fluentform .ff-el-tc .ff-el-form-check-input {
	position: static;
	top: auto;
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	accent-color: var(--sauge-700);
	cursor: pointer;
}
.ct-form-pane .fluentform .ff_t_c {
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	line-height: 1.5;
	color: var(--ink-500);
	padding: 0;
}
.ct-form-pane .fluentform .ff_t_c a {
	color: var(--ink-700);
	text-underline-offset: 2px;
}

/* ── Le bouton : .btn.btn--primary.btn--lg.ct-submit ───────────────────── */

.ct-form-pane .fluentform .ff_submit_btn_wrapper {
	margin: 22px 0 0;
}
.ct-form-pane .fluentform .ff-btn-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 16px 32px;
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: normal;
	background: var(--laiton-500);
	color: var(--ink-900);
	box-shadow: var(--shadow-cta);
	cursor: pointer;
	transition: background var(--duration-base) var(--ease-out),
	            transform var(--duration-fast) var(--ease-out);
}
.ct-form-pane .fluentform .ff-btn-submit:hover {
	background: var(--laiton-600);
}
.ct-form-pane .fluentform .ff-btn-submit:active {
	transform: translateY(0.5px);
}
.ct-form-pane .fluentform .ff-btn-submit:disabled {
	opacity: 0.6;
	cursor: wait;
}

/* ── Les erreurs : absentes de la maquette, dans sa charte ─────────────── */

.ct-form-pane .fluentform .ff-el-is-error .ff-el-form-control {
	border-color: var(--terre-700);
}
.ct-form-pane .fluentform .ff-el-is-error .text-danger,
.ct-form-pane .fluentform .ff-errors-in-stack .error {
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	line-height: 1.5;
	color: var(--terre-700);
	margin-top: 6px;
}
.ct-form-pane .fluentform .ff-el-is-error .ff_t_c,
.ct-form-pane .fluentform .ff-el-is-error .ff_t_c a {
	color: var(--terre-700);
}
.ct-form-pane .fluentform .ff-errors-in-stack {
	margin-top: 12px;
}

/* ── Le message de succès : .ct-thanks ─────────────────────────────────── */

.ct-form-pane .ff-message-success {
	border: 0;
	box-shadow: none;
	margin: 0;
	padding: 0;
}
/* Le HTML du message porte déjà .ct-thanks.is-on (content/forms/contact.json) :
   les règles de la maquette s'appliquent. Il se place là où était le
   formulaire ; le lien mailto reste dessous. */

/* ── La newsletter du pied de page ─────────────────────────────────────── */

/* Le formulaire d'une pièce : le champ et le bouton dans le cadre de
   .site-footer__nl (styles-finale.css), qui reste le conteneur. */
.site-footer__nl--ff .fluentform {
	display: contents;
}
.site-footer__nl--ff form {
	display: flex;
	width: 100%;
}
.site-footer__nl--ff fieldset {
	display: flex;
	width: 100%;
}
.site-footer__nl--ff .ff-el-group {
	margin: 0;
}
.site-footer__nl--ff .ff-el-group:not(.ff_submit_btn_wrapper) {
	flex: 1;
	min-width: 0;
}
.site-footer__nl--ff .ff-el-input--label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}
.site-footer__nl--ff .ff-el-form-control {
	width: 100%;
	padding: 15px 18px;
	border: 0;
	border-radius: 0;
	background: transparent;
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--ink-900);
	outline: none;
	box-shadow: none;
}
.site-footer__nl--ff .ff-el-form-control::placeholder {
	color: var(--ink-500);
	opacity: 1;
}
.site-footer__nl--ff .ff_submit_btn_wrapper {
	margin: 0;
	display: flex;
}
.site-footer__nl--ff .ff-btn-submit {
	height: 100%;
	background: var(--laiton-500);
	color: var(--ink-900);
	border: 0;
	border-radius: 0;
	padding: 0 26px;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--duration-base) var(--ease-out);
}
.site-footer__nl--ff .ff-btn-submit:hover {
	background: var(--laiton-600);
}
/* L'erreur sous le champ prend la place de la ligne légale, dans le cadre. */
.site-footer__nl--ff .ff-el-is-error .text-danger,
.site-footer__nl--ff .ff-errors-in-stack .error {
	font-family: var(--font-body);
	font-size: 11.5px;
	color: var(--terre-700);
	padding: 0 18px 10px;
	margin: 0;
}
.site-footer__nl--ff .ff-errors-in-stack {
	display: none;
}
/* Le succès remplace le formulaire, dans le même cadre. */
.site-footer__nl--ff .ff-message-success {
	border: 0;
	box-shadow: none;
	margin: 0;
	padding: 15px 18px;
	width: 100%;
}
.site-footer__nl--ff .site-footer__nl-merci {
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--sauge-800);
	margin: 0;
}