.bgShowTextOnScroll.bg_choice{position: relative;padding:0 !important;padding-top: 100vh !important; overflow: hidden}
.bgShowTextOnScroll .p-start{height: 0}
.bgShowTextOnScroll .p-anim{pointer-events:none;height: 100vh;}
.bgShowTextOnScroll .p-text{pointer-events:none;min-height:100vh; width: 100%; display:flex; align-items: center; justify-content: center;
left:0; top:0;z-index: 3;opacity: 0; position: absolute;}
  .bgShowTextOnScroll .p-text>div{max-width: var(--MaxSizeMedium); pointer-events: auto}

.bgShowTextOnScroll .bgWrap,
.bgShowTextOnScroll .bgWrap2{width:100%; height:100vh;transform: scale(1.4) translateZ(0);}
.bgShowTextOnScroll .bgWrap2{position: absolute; top: 0; left:0;z-index: -1 !important;}
.bgShowTextOnScroll .p-end.animDone .bgWrap2{bottom: 0; top:auto;}

.bgShowTextOnScroll{color:#FFF;}
.bgShowTextOnScroll>.BgColorOverImg{z-index: 1 !important; opacity:0.1}


/* etape debut */
.bgShowTextOnScroll .p-start.animDone ~ .p-text{         position: fixed; }
.bgShowTextOnScroll .p-start.animDone ~ .bgWrap:not(.bgWrap2){         position: fixed; }
.bgShowTextOnScroll .p-start.animDone ~ .BgColorOverImg{ position: fixed; }

.bgShowTextOnScroll .p-anim.animDone ~ .p-text{        animation: BST_fadeIn 1s linear infinite; animation-play-state: paused; animation-delay: calc(var(--AppleScroll) * -1s) ; animation-iteration-count: 1; animation-fill-mode: forwards;}
.bgShowTextOnScroll .p-anim.animDone ~ .bgWrap,
.bgShowTextOnScroll .p-anim.animDone ~ .bgWrap2{       animation: BST_deZoom 1s linear infinite; animation-play-state: paused; animation-delay: calc(var(--AppleScroll) * -1s) ; animation-iteration-count: 1; animation-fill-mode: forwards;}
.bgShowTextOnScroll .p-anim.animDone ~ .BgColorOverImg{animation: BST_FonceOpac 1s linear infinite; animation-play-state: paused; animation-delay: calc(var(--AppleScroll) * -1s) ; animation-iteration-count: 1; animation-fill-mode: forwards;}
  .bgShowTextOnScroll .p-anim.animDone ~ .bgWrap2{top: auto; bottom:0;}
/* etape fin */
.bgShowTextOnScroll .p-end.animDone ~ .p-text,
.bgShowTextOnScroll .p-end.animDone ~ .bgWrap,
.bgShowTextOnScroll .p-end.animDone ~ .BgColorOverImg{position: absolute; top:auto; bottom: 0}


@keyframes BST_fadeIn {
   0% {opacity: 0}
   65% {opacity: 1}
   100% {opacity: 1}
 }
@keyframes BST_deZoom {
   0% {transform: scale(1.4) translateZ(0);}
   65% {transform: scale(1) translateZ(0);}
   100% {transform: scale(1) translateZ(0);}
}

.bgShowTextOnScroll.shapeChange[data-shape="1"] .p-anim.animDone ~ .bgWrap,
.bgShowTextOnScroll.shapeChange[data-shape="1"] .p-anim.animDone ~ .bgWrap2{animation: BST_deZoomAndCrop 1s linear infinite; animation-play-state: paused; animation-delay: calc(var(--AppleScroll) * -1s) ; animation-iteration-count: 1; animation-fill-mode: forwards;}
.bgShowTextOnScroll.shapeChange[data-shape="1"] .p-anim.animDone ~ .BgColorOverImg,
.bgShowTextOnScroll.shapeChange[data-shape="1"] .p-anim.animDone ~ .BgColorOverImg{animation: BST_deZoomAndCrop 1s linear infinite; animation-play-state: paused; animation-delay: calc(var(--AppleScroll) * -1s) ; animation-iteration-count: 1; animation-fill-mode: forwards;}

@keyframes BST_deZoomAndCrop {
   0% {transform: scale(1.4) translateZ(0); clip-path: inset(0 0)}
   65% {transform: scale(1) translateZ(0);  clip-path:inset(0 calc( (100% - var(--MaxSizeDefault)) /2) round 25px)}
   100% {transform: scale(1) translateZ(0); clip-path:inset(0 calc( (100% - var(--MaxSizeDefault)) /2) round 25px)}
}

@keyframes BST_FonceOpac {
   0% {opacity: 0.1;}
   65% {opacity: 0.5;}
   100% {opacity: 0.5;}
 }

.editableZone .bgShowTextOnScroll.bloc.hover::after{content:"Blocs défilants";}
.editableZone .bgShowTextOnScroll>i[class*="Ico "]{margin-top: 15px}

@media screen and (max-width: 600px) {

   @keyframes BST_Crop {
      0% { clip-path: inset(0 0)}
      100% { clip-path: inset(0 0)}
   }
    /*.bloc_defilant .wrap_Txt_Img .p0.animDone ~ .b1, .bloc_defilant .wrap_Txt_Img .p0.animDone ~ .b2{position:fixed; top:0; right: 0}

    .bloc_defilant .b1, .bloc_defilant .b2, .bloc_defilant .b3{width: 100%; height: 50vh;}
    .bloc_defilant .p1, .bloc_defilant .p2, .bloc_defilant .p3{display: block; width: 100%;height: auto !important;min-height: 100vh; padding-top: 2em;}
    .bloc_defilant .p0{display: block; position: absolute; top: calc(100vh); height: 10px;pointer-events: none; width: 50%;}
    .bloc_defilant .p1{padding-top: calc(50vh + 2em);}

    .bloc_defilant .wrap_Txt_Img .p4.animDone ~ .b3{z-index: 3;animation: none;bottom:50vh; top:auto; position: absolute;}
    .bloc_defilant.shapeChange[data-shape="1"] .p1, .bloc_defilant.shapeChange[data-shape="1"] .p2, .bloc_defilant.shapeChange[data-shape="1"] .p3, .bloc_defilant.shapeChange[data-shape="1"] .p4{margin-left: 0;}
    */
}