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

#divConteneurPatchwork{
	position:relative;
	width:100%;
	height:600px;
	padding-bottom:0px;
	border-bottom:4px #fff solid;
	background-color:#fff;
}

.divPointInterrogation{
	position:absolute;
	z-index:100;
	width:6%;
	top:17%;
	left:30%;
	cursor:pointer;
}
@keyframes animRenette {
    0%   {margin-top:0px;}
    25%  {margin-top:-5px;}
    100% {margin-top:0px;}
}
.divPointInterrogation:hover{
	animation-name: animRenette;
    animation-duration: 0.5s;
}

.divPointInterrogation img{
	width:100%;
	height:auto;
}

#divPatchworkBloc1{
	display:block;
	float:left;
	width:33.33%;
	height:100%;
}
#divPatchworkBloc2{
	display:block;
	float:left;
	width:33.33%;
	height:100%;
}
#divPatchworkBloc3{
	display:block;
	float:left;
	width:33.33%;
	height:50%;
}
#divPatchworkBloc4{
	display:block;
	float:left;
	width:33.33%;
	height:50%;
}
.photoUnCadre{
	position:relative;
	overflow:hidden;
	text-align:center;
}
.patchworkPhoto{
	border:4px #fff solid;
	width:100%;
	height:100%;
		-webkit-filter: grayscale(0%); /* Chrome, Safari, Opera 100% pour effet noir et blanc */
		filter: grayscale(0%); /* Firefox */
	transition:all 1.0s;
}
.photoUnCadre:hover .patchworkPhoto{
	-webkit-filter: grayscale(0%); /* Chrome, Safari, Opera */
	filter: grayscale(0%); /* Firefox */
}
/*
@keyframes animPhotoHover{
     0% { opacity:1.0; }
     35%  { opacity:0.5; }
     100%   { opacity:1.0; }
}
.patchworkPhoto:hover{
	animation: animPhotoHover 0.5s linear;
}
*/
.patchworkLogo{
	max-width:100%;
	max-height:100%;
}
.photoUnCadre .divlegendePhotoPatchwork{
	display:block;
	position:absolute;
	top:0px;
	left:4px;
	background-color:rgba(0,0,0,0.6);
	color:#fff;
	font-size:20px;
	font-family:Arial, Helvetica, sans-serif;
	width:98%;
	padding:5px;
	padding-left:1%;
	padding-right:1%;
	opacity:0.0;
	transition:all 0.5s;
}
.photoUnCadre:hover .divlegendePhotoPatchwork{
	top:10px;
	opacity:1.0;
}


/* bloc 1 */
	#divPhotoB1P1{
		display:block;
		float:left;
		width:50%;
		height:46%;
	}
	#divPhotoB1P2{
		display:block;
		float:left;
		width:50%;
		height:23%;
	}
	#divPhotoB1P3{
		display:block;
		float:left;
		width:50%;
		height:23%;
	}
	#divPhotoB1P4{
		display:block;
		float:left;
		width:33%;
		height:20%;
	}
	#divPhotoB1P5{
		display:block;
		float:left;
		width:67%;
		height:20%;
	}
	#divPhotoB1P6{
		display:block;
		float:left;
		width:50%;
		height:34%;
	}
	#divPhotoB1P7{
		display:block;
		float:left;
		width:50%;
		height:34%;
	}
/* bloc 2 */
	#divPhotoB2P1{
		display:block;
		float:right;
		width:33%;
		height:20%;
	}
	#divPhotoB2P2{
		display:block;
		float:right;
		width:67%;
		height:20%;
	}
	#divPhotoB2P3{
		display:block;
		float:right;
		width:50%;
		height:34%;
	}
	#divPhotoB2P4{
		display:block;
		float:right;
		width:50%;
		height:34%;
	}
	#divPhotoB2P5{
		display:block;
		float:right;
		width:50%;
		height:46%;
	}
	#divPhotoB2P6{
		display:block;
		float:right;
		width:50%;
		height:23%;
	}
	#divPhotoB2P7{
		display:block;
		float:right;
		width:50%;
		height:23%;
	}
/* bloc 3 */
	#divPhotoB3P1{
		display:block;
		float:right;
		width:50%;
		height:100%;
	}
	#divPhotoB3P2{
		display:block;
		float:right;
		width:50%;
		height:50%;
	}
	#divPhotoB3P3{
		display:block;
		float:right;
		width:50%;
		height:50%;
	}
/* bloc 4 */
	#divPhotoB4P1{
		display:block;
		float:right;
		width:50%;
		height:60%;
	}
	#divPhotoB4P2{
		display:block;
		float:right;
		width:50%;
		height:60%;
	}
	#divPhotoB4P3{
		display:block;
		float:right;
		width:67%;
		height:40%;
	}
	#divPhotoB4P4{
		display:block;
		float:right;
		width:33%;
		height:40%;
	}

@media screen and (max-width:960px){
	.divPointInterrogation{
	width:12%;
	top:10%;
	left:45%;
	}
	
	
	#divPatchworkBloc1{
		width:50%;
		height:67%;
	}
	#divPatchworkBloc2{
		width:50%;
		height:67%;
	}
	#divPatchworkBloc3{
		width:50%;
		height:33%;
	}
	#divPatchworkBloc4{
		width:50%;
		height:33%;
	}
	
}
@media screen and (max-width:500px){
	.divPointInterrogation{
	width:25%;
	top:5%;
	left:40%;
	}

	#divPatchworkBloc1{
		width:100%;
		height:33%;
	}
	#divPatchworkBloc2{
		width:100%;
		height:33%;
	}
	#divPatchworkBloc3{
		width:100%;
		height:16%;
	}
	#divPatchworkBloc4{
		width:100%;
		height:16%;
	}
	
}