/* =======================
   STYLE GLOBAL
   ======================= */
body {
    font-family: Arial, Helvetica, sans-serif;
    background: #14aec9;
    color: #0b2035;
    margin: 0;
    padding: 0;
}



input,button,select{
    padding:8px;
    margin:6px;
}

#answers button {
  display: block;
  margin: 10px 0;
  padding: 10px;
  width: 100%;
  font-size: 18px;
  border-radius: 8px;
  border: 1px solid #ccc;
  cursor: pointer;
  transition: background 0.3s;
}

/* vert si correct */
#answers button.correct {
  background-color: #d4f7da;
  color: white;
}

/* rouge si mauvais */
#answers button.wrong {
  background-color: #ffd6d6;
  color: white;
}

.progress-wrap{
    width:100%;
    height:12px;
    background:#eee;
    border-radius:8px;
    margin-top:12px;
}

#progress-bar{
    height:100%;
    width:0%;
    background:linear-gradient(90deg, #4CAF50, #8BC34A);
    border-radius:8px;
}

.correct{
    background:#d4f7da;
}

.wrong{
    background:#ffd6d6;
}

/* === Pied de page === */
footer {
    margin-top: 26px;
    font-size: 0.9em;
    color: black;
    text-align: center;
    opacity: 0.3;
}