/* ==============================================
   Quiz InnoVit — widgets-jogetjim v1.1.0
   Assistant pas-à-pas (une question par étape)
   ============================================== */
.qiv-wrap {
  --qiv-green:    #2E7D5B;
  --qiv-green-dk: #1f5e43;
  --qiv-light:    #EAF5EF;
  --qiv-light-dk: #d6ebe0;
  --qiv-white:    #FFFFFF;
  --qiv-black:    #10261c;
  --qiv-muted:    rgba(16,38,28,0.45);
  --qiv-error:    #dc2626;
  --qiv-r:        14px;
  --qiv-font:     'DM Sans', sans-serif;
  --qiv-disp:     'Bebas Neue', sans-serif;
}
.qiv-wrap, .qiv-wrap *, .qiv-wrap *::before, .qiv-wrap *::after { box-sizing: border-box; }
.qiv-wrap { font-family: var(--qiv-font); max-width: 580px; width: 100%; }

.qiv-card {
  background: var(--qiv-white); border-radius: var(--qiv-r);
  border: 2px solid var(--qiv-green);
  box-shadow: 0 12px 40px rgba(46,125,91,0.13); overflow: hidden;
}

.qiv-header { background: var(--qiv-green); padding: 24px 28px 18px; }
.qiv-title {
  font-family: var(--qiv-disp) !important; font-size: 30px !important;
  color: var(--qiv-white) !important; letter-spacing: 1px !important;
  line-height: 1.05 !important; margin: 0 !important; padding: 0 !important;
  border: none !important; background: none !important; text-transform: none !important;
}
.qiv-subtitle {
  color: rgba(234,245,239,0.75) !important; font-size: 12px !important;
  margin: 6px 0 0 !important; font-weight: 400 !important; font-style: normal !important;
}

/* Barre de progression */
.qiv-progress {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 28px; background: var(--qiv-light);
  border-bottom: 1px solid var(--qiv-light-dk);
}
.qiv-progress-bar {
  flex: 1; height: 8px; border-radius: 99px;
  background: var(--qiv-light-dk); overflow: hidden;
}
.qiv-progress-fill {
  display: block; height: 100%; width: 25%;
  background: var(--qiv-green); border-radius: 99px;
  transition: width .3s ease;
}
.qiv-progress-label {
  font-size: 11px; font-weight: 700; color: var(--qiv-green-dk);
  text-transform: uppercase; letter-spacing: .6px; white-space: nowrap; flex-shrink: 0;
}
.qiv-progress.done .qiv-progress-fill { background: var(--qiv-green-dk); }

.qiv-body { padding: 22px 28px; background: var(--qiv-white); }

/* Étapes : une seule visible à la fois */
.qiv-step { display: none; }
.qiv-step.active { display: block; }
.qiv-q-label {
  font-size: 14px !important; font-weight: 700 !important;
  color: var(--qiv-black) !important; margin: 0 0 10px !important; line-height: 1.4 !important;
}
.qiv-options { display: flex; flex-direction: column; gap: 8px; }
.qiv-opt {
  display: block !important; width: 100% !important; text-align: left !important;
  padding: 11px 15px !important; background: var(--qiv-light) !important;
  color: var(--qiv-black) !important; border: 2px solid transparent !important;
  border-radius: 9px !important; font-family: var(--qiv-font) !important;
  font-size: 14px !important; font-weight: 500 !important; cursor: pointer !important;
  transition: background .15s, border-color .15s !important; box-shadow: none !important;
  line-height: 1.3 !important; appearance: none !important; -webkit-appearance: none !important;
}
.qiv-opt:hover { background: var(--qiv-light-dk) !important; }
.qiv-opt.selected {
  background: var(--qiv-green) !important; color: var(--qiv-white) !important;
  border-color: var(--qiv-green-dk) !important;
}

/* Lien « Précédent » */
.qiv-back {
  display: inline-block !important; margin-top: 14px !important;
  padding: 4px 2px !important; background: transparent !important;
  color: var(--qiv-muted) !important; border: none !important;
  font-family: var(--qiv-font) !important; font-size: 13px !important;
  font-weight: 600 !important; cursor: pointer !important;
  box-shadow: none !important; text-decoration: none !important;
  appearance: none !important; -webkit-appearance: none !important;
}
.qiv-back:hover { color: var(--qiv-green-dk) !important; }

.qiv-result { display: none; padding: 4px 28px 24px; background: var(--qiv-white); }
.qiv-result.show { display: block; }
.qiv-verdict { display: none; border-radius: 11px; padding: 18px 20px; margin-bottom: 14px; }
.qiv-verdict.show { display: block; }
.qiv-yes { background: rgba(46,125,91,0.10); border: 2px solid var(--qiv-green); }
.qiv-no  { background: rgba(220,38,38,0.07); border: 2px solid var(--qiv-error); }
.qiv-verdict-badge { font-family: var(--qiv-disp); font-size: 24px; letter-spacing: .5px; margin-bottom: 6px; }
.qiv-yes .qiv-verdict-badge { color: var(--qiv-green-dk); }
.qiv-no  .qiv-verdict-badge { color: var(--qiv-error); }
.qiv-verdict-text { font-size: 14px; color: var(--qiv-black); line-height: 1.55; margin: 0; }

.qiv-btn-ghost {
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  padding: 8px 16px !important; background: transparent !important;
  color: var(--qiv-green-dk) !important; border: 1px solid var(--qiv-green) !important;
  border-radius: 8px !important; font-family: var(--qiv-font) !important; font-size: 13px !important;
  font-weight: 600 !important; cursor: pointer !important; transition: background .2s !important;
  white-space: nowrap !important; text-decoration: none !important; box-shadow: none !important;
  line-height: 1.2 !important; appearance: none !important; -webkit-appearance: none !important;
}
.qiv-btn-ghost:hover { background: var(--qiv-light) !important; }

@media (max-width: 500px) {
  .qiv-header, .qiv-body, .qiv-result { padding-left: 16px !important; padding-right: 16px !important; }
  .qiv-title { font-size: 25px !important; }
}