*{box-sizing:border-box}
body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;margin:0;background-color:#222}
.photo{display:none}
.current-photo{display:block}
#centrage{display:flex;min-height:100vh;align-items:center}
#container{justify-content:center;width:100%;position:relative}
#prev,#next{cursor:pointer;position:absolute;top:0;bottom:0;width:15%;font-weight:700;font-size:22px;user-select:none;}
#prev{left:0}
#next{right:0}
#prev span,#next span{position:absolute;top:50%;z-index:2;margin-top:-.8em;color:#a9a9a9;opacity:.6}
#prev span{left:30%}
#next span{right:30%}
#prev:hover span,#next:hover span{color:#fff}
.inactif{display: none;}
img{display:block;margin:auto;max-width:100%;max-height:100vh}
h3,p{color:#fff;margin:0;width:100%;text-align:center;text-shadow:rgba(0,0,0,0.6) 0 1px 2px}
h3{position:absolute;font-size:16px;font-weight:500;bottom:30px}
p{position:absolute;font-size:12px;bottom:10px}
.claire h3,.claire p{color:#4e4e4e}
#dots{display:none}
#btn-fermer {position:absolute;top:10px;right:25px;text-decoration:none;font-size:2em;font-weight:bold;color:grey;}
#btn-fermer:hover {color:darkgray;cursor:pointer;}
@media screen and (min-width: 768px) {
img{max-height:90vh}
#dots{display:block;position:absolute;bottom:0;padding-left:0;width:100%;text-align:center}
.dot{cursor:pointer;height:10px;width:10px;margin:1px;background-color:rgba(0,0,0,0);border:1px solid #fff;border-radius:50%;display:inline-block;transition:background-color .6s ease}
.dots-sombre > li{border-color:#4e4e4e}
.current-dot,.dot:hover{background-color:#fff}
h3{font-size:24px;bottom:64px}
p{font-size:14px;bottom:42px}
#prev,#next{font-size:40px}
#btn-fermer {font-size:2.8em;}
}