/* .............................................................................
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: 900;font-weight: 400;line-height: 1.2;display: block;padding: 1.2em 1.6em;border-radius: 0;margin: 0;color: var(--color-blue);transition: border-color 0.3s ease;}

	/* On gray */
	.onGray .formInput,
	.onGray .formTextarea,
	.onGray .formSelect {border-color:var(--color-gray); }

	/* 
	ALT:
	Lined input (line at bottom only). */
	.formInput--lined {background: transparent;border: none;border-bottom: 1px solid var(--color-blue);padding: 0.5em 0.1em;}

		/* On gray */
		.onGray .formInput--lined {border-color: var(--color-blue);}

		/* On blue */
		.onDark .formInput--lined {border-color: #fff;color: #fff;}
		.onDark .formInput--lined::placeholder {color: rgba(255,255,255,0.5);}


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


/*
SELECT */
.formSelect {background-image: url(../../img/icons/icon-arrow-dropdown.svg);background-repeat: no-repeat;background-position: right 1.2em center;background-size: 1.75em; color: var(--color-blue); padding-right: 4em; }
.formSelect::-ms-expand {display: none;}


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


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

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

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

	/* Mobile 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: 47%;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:
	Form send. */
	.formGroup--send {text-align: center;}
	.formGroup--send .btn {width: 100%; max-width: 18em; text-align: center; }


	/* 
	ALT:
	Submit at right pour recherche.
    Bouton a droite du input, "dans" le input. */
    .formItem--submitAtRight {position: relative;}
    .formItem--submitAtRight .formInput {padding-right: 3em;}
    .formItem--submitAtRight .btnIcon {font-size: 2.9em;margin-right: -0.15em;position: absolute;top: 35%;right: 0;transform: translateY(-50%);}
    .formItem--submitAtRight .btnIcon .svgIcon {font-size: 0.85em;}
	


/*
FORM LABEL */
.formLabel {font-size: 1.4em;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.3);}



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


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

	/*
	PLUGIN CF7 MULTI UPLOAD
	*/
	.dnd-upload-counter {display: none;}
	.codedropz-upload-handler {border-radius: unset; border:1px solid var(--color-base);text-align: center;padding: 2.5em;background: var(--color-bg-gray);margin: 0 auto;width: 100%;max-width: 30em;margin-top: 1em;}
	.codedropz-upload-inner > span {display: none;}
	.codedropz-upload-container {padding: 0 !important;}
	.dnd-upload-status {max-width: 30em; margin: 2em auto 0;}
	.dnd-upload-status .dnd-upload-details .dnd-progress-bar span {background: var(--color-blue);}

/*
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; }*/
.wpcf7-not-valid-tip { padding: .5em .8em; background: var(--color-orange); color: #FFF; }

	@media (max-width: 767px) {
		.wpcf7-form .ajax-loader {display: block; margin: 0.5em auto;}
	}

	@media( min-width: 768px ) {
		.wpcf7-form .ajax-loader {position: absolute; top: 50%; transform: translateY(-50%);}
		.formGroup--send .formItem {position: relative;}
	}

	/* MESSAGES */
	.wpcf7-form .tpp-success, .wpcf7-form.sent .wpcf7-response-output {display: none;}
	.wpcf7-form.sent .tpp-success {display: block; background: var(--color-blue); color: #FFF; text-align: center; padding: 1.5em 10%;}
	.wpcf7-form.invalid .wpcf7-response-output {border: none; background: var(--color-orange); color: #FFF; text-align: center; padding: 1.5em 10%;}

	.wpcf7-form .fichiers .wpcf7-not-valid-tip {max-width: 30em; margin: 0 auto; width: 100%;}