/* KARAOKÉ WEB — ambiance néon, distincte du reste du site */
.kfx{ background:
    radial-gradient(70% 60% at 50% 0%, rgba(120,40,180,.35), transparent 60%),
    radial-gradient(60% 60% at 90% 40%, rgba(20,120,200,.25), transparent 60%),
    #0c0a1a;
  border-bottom:1px solid var(--line);
}
.kfx .wrap{ padding-block:clamp(48px,7vw,88px); text-align:center; }

.neon{
  font-family:var(--display); font-weight:700;
  font-size:clamp(2.4rem,7vw,4.5rem); letter-spacing:.04em;
  color:#fff;
  text-shadow:
    0 0 6px #ff4fd8, 0 0 16px #ff4fd8, 0 0 30px #c026d3,
    0 0 2px #fff;
}
.neon .b{ color:#5fe6ff; text-shadow:0 0 6px #5fe6ff, 0 0 16px #22d3ee, 0 0 30px #0891b2, 0 0 2px #fff; }
.k-sub{ color:rgba(255,255,255,.72); margin-top:1rem; font-size:1rem; }

.k-tabs{ display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; margin:2.4rem 0; }
.k-tab{
  font-family:var(--display); font-weight:600; font-size:1rem; letter-spacing:.08em;
  padding:.9em 2em; border-radius:6px; cursor:pointer;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.16); color:#fff;
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.k-tab:hover, .k-tab.on{ transform:translateY(-2px); }
.k-tab[data-c="best"].on{ border-color:#a855f7; box-shadow:0 0 18px rgba(168,85,247,.5); }
.k-tab[data-c="classic"].on{ border-color:#38bdf8; box-shadow:0 0 18px rgba(56,189,248,.5); }
.k-tab[data-c="dance"].on{ border-color:#4ade80; box-shadow:0 0 18px rgba(74,222,128,.5); }

.k-form{
  max-width:440px; margin:0 auto; text-align:left;
  background:rgba(10,8,26,.6); border:1px solid rgba(168,85,247,.4);
  border-radius:10px; padding:1.8rem; box-shadow:0 0 40px rgba(120,40,180,.2);
}
.k-form label{ display:block; font-family:var(--display); font-size:.85rem; color:#c9b6ff; margin-bottom:.4rem; }
.k-form input, .k-form textarea{
  width:100%; box-sizing:border-box; margin-bottom:1.1rem;
  background:#c9f7ff; border:0; border-radius:6px; color:#0b1e26;
  font-family:var(--body); font-size:.95rem; padding:.75rem .85rem;
}
.k-form input::placeholder, .k-form textarea::placeholder{ color:#5b8a97; }
.k-form textarea{ min-height:90px; resize:vertical; }
.k-send{
  display:block; margin-left:auto;
  background:#f9a8d4; color:#5b1046; border:0; border-radius:20px;
  font-family:var(--display); font-weight:600; padding:.65em 1.8em; cursor:pointer;
  transition:transform .2s, box-shadow .2s;
}
.k-send:hover{ transform:translateY(-2px); box-shadow:0 0 18px rgba(249,168,212,.6); }

/* ---- catalogue de chansons ---- */
.k-catalog{ max-width:560px; margin:0 auto 2.4rem; }
.k-search{
  width:100%; box-sizing:border-box;
  background:rgba(255,255,255,.06); border:1px solid rgba(168,85,247,.4);
  border-radius:8px; color:#fff; font-family:var(--body); font-size:.95rem;
  padding:.8rem 1rem; margin-bottom:.9rem;
}
.k-search::placeholder{ color:rgba(255,255,255,.5); }
.k-search:focus{ outline:none; border-color:#c026d3; box-shadow:0 0 14px rgba(192,38,211,.35); }
.k-count{ font-family:var(--display); font-size:.78rem; letter-spacing:.06em; color:rgba(255,255,255,.55); margin-bottom:.7rem; text-align:left; }
.k-count b{ color:#5fe6ff; }
.k-songs{
  max-height:320px; overflow-y:auto; text-align:left;
  border:1px solid rgba(255,255,255,.1); border-radius:8px;
  background:rgba(10,8,26,.5);
  scrollbar-width:thin; scrollbar-color:#7a3fb0 transparent;
}
.k-songs::-webkit-scrollbar{ width:8px; }
.k-songs::-webkit-scrollbar-thumb{ background:#7a3fb0; border-radius:8px; }
.k-song{
  display:block; width:100%; text-align:left; background:none; border:0; cursor:pointer;
  color:rgba(255,255,255,.86); font-family:var(--body); font-size:.9rem;
  padding:.65rem 1rem; border-bottom:1px solid rgba(255,255,255,.05);
  transition:background .15s, color .15s;
}
.k-song:last-child{ border-bottom:0; }
.k-song:hover, .k-song:focus{ background:rgba(168,85,247,.18); color:#fff; outline:none; }
.k-song mark{ background:transparent; color:#5fe6ff; font-weight:600; }
.k-empty{ padding:1.4rem 1rem; color:rgba(255,255,255,.5); font-size:.9rem; text-align:center; }
.k-picked{
  margin-top:.6rem; font-size:.82rem; color:#f9a8d4; font-family:var(--display);
  min-height:1.2em; text-align:left;
}
.k-soon{ padding:2rem 1rem; text-align:center; color:rgba(255,255,255,.55); font-size:.92rem; }

/* ---- page liste par ambiance ---- */
.k-list-page .neon{ font-size:clamp(2rem,6vw,3.6rem); }
.k-list-wrap{ max-width:640px; margin:2.2rem auto 0; }
.k-list-search{
  width:100%; box-sizing:border-box;
  background:rgba(255,255,255,.06); border:1px solid rgba(168,85,247,.4);
  border-radius:8px; color:#fff; font-family:var(--body); font-size:.95rem;
  padding:.8rem 1rem; margin-bottom:.4rem; text-align:left;
}
.k-list-search::placeholder{ color:rgba(255,255,255,.5); }
.k-list-search:focus{ outline:none; border-color:#c026d3; box-shadow:0 0 14px rgba(192,38,211,.35); }
.k-list{ list-style:none; margin:1rem 0 0; padding:0; }
.k-list li{ margin:0; }
.k-list a{
  display:block; padding:.85rem 1rem; color:rgba(255,255,255,.9);
  font-size:.98rem; border-bottom:1px solid rgba(255,255,255,.07);
  transition:background .15s, color .15s; border-radius:6px;
}
.k-list a:hover, .k-list a:focus{ background:rgba(168,85,247,.18); color:#fff; outline:none; }
.k-list a mark{ background:transparent; color:#5fe6ff; font-weight:600; }

/* bouton menu précédent (flottant, comme l'actuel) */
.k-back{
  position:fixed; right:20px; bottom:20px; z-index:50;
  font-family:var(--display); font-weight:600; font-size:.82rem; letter-spacing:.06em;
  padding:.8em 1.4em; border-radius:22px; color:#fff;
  background:linear-gradient(135deg,#7c3aed,#a855f7);
  border:1px solid rgba(255,255,255,.25); cursor:pointer;
  box-shadow:0 6px 24px rgba(124,58,237,.45);
  transition:transform .2s, box-shadow .2s;
}
.k-back:hover{ transform:translateY(-2px); box-shadow:0 8px 30px rgba(124,58,237,.6); }
.k-back svg{ width:1em; height:1em; vertical-align:-2px; margin-right:.3em; }