/* Cette section centre le contenu de l'article, simulant l'ancien tableau */

/* --- Styles de Base (Typographie et Couleurs) --- */
body {
    color: #000000;  
    font-family: Verdana, sans-serif;
}

/* Appliquer les styles communs aux paragraphes, y compris pour les sélecteurs plus spécifiques si non surchargés */
p, .dim, .article-content p { 
    font-family: Verdana, sans-serif;
    font-size: 12px;  
    color: #666666;
}

/* Styles des liens (Base) */
a {  
    font-family: Verdana, sans-serif;
    font-size: 12px;  
    color: #CC6633;  
    text-decoration: none;
}

/* Styles des liens (Hover) */
a:hover {  
    color: #FDC29B;
}

/* --- Structure et Centrage Général --- */
.content-container {
    max-width: 47%; /* Largeur de 47% comme spécifié initialement */
    margin: 0 auto; /* Centre le bloc horizontalement */
    padding-top: 20px;
    padding-bottom: 20px;
}

/* --- En-tête (Nom du Journal & Date) --- */
.article-header p {
    text-align: center; /* Clé pour centrer le texte */
    font-weight: bold;
    margin-bottom: 2em;
}

/* --- 🖼️ Gestion du Logo du Journal --- */
.journal-logo-container {
    text-align: center;
    margin-bottom: 1em;
}
.journal-logo {
    max-width: 80%; /* Limite la taille du logo sur PC */
    height: auto;
    display: inline-block;
}

/* --- Image de Couverture de l'Article --- */
.article-image-cover,
.article-image-scan { /* Ajout de la classe scan pour un ciblage PC/Mobile cohérent */
    text-align: center;
    margin-bottom: 2em;
}

.article-image-cover img,
.article-image-scan img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;  
    height: auto;
}

/* --- Justification du Texte --- */
.text-section p {
    text-align: justify;  
    line-height: 1.6; /* Améliore la lisibilité des textes justifiés */
    margin-bottom: 1.5em;  
}

/* --- Titres H2 --- */
h2 {
    margin-top: 3em;
    margin-bottom: 1em;
    font-size: 14px;
    font-weight: bold;
    text-align: left;
    color: #000000;
}

/* --- Galerie d'Images --- */
.gallery {
    margin-top: 3em;
}
.image-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}
.image-row img {
    width: 49%;  
    height: auto;
    display: block;
}

/* --- ⬆️ Lien de Retour en Haut (Triangle ▲) --- */
.return-to-top {
    text-align: center;
    margin-top: 3em;
    padding-top: 1em;
}

.return-to-top a {
    font-size: 20px;
    font-weight: bold;
    color: #CC6633;
    text-decoration: none;
    transition: color 0.3s;
}

.return-to-top a:hover {
    color: #FDC29B;
}

/* ======================================================= */
/* 📱 RESPONSIVE DESIGN (Max 768px) - BLOC UNIQUE CONSOLIDÉ */
/* ======================================================= */
@media (max-width: 768px) {  
    
    /* 1. CONTENEUR PRINCIPAL PLEIN ÉCRAN */
    .content-container {
        max-width: 95%; 
        padding-left: 10px;
        padding-right: 10px;
        /* Cache tout débordement horizontal non désiré sur l'article */
        overflow-x: hidden; 
    }

    /* 2. ÉLÉMENTS D'ARTICLE (TEXTE ET CONTENU) */
    #blog-article-content {
        /* Assure que le contenu principal est caché horizontalement */
        overflow-x: hidden !important; 
    }

    /* 3. IMAGES DANS L'EN-TÊTE ET LOGOS (Protection des petits logos) */
    .article-header img,
    .article-header a img {
        height: auto;
        /* Retire max-width: 100% de la règle générale pour les logos */
    }

    /* NOUVEAU: Cible le logo/bandeau et limite sa taille pour ne pas l'étirer */
    .article-logo-bandeau img {
        max-width: 70%; 
        height: auto;
    }
    
    /* 4. IMAGES D'ARTICLE ET SCAN (Adaptation et possibilité de zoom) */
    .article-image-cover img,
    .article-image-scan img { /* Cible les images de scan et d'article */
        max-width: 100%; /* L'image s'adapte à la largeur disponible (95% du mobile) */
        width: auto;
        min-width: unset; 
    }

    /* 5. GESTION DES GALERIES SUR MOBILE */
    .image-row {
        flex-direction: column; /* Les images s'empilent */
    }
    .image-row img {
        width: 100%; /* Chaque image prend toute la largeur */
        margin-bottom: 10px;
    }
}