/* ===== SV COMMON (structure overlay + bouton) ===== */

body.sv-lock { overflow: hidden; }

/* Overlay plein écran */
#sv-story.sv-story{
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #070A12;
    color: rgba(255,255,255,.92);
}

/* Inner */
.sv-story__inner{
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

/* Scenes superposées */
.sv-scene{
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
}
.sv-scene.is-active{
    opacity: 1;
    pointer-events: auto;
}

/* Bouton NEXT (bas-droite desktop, bas mobile) */
.sv-next{
    position: fixed;
    z-index: 10000;
    right: 22px;
    bottom: 22px;

    height: 46px;
    padding: 0 16px;
    border-radius: 14px;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    font-weight: 800;
    font-size: 14px;
    color: rgba(255,255,255,.92);

    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(8px);

    cursor: pointer;
    user-select: none;

    transform: translateY(0);
    transition: transform .2s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
}

.sv-next:hover{
    transform: translateY(-2px);
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.22);
}

.sv-next:active{
    transform: translateY(0);
}

.sv-next[aria-hidden="true"]{
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
}

/* Mobile : bouton collé en bas */
@media (max-width: 720px){
    .sv-next{
        left: 14px;
        right: 14px;
        bottom: 14px;
        width: calc(100% - 28px);
        justify-content: center;
    }
}








/* BTN DE NAVIGATION NAV FIXE */
.sv-nav{
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 10050;
    display: flex;
    gap: 10px;
    align-items: center;
    pointer-events: auto;
    transform: translateY(0);
    opacity: 1;
    transition: opacity .22s ease, transform .22s ease;
}

.sv-nav.is-hidden{
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}

.sv-nav__btn{
    height: 44px;
    padding: 0 16px;
    border-radius: 14px;
    font-weight: 850;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.92);
    cursor: pointer;
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
    backdrop-filter: blur(10px);
}

.sv-nav__btn:hover{
    transform: translateY(-2px);
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.22);
}

.sv-nav__btn--primary{
    background: rgba(76,195,189,.18);
    border-color: rgba(76,195,189,.42);
    box-shadow: 0 20px 60px rgba(0,0,0,.28);
}

.sv-nav__btn--ghost{
    background: rgba(255,255,255,.04);
}

/* MOBILE: barre en bas pleine largeur */
@media (max-width: 720px){
    .sv-nav{
        left: 12px;
        right: 12px;
        bottom: 12px;
        justify-content: space-between;
    }
    .sv-nav__btn{
        flex: 1;
        justify-content: center;
    }
}

.sv-nav.is-busy{
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease;
}
.sv-nav{
    transition: opacity .2s ease, transform .2s ease;
}