/* /var/www/staphy/public/css/liste.css (VERSION COMPLÈTE & RESPONSIVE) */

/* 
   ==========================================================================
   1. STYLES DE BASE (MOBILE FIRST)
   Ces styles s'appliquent par défaut, optimisés pour les petits écrans.
   ========================================================================== 
*/

.liste-container {
    max-width: 1200px;
    margin: 0 auto;
    /* Moins de padding sur mobile pour maximiser l'espace */
    padding: 1.5rem 1rem; 
}

.liste-header {
    text-align: center;
    margin-bottom: 2.5rem; /* Espace réduit sur mobile */
}

.liste-header h1 {
    /* Taille de police fluide qui s'adapte à la largeur de l'écran */
    font-size: clamp(1.8rem, 6vw, 2.8rem);
    font-weight: 800;
    color: var(--gray-900, #1a202c);
    position: relative;
    display: inline-block;
    padding-bottom: 0.5rem;
    line-height: 1.2;
}

.liste-header h1::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 4px;
    background-color: var(--accent-color, #3b82f6);
    border-radius: 2px;
}

/* Grille des cartes : 1 seule colonne sur les très petits écrans */
.sorties-grid {
    display: grid;
    /* La magie du responsive automatique : colonnes d'au moins 300px */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem; /* Espace réduit entre les cartes sur mobile */
}

/* Design de chaque carte */
.sortie-card {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -1px rgba(0,0,0,0.04);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card-image-link { display: block; }
/* On regroupe les styles communs à l'image ET au placeholder */
.card-image,
.card-image-placeholder {
    width: 100%;
    aspect-ratio: 16 / 10; /* Assure que la zone garde la même taille */
    display: block;
}

.card-image {
    object-fit: cover; /* Pour que l'image remplisse la zone sans se déformer */
    background-color: #f0f0f0; /* Couleur de fond pendant le chargement */
}

.card-image-placeholder {
    background-color: #e9ecef; /* Un gris clair et doux */
    display: flex;
    align-items: center;
    justify-content: center;
    /* On ajoute une icône de paysage en SVG directement dans le CSS */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23adb5bd' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' class='feather feather-image'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'%3E%3C/circle%3E%3Cpolyline points='21 15 16 10 5 21'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 48px 48px; /* Taille de l'icône */
    opacity: 0.7; /* Pour rendre l'icône discrète */
}
.card-content {
    padding: 1rem; /* Padding réduit sur mobile */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.card-title {
    font-size: 1.25rem; /* Taille de titre adaptée au mobile */
    font-weight: 700;
    margin: 0 0 0.5rem;
}
.card-title a { text-decoration: none; color: var(--gray-800, #2d3748); transition: color 0.2s; }
.card-title a:hover { color: var(--accent-color, #3b82f6); }

.card-meta {
    font-size: 0.8rem;
    color: var(--gray-600, #718096);
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    margin-bottom: 1rem;
    align-items: center;
}
.card-meta span { display: flex; align-items: center; }

.card-excerpt {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--gray-700, #4a5568);
    flex-grow: 1;
    margin-bottom: 1rem;
}

.card-footer { margin-top: auto; }
.btn-lire-suite {
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: var(--accent-color, #3b82f6);
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background-color 0.2s, transform 0.2s;
}

/* --- Styles pour la pagination (corrigés) --- */
.pagination {
    /* Ce conteneur <nav> sert à centrer le bloc <ul> */
    display: flex;
    justify-content: center;
    margin-top: 3rem;
    width: 100%;
}

.pagination ul {
    /* On applique le flex ici pour aligner les <li> horizontalement */
    display: flex;
    flex-wrap: wrap; /* Permet de passer à la ligne sur petits écrans */
    justify-content: center; /* Centre les boutons si ça passe sur plusieurs lignes */
    gap: 0.5rem;

    /* LA CORRECTION PRINCIPALE EST ICI : */
    list-style: none; /* SUPPRIME LES PUCES (BULLET POINTS) */
    padding: 0;       /* Annule le padding par défaut des listes */
    margin: 0;        /* Annule la marge par défaut des listes */
}

/* On ne touche pas au style des boutons eux-mêmes, qui est déjà bon */
.pagination li a, .pagination li span {
    display: block;
    padding: 0.5rem 0.85rem;
    text-decoration: none;
    color: var(--accent-color, #3b82f6);
    border: 1px solid #ddd;
    border-radius: 6px;
    transition: background-color 0.2s, color 0.2s;
    font-size: 0.9rem;
}

.pagination li a:hover {
    background-color: #e0e7ff; /* Couleur de survol légère */
    border-color: #c7d2fe;
}

.pagination li.active span {
    background-color: var(--accent-color, #3b82f6);
    color: white;
    border-color: var(--accent-color, #3b82f6);
    cursor: default;
}

.pagination li.disabled span {
    color: #aaa;
    background-color: #f8f9fa;
    border-color: #ddd;
    cursor: default;
}

.no-sorties-message {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--gray-600, #718096);
    font-size: 1.1rem;
    background-color: #fff;
    border-radius: 12px;
}

/* 
   ==========================================================================
   2. STYLES POUR TABLETTES ET PLUS GRANDS ÉCRANS
   Ces styles s'appliquent à partir de 768px de large.
   ========================================================================== 
*/

@media (min-width: 768px) {
    .liste-container {
        /* On rétablit le padding plus généreux */
        padding: 2.5rem 1.5rem;
    }

    .liste-header {
        margin-bottom: 3.5rem;
    }

    .liste-header h1 {
        /* On autorise une police plus grande */
        font-size: clamp(2.5rem, 5vw, 3.5rem);
    }

    .sorties-grid {
        gap: 2rem; /* Plus d'espace entre les cartes */
    }

    .card-content {
        padding: 1.5rem;
    }

    .card-title {
        font-size: 1.4rem;
    }

    .card-meta {
        font-size: 0.85rem;
    }

    .card-excerpt {
        font-size: 0.95rem;
    }

    .btn-lire-suite {
        font-size: 1rem;
        padding: 0.6rem 1.2rem;
    }
}

/* 
   ==========================================================================
   3. EFFETS AU SURVOL (pour les appareils avec souris)
   ========================================================================== 
*/

@media (hover: hover) and (pointer: fine) {
    .sortie-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    }

    .btn-lire-suite:hover {
        background-color: #2563eb; /* Une teinte plus foncée de l'accent */
        transform: scale(1.05);
    }
}