.editableZone .defilement.hover::after{content:"bande défilante";}
.editableZone .defilement[data-reverse="1"] i.sensDefilIco::before{color:#000;}
.editableZone .defilement[data-reverse="0"] i.sensDefilIco::after{color:#000;}
.editableZone .defilement .mask{overflow-x: scroll !important}
.editableZone .defilement .help4sort{display: none !important;}

/********************************************************
 *    .defilement
 *******************************************************/
.defilement .mask{width: 100%; overflow: hidden; margin: 0;padding: 0;}
.defilement .wrapperItem{ text-align: left;width: 330%;animation-timing-function: linear;}
.defilement .wrapperItem > .bloc{height: 0;  padding: 0;padding-top:4.5%;  margin: 0.25%; width: 4.5%; min-height:0;color:#FFF; display: inline-block;}

.defilement.shapeChange[data-shape="1"] .wrapperItem > .bloc{ width: 9.5%;  }
.defilement.shapeChange[data-shape="1"] .wrapperItem > :nth-child(n+6){ display: none;  }

.defilement.shapeChange[data-shape="2"] .wrapperItem > .bloc{  width: 12% }
.defilement.shapeChange[data-shape="2"] .wrapperItem > :nth-child(n+5) {display: none;}

.defilement.shapeChange[data-shape="3"] .wrapperItem > .bloc{  width: 15.5% }
.defilement.shapeChange[data-shape="3"] .wrapperItem > :nth-child(n+5){display: none;}
.defilement.shapeChange[data-shape="3"] .wrapperItem > .bloc:nth-child(odd){ width: 8.5% }

.defilement.shapeChange[data-shape="4"] .wrapperItem > .bloc{ width: 12%; padding-top:12%; }
.defilement.shapeChange[data-shape="4"] .wrapperItem > :nth-child(n+5){ display: none;  }
.defilement.shapeChange[data-shape="4"] .wrapperItem{width: 550%;}

body .defilement.shapeChange[data-shape] .wrapperItem > .cloned {display: inline-block !important;}

@media screen and (max-width: 600px) {
  .defilement .wrapperItem{width: 550%;}
}

.page>*:not(.editableZone) .defilement .wrapperItem{animation-duration:5s;animation-name: defill; animation-iteration-count: infinite; animation-direction: reverse;}
@keyframes defill { 0% {transform:translateX(-50%)} 100% {transform:translateX(0)}}
.page>*:not(.editableZone) .defilement[data-reverse="1"] .wrapperItem{animation-direction: normal;}

.page>.editableZone .defilement .wrapperItem{animation-duration:0s;}
/*.cloned::after{z-index: 95;content:"";display: block;width:100%; height: 100%;top: 0;left: 0; position: absolute; background:yellow; opacity:0.5}*/
