/***** 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(4,1fr); text-align:center; margin-top:60px; margin-bottom:40px;  grid-gap:40px;}
.item a 							{ position: relative;}
.item a .cadre 						{ background: #202f35; 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/loupe.svg) center no-repeat rgba(0,0,0,0.5); z-index:15; opacity:0;}

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

/*button:before (attr data-hover)*/
.item a:hover .cadre { background: #202f35; color:#b8d302; }
.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(0,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-bg									{ background: #1d1d1d;}
.fancybox-is-open .fancybox-bg					{ opacity: 1;}
.fancybox-button,
.fancybox-infobar__body 						{ background: none; color: #b8d302; font: 400 14px/60px "Barlow"; letter-spacing: 0.8px;}
.fancybox-infobar 								{ top: 30px; left: auto; right: 90px; margin-left: 0;}
.fancybox-infobar button						{ display: none;}
.fancybox-toolbar 								{ top: 30px; right: 30px;}
.fancybox-show-nav .fancybox-arrow 				{ opacity: 1; transition: all 400ms ease-in-out;}
.fancybox-button--close 						{ width: 60px; height: 60px; background: #b8d302 ; border-radius: 50%; transition: all 400ms ease-in-out;}
.fancybox-button--close:before					{ width: 18px; left: calc(50% - 9px); background: #fff;}
.fancybox-button--close:after					{ width: 18px; left: calc(50% - 9px); background: #fff;}
.fancybox-arrow 								{ width: 60px; height: 60px; background: url("../images/arrow_next.svg") 54% 50% no-repeat #b8d302; border-radius: 50%; margin-top: -30px;}
.fancybox-button--thumbs,
.fancybox-button--fullscreen,
.fancybox-button--play,
.fancybox-arrow:after							{ display: none;}
.fancybox-arrow--right 							{ right: 30px;}
.fancybox-arrow--left 							{ left: 30px;}


@media (min-width:1201px) { 
.fancybox-button:hover:not([disabled]) 			{ background-color: #b8d302 ;} 
.fancybox-arrow:hover:not([disabled])  			{ background-color: #b8d302 ;}
}
@media (max-width:1200px) { 
.fancybox-arrow			 						{ border: none;}
}
@media (max-width:700px) { 
.fancybox-button,
.fancybox-infobar__body 						{ line-height: 40px;}
.fancybox-infobar 								{ top: 7.5vw; left: 7.5vw;}
.fancybox-toolbar 								{ top: 7.5vw; right: 7.5vw;}
.fancybox-button--close 						{ width: 40px; height: 40px;}
.fancybox-button--close:before					{ width: 20px; left: calc(50% - 10px);}
.fancybox-button--close:after					{ width: 20px; left: calc(50% - 10px);}
.fancybox-arrow 								{ width: 40px; height: 40px; margin-top: -20px; background-size: 20% auto;}
.fancybox-arrow--right 							{ right: 7.5vw;}
.fancybox-arrow--left 							{ left: 7.5vw;}
}