/*--------------------------------- Général ---*/

	*{
		padding: 0;
		margin: 0;
		box-sizing: border-box;
		object-fit: cover;
		font-family: 'Dosis', sans-serif;
	}

	body{
		background-color: #5f8fd3;
		overflow-x: hidden;
	}

	a{
		text-decoration: none;
		transition: 500ms;
		color: #111111;
	}

	a:hover{
		color: red;
	}

	.chargement{
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		display: block;
		background-color: #fff;
		z-index: 999;
	}

	.prefin{
		transition: 1s;
		background-color: #ffffff00;
	}

	.fin{
		display: none;
	}
/*---------------------------------- Header ---*/

	header{
		text-align: center;
		padding: 30vw;
		padding: 5% 0 0;
	}

	h1, header h2, p{
		text-shadow: #ddd 0 0 30px;
	}

	h1{
		font-size: 60px;
	}

	header h2{
		font-size: 30px;
	}

	header p{
		padding: 5vw 20vw;
		font-size: 22px;
	}
/*---------------------------- Section fond ---*/

	.fond{
		/*background-color: #4399f7;*/
		background-color: #5f8fd3;
		background-image: url(../images/nuage.png);
		height: 250px;
	}
/*--------------------------- Section texte ---*/
	
	.texte{
		background-color: #fff;
		display: flex;
		flex-direction: column;
	}

	.texte article{
		padding: 10vw 5vw;
		display: flex;
		text-align: center;
		align-items: center;
	}

	.texte article:nth-child(even){
		flex-direction: row-reverse;
	}

	.texte article div{
		width: 50vw;
	}

	.texte h3{
		font-size: 25px;
		margin-bottom: 1.5em;
	}

	.texte p{
		padding: 0 10%;
		font-size: 17px;
		margin-bottom: .5em;
	}

	.from-texte,.from-illus {
		opacity: 0;
		transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
	}

	.from-texte {
		transform: translate(50px);
		/*height: 100%;*/
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-color: #ddd;
		padding: 1vw;
		margin-right: -5vw;
		border-radius: 100px 0 0 100px;
		box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.5);
		border: 5px solid #aaa;
		border-right: 0;
	}

	.from-illus {
		transform: translate(-50px);
	}	

	.texte article:nth-child(even) .from-texte {
		transform: translate(-50px);
		margin-right: 0;
		margin-left: -5vw;
		border-radius: 0 100px 100px 0;
		box-shadow: -3px 3px 10px 0px rgba(0,0,0,0.5);
		border-right: 5px solid #aaa;
		border-left: 0;
	}

	.texte article:nth-child(even) .from-illus {
		transform: translate(50px);
	}
/*---------------------------------- Div i1 ---*/

	.bs img{
		box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
	}

	.sbs{
		box-shadow: none !important;
	}
	
	.ibs{
		box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
	}

/*---------------------------------- Div i1 ---*/
	
	.i1{
		height: 100%;
		display: flex;
		justify-content: center;
	}
	
	.i1 img{
		width: 20vw;
		position: relative;
	}
/*---------------------------------- Div i2 ---*/
	
	.i2{
		height: 100%;
		display: flex;
		justify-content: center;
	}
	
	.i2 img{
		width: 20vw;
		position: relative;
	}

	.i2 .image1{
		right: 5%;
	}

	.i2 .image2{
		left: 5%;
	}
/*---------------------------------- Div i3 ---*/

	.i3{
		height: 100%;
		display: flex;
		justify-content: center;
	}
	
	.i3 img{
		transition: 1s;
		width: 20vw;
		position: relative;
	}

	.i3 .image1{
		left: 30%;
		bottom: 0;
	}

	.i3 .image2{
		top: 6vw;
		right: 20%;
	}

	.i3 .image3{
		top: 4vw;
		right: 40%;
	}

	.i3:hover .image1{
		bottom: 6vw;
	}

	.i3:hover .image2{
		top: 4vw;
		right: 30%;
	}

	.i3:hover .image3{
		right: 30%;
	}
/*---------------------------------- Div i4 ---*/
	
	.i4, .i4i{
		height: 100%;
		display: flex;
		justify-content: center;
	}
	
	.i4 img, .i4i img{
		transition: 1s;
		width: 30vw;
		max-height: 10vw;
		position: relative;
	}

	.i4 .image1{
		left: 55%;
		top: 4vw;
	}

	.i4 .image2{
		top: 1vw;
		left: 5%;
	}

	.i4 .image3{
		right: 15%;
		top: 7vw;
	}

	.i4 .image4{
		bottom: 2vw;
		right: 35%;
	}

	.i4:hover .image1{
		left: 35%;
		top: -5vw;
	}

	.i4:hover .image2{
		left: 40%;
		top: -5vw;
	}

	.i4:hover .image3{
		top: 5vw;
		right: 25%;
	}

	.i4:hover .image4{
		bottom: -5vw;
		right: 20%;
	}
/*---------------------------------- Div i4i ---*/

	.i4i .image1{
		left: 45%;
		top: 4vw;
	}

	.i4i .image2{
		top: 1vw;
		left: -5%;
	}

	.i4i .image3{
		right: 25%;
		top: 7vw;
	}

	.i4i .image4{
		bottom: 2vw;
		right: 45%;
	}

	.i4i:hover .image1{
		left: 25%;
		top: -5vw;
	}

	.i4i:hover .image2{
		left: 30%;
		top: -5vw;
	}

	.i4i:hover .image3{
		top: 5vw;
		right: 35%;
	}

	.i4i:hover .image4{
		bottom: -5vw;
		right: 30%;
}
/*---------------------------------- Div i4p ---*/
	
	.video-responsive {
		overflow:hidden;
		padding-bottom:56.25%;
		position:relative;
		height:0;
	}

	.video-responsive iframe {
		position: absolute;
		left:0;
		top:0;
		height:100%;
		width:100%;
	}

	.i4p{
		height: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.video-responsive {
		overflow:hidden;
		padding-bottom:56.25%;
		position:relative;
		height:0;
	}

	.video-responsive iframe {
		position: absolute;
		left:5%;
		top:0;
		height:90%;
		width:90%;
	}
	
	.i4p img{
		transition: 1s;
		width: 20vw;
		position: relative;
	}

	.i4p .image2{
		top: 1vw;
		left: 20%;
	}

	.i4p .image3{
		top: 7vw;
		left: 0;
	}

	.i4p .image4{
		bottom: 2vw;
		right: 10%;
	}

	.i4p:hover .image2{
		left: 20%;
	}

	.i4p:hover .image3{
		top: 15vw;
		left: 15%;
	}

	.i4p:hover .image4{
		bottom: -5vw;
		right: 20%;
	}
/*---------------------------------- Div i5 ---*/
	
	.i5{
		height: 100%;
		display: flex;
		justify-content: center;
	}
	
	.i5 img{
		transition: 1s;
		width: 20vw;
		max-height: 10vw;
		position: relative;
		margin: 0 10px;
	}

	.i5 .image1{
		left: 50%;
	}

	.i5 .image2{
		top: 2vw;
		left: 5%
	}

	.i5 .image3{
		bottom: 4vw;
		right: 5%;
	}

	.i5 .image4{
		bottom: 2vw;
		right: 0;
	}

	.i5 .image5{
		top: 4vw;
		right: 30%;
	}

	.i5:hover .image1{
		left: 50%;
	}

	.i5:hover .image2{
		top: -8vw;
		left: -5%;
	}

	.i5:hover .image3{
		bottom: 8vw;
		right: -20%;
	}

	.i5:hover .image4{
		bottom: -8vw;
		right: 45%;
	}

	.i5:hover .image5{
		top: 8vw;
		right: 20%;
	}
/*---------------------------------- Div i6 ---*/

	.i6 img{
		transition: 1s;
		width: 20vw;
		max-height: 50vh;
		overflow: hidden;
		position: relative;
		margin: 0 10px;
	}

	.i6 .image1{
		top: 10vw;
		left: 10%;
	}

	.i6 .image2{
		top: 15vw;
	}

	.i6 .image3{
		bottom: 10vw;
		left: 20%;
	}

	.i6 .image4{
		right: 10%;
	}

	.i6 .image5{
		bottom: 15vw;
		left: 5%;
	}

	.i6 .image6{
		bottom: 20vw;
	}

	.i6:hover .image1{
		left: 0;
		top: 0;
	}

	.i6:hover .image2{
		top: 0;
	}

	.i6:hover .image3{
		bottom: 0;
		left: 0;
	}

	.i6:hover .image4{
		right: 0;
	}

	.i6:hover .image5{
		bottom: 0;
		left: 0;
	}

	.i6:hover .image6{
		bottom: 0;
	}

	.i6h img{
		transition: 1s;
		width: 20vw;
		max-height: 50vh;
		overflow: hidden;
		position: relative;
		margin: 0 10px;
	}

	.i6h .image1{
		left: 20%;
		top: 10vw;
	}

	.i6h .image2{
		top: 20vw;
	}

	.i6h .image3{
		bottom: 10vw;
		left: 10%;
	}

	.i6h .image4{
		bottom: 2vw;
		right: 10%;
	}

	.i6h .image5{
		bottom: 40vw;
		left: 30%;
	}

	.i6h .image6{
		bottom: 50vw;
		right: 20%;
	}

	.i6h:hover .image1{
		left: 0;
		top: 0;
	}

	.i6h:hover .image2{
		top: 0;
	}

	.i6h:hover .image3{
		bottom: 0;
		left: 0;
	}

	.i6h:hover .image4{
		bottom: 0;
		right: 0;
	}

	.i6h:hover .image5{
		bottom: 0;
		left: 0;
	}

	.i6h:hover .image6{
		bottom: 0;
		right: 0;
	}
/*---------------------------------- Div i7 ---*/

	.i7 img{
		transition: 1s;
		width: 20vw;
		max-height: 50vh;
		overflow: hidden;
		position: relative;
		margin: 0 10px;
	}

	.i7 .image1{
	}

	.i7 .image2{
	}

	.i7 .image3{
	}

	.i7 .image4{
	}

	.i7 .image5{
	}

	.i7 .image6{
	}

	.i7 .image7{
	}

	.i7:hover .image1{
	}

	.i7:hover .image2{
	}

	.i7:hover .image3{
	}

	.i7:hover .image4{
	}

	.i7:hover .image5{
	}

	.i7:hover .image6{
	}

	.i7:hover .image7{
	}
/*---------------------------------- Div i8 ---*/

	.i8 img{
		transition: 1s;
		width: 20vw;
		max-height: 50vh;
		overflow: hidden;
		position: relative;
		margin: 0 10px;
	}

	.i8 .image1{
		top: 15vw;
		left: 5vw;
	}

	.i8 .image2{
		top: 25vw;
		right: 15vw;
	}

	.i8 .image3{
		left: 20vw;
	}

	.i8 .image4{
		top: 10vw;
		right: 5vw;
	}

	.i8 .image5{
		bottom: 10vw;
		left: 15vw;
	}

	.i8 .image6{
		top: 2vw;
		right: 5vw;
	}

	.i8 .image7{
		bottom: 10vw;
	}

	.i8 .image8{
		bottom: 15vw;
		right: 15vw;
	}

	.i8:hover .image1{
		top: 0;
		left: 0;
	}

	.i8:hover .image2{
		top: 0;
		right: 0;
	}

	.i8:hover .image3{
		left: 0;
	}

	.i8:hover .image4{
		top: 0;
		right: 0;
	}

	.i8:hover .image5{
		bottom: 0;
		left: 0;
	}

	.i8:hover .image6{
		top: 0;
		right: 0;
	}

	.i8:hover .image7{
		bottom: 0;
	}

	.i8:hover .image8{
		bottom: 0;
		right: 0;
	}
/*---------------------------------- Div i10 ---*/
	
	.i10{
		height: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		transition: 1s;
	}
	
	.i10 img{
		width: 10vw;
		position: relative;
		transition: 1s;
	}

	.i10 .image1{
		top: 5vw;
		left: 20%;
	}

	.i10 .image2{
		top: 10vw;
		left: 30%;
	}

	.i10 .image3{
		top: 3vw;
		right: 5%;
	}

	.i10 .image4{
		top: 15vw;
		right: 20%;
	}

	.i10 .image5{
		top: 5vw;
		left: 50%;
	}

	.i10 .image6{
		top: 5vw;
		left: 0;
	}

	.i10 .image7{
		right: 30%;
		bottom: 2vw;
	}

	.i10 .image8{
		right: 10%;
		bottom: 5vw;
	}

	.i10 .image9{
		bottom: 10vw;
		left: 10%;
	}

	.i10 .image10{
		bottom: 2vw;
		right: 15%;
	}

	.i10:hover .image1{
		top: -10vw;
		bottom: 10vw;
		left: 22%;
	}

	.i10:hover .image2{
		top: -10vw;
		bottom: 10vw;
		left: 22%;
	}

	.i10:hover .image3{
		top: 0;
		right: 35%;
	}

	.i10:hover .image4{
		top: 0;
		right: 10%;
	}

	.i10:hover .image5{
		top: 0;
		left: 0;
	}

	.i10:hover .image6{
		top: 0;
		left: 45%;
	}

	.i10:hover .image7{
		bottom: -10vw;
		right:35%;
	}

	.i10:hover .image8{
		bottom: -10vw;
		right: 10%;
	}

	.i10:hover .image9{
		bottom: -10vw;
		left:0;
	}

	.i10:hover .image10{
		bottom: -10vw;
		right:0;
	}
/*------------------------------ Responsive ---*/

@media(max-width: 600px){

	.texte article{
		padding: 10vw 2vw;
	}

	.from-texte {
		border-radius: 50px 0 0 50px;
		padding: 2vw;
	}

	.texte article:nth-child(even) .from-texte {
		border-radius: 0 50px 50px 0;
	}

	.i1, .i1s, .i2, .i3, .i4, .i5{
		flex-direction: column;
		align-items: center;
	}

	.i6, .i7, .i8, .i9, .i10{
		-webkit-flex-wrap: wrap;
		-moz-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		-o-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	.i1 img, .i1s img, .i2 img, .i3 img, .i4 img, .i4p img, .i5 img, .i6 img, .i6h img, .i7 img, .i8 img, .i9 img, .i10 img{
		position: static;
		margin-top: 2vw; 
		margin-bottom: 2vw;
		width: 90%;
		max-height: 100vh
	}

	.i6 img, .i6h img, .i7 img, .i8 img, .i9 img, .i10 img{
		width: 40%;
		margin: 2vw;
	}
}