/* CSS Document */


/************************
	UTILISATION DES FONTS



************************
*****  UNIVIA PRO  *****
************************

Univia Pro Ultra
font-family: univia-pro, sans-serif;
font-weight: 900;
font-style: normal;


Univia Pro Book
font-family: univia-pro, sans-serif;
font-weight: 400;
font-style: normal;


Univia Pro Regular
font-family: univia-pro, sans-serif;
font-weight: 500;
font-style: normal;


Univia Pro Medium
font-family: univia-pro, sans-serif;
font-weight: 600;
font-style: normal;


Univia Pro Bold
font-family: univia-pro, sans-serif;
font-weight: 700;
font-style: normal;

************************
*******  USUAL  ********
************************

*Usual Regular
font-family: usual, sans-serif;
font-weight: 400;
font-style: normal;


*Usual Medium
font-family: usual, sans-serif;
font-weight: 600;
font-style: normal;


*Usual Light
font-family: usual, sans-serif;
font-weight: 300;
font-style: normal;


*Usual ExtraBold
font-family: usual, sans-serif;
font-weight: 800;
font-style: normal;


*Usual Bold
font-family: usual, sans-serif;
font-weight: 700;
font-style: normal;


***********************/
body{
	overflow: hidden;
}


body,html{
	font-size: 16px;
	line-height: 1.15em;
	height: 100%;
}

#scene{
	width: 100%;
	height: 100%;
/*	background-color: #87ceeb;*/
	position: relative;
}

#scene .question,
#scene #e8 .formulaire{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
/*	background-color: #555555;*/
}

canvas{
	position: relative;
}

.hide-desktop{
	display: flex!important;
}
.hide-mobile{
	display: none!important;
}

.transition{
	width: 100%;
	height: 100%;
	background-color: #fff;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 1;
	z-index: 9999999;
	transition: 0.5s all ease-in-out;
	pointer-events: none;
}

.transition.fini{
	opacity: 0;
}

/*.nuage{
	width: 150px;
	height: 50px;
	background-color: #F7F7F7;
	border: 1px solid #000;
	position: absolute;
}*/

#scene .question .ligne-bouton-suivant,
#intro .ligne-bouton-commencer,
#scene .formulaire .ligne-bouton-envoyer{
	width: 100%;
	margin-top: 36px;
	text-align: center;
	opacity: 0;
	transition: 0.4s all ease-in-out;
	pointer-events: none;
}

#scene .question .ligne-bouton-suivant.dispo{
	opacity: 1;
	pointer-events: all;
}

#scene .question .ligne-bouton-suivant.q2,
#scene .question .ligne-bouton-suivant.q3,
#scene .question .ligne-bouton-suivant.q4,
#scene .question .ligne-bouton-suivant.q5,
#intro .ligne-bouton-commencer,
#scene .formulaire .ligne-bouton-envoyer{
	opacity: 1;
	pointer-events: all;
}

#scene .question .btn-precedent,
#scene .question .btn-suivant,
#intro .btn-commencer,
#scene .formulaire .btn-envoyer{
	padding: 8px 48px 8px 22px; /* 10 60 10 30 */
	background-color: #fff;
	border: 4px solid #0286c7; /* 4 */
	text-align: center;
	cursor: pointer;
	display: inline-block;
	border-radius: 90px;
	position: relative;
	transition: 0.25s all ease-in-out;
}

#scene .question .btn-precedent p,
#scene .question .btn-suivant p,
#intro .btn-commencer p,
#scene .formulaire .btn-envoyer p{
	color: #0286c7;
	font-size: 1.2rem; /* 1.2rem */
	display: inline-block;
	font-family: usual, sans-serif;
	font-weight: 400;
	font-style: normal;
	transition: 0.25s all ease-in-out;
}

#scene .question .btn-precedent i.fas,
#scene .question .btn-suivant i.fas,
#intro .btn-commencer i.fas,
#scene .formulaire .btn-envoyer i.fas{
	color: #0286c7;
	font-size: 2.1rem; /* 2.2rem */
	position: absolute;
	top: 1.5px; /* 1.5 */
	right: 2px; /* 2 */
	transition: 0.25s all ease-in-out;
}

#scene .question .btn-precedent:hover,
#scene .question .btn-suivant:hover,
#intro .btn-commencer:hover,
#scene .formulaire .btn-envoyer:hover{
	background-color: #0286c7;
}

#scene .question .btn-precedent:hover p,
#scene .question .btn-precedent:hover i.fas,
#scene .question .btn-suivant:hover p,
#scene .question .btn-suivant:hover i.fas,
#intro .btn-commencer:hover p,
#intro .btn-commencer:hover i.fas,
#scene .formulaire .btn-envoyer:hover p,
#scene .formulaire .btn-envoyer:hover i.fas{
	color: #fff;
}

.etape1,
.etape2,
.etape3,
.etape4,
.etape5,
.etape6,
.etape7,
.etape8{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	z-index: 1;
	display: none;
	pointer-events: none;
}

.etape1{
	background-color: #87ceeb;
}

#scene[etape="1"] .etape1,
#scene[etape="2"] .etape2,
#scene[etape="3"] .etape3,
#scene[etape="4"] .etape4,
#scene[etape="5"] .etape5,
#scene[etape="6"] .etape6,
#scene[etape="7"] .etape7,
#scene[etape="8"] .etape8{
	z-index: 9999;
	display: block;
	pointer-events: all;
}


/****  BOUTON REVENIR  ****/
.revenir{
	position: absolute;
	top: 20px; /* 20 */
	left: 20px; /* 20 */
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-align-items: center;
	-ms-align-items: center;
	align-items: center;
	opacity: 0.5;
	transition: 0.3s all ease-in-out;
	z-index: 9999;
	cursor: pointer;
}

.revenir:hover{
	opacity: 1;
}

.revenir .fas{
	color: #fff;
	font-size: 2rem; /* 2rem */
}

.revenir img{
	margin: 0 16px; /* 0 16 */
	width: 27px; /* 27 */
}

.revenir p{
	font-size: 1rem; /* 1 rem */
	color: #fff;
	line-height: 1.15em;
	font-family: usual, sans-serif;
	font-weight: 600;
	font-style: normal;
}

.revenir.mobile{
	bottom: 20px;
	top: auto;
}


.revenir.mobile p{
	margin-left: 0.75rem;
}
	
/*****************
	QUESTION 1
	CLASSES : .q1 .reponse .btn-choix 
******************/
.q1 h2,
.q2 h2,
.q3 h2,
.q4 h2,
.q5 h2,
.q6 h2,
.q7 h2,
.q8 h2{
	font-size: 4.5vw;
	line-height: 1.15em;
	color: #fff;
	font-family: univia-pro, sans-serif;
	font-weight: 900;
	font-style: normal;
	margin: 4.5% 0 3.4%;
	text-align: center;
	text-shadow: -2px -2px 0 #0286c7, 2px -2px 0 #0286c7, -2px 2px 0 #0286c7, 2px 2px 0 #0286c7;
}

/* LORSQUE C'EST UN CHOIX AVEC LA BARRE */
.q2 h2,
.q3 h2,
.q4 h2,
.q5 h2,
.q6 h2{
	margin: 9.5% 0 3.4%; /* 5 0 3.4 */
}

.q1 h2,
.q3 h2,
.q4 h2,
.q5 h2,
.q6 h2,
.q7 h2,
.q8 h2{
	font-size: 3vw;
}

.q1 .reponse input[type=radio],
.q6 .reponse input[type=radio],
.q7 .reponse input[type=radio]{
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.q1 .reponse label,
.q6 .reponse label,
.q7 .reponse label{
	display: inline-block;
	width: 21%;
	margin: 0 1.25% 12px;
	cursor: pointer;
	vertical-align: text-top;
	text-align: center;
}

.q1 .reponse label .btn-choix,
.q6 .reponse label .btn-choix,
.q7 .reponse label .btn-choix{
	font-size: 5.4vw;
	background-color: #fff;
	color: #73b8e6;
	padding: 24.5%;
	border: 2px solid #0286c7;
	border-radius: 999px;
	transition: 0.20s all ease-in-out;
}

.q1 .reponse label.q1-pe .btn-choix{
	padding: 24.5% 21.88%; /* 58.5 52.25 */
}

.q1 .reponse label.q1-me .btn-choix{
	padding: 24.5% 27.11%; /* 58.5 64.75 */
}

.q1 .reponse label:hover .btn-choix,
.q6 .reponse label:hover .btn-choix,
.q7 .reponse label:hover .btn-choix{
	color: #0286c7;
}

.q1 .reponse input[type=radio]:checked + .btn-choix,
.q1 .reponse input[checked=checked] + .btn-choix,
.q6 .reponse input[type=radio]:checked + .btn-choix,
.q6 .reponse input[checked=checked] + .btn-choix,
.q7 .reponse input[type=radio]:checked + .btn-choix,
.q7 .reponse input[checked=checked] + .btn-choix{
	color: #fff;
	background-color: #0286c7;
	box-shadow: 1px 2px 6px 0 rgba(0,0,0, .65);
}


.q1 .reponse p,
.q6 .reponse p,
.q7 .reponse p{
	font-size: 1.62vw;
	color: #fff;
	text-shadow: -1px -1px 0 #0286c7, 1px -1px 0 #0286c7, -1px 1px 0 #0286c7, 1px 1px 0 #0286c7;
	line-height: 1.15em;
	font-family: usual, sans-serif;
	font-weight: 600;
	font-style: normal;
	margin-top: 16px;
}

.q1 .reponse p.petit,
.q6 .reponse p.petit,
.q7 .reponse p.petit{
	font-size: 1.4vw;
}

.q6 .reponse p.x-petit{
	font-size: 1.2vw; /* 1.4 */
}

.element-graphique{
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}

/*** ELEMENTS VISUEL - Question 1 ***/

.etape1 .element-graphique .sol{
	position: absolute;
	bottom: 0;
	right: 0; /* 0 */
	width: 100%; /* 100 */
}

.etape1 .element-graphique .fusee{
	position: absolute;
	bottom: 7.47%; /* 7.47 */
	right: 7.09%; /* 135 / 7.09% */
	z-index: 9;
	width: 19.7%; /* 19.7% */
}

.etape1 .element-graphique .madame1{
	position: absolute;
	bottom: 7.25%; /* 68 / 7.25 */
	right: 40.83%; /* 777 / 40.83% */
	width: 2.57%; /* 2.57 / 49px */
}

.etape1 .element-graphique .madame2{
	position: absolute;
	bottom: 2.13%; /* 20 / 2.13 */
	right: 27.58%; /* 525 / 27.58% */
	width: 2.89%; /* 2.89 / 55px */
}


.etape1 .element-graphique .monsieur1{
	position: absolute;
	bottom: 3.52%; /* 33 / 3.52 */
	right: 44.03%; /* 838 / 44.03% */
	width: 2.46%; /* 2.46 / 46px */
}

.etape1 .element-graphique .monsieur2{
	position: absolute; 
	bottom: 3.52%; /* 33 / 3.52 */
	right: 35.89%; /* 683 / 35.89% */
	width: 3.62%; /* 3.62 / 69px */
}

.etape1 .element-graphique .monsieur3{
	position: absolute; 
	bottom: 9.81%; /* 9.81 */
	right: 31.68%; /* 603 / 31.68% */
	width: 3.10%; /* 3.10 / 59px */
}

.etape1 .element-graphique .monsieur4{
	position: absolute; 
	bottom: 5.86%; /* 5.86 */
	right: 47.5%; /* 904 / 47.5% */
	width: 2.94%; /* 2.94 / 56px */
}


.etape1 .element-graphique .personnage{
	opacity: 0;
	transition: 0.4s all ease-in-out;
}

.etape1 .element-graphique .personnage.visible{
	opacity: 1;
}


/*** ANIMATION DES NUAGES  Largeur : 199px / Hauteur : 69px ***/
.etape1 .element-graphique .nuage1,
.etape1 .element-graphique .nuage2,
.etape1 .element-graphique .nuage3,
.etape1 .element-graphique .nuage4{
	position: absolute;
	right: -260px;
	animation: animate 20s linear infinite;
}

.etape1 .element-graphique .nuage1{
	top: 140px;
	animation-duration: 18s;
	opacity: 0.8;
}

.etape1 .element-graphique .nuage2{
	top: 440px;
	animation-duration: 24s;
	opacity: 0.5;
	transform: scale(0.8);
}

.etape1 .element-graphique .nuage3{
	top: 280px;
	animation-duration: 15s;
	opacity: 0.95;
}

.etape1 .element-graphique .nuage4{
	top: 20px;
	animation-duration: 30s;
	opacity: 0.6;
	transform: scale(0.65);
}





.etape1 .element-graphique{
	transform-origin: bottom right;
}


/**********************************
	QUESTION 2
	CLASSES: .etape2 #form_pages .legend .chiffre-nb-pages
*********************************/

.q2 h2{
	margin: 10% 0 3.4%;
}


.etape2{
	background: rgb(135,206,235);
	background: -webkit-linear-gradient(305deg, rgba(135,206,235,1) 15%, rgba(38,148,192,1) 95%);
	background: -o-linear-gradient(305deg, rgba(135,206,235,1) 15%, rgba(38,148,192,1) 95%);
	background: linear-gradient(35deg, rgba(135,206,235,1) 15%, rgba(38,148,192,1) 95%);
}

.etape2 .reponse{
	text-align: center;
}


.etape2 .reponse #form_pages,
.etape3 .reponse #form_design,
.etape4 .reponse #form_ref,
.etape5 .reponse #form_market{
	margin-top: 24px;
}

/***  ENLEVER LE STYLE  ***/
input[type=range] {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  width: 80%; /* Specific width is required for Firefox. */
  background: transparent; /* Otherwise white in Chrome */
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type=range]:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;

  /* Hides the slider so custom styles can be added */
  background: transparent; 
  border-color: transparent;
  color: transparent;
}

/*** MODIFICATION DU THUMB ***/
input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	height: 80px;
	width: 80px;
	border-radius: 80px;
	background-color: #0286c7;
	background-image: url(../img/etape-2/bouton-page.png);
	background-size: cover;
	background-position: top left;
	cursor: pointer;
	margin-top: -14px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
	box-shadow: 0px 0px 5px rgba(0,0,0,0.6); /* Add cool effects to your sliders! */
	position: relative;
}

input[type=range]#form_design::-webkit-slider-thumb {
	background-image: url(../img/etape-3/cercle-design.png);
}

input[type=range]#form_ref::-webkit-slider-thumb {
	background-image: url(../img/etape-4/cercle-referencement.png);
}

input[type=range]#form_market::-webkit-slider-thumb {
	background-image: url(../img/etape-5/cercle-marcher.png);
}

/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
  height: 80px;
  width: 80px;
  border-radius: 80px;
  background-color: #0286c7;
  background-image: url(../img/etape-2/bouton-page.png);
  background-size: cover;
  background-position: top left;
  cursor: pointer;
  margin-top: -14px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
  box-shadow: 0px 0px 8px rgba(0,0,0,0.6); /* Add cool effects to your sliders! */
}

input[type=range]#form_design::-moz-range-thumb {
	background-image: url(../img/etape-3/cercle-design.png);
}

input[type=range]#form_ref::-moz-range-thumb {
	background-image: url(../img/etape-4/cercle-referencement.png);
}

/* All the same stuff for IE */
input[type=range]::-ms-thumb {
  height: 80px;
  width: 80px;
  border-radius: 80px;
  background-color: #0286c7;
  background-image: url(../img/etape-2/bouton-page.png);
  background-size: cover;
  background-position: top left;
  cursor: pointer;
  margin-top: -14px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
  box-shadow: 0px 0px 8px rgba(0,0,0,0.6); /* Add cool effects to your sliders! */
}

input[type=range]#form_design::-ms-thumb {
	background-image: url(../img/etape-3/cercle-design.png);
}

input[type=range]#form_ref::-ms-thumb {
	background-image: url(../img/etape-4/cercle-referencement.png);
}



/*** MODIFICATION DE LA TRACK ***/
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 55px;
  cursor: pointer;
  background: #fff;
  border-radius: 90px;
  border: 3px solid #0286c7;
}


input[type=range]::-moz-range-track {
  width: 100%;
  height: 55px;
  cursor: pointer;
  background: #fff;
  border-radius: 90px;
  border: 3px solid #0286c7;
}

input[type=range]::-ms-track {
  width: 100%;
  height: 55px;
  cursor: pointer;
  background: #fff;
  border-radius: 90px;
  border: 3px solid #0286c7;
}

input[type=range]::-ms-fill-lower {
  background: #2a6495;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}


input[type=range]::-ms-fill-upper {
  background: #3071a9;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}


input[type=range]:focus::-ms-fill-upper {
  background: #367ebd;
}


/*******  TRIANGLE + INFO + NOMBRE DE PAGE  ********/

.triangle{
    border: none!important;/*finanlement on en veut pas (david)*/
	border-top: 25px solid #fff; /* 50 */
	border-left: 17.5px solid transparent; /* 35 */
	border-right: 17.5px solid transparent; /* 35 */
	width: 0px;
	margin: 30px auto 15px; /* 40 auto 20 */
}

.reponse p.legend,
.reponse p.chiffre-nb-pages{
	color: #fff;
	text-shadow: -1px -1px 0 #0286c7, 1px -1px 0 #0286c7, -1px 1px 0 #0286c7, 1px 1px 0 #0286c7;
	line-height: 1.15em;
	font-family: usual, sans-serif;
	font-weight: 600;
	font-style: normal;
	margin-top: 16px;
}

.q2 .reponse p.legend{
	font-size: 1.9rem;
}


.q2 .reponse p.chiffre-nb-pages{
	font-size: 2.65rem;
}


/***  ANIMATION DE LA QUESTION 2  ***/

.fusee-container{
	position: absolute;
	right: 10%; /* 10 */
	top: -72px;
	transform: scale(0.87) rotate(10deg); /* scale(0.87) rotate(10deg) */
	animation: mouvement_fusee 4s linear infinite;
	z-index: 5;
}

.fusee-container .fusee-q2{
	position: relative;
	z-index: 99;
}

.fusee-container .fumee-blc{
	position: absolute;
    bottom: -330px;
    z-index: 100;
    left: calc(50% - 100px);
	animation: fumee_anim 0.5s linear infinite;
}

.fusee-container .beam{
	position: absolute;
    bottom: -800px;
	width: 130px;
    z-index: 80;
    left: calc(50% - 65px);
}


/*** Particule blanc ***/
.part_blanc_ext1{
	position: absolute;
    bottom: -72px;
	width: 45px;
    z-index: 60;
    right: 0; 
	animation: particle1 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}

.part_blanc_ext2{
	position: absolute;
    bottom: -130px;
	width: 25px;
    z-index: 60;
    right: 10px;
	animation: particle2 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}

.part_blanc_ext3{
	position: absolute;
    bottom: -99px;
	width: 45px;
    z-index: 60;
    left: 0px;
	animation: particle3 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
	animation-delay: 0.25s;
}

.part_blanc_ext4{
	position: absolute;
    bottom: -161px;
	width: 25px;
    z-index: 60;
    left: 10px;
	animation: particle4 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
	animation-delay: 0.25s;
}

.part_blanc_ext5{
	position: absolute;
    bottom: -240px;
	width: 45px;
    z-index: 90;
    left: 103px;
	animation: particle5 0.7s cubic-bezier(0.55, 0.09, 0.68, 0.53) infinite;
}

.part_blanc_ext6{
	position: absolute;
    bottom: -380px;
	width: 25px;
    z-index: 90;
    left: 75px;
    animation: particle6 0.9s cubic-bezier(0.55, 0.09, 0.68, 0.53) infinite;
}

.barre_blanc_ext1{
	position: absolute;
	bottom: -340px;
	width: 25px;
    z-index: 90;
    left: 75px;
	animation: barre_point1 0.9s cubic-bezier(0.55, 0.09, 0.68, 0.53) infinite;
}

.barre_blanc_int1{
	position: absolute;
	bottom: -410px;
	width: 25px;
    z-index: 90;
    left: 190px;
	animation: barre_point2 1.5s linear infinite;
}

.cercle_bleu_ext1{
	position: absolute;
	bottom: -410px;
	width: 125px;
    z-index: 80;
    right: 78px;
	animation: cercle_ext1 0.75s linear infinite;
}


.cercle_bleu_ext2{
	position: absolute;
	bottom: -215px;
	width: 125px;
    z-index: 80;
    left: 50px;
	animation: cercle_ext2 0.75s linear infinite;
	animation-delay: 0.5s;
}


.cercle_bleuP_int1{
	position: absolute;
	bottom: -365px;
	width: 25px;
    z-index: 80;
    left: 138px;
	animation: cercle_bleup_int1 1.5s linear infinite;
	animation-delay: 0.45s;
}

.cercle_bleuP_int2{
	position: absolute;
	bottom: -490px;
	width: 25px;
    z-index: 80;
    left: 190px;
	animation: cercle_bleup_int1 1.5s linear infinite;
	animation-delay: 0.9s;
}

.barre_bleuP_int1{
	position: absolute;
	bottom: -650px;
	width: 25px;
    z-index: 80;
    left: 138px;
	animation: barre_bleup_int1 1.5s linear infinite;
	animation-delay: 0.45s;
}

.barre_bleuP_int2{
	position: absolute;
	bottom: -775px;
	width: 25px;
    z-index: 80;
    left: 190px;
	animation: barre_bleup_int1 1.5s linear infinite;
	animation-delay: 0.9s;
}

/*****
	LES NUAGES ET-2
	.e2-nuage1
*****/

/*** ANIMATION DES NUAGES  Largeur : 199px / Hauteur : 69px ***/
.etape2 .element-graphique .nuage1,
.etape2 .element-graphique .nuage2,
.etape2 .element-graphique .nuage3,
.etape2 .element-graphique .nuage4,
.etape2 .element-graphique .nuage5,
.etape2 .element-graphique .nuage6,
.etape2 .element-graphique .nuage7{
	position: absolute;
	right: -260px;
	animation: animate2 10s linear infinite;
}



.etape2 .element-graphique .nuage1{
	top: -150px;
	right: 2%;
	animation-duration: 3s;
	opacity: 0.8;
	z-index: 6;
}
/*** VITESSE 
.etape2 .element-graphique.v1 .nuage1{
	animation-duration: 3.6s;
}
.etape2 .element-graphique.v2 .nuage1{
	animation-duration: 3.3s;
}
.etape2 .element-graphique.v3 .nuage1{
	animation-duration: 3s;
}
.etape2 .element-graphique.v4 .nuage1{
	animation-duration: 2.7s;
}
.etape2 .element-graphique.v5 .nuage1{
	animation-duration: 2.4s;
}
***/


.etape2 .element-graphique .nuage2{
	top: -150px;
	right: -12%;
	animation-duration: 4s;
	opacity: 0.6;
	transform: scale(0.6);
	animation-delay: 3s;
	z-index: 4;
}
/*** VITESSE 
.etape2 .element-graphique.v1 .nuage2{
	animation-duration: 4.8s;
}
.etape2 .element-graphique.v2 .nuage2{
	animation-duration: 4.4s;
}
.etape2 .element-graphique.v3 .nuage2{
	animation-duration: 4s;
}
.etape2 .element-graphique.v4 .nuage2{
	animation-duration: 3.6s;
}
.etape2 .element-graphique.v5 .nuage2{
	animation-duration: 3.2s;
}
***/


.etape2 .element-graphique .nuage3{
	top: -150px;
	right: 8%;
	animation-duration: 3.5s;
	opacity: 0.8;
	transform: scale(0.9);
	animation-delay: 1s;
}
/*** VITESSE 
.etape2 .element-graphique.v1 .nuage3{
	animation-duration: 4.2s;
}
.etape2 .element-graphique.v2 .nuage3{
	animation-duration: 3.85s;
}
.etape2 .element-graphique.v3 .nuage3{
	animation-duration: 3.5s;
}
.etape2 .element-graphique.v4 .nuage3{
	animation-duration: 3.15s;
}
.etape2 .element-graphique.v5 .nuage3{
	animation-duration: 2.8s;
}
***/


.etape2 .element-graphique .nuage4{
	top: -150px;
	right: -20%;
	opacity: 0.6;
	animation-duration: 3.75s;
	transform: scale(0.65);
	animation-delay: 5s;
	z-index: 4;
}
/*** VITESSE 
.etape2 .element-graphique.v1 .nuage4{
	animation-duration: 4.5s;
}
.etape2 .element-graphique.v2 .nuage4{
	animation-duration: 4.125s;
}
.etape2 .element-graphique.v3 .nuage4{
	animation-duration: 3.75s;
}
.etape2 .element-graphique.v4 .nuage4{
	animation-duration: 3.375s;
}
.etape2 .element-graphique.v5 .nuage4{
	animation-duration: 3s;
}
***/


.etape2 .element-graphique .nuage5{
	top: -150px;
	right: 16%;
	animation-duration: 3.25s;
	opacity: 0.8;
	transform: scale(0.9);
	animation-delay: 1.8s;
	z-index: 6;
}

/*** Vitesse
.etape2 .element-graphique.v1 .nuage5{
	animation-duration: 3.9s;
}
.etape2 .element-graphique.v2 .nuage5{
	animation-duration: 3.575s;
}
.etape2 .element-graphique.v3 .nuage5{
	animation-duration: 3.25s;
}
.etape2 .element-graphique.v4 .nuage5{
	animation-duration: 2.925s;
}
.etape2 .element-graphique.v5 .nuage5{
	animation-duration: 2.6s;
}
***/

.etape2 .element-graphique .nuage6{
	top: -150px;
	right: -10%;
	animation-duration: 5s;
	opacity: 0.5;
	transform: scale(0.4);
	animation-delay: 2s;
}


.etape2 .element-graphique .nuage7{
	top: -150px;
	right: -26%;
	animation-duration: 4s;
	opacity: 0.8;
	transform: scale(0.7);
	animation-delay: 3.8s;
	z-index: 6;
}

	
/*****************
	QUESTION 1 - MOBILE
	CLASSES : .q1 .reponse .btn-choix 
******************/
	.q1 h2,
	.q2 h2,
	.q3 h2,
	.q4 h2,
	.q5 h2,
	.q6 h2,
	.q7 h2,
	.q8 h2{
		font-size: 7vw; /* 4.5 */
		margin: 4.5% 0 3.4%; /* 5 0 3.4 */
	}

	.q2 h2,
	.q3 h2,
	.q4 h2{
		margin: 9% 0 3.4%; /* 5 0 3.4 */
	}

	.q1 h2,
	.q3 h2,
	.q4 h2,
	.q5 h2,
	.q7 h2,
	.q8 h2{
		font-size: 5vw;
		line-height: 1.25em;
	}

	.q1 .reponse label,
	.q6 .reponse label{
		width: 48%; /* 21 */
		margin: 0 0% 12px; /* 0 1.25 12 */
	}

	.q1 .reponse label .btn-choix,
	.q6 .reponse label .btn-choix{
		font-size: 14vw; /* 5.4 */
	}

	.q1 .reponse label .btn-choix{
		padding: 15.5%; /* 24.5% */
	}

	.q1 .reponse label.q1-pe .btn-choix{
		padding: 15.5% 12.88%; /* 58.5 52.25 */
	}

	.q1 .reponse label.q1-me .btn-choix{
		padding: 15.5% 18.11%; /* 58.5 64.75 */
	}

	.q1 .reponse p{
		font-size: 4vw; /* 1.62VW */
		margin-top: 16px; /* 16 */
	}

	.q1 .reponse p.petit,
	.q6 .reponse p.petit{
		font-size: 3.4vw; /* 1.4 */
	}

	.q6 .reponse p.x-petit{
		font-size: 2.6vw; /* 1.4 */
	}

	/*** ELEMENTS VISUEL - Question 1 ***/

	.etape1 .element-graphique .sol{
		right: -25%; /* 0 */
		width: 175%; /* 100 */
	}

	.etape1 .element-graphique .fusee{
		bottom: 7.47%; /* 7.47 */
		right: 7.20%; /* 135 / 7.09% */
		width: 22.2%; /* 19.7% */
	}

	.etape1 .element-graphique .madame1{ /* 4e place */
		bottom: 7.25%; /* 68 / 7.25 */
		right: 50.83%; /* 777 / 40.83% */
		width: 3.82%; /* 2.57 / 49px */
	}

	.etape1 .element-graphique .madame2{ /* 1e place */
		bottom: 2.13%; /* 20 / 2.13 */
		right: 30.08%; /* 525 / 27.58% */
		width: 4.14%; /* 2.89 / 55px */
	}


	.etape1 .element-graphique .monsieur1{ /* 5e place */
		bottom: 3.52%; /* 33 / 3.52 */
		right: 56.53%; /* 838 / 44.03% */
		width: 3.71%; /* 2.46 / 46px */
	}

	.etape1 .element-graphique .monsieur2{ /* 3e place */
		bottom: 3.52%; /* 33 / 3.52 */
		right: 43.39%; /* 683 / 35.89% */
		width: 4.87%; /* 3.62 / 69px */
	}

	.etape1 .element-graphique .monsieur3{ /* 2e place */
		bottom: 9.81%; /* 9.81 */
		right: 35.68%; /* 603 / 31.68% */
		width: 4.35%; /* 3.10 / 59px */
	}

	.etape1 .element-graphique .monsieur4{ /* 6e place */
		bottom: 5.86%; /* 5.86 */
		right: 62.5%; /* 904 / 47.5% */
		width: 4.19%; /* 2.94 / 56px */
	}


/**********************************
	QUESTION 3
	CLASSES: .etape3 #form_pages .legend .chiffre-nb-pages
*********************************/
.etape3{
	background-image: url(../img/etape-3/fond_etape3.jpg);
	background-size: cover;
	background-position: bottom left;
	background-repeat: no-repeat;
}


.etape3 .reponse{
	text-align: center;
}

.q3 .reponse p.legend{
	font-size: 1.7rem; /* 2.25 */
}


.q3 .reponse p.chiffre-nb-pages{
	font-size: 1.2rem; /* 1.75 */
}




/*** ANIMATION ET POSITIONNEMENT  ***/
.etape3 .fusee-container{
	position: absolute;
	right: 10%; /* 10 */
	top: 50%;
	transform: scale(0.7) rotate(35deg); /* scale(0.87) rotate(10deg) */
	animation: mouvement_fusee2 5s linear infinite;
}

/* etoile g1 e1 */

.etape3 .etoile{
	animation: etoile_scintillant 0.6s linear infinite;
	position: absolute;
	opacity: 0;
	transition: 0.35s all ease-in-out;
}

.etape3 .etoile.visible{
	opacity: 1;
}

.etape3 .e1{
	top: 10%;
	right: 25%;
	animation-delay: 0.05s;
}

.etape3 .e2{
	bottom: 10%;
	right: 10%;
	animation-delay: 0.1s;
}

.etape3 .e3{
	top: 7.5%;
	right: 50%;
	animation-delay: 0.15s;
}

.etape3 .e4{
	top: 40%;
	right: 35%;
	animation-delay: 0.10s;
}

.etape3 .e5{
	top: 25%;
	left: 35%;
	animation-delay: 0.15s;
}

.etape3 .e6{
	top: 19%;
	left: 10%;
	animation-delay: 0.20s;
}

.etape3 .e7{
	top: 20%;
	right: 8%;
	animation-delay: 0.15s;
}

.etape3 .e8{
	top: 60%;
	left: 5%;
	animation-delay: 0.20s;
}

.etape3 .e9{
	top: 50%;
	left: 50%;
	animation-delay: 0.25s;
}

.etape3 .e10{
	top: 55%;
	right: 2.5%;
	animation-delay: 0.20s;
}

.etape3 .e11{
	top: 7%;
	left: 22%;
	animation-delay: 0.25s;
}

.etape3 .e12{
	top: 40%;
	left: 20%;
	animation-delay: 0.30s;
}

.etape3 .e13{
	top: 28%;
	right: 27.5%;
	animation-delay: 0.25s;
}

.etape3 .e14{
	top: 32%;
	left: 2%;
	animation-delay: 0.30s;
}

.etape3 .e15{
	top: 70%;
	right: 35%;
	animation-delay: 0.35s;
}


/**********************************
	QUESTION 4
	CLASSES: .etape4 #form_pages .legend .chiffre-nb-pages
*********************************/
.etape4{
	background-image: url(../img/etape-4/fond_etape4.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.etape4 .reponse{
	text-align: center;
}

.q4 .reponse p.legend{
	font-size: 1.5rem; /* 2.25 */
}


.q4 .reponse p.chiffre-nb-pages{
	font-size: 1.15rem; /* 1.75 */
}

.q4 .reponse p.chiffre-nb-pages br{
	display: none;
}





/*** PLACEMENT ET ANIMATION DES CONSTELLATION ***/
.etape4 .constellation-cont{
	position: absolute;
    top: 20%;
    right: -55%;
    width: 650px;
    height: 610px;
    transform: scale(0.45);
}

.etape4 .etoile{
	animation: etoile_scintillant 1s linear infinite;
	position: absolute;
	opacity: 0;
	transition: 0.35s all ease-in-out;
}


.etape4 .etoile.visible{
	opacity: 1;
}


.etape4 .ligne-constellation{
	width: 0;
	background-color: rgba(255,255,255,0.66);
	height: 4px;
	position: absolute;
	transition: 0.6s opacity ease-in-out;
	opacity: 0;
/*	transform-origin: center left;*/
}


.etape4 .ligne-constellation.visible{
	opacity: 1;
}



/*** GROUPE 1 ***/
.etape4 .e1{
	top: 35%;
	right: 55%;
	animation-delay: 0.05s;
}


.etape4 .e2{
	top: 30.0%;
	right: 20%;
	animation-delay: 0.15s;
}

.etape4 .e3{
	top: 78.0%;
	right: 50.5%;
	animation-delay: 0.25s;
}


.etape4 .l1{
	width: 165px;
	top: 35.5%; /* 33.5 */
	right: 28.0%;
	transform: rotateZ(-9deg);
}

.etape4 .l2{
	width: 207px;
	top: 59%; /* 36.75 */
	right: 40%; /* 16 */
	transform: rotateZ(83deg);
}


/*** GROUPE 2 ***/

.etape4 .e4{
	top: 74.0%;
	right: 22.00%;
	animation-delay: 0.35s;
	transition-delay: 0.7s;
}

.etape4 .e5{
	top: 93.5%;
	right: 15%;
	animation-delay: 0.45s;
	transition-delay: 1.4s;
}

.etape4 .l3{
	width: 205px;
	top: 54.5%; /* 33.2 */
	right: 8.5%; /* 10.25 */
	transform: rotateZ(94deg);
	transition-delay: 0.35s;
}

.etape4 .l4{
	width: 125px;
	top: 78.75%; /* 55.5 */
	right: 29.5%; /* 16.25 */
	transform: rotateZ(-9deg);
	transition-delay: 0.35s;
}

.etape4 .l5{
	width: 125px;
	top: 87.0%; /* 55.5 */
	right: 17.8%; /* 16.25 */
	transform: rotateZ(43deg);
	transition-delay: 1.05s;
}

/*** GROUPE 3 ***/

.etape4 .e6{
	top: 11%;
	right: 38%;
	transition-delay: 0.7s;
	animation-delay: 0.55s;
}

.etape4 .e7{
	top: 17%;
	right: 9.5%;
	transition-delay: 1.4s;
	animation-delay: 0.65s;
}

.etape4 .e8{
	top: 2%;
	right: 2%;
	transition-delay: 2.1s;
	animation-delay: 0.75s;
}

.etape4 .l6{
	width: 92px;
	top: 26%; /* 55.5 */
	right: 34.75%; /* 16.25 */
	transform: rotateZ(94deg);
	transition-delay: 0.35s;
}

.etape4 .l7{
	width: 128px;
	top: 17.0%; /* 55.5 */
	right: 17.5%; /* 16.25 */
	transform: rotateZ(9deg);
	transition-delay: 1.05s;
}

.etape4 .l8{
	width: 62px;
	top: 12.5%; /* 55.5 */
	right: 4%; /* 16.25 */
	transform: rotateZ(110deg);
	transition-delay: 1.75s;
}

/*** GROUPE 4 ***/
.etape4 .e9{
	top: 87%;
	right: 65%;
	transition-delay: 0.7s;
	animation-delay: 0.85s;
}

.etape4 .e10{
	top: 80%;
	right: 95%;
	transition-delay: 1.4s;
	animation-delay: 0.95s;
}

.etape4 .l9{
	width: 70px;
	top: 85.5%; /* 55.5 */
	right: 55.25%; /* 16.25 */
	transform: rotateZ(-30deg);
	transition-delay: 0.35s;
}

.etape4 .l10{
	width: 145px;
	top: 86.5%; /* 55.5 */
	right: 71.5%; /* 16.25 */
	transform: rotateZ(14deg);
	transition-delay: 1.05s;
}

/*** GROUPE 5 ***/
.etape4 .e11{
	top: 28.0%;
	right: 90%;
	transition-delay: 0.7s;
	animation-delay: 1.05s;
}

.etape4 .e12{
	top: 22.5%;
	right: 70.5%;
	transition-delay: 1.4s;
	animation-delay: 1.15s;
}

.etape4 .l11{
	width: 260px;
	top: 57%; /* 55.5 */
	right: 75.5%; /* 16.25 */
	transform: rotateZ(95deg);
	transition-delay: 0.35s;
}

.etape4 .l12{
	width: 75px;
	top: 28.25%; /* 55.5 */
	right: 77.5%; /* 16.25 */
	transform: rotateZ(-16deg);
	transition-delay: 1.05s;
}


/**********************************
	QUESTION 5
	CLASSES: .etape5 #form_pages .legend .chiffre-nb-pages
*********************************/
.etape5{
	background-image: url(../img/etape-5/fond_etape5.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.etape5 .reponse{
	text-align: center;
}

.q5 .reponse p.legend{
	font-size: 1.5rem; /* 2.25 */
}

.q5 .reponse p.chiffre-nb-pages{
	font-size: 1.15rem; /* 1.75 */
}

.q5 .reponse p.chiffre-nb-pages br{
	display: none;
}


/**** LES ÉLÉMENTS GRAPHIQUES ****/

.planete-container{
	position: absolute;
    top: -145px; /* -50 */
    right: -420px; /* -275 */
	transform: scale(0.4); /* 1 */
	z-index: 9;
	border-radius: 99999px;
	overflow: hidden;
	border: 5px solid rgb(0,113,188);	
	background-color: rgb(5, 93, 156);
}

.dq,.dc,.point{
	position: absolute;
}


.planete-container .planete{
	transition: 0.75s all ease-in-out;
}

.elem-terre{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	/*bottom: 0;  IMPORTANT */
	/*right: 0;  IMPORTANT */
	z-index: 999;
	transition: 0.75s all ease-in-out;
}

.elem-terre .terre{
	position: absolute;
	max-width: 781px;
	transition: 0.75s all ease-in-out;
}

.elem-terre .g1,
.elem-terre .g2,
.elem-terre .g3,
.elem-terre .g4{
	opacity: 0;
	transition: 0.25s opacity ease-in-out;
}


/****** CHOIX 1 : Municipalité / Ville ******/
.elem-terre.choix1 .terre{
	transform: scale(6.75);
    top: 1250px;
    left: -600px;
}

/*** LE POINT ***/
.elem-terre.choix1 .g1{
	position: absolute;
    z-index: 999999999;
    top: 60%; /* À Continuer */
    left: 33%; /* À Continuer */
	transition-delay: 0.5s;
	opacity: 1;
}

/****** CHOIX 2 : Régional ******/
.elem-terre.choix2 .terre{
	transform: scale(6);
	top: 1050px;
    left: -500px;
}

/*** LE POINT ***/
.elem-terre.choix2 .g1{
	transition-delay: 0.0s;
	opacity: 0;
}

/*** LES POINTS ***/
.elem-terre.choix2 .g2{
	position: absolute;
    z-index: 999999999;
	opacity: 1;
}

.elem-terre.choix2 .p1{
	top: 50%;
	left: 34.5%;
	transition-delay: 0.5s;
}

.elem-terre.choix2 .p2{
	top: 54%;
	left: 36%;
	transition-delay: 0.75s;
}

.elem-terre.choix2 .p3{
	top: 52.5%;
	left: 33%;
	transition-delay: 1s;
}

/****** CHOIX 3 : Provincial ******/
.elem-terre.choix3 .terre{
	transform:  scale(5.0);
	top: 900px;
    left: -450px;
}

/** DRAPEAUX **/
.elem-terre.choix3 .g3{
	position: absolute;
    z-index: 999999999;
    top: 45%; /* À Continuer */
    left: 38%; /* À Continuer */
	transition-delay: 0.5s;
	opacity: 1;
}

/*** LES POINTS ***/
.elem-terre.choix3 .g2{
	transition-delay: 0.0s;
	opacity: 0;
}


/****** CHOIX 4 : National ******/

.elem-terre.choix4 .terre{
	transform:  scale(2.75);
	top: 500px;
    left: 100px;
}


/** DRAPEAUX **/
.elem-terre.choix4 .g3{
	transition-delay: 0.0s;
	opacity: 0;
}

.elem-terre.choix4 .g4{
	position: absolute;
    z-index: 999999999;
    top: 40%; /* À Continuer */
    left: 28%; /* À Continuer */
	transition-delay: 0.5s;
	opacity: 1;
}


/****** CHOIX 5 : Mondial ******/

.elem-terre.choix5 .terre{
	transform:  scale(1.15);
	top: 0px;
    left: 0px;
}

/** DRAPEAUX **/
.elem-terre.choix5 .g4{
	transition-delay: 0.0s;
	opacity: 0;
}

/**********************************
	QUESTION 6
	CLASSES: .etape6
*********************************/
.etape6{
	background-image: url(../img/etape-6/fond-etape6.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.etape6 .reponse{
	text-align: center;
}

.q6 .reponse p.legend{
	font-size: 1.5rem; /* 2.25 */
}

.q6 .reponse p.chiffre-nb-pages{
	font-size: 1.15rem; /* 1.75 */
}

.q6 .reponse p.chiffre-nb-pages br{
	display: none;
}

/**** AJUSTEMENT DES BOUTONS ****/
.q6 .reponse label .btn-choix{
	padding: 16.75% 13.15%
}

.q6 .reponse label.q6-pb .btn-choix{
	padding: 16.75% 13.8%; /* 58.5 52.25 */
}

/*** ÉLÉMENTS GRAPHIQUES ***/
#e6 .element-graphique{
	pointer-events: none;
}

#e6 .element-graphique .g1,
#e6 .element-graphique .g2,
#e6 .element-graphique .g3,
#e6 .element-graphique .g4{
	opacity: 0;
	transition: 0.25s opacity ease-in-out;
}

#e6 .element-graphique .g1.visible,
#e6 .element-graphique .g2.visible,
#e6 .element-graphique .g3.visible,
#e6 .element-graphique .g4.visible{
	opacity: 1;
	transition: 0.25s opacity ease-in-out;
}


#e6 .element-graphique .fusee{
	position: absolute;
	right: 20.0%; /* 27.5 */
	top: 4.0%; /* 7.5 */
	width: 150px; /* 270 */
	z-index: 98;
	transform: rotateZ(4deg);
	animation: flotte_fuse_espace 5s linear infinite;
}

/* Étape 1 */
#e6 .element-graphique .personnage{
	position: absolute;
	right: calc(95% - 135px); /* 26 */
	top: 55%; /* 45 */
	width: 135px; /* 197 */
	z-index: 100;
	transform: rotateZ(7.5deg);
	animation: float 5.5s ease-in-out infinite;
}

/* Étape 2 */
#e6 .element-graphique .alien{
	position: absolute;
	width: 90px; /* 133 */
	right: 2.75%; /* 3.5 */
	top: 62%; /* 55 */
	z-index: 101;
	transform: rotateZ(8deg);
	animation: float 6s ease-in-out infinite;
	animation-delay: -2s;
}

#e6 .element-graphique .b1{
	position: absolute;
	right: calc(68% - 65px); /* 24.5 */
	top: 61%; /* 57 */
	width: 65px; /* 96 */
	z-index: 102;
	animation: float 7s ease-in-out infinite;
	animation-delay: -3s;
}
/* Étape 3 */
#e6 .element-graphique .b2{
	position: absolute;
	right: 26%; /* 15.5 */
	top: 42.5%; /* 47 */
	width: 62px; /* 90 */
	z-index: 102;
	animation: float 8s ease-in-out infinite;
	animation-delay: -5s;
}

#e6 .element-graphique .b3{
	position: absolute;
	right: 20%; /* 10.25 */
	top: 75%; /* 63 */
	width: 52px; /* 78 */
	z-index: 103;
	animation: float 6.75s ease-in-out infinite;
	animation-delay: -3.8s;
}

/* Étape 4 */
#e6 .element-graphique .b4{
	position: absolute;
	right: 40.00%; /* 17.5 */
	top: 82.5%; /* 70 */
	width: 70px; /* 96 */
	z-index: 102;
	animation: float 7.4s ease-in-out infinite;
	animation-delay: -1.8s;
}

#e6 .element-graphique .b5{
	position: absolute;
	right: calc(98% - 39px); /* 36 */
	top: 25%; /* 55 */
	width: 39px; /* 62 */
	z-index: 99;
	animation: float_spin 7.4s ease-in-out infinite;
	animation-delay: -1.8s;
}

#e6 .element-graphique .b6{
	position: absolute;
	right: 6.25%; /* 7.5 */
	top: 43.5%; /* 44 */
	width: 60px; /* 82 */
	z-index: 102;
	animation: float 5s ease-in-out infinite;
	animation-delay: -4s;
}

/**********************************
	QUESTION 7
	CLASSES: .etape7
*********************************/
.etape7{
	background-image: url(../img/etape-6/fond-etape6.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.etape7 .reponse{
	text-align: center;
	margin-top: 50px;
}

.q7 .reponse label{
	width: 40%;
}

.q7 .reponse label p{
	font-size: 20px;
}

/***  AJUSTEMENT D'ÉLÉMENT UNIQUE À L'ÉTAPE 7  ***/
.etape7 .question{
	width: 100%;
}

.etape7 .question .qestion-titre{
	margin: 4.5% 20px 3.4%; /* 4.5 20 3.4 */
}

/* Les boutons */
.q7 .reponse label .btn-choix{
	font-size: 18vw; /* 8 */
	padding: 16%; /* 12 */
}

.q7 .reponse label.q7-non .btn-choix{
	padding: 16% 23%; /* 12 18 */
}

/* FIN BOUTON CHOIX */
/* BOUTON SUIVANT/PRÉCÉDENT */
#scene .etape2 .question .btn-container,
#scene .etape3 .question .btn-container,
#scene .etape4 .question .btn-container,
#scene .etape5 .question .btn-container,
#scene .etape6 .question .btn-container,
#scene .etape7 .question .btn-container{
	width: 100%;
	text-align: center;
	margin-top: 16px; /* 36 */
}

#scene .etape2 .question .btn-container .ligne-bouton-precedent ,
#scene .etape2 .question .btn-container .ligne-bouton-suivant,
#scene .etape3 .question .btn-container .ligne-bouton-precedent ,
#scene .etape3 .question .btn-container .ligne-bouton-suivant,
#scene .etape4 .question .btn-container .ligne-bouton-precedent ,
#scene .etape4 .question .btn-container .ligne-bouton-suivant,
#scene .etape5 .question .btn-container .ligne-bouton-precedent ,
#scene .etape5 .question .btn-container .ligne-bouton-suivant,
#scene .etape6 .question .btn-container .ligne-bouton-precedent ,
#scene .etape6 .question .btn-container .ligne-bouton-suivant,
#scene .etape7 .question .btn-container .ligne-bouton-precedent ,
#scene .etape7 .question .btn-container .ligne-bouton-suivant{
	display: inline-block;
	margin: 8px 8px; /* 0 12 */
	width: auto;
}

#scene .question .btn-precedent{
	padding: 8px 22px 8px 48px; /* 10 60 10 30 */
}

#scene .question .btn-precedent i.fas{
	right: unset; /* 2 */
	left: 2px; /* 2 */
}

/****  LA TRANSITION DES RÉPONSES / ANIMATION ****/
.etape7 .question .qestion-titre,
.etape7 .question .btn-container{
	opacity: 1;
	transition: 0.3s all ease-in-out;
}

.etape7 .question .qestion-titre.en-transition,
.etape7 .question .btn-container.en-transition{
	opacity: 0;
}

.etape7 .question .reponse.quest-1,
.etape7 .question .reponse.quest-2,
.etape7 .question .reponse.quest-3{
	opacity: 0;
	transition: 0.3s all ease-in-out;
	pointer-events: none;
	display: none;
}

.etape7 .question .reponse.quest-1.visible,
.etape7 .question .reponse.quest-2.visible,
.etape7 .question .reponse.quest-3.visible{
	display: block;
}



.etape7 .question[data-question="1"] .reponse.quest-1,
.etape7 .question[data-question="2"] .reponse.quest-2,
.etape7 .question[data-question="3"] .reponse.quest-3{
	opacity: 1;
	display: block;
	pointer-events: all;
}


/*** GESTION ***/
#scene .etape7 .question[data-question="1"] .btn-container .ligne-bouton-precedent{
	/* display: none; */
}

/**********************************
	QUESTION 8
	CLASSES: .etape8
*********************************/
.etape8{
	background-image: url(../img/etape-8/fond-etape8.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.etape8 .reponse{
	text-align: center;
}

/* À ENLEVER EN DESKTOP */
.etape8 .formulaire{
	overflow-y: scroll;
}

.etape8 .formulaire .ligne-bouton-envoyer{
	margin-bottom: 100px;
}

/* FIN DESKTOP */

.etape8 .formulaire .q8 .description a{
	color: #fff;
}
.etape8 .formulaire .q8 .description{
	color: #fff;
	line-height: 1.15em;
    font-family: usual, sans-serif;
	font-weight: 600;
	font-size: 14px; /* 24 */
	text-align: center;
	margin: 0 12px; /* 0 10% */
	text-shadow: -1px -1px 0 #0286c7, 1px -1px 0 #0286c7, -1px 1px 0 #0286c7, 1px 1px 0 #0286c7;
}

.etape8 .formulaire .q8 .description .petit-desc{
	display: block;
	font-size: 12px; /* 16 */
}

/*** CSS DU FORMULAIRE ***/
.etape8 .formulaire .form{
	text-align: center;
    max-width: 900px;
    width: 80%; /* 80% */
    margin: 10px auto; /* 30 auto */
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
	transition: 0.5s all ease-in-out;
}

.etape8 .formulaire .form .full-size,
.etape8 .formulaire .form .half-size{
	display: flex;
	flex-direction: column;
	flex-flow: column wrap;
	margin: 5px 0; /* 12 0 */
}

.etape8 .formulaire .form .half-size{
	width: 100%; /* 47.5 */
	margin-right: 0%; /* 5 */
}

.etape8 .formulaire .form .half-size.last{
	margin-right: 0%;
}

.etape8 .formulaire .form .full-size{
	width: 100%;
}

.etape8 .formulaire .form .full-size label,
.etape8 .formulaire .form .half-size label{
	display: block;
	color: #fff;
	line-height: 1.15em;
    font-family: usual, sans-serif;
	font-weight: 600;
	text-align: left;
	margin-bottom: 4px; /* 8 */
	transform: translateY(24px); /* 36 */
	transition: 0.33s all ease-in-out;
	order: 1;
}

.etape8 .formulaire .form .full-size label span.required,
.etape8 .formulaire .form .half-size label span.required{
	color: rgb(228, 72, 72);
}

.etape8 .formulaire .form p.form-error{
	color: rgb(228, 72, 72);
	font-size: 10px; /* 12 */
	text-align: left;
	order: 3;
}

.etape8 .formulaire .form .full-size.textarea-r3 label,
.etape8 .formulaire .form .half-size.textarea-r3 label{
	transform: translateY(40px); /* 60 */
}

.etape8 .formulaire .form .full-size label.text-inside,
.etape8 .formulaire .form .half-size label.text-inside{
	transform: translateY(0)!important;
}

.etape8 .formulaire .form .full-size input,
.etape8 .formulaire .form .full-size textarea,
.etape8 .formulaire .form .half-size input,
.etape8 .formulaire .form .half-size textarea{
	display: block;
	color: #fff;
    font-family: usual, sans-serif;
	font-weight: 600;
	text-align: left;
	width: 100%;
	padding: 6px 0px; /* 12 0*/
	font-size: 14px; /* 20 */
	transition: 0.33s all ease-in-out;
	background-color: transparent;
	border: none;
	border-bottom: 2px solid #fff;
	order: 2;
	resize: none;
}

.etape8 .formulaire .form .full-size input:focus,
.etape8 .formulaire .form .full-size textarea:focus,
.etape8 .formulaire .form .half-size input:focus,
.etape8 .formulaire .form .half-size textarea:focus{
	border-bottom: 2px solid #41b3ec;
}

.etape8 .formulaire .form .full-size input:focus-visible,
.etape8 .formulaire .form .full-size textarea:focus-visible,
.etape8 .formulaire .form .half-size input:focus-visible,
.etape8 .formulaire .form .half-size textarea:focus-visible{
	outline: none!important;
}

.etape8 .formulaire .form .full-size input:focus + label,
.etape8 .formulaire .form .full-size textarea:focus + label,
.etape8 .formulaire .form .half-size input:focus + label,
.etape8 .formulaire .form .half-size textarea:focus + label{
	transform: translateY(0);
}

.etape8 .formulaire .form .full-size input:-internal-autofill-selected,
.etape8 .formulaire .form .full-size textarea:-internal-autofill-selected,
.etape8 .formulaire .form .half-size input:-internal-autofill-selected,
.etape8 .formulaire .form .half-size textarea:-internal-autofill-selected{
	appearance: none!important;
	background-color: transparent!important;
	color: #fff!important;
}

/*****
	Message de confirmation
******/
.message-formulaire{
	padding: 20px 32px; /* 20 32 */
	border-radius: 30px;
	background-color: #fff;
	text-align: center;
	max-width: 50%; /* 50? */
    margin: 36px auto 0; /* 36 auto 0 */
	-webkit-box-shadow: 2px 2px 7px 2px rgba(0,0,0,0.5); /* 2 2 7 2 */
	box-shadow: 2px 2px 7px 2px rgba(0,0,0,0.5);
	border: 2px solid #fff; /* 2 */
	transition: 0.5s all ease-in-out;
	transform: translateY(100px); /* 100 */
	display: none;
	opacity: 0;
}

.message-formulaire.visible{
	display: block;
}

.message-formulaire.success{
	background-color: #42cc79;
}
.message-formulaire.erreur{
	background-color: rgb(228, 72, 72);
	position: absolute;
    left: 0;
    right: 0;
    top: 20%; /* 20 */
    z-index: 999;
}

.message-formulaire.erreur,
.message-formulaire.success{
	opacity: 1;
	transform: translateY(0px);
}

.message-formulaire p{
	color: #fff;
	font-family: usual, sans-serif;
	font-weight: 600;
	font-size: 18px; /* 18px */
}

/****************************
	ZONE DU RÉSULTATS EN MONTANT $
****************************/
.montant-container{
	background-color: #fff;
	padding: 12px 16px 12px; /* 20 50 */
	border: 3px solid #0286c7;
	border-radius: 10px; /* 20 */
	text-align: center;
	-webkit-box-shadow: 2px 2px 7px 2px rgba(0,0,0,0.5); /* 2 2 7 2 */
	box-shadow: 2px 2px 7px 2px rgba(0,0,0,0.5);
}

.montant-container.mobile{
	max-width: 80%; /* 70 */
	width: auto;
	margin: 16px auto 0; /* 16 a 0 */
}

.montant-container.desktop{
	display: none;
}

.montant-container p{
	font-family: usual, sans-serif;
	font-weight: 600;
	font-size: 13px; /* 32px */
	color: #000;
}

.montant-container p.montant{
	font-family: usual, sans-serif;
	font-weight: 600;
	font-size: 18px; /* 32px */
	color: #000;
	margin-top: 8px; /* 16 */
}

@media screen and (min-width: 400px){  /**********   MIN-WIDTH: 400px   ***************/
	
	#scene .etape2 .question .btn-container,
	#scene .etape3 .question .btn-container,
	#scene .etape4 .question .btn-container,
	#scene .etape5 .question .btn-container,
	#scene .etape6 .question .btn-container,
	#scene .etape7 .question .btn-container{
		margin-top: 20px; /* 36 */
	}

/*****************
	QUESTION 1
	CLASSES : .q1 .reponse .btn-choix 
******************/
	
	.q1 .reponse label .btn-choix,
	.q6 .reponse label .btn-choix{
		font-size: 11vw; /* 5.4 */
	}

	.q1 .reponse label .btn-choix{
		padding: 15.5%; /* 24.5% */
	}

	.q1 .reponse label.q1-pe .btn-choix{
		padding: 15.5% 14.07%; /* 58.5 52.25 */
	}

	.q1 .reponse label.q1-me .btn-choix{
		padding: 15.5% 16.93%; /* 58.5 64.75 */
	}

	.q1 .reponse p,
	.q6 .reponse p,
	.q7 .reponse p{
		font-size: 4vw; /* 1.62VW */
		margin-top: 16px; /* 16 */
	}

	.q1 .reponse p.petit,
	.q6 .reponse p.petit{
		font-size: 3.4vw; /* 1.4 */
	}

	.q6 .reponse p.x-petit{
		font-size: 2.6vw; /* 1.4 */
	}

	/*** ELEMENTS VISUEL - Question 1 ***/

	.etape1 .element-graphique .sol{
		right: -15%; /* 0 */
		width: 150%; /* 100 */
	}

	.etape1 .element-graphique .fusee{
		bottom: 7.47%; /* 7.47 */
		right: 7.20%; /* 135 / 7.09% */
		width: 22.2%; /* 19.7% */
	}

	.etape1 .element-graphique .madame1{ /* 4e place */
		bottom: 7.25%; /* 68 / 7.25 */
		right: 50.83%; /* 777 / 40.83% */
		width: 3.82%; /* 2.57 / 49px */
	}

	.etape1 .element-graphique .madame2{ /* 1e place */
		bottom: 2.13%; /* 20 / 2.13 */
		right: 30.08%; /* 525 / 27.58% */
		width: 4.14%; /* 2.89 / 55px */
	}


	.etape1 .element-graphique .monsieur1{ /* 5e place */
		bottom: 3.52%; /* 33 / 3.52 */
		right: 56.53%; /* 838 / 44.03% */
		width: 3.71%; /* 2.46 / 46px */
	}

	.etape1 .element-graphique .monsieur2{ /* 3e place */
		bottom: 3.52%; /* 33 / 3.52 */
		right: 43.39%; /* 683 / 35.89% */
		width: 4.87%; /* 3.62 / 69px */
	}

	.etape1 .element-graphique .monsieur3{ /* 2e place */
		bottom: 9.81%; /* 9.81 */
		right: 35.68%; /* 603 / 31.68% */
		width: 4.35%; /* 3.10 / 59px */
	}

	.etape1 .element-graphique .monsieur4{ /* 6e place */
		bottom: 5.86%; /* 5.86 */
		right: 62.5%; /* 904 / 47.5% */
		width: 4.19%; /* 2.94 / 56px */
	}
	
/**********************************
	QUESTION 4
	CLASSES: .etape4 #form_pages .legend .chiffre-nb-pages
*********************************/
.q4 .reponse p.legend{
	font-size: 1.6rem; /* 2.25 */
}


.q4 .reponse p.chiffre-nb-pages{
	font-size: 1.25rem; /* 1.75 */
}

/*** PLACEMENT ET ANIMATION DES CONSTELLATION ***/
.etape4 .constellation-cont{
    top: 15%;
    right: -38%;
    transform: scale(0.55);
}
	
	
/**********************************
	QUESTION 5
	CLASSES: .etape5 #form_pages .legend .chiffre-nb-pages
*********************************/


.q5 .reponse p.legend{
	font-size: 1.6rem; /* 2.25 */
}


.q5 .reponse p.chiffre-nb-pages{
	font-size: 1.25rem; /* 1.75 */
}

.planete-container{
    top: -105px; /* -50 */
    right: -390px; /* -275 */
	transform: scale(0.45); /* 1 */
}

/**********************************
	QUESTION 8
	CLASSES: 
*********************************/
/****************************
	ZONE DU RÉSULTATS EN MONTANT $
****************************/
.montant-container.mobile{
	max-width: 60%; /* 70 */
}

.montant-container p{
	font-size: 14px; /* 16px */
}

.montant-container p.montant{
	font-size: 25px; /* 32px */
	margin-top: 10px; /* 16 */
}
	
	
} /********** FIN  MIN-WIDTH: 400px   ***************/

@media screen and (min-width: 525px){  /**********   MIN-WIDTH: 525px   ***************/
	
	#scene .etape2 .question .btn-container,
	#scene .etape3 .question .btn-container,
	#scene .etape4 .question .btn-container,
	#scene .etape5 .question .btn-container,
	#scene .etape6 .question .btn-container,
	#scene .etape7 .question .btn-container{
		margin-top: 24px; /* 36 */
	}

/*****************
	QUESTION 1
	CLASSES : .q1 .reponse .btn-choix 
******************/
	.q1 h2,
	.q2 h2{
		font-size: 7vw; /* 4.5 */
		margin: 4.5% 0 3.4%; /* 5 0 3.4 */
	}
	
	.q2 h2,
	.q3 h2,
	.q4 h2{
		margin: 9% 0 3.4%; /* 5 0 3.4 */
	}
	
	.q1 h2,
	.q3 h2,
	.q4 h2{
		font-size: 5vw;
	}

	.q1 .reponse label,
	.q6 .reponse label{
		width: 21%; /* 21 */
		margin: 0 1.7% 12px; /* 0 1.25 12 */
	}

	.q1 .reponse label .btn-choix,
	.q6 .reponse label .btn-choix{
		font-size: 8vw; /* 5.4 */
	}

	.q1 .reponse label .btn-choix{
		padding: 24.5%; /* 24.5% */
	}	

	.q1 .reponse label.q1-pe .btn-choix{
		padding: 24.5% 21.88%; /* 58.5 52.25 */
	}

	.q1 .reponse label.q1-me .btn-choix{
		padding: 24.5% 27.11%; /* 58.5 64.75 */
	}

	.q1 .reponse p,
	.q6 .reponse p,
	.q7 .reponse p{
		font-size: 2.8vw; /* 1.62VW */
		margin-top: 16px; /* 16 */
	}

	.q1 .reponse p.petit,
	.q6 .reponse p.petit{
		font-size: 2.4vw; /* 1.4 */
	}

	.q6 .reponse p.x-petit{
		font-size: 2.00vw; /* 1.4 */
	}

	/*** ELEMENTS VISUEL - Question 1 ***/

	.etape1 .element-graphique .sol{
		right: -8%; /* 0 */
		width: 125%; /* 100 */
	}

	.etape1 .element-graphique .fusee{
		bottom: 7.47%; /* 7.47 */
		right: 7.20%; /* 135 / 7.09% */
		width: 22.2%; /* 19.7% */
	}

	.etape1 .element-graphique .madame1{ /* 4e place */
		bottom: 7.25%; /* 68 / 7.25 */
		right: 50.83%; /* 777 / 40.83% */
		width: 3.82%; /* 2.57 / 49px */
	}

	.etape1 .element-graphique .madame2{ /* 1e place */
		bottom: 2.13%; /* 20 / 2.13 */
		right: 30.08%; /* 525 / 27.58% */
		width: 4.14%; /* 2.89 / 55px */
	}


	.etape1 .element-graphique .monsieur1{ /* 5e place */
		bottom: 3.52%; /* 33 / 3.52 */
		right: 56.53%; /* 838 / 44.03% */
		width: 3.71%; /* 2.46 / 46px */
	}

	.etape1 .element-graphique .monsieur2{ /* 3e place */
		bottom: 3.52%; /* 33 / 3.52 */
		right: 43.39%; /* 683 / 35.89% */
		width: 4.87%; /* 3.62 / 69px */
	}

	.etape1 .element-graphique .monsieur3{ /* 2e place */
		bottom: 9.81%; /* 9.81 */
		right: 35.68%; /* 603 / 31.68% */
		width: 4.35%; /* 3.10 / 59px */
	}

	.etape1 .element-graphique .monsieur4{ /* 6e place */
		bottom: 5.86%; /* 5.86 */
		right: 62.5%; /* 904 / 47.5% */
		width: 4.19%; /* 2.94 / 56px */
	}

	.triangle{
		border-top: 30px solid #fff; /* 50 */
		border-left: 21px solid transparent; /* 35 */
		border-right: 21px solid transparent; /* 35 */
	}
	
	/**********************************
		QUESTION 4
		CLASSES: .etape4 #form_pages .legend .chiffre-nb-pages
	*********************************/

	.q4 .reponse p.legend{
		font-size: 1.7rem; /* 2.25 */
	}


	.q4 .reponse p.chiffre-nb-pages{
		font-size: 1.30rem; /* 1.75 */
	}

	/*** PLACEMENT ET ANIMATION DES CONSTELLATION ***/
	.etape4 .constellation-cont{
		top: 12%;
		right: -12%;
		transform: scale(0.65);
	}
	
/**********************************
	QUESTION 5
	CLASSES: .etape5 #form_pages .legend .chiffre-nb-pages
*********************************/


	.q5 .reponse p.legend{
		font-size: 1.7rem; /* 2.25 */
	}


	.q5 .reponse p.chiffre-nb-pages{
		font-size: 1.3rem; /* 1.75 */
	}

/**** LES ÉLÉMENTS GRAPHIQUES ****/
.planete-container{
    top: -25px; /* -50 */
    right: -320px; /* -275 */
	transform: scale(0.55); /* 1 */
}

/**********************************
	QUESTION 6
	CLASSES: 
*********************************/
/**** AJUSTEMENT DES BOUTONS ****/
.q6 .reponse label .btn-choix{
	padding: 24.5% 20.15%
}

.q6 .reponse label.q6-pb .btn-choix{
	padding: 24.5% 20.8%; /* 58.5 52.25 */
}
	
/**********************************
	QUESTION 8
	CLASSES: 
*********************************/
/****************************
	ZONE DU RÉSULTATS EN MONTANT $
****************************/
.montant-container p{
	font-size: 15px; /* 16px */
}

.montant-container p.montant{
	font-size: 28px; /* 32px */
	margin-top: 12px; /* 16 */
}


} /********** FIN  MIN-WIDTH: 525px   ***************/

@media screen and (min-width: 768px){  /**********   MIN-WIDTH: 768px   ***************/
	
	#scene .etape2 .question .btn-container,
	#scene .etape3 .question .btn-container,
	#scene .etape4 .question .btn-container,
	#scene .etape5 .question .btn-container,
	#scene .etape6 .question .btn-container,
	#scene .etape7 .question .btn-container{
		margin-top: 28px; /* 36 */
	}

/*****************
	QUESTION 1
	CLASSES : .q1 .reponse .btn-choix 
******************/
	.q1 h2,
	.q2 h2{
		font-size: 7vw; /* 4.5 */
		margin: 4.5% 0 3.4%; /* 5 0 3.4 */
	}
	
	.q2 h2,
	.q3 h2,
	.q4 h2{
		margin: 9.5% 0 3.4%; /* 5 0 3.4 */
	}

	.q1 .reponse label,
	.q6 .reponse label{
		width: 22%; /* 21 */
		margin: 0 1.25% 12px; /* 0 1.25 12 */
	}

	.q1 .reponse label .btn-choix,
	.q6 .reponse label .btn-choix{
		font-size: 8vw; /* 5.4 */
	}

	.q1 .reponse label .btn-choix{
		padding: 24.5%; /* 24.5% */
	}

	.q1 .reponse label.q1-pe .btn-choix{
		padding: 24.5% 21.88%; /* 58.5 52.25 */
	}

	.q1 .reponse label.q1-me .btn-choix{
		padding: 24.5% 27.11%; /* 58.5 64.75 */
	}

	.q1 .reponse p{
		font-size: 2.8vw; /* 1.62VW */
		margin-top: 16px; /* 16 */
	}
	

	/*** ELEMENTS VISUEL - Question 1 ***/

	.etape1 .element-graphique .sol{
		right: -8%; /* 0 */
		width: 125%; /* 100 */
	}

	.etape1 .element-graphique .fusee{
		bottom: 7.47%; /* 7.47 */
		right: 7.20%; /* 135 / 7.09% */
		width: 22.2%; /* 19.7% */
	}

	.etape1 .element-graphique .madame1{ /* 4e place */
		bottom: 7.25%; /* 68 / 7.25 */
		right: 50.83%; /* 777 / 40.83% */
		width: 3.82%; /* 2.57 / 49px */
	}

	.etape1 .element-graphique .madame2{ /* 1e place */
		bottom: 2.13%; /* 20 / 2.13 */
		right: 30.08%; /* 525 / 27.58% */
		width: 4.14%; /* 2.89 / 55px */
	}


	.etape1 .element-graphique .monsieur1{ /* 5e place */
		bottom: 3.52%; /* 33 / 3.52 */
		right: 56.53%; /* 838 / 44.03% */
		width: 3.71%; /* 2.46 / 46px */
	}

	.etape1 .element-graphique .monsieur2{ /* 3e place */
		bottom: 3.52%; /* 33 / 3.52 */
		right: 43.39%; /* 683 / 35.89% */
		width: 4.87%; /* 3.62 / 69px */
	}

	.etape1 .element-graphique .monsieur3{ /* 2e place */
		bottom: 9.81%; /* 9.81 */
		right: 35.68%; /* 603 / 31.68% */
		width: 4.35%; /* 3.10 / 59px */
	}

	.etape1 .element-graphique .monsieur4{ /* 6e place */
		bottom: 5.86%; /* 5.86 */
		right: 62.5%; /* 904 / 47.5% */
		width: 4.19%; /* 2.94 / 56px */
	}

	.triangle{
		border-top: 35px solid #fff; /* 50 */
		border-left: 24.5px solid transparent; /* 35 */
		border-right: 24.5px solid transparent; /* 35 */
	}
	
	
	/**********************************
		QUESTION 4
		CLASSES: .etape4 #form_pages .legend .chiffre-nb-pages
	*********************************/

	.q4 .reponse p.legend{
		font-size: 1.85rem; /* 2.25 */
	}


	.q4 .reponse p.chiffre-nb-pages{
		font-size: 1.4rem; /* 1.75 */
	}

	/*** PLACEMENT ET ANIMATION DES CONSTELLATION ***/
	.etape4 .constellation-cont{
		top: 28%;
		right: 5%;
		transform: scale(0.75);
	}
	
/**********************************
	QUESTION 5
	CLASSES: .etape5 #form_pages .legend .chiffre-nb-pages
*********************************/
/**** LES ÉLÉMENTS GRAPHIQUES ****/

.planete-container{
    top: 5px; /* -50 */
    right: -300px; /* -275 */
	transform: scale(0.6); /* 1 */
}

	.q5 .reponse p.legend{
		font-size: 1.85rem; /* 2.25 */
	}


	.q5 .reponse p.chiffre-nb-pages{
		font-size: 1.4rem; /* 1.75 */
	}

/**********************************
	QUESTION 6
	CLASSES: .etape6
*********************************/
/*** ÉLÉMENTS GRAPHIQUES ***/
#e6 .element-graphique .fusee{
	right: 50.0%; /* 27.5 */
	top: 10.0%; /* 7.5 */
	width: 170px; /* 270 */
}

#e6 .element-graphique .personnage{
	right: calc(90% - 145px); /* 26 */
	top: 60%; /* 45 */
	width: 145px; /* 197 */
}

/* Étape 2 */
#e6 .element-graphique .alien{
	width: 100px; /* 133 */
	right: 5%; /* 3.5 */
	top: 63.5%; /* 55 */
}

#e6 .element-graphique .b1{
	right: 62.5%; /* 24.5 */
	top: 62.5%; /* 57 */
	width: 72px; /* 96 */
}

/* Étape 3 */
#e6 .element-graphique .b2{
	right: 32.0%; /* 15.5 */
	top: 50%; /* 47 */
	width: 68px; /* 90 */
}

#e6 .element-graphique .b3{
	right: 19.25%; /* 10.25 */
	top: 68%; /* 63 */
	width: 60px; /* 78 */
}

/* Étape 4 */
#e6 .element-graphique .b4{
	right: 30.00%; /* 17.5 */
	top: 82.5%; /* 70 */
	width: 74px; /* 96 */
}

#e6 .element-graphique .b5{
	right: 48.5%; /* 36 */
	top: 70%; /* 55 */
	width: 46px; /* 62 */
}

#e6 .element-graphique .b6{
	right: 7.25%; /* 7.5 */
	top: 54%; /* 44 */
	width: 64px; /* 82 */
}

/**********************************
	QUESTION 7
	CLASSES: .etape7
*********************************/
.q7 .reponse label{
	width: 36%;
}

.q7 .reponse label p{
	font-size: 2.8vw;
}

/***  AJUSTEMENT D'ÉLÉMENT UNIQUE À L'ÉTAPE 7  ***/
/* Les boutons */
.q7 .reponse label .btn-choix{
	font-size: 16vw; /* 8 */
	padding: 15%; /* 12 */
}

.q7 .reponse label.q7-non .btn-choix{
	padding: 15% 21.9%; /* 12 18 */
}

/* FIN BOUTON CHOIX */
/* BOUTON SUIVANT/PRÉCÉDENT */
#scene .etape7 .question .btn-container{
	margin-top: 40px; /* 50 */
}

#scene .etape7 .question .btn-container .ligne-bouton-precedent ,
#scene .etape7 .question .btn-container .ligne-bouton-suivant{
	margin: 0px 10px; /* 0 12 */
}

/**********************************
	QUESTION 8
	CLASSES: 
*********************************/
/****************************
	ZONE DU RÉSULTATS EN MONTANT $
****************************/
.montant-container p{
	font-size: 16px; /* 16px */
}

.montant-container p.montant{
	font-size: 32px; /* 32px */
	margin-top: 16px; /* 16 */
}



} /********** FIN  MIN-WIDTH: 768px   ***************/

@media screen and (min-width: 981px){  /**********   MIN-WIDTH: 981PX   ***************/
	
	#scene .etape2 .question .btn-container,
	#scene .etape3 .question .btn-container,
	#scene .etape4 .question .btn-container,
	#scene .etape5 .question .btn-container,
	#scene .etape6 .question .btn-container,
	#scene .etape7 .question .btn-container{
		margin-top: 32px; /* 36 */
	}

	body,html{
		font-size: 16px; /* 20 */
	}
	
	.hide-desktop{
		display: none!important;
	}
	
	.hide-mobile{
		display: block!important;
	}
	
	.revenir.hide-mobile{
		display: flex!important;
	}
	
	#scene .question,
	#scene #e8 .formulaire{
		width: 60%; /* 60% */
	}
	
	
	#scene .question .btn-suivant,
	#intro .btn-commencer,
	#scene .formulaire .btn-envoyer{
		padding: 8px 48px 8px 22px; /* 10 60 10 30 */
		border: 4px solid #0286c7; /* 4 */
	}
	
	#scene .question .btn-suivant p,
	#scene .formulaire .btn-envoyer p{
		font-size: 1.2rem; /* 1.2rem */
	}
	
	#scene .question .btn-suivant i.fas,
	#scene .formulaire .btn-envoyer i.fas{
		top: 1.5px; /* 1.5 */
		right: 2px; /* 2 */
		font-size: 2.1rem;
	}
	
	
/*****************
	QUESTION 1
	CLASSES : .q1 .reponse .btn-choix 
******************/
	.q1 h2,
	.q2 h2,
	.q3 h2,
	.q4 h2,
	.q5 h2,
	.q6 h2,
	.q7 h2,
	.q8 h2{
		font-size: 5.5vw; /* 4.5 */
		margin: 5% 12px 3.4%; /* 5 0 3.4 */
	}
	
	.q2 h2,
	.q3 h2,
	.q4 h2,
	.q5 h2,
	.q6 h2,
	.q8 h2{
		margin: 10% 0 3.4%; /* 5 0 3.4 */
	}
	
	.q1 h2,
	.q3 h2,
	.q4 h2,
	.q5 h2,
	.q6 h2,
	.q7 h2,
	.q8 h2{
		font-size: 3.75vw;
	}

	.q1 .reponse label,
	.q6 .reponse label{
		width: 21%; /* 21 */
		margin: 0 1.25% 12px; /* 0 1.25 12 */
	}

	.q1 .reponse label .btn-choix,
	.q6 .reponse label .btn-choix{
		font-size: 5.4vw; /* 5.4 */
	}

	.q1 .reponse label .btn-choix{
		padding: 24.5%; /* 24.5% */
	}

	.q1 .reponse label.q1-pe .btn-choix{
		padding: 24.5% 21.88%; /* 58.5 52.25 */
	}

	.q1 .reponse label.q1-me .btn-choix{
		padding: 24.5% 27.11%; /* 58.5 64.75 */
	}

	.q1 .reponse p{
		font-size: 1.62vw; /* 1.62VW */
		margin-top: 16px; /* 16 */
	}

	.q1 .reponse p.petit,
	.q6 .reponse p.petit{
		font-size: 1.4vw; /* 1.4 */
	}

	.q6 .reponse p.x-petit{
		font-size: 1.2vw; /* 1.4 */
	}
	
	
	/*** ELEMENTS VISUEL - Question 1 ***/

	.etape1 .element-graphique .sol{
		right: 0; /* 0 */
		width: 100%; /* 100 */
	}

	.etape1 .element-graphique .fusee{
		bottom: 7.47%; /* 7.47 */
		right: 7.20%; /* 135 / 7.09% */
		width: 21.2%; /* 19.7% */
	}

	.etape1 .element-graphique .madame1{ /* 4e place */
		bottom: 7.25%; /* 68 / 7.25 */
		right: 46.83%; /* 777 / 40.83% */
		width: 3.32%; /* 2.57 / 49px */
	}

	.etape1 .element-graphique .madame2{ /* 1e place */
		bottom: 2.13%; /* 20 / 2.13 */
		right: 29.08%; /* 525 / 27.58% */
		width: 3.64%; /* 2.89 / 55px */
	}


	.etape1 .element-graphique .monsieur1{ /* 5e place */
		bottom: 3.52%; /* 33 / 3.52 */
		right: 51.53%; /* 838 / 44.03% */
		width: 3.21%; /* 2.46 / 46px */
	}

	.etape1 .element-graphique .monsieur2{ /* 3e place */
		bottom: 3.52%; /* 33 / 3.52 */
		right: 40.39%; /* 683 / 35.89% */
		width: 4.37%; /* 3.62 / 69px */
	}

	.etape1 .element-graphique .monsieur3{ /* 2e place */
		bottom: 9.81%; /* 9.81 */
		right: 33.68%; /* 603 / 31.68% */
		width: 3.85%; /* 3.10 / 59px */
	}

	.etape1 .element-graphique .monsieur4{ /* 6e place */
		bottom: 5.86%; /* 5.86 */
		right: 56.5%; /* 904 / 47.5% */
		width: 3.69%; /* 2.94 / 56px */
	}
	
/********************************
	QUESTION #2	
*********************************/
	
.fusee-container{
	transform: scale(0.72) rotate(10deg); /* scale(0.87) rotate(10deg) */
}	
	
	/****  BOUTON REVENIR  ****/
	.revenir{
		top: 16px; /* 20 */
		left: 16px; /* 20 */
	}

	.revenir .fas{
		font-size: 1.8rem; /* 2rem */
	}

	.revenir img{
		margin: 0 14px; /* 0 16 */
		width: 21px; /* 27 */
	}

	.revenir p{
		font-size: 0.9rem; /* 1 rem */
	}
	
	.triangle{
		border-top: 40px solid #fff; /* 50 */
		border-left: 28px solid transparent; /* 35 */
		border-right: 28px solid transparent; /* 35 */
		margin: 32px auto 16px; /* 40 auto 20 */
	}
	
/*******************
	QUESTION 3
*********************/
	.q3 .reponse p.legend{
		font-size: 2.25rem; /* 2.25 */
	}


	.q3 .reponse p.chiffre-nb-pages{
		font-size: 1.75rem; /* 1.75 */
	}
	
/**********************************
	QUESTION 4
	CLASSES: .etape4 #form_pages .legend .chiffre-nb-pages
*********************************/
.etape4{
	background-position: bottom left;
}
	
.q4 .reponse p.legend{
	font-size: 2.25rem; /* 2.25 */
}


.q4 .reponse p.chiffre-nb-pages{
	font-size: 1.75rem; /* 1.75 */
}
	
.q4 .reponse p.chiffre-nb-pages br{
	display: block;
}

	
/*** PLACEMENT ET ANIMATION DES CONSTELLATION ***/
.etape4 .constellation-cont{
    top: 9%;
    right: -5%;
    transform: scale(0.65);
}
	
	
/**********************************
	QUESTION 5
	CLASSES: .etape5 #form_pages .legend .chiffre-nb-pages
*********************************/
/**** LES ÉLÉMENTS GRAPHIQUES ****/

.planete-container{
    top: -65px; /* -50 */
    right: -340px; /* -275 */
	transform: scale(0.6); /* 1 */
}


	.q5 .reponse p.legend{
		font-size: 2.25rem; /* 2.25 */
	}


	.q5 .reponse p.chiffre-nb-pages{
		font-size: 1.75rem; /* 1.75 */
	}
	
	.q5 .reponse p.chiffre-nb-pages br{
		display: block;
	}

/**********************************
	QUESTION 6
	CLASSES: .etape6
*********************************/
/*** ÉLÉMENTS GRAPHIQUES ***/
#e6 .element-graphique .fusee{
	right: 20.0%; /* 27.5 */
	top: 4.0%; /* 7.5 */
	width: 200px; /* 270 */
}

#e6 .element-graphique .personnage{
	right: 32.25%; /* 26 */
	top: 55%; /* 45 */
	width: 170px; /* 197 */
}

/* Étape 2 */
#e6 .element-graphique .alien{
	width: 115px; /* 133 */
	right: 2.75%; /* 3.5 */
	top: 59%; /* 55 */
}

#e6 .element-graphique .b1{
	right: 29.0%; /* 24.5 */
	top: 61%; /* 57 */
	width: 80px; /* 96 */
}

/* Étape 3 */
#e6 .element-graphique .b2{
	right: 19.0%; /* 15.5 */
	top: 45%; /* 47 */
	width: 75px; /* 90 */
}

#e6 .element-graphique .b3{
	right: 15.25%; /* 10.25 */
	top: 69%; /* 63 */
	width: 66px; /* 78 */
}

/* Étape 4 */
#e6 .element-graphique .b4{
	right: 22.00%; /* 17.5 */
	top: 82.5%; /* 70 */
	width: 82px; /* 96 */
}

#e6 .element-graphique .b5{
	right: 48.5%; /* 36 */
	top: 70%; /* 55 */
	width: 50px; /* 62 */
}

#e6 .element-graphique .b6{
	right: 6.25%; /* 7.5 */
	top: 42%; /* 44 */
	width: 70px; /* 82 */
}

/**********************************
	QUESTION 7
	CLASSES: .etape7
*********************************/
#scene .etape7 .question{
	width: 100%;
}
.etape7 .question .qestion-titre{
	margin: 5% 10% 3.4%;
}

.q7 .reponse label {
    width: 21%;
}

/***  AJUSTEMENT D'ÉLÉMENT UNIQUE À L'ÉTAPE 7  ***/
/* Les boutons */
.q7 .reponse label .btn-choix{
	font-size: 14vw; /* 8 */
	padding: 16%; /* 12 */
}

.q7 .reponse label.q7-non .btn-choix{
	padding: 16% 26.42%; /* 12 18 */
}

/* FIN BOUTON CHOIX */
/* BOUTON SUIVANT/PRÉCÉDENT */
#scene .etape7 .question .btn-container{
	margin-top: 50px; /* 50 */
}

#scene .etape7 .question .btn-container .ligne-bouton-precedent ,
#scene .etape7 .question .btn-container .ligne-bouton-suivant{
	margin: 0 8px; /* 0 12 */
}

/**********************************
	QUESTION 8
	CLASSES: .etape8
*********************************/
/* À ENLEVER EN DESKTOP */
.etape8 .formulaire{
	overflow-y: visible;
}

.etape8 .formulaire .ligne-bouton-envoyer{
	margin-bottom: 0;
}
/* FIN DESKTOP */

.etape8 .formulaire .q8 .description{
	font-size: 18px; /* 24 */
	margin: 0 5%; /* 0 10% */
}

.etape8 .formulaire .q8 .description .petit-desc{
	font-size: 13px; /* 16 */
}

/*** CSS DU FORMULAIRE ***/
.etape8 .formulaire .form{
    width: 80%; /* 80% */
    margin: 16px auto; /* 30 auto */
}

.etape8 .formulaire .form .full-size,
.etape8 .formulaire .form .half-size{
	margin: 8px 0; /* 12 0 */
}

.etape8 .formulaire .form .half-size{
	width: 47.5%; /* 47.5 */
	margin-right: 5%!important; /* 5 */
}

.etape8 .formulaire .form .half-size.last{
	margin-right: 0%!important; /* 5 */
}

.etape8 .formulaire .form .full-size label,
.etape8 .formulaire .form .half-size label{
	margin-bottom: 8px; /* 8 */
	transform: translateY(36px); /* 36 */
}

.etape8 .formulaire .form p.form-error{
	font-size: 11px; /* 12 */
}

.etape8 .formulaire .form .full-size.textarea-r3 label,
.etape8 .formulaire .form .half-size.textarea-r3 label{
	transform: translateY(60px); /* 60 */
}

.etape8 .formulaire .form .full-size input,
.etape8 .formulaire .form .full-size textarea,
.etape8 .formulaire .form .half-size input,
.etape8 .formulaire .form .half-size textarea{
	padding: 8px 0px; /* 12 0*/
	font-size: 18px; /* 20 */
}

/*****
	Message de confirmation
******/
.message-formulaire{
	padding: 20px 32px; /* 20 32 */
	max-width: 60%; /* 50? */
    margin: 36px auto 0; /* 36 auto 0 */
	-webkit-box-shadow: 2px 2px 7px 2px rgba(0,0,0,0.5); /* 2 2 7 2 */
	box-shadow: 2px 2px 7px 2px rgba(0,0,0,0.5);
	border: 2px solid #fff; /* 2 */
	transform: translateY(100px); /* 100 */
}

.message-formulaire.erreur{
    top: 15%; /* 20 */
}

.message-formulaire p{
	font-size: 14px; /* 18px */
}

/****************************
	ZONE DU RÉSULTATS EN MONTANT $
****************************/
.montant-container{
	position: absolute;
	padding: 16px 28px; /* 20 50 */
	bottom: 7.5%;
	right: 2.5%; /* 10 */
	border: 4px solid #0286c7;
	border-radius: 15px; /* 20 */
}

.montant-container.desktop{
	display: block;
}

.montant-container.mobile{
	display: none;
}

.montant-container p.montant{
	font-size: 24px; /* 32px */
	margin-top: 12px; /* 16 */
}

} /********** FIN  MIN-WIDTH: 981PX   ***************/

@media screen and (min-width: 1170px){  /**********   MIN-WIDTH: 1170px   ***************/
	
	#scene .etape2 .question .btn-container,
	#scene .etape3 .question .btn-container,
	#scene .etape4 .question .btn-container,
	#scene .etape5 .question .btn-container,
	#scene .etape6 .question .btn-container,
	#scene .etape7 .question .btn-container{
		margin-top: 36px; /* 36 */
	}

	body,html{
		font-size: 17px; /* 20 */
	}
	
	#scene .question .btn-suivant,
	#intro .btn-commencer,
	#scene .formulaire .btn-envoyer{
		padding: 9px 52px 9px 24px; /* 10 60 10 30 */
		border: 4px solid #0286c7; /* 4 */
	}

	#scene .question .btn-precedent{
		padding: 9px 24px 9px 52px; /* 10 60 10 30 */
	}
	
	#scene .question .btn-suivant i.fas,
	#scene .formulaire .btn-envoyer i.fas{
		top: 1.5px; /* 1.5 */
		right: 2px; /* 2 */
	}
	
/*** ELEMENTS VISUEL - Question 1 ***/

	.etape1 .element-graphique .fusee{
		bottom: 7.47%; /* 7.47 */
		right: 7.09%; /* 135 / 7.09% */
		width: 20.7%; /* 19.7% */
	}

	.etape1 .element-graphique .madame1{
		bottom: 7.25%; /* 68 / 7.25 */
		right: 44.83%; /* 777 / 40.83% */
		width: 3.07%; /* 2.57 / 49px */
	}

	.etape1 .element-graphique .madame2{
		bottom: 2.13%; /* 20 / 2.13 */
		right: 28.58%; /* 525 / 27.58% */
		width: 3.39%; /* 2.89 / 55px */
	}


	.etape1 .element-graphique .monsieur1{
		bottom: 3.52%; /* 33 / 3.52 */
		right: 49.03%; /* 838 / 44.03% */
		width: 2.96%; /* 2.46 / 46px */
	}

	.etape1 .element-graphique .monsieur2{
		bottom: 3.52%; /* 33 / 3.52 */
		right: 38.89%; /* 683 / 35.89% */
		width: 4.12%; /* 3.62 / 69px */
	}

	.etape1 .element-graphique .monsieur3{
		bottom: 9.81%; /* 9.81 */
		right: 33.68%; /* 603 / 31.68% */
		width: 3.60%; /* 3.10 / 59px */
	}

	.etape1 .element-graphique .monsieur4{
		bottom: 5.86%; /* 5.86 */
		right: 53.5%; /* 904 / 47.5% */
		width: 3.44%; /* 2.94 / 56px */
	}
	
/********************************
	QUESTION #2	
*********************************/

.fusee-container{
	transform: scale(0.75) rotate(10deg); /* scale(0.87) rotate(10deg) */
}	
	
/****  BOUTON REVENIR  ****/
.revenir{
	top: 17px; /* 20 */
	left: 17px; /* 20 */
}

.revenir .fas{
	font-size: 1.9rem; /* 2rem */
}

.revenir img{
	margin: 0 15px; /* 0 16 */
	width: 23px; /* 27 */
}

.revenir p{
	font-size: 0.95rem; /* 1 rem */
}
	
.triangle{
	border-top: 45px solid #fff; /* 50 */
	border-left: 31.5px solid transparent; /* 35 */
	border-right: 31.5px solid transparent; /* 35 */
	margin: 36px auto 18px; /* 40 auto 20 */
}
	
/**********************************
	QUESTION 4
	CLASSES: .etape4 #form_pages .legend .chiffre-nb-pages
*********************************/

/*** PLACEMENT ET ANIMATION DES CONSTELLATION ***/
.etape4 .constellation-cont{
    top: 9%;
    right: -2.5%;
    transform: scale(0.725);
}
	
/**********************************
	QUESTION 5
	CLASSES: 
*********************************/
/**** LES ÉLÉMENTS GRAPHIQUES ****/

.planete-container{
    top: -75px; /* -50 */
    right: -305px; /* -275 */
	transform: scale(0.7); /* 1 */
}

/**********************************
	QUESTION 6
	CLASSES: .etape6
*********************************/
/*** ÉLÉMENTS GRAPHIQUES ***/
#e6 .element-graphique .fusee{
	right: 25.0%; /* 27.5 */
	top: 7.0%; /* 7.5 */
	width: 235px; /* 270 */
}

#e6 .element-graphique .personnage{
	right: 26.25%; /* 26 */
	top: 49%; /* 45 */
	width: 183px; /* 197 */
}

/* Étape 2 */
#e6 .element-graphique .alien{
	width: 123px; /* 133 */
	right: 2.75%; /* 3.5 */
	top: 59%; /* 55 */
}

#e6 .element-graphique .b1{
	right: 24.0%; /* 24.5 */
	top: 61%; /* 57 */
	width: 88px; /* 96 */
}

/* Étape 3 */
#e6 .element-graphique .b2{
	right: 16.0%; /* 15.5 */
	top: 43%; /* 47 */
	width: 83px; /* 90 */
}

#e6 .element-graphique .b3{
	right: 13.0%; /* 10.25 */
	top: 67%; /* 63 */
	width: 72px; /* 78 */
}

/* Étape 4 */
#e6 .element-graphique .b4{
	right: 20.00%; /* 17.5 */
	top: 80.0%; /* 70 */
	width: 89px; /* 96 */
}

#e6 .element-graphique .b5{
	right: 39%; /* 36 */
	top: 60%; /* 55 */
	width: 56px; /* 62 */
}

#e6 .element-graphique .b6{
	right: 6.5%; /* 7.5 */
	top: 42%; /* 44 */
	width: 76px; /* 82 */
}

/**********************************
	QUESTION 7
	CLASSES: .etape7
*********************************/
/***  AJUSTEMENT D'ÉLÉMENT UNIQUE À L'ÉTAPE 7  ***/
/* Les boutons */
.q7 .reponse label .btn-choix{
	font-size: 13vw; /* 8 */
	padding: 16%; /* 12 */
}

.q7 .reponse label.q7-non .btn-choix{
	padding: 16% 26.42%; /* 12 18 */
}

/* FIN BOUTON CHOIX */
/* BOUTON SUIVANT/PRÉCÉDENT */
#scene .etape7 .question .btn-container .ligne-bouton-precedent ,
#scene .etape7 .question .btn-container .ligne-bouton-suivant{
	margin: 0 9px; /* 0 12 */
}


} /********** FIN  MIN-WIDTH: 1170px   ***************/


@media screen and (min-width: 1350px){  /**********   MIN-WIDTH: 1350px   ***************/
	
	body,html{
		font-size: 18px; /* 20 */
	}
	
	#scene .question .btn-suivant,
	#intro .btn-commencer,
	#scene .formulaire .btn-envoyer{
		padding: 9px 56px 9px 26px; /* 10 60 10 30 */
		border: 4px solid #0286c7; /* 4 */
	}

	#scene .question .btn-precedent{
		padding: 9px 26px 9px 56px; /* 10 60 10 30 */
	}
	
	#scene .question .btn-suivant i.fas,
	#scene .formulaire .btn-envoyer i.fas{
		top: 1.5px; /* 1.5 */
		right: 2px; /* 2 */
		font-size: 2.1rem; /* 2.2 */
	}
	
	.q1 .reponse label{
		margin: 0 1.75% 12px;
	}
	
/********************************
	QUESTION #2	
*********************************/
	
.fusee-container{
	transform: scale(0.79) rotate(10deg); /* scale(0.87) rotate(10deg) */
}	
	
/****  BOUTON REVENIR  ****/
.revenir{
	top: 18px; /* 20 */
	left: 18px; /* 20 */
}


.revenir img{
	width: 24px; /* 27 */
}
	
	
.triangle{
	border-top: 50px solid #fff; /* 50 */
	border-left: 35px solid transparent; /* 35 */
	border-right: 35px solid transparent; /* 35 */
	margin: 40px auto 20px; /* 40 auto 20 */
}
	
/**********************************
	QUESTION 4
	CLASSES: .etape4 #form_pages .legend .chiffre-nb-pages
*********************************/

/*** PLACEMENT ET ANIMATION DES CONSTELLATION ***/
.etape4 .constellation-cont{
    top: 10%;
    right: 0%;
    transform: scale(0.8);
}






/**********************************
	QUESTION 5
	CLASSES: 
*********************************/
/**** LES ÉLÉMENTS GRAPHIQUES ****/

.planete-container{
    top: -105px; /* -50 */
    right: -305px; /* -275 */
	transform: scale(0.75); /* 1 */
}

/****** CHOIX 1 : Municipalité / Ville ******/
.elem-terre.choix1 .terre{
	transform:  scale(6);
    top: 1100px;
    left: -500px;
}

/*** LE POINT ***/
.elem-terre.choix1 .g1{
    top: 60%; /* À Continuer */
    left: 33%; /* À Continuer */
}

/****** CHOIX 2 : Régional ******/

.elem-terre.choix2 .terre{
	transform: scale(5.5);
	top: 1050px;
    left: -480px;
}

/*** LES POINTS ***/
.elem-terre.choix2 .p1{
	top: 50%;
	left: 34%;
}

.elem-terre.choix2 .p2{
	top: 54%;
	left: 36%;
}

.elem-terre.choix2 .p3{
	top: 53%;
	left: 32%;
}


/****** CHOIX 3 : Provincial ******/

.elem-terre.choix3 .terre{
	transform: scale(4.75);
	top: 900px;
    left: -420px;
}

/** DRAPEAUX **/
.elem-terre.choix3 .g3{
    top: 50%; /* À Continuer */
    left: 37%; /* À Continuer */
}

/****** CHOIX 4 : National ******/

.elem-terre.choix4 .terre{
	transform: scale(2.5);
	top: 600px;
    left: 100px;
}


/** DRAPEAUX **/
.elem-terre.choix4 .g4{
    top: 50%; /* À Continuer */ /* 10% */
    left: 35%; /* À Continuer */ /* 10% */
}


/****** CHOIX 5 : Mondial ******/
.elem-terre.choix5 .terre{
	transform:  scale(1.15);
	top: 0px;
    left: 0;
}

/**********************************
	QUESTION 6
	CLASSES: .etape6
*********************************/
/*** ÉLÉMENTS GRAPHIQUES ***/
#e6 .element-graphique .fusee{
	right: 25.0%; /* 27.5 */
	top: 7.0%; /* 7.5 */
	width: 240px; /* 270 */
}

#e6 .element-graphique .personnage{
	right: 26%; /* 26 */
	top: 48%; /* 45 */
	width: 186px; /* 197 */
}

/* Étape 2 */
#e6 .element-graphique .alien{
	width: 125px; /* 133 */
	right: 3.0%; /* 3.5 */
	top: 57.5%; /* 55 */
}

#e6 .element-graphique .b1{
	right: 24.0%; /* 24.5 */
	top: 60%; /* 57 */
	width: 90px; /* 96 */
}
/* Étape 3 */
#e6 .element-graphique .b2{
	right: 16.0%; /* 15.5 */
	top: 43%; /* 47 */
	width: 85px; /* 90 */
}

#e6 .element-graphique .b3{
	right: 13.0%; /* 10.25 */
	top: 67%; /* 63 */
	width: 74px; /* 78 */
}

/* Étape 4 */
#e6 .element-graphique .b4{
	right: 18.75%; /* 17.5 */
	top: 75.0%; /* 70 */
	width: 91px; /* 96 */
}

#e6 .element-graphique .b5{
	right: 39%; /* 36 */
	top: 60%; /* 55 */
	width: 58px; /* 62 */
}

#e6 .element-graphique .b6{
	right: 6.5%; /* 7.5 */
	top: 42%; /* 44 */
	width: 78px; /* 82 */
}


/**********************************
	QUESTION 8
	CLASSES: .etape8
*********************************/
.q8 h2{
	margin: 8% 0 3.4%; /* 5 0 3.4 */
}

.etape8 .formulaire .q8 .description{
	font-size: 20px; /* 24 */
	margin: 0 7.5%; /* 0 10% */
}

.etape8 .formulaire .q8 .description .petit-desc{
	font-size: 14px; /* 16 */
}

/*** CSS DU FORMULAIRE ***/
.etape8 .formulaire .form{
    width: 80%; /* 80% */
    margin: 20px auto; /* 30 auto */
}

.etape8 .formulaire .form .full-size,
.etape8 .formulaire .form .half-size{
	margin: 10px 0; /* 12 0 */
}

.etape8 .formulaire .form p.form-error{
	font-size: 12px; /* 12 */
}

.etape8 .formulaire .form .full-size input,
.etape8 .formulaire .form .full-size textarea,
.etape8 .formulaire .form .half-size input,
.etape8 .formulaire .form .half-size textarea{
	padding: 10px 0px; /* 12 0*/
	font-size: 19px; /* 20 */
}

/*****
	Message de confirmation
******/
.message-formulaire{
	max-width: 55%; /* 50? */
}

.message-formulaire.erreur{
    top: 17.5%; /* 20 */
}

.message-formulaire p{
	font-size: 15px; /* 16px */
}

/****************************
	ZONE DU RÉSULTATS EN MONTANT $
****************************/
.montant-container{
	padding: 20px 35px; /* 20 50 */
	bottom: 10%;
	right: 3.5%; /* 10 */
	border-radius: 20px; /* 20 */
}

.montant-container p.montant{
	font-size: 28px; /* 32px */
	margin-top: 14px; /* 16 */
}

/**********************************
	QUESTION 7
	CLASSES: .etape7
*********************************/
/***  AJUSTEMENT D'ÉLÉMENT UNIQUE À L'ÉTAPE 7  ***/
/* Les boutons */
.q7 .reponse label .btn-choix{
	font-size: 12vw; /* 8 */
	padding: 15%; /* 12 */
}

.q7 .reponse label.q7-non .btn-choix{
	padding: 15% 24%; /* 12 18 */
}

/* FIN BOUTON CHOIX */
/* BOUTON SUIVANT/PRÉCÉDENT */
#scene .etape7 .question .btn-container .ligne-bouton-precedent ,
#scene .etape7 .question .btn-container .ligne-bouton-suivant{
	margin: 0 10px; /* 0 12 */
}

	
} /********** FIN  MIN-WIDTH: 1350px   ***************/

@media screen and (min-width: 1600px){  /**********   MIN-WIDTH: 1600px   ***************/
	
	body,html{
		font-size: 19px; /* 20 */
	}
	
	#scene .question .btn-suivant,
	#intro .btn-commencer,
	#scene .formulaire .btn-envoyer{
		padding: 10px 60px 10px 28px; /* 10 60 10 30 */
		border: 4px solid #0286c7; /* 4 */
	}

	#scene .question .btn-precedent{
		padding: 10px 28px 10px 60px; /* 10 60 10 30 */
	}
	
	#scene .question .btn-precedent i.fas,
	#scene .question .btn-suivant i.fas,
	#scene .formulaire .btn-envoyer i.fas{
		font-size: 2.2rem; /* 2.2 */
	}
	
	#scene .question .btn-suivant i.fas,
	#scene .formulaire .btn-envoyer{
		top: 1.5px; /* 1.5 */
		right: 2px; /* 2 */
	}
	
	.q1 h2,
	.q2 h2{
		font-size: 4.5vw; /* 4.5 */
		margin: 5% 0 3.4%; /* 5 0 3.4 */
	}
	
	.q2 h2,
	.q3 h2,
	.q4 h2{
		margin: 10% 0 3.4%; /* 5 0 3.4 */
	}
	
	.q1 h2,
	.q3 h2,
	.q4 h2{
		font-size: 3vw;
	}
	
	.etape1 .element-graphique .sol{
		width: 80%; /* 80% */
		right: 0; /* 0 */
	}
	
/*** ELEMENTS VISUEL - Question 1 ***/

	.etape1 .element-graphique .fusee{
		bottom: 7.47%; /* 7.47 */
		right: 7.09%; /* 135 / 7.09% */
		width: 19.7%; /* 19.7% */
	}

	.etape1 .element-graphique .madame1{
		bottom: 7.25%; /* 68 / 7.25 */
		right: 40.83%; /* 777 / 40.83% */
		width: 2.57%; /* 2.57 / 49px */
	}

	.etape1 .element-graphique .madame2{
		bottom: 2.13%; /* 20 / 2.13 */
		right: 27.58%; /* 525 / 27.58% */
		width: 2.89%; /* 2.89 / 55px */
	}


	.etape1 .element-graphique .monsieur1{
		bottom: 3.52%; /* 33 / 3.52 */
		right: 44.03%; /* 838 / 44.03% */
		width: 2.46%; /* 2.46 / 46px */
	}

	.etape1 .element-graphique .monsieur2{
		bottom: 3.52%; /* 33 / 3.52 */
		right: 35.89%; /* 683 / 35.89% */
		width: 3.62%; /* 3.62 / 69px */
	}

	.etape1 .element-graphique .monsieur3{
		bottom: 9.81%; /* 9.81 */
		right: 31.68%; /* 603 / 31.68% */
		width: 3.10%; /* 3.10 / 59px */
	}

	.etape1 .element-graphique .monsieur4{
		bottom: 5.86%; /* 5.86 */
		right: 47.5%; /* 904 / 47.5% */
		width: 2.94%; /* 2.94 / 56px */
	}
	
/********************************
	QUESTION #2	
*********************************/

.fusee-container{
	transform: scale(0.83) rotate(10deg); /* scale(0.87) rotate(10deg) */
}	

	
/****  BOUTON REVENIR  ****/
.revenir{
	top: 19px; /* 20 */
	left: 19px; /* 20 */
}

.revenir .fas{
	font-size: 2rem; /* 2rem */
}

.revenir img{
	margin: 0 16px; /* 0 16 */
	width: 26px; /* 27 */
}

.revenir p{
	font-size: 1rem; /* 1 rem */
}
	

/**********************************
	QUESTION 4
	CLASSES: .etape4 #form_pages .legend .chiffre-nb-pages
*********************************/

/*** PLACEMENT ET ANIMATION DES CONSTELLATION ***/
.etape4 .constellation-cont{
    right: 2.5%;
    transform: scale(0.9);
}
	

/**********************************
	QUESTION 5
	CLASSES: 
*********************************/
/**** LES ÉLÉMENTS GRAPHIQUES ****/

.planete-container{
    top: -50px; /* -50 */
    right: -275px; /* -275 */
	transform: scale(1); /* 1 */
}
	
/**********************************
	QUESTION 6
	CLASSES: .etape6
*********************************/
/*** ÉLÉMENTS GRAPHIQUES ***/
#e6 .element-graphique .fusee{
	right: 26.0%; /* 27.5 */
	top: 7.5%; /* 7.5 */
	width: 250px; /* 270 */
}

#e6 .element-graphique .personnage{
	right: 26%; /* 26 */
	top: 45%; /* 45 */
	width: 190px; /* 197 */
}

/* Étape 2 */
#e6 .element-graphique .alien{
	width: 128px; /* 133 */
	right: 3.5%; /* 3.5 */
	top: 55%; /* 55 */
}

#e6 .element-graphique .b1{
	right: 24.5%; /* 24.5 */
	top: 57%; /* 57 */
	width: 93px; /* 96 */
}
/* Étape 3 */
#e6 .element-graphique .b2{
	right: 16.5%; /* 15.5 */
	top: 45%; /* 47 */
	width: 88px; /* 90 */
}

#e6 .element-graphique .b3{
	right: 12.0%; /* 10.25 */
	top: 65%; /* 63 */
	width: 76px; /* 78 */
}

/* Étape 4 */
#e6 .element-graphique .b4{
	right: 18.75%; /* 17.5 */
	top: 72.5%; /* 70 */
	width: 93px; /* 96 */
}

#e6 .element-graphique .b5{
	right: 37%; /* 36 */
	top: 60%; /* 55 */
	width: 60px; /* 62 */
}

#e6 .element-graphique .b6{
	right: 7.0%; /* 7.5 */
	top: 40%; /* 44 */
	width: 80px; /* 82 */
}
	
/**********************************
	QUESTION 8
	CLASSES: .etape8
*********************************/
.q8 h2{
	margin: 6% 0 3.4%; /* 5 0 3.4 */
}

.etape8 .formulaire .q8 .description{
	font-size: 22px; /* 24 */
	margin: 0 8.75%; /* 0 10% */
}

.etape8 .formulaire .q8 .description .petit-desc{
	font-size: 15px; /* 16 */
}

/*** CSS DU FORMULAIRE ***/
.etape8 .formulaire .form{
    margin: 24px auto; /* 30 auto */
}

.etape8 .formulaire .form .full-size,
.etape8 .formulaire .form .half-size{
	margin: 11px 0; /* 12 0 */
}

.etape8 .formulaire .form .full-size input,
.etape8 .formulaire .form .full-size textarea,
.etape8 .formulaire .form .half-size input,
.etape8 .formulaire .form .half-size textarea{
	padding: 10px 0px; /* 12 0*/
	font-size: 20px; /* 20 */
}

/*****
	Message de confirmation
******/
.message-formulaire{
	max-width: 52.5%; /* 50? */
}

.message-formulaire.erreur{
    top: 20%; /* 20 */
}

.message-formulaire p{
	font-size: 16px; /* 16px */
}

/****************************
	ZONE DU RÉSULTATS EN MONTANT $
****************************/
.montant-container{
	padding: 20px 50px; /* 20 50 */
	right: 4%; /* 10 */
}

.montant-container p.montant{
	font-size: 32px; /* 32px */
	margin-top: 16px; /* 16 */
}

/**********************************
	QUESTION 7
	CLASSES: .etape7
*********************************/
/***  AJUSTEMENT D'ÉLÉMENT UNIQUE À L'ÉTAPE 7  ***/
/* Les boutons */
.q7 .reponse label .btn-choix{
	font-size: 10vw; /* 8 */
	padding: 13.5%; /* 12 */
}

.q7 .reponse label.q7-non .btn-choix{
	padding: 13.5% 21%; /* 12 18 */
}

/* FIN BOUTON CHOIX */
/* BOUTON SUIVANT/PRÉCÉDENT */
#scene .etape7 .question .btn-container .ligne-bouton-precedent ,
#scene .etape7 .question .btn-container .ligne-bouton-suivant{
	margin: 0 10px; /* 0 12 */
}
	
} /********** FIN  MIN-WIDTH: 1600px   ***************/

@media screen and (min-width: 1800px){  /**********   MIN-WIDTH: 1800px   ***************/
	
	body,html{
		font-size: 20px; /* 20 */
	}
	
	#scene .question .btn-suivant,
	#intro .btn-commencer,
	#scene .formulaire .btn-envoyer{
		padding: 10px 60px 10px 30px; /* 10 60 10 30 */
		border: 4px solid #0286c7; /* 4 */
	}

	#scene .question .btn-precedent{
		padding: 10px 30px 10px 60px; /* 10 60 10 30 */
	}

	#scene .question .btn-suivant p,
	#scene .formulaire .btn-envoyer p{
		font-size: 1.2rem; /* 1.2rem */
	}

	#scene .question .btn-suivant i.fas,
	#scene .formulaire .btn-envoyer i.fas{
		font-size: 2.2rem; /* 2.2rem */
		top: 1.5px; /* 1.5 */
		right: 2px; /* 2 */
	}
	
	
/********************************
	QUESTION #2	
*********************************/

.fusee-container{
	transform: scale(0.87) rotate(10deg); /* scale(0.87) rotate(10deg) */
}	

	
/****  BOUTON REVENIR  ****/
.revenir{
	top: 20px; /* 20 */
	left: 20px; /* 20 */
}

.revenir img{
	width: 27px; /* 27 */
}



	
/**********************************
	QUESTION 4
	CLASSES: .etape4 #form_pages .legend .chiffre-nb-pages
*********************************/
/*** PLACEMENT ET ANIMATION DES CONSTELLATION ***/
.etape4 .constellation-cont{
    top: 10%; /* 10 */
    right: 5%; /* 5 */
    transform: scale(1); /* 1 */
}

	
	
/**********************************
	QUESTION 6
	CLASSES: .etape6
*********************************/
/*** ÉLÉMENTS GRAPHIQUES ***/
#e6 .element-graphique .fusee{
	right: 27.5%; /* 27.5 */
	top: 7.5%; /* 7.5 */
	width: 270px; /* 270 */
}

#e6 .element-graphique .personnage{
	right: 26%; /* 26 */
	top: 45%; /* 45 */
	width: 197px; /* 197 */
}

/* Étape 2 */
#e6 .element-graphique .alien{
	width: 133px; /* 133 */
	right: 3.5%; /* 3.5 */
	top: 55%; /* 55 */
}

#e6 .element-graphique .b1{
	right: 24.5%; /* 24.5 */
	top: 57%; /* 57 */
}
/* Étape 3 */
#e6 .element-graphique .b2{
	right: 15.5%; /* 15.5 */
	top: 47%; /* 47 */
	width: 90px; /* 90 */
}

#e6 .element-graphique .b3{
	right: 10.25%; /* 10.25 */
	top: 63%; /* 63 */
	width: 78px; /* 90 */
}

/* Étape 4 */
#e6 .element-graphique .b4{
	right: 17.5%; /* 17.5 */
	top: 70%; /* 70 */
}

#e6 .element-graphique .b5{
	right: 36%; /* 36 */
	top: 55%; /* 55 */
	width: 62px; /* 90 */
}

#e6 .element-graphique .b6{
	right: 7.5%; /* 7.5 */
	top: 44%; /* 44 */
	width: 82px; /* 90 */
}


/**********************************
	QUESTION 7
	CLASSES: .etape7
*********************************/
/***  AJUSTEMENT D'ÉLÉMENT UNIQUE À L'ÉTAPE 7  ***/
/* Les boutons */
.q7 .reponse label .btn-choix{
	font-size: 8vw; /* 8 */
	padding: 12%; /* 12 */
}

.q7 .reponse label.q7-non .btn-choix{
	padding: 12% 18%; /* 12 18 */
}

/* FIN BOUTON CHOIX */
/* BOUTON SUIVANT/PRÉCÉDENT */
#scene .etape7 .question .btn-container .ligne-bouton-precedent ,
#scene .etape7 .question .btn-container .ligne-bouton-suivant{
	margin: 0 12px; /* 0 12 */
}

/**********************************
	QUESTION 8
	CLASSES: .etape8
*********************************/
.etape8 .formulaire .q8 .description{
	font-size: 24px; /* 24 */
	margin: 0 10%; /* 0 10% */
}

.etape8 .formulaire .q8 .description .petit-desc{
	font-size: 16px; /* 16 */
}

/*** CSS DU FORMULAIRE ***/
.etape8 .formulaire .form{
    margin: 30px auto; /* 30 auto */
}

.etape8 .formulaire .form .full-size,
.etape8 .formulaire .form .half-size{
	margin: 12px 0; /* 12 0 */
}

.etape8 .formulaire .form .full-size input,
.etape8 .formulaire .form .full-size textarea,
.etape8 .formulaire .form .half-size input,
.etape8 .formulaire .form .half-size textarea{
	padding: 12px 0px; /* 12 0*/
}

/*****
	Message de confirmation
******/
.message-formulaire{
	max-width: 50%; /* 50? */
}

/****************************
	ZONE DU RÉSULTATS EN MONTANT $
****************************/
.montant-container{
	right: 5%; /* 10 */
}

	
} /********** FIN  MIN-WIDTH: 1800px   ***************/

 /* WINDOWS EXPLORER CSS VA LÀ */
 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	 
	.transition{
		background-color: rgba(255,255,255,1);
		opacity: 1;
	}

	.transition.fini{
		opacity: 1;
		background-color: rgba(255,255,255,0);
	}
	 

}

/* Ça marche! */
@media (pointer:coarse) and (hover:none) {
    /* custom css for "touch targets" */
	
	
	.etape1{
/*		background-color: orange!important;*/
	}
	
}



/*******************************
 REVOIR L'AFFICHAGE DU MONTANT
********************************/
.montant-container.global{
	z-index: 9999998;
	position: fixed;
	right: 2.5%;
	bottom: 5%;
}

.montant-container.global p.montant{
	margin-top: 0;
}

@media screen and (max-width: 980px){
	#scene[etape="8"] .montant-container.global{
		display: none;
	}
}

@media screen and (min-width: 981px){
	.montant-container.global p.montant{
		margin-top: 8px;
	}
}

/********************************
	PAGE D'INTRODUCTION
*********************************/
#intro{
	z-index: 99999999999999999999999999999999;
    width: 100%;
    height: 100%;
	display: flex;
    align-items: center;
    background-image: url(../img/etape-6/fond-etape6.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
    position: relative;
    top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 20px;
	box-sizing: border-box;
	transition: 0.25s all ease-in-out;
}

#intro.fermer{
	pointer-events: none;
	opacity: 0;
	z-index: 0;
}

#intro .contenu{
	width: 90%; /* 50 */
	margin: 0 auto;
}

#intro h1{
	font-size: 28px;
	line-height: 1.15em;
	color: #fff;
	font-family: univia-pro, sans-serif;
	font-weight: 900;
	font-style: normal;
	margin: 4.5% 0 3.4%;
	text-align: center;
	text-shadow: -2px -2px 0 #0286c7, 2px -2px 0 #0286c7, -2px 2px 0 #0286c7, 2px 2px 0 #0286c7;
}

#intro .contenu > p{
	font-size: 16px;
	color: #fff;
	text-shadow: -1px -1px 0 #0286c7, 1px -1px 0 #0286c7, -1px 1px 0 #0286c7, 1px 1px 0 #0286c7;
	line-height: 1.15em;
	font-family: usual, sans-serif;
	font-weight: 600;
	font-style: normal;
	margin-top: 16px;
	text-align: center;
}

@media screen and (min-width: 425px){
	
	#intro .contenu{
		width: 85%; /* 50 */
		margin: 0 auto;
	}
	
	#intro h1{
		font-size: 32px;
	}
	
	#intro .contenu > p{
		font-size: 18px;
	}
}

@media screen and (min-width: 768px){
	
	#intro .contenu{
		width: 75%; /* 50 */
		margin: 0 auto;
	}
	
	#intro h1{
		font-size: 36px;
	}
	
	#intro .contenu > p{
		font-size: 20px;
	}
}

@media screen and (min-width: 981px){
	#intro{
		padding: 20px;
	}
	
	#intro .contenu{
		width: 50%; /* 50 */
		margin: 0 auto;
	}
	
	#intro h1{
		font-size: 4.5vw;
	}
	
	#intro .contenu > p{
		font-size: 1.62vw;
	}
}