.quiz-container {
  max-width: 60vw;
  margin: 0 auto;
  background: #fff;
  padding: 20px;
  border-radius: 15px;
}

h1 {
  text-align: center;
  margin-top: 300px;
  color: #4b6cfb;
  margin-bottom: 20px;
}
#quiz-sections{
    border:1px dotted rgb(213, 227, 232);
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); 

}
.quiz{
  max-width: 100%;
  max-height: 300px;
}
.quiz img{
  max-width: 100vh;
  height: 300px;
  margin-left: 15%;
  border: none;
}

.section {
  display: none;
}

.section.active {
  display: block;
}

.section h2 {
  margin-top: -40px ;
  display: flex;
  justify-content: center;
  color: #434c99;
  font-size: 34px;
}

.section h2 span {
  margin-left: 10px;
}

.question-card {
  padding: 15px;
  border-radius: 10px;
  margin: 20px;
  color: rgb(30, 22, 72);
}

.options button {
  display: block;
  width: 100%;
  padding: 12px;
  margin: 20px 0;
  border-radius: 8px;
  cursor: pointer;
  background: #f9f9f9;
  text-align: left;
  border: 1px solid #fff;
  color: #413e42;
font-size: 18px;}

.options button:hover {
  background: #f7e5fdcc;
}

.options button.correct {
  background: #2ecc71;
  color: white;
}

.options button.incorrect {
  background: #e74c3c;
  color: white;
}

.feedback {
  margin-top: 5px;
  font-style: italic;
}

.navigation {
  text-align: right;
  margin-top: 15px;
}

#next-btn, #restart-btn, #back-course-btn {
  padding: 15px 20px;
  border: none;
  background: #936f97;
  color: white;
  border-radius: 10px;
  cursor: pointer;
  font-size: 16px;
  margin: 20px 20px 0 0;
}

#next-btn:hover, #restart-btn:hover, #back-course-btn:hover {
  background: #924e91;
}

.progress {
  font-weight: bold;
  margin-bottom: 20px;
  text-align: right;
  color: grey;
}
/* ✅ Partie responsive */
@media (max-width: 600px) {
  .quiz-container {
    width: 95%;
    padding: 1rem;
    margin: 0 auto;
  }
.quiz-container h1{
  font-size: 1.4rem;
}
  .quiz-container h2 {
    font-size: 1.3rem;
  }
   .quiz-container img{
    width: 280px;
    height: 150px;
   }
  #quiz-sections{
    width: 70vw;
    margin: -20px;
  }
  .quiz-container .question {
    font-size: 0.8rem;
    text-align: justify;
  }

  .quiz-container button {
    font-size: 0.95rem;
    padding: 0.7rem;
  }
}