/* quiz.css — Quiz interactif (questions/réponses, progress bar).
   Anciennement dispersé entre tokens.css et blog.css, regroupé ici.
   Dépend de tokens.css + base.css + components.css.
*/

.nb-wrap{
  font-family: var(--font-mono);
  max-width: 820px;
  margin: 0 auto;
  padding: var(--sp-16);
}

/* Animation quiz steps */
/* Fix quiz : les étapes non actives ne doivent pas prendre de place */




.qstep{
  display:none;
  opacity:0;
  transform:translateX(20px);

  border:var(--b-mid);
  background:var(--c-white);
  box-shadow:var(--sh-s);

  padding:var(--sp-12);
  margin:var(--sp-12) 0;
}

.qstep.active{
  display:block;
  opacity:1;
  transform:translateX(0);
}




.qstep.exit-left {
  opacity: 0;
  transform: translateX(-20px);
}

.qstep.exit-right {
  opacity: 0;
  transform: translateX(20px);
}

.answer-card{
  display:flex;
  align-items:flex-start;
  gap:var(--sp-12);

  position:relative;

  padding:var(--sp-14);
  margin:var(--sp-10) 0;

  border:var(--b-mid);
  border-radius:var(--r-0);

  background:var(--c-white);
  box-shadow:var(--sh-s);

  cursor:pointer;

  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    background-color 120ms ease;
}

.answer-card:has(input:checked){
  background:var(--c-accent);
  border:var(--b-strong);
  box-shadow:var(--sh-xl);
}

.answer-card:hover {
  transform: translateX(4px);
  box-shadow: var(--sh-m);
}

/* Empêche les clics "précis" sur la radio : on clique la carte */
.answer-card input{
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

/* Le texte prend la place, wrap normal */
.answer-card span{
  flex: 1;
  min-width: 0;            /* important en flex pour éviter les trucs bizarres */
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere; /* au pire, casse proprement si mot trop long */
}


/* Accessibilité : focus clavier */
.answer-card:focus-within{
  outline: 0;
  box-shadow: var(--sh-xl);
}

.nb-card{
  border: var(--b-mid);
  background: var(--c-white);
  box-shadow: var(--sh-s);
  padding: var(--sp-12);
  margin: var(--sp-12) 0;
}

.nb-card--tight{
  padding: var(--sp-10);
}

.nb-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: var(--sp-12);
}

.nb-btn{
  padding: var(--sp-10) var(--sp-14);
  border: var(--b-mid);
  background: var(--c-accent);
  box-shadow: var(--sh-s);
  font-weight: 900;
  cursor:pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.nb-actions{
  display:flex;
  align-items:center;
  gap:var(--sp-10);
  flex-wrap:wrap;
  margin-top:var(--sp-12);
}


.nb-actions .nb-btn{
  flex: 1 1 160px;         /* 2 boutons par ligne si possible */
}


.nb-btn:hover{
  transform: translateX(3px);
  box-shadow: var(--sh-m);
}



.nb-btn:active{
  transform: translate(3px,3px);
  box-shadow: var(--sh-xs);
}
.nb-btn:disabled{
  opacity: .55;
  cursor:not-allowed;
  transform:none;
  box-shadow: var(--sh-s);
}

/* Progress */
.nb-progress{
  height: 10px;
  border: var(--b-mid);
  margin-top: var(--sp-8);
  background: var(--c-white);
}

#progressBar{
  height:100%;
  width:0%;
  background: var(--c-black); /* ou var(--c-accent) si tu veux */
  transition: width 160ms ease;
}

/* Errors */
.nb-error{
  border: var(--b-mid);
  background: var(--c-white);
  box-shadow: var(--sh-s);
  padding: var(--sp-12);
}

.qerr{
  border: var(--b-mid);
  background: var(--c-white);
  box-shadow: var(--sh-s);
  padding: var(--sp-10);
  margin-top: var(--sp-10);
}

/* ===== Boîte quiz (intro / résultat, page article) ===== */
.quiz-box{
  border:var(--b-mid);
  background:var(--c-aqua);
  box-shadow:var(--sh-xl);
  padding:var(--sp-16);
  margin:var(--sp-20) 0;
}

.quiz-question{
  border:var(--b-mid);
  background:var(--c-white);
  box-shadow:var(--sh-s);
  padding:var(--sp-12);
  margin:var(--sp-12) 0;
}

.quiz-question label{
  display:block;
  border:var(--b-mid);
  background:var(--c-white);
  box-shadow:var(--sh-xs);
  padding:var(--sp-8);
  margin:var(--sp-8) 0;
  cursor:pointer;
}
#quizResult{
  margin-top:var(--sp-16);
  border:var(--b-mid);
  padding:var(--sp-14);
  background:var(--c-ok);
  box-shadow:var(--sh-s);
}


/* ===== Mobile : cartes + padding moins agressifs ===== */
@media (max-width: 480px){
  .nb-wrap{
    padding: var(--sp-10);
    font-size: var(--fs-14);
  }

  .answer-card{
    padding: var(--sp-12);
    gap: var(--sp-10);
  }

  .nb-actions .nb-btn{
    flex: 1 1 100%;        /* 1 bouton par ligne si c'est trop serré */
  }
}