/**
 * Gravity Forms (thème Orbital) — formulaire de la page Inscription.
 *
 * Chargé uniquement sur /inscription/ (functions.php).
 * Maquette Figma « Socialter — site web 2026 », formulaire de la page Contact
 * (2045:2924) et composants Champ (1:491) et Bouton (1:403).
 *
 * - Champ : fond blanc, bordure 1px accent clair, rayon 6px, padding 12px.
 *   Libellé flottant : vide, il tient lieu de placeholder (variante « vide ») ;
 *   dès la saisie, il monte au-dessus en Note 13px (variante « rempli »).
 * - Rempli ou focus : bordure 2px accent ; erreur : rouge-erreur.
 * - Champs empilés sur une colonne, 18px entre chaque.
 * - Bouton : variante CTA pleine largeur, survol « CTA - survol », inactif : voile blanc (btn-principal-deactivated).
 * - Erreurs : message rouge au-dessus du groupe de champs, géré par gravity-forms-inscription.js.
 *
 * Dimensions en rem (base 16px). Couleurs et police : presets du theme.json.
 * Les sélecteurs commencent par .gform-theme.gform_wrapper pour passer
 * devant ceux d'Orbital (dont les exclusions sont dans des :where()).
 */

.gform-theme.gform_wrapper {
	--stl-form-dark: var(--wp--preset--color--primary-alt-accent, #00264d);
	--stl-form-accent: var(--wp--preset--color--primary-alt, #80caff);
	--stl-form-light: var(--wp--preset--color--primary-accent, #ddf1ff);
	--stl-form-white: var(--wp--preset--color--base, #fff);
	--stl-form-label: #616161;
	--stl-form-error: #d63600; /* rouge-erreur (Figma) */
	--stl-form-inactive: #919191;
	--stl-form-font: var(--wp--preset--font-family--primary, "Rethink Sans", ui-sans-serif, system-ui, sans-serif);

	--stl-form-gap: 1.125rem;   /* 18px entre les champs */
	--stl-form-pad: 0.75rem;    /* 12px de padding dans le champ */
	--stl-form-inner-gap: 0.375rem; /* 6px entre libellé et saisie */
	--stl-form-radius: var(--wp--preset--border-radius--sm, 0.375rem);
	--stl-form-border: 0.0625rem;

	/* Montée du libellé et agrandissement du champ : même durée, même courbe
	   (accélération et décélération douces). */
	--stl-form-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

	/* API CSS de Gravity Forms : espacements et couleur d'erreur. */
	--gf-form-gap-y: var(--stl-form-gap);
	--gf-field-gap-y: var(--stl-form-gap);
	--gf-form-footer-margin-y-start: var(--stl-form-gap);
	--gf-color-danger: var(--stl-form-error);
	--gf-color-danger-rgb: 214, 54, 0;
	--gf-form-validation-radius: var(--stl-form-radius);

	color: var(--stl-form-dark);
	font-family: var(--stl-form-font);
	font-size: var(--wp--preset--font-size--small, 1rem);
	line-height: var(--wp--custom--line-height--body, 1.4);
	letter-spacing: var(--wp--custom--letter-spacing--wide, 0.01em);
}

/* --------------------------------------------------------------------------
   Libellés hors champ (légendes de groupe, mention des champs requis) : Note
   -------------------------------------------------------------------------- */

.gform-theme.gform_wrapper .gfield > legend.gfield_label,
.gform-theme.gform_wrapper .gfield > .gfield_label,
.gform-theme.gform_wrapper .gform_required_legend {
	display: block;
	margin: 0 0 var(--stl-form-gap);
	padding: 0;
	color: var(--stl-form-dark);
	font-family: var(--stl-form-font);
	font-size: var(--wp--preset--font-size--note, 0.8125rem);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--tight, 1.1);
	letter-spacing: 0;
}

.gform-theme.gform_wrapper .gfield_required {
	color: inherit;
}

/* --------------------------------------------------------------------------
   Une colonne : sous-champs (prénom / nom, confirmations) empilés
   -------------------------------------------------------------------------- */

.gform-theme.gform_wrapper .ginput_complex.gform-grid-row {
	margin-inline: 0;
	row-gap: var(--stl-form-gap);
}

.gform-theme.gform_wrapper .ginput_complex > .gform-grid-col {
	flex: none;
	inline-size: 100%;
	padding-inline: 0;
}

.gform-theme.gform_wrapper .ginput_complex > .gf_clear {
	display: none;
}

/* --------------------------------------------------------------------------
   Champ à libellé flottant
   Vide : le libellé est à la place de la saisie (16px, gris foncé), champ de 46px.
   Rempli : il monte (Note 13px, #616161), bordure 2px accent, champ de 61px.
   « Rempli » = input:not(:placeholder-shown), d'où le placeholder=" " ajouté
   par functions.php. Sans placeholder, le libellé reste toujours en haut.
   -------------------------------------------------------------------------- */

/* Conteneurs dont le libellé passe dans le champ. */
.gform-theme.gform_wrapper .ginput_complex > .gform-grid-col:has(> .gform-field-label--type-sub),
.gform-theme.gform_wrapper .gfield:has(> .gfield_label + .ginput_container > input) {
	position: relative;
}

/* Rempli (ou prérempli par le navigateur) : place pour le libellé au-dessus
   de la saisie. 0.7 = hauteur de capitale de Rethink Sans. */
.gform-theme.gform_wrapper .ginput_complex > .gform-grid-col:has(> .gform-field-label--type-sub):has(input:is(:not(:placeholder-shown), :autofill)),
.gform-theme.gform_wrapper .gfield:has(> .gfield_label + .ginput_container > input:is(:not(:placeholder-shown), :autofill)) {
	--stl-form-pad-top: calc(var(--stl-form-pad) - var(--stl-form-border) + 0.8125rem * 0.7 + var(--stl-form-inner-gap));
}

.gform-theme.gform_wrapper .ginput_complex > .gform-grid-col > .gform-field-label--type-sub,
.gform-theme.gform_wrapper .gfield:has(> .gfield_label + .ginput_container > input) > .gfield_label {
	position: absolute;
	z-index: 1;
	inset-block-start: var(--stl-form-pad);
	inset-inline: var(--stl-form-pad);
	display: block;
	/* Marge de rognage : jambages et accents restent visibles malgré overflow. */
	margin: -0.25em 0;
	padding: 0.25em 0;
	overflow: hidden;
	color: var(--stl-form-label-color, var(--wp--preset--color--secondary, #565656));
	font-family: var(--stl-form-font);
	font-size: var(--wp--preset--font-size--small, 1rem);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--body, 1.4);
	letter-spacing: var(--wp--custom--letter-spacing--wide, 0.01em);
	white-space: nowrap;
	text-overflow: ellipsis;
	/* Le clic traverse le libellé et donne le focus à la saisie. */
	pointer-events: none;
	transition:
		inset-block-start var(--stl-form-transition),
		font-size var(--stl-form-transition),
		line-height var(--stl-form-transition),
		letter-spacing var(--stl-form-transition),
		color var(--stl-form-transition);
}

.gform-theme.gform_wrapper .ginput_complex > .gform-grid-col:has(input:is(:not(:placeholder-shown), :autofill)) > .gform-field-label--type-sub,
.gform-theme.gform_wrapper .gfield:has(> .gfield_label + .ginput_container > input:is(:not(:placeholder-shown), :autofill)) > .gfield_label {
	/* Haut de capitale à 12px du bord, comme le text-box-trim de la maquette :
	   0.191em = demi-interlignage (1.1 − 1.302) / 2 + ascendante 0.992 − capitale 0.7. */
	inset-block-start: calc(var(--stl-form-pad) - 0.191em);
	--stl-form-label-color: var(--stl-form-label);
	font-size: var(--wp--preset--font-size--note, 0.8125rem);
	line-height: var(--wp--custom--line-height--tight, 1.1);
	letter-spacing: 0;
}

.gform-theme.gform_wrapper .gfield input:is([type="text"], [type="email"], [type="password"], [type="tel"], [type="url"], [type="number"]) {
	box-sizing: border-box;
	inline-size: 100%;
	block-size: auto;
	min-block-size: 0;
	margin: 0;
	padding:
		var(--stl-form-pad-top, calc(var(--stl-form-pad) - var(--stl-form-border)))
		calc(var(--stl-form-pad) - var(--stl-form-border))
		calc(var(--stl-form-pad) - var(--stl-form-border));
	border: var(--stl-form-border) solid var(--stl-form-light);
	border-radius: var(--stl-form-radius);
	outline: 0.125rem solid transparent; /* visible en mode contraste élevé */
	outline-offset: 0;
	background-color: var(--stl-form-white);
	box-shadow: none;
	color: var(--stl-form-dark);
	font-family: var(--stl-form-font);
	font-size: var(--wp--preset--font-size--small, 1rem);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--body, 1.4);
	letter-spacing: var(--wp--custom--letter-spacing--wide, 0.01em);
	/* padding : c'est lui qui fait grandir le champ (46 → 61px) à la saisie. */
	transition:
		border-color var(--stl-form-transition),
		box-shadow var(--stl-form-transition),
		padding var(--stl-form-transition);
}

/* Le libellé fait office de placeholder : un éventuel placeholder réglé
   dans Gravity Forms est masqué pour ne pas se superposer. */
.gform-theme.gform_wrapper .gfield input:is([type="text"], [type="email"], [type="password"], [type="tel"], [type="url"], [type="number"])::placeholder {
	color: transparent;
	opacity: 0;
}

/* Focus ou rempli : bordure 2px sans décaler la mise en page
   (1px de bordure + 1px d'ombre interne). :where() garde la spécificité
   de la règle de base, pour que l'état d'erreur l'emporte. */
.gform-theme.gform_wrapper .gfield input:is([type="text"], [type="email"], [type="password"], [type="tel"], [type="url"], [type="number"]):where(:focus, [placeholder]:not(:placeholder-shown)) {
	border-color: var(--stl-form-accent);
	box-shadow: inset 0 0 0 var(--stl-form-border) var(--stl-form-accent);
}

/* Mêmes sélecteurs que les règles de base, pour la même spécificité. */
@media (prefers-reduced-motion: reduce) {
	.gform-theme.gform_wrapper .gfield input:is([type="text"], [type="email"], [type="password"], [type="tel"], [type="url"], [type="number"]),
	.gform-theme.gform_wrapper .ginput_complex > .gform-grid-col > .gform-field-label--type-sub,
	.gform-theme.gform_wrapper .gfield:has(> .gfield_label + .ginput_container > input) > .gfield_label {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Erreurs
   -------------------------------------------------------------------------- */

.gform-theme.gform_wrapper .gfield input:is([type="text"], [type="email"], [type="password"], [type="tel"], [type="url"], [type="number"])[aria-invalid="true"] {
	border-color: var(--stl-form-error);
	box-shadow: none;
	color: var(--stl-form-error);
}

.gform-theme.gform_wrapper .gfield input:is([type="text"], [type="email"], [type="password"], [type="tel"], [type="url"], [type="number"])[aria-invalid="true"]:focus {
	border-color: var(--stl-form-error);
	box-shadow: inset 0 0 0 var(--stl-form-border) var(--stl-form-error);
}

.gform-theme.gform_wrapper .ginput_complex > .gform-grid-col:has(input[aria-invalid="true"]) > .gform-field-label--type-sub,
.gform-theme.gform_wrapper .gfield:has(> .gfield_label + .ginput_container > input[aria-invalid="true"]) > .gfield_label {
	color: var(--stl-form-error);
}

/* Message d'erreur : Note 13px rouge, au-dessus du champ ou du groupe de champs
   (déplacé là par gravity-forms-inscription.js). */
.gform-theme.gform_wrapper .gfield .gfield_validation_message {
	margin: 0 0 var(--stl-form-inner-gap);
	padding: 0;
	border: 0;
	background: none;
	color: var(--stl-form-error);
	font-family: var(--stl-form-font);
	font-size: var(--wp--preset--font-size--note, 0.8125rem);
	line-height: var(--wp--custom--line-height--tight, 1.1);
	letter-spacing: 0;
}

.gform-theme.gform_wrapper .gfield .gfield_validation_message[hidden] {
	display: none;
}

.gform-theme.gform_wrapper .gform_validation_errors {
	box-shadow: none;
}

.gform-theme.gform_wrapper .gform_validation_errors .gform_submission_error {
	font-family: var(--stl-form-font);
}

/* --------------------------------------------------------------------------
   Bouton d'envoi
   Orbital le cible avec input[type=submit].button.gform_button (0,6,1) :
   sélecteurs renforcés d'une classe (0,7,0).
   -------------------------------------------------------------------------- */

.gform-theme.gform-theme--framework.gform_wrapper .gform_footer .button.gform_button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	inline-size: 100%;
	min-block-size: 2.75rem;
	margin: 0;
	padding: var(--wp--preset--spacing--xx-small, 0.375rem) 1.125rem;
	border: 0.03125rem solid var(--stl-form-dark);
	border-radius: var(--stl-form-radius);
	background-color: var(--stl-form-accent);
	box-shadow: none;
	opacity: 1;
	color: var(--stl-form-dark);
	font-family: var(--stl-form-font);
	font-size: var(--wp--preset--font-size--chapo-petit, 1.0625rem);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--tight, 1.1);
	letter-spacing: var(--wp--custom--letter-spacing--wide, 0.01em);
	text-decoration: none;
	text-transform: none;
	text-align: center;
	cursor: pointer;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.gform-theme.gform-theme--framework.gform_wrapper .gform_footer .button.gform_button[type="submit"]:not(.btn-principal-deactivated):hover {
	border-width: 0.09375rem;
	background-color: var(--stl-form-accent);
	box-shadow: var(--wp--preset--shadow--marketing, 0 0.25rem 0 0 #00264d);
	transform: translateY(-0.25rem);
	color: var(--stl-form-dark);
}

.gform-theme.gform-theme--framework.gform_wrapper .gform_footer .button.gform_button[type="submit"]:focus-visible {
	outline: 0.125rem solid var(--stl-form-dark);
	outline-offset: 0.125rem;
}

/* Inactif : la classe btn-principal-deactivated (button.css, ajoutée par
   gravity-forms-inscription.js) ajoute le voile blanc ; ici seulement ce que
   les règles ci-dessus imposeraient encore (curseur). */
.gform-theme.gform-theme--framework.gform_wrapper .gform_footer .button.gform_button[type="submit"].btn-principal-deactivated {
	box-shadow: none;
	transform: none;
	cursor: not-allowed;
}