/* Container principal de l'article */
.article-container {
    width: 80%;
    max-width: 900px;
    margin: 40px auto;
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Titre de l'article */
.article-container h1, .sous-article h3 {
    font-size: 32px;
    color: #333;
    font-weight: bold;
    margin-bottom: 8px;
    line-height: 1.4;
}

/* Image principale de l'article */
.article-container img, .sous-article img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 5px; /* Réduire l'espace sous l'image pour rapprocher la description */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Description de la photo (ajouté après chaque image) */
.description-photo {
    font-size: 14px; /* Taille plus petite */
    font-weight: normal; /* Pas en gras */
    color: #555; /* Couleur légèrement grise */
    margin-top: 5px; /* Petit espace entre l'image et la description */
    margin-bottom: 20px; /* Ajouter un petit espace en bas de la description */
    line-height: 1.6; /* Espacement entre les lignes pour plus de lisibilité */
}

/* Description de la photo dans les sous-articles */
.sous-article .description-photo {
    font-size: 14px; /* Taille plus petite */
    font-weight: normal; /* Pas en gras */
    color: #555; /* Couleur légèrement grise */
    margin-top: 5px; /* Petit espace entre l'image et la description */
    margin-bottom: 20px; /* Ajouter un petit espace en bas de la description */
    line-height: 1.6; /* Espacement entre les lignes pour plus de lisibilité */
}

/* Informations supplémentaires : catégorie et journaliste */
.article-container .categorie,
.article-container .journaliste,
.sous-article .categorie,
.sous-article .journaliste {
    font-size: 14px;
    color: #555;
    margin-bottom: 10px;
}

/* Réduire l'espace sous l'image et remonter le texte du journaliste */
.article-container .journaliste, .sous-article .journaliste {
    margin-top: -10px;
    margin-bottom: 10px;
}

/* Texte de l'article */
.article-texte p, .sous-article p {
    font-size: 18px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 20px;
}

/* Style pour les paragraphes dans l'article */
.article-texte p + p, .sous-article p + p {
    margin-top: 20px;
}

/* Style des liens dans le texte de l'article */
.article-texte a, .sous-article a {
    color: #007bff;
    text-decoration: underline;
    font-weight: bold;
}

.article-texte a:hover, .sous-article a:hover {
    color: #0056b3;
    text-decoration: none;
}

/* Style des dates */
.article-container .date, .sous-article .date {
    font-size: 14px;
    color: #888;
    margin-bottom: 5px;
    font-style: italic;
}

.article-texte iframe, .sous-article iframe {
    margin: 20px 0;
    border-radius: 8px;
    border: 1px solid #ddd;
}

.article-texte blockquote.twitter-tweet, .sous-article blockquote.twitter-tweet {
    margin: 20px 0;
}

/* Section des sous-articles */
.sous-article {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ddd;
}

/* Section du journaliste centrée sous la photo de l'article */
.journaliste-info {
    display: flex;
    flex-direction: column; /* Place les éléments verticalement */
    align-items: center; /* Centre horizontalement */
    margin-top: 10px; /* Ajoute un peu d'espace avec l'image de l'article */
}

.journaliste-info img.photo-profil {
    width: 50px; /* Taille plus petite */
    height: 50px; /* Taille plus petite */
    border-radius: 50%; /* Cercle parfait */
    border: 2px solid #ddd; /* Légère bordure autour de l'image */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Ombre subtile */
    margin-bottom: 5px; /* Espace entre l'image et le nom */
}

.journaliste-info p.nom-journaliste {
    font-size: 14px; /* Taille plus petite */
    color: #555; /* Couleur discrète */
    font-weight: 500; /* Moins prononcé que bold */
    margin: 0;
    text-align: center; /* Aligne le texte au centre */
}

/* Footer spécifique à la page d'article */
footer {
    background-color: #181733;
    text-align: center;
    padding: 20px 0;
    color: #ecf0f1;
}

footer p {
    margin: 0;
}

/* Media Queries pour les petits écrans */
@media (max-width: 768px) {
    .article-container {
        width: 90%;
    }

    .article-container h1, .sous-article h3 {
        font-size: 26px;
    }

    .article-texte p, .sous-article p {
        font-size: 16px;
    }

    .article-texte p + p, .sous-article p + p {
        margin-top: 15px;
    }
}