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


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


img {
    width: 200px;
}


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

/*J'ai du faire un ID imggauche pour que l'image qui se trouve à gaucge soie 
aligné avec le texte qui se trouve du côté gauche*/
#imggauche {
    margin-right: 50px;
}

/*Pour l'instant l'ID imgmedia ne sert à rien, donc j'ai mis qu'on voulait pas 
la voir, mais elle servira pour les mediaqueries pour qu'il y est  à chaque 
fois : un texte et en dessous une image, etc...*/
#imgmedia {
    display: none;
}

/*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;
}

/*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 775px*/
@media screen and (max-width: 775px) {

    /*La classe img et l'ID imgmedia aura une taille de 50% et j'ai mis display flex pour qu'on puisse voir l'ID*/
    .img,
    #imgmedia {
        width: 45%;
        margin: 25px;
        display: flex;
        justify-content: center;
    }

    #imggauche {
        display: none;
    }

    article {
        flex-direction: column;
        margin: 18px;
        font-size: small;
    }


}