body {
    margin: 0;
    overflow-y: hidden;
}
main, aside {
    width: 400vw;
    height: 100vh;
    position: absolute;
}
main {
    display: flex;
    background: white;
    z-index: 1;
    transition: all 1s;
}
*:has(.scroller){
    position: relative;
}
.scroller-target {
    position: absolute;
    top: 0;
    transform: translateY(100vh);
}




/* au survol par en dessous */
.truc {
    background: yellow;
}
aside {
    background: yellow;
    transform: translateY(100vh );
    transition: all 1s;
    z-index: 2;
    
}
.scrolled main {
    transform: translateY(-100vh);
}
.scrolled .item {
    transform: translateY(0);
}
aside.up {
    transform: translateY(calc(100vh - 50px));
}

aside:hover {
    transform: translateY(50vh);

}