/*.editableZone >.bg_choice:nth-child(1) .requiere .fa.fa-code,
.editableZone >.help4sort:nth-child(1) + .bg_choice .requiere .fa.fa-code{display: none !important}
*/
header{display: none;}
#jeuTop{width: 100%; /* max-width: 1500px;*/padding-bottom: 44.5%; overflow: hidden;position: relative;}
#jeuTop>div{ position: absolute;}

  #big-bg, #big-bg.animDone{ background-repeat:no-repeat;background-position:3% 108%; background-size: 160% auto;background-image: url('../_img/jeu/big-bg.jpg'); top: 0;left: 0;bottom: 0;right: 0;}
  #gradient, #gradient.animDone{ opacity: 1; background-position:right bottom; background-size: 100% 100%; background-image: url('../_img/jeu/gradient.png'); width:75%; right: 0;top: 0;height: 100%;}

  #promoItem, #promoItem.animDone{ height:/* 69%;*/ calc(.69 * 44.5vw);right: 9%; width: 45%;top: 14.5%;}
  #promoItem>div, #promoItem.animDone>div{position: absolute;background-size: auto 100%;background-repeat: no-repeat; background-position: center center}
    #plus, #plus.animDone{ background-image: url('../_img/jeu/plus.svg');width: 6.5%;height: 8.5%;right: 35%;top: 47%;}
    #a-gagner, #a-gagner.animDone{ background-image: url('../_img/jeu/a-gagner.svg'); width: 25%;height: 20%;bottom: 2%;left: 37%;}
    #plancha, #plancha.animDone{opacity:1; transform:none;background-image: url('../_img/jeu/plancha.png');width: 38%;height: 47%;bottom: 2%;right: -15%;}
    #plancha3, #plancha3.animDone{ opacity:1; background-image: url('../_img/jeu/plancha3.svg');width: 43%;height: 25%;bottom: 20%;left: 37%;}
    #gant, #gant.animDone{background-size: auto 126% !important;background-image: url('../_img/jeu/gant.png');top: 0;left: 4%;height: 63%; width: 31%;}
    #votre-paire, #votre-paire.animDone{background-image: url('../_img/jeu/votre-paire.svg'); left:29%; top: -7%; width:67%;height: 14%}
    #p100, #p100.animDone{ background-image: url('../_img/jeu/p100.svg');right: 10%;top: 4%;width: 43%;height: 37%;}

  .cadre, .cadre.animDone{background-size: 100% 100%; transform:none;}
    #cadreT, #cadreT.animDone{height:21.5%;left: 0;top: -1px;width: 100%; background-position:top center;background-image: url('../_img/jeu/cadreT.svg?c=1')}
    #cadreR, #cadreR.animDone{width: 4%; background-position:right; center;height: 100%;top: 0; right: -1px; background-image: url('../_img/jeu/cadreR.svg?c=1')}
    #cadreL, #cadreL.animDone{width: 7.7%; background-position:left center;left: -1px;top: 0;height: 100%; background-image: url('../_img/jeu/cadreL.svg?c=1')}
    #cadreB, #cadreB.animDone{height:21.5%; background-position:bottom center;bottom: -1px;left: 0;width: 100%; background-image: url('../_img/jeu/cadreB.svg?c=1')}

  .cadre>div{position: absolute; background-size: 100% auto;background-repeat: no-repeat; background-position: center center}
  #condition, #condition.animDone{ width: 22%; bottom: 20%; left: 57%;height: 58%;background-image: url('../_img/jeu/condition.svg')}
  #logos, #logos.animDone{ width:32%; height: 75%; left: 7%; top: 1%;background-image: url('../_img/jeu/logos.svg')}
  #mapa-meilleur, #mapa-meilleur.animDone{ width:30%;height: 75%; left: 7%; bottom: 4%;background-image: url('../_img/jeu/mapa-meilleur.svg')}


/********************************************************
 *              Merci
 *******************************************************/


.merci #promoItem{
  padding-top: 0.3em;
  padding-left:2.3em; 
 font-family: "blogscript", serif;
 font-size: 2.5vw; text-transform: uppercase;
 line-height: 1.4;
 text-shadow: 0.1em 0.1em 0 #FFF;
}
.merci  #promoItem strong{font-size: 2.2em; display: block;}
/********************************************************
 *               Animation
 ******************************************************/
#jeuTop{
  --firstTime:3s;
  --dureeNormal:0.3s;
  --dureeLongue:0.6s;
}
#jeuTop.animDone #big-bg{animation-name: BgAnim; animation-duration: var(--firstTime); animation-delay: 0.2s; animation-timing-function: linear;animation-fill-mode: forwards;}

  /*#gradient{transition-delay: var(--firstTime); transition-duration: var(--dureeNormal); transition-property: opacity}
      #jeuTop.anim:not(.animDone) #gradient{opacity: 0;}*/

      #cadreB{transition-delay: calc(var(--firstTime) + var(--dureeNormal)); transition-duration: var(--dureeNormal); transition-property: transform;animation-fill-mode: forwards;}
        #jeuTop.anim:not(.animDone) #cadreB{ transform:translateX(-100%) }

      #cadreT{transition-delay: calc(var(--firstTime) + var(--dureeNormal)); transition-duration: var(--dureeNormal); transition-property: transform}
        #jeuTop.anim:not(.animDone) #cadreT{ transform:translateX(100%) }

          #cadreR{transition-delay: calc(var(--firstTime) + (var(--dureeNormal) * 2)); transition-duration: var(--dureeNormal); transition-property: transform}
            #jeuTop.anim:not(.animDone) #cadreR{ transform:translateY(100%) }

          #cadreL{transition-delay: calc(var(--firstTime) + (var(--dureeNormal) * 2)); transition-duration: var(--dureeNormal); transition-property: transform}
            #jeuTop.anim:not(.animDone) #cadreL{ transform:translateY(-100%) }

          #jeuTop.animDone #gant{animation-delay: calc(var(--firstTime) + (var(--dureeNormal) * 3)); animation-duration: var(--dureeLongue); animation-name: scale-easeOutElastic; animation-fill-mode: forwards;}
            #jeuTop #gant{opacity:0;transform: scale(2);}

          #jeuTop.animDone #votre-paire{animation-delay: calc(var(--firstTime) + (var(--dureeNormal) * 3)  + (var(--dureeLongue) * 1) ); animation-duration: var(--dureeLongue); animation-name: scale-easeOutElastic; animation-fill-mode: forwards;}
            #jeuTop #votre-paire{opacity:0;transform: scale(2);}

          #jeuTop.animDone #p100{animation-delay: calc(var(--firstTime) + (var(--dureeNormal) * 3)  + (var(--dureeLongue) * 1.5) ); animation-duration: var(--dureeLongue); animation-name: scale-easeOutElastic; animation-fill-mode: forwards;}
            #jeuTop #p100{opacity:0;transform: scale(2);}

          #jeuTop.animDone #plus{animation-delay: calc(var(--firstTime) + (var(--dureeNormal) * 3)  + (var(--dureeLongue) * 3) ); animation-duration: var(--dureeLongue); animation-name: scale-easeOutElasticBig; animation-fill-mode: forwards;}
            #jeuTop #plus{opacity:0;transform: scale(2);}

          #jeuTop.animDone #plancha{transition-delay: calc(var(--firstTime) + (var(--dureeNormal) * 3)  + (var(--dureeLongue) * 4) ); transition-duration: var(--dureeNormal); transition-property: opacity;}
            #jeuTop.anim:not(.animDone) #plancha{opacity:0;}

          #jeuTop.animDone #plancha3{transition-delay: calc(var(--firstTime) + (var(--dureeNormal) * 3)  + (var(--dureeLongue) * 4.5) ); transition-duration: var(--dureeNormal); transition-property: opacity;}
            #jeuTop.anim:not(.animDone) #plancha3{opacity:0; transform: scale(0.7)}

          #jeuTop.animDone #a-gagner{animation-delay: calc(var(--firstTime) + (var(--dureeNormal) * 3)  + (var(--dureeLongue) * 4.5) ); animation-duration: var(--dureeLongue); animation-name: scale-easeOutElastic; animation-fill-mode: forwards;}
            #jeuTop #a-gagner{opacity:0; transform: scale(2);}


@keyframes BgAnim{
  0% {background-position: 13% 68%;background-size: 290% auto}
  100%{background-position:3% 108%; background-size: 160% auto;}
}
@keyframes BgAnimMobile{
    0% {background-position: 13% 68%;background-size: 480% auto}
    100%{background-position:3% 108%; background-size: 280% auto;}
}
@keyframes scale-easeOutElastic{
  0% {transform: scale(2) rotate(90deg);opacity: 1;}
  33%{transform: scale(0.8);}
  50%{transform: scale(1.2);}
  75%{transform: scale(0.9);}
  100% {transform: scale(1);opacity: 1;}
}

@keyframes scale-easeOutElasticBig{
  0% {transform: scale(4) ;opacity: 1;}
  33%{transform: scale(2.8);}
  50%{transform: scale(2.2);}
  75%{transform: scale(2.9);}
  100% {transform: scale(1);opacity: 1;}
}


/********************************************************
 *              Responsive
 *******************************************************/
@media screen and (max-width: 750px) {

  .merci #promoItem{font-size: 3.5vw}
  #jeuTop{padding-bottom: 104.5%;}
  #big-bg{ background-position: 13% 68%;background-size: 480% auto}
  #cadreT, #cadreB{height: 11.5%}
  #jeuTop.animDone #big-bg{animation-name: BgAnimMobile;}
  #gradient{transform:rotate(-90deg) translateX(20%); width: 100%}
  #promoItem{height: calc(.69 * 45.5vw);right: 9%;width: 87%;top: 10.5%;}
  #plancha{height: 77%; right: -10%}
  #gant{height: 97%; }
  #votre-paire{height: 16%;left: 17%; }
  #p100{left: 25%; right: auto;top: 13%;  }
  #plus{width: 31.5%;height: 18.5%;right: 17%;top: 41%;}
  #plancha3{width: 43%;height: 25%;bottom: 20%;left: 27%;}
  #a-gagner{width: 25%;height: 20%;bottom: 6%;left: 41%;}
  #condition {width: 24%;bottom: -3%;left: 74%;height: 58%;}
  #btnRib{display: block; position: absolute; top: 50vw;left:50%; transform: translateX(-50%); width: 75vw; font-size: 0.6em}
  #promoItem span{width: 100% !important}

  /*audrey MP*/
   #votre-paire {height: 16%;left: 17%;top: 0;}
   #p100 {left: 22%;right: auto;top: 18%;width: 50%;height: 47%;}
   #plancha3 {width: 43%;height: 25%;bottom: -20%;left: 67%;}
   #a-gagner {width: 25%;height: 24%;bottom: -38%;left: 79%;}
   #plancha {height: 77%;right: -10%; bottom: 12% }
   #plus{right: 15%;top: 57%;}
   #condition {width: 37%;bottom: 15%;left: 60%;height: 58%;transform: rotate(-3deg)}
}