/* =====================================================================
   Formulaires (Gravity Forms)

   Feuille separee, et non une section de theme.css, pour une raison d'ordre
   de chargement : Gravity Forms enqueue ses quatre feuilles APRES celle du
   theme, dont un framework de 350 Ko. Toute regle de formulaire posee dans
   theme.css restait donc sans effet.

   Personnalisation par VARIABLES, et non par surcharge de regles. Le
   framework utilise des selecteurs montant a (0,12) - impossible a battre
   proprement - mais il expose plus de 600 variables CSS prevues pour cela.
   On redefinit celles qui portent le design ; le reste du plugin continue de
   fonctionner (grille des champs, etats de validation, accessibilite).

   ATTENTION - cette feuille n'a pas la main sur tout. Le plugin injecte, apres
   elle, un <style> inline sur `#gform_wrapper_N[data-form-index].gform-theme`,
   soit (1,2,0) : les variables qu'il couvre ne peuvent pas etre redefinies
   ici, une declaration de ce fichier y reste sans effet visible. Elles se
   reglent par le filtre gform_default_styles(), dans functions.php - voir
   gaec_gform_default_styles(). Y vivent aujourd'hui : la taille des champs,
   la couleur des bordures, celle des libelles, le fond, l'arrondi et les
   couleurs du bouton.

   Avant d'ajouter une variable ici, verifier qu'elle n'est pas dans ce bloc
   inline :
       curl -s <URL de la page> | grep -o '\-\-gf-ctrl-[a-z-]*:'

   Le markup vient du plugin, on ne fait que l'habiller (regle 14).
   ===================================================================== */

.gform_wrapper,
.gform_wrapper.gravity-theme,
.gform_wrapper .gform-theme--framework {
	/* --- Champs --- */
	--gf-ctrl-bg-color: var(--wp--preset--color--base);
	--gf-ctrl-bg-color-focus: var(--wp--preset--color--base);
	--gf-ctrl-bg-color-hover: var(--wp--preset--color--base);
	--gf-ctrl-border-color-hover: var(--wp--preset--color--gold-dark);
	--gf-ctrl-border-color-focus: var(--wp--preset--color--primary);
	--gf-ctrl-border-style: solid;
	--gf-ctrl-border-width: 1.5px;
	--gf-ctrl-radius: 10px;

	/* Focus : halo vert discret plutot que le contour par defaut du plugin.
	   Le mockup pose `outline: none`, ce qui rendrait la navigation au
	   clavier invisible - on garde donc un reperage, dans les couleurs du
	   site. */
	--gf-ctrl-outline-color-focus: rgba(91, 170, 63, 0.25);
	--gf-ctrl-outline-width-focus: 3px;
	--gf-ctrl-outline-style: solid;
	--gf-ctrl-outline-offset: 0;
	--gf-ctrl-font-size: 15px;
	--gf-ctrl-padding-x: 14px;

	/* Pas de --gf-ctrl-padding-y ici : le plugin le laisse a 0 et donne aux
	   champs une hauteur fixe (--gf-ctrl-size), dont il derive la line-height.
	   Un padding vertical ne repousse donc pas la hauteur, il rogne la boite
	   de contenu en laissant la ligne de texte a sa taille : avec 12px sur
	   38px de haut, il ne restait que 14px de contenu pour une ligne de 38px,
	   le texte sortait du cadre et le select - qui clippe toujours son
	   contenu - s'affichait vide. La hauteur se regle par inputSize, cote
	   filtre. La zone de texte, elle, dissocie hauteur et line-height : elle
	   accepte bien un padding vertical (plus bas). */

	/* --- Libelles --- */
	--gf-ctrl-label-font-size-primary: 13px;
	--gf-ctrl-label-font-weight-primary: 600;

	/* --- Zone de texte --- */
	--gf-ctrl-textarea-height: 120px;
	--gf-ctrl-textarea-radius: 10px;
	--gf-ctrl-textarea-resize: vertical;
	--gf-ctrl-textarea-padding-y: 12px;

	/* --- Bouton d'envoi --- */
	--gf-ctrl-btn-bg-color-primary: var(--wp--preset--color--forest);
	--gf-ctrl-btn-bg-color-hover-primary: var(--wp--preset--color--primary-dark);
	--gf-ctrl-btn-bg-color-focus-primary: var(--wp--preset--color--primary-dark);
	--gf-ctrl-btn-color-primary: #fff;
	--gf-ctrl-btn-border-color-primary: transparent;
	--gf-ctrl-btn-border-width-primary: 0;
	--gf-ctrl-btn-radius: 999px;
	--gf-ctrl-btn-font-weight: 700;
	--gf-ctrl-btn-padding-y: 15px;
	--gf-ctrl-btn-icon-font-size: 18px;
	--gf-ctrl-btn-icon-gap: 9px;
	--gf-ctrl-btn-icon-color-primary: currentColor;
}

/* --- Ce que les variables ne couvrent pas --- */

/* Ecart entre champs : 18px dans le mockup, en lignes comme en colonnes. */
.gform_wrapper .gform_fields {
	row-gap: 18px;
	column-gap: 18px;
}

.gform_wrapper .gfield_label {
	margin-bottom: 7px;
	letter-spacing: 0;
	text-transform: none;
}

.gform_wrapper .gfield_required {
	color: #c62828;
}

/* Le filtre vide la legende des champs requis mais le plugin conserve son
   paragraphe : sans ceci, il laisse un blanc en tete de formulaire. */
.gform_wrapper .gform_required_legend:empty,
.gform_wrapper .gform_heading:empty {
	display: none;
}

/* Consentement.

   Le plugin rend la case et son libelle en FRERES dans
   .ginput_container_consent, et non le libelle enveloppant la case : c'est
   donc ce conteneur qui porte le flex, pas le label. Le <legend> qui repete
   l'intitule du champ au-dessus est masque, le mockup n'affichant que la
   ligne de consentement. */
.gform_wrapper .gfield--type-consent .gfield_label,
.gform_wrapper .gfield--type-consent legend.gfield_label {
	display: none;
}

.gform_wrapper .ginput_container_consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.gform_wrapper .gfield_consent_label {
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--wp--preset--color--text-soft);
	margin: 0;
	letter-spacing: 0;
	text-transform: none;
}

.gform_wrapper .ginput_container_consent input[type="checkbox"] {
	accent-color: var(--wp--preset--color--primary);
	width: 17px;
	height: 17px;
	margin: 2px 0 0;
	flex: none;
}

/* Bouton pleine largeur, comme dans le mockup.

   Le framework ne pose pas `width` mais `inline-size: var(--gf-local-width)`,
   avec la variable figee a `auto` dans une regle en (0,12) : une declaration
   `width` du theme, meme correcte, restait donc sans effet. On agit sur la
   propriete reellement utilisee, et le !important est ici le seul moyen
   raisonnable de passer devant une telle specificite. */
.gform_wrapper .gform_footer {
	display: block;
	margin: 24px 0 0;
	padding: 0;
}

.gform_wrapper .gform_footer .gform_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	inline-size: 100% !important;
	font-family: inherit;

	/* 15px au mockup. inputSize:lg, choisi pour la hauteur des champs, tire
	   aussi la taille du bouton (--gf-ctrl-btn-font-size-lg, 16px), et cette
	   variable fait partie de celles que le bloc inline verrouille. On pose
	   donc la valeur directement sur le bouton - avec !important, car le
	   framework applique lui-meme font-size sur ce bouton depuis un selecteur
	   en (0,12), comme pour inline-size juste au-dessus. */
	font-size: 15px !important;
	letter-spacing: 0.03em;
	cursor: pointer;
}

/* Le reset du plugin applique `all: unset` a ses descendants : sans cette
   remise en forme, la police d'icones saute et le mot "send" s'affiche. */
.gform_wrapper .gform_footer .gform_button .material-symbols-outlined {
	font-family: "Material Symbols Outlined";
	font-size: 18px;
	line-height: 1;
	color: currentColor;
}

/* Messages de validation. */
.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
	font-size: 13px;
	color: #c62828;
	margin-top: 6px;
}