/* .............................................................................
FORMS
............................................................................. */
.form { }
* + .form {margin-top: calc(0.75 * var(--base-spacing-top));}


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

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

	/* 
	ALT :
	Smaller. */
	.formInput--sm,
	.formTextarea--sm,
	.formSelect--sm {width: 10em;}

	/* 
	ALT :
	Input de quantity dans le cart. */
	.formInput--qtyCart {width: 4.5em;font-weight: bold;padding: 0.5em 0.5em 0.5em 1em;}

		/* Vu que c'est 16px, ajuster padding pour conserver la bonne hauteur. */
		@media (max-width:46rem) {
			.tableList .formInput--qtyCart {width: 4em; padding: 0.336em 0.336em 0.336em 0.7em;}
		}

	/* 
	ALT :
	Input dans une table ou un accordion, même hauteur que le bouton .btn--inList. */
	.formInput--inList {width: 3.5em;font-weight: bold;padding: 0.25em 0.25em 0.25em 0.7em;}

		/* Vu que c'est 16px, ajuster padding pour conserver la bonne hauteur. */
		@media (max-width:46rem) {
			.formInput--inList {padding: 0.15em 0.15em 0.15em 0.7em;height: 29px;}
		}


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


/*
SELECT MULTI */
.formSelectMulti {font-size: 0.83em;}
.formSelectMulti::-ms-expand {display: none;}

	/* Comme un select standard */
	@media (max-width:46rem) {
		.formSelectMulti {font-size: 16px;max-height: 8em;}
	}


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


/*
FOCUS */
.formInput:focus,
.formTextarea:focus,
.formSelect:focus,
.formSelectMulti:focus {border-color:var(--color-orange); box-shadow: 0 0 1em 0 rgb(0 0 0 / 10%);}


/*
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 transparent;background: var(--color-white);cursor: pointer;display: inline-block;font-size: 1em;line-height: 1.2;color: var(--color-base);padding: 0.8em 1.2em;text-decoration: none;box-sizing: border-box;text-align: left;width: 100%; transition: border-color 0.3s, box-shadow 0.3s; }
.formInputFileBtn * {pointer-events: none;}
.formInputFileBtn__label {display: block;position: relative;z-index: 2;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.formInputFileBtn__icon {display: block;position: absolute;z-index: 2;color: var(--color-orange);right: 1.5002em;top: 50%;transform: translate(0, -50%);}
.formInputFileBtn__icon + .formInputFileBtn__label {margin-right: 0.5002em;}

	/* Hover */
	.formInputFileBtn:hover:not(:disabled) {border-color:var(--color-orange); box-shadow: 0 0 1em 0 rgb(0 0 0 / 10%);}

	/* Active */
	.formInputFileBtn__label.active {font-weight: bold; }

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


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

	/* 
	ALT:
	Cols. */
	.formCF7Checkbox--half {display: flex; flex-wrap: wrap; }
	.formCF7Checkbox--half > * {display: block; flex:0 0 auto; width: 50%; margin: 0; padding-bottom: 1em; }
	.formCF7Checkbox--half label {display: inline-block; }

		/* 1 col */
		@media (max-width:46rem) {
			.formCF7Checkbox--half {display: block; }
			.formCF7Checkbox--half > * {width: 100%; }
		}


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

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

	/*
	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:46rem) {
			.formGroup--half {display: block; }
			.formGroup--half .formItem {width: 100%; margin-top: 1.5em; }
		}

	/*
	ALT:
	4 cols pour la recherche YMMC. */
	.formGroup--search {display: flex;justify-content: space-between; }
	.formGroup--search .formItem {width: auto;flex: 1 1 auto;margin: 0;}
	.formGroup--search .formItem:not(:last-child) {padding-right: 1px;}
	.formGroup--search .formItem--year {flex:0 0 auto; width: 5.5em;}
	.formGroup--search .formItem--make {width: 25%;}
	.formGroup--search .formItem--model {width: 30%;}
	.formGroup--search .formItem--category {width: 40%;}

	.formGroup--search .formItem {display: flex;flex-direction: column;}
	.formGroup--search .formItem .formLabel {flex:0 0 auto; }
	.formGroup--search .formItem .formSelectMulti {flex:1 1 auto; }

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

	/* 
	ALT:
	Bouton de recherche à droite pour YMMC. */
	.formGroup--actionsYMMC {text-align: right;}
	.formGroup + .formGroup--actionsYMMC {margin-top: 0.8em;}

	/* 
	ALT :
	Form cart qty. */
	.formGroup--cartQty {display: flex;align-items: center;gap: 0;}
	.formGroup--cartQty .formItem {margin: 0;}
	.formGroup--cartQty .formItem--submit { }

	/* 
	ALT :
	Button at right. */
	.formGroup--btnRight {display: flex; }
	.formGroup--btnRight .formItem {flex:1 1 auto; margin: 0;}
	.formGroup--btnRight .formItem--btn {flex:0 0 auto; }
	.formGroup--btnRight .formItem--btn .btn {height: 100%; }

	/*
	ALT:
	Form send. */
	.formGroup.formGroup--send {position: relative;margin-top: calc(0.75 * var(--base-spacing-top));padding-top: 1.5em; }
	.formGroup.formGroup--send::before {position:absolute;z-index:0;display:block;content:'';top:0;height: 1px;left:0;width: 2.1em;background-color: var(--color-gray);}

	/*
	ALT:
	Button with actions : edit, cancel, delete. */
	.formGroup.formGroup--btnsAction {position: relative;margin-top: calc(0.75 * var(--base-spacing-top));padding-top: 1.5em;display: flex;align-items: center;gap:0.5em}
	.formGroup.formGroup--btnsAction::before {position:absolute;z-index:0;display:block;content:'';top:0;height: 1px;left:0;width: 2.1em; width: auto; right: 0; background-color: var(--color-gray);}
	.formGroup.formGroup--btnsAction .formItem {margin: 0; }
	.formGroup.formGroup--btnsAction .formItem--btnSubmit {flex:0 0 auto;}
	.formGroup.formGroup--btnsAction .formItem--btnDelete {flex:1 1 auto; text-align: right;}
	.formGroup.formGroup--btnsAction .formItem--btnSaveCart {flex:1 1 auto; text-align: right;}
	.formGroup.formGroup--btnsAction .formItem--btnOrder {flex:0 0 auto;}

		/* 
		ALT:
		Cart button. */
		.formGroup.formGroup--btnsAction--cart { }

		/* Spacing */
		@media (max-width:46rem) {
			.formGroup.formGroup--btnsAction {padding-top: 1em;}

			.formGroup.formGroup--btnsAction--cart {flex-direction: column;}
			.formGroup.formGroup--btnsAction--cart .formItem,
			.formGroup.formGroup--btnsAction--cart .btn {width: 100%; text-align: center;}
		}


/*
FORM LABEL
Voir dans titles.css car c'est le meme style que .fsCs */
.formLabel {display: block;margin-bottom: 0.5em;color: var(--color-gray);}
.formLabel__note {display: inline-block; font-weight: normal; font-size: 0.7em; }
.formLabel + .formItem {margin-top: 0; }

.formLabelTableLike {display: block;font-size: 0.83em;line-height: 1.1;padding: 0.7em 1.1em;background-color: var(--color-gray);color: var(--color-white);text-transform: uppercase;font-weight: bold;vertical-align: bottom;}


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