body {
        font-family: 'Roboto','Arial', sans-serif;
    }
    
    .navbar-brand img {
        height: 40px;
    }

    /* Hero Section */
    .hero-section {
        background-color: #f8f9fa;
        padding: 80px 0;
        text-align: left;
    }
    .hero-section h1 {
        font-size: 3.5rem;
        font-weight: bold;
        color: #343a40;
        margin-bottom: 10px;
    }
    .hero-section p {
        font-size: 1.25rem;
        color: #6c757d;
        margin-bottom: 30px;
    }
    .hero-section .container {
        max-width: 960px;
    }

    /* Bouton rouge Signal Actu */
    .signal-actu-red-btn {
        background-color: #dc3545;
        border-color: #dc3545;
        color: white;
        font-weight: bold;
        padding: 10px 30px;
        border-radius: 5px;
        transition: background-color 0.3s ease, border-color 0.3s ease;
    }
    .signal-actu-red-btn:hover {
        background-color: #c82333;
        border-color: #bd2130;
        color: white;
    }
    .signal-actu-red-btn:focus, .signal-actu-red-btn:active {
        box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
    }

    /* Styles pour les filtres actifs */
    .list-group-item.active.signal-actu-filter-active {
        background-color: #dc3545;
        border-color: #dc3545;
        color: white;
    }
    .btn.btn-primary.signal-actu-filter-active {
        background-color: #dc3545;
        border-color: #dc3545;
        color: white;
    }

    /* Styles pour les cartes de contenu */
    .content-card {
        min-height: 400px;
    }
    .content-card img {
        height: 200px;
        object-fit: cover;
    }

    /* Styles pour les indicateurs de chargement HTMX */
    .htmx-indicator {
        display: none;
        opacity: 0;
        transition: opacity 200ms ease-in;
    }
    .htmx-request .htmx-indicator {
        display: inline-block;
        opacity: 1;
    }
    /* Styles de menu du footer, etc. */
    .sub-menu-item .nav-link{
        color: #000;
        background-color: white;
    }
    .sub-menu-item:hover{
        background-color: #ff0000;
        color: aliceblue;
    }
    /* AJOUTÉ : Styles pour le Loader */
    .loader-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.8); /* Fond semi-transparent blanc */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 9999; /* S'assure que le loader est au-dessus de tout */
        transition: opacity 0.3s ease-in-out; /* Pour une transition douce */
    }

    .loader-spinner {
        border: 8px solid #f3f3f3; /* Gris clair */
        border-top: 8px solid #dc3545; /* Rouge Signal Actu */
        border-radius: 50%;
        width: 60px;
        height: 60px;
        animation: spin 1s linear infinite; /* Animation de rotation */
    }

    .loader-text {
        margin-top: 15px;
        color: #333;
        font-size: 1.2rem;
        font-weight: bold;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    /* Styles HTMX (vous avez déjà ces styles, mais je les remets pour le contexte) */
    .htmx-indicator {
        display: none;
        opacity: 0;
        transition: opacity 200ms ease-in;
    }
    .htmx-request .htmx-indicator {
        display: flex; /* Change to flex to use flexbox for centering */
        opacity: 1;
    }

    /* General Styles for the entire content section (these seem to be copied from content_style.css into base.html <style>) */
    /* It's generally better to keep these in content_style.css and link it in the child template.
        However, if you want them globally available, keeping them here is fine.
        I'll keep them as they are in your provided base.html to avoid removing code you explicitly put there. */
    body {
        background-color: #f8f9fa; /* Light background for the whole page */
        color: #343a40; /* Default text color */
        font-family: 'Poppins', sans-serif; /* Example: Use a modern font */
    }

    h1, h2, h3, h4, h5, h6 {
        color: #212529;
        font-weight: 700; /* Bold headings */
    }

    a {
        color: #dc3545; /* Signal Actu red for links */
        text-decoration: none;
        transition: color 0.3s ease;
    }

    a:hover {
        color: #c82333; /* Darker red on hover */
        text-decoration: underline;
    }

    .btn-danger {
        background-color: #dc3545;
        border-color: #dc3545;
        transition: background-color 0.3s ease, border-color 0.3s ease;
    }

    .btn-danger:hover {
        background-color: #c82333;
        border-color: #bd2130;
    }

    .signal-actu-filter-active {
        background-color: #dc3545 !important;
        border-color: #dc3545 !important;
        color: white !important;
    }

    /* Header Section (Signal Actu Intro) */
    .header {
        background: linear-gradient(to right, #ffffff, #f0f2f5); /* Light gradient background */
        padding: 50px 0;
        border-radius: 10px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        margin-top: 2rem !important; /* Ensure margin from navbar */
    }

    .header h3 {
        font-size: 2.8rem; /* Larger heading */
        font-weight: 900; /* Extra bold */
        color: #dc3545; /* Signal Actu red */
        margin-bottom: 20px;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    }

    .header p {
        font-size: 1.15rem;
        line-height: 1.7;
        color: #555;
        margin-bottom: 30px;
    }

    /* Carrousel Styles (latest-news section in header) */
    .latest-news .carousel {
        max-width: 100%;
        height: 400px; /* Increased height for impact */
        overflow: hidden;
        border-radius: 12px; /* More rounded corners */
        box-shadow: 0 8px 30px rgba(0,0,0,0.2); /* More prominent shadow */
        position: relative;
    }

    .latest-news .carousel-item {
        height: 400px; /* Matches carousel height */
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #e9ecef; /* Fallback background */
    }

    .latest-news .carousel-img {
        height: 100%;
        object-fit: cover;
        object-position: center;
        filter: brightness(0.8); /* Slightly darkens image for better text contrast */
        transition: filter 0.5s ease-in-out;
    }

    .latest-news .carousel-item:hover .carousel-img {
        filter: brightness(0.9); /* Lighter on hover */
    }

    .latest-news .carousel-caption {
        background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2)); /* Gradient background */
        padding: 30px; /* More padding */
        border-radius: 0 0 12px 12px; /* Rounded only at bottom */
        position: absolute;
        bottom: 0; /* Sticks to the bottom */
        left: 0; /* Extends full width */
        right: 0; /* Extends full width */
        width: 100%; /* Ensure full width */
        text-align: left;
        color: white;
    }

    .latest-news .carousel-caption .badge {
        font-size: 0.9em;
        padding: 0.6em 1.2em;
        border-radius: 25px; /* Pill shape */
        background-color: #dc3545 !important;
        margin-bottom: 10px;
        display: inline-block; /* For proper margin */
    }

    .latest-news .carousel-caption .carousel-title {
        font-size: 1.8rem; /* Larger title */
        font-weight: bold;
        margin-bottom: 10px;
        line-height: 1.3;
        text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    }

    .latest-news .carousel-caption .carousel-title a {
        color: white; /* Title link in white */
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .latest-news .carousel-caption .carousel-title a:hover {
        color: #ffd700; /* Gold on hover for titles */
        text-decoration: underline;
    }

    .latest-news .carousel-caption .carousel-text {
        font-size: 1rem;
        color: #e0e0e0;
        margin-bottom: 15px;
        line-height: 1.5;
    }

    .latest-news .carousel-caption .btn-light {
        background-color: rgba(255, 255, 255, 0.2); /* Semi-transparent button */
        border-color: rgba(255, 255, 255, 0.3);
        color: white;
        font-weight: bold;
        transition: background-color 0.3s ease, border-color 0.3s ease;
    }

    .latest-news .carousel-caption .btn-light:hover {
        background-color: white;
        color: #dc3545;
    }

    /* Carousel controls and indicators */
    .latest-news .carousel-control-prev,
    .latest-news .carousel-control-next {
        width: 15%; /* Larger click area for controls */
        opacity: 0.7;
        transition: opacity 0.3s ease;
    }

    .latest-news .carousel-control-prev:hover,
    .latest-news .carousel-control-next:hover {
        opacity: 1;
    }

    .latest-news .carousel-indicators button {
        background-color: rgba(255, 255, 255, 0.7);
        border: 1px solid rgba(255, 255, 255, 0.8);
        width: 12px;
        height: 12px;
        border-radius: 50%;
        margin: 0 6px;
        transition: all 0.3s ease;
    }

    .latest-news .carousel-indicators button.active {
        background-color: #dc3545; /* Signal Actu red for active indicator */
        border-color: #dc3545;
        transform: scale(1.2); /* Slightly larger when active */
    }

    /* Main Content Section (Dernières nouvelles) */
    .container.my-5 {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    h2.text-start {
        font-size: 2rem;
        margin-bottom: 30px;
        border-bottom: 3px solid #dc3545; /* Red underline for section title */
        padding-bottom: 10px;
        display: inline-block; /* To make border-bottom apply only to text width */
    }

    /* Sidebar Filters */
    aside.col-md-3 {
        padding: 20px;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }

    aside.col-md-3 h4 {
        font-size: 1.5rem;
        color: #dc3545;
        margin-bottom: 25px;
    }

    .input-group .form-control {
        border-radius: 5px 0 0 5px !important;
    }

    .input-group .btn-outline-secondary {
        border-radius: 0 5px 5px 0 !important;
        border-color: #dee2e6;
        color: #6c757d;
        transition: all 0.3s ease;
    }

    .input-group .btn-outline-secondary:hover {
        background-color: #dc3545;
        border-color: #dc3545;
        color: white;
    }

    .list-group-item {
        border-radius: 5px !important;
        margin-bottom: 5px;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .list-group-item:hover {
        background-color: #f0f2f5;
        color: #dc3545;
    }

    .list-group-item.active.signal-actu-filter-active {
        background-color: #dc3545 !important;
        border-color: #dc3545 !important;
        color: white !important;
    }

    /* Tags in sidebar */
    .d-flex.flex-wrap.gap-2 a.btn {
        border-radius: 20px; /* Pill shape for tag buttons */
        font-size: 0.9em;
        padding: 0.5em 1em;
        border: 1px solid #6c757d;
        transition: all 0.3s ease;
    }

    .d-flex.flex-wrap.gap-2 a.btn-outline-secondary {
        color: #6c757d;
    }

    .d-flex.flex-wrap.gap-2 a.btn-outline-secondary:hover {
        background-color: #dc3545;
        border-color: #dc3545;
        color: white;
    }

    .d-flex.flex-wrap.gap-2 a.btn-primary.signal-actu-filter-active {
        background-color: #dc3545 !important;
        border-color: #dc3545 !important;
        color: white !important;
    }


    /* Main Article Listing (content_results.html and content_list.html) */
    /* (Assuming content_results.html includes content_list.html, which contains individual article cards) */
    /* You'll likely need styles for your article cards themselves, e.g., in partials/article_card.html */
    /* Example placeholder for an article card style: */
    .article-card {
        border: none;
        border-radius: 8px;
        box-shadow: 0 2px 15px rgba(0,0,0,0.08);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        overflow: hidden; /* Ensures rounded corners on image too */
        height: 100%; /* Makes cards in a row have same height */
    }

    .article-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    }

    .article-card img {
        height: 200px; /* Fixed height for thumbnails */
        object-fit: cover;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }

    .article-card .card-body {
        padding: 20px;
        display: flex;
        flex-direction: column;
    }

    .article-card .card-title {
        font-size: 1.3rem;
        font-weight: bold;
        line-height: 1.4;
        margin-bottom: 10px;
        flex-grow: 1; /* Allows title to take available space */
    }

    .article-card .card-title a {
        color: #343a40;
    }

    .article-card .card-text {
        font-size: 0.95rem;
        color: #6c757d;
        margin-bottom: 15px;
    }

    .article-card .text-muted {
        font-size: 0.85rem;
    }

    .article-card .badge {
        font-size: 0.8em;
        padding: 0.4em 0.8em;
        border-radius: 15px;
    }

    /* Load More Button */
    .load-more-btn-wrapper {
        text-align: center;
        margin-top: 40px;
    }

    .load-more-btn {
        background-color: #dc3545;
        border-color: #dc3545;
        color: white;
        padding: 12px 30px;
        font-size: 1.1rem;
        border-radius: 30px;
        transition: all 0.3s ease;
    }

    .load-more-btn:hover {
        background-color: #c82333;
        border-color: #bd2130;
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }

    /* Responsive Adjustments */
    @media (max-width: 991.98px) { /* Medium devices and down */
        .header {
            padding: 30px 0;
            margin-top: 1rem !important;
        }
        .header h3 {
            font-size: 2.2rem;
            margin-bottom: 15px;
        }
        .header p {
            font-size: 1rem;
            margin-bottom: 20px;
        }
        .latest-news .carousel {
            height: 300px;
        }
        .latest-news .carousel-item {
            height: 300px;
        }
        .latest-news .carousel-caption {
            padding: 15px;
        }
        .latest-news .carousel-caption .carousel-title {
            font-size: 1.3rem;
        }
        .latest-news .carousel-caption .carousel-text {
            font-size: 0.85rem;
            display: none; /* Hide resume on smaller screens */
        }
        h2.text-start {
            font-size: 1.7rem;
        }
        aside.col-md-3 {
            margin-bottom: 30px; /* Space between sidebar and main content on smaller screens */
        }
        .article-card img {
            height: 180px;
        }
        .article-card .card-title {
            font-size: 1.1rem;
        }
    }

    @media (max-width: 767.98px) { /* Small devices and down */
        .header .row {
            flex-direction: column-reverse; /* Puts carrousel above text on mobile */
        }
        .header aside.col-md-6,
        .header .col-md-6.latest-news {
            width: 100%;
            text-align: center !important; /* Center text for intro section */
        }
        .header .col-md-6.latest-news {
            margin-bottom: 30px;
        }
        .latest-news .carousel {
            height: 250px;
            border-radius: 8px;
        }
        .latest-news .carousel-item {
            height: 250px;
        }
        .latest-news .carousel-caption {
            padding: 10px;
            bottom: 0;
        }
        .latest-news .carousel-caption .carousel-title {
            font-size: 1.2rem;
        }
        .latest-news .carousel-caption .btn-light {
            font-size: 0.9em;
            padding: 8px 15px;
        }
        h2.text-start {
            font-size: 1.5rem;
            text-align: center;
            width: 100%; /* For responsive centering */
        }
        aside.col-md-3 {
            padding: 15px;
        }
        .input-group {
            flex-wrap: nowrap; /* Prevent wrap for search input */
        }}
        /* Responsive Adjustments */
@media (max-width: 991.98px) { /* Medium devices and down */
.header {
    padding: 30px 0;
    margin-top: 1rem !important;
}
.header h3 {
    font-size: 2.2rem;
    margin-bottom: 15px;
}
.header p {
    font-size: 1rem;
    margin-bottom: 20px;
}
.latest-news .carousel {
    height: 300px;
}
.latest-news .carousel-item {
    height: 300px;
}
.latest-news .carousel-caption {
    padding: 15px;
}
.latest-news .carousel-caption .carousel-title {
    font-size: 1.3rem;
}
.latest-news .carousel-caption .carousel-text {
    font-size: 0.85rem;
    /* ANCIEN: display: none; */ /* <-- LIGNE SUPPRIMÉE/COMMENTÉE */
}
h2.text-start {
    font-size: 1.7rem;
}
aside.col-md-3 {
    margin-bottom: 30px; /* Space between sidebar and main content on smaller screens */
}
.article-card img {
    height: 180px;
}
.article-card .card-title {
    font-size: 1.1rem;
}
}

@media (max-width: 767.98px) { /* Small devices and down */
.header .row {
    flex-direction: column-reverse; /* Puts carrousel above text on mobile */
}
.header aside.col-md-6,
.header .col-md-6.latest-news {
    width: 100%;
    text-align: center !important; /* Center text for intro section */
}
.header .col-md-6.latest-news {
    margin-bottom: 30px;
}
.latest-news .carousel {
    height: 250px;
    border-radius: 8px;
}
.latest-news .carousel-item {
    height: 250px;
}
.latest-news .carousel-caption {
    padding: 10px;
    bottom: 0;
}
.latest-news .carousel-caption .carousel-title {
    font-size: 1.2rem;
}
/* AJOUT : S'assurer que le texte est visible ici aussi si vous voulez un affichage minimal */
.latest-news .carousel-caption .carousel-text {
    font-size: 0.75rem; /* Peut-être une taille encore plus petite pour les très petits écrans */
    /* ANCIEN: display: none; */ /* <-- ASSUREZ-VOUS QUE CE N'EST PAS PRÉSENT ICI NON PLUS */
}
.latest-news .carousel-caption .btn-light {
    font-size: 0.9em;
    padding: 8px 15px;
}
h2.text-start {
    font-size: 1.5rem;
    text-align: center;
    width: 100%; /* For responsive centering */
}
aside.col-md-3 {
    padding: 15px;
}
.input-group {
    flex-wrap: nowrap; /* Prevent wrap for search input */
}
}

  * {
        font-family:  Ubuntu,'Arial', sans-serif;
    }