/* ===== Le Trésor du Génie (identifiants qvgt) : plateau télé, génie présentateur, pyramide et jokers =====
   Fichier dédié, chargé après style.css et serie.css (qui porte le style commun des sélecteurs de génies). */

.qv-page { max-width: 960px; margin: 0 auto; }
.qv-genies .niveaux { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; border: 0; padding: 0; margin: 16px 0; }

/* Plateau : bleu nuit, projecteurs violets, sol en cercle lumineux */
.qv-plateau { min-width: 0; position: relative; overflow: hidden; padding: 18px; border: 1px solid #5a4aa8; border-radius: var(--rayon); background: radial-gradient(ellipse at 50% 120%, #3a2a8a, #0b1430 60%, #050816); }
.qv-plateau > :not(.qv-decor) { position: relative; z-index: 1; }
.qv-decor { position: absolute; inset: 0; pointer-events: none; }
.qv-decor > span { position: absolute; display: block; }
.qv-projo { top: -10%; width: 40%; height: 120%; clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, #b39cff44, transparent 75%); transform-origin: 50% 0; animation: qv-projo 8s ease-in-out infinite alternate; }
.qv-projo.p1 { left: -6%; }
.qv-projo.p2 { right: -6%; animation-delay: -8s; background: linear-gradient(180deg, #6ad0ff33, transparent 75%); }
.qv-sol { left: 10%; right: 10%; bottom: -60px; height: 160px; border-radius: 50%; background: radial-gradient(ellipse, #6a5aff44, transparent 70%); box-shadow: inset 0 0 0 2px #8f7aff33; }

.qv-haut { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 16px; align-items: start; }
.qv-animateur { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; align-items: center; }
.qv-presentateur { grid-row: 1 / 3; }
.qv-presentateur .genie-choix { background: none; min-height: 0; }
.qv-presentateur .genie-portrait { font-size: 10px; margin: 0; }
.qv-nom-presentateur { margin: 0; color: var(--or); font-family: "Cinzel", Georgia, serif; font-weight: 900; font-size: 0.95rem; }
.qv-bulle { position: relative; margin: 6px 0 0; padding: 10px 14px; border-radius: 14px; background: #f4f6ff; color: #14203f; font-weight: 600; line-height: 1.4; min-height: 2.8em; }
.qv-bulle::before { content: ""; position: absolute; left: -10px; top: 14px; border: 6px solid transparent; border-right: 6px solid #f4f6ff; border-width: 6px 10px 6px 0; }

/* Pyramide des gains */
.qv-pyramide { list-style: none; margin: 0; padding: 8px; border: 1px solid #5a4aa8; border-radius: 10px; background: #050816cc; font-variant-numeric: tabular-nums; }
.qv-palier { display: flex; justify-content: space-between; gap: 8px; padding: 1px 8px; border-radius: 4px; color: #ffa94d; font-size: 0.82rem; }
.qv-palier.assure { color: #fff; font-weight: 800; }
.qv-palier.gagne { color: #8f8fb8; }
.qv-palier.courant { background: #ffa94d; color: #1a0a00; font-weight: 900; box-shadow: 0 0 12px #ffa94d88; }
.qv-rang { min-width: 1.6em; }

/* Jokers */
.qv-jokers { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 14px 0 8px; }
.qv-joker { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 96px; padding: 8px 10px; border: 2px solid #8fa3d8; border-radius: 999px; background: radial-gradient(circle at 50% 30%, #2a3d7a, #0b1430); color: var(--texte); cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; }
.qv-joker:hover:not(:disabled), .qv-joker:focus-visible { border-color: var(--or); box-shadow: 0 0 14px #f5c54266; }
.qv-joker:disabled { cursor: default; opacity: 0.55; }
.qv-joker.utilise { position: relative; opacity: 0.35; }
.qv-joker.utilise::after { content: ""; position: absolute; left: 10%; right: 10%; top: 50%; height: 3px; background: var(--rouge); transform: rotate(-18deg); }
.qv-joker-icone { font-size: 1.2rem; font-weight: 900; color: var(--or); }
.qv-joker-nom { font-size: 0.72rem; }

/* Aide d'un joker : ami ou votes du public */
.qv-aide { max-width: 520px; margin: 0 auto 10px; padding: 10px 14px; border: 1px solid #6ad0ff66; border-radius: 10px; background: #0b1430dd; }
.qv-aide p { margin: 0 0 6px; }
.qv-ami { font-style: italic; }
.qv-vote { display: grid; grid-template-columns: 1.6em 1fr 3.4em; align-items: center; gap: 8px; margin: 4px 0; }
.qv-vote-fond { height: 12px; border-radius: 6px; background: #ffffff1a; overflow: hidden; }
.qv-vote-barre { display: block; height: 100%; background: linear-gradient(90deg, #6ad0ff, var(--or)); }
.qv-vote-pct { text-align: right; font-variant-numeric: tabular-nums; }

/* Question et réponses en losanges */
.qv-question { margin: 8px auto 12px; padding: 16px 40px; border: 2px solid #8fa3d8; background: linear-gradient(180deg, #13204a, #050816); clip-path: polygon(4% 0, 96% 0, 100% 50%, 96% 100%, 4% 100%, 0 50%); text-align: center; }
.qv-numero { margin: 0 0 4px; color: #ffa94d; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; }
.qv-texte { margin: 0; font-size: 1.2rem; font-weight: 600; line-height: 1.4; }
.qv-reponses { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qv-reponse { display: flex; gap: 8px; align-items: center; min-height: 52px; padding: 10px 32px; border: 2px solid #8fa3d8; background: linear-gradient(180deg, #13204a, #050816); color: var(--texte); font-size: 1rem; text-align: left; cursor: pointer; clip-path: polygon(5% 0, 95% 0, 100% 50%, 95% 100%, 5% 100%, 0 50%); transition: background 0.2s; }
.qv-reponse:hover:not(:disabled), .qv-reponse:focus-visible { background: linear-gradient(180deg, #2a3d7a, #13204a); }
.qv-reponse:focus-visible { outline: 3px solid var(--or); outline-offset: -6px; }
.qv-reponse:disabled { cursor: default; }
.qv-lettre { color: var(--or); font-weight: 900; }
.qv-reponse.choisie { background: linear-gradient(180deg, #ffb347, #e07a2f); color: #1a0a00; }
.qv-reponse.choisie .qv-lettre { color: #1a0a00; }
.qv-reponse.bonne { background: linear-gradient(180deg, #3ee08a, #1a9a52); color: #04210f; animation: qv-bonne 0.4s steps(2) 3; }
.qv-reponse.bonne .qv-lettre { color: #04210f; }
.qv-reponse.fausse { background: linear-gradient(180deg, #ff7a7a, #c03030); color: #fff; }
.qv-reponse.fausse .qv-lettre { color: #fff; }
.qv-actions { margin-top: 14px; }

/* Fin de partie */
.qv-fin { text-align: center; }
.qv-fin h2 { font-family: "Cinzel", Georgia, serif; color: var(--or); }
.qv-fin-gain { margin: 4px 0; font-family: "Cinzel", Georgia, serif; font-weight: 900; font-size: clamp(1.8rem, 6vw, 3rem); color: var(--or); text-shadow: 0 0 20px #f5c54266; }

/* Historique des gains réalisés (gains fictifs du plateau) */
.qv-historique { margin: 16px 0; padding: 14px 16px; border: 1px solid #5a4aa8; border-radius: var(--rayon); background: #050816aa; }
.qv-historique h2 { margin: 0 0 4px; font-size: 1.1rem; color: var(--or); }
.qv-historique-liste { list-style: none; margin: 8px 0 0; padding: 0; max-height: 260px; overflow-y: auto; }
.qv-ligne-gain { display: grid; grid-template-columns: 7.5em minmax(0, 1fr) auto; grid-template-areas: "date montant issue" "date avec avec"; column-gap: 12px; padding: 6px 4px; border-bottom: 1px solid #ffffff12; font-variant-numeric: tabular-nums; }
.qv-date { grid-area: date; color: var(--texte-doux); font-size: 0.85rem; }
.qv-montant { grid-area: montant; color: var(--or); }
.qv-issue { grid-area: issue; font-size: 0.85rem; }
.qv-avec { grid-area: avec; color: var(--texte-doux); font-size: 0.8rem; }
.qv-ligne-gain.million .qv-montant { text-shadow: 0 0 10px #f5c542aa; }
.qv-ligne-gain.rate .qv-issue { color: var(--rouge); }
.qv-ligne-gain.parti .qv-issue { color: var(--orange); }

/* Pactole : le plateau s'illumine d'or et se remplit de tickets dans tous les sens */
.qv-fin { position: relative; overflow: hidden; }
#qv-pluie, #qv-fin-pluie { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.qv-plateau.pactole { border-color: var(--or); box-shadow: 0 0 40px #f5c54288, inset 0 0 80px #f5c54233; }
.qv-plateau.pactole .qv-sol { background: radial-gradient(ellipse, #f5c54288, transparent 70%); }
.qv-pluie > span { position: absolute; left: 50%; top: 45%; transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0.9; }
.qv-billet { padding: 3px 8px; border: 2px solid #c9961f; border-radius: 4px; background: repeating-linear-gradient(90deg, #ffe08a 0 6px, #f5c542 6px 12px); color: #5a3a08; font-size: 0.7rem; font-weight: 900; letter-spacing: 0.04em; white-space: nowrap; box-shadow: 0 2px 8px #0008; }
.qv-billet::before { content: "🎟️ "; }
.qv-billet-emoji { font-size: clamp(1.2rem, 3vw, 2rem); filter: drop-shadow(0 2px 4px #0008); }
.qv-pluie > .jaillit { animation: qv-jaillit 2.6s ease-out var(--d) infinite both; }
.qv-pluie > .tombe { left: var(--g); top: -10%; transform: rotate(var(--r)); animation: qv-tombe 3.2s linear var(--d) infinite both; }
.qv-fin.pactole .qv-fin-gain { animation: qv-pactole 1.2s ease-in-out infinite alternate; }
@keyframes qv-jaillit { 0% { transform: translate(0, 0) scale(0.2) rotate(0); opacity: 0; } 10% { opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--x), var(--y)) scale(1) rotate(var(--r)); opacity: 0; } }
@keyframes qv-tombe { from { transform: translateY(0) rotate(0); opacity: 1; } to { transform: translateY(120vh) rotate(var(--r)); opacity: 0.9; } }
@keyframes qv-pactole { from { transform: scale(1); text-shadow: 0 0 20px #f5c54266; } to { transform: scale(1.08); text-shadow: 0 0 40px #f5c542; } }
@keyframes qv-projo { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
@keyframes qv-bonne { 50% { filter: brightness(1.4); } }

@media (max-width: 760px) {
  .qv-haut { grid-template-columns: minmax(0, 1fr); }
  .qv-pyramide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; min-width: 0; }
  .qv-palier { padding: 1px 4px; font-size: 0.7rem; }
  .qv-palier .qv-gain { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .qv-palier .qv-unite { display: none; }
}
@media (max-width: 560px) {
  .qv-pyramide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qv-genies .niveaux { grid-template-columns: repeat(2, 1fr); }
  .qv-reponses { grid-template-columns: 1fr; }
  .qv-question { padding: 14px 24px; }
  .qv-joker { min-width: 72px; }
  .qv-presentateur .genie-portrait { font-size: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .qv-projo, .qv-reponse.bonne, .qv-plateau .genie-choix *, .qv-pluie > span, .qv-fin.pactole .qv-fin-gain { animation: none !important; }
  .qv-pluie > .tombe { top: auto; bottom: 4%; }
}