/* ===== La Série : configuration (génies, thèmes) et duel des quatre flammes =====
   Fichier dédié, chargé après style.css. Réutilise les cartes génies (.genie-choix) et la carte .question. */

.se-page { max-width: 860px; margin: 0 auto; }
.se-genies .niveaux { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; border: 0; padding: 0; margin: 16px 0; }
.se-sous-titre { margin: 20px 0 10px; font-size: 1.1rem; }
.se-themes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.se-theme { min-height: 70px; padding: 12px; border: 2px solid var(--bord); border-radius: var(--rayon); background: linear-gradient(160deg, var(--carte), var(--fond)); color: var(--texte); font-weight: 700; font-size: 1rem; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; }
.se-theme:hover, .se-theme:focus-visible { border-color: #ffa94d; }
.se-theme.choisi { border-color: var(--or); background: linear-gradient(160deg, #3a2a10, var(--fond)); box-shadow: 0 0 18px #ffa94d55; }
.se-theme.choisi::before { content: "🔥 "; }

/* Duel : le joueur et le génie, quatre flammes chacun */
.se-entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.se-theme-titre { margin: 0; font-family: "Cinzel", Georgia, serif; font-weight: 900; font-size: 1.3rem; color: #ffc38a; text-align: center; }
.se-duel { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 16px 0; }
.se-camp { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px; border: 2px solid var(--bord); border-radius: var(--rayon); background: radial-gradient(ellipse at top, var(--fond-2), var(--fond)); transition: border-color 0.3s, box-shadow 0.3s; }
.se-camp.a-la-main { border-color: #ffa94d; box-shadow: 0 0 22px #ffa94d55; }
.se-camp.a-la-main strong::after { content: " · joue"; color: #ffa94d; font-size: 0.8rem; }
.se-avatar.joueur-2 { background: linear-gradient(135deg, #8ab8ff, #2f6fe0); color: #0b1430; }
.se-avatar { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, var(--or), #e07a2f); color: #2a1206; font-size: 1.8rem; font-weight: 900; }
.se-genie .genie-choix { background: none; min-height: 0; }
.se-genie .genie-portrait { font-size: 8px; margin: 0; }
.se-contre { font-family: "Cinzel", Georgia, serif; font-weight: 900; font-size: 1.6rem; color: var(--or); text-shadow: 0 0 12px #f5c54266; }
.se-flammes { display: flex; gap: 6px; }
.se-flamme { font-size: 1.6rem; filter: grayscale(1) brightness(0.45); transition: filter 0.3s, transform 0.3s; }
.se-flamme.allumee { filter: drop-shadow(0 0 8px #ff7a2f); transform: scale(1.15); animation: se-flamme 0.9s ease-in-out infinite alternate; }
@keyframes se-flamme { from { transform: scale(1.05) rotate(-4deg); } to { transform: scale(1.2) rotate(4deg); } }

.se-question { position: relative; }
.se-question.masque .se-texte, .se-question.masque .se-marche { visibility: hidden; }
.se-question.masque::after { content: "⏸ Pause : question masquée"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--texte-doux); font-weight: 700; }
.se-marche { margin: 0 0 6px; color: #ffa94d; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.04em; }
.se-texte { margin: 0 0 12px; font-size: 1.25rem; font-weight: 600; line-height: 1.4; }
.se-chrono { display: flex; align-items: center; gap: 12px; margin: 10px 0 0; }
.se-secondes { min-width: 3.4em; font-family: "Cinzel", Georgia, serif; font-weight: 900; font-size: 1.8rem; color: var(--or); text-align: right; font-variant-numeric: tabular-nums; }
.se-chrono-fond { flex: 1; height: 12px; border-radius: 6px; background: #ffffff1a; overflow: hidden; }
.se-chrono.urgent .se-secondes { color: var(--rouge); }
.se-theme-camp { color: #ffc38a; font-size: 0.85rem; font-weight: 700; text-align: center; }
.se-meilleur { color: var(--texte-doux); font-size: 0.8rem; }
#se-go { display: block; margin: 8px auto 0; }
#se-go.cache { display: none; }
.se-chrono-fond > span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--or), #ffa94d); }
.se-chrono.urgent .se-chrono-fond > span { background: var(--rouge); }
.se-retour { min-height: 2.6em; margin: 12px 0 0; text-align: center; font-weight: 600; }
.se-retour.juste { color: var(--vert); }
.se-retour.faux { color: var(--rouge); }
.se-retour.bot { color: var(--texte-doux); font-style: italic; }

/* Vignette « Le Trésor du Génie » de l'écran Jeux (le reste est dans qvgt.css) */
.vignette-qvgt .vignette-decor { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 14px 18px 26px; background: radial-gradient(ellipse at 50% 0%, #3a2a7a, #0b1430 75%); }
.qvd-halo { position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, #f5c54233, transparent 60%); animation: se-halo 3s ease-in-out infinite alternate; }
.qvd-losange { position: relative; padding: 4px 10px; border: 1px solid #8fa3d8; background: #0b1430; color: var(--or); font-size: 0.75rem; font-weight: 900; clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%); }
.qvd-losange.bonne { background: var(--vert); color: #06210f; animation: se-bonne 3s steps(1) infinite; }
.qvd-gain { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; color: var(--or); font-family: "Cinzel", Georgia, serif; font-weight: 900; font-size: 0.8rem; letter-spacing: 0.1em; }
@keyframes se-halo { from { opacity: 0.5; } to { opacity: 1; } }
@keyframes se-bonne { 0%, 49% { background: #ffa94d; } 50%, 100% { background: var(--vert); } }

@media (max-width: 560px) {
  .se-genies .niveaux, .se-themes { grid-template-columns: repeat(2, 1fr); }
  .se-duel { grid-template-columns: 1fr 1fr; }
  .se-contre { display: none; }
  .se-flamme { font-size: 1.2rem; }
  .se-texte { font-size: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .se-flamme.allumee, .qvd-halo, .qvd-losange.bonne { animation: none !important; }
}