/* CSS Document */
	
*{box-sizing:border-box}
	
input[type=radio] {
	
position: absolute;
left:-9999px
	}
	
	
	
.cadre-slider{ 
  width:100%;
  max-width: 900px;
  overflow: hidden;
  aspect-ratio:3/2;
  position: relative;
  border-radius: .75rem;
  margin: 4rem auto;
	
}	
	

@supports not (aspect-ratio:3/2){
		
.slider-ar {
  padding-top: 66.67%;	
 }	
}	
	
.cadre-slide {
	
position: absolute;
top: 0;
left: 0;
bottom:0;
right:0;
will-change: transform;
transition: transform .6s;
	
}
	
.slide{
position: absolute;
top: 0;
left: 0;
bottom:0;
right:0;overflow:hidden;
}
	
.slide img{display:block;width:100%;height:100%;}
.slide:nth-of-type(1){transform:translate3d(0,0,0)}
.slide:nth-of-type(2){transform:translate3d(100%,0,0)}
.slide:nth-of-type(3){transform:translate3d(200%,0,0)}	
.slide:nth-of-type(4){transform:translate3d(300%,0,0)}	
.slide:nth-of-type(5){transform:translate3d(400%,0,0)}
.slide:nth-of-type(6){transform:translate3d(500%,0,0)}
.slide:nth-of-type(7){transform:translate3d(600%,0,0)}
.slide:nth-of-type(8){transform:translate3d(700%,0,0)}
.slide:nth-of-type(9){transform:translate3d(800%,0,0)}
.slide:nth-of-type(10){transform:translate3d(900%,0,0)}
.slide:nth-of-type(11){transform:translate3d(1000%,0,0)}
	

.slider:nth-of-type(2):checked ~ .cadre-slide{transform:translate3d(-100%,0,0);}
.slider:nth-of-type(3):checked ~ .cadre-slide{transform:translate3d(-200%,0,0);}
.slider:nth-of-type(4):checked ~ .cadre-slide{transform:translate3d(-300%,0,0);}
.slider:nth-of-type(5):checked ~ .cadre-slide{transform:translate3d(-400%,0,0);}
.slider:nth-of-type(6):checked ~ .cadre-slide{transform:translate3d(-500%,0,0);}
.slider:nth-of-type(7):checked ~ .cadre-slide{transform:translate3d(-600%,0,0);}
.slider:nth-of-type(8):checked ~ .cadre-slide{transform:translate3d(-700%,0,0);}
.slider:nth-of-type(9):checked ~ .cadre-slide{transform:translate3d(-800%,0,0);}
.slider:nth-of-type(10):checked ~ .cadre-slide{transform:translate3d(-900%,0,0);}
.slider:nth-of-type(11):checked ~ .cadre-slide{transform:translate3d(-1000%,0,0);
}
	

.figcaption{
	
position:absolute;
transition: transform .4s .4s;
will-change: transform;
transform:translate3d(0,-100%,0);
background-color:rgba(0, 0, 0, 0.4);
top: 0;
left: 0;
right: 0;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
color:white
	
	}
	
.slider:nth-of-type(1):checked ~ .cadre-slide .slide:nth-of-type(1) .figcaption,
.slider:nth-of-type(2):checked ~ .cadre-slide .slide:nth-of-type(2) .figcaption,	
.slider:nth-of-type(3):checked ~ .cadre-slide .slide:nth-of-type(3) .figcaption,	
.slider:nth-of-type(4):checked ~ .cadre-slide .slide:nth-of-type(4) .figcaption,
.slider:nth-of-type(5):checked ~ .cadre-slide .slide:nth-of-type(5) .figcaption,
.slider:nth-of-type(6):checked ~ .cadre-slide .slide:nth-of-type(6) .figcaption,
.slider:nth-of-type(7):checked ~ .cadre-slide .slide:nth-of-type(7) .figcaption,
.slider:nth-of-type(8):checked ~ .cadre-slide .slide:nth-of-type(8) .figcaption,
.slider:nth-of-type(9):checked ~ .cadre-slide .slide:nth-of-type(9) .figcaption,
.slider:nth-of-type(10):checked ~ .cadre-slide .slide:nth-of-type(10) .figcaption,
.slider:nth-of-type(11):checked ~ .cadre-slide .slide:nth-of-type(11) .figcaption
{
	transform: translate3d(0,0%,0)	
}
	
	
	.slider:nth-of-type(1):checked ~ .cadre-miniatures label:nth-of-type(1),
	.slider:nth-of-type(2):checked ~ .cadre-miniatures label:nth-of-type(2),
	.slider:nth-of-type(3):checked ~ .cadre-miniatures label:nth-of-type(3),
	.slider:nth-of-type(4):checked ~ .cadre-miniatures label:nth-of-type(4),
	.slider:nth-of-type(5):checked ~ .cadre-miniatures label:nth-of-type(5),
    .slider:nth-of-type(6):checked ~ .cadre-miniatures label:nth-of-type(6),
    .slider:nth-of-type(7):checked ~ .cadre-miniatures label:nth-of-type(7),
    .slider:nth-of-type(8):checked ~ .cadre-miniatures label:nth-of-type(8),
    .slider:nth-of-type(9):checked ~ .cadre-miniatures label:nth-of-type(9),
    .slider:nth-of-type(10):checked ~ .cadre-miniatures label:nth-of-type(10),
	.slider:nth-of-type(11):checked ~ .cadre-miniatures label:nth-of-type(11)
	{
		
		
	box-shadow: 0 0 0 3px #000;
	transform: scale(1);
	
	}


	
	
.cadre-miniatures {
	
display: flex;
justify-content: center;
position: absolute;
bottom: 1rem;
left: 0; 
right: 0;
 
}
	
.miniatures {
	
transition: transform .25s;
transform: scale(.9);
aspect-ratio: 1;
width: 60px;
border-radius: 9999px;
z-index: 2;
cursor: pointer;
margin: 0 .5rem 0;
	
}
	
.miniatures img{
	
background-color: #fafafa;
object-fit: cover;
display:block;
width: 100%;
height: 100%;
border-radius: inherit;
border: 2px solid white	
	}
	
@supports not (aspect-ratio:1)	{
		
.miniatures {height:30px}	
		
	}
	
.miniatures:hover {
	transform: scale(1);
 
}