/* ==========================================================================
   8JOURS - Corrections CSS
   ========================================================================== */

/* Header sticky */
#main-header {
    z-index: 999;
    padding-top: 14px;
    padding-bottom: 14px;
}
#main-header .max-w-7xl { height: 60px; }

/* Compenser la barre admin WP */
.admin-bar #main-header {
    top: 32px;
}
@media (max-width: 782px) {
    .admin-bar #main-header {
        top: 46px;
    }
}
#main-header.is-scrolled #header-bg {
    opacity: 1 !important;
    border-color: rgba(0, 0, 0, 0.05) !important;
}

/* Mobile menu */
#mobile-menu { z-index: 998; }
main { z-index: 1; }

/* Prose links (pas les boutons) */
main .prose a:not(.hd-btn):not(.gold-pill):not([class*="btn"]):not([class*="page-numbers"]),
main .wp-block-post-content a:not(.hd-btn):not(.gold-pill):not([class*="btn"]):not([class*="page-numbers"]) {
    color: var(--gold);
    text-decoration: none;
    transition: color 0.2s ease;
}
main .prose a:not(.hd-btn):not(.gold-pill):not([class*="btn"]):not([class*="page-numbers"]):hover,
main .wp-block-post-content a:not(.hd-btn):not(.gold-pill):not([class*="btn"]):not([class*="page-numbers"]):hover {
    color: var(--charcoal);
}

/* Éléments vides */
.hd-pains__card:empty,
.hd-card:empty,
.hd-usecases__card:empty { display: none; }

/* Hero sections — fond blanc, pas de min-height excessif */
.hd-hero {
    min-height: auto !important;
    padding: 3rem 0 4rem !important;
    background: var(--ivory) !important;
}

/* Icônes Lucide */
[data-lucide] {
    display: inline-block;
    vertical-align: middle;
}

/* Pagination blog */
.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--smoke);
    color: var(--charcoal);
    font-weight: 700;
    font-family: 'DM Mono', monospace;
    transition: all 0.3s ease;
    text-decoration: none;
    margin: 0 0.25rem;
}
.page-numbers:hover,
.page-numbers.current {
    background: var(--charcoal);
    color: var(--ivory);
    transform: translateY(-2px);
}
.page-numbers.prev,
.page-numbers.next {
    width: auto;
    padding: 0 1.5rem;
    border-radius: 99px;
}

/* Responsive mobile */
@media (max-width: 768px) {
    .hd-hero h1,
    .hd-hero__title { font-size: 2rem !important; }
    .hd-hero__subtitle { font-size: 1rem; }
    .hd-section__title { font-size: 1.75rem !important; }
    .hd-proof__card { padding: 1.5rem; }
    .hd-proof__kpi strong { font-size: 2rem; }
}

/* ==========================================================================
   BLOG ARTICLE LAYOUT
   ========================================================================== */
.blog-article-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

@media (min-width: 1024px) {
    .blog-article-grid {
        grid-template-columns: 1fr 280px;
        gap: 4rem;
    }
}

.blog-sidebar {
    display: none;
}

@media (min-width: 1024px) {
    .blog-sidebar {
        display: block;
        align-self: start;
        position: sticky;
        top: 160px;
    }
}

/* Sommaire — style avec barre latérale */
.blog-toc a {
    display: block;
    padding: 0.4rem 0 0.4rem 1rem;
    font-size: 0.8125rem;
    color: var(--graphite);
    opacity: 0.6;
    border-left: 2px solid transparent;
    transition: all 0.2s ease;
    text-decoration: none;
}
.blog-toc a:hover,
.blog-toc a.is-active {
    color: var(--gold);
    opacity: 1;
    border-left-color: var(--gold);
}
.blog-toc a.toc-h3 {
    padding-left: 1.75rem;
    font-size: 0.75rem;
}

/* Meta line article */
.blog-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: var(--graphite);
    opacity: 0.6;
}
.blog-meta__sep {
    opacity: 0.3;
}

/* Print */
@media print {
    .hd-hero, #main-header, footer { display: none !important; }
}