.bloc_defilant .p1,.bloc_defilant .p2,.bloc_defilant .p3{height:100vh; width:50%; display:flex; align-items: center;}
.bloc_defilant .p1>div,.bloc_defilant .p2>div,.bloc_defilant .p3>div{width: 100%;}

.bloc_defilant .p4{height: 0;width: 50%}
.bloc_defilant .b1,.bloc_defilant .b2,.bloc_defilant .b3{width:50%; height:100vh;position:absolute; right:0;}

    .bloc_defilant.bg_choice.shapeChange[data-shape="1"]{height: auto;}
    .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: 50%}
    .bloc_defilant.shapeChange[data-shape="1"] .b1, .bloc_defilant.shapeChange[data-shape="1"] .b2, .bloc_defilant.shapeChange[data-shape="1"] .b3{left:0; right:auto;}

.bloc_defilant .b1{top:0;z-index: 3;}
.bloc_defilant .b2{top:33.33%;z-index: 2;}
.bloc_defilant .b3{bottom:0;z-index: 1;}

.bloc_defilant .b1 .backgroundWrapper,.bloc_defilant .b2 .backgroundWrapper,.bloc_defilant .b3 .backgroundWrapper,.bloc_defilant .b1 .background,.bloc_defilant .b2 .background,.bloc_defilant .b3 .background{height:100%;}

.bloc_defilant .wrap_Txt_Img h2{margin-bottom: 1em}

.bloc_defilant .wrap_Txt_Img{}
.bloc_defilant .wrap_Txt_Img p,.bloc_defilant .wrap_Txt_Img h2{color:#FFF; width:75%; margin:auto;}
.bloc_defilant .wrap_Txt_Img p{font-size: 17px}

.bloc_defilant .wrap_Txt_Img h2{margin-bottom: 1em}


@keyframes txt_Scroll_Top {
  50%{margin-top: 0vh}
  75%{margin-top: -200vh}
 100%{margin-top:-400vh}
}


/* etape 1 */
.bloc_defilant .wrap_Txt_Img .p1.animDone ~ .b1{z-index: 2;}
.bloc_defilant .wrap_Txt_Img .p1.animDone ~ .b2{z-index: 3;opacity: 0;}
.bloc_defilant .p0{}
/* etape 2 ET 3 */
.bloc_defilant .wrap_Txt_Img .p2.animDone ~ .b1,.bloc_defilant .wrap_Txt_Img .p2.animDone ~ .b2,.bloc_defilant .wrap_Txt_Img .p2.animDone ~ .b3,
.bloc_defilant .wrap_Txt_Img .p3.animDone ~ .b2,.bloc_defilant .wrap_Txt_Img .p3.animDone ~ .b3
,.bloc_defilant .wrap_Txt_Img .p0.animDone ~ .b1, .bloc_defilant .wrap_Txt_Img .p0.animDone ~ .b2{position:fixed; top:0; right: 0}
.bloc_defilant .wrap_Txt_Img .p0.animDone ~ .b1{z-index: 2;}
/* etape 2 */
.bloc_defilant .wrap_Txt_Img .p2.animDone ~ .b2{z-index: 3;
 animation: fadeIn 1s linear infinite; animation-play-state: paused; animation-delay: calc(var(--fadeInImg2) * -1s) ; animation-iteration-count: 1; animation-fill-mode: forwards;}

/* etape 2-3 (entre les 2) */
.bloc_defilant .wrap_Txt_Img .p1.anim:not(.animDone)  .p2.animDone + .p3.anim:not(.animDone) ~ .b1{z-index: 1;animation: none;}
.bloc_defilant .wrap_Txt_Img .p1.anim:not(.animDone)  .p2.animDone + .p3.anim:not(.animDone) ~ .b2{z-index: 3;animation: none;}
.bloc_defilant .wrap_Txt_Img .p1.anim:not(.animDone)  .p2.animDone + .p3.anim:not(.animDone) ~ .b3{z-index: 2;animation: none;}

/* etape 3 */
.bloc_defilant .wrap_Txt_Img .p3.animDone ~ .b1{ z-index: 1;}
.bloc_defilant .wrap_Txt_Img .p3.animDone ~ .b2{ z-index: 2;animation: none;}
.bloc_defilant .wrap_Txt_Img .p3.animDone ~ .b3{z-index: 3;
 animation: fadeInLast 1s linear infinite; animation-play-state: paused; animation-delay: calc(var(--fadeInImg3) * -1s) ; animation-iteration-count: 1; animation-fill-mode: forwards;}

/* etape 3-4 (entre les 2) */
.bloc_defilant .wrap_Txt_Img .p2.anim:not(.animDone) + .p3.animDone + .p4.anim:not(.animDone) ~ .b1{z-index: 1;animation: none;}
.bloc_defilant .wrap_Txt_Img .p2.anim:not(.animDone) + .p3.animDone + .p4.anim:not(.animDone) ~ .b2{z-index: 2;animation: none;}
.bloc_defilant .wrap_Txt_Img .p2.anim:not(.animDone) + .p3.animDone + .p4.anim:not(.animDone) ~ .b3{z-index: 3;animation: none;}

/* etape 4 */
.bloc_defilant .wrap_Txt_Img .p4.animDone ~ .b1,
.bloc_defilant .wrap_Txt_Img .p4.animDone ~ .b2{z-index: 2;animation: none;}
.bloc_defilant .wrap_Txt_Img .p4.animDone ~ .b3{z-index: 3;animation: none;bottom:0; top:auto; position: absolute;}
.bloc_defilant .wrap_Txt_Img .p4.animDone ~ .b1,.bloc_defilant .wrap_Txt_Img .p4.animDone ~ .b2{ position: absolute;top:0;}

@keyframes fadeIn {
   0% {opacity: 0}
   65% {opacity: 1}
   100% {opacity: 1}
 }

@keyframes fadeInLast {
   0% {opacity: 0}
   12% {opacity: 0}
   35% {opacity: 1}
   100% {opacity: 1}
 }

 .editableZone .bloc_defilant.bloc.hover::after{content:"Blocs défilants";}


@media screen and (max-width: 600px) {
    .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;}
}