/* mise en page basique, hors sujet avec le fonctionnement des carousels */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif, "Kolker Brush", cursive;


}

body{
    padding: 2rem;
    object-fit: cover;
    background-color: black;
    background-image: url(img/MAP.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.conteneur-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 22rem;
    gap: 3rem;
    margin-top: 14rem;
        position: relative; 
    top:100px;
}

/*.enfant-grid{
    border: 0.2rem solid goldenrod;;
}*/
/* ----------------------------------------------- */


/* 
on masque l'input pour ne pas avoir cette 
petite case à cocher dégueulasse 
*/
.enfant-grid input{
    display: none;
}

/* mise en page de l'image dans la grid */
.enfant-grid img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-image: none;  
}

/* je définis par défaut que le carousel est masqué */
.splide{
    display: none;
    position: fixed;
    top: 0; bottom: 0; left: 0; right: 0; 
}

/* lorsqu'on coche un input, le carousel correspondant est affiché */
.enfant-grid:has(input:checked) > .splide{
    display: block;
}

/* 
c'est juste un fond en faible opacité pour marquer la 
séparation entre le carousel et le contenu derrière 
*/
.splide{
    background-color: rgba(0,0,0,0.7);
}

/* 
je force les dimensions du conteneur qui 
contient les images du carousel

sans ça, les images sont potentiellement 
trop grandes pour la fenêtre 
*/
.splide__track{
    height: 80dvh;
    top: 10dvh;
}

/* pour s'assurer que les images s'affichent entièrement */
.splide__slide img{
    object-fit: contain;;
}

/*
j'ai du rajouter ça pour forcer l'affichage 
des petits points en dessous du carousel.

si tu ne veux pas ces petits points, tu peux 
passer le display en none
*/
.splide__pagination {
    display: flex!important;
}

/* 
pour que la souris se change en un doigt 
pointé quand on passe au-dessus de l'image 
*/
.ouverture{
    cursor: pointer;
}

/*
mise en forme du bouton de fermeture 

à noter que j'étais obligé de rajouter ce bouton 
de fermeture parce que c'est la seule solution que 
j'ai trouvé en pur HTML et CSS

c'est possible de faire en sorte que tu fermes le 
carousel en cliquant n'importe où en dehors des 
photos mais il aurait fallu utiliser du JS et je ne 
sais pas comment le coder
*/
.fermeture{
    display: block;
    position: fixed;
    background-color: steelblue;
    color: whitesmoke;
 /*   bottom: 1rem;
    center: 1rem;*/
    cursor: pointer;
    margin-right: auto;
    margin-left: auto;
    margin-top: 1.5rem;
    padding: 1rem;
    cursor: pointer;
    inset-area: center;
}

/*------------- SECTION FOOTER----------------------*/

footer{
    position: relative;
    clear: both;
    bottom: -180px;
    text-align: center;
    padding: 10px;
    padding-bottom: 50px;
    color: whitesmoke;
    z-index: -1;
}

/*footer h4, footer a { 
    margin-bottom: 20px;
}

footer h4 { 
    font-size: 20px;
}

footer a { 
    font-size: 14px;
}

.inputmail{
    width: 245px;
    height: 50px;
    padding-left: 20px;
}

.inputsubmit{
    width: 150px;
    height: 50px;
    background-color: #ffa633;
    border: 2px solide white;
    border-radius: 4px;
    color: white;
    font-weight: bold;
}
*/
.encours{
    color: ghostwhite;
    text-align: center;
    padding-top: 20px;
}

/*-----------------REGLAGES IMAGES------------------*/

.enfant-grid-1 input{
    display: none;
}

/* mise en page de l'image dans la grid */
.enfant-grid-1 label img{
    display: block;
    width: 55%;
    height: 55%;
    margin-left: 50px;
    margin-top: -50px;
    object-fit: contain;
    background-image: none;  
}

/* mise en page de l'image dans la grid */
.enfant-grid-1 img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-image: none;  
}


/* lorsqu'on coche un input, le carousel correspondant est affiché */
.enfant-grid-1:has(input:checked) > .splide{
    display: block;
}


 #enfant-grid-2 label img{
    display: block;
    width: 120%;
    height: 120%;
    object-fit: contain;
    background-image: none; 
 }


.enfant-grid-3 input{
    display: none;
}

/* mise en page de l'image dans la grid */
.enfant-grid-3 label img{
    display: block;
    width: 65%;
    height: 65%;
    margin-left: -150px;
    margin-top: -180px;
    object-fit: contain;
    background-image: none;  
}

/* mise en page de l'image dans la grid */
.enfant-grid-3 img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-image: none;  
}


/* lorsqu'on coche un input, le carousel correspondant est affiché */
.enfant-grid-3:has(input:checked) > .splide{
    display: block;
}











/*-------------------- fenêtre cliquable en bas --------------------*/


          .content a {
            padding: 15px;
            background-color: #fff;
            border-radius: 3px;
            text-decoration: none;
            color: darkslategray;
            justify-content: center;
            font-weight: bolder;
            
        }


            .content a:hover {
            background-color: darkslategray;
            text-decoration: none;
            color: whitesmoke;
  
            
        }


        .content {
            position: absolute;
            background-color: darkslategray;
            padding:20px;
            border-radius:10px;     
            padding-left: 50px;
            padding-right: 40px; 
            margin-bottom: -450px;
            z-index: 100;
            font-size: 15px;
        }

        .content h2{
            padding-bottom: 35px;
            font-size: 15px;
            justify-content: center;
            text-align-last: center;
            
        }

        .content a{
            appearance: auto;
            margin-left: 50px;
            text-align-last: center;
            font-size:15px;
        }



/*-------------------EFFET LAMPE TORCHE------------------*/


/* body{
    
    cursor: none;
    margin:0;
}



:root{
    
    --pointerY:50vh;
    --pointerX:50vw;
    

}

body:before{
    
    content:'';
    position: fixed;
    width: 100%;
    height: 100%;
    background:radial-gradient(circle 10vmax at var(--pointerX) var(--pointerY), rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5)80%, rgba(0, 0, 0, 0.95)100%);
}

section .conteneur-grid {
    padding: 5em;
    color:white;
    font-size: 20px;

}*/




/*----------------DEUXIEME ESSAI LAMPE TORCHE--------------*/

/*
#flashlight{
    --Xpos:50vw;
    --XposY:50vh;
}

#flashlight:before{
    content:"";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    backgrount:radial-gradient(circle 9em at var(--Xpos) var(--Ypos), rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
}*/



























/*----------------------------------------RESPONSIVE-------------------------------------------*/

@media screen and (max-width:520px){

    .enfant-grid-1 label img{
        display: block;
        width: 110%;
        height: 110%;
        margin-left: 50px;
        margin-top: -450px;
        object-fit: contain;
        background-image: none;  
}


 #enfant-grid-2 label img{
    display: block;
    width: 120%;
    height: 120%;
    margin-left: -110px;
    margin-top: -220px;
    object-fit: contain;
    background-image: none; 
 }


    .enfant-grid-3 label img{
        width: 200%;
        height: 200%;
        margin-left: -100px;
        margin-top: -530px;
    }

    
}















@media screen and (max-width:440px){

    .enfant-grid-1 label img{
        display: block;
        width: 150%;
        height: 150%;
        margin-left: -15px;
        margin-top: -480px;
        object-fit: contain;
        background-image: none;  
}


 #enfant-grid-2 label img{
    display: block;
    width: 150%;
    height: 150%;
    margin-left: -75px;
    margin-top: -270px;
    object-fit: contain;
    background-image: none; 
 }


    .enfant-grid-3 label img{
        width: 250%;
        height: 250%;
        margin-left: -27px;
        margin-top: -565px;
    }

    
}









@media screen and (max-width:320px){

    .enfant-grid-1 label img{
        display: block;
        width: 270%;
        height: 270%;
        margin-left: -25px;
        margin-top: -700px;
        object-fit: contain;
        background-image: none;  
}


 #enfant-grid-2 label img{
    display: block;
    width: 300%;
    height: 300%;
    margin-left: -75px;
    margin-top: -520px;
    object-fit: contain;
    background-image: none; 
 }


    .enfant-grid-3 label img{
        width: 550%;
        height: 550%;
        margin-left: -110px;
        margin-top: -1105px;
    }

    
}












@media screen and (min-width:521px){

    .enfant-grid-1 label img{
        display: block;
        width: 100%;
        height: 100%;
        margin-left: -23px;
        margin-top: -398px;
        object-fit: contain;
        background-image: none;  
}


 #enfant-grid-2 label img{
    display: block;
    width: 100%;
    height: 100%;
    margin-left: -140px;
    margin-top: -185px;
    object-fit: contain;
    background-image: none; 
 }


    .enfant-grid-3 label img{
        width: 150%;
        height: 150%;
        margin-left: -8px;
        margin-top: -380px;
    }

    
}






@media screen and (min-width:780px){

    .enfant-grid-1 label img{
        display: block;
        width: 80%;
        height: 80%;
        margin-left: -23px;
        margin-top: -398px;
        object-fit: contain;
        background-image: none;  
}


 #enfant-grid-2 label img{
    display: block;
    width: 120%;
    height: 120%;
    margin-left: -20px;
    margin-top: -288px;
    object-fit: contain;
    background-image: none; 
 }


    .enfant-grid-3 label img{
        width: 150%;
        height: 150%;
        margin-left: -100px;
        margin-top: -400px;
    }

    
}










@media screen and (min-width:930px){

    .enfant-grid-1 label img{
        display: block;
        width: 50%;
        height: 50%;
        margin-left: -10px;
        margin-top: -330px;
        object-fit: contain;
        background-image: none;  
}


 #enfant-grid-2 label img{
    display: block;
    width: 120%;
    height: 120%;
    margin-left: -20px;
    margin-top: -288px;
    object-fit: contain;
    background-image: none; 
 }


    .enfant-grid-3 label img{
        width: 150%;
        height: 150%;
        margin-left: -100px;
        margin-top: -478px;
    }

    
}










@media screen and (min-width:1080px){

    .enfant-grid-1 label img{
        display: block;
        width: 50%;
        height: 50%;
        margin-left: -10px;
        margin-top: -300px;
        object-fit: contain;
        background-image: none;  
}


 #enfant-grid-2 label img{
    display: block;
    width: 120%;
    height: 120%;
    margin-left: -20px;
    margin-top: -288px;
    object-fit: contain;
    background-image: none; 
 }


    .enfant-grid-3 label img{
        width: 95%;
        height: 150%;
        margin-left: -100px;
        margin-top: -478px;
    }


  }






@media screen and (min-width:1680px){

    .enfant-grid-1 label img{
        display: block;
        width: 50%;
        height: 50%;
        margin-left: 80px;
        margin-top: -230px;
        object-fit: contain;
        background-image: none;  
}


 #enfant-grid-2 label img{
    display: block;
    width: 120%;
    height: 120%;
    margin-left: 25px;
    margin-top: 78px;
    object-fit: contain;
    background-image: none; 
 }


    .enfant-grid-3 label img{
        width: 95%;
        height: 95%;
        margin-left: -290px;
        margin-top: -250px;
    }    


  }







@media screen and (max-width:380px){
          .content a {
            padding: 15px;
            font-size:15px;
            background-color: #fff;
            border-radius: 3px;
            text-decoration: none;
            color: darkslategray;
            justify-content: none;
            font-weight: bolder;
            
        }


            .content a:hover {
            background-color: darkslategray;
            text-decoration: none;
            color: whitesmoke;
  
            
        }


        .content {
            position: relative;
            background-color: darkslategray;
            padding:20px;
            border-radius:10px;     
            margin-top: -159px;
            z-index: 100;
            font-size: 15px;
        }

        .content h2{
            padding-bottom: 35px;
            font-size: 15px;
            justify-content: NONE;
            text-align-last: none;
             
             font-stretch: condensed;
            
        }

        .content a{
            appearance: auto;
            margin-left: 0px;
            text-align-last: none;
        }

  }



@media screen and (max-width:380px){

footer{
    position: relative;
    clear: both;
    bottom: -434px;
    text-align: center;
    padding: 10px;
    padding-bottom: 50px;
    color: whitesmoke;
    z-index: -1;
} 
            
        }



/*
@media screen and (max-width:1080px){

          .content a {
            padding: 15px;
            
            border-radius: 3px;
            text-decoration: none;
            color: darkslategray;
             background-color: darkslategray;
            padding:20px;
            border-radius:10px; 
            justify-content: center;
            
        }


        .content {
            position: absolute;
            background-color: darkslategray;
            padding:20px;
            border-radius:10px;     
            padding-left: 20px;
            padding-right: 10px; 
            z-index: 200;

        }

        .content h2{
            padding-bottom: 25px;
            justify-content: center;
            text-align-last: center;
            
        }

        .content a{
            appearance: auto;
            margin-left: 20px;
            text-align-last: center;
        }

*/

  }

  /*----------*/