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

	/* Smaller */
	@media (max-width:47rem) {
		.iHead + .form {margin-top: 2em; }
	}


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

	/* On dark */
	.onDark .formInput,
	.onDark .formTextarea,
	.onDark .formSelect {border-color:#fff; background-color: #fff; }

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


/*
SELECT
Sera remplacer par un custom JS select. */
.formSelect {background-image: url(../../img/icons/icon-arrow-dropdown.svg);background-repeat: no-repeat;background-position: right 0.9em center;background-size: 2.86em;/* max-width: 100%; *//* width: auto; */padding-right: 4em;color: #7e8082;}
.formSelect::-ms-expand {display: none;}

	/* On dark */
	.onDark .formSelect {background-image: url(../../img/icons/icon-arrow-dropdown-on-dark.svg); }
	.onDark .formSelect option {color: #2e2e2e;}


/*
SELECT2
Styles pour le plugin Select2. */
.jsDropdown {opacity: 0;}

/* Container */
.select2-container.select2-container--default {font-size: 1em;line-height: 1;}

	/* Shown selected value */
	.select2.select2-container .select2-selection {border-radius: 0;background-color: var(--color-bg-base);padding: 1.35em 1.5em 1.05em 1.5em;padding-right: 4em;border: 1px solid var(--color-base);/* border: none; */height: auto;background-image: url(../../img/icons/icon-arrow-dropdown.svg);background-repeat: no-repeat;background-position: right 0.9em center;background-size: 2.86em;}
	.select2.select2-container .select2-selection--single .select2-selection__rendered {color: var(--color-orange);line-height: 1;padding: 0;margin: 0;}
	.select2.select2-container .select2-selection--single .select2-selection__placeholder {color: #000;}

		/* ARROW : Hide */
		.select2.select2-container .select2-selection--single .select2-selection__arrow {display: none;}

	/* Opened */
	.select2-container.select2-container--open { }
	.select2-container.select2-container--open .select2-selection {background-color: var(--color-green); }

/* Dropdown */
.select2-container.select2-container--default .select2-dropdown {border-radius: 0;background-color: var(--color-green);padding: 0 0 1em 0;border: none;color: #fff;margin-top: -1px;}
.select2-container.select2-container--default .select2-results { }
.select2-container.select2-container--default .select2-results__options { }
.select2-container.select2-container--default .select2-results > .select2-results__options {max-height:none; }
.select2-container.select2-container--default .select2-results__option {padding: 0.6em 1.5em;position: relative;transition: color 0.2s;}

	/* If opened above */
	.select2-container.select2-container--default .select2-dropdown--above {margin-top: 0;margin-bottom: -1px;padding: 1em 0 0 0;}

	/* Selected */
	.select2-container.select2-container--default .select2-results__option[aria-selected=true] {background-color: transparent; color:var(--color-orange); }

	/* Hover */
	.select2-container.select2-container--default .select2-results__option--highlighted[aria-selected] {background-color:transparent; color: var(--color-orange); }


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


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


/*
INPUT FILE TYPE
Le input est hidden, toute l'action se passe dans le label.
Le label a l'air d'un bouton, mais dans le meme style qu'un form input.
ELLIPSIS sur le label (pour nom de fichiers trop long) :
Pour que ca fonctionne, parent doit etre overflow:hidden, mais si tu fais ca sur .formItem ou .formGroup, tu t'attires des problemes dans un form dans un lightbox (ca casse le scroll on touch sur input).
Aussi, pour que ca fonctionne dans un flexbox item, on mettre min-width:0 sur le flex child. Voir ici https://css-tricks.com/flexbox-truncated-text/ */
.formInputFile {width: 100%;max-width: 100%;overflow: hidden; padding-bottom: 1px;}
.formInputFile__input {width: 0.1px; height: 0.1px; opacity: 0; visibility:hidden; overflow: hidden; position: absolute; z-index: -1;padding: 0; }

.formInputFileBtn {-webkit-appearance: none;-moz-appearance: none;appearance: none;position:relative;border: 1px solid var(--color-base);background: transparent;cursor: pointer;display: inline-block;font-size: 1em;line-height: 1.2;color: var(--color-orange);margin: 0;padding: 1em 1.4em;text-decoration: none;box-sizing: border-box;text-align: left;width: 100%;}
.formInputFileBtn * {pointer-events: none;}
.formInputFileBtn__label {display: block;position: relative;z-index: 2;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.formInputFileBtn__icon {font-size: 2.86em;display: block;position: absolute;z-index: 2;color: var(--color-orange);right: 0.25em;top: 50%;transform: translate(0, -50%);transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);}
.formInputFileBtn__icon + .formInputFileBtn__label {margin-right: 0.5002em;}

	/* Hover */
	.formInputFileBtn:hover:not(:disabled) {cursor: pointer;}
	.formInputFileBtn:hover:not(:disabled) .formInputFileBtn__icon {transform: translate(20%, -50%);}

	/* Disabled */
	.formInputFileBtn:disabled {opacity: 0.5; cursor: default;}

	/* On dark */
	.onDark .formInputFileBtn {color:#fff; border-color:#fff; }
	.onDark .formInputFileBtn__icon {color:#fff;}


/*
CHECKBOX & RADIO
Custom style, c'est pour ca qu'il y a tant de class. */
.formCheckbox, .formRadio {display: inline-block; margin-right: 2.002em;}
.formCheckbox:last-child, .formRadio:last-child {margin-right:0; }

	/* Hide the default radio / checkbox, because we want to custom style it. */
	.formCheckbox__input, .formRadio__input {position: absolute; opacity: 0;}

	/* Label styles */
	.formCheckbox__label, .formRadio__label {cursor: pointer; display: block; padding-top: 0.1em; padding-left: 2.5002em; position: relative; }

	/* Les styles custom sont ici */
	.formCheckbox__input + .formCheckbox__label::before,
	.formRadio__input + .formRadio__label::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-base); border-radius: 0; cursor: pointer; transition: all 0.3s cubic-bezier(0, 0, 0.3, 1);}

		/* Active + focus */
		.formCheckbox__input:active + .formCheckbox__label::before,
		.formRadio__input:active + .formRadio__label::before { }

		/* Checked */
		.formCheckbox__input:checked + .formCheckbox__label::before,
		.formRadio__input:checked + .formRadio__label::before {background-color: var(--color-orange); box-shadow: inset 0 0 0 0.3em #ffffff;}

		/* Focus: seulement si user utilise keyboard. */
		[data-whatintent='keyboard'] .formCheckbox__input:focus + .formCheckbox__label::before,
		[data-whatintent='keyboard'] .formRadio__input:focus + .formRadio__label::before {outline:2px solid #4d90fe;}

		/* Disabled */
		.formCheckbox__input:disabled + .formCheckbox__label,
		.formRadio__input:disabled + .formRadio__label {cursor: default;}
		.formCheckbox__input:disabled + .formCheckbox__label::before,
		.formRadio__input:disabled + .formRadio__label::before {background-color: #e8e8e8;opacity: 0.5;cursor: auto;}

	/* Radio mods */
	.formRadio__input + .formRadio__label::before {border-radius: 50%; }


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

* + .formGroup, 
* + .formItem {margin-top: 2.7em;}

	/* Spacing */
	@media (max-width:47rem) {
		* + .formGroup, 
		* + .formItem {margin-top: 1.5em;}
	}

	/*
	ALT:
	2 cols. */
	.formGroup--half {display: flex;justify-content: space-between; }
	.formGroup--half .formItem {width: calc(50% - 1.5em); flex: 0 0 auto; margin: 0; }

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

	/*
	ALT:
	4 cols. */
	.formGroup--quarter {display: flex;justify-content: space-between; }
	.formGroup--quarter .formItem {width: calc(25% - 0.5em); flex: 0 0 auto; margin: 0; }

		/* 2 cols */
		@media (max-width:62rem) {
			.formGroup--quarter {flex-wrap: wrap; margin-top: -1em; }
			.formGroup--quarter .formItem {width: calc(50% - 0.5em); margin-top: 1em; }
		}

		/* Break cols */
		@media (max-width:47rem) {
			.formGroup--quarter {display: block;margin: 0;}
			.formGroup--quarter .formItem {width: 100%;margin-top: 1em;}
		}

	/*
	ALT:
	Form send. */
	.formGroup--send {text-align: center;}

		/* Spacing */
		@media (max-width:47rem) {
			.formGroup--send {margin-top:2.7em; }
		}

	/*
	ALT:
	Form send (contact page). */
	.formGroup--sendCF {text-align: right;}

		/* Center */
		@media (max-width:62rem) {
			.formGroup--sendCF {text-align: center;}
		}


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

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


/*
PLACEHOLDER TEXT */
::placeholder {color: var(--color-orange); font-weight: normal; }


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