*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0a0a0f;
  --bg2: #111118;
  --surface: #16161f;
  --border: #2a2a3a;
  --neon-violet: #8b5cf6;
  --neon-cyan: #06b6d4;
  --neon-orange: #f97316;
  --text: #e8e8f0;
  --text-muted: #6b6b80;
  --font-display: 'Bebas Neue', sans-serif;
  --font-accent: 'Permanent Marker', cursive;
  --font-body: 'Inter', sans-serif;
}

html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font-family: var(--font-body); overflow-x: hidden; cursor: none; }

/* CURSOR */
#cursor {
  width: 28px; height: 28px;
  border: 2px solid rgba(255,255,255,0.85);
  border-radius: 50%; position: fixed; pointer-events: none; z-index: 999999;
  transform: translate(-50%, -50%);
  transition: width 0.25s cubic-bezier(.16,1,.3,1), height 0.25s cubic-bezier(.16,1,.3,1), background 0.2s, border-color 0.2s, border-radius 0.2s;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35), 0 0 14px rgba(139,92,246,0.45);
}
/* Beat card / playlist — cercle violet PLAY */
#cursor.cursor-play {
  width: 64px; height: 64px;
  background: rgba(139,92,246,0.18);
  border-color: var(--neon-violet);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.3), 0 0 24px rgba(139,92,246,0.6);
}
/* Type beat card — VIEW cyan */
#cursor.cursor-view {
  width: 56px; height: 56px;
  background: rgba(6,182,212,0.12);
  border-color: var(--neon-cyan);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.3), 0 0 20px rgba(6,182,212,0.5);
}
/* CTA button — gros cercle plein */
#cursor.cursor-cta {
  width: 52px; height: 52px;
  background: rgba(139,92,246,0.25);
  border-color: var(--neon-violet);
}
/* Bouton normal */
#cursor.cursor-hover {
  width: 44px; height: 44px;
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.7);
}
/* Lien */
#cursor.cursor-link {
  width: 36px; height: 36px;
  border-color: var(--neon-orange);
  background: rgba(249,115,22,0.08);
}
/* Click */
#cursor.cursor-click {
  width: 16px; height: 16px;
  background: rgba(255,255,255,0.3);
  border-color: #fff;
}
#cursor-dot {
  width: 5px; height: 5px; background: #fff; border-radius: 50%;
  position: fixed; pointer-events: none; z-index: 1000000;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
  transition: transform 0.15s, opacity 0.15s;
}
#cursor.cursor-play ~ #cursor-dot,
#cursor.cursor-view ~ #cursor-dot,
#cursor.cursor-cta ~ #cursor-dot { opacity: 0; }
/* Label dans le curseur */
#cursor-label {
  position: fixed; pointer-events: none; z-index: 1000001;
  transform: translate(-50%, -50%);
  font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 2px;
  color: #fff; opacity: 0; transition: opacity 0.2s;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

/* NAV */
#navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2rem; height: 64px;
  background: rgba(8,8,14,0.85); backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: all 0.3s;
}
#navbar.scrolled {
  background: rgba(8,8,14,0.97);
  box-shadow: 0 4px 30px rgba(0,0,0,0.5);
  border-bottom-color: rgba(139,92,246,0.2);
}
.nav-logo { font-family: var(--font-display); font-size: 1.9rem; color: #fff; letter-spacing: 3px; text-decoration: none; flex-shrink: 0; }
.nav-logo span { color: var(--neon-violet); }
/* Pill container centré */
.nav-links {
  display: flex; gap: 0; list-style: none;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 50px;
  padding: 4px;
}
.nav-links li a {
  display: block; color: rgba(255,255,255,0.55); text-decoration: none;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.8px;
  text-transform: uppercase; padding: 0.45rem 1.1rem; border-radius: 50px;
  transition: all 0.2s; white-space: nowrap;
}
.nav-links li a:hover { color: #fff; background: rgba(255,255,255,0.07); }
.nav-links li a.active {
  color: #fff; background: rgba(139,92,246,0.25);
  box-shadow: 0 0 0 1px rgba(139,92,246,0.4) inset;
}
.nav-auth { display: flex; gap: 0.7rem; align-items: center; }
.nav-burger { display: none; background: none; border: 1px solid rgba(255,255,255,0.15); color: var(--text); font-size: 1.2rem; cursor: pointer; width: 36px; height: 36px; border-radius: 8px; align-items: center; justify-content: center; }

/* BUTTONS */
.btn-primary { background: var(--neon-violet); color: #fff; padding: 0.6rem 1.4rem; border-radius: 4px; text-decoration: none; font-weight: 600; font-size: 0.85rem; transition: all 0.2s; border: none; cursor: pointer; display: inline-block; }
.btn-primary:hover { background: #7c3aed; transform: translateY(-1px); box-shadow: 0 0 20px rgba(139,92,246,0.4); }
.btn-outline { border: 1px solid var(--border); color: var(--text); padding: 0.6rem 1.4rem; border-radius: 4px; text-decoration: none; font-weight: 600; font-size: 0.85rem; transition: all 0.2s; background: none; cursor: pointer; display: inline-block; }
.btn-outline:hover { border-color: var(--neon-violet); color: var(--neon-violet); }
.btn-large { padding: 0.9rem 2rem; font-size: 1rem; }

/* HERO */
#hero { position: relative; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
#threeCanvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-content { position: relative; z-index: 2; text-align: center; padding: 0 2rem; }
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 10vw, 8rem);
  letter-spacing: 8px;
  min-height: 1.2em;
  color: #ffffff;
  text-shadow:
    2px 2px 0 #0a0c18,
    4px 4px 0 #080a14,
    6px 6px 0 #060810,
    8px 8px 0 #04060c,
    10px 10px 0 #030409,
    12px 12px 0 #020307,
    14px 14px 14px rgba(0,0,0,0.95),
    0 0 40px rgba(139,92,246,0.55),
    0 0 90px rgba(139,92,246,0.2);
  animation: metalFloat 6s ease-in-out infinite;
}
@keyframes metalFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-20px); }
}
.hero-sub { font-size: clamp(1rem, 2vw, 1.3rem); color: var(--text-muted); margin: 1rem 0 2.5rem; letter-spacing: 1px; }
.hero-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.hero-scroll { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); color: var(--text-muted); font-size: 0.8rem; letter-spacing: 2px; animation: bounce 2s infinite; z-index: 2; }
@keyframes bounce { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(8px)} }

/* SECTIONS */
section:not(#hero) { padding: 5rem 2rem; max-width: 1200px; margin: 0 auto; }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2.5rem; }
.section-header h2, h2 { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.8rem); letter-spacing: 2px; color: var(--text); }
h2 span { color: var(--neon-violet); }

/* BEATS GRID */
.beats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; }
.beat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; cursor: pointer; }
.beat-card:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(139,92,246,0.2); }
.beat-cover-wrap { position: relative; aspect-ratio: 1; overflow: hidden; }
.beat-cover-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.beat-card:hover .beat-cover-wrap img { transform: scale(1.05); }
.beat-play-btn { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.5); opacity: 0; transition: opacity 0.2s; font-size: 2.5rem; color: #fff; }
.beat-card:hover .beat-play-btn { opacity: 1; }
.beat-info { padding: 1rem; }
.beat-title { font-weight: 700; font-size: 1rem; margin-bottom: 0.2rem; }
.beat-artist { color: var(--neon-orange); font-size: 0.75rem; font-weight: 500; margin-bottom: 0.3rem; letter-spacing: 0.5px; }
.beat-meta { color: var(--text-muted); font-size: 0.8rem; display: flex; gap: 1rem; margin-bottom: 0.8rem; }
.beat-price { font-size: 0.85rem; }
.beat-price .price-basic { color: var(--neon-cyan); font-weight: 700; }
.beat-skeleton { background: var(--surface); border-radius: 8px; aspect-ratio: 0.8; animation: shimmer 1.5s infinite; }
@keyframes shimmer { 0%{opacity:0.4} 50%{opacity:0.7} 100%{opacity:0.4} }

/* LICENCES */
#licencesPreview { padding: 5rem 2rem; max-width: 1200px; margin: 0 auto; text-align: center; }
#licencesPreview h2 { margin-bottom: 3rem; }
.licenses-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; }
.license-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 2rem; text-align: center; transition: all 0.3s; position: relative; }
.license-card:hover { border-color: var(--neon-violet); transform: translateY(-4px); }
.license-card.featured { border-color: var(--neon-violet); box-shadow: 0 0 30px rgba(139,92,246,0.2); }
.license-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--neon-violet); color: #fff; font-size: 0.7rem; font-weight: 700; padding: 3px 12px; border-radius: 20px; letter-spacing: 1px; }
.license-icon { font-size: 2.5rem; margin-bottom: 1rem; }
.license-card h3 { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 2px; margin-bottom: 0.5rem; }
.license-card p { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1.5rem; }
.license-card ul { list-style: none; margin-bottom: 1.5rem; }
.license-card ul li { color: var(--text-muted); font-size: 0.85rem; padding: 0.3rem 0; border-bottom: 1px solid var(--border); }
.license-card ul li:last-child { border: none; }

/* CTA BANNER */
#ctaBanner { position: relative; padding: 6rem 2rem; text-align: center; overflow: hidden; }
.cta-content { position: relative; z-index: 2; }
.cta-content h2 { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: 1rem; }
.cta-content p { color: var(--text-muted); margin-bottom: 2rem; }
.cta-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(139,92,246,0.15) 0%, transparent 70%); }

/* FOOTER */
footer { border-top: 1px solid var(--border); padding: 3rem 2rem; text-align: center; color: var(--text-muted); }
.footer-logo { font-family: var(--font-display); font-size: 2rem; margin-bottom: 0.5rem; }
.footer-logo span { color: var(--neon-violet); }
.footer-links { margin-top: 1rem; display: flex; gap: 2rem; justify-content: center; }
.footer-links a { color: var(--text-muted); text-decoration: none; transition: color 0.2s; }
.footer-links a:hover { color: var(--neon-violet); }

/* GLOBAL PLAYER */
#globalPlayer { position: fixed; bottom: 0; left: 0; right: 0; background: rgba(16,16,28,0.97); backdrop-filter: blur(20px); border-top: 1px solid var(--border); padding: 0.8rem 2rem; display: flex; align-items: center; gap: 1.5rem; z-index: 200; transition: transform 0.3s; }
#globalPlayer.hidden { transform: translateY(100%); }
.player-info { display: flex; align-items: center; gap: 1rem; min-width: 200px; }
#playerCover { width: 45px; height: 45px; border-radius: 4px; object-fit: cover; }
#playerTitle { font-weight: 700; font-size: 0.9rem; }
#playerBpm { color: var(--text-muted); font-size: 0.75rem; }
.player-controls { display: flex; align-items: center; gap: 1rem; flex: 1; }
#playerPlayBtn { background: var(--neon-violet); border: none; color: #fff; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; }
.player-progress { flex: 1; display: flex; align-items: center; gap: 0.5rem; }
.progress-bar { flex: 1; height: 4px; background: var(--border); border-radius: 2px; cursor: pointer; }
.progress-fill { height: 100%; background: var(--neon-violet); border-radius: 2px; width: 0%; transition: width 0.1s linear; }
#playerTime { color: var(--text-muted); font-size: 0.75rem; min-width: 35px; }
#playerClose { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1rem; }
#visualizer { border-radius: 4px; }

/* RESPONSIVE */
@media (max-width: 768px) {
  .nav-links, .nav-auth { display: none; }
  .nav-burger { display: flex; }
  .nav-links.open {
    display: flex; flex-direction: column; position: fixed;
    top: 64px; left: 0; right: 0;
    background: rgba(8,8,14,0.98); backdrop-filter: blur(20px);
    padding: 1.5rem; gap: 0.3rem; border-bottom: 1px solid rgba(255,255,255,0.08);
    border-radius: 0; /* reset pill on mobile */
  }
  .nav-links.open li a { border-radius: 10px; padding: 0.75rem 1rem; font-size: 0.9rem; }
  .nav-auth.open { display: flex; flex-direction: row; gap: 0.7rem; padding: 1rem 1.5rem; background: rgba(8,8,14,0.98); border-bottom: 1px solid rgba(255,255,255,0.06); }
  section:not(#hero) { padding: 3rem 1rem; }
  .player-info { min-width: unset; }
  #visualizer { display: none; }
}

/* BUDGET SECTION */
#budgetSection { padding: 5rem 2rem; max-width: 1200px; margin: 0 auto; }
.budget-badges { display:flex; gap:0.8rem; flex-wrap:wrap; margin-bottom:2rem; }
.budget-badge { background: linear-gradient(135deg, rgba(249,115,22,0.15), rgba(249,115,22,0.05)); border: 1px solid rgba(249,115,22,0.3); color: var(--neon-orange); font-size:0.78rem; font-weight:600; padding:0.35rem 0.9rem; border-radius:20px; letter-spacing:0.5px; }

/* ── LUMINOSITÉ ACCRUE — fond plus vivant ── */
:root {
  --bg:  #090912 !important;
  --bg2: #0d0d1e !important;
  --surface: #13132a !important;
  --border: #2e2e50 !important;
}

body {
  background: linear-gradient(160deg, #0d0a2e 0%, #080814 35%, #0a0a16 70%, #060610 100%) !important;
  background-attachment: fixed !important;
}

/* Lueur ambiante globale en haut */
body::before {
  content: '';
  position: fixed;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 600px;
  background: radial-gradient(ellipse, rgba(99,60,220,0.18) 0%, rgba(6,182,212,0.06) 40%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Lueur ambiante bas de page */
body::after {
  content: '';
  position: fixed;
  bottom: -100px;
  left: 30%;
  width: 700px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(249,115,22,0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Sections street : fond légèrement bleuté au lieu de noir pur */
.street-section {
  background: #06060f !important;
}

/* Sections normales plus lumineuses */
#topPlaylist, #licencesPreview {
  background: linear-gradient(180deg, #0c0c20 0%, #080812 100%);
}

/* Navbar plus lumineuse */
#navbar {
  background: rgba(9,9,22,0.88) !important;
  border-bottom-color: rgba(139,92,246,0.15) !important;
}

/* Cards plus lumineuses */
.beat-card, .type-card, .license-card, .playlist-item {
  background: #14142c !important;
  border-color: #2a2a4a !important;
}

/* Lueur sur les sections au hover */
.beat-card:hover { background: #1a1a38 !important; }
.type-card:hover { background: #181830 !important; }

/* Borders des sections plus lumineuses */
#topPlaylist, #typeBeats, #featuredBeats, #undergroundSection, #budgetSection, #licencesPreview {
  border-top: 1px solid rgba(139,92,246,0.12) !important;
}

/* Hero plus lumineux */
#hero {
  background: radial-gradient(ellipse at 30% 50%, rgba(80,40,180,0.25) 0%, rgba(6,182,212,0.05) 50%, transparent 70%);
}

/* ════════════════════════════════════════════
   NOUVELLE PALETTE — Vert · Jaune · Bleu Ciel
   ════════════════════════════════════════════ */
:root {
  --neon-violet:  #00e676 !important;
  --neon-cyan:    #29b6f6 !important;
  --neon-orange:  #ffd600 !important;
  --neon-green:   #00e676;
  --neon-yellow:  #ffd600;
  --neon-sky:     #29b6f6;
  --bg:           #05100a !important;
  --bg2:          #08140d !important;
  --surface:      #0c1e13 !important;
  --border:       #1a3a24 !important;
  --text:         #e8f5e9 !important;
  --text-muted:   #6b9b78 !important;
}

/* Fond général — deep forest + sky */
body {
  background: linear-gradient(160deg, #031a0e 0%, #050f08 40%, #060d12 80%, #040a10 100%) !important;
}

/* Lueur ambiante — vert en haut, bleu ciel en bas */
body::before {
  background: radial-gradient(ellipse, rgba(0,200,100,0.15) 0%, rgba(41,182,246,0.06) 40%, transparent 70%) !important;
}
body::after {
  background: radial-gradient(ellipse, rgba(255,214,0,0.07) 0%, transparent 70%) !important;
}

/* Navbar */
#navbar { background: rgba(5,16,10,0.92) !important; border-bottom-color: rgba(0,230,118,0.15) !important; }
#navbar.scrolled { border-bottom-color: rgba(0,230,118,0.3) !important; }
.nav-links li a.active { background: rgba(0,230,118,0.2) !important; box-shadow: 0 0 0 1px rgba(0,230,118,0.4) inset !important; }
.nav-logo span { color: #00e676 !important; }

/* Boutons */
.btn-primary { background: #00e676 !important; color: #03100a !important; }
.btn-primary:hover { background: #00c85a !important; box-shadow: 0 0 20px rgba(0,230,118,0.5) !important; }
.btn-glow { box-shadow: 0 0 20px rgba(0,230,118,0.4), 0 0 40px rgba(0,230,118,0.1) !important; }
.btn-glow:hover { box-shadow: 0 0 30px rgba(0,230,118,0.7), 0 0 60px rgba(0,230,118,0.2) !important; }
.btn-outline { border-color: #1a3a24 !important; color: #e8f5e9 !important; }
.btn-outline:hover { border-color: #00e676 !important; color: #00e676 !important; }

/* Hero */
#hero { background: radial-gradient(ellipse at 30% 50%, rgba(0,160,80,0.2) 0%, rgba(41,182,246,0.07) 50%, transparent 70%) !important; }
.hero-title { text-shadow: 2px 2px 0 #031a0e, 4px 4px 0 #021208, 0 0 40px rgba(0,230,118,0.5), 0 0 90px rgba(0,230,118,0.2) !important; }
.hero-stat span { color: #00e676 !important; }

/* Sections */
h2 span { color: #29b6f6 !important; }
.section-eyebrow { color: #00e676 !important; }

/* Cards */
.beat-card, .type-card, .license-card, .playlist-item { background: #0c1e13 !important; border-color: #1a3a24 !important; }
.beat-card:hover { background: #112618 !important; box-shadow: 0 8px 30px rgba(0,230,118,0.15) !important; }
.type-card:hover { border-color: rgba(var(--tc),0.6) !important; background: #112618 !important; }
.license-card.featured { border-color: #29b6f6 !important; box-shadow: 0 0 30px rgba(41,182,246,0.2) !important; }
.license-badge { background: #29b6f6 !important; color: #03080f !important; }
.playlist-item.playing { background: rgba(0,230,118,0.08) !important; }
.playlist-item.playing .playlist-num { color: #00e676 !important; }
.playlist-price { color: #ffd600 !important; }

/* Player */
#playerPlayBtn { background: #00e676 !important; }
.progress-fill { background: #00e676 !important; }

/* Underground */
.underground-badge { background: rgba(255,214,0,0.2) !important; border-color: rgba(255,214,0,0.4) !important; color: #ffd600 !important; }

/* Marketplace CTA */
.mkt-stat span { color: #00e676 !important; }
.mkt-stat { background: rgba(0,230,118,0.06) !important; border-color: rgba(0,230,118,0.2) !important; }

/* Borders sections */
#topPlaylist, #typeBeats, #featuredBeats, #undergroundSection, #budgetSection, #licencesPreview {
  border-top-color: rgba(0,230,118,0.1) !important;
}

/* Street divider — vert/jaune/bleu */
.street-divider {
  background: linear-gradient(90deg, #00e676, #ffd600, #29b6f6, #00e676) !important;
}

/* Artist type cards */
.street-section h2 span { color: #29b6f6 !important; }
.street-eyebrow { color: #00e676 !important; }

/* Footer */
.footer-logo span { color: #00e676 !important; }
.footer-links a:hover { color: #00e676 !important; }

/* Cursor */
#cursor { box-shadow: 0 0 0 1px rgba(0,0,0,0.35), 0 0 14px rgba(0,230,118,0.5) !important; }
#cursor.cursor-play { background: rgba(0,230,118,0.18) !important; border-color: #00e676 !important; box-shadow: 0 0 0 1px rgba(0,0,0,0.3), 0 0 24px rgba(0,230,118,0.6) !important; }
#cursor.cursor-view { background: rgba(41,182,246,0.12) !important; border-color: #29b6f6 !important; }

/* ════════════════════════════════════════════
   PALETTE CRÈME — Blanc crème dominant
   Vert et bleu en accents seulement
   ════════════════════════════════════════════ */
:root {
  --text:       #f2ede4 !important;
  --text-muted: #a09880 !important;
  --bg:         #080c09 !important;
  --bg2:        #0b0f0c !important;
  --surface:    #111810 !important;
  --border:     #243020 !important;
  --neon-violet: #c8f0d0 !important;
  --neon-cyan:   #29b6f6 !important;
  --neon-orange: #ffd600 !important;
}

/* Textes principaux en crème */
body { color: #f2ede4 !important; }
h1,h2,h3,h4,h5 { color: #f2ede4 !important; }
.hero-title { color: #ffffff !important; text-shadow: 2px 2px 0 #020a04, 4px 4px 0 #010702, 0 0 40px rgba(200,240,208,0.4), 0 0 90px rgba(200,240,208,0.15) !important; }
.hero-sub { color: #c8bfb0 !important; }

/* Nav en crème */
.nav-links li a { color: rgba(242,237,228,0.6) !important; }
.nav-links li a:hover { color: #f2ede4 !important; }
.nav-links li a.active { color: #fff !important; }
.nav-logo { color: #f2ede4 !important; }

/* Boutons : crème/blanc au lieu de vert vif */
.btn-primary { background: #f2ede4 !important; color: #080c09 !important; }
.btn-primary:hover { background: #ffffff !important; box-shadow: 0 0 20px rgba(242,237,228,0.3) !important; }
.btn-glow { box-shadow: 0 0 20px rgba(242,237,228,0.25), 0 0 40px rgba(242,237,228,0.08) !important; }
.btn-glow:hover { box-shadow: 0 0 30px rgba(242,237,228,0.4), 0 0 60px rgba(242,237,228,0.12) !important; }
.btn-outline { border-color: rgba(242,237,228,0.25) !important; color: #f2ede4 !important; }
.btn-outline:hover { border-color: #f2ede4 !important; color: #f2ede4 !important; }

/* Titres : span en bleu ciel ou jaune, pas vert */
h2 span { color: #29b6f6 !important; }

/* Section eyebrow en crème/doré */
.section-eyebrow { color: #d4b98a !important; }
.street-eyebrow { color: #d4b98a !important; }

/* Cards en crème sombre */
.beat-card, .type-card, .license-card { background: #0f1a10 !important; border-color: #1e3020 !important; color: #f2ede4 !important; }
.beat-title, .type-name { color: #f2ede4 !important; }
.beat-artist { color: #ffd600 !important; }
.playlist-title { color: #f2ede4 !important; }
.playlist-price { color: #ffd600 !important; }

/* Hero stats */
.hero-stat span { color: #f2ede4 !important; }
.hero-stat small { color: #a09880 !important; }

/* Lueur ambiante crème/dorée */
body::before { background: radial-gradient(ellipse, rgba(210,185,140,0.12) 0%, rgba(41,182,246,0.05) 50%, transparent 70%) !important; }
body::after  { background: radial-gradient(ellipse, rgba(255,214,0,0.06) 0%, transparent 70%) !important; }

/* Cursor crème */
#cursor { box-shadow: 0 0 0 1px rgba(0,0,0,0.35), 0 0 14px rgba(242,237,228,0.3) !important; border-color: rgba(242,237,228,0.85) !important; }
#cursor.cursor-play { background: rgba(242,237,228,0.1) !important; border-color: #f2ede4 !important; }

/* Player */
#playerPlayBtn { background: #f2ede4 !important; color: #080c09 !important; }
.progress-fill { background: #f2ede4 !important; }
#playerTitle { color: #f2ede4 !important; }

/* Footer */
.footer-logo { color: #f2ede4 !important; }
.footer-logo span { color: #29b6f6 !important; }

/* Vert garde seulement pour les petits accents */
.playlist-item.playing .playlist-num { color: #7ecb9e !important; }
.beat-card:hover { box-shadow: 0 8px 30px rgba(242,237,228,0.08) !important; }

/* ════════════════════════════════════════════
   MOBILE — Optimisé téléphone
   ════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── BASE ── */
  html { font-size: 15px; }
  body { overflow-x: hidden; cursor: auto; }
  #cursor, #cursor-dot, #cursor-label { display: none !important; }

  /* ── NAV ── */
  #navbar { padding: 0 1rem; height: 56px; }
  .nav-logo { font-size: 1.5rem; letter-spacing: 2px; }
  .nav-links.open {
    top: 56px;
    background: rgba(5,12,7,0.98) !important;
    border-bottom: 1px solid rgba(41,182,246,0.15);
    z-index: 999;
  }
  .nav-links.open li a { font-size: 1rem; padding: 0.85rem 1rem; }
  .nav-auth.open { background: rgba(5,12,7,0.98) !important; }
  .nav-burger { border-color: rgba(242,237,228,0.2); color: #f2ede4; }

  /* ── HERO ── */
  #hero { height: 100svh; min-height: 600px; }
  .hero-bg-img {
    width: 100% !important;
    opacity: 0.2 !important;
    mask-image: linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%) !important;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%) !important;
  }
  .hero-content { padding: 0 1.2rem; }
  .hero-title { font-size: clamp(2.8rem, 14vw, 5rem) !important; letter-spacing: 4px !important; }
  .hero-sub { font-size: 0.9rem !important; margin: 0.8rem 0 1.8rem !important; }
  .hero-cta { flex-direction: column; align-items: center; gap: 0.8rem; }
  .hero-cta a { width: 100%; max-width: 280px; text-align: center; padding: 1rem !important; font-size: 0.95rem !important; }
  .hero-stats { gap: 1.2rem; margin-top: 1.8rem; }
  .hero-stat span { font-size: 1.5rem !important; }
  .hero-scroll { display: none; }

  /* ── TORN FENCE ── */
  .torn-fence-divider { height: 90px !important; opacity: 0.4 !important; }

  /* ── SECTIONS ── */
  .section-inner { padding: 2.5rem 1rem !important; }
  .section-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .section-header h2 { font-size: 1.8rem !important; }
  .header-actions { width: 100%; justify-content: space-between; }

  /* ── PLAYLIST ── */
  .playlist-item {
    grid-template-columns: 42px 1fr auto !important;
    gap: 0.6rem;
    padding: 0.6rem 0.5rem;
  }
  .playlist-num { display: none; }
  .playlist-genre, .playlist-bpm { display: none !important; }
  .playlist-title { font-size: 0.88rem; }
  .playlist-artist { font-size: 0.7rem; }
  .playlist-price { font-size: 0.95rem; }
  .playlist-play-btn { width: 32px; height: 32px; font-size: 0.65rem; }

  /* ── ARTIST TYPE CARDS ── */
  .artist-types-row { gap: 0.7rem; padding-bottom: 1rem; }
  .artist-type-card { min-width: 120px !important; padding: 1.1rem 0.8rem !important; border-radius: 8px; }
  .at-icon { font-size: 1.8rem !important; margin-bottom: 0.4rem; }
  .at-name { font-size: 0.82rem !important; }
  .at-sub { font-size: 0.62rem; }

  /* ── TYPE BEATS GRID ── */
  .types-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.7rem; }
  .type-card { padding: 1.2rem 1rem !important; border-radius: 8px; }
  .type-icon { font-size: 1.6rem !important; margin-bottom: 0.5rem; }
  .type-name { font-size: 1.1rem !important; letter-spacing: 1px !important; }
  .type-sub { font-size: 0.68rem; }

  /* ── BEATS GRID ── */
  .beats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.8rem; }
  .beat-info { padding: 0.7rem; }
  .beat-title { font-size: 0.85rem; }
  .beat-artist { font-size: 0.68rem; }
  .beat-meta { font-size: 0.72rem; gap: 0.5rem; }

  /* ── SILHOUETTE / IMAGES LOURDES ── */
  .typebeats-silhouette,
  .underground-chains,
  .budget-fence,
  .mkt-silhouette,
  .mkt-chains { display: none !important; }
  .underground-img-bg { opacity: 0.12 !important; }
  .featured-glitch { display: none; }

  /* ── LICENCES ── */
  .licenses-grid { grid-template-columns: 1fr !important; gap: 1rem; }
  .license-card { padding: 1.5rem; }

  /* ── MARKETPLACE CTA ── */
  .mkt-cta-inner { grid-template-columns: 1fr !important; gap: 1.5rem; }
  .mkt-cta-visual { flex-wrap: wrap; justify-content: center; gap: 0.7rem; }
  .mkt-stat { padding: 1rem !important; min-width: 80px; }
  .mkt-stat span { font-size: 1.8rem !important; }
  .mkt-cta-text h2 { font-size: 1.6rem !important; }

  /* ── GLOBAL PLAYER ── */
  #globalPlayer { padding: 0.6rem 0.8rem; gap: 0.8rem; flex-wrap: nowrap; }
  .player-info { min-width: 0; flex: 1; overflow: hidden; }
  #playerCover { width: 38px; height: 38px; }
  #playerTitle { font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
  #playerBpm { display: none; }
  #visualizer { display: none !important; }
  .player-controls { flex: 2; }

  /* ── FOOTER ── */
  .footer-inner { padding: 2.5rem 1rem; }
  .footer-links { gap: 1rem; flex-wrap: wrap; justify-content: center; }
  .footer-links a { font-size: 0.8rem; }
  .footer-barcode { display: none; }

  /* ── DÉSACTIVER PARALLAX ET ANIMATIONS LOURDES ── */
  [data-parallax] { transform: none !important; transition: none !important; }
  #undergroundSection h2 { animation: none !important; }
  .street-section::before { display: none; }
  #undergroundSection::after { display: none; }
}

/* Tablette */
@media (min-width: 481px) and (max-width: 768px) {
  .hero-title { font-size: clamp(3.5rem, 12vw, 6rem) !important; }
  .beats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .types-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .licenses-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .hero-cta { flex-wrap: wrap; justify-content: center; }
  .typebeats-silhouette { opacity: 0.18 !important; }
  .underground-chains { display: none !important; }
  .mkt-cta-inner { grid-template-columns: 1fr !important; }
}

/* ── TOUT LE VERT → BLANC CRÈME ── */
:root {
  --neon-violet: #f2ede4 !important;
  --neon-green:  #f2ede4 !important;
}
.nav-links li a.active { background: rgba(242,237,228,0.15) !important; box-shadow: 0 0 0 1px rgba(242,237,228,0.3) inset !important; color: #fff !important; }
.nav-logo span { color: #f2ede4 !important; }
.section-eyebrow, .street-eyebrow { color: #c8bfb0 !important; }
.hero-stat span { color: #f2ede4 !important; }
.hero-title { text-shadow: 2px 2px 0 #020a04, 4px 4px 0 #010702, 0 0 40px rgba(242,237,228,0.25), 0 0 90px rgba(242,237,228,0.1) !important; }
.btn-primary { background: #f2ede4 !important; color: #080c09 !important; }
.btn-primary:hover { background: #fff !important; box-shadow: 0 0 20px rgba(242,237,228,0.3) !important; }
.btn-glow { box-shadow: 0 0 20px rgba(242,237,228,0.2), 0 0 40px rgba(242,237,228,0.06) !important; }
.btn-outline:hover { border-color: #f2ede4 !important; color: #f2ede4 !important; }
.playlist-item.playing .playlist-num { color: #f2ede4 !important; }
.playlist-item.playing { background: rgba(242,237,228,0.05) !important; }
.playlist-play-btn:hover, .playlist-item.playing .playlist-play-btn { background: #f2ede4 !important; color: #080c09 !important; border-color: #f2ede4 !important; }
.beat-card:hover { box-shadow: 0 8px 30px rgba(242,237,228,0.1) !important; border-color: rgba(242,237,228,0.2) !important; }
.license-card:hover { border-color: #f2ede4 !important; }
.license-badge { background: #f2ede4 !important; color: #080c09 !important; }
.mkt-stat span { color: #f2ede4 !important; }
.mkt-stat { background: rgba(242,237,228,0.05) !important; border-color: rgba(242,237,228,0.15) !important; }
.footer-logo span { color: #f2ede4 !important; }
.footer-links a:hover { color: #f2ede4 !important; }
.progress-fill { background: #f2ede4 !important; }
#playerPlayBtn { background: #f2ede4 !important; color: #080c09 !important; }
#cursor { border-color: rgba(242,237,228,0.85) !important; box-shadow: 0 0 14px rgba(242,237,228,0.25) !important; }
#cursor.cursor-play { background: rgba(242,237,228,0.1) !important; border-color: #f2ede4 !important; box-shadow: 0 0 24px rgba(242,237,228,0.35) !important; }
.street-divider { display: none !important; }
.type-card-underground .type-name { color: #f2ede4 !important; }
body::before { background: radial-gradient(ellipse, rgba(210,185,140,0.1) 0%, rgba(41,182,246,0.04) 50%, transparent 70%) !important; }