.playJuste{
    animation : animate-juste 0.3s linear forwards;    
}

.playJuste:after{
    position: absolute;
    display: block;
    content: '';
    background-image: url(../img/jeu1/check.png);
    background-repeat: no-repeat;
    background-position: center;
    left:0; right:0; bottom:-91px;
    height: 91px;
    animation : animate-juste-check 0.3s linear forwards; 
}

.playFaux{    
    animation: horizontal-shaking 0.25s linear 3;
}

#btn-retour-jouer{
    width: 167px;
    height: 233px;
    background-image: url(../img/btn-retour-gris.png);
    position: absolute;
    top:60px;
    right: 0;
    z-index: 10;
}

#jeu1{
   background-color: #fff;
   position:relative;
   height: 100vh;
   z-index: 0;
}

#jeu1-cadrebleu{   
    position: absolute; 
    background-color: #292d3d;
    top:44px; bottom: 44px; left:44px; right:44px;      
    border-radius: 40px; 
    z-index: 1;   
}

#jeu1-cadrephoto{
    position: absolute; 
    background-color: #fff;
    top:17px; bottom: 323px; left:17px; right:17px;  
    border-radius: 30px;   
    z-index: 2; 
    overflow: hidden;
}

#jeu1-btn-corse, #jeu1-btn-autre{
    position: absolute; 
    background-color: #fff;
    width:350px;
    height:270px;
    bottom: 23px; 
    border-radius: 30px;   
    z-index: 2; 
    background-repeat: no-repeat;
    background-position: center center;
    overflow: hidden;
}

#jeu1-btn-corse{
    left:23px;
    background-image: url(../img/jeu1/paysage-corse.png);     
}

#jeu1-btn-autre{
    left:400px;
    background-image: url(../img/jeu1/paysage-autre.png); 
}

div#jeu1-btn-autre.playJuste {
    left: 23px;
}

#jeu1-txt{
    font-family: Arial, Helvetica, sans-serif;
    position: absolute;
    bottom: 23px;
    left: 800px;
    width: 668px;
    height:270px;
    color: #fff;
}

#jeu1-txt h1{
    font-size: 32px;
    padding-bottom: 10px;
}

#jeu1-txt h4{
    font-size: 18px;
}

#jeu1-qnbr{
    font-family: Arial, Helvetica, sans-serif;
    position: absolute;
    bottom: 23px;
    right: 23px;
    padding:25px;
    font-size: 72px;
    font-weight: bolder;
    background-color: #fff;
    color: #40496a;
    border-radius: 30px; 
}

#jeu1-btn-next{
    position: absolute;
    width: 269px;
    height:233px;
    background-image: url(../img/jeu1/btn-next.png);    
    bottom: 206px;
    right: 133px;
    z-index: 5;
    animation: blinker 1.5s linear infinite;
    
}

#jeu1-instructions{
    position: absolute;
    top:0; left:0;right:0;bottom:0;
    background-color: rgba(41, 45, 61, 0.8);
    background-image: url(../img/jeu1/instructions.png);
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 100;
}

@media screen and (max-width :1334px){
    #jeu1{
        width: 1334px;
        height: 800px;        
    }

    #jeu1-cadrebleu {
        top:0; bottom:0; left:0; right: 0;
        border-radius: 0;
    }

    #jeu1-cadrephoto {
        bottom: 300px;
    }

    #jeu1-btn-corse, #jeu1-btn-autre {
        width: 335px;
        height: 250px;
    }

    #jeu1-txt {
        bottom: 3px;
        left: 383px;
    }

    #jeu1-btn-next {      
        width: 220px;
        height: 192px;
        background-size: contain;
        bottom: 206px;
        right: 98px;
    }

    #btn-retour-jouer {
        width: 133px;
        height: 188px;
        background-size: contain;
    }
}

@keyframes horizontal-shaking {
    0% { 
        transform: translateX(0); 
        background-color: rgb(230, 74, 74);
    }
    25% { transform: translateX(5px) }
    50% { transform: translateX(-5px) }
    75% { transform: translateX(5px) }
    100% { 
        transform: translateX(0) ;
        background-color: rgb(230, 74, 74);
    }
}

@keyframes animate-juste {
    from {
        background-color: rgb(255, 255, 255);
        
    }
    to {
        background-color: rgb(74, 230, 95);
        background-position: center 23px;
    }
  }

  @keyframes animate-juste-check {
    from {
        bottom: -91px;        
    }
    to {
        bottom: 31px;
    }
  }