/* ========================================
       — QUESTIONNAIRE ENVIES
======================================== */

#questions-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 2rem;
}

/* Chaque bloc de question */
.question-envie {
  background: #f9fafb; /* gris clair */
  border: 1px solid #e5e7eb; /* gris moyen */
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Texte de question */
.question-envie label strong {
  font-size: 1.05rem;
  display: block;
  margin-bottom: 0.25rem;
}

.question-envie em {
  font-size: 0.95rem;
  color: #374151; /* gris foncé */
}

/* Curseur (slider) */
input[type="range"] {
  width: 100%;
  height: 8px;
  border-radius: 5px;
  background: #d1d5db;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #2563eb;
  cursor: pointer;
  border: none;
  margin-top: -6px;
}

input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #2563eb;
  cursor: pointer;
  border: none;
}

/* Valeur affichée à droite */
.envie-val {
  font-weight: bold;
  font-size: 1rem;
  color: #1e3a8a;
}

/* ===============================
   STYLE POUR LA QUESTION 12 (ÉTUDES)
   =============================== */

/* Masquer la case native */
.question-envie input[type="checkbox"] {
  display: none;
}

/* Style des labels comme des boutons */
.question-envie .etude-option {
  display: inline-block;
  padding: 0.6rem 1rem;
  margin: 0.4rem;
  border: 1px solid #d1d5db;
  border-radius: 999px; /* arrondi total */
  background: #ffffff;
  color: #374151;
  cursor: pointer;
  font-size: 0.95rem;
  transition: all 0.2s ease-in-out;
}

/* Effet hover */
.question-envie .etude-option:hover {
  background-color: #f3f4f6;
}

/* Quand sélectionné (case cochée) */
.question-envie input[type="checkbox"]:checked + .etude-option {
  background-color: #2563eb;  /* bleu vif */
  border-color: #1e3a8a;
  color: #ffffff;
  font-weight: 600;
}

/* Numéros prioritaires (Q13) */
input[type="number"] {
  width: 80px;
  padding: 0.4rem;
  font-size: 1rem;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: #ffffff;
}