/* ============================================================================
   BLOG LISTING 2026 - Page listing articles blog
   Template: blog/index.html.twig
   Prototype: Proto A+ (Magazine Hero + Avatars + Newsletter Inline)
   Architecture Blog dediee - Mobile First

   PROTECTIONS ACTIVES :
   - Override body { background-color: #0a1628 } (CSS global site)
   - Override .sxo-2026-wrapper > section { padding: 48px 0; background: inherit }
   - Override Bootstrap a { color: var(--bs-link-color); text-decoration: underline }
   - Override .sxo-2026-wrapper p, a, span { margin: 0; padding: 0 }
   - Override .sxo-2026-wrapper h1-h6 { margin: 0; padding: 0 }

   Variables hardcodees (pas de var(--sxo-*) — inexistants dans le site) :
   --navy   : #1B2A4A
   --gold   : #D4A853
   --trust  : #2C5F8A
   --text   : #2d2d2d
   --text-light : #6B7280
   --white  : #FFFFFF
   --light-bg : #F8F9FA
   --radius : 12px
   --shadow : 0 2px 8px rgba(27,42,74,0.08)
   --shadow-hover : 0 8px 24px rgba(27,42,74,0.12)
   ============================================================================ */


/* ============================================================================
   PAGE BACKGROUND + BASE RESET
   Override du fond navy fonce du site (body { background-color: #0a1628 })
   ============================================================================ */
.sxo-2026-wrapper.blog-page-2026 {
    background-color: #FFFFFF;
    color: #2d2d2d;
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
}

/* Override .sxo-2026-wrapper > section { padding: 48px 0; background-color: inherit }
   Chaque section directe doit declarer son propre fond et padding */
.sxo-2026-wrapper.blog-page-2026 > section {
    background-color: #FFFFFF;
    color: #2d2d2d;
    padding: 0;
}

/* Override Bootstrap a { color: var(--bs-link-color); text-decoration: underline }
   Reset global sur les liens dans le wrapper blog */
.sxo-2026-wrapper.blog-page-2026 a {
    text-decoration: none;
    color: #2d2d2d;
}


/* ============================================================================
   BREADCRUMB BLOG
   Prototype : .breadcrumb { padding: 16px 24px; font-size: 14px; ... }
   ============================================================================ */
.sxo-2026-wrapper .blog-breadcrumb-2026 {
    padding: 16px 24px;
    font-size: 14px;
    color: #6B7280;
    max-width: 1200px;
    margin: 0 auto;
}

.sxo-2026-wrapper .blog-breadcrumb-2026 a {
    color: #2C5F8A;
    text-decoration: none;
}

.sxo-2026-wrapper .blog-breadcrumb-2026 a:hover {
    text-decoration: underline;
}


/* ============================================================================
   FILTRES CATEGORIES
   Prototype : .filters { padding: 0 24px 24px; ... }
   ============================================================================ */
.sxo-2026-wrapper .blog-filters-2026 {
    padding: 0 24px 24px;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.sxo-2026-wrapper .blog-filter-btn-2026 {
    padding: 8px 20px;
    border-radius: 24px;
    border: 2px solid #2C5F8A;
    background: transparent;
    color: #2C5F8A;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    min-height: 48px;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.sxo-2026-wrapper .blog-filter-btn-2026.active,
.sxo-2026-wrapper .blog-filter-btn-2026:hover {
    background: #D4A853;
    border-color: #D4A853;
    color: #1B2A4A;
}


/* ============================================================================
   HERO POST (Article vedette)
   Prototype : .hero-post { max-width: 1200px; margin: 0 auto 40px; ... }
   ============================================================================ */

/* Override .sxo-2026-wrapper > section { padding: 48px 0 } */
.sxo-2026-wrapper .blog-hero-2026 {
    max-width: 1200px;
    margin: 0 auto 40px;
    padding: 0 24px;
    background-color: #FFFFFF;
}

.sxo-2026-wrapper .blog-hero-inner-2026 {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(27, 42, 74, 0.08);
    transition: box-shadow 0.3s;
    cursor: pointer;
    text-decoration: none;
    color: #2d2d2d;
}

.sxo-2026-wrapper .blog-hero-inner-2026:hover {
    box-shadow: 0 8px 24px rgba(27, 42, 74, 0.12);
}

/* Prototype : .hero-img { width: 100%; height: 280px; background: gradient; ... } */
.sxo-2026-wrapper .blog-hero-img-2026 {
    width: 100%;
    height: 280px;
    background: linear-gradient(135deg, #1B2A4A, #2C5F8A);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.2);
    font-size: 48px;
    position: relative;
    overflow: hidden;
}

/* Prototype : .hero-img::after { content:''; position: absolute; inset: 0; ... } */
.sxo-2026-wrapper .blog-hero-img-2026::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(27, 42, 74, 0.1), rgba(44, 95, 138, 0.15));
}

.sxo-2026-wrapper .blog-hero-content-2026 {
    padding: 28px;
    background: #FFFFFF;
}

/* Prototype : .hero-content .badge { display: inline-block; ... margin-bottom: 12px } */
.sxo-2026-wrapper .blog-badge-2026 {
    display: inline-block;
    background: rgba(212, 168, 83, 0.15);
    color: #b8922e;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 12px;
}

/* Prototype : .hero-content h2 { font-size: 24px; font-weight: 700; ... } */
.sxo-2026-wrapper .blog-hero-content-2026 h2 {
    font-size: 24px;
    font-weight: 700;
    color: #1B2A4A;
    line-height: 1.3;
    margin-bottom: 12px;
    padding: 0;
}

/* Prototype : .hero-content p { color: text-light; font-size: 15px; -webkit-line-clamp: 3 } */
.sxo-2026-wrapper .blog-hero-content-2026 p {
    color: #6B7280;
    font-size: 15px;
    margin-bottom: 16px;
    padding: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Author meta avec avatar */
.sxo-2026-wrapper .blog-author-meta-2026 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: #6B7280;
}

.sxo-2026-wrapper .blog-avatar-2026 {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #2C5F8A;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}

.sxo-2026-wrapper .blog-author-name-2026 {
    font-weight: 600;
    color: #2d2d2d;
}

.sxo-2026-wrapper .blog-dot-2026 {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #6B7280;
    flex-shrink: 0;
    display: inline-block;
}

/* Hero responsive 768px */
@media (min-width: 768px) {
    .sxo-2026-wrapper .blog-hero-inner-2026 {
        flex-direction: row;
    }

    .sxo-2026-wrapper .blog-hero-img-2026 {
        width: 55%;
        min-height: 340px;
        height: auto;
    }

    .sxo-2026-wrapper .blog-hero-content-2026 {
        width: 45%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 36px;
    }

    .sxo-2026-wrapper .blog-hero-content-2026 h2 {
        font-size: 28px;
    }
}


/* ============================================================================
   GRILLE ARTICLES (3 colonnes max)
   Prototype : .grid-section + .card-grid { grid-template-columns: ... }
   Override .sxo-2026-wrapper > section { padding: 48px 0 }
   ============================================================================ */
.sxo-2026-wrapper .blog-grid-section-2026 {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    background-color: #FFFFFF;
}

.sxo-2026-wrapper .blog-grid-title-2026 {
    font-size: 20px;
    color: #1B2A4A;
    margin-bottom: 24px;
    font-weight: 700;
    padding: 0;
}

.sxo-2026-wrapper .blog-card-grid-2026 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 40px;
}

@media (min-width: 576px) {
    .sxo-2026-wrapper .blog-card-grid-2026 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .sxo-2026-wrapper .blog-card-grid-2026 {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* ============================================================================
   CARTE ARTICLE
   Prototype : .card { border-radius: var(--radius); overflow: hidden; ... }
   ============================================================================ */
.sxo-2026-wrapper .blog-card-2026 {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(27, 42, 74, 0.08);
    transition: all 0.3s;
    cursor: pointer;
    background: #FFFFFF;
    text-decoration: none;
    color: #2d2d2d;
    display: block;
}

.sxo-2026-wrapper .blog-card-2026:hover {
    box-shadow: 0 8px 24px rgba(27, 42, 74, 0.12);
    transform: translateY(-4px);
}

/* Prototype : .card-img { width: 100%; aspect-ratio: 16/9; background: gradient; ... } */
.sxo-2026-wrapper .blog-card-img-2026 {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #2C5F8A, #1B2A4A);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.15);
    font-size: 24px;
    position: relative;
    overflow: hidden;
}

/* Prototype : .card-img .badge { position: absolute; top: 12px; left: 12px; ... } */
.sxo-2026-wrapper .blog-card-img-2026 .blog-badge-2026 {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #D4A853;
    color: #1B2A4A;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 0;
    z-index: 1;
}

/* Classe supplementaire : image reelle dans les cartes */
.sxo-2026-wrapper .blog-card-img-cover-2026 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

/* Classe supplementaire : placeholder quand pas d'image hero */
.sxo-2026-wrapper .blog-hero-placeholder-2026 {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.2);
    font-size: 48px;
}

.sxo-2026-wrapper .blog-card-body-2026 {
    padding: 20px;
}

/* Prototype : .card-body h3 { font-size: 17px; font-weight: 700; -webkit-line-clamp: 2 } */
.sxo-2026-wrapper .blog-card-body-2026 h3 {
    font-size: 17px;
    font-weight: 700;
    color: #1B2A4A;
    margin-bottom: 8px;
    padding: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Prototype : .card-body p { font-size: 14px; color: text-light; -webkit-line-clamp: 2 } */
.sxo-2026-wrapper .blog-card-body-2026 p {
    font-size: 14px;
    color: #6B7280;
    margin-bottom: 12px;
    padding: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Card author avec avatar */
.sxo-2026-wrapper .blog-card-author-2026 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: #6B7280;
}

/* Prototype : .card-author .avatar { width: 28px; height: 28px; font-size: 11px } */
.sxo-2026-wrapper .blog-card-author-2026 .blog-avatar-2026 {
    width: 28px;
    height: 28px;
    font-size: 11px;
}

.sxo-2026-wrapper .blog-card-author-2026 .blog-author-name-2026 {
    font-weight: 600;
    color: #2d2d2d;
}

/* Prototype : .card-reading { background: light-bg; padding: 3px 10px; ... margin-left: auto } */
.sxo-2026-wrapper .blog-card-reading-2026 {
    background: #F8F9FA;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    margin-left: auto;
    white-space: nowrap;
    color: #6B7280;
}


/* ============================================================================
   NEWSLETTER INLINE (entre rangees d'articles)
   Prototype : .newsletter-inline { grid-column: 1/-1; background: gradient; ... }
   ============================================================================ */
.sxo-2026-wrapper .blog-newsletter-inline-2026 {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, #1B2A4A, #2C5F8A);
    border-radius: 12px;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: #FFFFFF;
}

/* Prototype : .newsletter-inline h3 { font-size: 18px; font-weight: 700; margin-bottom: 6px } */
.sxo-2026-wrapper .blog-newsletter-inline-2026 h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
    padding: 0;
    color: #FFFFFF;
}

/* Prototype : .newsletter-inline p { font-size: 14px; opacity: .8; margin-bottom: 16px } */
.sxo-2026-wrapper .blog-newsletter-inline-2026 p {
    font-size: 14px;
    opacity: 0.8;
    margin-bottom: 16px;
    padding: 0;
    color: #FFFFFF;
}

.sxo-2026-wrapper .blog-nl-form-2026 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 440px;
}

/* Prototype : .nl-form input { padding: 12px 16px; border-radius: 8px; min-height: 48px } */
.sxo-2026-wrapper .blog-nl-form-2026 input {
    padding: 12px 16px;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
    min-height: 48px;
    color: #2d2d2d;
    background: #FFFFFF;
}

/* Prototype : .nl-form button { background: gold; color: navy; min-height: 48px } */
.sxo-2026-wrapper .blog-nl-form-2026 button {
    padding: 12px 20px;
    border-radius: 8px;
    border: none;
    background: #D4A853;
    color: #1B2A4A;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    cursor: pointer;
    min-height: 48px;
    transition: opacity 0.2s;
}

.sxo-2026-wrapper .blog-nl-form-2026 button:hover {
    opacity: 0.9;
}

/* Prototype : @media(min-width:576px) { .nl-form { flex-direction: row } .nl-form input { flex: 1 } } */
@media (min-width: 576px) {
    .sxo-2026-wrapper .blog-nl-form-2026 {
        flex-direction: row;
    }

    .sxo-2026-wrapper .blog-nl-form-2026 input {
        flex: 1;
    }
}

/* Prototype : .newsletter-inline small { display: block; margin-top: 10px; font-size: 12px; opacity: .6 } */
.sxo-2026-wrapper .blog-newsletter-inline-2026 small {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    opacity: 0.6;
    color: #FFFFFF;
}


/* ============================================================================
   PAGINATION
   Prototype : .pagination { max-width: 1200px; margin: 0 auto 48px; ... }
   Override .sxo-2026-wrapper > section { padding: 48px 0 }
   ============================================================================ */
.sxo-2026-wrapper .blog-pagination-2026 {
    max-width: 1200px;
    margin: 0 auto 48px;
    padding: 0 24px;
    display: flex;
    justify-content: center;
    gap: 8px;
    background-color: #FFFFFF;
}

/* Prototype : .page-btn { min-width: 48px; min-height: 48px; border-radius: 8px; ... } */
.sxo-2026-wrapper .blog-page-btn-2026 {
    min-width: 48px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 2px solid #E5E7EB;
    background: #FFFFFF;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #2d2d2d;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
    padding: 0 12px;
}

/* Prototype : .page-btn.active { background: navy; color: white; border-color: navy } */
.sxo-2026-wrapper .blog-page-btn-2026.active {
    background: #1B2A4A;
    color: #FFFFFF;
    border-color: #1B2A4A;
}

/* Prototype : .page-btn:hover:not(.active) { border-color: trust; color: trust } */
.sxo-2026-wrapper .blog-page-btn-2026:hover:not(.active) {
    border-color: #2C5F8A;
    color: #2C5F8A;
}