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

.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: ""; transition: all 400ms ease-in-out;transition: all 400ms ease-in-out;}

@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: #1a84ce; color:#ffffff; }
.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(-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;}
}




/***** custom fancybox *****/
.fancybox-arrow:after { background-color:#1a84ce; border-radius: 50px;}
.fancybox-button, .fancybox-infobar__body { background: #1a84ce;}

@media (min-width:1201px) {
.fancybox-arrow:hover:after	{ background-color:#00213a;}
.fancybox-button:hover:not([disabled]) {  background-color:#00213a;}
}