/**
 * Slice 263 — Wall prep_before_deadline hero only.
 * Scoped under body.prep-view; no effect on other wall states.
 */

/* --- Chrome: full bleed prep (moved from wall-main) --- */
body.prep-view .wall-header {
    display: none;
}

body.prep-view .wall-footer {
    display: none;
}

/* Slice 289 — invite « Cliquez pour activer le son » : inutile sur le hero préparation ; SoundManager reste actif ailleurs sur le mur */
body.prep-view #soundUnlockHint {
    display: none !important;
}

body.prep-view .wall-container--prep {
    padding: 0;
    overflow: visible;
    min-height: 0;
}

body.prep-view .prep-screen {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    text-align: left;
    background: linear-gradient(145deg, rgba(8, 14, 32, 0.97) 0%, rgba(12, 18, 38, 0.96) 45%, rgba(6, 10, 22, 0.98) 100%);
}

body.prep-view .prep-screen::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url(../../images/backgrounds/background-preparation.png) center/cover no-repeat;
    opacity: 0.14;
    z-index: 0;
    pointer-events: none;
}

body.prep-view .prep-screen-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(1.35rem, 2vh, 1.65rem);
    /* Ancrage haut : marge stable sous le bord viewport (projection + mobile). */
    padding: clamp(2rem, 4.5vh, 4rem) clamp(1.35rem, 4vw, 4.25rem) clamp(1rem, 2vh, 1.5rem);
    max-width: min(72rem, 92vw);
    flex: 1 1 auto;
    justify-content: flex-start;
    align-content: flex-start;
    min-height: 0;
}

body.prep-view .prep-logo {
    max-height: clamp(84px, 11vh, 138px);
    max-width: min(300px, 58vw);
    object-fit: contain;
    margin-bottom: 0.25rem;
    align-self: flex-start;
}

/* Meta pills */
body.prep-view .prep-meta-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 0.75rem;
    align-items: center;
}

body.prep-view .prep-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 1.05rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

body.prep-view .prep-pill-text {
    font-size: clamp(1rem, 1.55vw, 1.3rem);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: 0.02em;
}

/* Title — strategy B: first typographic line emphasis (single string) */
body.prep-view .prep-title {
    margin: 0;
    font-size: clamp(1.9rem, 3.65vw, 3.25rem);
    font-weight: 800;
    color: #f1c453;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
    line-height: 1.12;
    max-width: 20ch;
    text-align: left;
}

body.prep-view .prep-title::first-line {
    color: #ffffff;
    font-weight: 800;
    font-size: 1.05em;
    letter-spacing: 0.03em;
}

body.prep-view .prep-title.prep-title--simple::first-line {
    color: inherit;
    font-size: inherit;
}

body.prep-view .prep-status {
    margin: 0;
    font-size: clamp(1.22rem, 2.25vw, 1.62rem);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    animation: prep-blink 1.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    body.prep-view .prep-status {
        animation: none;
    }
}

@keyframes prep-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

/* Four-column countdown */
body.prep-view .prep-countdown {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 0.28rem;
    margin: 0.5rem 0 0.25rem;
    width: 100%;
    max-width: min(36rem, 100%);
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}

body.prep-view .prep-countdown-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 0.1rem;
    position: relative;
}

body.prep-view .prep-countdown-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 15%;
    bottom: 25%;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(241, 196, 83, 0.65), transparent);
    pointer-events: none;
}

body.prep-view .prep-countdown-value {
    font-size: clamp(1.95rem, 3.95vw, 3.65rem);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #ffffff;
    line-height: 1.05;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
    word-break: break-word;
}

body.prep-view .prep-countdown-label {
    margin-top: 0.35rem;
    font-size: clamp(0.7rem, 1.12vw, 0.88rem);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
}

body.prep-view .prep-cta {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 1.05rem 2.35rem;
    font-size: clamp(1.08rem, 1.55vw, 1.28rem);
    font-weight: 800;
    color: #0a0e18;
    background: #f1c453;
    border-radius: 999px;
    text-decoration: none;
    letter-spacing: 0.02em;
    box-shadow: 0 6px 28px rgba(241, 196, 83, 0.35);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

body.prep-view .prep-cta:hover {
    background: #ffd870;
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(241, 196, 83, 0.45);
}

body.prep-view .prep-ticker-wrap {
    position: relative;
    width: 100%;
    margin-top: auto;
    overflow: hidden;
    flex-shrink: 0;
    padding: 1.25rem 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}

body.prep-view .prep-ticker {
    display: flex;
    width: max-content;
    animation: prep-ticker-scroll 45s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    body.prep-view .prep-ticker {
        animation: none;
    }
}

body.prep-view .prep-ticker-inner {
    white-space: nowrap;
    padding: 0 3rem;
    font-size: clamp(1.05rem, 1.35vw, 1.22rem);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

@keyframes prep-ticker-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@media (min-width: 1920px) {
    body.prep-view .prep-title {
        font-size: 3.4rem;
    }
    body.prep-view .prep-countdown-value {
        font-size: 3.95rem;
    }
}

/* Slice 289 — responsive tablet / mobile (spec §2.1–2.3); base rules above unchanged */
@media (max-width: 1024px) {
    body.prep-view .prep-screen-content {
        gap: clamp(0.75rem, 1.5vh, 1.1rem);
        padding: clamp(1.15rem, 2.5vh, 2rem) clamp(1rem, 3vw, 2rem) clamp(0.55rem, 1.2vh, 0.85rem);
        z-index: 2;
    }

    body.prep-view .prep-logo {
        max-height: clamp(56px, 9vh, 96px);
        max-width: min(240px, 62vw);
    }

    body.prep-view .prep-meta-pills {
        gap: 0.45rem 0.55rem;
    }

    body.prep-view .prep-pill {
        padding: 0.32rem 0.85rem;
    }

    body.prep-view .prep-pill-text {
        font-size: clamp(0.82rem, 1.4vw, 1.05rem);
        font-weight: 600;
    }

    body.prep-view .prep-title {
        font-size: clamp(1.35rem, 3.5vw, 1.95rem);
    }

    body.prep-view .prep-title::first-line {
        font-size: 1.03em;
    }

    body.prep-view .prep-status {
        font-size: clamp(0.95rem, 1.9vw, 1.25rem);
    }

    body.prep-view .prep-countdown {
        gap: 0.3rem;
        margin: 0.35rem 0 0.15rem;
        max-width: min(31rem, 100%);
    }

    body.prep-view .prep-countdown-item {
        padding: 0 0.14rem;
    }

    body.prep-view .prep-countdown-value {
        font-size: clamp(1.35rem, 3.2vw, 2.35rem);
    }

    body.prep-view .prep-countdown-label {
        font-size: clamp(0.58rem, 0.95vw, 0.75rem);
    }

    body.prep-view .prep-cta {
        margin-top: 0.55rem;
        padding: 0.75rem 1.65rem;
        font-size: clamp(0.9rem, 1.4vw, 1.02rem);
        font-weight: 650;
        letter-spacing: 0.025em;
        position: relative;
        z-index: 3;
    }

    body.prep-view .prep-ticker-wrap {
        padding: 0.85rem 0;
        z-index: 0;
    }

    body.prep-view .prep-ticker-inner {
        padding: 0 2rem;
        font-size: clamp(0.88rem, 1.25vw, 1.05rem);
        font-weight: 600;
    }
}

@media (max-width: 640px) {
    body.prep-view .prep-screen {
        min-height: 100vh;
        height: 100vh;
        max-height: 100vh;
        overflow: hidden;
    }

    @supports (height: 100dvh) {
        body.prep-view .prep-screen {
            min-height: 100dvh;
            height: 100dvh;
            max-height: 100dvh;
        }
    }

    body.prep-view .prep-screen-content {
        gap: clamp(0.7rem, 1.6vh, 1rem);
        padding: clamp(0.65rem, 2vh, 1rem) clamp(0.75rem, 4vw, 1rem) clamp(0.45rem, 1.1vh, 0.75rem);
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        z-index: 2;
    }

    body.prep-view .prep-logo {
        max-height: clamp(52px, 12vh, 104px);
        max-width: min(280px, 88vw);
    }

    body.prep-view .prep-meta-pills {
        gap: 0.4rem 0.5rem;
    }

    body.prep-view .prep-pill {
        padding: 0.16rem 0.48rem;
    }

    body.prep-view .prep-pill-text {
        font-size: clamp(0.58rem, 2.5vw, 0.72rem);
        font-weight: 500;
    }

    body.prep-view .prep-title {
        font-size: clamp(1.05rem, 5.5vw, 1.42rem);
        line-height: 1.1;
    }

    body.prep-view .prep-title::first-line {
        font-size: 1em;
    }

    body.prep-view .prep-status {
        font-size: clamp(0.78rem, 3.2vw, 0.92rem);
    }

    body.prep-view .prep-countdown {
        flex-wrap: nowrap;
        align-items: flex-end;
        width: 100%;
        max-width: 100%;
        gap: 0.22rem;
        margin: 0.35rem 0 0.2rem;
    }

    body.prep-view .prep-countdown-item {
        flex: 1 1 0;
        min-width: 0;
        padding: 0 0.1rem;
    }

    body.prep-view .prep-countdown-item:not(:last-child)::after {
        display: none;
    }

    body.prep-view .prep-countdown-value {
        font-size: clamp(0.68rem, 3.4vw, 0.95rem);
        line-height: 1;
    }

    body.prep-view .prep-countdown-label {
        margin-top: 0.2rem;
        font-size: clamp(0.38rem, 1.55vw, 0.52rem);
        letter-spacing: 0.085em;
        white-space: nowrap;
    }

    body.prep-view .prep-cta {
        margin-top: clamp(0.85rem, 2.6vh, 1.35rem);
        padding: 0.55rem 1.2rem;
        font-size: clamp(0.78rem, 3.5vw, 0.86rem);
        font-weight: 650;
        letter-spacing: 0.028em;
        position: relative;
        z-index: 3;
    }

    body.prep-view .prep-ticker-wrap {
        padding: 0.5rem 0;
        z-index: 0;
    }

    body.prep-view .prep-ticker-inner {
        padding: 0 1.25rem;
        font-size: clamp(0.72rem, 2.9vw, 0.82rem);
        font-weight: 600;
    }
}