/* =========================================
   1. UI ELEMENTS (Inputs & Buttons)
   ========================================= */
.vintage-input {
    background: #fff7ef;
    border: 1px solid #e0cbb3;
    padding: 10px;
    font-family: 'Lato', sans-serif;
    color: #4a2c23;
    outline: none;
    transition: border-color 0.3s;
}

.vintage-input:focus {
    border-color: #b64024;
}

.vintage-btn {
    background: #b64024;
    color: #fff;
    border: 1px solid #b64024;
    padding: 0 15px;
    cursor: pointer;
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
    font-size: 0.85rem;
    font-weight: 700;
    transition: background 0.3s;
}

.vintage-btn:hover {
    background: #8c311a;
    border-color: #8c311a;
}

/* =========================================
   2. GRID SYSTEM (Articles)
   ========================================= */
.articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Colonnes Max */
    gap: 30px;
}

.article-card {
    background: #fdfbf7;
    border: 1px solid #e0cbb3;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
}

.article-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.card-img {
    height: 220px; /* Hauteur ajustée pour 3 colonnes */
    overflow: hidden;
    border-bottom: 1px solid #e0cbb3;
}

.card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.article-card:hover .card-img img {
    transform: scale(1.05);
}

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

.card-meta {
    font-size: 0.75rem;
    color: #a47a63;
    text-transform: uppercase;
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.card-title {
    font-size: 1.2rem;
    margin-bottom: 10px;
    line-height: 1.3;
    font-family: 'Playfair Display', serif;
    color: #4a2c23;
}

.card-title a {
    text-decoration: none;
    color: inherit;
}

.card-excerpt {
    font-size: 0.95rem;
    color: #5b3a2e;
    margin-bottom: 20px;
    flex: 1;
    line-height: 1.5;
}

.card-link {
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: 700;
    color: #b64024;
    margin-top: auto;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    align-self: flex-start;
}

.card-link:hover {
    border-bottom-color: #b64024;
}

/* =========================================
   3. SEARCH RESULTS (Mode Liste)
   ========================================= */
.search-list-item {
    background: transparent; /* Fond transparent (demande utilisateur) */
    padding: 25px 0;
    border-bottom: 1px dashed #e0cbb3;
    margin-bottom: 10px;
}

.search-list-item:last-child {
    border-bottom: none;
}

.highlight {
    background-color: rgba(255, 255, 0, 0.3);
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
}

/* =========================================
   4. PAGINATION (Style Tuiles Verticales)
   ========================================= */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 40px;
}

/* Override spécifique pour créer les tuiles */
.pagination .page-link {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    
    min-width: 44px;    /* Largeur fixe min pour les chiffres */
    height: 52px;       /* Rectangle vertical */
    padding: 0 10px;    /* Padding latéral pour les textes longs (Préc/Suiv) */
    
    background: #fff7ef;        /* Fond beige par défaut */
    border: 1px solid #e0cbb3;
    color: #4a2c23;
    
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

/* État actif (géré par le PHP inline style) et Hover */
.pagination .page-link:hover,
.pagination .page-link[style*="background"] { 
    background: #b64024 !important; /* Rouge brique */
    color: #fff !important;
    border-color: #b64024 !important;
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(182, 64, 36, 0.2);
}

/* =========================================
   5. RESPONSIVE DESIGN
   ========================================= */
@media (max-width: 992px) {
    .articles-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 colonnes tablette */
    }
}

@media (max-width: 600px) {
    .articles-grid {
        grid-template-columns: 1fr; /* 1 colonne mobile */
    }

    /* Header Mobile */
    .blog-header-section h1 {
        font-size: 1.8rem;
    }
    
    .col-controls {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-group, 
    .search-group {
        min-width: 100%;
    }
    
    /* Pagination mobile plus petite */
    .pagination .page-link {
        height: 44px;
        min-width: 38px;
        font-size: 1rem;
    }
}


/* Bouton Reset Rectangulaire */
.reset-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end; /* Pour s'aligner en bas à droite du conteneur flex */
    
    padding: 8px 16px;
    border: 1px solid #b64024;
    background-color: transparent; /* Fond transparent par défaut */
    color: #b64024;
    
    font-family: 'Inter', sans-serif; /* Ou votre police principale */
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    
    /* Forme purement rectangulaire */
    border-radius: 0; 
    
    transition: all 0.3s ease;
    cursor: pointer;
    margin-bottom: 10px; /* Petit espacement par rapport au bas */
}

.reset-btn:hover {
    background-color: #b64024;
    color: #fff;
    /* Petit effet de décalage typique du style "brutaliste" ou vintage */
    transform: translateY(-2px);
    box-shadow: 2px 2px 0 rgba(182, 64, 36, 0.2);
}

.reset-btn:active {
    transform: translateY(0);
    box-shadow: none;
}