body {
	background-color: #f6f5f0;
	width: 100%;
    height: 100vh;
    padding: 0;
	margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.zone-jeu {
    position: relative;
    width: 1400px;
    height: 700px;
    border: solid 10px #89B7E0;
    border-radius: 5px;
}


/*Musique*/
.button {
    position: absolute;
    cursor: pointer;
    top: 7px;
    left: 30px;
}

/*Time*/
.time_wrap {
    background-repeat: no-repeat;
    position: absolute;
    visibility: hidden;
    left: 34px;
    bottom: 220px;
    z-index: 12;
}

.temps {
    position: absolute;
    visibility: hidden;
    background-color: #89B7E0;
    height: 210px;
    width: 20px;
    left: 23px;
    bottom: 63px;
    transition-duration: 120s;
    transition-timing-function: linear;
    border-radius: 15px;
    z-index: 13;
}

/*Accueil*/
.accueil {
    width: 100%;
    height: 100%;
    background-image: url(../images/lieux/accueil.jpg);
    background-size: cover;
    background-position: center;
}

    /*Objets - accueil*/
    .accueil-bebe {
        position: absolute;
        bottom: 100px;
        left: 175px;
        z-index: 6;
    }

    .smile{
        position: absolute;
        bottom: 235px;
        left: 218px;
        z-index: 6;
        animation-name: smile;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
    }

    @keyframes smile {
        0% {
        transform: rotate(-5deg);
    }
        100% {
        transform: rotate(1deg);
    }}

    @keyframes snile {
        0% {
        transform: rotate(5deg);
    }
        100% {
        transform: rotate(-1deg);
    }}
   
    .accueil-lait {
        position: absolute;
        bottom: 445px;
        right: 175px;
        z-index: 6;
        animation-name: accueil-lait;
        animation-duration: 4s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
    }

    @keyframes accueil-lait {
        0% {
        transform: rotate(-5deg);
    }
        100% {
        transform: rotate(1deg);
    }}

    @keyframes accueil-lait {
        0% {
        transform: rotate(5deg);
    }
        100% {
        transform: rotate(-1deg);
    }}
    
    .accueil-biberon {
        position: absolute;
        bottom: 400px;
        right: 130px;
        z-index: 6;
        animation: scale 10s both;
        animation-iteration-count: infinite;
    }

    @keyframes scale {
        50% {
    transform: scale(0.9);
    }
        100% {
    transform: scale(1);
    }}

/*Titre*/
.titre {
    position: absolute;
    bottom: 325px;
    right: 320px;
    animation: scale 6s both;
    animation-iteration-count: infinite;
}

@keyframes scale {
  50% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }}

/*Play*/
.play {
    position: absolute;
    cursor: pointer;
    bottom: 205px;
    right: 610px;
    transition: 0.7s;
    animation: fadeIn 7s;
    -webkit-animation: fadeIn 7s;
}

.play:hover {
    transform: scale(1.1);
    transition: 0.7;
}

/*Explication jeu*/
.explication {
    width: 100%;
    height: 100%;
    background-image: url(../images/lieux/accueil.jpg);
    background-size: cover;
    background-position: center;
    display:none;
}

.expli-babysitteur {
    position: absolute;
    bottom: 55px;
    left: 110px;
    transition: 0.7s;
}

.expli-babysitteur:hover {
    transform: scale(1.05);
    transition: 0.3;
}

/*Dialogue*/
.text {
    font-size: 23px;
    position: absolute;
	color:white;
    bottom: 350px;
    left: 335px;
    font-family: 'Tilt Neon', sans-serif;
}

.again {
	position: absolute;
    cursor: pointer;
    bottom: 225px;
    right: 590px;
}

 .letsgo {
    position: absolute;
    display: none;
    cursor: pointer;
    bottom: 225px;
    right: 570px;
    transition: 0.7s;
}

.letsgo:hover {
    transform: scale(1.1);
    transition: 0.7;
}
 
/*Les 3 lieux*/
/*Map 1 : Salon*/
.map-une{
    width: 100%;
    height: 100%;
    background-image: url(../images/lieux/Salon.jpg);
    background-size: cover;
    background-position: center;
    float: right;
    display:none;
}

    /*Objets salon*/
    .biberon-bas{
        position: absolute;
        display:none;
        cursor: pointer;
        top: 335px;
        right: 150px;
        transition: 0.7s;
    }

    .biberon-bas:hover {
        transform: scale(1.2);
        transition: 0.3;
    }

    .dosette {
        position: absolute;
        display:none;
        cursor: pointer;
        top: 335px;
        left: 280px;
        transition: 0.7s;
    }

    .dosette:hover {
        transform: scale(1.2);
        transition: 0.3;
    }

/*Map 2 : Cuisine*/
.map-deux{
    width: 100%;
    height: 100%;
    background-image: url(../images/lieux/Cuisine.jpg);
    background-size: cover;
    background-position: center;
    float: right;
    display:none;
}

    /*Objets cuisine*/
    .necessaire {
        position: absolute;
        cursor: pointer;
        top: 355px;
        right: 45px;
        transition: 0.7s;
    }

    .necessaire:hover {
        transform: scale(1.2);
        transition: 0.3;
    }

    .thermometre{
        position: absolute;
        display:none;
        cursor: pointer;
        top: 335px;
        left: 166px;
        transition: 0.7s;
        animation: fadeIn 2s;
        -webkit-animation: fadeIn 2s;
    }

    .thermometre:hover {
        transform: scale(1.2);
        transition: 0.3;
    }

    .robinet{
        position: absolute;
        display: none;
        cursor: pointer;
        top: 260px;
        right: 674px;
        transition: 0.7s; 
    }

    .robinet:hover {
        transform: scale(1.2);
        transition: 0.3;
    }

    .eau{
        position: absolute;
        display: none;
        cursor: pointer;
        top: 323px;
        right: 617px;
        transition: 0.7s;
    }

    .eau:hover{
        transform: scale(1.2);
        transition: 0.3;
    }

    .chauffe-biberon {
        position: absolute;
        display:none;
        cursor: pointer;
        top: 280px;
        right: 325px;
        transition: 0.7s;
        animation: fadeIn 2s;
        -webkit-animation: fadeIn 2s;
    }

    .chauffe-biberon:hover {
        transform: scale(1.2);
        transition: 0.3;
    }

    /*Aimant*/
    .aimant {
        position: absolute;
        top: 346px;
        right: 56px;
    }

/* Map 3 : Chambre*/
.map-trois{
    width: 100%;
    height: 100%;
    background-image: url(../images/lieux/chambre.jpg);
    background-size: cover;
    background-position: center;
    float: right;
    display:none;
}

    /*Objets chambre*/
    .lait {
        position: absolute;
        display:none;
        cursor: pointer;
        top: 293px;
        right: 60px;
        transition: 0.7s;
    }

    .lait:hover {
        transform: scale(1.2);
        transition: 0.3;
    }

    .biberon-haut{
        position: absolute;
        display:none;
        cursor: pointer;
        top: 536px;
        left: 440px;
        transition: 0.7s;
    }

    .biberon-haut:hover {
        transform: scale(1.2);
        transition: 0.3;
    }

/*Les fleches*/
.fleche-droite {
    position: absolute;
    cursor: pointer;
    bottom: 15px;
    right: 20px;
    animation-name: flecheD-animation;
    animation-duration: 1.6s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.fleche-droite-salon {
    position: absolute;
    cursor: pointer;
    bottom: 15px;
    right: 20px;
    animation-name: flecheD-animation;
    animation-duration: 1.6s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.fleche-gauche {
    position: absolute;
    cursor: pointer;
    bottom: 15px;
    left: 140px;
    animation-name: flecheG-animation;
    animation-duration: 1.6s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.fleche-gauche-chambre {
    position: absolute;
    cursor: pointer;
    bottom: 15px;
    left: 140px;
    animation-name: flecheG-animation;
    animation-duration: 1.6s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes flecheD-animation {
    0% {
        transform: rotate(-8deg);
    }
    100% {
        transform: rotate(1deg);
    }}

@keyframes flecheG-animation {
    0% {
        transform: rotate(8deg);
    }
    100% {
        transform: rotate(-1deg);
    }}

/*Inventaire 1ère partie*/
.place-inventaire {
    position: absolute;
    bottom: 4px;
    left: 310px;  
}

/*liste nécessaire*/
.item-objets{
    position: absolute;
    display: none;
    cursor: pointer;
    bottom: 17px;
    left: 353px;
    z-index: 1;
    transition: 0.7s;
    animation: fadeIn 2s;
    -webkit-animation: fadeIn 2s;
}

.item-objets:hover{
    transform: scale(1.2);
    transition: 0.7s;
}

.item-objets-grand{
    display: none;
    position: absolute;
    left: 520px;
    bottom: 145px;
}

.croix {
    position: absolute;
    display: none;
    cursor: pointer;
    z-index: 3;
    right: 10px;
    bottom: 450px;
}

/*Liste objets cuisine*/
.item-chauffeur{
    position: absolute;
    display: none;
    cursor: pointer;
    bottom: 12px;
    left: 460px;
    z-index: 4;
    transition: 0.7s;
    animation: fadeIn 2s;
    -webkit-animation: fadeIn 2s;
}

.item-chauffeur:hover{
    transform: scale(1.2);
    transition: 0.7s;
}

.item-thermometre{
    position: absolute;
    display: none;
    cursor: pointer;
    bottom: 35px;
    left: 560px;
    z-index: 6;
    transition: 0.7s;
    animation: fadeIn 2s;
    -webkit-animation: fadeIn 2s;
}

.item-thermometre:hover{
    transform: scale(1.2);
    transition: 0.7s;
}

.item-eau{
    position: absolute;
    display: none;
    cursor: pointer;
    bottom: 35px;
    right: 600px;
    z-index: 8;
    transition: 0.7s;
    animation: fadeIn 2s;
    -webkit-animation: fadeIn 2s;
}

.item-eau:hover{
    transform: scale(1.2);
    transition: 0.7s;  
}

/*Listes objets Salon*/
.item-dosette{
    position: absolute;
    display: none;
    cursor: pointer;
    bottom: 35px;
    right: 425px;
    z-index: 10;
    transition: 0.7s;
    animation: fadeIn 2s;
    -webkit-animation: fadeIn 2s;
}
    
.item-dosette:hover{
    transform: scale(1.2);
    transition: 0.7s;
}

.item-bas-biberon{
    position: absolute;
    display: none;
    cursor: pointer;
    bottom: 25px;
    right: 530px;
    z-index: 12;
    transition: 0.7s;
    animation: fadeIn 2s;
    -webkit-animation: fadeIn 2s;;
}

.item-bas-biberon:hover{
    transform: scale(1.2);
    transition: 0.7s;
}

/*Listes objets Chambre*/
.item-haut-biberon{
    position: absolute;
    display: none;
    cursor: pointer;
    bottom: 35px;
    right: 350px;
    z-index: 14;
    transition: 0.7s;
    animation: fadeIn 2s;
    -webkit-animation: fadeIn 2s;
}

.item-haut-biberon:hover{
    transform: scale(1.2);
    transition: 0.7s;
}

.item-lait{
    position: absolute;
    display: none;
    cursor: pointer;
    bottom: 23px;
    right: 250px;
    z-index: 1;
    transition: 0.7s;
    animation: fadeIn 2s;
    -webkit-animation: fadeIn 2s;
}

.item-lait:hover{
    transform: scale(1.2);
    transition: 0.7s;  
}

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

/*Suite du jeu*/
.bouton-suite{
    position: absolute;
    display: none;
    cursor: pointer;
    top: 540px;
    left: 620px;
    transition: 0.7s;
    animation: fadeIn 2s;
    -webkit-animation: fadeIn 2s;
}

.bouton-suite:hover {
    transform: scale(1.1);
    transition: 0.7;
}

/*Dialogue*/
.dialogue-suite{
    width: 100%;
    height: 100%;
    background-image: url(../images/lieux/accueil.jpg);
    background-size: cover;
    background-position: center;
    display: none;
}

.suite-text{
    position: absolute;
	color:white;
    bottom: 350px;
    left: 335px;
    font-size: 23px;
    font-family: 'Tilt Neon', sans-serif;
}

.bouton-letsgo{
    position: absolute;
    cursor: pointer;
    bottom: 235px;
    right: 570px;
    transition: 0.7s;
}

.bouton-letsgo:hover {
    transform: scale(1.1);
    transition: 0.7;
}

.suite-babysitteur {
    position: absolute;
    bottom: 55px;
    left: 110px;
    transition: 0.7s;
}

.suite-babysitteur:hover {
    transform: scale(1.05);
    transition: 0.7;
}

/*Nouveau lieu - Table*/
.table{
    width: 100%;
    height: 100%;
    background-image: url(../images/lieux/Table.jpg);
    background-size: cover;
    background-position: center; 
    float: right;
    display: none;
}

.inventaire-table{
    position: absolute;
    top: 325px;
    left: 400px;
}

/*Objets Table - Inventaire 2ème partie*/
#id-chauffeur {
    position: absolute;
    display: none;
    cursor: pointer;
    bottom: 12px;
    left: 450px;
    z-index: 1;
    transition: 0.7s;
    animation: fadeIn 2s;
    -webkit-animation: fadeIn 2s;
}

#id-chauffeur:hover{
    transform: scale(1.2);
    transition: 0.7s;
}

#id-thermometre{
    position: absolute;
    display: none;
    cursor: pointer;
    bottom: 40px;
    left: 550px;
    z-index: 1;
    transition: 0.7s;
    animation: fadeIn 2s;
    -webkit-animation: fadeIn 2s;
}

#id-thermometre:hover{
    transform: scale(1.2);
    transition: 0.7s;
}

#id-eau{
    position: absolute;
    display: none;
    cursor: pointer;
    bottom: 38px;
    right: 410px;
    z-index: 1;
    transition: 0.7s;
    animation: fadeIn 2s;
    -webkit-animation: fadeIn 2s;
}

#id-eau:hover{
    transform: scale(1.2);
    transition: 0.7s;  
}

#id-dosette{
    position: absolute;
    display: none;
    cursor: pointer;
    bottom: 35px;
    left: 750px;
    z-index: 1;
    transition: 0.7s;
    animation: fadeIn 2s;
    -webkit-animation: fadeIn 2s;
}
    
#id-dosette:hover{
    transform: scale(1.2);
    transition: 0.7s;
}

#id-bas-biberon{
    position: absolute;
    display: none;
    cursor: pointer;
    bottom: 25px;
    left: 670px;
    z-index: 6;
    animation: fadeIn 2s;
    -webkit-animation: fadeIn 2s;
}

#id-bas-biberon:hover{
    transform: scale(1.2);
    transition: 0.3s;
}

#id-haut-biberon{
    position: absolute;
    display: none;
    cursor: pointer;
    bottom: 38px;
    right: 340px;
    z-index: 1;
    animation: fadeIn 2s;
    -webkit-animation: fadeIn 2s;
}

#id-haut-biberon:hover{
    transform: scale(1.2);
    transition: 0.3s;
}

#id-lait{
    position: absolute;
    display: none;
    cursor: pointer;
    bottom: 22px;
    right: 220px;
    z-index: 1;
    animation: fadeIn 2s;
    -webkit-animation: fadeIn 2s;
}

#id-lait:hover{
    transform: scale(1.2);
    transition: 0.3s;  
}

/*Recette*/
.recette-suite {
    position: absolute;
    cursor: pointer;
    top: 140px;
    left: 775px;
    animation-name: recette;
    animation: scale 2.5s both;
    animation-iteration-count: infinite;
}

@keyframes recette {
    50% {
transform: scale(1);
}
    100% {
transform: scale(4);
}}

.item-recette {
    position: absolute;
    display: none;
    cursor: pointer;
    bottom: 15px;
    left: 355px;
    z-index: 1;
    animation: fadeIn 2s;
    -webkit-animation: fadeIn 2s;
}

.item-recette-grand {
    position: absolute;
    display: none;
    cursor: pointer;
    bottom: 145px;
    left: 590px;
    z-index: 1;
}

.croix-suite {
    position: absolute;
    display: none;
    cursor: pointer;
    z-index: 3;
    right: 10px;
    bottom: 450px;
} 

/*Préparation Biberon*/
.recette{
    position: absolute;
    display: none;
    top: 480px;
    left: 690px;
}

 .recette-bas-biberon{
    position: absolute;
    display: none;
    top: 350px;
    left: 432px;
}

.recette-eau{
    position: absolute;
    display: none;
    top: 340px;
    left: 518px;
}

.recette-chauffeur{
    position: absolute;
    display: none;
    top: 345px;
    left: 600px;
}

.recette-couvercle{
    position: absolute;
    display: none;
    top: 335px;
    left: 690px;
} 

.recette-lait{
    position: absolute;
    display: none;
    top: 345px;
    right: 578px;
}

.recette-dosette{
    position: absolute;
    display: none;
    top: 355px;
    right: 478px;
     
}

.recette-thermometre{
    position: absolute;
    display: none; 
    top: 340px;
    right: 385px;
} 

/*Réussite*/

.biberon-pret{
    position: absolute;
    display: none; 
    cursor: pointer;
    top: 340px;
    right: 315px;
    animation-name: biberon;
    animation: scale 2.5s both;
    animation-iteration-count: infinite;
}

@keyframes biberon {
    50% {
transform: scale(1);
}
    100% {
transform: scale(4);
}}

/*Game Over*/

.game-over{
    width: 100%;
    height: 100%;
    background-image: url(../images/lieux/accueil.jpg);
    background-size: cover;
    background-position: center;
    position: absolute;
    display: none;
}

.bouton-game-over{
    position: absolute;
    bottom: 255px;
    right: 250px;
    transition: 0.7s;
    animation-name: game-over;
    animation: scale 10s both;
    animation-iteration-count: infinite;
}

.bouton-game-over:hover {
    transform: scale(1.2);
    transition: 0.3;
}

@keyframes game-over {
    50% {
transform: scale(1);
}
    100% {
transform: scale(4);
}}

.bebe-triste {
    position: absolute;
    bottom: 100px;
    left: 175px;
    transition: 0.7s;
    z-index: 6;
}

.bebe-triste:hover {
    transform: scale(1.1);
    transition: 0.3;
}

.recommencer-perdu {
	position: absolute;
    cursor: pointer;
    bottom: 225px;
    right: 570px; 
}

/*Winner*/

.winner{
    width: 100%;
    height: 100%;
    background-image: url(../images/lieux/accueil.jpg);
    background-size: cover;
    background-position: center;
    position: absolute;
    display: none;
}

.bouton-winner{
    right: 250px;
    animation: scale 10s both;
    animation-iteration-count: infinite;
}

@keyframes scale {
    50% {
transform: scale(0.9);
}
    100% {
transform: scale(1);
}}

.recommencer-win {
	position: absolute;
    cursor: pointer;
    bottom: 165px;
    right: 530px; 
}

.bebe-content{
    position: absolute;
    bottom: 100px;
    left: 175px;
    transition: 0.7s;
    z-index: 6;
}

.bebe-content:hover {
    transform: scale(1.1);
    transition: 0.7;
}

.biberon-fini{
    position: absolute;
    bottom: 300px;
    right: 100px;
    z-index: 6;
    animation-name: biberon-fini;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes biberon-fini {
    0% {
    transform: rotate(-5deg);
}
    100% {
    transform: rotate(1deg);
}}

@keyframes biberon-fini {
    0% {
    transform: rotate(5deg);
}
    100% {
    transform: rotate(-1deg);
}}