*
{
box-sizing:border-box;
}

img{max-width: 100%}

/*on cache tous les input*/
input[type=radio]
{
   position: absolute;
   left: -9999px
}

.cadre-slider label
{
   cursor:pointer /* le curseur devient une main pour indiquer qu'il y a un lien  */	
}

.cadre-slider
{
   overflow: hidden;
   position: relative;
   max-width: 980px;
   margin: 2rem auto;
   /* border: 3px solid blue;*/

}

.photos-mini
{	
/* padding-top: 66.67%;  il s'agit du ratio pour le responsive */
    padding-top: 418px; /* il s'agit du ratio pour le responsive */

   	display: flex;
	flex-flow: row wrap;
    flex-direction: row;
    justify-content:center;
}



.miniature
{
/* flex: 1; les photos occupent la même place selon la largeur du conteneur */
    border: 1px solid #696;
    margin-top:20px;
    margin-left:20px;
    padding:40,40,40,40;
    text-align: center;
   /* width: 200px; */
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: #666 2px 2px 3px;
    -moz-box-shadow: #666 2px 2px 3px;
    box-shadow: #666 2px 2px 3px;
   /*  background: #99FF99; */
}


/* adaptation pour les smarphones */ 
@media only screen and (max-device-width:1200px) {

.miniature
{
    margin-top:30px;
    margin-left:30px;
 }

}

/* espace grande photo*/

.fenetre
{
   object-fit: cover;
   position: absolute;
   top: 0;
   transition:all 0.3s;
   left: -100%;
   opacity: 0
}

.fen:checked~ .fenetre
{	
   left: 0;
   opacity: 1
}

/*optionnel*/
figcaption1
{
   position: absolute;
   top: 0;
   left: 0;
   padding: .25rem;
   transition: opacity .4s;
   opacity: 0;
   display: flex;
   justify-content: center;
   color: ff944d;
   background: hsla(0,0%,0%,.8)
}

.fen:checked~figcaption
{
opacity:1;	
}