/* ============================================
   TWIN FORTUNE — Thèmes saisonniers
   Les couleurs sont injectées par js/themes.js
   (variables --neon-* / --dark-*). Ce fichier
   ne gère que le décor, actif seulement quand
   un thème autre que "Classique" est choisi.
   ============================================ */

html[data-tf-theme] body { transition: background-color .4s ease; }

/* Grille et halos de fond aux couleurs du thème */
html[data-tf-theme] body::before {
  background-image:
    linear-gradient(var(--tf-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tf-grid) 1px, transparent 1px);
}
html[data-tf-theme] .orb-purple { background: var(--tf-orb1); }
html[data-tf-theme] .orb-cyan   { background: var(--tf-orb2); }

/* Barre de navigation */
html[data-tf-theme] body > nav {
  border-bottom-color: color-mix(in srgb, var(--neon-pink) 35%, transparent);
  box-shadow: 0 6px 24px -14px var(--tf-glow);
}

/* Bandeau du thème (au-dessus de la nav) */
#tf-theme-strip {
  position: relative; z-index: 201;
  display: flex; align-items: center; justify-content: center; gap: .75rem;
  min-height: 30px; padding: 5px 2.75rem;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--neon-purple) 30%, var(--dark-bg)),
    color-mix(in srgb, var(--neon-pink) 30%, var(--dark-bg)),
    color-mix(in srgb, var(--neon-purple) 30%, var(--dark-bg)));
  border-bottom: 1px solid color-mix(in srgb, var(--neon-gold) 45%, transparent);
  color: var(--neon-gold);
  font-family: 'Rajdhani', sans-serif; font-weight: 700;
  font-size: .85rem; letter-spacing: .5px; text-align: center; line-height: 1.3;
}
.tf-theme-strip-close {
  position: absolute; right: .6rem; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border: 0; border-radius: 50%;
  background: transparent; color: inherit; opacity: .7;
  font-size: .75rem; cursor: pointer;
}
.tf-theme-strip-close:hover { opacity: 1; background: rgba(255,255,255,.08); }

/* Particules : derrière le contenu, ne captent aucun clic */
#tf-theme-fx {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.tf-fx-p {
  position: absolute; top: -3rem;
  line-height: 1; user-select: none;
  will-change: transform;
  animation-name: tf-fx-fall, tf-fx-sway;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-direction: normal, alternate;
}
@keyframes tf-fx-fall {
  from { transform: translateY(0) rotate(0deg); }
  to   { transform: translateY(calc(100vh + 6rem)) rotate(300deg); }
}
@keyframes tf-fx-sway {
  from { margin-left: -18px; }
  to   { margin-left: 18px; }
}

@media (max-width: 700px) {
  #tf-theme-strip { font-size: .75rem; padding: 5px 2.25rem 5px .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  #tf-theme-fx { display: none; }
}