/***** galerie *****/
.blocGalerie 						{ display:grid; grid-template-columns:repeat(3,1fr); text-align:center; margin-top:60px;  grid-gap:30px;}
.blocGalerie .item a img 			{ width: 100%; height: auto; display:block; }
.blocGalerie.detail 				{ display:grid; grid-template-columns:repeat(3,1fr); text-align:center; margin-top:60px; margin-bottom:40px;  grid-gap:40px;}
.item a 							{ position: relative;}
.item a .cadre 						{ background: #121212; outline: none; position: relative; padding: 15px 50px; overflow: hidden; color: #ffffff;}

.blocGalerie.detail a 				{ display: block;}
.blocGalerie.detail a:before        { content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:url(../images/search.svg) center no-repeat rgba(0,0,0,0.5); z-index:15; opacity:0;}

@media (min-width:1201px) {
.blocGalerie.detail a:hover:after	{ background-position: 50% 50%; opacity: 1; transition: all 400ms ease-in-out;}
}

/*button:before (attr data-hover)*/
.item a:hover .cadre { background: #E84910; color:#121212; }
.item a:hover .cadre:before{opacity: 1; transform: translate(0,0);}
.item a .cadre:before{
        color: #fff;
	content: "Voir la galerie";
	position: absolute;
	left: 0;
	width: 100%;
	text-transform: uppercase;
	letter-spacing: 1px;
	opacity: 0;
	transform: translate(-100%,0);
	transition: all .5s ease-in-out;
}
/*button div (button text before hover)*/
	.item a:hover .cadre div{opacity: 0; transform: translate(100%,0)}
	.item a .cadre div{
	letter-spacing: 1px;
	transition: all .5s ease-in-out;
}
@media (max-width:1200px) {
.blocGalerie 						{ grid-template-columns:repeat(2,1fr); }
.blocGalerie.detail 				{ grid-template-columns:repeat(3,1fr);  grid-gap:20px; margin-bottom:20px;}
}
@media (max-width:800px) {
.blocGalerie 						{ grid-template-columns:1fr; }
.blocGalerie.detail 				{ grid-template-columns:repeat(2,1fr);  grid-gap:10px; margin-bottom:10px;}
}
@media (max-width:400px) {
.blocGalerie.detail 				{ grid-template-columns:1fr;}
}