/* ===========
   style.css
   =========== */

/* On s’assure que rien n’est tronqué au bas du conteneur */
html, body {
  margin: 0;
  padding: 0;
  overflow: auto;
}

/* Conteneur centralisé */
#gueule-de-bois-form {
  max-width: 600px;
  margin: 2em auto;
  font-family: Arial, sans-serif;
  padding: 0 1em 2em; /* ajout de padding-bottom pour éviter la coupure */
  overflow: visible;  /* s’assurer que tout le contenu soit visible */
}

/* Titre */
#gueule-de-bois-form h2 {
  text-align: center;
  margin-bottom: 0.2em; /* espace réduit pour faire tenir le sous-titre */
}

/* Sous-titre (plus petits caractères) */
#gueule-de-bois-form p.sous-titre {
  text-align: center;
  font-size: 0.9em;
  color: #555;
  margin-bottom: 1.5em;
}

/* Container pour chaque question */
.item-container {
  margin-bottom: 1.5em;
}

/* Label de l’item en gras */
.item-container label.item-label {
  display: block;
  font-weight: bold;
  margin-bottom: 0.5em;
}

/* Wrapper pour les boutons radio (0 à 10) */
.scale {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}

/* Chaque case (radio + chiffre) */
.scale label {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.9em;
}

/* Style des boutons radio (agrandis un peu pour être plus cliquables) */
.scale input[type="radio"] {
  width: 1.2em;
  height: 1.2em;
}

/* Navigation boutons */
#navigation {
  display: flex;
  justify-content: space-between;
  margin-top: 1.5em;
}

#navigation button {
  padding: 0.5em 1em;
  font-size: 1em;
  cursor: pointer;
}

/* Zone de résultats : encadrée, fond clair */
#resultats {
  margin-top: 2em;
  padding: 1em;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #f9f9f9;
}

/* Texte du score */
#resultats p {
  margin: 0.5em 0;
}

/* Couleurs prédéfinies pour le message */
#message-significatif {
  font-weight: bold;
}