/*
 * Habillage de Forminator pour reproduire la maquette du formulaire de contact
 * (champs, options en cartes cliquables, stepper multi-étapes, boutons).
 *
 * Chargé uniquement si Forminator est actif. Tout est limité au conteneur
 * .contact-form--plugin pour ne pas affecter d'autres formulaires.
 *
 * IMPORTANT — pourquoi tant de !important :
 * Forminator génère une feuille de style PROPRE au formulaire
 * (wp-content/uploads/forminator/<id>_*/css/style-<id>.css) dont les
 * sélecteurs sont scopés par un ID :
 *   .forminator-ui#forminator-module-30.forminator-design--default .forminator-input
 * → spécificité (1,3,0), imbattable depuis le thème sans réutiliser cet ID
 * (qui changerait si le formulaire est recréé). De plus, le CSS de base du
 * plugin se charge APRÈS celui du thème. !important sur les propriétés
 * visuelles est donc le seul moyen fiable et portable de gagner.
 * Le balisage ciblé a été vérifié sur le DOM rendu (JS compris) du formulaire #30.
 */

/* --- Neutralise le conteneur propre de Forminator (la carte est déjà fournie
       par .contact-form dans le template) --- */
.contact-form--plugin .forminator-ui.forminator-custom-form {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	font-family: inherit;
	max-width: none;
}

/* Forminator imprime un <div> placeholder vide (juste un <br>) à côté du
   <form> réel : on le masque pour éviter un espace fantôme. */
.contact-form--plugin > div.forminator-ui.forminator-custom-form {
	display: none !important;
}

.contact-form--plugin .forminator-row {
	margin: 0;
}
.contact-form--plugin .forminator-col {
	padding: 0;
	float: none;
}

/* --- Champs & libellés --- */
.contact-form--plugin .forminator-field {
	margin-bottom: 20px;
}

.contact-form--plugin .forminator-label {
	display: block;
	font-size: 12px !important;
	letter-spacing: 0.04em;
	font-weight: 600 !important;
	color: var(--ink-2) !important;
	margin-bottom: 8px;
	text-transform: none;
	line-height: 1.3;
}

.contact-form--plugin .forminator-required {
	color: #c0392b;
}

/* Le label « Groupe de champs » des champs Group de Forminator : masqué.
   (Idéalement, vider aussi ce libellé dans le constructeur Forminator.) */
.contact-form--plugin .forminator-repeater-label {
	display: none !important;
}

.contact-form--plugin .forminator-input,
.contact-form--plugin .forminator-textarea,
.contact-form--plugin select.forminator-select,
.contact-form--plugin .forminator-select-list {
	width: 100% !important;
	box-sizing: border-box !important;
	font-family: inherit !important;
	font-size: 15px !important;
	padding: 13px 14px !important;
	border: 1px solid var(--line-2) !important;
	border-radius: var(--r-sm) !important;
	background: var(--bg) !important;
	color: var(--ink) !important;
	min-height: 0 !important;
	transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}

.contact-form--plugin .forminator-textarea {
	min-height: 130px !important;
	resize: vertical;
}

.contact-form--plugin .forminator-input::placeholder,
.contact-form--plugin .forminator-textarea::placeholder {
	color: var(--ink-3);
	opacity: .8;
}

.contact-form--plugin .forminator-input:focus,
.contact-form--plugin .forminator-textarea:focus,
.contact-form--plugin select.forminator-select:focus {
	outline: none !important;
	border-color: var(--accent) !important;
	box-shadow: 0 0 0 4px var(--accent-glow) !important;
	background: var(--white) !important;
}

/* --- Disposition 2 colonnes pour les champs regroupés (Nom/Prénom,
       Email/Téléphone). Dans le DOM, chaque champ du groupe est sur sa propre
       .forminator-row : on transforme le groupe en grille 2 colonnes. --- */
.contact-form--plugin .forminator-grouped-fields {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 0 18px !important;
}
.contact-form--plugin .forminator-grouped-fields > .forminator-row {
	margin: 0 !important;
	min-width: 0;
}
.contact-form--plugin .forminator-grouped-fields .forminator-col {
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 100% !important;
	/* Pas de gouttière interne : la colonne de groupe a déjà 15px et le gap de
	   la grille (18px) gère l'espacement → sinon double padding qui resserre
	   les champs et les désaligne des champs pleine largeur (Office). */
	padding: 0 !important;
}

/* Champ téléphone (intl-tel-input) : occupe toute la largeur de sa colonne. */
.contact-form--plugin .forminator-field--phone,
.contact-form--plugin .iti {
	width: 100% !important;
}
/* Restaure l'espace à gauche pour le drapeau + indicatif (sinon mon padding
   global écrase celui posé en inline par intl-tel-input → texte sous le drapeau). */
.contact-form--plugin .forminator-input.forminator-field--phone {
	padding-left: 80px !important;
}

/* --- Options radio / cases présentées en cartes cliquables --- */
/* Conteneur du groupe radio : grille 2 colonnes, le libellé prend toute la largeur. */
.contact-form--plugin .forminator-field-radio .forminator-field,
.contact-form--plugin .forminator-field-checkbox .forminator-field {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 10px !important;
	align-items: stretch !important;
}
.contact-form--plugin .forminator-field-radio .forminator-label,
.contact-form--plugin .forminator-field-checkbox .forminator-label {
	grid-column: 1 / -1;
	margin-bottom: 2px;
}

/* La carte = le <label> qui entoure l'input. */
.contact-form--plugin .forminator-radio,
.contact-form--plugin .forminator-checkbox {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	padding: 15px 16px !important;
	margin: 0 !important;
	border: 1px solid var(--line-2) !important;
	background: var(--bg) !important;
	border-radius: var(--r-sm) !important;
	cursor: pointer;
	box-shadow: none !important;
	transition: border-color .2s var(--ease), background .2s var(--ease);
}

/* On cache l'input natif (la pastille .forminator-radio-bullet sert de visuel). */
.contact-form--plugin .forminator-radio input[type="radio"],
.contact-form--plugin .forminator-checkbox input[type="checkbox"] {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
	margin: 0 !important;
	pointer-events: none;
}

.contact-form--plugin .forminator-radio:hover,
.contact-form--plugin .forminator-checkbox:hover {
	border-color: var(--ink) !important;
}

/* État sélectionné (:has pour les navigateurs modernes + repli classe Forminator). */
.contact-form--plugin .forminator-radio:has(input:checked),
.contact-form--plugin .forminator-checkbox:has(input:checked),
.contact-form--plugin .forminator-radio.forminator-is_checked,
.contact-form--plugin .forminator-checkbox.forminator-is_checked {
	border-color: var(--accent) !important;
	background: var(--accent-wash) !important;
}

/* Pastille ronde de Forminator transformée en puce de sélection. */
.contact-form--plugin .forminator-radio-bullet,
.contact-form--plugin .forminator-checkbox-box {
	width: 20px !important;
	height: 20px !important;
	min-width: 20px !important;
	border-radius: var(--r-full) !important;
	border: 1.5px solid var(--line-2) !important;
	flex-shrink: 0 !important;
	margin: 0 !important;
	background: var(--white) !important;
	transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}

.contact-form--plugin .forminator-radio:has(input:checked) .forminator-radio-bullet,
.contact-form--plugin .forminator-radio input:checked + .forminator-radio-bullet,
.contact-form--plugin .forminator-radio.forminator-is_checked .forminator-radio-bullet,
.contact-form--plugin .forminator-checkbox:has(input:checked) .forminator-checkbox-box,
.contact-form--plugin .forminator-checkbox input:checked + .forminator-checkbox-box {
	border-color: var(--accent) !important;
	background: var(--accent) !important;
	/* anneau blanc intérieur → effet « point coché » */
	box-shadow: inset 0 0 0 4px var(--white) !important;
}

.contact-form--plugin .forminator-radio-label,
.contact-form--plugin .forminator-checkbox-label {
	font-size: 14px !important;
	font-weight: 500 !important;
	color: var(--ink) !important;
	line-height: 1.35 !important;
	margin: 0 !important;
}

/* --- Stepper multi-étapes : reproduit les barres fines de la maquette
       (.contact-form__step-pip), sans libellés ni pastilles. --- */
.contact-form--plugin .forminator-pagination-steps {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	margin: 0 0 32px !important;
	padding: 0 !important;
	border: 0 !important;
	list-style: none;
}

/* Connecteurs natifs masqués : on ne garde que les 2 barres d'étape. */
.contact-form--plugin .forminator-break {
	display: none !important;
}

/* Chaque étape devient une barre fine pleine largeur. */
.contact-form--plugin .forminator-step {
	flex: 1 !important;
	height: 3px !important;
	min-height: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: var(--line) !important;
	border-radius: var(--r-pill) !important;
	font-size: 0 !important;
	cursor: pointer;
	transition: background .3s var(--ease);
}

/* On masque le libellé texte et la pastille natifs. */
.contact-form--plugin .forminator-step-label,
.contact-form--plugin .forminator-step-dot {
	display: none !important;
}

/* Étape courante en accent (comme .contact-form__step-pip.active). */
.contact-form--plugin .forminator-step.forminator-current {
	background: var(--accent) !important;
}

/* --- Boutons (Précédent / Suivant / Envoyer) --- */
.contact-form--plugin .forminator-pagination-footer {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	gap: 12px !important;
	margin-top: 28px !important;
	padding-top: 24px !important;
	border-top: 1px solid var(--line) !important;
}

.contact-form--plugin .forminator-button {
	align-items: center !important;
	gap: 8px !important;
	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	padding: 14px 26px !important;
	border-radius: var(--r-pill) !important;
	border: 1px solid transparent !important;
	cursor: pointer;
	box-shadow: none !important;
	transition: transform .18s var(--ease), opacity .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}

/* display:inline-flex SEULEMENT sur les boutons réellement affichés. Ne pas le
   mettre sur la règle générique : Forminator garde un bouton submit caché en
   fin de contenu (.forminator-pagination-submit, style="display:none" inline),
   et un !important global le ferait réapparaître → doublon « Envoyer ». */
.contact-form--plugin .forminator-button-next,
.contact-form--plugin .forminator-button-back,
.contact-form--plugin .forminator-button-submit {
	display: inline-flex !important;
}

/* Suivant : bouton sombre (comme « Continuer » de la maquette). */
.contact-form--plugin .forminator-button-next {
	background: var(--ink) !important;
	color: var(--white) !important;
}
.contact-form--plugin .forminator-button-next::after {
	content: "→";
	font-size: 16px;
	line-height: 1;
}
.contact-form--plugin .forminator-button-next:hover {
	transform: translateY(-1px);
	background: #000 !important;
}

/* Envoyer : bouton accent. */
.contact-form--plugin .forminator-pagination-submit,
.contact-form--plugin .forminator-button-submit {
	background: var(--accent) !important;
	color: var(--white) !important;
}
.contact-form--plugin .forminator-pagination-submit:hover,
.contact-form--plugin .forminator-button-submit:hover {
	transform: translateY(-1px);
	background: var(--accent-ink) !important;
}

/* Précédent : contour discret. */
.contact-form--plugin .forminator-button-back {
	background: transparent !important;
	color: var(--ink) !important;
	border-color: var(--line-2) !important;
}
.contact-form--plugin .forminator-button-back:hover {
	border-color: var(--ink) !important;
}

/* Forminator masque le bouton Précédent à la 1re étape via .forminator-hidden. */
.contact-form--plugin .forminator-button.forminator-hidden {
	display: none !important;
}

/* --- Messages de validation / succès --- */
.contact-form--plugin .forminator-error-message,
.contact-form--plugin .forminator-validation-text {
	color: #c0392b;
	font-size: 13px;
	margin-top: 6px;
}

.contact-form--plugin .forminator-response-message {
	margin-bottom: 18px;
	padding: 14px 16px;
	border-radius: var(--r-sm);
	font-size: 14px;
	border: 1px solid var(--line);
}
.contact-form--plugin .forminator-response-message[aria-hidden="true"] {
	display: none;
}

/* --- Responsive : tout en 1 colonne sur mobile --- */
@media (max-width: 640px) {
	.contact-form--plugin .forminator-grouped-fields,
	.contact-form--plugin .forminator-field-radio .forminator-field,
	.contact-form--plugin .forminator-field-checkbox .forminator-field {
		grid-template-columns: 1fr !important;
	}
}