:root {
    --gold: #d4af37;
    --navy: #0a1931;
    --white: #ffffff;
    --bg-light: #f8fafc;
    --text-main: #2d3436;
    --text-muted: #636e72;
    --radius: 25px;
    --transition: all 0.3s ease;
}

/* --- Bannière --- */
.breadcrumb-area {
    background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), 
                url('../img/Children-helped-by-World-Vision-from-its-webiste.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 140px 0;
    text-align: center;
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
}

.breadcrumb-area h1 { color: var(--white); font-size: 3.5rem; letter-spacing: 3px; margin-bottom: 10px; }
.breadcrumb-area p a { color: var(--gold); text-decoration: none; font-weight: 600; }
.breadcrumb-area p { color: var(--white); text-decoration: none; font-weight: 600; }

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--bg-light);
    color: var(--text-main);
    margin: 0;
}

.containerr { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* --- HERO BLOG --- */
.blog-hero {
    background: linear-gradient(rgba(10, 25, 49, 0.8), rgba(10, 25, 49, 0.8)), url('https://images.unsplash.com/photo-1499750310107-5fef28a66643?q=80&w=1200');
    background-size: cover; background-position: center;
    padding: 100px 0; text-align: center; color: white;
}

.top-badge {
    background: var(--gold); color: var(--navy); padding: 5px 15px;
    border-radius: 50px; font-weight: 800; text-transform: uppercase; font-size: 0.75rem;
}

.blog-hero h1 { font-size: 3.5rem; margin: 20px 0; font-weight: 800; }
.blog-hero p { font-size: 1.1rem; opacity: 0.9; max-width: 600px; margin: 0 auto; }

/* --- FILTRES --- */
.blog-filters { background: var(--white); padding: 20px 0; border-bottom: 1px solid #eee; position: sticky; top: 0; z-index: 100; }
.filter-list { list-style: none; display: flex; justify-content: center; gap: 30px; padding: 0; }
.filter-list a { text-decoration: none; color: var(--text-muted); font-weight: 600; transition: var(--transition); }
.filter-list a.active, .filter-list a:hover { color: var(--gold); }

/* --- BLOG GRID --- */
.blog-main { padding: 60px 0; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }

.post-card { 
    background: var(--white); border-radius: var(--radius); overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.05); transition: var(--transition);
    border: 1px solid rgba(0,0,0,0.02);
}

.post-card:hover { transform: translateY(-10px); box-shadow: 0 20px 45px rgba(0,0,0,0.1); }

/* Article à la une */
.post-card.featured { grid-column: span 2; display: flex; }
.post-card.featured .post-img { width: 50%; height: auto; }
.post-card.featured .post-content { width: 50%; padding: 40px; display: flex; flex-direction: column; justify-content: center; }

.post-img { position: relative; height: 250px; }
.post-img img { width: 100%; height: 100%; object-fit: cover; }
.post-tag { 
    position: absolute; top: 15px; left: 15px; background: var(--gold); 
    color: var(--navy); padding: 5px 12px; border-radius: 10px; font-size: 0.75rem; font-weight: 800;
}

.post-content { padding: 25px; }
.post-meta { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 10px; }
.post-content h3, .post-content h2 { color: var(--navy); margin: 10px 0; line-height: 1.3; }
.post-content p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; }

.read-more { 
    display: inline-block; margin-top: 15px; color: var(--gold); 
    text-decoration: none; font-weight: 700; font-size: 0.9rem;
}

/* --- PAGINATION --- */
.pagination { display: flex; justify-content: center; gap: 10px; margin-top: 50px; }
.page-link { 
    width: 45px; height: 45px; display: flex; align-items: center; justify-content: center;
    background: var(--white); border-radius: 12px; text-decoration: none; color: var(--navy);
    font-weight: 700; transition: var(--transition);
}
.page-link.active, .page-link:hover { background: var(--gold); color: var(--navy); }

/* --- DARK MODE --- */
.dark-theme {
    --bg-light: #050a14;
    --white: #0d1626;
    --text-main: #e1e8f0;
    --text-muted: #a0aec0;
    --navy: #ffffff;
}

.dark-theme .post-card { border-color: #1f2d44; box-shadow: 0 15px 35px rgba(0,0,0,0.3); }
.dark-theme .blog-filters { border-color: #1f2d44; }

.theme-switch {
    position: fixed; bottom: 30px; right: 30px; width: 55px; height: 55px;
    border-radius: 50%; background: var(--gold); color: var(--navy);
    border: none; cursor: pointer; z-index: 1000; font-size: 1.4rem;
}

/* Responsive */
@media (max-width: 992px) {
    .blog-grid { grid-template-columns: 1fr; }
    .post-card.featured { grid-column: span 1; flex-direction: column; }
    .post-card.featured .post-img, .post-card.featured .post-content { width: 100%; }
}