*,
*:after,
*:before{

box-sizing: border-box;

}
/* body{
background-color: #f8f9fa;
	
} */

input[type="radio"]{position:absolute;left:-100vw}

label{cursor:pointer}


.slideshow {
display: grid;
overflow: hidden;
max-height: 700px;
max-width: 100%;
}
  
	
.slideshow> * {
	
grid-area: 1/1;

}	




.slideshow  ul { 

list-style-type: none;
padding: 0;
margin: 0;
display: flex;
	
}

	
.slideshow  ul li{
z-index:-1;
flex: 0 0 100%;
transition: transform .4s;
will-change: transform
}
	
.slideshow  ul  li img {
	
/*aspect-ratio:3/2;	
object-fit: cover;*/
width: 100%;
display: block;
height:auto;
user-select: none;
	
}

	
 
#slide_img2:checked ~  ul > li{transform: translate3d(-100%,0,0)}  
#slide_img3:checked ~  ul > li{transform: translate3d(-200%,0,0)}
#slide_img4:checked ~  ul > li {transform: translate3d(-300%,0,0)}

 
    
/******************fleches**************************/
    
	
.precedent{place-self: center left;	}
.suivant{place-self: center right;}
	


.slideshow > .precedent > label,
.slideshow > .suivant > label{

display: none;
justify-content: center;
align-content: center
	
}   
        
.slideshow > .precedent > label:after{content:'←'}
.slideshow > .suivant > label:after{content:'→'}
    
.slideshow > .precedent > label:after,
.slideshow > .suivant > label:after {
	
display: flex;
align-items: center;
font-size:2rem;
font-size:clamp(2rem, 2vw, 4rem);
color:hsl(0, 0%, 100%);

	
	}   
    

#slide_img1:checked ~ .precedent > label.img4,
#slide_img1:checked ~ .suivant > label.img2,
#slide_img2:checked ~ .precedent > label.img1,
#slide_img2:checked ~ .suivant > label.img3,
#slide_img3:checked ~ .precedent > label.img2,
#slide_img3:checked ~ .suivant > label.img4,
#slide_img4:checked ~ .precedent > label.img3,
#slide_img4:checked ~ .suivant > label.img1{
	
display:flex;
width:2rem;
height:2rem;
width:clamp(3rem, 8vw, 4rem);
height:clamp(3rem, 8vw, 4rem);
	
	}



/********************simulation lien actif sur les puces******************************/

	
#slide_img1:checked ~ .puces > label.img1> .actif_puces,
#slide_img2:checked ~ .puces > label.img2 > .actif_puces,
#slide_img3:checked ~ .puces > label.img3 > .actif_puces,
#slide_img4:checked ~ .puces > label.img4 > .actif_puces{
	
border-radius: inherit;	
display: flex;
height: inherit;
width: inherit;
background-color: black;
	
	}

/********************************navigation puces bas****************************/