.mini-jeu1 {
    width: 55%;
    height: 100%;
    text-align: center;
    margin: 0;
    padding: 0;
    display: none;
}
.mentionslegales {
    text-decoration: none;
    cursor: pointer;
    color: white;
}

.jeuvisible {
    display: block;
}

.choixcache {
    display: none;
}
.enlevereffets {
    all: unset;
}


.zone-de-jeu {
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.entete-jeu {
    width: 55vw;
    height: 11vw;
    margin: 0;
    padding: 0;
    background-color: #fbfbfb;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.activite {
    font-family: 'Motley Forces';
    font-size: 2vw;
    margin: 0;
    margin-top: 1vw;
    display: none;
}

.varbut {
    display: block;
}

.consigne {
    font-family: 'Montserrat-SemiBold';
    font-size: 1vw;
    margin: 0;
    margin-top: 0.7vw;
}

.quitter {
    all: unset;
    position: absolute;
    top: 1.4vw;
    right: 2vw;
    font-family: 'Montserrat-Regular';
    font-size: 0.8vw;
    margin: 0;
    padding: 0.6vw;
    cursor: pointer;
    background-color: #F9A473;
    color: #0E1422;
    border-radius: 0.2vw;
}


.divattente, .divpoteau, .divbarre, .divbut, .divarret {
    width: 18vw;
    height: 2.6vw;
    border-radius: 0.5vw;
    background-color: #0E1422;
    color: #F9A473;
    justify-content: center;
    align-items: center;
    font-size: 1vw;
    font-family: 'Montserrat-SemiBold';
    margin-top: 1vw;
    display: none;
}

.actionactive {
    display: flex;
}

.compteurpoints {
    display: flex;
    width: 11vw;
    height: 4.5vw;
    position: absolute;
    bottom: -0.7vw;
    left: 2vw;
}

/* CSS pour l'animation de déplacement du point */
.point-animation {
    transition: cx 0.3s cubic-bezier(0.2, 0, 0.8, 1); 
}


.vies {
    display: flex;
    width: 4.5vw;
    height: 3vw;
    position: absolute;
    bottom: 2vw;
    right: 2vw;
    justify-content: space-between;
    align-items: center;
}

.alive {
    fill: red;
    display: none;
    width: 2vw;
}

.dead {
    fill: black;
    display: none;
    width: 2vw;
}

.actif {
    display: block;
}


.partiehaute {
    width: 55vw;
    height: 15.6vw;
    margin: 0;
    padding: 0;
    background-color: #FFDF6F;
    position: relative;
    overflow: hidden;
}

.partiebasse {
    width: 55vw;
    height: 22.3vw;
    margin: 0;
    padding: 0;
    background-color: #b8cede;
    position: relative;
}



.but {
    position: absolute;
    width: 49vw;
    bottom: -8.3vw;
    left: 2.4vw;
}

.sous-but {
    position: absolute;
    width: 25.08vw;
    bottom: -0.1vw;
    left: 14.92vw;
    fill: #B8CEDE;
    stroke-width: 0.07vw;
    stroke: #B8CEDE;
}

.zone-cliquable {
    position: absolute;
    width: 27.08vw;
    height: 15.6vw;
    bottom: -0.1vw;
    left: 13.92vw;
    z-index: 2;
    cursor: pointer;
}

.goal {
    position: absolute;
    width: 20vw;
    z-index: 1;
    bottom: -4.1vw;
    left: 3.6vw;
    cursor: pointer;
}

.positiongoal {
    width: 6vw;
    height: 13.5vw;
    position: absolute;
    bottom: 0vw;
    left: 10.6vw;
    background-color: transparent;
    cursor: pointer;
}

.joueur {
    position: absolute;
    width: 30vw;
    bottom: -1vw;
    left: 1vw;
}

.balle {
    position: absolute;
    width: 22vw;
    top: -2vw;
    left: 13vw;
    z-index: 2;
}

.findepartie {
    position: absolute;
    width: 55vw;
    height: 85vh;
    top: 15vh;
    left: 45vw;
    z-index: 2;
    background-color: #0E1422;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: none;
}

.finjeu {
    display: flex;
}

.resultat {
    color: #fbfbfb;
    font-family: 'Motley Forces';
    font-size: 3.05vw;
    width: 40vw;
    margin: 0;
    margin-bottom: 1vw;
    display: none;
}

.resultatconcerne {
    display: block;
}

.resultatwin {
    font-size: 2.86vw;
}

.descriptionjeu {
    color: #fbfbfb;
    font-family: 'Montserrat-Regular';
    font-size: 1.3vw;
    width: 40vw;
    text-align: justify;
}

.rejouer {
    color: #b8cede;
    font-family: 'Montserrat-SemiBold';
    font-size: 1.26vw;
    width: 40vw;
    margin-top: 3vw;
}

.rejouer strong {
    color: #fbfbfb;
    font-family: 'Montserrat-Black';
    font-size: 1.5vw;
    text-decoration: underline;
    cursor: pointer;
}

.navjeux {
    width: 40vw;
    height: 12vw;
    margin-top: 1vw;
    display: flex;
}

.jeu1 {
    width: 18vw;
    height: 10vw;
    background-image: url(medias/pattern-orange.png);
    background-position: center;
    background-size: 30vw;
    border: 0.4vw solid #fbfbfb;
    border-right: 0.2vw solid #fbfbfb;
    border-radius: 0.5vw 0vw 0vw 0.5vw;
    display: flex;
    align-items: center;
    padding: 1vw;
    position: relative;
}

.jeu2 {
    width: 18vw;
    height: 10vw;
    background-image: url(medias/pattern-jaune.png);
    background-position: center;
    background-size: 30vw;
    border: 0.4vw solid #fbfbfb;
    border-left: 0.2vw solid #fbfbfb;
    border-radius: 0vw 0.5vw 0.5vw 0vw;
    display: flex;
    align-items: center;
    padding: 1vw;
    position: relative;
}

.nomrejouer1 {
    width: 11vw;
    font-size: 1.1vw;
    line-height: 1.2vw;
    text-shadow: 0.2vw 0 0 #fbfbfb, 0 0.2vw 0 #fbfbfb, 0 -0.2vw 0 #fbfbfb, -0.2vw 0 0 #fbfbfb, 0.2vw 0.2vw 0 #fbfbfb, 0.2vw -0.2vw 0 #fbfbfb, -0.2vw 0.2vw 0 #fbfbfb, -0.2vw -0.2vw 0 #fbfbfb;
    position: absolute;
    left: 0.6vw;
}

.illu-rejouer1 {
    width: 9vw;
    position: absolute;
    right: 0vw;
    bottom: 0vw;
}


.nomrejouer2 {
    width: 10vw;
    font-size: 1.1vw;
    line-height: 1.2vw;
    text-shadow: 0.2vw 0 0 #fbfbfb, 0 0.2vw 0 #fbfbfb, 0 -0.2vw 0 #fbfbfb, -0.2vw 0 0 #fbfbfb, 0.2vw 0.2vw 0 #fbfbfb, 0.2vw -0.2vw 0 #fbfbfb, -0.2vw 0.2vw 0 #fbfbfb, -0.2vw -0.2vw 0 #fbfbfb;
    position: absolute;
    right: 1.1vw;
}

.illu-rejouer2 {
    width: 9vw;
    position: absolute;
    left: 0vw;
    bottom: 0vw;
}

.jeu1:hover .ovorange {
    opacity: 1;
}
.jeu2:hover .ovjaune {
    opacity: 1;
}

.jeu1:hover, .jeu2:hover {
    cursor: none;
}


.mini-jeu4 {
    width: 82.5%;
    height: 21.6%;
    text-align: center;
    margin: 0;
    padding: 0;
    display: none;
    background-color: #B8CEDE;
    position: absolute;
    top: 25.8vw;
    border: 0.8vw solid #0E1422;
    z-index: 5;
    left: 8vw;
    border-top-right-radius: 0.3vw;
    border-bottom-right-radius: 0.3vw;
    justify-content: center;
    align-items: center;
}

.mini-jeu4 p {
    width: 70%;
    font-size: 2vw;
}

.pasjeumobile { 
    display: flex;
}