/* =============================================================== */
/* ============== STYLES POUR LE CONTENU DES ARTICLES ============ */
/* =============================================================== */

/* Conteneur général pour le contenu d'un article (actualité, biblio, etc.) */
.article-contenu {
    max-width: 800px;
    /* Limite la largeur du texte pour une meilleure lisibilité */
    margin: 40px auto;
    /* Centre l'article et ajoute de l'espace en haut/bas. Fonctionnera partout. */
    padding: 0 20px;
    /* Ajoute un peu d'espace sur les côtés */
}

/* Style pour la date de publication */
.article-contenu .date-publication {
    font-style: italic;
    color: #666;
    /* Couleur grise pour la rendre plus discrète */
    font-size: 0.9em;
    margin-bottom: 30px;
    /* Espace sous la date */
}

/* Style pour l'image principale de l'article */
.article-contenu img {
    max-width: 100%;
    /* S'assure que l'image ne dépasse jamais de son conteneur */
    height: auto;
    /* Garde les proportions de l'image */
    border-radius: 8px;
    /* Ajoute des coins arrondis */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    /* Ajoute une ombre subtile */
    margin-bottom: 30px;
    /* Espace sous l'image */
}

/* Style pour les paragraphes de l'article */
.article-contenu p {
    line-height: 1.7;
    /* Augmente l'interligne pour un meilleur confort de lecture */
    margin-bottom: 20px;
    /* Espace entre les paragraphes */
    text-align: justify;
    /* Justifie le texte */
}

/* Style pour les sous-titres (H3) */
.article-contenu h3 {
    font-size: 1.5em;
    color: #004a99;
    /* Couleur bleue du thème pour les titres */
    margin-top: 40px;
    /* Espace au-dessus du sous-titre pour séparer les sections */
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #a0c1e0;
    /* Ligne de séparation sous le titre */
}

/* Style pour les listes à puces */
.article-contenu ul {
    list-style-type: disc;
    /* Style de puce classique */
    padding-left: 40px;
    /* Indentation de la liste */
    margin-bottom: 20px;
}

.article-contenu li {
    line-height: 1.6;
    margin-bottom: 10px;
    /* Espace entre chaque élément de la liste */
}

/* Style pour le texte en gras (strong) pour le faire ressortir */
.article-contenu strong {
    color: #1462b6;
    /* Utilise la couleur "highlight" de votre charte */
}

/* =============================================================== */
/* ======== MISE EN PAGE 2 COLONNES POUR LA PAGE ACTUALITÉS ====== */
/* =============================================================== */

/* Le conteneur principal qui active la disposition en colonnes (Flexbox) */
.content-wrapper {
    /* On s'assure qu'il sert de référence pour la sidebar */
    position: relative;
    
    /* On lui donne une largeur max pour qu'il s'aligne avec le reste */
    max-width: 1200px; /* Largeur max de l'ensemble */
    margin: 0 auto; /* Centre le conteneur global */
}

/* La colonne principale du contenu (article récent) */
.main-content {
    /* L'article se comportera normalement,
       et c'est .article-contenu (avec son max-width: 800px et margin: auto)
       qui va se centrer parfaitement au milieu. */
       
    /* On ajoute de la marge à droite pour laisser de la place à la sidebar
       afin que le texte ne passe jamais en dessous. */
    margin-right: auto; /* Largeur de la sidebar + 40px de gap */
}

/* La colonne latérale (liste des archives) */
.sidebar {
    /* ON LA SORT COMPLÈTEMENT DU FLUX DE LA PAGE */
    position: fixed; 
    
    /* ATTENTION : 'top: 180px' est une estimation.
       Ajustez cette valeur (ex: 200px ou 170px) pour que 
       la boîte "Archives" se place juste sous votre bannière. */
    top: 300px;   
    
    /* On la colle à 50px du bord droit de la fenêtre */
    right: 50px; 
    
    /* On lui donne une largeur fixe */
    width: 300px;
    
    /* Vos styles (ils sont parfaits) */
    background-color: #f9f9f9; 
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #eee;
    height: fit-content; 
    z-index: 10; /* S'assure qu'elle est au-dessus du contenu */
}
.sidebar h2 {
    margin-top: 0;
    border-bottom: 2px solid #a0c1e0;
    padding-bottom: 10px;
}

.sidebar ul {
    list-style-type: none;
    padding-left: 0;
}

.sidebar li {
    margin-bottom: 10px;
}

.sidebar a {
    text-decoration: none;
    color: #004a99;
}

.sidebar a:hover {
    text-decoration: underline;
}


/* --- Adaptation pour les écrans mobiles --- */
/* Pour les écrans de moins de 768px de large, on repasse sur une seule colonne */
@media (max-width: 1200px) { 
    .sidebar {
        /* On annule la position fixe */
        position: static;
        
        /* La sidebar redevient un bloc normal et se place
           automatiquement SOUS l'article */
        width: 100%;
        max-width: 800px; /* On lui donne la même largeur que l'article */
        margin: 40px auto; /* On la centre (comme l'article) */
    }
}
/* =============================================================== */
/* ============== STYLE POUR LE PDF INTÉGRÉ ====================== */
/* =============================================================== */

/* Conteneur pour le PDF intégré */
.pdf-embed {
    width: 100%; /* Prend toute la largeur de la colonne de contenu */
    height: 800px; /* Hauteur de 800px. Vous pouvez ajuster ! */
    border: 1px solid #ddd; /* Ajoute une bordure discrète */
    border-radius: 4px; /* Coins arrondis */
    margin-top: 10px; /* Espace avec le titre du dessus */
}

/* Style pour le message de secours (si le PDF ne s'affiche pas) */
.pdf-embed p {
    padding: 20px;
    text-align: center;
    font-style: italic;
    background-color: #f9f9f9;
    border: 1px dashed #ccc;
    border-radius: 4px;
}