:root{
  --violet: #b999c8;
  --violet-dark: #a07fb3;
  --bg: #f4f6f8;
  --card: #ffffff;
  --muted: #6b6b7a;
  --green: #4caf50;
  --red: #e74c3c;
}

*{ box-sizing:border-box }

body{
  font-family:Inter, Arial, Helvetica, sans-serif;
  background:var(--bg);
  color:#222;
  margin:0;
  padding:20px;
}

/* Largeur plus grande pour les quiz */
.container{
  max-width:1100px;
  margin:2px auto;
  display:flex;
  flex-direction:column;
  gap:20px;
}

.card{
  background:var(--card);
  padding:12px 24px;
  border-radius:12px;
  box-shadow:0 6px 20px rgba(16,24,40,0.06);
}
#qcontent ol{
	padding-left: 0 !important;
}

.center-card{
  max-width:480px;
  margin:30px auto;
  text-align:center;
}

.logo-centered{ width:160px; margin:0 auto 12px; display:block; }
.logo-top{ width:160px; margin:0 auto 6px; display:block; }

/* Inputs */
.form input[type=text],
.form input[type=password],
#qcontent input[type=text]{
  padding:14px;
  width:100%;
  margin:10px 0;
  border-radius:8px;
  border:1px solid #ddd;
  font-size:16px;
}
input:focus { border-color: var(--violet-dark); outline:none; }

/* Buttons */
button{ cursor:pointer; transition:0.2s; }
button:hover{ opacity:0.9; }

.btn{ padding:12px 20px; border-radius:8px; border:none; font-weight:600; }
.btn.primary{ background:var(--violet); color:#fff; }
.btn.danger{ background:#ff6b6b; color:#fff; }

.muted{ color:var(--muted); font-size:0.95em; }
.notice{
  background:#fff0f7;
  padding:10px;
  border-radius:8px;
  color:var(--violet-dark);
  margin-bottom:8px;
}

/* QUIZ LAYOUT */
.quiz-card{
  margin:10px;
  padding:32px;
  display:flex;
  flex-direction:column;
  gap:18px;
  
}

.team-title{text-align:center;margin:6px 0 1px;font-size:20px;}
.timer{text-align:center;font-weight:700;color:var(--muted);margin-bottom:12px;}

/* OPTIONS – full width + sélection visible */
.option{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  margin:10px 0;
  padding:18px;
  font-size:18px;
  border-radius:10px;
  border:2px solid #ccc;
  background:#fff;
  text-align:center;
  cursor:pointer;
  transition:0.2s;
}

.option:hover{
  background:#f0e6ff;
  border-color:var(--violet-dark);
}

/* option sélectionnée */
.option.selected{
  border:3px solid var(--violet-dark);
  background:#f8f1ff;
  font-weight:700;
}

/* option correcte / incorrecte après validation */
.option.correct{
  border:3px solid var(--green);
  background:#e7f9e7;
}
.option.incorrect{
  border:3px solid var(--red);
  background:#fdeaea;
}

.hidden{ display:none; }

/* FEEDBACK */
.feedback{
  margin-top:16px;
  padding:14px;
  border-radius:10px;
  background:#faf7ff;
  border:1px solid #efe7ff;
}

.feedback .ok{
  font-weight:700;
  color:var(--green);
  margin-bottom:6px;
}

.feedback .no{
  font-weight:700;
  color:var(--red);
  margin-bottom:6px;
}

.explanation{ margin-top:8px; margin-bottom:15px;}

/* ORDER (drag & drop) */
ul{ padding-left:0; margin:0; }

.draggable{
  list-style:none;
  padding:14px;
  border:1px solid #e0e0ee;
  border-radius:10px;
  background:white;
  margin:10px 0;
  cursor:grab;
  font-size:16px;
  display:flex;
  gap:12px;
  align-items:center;
}

/* Numéros dans drag & drop */
.draggable::before{
  content: attr(data-num) ".";
  font-weight:700;
  color:var(--violet-dark);
}

/* Progress bar */
.progress{
  height:10px;
  background:#eee;
  border-radius:6px;
  overflow:hidden;
  margin-top:16px;
}
.progress > i{
  display:block;
  height:100%;
  background:var(--violet);
  width:0%;
}

@media(max-width:600px){
  .quiz-card{ padding:20px; }
  .option{ font-size:16px; padding:14px; }
  .draggable{ font-size:15px; padding:12px; }
  .logo-centered{ width:120px; }
}