body{
    background-image: url('background.webp');
    background-size: cover; /* pour ajuster la taille de l'image au conteneur */
    background-repeat: no-repeat; /* pour éviter la répétition de l'image */
}

.Titre{
    position: absolute;
    right: 52%;
    color :rgb(175, 114, 23)
}


.texte{
    display: flex;
    justify-content: center;
    background-color: hsl(30, 1%, 34%);
    padding: 2%; /* Espace à l'intérieur du cadre */
    width: 28%;
    height : 2%;
}



.menu {
    display: flex;
    justify-content: center;
    background-color: hsl(30, 1%, 34%);
    width: 32%;
}

.option {
    padding: 2%;
    cursor: pointer;
}



.cadre {
    justify-content: center;
    display: none;
    padding: 1.0%;
    background-color: hsl(30, 1%, 34%); /* Couleur de fond (jaune dans cet exemple) */
    height: 20%;
}

.cadre img {
    position: relative;
    cursor : pointer;
}

.cadre img.selected {
    border: 2px solid red; /* Style de sélection pour l'image */
}

.zone-clic {
    /* Style des zones de clic */
    margin-top: 7%;
    margin-left : 74%;
    width: 5%; /* Largeur de la zone de clic */
    height: 5%; /* Hauteur de la zone de clic */
    position: absolute;
    background-color: rgba(0, 0, 255, 0.5); /* Couleur de fond semi-transparente */
    cursor: pointer;
}

#cadre-joueurs.active {
    display: block;
    width: 30%; /* 1/3 de la largeur de la page */
}

#cadre-icones.active {
    display: block;
    width: 30%; /* 1/3 de la largeur de la page */
}

.grid-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.grid-container img {
    width: calc(20% - 10px); /* 20% de largeur pour 5 images, moins les marges entre elles */
    margin-bottom: 8%;
}


.validation{
    display: flex;
    justify-content: center;
    background-color: hsl(30, 1%, 34%); /* Couleur de fond (jaune dans cet exemple) */
    padding: 1%; /* Espace à l'intérieur du cadre */
    width: 15%; /* Largeur du cadre */
    height : 3%;
    margin-top: 3%;
    position: absolute; /* Position fixe pour rester au-dessus lors du défilement */
    top: 5%; /* Aligné avec le bord supérieur */
    left: 35%; /* Placé au milieu de la largeur de la page */
}

.boutton-validation{
    background-color: rgb(175, 114, 23);
    position: absolute; /* Position absolue par rapport à l'élément parent */
    bottom: 0%; /* Aligner le bas du bouton avec le bas de l'élément parent */
    left: 43%; /* Aligner le bouton au centre horizontalement */


}

.img-fond {
    width: 45%;
    height: auto;
    display: block;
    position: absolute;
    top: 5%;
    left: 55%;
  }