.slideshow {

display: grid;
overflow: hidden;
max-width: 300px;
max-height: 300px;
border-radius: 0.75rem;
margin: 1rem 0 0 0;;

	}


.slideshow> * {

grid-area: 1/1;
}


.slideshow  ul {

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

}


.slideshow  ul li{
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_2:checked ~  ul > li{transform: translate3d(-100%,0,0)}
.slide_3:checked ~  ul > li{transform: translate3d(-200%,0,0)}


/******************fleches**************************/


.precedent{place-self: center left;	z-index: 1}
.suivant{place-self: center right; z-index: 1}



.slideshow > .precedent > label,
.slideshow > .suivant > label{
z-index: 1;
display: none;
background-color:hsl(0,0%,15%);
justify-content: center;
align-content: center

}

.slideshow > .precedent > label:after{content:'←'; z-index: 1}
.slideshow > .suivant > label:after{content:'→'; z-index: 1}

.slideshow > .precedent > label:after,
.slideshow > .suivant > label:after {
z-index: 1;
display: flex;
align-items: center;
font-size:2rem;
font-size:clamp(2rem, 2vw, 4rem);
color:hsl(0, 0%, 100%);

	}

	.slide_1:checked ~ .precedent > label.img3,
	.slide_1:checked ~ .suivant > label.img2,
	.slide_2:checked ~ .precedent > label.img1,
	.slide_2:checked ~ .suivant > label.img3,
	.slide_3:checked ~ .precedent > label.img2,
	.slide_3:checked ~ .suivant > label.img1,

  z-index: 1;
	display:flex;
	width:2rem;
	height:2rem;
	width:clamp(3rem, 8vw, 4rem);
	height:clamp(3rem, 8vw, 4rem);

		}


/***************************navigation puces bas********************************/
.puces {
z-index: 1;
display: flex;
gap: 1rem;
padding: 1rem;
place-self: end center;

	}

.puces label{
z-index: 1;

background-color: white;
border-radius: 50%;
width: 1rem;
height: 1rem;
width:clamp(1rem, 2vw, 1.5rem);
height:clamp(1rem, 2vw, 1.5rem);
	}

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


.slide_1:checked ~ .puces > label.img1> .actif_puces,
.slide_2:checked ~ .puces > label.img2 > .actif_puces,
.slide_3:checked ~ .puces > label.img3 > .actif_puces,

border-radius: inherit;
display: flex;
height: inherit;
width: inherit;
background-color: black;

	}