/* Shared background for BlogPage and Article (based on HomePage) */

#blog-shared-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
    background: rgba(9, 5, 24, 1);
}

/* Match generic html background to footer to avoid mismatch during overscroll */
html.blog-article-page-html {
    background-color: #111827;
    /* Footer color */
}

/* Edge darkening vignette overlay above glows, below content */
#blog-vignette-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    pointer-events: none;
    /* Place au-dessus de tout le contenu pour assombrir globalement les bords */
    z-index: 5;
    /* Stronger edge darkening with smoother falloff */
    background: radial-gradient(ellipse at 50% 50%,
            rgba(0, 0, 0, 0) 48%,
            rgba(0, 0, 0, 0.2) 65%,
            rgba(0, 0, 0, 0.5) 80%,
            rgba(0, 0, 0, 0.8) 100%);
    /* Ellipse encore plus large pour un effet plus dramatique */
    background-size: 100% 150%;
    background-position: center;
}

/* Ensure only Blog pages use this background */
body:not(.blog-page):not(.blog-article-page) #blog-shared-background,
body:not(.blog-page):not(.blog-article-page) #blog-vignette-overlay,
body:not(.blog-page):not(.blog-article-page) .blog-bg-glow {
    display: none !important;
}

/* Global page baseline for Blog Pages - Couleur exacte de BloomAI */
html,
body.blog-page {
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body.blog-page {
    background: rgba(9, 5, 24, 1) !important;
}

body.blog-article-page {
    background: #111827 !important;
    /* Footer color to stop blue space */
    overflow-x: hidden;
}

/* Content layering to sit above background */
.blog-page #app,
.blog-page #main-content,
.blog-article-page #app,
.blog-article-page #main-content {
    position: relative;
}

.blog-page #page-content,
.blog-page #footer-container,
.blog-article-page #article-container,
.blog-article-page #footer-container {
    position: relative;
    z-index: 10;
}

.blog-article-page #article-container {
    flex: 1;
    width: 100%;
}

.blog-page #page-content {
    flex: 1;
    width: 100%;
}


/* Lighter background opacity on small screens if needed */
@media (max-width: 768px) {
    #blog-shared-background {
        opacity: 0.85;
    }
}