.carouselJoins.bloc{ margin-top: 50px; margin-bottom: 50px; }
.carouselJoins.bloc .bloc2.box{display: inline-block;  margin: 1%; height: 0; position: relative; }

.carouselJoins.bloc>.bloc2.box:first-of-type ~ .bloc2.box{margin-right:0;}
.carouselJoins.bloc>.bloc2.box:first-of-type{margin-left:0;}

.carouselJoins.bloc:not(.reverse) .bloc2.daf1{width:59%; padding-bottom: 35%; margin-bottom: 7%; vertical-align: top}
.carouselJoins.bloc:not(.reverse) .bloc2.daf2{width:38%; padding-bottom: 32%; vertical-align: bottom; }


.carouselJoins .carousel-j >*{min-height:0;background-size: cover; background-position: center center}
.carouselJoins .carousel-j-dad{position: absolute; top: 0; left: 0;}

.carouselJoins .navigation{position: absolute; top: -50px; width: 100%; left: 0}
/********************************************************
*              PLUG
*******************************************************/
.carouselJoins .carousel-j-dad{height: 100%; width: 100%;overflow: hidden; background-color: #000}
.carouselJoins .carousel-j{ transition-property: margin-left; transition-duration: 0.8s; display: flex; height: 100%; width: 100%;}
.carouselJoins .carousel-j>*{width: 100%; height: 100%; z-index: 2; position: relative; }

.carouselJoins .navigation{display: flex;align-items: center}
.carouselJoins .navigation .fleche{ display : inline-block; height:0; width:0;border-top : 10px solid transparent;border-bottom : 10px solid transparent;  cursor: pointer}
.carouselJoins .navigation .fleche.prev{border-right : 10px solid #CCC; margin-right: 5px}
.carouselJoins .navigation .fleche.next{border-left : 10px solid #CCC; margin-left: 5px}
.carouselJoins .navigation .part{border-top: 5px solid transparent;border-bottom: 5px solid transparent; cursor: pointer; width: 100%; margin: 5px; }
.carouselJoins .navigation .part::before{display: block; content:"";transition-property:background; transition-duration:.3s; height: 1px; background: #CCC;}
.carouselJoins .mouvementPlus{animation-name: Glissade; animation-duration: 0.8s; z-index: 1; }
@keyframes Glissade {
 0%  {left:0%; opacity: 1}
 100%{left: -20vw; opacity: 0.4}
}
.carouselJoins .mouvementMoins{animation-name: GlissadeTwo; animation-duration: 0.8s; z-index: 1; }
@keyframes GlissadeTwo {
 0%  {left:0%; opacity: 1}
 100%{left: 20vw; opacity: 0.4}
}
.carouselJoins .navigation .part.carousel_actif::before{background: #000; height: 5px}
@media screen and (max-width:620px) {
  .carouselJoins:not(.reverse){padding-top: 5%}
  .carouselJoins:not(.reverse) .navigation{ width: 260%; top:-50%; left:-160%;}
}
/*******************************************************
 *
 *******************************************************/
.editableZone .carouselJoins.bloc.hover::after{content:"double carousel";}
.editableZone .carouselJoins .background>i{top:15px;}