.triptikVerticalScroll{
   --spaceBottom_TVS:75px;
   --ratio_TVS:1;
   --TVS_H3:250px;
   --TVS_H2:250px;
   --TVS_H1:250px;
   position: relative; padding: 0 !important; padding-top: 100vh !important;
   --TVS_maxWitdh:var(--MaxSizeDefault);

}
.bg_choice.triptikVerticalScroll.shapeChange[data-shape="1"]{
   display: block;
   --TVS_maxWitdh:100%;
}


.triptikVerticalScroll .Hscroll_start, .triptikVerticalScroll .Hscroll_end{pointer-events:none;height: 0;clear: both; float: none}
.triptikVerticalScroll .Hscroll,
.bg_choice.shapeChange[data-shape="1"]>.Hscroll{ width:80%;float:left;pointer-events:none;}
.triptikVerticalScroll .TVS1et2, .triptikVerticalScroll .TVS1et2 + .bloc2_bgcolor{max-width: var(--TVS_maxWitdh) !important; margin-left: auto; margin-right: auto}
.triptikVerticalScroll .TVS1et2{z-index: 2; position: relative; pointer-events: none; will-change: transform opacity; }

.triptikVerticalScroll .Hscroll1{height: calc((var(--TVS_H1) * var(--ratio_TVS)) - (var(--spaceBottom_TVS) * (var(--ratio_TVS) * 2)))}
.triptikVerticalScroll .Hscroll2{height: calc(((max(var(--TVS_H2), var(--TVS_H3)) ) * var(--ratio_TVS)) - (var(--spaceBottom_TVS) * (var(--ratio_TVS) * 2))) }
.triptikVerticalScroll .Hscroll3{height: 0}
/*.triptikVerticalScroll .Hscroll3{height: calc(var(--TVS_H3) * var(--ratio_TVS))}*/

.triptikVerticalScroll .stayFix,
.bg_choice.shapeChange[data-shape="1"] > .stayFix{ float:right; height: calc( ((var(--TVS_H1) * var(--ratio_TVS)) - (var(--spaceBottom_TVS) * (var(--ratio_TVS) * 2))) + (((max(var(--TVS_H2), var(--TVS_H3)) ) * var(--ratio_TVS)) - (var(--spaceBottom_TVS) * (var(--ratio_TVS) * 2)))); width: 10%;}
.triptikVerticalScroll .allTVS{ 
   --centrageHaut:calc((100vh - (max(var(--TVS_H3) ,var(--TVS_H2) ,var(--TVS_H1)) + (var(--spaceBottom_TVS) * 2) )) * 0.5);

   position: absolute;left: 0; width: 100%;

   height:calc( max(var(--TVS_H3) ,var(--TVS_H2) ,var(--TVS_H1)) + (var(--spaceBottom_TVS) * 2));
   /*margin-bottom: calc( (var(--TVS_H1) - var(--spaceBottom_TVS) ) * -1);
   margin-bottom:calc( ( (min(var(--TVS_H3), var(--TVS_H2), var(--TVS_H1)) - clamp(var(--TVS_H3), var(--TVS_H2), var(--TVS_H1)) - max(var(--TVS_H3), var(--TVS_H2), var(--TVS_H1)) ) - (var(--spaceBottom_TVS)) * -1));
   margin-bottom: calc( clamp(var(--TVS_H3), var(--TVS_H2), var(--TVS_H1)) - max(var(--TVS_H3), var(--TVS_H2), var(--TVS_H1)) - max(var(--centrageHaut), 0px) );*/
   top:max(var(--centrageHaut), 0px) ;
}
/* etape debut */


.triptikVerticalScroll .stayFix.animDone ~ .allTVS,
.triptikVerticalScroll .Hscroll_start.animDone ~ .allTVS{position: fixed;}

.triptikVerticalScroll .allTVS .bloc2_bgcolor[data-whitch]{position: relative;pointer-events: auto;border-radius:4rem; overflow: hidden; box-shadow: 0 100px 100px rgba(0,0,0,0.2)}
.triptikVerticalScroll .allTVS .bloc2_bgcolor[data-whitch]::after{content: ""; z-index: -1;display: block; position: absolute; top: 0;left: 0;width: 100%; height: 100%; background: var(--bgColor_TVS);}
.triptikVerticalScroll .allTVS .bloc2_bgcolor[data-whitch]::after{filter: brightness(0.95)}
.triptikVerticalScroll .allTVS .bloc2_bgcolor[data-whitch="1"]{z-index: 3; will-change: transform opacity}
.triptikVerticalScroll .allTVS .bloc2_bgcolor[data-whitch="2"]{z-index: 2; top:calc( (var(--TVS_H2) - var(--spaceBottom_TVS)) * -1)}
.triptikVerticalScroll .allTVS .bloc2_bgcolor[data-whitch="3"]{z-index: 1; top:calc( (var(--TVS_H2) + var(--TVS_H3) - (var(--spaceBottom_TVS) * 2)) * -1 )}



/* anim */
.triptikVerticalScroll .Hscroll1.animDone ~ .allTVS .bloc2_bgcolor[data-whitch="1"]{animation: TVS_move1 1s linear infinite; animation-play-state: paused; animation-delay: calc(var(--triptikVerticalScroll1) * -1s) ; animation-iteration-count: 1; animation-fill-mode: forwards;}
.triptikVerticalScroll .Hscroll2.animDone ~ .allTVS .TVS1et2{animation: TVS_move1et2 1s linear infinite; animation-play-state: paused; animation-delay: calc(var(--triptikVerticalScroll2) * -1s) ; animation-iteration-count: 1; animation-fill-mode: forwards;}


@keyframes TVS_move1 {
   0% {transform: translateY(0%);}
   100% {transform: translateY(calc((var(--TVS_H2)* -1) + var(--spaceBottom_TVS) - 15px)); }
}

@keyframes TVS_move1et2 {
   0% {transform: translateY(0%);}
   100% {transform: translateY(calc((var(--TVS_H3)* -1) + var(--spaceBottom_TVS) - 15px)); }
}

.triptikVerticalScroll .Hscroll_end.animDone ~ .allTVS{
   top:auto; position: absolute; margin-top: 0;
   bottom:calc(max( (var(--centrageHaut)),  0px));
}


@media screen and (max-width: 600px) {
   .triptikVerticalScroll .Hscroll3{height: var(--TVS_H3)}
   .triptikVerticalScroll .allTVS .bloc2_bgcolor[data-whitch] .bg_choice{min-height: 100vw}
}