/* ============================================================
   SECRETSTORY.LIVE — SKIN v3 pour les pages historiques
   ------------------------------------------------------------
   Donne l'apparence v3 (verre, néon, profondeur) aux composants
   déjà en place, SANS toucher à la structure.

   RÈGLE ABSOLUE : uniquement de l'APPARENCE.
   Interdits ici : display, position, float, width/height, grid,
   flex, margin/padding structurants → aucun risque de casser un
   gabarit existant.

   Pour désactiver : retirer le <link> de la page. Retour immédiat
   à l'ancien rendu.
   ============================================================ */

/* ── Ambiance : halos néon derrière le contenu ── */
body {
  background-image:
    radial-gradient(1100px 620px at 82% -8%, rgba(255, 84, 201, .10), transparent 60%),
    radial-gradient(1000px 680px at 8% -4%,  rgba(60, 224, 255, .11), transparent 58%) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}

/* ── Cartes & panneaux : verre + profondeur ── */
.fan-card, .panel, .card, .replay-card, .box, .tile {
  border-radius: 18px !important;
  border: 1px solid rgba(150, 160, 210, .16) !important;
  background-image: linear-gradient(180deg, rgba(17, 21, 49, .92), rgba(14, 18, 40, .92)) !important;
  box-shadow: 0 18px 45px -26px rgba(0, 0, 0, .8) !important;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease !important;
}
.fan-card:hover, .replay-card:hover, .tile:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(150, 160, 210, .32) !important;
}

/* ── Boutons ── */
.btn, .btn-sm, .btn-submit, .report-btn, .live-tab-btn, button.primary, .cta {
  border-radius: 12px !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, filter .2s ease !important;
}
.btn:hover, .btn-sm:hover, .btn-submit:hover, .cta:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.06) !important;
}
/* Bouton principal : dégradé néon signature */
.btn-submit, .btn.primary, .btn-primary, .cta.primary {
  background-image: linear-gradient(100deg, #3ce0ff, #ff54c9) !important;
  border-color: transparent !important;
  color: #06121b !important;
  box-shadow: 0 10px 30px -12px rgba(60, 224, 255, .6) !important;
}

/* ── Pastilles / étiquettes ── */
.tag, .feat-pill, .perk, .badge, .chip {
  border-radius: 999px !important;
  border: 1px solid rgba(150, 160, 210, .24) !important;
}

/* ── Formulaires ── */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], textarea, select {
  border-radius: 12px !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}
input:focus, textarea:focus, select:focus {
  border-color: #3ce0ff !important;
  box-shadow: 0 0 0 3px rgba(60, 224, 255, .16) !important;
  outline: none !important;
}

/* ── Titres : resserrage typographique v3 ── */
h1, h2 { letter-spacing: -.025em !important; }

/* ── Liens de retour / secondaires ── */
.back-link { transition: color .2s ease !important; }
.back-link:hover { color: #3ce0ff !important; }

/* ── Barres de défilement ── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(150, 160, 210, .22); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(150, 160, 210, .34); }
::-webkit-scrollbar-track { background: transparent; }

/* ── Accessibilité : respect du réglage système ── */
@media (prefers-reduced-motion: reduce) {
  .fan-card, .replay-card, .tile, .btn, .btn-sm, .btn-submit, .cta {
    transition: none !important;
    transform: none !important;
  }
}