.sujet                              { margin: 50px auto; position: relative;}
.sujet .nav_slider                  { position: absolute; top: 0; right: -15px;}
.sujet .slick-prev                  { position: absolute; right: 65px;}
.sujet .slick-next                  { position: absolute; right: 0;}

.galerie                            { margin:0 -15px; }
.galerie .item                      { margin:0 15px; background-color: #fff; border-radius: 5px; }
.galerie .item img                  { margin:0 auto; }

@media (max-width:1200px) {
.sujet p                           { padding-right: 110px;}  
}
@media (max-width:600px) {
.sujet .slick-dots                 { font-size: 0; line-height: 0; text-align: center; position: absolute; bottom: -30px; right:50%; transform: translateX(50%); z-index: 9;}
.sujet .slick-dots button          { background: #00334c;font-size: 0;margin-left: 10px;border-radius: 0;cursor: pointer; width: 8px; height: 8px;}
.sujet                             { margin: 50px auto 80px;}
}




/***** galerie *****/
/*.galerie  							{ display: grid; grid-template-columns:33% 33% 33%; grid-gap:20px; margin-top: 35px;}*/
.galerie img 						{ display:block;}
.galerie a 							{ display:block; position:relative;}
.galerie 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) {
.galerie a:hover:before				{ opacity:1;}
}
@media (max-width:1000px) {
.galerie  							{ grid-template-columns: 1fr 1fr;}	
}
@media (max-width:600px) {
.galerie  							{ grid-template-columns:1fr; grid-gap:20px; margin-top: 25px;}	
}



/***** galerie *****/
.blocGalerie 						{ display:grid; grid-template-columns:repeat(4,1fr); text-align:center; margin-top:60px;  grid-gap:30px;}
.blocGalerie .item a img 			{ width: 100%; height: auto; display:block; }
.item a 							{ position: relative;}
.item a .cadre 						{ background: #b1d350; outline: none; position: relative; padding: 15px 50px; overflow: hidden; color: #ffffff; transition: all 400ms ease-in-out;}

.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;}

@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: #00334c; 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(0,100%)}
.item a .cadre div                   { letter-spacing: 1px; transition: all .5s ease-in-out;}
@media (max-width:1200px) {
.blocGalerie 						{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:900px) {
.blocGalerie 						{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px) {
.blocGalerie 						{ grid-template-columns:1fr; }
}


/***** custom fancybox *****/
.fancybox-bg									{ background: #ffffff;}
.fancybox-is-open .fancybox-bg					{ opacity: 1;}
.fancybox-button,
.fancybox-infobar__body 						{ background: none; color: #00334c; font: 400 14px/60px "Poppins"; 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: #00334c ; border-radius: 0; 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_white.svg") 54% 50% no-repeat #AED543; border-radius: 0; margin-top: -30px;}
.fancybox-button--play,
.fancybox-button--fullscreen,
.fancybox-button--thumbs,
.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: #AED543 ;} 
.fancybox-arrow:hover:not([disabled])  			{ background-color: #00334c ;}
}
@media (max-width:1200px) { 
.fancybox-arrow			 						{ border: none;}
}
@media (max-width:700px) { 
.fancybox-button,
.fancybox-infobar__body 						{ line-height: 40px;}
.fancybox-infobar 								{ top: 0; left: 0;}
.fancybox-toolbar 								{ top: 0; right: 0;}
.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: 0;}
.fancybox-arrow--left 							{ left: 0;}
}