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


/*
INPUT */
.formInput,
.formTextarea,
.formSelect, .formSelectSimili__selector {-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: normal;line-height: 1.3;display: block;padding: 1.1em 1.3em;border-radius: var(--round-borders);margin: 0;color: var(--color-base);transition: border-color 0.3s ease;}

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

	/* On red */
	.onRed .formInput,
	.onRed .formTextarea,
	.onRed .formSelect {border-color:#fff; }

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


/*
SELECT */
.formSelect, .formSelectSimili__selector {background-image: url(../../img/icons/icon-arrow-dropdown.svg);background-repeat: no-repeat;background-position: right 1em center;background-size: 2.2em;padding-right: 4em;text-transform: uppercase;font-weight: 500;}
.formSelect::-ms-expand {display: none;}

	/* Multiple select */
	.formSelect[multiple]{background-image: none;}

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

	/* On red */
	.onRed .formSelect {background-image: url(../../img/icons/icon-arrow-dropdown-on-dark.svg); color: #fff; }


/*
SIMILI SELECT
Ressemble a une liste deroulante, mais on y met des checkboxes a l'interieur. */
.formSelectSimili {position: relative;text-align: left;}
.formSelectSimili__selector {overflow: hidden;transition: border-radius 0.15s, background-color 0.15s, color 0.15s, border-color 0.15s; }
.formSelectSimili__selectorLabel {display: block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.formSelectSimili__ctn {position: absolute;z-index: 5;top: calc(100% - 1px);left: 0;right: 0;border: 1px solid var(--color-base);border-radius: 0 0 var(--round-borders) var(--round-borders);font-size: 1em;line-height: 1.2;padding: 1.3em 1.3em;color: var(--color-base);background: #fff;max-height: 20em;overflow: auto;opacity: 0;visibility: hidden;transition: opacity 0.15s, visibility 0.15s;}
.formSelectSimili__option { }
.formSelectSimili__option + * {margin-top: 0.8em;}

	/* On dark */
	.onDark .formSelectSimili__selector {color: #fff; border-color:#fff; background-image: url(../../img/icons/icon-arrow-dropdown-on-dark.svg); }

	/* On red */
	.onRed .formSelectSimili__selector {color: #fff; border-color:#fff; background-image: url(../../img/icons/icon-arrow-dropdown-on-dark.svg); }

	/*
	STATE / Open */
	.formSelectSimili.open { }
	.formSelectSimili.open .formSelectSimili__selector {border-bottom-left-radius: 0; border-bottom-right-radius: 0; color: var(--color-base); border-color: var(--color-base); background-color: #fff; background-image: url(../../img/icons/icon-arrow-dropdown-invert.svg); }
	.formSelectSimili.open .formSelectSimili__ctn {opacity: 1; visibility: visible; }

/**
 * SELECT2
 *
**/
.select2-container{
	width: 100%;
	display: block;
	min-width: 100%;
	max-width: 100%;
}
.select2-selection,
.select2-container--default .select2-selection--multiple{
	border: 1px solid var(--color-base);
	border-radius: var(--round-borders);
	padding: .95em 1.3em;
	background-image: url(../../img/icons/icon-arrow-dropdown.svg);
	background-repeat: no-repeat;
	background-position: right 1.4em center;
	background-size: 2em;
	padding: 0.65em 1.3em .4em;
}
.select2-container .select2-search--inline{
	min-height: 2.3em;
	line-height: 2.3em;
}
.select2-container .select2-search--inline .select2-search__field{
	margin-top: 0;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice{
	background-color: var(--color-red);
	color: #fff;
	border: none;
	padding: .6em;
	padding-top: .4em;
	margin-bottom: .3em;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
	color: #fff;
	margin-right: .5em;
	position: relative;
	top: -.05em;
}
.select2-results__option span{
	display: flex;
	align-items: center;
}
.select2-results__option .option__img{
	width: 4em;
	margin-right: 1em;
	padding: .5em;
}


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


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

	/* On red */
	.onRed .formInput:focus,
	.onRed .formTextarea:focus,
	.onRed .formSelect:focus {border-color:var(--color-bg-dark);}


/*
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: 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; transition: color 0.2s; }

		/* Hover */
		.formCF7Checkbox label:hover,
		.formCF7Radio label:hover {color: var(--color-red); }

	/* 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: flex;padding-top: 0.28em;padding-bottom: 0.25em;padding-left: 2.7em;position: relative;}

	/* Les styles custom sont ici */
	.formCF7Checkbox input + span::before,
	.formCF7Radio input + span::before {position: absolute;display: block;content: '';left: 0;top: 50%;width: 1.6em;height: 1.6em;background: transparent;background-position: 50% 50%;background-repeat: no-repeat;border: 1px solid var(--color-base);border-radius: 0;cursor: pointer; transform: translateY(-50%); 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-red); box-shadow: inset 0 0 0 0.3em #fff;}

		/* 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 { }
.formItem { }
.formItem__text {display: block;margin-bottom: 1.002em;}

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

	[style*="display: none;"] + .formGroup{margin-top: 0;}

	/* 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: 45%; 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:
	3 cols. */
	.formGroup--third {--spacing: 0.8em;display: flex;justify-content: space-between;margin-left:calc(-1 * var(--spacing));margin-right: calc(-1 * var(--spacing));}
	.formGroup--third .formItem {width: calc(100% / 3); flex: 0 0 auto; margin: 0; padding: 0 var(--spacing); }

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

	/*
	ALT:
	Form send. */
	.formGroup--send {text-align: center;}
	* + .formGroup--send {margin-top: 4em;}

		/* Spacing + full width button */
		@media (max-width:47rem) {
			* + .formGroup--send {margin-top: 2.5em;}
			.formGroup--send .btn {padding-left: 1em;padding-right: 1em;width: 100%;justify-content: center;}
		}


/*
FORM LABEL */
.formLabel {font-size: 1.1em;line-height: 1;display: block;margin-bottom: 0.8em;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);}



/*  
DRAG DROP
Zone pour faire un drag et drop de fichiers.
Dans le formulaire pour postuler sur un emploi. */
.formDragDrop {margin-top: 2em; }
.formDragDrop__text {text-align: center; }
.formDragDrop__box {border:1px solid var(--color-base);border-radius: var(--round-borders);text-align: center;padding: 3em;background: var(--color-bg-grey);margin: 0 auto;width: 100%;max-width: 38em;margin-top: 2em;}
.formDragDrop__icon {font-size: 5em;display: flex;justify-content: center;margin-top: -0.1em;}
.formDragDrop__title {font-size: 1.3em;margin-top: 0.5em;}
.formDragDrop__link {margin-top: 1.5em;display: inline-block;}

	/* Spacing */
	@media (max-width:47rem) {
		.formDragDrop__box {font-size: 0.8em;padding: 2em;}
	}


/*
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,
.wpcf7-not-valid + .select2 .select2-selection { border: 3px solid red; }
.wpcf7-not-valid-tip {
    margin-top: .5em;
}
.wpcf7 .ajax-loader,
.wpcf7-spinner{position: absolute;transform: translateY(100%);}

/* All messages */
.wpcf7 form .wpcf7-response-output{
    border: none;
    padding: 1.1em 1.3em;
    margin: 2em 0 1em;
    border-radius: var(--round-borders);
}
/* Red */
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
    background-color: #dc3232;
}
/* Orange */
.wpcf7 form.spam .wpcf7-response-output {
    background-color: #f56e28;
}
/* Yellow */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
    background-color: #ffb900;
}
/* Green */
.wpcf7 form.sent .wpcf7-response-output{
	display: none; /* Hide the sent message because we redirect to a new page in JS */
   	background-color: #46b450;
}