/* .............................................................................
FORMS
............................................................................. */
.form { }
* + .form {margin-top: 3em;}


/*
FORM GROUP et FORM ITEM
Pour espacement entre groupes de form items. */
.formGroup {--spacingX: 5%;--spacingY: 3em;display: flex;justify-content: space-between;align-items: flex-end;gap: var(--spacingY) var(--spacingX);}
* + .formGroup {margin-top: var(--spacingY);}

	/* Stacked */
	@media (max-width:46rem) {
		.formGroup {--spacingY:1.5em; flex-wrap: wrap; }
	}

.formGroup__item {flex:1 1 auto; width: 100%; margin-top: 0;}
.formGroup__text {display: block;margin-bottom: 1em;}

	/*
	ALT :
	Form send. */
	.formGroup--send {--spacingY: calc(0.5 * var(--base-spacing)); }


/*
FORM LABEL */
.formGroup__label {font-size: 1.3em;line-height: 1;display: block;margin-bottom: 0.5em;font-weight: 500;}


/*
INPUT */
.formInput,
.formTextarea,
.formSelect {-webkit-appearance: none;-moz-appearance: none;appearance: none;border: none;border-bottom: 1px solid var(--color-gray);width: 100%;box-sizing:border-box;background-color: transparent;font-size: 1.3em;font-weight: normal;line-height: 1.2;display: block;padding: 0.5em 0.1em;border-radius: 0;color: var(--color-base);transition: border-color 0.3s ease;}

	/* Eviter le zoom iOS sur form sur mobile. */
	@media (max-width:46rem) {
		.formInput,
		.formTextarea {font-size: 16px;}
	}


/*
SELECT */
.formSelect {background-image: url(../../img/icons/icon-arrow-dropdown.svg);background-repeat: no-repeat;background-position: right 0.1em center;background-size: 1.7em;padding-right: 1.7em;}


/*
TEXTAREA
Styles de base dans formInput */
.formTextarea {width: 100%;max-width: 100%;min-height: 8em;height: 8em;padding: 0.5em 0.65em;border: 1px solid var(--color-gray);}


/*
FOCUS */
.formInput:focus,
.formTextarea:focus,
.formSelect:focus {border-color:var(--color-base);}


/*
CHECKBOX */
.formCheckbox {display: inline-block;margin-right: 5px;}


/*
CHECKBOX & RADIO
Custom style, compatible avec WPCF7.
Dans le plugin :
- Cocher la case "Entourer chaque element avec un libelle."
- Ajouter .formCF7Checkbox pour un checkbox
- Ajouter .formCF7Radio pour un radio. */
.formCF7Checkbox, 
.formCF7Radio {display: block;line-height: 1.2;}

	/* Wrapper (WPCF = .wpcf7-list-item) */
	.formCF7Checkbox > *,
	.formCF7Radio > * {display: inline-block;margin: 0 2em 0 0;}
	.formCF7Checkbox > *:last-child,
	.formCF7Radio > *:last-child {margin-right:0; }

	/* Label wraps the input and text content */
	.formCF7Checkbox label,
	.formCF7Radio label {display: block; }

	/* Hide the default radio / checkbox, because we want to custom style it. */
	.formCF7Checkbox input,
	.formCF7Radio input {position: absolute;opacity: 0;visibility: hidden;}

	/* Label styles */
	.formCF7Checkbox label > span,
	.formCF7Radio label > span {cursor: pointer;display: block;padding-top: 0.2em;padding-bottom: 0.2em;padding-left: 2.5em;position: relative;}

	/* Les styles custom sont ici */
	.formCF7Checkbox input + span::before,
	.formCF7Radio input + span::before {position: absolute; display: block; content: ''; left: 0; top: 0; width: 1.5em; height: 1.5em; background: var(--color-white); background-position: 50% 50%; background-repeat: no-repeat; border: 1px solid var(--color-base); border-radius: 0; cursor: pointer; transition: all 0.3s cubic-bezier(0, 0, 0.3, 1);}

		/* Active + focus */
		.formCF7Checkbox input:active + span::before,
		.formCF7Radio input:active + span::before { }

		/* Checked */
		.formCF7Checkbox input:checked + span::before,
		.formCF7Radio input:checked + span::before {background-color: var(--color-base); box-shadow: inset 0 0 0 0.3em var(--color-white);}

		/* Focus: seulement si user utilise keyboard. */
		[data-whatintent='keyboard'] .formCF7Checkbox input:focus + span::before,
		[data-whatintent='keyboard'] .formCF7Radio input:focus + span::before {outline:2px solid #4d90fe;}

		/* Disabled */
		.formCF7Checkbox input:disabled + span,
		.formCF7Radio input:disabled + span {cursor: default;}
		.formCF7Checkbox input:disabled + span::before,
		.formCF7Radio input:disabled + span::before {background-color: #e8e8e8;opacity: 0.5;cursor: auto;}

	/* Radio mods */
	.formCF7Radio input + span::before {border-radius: 50%; }


/*
PLACEHOLDER TEXT */
::placeholder {color: rgba(0 0 0 / 30%);}


/*
CONTACT FORM 7
Quand on le met sur WP avec CF7, ces styles sont utiles. */
.wpcf7-form-control-wrap {display: block; position: static;}
.wpcf7-form.sent .formGroup { display: none; }
div.wpcf7-response-output { margin-left: 0 !important; margin-right: 0 !important; }
.formInput.wpcf7-not-valid { border: 3px solid red; }
.wpcf7-not-valid-tip { display: none !important; }