body {
  /* Liste des images d'arrière-plan */
  background-image: url('images/logo.png'), url('/images/background.jpg');
  background-color: #f0f0f0; /* Couleur de fond en attendant l'image */

  /*le premier parametre est l'image logo, le deuxieme est l'image de fond */

  /* Taille individuelle de chaque image */
  background-size: 40% , cover; 
  
  /* Répétition individuelle de chaque image */
  background-repeat: no-repeat, no-repeat;
  
  /* Positionnement individuel de chaque image */
  background-position: center, center;

  /* decalage individuel de chaque background-image */
  background-position: 120% -65%, center;
  
  /* Propriétés générales pour le body */
  height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Aligne le contenu en haut, flex center etire par le millieu */ 
  align-items: center;
  font-family: Arial, sans-serif;
}

/* Conteneur pour centrer les champs du formulaire */
#formWrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 400px; /* Limiter la largeur du formulaire */
}

/* Style pour le champ de saisie du nom d'utilisateur */
#usernameInput, #folderSelect, #questionCountInput {
  padding: 10px;
  font-size: 16px;
  width: 100%;
  margin-bottom: 10px;
  box-sizing: border-box; /* Pour inclure padding et bordure dans la largeur */
}

#folderSelect option[disabled] {
  color: lightgray !important; /* Définit la couleur du texte en gris */
}

/* Le conteneur du select doit avoir une position relative pour que l'overlay soit bien placé */
#folderSelectContainer {
  position: relative;
  width: 300px; /* Assurez-vous que la largeur est la même que celle du select */
}

/* Stylisation du select pour qu'il soit toujours en arrière-plan */
#folderSelect {
  position: relative;
  z-index: 1; /* Place le select en arrière-plan */
}

/* Superposition stylisée pour le carre blanc sur le selecteur d'exam */
#selectOverlay {
  position: absolute;
  top: 0;
  left: 2px; /* Décalage de 2px à gauche */
  width: calc(100% - 4px); /* Réduction de la largeur de 4px (2px de chaque côté) */
  height: 100%; /* Hauteur égale à celle du sélecteur */
  color: gray;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Aligne le texte à gauche */
  padding-left: 10px; /* Ajoute de l'espace pour que le texte ne touche pas le bord */
  pointer-events: none; /* Empêche l'interaction avec l'overlay */
  z-index: 2; /* Place l'overlay au-dessus du select */
  background-color: transparent; /* S'assurer que le fond est bien transparent */
}

#submitContainer {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  width: 100%;
  position: absolute;
  bottom: 40px; /* Relever le bouton de 40px par rapport au bas de l'écran */
  left: 50%;
  transform: translateX(-50%);
}

#submitUsernameButton {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  width: 300px;
}

/* Ajoute un effet au survol du bouton */
#submitUsernameButton:hover {
  background-color: #0056b3;
}

#bottomButton {
  margin-top: 20px; /* Ajuster la marge si nécessaire */
  margin-bottom: 20px; /* Ajuster la marge si nécessaire */
  padding: 10px 20px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Style pour le bouton en bas à gauche de l'écran */
#languageButton {
  position: fixed;
  bottom: 20px;
  left: 20px;
  padding: 10px 20px;
  font-size: 16px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

/* Ajoute un effet au survol du bouton */
#languageButton:hover {
  background-color: #0056b3;
}

/* Style pour entourer la réponse correcte en vert */
.correct-answer {
  border: 1px solid green;
  background-color: #e6ffe6;
  padding: 1px 10px 1px 1px;
  border-radius: 10px;
  margin-bottom: 5px;
  box-sizing: border-box;
}

/* Style pour entourer la mauvaise réponse sélectionnée en rouge */
.incorrect-answer {
  border: 1px solid red;
  background-color: #ffe6e6;
  padding: 1px 10px 1px 1px;
  border-radius: 10px;
  margin-bottom: 5px;
  box-sizing: border-box;
}

/* Style pour le bouton result, positionné en bas à droite */
#resultButton {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #007BFF; /* Couleur de fond bleu standard */
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

/* style pour le graphique de score */
#scoreChart {
  max-width: 90%;
  max-height: 80%;
  margin-bottom: 20px; /* Marges en bas pour espacer des autres éléments */
}