@charset "utf-8";
/* CSS Document */
@font-face {
	font-family: "din bold";
	src: url("police/D-DINCondensed-Bold.ttf");
	}
@font-face {	
	font-family: "din condensed";
	src: url("police/D-DINCondensed.ttf");
	}



.portfolio {
flex : 3 1 200px;
margin : 1vw;
	width: 36%;
	padding: 1%;
	margin-top: -146%;
	margin-left: 30%;
	position:absolute;z-index:2;
}


.portfolio img  {
	width: 100%;
}

.portfoliotitre {
flex : 3 1 200px;
margin : 1vw;
	width: 55%;
	padding: 1%;
	margin-top: 0%;
	margin-left: 22%;
	position:absolute;z-index:2;
}


.portfoliotitre img  {
	width: 100%;
}

.juliette{
flex : 3 1 200px;
margin : 1vw;
	width: 26%;
	padding: 1%;
	margin-top: -138%;
	margin-left: 38%;
	position:absolute;z-index:2;
}


.juliette img  {
	width: 100%;
}

.entree{
flex : 3 1 200px;
margin : 1vw;
	width: 26%;
	padding: 1%;
	margin-top: 20%;
	margin-left: 38%;
	position:absolute;z-index:3;
}


.entree img  {
	width: 100%;}

.contenuentree  > img:hover {
filter: blur(5px);
	transition-duration: 1s;
		opacity: 0;
}

.entree:hover ~ img{
	filter: blur(5px);
	transition-duration: 1s;
		opacity: 1;

}
.entree:hover {
	filter: blur(0);
	transition-duration: 1s;

		opacity: 0;

}



.texte  {
	color: beige;
	font-size:130px;
	font-family:Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
	margin-top: 15%;
	margin-left: 0%;
	position: absolute;
  
	}

.fondaccueil {
text-align:center;
	width: 99%;
	position:absolute;z-index:-1

}

.fondaccueil img  {
	width: 100%;
	
}


.fond {
text-align:center;
	width: 100%;

}

.fond img  {
	width: 100%;
	
}


.contenu-flex {
display : flex;
flex-wrap: wrap

}


.contenu-un {
background-color: beige;
flex : 1 1 200px;
margin : 1vw;
	width: 25%;
	padding: 1%;
	margin-top: -122%;
	margin-left: 05%;
	position:absolute;z-index:2;
	 display: inline;
  pointer-events: auto;
  cursor: pointer;

}


.contenu-un img  {
	width: 100%;
}

.contenu-un > img:hover {
filter: blur(5px);
	transition-duration: 1s;
		opacity: 1;

}
.bouton-voir:hover ~ img{
	filter: blur(5px);
	transition-duration: 1s;
		opacity: 1;

}
.bouton-voir:hover {
	filter: blur(0);
	transition-duration: 1s;

		opacity: 1;

}

.contenu-deux {
background-color: beige;
flex : 1 1 200px;
margin : 1vw;
	width: 25%;
	padding: 1%;
	margin-top: -122%;
	margin-left: 35%;
	position:absolute;z-index:2;
}

.contenu-deux img  {
	width: 100%;
}

.contenu-deux  > img:hover {
filter: blur(5px);
	transition-duration: 1s;
		opacity: 1;
}

.bouton-voir:hover ~ img{
	filter: blur(5px);
	transition-duration: 1s;
		opacity: 1;

}
.bouton-voir:hover {
	filter: blur(0);
	transition-duration: 1s;

		opacity: 1;

}


.contenu-trois {
background-color: beige;
flex : 3 1 200px;
margin : 1vw;
	width: 25%;
	padding: 1%;
	margin-top: -122%;
	margin-left: 65%;
	position:absolute;z-index:2;
}


.contenu-trois img  {
	width: 100%;
}

.contenu-trois > img:hover {
filter: blur(5px);
	transition-duration: 1s;
		opacity: 1;
}

.bouton-voir:hover ~ img{
	filter: blur(5px);
	transition-duration: 1s;
		opacity: 1;

}
.bouton-voir:hover {
	filter: blur(0);
	transition-duration: 1s;

		opacity: 1;

}

.contenu-quatre {
background-color: beige;
flex : 3 1 200px;
margin : 1vw;
	width: 25%;
	padding: 1%;
	margin-top: -92%;
	margin-left: 05%;
	position:absolute;z-index:2;
}


.contenu-quatre img  {
	width: 100%;
}

.contenu-quatre > img:hover {
filter: blur(5px);
	transition-duration: 1s;
		opacity: 1;
}

.bouton-voir:hover ~ img{
	filter: blur(5px);
	transition-duration: 1s;
		opacity: 1;

}
.bouton-voir:hover {
	filter: blur(0);
	transition-duration: 1s;

		opacity: 1;

}


.contenu-cinq {
background-color: beige;
flex : 3 1 200px;
margin : 1vw;
	width: 25%;
	padding: 1%;
	margin-top: -92%;
	margin-left: 35%;
	position:absolute;z-index:2;
}


.contenu-cinq img  {
	width: 100%;
}

.contenu-cinq > img:hover {
filter: blur(5px);
	transition-duration: 1s;
		opacity: 1;
}

.bouton-voir:hover ~ img{
	filter: blur(5px);
	transition-duration: 1s;
		opacity: 1;

}
.bouton-voir:hover {
	filter: blur(0);
	transition-duration: 1s;

		opacity: 1;

}

.contenu-six {
background-color: beige;
flex : 3 1 200px;
margin : 1vw;
	width: 25%;
	padding: 1%;
	margin-top: -92%;
	margin-left: 65%;
	position:absolute;z-index:2;
}

.contenu-six > img:hover {
filter: blur(5px);
	transition-duration: 1s;
		opacity: 1;
}

.bouton-voir:hover ~ img{
	filter: blur(5px);
	transition-duration: 1s;
		opacity: 1;

}
.bouton-voir:hover {
	filter: blur(0);
	transition-duration: 1s;

		opacity: 1;

}

.contenu-six img  {
	width: 100%;
}

.contenu-sept {
background-color: beige;
flex : 3 1 200px;
margin : 1vw;
	width: 25%;
	padding: 1%;
	margin-top: -62%;
	margin-left: 05%;
	position:absolute;z-index:2;
}


.contenu-sept img  {
	width: 100%;
}

.contenu-sept > img:hover {
filter: blur(5px);
	transition-duration: 1s;
		opacity: 1;
}

.bouton-voir:hover ~ img{
	filter: blur(5px);
	transition-duration: 1s;
		opacity: 1;

}
.bouton-voir:hover {
	filter: blur(0);
	transition-duration: 1s;

		opacity: 1;

}
.contenu-huit {
background-color: beige;
flex : 3 1 200px;
margin : 1vw;
	width: 25%;
	padding: 1%;
	margin-top: -62%;
	margin-left: 35%;
	position:absolute;z-index:2;
}


.contenu-huit img  {
	width: 100%;
}

.contenu-huit > img:hover {
filter: blur(5px);
	transition-duration: 1s;
		opacity: 1;
}

.bouton-voir:hover ~ img{
	filter: blur(5px);
	transition-duration: 1s;
		opacity: 1;

}
.bouton-voir:hover {
	filter: blur(0);
	transition-duration: 1s;

		opacity: 1;

}

.contenu-neuf {
background-color: beige;
flex : 3 1 200px;
margin : 1vw;
	width: 25%;
	padding: 1%;
	margin-top: -62%;
	margin-left: 65%;
	position:absolute;z-index:2;
}


.contenu-neuf img  {
	width: 100%;
}

.contenu-neuf > img:hover {
filter: blur(5px);
	transition-duration: 1s;
		opacity: 1;
}

.bouton-voir:hover ~ img{
	filter: blur(5px);
	transition-duration: 1s;
		opacity: 1;

}
.bouton-voir:hover {
	filter: blur(0);
	transition-duration: 1s;

		opacity: 1;

}

.contenu-dix {
background-color: beige;
flex : 3 1 200px;
margin : 1vw;
	width: 25%;
	padding: 1%;
	margin-top: -32%;
	margin-left: 05%;
	position:absolute;z-index:2;
}


.contenu-dix img  {
	width: 100%;
}

.contenu-dix > img:hover {
filter: blur(5px);
	transition-duration: 1s;
		opacity: 1;
}

.bouton-voir:hover ~ img{
	filter: blur(5px);
	transition-duration: 1s;
		opacity: 1;

}
.bouton-voir:hover {
	filter: blur(0);
	transition-duration: 1s;

		opacity: 1;

}

.contenu-onze {
background-color: beige;
flex : 3 1 200px;
margin : 1vw;
	width: 25%;
	padding: 1%;
	margin-top: -32%;
	margin-left: 35%;
	position:absolute;z-index:2;
}


.contenu-onze img  {
	width: 100%;
}

.contenu-onze > img:hover {
filter: blur(5px);
	transition-duration: 1s;
		opacity: 1;
}

.bouton-voir:hover ~ img{
	filter: blur(5px);
	transition-duration: 1s;
		opacity: 1;

}
.bouton-voir:hover {
	filter: blur(0);
	transition-duration: 1s;

		opacity: 1;

}

.contenu-douze {
background-color: beige;
flex : 3 1 200px;
margin : 1vw;
	width: 25%;
	padding: 1%;
	margin-top: -32%;
	margin-left: 65%;
	position:absolute;z-index:2;
}


.contenu-douze img  {
	width: 100%;
}

.contenu-douze > img:hover {
filter: blur(5px);
	transition-duration: 1s;
		opacity: 1;
}

.bouton-voir:hover ~ img{
	filter: blur(5px);
	transition-duration: 1s;
		opacity: 1;

}
.bouton-voir:hover {
	filter: blur(0);
	transition-duration: 1s;

		opacity: 1;

}

.bandeau {
flex : 3 1 200px;
margin : 1vw;
	width: 98.9%;
	padding: 1%;
	margin-top: -3%;
	margin-left: -1%;
	position:absolute;z-index:2;
}


.bandeau img  {
	width: 100%;
}

.insta {
flex : 3 1 200px;
margin : 1vw;
	width: 6%;
	padding: 1%;
	margin-top: -1.3%;
	margin-left: 3%;
	position:absolute;z-index:2;
}


.insta img  {
	width: 100%;
}


.bouton-voir {
margin : 25% 1vw 1vw 25%;
	width: 50%;
	padding: 1%;
	position:absolute;
	z-index:100;
	opacity: 0;
}


.bouton-voir img  {
	width: 100%;
}


.contenuphoto {
display: flex;
animation-duration: 20s;
animation-name: image;
animation-iteration-count: infinite;
}

#caroussel {
width: 800px;
overflow: hidden;
position: absolute;
margin-left: 36.8%;
	}

@keyframes image {
	0%{
		transform: translateX(0);
	}
	25%{
		transform: translateX(-770px);
	}
	75%{
		transform: translateX(-1540px);
	}
	100%{
		transform: translateX(0);
	}
}





.titre {
flex : 3 1 200px;
margin : 1vw;
	width: 45%;
	padding: 1%;
	margin-top: 3%;
	margin-left: -2%;
	position:absolute;z-index:2;
}


.titre img  {
	width: 100%;
}


.texte {
	width: 20%;
	margin-left: 7%;
	margin-top: 22%;
	color : beige;
	font-size:14px;
	text-align: justify;
	font-family: "din condensed";
	position:absolute;z-index: 3
	}

.retour{
flex : 3 1 200px;
margin : 1vw;
	width: 18%;
	padding: 1%;
	margin-top: -5%;
	margin-left: -3%;
	position:absolute;z-index:2;
}


.retour img  {
	width: 100%;
}

.contenuretour  > img:hover {
filter: blur(5px);
	transition-duration: 1s;
		opacity: 0;
}

.retour:hover ~ img{
	filter: blur(5px);
	transition-duration: 1s;
		opacity: 1;

}
.retour:hover {
	filter: blur(0);
	transition-duration: 1s;

		opacity: 0;

}


.droite {
flex : 3 1 200px;
margin : 1vw;
	width: 08%;
	padding: 1%;
	margin-top: 38%;
	margin-left: 12%;
	position:absolute;z-index:2;
}


.droite img  {
	width: 100%;
}

.gauche {
flex : 3 1 200px;
margin : 1vw;
	width: 08%;
	padding: 1%;
	margin-top: 36%;
	margin-left: 12%;
	position:absolute;z-index:2;
}


.gauche img  {
	width: 100%;
}








a { 
	text-decoration: none;
	
	}