/**
 * Section « Formulaire de contact (ARVY) » — widgets/arvy-formulaire.php
 *
 * Le formulaire est celui d'Elementor Pro : son HTML n'est pas de nous. Les
 * règles qui l'habillent font donc 3 classes au plus, et cette feuille est
 * chargée AVANT le CSS généré par le panneau (4 classes) : tout réglage natif
 * qu'Axel touche l'emporte sur le design par défaut écrit ici.
 */

/* Sécurité 1 : un conteneur Elementor en colonne avec « flex-wrap: wrap »
   fige la hauteur de sa ligne au premier calcul ; un formulaire dont la
   hauteur varie (message d'erreur, champ ajouté) déborderait. */
.e-con:has( > .elementor-widget-arvy-formulaire ),
.elementor-element:has( > .elementor-widget-arvy-formulaire ) { flex-wrap: nowrap; }

/* Sécurité 2 : un élément de flex ne rétrécit pas sous la largeur de son
   contenu (min-width: auto) : aucun défilement horizontal de la page. */
.elementor-widget-arvy-formulaire { min-width: 0; max-width: 100%; }

/* ─── Les deux conteneurs ───────────────────────────────────────────── */

.arvy-formulaire {
	display: flex;
	flex-direction: var( --arvy-form-sens, row );
	/* Côte à côte, les deux colonnes se calent en haut ; empilées, elles
	   doivent s'étirer sur toute la largeur — sinon le formulaire ne prend
	   que la largeur de son contenu. */
	align-items: var( --arvy-form-aligne, flex-start );
	gap: var( --arvy-form-ecart, 56px );
}

.arvy-formulaire__conteneur--formulaire {
	flex: 1 1 auto;
	min-width: 0;
	order: 1;
}

.arvy-formulaire__conteneur--contact {
	box-sizing: border-box;
	flex: 0 0 auto;
	/* Empilé, « --arvy-form-largeur-forcee: 100% » prend le dessus ; côte à
	   côte elle vaut « initial », valeur invalide dans un var() : le repli,
	   c'est-à-dire la largeur réglée, reprend la main (piège 64). */
	width: var( --arvy-form-largeur-forcee, var( --arvy-form-contact-largeur, 38% ) );
	max-width: 100%;
	min-width: 0;
	/* Inverser = échanger les deux conteneurs, comme un conteneur natif
	   (piège 63 : « order » marche aussi empilé, l'ordre de lecture ne
	   change pas et l'écart reste juste). */
	order: var( --arvy-form-ordre-contact, 2 );
}

/* Seul dans la section, un conteneur prend toute la largeur (piège 66). */
.arvy-formulaire__conteneur:only-child { flex: 1 1 100%; width: 100%; }

/* ─── En-tête du formulaire ─────────────────────────────────────────── */

.arvy-formulaire__surtitre {
	display: flex;
	align-items: center;
	gap: var( --arvy-form-surtitre-ecart, 10px );
	margin: 0 0 var( --arvy-form-surtitre-bas, 16px );
	color: var( --arvy-form-surtitre-couleur, #1A1A1B );
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
}

.arvy-formulaire__point {
	flex: 0 0 auto;
	width: var( --arvy-form-point-taille, 8px );
	height: var( --arvy-form-point-taille, 8px );
	border-radius: 50%;
	background: var( --arvy-form-point-couleur, #2E5DFF );
}

.arvy-formulaire .arvy-formulaire__titre {
	margin: 0;
	color: var( --arvy-form-titre-couleur, #1A1A1B );
	font-size: 34px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -1px;
}

.arvy-formulaire .arvy-formulaire__description {
	margin: var( --arvy-form-description-haut, 20px ) 0 0;
	max-width: var( --arvy-form-description-largeur, 560px );
	color: var( --arvy-form-description-couleur, #6B7477 );
	font-size: 17px;
	font-weight: 400;
	line-height: 1.55;
}

.arvy-formulaire .arvy-formulaire__description > p { margin: 0 0 var( --arvy-form-description-paragraphes, 20px ); }
.arvy-formulaire .arvy-formulaire__description > p:last-child { margin-bottom: 0; }

.arvy-formulaire .arvy-formulaire__description a {
	color: var( --arvy-form-lien-couleur, #1A1A1B );
	text-decoration: underline;
	text-underline-offset: 3px;
}

.arvy-formulaire .arvy-formulaire__description a:hover,
.arvy-formulaire .arvy-formulaire__description a:focus { color: var( --arvy-form-lien-survol, #2E5DFF ); }

.arvy-formulaire__entete { margin-bottom: var( --arvy-form-entete-bas, 32px ); }
.arvy-formulaire__entete:empty { display: none; }

/* ─── Le formulaire Elementor habillé ARVY ──────────────────────────── */
/* Toutes les règles ci-dessous font 3 classes au plus : le CSS que
   génèrent les réglages natifs du panneau (4 classes ou plus, et chargé
   après) l'emporte toujours. Le design ARVY n'est donc qu'un défaut. */

.arvy-formulaire .elementor-form .elementor-field-group > label {
	display: block;
	width: 100%;
	/* Couleur et espacement : réglages natifs (Style → Formulaire). */
	margin: 0 0 8px;
	color: #1A1A1B;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.2px;
}

.arvy-formulaire .elementor-form .elementor-mark-required .elementor-field-label:after {
	color: var( --arvy-form-requis-couleur, #2E5DFF );
}

.arvy-formulaire .elementor-field-group .elementor-field-textual,
.arvy-formulaire .elementor-field-group .elementor-select-wrapper select {
	box-sizing: border-box;
	/* Fond, bordure, rayon et couleur du texte : réglages natifs d'Elementor
	   (Style → Champ). Les valeurs ci-dessous ne sont que le défaut ARVY. */
	background-color: #FFFFFF;
	border: 1px solid #E4E1DA;
	border-radius: 12px;
	color: #1A1A1B;
	font-family: inherit;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.45;
	min-height: var( --arvy-form-champ-hauteur, 50px );
	padding: var( --arvy-form-champ-padding-haut, 12px ) var( --arvy-form-champ-padding-cote, 18px );
	transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.arvy-formulaire .elementor-field-group .elementor-field-textual::placeholder {
	color: var( --arvy-form-placeholder, #9C9A96 );
	opacity: 1;
}

.arvy-formulaire .elementor-field-group .elementor-field-textual:focus,
.arvy-formulaire .elementor-field-group .elementor-select-wrapper select:focus {
	border-color: var( --arvy-form-champ-bord-actif, #1A1A1B );
	box-shadow: none;
	outline: none;
}

/* Le contour clavier reste visible : il double la bordure au lieu de
   poser le halo blanc du thème Hello (piège 49). */
.arvy-formulaire .elementor-field-group .elementor-field-textual:focus-visible,
.arvy-formulaire .elementor-field-group .elementor-select-wrapper select:focus-visible {
	outline: var( --arvy-form-focus-epaisseur, 2px ) solid var( --arvy-form-focus-couleur, #2E5DFF );
	outline-offset: 2px;
	box-shadow: none;
}

.arvy-formulaire .elementor-field-group textarea.elementor-field-textual {
	min-height: var( --arvy-form-zone-hauteur, 120px );
	resize: vertical;
}

/* Case à cocher (consentement) dessinée : le carré natif n'a pas de style. */
.arvy-formulaire .elementor-field-subgroup .elementor-field-option { display: flex; align-items: flex-start; gap: var( --arvy-form-case-ecart, 12px ); }

.arvy-formulaire .elementor-field-type-acceptance input[type="checkbox"],
.arvy-formulaire .elementor-field-type-checkbox input[type="checkbox"] {
	appearance: none;
	flex: 0 0 auto;
	width: var( --arvy-form-case-taille, 20px );
	height: var( --arvy-form-case-taille, 20px );
	margin: 1px 0 0;
	border: 1px solid var( --arvy-form-case-bord, #E4E1DA );
	border-radius: var( --arvy-form-case-rayon, 6px );
	background-color: var( --arvy-form-case-fond, #FFFFFF );
	cursor: pointer;
	transition: border-color .2s ease, background-color .2s ease;
}

.arvy-formulaire .elementor-field-type-acceptance input[type="checkbox"]:checked,
.arvy-formulaire .elementor-field-type-checkbox input[type="checkbox"]:checked {
	border-color: var( --arvy-form-case-active, #2E5DFF );
	background-color: var( --arvy-form-case-active, #2E5DFF );
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E" );
	background-size: 68% 68%;
	background-position: center;
	background-repeat: no-repeat;
}

.arvy-formulaire .elementor-field-subgroup .elementor-field-option label {
	margin: 0;
	color: var( --arvy-form-case-texte, #6B7477 );
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
}

/* ─── Le bouton ARVY ────────────────────────────────────────────────── */
/* Un seul choix « Foncé / Clair » pose la pastille, le texte et le mode de
   fusion (règle 29). Le texte est transparent : il laisse voir ce qu'il y a
   derrière (piège 48), donc aucun parent ne doit porter transform/opacity —
   c'est le bouton lui-même qui s'anime. */

.arvy-formulaire .elementor-form .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var( --arvy-form-bouton-largeur, auto );
	margin: 0;
	/* Contour, rayon et espace intérieur : réglages natifs (Style → Boutons).
	   La pastille et la couleur du texte, elles, viennent du ton ARVY et sont
	   posées plus bas, avec la spécificité qu'il faut. */
	border: 1px solid transparent;
	border-radius: 999px;
	padding: 14px 24px;
	font-family: inherit;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -1.8px;
	text-decoration: none;
	cursor: pointer;
	mix-blend-mode: var( --arvy-form-bouton-fusion, multiply );
	/* Règle 38 : toutes les transitions dans UNE déclaration — une
	   deuxième règle de même poids remplacerait la première et le survol
	   deviendrait instantané (piège 126). */
	transition:
		color var( --arvy-form-bouton-douceur, .35s ) ease,
		background-color var( --arvy-form-bouton-douceur, .35s ) ease,
		border-color var( --arvy-form-bouton-douceur, .35s ) ease,
		opacity var( --arvy-form-app-duree, 1.2s ) var( --arvy-form-app-courbe, cubic-bezier(0.16, 1, 0.3, 1) ) var( --arvy-form-app-delai, 0s ),
		transform var( --arvy-form-app-duree, 1.2s ) var( --arvy-form-app-courbe, cubic-bezier(0.16, 1, 0.3, 1) ) var( --arvy-form-app-delai, 0s );
}

.arvy-formulaire .elementor-form .elementor-button .elementor-button-content-wrapper {
	display: flex;
	align-items: center;
	gap: var( --arvy-form-bouton-ecart, 10px );
}

.arvy-formulaire .elementor-form .elementor-button .elementor-button-text {
	flex: 0 1 auto;
	white-space: normal;
	text-wrap: balance;
	text-align: center;
}

/* La flèche ↗ du bouton ARVY, posée en CSS : le HTML du bouton est celui
   d'Elementor, on n'y touche pas. */
.arvy-formulaire .elementor-form .elementor-button .elementor-button-content-wrapper::after {
	content: "";
	flex: 0 0 auto;
	width: var( --arvy-form-fleche-taille, 0.8em );
	height: var( --arvy-form-fleche-taille, 0.8em );
	background-color: currentColor;
	-webkit-mask-image: var( --arvy-form-fleche );
	mask-image: var( --arvy-form-fleche );
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.arvy-formulaire {
	--arvy-form-fleche: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M7 7h10v10'/%3E%3C/svg%3E" );
}

.arvy-formulaire--sans-fleche .elementor-form .elementor-button .elementor-button-content-wrapper::after { display: none; }

.arvy-formulaire--fleche-droite {
	--arvy-form-fleche: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E" );
}

/* Sans carte contact, le formulaire prend toute la largeur. */
.arvy-formulaire--sans-contact .arvy-formulaire__conteneur--formulaire { flex: 1 1 100%; }

/* ─── Couleurs du bouton : le ton ARVY doit l'emporter ──────────────────── */
/* Elementor Pro donne au bouton du formulaire « Couleur du texte : #FFFFFF »
   par défaut, au repos ET au survol. Le CSS qu'il génère vise
   « …-<id> .elementor-button[type="submit"]:hover » (6 classes) et arrive
   après cette feuille : une règle à 3 classes ne peut pas le battre, le texte
   restait donc blanc au survol — pastille vidée, bouton illisible.
   Ces trois règles montent à 7 classes pour que le bouton ARVY reste le bouton
   ARVY. Conséquence assumée : les couleurs de « Style → Boutons » n'ont pas
   d'effet ici, c'est le réglage « Bouton : Foncé / Clair » qui les porte. */

.elementor-widget-arvy-formulaire .arvy-section .arvy-formulaire .arvy-formulaire__conteneur--formulaire .elementor-form .elementor-button[type="submit"] {
	background-color: var( --arvy-form-bouton-fond, #1A1A1B );
	color: var( --arvy-form-bouton-texte, #FFFFFF );
	border-color: transparent;
}

/* Survol : la pastille se vide, le contour et le texte prennent sa couleur. */
.elementor-widget-arvy-formulaire .arvy-section .arvy-formulaire .arvy-formulaire__conteneur--formulaire .elementor-form .elementor-button[type="submit"]:hover,
.elementor-widget-arvy-formulaire .arvy-section .arvy-formulaire .arvy-formulaire__conteneur--formulaire .elementor-form .elementor-button[type="submit"]:focus {
	background-color: transparent;
	color: var( --arvy-form-bouton-texte-survol, #1A1A1B );
	border-color: var( --arvy-form-bouton-contour-survol, #1A1A1B );
}

/* Sans la classe du widget (aperçu, contexte inhabituel), le repli reste juste. */
.arvy-formulaire .elementor-form .elementor-button:hover,
.arvy-formulaire .elementor-form .elementor-button:focus {
	background-color: transparent;
	color: var( --arvy-form-bouton-texte-survol, #1A1A1B );
	border-color: var( --arvy-form-bouton-contour-survol, #1A1A1B );
}

.arvy-formulaire .elementor-form .elementor-button:focus-visible {
	outline: var( --arvy-form-focus-epaisseur, 2px ) solid var( --arvy-form-focus-couleur, #2E5DFF );
	outline-offset: 3px;
	box-shadow: none;
}

.arvy-formulaire--bouton-clair .elementor-form .elementor-button {
	--arvy-form-bouton-fond: #FFFFFF;
	--arvy-form-bouton-texte: #000000;
	--arvy-form-bouton-fusion: screen;
	--arvy-form-bouton-texte-survol: #FFFFFF;
	--arvy-form-bouton-contour-survol: #FFFFFF;
}

/* ─── Messages d'Elementor (succès, erreur) ─────────────────────────── */

.arvy-formulaire .elementor-form .elementor-message {
	margin-top: 12px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
}

/* Couleurs des messages : réglages natifs (Style → Messages). */
.arvy-formulaire .elementor-form .elementor-message.elementor-message-success { color: #1A1A1B; }
.arvy-formulaire .elementor-form .elementor-message.elementor-message-danger { color: #C6362C; }

/* ─── Pied du formulaire ────────────────────────────────────────────── */

.arvy-formulaire__pied { margin-top: var( --arvy-form-pied-haut, 20px ); }
.arvy-formulaire__pied:empty { display: none; }

.arvy-formulaire .arvy-formulaire__direct {
	margin: 0;
	color: var( --arvy-form-direct-couleur, #1A1A1B );
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
}

.arvy-formulaire .arvy-formulaire__direct a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: color .25s ease;
}

.arvy-formulaire .arvy-formulaire__direct a:hover,
.arvy-formulaire .arvy-formulaire__direct a:focus { color: var( --arvy-form-lien-survol, #2E5DFF ); }

.arvy-formulaire .arvy-formulaire__direct a:focus-visible {
	outline: var( --arvy-form-focus-epaisseur, 2px ) solid var( --arvy-form-focus-couleur, #2E5DFF );
	outline-offset: 2px;
	box-shadow: none;
}

.arvy-formulaire .arvy-formulaire__mention {
	margin: var( --arvy-form-mention-haut, 8px ) 0 0;
	color: var( --arvy-form-mention-couleur, #6B7477 );
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
}

/* ─── La carte contact ──────────────────────────────────────────────── */

.arvy-formulaire__visuel {
	display: block;
	margin: 0;
	overflow: hidden;
	border-radius: var( --arvy-form-photo-rayon, 20px );
	background: var( --arvy-form-photo-fond, #EFEBE4 );
	aspect-ratio: var( --arvy-form-photo-format, 5 / 4 );
}

.arvy-formulaire .arvy-formulaire__visuel img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var( --arvy-form-photo-cadrage, center center );
}

.arvy-formulaire__carte { margin-top: var( --arvy-form-carte-haut, 20px ); }

.arvy-formulaire .arvy-formulaire__nom {
	margin: 0;
	color: var( --arvy-form-nom-couleur, #1A1A1B );
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.5px;
}

.arvy-formulaire .arvy-formulaire__role {
	margin: var( --arvy-form-role-haut, 8px ) 0 0;
	color: var( --arvy-form-role-couleur, #6B7477 );
	font-size: 13px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 1.6px;
	text-transform: uppercase;
}

.arvy-formulaire__coordonnees {
	list-style: none;
	margin: var( --arvy-form-coord-haut, 20px ) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var( --arvy-form-coord-ecart, 12px );
}

.arvy-formulaire__coordonnee {
	display: flex;
	align-items: center;
	gap: var( --arvy-form-coord-picto-ecart, 10px );
	color: var( --arvy-form-coord-couleur, #1A1A1B );
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	transition: color .25s ease;
}

a.arvy-formulaire__coordonnee:hover,
a.arvy-formulaire__coordonnee:focus { color: var( --arvy-form-coord-survol, #2E5DFF ); }

a.arvy-formulaire__coordonnee:focus-visible {
	outline: var( --arvy-form-focus-epaisseur, 2px ) solid var( --arvy-form-focus-couleur, #2E5DFF );
	outline-offset: 3px;
	box-shadow: none;
	border-radius: 4px;
}

.arvy-formulaire__picto {
	flex: 0 0 auto;
	width: var( --arvy-form-coord-picto, 18px );
	height: var( --arvy-form-coord-picto, 18px );
	color: var( --arvy-form-coord-picto-couleur, #2E5DFF );
}

.arvy-formulaire__picto svg { display: block; width: 100%; height: 100%; }

/* ─── Apparition au défilement ──────────────────────────────────────── */
/* Le bouton est exclu : il porte déjà ses cinq transitions (règle 38). */

.arvy-formulaire [data-arvy-apparition],
.arvy-formulaire__conteneur--formulaire .elementor-field-group:not( .elementor-field-type-submit ) {
	transition:
		opacity var( --arvy-form-app-duree, 1.2s ) var( --arvy-form-app-courbe, cubic-bezier(0.16, 1, 0.3, 1) ) var( --arvy-form-app-delai, 0s ),
		transform var( --arvy-form-app-duree, 1.2s ) var( --arvy-form-app-courbe, cubic-bezier(0.16, 1, 0.3, 1) ) var( --arvy-form-app-delai, 0s );
}

.arvy-formulaire.est-en-attente [data-arvy-apparition],
.arvy-formulaire.est-en-attente .elementor-field-group:not( .elementor-field-type-submit ),
.arvy-formulaire.est-en-attente .elementor-form .elementor-button {
	opacity: 0;
	transform: translateY( var( --arvy-form-app-montee, 32px ) );
}

.arvy-formulaire.est-en-attente .arvy-formulaire__visuel img { transform: scale( var( --arvy-form-app-zoom, 1.12 ) ); }
.arvy-formulaire .arvy-formulaire__visuel img { transition: transform 1.6s var( --arvy-form-app-courbe, cubic-bezier(0.16, 1, 0.3, 1) ); }

@media ( prefers-reduced-motion: reduce ) {
	.arvy-formulaire.est-en-attente [data-arvy-apparition],
	.arvy-formulaire.est-en-attente .elementor-field-group,
	.arvy-formulaire.est-en-attente .elementor-form .elementor-button { opacity: 1 !important; transform: none !important; }
}

/* ─── Replis par appareil ───────────────────────────────────────────── */
/* Règle 37 : ces blocs ne posent QUE des variables. Écrire ici une
   propriété finale (gap, width, font-size d'un élément piloté par
   variable) annulerait le réglage du panneau en tablette et en mobile
   (piège 125). Seules les tailles de texte restent des propriétés : le
   CSS généré les vise avec une classe de plus et l'emporte (piège 91). */

@media ( max-width: 1024px ) {
	.arvy-formulaire {
		--arvy-form-sens: column;
		--arvy-form-aligne: stretch;
		--arvy-form-largeur-forcee: 100%;
		--arvy-form-bouton-largeur: 100%;
		--arvy-form-ecart: 40px;
		--arvy-form-photo-format: 1 / 1;
		--arvy-form-photo-rayon: 20px;
		--arvy-form-entete-bas: 28px;
		--arvy-form-app-montee: 28px;
	}
	.arvy-formulaire .arvy-formulaire__titre { font-size: 30px; letter-spacing: -0.8px; }
	.arvy-formulaire .elementor-form .elementor-button { font-size: 17px; letter-spacing: -1.5px; }
	.arvy-formulaire .arvy-formulaire__nom { font-size: 22px; }
}

@media ( max-width: 767px ) {
	.arvy-formulaire {
		--arvy-form-ecart: 32px;
		--arvy-form-photo-format: 3 / 4;
		--arvy-form-photo-rayon: 16px;
		--arvy-form-entete-bas: 24px;
		--arvy-form-carte-haut: 16px;
	}
	.arvy-formulaire .arvy-formulaire__titre { font-size: 26px; letter-spacing: -0.6px; }
	.arvy-formulaire .elementor-form .elementor-button { font-size: 19px; letter-spacing: -1.2px; }
	.arvy-formulaire .arvy-formulaire__nom { font-size: 20px; }
	.arvy-formulaire .elementor-field-group .elementor-field-textual,
	.arvy-formulaire .elementor-field-group .elementor-select-wrapper select { font-size: 16px; }
}