/**
 * Outil - Quiz vrai / faux — Vélo and Co
 * Version: 1.1.2
 * Scope : .vac-qz (aucune fuite sur le thème)
 * Charte : noir #0A0A0A + lime #99FF00, accents par catégorie via --cat.
 */

.vac-qz {
  max-width: 820px;
  margin: 0 auto;
  --qz-off: 200px;
  --qz-ease: cubic-bezier(.22, 1, .36, 1);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  color: #0A0A0A;
}
.vac-qz *, .vac-qz *::before, .vac-qz *::after { box-sizing: border-box; }
.vac-qz [hidden] { display: none !important; }

/* ── HUD ── */
.vac-qz-hud { display: flex; justify-content: center; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.vac-qz-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid #E6E8EB; border-radius: 999px;
  padding: 9px 18px; font-size: 1rem; font-weight: 600; color: #6A7282; line-height: 1;
}
.vac-qz-chip b { color: #0A0A0A; font-weight: 800; font-style: normal; }
.vac-qz-chip--score { background: #0A0A0A; border-color: #0A0A0A; color: #9CA3AF; }
.vac-qz-chip--score b { color: #99FF00; display: inline-block; }
.vac-qz-star { color: #99FF00; }
.vac-qz-chip--score b.is-pop { animation: vac-qz-pop .45s cubic-bezier(.34, 1.4, .64, 1); }
.vac-qz-chip--streak {
  background: rgba(251, 191, 36, .12); border-color: rgba(251, 191, 36, .5);
  color: #92400E; font-weight: 700;
  animation: vac-qz-pop .45s cubic-bezier(.34, 1.4, .64, 1);
}
.vac-qz-chip--streak.is-hot { background: rgba(251, 146, 60, .14); border-color: rgba(251, 146, 60, .55); color: #9A3412; }
@keyframes vac-qz-pop { 0% { transform: scale(.6); } 55% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* ── Barre de progression ── */
.vac-qz-progress { display: flex; justify-content: center; gap: 6px; margin-bottom: 22px; }
.vac-qz-progress span {
  display: block; width: 16px; height: 6px; border-radius: 999px;
  background: #E6E8EB; transition: width .3s var(--qz-ease), background .3s;
}
.vac-qz-progress span.is-current { width: 26px; background: #0A0A0A; }
.vac-qz-progress span.is-win  { background: #99FF00; }
.vac-qz-progress span.is-lose { background: #f87171; }

/* ── Table de jeu ── */
.vac-qz-stage {
  position: relative; height: 452px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 15%, #000 85%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 15%, #000 85%, transparent 100%);
}
.vac-qz-card {
  position: absolute; left: 50%; top: 16px; width: 300px; height: 400px; margin-left: -150px;
  z-index: 1; opacity: 0; transform: scale(.6);
  transition: transform .55s var(--qz-ease), opacity .4s var(--qz-ease);
  pointer-events: none;
}
.vac-qz-card.is-current { opacity: 1; transform: none; z-index: 5; pointer-events: auto; }
.vac-qz-card.is-next  { opacity: .75; transform: translateX(var(--qz-off)) scale(.84) rotate(5deg); z-index: 3; }
.vac-qz-card.is-next2 { opacity: .4;  transform: translateX(calc(var(--qz-off) * 1.6)) scale(.7) rotate(10deg); z-index: 2; }
.vac-qz-card.is-prev  { opacity: .75; transform: translateX(calc(var(--qz-off) * -1)) scale(.84) rotate(-5deg); z-index: 3; }
.vac-qz-card.is-prev2 { opacity: .4;  transform: translateX(calc(var(--qz-off) * -1.6)) scale(.7) rotate(-10deg); z-index: 2; }
.vac-qz-flip { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .6s var(--qz-ease); }
.vac-qz-card.is-flipped .vac-qz-flip { transform: rotateY(180deg); }
.vac-qz-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 20px; padding: 30px 26px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; overflow: hidden;
}

/* Recto : blanc, liseré de catégorie */
.vac-qz-front { background: #fff; border: 1px solid #E6E8EB; box-shadow: 0 10px 30px rgba(10,10,10,.10), 0 2px 6px rgba(10,10,10,.06); }
.vac-qz-front::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--cat, #99FF00); }
.vac-qz-front::before { content: ""; position: absolute; inset: 12px; border: 1.5px solid var(--cat, #E6E8EB); opacity: .32; border-radius: 13px; pointer-events: none; }
.vac-qz-cat {
  position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  background: var(--cat, #99FF00); color: #0A0A0A;
  font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 999px; line-height: 1.3;
}
.vac-qz-corner { position: absolute; display: flex; flex-direction: column; align-items: center; line-height: 1; font-weight: 800; color: #0A0A0A; font-size: 1.05rem; gap: 3px; }
.vac-qz-corner i { font-style: normal; background: var(--cat, #99FF00); color: #0A0A0A; font-size: .95rem; font-weight: 800; padding: 1px 5px; border-radius: 5px; }
.vac-qz-corner.tl { top: 22px; left: 22px; }
.vac-qz-corner.br { bottom: 22px; right: 22px; transform: rotate(180deg); }
.vac-qz-claim { font-size: 1.28rem; font-weight: 700; color: #0A0A0A; line-height: 1.45; margin: 0; max-width: 232px; }

/* Verso : noir, accents de catégorie */
.vac-qz-back { background: #0A0A0A; color: #fff; transform: rotateY(180deg); box-shadow: 0 10px 30px rgba(10,10,10,.18); }
.vac-qz-back::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--cat, #99FF00); }
.vac-qz-back::before, .vac-qz-final::before { content: ""; position: absolute; inset: 12px; border: 1.5px solid rgba(255,255,255,.14); border-radius: 13px; pointer-events: none; }
.vac-qz-cat-dark {
  position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  color: var(--cat, #99FF00); border: 1px solid currentColor;
  font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px; opacity: .9; line-height: 1.3;
}
.vac-qz-result { font-weight: 800; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px; }
.vac-qz-result.is-win { color: #99FF00; }
.vac-qz-result.is-lose { color: #f87171; }
.vac-qz-verdict {
  font-family: 'Rajdhani', 'Inter', -apple-system, sans-serif;
  font-size: 1.9rem; font-weight: 700; letter-spacing: .04em; line-height: 1;
  padding: 10px 24px; border-radius: 14px; margin-bottom: 16px;
}
.vac-qz-verdict.is-vrai { background: #99FF00; color: #0A0A0A; }
.vac-qz-verdict.is-faux { background: #fff; color: #0A0A0A; }
.vac-qz-explain { color: #d1d5db; font-size: .95rem; line-height: 1.5; margin: 0; max-width: 238px; }

/* Carte finale */
.vac-qz-final { background: #0A0A0A; color: #fff; box-shadow: 0 10px 30px rgba(10,10,10,.18); }
.vac-qz-final::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--cat, #99FF00); }
.vac-qz-maillot { width: 74px; height: 74px; margin-bottom: 10px; filter: drop-shadow(0 4px 12px rgba(0,0,0,.5)); animation: vac-qz-maillot-in .55s cubic-bezier(.34, 1.4, .64, 1); }
.vac-qz-maillot svg { width: 100%; height: 100%; display: block; }
@keyframes vac-qz-maillot-in { 0% { transform: scale(.4) rotate(-12deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.vac-qz-final-score { font-family: 'Rajdhani', 'Inter', -apple-system, sans-serif; font-weight: 700; font-size: 3.2rem; line-height: 1; margin-bottom: 10px; }
.vac-qz-final-score b { color: #99FF00; font-weight: 700; }
.vac-qz-final-score small { font-size: 1.7rem; color: #6A7282; font-weight: 700; }
.vac-qz-final-badge {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid; border-radius: 999px; padding: 4px 12px;
  font-size: .9rem; font-weight: 700; margin-bottom: 8px; line-height: 1.4;
}
.vac-qz-final-best { font-size: .88rem; color: #9CA3AF; margin-bottom: 8px; }
.vac-qz-final-best b { color: #fff; }

/* ── Confettis ── */
.vac-qz-confetti { position: absolute; left: 50%; top: 45%; width: 0; height: 0; z-index: 9; pointer-events: none; }
.vac-qz-confetti i { position: absolute; display: block; width: 8px; height: 12px; border-radius: 2px; }

/* ── Boutons de pari ── */
.vac-qz-controls { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 28px; min-height: 56px; flex-wrap: wrap; }
.vac-qz-guess {
  font-family: 'Rajdhani', 'Inter', -apple-system, sans-serif;
  font-weight: 700; font-size: 1.15rem; letter-spacing: .08em;
  padding: 14px 38px; border-radius: 999px; border: 2px solid #0A0A0A;
  cursor: pointer; line-height: 1;
  transition: background .2s, color .2s, border-color .2s, transform .2s var(--qz-ease);
}
.vac-qz-guess.is-vrai { background: #99FF00; color: #0A0A0A; border-color: #99FF00; }
.vac-qz-guess.is-faux { background: #0A0A0A; color: #fff; }
.vac-qz-guess:not(:disabled):hover { transform: translateY(-2px); }
.vac-qz-guess.is-vrai:not(:disabled):hover { background: #8AE800; border-color: #8AE800; }
.vac-qz-guess.is-faux:not(:disabled):hover { background: #111827; border-color: #111827; }
.vac-qz-guess:disabled { opacity: .32; cursor: default; }
.vac-qz-guess:focus-visible { outline: 3px solid #111827; outline-offset: 3px; }
.vac-qz-guess.is-faux:focus-visible { outline-color: #99FF00; }

/* ── Boutons d'action ── */
.vac-qz-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-weight: 600; font-size: 1rem;
  padding: 14px 26px; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; text-decoration: none; line-height: 1.2;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.vac-qz-btn:hover { transform: translateY(-1px); }
.vac-qz-btn--next { background: #0A0A0A; color: #99FF00; }
.vac-qz-btn--next:hover { background: #111827; color: #99FF00; }
.vac-qz-btn--replay { background: transparent; border-color: #0A0A0A; color: #0A0A0A; }
.vac-qz-btn--replay:hover { background: #111827; border-color: #111827; color: #fff; }
.vac-qz-btn--cta {
  font-family: 'Rajdhani', 'Inter', -apple-system, sans-serif;
  font-weight: 700; font-size: 1.15rem; letter-spacing: .3px;
  background: #99FF00; color: #0A0A0A;
}
.vac-qz-btn--cta:hover { background: #8AE800; color: #0A0A0A; }
.vac-qz-btn:focus-visible { outline: 3px solid #111827; outline-offset: 3px; }
.vac-qz-btn--next:focus-visible { outline-color: #99FF00; }

/* ── Aide ── */
.vac-qz-help { text-align: center; color: #6A7282; font-size: 1rem; margin: 14px 0 0; }

/* ── Échelle des maillots ── */
.vac-qz-tiers-wrap { margin-top: 40px; margin-bottom: 44px; }
.vac-qz-tiers-title {
  text-align: center; font-size: .88rem; font-weight: 700; color: #6A7282;
  text-transform: uppercase; letter-spacing: .08em; margin: 0 0 16px;
}
/* Le maillot déborde par-dessus le haut de la carte, comme suspendu dessus. */
.vac-qz-tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 560px; margin: 34px auto 0; }
.vac-qz-tier {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  padding: 30px 8px 14px; border-radius: 16px; border: 1px solid #E6E8EB; background: #F9FAFB; overflow: visible;
  transition: transform .3s var(--qz-ease), border-color .3s, background .3s, opacity .3s;
}
.vac-qz-tier-ico {
  display: block; width: 56px; height: 56px; margin-top: -52px; margin-bottom: 14px;
  filter: drop-shadow(0 6px 9px rgba(10,10,10,.18));
  transition: filter .3s, transform .3s var(--qz-ease);
}
.vac-qz-tier-ico svg { width: 100%; height: 100%; display: block; }
.vac-qz-tier.is-dim { opacity: .5; }
.vac-qz-tier.is-dim .vac-qz-tier-ico { filter: grayscale(1) drop-shadow(0 5px 7px rgba(10,10,10,.12)); }
.vac-qz-tier.is-won { background: #0A0A0A; border-color: #0A0A0A; transform: translateY(-4px); }
.vac-qz-tier.is-won .vac-qz-tier-ico { transform: scale(1.16); filter: drop-shadow(0 8px 12px rgba(10,10,10,.34)); }
.vac-qz-tier-nom { font-size: .82rem; font-weight: 800; line-height: 1.2; color: #0A0A0A; }
.vac-qz-tier.is-won .vac-qz-tier-nom { color: #fff; }
.vac-qz-tier-seuil { font-size: .78rem; color: #6A7282; line-height: 1.2; }
.vac-qz-tier.is-won .vac-qz-tier-seuil { color: #9CA3AF; }

/* ── Adaptation fond sombre ──
   Classe .is-on-dark posée par le shortcode [vac-quiz-vrai-faux-dark].
   Les surfaces noires sont relevées à #161616 + contours clairs pour
   rester lisibles sur n'importe quel fond foncé (Elementor, thème…). */
.vac-qz.is-on-dark .vac-qz-chip { background: #161616; border-color: rgba(255,255,255,.14); color: #9CA3AF; }
.vac-qz.is-on-dark .vac-qz-chip b { color: #fff; }
.vac-qz.is-on-dark .vac-qz-chip--score { background: #161616; border-color: rgba(153,255,0,.38); color: #9CA3AF; }
.vac-qz.is-on-dark .vac-qz-chip--score b,
.vac-qz.is-on-dark .vac-qz-star { color: #99FF00; }
.vac-qz.is-on-dark .vac-qz-chip--streak { color: #fbbf24; }
.vac-qz.is-on-dark .vac-qz-chip--streak.is-hot { color: #fb923c; }

.vac-qz.is-on-dark .vac-qz-progress span { background: rgba(255,255,255,.18); }
.vac-qz.is-on-dark .vac-qz-progress span.is-current { background: #fff; }
.vac-qz.is-on-dark .vac-qz-progress span.is-win  { background: #99FF00; }
.vac-qz.is-on-dark .vac-qz-progress span.is-lose { background: #f87171; }

/* La carte-recto blanche ressort déjà ; on relève le verso et la carte finale */
.vac-qz.is-on-dark .vac-qz-front { box-shadow: 0 14px 36px rgba(0,0,0,.6); }
.vac-qz.is-on-dark .vac-qz-back,
.vac-qz.is-on-dark .vac-qz-final { background: #161616; box-shadow: 0 14px 36px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.09); }
.vac-qz.is-on-dark .vac-qz-final-score small { color: #9CA3AF; }

.vac-qz.is-on-dark .vac-qz-guess.is-faux { background: #1c1c1c; border-color: rgba(255,255,255,.3); }
.vac-qz.is-on-dark .vac-qz-guess.is-faux:not(:disabled):hover { background: #2a2a2a; border-color: rgba(255,255,255,.45); }
.vac-qz.is-on-dark .vac-qz-btn--next { background: #1c1c1c; box-shadow: inset 0 0 0 1.5px rgba(153,255,0,.42); }
.vac-qz.is-on-dark .vac-qz-btn--next:hover { background: #242424; }
.vac-qz.is-on-dark .vac-qz-btn--replay { border-color: rgba(255,255,255,.36); color: #fff; }
.vac-qz.is-on-dark .vac-qz-btn--replay:hover { background: #1c1c1c; border-color: rgba(255,255,255,.55); color: #fff; }

.vac-qz.is-on-dark .vac-qz-help,
.vac-qz.is-on-dark .vac-qz-tiers-title { color: #9CA3AF; }

.vac-qz.is-on-dark .vac-qz-tier { background: #161616; border-color: rgba(255,255,255,.1); }
.vac-qz.is-on-dark .vac-qz-tier-nom { color: #fff; }
.vac-qz.is-on-dark .vac-qz-tier-seuil { color: #9CA3AF; }
.vac-qz.is-on-dark .vac-qz-tier.is-dim { opacity: .42; }
.vac-qz.is-on-dark .vac-qz-tier.is-won { background: #1f1f1f; border-color: #99FF00; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .vac-qz { --qz-off: 132px; }
  .vac-qz-card { width: 268px; height: 366px; margin-left: -134px; }
  .vac-qz-stage { height: 414px; }
}
@media (max-width: 560px) {
  .vac-qz { --qz-off: 78px; }
  .vac-qz-card { width: 240px; height: 366px; margin-left: -120px; }
  .vac-qz-stage {
    height: 410px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
  }
  /* Recto/verso : réserver le haut pour la pastille de catégorie, sinon le
     texte "BIEN VU, +1 POINT" chevauche la pastille sur les longues explications. */
  .vac-qz-front, .vac-qz-back { padding-top: 48px; }
  .vac-qz-claim { font-size: 1.08rem; max-width: 200px; }
  .vac-qz-cat { font-size: .64rem; padding: 3px 9px; }
  .vac-qz-cat-dark { font-size: .6rem; padding: 3px 9px; }
  .vac-qz-result { margin-bottom: 8px; }
  .vac-qz-verdict { font-size: 1.55rem; padding: 8px 20px; margin-bottom: 12px; }
  .vac-qz-explain { font-size: .88rem; line-height: 1.4; max-width: 200px; }
  .vac-qz-maillot { width: 62px; height: 62px; margin-bottom: 8px; }
  .vac-qz-final-score { font-size: 2.8rem; }
  .vac-qz-final-score small { font-size: 1.5rem; }
  .vac-qz-guess { padding: 12px 28px; }
  /* 2 colonnes : gros écart vertical pour laisser respirer les maillots
     qui débordent par-dessus le haut de leur carte. */
  .vac-qz-tiers { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .vac-qz-card, .vac-qz-flip, .vac-qz-guess, .vac-qz-btn, .vac-qz-tier, .vac-qz-progress span { transition: none; }
  .vac-qz-chip--score b.is-pop, .vac-qz-chip--streak, .vac-qz-maillot { animation: none; }
}