/* ARTICLE — VERSION OPTIMISÉE */
/* Conteneur global */
.Article {
  width: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column; /* <-- empile les articles */
  gap: 20px; /* espace propre entre les articles */
  align-items: center; /* centre horizontalement */
}

/* Carte article */
article {
  width: 100%;
  max-width: 800px;
  background: #0a0f2d; /* bleu nuit profond */
  border: 1px solid rgba(255, 0, 255, 0.2); /* léger fuchsia */
  box-shadow: 0 0 15px rgba(255, 0, 255, 0.15);
  color: #e4e4ff;
  padding: 20px;
  border-radius: 20px;
  line-height: 1.6;
}


/* Header de l'article */
.articleHeader{
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
}

/* Image */
.imgArticle{
    width: 280px;
    height: auto;
    aspect-ratio: 14/9; /* optionnel mais propre */
    object-fit: cover;
}


/* Contenu texte */
.contenueArticle h3{
    font-size: 1.4rem;
    margin-bottom: 5px;
}

.contenueArticle p{
    margin: 3px 0;
    font-size: 1rem;
}

.contenueDeLarticle{
    margin-top: 15px;
    font-size: 1.1rem;
    line-height: 1.6;
    text-align: justify;
}

/* RESPONSIVE */
@media (max-width: 640px){

    .Article{
        padding: 10px;
    }

    article{
        padding: 15px;
    }

    .articleHeader{
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .imgArticle{
        width: 100%;
        height: auto !important;
        max-width: 100%;
        object-fit: cover;
        display: block;
    }

    .contenueArticle h3{
        font-size: 1.2rem;
    }

    .contenueArticle p{
        font-size: 0.95rem;
    }

    .contenueDeLarticle{
        font-size: 1rem;
    }
}