@charset "UTF-8";
/* CSS Document */

.row_info
{
	width:90%;
	position:relative;
	left:5%;
}

#infographie
{
	padding-top:40px;
		overflow:hidden;
}
#infographie .volet_arrive
{
	position:relative;
	margin-top:-200px;
}
#infographie .volet
{
	width:0px;
}

#infographie .legende
{
	font-size:0.8em;
	line-height:1.2em;
}

#infographie .blanc
{
	color:#fff !important;
}

#infographie .personnage
{
	position:absolute;
}
#infographie .bulle
{
	position:absolute;
}

#infographie #icon_top
{
	top:200px;
	margin-top:40px;
	width:100%;
	position:absolute;
}

#infographie .icon-ampoule
{
	display:inline-block;
	font-size:4em;
	height:80px;
	width:80px;
	color:#FFF;
	background-color:#007D8F;
	margin-bottom:20px;
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	border-radius: 40px;
	line-height:80px;
}

#infographie h1
{
	text-transform:uppercase;
	position:relative;
	margin-top:100px;
	text-align:center;
	line-height:1.2em;
	color:#007D8F;
	font-size:3em;
	font-weight:700;
}

#infographie h2
{
	position:relative;
	margin-top:20px;
	text-align:center;
	line-height:1.2em;
	color:#007D8F;
	font-size:1.7em;
	font-weight:400;
}
#infographie h2 span
{
	color:#00B4C1;
	display:block;
	padding-top:10px;
}


#infographie .conteneur_flex
{
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap: wrap;
	flex-wrap:wrap;
}

#infographie .colonne50,#infographie .colonne70,#infographie .colonne30
{
	-ms-flex-grow:1;
	flex-grow:1;
	width:100%;
}

#infographie #bande1
{
	margin-top:240px;
	margin-bottom:40px;
}



#infographie #bande1 .colonne50
{
	min-height:300px;
}


#infographie #bande1 .bloc_texte
{
	padding:40px 40px 20px 40px;
	color:#fff;
	background-color:#007D8F;
	font-weight:600;
	font-size:1.6em;
	text-align:center;
}

#infographie #bande1 .bloc_texte p
{
	padding-bottom:20px;
}

#infographie #bande1 .visuel
{
	width:100%;
	height:100%;
	position:relative;
	overflow:hidden;
}

#infographie #bande1 .visuel .img
{
	width:130%;
	height:130%;
	position:absolute;
	background: url(../images/infographie/visuel1.jpg) no-repeat center; 
   -webkit-background-size: cover; /* pour anciens Chrome et Safari */
   background-size: cover; /* version standardisée */
}

/* bande2 */

#infographie #bande2
{
	background-color:#cac6c8;
}

#infographie #bande2 .bloc_texte
{
	padding:40px;
}

#infographie #bande2 #fd_bande2 img
{
	width:100%;
	height:auto;
}


#infographie #bande2 .personnage
{
	height:50%;
	bottom:0;
	text-align:right;
	margin-right:70%;
}

#infographie #bande2 .personnage .bulle
{
	width:210px;
	height:auto;
	position:absolute;
	top:0;
	
}

#infographie #bande2 .personnage .perso
{
	height:100%;
	width:auto;
}



/* bande3 */
#infographie #bande3
{
	background-color:#C3CEBB;
	position:relative;
}
#infographie #bande3 #fd_bande3
{
	position:absolute;
	z-index:0;
	bottom:0;
	left:0;
	width:100%;
	height:100%;
	overflow:hidden;
}

#infographie #bande3 #fd_bande3 img
{
	width:100%;
	height:auto;
	position:absolute;
	bottom:0;
	
}


#infographie #bande3 .colonne70
{
	padding:40px;
	padding-left:20%;
	z-index:1;
}
#infographie #bande3 .bulle
{
	width:165px;
	height:auto;
	position:absolute;
	z-index:10;
	top:-40px;
	right:0;
}
#infographie #bande3 .personnage
{
	margin-right:82%;
	bottom:0%;
	height:60%;
	text-align:right;

}
#infographie #bande3 .personnage .perso
{
	height:100%;
	width:auto;
}



/* bande4 */

#infographie #bande4
{
	background-color:#A58F9C;
}

#infographie #bande4 .bloc_texte
{
	padding:40px;
}

#infographie #bande4 #fd_bande4
{
	position:absolute;
	z-index:0;
	bottom:0;
	left:0;
	width:100%;
	height:100%;
	overflow:hidden;
}

#infographie #bande4 #fd_bande4 img
{
	width:100%;
	height:auto;
	position:absolute;
	z-index:0;
	bottom:0;
}

#infographie #bande4 .colonne50
{
	padding:40px;
	z-index:1;
}


#infographie #bande4 .personnage
{
	height:70%;
	bottom:0;
	text-align:right;
	display:none;
}

#infographie #bande4 .personnage img
{
	height:100%;
	width:auto;
	bottom:0;
}

#infographie #bande4 .bulle
{
	width:240px;
	height:auto;
	position:relative;
	margin-top:-60px;
	margin-left:-30px;
}


/* bande5 */

#infographie #bande5
{
	background-color:#00b4c1;
	position:relative;
}

#infographie #bande5 .bloc_texte
{
	padding:40px;
}

#infographie #bande5 #fd_bande5
{
	position:absolute;
	z-index:0;
	bottom:0;
	left:0;
	width:100%;
	height:auto;
}

#infographie #bande5 .texte2
{
	width:100%;
	height:auto;
	position:relative;
	z-index:1;
}

#infographie #bande5 .personnage
{
	height:50%;
	text-align:right;
	bottom:0%;
	margin-right:60%;
}

#infographie #bande5 .personnage .perso
{
	height:100%;
	width:auto;
}
#infographie #bande5 .personnage .bulle
{
	width:210px;
	height:auto;
	top:-25%;
	margin-top:20px;
	left:70%;
}



/* bande6 */

#infographie #bande6
{
	background-color:#C8C4C3;
	z-index:10;
}

#infographie #bande6 .bloc_texte
{
	padding:40px;
}

#infographie #bande6 #fd_bande6
{
	position:absolute;
	z-index:0;
	bottom:0;
	left:0;
	width:100%;
	height:100%;
	overflow:hidden;
}

#infographie #bande6 #fd_bande6 img
{
	width:100%;
	height:auto;
	position:absolute;
	z-index:0;
	bottom:0;
}

#infographie #bande6 .colonne50
{
	padding:40px;
	z-index:1;
}


#infographie #bande6 .personnage
{
	height:70%;
	bottom:0;
	margin-bottom:-38px;
	text-align:right;
	display:none;
	margin-right:35%;
}

#infographie #bande6 .personnage img
{
	height:100%;
	width:auto;
	bottom:0;
}

#infographie #bande6 .bulle
{
	width:150px;
	height:auto;
	position:relative;
	margin-left:0px;
}



/* bande7 */

#infographie #bande7
{
	background-color:#CAD9E0;
	z-index:-10;
}

#infographie #bande7 .bloc_texte
{
	padding:40px;
}

#infographie #bande7 #fd_bande7
{
	position:absolute;
	z-index:0;
	bottom:0;
	left:0;
	width:100%;
	height:100%;
	overflow:hidden;
}

#infographie #bande7 #fd_bande7 img
{
	width:100%;
	height:auto;
	position:absolute;
	z-index:0;
	bottom:0;
}

#infographie #bande7 .colonne50
{
	padding:40px;
	z-index:1;
}


#infographie #bande7 .bulle
{
	width:225px;
	height:auto;
	margin-top:-60px;
	position:relative;
	margin-left:0px;
}


/* bande8 */

#infographie #bande8
{
	background-color:#ADD4D0;
}

#infographie #bande8 .bloc_texte
{
	padding:40px;
}

#infographie #bande8 #fd_bande8
{
	position:absolute;
	z-index:0;
	bottom:0;
	left:0;
	width:100%;
	height:100%;
	background-color:#7DA4A1;
	overflow:hidden;
	opacity:0.35;
}

#infographie #bande8 #fd_bande8 img
{
	width:100%;
	height:auto;
	position:absolute;
	z-index:0;
	top:0;

}

#infographie #bande8 .personnage
{
	height:55%;
	bottom:0;
	text-align:right;
	margin-right:50%;
	display:none;
	z-index:10;
}

#infographie #bande8 .personnage img
{
	height:100%;
	width:auto;
	bottom:0;
}


#infographie #bande8 .colonne50
{
	padding:40px;
	z-index:1;
}


#infographie #bande8 .bulle
{
	width:195px;
	height:auto;
	position:relative;
	margin-left:0px;
}


/* bande9 */

#infographie #bande9
{
	background-color:#C1BDCC;
}

#infographie #bande9 .bloc_texte
{
	padding:40px;
}

#infographie #bande9 #fd_bande9
{
	position:absolute;
	z-index:0;
	bottom:0;
	left:0;
	width:100%;
	height:100%;
	overflow:hidden;
}

#infographie #bande9 #fd_bande9 img
{
	width:100%;
	height:auto;
	position:absolute;
	z-index:0;
	bottom:0;
}

#infographie #bande9 .colonne50
{
	padding:40px;
	z-index:1;
}


#infographie #bande9 .personnage
{
	height:70%;
	bottom:0;
	text-align:right;
	margin-right:30%;
	display:none;
}

#infographie #bande9 .personnage img
{
	height:100%;
	width:auto;
	bottom:0;
}

#infographie #bande9 .bulle
{
	width:240px;
	height:auto;
	position:relative;
	margin-top:-60px;
	margin-left:-30px;
}

.conclusion
{
	position:relative !important;
	margin-top:-150px !important;
	padding-bottom:50px;
}

@media screen and (min-width: 640px)
{
	#infographie .colonne70
	{
		width:70%;
		position:relative;
	}
	#infographie .colonne50
	{
		width:50%;
		position:relative;
	}
	#infographie .colonne30
	{
		width:30%;
		position:relative;
	}
	
	#infographie #bande2 .personnage
	{
		height:110%;
		margin-right:40%;
	}
	#infographie #bande2 .personnage .bulle
	{
		width:280px;
	}
	#infographie #bande3 .personnage
	{
	bottom:0%;
	height:100%;
	display:block;
	}
	#infographie #bande3 .bulle
	{
	width:220px;
	height:auto;
	position:relative;
	z-index:10;
	top:0px;
	}
	#infographie #bande4 .bulle
	{
	width:320px;
	}
	#infographie #bande4 .personnage
	{
		display:block;
	}
	
	#infographie #bande5 .personnage
	{
	margin-right:50%;
	bottom:0%;
	height:70%;
	}
	#infographie #bande5 .personnage .bulle
	{
		margin-top:-60px;
		margin-left:-110px;
		width:280px;
		left:auto;
	}
	#infographie #bande6 .personnage
	{
		display:block;
	}
	#infographie #bande6  .bulle
	{
	margin-left:-60px;
	width:200px;
	}
	#infographie #bande7  .bulle
	{
	margin-top:0px;
	margin-left:-30px;
	margin-top:-10px;
	width:300px;
	}
	#infographie #bande8 .personnage
	{
	display:block;
	}
	#infographie #bande8 .bulle
	{
	width:260px;
	}
	#infographie #bande8 #fd_bande8
	{
	opacity:1;
	}
	#infographie #bande9 .personnage
	{
		display:block;
	}
	#infographie #bande9  .bulle
	{
	width:320px;
	}
	
}
/*/mediaquery*/


@media screen and (min-width: 768px)
{
	#infographie #bande2 .personnage .bulle
	{
	width:360px;
	height:auto;
	}
	#infographie #bande3 .bulle
	{
	width:280px;
	}
		
	#infographie #bande4  .bulle
	{
	width:400px;
	}
	#infographie #bande5 .personnage .bulle
	{
		width:360px;
	}
	#infographie #bande6  .bulle
	{
	width:240px;
	}
	#infographie #bande7  .bulle
	{
	width:360px;
	}
	#infographie #bande8  .bulle
	{
	width:320px;
	}
	#infographie #bande9  .bulle
	{
	width:360px;
	}
}
/*/mediaquery*/

@media screen and (min-width: 990px)
{
	.row_info
	{
	width:891px;
	left:auto;
	margin:0 auto;
	}
	

}
/*/mediaquery*/
@media screen and (min-width: 1260px)
{

/*/mediaquery*/
@media screen and (min-width: 1920px)
{

	
}
/*/mediaquery*/