/* --- LAYOUT BLOG --- */
.blog-flex-container { display: flex; gap: 30px; align-items: flex-start; }

/* SIDEBAR PC */
.search-sidebar {
    flex: 0 0 300px; position: sticky; top: 80px; height: calc(100vh - 120px);
    display: flex; flex-direction: column; background: var(--bg-section);
    padding: 20px; 
    border-top: 4px solid #ffffff !important; /* Bordure PC en blanc */
    border-radius: 4px; box-sizing: border-box;
}

.sidebar-search-box { 
    border-bottom: 1px solid #ffffff !important; /* Ligne sous RECHERCHE en blanc */
    padding-bottom: 15px; margin-bottom: 15px; 
}

.sidebar-search-box h3 { 
    color: #ffffff !important; 
    margin: 0 0 10px 0; 
    border: none !important; /* Supprime le double soulignement */
}

.sidebar-scroll-list { flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #ffffff transparent; }

/* Les années (2025, 2026, etc) */
.sidebar-scroll-list h4 { 
    color: #ffffff !important; 
    margin: 15px 0 5px 0; 
    font-size: 0.9em; 
    text-transform: uppercase; 
    border-bottom: 1px solid #444; 
}

/* Liens des articles */
.sidebar-scroll-list a { 
    display: block; 
    text-decoration: none; 
    padding: 5px 0 5px 10px; 
    font-size: 0.85em; 
    color: #ffffff !important; 
    border-left: 1px solid #333; 
}

/* On ne garde le gold QUE pour l'article en cours de lecture pour savoir où on est */
.sidebar-scroll-list a.active { 
    color: var(--gold) !important; 
    font-weight: bold; 
    border-left-color: var(--gold) !important; 
}

.blog-main-content {
    flex: 1; background: var(--bg-section); padding: 30px; 
    border-top: 4px solid #ffffff !important; /* Bordure contenu en blanc */
    border-radius: 4px; box-sizing: border-box;
}

/* --- MOBILE TUILES --- */
@media (max-width: 768px) {
    .blog-flex-container { flex-direction: column; }
    .search-sidebar { flex: none; width: 100%; height: auto; position: relative; top: 0; border-top: 4px solid #ffffff !important;}
    
    .sidebar-scroll-list {
        display: flex !important; overflow-x: auto !important; gap: 10px; padding: 10px 0;
        -webkit-overflow-scrolling: touch;
    }
    .sidebar-scroll-list h4 { display: none; }
    .sidebar-scroll-list a {
        flex: 0 0 140px; height: 60px; background: #252525; border: 1px solid #ffffff !important;
        display: flex; align-items: center; justify-content: center; text-align: center;
        padding: 5px; border-radius: 4px; border-left: none;
    }
} 
        margin-bottom: 0; 
        border: 1px solid #ffffff !important;
        border-left: none;
        padding: 10px;
    }
}