/* corespond à la bannier blanche  */
.header {
background-color: white;
}

/* correspond à la couleur du body  */
body{
    background-color: #fedb27 ;
}



/* corespond au texte les meilleurs blagues sont les carambars */
.header-text{
    font-family: 'Montserrat';  /*police que j'ai choisi */
    font-style: italic;            
    color: rgb(0, 0, 0);
    margin-top: 30px;


}


/* pour custom le footer le contenair  */
.custom-footer {
    font-family: 'Montserrat';
    font-style: italic;
    background-color:#e30a7f;
    padding-top: 10px;
    margin-top: 10%;


}



/* pour custom limage eclaboussure1  */
/* .custom-eclaboussure1{
    position: absolute;
    left: 190px;
    top: 30px;

} */


/* pour custom limage eclaboussure 2 */

/* .custom-eclaboussure2{

    position: absolute;  
    transform: scaleX(-1); 
    right: 200px;
    top: 30px;

} */
/* correspond au  "texte Clique sur le bouton pour découvrir une blague!"!*/






.image-container {
    position: relative; /* Permet aux enfants position absolute de se baser sur lui */
    display: flex;       /* pour le container (flexbox)*/
    justify-content: center;
    align-items: center;
    margin-top: 50px;
}

/* pour faire commme une zstack a limage slider */
.overlay-content{
    position: absolute;
    bottom: 40%; 
    left: 26%;

}


/* les image en superposition plus le texte et button*/

.custom-text{
    position: relative;
    font-family: 'Montserrat';
    font-style: italic;
    color: black;
    margin-right: 20%;
    top: 180px;



}

.btn{
    position: relative;
    margin-right: 20%;
    top: 180px;


}


/* grosse bande blanche */
.custom-slider {
    width: 1100px; /* Ajuste l’image du slider à 100% du conteneur */
    height: auto;

}


/* limage de la fille qui rit */
.custom-fille {
    position: absolute; /* Permet de placer l’image de la personne sur le slider */
    padding-right: 50px;
    width: 580px; /* Ajuste la taille */
    bottom: 0;    /* se mets en bas rapport au slider*/
    left: 51%; /* Modifie la position horizontale de la pers - % par ce que le parent et absolut donc % sinon px*/
    z-index: 2; /* S’assure que l’image de la personne soit devant */
}

/* fin des image en superposition */


/* correpond au text du footer */
.copyright-text{
    font-family: 'Montserrat';
    font-style: italic;
    color: black;
    padding-top: 170px;
    
    
}

/*le text pour votre santer évité de ....etc du footer */
p{
    font-family: 'Montserrat';
    font-style: italic;
    color: white;
}

/* les liens */
.custom-links {
    font-family: 'Montserrat';
    font-style: italic;
    color: white;
    display: flex; 
    justify-content: center; /* Centre horizontalement */
    list-style: none; /* Enlève les puces */
    padding: 0; /* Supprime le padding par défaut */
    gap: 5px; /* Espacement entre les liens */
}

/* que les liens */
a{
    color: white;
}

/* lorque je psse la souris sur les liens */
a:hover{
    color: #fedb27;
}



/* corespond a toutes au image de fond comme le carambar ou l 'étoile*/
.custum-etoile{
    position: absolute;
    height: 10%;
    left: 650px;
    top: 10%;

}


/* .custom-carambar{

    position: absolute;
    height: 200px;
    width: 200px;
    top: 850px;
    left: 600px;

} */



#jokeContent {
    position: absolute;
    font-size: 15px;
    color: #161616; 
    padding-right: 25%;
    top: 50%;
}


/* <div class="container">
    <div class="row">
        <div class="col-md-4 bg-primary text-white text-center p-3">Colonne 1</div>
        <div class="col-md-4 bg-secondary text-white text-center p-3">Colonne 2</div>
        <div class="col-md-4 bg-success text-white text-center p-3">Colonne 3</div>
    </div>
</div> */



/* justify-content-center : Centre la carte horizontalement, donc elle sera alignée au centre de la page de gauche à droite.
align-items-center : Centre la carte verticalement, donc elle sera également alignée au centre de la page du haut vers le bas. */