body {
  font-family: Arial, sans-serif;
  text-align: center;
  margin-top: 50px;
}

#container {
  display: flex;
  justify-content: center; /* Centrer les enfants horizontalement */
  align-items: flex-start; /* Aligner les enfants en haut */
  flex-direction: row; /* Disposer les enfants en ligne horizontale */
}

/*Style de menu */
#mainMenu {
  display: flex; /* Utilisez Flexbox pour aligner les éléments de menu */
  justify-content: center; /* Répartissez les éléments uniformément avec de l'espace autour d'eux */
  list-style-type: none; /* Enlève les puces de liste */
  padding: 0; /* Enlève le padding par défaut */
}

#mainMenu > li {
  position: relative; /* Pour le positionnement absolu des sous-menus */
  margin: 0 30px; /* Ajoute de l'espace horizontal entre les éléments de menu */
  cursor: pointer; /* Change le curseur pour indiquer que c'est cliquable */
}

#mainMenu li ul {
  display: none; /* Cache les sous-menus par défaut */
  position: absolute; /* Positionne les sous-menus correctement */
  list-style-type: none; /* Enlève les puces de liste */
  padding: 5px; /* Un peu de padding */
  background-color: #f9f9f9; /* Couleur de fond des sous-menus */
  left: 0; /* Alignez le sous-menu avec l'élément parent */
  top: 100%; /* Placez le sous-menu juste en dessous de l'élément parent */
  min-width: 150px; /* Définissez une largeur minimale pour les sous-menus */
  width: auto; /* Permet au sous-menu de s'adapter à son contenu */
  white-space: nowrap; /* Empêche le texte des sous-menus de passer à la ligne suivante */
  text-align: left; /* Aligner le texte à gauche */
}

#mainMenu li:hover > ul {
  display: block; /* Montre le sous-menu au survol */
}


/* Bordures, ombres, transitions */
ul li {
  position: relative; /* Nécessaire pour le positionnement des sous-menus */
  cursor: pointer; /* Change le curseur pour indiquer que c'est cliquable */
}

ul li ul {
  min-width: 120px; /* Assure une largeur minimale pour les sous-menus */
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); /* Ajoute une ombre pour la profondeur */
  z-index: 1; /* Assure que le sous-menu est au-dessus des autres éléments */
}

ul li ul li {
  padding: 8px; /* Espacement autour des éléments de sous-menu */
  background-color: #f1f1f1; /* Couleur de fond pour les éléments de sous-menu */
  display: block; /* Assure que chaque élément de sous-menu est affiché correctement */
}

ul li ul li:hover {
  background-color: #ddd; /* Couleur de fond au survol pour les éléments de sous-menu */
}




#links {
  text-align: center; /* Centrer le lien horizontalement */
  margin-top: 20px; /* Ajouter un peu d'espace entre le lien et les éléments précédents */
}


#gameName {
  margin-top: 40px;
  height: 20px;
  text-align: center;
}

#gameContainer {
  /*position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 10vh;*/
}

#scoreAndRestartContainer {
  width: 200px; /* Donnez-lui une largeur fixe */
  margin-left: 20px; /* Ajoutez un peu d'espace entre gameContainer et scoreAndRestartContainer */
  text-align: center; /* Centrer le texte à l'intérieur du conteneur */
}

#scoreContainer {
  text-align: center;
}

#restartButton {
  display: block; /* Assurez-vous que le bouton s'affiche comme un bloc pour occuper toute la largeur */
  margin-top: 20px; /* Espace au-dessus du bouton pour le séparer du score */
  margin-left : 20px;
}

/* Style pour la question pour s'assurer qu'elle est bien au-dessus */
#question {
  margin-bottom: 20px;
  font-size: 24px;
}

#inputAndClear {
  display: flex;
  justify-content: center;
  align-items: center;
}

input[type="number"] {
  margin-right: 5px; /* Ajoute un peu d'espace entre la zone de texte et le bouton "Effacer" */
  flex-grow: 0; /* Empêche la zone de texte de se développer pour prendre de l'espace supplémentaire */
}

#clearButton {
  margin-top: 20px;
  flex-grow: 0; /* Empêche le bouton "Effacer" de se développer */
}


/* Style pour la zone de texte et les boutons */
input[type="number"], button {
  margin: 5px;
  padding: 10px; /* Ajustez selon l'apparence souhaitée */
  font-size: 16px; /* Taille de police pour faciliter la lecture */
}

/* Style spécifique pour la zone de texte pour ajuster sa largeur et sa hauteur */
input[type="number"] {
  width: 30%;
  max-width: 200px;
  height: 15px; /* Ajustez selon l'apparence souhaitée */
  text-align: center;
}

/* Style pour le bouton effacer pour le rapprocher de la zone de texte */
#clearButton {
  margin-top: -5px; /* Négatif pour rapprocher le bouton de la zone de texte */
}

#numericKeypad {
  margin-top: 20px;
}

/*style spécifique pour le bouton "Véririer la réponse" */
#checkAnswer {
  margin-top: 20px;
  height: 20px;
}

/* Style spécifique pour le message de feedback */
#feedbackMessage {
  margin-top: 40px;
  height: 20px;
}

/*  pour masquer les sous-menus */
#mainMenu li ul.hidden {
  display: none; /* Maintient le sous-menu caché */
}

#mainMenu li:hover > ul {
 /* display: block; /* Affiche le sous-menu au survol */
}