/* Local Noto Sans (variable + italic) */
@font-face{
  font-family:'Noto Sans';
  src:url('../fonts/NotoSans-Var.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Noto Sans';
  src:url('../fonts/NotoSans-Italic.woff2') format('woff2');
  font-weight:100 900;
  font-style:italic;
  font-display:swap;
}

:root{
  --vb-font:'Noto Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --vb-primary:#1A73D9;         /* bouton primaire plein */
  --vb-text:#111827;
  --vb-surface:#FFFFFF;
  --vb-border:#D0D7E2;
  --vb-shadow:0 8px 24px rgba(0,0,0,.06);
  --vb-radius:16px;
  --vb-focus:#99C4FF;

  --vb-nav-bg:#F6F9FE;          /* Précédent/Suivant/Réinitialiser bg */
  --vb-nav-border:#D0D7E2;      /* contours clairs */
  --vb-nav-text:#0F3B7A;        /* texte bleu foncé sur nav */
}

.vbq-quiz{
  font-family:var(--vb-font);
  font-size:14px;
  line-height:1.5;
  color:var(--vb-text);
  background:var(--vb-surface);
  border:1px solid var(--vb-border);
  border-radius:var(--vb-radius);
  padding:22px;
  max-width:820px;
  margin:22px auto;
  box-shadow:var(--vb-shadow);
}

.vbq-card{
  background:#fff;
  border:1px solid var(--vb-border);
  border-radius:var(--vb-radius);
  padding:18px;
  box-shadow:var(--vb-shadow);
  display:flex;
  flex-direction:column;
  gap:12px;
}

.vbq-text{font-weight:800; font-size:1.05rem}
.vbq-answers{display:flex; flex-direction:column; gap:10px}
.vbq-row{display:flex; gap:10px; align-items:flex-start}
.vbq-row input[type="radio"]{transform:translateY(2px)}

/* Actions */
.vbq-actions{display:flex; justify-content:space-between; margin-top:14px; align-items:center}
.vbq-left,.vbq-right{display:flex; gap:10px}
.vbq-actions button{
  border-radius:16px;
  padding:10px 18px;
  font-weight:800;
  cursor:pointer;
  transition:filter .12s ease, transform .04s ease;
}
.vbq-actions button:active{ transform:translateY(1px); }
.vbq-actions button:focus{ outline:3px solid var(--vb-focus); outline-offset:2px; }

/* Primary (Vérifier / Valider) */
.vbq-check,.vbq-submit{
  background:var(--vb-primary);
  color:#fff;
  border:1px solid var(--vb-primary);
}
.vbq-check:hover,.vbq-submit:hover{ filter:brightness(.97); }

/* Nav (Précédent/Suivant) + Réinitialiser */
.vbq-prev,.vbq-next,.vbq-reset{
  background:var(--vb-nav-bg);
  color:var(--vb-nav-text);
  border:1px solid var(--vb-nav-border);
}
.vbq-prev:disabled,.vbq-next:disabled{ opacity:.5; cursor:not-allowed; }
.vbq-reset:hover,.vbq-prev:hover,.vbq-next:hover{ filter:brightness(.98); }

/* Feedback par question */
.vbq-result{margin-top:14px; font-weight:900; color:#059669}
.vbq-qresult{margin-top:6px; font-weight:700}
.vbq-card--ok{box-shadow:0 0 0 2px rgba(5,150,105,.25), var(--vb-shadow)}
.vbq-card--ko{box-shadow:0 0 0 2px rgba(239,68,68,.25), var(--vb-shadow)}


/* --- VerbaQuiz 0.2.1 fixes --- */
.vbq-quiz{ font-size:14px !important; line-height:1.5; }
.vbq-card{ border-radius:12px !important; }
.vbq-actions button{ border-radius:12px !important; font-size:14px !important; }
.vbq-text,.vbq-answers,.vbq-qresult,.vbq-result{ font-size:14px !important; }


/* --- VerbaQuiz 0.2.3: match VerbaDictée button style --- */
.vbq-actions button {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 12px !important;
  padding: 10px 18px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  min-height: 44px !important;
  line-height: 1.2 !important;
  transition: filter .12s ease, transform .04s ease;
}
.vbq-check, .vbq-submit {
  background: #1A73D9 !important;
  border-color: #1A73D9 !important;
  color: #fff !important;
}
.vbq-prev, .vbq-next, .vbq-reset {
  background: #F6F9FE !important;
  border: 1px solid #D0D7E2 !important;
  color: #0F3B7A !important;
}
.vbq-prev:disabled, .vbq-next:disabled {
  opacity: .55 !important;
  cursor: not-allowed !important;
}
.vbq-check:hover, .vbq-submit:hover { filter: brightness(.97) !important; }
.vbq-prev:hover, .vbq-next:hover, .vbq-reset:hover { filter: brightness(.98) !important; }
.vbq-actions button:active { transform: translateY(1px); }


/* --- VerbaQuiz 0.2.6 fixes --- */
.vbq-quiz {
  max-width: 100% !important;
  width: 100% !important;
}
.vbq-quiz .vbq-btn:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* VerbaQuiz original player responsive tweak */
.vbq-audio{width:100%;min-width:0}
.vbq-audio audio{width:100%;max-width:100%;display:block;box-sizing:border-box}


/* --- VerbaQuiz: Anti-jump CSS guards --- */
.vbq-audio { width:100%; min-width:0; overscroll-behavior:contain; }
.vbq-audio audio { touch-action: manipulation; }


/* --- VerbaQuiz: responsive container & buttons hardening --- */
.vbq-quiz{max-width:100%; width:100%; box-sizing:border-box;}
.vbq-card{box-sizing:border-box; width:100%; overflow:hidden;}
.vbq-actions{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; width:100%;}
.vbq-actions .vbq-left, .vbq-actions .vbq-right{display:flex; gap:10px; flex-wrap:wrap; max-width:100%;}
.vbq-actions .vbq-btn{max-width:100%;}
@media (max-width: 640px){
  .vbq-actions{flex-direction:column; align-items:stretch;}
  .vbq-actions .vbq-btn{width:100%;}
}
/* Ensure form controls wrap correctly inside .vbq-answers */
.vbq-answers{display:flex; flex-direction:column; gap:10px; width:100%;}
.vbq-row{display:flex; gap:10px; align-items:flex-start; flex-wrap:wrap; width:100%;}
.vbq-row > *{max-width:100%; box-sizing:border-box;}
/* Audio responsiveness */
.vbq-audio{width:100%; min-width:0;}
.vbq-audio audio{width:100%; max-width:100%; display:block; box-sizing:border-box; min-height:38px;}


/* --- VerbaQuiz: audio overlay for mobile taps --- */
.vbq-audio{ position: relative; }
.vbq-audio-overlay{ position:absolute; inset:0; background:transparent; display:none; }
@media (hover: none) and (pointer: coarse){
  .vbq-audio-overlay{ display:block; }
  .vbq-audio-overlay.vbq-overlay-disabled{ pointer-events:none; }
}