/* Styles pour le Flux RSS personnalisé - Version Grille */

.rss-feed-container {
    display: grid; /* Active le mode Grid */
    grid-template-columns: repeat(3, 1fr); /* Crée 5 colonnes de largeur égale */
    gap: 20px; /* Espace de 20px entre les lignes et les colonnes de la grille */
    margin-bottom: 20px;
}

.rss-article {
    /* Styles pour chaque cellule de la grille (article) */
    border: 1px solid #eee; /* Bordure légère autour de chaque article */
    padding: 15px; /* Espace intérieur */
    display: flex; /* Utilise Flexbox à l'intérieur de l'article pour mieux gérer le contenu */
    flex-direction: column; /* Empile les éléments (image, titre, etc.) verticalement */
    /* Pas de margin-bottom ou border-bottom ici, géré par 'gap' et 'border' */


/* --- AJOUT IMPORTANT CI-DESSOUS --- */
width: auto !important; /* Force la largeur à 'auto' et ignore les autres règles 'width' */

}

.rss-article-image {
    /* L'image ne flotte plus, elle fait partie du flux flex */
    margin-right: 0; /* Plus besoin de marge flottante */
    margin-bottom: 15px; /* Espace sous l'image */
    max-width: 100%; /* L'image prendra au maximum la largeur de la colonne */
    text-align: center; /* Centrer l'image si elle est plus petite que la colonne */
}

.rss-article-image img {
    max-width: 100%; /* Image responsive */
    height: auto; /* Conserve les proportions */
    display: inline-block; /* Pour permettre le centrage via text-align */
}

.rss-article-title {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 1.2em; /* Taille de titre ajustée pour la grille */
    line-height: 1.3;
    flex-grow: 1; /* Permet au titre/description de pousser la date vers le bas si hauteur variable */
}

.rss-article-title a {
    text-decoration: none;
    color: #333;
}

.rss-article-title a:hover {
    color: #0073aa;
}

.rss-article-description {
    margin-bottom: 10px;
    color: #555;
    line-height: 1.5;
    font-size: 0.95em;
     flex-grow: 2; /* Donne plus d'espace à la description pour s'étendre */
}

.rss-article-description a.rss-read-more {
    font-weight: bold;
    display: inline-block; /* Pour style eventuel */
    margin-top: 5px;
}

.rss-article-date {
    font-size: 0.85em;
    color: #777;
    margin-top: auto; /* Pousse la date en bas de la carte flex */
    padding-top: 10px; /* Espace au-dessus de la date */
    text-align: right; /* Aligner la date à droite */
}

/* --- Responsive Design --- */

/* Pour les tablettes (par exemple, moins de 1024px) - 3 colonnes */
@media (max-width: 1024px) {
    .rss-feed-container {
        grid-template-columns: repeat(3, 1fr); /* Passe à 3 colonnes */
        gap: 15px; /* Réduit l'espace */
    }
     .rss-article-title {
        font-size: 1.1em; 
    }
}

/* Pour les mobiles (par exemple, moins de 767px) - 1 colonne */
@media (max-width: 767px) {
    .rss-feed-container {
        grid-template-columns: 1fr; /* Passe à 1 seule colonne */
        gap: 20px; /* Augmente l'espace vertical */
    }
     .rss-article-title {
        font-size: 1.3em; /* Titre un peu plus grand sur mobile */
    }
     .rss-article-image {
         /* On pourrait vouloir une image plus grande sur mobile */
         /* max-width: 200px; */ /* Décommentez et ajustez si besoin */
     }
}