/**
 * Skin Fluent Forms — formulaire contact Richard (form #3).
 *
 * - Bouton submit en vert site (accent-strong).
 * - Choix « type de demande » en cartes 50/50 sans radio visible.
 * - Icônes PNG thème (renseignement + calendrier).
 * - Icône calendrier dans le champ date.
 */

.techniconcept-fluent-form {
	--tc-ff-navy: var(--wp--preset--color--on-background, #082b4e);
	--tc-ff-green: var(--wp--preset--color--accent-strong, #287d63);
	--tc-ff-outline: var(--wp--preset--color--outline, #d8d8d8);
	/* Standard site : champs et boutons sans arrondi. */
	--tc-ff-radius: 0;
	--tc-ff-icon-chat: url("../icons/contact/renseignement.png");
	--tc-ff-icon-calendar: url("../icons/contact/calendrier.png");
	--tc-ff-icon-plane: url("../icons/contact/avion-papier.png");
}

/* Titre intro formulaire — icône avion avant le H2. */
.techniconcept-fluent-form h2.intro-form {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1.5rem;
	color: var(--tc-ff-navy);
	font-family: var(--wp--preset--font-family--suisse-intl, SuisseIntl, Arial, Helvetica, sans-serif);
	font-size: var(--wp--preset--font-size--headline, 1.6875rem);
	font-weight: 700;
	line-height: 1.2;
}

.techniconcept-fluent-form h2.intro-form::before {
	content: "";
	flex-shrink: 0;
	width: 1.75rem;
	height: 1.75rem;
	background-color: var(--tc-ff-navy);
	mask-image: var(--tc-ff-icon-plane);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	-webkit-mask-image: var(--tc-ff-icon-plane);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
}

/* Champs texte Fluent — coins droits (standard site). */
.techniconcept-fluent-form .ff-el-form-control,
.techniconcept-fluent-form input[type='text'],
.techniconcept-fluent-form input[type='email'],
.techniconcept-fluent-form input[type='tel'],
.techniconcept-fluent-form input[type='number'],
.techniconcept-fluent-form input[type='url'],
.techniconcept-fluent-form input[type='date'],
.techniconcept-fluent-form textarea,
.techniconcept-fluent-form select {
	border-radius: 0 !important;
}

/* Bouton d'envoi — vert du site. */
.techniconcept-fluent-form .ff-btn-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.75rem 1.5rem;
	border: none;
	border-radius: var(--tc-ff-radius);
	background-color: var(--tc-ff-green);
	color: var(--wp--preset--color--on-primary, #fff);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--body-sm, 0.875rem);
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.techniconcept-fluent-form .ff-btn-submit:hover,
.techniconcept-fluent-form .ff-btn-submit:focus-visible {
	background-color: #1f614c;
	color: var(--wp--preset--color--on-primary, #fff);
}

.techniconcept-fluent-form .ff_submit_btn_wrapper {
	margin-top: 1.5rem;
}

/* Grille 50% / 50% pour les choix « Vous souhaitez ». */
.techniconcept-fluent-form .ff_list_2col {
	/* Plus d'air entre le label / les cartes et le reste du formulaire. */
	margin-bottom: 2.5rem;
}

.techniconcept-fluent-form .ff_list_2col > .ff-el-input--label {
	margin-bottom: 1rem;
}

/* Pas d'étoile rouge à côté de « Vous souhaitez ». */
.techniconcept-fluent-form .ff_list_2col > .ff-el-input--label.ff-el-is-required::after,
.techniconcept-fluent-form .ff_list_2col > .ff-el-input--label.asterisk-right::after {
	content: none !important;
	display: none !important;
}

.techniconcept-fluent-form .ff_list_2col .ff-el-input--content {
	display: grid;
	/* Mobile : une seule colonne ; 2 colonnes dès tablette. */
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
	width: 100%;
}

@media (min-width: 768px) {
	.techniconcept-fluent-form .ff_list_2col .ff-el-input--content {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.techniconcept-fluent-form .ff_list_2col .ff-el-form-check {
	margin: 0;
	/* Fluent Forms applique width:50% en float — on force 100% dans chaque cellule grille. */
	width: 100% !important;
	max-width: none;
	min-width: 0;
	float: none !important;
}

/* Masquer le radio natif tout en conservant le focus clavier sur l'input. */
.techniconcept-fluent-form .ff_list_2col .ff-el-form-check-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.techniconcept-fluent-form .ff_list_2col .ff-el-form-check-label {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	box-sizing: border-box;
	width: 100%;
	min-height: 3.25rem;
	margin: 0;
	padding: 0.875rem 1rem;
	border: 1px solid var(--tc-ff-outline);
	border-radius: var(--tc-ff-radius);
	background-color: var(--wp--preset--color--background, #fff);
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.techniconcept-fluent-form .ff_list_2col .ff-el-form-check-label span {
	flex: 0 1 auto;
}

/* Icônes PNG thème — couleur via mask + currentColor. */
.techniconcept-fluent-form .ff_list_2col .ff-el-form-check-label::before {
	content: "";
	flex-shrink: 0;
	width: 1.375rem;
	height: 1.375rem;
	background-color: currentColor;
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
}

.techniconcept-fluent-form
	.ff_list_2col
	.ff-el-form-check:has(input[value="Demander un renseignement"]) {
	order: 1;
}

.techniconcept-fluent-form
	.ff_list_2col
	.ff-el-form-check:has(input[value="Prendre rendez-vous"]) {
	order: 2;
}

.techniconcept-fluent-form
	.ff_list_2col
	.ff-el-form-check-label:has(input[value="Demander un renseignement"]) {
	color: var(--tc-ff-navy);
}

.techniconcept-fluent-form
	.ff_list_2col
	.ff-el-form-check-label:has(input[value="Demander un renseignement"])::before {
	mask-image: var(--tc-ff-icon-chat);
	-webkit-mask-image: var(--tc-ff-icon-chat);
}

.techniconcept-fluent-form
	.ff_list_2col
	.ff-el-form-check-label:has(input[value="Prendre rendez-vous"]) {
	color: var(--tc-ff-green);
}

.techniconcept-fluent-form
	.ff_list_2col
	.ff-el-form-check-label:has(input[value="Prendre rendez-vous"])::before {
	mask-image: var(--tc-ff-icon-calendar);
	-webkit-mask-image: var(--tc-ff-icon-calendar);
}

/* État sélectionné : bordure colorée selon l'option (maquette). */
.techniconcept-fluent-form
	.ff_list_2col
	.ff-el-form-check.ff_item_selected
	.ff-el-form-check-label:has(input[value="Demander un renseignement"]),
.techniconcept-fluent-form
	.ff_list_2col
	.ff-el-form-check-label:has(input[value="Demander un renseignement"]:checked) {
	border-color: var(--tc-ff-navy);
	box-shadow: 0 0 0 1px var(--tc-ff-navy);
}

.techniconcept-fluent-form
	.ff_list_2col
	.ff-el-form-check.ff_item_selected
	.ff-el-form-check-label:has(input[value="Prendre rendez-vous"]),
.techniconcept-fluent-form
	.ff_list_2col
	.ff-el-form-check-label:has(input[value="Prendre rendez-vous"]:checked) {
	border-color: var(--tc-ff-green);
	box-shadow: 0 0 0 1px var(--tc-ff-green);
}

.techniconcept-fluent-form
	.ff_list_2col
	.ff-el-form-check-label:has(input:focus-visible) {
	outline: 2px solid var(--wp--preset--color--focus-ring, #004f71);
	outline-offset: 2px;
}

/* Champ date — icône calendrier à droite. */
.techniconcept-fluent-form .ff-el-input--content:has(.ff-el-datepicker) {
	position: relative;
}

.techniconcept-fluent-form .ff-el-datepicker {
	padding-inline-end: 2.75rem;
}

.techniconcept-fluent-form .ff-el-input--content:has(.ff-el-datepicker)::after {
	content: "";
	position: absolute;
	inset-inline-end: 0.875rem;
	top: 50%;
	width: 1.25rem;
	height: 1.25rem;
	transform: translateY(-50%);
	background-color: var(--tc-ff-navy);
	mask-image: var(--tc-ff-icon-calendar);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	-webkit-mask-image: var(--tc-ff-icon-calendar);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
	pointer-events: none;
}

@media (max-width: 480px) {
	.techniconcept-fluent-form .ff_list_2col .ff-el-form-check-label {
		padding: 0.75rem 0.625rem;
		font-size: var(--wp--preset--font-size--body-sm, 0.875rem);
		gap: 0.5rem;
	}

	.techniconcept-fluent-form .ff_list_2col .ff-el-form-check-label::before {
		width: 1.125rem;
		height: 1.125rem;
	}
}