/* page créée par Arthur Toffel / 18-JANVIER-2024*/


article {
    display: flex;
    margin: 50px;
    align-items: center;
    text-align: justify;
    width: 90%;

}


.img {
    margin-left: 50px;
    margin-right: 50px;
}

/*J'ai du faire une classe imggauche pour que les images qui se trouvent à gaucge soient 
alignées avec le texte qui se trouve du côté gauche*/
.imggauche {
    margin-right: 50px;
}

img {
    width: 110%;
}

/*La classe container sert à que la barre de navigation soie sur la gauche et les articles sur la droite*/
.container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;

}


hr {
    border: 1px solid #999;
    margin: 20px;
    width: 90%;

}

h2 {
    margin-left: 50px;
}

/*Pour la version sur les plus petits écrans ou sur mobile, j'ai fait un mediaquerie qui 
s'appliquera si la largeur fait moins de 1000px*/
@media screen and (max-width: 1000px) {

    /*L'image s'enleve*/
    img {
        display: none;
    }

    /*Les articles se mettent en colonne*/
    article {
        flex-direction: column;
        margin: 18px;
        font-size: small;

    }

    h2 {
        font-size: 20px;
    }

}