/***** 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: #dac696; outline: none; position: relative; padding: 15px 50px; overflow: hidden; color: #000000;}

.blocGalerie.detail a 				{ display: block;}
.blocGalerie.detail a:after			{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; background:url("../images/loupe.svg") 50% 60% no-repeat #00000075; opacity: 0; content: "";}

@media (min-width:1201px) {
.blocGalerie.detail a:hover:after	{ background-position: 50% 50%; opacity: 1;}
}

/*button:before (attr data-hover)*/
.item a:hover .cadre { background: #535353; color:#dac696; }
.item a:hover .cadre:before{opacity: 1; transform: translate(0,0);}
.item a .cadre:before{
	content: "Voir la galerie";
	position: absolute;
	left: 0;
	width: 100%;
	text-transform: uppercase;
	letter-spacing: 1px;
	opacity: 0;
	transform: translate(0,-100%);
	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:1000px) {
.blocGalerie 						{ grid-template-columns:1fr; }
.blocGalerie.detail 				{ grid-template-columns:repeat(2,1fr);  grid-gap:10px; margin-bottom:10px;}
}