/*Global-home*/
body{
	font-size: 16px;
	font-family: 'Kanit', sans-serif;
	margin: 0;
}
li{
	line-height: 1.4;
	letter-spacing: -0.6px;
}
a{
	text-decoration: none;
	color: white;
}
.dark{
	color: black;
	text-decoration: underline;
}
.dark:hover{
	color: #FF763B;
}
.text{
	line-height: 1.4;
	letter-spacing: -0.6px;
}
.text--footer{
	font-weight: bold;
	margin: 25px 0;
	font-size: 20px;
}
.title{
	font-family: 'Teko', sans-serif;
	font-size: 50px;
	letter-spacing: -0.014em;
	font-weight: 700;
	line-height: 1;
	margin-top: 0;
	margin-bottom: 20px;
}
.title--modif{
	color: #FF763B;
}
.title--header{
	font-size: 70px;
	font-weight: bold;
	margin: 0;
	margin-left: 20px;
}
.title--small{
	font-family: 'Kanit', sans-serif;
	font-size: 30px;
	margin-top: 0px;
}
.title--graphique{
	font-size: 25px;
	margin: 40px 20px 20px 20px;
}
.header {
    background-image: url('images/background.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    height: 30vh;
    background-position: right -180px top 0px;
    width: 100vw;
	vertical-align: middle;
	display: table-cell;
}
.list{
	list-style: none;
}
.list__el{
	margin-bottom: 20px;
}
.list__el a:hover{
	font-weight: bold;
	text-decoration: underline;
}
.list__el:before{
	content: "";
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 100%;
	background-color: #FF763B;
	border: 1px solid #FF763B;
	vertical-align: middle;
	position: relative;
	right: 30px;
	margin-right: -12px;
}
.list__elalert{
    padding-left: 15px;
    margin-bottom: 20px;
}
.list__elalert:before{
	content: "";
	display: inline-block;
	position: absolute;
    width: 35px;
    background-color: transparent;
    border: 0px;
    background-repeat: no-repeat;
    background-size: contain;
    height: 35px;
    left: 25px;
    margin-top: 5px;
    margin-right: -35px;
}
.list__elalert--intensite:before{	
   background-image: url(images/intensite.svg);
}
.list__elalert--brain:before{
    background-image: url(images/brain.svg);
}
.list__elalert--skill:before{
    background-image: url(images/skill.svg);   
}
.list__elalert--stop:before{
    background-image: url(images/stop.svg);
}
.list__elalert--angry:before{
    background-image: url(images/angry.svg);    
}
.list__elalert--forgot:before{
    background-image: url(images/forgot.svg);    
}
.list__elalert--vr:before{
    background-image: url(images/vr.svg);    
}
.list__elalert--comportement:before{
    background-image: url(images/comportement.svg);
}
.list__elalert--ear:before{
    background-image: url(images/ear.svg);
}
.list__el--footer{
	margin: 10px;
	font-weight: lighter;
}
.list__el--footer:hover{
	font-weight: bold;
	text-decoration: underline;
}
.img{
	width: 70%;
	margin: 20px auto;
	display: block;
}
.img--logo{
	background-image: url(images/pointer.svg);
	width: 200px;
	height: 200px;
	background-repeat: no-repeat;
    background-size: contain;
    margin: 20px auto;
    display: block;
    text-indent: 100%;
    overflow: hidden;
}
.img--vertical{
	width: 60%;
}
.img--testdesign{
	border: 1px solid white;
}
.section{
	margin: 40px 20px;
}
.section--dark{
	margin: 40px 0 0 0;
	background-color: #252C4A;
	padding: 40px 20px 40px 20px;
	color: white;
}
.btn{
  position: relative;
  margin: 40px auto 0 auto;
  padding: 19px 22px;
  transition: all 0.2s ease;
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: block;
}
.btn:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  border-radius: 28px;
  background: rgba(255,118,59, 0.7);
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255,118,59, 0);
  transition: all 0.3s ease;
}
.btn span {
  position: relative;
  font-size: 13px;
  line-height: 18px;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: white;
  top: -5px;
  width: 100%;
  margin-left: 8px;
}
.btn:hover:before {
  width: 100%;
  border: 4px solid;
  border-color: rgba(255,118,59,1);
  background-color: transparent;
}
.nonterminer:before {
  background: rgba(123,29,29,0.7);
  border: 4px solid rgba(123,29,29,0);
}
.nonterminer:hover:before {
  border-color: rgba(123,29,29,1);
  background-color: transparent;
}
.footer{
	background-color: rgba(0,0,0,0.8);
	color: white;
	margin: 0;
	padding: 20px 20px 40px 20px;
}
/*Animation*/ 
/*https://codepen.io/alexpivtorak/pen/GgZYbL*/
@-moz-keyframes glitch {
  0% {
    -moz-transform: skew(72deg);
    transform: skew(72deg);
  }
  5.55556% {
    -moz-transform: skew(-13deg);
    transform: skew(-13deg);
  }
  11.11111% {
    -moz-transform: skew(-56deg);
    transform: skew(-56deg);
  }
  16.66667% {
    -moz-transform: skew(-59deg);
    transform: skew(-59deg);
  }
  22.22222% {
    -moz-transform: skew(-71deg);
    transform: skew(-71deg);
  }
  27.77778% {
    -moz-transform: skew(-6deg);
    transform: skew(-6deg);
  }
  33.33333% {
    -moz-transform: skew(29deg);
    transform: skew(29deg);
  }
  38.88889% {
    -moz-transform: skew(-13deg);
    transform: skew(-13deg);
  }
  44.44444% {
    -moz-transform: skew(-64deg);
    transform: skew(-64deg);
  }
  50% {
    -moz-transform: skew(71deg);
    transform: skew(71deg);
  }
  55.55556% {
    -moz-transform: skew(78deg);
    transform: skew(78deg);
  }
  61.11111% {
    -moz-transform: skew(-61deg);
    transform: skew(-61deg);
  }
  66.66667% {
    -moz-transform: skew(21deg);
    transform: skew(21deg);
  }
  72.22222% {
    -moz-transform: skew(65deg);
    transform: skew(65deg);
  }
  77.77778% {
    -moz-transform: skew(7deg);
    transform: skew(7deg);
  }
  83.33333% {
    -moz-transform: skew(-27deg);
    transform: skew(-27deg);
  }
  88.88889% {
    -moz-transform: skew(38deg);
    transform: skew(38deg);
  }
  94.44444% {
    -moz-transform: skew(-33deg);
    transform: skew(-33deg);
  }
}
@-webkit-keyframes glitch {
  0% {
    -webkit-transform: skew(-64deg);
    transform: skew(-64deg);
  }
  5.55556% {
    -webkit-transform: skew(56deg);
    transform: skew(56deg);
  }
  11.11111% {
    -webkit-transform: skew(58deg);
    transform: skew(58deg);
  }
  16.66667% {
    -webkit-transform: skew(24deg);
    transform: skew(24deg);
  }
  22.22222% {
    -webkit-transform: skew(-33deg);
    transform: skew(-33deg);
  }
  27.77778% {
    -webkit-transform: skew(-73deg);
    transform: skew(-73deg);
  }
  33.33333% {
    -webkit-transform: skew(-36deg);
    transform: skew(-36deg);
  }
  38.88889% {
    -webkit-transform: skew(60deg);
    transform: skew(60deg);
  }
  44.44444% {
    -webkit-transform: skew(49deg);
    transform: skew(49deg);
  }
  50% {
    -webkit-transform: skew(-59deg);
    transform: skew(-59deg);
  }
  55.55556% {
    -webkit-transform: skew(-2deg);
    transform: skew(-2deg);
  }
  61.11111% {
    -webkit-transform: skew(73deg);
    transform: skew(73deg);
  }
  66.66667% {
    -webkit-transform: skew(-54deg);
    transform: skew(-54deg);
  }
  72.22222% {
    -webkit-transform: skew(-43deg);
    transform: skew(-43deg);
  }
  77.77778% {
    -webkit-transform: skew(73deg);
    transform: skew(73deg);
  }
  83.33333% {
    -webkit-transform: skew(-33deg);
    transform: skew(-33deg);
  }
  88.88889% {
    -webkit-transform: skew(42deg);
    transform: skew(42deg);
  }
  94.44444% {
    -webkit-transform: skew(-53deg);
    transform: skew(-53deg);
  }
}
@keyframes glitch {
  0% {
    -moz-transform: skew(10deg);
    -ms-transform: skew(10deg);
    -webkit-transform: skew(10deg);
    transform: skew(10deg);
  }
  5.55556% {
    -moz-transform: skew(-19deg);
    -ms-transform: skew(-19deg);
    -webkit-transform: skew(-19deg);
    transform: skew(-19deg);
  }
  11.11111% {
    -moz-transform: skew(-68deg);
    -ms-transform: skew(-68deg);
    -webkit-transform: skew(-68deg);
    transform: skew(-68deg);
  }
  16.66667% {
    -moz-transform: skew(-36deg);
    -ms-transform: skew(-36deg);
    -webkit-transform: skew(-36deg);
    transform: skew(-36deg);
  }
  22.22222% {
    -moz-transform: skew(-65deg);
    -ms-transform: skew(-65deg);
    -webkit-transform: skew(-65deg);
    transform: skew(-65deg);
  }
  27.77778% {
    -moz-transform: skew(58deg);
    -ms-transform: skew(58deg);
    -webkit-transform: skew(58deg);
    transform: skew(58deg);
  }
  33.33333% {
    -moz-transform: skew(15deg);
    -ms-transform: skew(15deg);
    -webkit-transform: skew(15deg);
    transform: skew(15deg);
  }
  38.88889% {
    -moz-transform: skew(-2deg);
    -ms-transform: skew(-2deg);
    -webkit-transform: skew(-2deg);
    transform: skew(-2deg);
  }
  44.44444% {
    -moz-transform: skew(-68deg);
    -ms-transform: skew(-68deg);
    -webkit-transform: skew(-68deg);
    transform: skew(-68deg);
  }
  50% {
    -moz-transform: skew(-52deg);
    -ms-transform: skew(-52deg);
    -webkit-transform: skew(-52deg);
    transform: skew(-52deg);
  }
  55.55556% {
    -moz-transform: skew(44deg);
    -ms-transform: skew(44deg);
    -webkit-transform: skew(44deg);
    transform: skew(44deg);
  }
  61.11111% {
    -moz-transform: skew(-79deg);
    -ms-transform: skew(-79deg);
    -webkit-transform: skew(-79deg);
    transform: skew(-79deg);
  }
  66.66667% {
    -moz-transform: skew(-49deg);
    -ms-transform: skew(-49deg);
    -webkit-transform: skew(-49deg);
    transform: skew(-49deg);
  }
  72.22222% {
    -moz-transform: skew(-48deg);
    -ms-transform: skew(-48deg);
    -webkit-transform: skew(-48deg);
    transform: skew(-48deg);
  }
  77.77778% {
    -moz-transform: skew(-23deg);
    -ms-transform: skew(-23deg);
    -webkit-transform: skew(-23deg);
    transform: skew(-23deg);
  }
  83.33333% {
    -moz-transform: skew(33deg);
    -ms-transform: skew(33deg);
    -webkit-transform: skew(33deg);
    transform: skew(33deg);
  }
  88.88889% {
    -moz-transform: skew(-19deg);
    -ms-transform: skew(-19deg);
    -webkit-transform: skew(-19deg);
    transform: skew(-19deg);
  }
  94.44444% {
    -moz-transform: skew(35deg);
    -ms-transform: skew(35deg);
    -webkit-transform: skew(35deg);
    transform: skew(35deg);
  }
}
@-moz-keyframes noise {
  0% {
    background-position: 41px 77px;
  }
  10% {
    background-position: 85px 3px;
  }
  20% {
    background-position: -89px 19px;
  }
  30% {
    background-position: -12px -90px;
  }
  40% {
    background-position: 33px 84px;
  }
  50% {
    background-position: 2px -52px;
  }
  60% {
    background-position: 85px -98px;
  }
  70% {
    background-position: 7px 49px;
  }
  80% {
    background-position: 8px -95px;
  }
  90% {
    background-position: -87px -41px;
  }
}
@-webkit-keyframes noise {
  0% {
    background-position: -88px 26px;
  }
  10% {
    background-position: -89px -98px;
  }
  20% {
    background-position: -70px 92px;
  }
  30% {
    background-position: -12px -67px;
  }
  40% {
    background-position: 54px -51px;
  }
  50% {
    background-position: 86px -84px;
  }
  60% {
    background-position: 24px -98px;
  }
  70% {
    background-position: 83px 20px;
  }
  80% {
    background-position: -53px 28px;
  }
  90% {
    background-position: 84px 16px;
  }
}
@keyframes noise {
  0% {
    background-position: -96px -45px;
  }
  10% {
    background-position: 47px 25px;
  }
  20% {
    background-position: 87px 68px;
  }
  30% {
    background-position: -73px 38px;
  }
  40% {
    background-position: -40px 48px;
  }
  50% {
    background-position: -6px 82px;
  }
  60% {
    background-position: 24px 17px;
  }
  70% {
    background-position: 79px 33px;
  }
  80% {
    background-position: 25px 50px;
  }
  90% {
    background-position: -14px 13px;
  }
}
@-moz-keyframes bar {
  0% {
    height: 277px;
    top: 51%;
    opacity: 0.36;
  }
  10% {
    height: 69px;
    top: 100%;
    opacity: 0.69;
  }
  20% {
    height: 612px;
    top: 26%;
    opacity: 0.51;
  }
  30% {
    height: 92px;
    top: 23%;
    opacity: 0.03;
  }
  40% {
    height: 499px;
    top: 97%;
    opacity: 0.06;
  }
  50% {
    height: 556px;
    top: 79%;
    opacity: 0.48;
  }
  60% {
    height: 426px;
    top: 80%;
    opacity: 0.12;
  }
  70% {
    height: 117px;
    top: 76%;
    opacity: 0.03;
  }
  80% {
    height: 83px;
    top: 87%;
    opacity: 0.64;
  }
  90% {
    height: 535px;
    top: 93%;
    opacity: 0.08;
  }
}
@-webkit-keyframes bar {
  0% {
    height: 622px;
    top: 79%;
    opacity: 0.24;
  }
  10% {
    height: 451px;
    top: 8%;
    opacity: 0.17;
  }
  20% {
    height: 235px;
    top: 67%;
    opacity: 0.17;
  }
  30% {
    height: 550px;
    top: 60%;
    opacity: 0.39;
  }
  40% {
    height: 452px;
    top: 17%;
    opacity: 0.02;
  }
  50% {
    height: 391px;
    top: 56%;
    opacity: 0.23;
  }
  60% {
    height: 489px;
    top: 64%;
    opacity: 0.51;
  }
  70% {
    height: 609px;
    top: 44%;
    opacity: 0.2;
  }
  80% {
    height: 427px;
    top: 26%;
    opacity: 0.58;
  }
  90% {
    height: 141px;
    top: 22%;
    opacity: 0.41;
  }
}
@keyframes bar {
  0% {
    height: 603px;
    top: 19%;
    opacity: 0.55;
  }
  10% {
    height: 114px;
    top: 46%;
    opacity: 0.68;
  }
  20% {
    height: 240px;
    top: 36%;
    opacity: 0.41;
  }
  30% {
    height: 434px;
    top: 74%;
    opacity: 0.27;
  }
  40% {
    height: 322px;
    top: 24%;
    opacity: 0.14;
  }
  50% {
    height: 312px;
    top: 92%;
    opacity: 0.1;
  }
  60% {
    height: 608px;
    top: 91%;
    opacity: 0.13;
  }
  70% {
    height: 359px;
    top: 45%;
    opacity: 0.43;
  }
  80% {
    height: 177px;
    top: 33%;
    opacity: 0.27;
  }
  90% {
    height: 133px;
    top: 79%;
    opacity: 0.23;
  }
}
.glitched {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	height: 100vh;
	width: 100%;
	z-index: 100;
  	background-image: url(http://api.thumbr.it/whitenoise-361x370.png?background=000000ff&noise=ffffff&density=61&opacity=20);
  	-moz-animation: noise 0.2s 1;
  	-webkit-animation: noise 0.2s 1;
 	 animation: noise 0.3s 1;
}
/*-------------------------------------------------*/
/*TEST*/
.body--question{
	background-color: #252C4A;
	color: white;
}
.section--question{
	display: flex;
	flex-direction: column;
	color: white;
	justify-content: center;
}
.section--light{
	background-color: white;
	color: black;
	padding: 40px 20px;
	margin: 40px 0px auto;
}
.title--question{
	font-size: 40px;
	margin: 40px 20px 40px 20px;
	text-align: center;
	width: 90%;
}
.title--resultat{
	margin-top: 40px;
	margin-left: 20px;
}
.list--question{
	width: 70%;
	display: block;
	padding: 0;
	margin: 0 auto; 
	text-align: center;
	list-style: none;
}  
.list__el--question{
	padding: 10px 0;
	border: 2px solid white;
	border-bottom: 0px;
	cursor: pointer;
}
.list__el--question:hover{
	background-color: white;
	color: #252C4A;
}
.selected{
	background-color: white;
	color: #252C4A;
}
.list__el--question:last-child{
	border-bottom: 2px solid white
} 
.loading{
	display: block;
	margin: 40px auto;
  	width: 90%;
  	border: 2px solid white;
 	height: 50px;
 	border-radius: 100px;
}
.loading__bar{
	background-color: #FF763B;
  	width: 15%;
 	height: 50px;
 	border: 0px solid #FF763B;
 	border-radius: 100px;
}
.loading__bar2{
  	width: 21.5%;
}
.loading__bar3{
  	width: 28%;
}
.loading__bar4{
  	width: 34.5%;
}
.loading__bar5{
  	width: 41%;
}
.loading__bar6{
  	width: 47.5%;
}
.loading__bar7{
  	width: 54%;
}
.loading__bar8{
  	width: 60.5%;
}
.loading__bar9{
  	width: 67%;
}
.loading__bar10{
  	width: 73.5%;
}
.loading__bar11{
  	width: 80%;
}
.loading__bar12{
  	width: 86.5%;
}
.loading__bar13{
  	width: 94%;
}
.loading__bar14{
  	width: 100%;
}
.btnflex{
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin-bottom: 40px;
}
.btn--first{
	margin: 40px;
	float: right;
}
.selected{
	background-color: white;
	color: #252C4A;
}
.selected--multiple{
	background-color: white;
	color: #252C4A;
}
.hidden{
	display: none;
}
#question1{
	display: none;
}
#question2{
	display: none;
}
#question3{
	display: none;
}
#question4{
	display: none;
}
#question5{
	display: none;
}
#question6{
	display: none;
}
#question7{
	display: none;
}
#question8{
	display: none;
}
#question9{
	display: none;
}
#question10{
	display: none;
}
#question11{
	display: none;
}
#question12{
	display: none;
}
#question13{
	display: none;
}
#question14{
	display: none;
}
#resultat{
	display: none;
}
body[data-page="question1"] #question1 {
    display: block;
}
body[data-page="question2"] #question2 {
	display: block;
}
body[data-page="question3"] #question3 {
	display: block;
}
body[data-page="question4"] #question4 {
	display: block;
}
body[data-page="question5"] #question5 {
	display: block;
}
body[data-page="question6"] #question6 {
	display: block;
}
body[data-page="question7"] #question7 {
	display: block;
}
body[data-page="question8"] #question8 {
	display: block;
}
body[data-page="question9"] #question9 {
	display: block;
}
body[data-page="question10"] #question10 {
	display: block;
}
body[data-page="question11"] #question11 {
	display: block;
}
body[data-page="question12"] #question12 {
	display: block;
}
body[data-page="question13"] #question13 {
	display: block;
}
body[data-page="question14"] #question14 {
	display: block;
}
body[data-page="resultat"] #resultat {
	display: block;
}

.vue-chart-pie {
  width: 50%;
}
.vue-chart-pie path {
  stroke: white;
  stroke-width: 0;
  opacity: 1;
}
.graphpie{
	width: 90%;
	margin: 20px auto 40px auto;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.legendcolor{
	width: 25%;
	padding: 0;
	padding-left: 50px;
	list-style: none;
	position: relative;
}
.legendcolor__el{
	margin: 10px auto;
}
.legendcolor__el:before{
	content: "";
	width: 30px;
	height: 10px;
	display: block;
	position: absolute;
	left: 0px;
	margin: 8px;
}
.legendcolor__el--orange:before{
	background-color: #FF763B;
}
.legendcolor__el--rose:before{
	background-color: #D93676;
}
.legendcolor__el--bleu:before{
	background-color: #3021D9;
}
.legendcolor__el--turquoise:before{
	background-color: #0BD9BD;
}
.legendcolor__el--vert:before{
	background-color: #16D922;
}
.graphpie .vue-chart-pie path:nth-of-type(1) {
  fill: #FF763B;
  opacity: 0.8;
}
.graphpie .vue-chart-pie path:nth-of-type(1):hover {
  opacity: 1;
}
.graphpie .vue-chart-pie path:nth-of-type(2) {
  fill: #D93676;
  opacity: 0.8;
}
.graphpie .vue-chart-pie path:nth-of-type(2):hover {
  opacity: 1;
}
.graphpie .vue-chart-pie path:nth-of-type(3) {
  fill: #3021D9;
   opacity: 0.8;
}
.graphpie .vue-chart-pie path:nth-of-type(3):hover {
  opacity: 1;
}
.graphpie .vue-chart-pie path:nth-of-type(4) {
  fill: #0BD9BD;
   opacity: 0.8;
}
.graphpie .vue-chart-pie path:nth-of-type(4):hover {
  opacity: 1;
}
.graphpie .vue-chart-pie path:nth-of-type(5) {
  fill: #16D922;
   opacity: 0.8;
}
.graphpie .vue-chart-pie path:nth-of-type(5):hover {
  opacity: 1;
}
.bloc{
	display: none;
	color: white;
	position: absolute;
}
.bar{
	list-style: none;
	padding-left: 0;
	margin-left: 40%;
	border-left: 2px solid white;
	height: 325px;
	padding-top: 10px;
	padding-bottom: 10px;
}
.bar__el{
	margin: 0px 20px 20px 0;
	background-color: #FF763B;
	font-size: 16px;
}
.bar__el:last-child{
	margin-bottom: 0;
}
.bar__el span{
	position: relative;
	right: 151px;
	display: block;
	width: 121px;
	text-align: right;
	margin-left: 20px;
	font-size: 16px;
	color: white;
}
.bar--redac{
	width: 70%;
}
.bar--orga{
	width: 55%;
}
.bar--recherche{
	width: 35%;
}	
.bar--plateforme{
	width: 30%;
}
.bar--communication{
	width: 70%;
}
.bar--montage{
	width: 15%;
}
.bar--progra{
	width: 20%;
}
.bar--autres{
	width: 65%;
}

.bar--streaming{
	width: 63.6%;
}
.bar--youtube{
	width: 81.8%;
}
.bar--jeux{
	width: 59.1%;
}	
.bar--achat{
	width: 68.2%;
}
.bar--reseau{
	width: 72.7%;
}
.bar--communication{
	width: 72.7%;
}
.bar--navigation{
	width: 72.7%;
}
.bar--travail{
	width: 4.5%;
}
.bar--photo{
	width: 4.5%;
}
.list__el--activite{
	margin: 20px auto 20px auto;
}
.list__el--activite:before{
	content: "";
	display: inline-block;
	position: absolute;
    width: 30px;
    background-color: transparent;
    border: 0px;
    background-repeat: no-repeat;
    background-size: contain;
    height: 30px;
    left: 20px;
    margin-top: 5px;
    margin-right: -35px;
}
.list__el--streaming:before{
	background-image: url(images/netflix.svg);
}
.list__el--youtube:before{
	background-image: url(images/youtube.svg);
}
.list__el--jeux:before{
	background-image: url(images/joystick.svg);
}
.list__el--achat:before{
	background-image: url(images/purchase.svg);
}
.list__el--communication:before{
	background-image: url(images/computer.svg);
}
.list__el--navigation:before{
	background-image: url(images/www.svg);
}
.list__el--boulot:before{
	background-image: url(images/work.svg);
}
.divconso{
	margin: 20px auto 40px auto;
}
.divalternative{
	margin: 20px auto 40px auto;
}
.divreaction{
	margin: 20px auto 40px auto;
}
.divconclusion{
	margin: 20px auto 40px auto;
}
.exemplecolor--orange{
	color: #FF763B;
	background-color: white;
	padding: 0px 4px;
}
.exemplecolor--bleu{
	color: #252C4A;
	background-color: white;
	padding: 0px 4px;
}
/*INDEX*/
.body--index{
	background-image: url(images/backgroundindexiphone.png);
	background-repeat: no-repeat;
	background-size: 100% 100vh;
	margin: 80px 70px 70px 70px;
	color: white;
}
.list__el--index{
	cursor: pointer;
	font-size: 18px;
}
.list__el--index:before{
	background-color: transparent;
}
.list__el--index:hover:before{
	background-color: #FF763B;
}
.list--index{
	margin: 35px 5px;
}
@media (min-width: 700px){
	body{
		font-size: 18px;
	}
	.header{
		height: 40vh;
		background-position: right -250px top 0px;
	}
	.title--header{
		font-size: 100px;
	}
	.section{
		margin: 60px 40px;
	}
	.title{
		font-size: 60px;
		margin-bottom: 30px;
	}
	.title--graphique{
		font-size: 40px;
	}
	.list{
		width: 70%;
		padding-left: 60px;
		display: block;
		margin: auto;
	}
	.img{
		width: 50%;
		margin: 30px auto;
	}
	.text{
		width: 80%;
		display: block;
		margin-top: 30px;
		margin-bottom: 30px;
	}
	.text--center{
		width: 80%;
		display: block;
		margin: 40px auto;
	}
	.text--right{
		margin-left: 20%;
	}
	.section--dark{
		margin: 40px 0 0 0;
		padding: 60px 40px;
	}
	.title--small {
	    font-size: 30px;
	}
	.list--alert{
		padding-left: 100px;
		display: block;
		margin: 20px auto
	}
	.list__elalert{
		margin: 30px auto
	}
	.list__elalert:before{
		left: 130px;
	}	
	.footer{
	    padding: 40px 40px 60px 40px;
	    display: flex;
	    justify-content: space-around;
	    align-items: center;
	}
	.footer div{
	    width: 30%;
	}
	.footer .list{
		padding-left: 40px;
	}
	.vue-chart-pie{
		width: 40%;
	}
	.legendcolor_el{
		font-size: 20px;
	}
	.legendcolor__el:before{
		width: 40px;
		height: 15px;
		left: -17px;
		margin: 8px;
	}
	.bar{
		margin-left: 30%;
		height: 340px;
	}
	.bar span{
		font-size: 18px;
		width: 140px;
		margin-left: -10px;
	}
	.graphpie{
		margin: 40px auto 60px auto;
	}
	.title--graphique{
		margin: 60px 40px 40px 40px;
	}
	.section--light{
		padding: 60px 40px;
	}
	.list__el--activite:before{
		width: 35px;
		height: 35px;
		left: 15%;
	}
	.hidden{
		display: none;
	}
	.section--question{
		margin: 80px 80px;
	}
	/*INDEX*/
	.body--index{
		margin: 120px 70px 70px 150px;
	}
	.list__el--index{
		font-size: 20px;
	}
	.list--index{
		padding-left: 90px;
		margin-top: 60px;
	}
}
@media (min-width: 1000px){
	.title--header{
		font-size: 150px;
		margin-left: 100px;
		margin-bottom: 0;
	}
	.header{
		height: 60vh;
		background-position: right -450px top 0px;
	}
	.section{
		margin: 70px 100px;
	}
	.img{
		width: 40%;
	}
	.section--dark{
		margin: 0;
		padding: 70px 100px;
	}
	.list__elalert:before{
		left: 215px;
	}
	/*INDEX*/
	.body--index{
		background-image: url(images/backgroundindex.png);
		margin: 160px 70px 70px 120px;
	}

}
@media(min-width: 1300px){
	body{
		font-size: 20px;
	}
	.header {
	    background-image: url('images/background@2x.jpg');
	    height: 65vh;
		background-position: right 0px top 0px; 
		background-size: contain;
	}
	.section{
		margin: 140px 300px;
	}
	.title{
		font-size: 120px;
		margin-bottom: 60px;
	}
	.title--header{
		font-size: 200px;
		margin-left: 200px;
		margin-bottom: 0;
	}
	.title--small{
		font-size: 40px;
	}
	.list--flex{
		display: flex;
		justify-content: space-around;
		width: 100%;
		margin-bottom: 60px;
	}
	.list__el{
		width: 500px;
	    display: block;
	    margin: 0px auto 40px auto;
	}
	.list--alert{
		width: 1000px;
 		margin-bottom: 40px;
 		position: relative;
	}
	.list__elalert{
		width: 600px;
 		margin-bottom: 40px;
	}
	.list__elalert:before{
		width: 50px;
		height: 50px;
		margin-bottom: 40px;
		left: 200px;
	}
	.list--particulier{
		padding-left: 60px;
		margin: 20px 40px;
	}
	.list--particulier .list__el{
		margin: 0px 0px 40px 0px;
	}
	.img{
		width: 600px;
		margin: 60px auto;
	}
	.img--vertical{
		width: 300px;
	}
	.img--vertical--casestudy{
		width: 400px;
	}
	.text{
		width: 700px;
		margin: 0 0 60px 0;
	}
	.text--right{
		margin-left: 0;
	}
	.text--center{
		margin: 60px auto;
	}
	.text--footer{
		width: 300px;
	}
	.section--dark{
		padding: 150px 300px;
		margin: 0;
	}
	.desktop--flex{
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.btn--changepage{
		margin: 140px auto 0 auto;
	}
	.img--youtube{
		width: 80%;
		margin: 0;
	}
	.img--youtube:hover{
		transform: scale(1.1);
	}
	.section--question{
		margin: 15% 25%;
	}
	.title--question{
		font-size: 60px;
	}
	.section--resultat{
		padding: 60px 30px;
	}
	.graphpie{
		margin: 40px auto 100px auto;
	}
	.list__el--activite:before{
		left: 20%;
		width: 50px;
		height: 50px;
	}
	.section--light{
		padding: 70px 200px;
	}
	.title--graphique{
		font-size: 60px;
	}
	.vue-chart-pie{
		width: 30%;
	}
	/*Index*/
	.body--index{
		margin: 170px 27% 0 9%;
	}
	.list--index{
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap: wrap;
		padding-left: 80px;
		width: 100%;
		height: 35vh;
	}
	.list__el--index{
		font-size: 25px;
		margin: 30px 0;
		width: 460px;
	}
	.list__el--index:before{
		width: 20px;
		height: 20px;
	}
}