.lightbox-container{filter:none!important;}
#lightbox-elm,
#lightbox-elm.visible,
#lightbox-elm.loading {
 position:fixed;
 top:0;
 bottom:0;
 left:0;
 right:0;
 background:rgba(255,255,255,.9);
 opacity:1;
 transition:opacity 1s 0s,top 0s 0s;
 z-index:10000;
 overflow:hidden;
 height:100vh;
}
#lightbox-elm.hidden {
 opacity:0;
 top:100%;
 transition:opacity .5s 0s,top 0s .5s;
	pointer-events:none;
}
#lightbox-elm #lightbox-close {
 position:fixed;
 top:-50px;
 right:1%;
 width:32px;
 height:32px;
 background:#000;
 border-radius:0;
 text-align:center;
 border-radius:16px;
 cursor:pointer;
 opacity:0.5;
 z-index:10001;
 font-size:0;
 color:#000;
}
#lightbox-elm.visible #lightbox-close,
#lightbox-elm.loading #lightbox-close {
 top:1%;
}
#lightbox-elm #lightbox-close:hover {
 opacity:1;
}
#lightbox-elm #lightbox-close:before,
#lightbox-elm #lightbox-close:after {
 background:#fff;
 content:"";
 height:22px;
 left:14px;
 position:absolute;
 top:5px;
 width:4px;
 transform:rotate(45deg);
}
#lightbox-elm #lightbox-close:after {
 transform:rotate(-45deg);
}
@keyframes loader {
 from {
  opacity:.3;
 }
 to {
  opacity:1;
 }
}
#lightbox-elm #lightbox-content:after,
#lightbox-elm.visible #lightbox-content:after,
#lightbox-elm.loaded #lightbox-content:after {
 background:url(/svg/PictoIcones.svg) no-repeat center;
 content:"CHARGEMENT";
 font-size:10px;
 color:#aaa;
 text-align:center;
 height:0px;
 padding-top:120px;
 width:100%;
 margin:-60px auto;
 display:block;
 top:50%;
 position:fixed;
 transform:scale(0);
 transition:transform 0.5s;
}
#lightbox-elm.loading #lightbox-content:after {
 transform:scale(1);
 animation-name:loader;
 animation-duration:1s;
 animation-iteration-count:infinite;
 animation-direction:alternate;
}
#lightbox-content-loaded {
 position:absolute;
 top:50%;
 bottom:50%;
 left:0;
 right:0;
 transition:top 0.3s,bottom 0.3s;
 overflow:hidden;
}
.visible #lightbox-content-loaded {
 top:0;
 bottom:0;
}
#lightbox-content:not(.big) #lightbox-content-loaded h3 {
 position:absolute;
 text-align:center;
 top:94%;
 margin:0;
 padding:0;
 width:100%;
}
#lightbox-content-loaded .img {
 position:absolute;
 display:block;
 top:3%;
 left:2%;
 right:2%;
 bottom:8%;
 text-align:center;
font-size:0;
}
.big #lightbox-content-loaded .img {top:2%;bottom:2%;right:1%;left:1%;}

#lightbox-content-loaded .img:before {
	content:"";
	display:inline-block;
	vertical-align: middle;
  width:0;
	height:100%;
}
#lightbox-content-loaded .img>img {
 max-height:100%;
 max-width:100%;
 box-shadow:-2px 2px 10px rgba(0,0,0,.15);
	display:inline-block;
	vertical-align: middle;
	border-radius:6px;
}
.big #lightbox-content-loaded .img>img {
 max-width:calc(100% - 295px);
	margin-left:25px;
	min-width:50%
}
#legend{
	background:#fff;
 box-shadow:2px 2px 10px rgba(0,0,0,.15);
	padding:10px;
	font-size:14px;
	display:inline-block;
	vertical-align:middle;
	border-radius:8px;
	width:250px;
	opacity:1;
	text-align:left;
	transition:all ease-in-out .25s;
	position:relative;
	max-height:calc(100% - 20px);
	transform: translateX(25px) scale(0);
	transform-origin: right center;
}
.visible #legend{
	transform: none;
	transition:all cubic-bezier(.5,1.85,.66,.8) 0.3s .3s;
}
#legend:before, #legend:after{
	content:"";
	position:absolute;
	width:0px;
	height:0px;
	border:14px solid transparent;
	border-left-color:#fff;
	top:calc(50% - 14px);
	right:-28px;
	z-index:2;
}
#legend:after{
	border-left-color:rgba(0,0,0,.15);
	filter:blur(5px);
	right:-32px;
	z-index:-1;
}
#legend h3{
font-size:24px;
	font-weight:normal;
	color:var(--connectez);
	width:100%;
	padding-bottom:8px;
	border-bottom:1px solid #eee;
	margin:5px 0 10px;
	max-height:115px;
	overflow:hidden;
}
#lgd-lgd{
	margin:0;
	padding:0;
	font-size:16px;
	width:250px;
	overflow:auto;
	scrollbar-width:thin;
	display:block;
	max-height: calc(98vh - 90px);
}
#lgd-lgd.legended{
	max-height: calc(98vh - 229px);
}
#lgd-lgd ul#sort{
	padding:10px 0 0px;
	margin:10px 0 0;
	list-style:none;
	border-top:1px solid #eee;
	display:flex;
	flex-wrap:wrap;
}
#lgd-lgd ul#sort li{
	margin-bottom:10px;
	min-width:50%;
}
#lgd-lgd ul#sort li:last-of-type{
	width:100%;
	display:block;
}
#lgd-lgd ul#sort li em{
	display:block;
	font-style:normal;
	text-transform: uppercase;
	color:#999;
	margin-bottom:3px;
	font-size:12px;
}
#lgd-lgd ul#sort li span{
	display:inline-block;
	color:var(--imprimez);
	padding:0;
	line-height:1.1;
	margin:0 12px 0 0;
	transition:all 0.25s;
}
#lgd-lgd ul#sort li span[onclick]{
	border:1px solid var(--imprimez);
	padding:3px 10px 4px;
	border-radius:30px;
	line-height:1.1;
	margin:0 3px 3px 0;
	cursor:pointer;
}
#lgd-lgd ul#sort li span[onclick]:hover{
	background:var(--imprimez);
	color:#fff;
}
#related-images{
	margin-top:10px;
	padding-top:10px;
	height:85px;
	display:flex;
	flex-wrap:wrap;
	align-content:flex-end;
	border-top:1px solid #eee;
}
#related-images h4{
	margin:0 0 4px;
	font-weight: lighter;
	text-transform: uppercase;
	color:var(--connectez);
	width:100%;
	height:max-content;
}
#related-images ul{
	margin:5px 0 0;
	padding:0;
	list-style:none;
	display: flex;
	gap:5px;
	width:100%;
	height:max-content;
	justify-content:  space-around;
}
#related-images li{
	display:inline-block;
	width:60px;
	aspect-ratio: 1;
	max-width:60px;
	border-radius:3px;
	overflow:hidden;
	cursor:pointer;
	box-shadow:0 0 3px rgba(0,0,0,.25);
	transition:all 0.25s;
}
#related-images li:hover{
	z-index:2;
	transform: scale(1.2);
	box-shadow:0 0 10px rgba(255,255,255,1);
}
#related-images li img{
	width:100%;
	height:100%;
	display:block;
	object-fit: cover;
}

#lightbox-elm #lightbox-prev, #lightbox-elm #lightbox-next{
	position:fixed;
	top:50%;
	left:2%;
	margin-top:-50px;
	background:none;
	display:block;
	height:70px;
	width:70px;
	line-height:70px;
	text-align:center;
	border-radius:50%;
	cursor:pointer;
	font-size:0;
	opacity:0.5;
	transition:all 0.25s;
}
#lightbox-elm #lightbox-prev:hover, #lightbox-elm #lightbox-next:hover{
	opacity:1;
	background:rgba(255,255,255,.5);
}
#lightbox-elm #lightbox-next{
	left:auto;
	right:2%;
}
 #lightbox-elm #lightbox-prev:before{
	 content:"";
	 width: 0;
	 height: 0;
	 margin-left:-8px;
	 border-top: 15px solid transparent;
	 border-right: 18px solid #000;
	 border-bottom: 15px solid transparent;
}
 #lightbox-elm #lightbox-next:before{
	 content:"";
	 width: 0;
	 height: 0;
	 margin-right:-8px;
	 border-top: 15px solid transparent;
	 border-left: 18px solid #000;
	 border-bottom: 15px solid transparent;
}

@media screen and (max-width:1024px){
	#legend {
  position:fixed;
		bottom:5px;
		right:5px;
		left:5px;
		width:calc(100% - 30px);
		max-height:calc(33vh - 10px);
		box-shadow: 0px -2px 10px rgba(0,0,0,.15);
		transform-origin: center top;
		transform: translateY(-50px) scale(0);
}
	#legend::before, #legend::after {
    border-left-color: transparent;
  border-bottom-color: #fff;
  right: calc(50% - 14px);
  top: -28px;
}
	#legend::after {
    border-bottom-color: rgba(0,0,0,.15);
		top: -31px;
		filter:blur(3px);
}
	#legend h3 {
  max-height: 50px;
		line-height: 26px;
		overflow:hidden;
		margin-top:0;
		padding-bottom:5px;
			margin-bottom:5px;
}
	#lgd-lgd, #lgd-lgd.legended{width:100%;max-height:calc(33vh - 65px);}
	#lgd-lgd.legended{max-height:calc(33vh - 125px);}
	#lgd-lgd>#sort{display:block;	}
	#lgd-lgd ul#sort li, #lgd-lgd ul#sort li:last-of-type{width:max-content; min-width: 0%; margin:0;font-size:12px;display:inline-block;}
	#lgd-lgd ul#sort li em{display:none;}
	#lgd-lgd ul#sort li span{height:12px;white-space:nowrap;overflow:hidden;max-width:calc(100% - 25px);margin-bottom:0px;}
	#related-images {height:60px}
	#related-images h4 {display:none;}
	.big #lightbox-content-loaded .img > img {
  max-width: 100%;
  margin-left: 0;
		max-height:65vh;
		margin-bottom:calc(35vh + 10px);
		vertical-align: bottom;
}
}