/* ================= GLOBAL STYLES (shared across all pages) ================= */
:root{
  --noir:#0A0B0C;
  --acier:#14161A;
  --acier2:#1C1F24;
  --rouille:#B4501E;
  --rouille-vif:#D9601F;
  --beton:#D8D5CE;
  --gris:#787D82;
  --ligne:#2A2E33;
  --display:'Anton', Impact, sans-serif;
  --body:'Barlow', system-ui, sans-serif;
  --mono:'Space Mono', monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--noir);
  color:var(--beton);
  font-family:var(--body);
  font-size:17px;line-height:1.6;overflow-x:hidden;
}
::selection{background:var(--rouille);color:#fff}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}

body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* ---------- NAV ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 28px;
  background:linear-gradient(to bottom, rgba(10,11,12,.9), rgba(10,11,12,.7));
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ligne);
}
.nav-brand{display:flex;align-items:center;gap:12px}
.nav-brand img{width:36px;height:auto}
.nav-brand span{font-family:var(--display);font-size:20px;letter-spacing:3px}
.nav-links{display:flex;gap:6px}
.nav-links a{
  font-family:var(--mono);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;
  padding:9px 14px;color:var(--gris);border:1px solid transparent;transition:.2s;
}
.nav-links a:hover{color:var(--beton)}
.nav-links a.active{color:var(--rouille-vif);border-color:var(--ligne);background:var(--acier)}
.burger{display:none;background:none;border:1px solid var(--ligne);color:var(--beton);padding:8px 12px;font-family:var(--mono);font-size:12px;letter-spacing:1px}

/* ---------- PAGE / SECTION BASE ---------- */
.page{display:none;min-height:100vh;animation:pageIn .4s ease both}
.page.on{display:block}
@keyframes pageIn{from{opacity:0}to{opacity:1}}

.wrap{max-width:1200px;margin:0 auto;padding:0 28px}
.section{padding-top:70px;padding-bottom:70px}
.eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:3px;text-transform:uppercase;
  color:var(--rouille-vif);margin-bottom:14px;
}
.eyebrow::before{content:"// "}
.sec-title{font-family:var(--display);letter-spacing:1px;color:#fff;line-height:1}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:13px;letter-spacing:2px;text-transform:uppercase;
  padding:15px 26px;border:1px solid var(--rouille);color:#fff;
  background:var(--rouille);transition:.2s;
}
.btn:hover{background:var(--rouille-vif);transform:translateY(-2px)}
.btn.ghost{background:transparent;border-color:var(--ligne);color:var(--beton)}
.btn.ghost:hover{border-color:var(--beton);background:rgba(255,255,255,.04)}

.badge{
  font-family:var(--mono);font-size:10px;letter-spacing:1.5px;
  background:var(--rouille);color:#fff;padding:4px 9px;text-transform:uppercase;
}

/* ---------- STATUS CHIP (e.g. "New music — 2026") ---------- */
.now{
  display:inline-flex;align-items:center;gap:12px;margin-top:20px;
  font-family:var(--mono);font-size:12px;letter-spacing:2px;color:var(--gris);text-transform:uppercase;
  border:1px solid var(--ligne);padding:10px 16px;background:rgba(20,22,26,.8);
}
.dot{width:8px;height:8px;border-radius:50%;background:var(--rouille-vif);animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ---------- SOCIAL LINK LIST (used on contact + coming-soon pages) ---------- */
.socials{display:flex;flex-direction:column;gap:12px}
.socials a{
  display:flex;justify-content:space-between;align-items:center;
  border:1px solid var(--ligne);padding:16px 20px;font-family:var(--mono);font-size:13px;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--beton);transition:.2s;background:var(--acier);
}
.socials a:hover{border-color:var(--rouille);color:var(--rouille-vif);padding-left:28px}

/* ---------- COMING SOON (music + merch teaser blocks) ---------- */
.coming-soon .follow{margin-top:56px}
.coming-soon .follow p{color:#c9c6bf;font-size:16px;margin:10px 0 20px}
.coming-soon .socials{max-width:420px}

/* ---------- FOOTER ---------- */
footer{
  border-top:1px solid var(--ligne);margin-top:80px;padding:40px 28px;
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  font-family:var(--mono);font-size:12px;color:var(--gris);letter-spacing:1px;
}
.foot-brand{display:flex;align-items:center;gap:10px}
.foot-brand img{width:30px}

/* ---------- SCROLL REVEAL ---------- */
.rv{opacity:0;transform:translateY(20px);transition:.6s ease}
.rv.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
}

/* Responsive breakpoints for nav, layout and touch sizing live in responsive.css */