/*
 * Habillage Fluent Forms a la charte, PARTAGE par les blocs qui affichent un formulaire (candidature,
 * contact...). Scope : `.mx-ff-form` (classe posee sur le conteneur du formulaire dans chaque bloc), pour
 * ne pas toucher d'autres formulaires FF eventuels. Zero valeur en dur hors cote Figma ; tokens theme.json.
 */

.mx-ff-form .fluentform .ff-t-container,
.mx-ff-form .fluentform .ff-el-group {
	margin-bottom: var(--wp--preset--spacing--30); /* 16 */
}

.mx-ff-form .fluentform .ff-el-input--label label {
	font-family: var(--wp--preset--font-family--titillium);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--md); /* 16 */
	line-height: 1.2;
	color: var(--wp--preset--color--grey-dark);
	margin-bottom: var(--wp--preset--spacing--20); /* 8 */
}

/* Asterisque « requis » en orange. */
.mx-ff-form .fluentform .ff-el-is-required.asterisk-right label:after,
.mx-ff-form .fluentform .ff-el-is-required label:after {
	color: var(--wp--preset--color--orange-dark);
}

/* Champs texte / email / tel / textarea / select. */
.mx-ff-form .fluentform .ff-el-form-control {
	box-sizing: border-box;
	width: 100%;
	padding: var(--wp--preset--spacing--25) var(--wp--preset--spacing--40); /* 14 24 */
	border: 1px solid var(--wp--preset--color--grey-middle);
	border-radius: var(--mx-radius-s, 4px);
	background-color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--titillium);
	font-size: var(--wp--preset--font-size--md); /* 16 */
	line-height: 1.2;
	color: var(--wp--preset--color--grey-dark);
}

.mx-ff-form .fluentform .ff-el-form-control::placeholder {
	color: var(--wp--preset--color--grey-middle);
	opacity: 1;
}

.mx-ff-form .fluentform select.ff-el-form-control {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("../icons/icon-arrow-down.svg");
	background-repeat: no-repeat;
	background-position: right var(--wp--preset--spacing--40) center; /* 24 */
	background-size: 12px;
	padding-right: var(--wp--preset--spacing--55); /* 80 : place pour le chevron */
}

.mx-ff-form .fluentform textarea.ff-el-form-control {
	min-height: 132px; /* cote Figma (zone message) */
	resize: vertical;
}

.mx-ff-form .fluentform .ff-el-form-control:focus-visible,
.mx-ff-form .fluentform .ff-el-form-control:focus {
	border-color: var(--wp--preset--color--orange-dark);
	outline: 2px solid var(--wp--preset--color--yellow);
	outline-offset: 1px;
}

/* Champ fichier (upload). */
.mx-ff-form .fluentform .ff_upload_btn,
.mx-ff-form .fluentform .ff_upload_btn.ff-btn {
	font-family: var(--wp--preset--font-family--titillium);
	font-weight: 700;
	color: var(--wp--preset--color--grey-dark);
	background-color: var(--wp--preset--color--grey-ultralight);
	border: 1px solid var(--wp--preset--color--grey-light);
	border-radius: var(--mx-radius-s, 4px);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30); /* 8 16 */
	cursor: pointer;
}

.mx-ff-form .fluentform .ff-upload-preview {
	margin-top: var(--wp--preset--spacing--20); /* 8 */
}

/* Case a cocher consentement. */
.mx-ff-form .fluentform .ff-el-form-check-label,
.mx-ff-form .fluentform .ff_t_c {
	font-family: var(--wp--preset--font-family--titillium);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--sm); /* 14 */
	line-height: 1.3;
	color: var(--wp--preset--color--grey-dark);
}

.mx-ff-form .fluentform .ff-el-form-check input[type="checkbox"] {
	accent-color: var(--wp--preset--color--orange-dark);
	width: 18px;
	height: 18px;
}

/* Messages d'erreur : rouge accessible. */
.mx-ff-form .fluentform .error,
.mx-ff-form .fluentform .text-danger,
.mx-ff-form .fluentform .ff-el-is-error-container {
	font-family: var(--wp--preset--font-family--titillium);
	font-size: var(--wp--preset--font-size--sm); /* 14 */
	color: #b3261e; /* rouge d'erreur (AA sur blanc) */
	margin-top: var(--wp--preset--spacing--10); /* 4 */
}

.mx-ff-form .fluentform .ff-el-is-error .ff-el-form-control {
	border-color: #b3261e;
}

/* Bouton d'envoi : charte (jaune, Titillium Bold, majuscules). */
.mx-ff-form .fluentform .ff-btn-submit {
	font-family: var(--wp--preset--font-family--titillium);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--sm); /* 14 */
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--grey-dark);
	background-color: var(--wp--preset--color--yellow);
	border: 0;
	border-radius: var(--mx-radius-s, 4px);
	padding: var(--wp--preset--spacing--25) var(--wp--preset--spacing--50); /* 14 40 */
	cursor: pointer;
	transition: background-color var(--mx-transition, 0.2s ease);
}

.mx-ff-form .fluentform .ff-btn-submit:hover,
.mx-ff-form .fluentform .ff-btn-submit:focus-visible {
	background-color: var(--mx-btn-hover-bg, #ffc65c);
}

.mx-ff-form .fluentform .ff-btn-submit:focus-visible {
	outline: 2px solid var(--wp--preset--color--orange-dark);
	outline-offset: 2px;
}

.mx-ff-form .fluentform .ff-el-group.ff_t_container {
	font-size: var(--wp--preset--font-size--xs); /* 12 */
}