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


/*
INPUT */
.formInput,
.formTextarea,
.formSelect {-webkit-appearance: none;-moz-appearance: none;appearance: none;border: 1px solid var(--color-blue);width: 100%;box-sizing:border-box;background-color: #fff;font-size: 1.002em;font-weight: normal;line-height: 1.2;display: block;padding: 1.002em 1.4002em;border-radius: 0;color: var(--color-black);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 1.4002em center;background-size: 1.25002em;/* max-width: 100%; *//* width: auto; */padding-right: 5.002em;}


/*
TEXTAREA
Styles de base dans formInput */
.formTextarea {width: 100%;max-width: 100%;min-height: 8.002em;height: 8.002em;}


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


/*
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 2.002em 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.5002em;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.5002em; height: 1.5002em; background: #fff; background-position: 50% 50%; background-repeat: no-repeat; border: 1px solid var(--color-blue); 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-blue); box-shadow: inset 0 0 0 0.3em #ffffff;}

		/* 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%; }


/*
FORM GROUP et FORM ITEM
Pour espacement entre groupes de form items. */
.formGroup {--spacing: 2.5002em; }
.formItem { }
.formItem__text {display: block;margin-bottom: 1.002em;}

* + .formGroup, 
* + .formItem {margin-top: var(--spacing);}

	/* Spacing */
	@media (max-width:46rem) {
		.formGroup {--spacing: 1.5002em; }
	}

	/*
	ALT :
	2 cols. */
	.formGroup--half {display: flex;justify-content: space-between; }
	.formGroup--half .formItem {width: 45%; flex: 0 0 auto; margin-top: 0; }

		/* Break cols */
		@media (max-width:46rem) {
			.formGroup--half {display: block; }
			.formGroup--half .formItem {width: 100%; margin-top: var(--spacing); }
		}

	/*
	ALT :
	Form send. */
	.formGroup--send {--spacing: calc(0.5002 * var(--base-spacing)); text-align: center; }


/*
FORM LABEL */
.formLabel {font-size: 1.1em;line-height: 1;display: block;margin-bottom: 0.5em;font-weight: bold;}

	/* On dark */
	.onDark .formLabel {color:#fff;}


/*
PLACEHOLDER TEXT */
::placeholder {color: rgba(0,0,0,0.5);}

	/* On dark */
	.onDark ::placeholder {color: rgba(255,255,255,0.25);}


/*
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; }