/* public/css/article_styles.css */

body {
    background-color: #f0f2f5; /* Couleur de fond générale pour la page si le contenu ne couvre pas tout */
    margin: 0;
    font-family: 'Helvetica Neue', Arial, sans-serif; /* Ou votre police de site */
}

.article-page-wrapper {
    /* Ce wrapper pourrait ne pas être nécessaire si le body gère le fond */
}

.article-hero-section {
    width: 100%;
    height: 45vh; /* Hauteur de la section héro. Ajustez selon vos besoins (ex: 300px, 400px) */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex; /* Permet de centrer le contenu si vous mettez du texte par-dessus l'image héro */
    align-items: flex-end; /* Aligner le contenu (si présent) en bas */
    position: relative; /* Pour un éventuel overlay sur l'image héro */
}

/* Optionnel: si vous voulez un léger assombrissement sur l'image héro pour améliorer la lisibilité du texte par-dessus */
.article-hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.15); /* Léger overlay noir */
    z-index: 1;
}


.article-container {
    max-width: 1000px; /* Largeur maximale du contenu de l'article */
    margin: -80px auto 40px auto; /* Marge négative pour remonter sur le héro, puis marge en bas */
                                 /* Ajustez -80px en fonction de la hauteur de votre héro et de combien vous voulez le chevauchement */
    background-color: #ffffff;
    padding: 30px 40px; /* Espacement interne */
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    position: relative; /* Pour s'assurer qu'il est au-dessus de l'overlay du héro */
    z-index: 2;
    box-sizing: border-box;
}

.article-title {
    font-size: 2.6rem; /* Taille du titre de l'article */
    font-weight: bold;
    color: #000000; /* Couleur du titre */
    margin-top: 0;
    margin-bottom: 10px;
    line-height: 1.2;
}

.article-date {
    font-size: 0.9rem;
    color: #7f8c8d; /* Couleur de la date */
    margin-bottom: 25px;
    display: block;
}

.article-separator {
    border: 0;
    height: 1px;
    background-color: #e0e0e0; /* Couleur du séparateur */
    margin-bottom: 30px;
}

.article-content {
    font-size: 1.1rem; /* Taille du texte principal */
    line-height: 1.75;
    color: #34495e; /* Couleur du texte principal */
}

/* Styles pour le contenu HTML généré (paragraphes, titres, images, etc. dans article.content) */
.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4 {
    color: #000000;
    margin-top: 1.8em;
    margin-bottom: 0.8em;
    line-height: 1.3;
}
.article-content h1 { font-size: 1.8em; }
.article-content h2 { font-size: 1.5em; }
.article-content h3 { font-size: 1.3em; }

.article-content p {
    margin-bottom: 1.2em;
    color: #000000;
}

.article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 20px 0; /* Espace au-dessus et en-dessous des images */
    display: block; /* Pour centrer avec margin: auto si besoin */
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.article-content a {
    color: #3498db; /* Couleur des liens */
    text-decoration: none;
}
.article-content a:hover {
    text-decoration: underline;
}

.article-content ul,
.article-content ol {
    margin-bottom: 1.2em;
    padding-left: 25px;
}

.article-content blockquote {
    border-left: 3px solid #bdc3c7;
    padding-left: 15px;
    margin-left: 0;
    font-style: italic;
    color: #555;
}

.article-content iframe { /* Pour les vidéos embarquées */
    max-width: 100%;
    border-radius: 6px;
    margin: 20px 0;
}

/* Style pour le bloc gris vide vu dans l'image (peut être une vidéo ou une image plus grande) */
.article-content .placeholder-block { /* Ajoutez cette classe à un div dans votre contenu si besoin */
    background-color: #e9ecef;
    min-height: 300px; /* Hauteur minimale */
    width: 100%;
    margin: 30px 0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #adb5bd;
    font-size: 1rem;
}


.article-back-link {
    display: inline-block;
    margin-top: 40px;
    font-size: 1rem;
    color: #3498db;
    text-decoration: none;
    transition: color 0.2s ease;
}
.article-back-link:hover {
    color: #2980b9;
    text-decoration: underline;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .article-container {
        margin: -60px auto 30px auto; /* Ajuster le chevauchement pour mobile */
        padding: 20px 25px;
    }
    .article-title {
        font-size: 2rem;
    }
    .article-content {
        font-size: 1rem;
        line-height: 1.7;
    }
}

@media (max-width: 480px) {
    .article-hero-section {
        height: 35vh; /* Moins de hauteur pour le héro sur très petits écrans */
    }
    .article-container {
        margin: -40px 15px 30px 15px; /* Moins de chevauchement et marges latérales */
        padding: 20px;
    }
    .article-title {
        font-size: 1.7rem;
    }
}