/* =========================================================
 * QCM CSS — V4
 * Compatible :
 * - QCM classique
 * - QCM tableau qcm-table / qcm-single
 * - variantes atome-yn-buttons / atome-yn-circles
 * ======================================================= */


/* =========================================================
   1) BASE QCM
   ======================================================= */

.qcm-questions{
  border-radius:10px;
  padding:0 5px 5px 5px;
  background:#fff;
  font-family:Arial, system-ui, sans-serif;
  color:#000;
  font-size:14pt;
}

.qcm-q{
  margin:10px 0 0 0;
  font-weight:600;
}


/* =========================================================
   2) QCM CLASSIQUE : CHOIX EN CARTES
   ======================================================= */

.qcm-choices{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  align-items:stretch;
}

.qcm-choice{
  display:flex;
  gap:10px;
  align-items:center;
  width:100%;
  box-sizing:border-box;
  padding:3px;
  border:2px solid #e7eef6;
  border-radius:12px;
  background:#fafcff;
  cursor:pointer;
}

.qcm-choice:hover{
  background:#f4f9ff;
}

.qcm-choice input[type="checkbox"],
.qcm-choice input[type="radio"]{
  margin-top:2px;
}

.qcm-choices.is-missed{
  border:2px dashed #d64545;
  border-radius:3px;
  background:transparent;
  padding:6px;
  box-sizing:border-box;
}


/* =========================================================
   3) ÉTATS CORRECTION — QCM CLASSIQUE
   ======================================================= */

.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;
}


/* =========================================================
   4) LOCK
   ======================================================= */

.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;
}


/* =========================================================
   5) ACTIONS / BOUTONS / SCORE
   ======================================================= */

.qcm-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid #e7eef6;
}

.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, system-ui, sans-serif;
}

.qcm-widget .qcm-actions button:hover,
.qcm-questions .qcm-actions button:hover{
  filter:brightness(.95);
}

.qcm-widget .qcm-actions .qcm-retry,
.qcm-questions .qcm-actions .qcm-retry{
  background:#f0f3f6;
  color:#0f4c5c;
  border-color:#cfd9e6;
}

.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;
}

.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, system-ui, sans-serif;
  font-size:12pt;
}

.qcm-score.is-hidden{
  display:none !important;
}


/* =========================================================
   6) INPUTS CLASSIQUES
   ======================================================= */

.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;
}


/* =========================================================
   7) QCM TABLEAU — BASE
   ======================================================= */

.atome-yn-head,
.atome-yn-row{
  display:grid;
  grid-template-columns:1fr 80px 80px;
  align-items:center;
}

.atome-yn-head{
  font-weight:700;
  text-align:center;
  margin-bottom:8px;
  padding:0 18px;
}

.atome-yn-row{
  min-height:50px;
  padding:0 18px;
}

.atome-yn-row:nth-child(even){
  background:#f2f2f2;
}

.atome-yn-row > span:first-child{
  font-size:1.1rem;
}

.qcm-table .qcm-inline,
.qcm-table .qcm-choices{
  display:contents;
}

.qcm-table .qcm-choice{
  display:flex;
  justify-content:center;
  align-items:center;
  border:none !important;
  background:none !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
}

.qcm-table .qcm-choice:hover{
  background:none !important;
}


/* =========================================================
   8) QCM TABLEAU — VARIANTE BOUTONS
   ======================================================= */

.atome-yn-buttons{
  --yn-btn-w:90px;
}

.atome-yn-buttons .atome-yn-head,
.atome-yn-buttons .atome-yn-row{
  grid-template-columns:1fr 110px 110px;
}

.atome-yn-buttons .qcm-inp{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.atome-yn-buttons .qcm-txt{
  display:flex;
  justify-content:center;
  align-items:center;
  width:var(--yn-btn-w);
  height:42px;
  border:2px solid #cfd8e3;
  border-radius:8px;
  background:#fff;
  color:#000;
  cursor:pointer;
}

.atome-yn-buttons .qcm-inp:checked + .qcm-txt{
  background:#1e7e99;
  color:#fff;
  border-color:#1e7e99;
}


/* Correction boutons */

.atome-yn-buttons .qcm-choice.is-ok .qcm-txt{
  border-color:#06752c;
  background:#f3fbf6;
  color:#035720;
}

.atome-yn-buttons .qcm-choice.is-bad .qcm-txt{
  border:2px solid #d64545;
  background:rgba(214,69,69,.10);
  color:#5a0f0f;
}

.atome-yn-buttons .qcm-choice.is-solution .qcm-txt{
  border:2px dashed #ffb913;
  background:#fff5bf;
  color:#6a4d08;
}


/* =========================================================
   9) QCM TABLEAU — VARIANTE CERCLES
   ======================================================= */

.atome-yn-circles .qcm-txt{
  display:none;
}

.atome-yn-circles .qcm-inp{
  appearance:none;
  -webkit-appearance:none;
  width:46px;
  height:46px;
  border-radius:50%;
  border:4px solid #8ea1b3;
  background:#fff;
  cursor:pointer;
  margin:0;
}

.atome-yn-circles .qcm-inp:checked{
  background:#aac6e1;
  border-color:#1e7e99;
}


/* Correction cercles */

.atome-yn-circles .qcm-choice.is-ok .qcm-inp{
  background:#f3fbf6;
  border:2pt dashed #06752c;
  box-shadow:none;
}

.atome-yn-circles .qcm-choice.is-bad .qcm-inp{
  background:rgba(214,69,69,.10);
  border:2pt dashed #d64545;
  box-shadow:none;
}

.atome-yn-circles .qcm-choice.is-solution .qcm-inp{
  background:#fff5bf;
  border:2pt dashed #ffb913;
  box-shadow:none;
}


/* =========================================================
   10) RESPONSIVE
   ======================================================= */

@media (max-width:520px){
  .qcm-choices{
    gap:5px !important;
  }

  .qcm-choice{
    padding:0 !important;
    gap:2px !important;
  }

  .atome-yn-head,
  .atome-yn-row{
    padding:0 8px;
  }

  .atome-yn-buttons .atome-yn-head,
  .atome-yn-buttons .atome-yn-row{
    grid-template-columns:1fr 88px 88px;
  }

  .atome-yn-buttons{
    --yn-btn-w:76px;
  }

  .atome-yn-circles .qcm-inp{
    width:38px;
    height:38px;
    border-width:3px;
  }
}