@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@500&display=swap');

#acceuil-div {
    position: relative;
}

#acceuil-image {

    height: 11em;
}

#acceuil-texte {
    position: absolute;
    font-size: 0.9rem;
    top: 25%;
    left: 43%;
    color: #c62523;
    font-family: 'Lora', serif;
}

#texte {
    text-align: center;
}

#second-sec {
    justify-content: center;
}

#button-div {
    display: flex;
    justify-content: space-around;
}
#button-div .btn{
    margin: 10px;
}

#video-div {
    display: flex;
    justify-content: center;
}

#video {
    width: 100%;
    max-width: 1084px;
}

#third-sec {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;

}

.div-categ h3 {
    color: #c62523;
}

@media (max-width: 335px) {

    #acceuil-texte {
        font-size: 0.7rem;
        top: 25%;
        left: 43%;
    }

    #button-div .btn{
        font-size: 0.7em;
        margin: 10px;
    }
}

@media (min-width: 390px) {
    #acceuil-image {
        height: 13em;
    }
    
    #acceuil-texte {
        top: 17%;
        left: 40%;
        font-size: 1.1rem;
    }
}
@media (min-width: 505px) {

    #acceuil-texte {
        font-size: 1.3rem;
        top: 11%;
        left: 45%;
    }

    #acceuil-image {

        height: 13em;
    }
}

@media (min-width: 610px) {

    #acceuil-texte {
        font-size: 1.7rem;
        top: 11%;
        left: 41%;
    }

    #acceuil-image {

        height: 17em;
    }
}


@media (min-width: 740px) {

    #acceuil-texte {
        font-size: 2.1rem;
        top: 17%;
        left: 41%;
    }

    #acceuil-image {

        height: 23em;
    }
}


/*
* Extra utilities
*/

@media (min-width: 920px) {

    #acceuil-image {
        height: 29rem;
    }

    #acceuil-texte {
        top: 15%;
        left: 39%;
        font-size: 2.7rem;
    }


    .bouton {
        width: 11em;
        height: 5em;
    }

    .div-categ {
        width: 25rem;
        text-align: center;
    }


}

@media (min-width: 1205px) {

    #acceuil-image {
        height: 33rem;
    }

    #acceuil-texte {
        top: 12%;
        left: 43%;
        font-size: 3.3rem;
    }

}

@media (min-width: 1530px) {

    #acceuil-image {
        height: 39rem;
    }

    #acceuil-texte {
        top: 11%;
        left: 43%;
        font-size: 4.1rem;
    }

}

/* tablette*/
/* 
@media (max-width: 1400px) {

    #acceuil-image {
        height: 45em;
    }

    #acceuil-texte {
        position: absolute;
        top: 9%;
        left: 51%;
        font-size: 5.3em;
        font-family: 'Lora', serif;
    }

    #video {
        width: 1583px;
    }

    .bouton {
        width: 11em;
        height: 4em;
        font-size: 2em;
    }

   

    .div-categ {
        width: 35rem;
        text-align: center;
    }

} */