/* =========================
   PURP.INC — STYLES (responsive + cursor glow + nav fixes)
   ========================= */

:root{
  --bg:#0a0a0a;
  --fg:#f3f3f6;
  --muted:#a7a8b1;
  --line:rgba(255,255,255,.14);
  --vio:#a95cff;
  --vio2:#63ffd8;
  --w:1160px;
  --logo-font:'Syne',system-ui,sans-serif; /* 700/800 chargés dans index */
}

/* Reset */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:'Space Grotesk',system-ui,sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}

/* —— Fond violet + grain ——————————————— */
.page-violet{position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:
    radial-gradient(1000px 700px at 60% 35%, rgba(169,92,255,.22), transparent 70%),
    radial-gradient(1200px 900px at 22% 82%, rgba(99,255,216,.10), transparent 70%),
    radial-gradient(900px 900px at 50% 120%, rgba(255,255,255,.05), transparent 60%);
  animation:pv 38s ease-in-out infinite alternate;filter:contrast(115%);
}
@keyframes pv{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-1%,1.4%,0)}}
body::before,body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-2}
body::before{opacity:.12;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
body::after{background:
  repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 2px),
  repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 2px);
  opacity:.18;mix-blend-mode:overlay;z-index:-2}

/* —— Cursor glow (suit la souris) ——————————— */
.cursor-blob{
  position:fixed;left:50%;top:50%;
  width:28vmax;height:28vmax;
  background:radial-gradient(circle at 40% 40%,rgba(169,92,255,.23),transparent 60%);
  filter:blur(28px);opacity:.58;mix-blend-mode:screen;
  pointer-events:none;z-index:-1;transform:translate(-50%,-50%);
  transition:opacity .25s ease;
}

/* —— Layout / header ——————————————— */
.wrap{max-width:var(--w);margin:0 auto;padding:0 20px}
section{margin:44px auto}
.section-head{display:flex;flex-wrap:wrap;gap:12px;align-items:end;justify-content:space-between;margin-bottom:16px}
.section-title{font-family:var(--logo-font);font-weight:800;letter-spacing:.5px}

.top{position:sticky;top:0;z-index:50;background:rgba(10,10,10,.72);backdrop-filter:blur(6px);border-bottom:1px dashed var(--line)}
.topbar{display:flex;align-items:center;gap:16px;min-height:64px}
.brand{font-family:var(--logo-font);font-weight:800;letter-spacing:.5px}
.top-links{margin-left:auto;display:flex;gap:18px}
.top-links a{opacity:.8;transition:.2s}
.top-links a:hover,.top-links a.active{opacity:1;color:var(--vio)}
.menu-btn{display:none;margin-left:6px;border:1px dashed var(--line);background:#131313;color:var(--fg);padding:6px 10px;border-radius:8px}

/* —— Hero ——————————————————————— */
.hero{text-align:center;padding:64px 0 26px;border-bottom:1px dashed var(--line)}
.logo-xl{font-family:var(--logo-font);font-weight:800;font-size:clamp(42px,8vw,96px);letter-spacing:.04em}
.logo-xl .dot{color:var(--vio)}
.hero-note{margin:12px auto;color:var(--muted)}
.pill{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--line);border-radius:999px;padding:3px 10px;background:rgba(255,255,255,.04);font-size:13px}
.pill .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--vio)}
.cta-row{display:flex;gap:12px;justify-content:center;margin:16px 0 24px}

/* —— Cards accueil ——————————————— */
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:10px}
.feature{background:#111;border:1px dashed var(--line);border-radius:12px;padding:18px;text-align:left;transition:.2s;cursor:pointer}
.feature:hover{border-color:var(--vio);box-shadow:0 0 0 1px rgba(169,92,255,.2) inset}
.feature h3{font-family:var(--logo-font);font-weight:800;letter-spacing:.5px;margin-bottom:4px}
.feature .muted{color:var(--muted)}
.feature.span-2{grid-column:span 2}

/* —— Buttons & chips ——————————————— */
button,.btn{background:#141414;border:1px solid var(--line);color:var(--fg);padding:8px 16px;border-radius:10px;cursor:pointer;transition:.2s}
.btn.ghost{background:transparent}
button:hover,.btn:hover{border-color:var(--vio);color:var(--vio)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:#121212;color:var(--fg);cursor:pointer}
.chip.on,.chip:hover{border-color:var(--vio);color:var(--vio)}
.center{text-align:center;margin-top:16px}

/* —— Shop ——————————————— */
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:#111;border:1px dashed var(--line);border-radius:12px;padding:14px;transition:.2s}
.card:hover{border-color:var(--vio)}
.ph{background:#222 center/cover no-repeat;height:280px;border-radius:8px;cursor:pointer}
.card .row{display:flex;justify-content:space-between;margin-top:8px}
.card .name{font-weight:600}
.card .price{font-weight:700;color:var(--vio)}
.card .tag{margin-top:4px;color:var(--muted);font-size:12px}

/* —— Music ——————————————— */
.player{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:16px;border:1px dashed var(--line);border-radius:12px;padding:16px;background:#111}
.ph-music{background:#222 center/cover no-repeat;min-height:240px;border-radius:8px}
.meta .now.big{font-family:var(--logo-font);font-weight:800;letter-spacing:.3px}
.controls{display:flex;align-items:center;gap:10px;margin-top:8px}
.bar{flex:1;height:6px;background:#1b1b1b;border-radius:999px;overflow:hidden;border:1px solid var(--line)}
.progress{height:100%;width:0;background:linear-gradient(90deg,var(--vio),var(--vio2))}
.tracklist{margin-top:16px;border-top:1px dashed var(--line)}
.tracklist li{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;padding:10px 4px;border-bottom:1px dashed var(--line)}
.playrow{border:1px dashed var(--line);background:#111;padding:4px 8px;border-radius:8px;color:var(--vio);cursor:pointer}

/* —— Artists ——————————————— */
.artists-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.artist-card{background:#111;border:1px dashed var(--line);border-radius:12px;padding:16px;cursor:pointer;transition:.2s}
.artist-card:hover{border-color:var(--vio)}
.artist-top{display:flex;align-items:center;gap:12px}
.artist-ava{width:56px;height:56px;border-radius:50%;background-size:cover;background-position:center}
.artist-name{font-weight:700}
.artist-role .badge{display:inline-block;background:var(--vio);color:#fff;border-radius:8px;padding:2px 8px;font-size:12px;margin-top:2px}
.artist-bio{color:var(--muted);font-size:14px;margin:10px 0}
.artist-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.artist-links a{border:1px solid var(--line);padding:4px 8px;border-radius:6px;font-size:13px}
.artist-links a:hover{border-color:var(--vio);color:var(--vio)}

/* —— Footer ——————————————— */
.foot{border-top:1px dashed var(--line);margin-top:36px;background:#0c0c0c}
.foot-row{display:flex;justify-content:space-between;align-items:center;padding:16px 20px}
.foot-row.small{font-size:13px}
.foot-left strong{font-family:var(--logo-font);font-weight:800}

/* —— Toast ——————————————— */
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:#111;border:1px dashed var(--line);padding:8px 12px;border-radius:999px;z-index:1200}

/* —— Modales ——————————————— */
.modal{position:fixed;inset:0;display:flex;justify-content:center;align-items:center;background:rgba(0,0,0,.6);z-index:1000}
.modal[hidden]{display:none !important}
.modal-box{position:relative;background:#111;border:1px dashed var(--line);border-radius:16px;width:min(980px,94vw);max-height:90vh;overflow:auto;display:grid;grid-template-columns:minmax(280px,420px) 1fr}
.modal-box .x{position:absolute;top:10px;right:10px;border:1px dashed var(--line);background:#141414;color:var(--fg);border-radius:8px;padding:6px 10px;cursor:pointer}
.pm-photo,.am-cover{min-height:380px;background:#222 center/cover no-repeat;border-right:1px dashed var(--line)}
.pm-body,.am-body{padding:18px}
.modal-title{font-family:var(--logo-font);font-weight:800;margin-bottom:6px}
.price.big{font-weight:800;color:var(--vio);margin:6px 0}
.am-meta-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}

/* —— Responsive ——————————————— */
@media(max-width:960px){
  .feature-grid{grid-template-columns:1fr}
  .feature.span-2{grid-column:auto}
  .player{grid-template-columns:1fr}
}
@media(max-width:760px){
  .top-links{display:none}         /* masqué par défaut en mobile */
  .menu-btn{display:inline-block}  /* bouton hamburger visible */
  .hero{padding:48px 0 18px}
  .feature{padding:14px}
}
@media(max-width:560px){
  .tracklist li{grid-template-columns:auto 1fr auto;gap:8px}
  .artists-grid{grid-template-columns:1fr}
  .modal-box{grid-template-columns:1fr;width:96vw}
  .pm-photo,.am-cover{border-right:none;border-bottom:1px dashed var(--line);min-height:46vw}
}