/* Layout Barre de Recherche */
.filter-bar {
    background: #2C4964;
    padding: 30px;
    display: flex;
    flex-direction: row; /* Aligné par défaut */
    gap: 30px; /* Gap réduit pour éviter les débordements sur tablettes */
    border-radius: 25px;
    align-items: flex-end; /* Aligne les champs en bas si les labels diffèrent */
}

.filter-col { 
    flex: 1; 
    color: white; 
}

.filter-col label { 
    display: block; 
    font-weight: bold; 
    margin-bottom: 8px; 
    font-size: 14px; 
}

.filter-col input, 
.filter-col select {
    width: 100%; 
    padding: 12px; 
    border-radius: 20px; 
    border: none;
    font-size: 14px;
}

.articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
    padding: 40px 0;
}

/* Cartouche Article */
.article-card {
    background-color: #2C4964 !important; /* Le bleu spécifique demandé */
    border-radius: 4px;
    overflow: hidden;
    height: 100%;
}
.related-posts-only .articles-grid {
    padding-top: 20px; /* Moins d'espace en haut puisqu'il n'y a pas de filtres */
}
/* Liens et Titres */
.article-title-link {
    text-decoration: none;
    color: white !important;
}
.article-image img { width: 100%; height: 250px; object-fit: cover; }
.article-content { padding: 25px; flex-grow: 1; display: flex; flex-direction: column; }
.article-content h3 {
    font-weight: 700; /* Gras */
    color: #FFFFFF;
    font-size: 1.4em;
    line-height: 1.2;
}

.post-date {
    font-size: 1.1em; /* Un peu plus grand */
    color: #FFFFFF;
    opacity: 0.9;
}

.excerpt {
    color: #FFFFFF;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* BOUTON READ MORE COMMUN */
.read-more-btn {
    display: inline-block;
    padding: .3em 1em !important;
    color: #FFFFFF !important;
    border-radius: 60px;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    background-color: rgba(255,255,255,0.12);
    border: 2px solid white !important;
    cursor: pointer;
    transition: all 0.4s ease;
    text-decoration: none;
    width: fit-content;
}

/* BOUTON LOAD MORE COMMUN */
#load-more-btn {
    display: inline-block;
    padding: 1px 15px 1px 15px !important;
    color: #FFFFFF !important;
    border-radius: 60px;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    background-color: rgba(255,255,255,0.12);
    border: 2px solid white !important;
    cursor: pointer;
    transition: all 0.4s ease;
    border: 2px solid white !important;
}

/* SPECIFIQUE NEWS (Bleu #5191CD) */
.engine-news .read-more-btn:hover,
.engine-news #load-more-btn:hover {
    border-color: #5191CD !important;
    background-color: #5191CD !important;
    color: #FFFFFF !important;
}

/* SPECIFIQUE BLOG (Orange #f28705) */
.engine-blog .read-more-btn:hover,
.engine-blog #load-more-btn:hover {
    border-color: #f28705 !important;
    background-color: #f28705 !important;
    color: #FFFFFF !important;
}

/* RESPONSIVE */
/* Tablettes (On réduit le gap et le padding) */
@media (max-width: 1024px) {
    .filter-bar { 
        gap: 20px; 
        padding: 20px; 
    }
    .articles-grid { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 30px; 
    }
}

/* Mobile (Changement de sens du Flex) */
@media (max-width: 767px) {
    .filter-bar {
        flex-direction: column; /* Empilement vertical */
        gap: 15px;
        border-radius: 15px;
        padding: 20px;
    }

    .filter-col {
        width: 100%; /* Prend toute la largeur */
    }

    .articles-grid { 
        grid-template-columns: 1fr; 
        gap: 30px; 
        padding: 20px 0;
    }
    
    .article-image img {
        height: 200px; /* Image légèrement plus petite sur mobile */
    }
    
    .load-more-container {
        margin-top: 20px;
    }
}