/* Benoît 22/04/28 – Lightbox sans javascript, d'après https://tympanus.net/Tutorials/CSS3Lightbox/ */

.field--type-text-long .lb-album {margin: 1em auto; list-style:none; padding-left:0}
h2 > ul.lb-album {margin-top: 0}
.field--type-text-long .lb-album > li {display: inline-block; margin: 5px 3px; position: relative; width: calc(25% - 10px); padding: 10px; background:#dcdcdc}
.field--type-text-long .lb-album img{max-width:100%; max-height: 90vh; width: auto}
.lb-album .img-responsive {display:inline}
.lb-album li > figure figcaption {margin-bottom:0}
.lb-album li > figure figcaption a {position: absolute; width: 100%; height: 100%; top: 0; left: 0; text-align: center; color: white; text-transform: uppercase; font-size: 20px; line-height:normal; text-decoration:none; font-family:'roboto_condensedlight'; padding:10px; display : flex; align-items : center; justify-content : center; opacity: 0; background: rgba(160,160,160,0.9); transition: opacity 0.3s linear}
.lb-album li > figure figcaption a em, .lb-album li > figure figcaption a sup, .lb-album li > figure figcaption a strong {display:contents}
.lb-album li > figure figcaption a:hover {color:white; opacity: 1}
.lb-overlay{width: 0px; height: 0px; position: fixed; overflow: hidden; left: 0px; top: 0px; padding: 0px; z-index: 9999; text-align: center; background: rgb(97,96,96); background: radial-gradient(ellipse, rgba(255,255,255,0.56) 0%,rgba(97,96,96,1) 100%)}
.lb-overlay div.cont {background: rgba(255,255,255,0.9); overflow: auto; height: auto; padding: 20px 20px 10px 20px; max-width:1500px; margin:0 auto; max-height:calc(100vh - 6%)}
.lb-overlay div.img{float:left; width:50%; margin: 0 15px 15px 0}
.lb-overlay div.txt{margin: 0 auto 0 auto; width: calc(50% - 15px); float: right; padding: 0 2em 2em 2em; text-align:left}
.lb-overlay div h3{margin-top:0}
.lb-overlay div.voir-aussi {margin-top:2em}
.lb-overlay div p span{font-size:0.8em}
.lb-overlay a.lb-close{text-indent: -9000px; background: transparent url(img/picto_croix-fermeture.svg) no-repeat; width:30px; height:30px; z-index: 1001; position: absolute; top: 0; margin-left: 700px; padding: 0 5px; margin-top: calc(10px + 3%); opacity: 0.8}
.lb-overlay img{max-height: 100%; max-width: 100%; position: relative; opacity: 0; transition: opacity 0.5s linear}
.lb-prev, .lb-next{text-indent: -9000px; position: absolute; top: 45%; width: 30px; height: 60px; opacity: 0.8}
.lb-prev:hover, .lb-next:hover, .lb-overlay a.lb-close:hover{opacity: 1}
.lb-prev{left: 1%; background: transparent url(img/fleche_blanche_gauche.svg) no-repeat}
.lb-next{right: 1%; background: transparent url(img/fleche_blanche_droite.svg) no-repeat}
.lb-overlay:target {width: auto; height: auto; bottom: 0; right: 0; padding: 3%}
.lb-overlay:target img{opacity: 1}

@media (max-width: 1550px) {
.lb-overlay a.lb-close{margin-left:0; right:40px}
.lb-prev{background: transparent url(img/fleche_violette_gauche.svg) no-repeat}
.lb-next{background: transparent url(img/fleche_violette_droite.svg) no-repeat}
}

@media (max-width: 1000px) {
.lb-overlay div.img{float:none; text-align:center; width:auto}
.lb-overlay div.txt{float:none; width:100%}
.lb-overlay div.cont{max-height:100%}
.lb-overlay div h3{margin-top:10px}
.field--type-text-long .lb-album > li{width: calc(33% - 10px)}
}

@media (max-width: 600px) {
.field--type-text-long .lb-album > li{width: calc(50% - 10px)}
}

@media (max-width: 400px) {
.field--type-text-long .lb-album > li{width: 100%}
}

@media speech, aural, braille {
.lb-close, .lb-next, .lb-prev , .lb-album li > figure {display:none; visibility:hidden} /*inutile pour les lecteurs d'écran – À corriger*/
}