/* =========================================================
   home.css - styles de la page d'accueil (Moodboard "Back to
   the Alpha"). Extrait du <style> inline de views/home.php (W5)
   pour être mis en cache et alléger le HTML.
   Les chapitres sont scopés sous .home-mb. La classe body
   .home-world-shell ne sert qu'au raccord final avec le footer partagé.
   Chargé uniquement par home.php (avec cache-busting ?v=).
   Mouvement = tokens --dur-* et --ease-* (barème unique du site).
   ========================================================= */

/* ════════════════════════════════════════════════════════════
   MOODBOARD "Back to the Alpha" - scoped to the home page only.
   ════════════════════════════════════════════════════════════ */
/* The page surface remains the fallback, but the public story is carried by
   real in-game captures. Wood is reserved for panels and controls. */
.home-mb {
    position: relative;
    color: var(--mb-fg1);
}
.home-mb p { color: var(--mb-fg2); }

/* Two full-viewport image planes carry the whole homepage. Because neither
   plane has a section edge, their opacity crossfade cannot expose a horizontal
   seam. Responsive <picture> sources still provide dimensions and art direction. */
.home-world-backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: var(--surface-bg);
    contain: paint;
}
.home-backdrop-scene {
    position: absolute;
    inset: -2px;
    z-index: 0;
    display: block;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    contain: paint;
    transition: opacity 120ms linear;
}
.home-backdrop-scene:first-child {
    visibility: visible;
    opacity: 1;
}
.home-backdrop-scene img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.018);
    transform-origin: center;
    backface-visibility: hidden;
}
.home-backdrop-scene.scene-hero-spawn img { object-position: center 52%; }
.home-backdrop-scene.scene-bridge-coast img { object-position: 68% 50%; }
.home-backdrop-veil {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(18, 9, 4, .26), rgba(18, 9, 4, .06) 28%, rgba(18, 9, 4, .08) 66%, rgba(18, 9, 4, .30)),
        linear-gradient(90deg, rgba(18, 9, 4, .28), transparent 38%, transparent 68%, rgba(18, 9, 4, .18)),
        radial-gradient(ellipse at center, transparent 46%, rgba(18, 9, 4, .14) 100%);
}
body.home-world-shell > main {
    position: relative;
    z-index: 1;
}

/* Le chargement du hero utilise la même entrée verticale que les reveals.
   Le reveal au scroll et son stagger vivent uniquement dans coco-ui.css. */
@keyframes mb-rise {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
}
.js .mb-load {
    opacity: 0;
    animation: mb-rise var(--dur-slow) var(--ease-out) both;
}
.js .mb-hero-sequence > .mb-load:nth-child(2) { animation-delay: calc(var(--dur-fast) / 2); }
.js .mb-hero-sequence > .mb-load:nth-child(3) { animation-delay: var(--dur-fast); }
.js .mb-hero-sequence > .mb-load:nth-child(4) { animation-delay: calc(var(--dur-fast) * 1.5); }
.js .mb-hero-sequence > .mb-load:nth-child(5) { animation-delay: calc(var(--dur-fast) * 2); }

/* ---------- HERO ---------- */
.mb-hero {
    --hero-logo-x: 0px;
    --hero-logo-y: 0px;
    --hero-dust-x: 0px;
    --hero-dust-y: 0px;
    --hero-glow-x: 0px;
    --hero-glow-y: 0px;
    position: relative;
    overflow: hidden;
    isolation: auto;
    margin-top: calc(0px - var(--site-sticky-top));
    min-height: clamp(700px, 100svh, 940px);
    display: grid;
    place-items: center;
    background: transparent;
}
.mb-hero-depth {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}
@keyframes coco-hero-depth-scroll {
    from { transform: translateY(0); }
    to { transform: translateY(-18px); }
}
@keyframes coco-hero-logo-scroll {
    from { transform: translateY(0); }
    to { transform: translateY(-10px); }
}
@supports (animation-timeline: scroll()) and (animation-range: 0px 80vh) {
    .mb-hero-depth,
    .mb-logo-stage {
        animation-duration: auto;
        animation-timing-function: linear;
        animation-fill-mode: both;
        animation-timeline: scroll(root block);
        animation-range: 0px 80vh;
    }
    .mb-hero-depth { animation-name: coco-hero-depth-scroll; }
    .mb-logo-stage { animation-name: coco-hero-logo-scroll; }
}
.mb-hero-dust {
    position: absolute;
    inset: -6%;
    transition: transform var(--dur-slow) var(--ease-out);
}
.mb-hero-dust {
    background:
        radial-gradient(circle at 12% 28%, color-mix(in srgb, var(--coco-gold-300) 68%, transparent) 0 1px, transparent 2px),
        radial-gradient(circle at 31% 71%, color-mix(in srgb, var(--coco-gold-100) 52%, transparent) 0 1px, transparent 2px),
        radial-gradient(circle at 49% 21%, color-mix(in srgb, var(--coco-gold-300) 58%, transparent) 0 1px, transparent 2px),
        radial-gradient(circle at 68% 62%, color-mix(in srgb, var(--coco-gold-100) 48%, transparent) 0 1px, transparent 2px),
        radial-gradient(circle at 87% 34%, color-mix(in srgb, var(--coco-gold-300) 64%, transparent) 0 1px, transparent 2px);
    opacity: .42;
    transform: translate3d(var(--hero-dust-x), var(--hero-dust-y), 0);
}
.mb-glow {
    position: absolute;
    top: -110px;
    left: 50%;
    z-index: 3;
    width: 760px;
    height: 470px;
    max-width: 130vw;
    pointer-events: none;
    background: radial-gradient(
        circle at 50% 50%,
        color-mix(in srgb, var(--coco-gold-300) 18%, transparent),
        transparent 66%
    );
    transform: translate3d(calc(-50% + var(--hero-glow-x)), var(--hero-glow-y), 0);
    transition: transform var(--dur-slow) var(--ease-out);
}
.mb-hero-sequence {
    position: relative;
    z-index: 20;
    width: 100%;
    padding-top: calc(var(--site-sticky-top) + clamp(3.5rem, 8vw, 5.5rem));
    padding-bottom: clamp(4rem, 8vw, 6rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
}
.mb-logo-stage {
    display: grid;
    place-items: center;
}
.mb-logo-breathe {
    display: grid;
    place-items: center;
}
.mb-logo {
    width: min(560px, 82vw);
    height: auto;
    filter:
        drop-shadow(3px 4px 0 var(--mb-outline))
        drop-shadow(0 0 24px color-mix(in srgb, var(--coco-gold-300) 18%, transparent));
    transform: translate3d(var(--hero-logo-x), var(--hero-logo-y), 0);
    transition: transform var(--dur-slow) var(--ease-out);
}
.mb-slogan {
    max-width: 590px;
    font-size: clamp(15px, 1.4vw, 17px);
    line-height: 1.55;
    color: var(--mb-fg2) !important;
}
.coco-hero-play {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 6px;
}
/* IP box */
.mb-ipbox {
    display: inline-flex;
    align-items: stretch;
    gap: 3px;
    padding: 3px;
    background: color-mix(in srgb, var(--surface-bg) 88%, transparent);
    border: 1px solid color-mix(in srgb, var(--coco-gold-300) 28%, var(--surface-border));
    box-shadow: 2px 2px 0 var(--mb-outline);
    border-radius: 13px;
    overflow: hidden;
    font-family: var(--font-mc);
    font-size: 20px;
}
.mb-ipbox .ip {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Planche bois plus claire (relief : clair en haut) → l'IP ressort au lieu
       de se fondre dans le noir. */
    background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
    box-shadow: inset 0 2px 0 rgba(255,255,255,.06);
    color: var(--mb-ip);
    padding: 7px 14px;
    border-radius: 9px 4px 4px 9px;
    letter-spacing: .02em;
}
.mb-ipbox .mb-copy {
    min-height: 44px;
    padding: 8px 13px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--mb-border) 92%, var(--coco-gold-200)), var(--mb-border));
    border: 0;
    border-left: 1px solid color-mix(in srgb, var(--coco-gold-100) 18%, transparent);
    border-radius: 4px 9px 9px 4px;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--coco-stone-50) 18%, transparent),
        inset 0 -1px 0 color-mix(in srgb, var(--mb-outline) 28%, transparent);
    filter: none;
    transform: none;
}
.mb-ipbox .mb-copy:is(:hover, :focus-visible) {
    background: linear-gradient(180deg, color-mix(in srgb, var(--mb-border) 82%, var(--coco-gold-200)), var(--mb-border));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--coco-stone-50) 24%, transparent),
        inset 0 -1px 0 color-mix(in srgb, var(--mb-outline) 24%, transparent);
    filter: none;
    transform: none;
}
.mb-ipbox .mb-copy:active {
    box-shadow: inset 0 1px 2px color-mix(in srgb, var(--mb-outline) 34%, transparent);
    transform: translateY(1px);
}
/* Le widget de l'étape 2 garde la même structure et le même feedback que le hero. */
#rejoindre .mb-ipbox { font-size: clamp(14px, 4.4vw, 16px); }
#rejoindre .mb-ipbox .ip { min-width: 0; padding-inline: 14px; }
#rejoindre .mb-ipbox .ip .select-all {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#rejoindre .mb-copy { flex-shrink: 0; white-space: nowrap; }
/* Player counter */
@keyframes coco-player-pop {
    from { opacity: 0; transform: translateY(3px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.mb-players {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-mc);
    font-size: 16px;
    color: var(--mb-fg2);
    background: var(--surface-1);
    border: 1px solid var(--surface-border);
    padding: 8px 11px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    border-radius: 7px;
}
.coco-hero-meta {
    position: relative;
    z-index: 21;
    display: flex;
    max-width: min(100%, 44rem);
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px;
    background: var(--surface-1);
    border: 1px solid var(--surface-border);
    border-radius: 10px;
    box-shadow: var(--mb-shadow), inset 0 1px 0 rgba(255,255,255,.05);
}
.coco-hero-meta .mb-players {
    min-height: 36px;
    padding: 7px 10px;
    background: transparent;
    border: 0;
    box-shadow: none;
}
.coco-hero-meta .coco-community-link {
    position: relative;
    z-index: 1;
    min-height: 36px;
    padding: 7px 11px;
    border-left: 1px solid var(--surface-border);
}
.mb-players > span { animation: coco-player-pop var(--dur-base) var(--spring-soft) both; }
.mb-dot {
    position: relative;
    width: 11px; height: 11px;
    border-radius: 999px;
    background: var(--coco-leaf-300);
    box-shadow: 0 0 9px var(--coco-leaf-300);
    flex-shrink: 0;
}
.mb-dot.off { background: var(--mb-fg3); box-shadow: none; }
@keyframes mb-dot-pulse {
    from { opacity: .7; transform: scale(.7); }
    to { opacity: 0; transform: scale(1.65); }
}
.mb-dot:not(.off)::after {
    content: "";
    position: absolute;
    inset: -3px;
    border: 1px solid var(--coco-leaf-300);
    border-radius: inherit;
    animation: mb-dot-pulse calc(var(--dur-slow) * 3) var(--ease-out) infinite;
}

/* ---------- Titres de section ---------- */
.coco-home-section-head {
    text-align: center;
    margin-inline: auto;
}
.mb-h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(28px, 3.4vw, 38px);
    line-height: 1.1;
    letter-spacing: -.01em;
    color: var(--mb-fg1);
    text-shadow: 2px 2px 0 var(--mb-outline);
}

/* No hard separators: real scenes meet through short, tinted edge fades. */

/* Quiet bands remain available for utility sections that do not tell a visual
   story. The public home now uses real captures for its main chapters. */
.mb-band {
    background:
        linear-gradient(
            180deg,
            transparent,
            color-mix(in srgb, var(--surface-1) 52%, transparent) 14%,
            color-mix(in srgb, var(--surface-1) 52%, transparent) 86%,
            transparent
        );
}

/* Content chapters are transparent foreground planes. They never own a full-
   width overlay, mask, border or image, so scrolling cannot reveal a cut line. */
.home-motion-section {
    position: relative;
    overflow: visible;
    isolation: auto;
}
.home-scene-section {
    --scene-space-top: 4rem;
    isolation: auto;
    pointer-events: none;
    margin-top: 0;
    padding-top: var(--scene-space-top) !important;
    background: transparent;
}
.coco-identity-stage { --scene-space-top: 4rem; }
.coco-final-stage { --scene-space-top: 5rem; }
.home-motion-section > * {
    position: relative;
    z-index: 10;
}
.home-scene-section > * { pointer-events: auto; }
.home-scene-section .mb-panel {
    box-shadow: var(--mb-shadow-lg), 0 18px 48px rgba(12, 6, 2, .24);
}
.coco-join-section { min-height: 560px; display: grid; align-items: center; }
.coco-shop-stage { min-height: 460px; display: grid; align-items: center; }
.coco-identity-stage { min-height: 520px; }
.coco-news-stage { min-height: 580px; }
.coco-final-stage { min-height: 400px; display: grid; align-items: center; }

/* One strong entrance direction per chapter; child cards keep the shared
   stagger. Panels never fade with the scene: the image transition stays on
   the background plane while opaque content moves on the foreground plane. */
.js [data-reveal] .home-chapter {
    isolation: isolate;
    opacity: 1;
    scale: 1;
    transition:
        translate calc(var(--dur-slow) * 1.35) var(--spring-soft),
        transform var(--dur-base) var(--spring-soft);
}
.js .home-mb[data-reveal] .home-chapter .mb-stagger > * {
    opacity: 1;
    scale: 1;
}
.js [data-reveal] .home-chapter[data-home-enter="left"]:not(.is-in) {
    translate: calc(0px - clamp(44px, 7vw, 104px)) 0;
}
.js [data-reveal] .home-chapter[data-home-enter="right"]:not(.is-in) {
    translate: clamp(44px, 7vw, 104px) 0;
}
.js [data-reveal] .home-chapter[data-home-enter="up"]:not(.is-in) {
    translate: 0 clamp(38px, 6vw, 76px);
}

@media (min-width: 640px) {
    .home-scene-section { --scene-space-top: 5rem; }
    .coco-identity-stage { --scene-space-top: 6rem; }
    .coco-final-stage { --scene-space-top: 7rem; }
}
/* Generic wood panel. Hover lift is defined once in colors_and_type.css. */
.mb-panel {
    background: var(--surface-2);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-card);
    box-shadow: var(--mb-shadow);
}

/* ---------- Comment rejoindre ---------- */
.coco-join-section {
    scroll-margin-top: calc(var(--site-sticky-top) + 8px);
}
.coco-join-step {
    min-height: 100%;
}
.coco-join-motion {
    transform-origin: center;
}
.coco-join-step:is(:hover, :focus-within) .mb-copy::after {
    opacity: .72;
    transform: translateX(220%) skewX(-18deg);
    transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

/* ---------- Game modes ---------- */
.coco-modes-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.mb-mode {
    --mode-accent: var(--coco-gold-400);
    overflow: hidden;
}
.mb-mode.is-featured { grid-column: 1 / -1; }
.mb-mode.is-featured .top {
    min-height: 74px;
    font-size: 22px;
}
.mb-mode.is-featured .bd {
    max-width: 48rem;
    padding: 18px 20px;
    font-size: 15px;
}
.mb-mode .top {
    position: relative;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    color: var(--mb-fg1);
    background: var(--surface-3);
    border-bottom: 1px solid var(--surface-border);
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    padding: 0 16px;
    text-shadow: 1px 1px 0 var(--mb-outline);
}
.mb-mode .top::before {
    position: absolute;
    inset: 8px auto 8px 0;
    width: 3px;
    background: var(--mode-accent);
    opacity: .38;
    transform: scaleY(.55);
    transform-origin: center;
    transition: transform var(--dur-fast) var(--spring-soft), opacity var(--dur-fast) var(--ease-out);
    content: "";
}
.mb-mode .top > * { position: relative; z-index: 1; }
.mb-mode:is(:hover, :focus-within) .top::before { opacity: 1; transform: scaleY(1); }
.mb-mode .top > svg,
.mb-mode .top > i {
    width: 28px;
    height: 28px;
    padding: 5px;
    color: var(--coco-gold-200);
    background: var(--surface-1);
    border: 1px solid var(--surface-border);
    border-radius: 6px;
    box-shadow: 1px 1px 0 rgba(22,12,4,.75);
}
.mb-mode.m1,
.mb-mode.m2,
.mb-mode.m3,
.mb-mode.m4 { --mode-accent: var(--coco-gold-400); }
.mb-mode .bd { padding: 13px 16px; font-size: 14px; color: var(--mb-fg2); }

@media (max-width: 760px) {
    .coco-modes-grid { grid-template-columns: minmax(0, 1fr); }
    .mb-mode.is-featured { grid-column: auto; }
    .mb-mode.is-featured .top { min-height: 66px; font-size: 19px; }
    .mb-mode.is-featured .bd { padding: 15px 16px; font-size: 14px; }
}

.coco-vanilla-plus {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 28px;
    max-width: 56rem;
    margin: 0 auto;
    padding: 24px;
}
.coco-vanilla-plus-intro > p:last-child {
    color: var(--mb-fg2);
    font-size: var(--fs-md);
    line-height: 1.7;
}
.coco-plugin-list { display: grid; }
.coco-plugin-row {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--mb-border);
}
.coco-plugin-row::before {
    position: absolute;
    inset: 3px -8px;
    z-index: 0;
    background: var(--surface-3);
    border-radius: var(--radius-card);
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease-out);
    content: "";
}
.coco-plugin-row > * { position: relative; z-index: 1; }
.coco-plugin-row:is(:hover, :focus-within)::before { opacity: .72; }
.coco-plugin-row:first-child { padding-top: 0; }
.coco-plugin-row:last-child { padding-bottom: 0; border-bottom: 0; }
.coco-plugin-row > span:last-child { display: grid; gap: 3px; }
.coco-plugin-row strong { color: var(--mb-fg1); font-family: var(--font-display); }
.coco-plugin-row:is(:hover, :focus-within) strong { color: var(--coco-gold-100); }
.coco-plugin-row small { color: var(--mb-fg2); font-family: var(--font-body); font-size: var(--fs-xs); line-height: 1.5; }

.coco-shop-preview {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(20px, 3.2vw, 38px);
    min-height: 164px;
    padding: clamp(22px, 3.2vw, 34px);
    background:
        radial-gradient(
            circle at 0 50%,
            color-mix(in srgb, var(--coco-gold-300) 8%, transparent),
            transparent 34%
        ),
        var(--surface-2);
    border-color: var(--surface-border);
    box-shadow: var(--mb-shadow), inset 0 1px 0 rgba(255,255,255,.055);
}
.coco-shop-preview::before {
    content: "";
    position: absolute;
    inset: 24px auto 24px 0;
    z-index: 2;
    width: 3px;
    background: linear-gradient(180deg, transparent, var(--coco-gold-300), transparent);
    opacity: .78;
    pointer-events: none;
}
.coco-shop-mark {
    width: 84px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    color: var(--coco-gold-200);
    border: 1px solid color-mix(in srgb, var(--coco-gold-300) 28%, var(--surface-border));
    border-radius: 9px;
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--coco-gold-300) 7%, transparent), transparent 58%),
        var(--surface-1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
}
.coco-shop-mark img {
    width: min(70px, calc(100% - 14px));
    height: auto;
    image-rendering: pixelated;
    filter: drop-shadow(0 2px 0 color-mix(in srgb, var(--mb-outline) 62%, transparent));
}
.coco-shop-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
    color: var(--coco-gold-200);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
}
.coco-shop-eyebrow::before {
    width: 18px;
    height: 2px;
    background: var(--coco-gold-400);
    opacity: .82;
    content: "";
}
.coco-shop-copy h2 {
    color: var(--coco-gold-100);
    font-family: var(--font-display);
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 700;
    line-height: 1.05;
}
.coco-shop-copy > p:last-child {
    max-width: 40rem;
    margin-top: 8px;
    color: var(--mb-fg2);
    font-size: var(--fs-sm);
    line-height: 1.6;
}
.coco-shop-action {
    display: grid;
    justify-items: end;
    gap: 10px;
}
.coco-shop-action .coco-price { font-size: 22px; }
.coco-shop-cta {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 15px 10px 17px;
    color: var(--mb-fg1);
    background: color-mix(in srgb, var(--surface-3) 86%, var(--mb-outline));
    border: 1px solid color-mix(in srgb, var(--coco-gold-300) 26%, var(--surface-border));
    border-radius: 7px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition:
        color var(--dur-fast) var(--ease-out),
        background-color var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out),
        transform var(--dur-fast) var(--spring-soft);
}
.coco-shop-cta::after {
    position: absolute;
    inset: auto 14px 0;
    height: 2px;
    background: var(--coco-gold-300);
    opacity: .65;
    transform: scaleX(.28);
    transform-origin: right;
    transition:
        opacity var(--dur-fast) var(--ease-out),
        transform var(--dur-base) var(--ease-out);
    content: "";
}
.coco-shop-cta svg { transition: transform var(--dur-fast) var(--ease-out); }
.coco-shop-cta:is(:hover, :focus-visible) {
    color: var(--coco-gold-100);
    background: color-mix(in srgb, var(--coco-gold-300) 7%, var(--surface-3));
    border-color: color-mix(in srgb, var(--coco-gold-300) 52%, var(--surface-border));
    transform: translateY(-1px);
}
.coco-shop-cta:is(:hover, :focus-visible)::after {
    opacity: 1;
    transform: scaleX(1);
    transform-origin: left;
}
.coco-shop-cta:is(:hover, :focus-visible) svg { transform: translateX(3px); }
.coco-shop-cta:active { transform: translateY(0) scale(.99); }

/* ---------- Captures réelles ---------- */
.coco-spawn-stage {
    background:
        linear-gradient(180deg, transparent, color-mix(in srgb, var(--surface-1) 48%, transparent) 18%, color-mix(in srgb, var(--surface-1) 48%, transparent) 82%, transparent);
}
.coco-spawn-intro {
    max-width: 42rem;
    margin: 12px auto 0;
    color: var(--mb-fg2);
    line-height: 1.65;
}
.coco-spawn-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(12px, 2vw, 18px);
}
.coco-spawn-shot {
    border-width: 1px;
    border-color: color-mix(in srgb, var(--coco-gold-300) 18%, var(--surface-border));
    border-radius: 12px;
    box-shadow: 0 12px 30px color-mix(in srgb, var(--mb-outline) 20%, transparent);
}
.coco-spawn-shot::after { display: none; }
.coco-spawn-shot.is-featured {
    grid-column: 1 / -1;
    aspect-ratio: 21 / 9;
}

@media (max-width: 700px) {
    .coco-spawn-grid { grid-template-columns: 1fr; }
    .coco-spawn-shot.is-featured { grid-column: auto; aspect-ratio: 16 / 9; }
}

/* ---------- Actualités ---------- */
.coco-news-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 16px;
}
.coco-news-heading .mb-h2 {
    grid-column: 2;
    text-align: center;
}
.coco-news-heading > .coco-news-all {
    grid-column: 3;
    justify-self: end;
}
.home-news-empty {
    grid-template-columns: 1fr;
    justify-items: center;
    width: min(100%, 640px);
    margin-inline: auto;
    padding: 26px;
    text-align: center;
}
.home-news-empty .coco-empty-copy { justify-items: center; padding-top: 0; }
.mb-news-card {
    min-height: 100%;
    overflow: hidden;
}
.mb-news-card .coco-card-cover {
    aspect-ratio: 16 / 9;
    margin: 0;
    border: 0;
    border-bottom: 2px solid var(--mb-border);
    border-radius: 0;
    box-shadow: none;
}
.mb-news-card .coco-news-fallback {
    aspect-ratio: 16 / 9;
    margin: 0;
    border-width: 0 0 2px;
    border-color: var(--mb-border);
    border-radius: 0;
    box-shadow: none;
}
.coco-news-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
}
.coco-news-card-body h3 {
    color: var(--mb-fg1);
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: 1.4;
}
.mb-news-card:is(:hover, :focus-visible) .coco-news-card-body h3 { color: var(--coco-gold-100); }
.coco-news-excerpt {
    color: var(--mb-fg2) !important;
    font-size: var(--fs-sm);
    line-height: 1.65;
}
.coco-news-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 12px;
    color: var(--mb-fg3);
    border-top: 1px solid var(--mb-border);
    font-size: var(--fs-xs);
}
.coco-news-read,
.coco-news-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--coco-gold-200);
    font-size: var(--fs-xs);
    font-weight: 800;
}
.coco-news-read svg,
.coco-news-all svg {
    transition: transform var(--dur-fast) var(--ease-out);
}
.mb-news-card:hover .coco-news-read svg,
.coco-news-all:hover svg {
    transform: translateX(3px);
}

/* ---------- CTA final ---------- */
.coco-final-cta {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(20px, 4vw, 36px);
    padding: clamp(24px, 5vw, 42px);
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--coco-gold-300) 8%, transparent),
            transparent 44%
        ),
        var(--surface-2);
}
.coco-final-icon {
    width: 58px;
    height: 58px;
    color: var(--coco-gold-300);
}
.coco-final-cta h2 {
    color: var(--mb-fg1);
    font-family: var(--font-display);
    font-size: clamp(25px, 3vw, 34px);
    font-weight: 700;
    line-height: 1.1;
    text-shadow: 2px 2px 0 var(--mb-outline);
}
.coco-final-cta p:last-child {
    max-width: 36rem;
    margin-top: 8px;
    color: var(--mb-fg2);
    font-size: var(--fs-sm);
    line-height: 1.6;
}
.coco-final-actions {
    display: grid;
    justify-items: center;
    gap: 14px;
    transition: transform var(--dur-fast) var(--spring-soft);
}
.coco-final-cta:is(:hover, :focus-within) .coco-final-actions { transform: translateX(2px); }

@media (max-width: 760px) {
    .coco-vanilla-plus { grid-template-columns: 1fr; }
    .coco-shop-preview { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .coco-shop-mark { width: 76px; margin-inline: auto; }
    .coco-shop-eyebrow { justify-content: center; }
    .coco-shop-action { justify-items: center; }
    .coco-final-cta { grid-template-columns: 1fr; text-align: center; }
    .coco-final-icon { margin-inline: auto; }
    .coco-final-actions { width: 100%; }
}

/* Gros numéro d'étape de « Comment rejoindre » (relief bois, comme les titres). */
.coco-step-num {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-2xl);
    line-height: 1;
    color: var(--coco-gold-300);
    text-shadow: 2px 2px 0 var(--mb-outline);
}

@media (max-width: 639px) {
    .mb-hero {
        min-height: auto;
    }
    .mb-hero-sequence {
        padding-top: calc(var(--site-sticky-top) + 3.25rem);
        padding-bottom: 4rem;
        gap: 17px;
    }
    .coco-hero-meta {
        width: 100%;
        max-width: 25rem;
        flex-direction: column;
        padding: 8px;
    }
    .coco-hero-meta .mb-players,
    .coco-hero-meta .coco-community-link { width: 100%; }
    .coco-hero-meta .coco-community-link {
        border-top: 1px solid var(--surface-border);
        border-left: 0;
    }
    .coco-hero-play {
        width: 100%;
        max-width: 25rem;
        flex-direction: column;
    }
    .coco-hero-primary,
    .coco-hero-play .mb-ipbox {
        width: 100%;
    }
    .coco-hero-play .mb-ipbox {
        font-size: clamp(15px, 4.5vw, 18px);
    }
    .coco-hero-play .mb-ipbox .ip {
        min-width: 0;
        flex: 1;
        padding-inline: 12px;
    }
    /* Mobile <source> assets are already art-directed around their subject. */
    .home-backdrop-scene img { object-position: 50% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .mb-hero-dust,
    .mb-logo-breathe,
    .mb-logo,
    .mb-hero-depth,
    .mb-logo-stage,
    .coco-hero-primary {
        animation: none !important;
        transform: none !important;
        transition: none !important;
    }
    .coco-final-actions,
    .home-backdrop-scene {
        animation: none !important;
        transition: none !important;
    }
    .coco-final-actions { transform: none !important; }
    .mb-mode .top::before { transform: scaleY(1) !important; }
    .mb-glow {
        transform: translateX(-50%) !important;
        transition: none !important;
    }
    .mb-players > span { animation: none !important; opacity: 1 !important; transform: none !important; }
    .coco-news-all:hover svg,
    .mb-news-card:hover .coco-news-read svg,
    .coco-shop-cta:is(:hover, :focus-visible) svg {
        transform: none !important;
    }
    .coco-shop-cta:is(:hover, :focus-visible) { transform: none !important; }
}

@media (forced-colors: active) {
    .home-world-backdrop { display: none; }
    .home-scene-section {
        margin-top: 0;
        padding-top: var(--scene-space-top) !important;
        background: Canvas;
    }
}