/*
 * ProChampi — continuité visuelle publique
 * Une même nuit végétale du header au contenu, avec le décor de chaque page
 * qui reste légèrement perceptible sous la navigation.
 */
:root {
    --pc-shell-night: #03100a;
    --pc-shell-night-soft: #06180f;
}

html,
body {
    width: 100%;
    max-width: none;
    overflow-x: hidden;
    background-color: var(--pc-shell-night);
}

/* Les décors occupent toujours le viewport complet ; les limites de lecture
   restent appliquées uniquement aux contenus internes. */
body > main,
#root,
.home-page,
.about-story-page,
.contact-page,
.recipes-page,
.recipe-detail-page,
.pc-enroll,
.pc-client-gate,
.pc-partner,
.hero-store,
.contact-hero {
    width: 100%;
    max-width: none;
}

body.antialiased,
body.pc-space-customer {
    background:
        radial-gradient(circle at 12% 18%, rgba(45,132,79,.10), transparent 28%),
        radial-gradient(circle at 88% 62%, rgba(190,142,48,.055), transparent 26%),
        linear-gradient(180deg, var(--pc-shell-night), var(--pc-shell-night-soft) 50%, var(--pc-shell-night)) !important;
}

.site-shell-header{background:transparent!important}
.site-shell-header .topbar{
    background:rgba(3,16,10,.58)!important;
    box-shadow:inset 0 -1px rgba(213,174,83,.13);
}

/* Les fonds de page commencent et finissent sur exactement la même teinte. */
.home-page,
.about-story-page,
.contact-page,
.recipes-page,
.recipe-detail-page,
.pc-enroll,
.pc-client-gate,
.pc-partner {
    background-color: var(--pc-shell-night) !important;
}

.pc-enroll {
    --night: var(--pc-shell-night) !important;
    background:
        radial-gradient(circle at 12% 22%, rgba(55,148,90,.08), transparent 34%),
        radial-gradient(circle at 89% 74%, rgba(213,159,52,.055), transparent 27%),
        linear-gradient(180deg, var(--pc-shell-night), var(--pc-shell-night-soft) 48%, var(--pc-shell-night)) !important;
}

.pc-enroll-hero {
    background: var(--pc-shell-night) !important;
}

.pc-partner-hero {
    background: var(--pc-shell-night) !important;
}

/* La droite validée reste inchangée ; la gauche rejoint désormais le vert de page. */
.pc-enroll-hero::before {
    background:
        linear-gradient(
            180deg,
            rgba(3,16,10,.70) 0%,
            rgba(2,18,11,.04) 24%,
            rgba(2,18,11,.16) 72%,
            var(--pc-shell-night) 100%
        ),
        linear-gradient(
            90deg,
            var(--pc-shell-night) 0%,
            rgba(3,16,10,.88) 7%,
            rgba(2,16,10,.60) 30%,
            rgba(2,16,10,.05) 60%,
            rgba(2,16,10,.08) 100%
        ) !important;
}

/* Même logique de fusion douce sur les grands visuels des autres pages. */
.hero-slide > img,
.recipe-story-slide > img,
.pc-client-gate__art {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 100%);
}

.about-story-hero-image {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 100%);
}

.contact-hero,
.hero-store {
    box-shadow:
        inset 80px 0 90px -62px var(--pc-shell-night),
        inset 0 -1px rgba(213,174,83,.12);
}

@media (max-width: 760px) {

    .hero-slide > img,
    .recipe-story-slide > img,
    .pc-client-gate__art,
    .about-story-hero-image {
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-shell-header .topbar {
        background-attachment: scroll;
    }
}