/* =========================================================
 *  QCM CSS — V2 (compat ANCIEN + NOUVEAU format)
 *  - Ancien : .qcm-actions DANS .qcm-questions
 *  - Nouveau : .qcm-actions à côté, dans .qcm-widget
 *  ✅ lock compatible : .qcm-widget.is-locked OU .qcm-questions.is-locked
 *  ✅ boutons/score/styles : ciblage via .qcm-widget (fallback ancien conservé)
 * ======================================================= */

/* --- conteneur questions --- */
.qcm-questions{
  /* border:2px solid #e7eef6; */
  border-radius:10px;
  padding:0px 5px 5px 5px;
  background:#fff;
  font-family: Arial, system-ui, sans-serif;
  color:black;
  font-size:14pt;
}

.qcm-q{
  margin:10px 0 0px 0;
  font-weight:600;
}

/* ===== QCM : réponses en GRID responsive ===== */
.qcm-choices{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  align-items:stretch;
}

/* ✅ Question "ratée" (aucune case cochée) */
.qcm-choices.is-missed{
  border:2px dashed #d64545;
  border-radius:3px;
  background:transparent;
  padding:6px;
  box-sizing:border-box;
}

/* cartes */
.qcm-choice{
  display:flex;
  gap:10px;
  align-items:center;
  padding:3px 3px;
  border:2px solid #e7eef6;
  border-radius:12px;
  background:#fafcff;
  cursor:pointer;
  width:100%;
  box-sizing:border-box;
}

@media (max-width:520px){
  .qcm-choices{ gap:5px !important; }
  .qcm-choice{ padding:0px !important; gap:2px !important; }
}

.qcm-choice:hover{ background:#f4f9ff; }

.qcm-choice input[type="checkbox"]{ margin-top:2px; }

/* ===== LOCK (compat JS ancien + nouveau) ===== */
/* Nouveau JS : .qcm-widget.is-locked
   Ancien CSS/JS : .qcm-questions.is-locked */
.qcm-widget.is-locked .qcm-choices,
.qcm-questions.is-locked .qcm-choices{
  pointer-events:none;
  user-select:none;
}

.qcm-widget.is-locked .qcm-choice,
.qcm-questions.is-locked .qcm-choice{
  cursor:default;
}

/* ===== états correction ===== */
.qcm-choice.is-ok{
  border-color:#06752c;
  background:#f3fbf6;
  color:#035720;
}

.qcm-choice.is-bad{
  border:2px solid #d64545;
  background:rgba(214,69,69,.10);
  color:#5a0f0f;
}

.qcm-choice.is-solution{
  border:2px dashed #ffb913;
  background:#fff5bf;
  color:#6a4d08;
}

/* ===== Actions (structure-agnostic) ===== */
.qcm-actions{
  padding-top:12px;
  border-top:1px solid #e7eef6;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:12px;
}

/* ===== Boutons QCM (alignés sur blanks-widget) ===== */
/* V2 : on cible via .qcm-widget (nouveau) + fallback ancien (.qcm-questions) */
.qcm-widget .qcm-actions button,
.qcm-questions .qcm-actions button{
  padding:8px 14px;
  border-radius:8px;
  border:1px solid #0f6d86;
  background:#147e99;
  color:#fff;
  cursor:pointer;
  -webkit-appearance:none;
  font-size:12pt;
  font-weight:normal;
  line-height:1.1;
  font-family:arial;
}

.qcm-widget .qcm-actions button:hover,
.qcm-questions .qcm-actions button:hover{
  filter:brightness(0.95);
}

/* Bouton correction */
.qcm-widget .qcm-actions .qcm-solution:hover,
.qcm-widget .qcm-actions .qcm-solution.is-active,
.qcm-questions .qcm-actions .qcm-solution:hover,
.qcm-questions .qcm-actions .qcm-solution.is-active{
  border:2px solid #ffb913;
  background:rgba(255,245,191,.54);
  color:#6a4d08;
}

/* Bouton recommencer */
.qcm-widget .qcm-actions .qcm-retry,
.qcm-questions .qcm-actions .qcm-retry{
  background:#f0f3f6;
  color:#0f4c5c;
  border-color:#cfd9e6;
}

/* ===== checkbox accent-color (structure-agnostic) ===== */
.qcm-widget .qcm-inp,
.qcm-questions .qcm-inp{ accent-color:#2b7bbb; }

.qcm-widget .qcm-choice.is-ok .qcm-inp,
.qcm-questions .qcm-choice.is-ok .qcm-inp{ accent-color:#068c34; }

.qcm-widget .qcm-choice.is-bad .qcm-inp,
.qcm-questions .qcm-choice.is-bad .qcm-inp{ accent-color:#d64545; }

.qcm-widget .qcm-choice.is-solution .qcm-inp,
.qcm-questions .qcm-choice.is-solution .qcm-inp{ accent-color:#ffb913; }

/* ===== SCORE (structure-agnostic) ===== */
.qcm-widget .qcm-score,
.qcm-questions .qcm-score{
  margin-left:auto;
  padding:8px 14px;
  display:inline-flex;
  align-items:center;
  font-weight:800;
  color:#0f4c5c;
  font-family:arial;
  font-size:12pt;
}

.qcm-score.is-hidden{ display:none !important; }