*{box-sizing: border-box}
	
	
.collection{
	direction: flex;
	align-items: center;
	justify-content: center;
	}

img{
max-width: 100%;
height:auto
	
	}
	
.target{
	
	display:none
	
	}


.cadre_diapo{

max-width:350px;
margin:2rem auto;
overflow:hidden;
	
	}

.interieur_diapo{
	
display: flex;
width: 400%;
transition: transform .6s ease-in-out
	
	}

.description{
position:relative;
font-family: georgia;
font-weight: bold;
font-size:16px;
}

.description span{
position:absolute;
left:0;
top:2%;
font-family: georgia;
font-weight: bold;
font-size:30px;
display:flex;
padding:.5rem;
justify-content: center;
color:white;
background:hsla(0,0%,0%,.35)
	
	}
	
	
#votre_id1:target ~ .cadre_diapo .interieur_diapo{transform:translatex(0)}/*image 1*/

#votre_id2:target ~ .cadre_diapo .interieur_diapo{transform:translatex(-25%)}/*image 2*/

#votre_id3:target ~ .cadre_diapo .interieur_diapo{transform:translatex(-50%)}/*image 3*/

#votre_id4:target ~ .cadre_diapo .interieur_diapo{transform:translatex(-75%)}/*image 4*/

#votre_id5:target ~ .cadre_diapo .interieur_diapo{transform:translatex(0)}/*image 1*/

#votre_id6:target ~ .cadre_diapo .interieur_diapo{transform:translatex(-25%)}/*image 2*/

#votre_id7:target ~ .cadre_diapo .interieur_diapo{transform:translatex(-50%)}/*image 3*/

#votre_id8:target ~ .cadre_diapo .interieur_diapo{transform:translatex(-75%)}/*image 4*/

#votre_id9:target ~ .cadre_diapo .interieur_diapo{transform:translatex(0)}/*image 1*/

#votre_id10:target ~ .cadre_diapo .interieur_diapo{transform:translatex(-25%)}/*image 2*/

#votre_id11:target ~ .cadre_diapo .interieur_diapo{transform:translatex(-50%)}/*image 3*/

#votre_id12:target ~ .cadre_diapo .interieur_diapo{transform:translatex(-75%)}/*image 4*/

#votre_id13:target ~ .cadre_diapo .interieur_diapo{transform:translatex(0)}/*image 1*/

#votre_id14:target ~ .cadre_diapo .interieur_diapo{transform:translatex(-25%)}/*image 2*/

#votre_id15:target ~ .cadre_diapo .interieur_diapo{transform:translatex(-50%)}/*image 3*/

#votre_id16:target ~ .cadre_diapo .interieur_diapo{transform:translatex(-75%)}/*image 4*/




/*navigation avec images miniatures*/
.navigation_diapo{
	
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
	
	}

.navigation_diapo li {
	
	padding: .25rem;
	
	}

.navigation_diapo img{

border: 3px solid white;
box-shadow:0 0 5px hsla(0,0%,0%,.4);

	
	}
	
	
	@media (min-width:31.25rem){
		
		.description span{
			
			font-size: initial;
		
		}
	
	}