/*Louis Berthold 13.01.2025*/
.coin-haut-droit{
    height: 20vh;
    position: absolute;
    right: 25vw;
    top: 0;
}
/*pour avoir une couleurs par titres*/
#Cl-Bl{
    background-color: lightblue;
    border-radius: 8px;

}
#Cl-Vi{
    background-color: violet;
    border-radius: 8px;

}
#Cl-Or{
    background-color: orange;
    border-radius: 8px;

}
#Cl-Ja{
    background-color: yellow;
    border-radius: 8px;

}
/*représente le dive qui contient tout les articles (explication avec titres)*/
.usage-title{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
    gap: 1rem;

}
.usage-title article {
    height: 45vh;
    width: 40%;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
    
}
.usage-title article h2{
    width: 100%;
}
/*quand il est plus grand que 1100px pour que le main ne s'agrandi pas plus*/
@media screen and (max-width: 1100px) {
    .coin-haut-droit{
        height: 20vh;
        position: absolute;
        left: 70vw;
        top: 0;
    }
    .usage-title{
        flex-direction: column;
        align-items: center;
    }
    .usage-title article {
    height: auto;
    width: 70%;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
    
    }
    

}
/*pour les téléphones*/
@media screen and (max-width: 575.98px) {
    .coin-haut-droit{
        display: none;
    }
    .usage-title article {
    height: auto;
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
    
    }
}