/* .............................................................................
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-green);display: grid;grid-template-columns: var(--width-std-left) 1fr 1fr var(--width-std-right);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%;padding: 7% 15%;}
.bBanner__cta {position: absolute;z-index: 3;top: 100%;left: 0;right: 0;text-align: center;transform: translateY(-50%);}
.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;}
form.bBanner__cta .formGroup--half .formItem {flex-basis: 24em;text-align: right;padding-right: 1em;max-width: 24em;}
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 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));background-color: var(--color-orange);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-green);}
.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; }
	}



/*
BLOCK / Title
Description. */