/* .............................................................................
SITE BLOCKS
............................................................................. */

/*
BLOCK / Standard styles
Styles standard des blocs principaux. */
.bMain {padding-top: var(--base-spacing-top);padding-bottom: var(--base-spacing-bottom);}

	/*
	ALT :
	No double padding.
	Si 2 blocks avec cette classe se chevauchent, ne pas mettre
	d'espacement entre ces 2 blocs. */
	.bMain--noDP + .bMain--noDP {padding-top: 0; }

	/*
	ALT :
	Forcer zero padding top ou bottom. */
	.bMain--noTP {padding-top: 0; }
	.bMain--noBP {padding-bottom: 0; }



/*
BLOCK / Page
Pour intro et pages de questions.
Background blanc a gauche, contenu par-dessus. */
.bPage {min-height: 100vh;background-color: var(--color-blue-2);display: grid;grid-template-columns: var(--width-std-left) 1fr 1fr auto;grid-template-rows: auto;}
.bPage__ctn {grid-column: 2 / 4;grid-row: 1 / 2;position: relative;z-index: 2;}
.bPage__bg {grid-column: 1 / 3;grid-row: 1 / 2;background-color: #fff;padding-right: 30%;display: flex;align-items: flex-end;}
.bPage__bg .bgLined {--qty-bg-lined-width: 5; --qty-bg-lined-height: 2.5;}

	/* No sides */
	@media (max-width:62rem) {
		.bPage {grid-template-columns: 1fr 1fr; min-height: var(--vhDefer); }
		.bPage__ctn {grid-column: 1 / 3; }
		.bPage__bg {grid-column: 1 / 2; }
	}



/*
BLOCK / Banner
Grosse image en BG avec texte par-dessus. */
.bBanner {height: 100%;padding-bottom: calc(0.8 * var(--width-std));}
.bBanner__lay {height: 100%;position: relative;display: flex;align-items: center;}
.bBanner__ctn {position: relative;z-index: 2;text-align: center;width: 100%;  display: flex; flex-direction: column;}

@media (min-width:62rem) {
	.bBanner__ctn {
		flex-direction: row;
		height: 100%;
	}
}

.bBanner__cta {position: absolute;z-index: 3;top: calc(100% + 0.325* (var(--width-std) / 2));left: 0;right: 0;text-align: center;}
.bBanner__bg {position: absolute;z-index: 0;top: 0; bottom:0; left:0; right:0;background-color: var(--color-green);}
.bBanner__bg * {height: 100%; object-fit: cover;}

form.bBanner__cta .formGroup--half {justify-content: center; align-items: center;}
form.bBanner__cta .formGroup--half .formItem {flex-basis: 24em;text-align: left;padding-left:1em}
form.bBanner__cta .formGroup--half .formItem .select2 {text-align: center;}
form.bBanner__cta .formGroup--half .formItem:nth-child(2) {text-align: left; padding-right: 0;padding-left: 1em;}

	/* Spacing */
	@media (max-width:62rem) {
		.bBanner {padding-bottom: 6em; }
		.bBanner__ctn {padding: 10em 0 6em 0;}

			@media (min-width:62rem) {
				.bBanner__ctn {padding: 10em var(--width-std-right) 6em var(--width-std-left);}
			}
		.bBanner__cta--select .select2.select2-container .select2-selection {font-size: 1.4em;}
	}

	@media (max-width:46rem) {
		.bBanner {padding-bottom: 5em;}
		.bBanner__ctn {padding-top: 7em; padding-bottom: 4em; }
		form.bBanner__cta .formGroup--half .formItem, form.bBanner__cta .formGroup--half .formItem:nth-child(2) {max-width: none;text-align: center;padding: 0;}
	}



/*
BLOCK / Quiz
Layout du quiz.
Image a gauche, nav a droite et question a droite. */
.bQuiz {height: 100%; display: flex;}
.bQuiz__images {flex:0 0 auto;width: 50%;margin-bottom: calc(0.7 * var(--width-std));position: sticky;top: 0;height: calc(100vh - calc(0.8 * var(--width-std)));min-height: 30vw;}
.bQuiz__bgImgCurrent {position: absolute;z-index: 3;top: 0;bottom: 0;left: 0;right: 0;}
.bQuiz__bgImgNext {position: absolute;z-index: 2;top: 0;bottom: 0;left: 0;right: 0;opacity: 0;}
.bQuiz__bgImgCurrent > *,
.bQuiz__bgImgNext > * {width: 100%; height: 100%;}
.bQuiz__bgImgCurrent img,
.bQuiz__bgImgNext img {width: 100%;height: 100%;/*object-fit: cover;*/}
.bQuiz__bgImgLazy {position: absolute; opacity: 0; visibility: hidden; height: 0; width: 0; pointer-events: none;}

.bQuiz__ctn {flex:1 1 auto; width: 50%;
	/* margin-right: calc(-1 * var(--width-std-right)); */
	padding: 7.5% 10%;background-color: var(--color-blue);}
.bQuiz__slides {margin-top: 10%;}

/* Fix Firefox : definir une largeur precise sur Slick sinon ca overflow. */
.jsQ__slides {max-width: 35vw;}

	/* Stacked */
	@media (max-width:62rem) {
		.bQuiz {display: block; }
		.bQuiz__images {width: 100%; margin-bottom: 0;position: relative;height: auto;}
		.bQuiz__bgImgCurrent {position: static; }
		.bQuiz__ctn {width: 100%; padding: var(--width-std);margin-right: 0;}
		.bQuiz__slides {margin-top: 6%;}

		.bQuiz__bgImgCurrent > *, .bQuiz__bgImgNext > * {padding: 3em 2em 2em 2em;}

		.jsQ__slides {max-width: calc(100vw - var(--width-std) - var(--width-std));}
	}



/*
ITEM / Slide animation
Classes necessaires pour le bon fonctionnement des animations dans les slides. */
.jsQ__textAnimate .word,
.jsQ__reponseTextAnimate .word {white-space: nowrap;display: inline-block;}
.jsQ__textAnimate .letter,
.jsQ__reponseTextAnimate .letter {backface-visibility: hidden; white-space: nowrap;overflow: hidden;opacity: 0;}

/* Before init and init */
.jsQ__textAnimate {opacity: 0; visibility: hidden;}
.jsQ__textAnimate.ready {opacity: 1; visibility: visible;}

.jsQ__reponseTextAnimate {opacity: 0; }
.jsQ__reponseTextAnimate.ready {opacity: 1; visibility: visible;}

.jsQ__reponseEnumAnimate {opacity: 0; }
.jsQ__inputAnimate {opacity: 0;}
.jsQ__fadeAnimate {opacity: 0;}
.jsQ__fadeAnimateNext {opacity: 0;}

/* Disable le user interaction quand on est en train d'animer une slide. */
.jsQ__slides.animating .btn,
.jsQ__slides.animating .iReponse * {pointer-events: none;}

/* Before init, on affiche les boites comme elles seront apres le init. */
.jsQ__slides.slick-initialized {display: block; }
.jsQ__slides:not(.slick-initialized) > *:nth-child(1n+2) {display: none; }



/*
BLOCK / Resultats
Titre, un gros resultat, 2 petits resultats, form et liens. */
.bResultats {padding: 7% 0;max-width: 70em;margin: 0 auto;}
.bResultats__head {text-align: center;margin-top:6em }
.bResultats__mainRes {margin-top: 6%;}

.bResultats__otherRes {--gap:12%;position: relative;margin-top: 9%;display: flex;justify-content: center;gap: var(--gap);}
.bResultats__otherRes::before {position:absolute; z-index:0; display:block; content:''; top:0; bottom:0; left:50%; width: 1px; background-color: #fff; }
.bResultats__otherRes--no-line::before {display: none;}
.bResultats__otherRes > * {flex:0 0 auto;width: calc(50% - calc(var(--gap) / 2));max-width: 30em;}
.bResultats__otherRes > *:nth-child(odd) .iResultat__lay {justify-content: end;}
.bResultats__otherRes .iResultat__cChart {width: auto;}

.bResultats__otherRes.bResultats__otherRes__row2 > * .iResultat__lay {justify-content: center;}
.bResultats__otherRes.bResultats__otherRes__row2 > * {width: calc(33% - calc(var(--gap) / 2));}
.bResultats__otherRes.bResultats__otherRes__row2 h3.iResultat__name {font-size: 1.2em;}

.bResultats__form {max-width: 63em;margin: 15% auto 0 auto;}
.bResultats__links {margin-top: 8%;display: flex;justify-content: center;flex-wrap: wrap;gap: 7%;}

	/* Stacked */
	@media (max-width:62rem) {
		.bResultats {padding: 9em var(--width-std-right) 3em var(--width-std-left); }
		.bResultats__mainRes {margin-top: 2em }

		.bResultats__otherRes {margin-top: 4em;display: block;}
		.bResultats__otherRes::before {display: none; }
		.bResultats__otherRes > *, .bResultats__otherRes.bResultats__otherRes__row2 > * {width: 100%; margin-left: auto; margin-right: auto; }
		.bResultats__otherRes .iResultat__cChart {width: 100%; }
		.bResultats__otherRes .iResultat + .iResultat {position: relative; margin-top: 3em; padding-top: 3em; }
		/*.bResultats__otherRes .iResultat + .iResultat::before {position:absolute; z-index:0; display:block; content:''; top:0; height: 1px; left:25%; right:25%; background-color: #fff; }*/
		.bResultats__otherRes .iResultat:not(:first-child)::before,
		.bResultats__otherRes.bResultats__otherRes__row2 .iResultat::before {position:absolute; z-index:0; display:block; content:''; top:0; height: 1px; left:25%; right:25%; background-color: #fff; }
		.bResultats__otherRes.bResultats__otherRes__row2 .iResultat:first-child {position: relative;margin-top: 2em;padding-top: 2em;}

		.bResultats__form {margin-top: 5em; }
		.bResultats__links {margin-top: 4em; }
	}

	/* Spacings */
	@media (max-width:46rem) {
		.bResultats {padding-top: 7em; }
		.bResultats__mainRes {margin-top: 1.5em }

		.bResultats__otherRes {margin-top: 3.5em;}
		.bResultats__otherRes .iResultat + .iResultat {position: relative; margin-top: 2em; padding-top: 2em; }

		.bResultats__form {margin-top: 3.5em; }
		.bResultats__links {gap:1.5em; }
	}

/******************************
Modifications for MEQ.
Other changes have been made to several existing CSS files.
******************************/
.bBanner__row {
	flex: 1 1 50%;
	height: 100%;
	display: flex;
	flex-direction: column;
}

/*
LEFT
*/
.bBanner_col-start-1 {
	flex: 1 1 25vh;
	padding-left: 2em;
	padding-right: 2em;
	display: flex;
	justify-content: center;
	align-items: center;
	display: flex;
}

	@media (min-width:62rem) {
		.bBanner_col-start-1 {
			padding-left: 10em;
			padding-right: 10em;
		}
	}

.bBanner_col-start-1 img {

}

	@media (min-width:62rem) {
		.bBanner_col-start-1 img {
			max-width: 600px;
			max-height: 100%;
		}
	}

.bBanner_col-end-1 {
	flex: 1 1 auto;
	padding: 1em 1em 0.95em 1em;
	font-size: 2.25em;
	line-height: 1.1;
	text-align: left;
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: #4234DF;
}

	@media (min-width:62rem) {
		.bBanner_col-end-1 {
			padding: 1em 2em 1em 4em;
			font-size: 3em;
		}
	}

.bBanner__bg-left {
	background-color: var(--color-yellow);
	padding-top: 6em;
}

	@media (min-width:46rem) {
		.bBanner__bg-left{
			padding-top: 8.5em
		}
	}

	@media (min-width:62rem) {
		.bBanner__bg-left{
			padding-top: 2em;
		}
	}

/*
RIGHT
*/
.bBanner_col-start-2 {
	flex: 1 1 25vh;
	padding-left: 2em;
	padding-right: 2em;
	display: flex;
	justify-content: center;
	align-items: center;
}

	@media (min-width:62rem) {
		.bBanner_col-start-2 {
			padding-left: 10em;
			padding-right: 10em;
		}
	}

.bBanner_col-start-2 img {
	
}

	@media (min-width:62rem) {
		.bBanner_col-start-2 img {
			max-width: 575px;
			max-height: 100%;
		}
	}

.bBanner_col-end-2 {
	flex: 1 1 auto;
	padding: 1.5em 1em 1.5em 0.95em;
	font-size: 1.25em;
	line-height: 1.2;
	text-align: left;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

	@media (min-width:62rem) {
		.bBanner_col-end-2 {
			padding: 1em 5em;
			font-size: 1.6em;
		}
	}

.bBanner__bg-right {
	background-color: var(--color-blue);
	padding-top: 2em;
}

	@media (min-width:46rem) {
		.bBanner__bg-right {
			padding-top: 8.5em
		}
	}

	@media (min-width:62rem) {
		.bBanner__bg-right {
			padding-top: 2em;
		}
	}

/*
Form
*/
@media (max-width:62rem) {
	.bBanner__form-custom {
		padding-bottom: 4em;
		padding-left: 2em;
		padding-right: 2em
	}
}

.form-sentence {
	color: var(--color-blue);
	font-size: 2em;
	font-weight: bold;
}

/*
Btn
*/
.btn--arrow {
	display: block;
	background-color: var(--color-blue-strong);
	width: 3em;
	height: 3em;
	z-index: 9999;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

	@media (min-width:62rem) {
		.btn--arrow {
			margin-left: 0;
			transition: margin-left 0.3s ease;
			cursor: pointer;
		}
	}

.btn--arrow svg {
	width: 1.15em;
	height: auto;
	margin-left: 0.9em
}

.btn-custom {
	padding: 0 0 0 1em !important;
	gap: 1em;
	border-radius: 50% !important;
	font-size: 1em !important;
}

	@media (min-width:62rem) {
		.btn-custom {
			padding: 0 0 0 2em !important;
			gap: 2em;
			font-size: 1.5em !important;
		}
	}

.btn__label-custom {
	padding: 0 !important;
}

.btn--hoverAnimBG.btn-custom:hover:not(:disabled) .btn--arrow {

}

	@media (min-width:62rem) {
		.btn--hoverAnimBG.btn-custom:hover:not(:disabled) .btn--arrow {
			margin-left: 0.25em;
		}
	}

/*
Select
*/
.select2-selection__rendered,
.select2-results__option {
	font-family: 'Futura', Arial, sans-serif;
	font-weight: 700;
}

/*
Nav
*/
.iQuizStatus__nav {
	color: var(--color-green-light) !important;
}

.iReponse__colLabel .iReponse__labelEnum {
    color: var(--color-blue)
}

.iReponse__colLabel .iReponse__labelText {
    color: unset !important;
}

.iReponse input[type="radio"]:checked + .iReponse__colLabel .iReponse__labelEnum, .iReponse input[type="checkbox"]:checked + .iReponse__colLabel .iReponse__labelEnum {
    background-color: var(--color-green-light);
    color: var(--color-blue);
}

.iReponse__labelEnum {
    font-size: 1.4em;
}

/*
Images
*/
.bQuiz__bgImgCurrent {
	width: 100%;
	height: 100%;
}

.bQuiz__bgImgCurrent picture {
	display: flex;
	justify-content: center;
	align-items: center;
}


.bQuiz__bgImgCurrent picture img {
    width: 70%;
	height: 70%;
    object-fit: contain;
}

.iResultat__name {
	color: var(--color-blue) !important;
}

.iResultat__name {
	color: var(--color-orange-crush) !important;
}

.iResultat__desc {
	color: var(--color-blue-strong) !important;
}

.iResultat__nb {
	color: var(--color-orange-crush) !important;
}

.bResultats__head h1 {
	color: var(--color-base-on-dark) !important;
}