/* =========================================================
   MODULE : BREVET QUIZ WIDGET
   Fichier : brevet-quiz-widget.css
   Version : V6
========================================================= */

.brevet-quiz-widget{
  position:relative;
}

/* Questions */
.brevet-quiz-question{
  display:none;
}

.brevet-quiz-question.is-active{
  display:block;
  animation:brevetQuizSlideIn .25s ease;
}

@keyframes brevetQuizSlideIn{
  from{
    opacity:0;
    transform:translateX(25px);
  }
  to{
    opacity:1;
    transform:translateX(0);
  }
}

/* =========================================================
   HEADER UNIQUE
   ligne 1 : progression | nouvelle série
   ligne 2 : difficulté  | suivant
========================================================= */

.brevet-quiz-toolbar{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:
    "progress reload"
    "difficulty next";

  gap:8px 16px;
  align-items:center;

  margin-bottom: 3px;
  padding:6px 20px 8px;
  background:#147e99;
  
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(30,126,153,.20);
  
  
}

/* Progression */
.brevet-quiz-track{
  grid-area:progress;
  min-width:0;
}

.brevet-quiz-progress{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.brevet-quiz-progress::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;

  height:8px;
  border-radius:999px;

  background:#248dae;
  transform:translateY(-50%);
}

/* Dots */
.quiz-dot{
  position:relative;
  z-index:2;

  width:12px;
  height:12px;
  min-width:12px;
  min-height:12px;

  padding:0;
  margin:0;
  border:none;
  border-radius:50%;

  background:#d8d8d8;
  cursor:pointer;

  transition:
    background .2s ease,
    transform .2s ease,
    outline .2s ease;
}

.quiz-dot.active{
  background:#ffd15c;
  outline:3px solid rgba(255,255,255,.85);
  outline-offset:2px;
  transform:scale(1.15);
}

.quiz-dot.is-unseen{
  background:#d8d8d8;
}

.quiz-dot.is-ok{
  background:#2ecc71;
}

.quiz-dot.is-wrong{
  background:#e74c3c;
}

.quiz-dot.is-solution{
  background:#f1c40f;
}

.quiz-dot:focus,
.quiz-dot:focus-visible{
  box-shadow:none;
}

/* Nouvelle série */
.brevet-quiz-reload{
  grid-area:reload;
  justify-self:end;

  height:30px;
  padding:0 14px;

  border:none;
  border-radius:6px;

  background:rgba(0,0,0,.18);
  color:#fff;

  font-size:.85rem;
  font-weight:800;
  text-transform:uppercase;

  cursor:pointer;

  transition:background .2s ease;
}

.brevet-quiz-reload:hover{
  background:rgba(0,0,0,.28);
}

/* Difficulté */
.brevet-quiz-level{
  grid-area:difficulty;
  justify-self:start;

  display:flex;
  align-items:center;
  gap:8px;

  color:#fff;

  font-size:.85rem;
  font-weight:700;
  white-space:nowrap;
}

.level-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#ccc;
}

.level-dot.is-active{
  background:#ffd15c;
}

/* Suivant */
.brevet-quiz-next{
  grid-area:next;
  justify-self:end;

  height:30px;
  margin:0;
  padding:0 14px;

  border:none;
  border-radius:4px;

  background:#8da5b7;
  color:#fff;

  font-weight:800;
  text-transform:uppercase;

  cursor:pointer;

  transition:
    background .2s ease,
    opacity .15s ease;
}

.brevet-quiz-next:hover{
  background:#1e7e99;
}

.brevet-quiz-next:disabled{
  opacity:.45;
  cursor:not-allowed;
}

/* Corps */
.brevet-quiz-body{
  margin-top:0;
}

/* Scores locaux masqués */
.qcm-score,
.brevet-quiz-hidden-score{
  display:none !important;
}

/* Correction bloquée */
.brevet-quiz-widget .is-locked{
  cursor:not-allowed !important;
}

.brevet-quiz-lock-message{
  display:inline-flex;
  align-items:center;
  gap:6px;

  color:#6a5400;
  font-size:.65rem;
  font-weight:600;

  opacity:0;
  transform:translateY(-4px);

  transition:
    opacity .2s ease,
    transform .2s ease;
}

.brevet-quiz-lock-message.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* Responsive */
@media (max-width:700px){
  .brevet-quiz-toolbar{
    grid-template-columns:1fr;
    grid-template-areas:
      "progress"
      "reload"
      "difficulty"
      "next";
  }

  .brevet-quiz-reload,
  .brevet-quiz-next{
    justify-self:stretch;
  }

  .brevet-quiz-level{
    justify-self:center;
  }
}