/* ============================================================
   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 ── */
/* IMPORTANT : les halos sont un background-image en !important → ils ÉCRASENT le fond
   des pages qui posent leur base via le raccourci `background:` (dégradé = image, couleur
   remise à transparent) → il restait un fond BLANC (ex. pages /account). On donne donc au
   body une COULEUR de base sombre (sans !important) : le skin étant chargé après le CSS de
   page, sa couleur gagne par ordre de cascade ; les pages .ss-v3 / .ss-cinema (plus
   spécifiques) gardent la leur (#080a15 / #000). */
body {
  background-color: #080a15;
  background-image:
    radial-gradient(1100px 620px at 82% -8%, color-mix(in srgb, var(--ss-magenta, #ff54c9) 12%, transparent), transparent 60%),
    radial-gradient(1000px 680px at 8% -4%,  color-mix(in srgb, var(--ss-cyan, #3ce0ff) 13%, transparent), 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 (thémable via --ss-cyan/--ss-magenta) */
.btn-submit, .btn.primary, .btn-primary, .cta.primary {
  background-image: linear-gradient(100deg, var(--ss-cyan, #3ce0ff), var(--ss-magenta, #ff54c9)) !important;
  border-color: transparent !important;
  color: #06121b !important;
  box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--ss-cyan, #3ce0ff) 60%, transparent) !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: var(--ss-cyan, #3ce0ff) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ss-cyan, #3ce0ff) 16%, transparent) !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: var(--ss-cyan, #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;
  }
}