#zonecar{margin:0 auto;display:flex;align-items: center;justify-content: center;}

img{max-width:100%}	
.caroussel_diapo input{position:absolute;left:-9999px} 
.caroussel_diapo{position:relative; text-align:center; margin:0 auto}
.contenu_carou {width:500px; height:332px; perspective:1000px}
.caroussel{transform-style:preserve-3d; position:relative; width:500px; height:332px; transition:1s}
.caroussel img {position:absolute; top:0; left:0; right:0; object-fit: cover; outline:1px solid transparent; backface-visibility:hidden; transition:1s}
.caroussel img{filter:blur(3px);opacity:.8}	
.caroussel img:nth-child(1){transform:translate3d(0,0,1270px) scale(.8)}
.caroussel img:nth-child(2){transform:rotateY(20deg) translateZ(1270px) scale(.8)}
.caroussel img:nth-child(3){transform:rotateY(40deg) translateZ(1270px) scale(.8)}
.caroussel img:nth-child(4){transform:rotateY(60deg) translateZ(1270px) scale(.8)}
.caroussel img:nth-child(5){transform:rotateY(80deg) translateZ(1270px) scale(.8)}
.caroussel img:nth-child(6){transform:rotateY(100deg) translateZ(1270px) scale(.8)}
.caroussel img:nth-child(7){transform:rotateY(120deg) translateZ(1270px) scale(.8)}
.caroussel img:nth-child(8){transform:rotateY(140deg) translateZ(1270px) scale(.8)}
.caroussel img:nth-child(9){transform:rotateY(160deg) translateZ(1270px) scale(.8)}
.caroussel img:nth-child(10){transform:rotateY(180deg) translateZ(1270px) scale(.8)}
.caroussel img:nth-child(11){transform:rotateY(200deg) translateZ(1270px) scale(.8)}
.caroussel img:nth-child(12){transform:rotateY(220deg) translateZ(1270px) scale(.8)}
.caroussel img:nth-child(13){transform:rotateY(240deg) translateZ(1270px) scale(.8)}
.caroussel img:nth-child(14){transform:rotateY(260deg) translateZ(1270px) scale(.8)}
.caroussel img:nth-child(15){transform:rotateY(280deg) translateZ(1270px) scale(.8)}
.caroussel img:nth-child(16){transform:rotateY(300deg) translateZ(1270px) scale(.8)}
.caroussel img:nth-child(17){transform:rotateY(320deg) translateZ(1270px) scale(.8)}
.caroussel img:nth-child(18){transform:rotateY(340deg) translateZ(1270px) scale(.8)}

.caroussel_diapo input[type=radio] + label {	cursor:pointer; background:hsl(203,77%,81%); display:inline-block; width:20px; border-radius:50%; height:20px}
	
.caroussel_diapo input[type=radio]:checked + label{background:hsl(203,77%,61%)}
.caroussel_diapo label{background:hsl(203,77%,61%)}
.caroussel_diapo input[name="rotation"]:checked ~ .contenu_carou .caroussel img:nth-child(n){filter:drop-shadow(12px 12px 7px hsla(0,0%,0%,.5))}	

.caroussel_diapo #carou_un:checked ~ .contenu_carou .caroussel{transform:translateZ(-1270px)}
.caroussel_diapo #carou_deux:checked ~ .contenu_carou .caroussel{transform:translateZ(-1270px) rotateY(-20deg)}
.caroussel_diapo #carou_trois:checked ~ .contenu_carou .caroussel{transform:translateZ(-1270px) rotateY(-40deg)}
.caroussel_diapo #carou_quatre:checked ~ .contenu_carou .caroussel{transform:translateZ(-1270px) rotateY(-60deg)}
.caroussel_diapo #carou_cinq:checked ~ .contenu_carou .caroussel{transform:translateZ(-1270px) rotateY(-80deg)}
.caroussel_diapo #carou_six:checked ~ .contenu_carou .caroussel{transform:translateZ(-1270px) rotateY(-100deg)}
.caroussel_diapo #carou_sept:checked ~ .contenu_carou .caroussel{transform:translateZ(-1270px) rotateY(-120deg)}
.caroussel_diapo #carou_huit:checked ~ .contenu_carou .caroussel{transform:translateZ(-1270px) rotateY(-140deg)}
.caroussel_diapo #carou_neuf:checked ~ .contenu_carou .caroussel{transform:translateZ(-1270px) rotateY(-160deg)}
.caroussel_diapo #carou_dix:checked ~ .contenu_carou .caroussel{transform:translateZ(-1270px) rotateY(-180deg)}
.caroussel_diapo #carou_onze:checked ~ .contenu_carou .caroussel{transform:translateZ(-1270px) rotateY(-200deg)}
.caroussel_diapo #carou_douze:checked ~ .contenu_carou .caroussel{transform:translateZ(-1270px) rotateY(-220deg)}
.caroussel_diapo #carou_treize:checked ~ .contenu_carou .caroussel{transform:translateZ(-1270px) rotateY(-240deg)}
.caroussel_diapo #carou_quatorze:checked ~ .contenu_carou .caroussel{transform:translateZ(-1270px) rotateY(-260deg)}
.caroussel_diapo #carou_quinze:checked ~ .contenu_carou .caroussel{transform:translateZ(-1270px) rotateY(-280deg)}
.caroussel_diapo #carou_seize:checked ~ .contenu_carou .caroussel{transform:translateZ(-1270px) rotateY(-300deg)}
.caroussel_diapo #carou_dixsept:checked ~ .contenu_carou .caroussel{transform:translateZ(-1270px) rotateY(-320deg)}
.caroussel_diapo #carou_dixhuit:checked ~ .contenu_carou .caroussel{transform:translateZ(-1270px) rotateY(-340deg)}


.caroussel_diapo #carou_un:checked ~ .contenu_carou .caroussel img:nth-child(1){transform:translateZ(1270px) scale(1);opacity:1}
.caroussel_diapo #carou_deux:checked ~ .contenu_carou .caroussel img:nth-child(2){transform:rotateY(20deg) translateZ(1270px) scale(1);opacity:1}
.caroussel_diapo #carou_trois:checked ~ .contenu_carou .caroussel img:nth-child(3){transform:rotateY(40deg) translateZ(1270px) scale(1);opacity:1}
.caroussel_diapo #carou_quatre:checked ~ .contenu_carou .caroussel img:nth-child(4){transform:rotateY(60deg) translateZ(1270px) scale(1);opacity:1}
.caroussel_diapo #carou_cinq:checked ~ .contenu_carou .caroussel img:nth-child(5){transform:rotateY(80deg) translateZ(1270px) scale(1);opacity:1}
.caroussel_diapo #carou_six:checked ~ .contenu_carou .caroussel img:nth-child(6){transform:rotateY(100deg) translateZ(1270px) scale(1);opacity:1}
.caroussel_diapo #carou_sept:checked ~ .contenu_carou .caroussel img:nth-child(7){transform:rotateY(120deg) translateZ(1270px) scale(1);opacity:1}
.caroussel_diapo #carou_huit:checked ~ .contenu_carou .caroussel img:nth-child(8){transform:rotateY(140deg) translateZ(1270px) scale(1);opacity:1}
.caroussel_diapo #carou_neuf:checked ~ .contenu_carou .caroussel img:nth-child(9){transform:rotateY(160deg) translateZ(1270px) scale(1);opacity:1}
.caroussel_diapo #carou_dix:checked ~ .contenu_carou .caroussel img:nth-child(10){transform:rotateY(180deg) translateZ(1270px) scale(1);opacity:1}
.caroussel_diapo #carou_onze:checked ~ .contenu_carou .caroussel img:nth-child(11){transform:rotateY(200deg) translateZ(1270px) scale(1);opacity:1}
.caroussel_diapo #carou_douze:checked ~ .contenu_carou .caroussel img:nth-child(12){transform:rotateY(220deg) translateZ(1270px) scale(1);opacity:1}
.caroussel_diapo #carou_treize:checked ~ .contenu_carou .caroussel img:nth-child(13){transform:rotateY(240deg) translateZ(1270px) scale(1);opacity:1}
.caroussel_diapo #carou_quatorze:checked ~ .contenu_carou .caroussel img:nth-child(14){transform:rotateY(260deg) translateZ(1270px) scale(1);opacity:1}
.caroussel_diapo #carou_quinze:checked ~ .contenu_carou .caroussel img:nth-child(15){transform:rotateY(280deg) translateZ(1270px) scale(1);opacity:1}
.caroussel_diapo #carou_seize:checked ~ .contenu_carou .caroussel img:nth-child(16){transform:rotateY(300deg) translateZ(1270px) scale(1);opacity:1}
.caroussel_diapo #carou_dixsept:checked ~ .contenu_carou .caroussel img:nth-child(17){transform:rotateY(320deg) translateZ(1270px) scale(1);opacity:1}
.caroussel_diapo #carou_dixhuit:checked ~ .contenu_carou .caroussel img:nth-child(18){transform:rotateY(340deg) translateZ(1270px) scale(1);opacity:1}

/* @for $i from 1 through 18 { */
  /* .caroussel img:nth-child(#{$i}) { */
    /* transform: rotateY(#{($i - 1) * 20}deg) translateZ(1270px) scale(0.8); */
  /* } */
  /* .caroussel_diapo #carou_#{$i}:checked ~ .contenu_carou .caroussel { */
    /* transform: translateZ(-1270px) rotateY(-#{($i - 1) * 20}deg); */
  /* } */
  /* .caroussel_diapo #carou_#{$i}:checked ~ .contenu_carou .caroussel img:nth-child(#{$i}) { */
    /* transform: rotateY(#{($i - 1) * 20}deg) translateZ(1270px) scale(1); */
    /* opacity: 1; */
  /* } */
/* } */

#lightbox {position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(5px); display: flex; justify-content: center;align-items: center; z-index: 2000; flex-direction: column;}
#lightbox.hidden {display: none;}
#lightbox img {max-width: 90vw; max-height: 80vh; object-fit: contain; margin: 1rem 0;}
#lightbox button {background: none;color: white;border: none; font-size: 2.5rem; cursor: pointer; margin: 0.5rem;}
#closeLightbox {position: absolute;top: 10px;right: 20px;}
#prevLightbox, #nextLightbox {position: absolute; top: 50%; transform: translateY(-50%); transition:1s;}
#prevLightbox {left: 20px;}
#nextLightbox {right: 20px;}

@media (max-width: 900px) {
	
  #zonecar {
    overflow: hidden;
	padding-bottom: 25px;
  }

  .contenu_carou {
    perspective: 500px;
  }
}

@media (max-width: 560px) {
	.contenu_carou, .caroussel {
	width: 100%;	
    height: calc(90vw * 0.66); 
  }