.main-content{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

/* static/css/content_style.css */

/* --- Styles généraux pour la Sidebar (s'appliquent au conteneur <aside>) --- */
aside.col-md-3 {
    background-color: #ffffff; /* Fond blanc comme sur l'index*/
    padding: 20px; /* Padding interne pour l'espacement*/
    border-radius: 8px; /* Coins légèrement arrondis pour la boîte*/
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); /* Légère ombre pour donner de la profondeur*/
    margin-bottom: 30px; /* Espace en dessous de la sidebar */
    border: 1px solid #e0e0e0; /* Bordure subtile*/
}

/* --- Styles pour les titres de section de la sidebar (h4) --- */
aside.col-md-3 h4 {
    color: #333333; /* Couleur de texte gris foncé, comme sur l'index*/
    font-size: 1.2rem; /* Ajuster la taille de police si nécessaire */
    font-weight: 600; /* Plus gras*/
    margin-bottom: 15px; /* Espace sous le titre */
    padding-bottom: 10px; /* Padding pour la ligne de séparation */
    border-bottom: 1px solid #eeeeee; /* Ligne de séparation*/
}

/* --- Styles pour la liste des catégories (ul.list-group) --- */
aside.col-md-3 .list-group {
    margin-bottom: 20px; /* Espace sous la liste des catégories */
}

aside.col-md-3 .list-group-item {
    border: none; /* Supprime les bordures individuelles*/
    padding: 8px 15px; /* Padding interne pour chaque élément*/
    margin-bottom: 3px; /* Un petit espace entre les éléments si désiré, sinon 0px */
    border-radius: 5px; /* Légers coins arrondis pour les éléments, même non actifs */
    background-color: transparent; /* S'assurer qu'il n'y a pas de fond gris par défaut */
    transition: background-color 0.2s ease, color 0.2s ease; /* Transition douce pour le survol */
}

aside.col-md-3 .list-group-item a {
    color: #555555; /* Couleur de texte gris moyen pour les liens non actifs*/
    text-decoration: none; /* Pas de soulignement par défaut */
    display: block; /* Le lien remplit tout l'espace de l'élément de liste */
}

aside.col-md-3 .list-group-item:hover:not(.active) { /* Appliquer le hover sauf si l'élément est actif */
    background-color: #f0f0f0; /* Fond très léger au survol */
    color: #333333; /* Texte légèrement plus foncé au survol */
}

aside.col-md-3 .list-group-item a:hover:not(.active) {
    color: #333333; /* S'assurer que le lien change de couleur au survol */
}

/* --- Style de l'élément de catégorie actif ("Toutes les catégories") --- */
aside.col-md-3 .list-group-item.active.signal-actu-filter-active {
    background-color: #dc3545; /* Rouge vif comme sur l'index*/
    color: #ffffff; /* Texte blanc*/
    font-weight: bold; /* Texte en gras*/
    border-color: #dc3545; /* Bordure de la même couleur */
    border-radius: 5px; /* Coins arrondis pour l'élément actif*/
}

aside.col-md-3 .list-group-item.active.signal-actu-filter-active a {
    color: #ffffff; /* S'assurer que le lien est blanc quand l'élément est actif */
    font-weight: bold; /* S'assurer que le lien est gras */
}


/* --- Styles pour le formulaire de recherche (input et bouton) --- */
aside.col-md-3 .input-group .form-control {
    border-radius: 5px 0 0 5px; /* Coins arrondis seulement à gauche*/
    border-color: #ced4da;
    box-shadow: none; /* Supprime l'ombre Bootstrap par défaut au focus */
}

aside.col-md-3 .input-group .form-control:focus {
    border-color: #80bdff; /* Couleur de bordure au focus par défaut de Bootstrap */
    box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25); /* Ombre au focus par défaut */
}

aside.col-md-3 .input-group .btn-outline-secondary {
    border-radius: 0 5px 5px 0; /* Coins arrondis seulement à droite*/
    border-color: #ced4da;
    color: #495057; /* Couleur du texte du bouton */
    background-color: #f8f9fa; /* Fond légèrement gris pour le bouton */
}

aside.col-md-3 .input-group .btn-outline-secondary:hover {
    background-color: #e2e6ea; /* Fond plus foncé au survol */
    color: #343a40; /* Texte plus foncé au survol */
}

/* --- Ajustements responsifs pour la sidebar --- */
@media (max-width: 767.98px) { /* Pour les écrans plus petits que md */
    aside.col-md-3 {
        padding: 15px;
        margin-top: 20px; /* Espacement au-dessus si la sidebar passe au-dessus du contenu principal */
    }
}