:root{
  --max: 1100px;

  --bg0:#07070a;
  --bg1:#0b0b10;

  --panel: rgba(255,255,255,0.04);
  --panel2: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.10);

  --text:#f2f2f4;
  --muted: rgba(242,242,244,0.72);

  --gold:  #9ca3af;  /* métal mid */
  --gold2: #e5e7eb;  /* reflet clair */


  --shadow: 0 20px 60px rgba(0,0,0,0.50);
  --shadow2: 0 10px 30px rgba(0,0,0,0.35);

  /* Ajouts */
  --radius: 22px;
  --radius2: 16px;
  --ring: 0 0 0 4px rgba(199,192,178,0.18);
  --ease: cubic-bezier(.2,.8,.2,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.65;

  /* IMPORTANT: base stacking pour éviter que les overlays bloquent les clics */
  position: relative;
  z-index: 0;

  background:
    radial-gradient(900px 600px at 20% -10%, rgba(199,192,178,0.16) 0%, rgba(214,178,94,0) 60%),
    radial-gradient(700px 480px at 90% 10%, rgba(242,238,230,0.10) 0%, rgba(240,211,138,0) 55%),
    linear-gradient(180deg, var(--bg0) 0%, var(--bg1) 55%, #06060a 100%);
}

/* =========================
   Overlays CINEMA (SAFE)
   =========================
   -> z-index: -1 pour qu'ils soient toujours derrière.
*/
body::before,
body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index: -1; /* <- clé: ne bloque jamais les clics */
}

body::before{
  background:
    radial-gradient(800px 300px at 15% 25%, rgba(255,255,255,0.035), transparent 60%),
    radial-gradient(700px 260px at 85% 65%, rgba(255,255,255,0.025), transparent 55%);
  mix-blend-mode: screen;
  opacity: .9;
}

body::after{
  background-image:
    repeating-linear-gradient(0deg,
      rgba(255,255,255,0.018),
      rgba(255,255,255,0.018) 1px,
      transparent 1px,
      transparent 3px);
  opacity: .08;
  mix-blend-mode: overlay;
}

a{ color:inherit; }
.wrap{ max-width:var(--max); margin:0 auto; padding: 28px 22px; }

.skip{
  position:absolute; left:-999px; top:10px;
  background:#fff; color:#000;
  padding:10px 12px; border-radius:12px;
}
.skip:focus{ left:18px; z-index:100; }

/* Focus pro (clavier) */
:focus-visible{
  outline: none;
  box-shadow: var(--ring);
  border-color: rgba(199,192,178,0.35) !important;
}

/* NAV */
.nav{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(7,7,10,0.55);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
}

.nav-inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 12px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}

.nav-brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}

.nav-logo{
  height: 36px;
  width:auto;
  display:block;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.35));
}

.nav-brandtext{
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(242,242,244,0.75);
}

.nav-links{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
}

.nav-links a{
  text-decoration:none;
  padding: 8px 10px;
  border-radius: 999px;
  color: rgba(242,242,244,0.70);
  border: 1px solid transparent;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}

.nav-links a:hover{
  color: var(--text);
  border-color: rgba(214,178,94,0.25);
  background: rgba(214,178,94,0.08);
}

.nav-links a.active{
  color: var(--text);
  border-color: rgba(199,192,178,0.35);
  background: rgba(214,178,94,0.10);
}

.nav-btn{
  text-decoration:none;
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .02em;
  color: #0b0b10;
  background: linear-gradient(180deg, var(--gold2) 0%, var(--gold) 100%);
  box-shadow: 0 16px 40px rgba(199,192,178,0.18);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s var(--ease);
}

.nav-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 22px 55px rgba(214,178,94,0.22);
  filter: saturate(1.05);
}
.nav-btn:active{ transform: translateY(0px) scale(0.98); }

@media (max-width: 920px){
  .nav-links{ display:none; }
}

/* HERO */
.hero{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 26px;
  align-items:center;
  padding-top: 26px;
}

@media (max-width: 980px){
  .hero{ grid-template-columns: 1fr; }
}

.eyebrow{
  margin:0 0 10px;
  color: rgba(242,242,244,0.68);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 12px;
}

.title{
  margin: 0;
  font-size: clamp(52px, 7vw, 86px);
  letter-spacing: -0.03em;
  line-height: 0.98;
  text-shadow: 0 20px 70px rgba(0,0,0,0.55);
}

.subtitle{
  margin: 10px 0 18px;
  color: rgba(242,242,244,0.78);
  font-size: 16px;
}

.gold{ color: var(--gold2); }

.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 14px; }

/* BUTTONS */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  padding: 11px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.02);
  color: var(--text);
  font-weight: 800;
  letter-spacing: .01em;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
  position: relative;
  cursor: pointer;
  user-select: none;

  /* assure que le bouton est cliquable au-dessus */
  z-index: 1;
}

.btn::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 999px;
  background: radial-gradient(120px 40px at 25% 20%, rgba(255,255,255,0.18), transparent 60%);
  opacity: 0;
  transition: opacity .18s var(--ease);
  pointer-events:none;
}

.btn:hover{
  transform: translateY(-1px);
  border-color: rgba(214,178,94,0.20);
  box-shadow: 0 14px 40px rgba(0,0,0,0.35);
}
.btn:hover::after{ opacity: .55; }
.btn:active{ transform: translateY(0px) scale(0.985); }

.btn.primary{
  border: none;
  color:#0b0b10;
  background: linear-gradient(180deg, var(--gold2) 0%, var(--gold) 100%);
  box-shadow: 0 18px 44px rgba(199,192,178,0.18);
}
.btn.primary:hover{
  box-shadow: 0 24px 60px rgba(214,178,94,0.22);
}

.btn.ghost:hover{
  background: rgba(214,178,94,0.06);
}

/* Badges */
.badges{ display:flex; gap:10px; flex-wrap:wrap; }
.badge{
  border: 1px solid rgba(214,178,94,0.22);
  background: rgba(214,178,94,0.08);
  color: rgba(242,242,244,0.86);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 13px;
  transition: transform .18s var(--ease), border-color .18s var(--ease);
}
.badge:hover{
  transform: translateY(-1px);
  border-color: rgba(214,178,94,0.32);
}

/* Portrait */
.portrait-frame{
  border-radius: var(--radius);
  padding: 10px;
  background: linear-gradient(145deg, rgba(199,192,178,0.16), rgba(255,255,255,0.03));
  border: 1px solid rgba(199,192,178,0.18);
  box-shadow: var(--shadow);
  position: relative;
  overflow:hidden;
}

.portrait-frame::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(500px 240px at 15% 10%, rgba(240,211,138,0.18), transparent 60%);
  opacity: .55;
  pointer-events:none;
}

.portrait-frame img{
  width: 100%;
  height: auto;
  display:block;
  border-radius: calc(var(--radius) - 4px);
  filter: contrast(1.06) saturate(1.06);
  transform: scale(1.001);
  transition: transform .35s var(--ease), filter .35s var(--ease);
}
.portrait-frame:hover img{
  transform: scale(1.02);
  filter: contrast(1.08) saturate(1.12);
}

/* CARDS */
.card{
  margin: 18px 0;
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.03));
  box-shadow: 0 18px 60px rgba(0,0,0,0.45);
  position: relative;
  overflow: hidden;
  transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}

/* IMPORTANT: les pseudo-elements ne doivent jamais capturer les clics */
.card::before,
.card::after{
  pointer-events: none;
}

.card::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(700px 220px at 20% 0%, rgba(214,178,94,0.12), rgba(214,178,94,0) 60%),
    radial-gradient(450px 180px at 90% 10%, rgba(242,238,230,0.10), rgba(240,211,138,0) 55%),
    linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.05) 45%, transparent 60%);
  background-size: auto, auto, 220% 220%;
  background-position: center, center, 0% 0%;
  animation: cardShine 12s var(--ease) infinite;
  opacity: .45;
}

@keyframes cardShine{
  0%   { background-position: center, center, 0% 0%; }
  50%  { background-position: center, center, 100% 100%; }
  100% { background-position: center, center, 0% 0%; }
}

.card::after{
  content:"";
  position:absolute;
  inset: 1px;
  border-radius: calc(var(--radius) - 1px);
  border: 1px solid rgba(255,255,255,0.06);
  opacity: .8;
}

.card:hover{
  transform: translateY(-2px);
  border-color: rgba(214,178,94,0.22);
  box-shadow: 0 30px 90px rgba(0,0,0,0.58);
}

.card-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 10px;
}

/* TITRES */
h2{
  margin:0;
  font-size: 22px;
  letter-spacing: -0.01em;
  position: relative;
  padding-left: 12px;
}
h2::before{
  content:"";
  position:absolute;
  left:0;
  top: 55%;
  transform: translateY(-50%);
  width: 6px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gold2), var(--gold));
  box-shadow: 0 10px 30px rgba(214,178,94,0.20);
}

.card-kicker{
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(242,242,244,0.62);
}

.muted{ color: var(--muted); }
.small{ font-size: 13px; color: var(--muted); margin-top: 10px; }

.inline{
  text-decoration: none;
  color: rgba(240,211,138,0.92);
  border-bottom: 1px solid rgba(240,211,138,0.35);
  padding-bottom: 1px;
}
.inline:hover{
  border-bottom-color: rgba(240,211,138,0.70);
}

/* Links tiles */
.grid-2{ display:grid; grid-template-columns: 1.05fr 0.95fr; gap: 16px; }
@media (max-width: 980px){ .grid-2{ grid-template-columns: 1fr; } }

.stack{ display:grid; gap: 10px; }

.link-tile{
  display:block;
  padding: 12px 14px;
  border-radius: var(--radius2);
  text-decoration:none;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
  transition: transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}

.link-tile:hover{
  transform: translateY(-1px);
  border-color: rgba(214,178,94,0.24);
  background: rgba(214,178,94,0.08);
  box-shadow: 0 18px 55px rgba(0,0,0,0.38);
}

.mini{
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.16);
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}

.mini h3{
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color: rgba(242,242,244,0.62);
}
.mini p{ margin:0; }

.note{ margin: 10px 0 0; color: rgba(242,242,244,0.62); font-size: 13px; }

/* Video */
.video{
  position: relative;
  padding-bottom: 56.25%;
  height:0;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: #000;
  box-shadow: var(--shadow2);
}
.video iframe{ position:absolute; inset:0; width:100%; height:100%; }

/* Discography */
.discography{ display:grid; gap: 12px; }

.disc-year{
  border-radius: 18px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.14);
  box-shadow: 0 10px 28px rgba(0,0,0,0.18);
  transition: transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.disc-year:hover{
  transform: translateY(-1px);
  border-color: rgba(199,192,178,0.18);
  background: rgba(214,178,94,0.05);
}

.disc-year h3{
  margin:0 0 10px;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(240,211,138,0.86);
}
.disc-year ul{ margin:0; padding-left: 18px; color: rgba(242,242,244,0.86); }
.disc-year li{ margin: 6px 0; }

/* Key tracks */
.key-tracks{ margin: 0; padding-left: 18px; }
.key-tracks li{ margin: 8px 0; }

/* Chips */
.chips{ display:flex; flex-wrap:wrap; gap: 8px; }
.chip{
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 13px;
  color: rgba(242,242,244,0.84);
  transition: border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}
.chip:hover{
  border-color: rgba(214,178,94,0.22);
  background: rgba(214,178,94,0.08);
  transform: translateY(-1px);
}

.chip-hidden{ display:none; }

.chips-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-top: 14px;
}

.smallbtn{
  padding: 10px 12px;
  font-size: 13px;
}

.footer{
  margin-top: 20px;
  padding: 14px 0 8px;
  color: rgba(242,242,244,0.55);
  font-size: 14px;
  text-align: center;
}

.footer-logo {
  width: 40px;
  height: auto;
}

@media (min-width: 768px) {
  .footer-logo {
    width: 48px;
  }
}

/* Toggles */
.hidden{ display:none; }
.disc-hidden{ display:none; }

/* More platforms button */
.more-btn{
  margin-top: 10px;
  background: none;
  border: 1px solid rgba(199,192,178,0.35);
  color: var(--gold2);
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .18s var(--ease), transform .18s var(--ease), border-color .18s var(--ease);
  z-index: 1;
  position: relative;
}
.more-btn:hover{
  background: rgba(214,178,94,0.10);
  border-color: rgba(214,178,94,0.45);
  transform: translateY(-1px);
}
.more-btn:active{ transform: translateY(0px) scale(0.985); }

/* =========================
   CINEMA REVEAL (scroll)
   ========================= */

.reveal{
  opacity: 0;
  transform: translateY(14px);
  filter: blur(10px);
  transition:
    opacity .9s var(--ease),
    transform .9s var(--ease),
    filter .9s var(--ease);
  will-change: transform, opacity, filter;
  transition-delay: var(--d, 0ms);
}

.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Page load (nav + hero) */
body.preload .nav,
body.preload .hero{
  opacity: 0;
  transform: translateY(10px);
  filter: blur(8px);
}

.nav, .hero{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition:
    opacity .8s var(--ease),
    transform .8s var(--ease),
    filter .8s var(--ease);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; scroll-behavior:auto; }
  .card::before{ animation: none !important; }
  .reveal{
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  body.preload .nav,
  body.preload .hero{
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* =========================
   KOVERBALPROD HUB — extras
   ========================= */

/* Accent naming (optionnel) */
.chromed{ color: var(--gold2); }

/* Responsive embeds */
.embed{
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--radius2);
  overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  box-shadow: var(--shadow2);
}
.embed iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* Roster cards */
.roster{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 860px){
  .roster{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
  .roster{ grid-template-columns: 1fr; }
}

.artist-card{
  display:flex;
  gap: 14px;
  align-items:center;
}
.artist-avatar{
  width: 54px;
  height: 54px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background:
    radial-gradient(90px 60px at 25% 15%, rgba(242,238,230,0.16), transparent 55%),
    radial-gradient(70px 50px at 80% 75%, rgba(199,192,178,0.12), transparent 55%),
    rgba(255,255,255,0.035);
  display:grid;
  place-items:center;
  font-weight: 800;
  letter-spacing: .5px;
}
.artist-meta{ min-width: 0; }
.artist-name{ font-weight: 800; margin: 0; }
.artist-sub{ margin: 2px 0 0; color: var(--muted); font-size: 0.95rem; }
.artist-actions{ display:flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }

/* Shop container spacing */
.shop-shell{
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow2);
}

/* Simple page title spacing */
.page-title{ margin: 0 0 6px; }
.page-lead{ margin: 0; color: var(--muted); }



/* Artist logos in roster cards */
.artist-avatar.img{
  background: rgba(255,255,255,.02);
  border: 1px solid var(--border);
  padding: 10px 12px;
}
.artist-avatar.img img{
  width: 92px;
  height: 44px;
  object-fit: contain;
  display: block;
}
/* --- Artist roster: logo centré dans carré --- */
.artist-card{
  align-items: center;
}

.artist-avatar{
  width: 56px;
  height: 56px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.35);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: 0 0 56px;
}

/* Image centrée + mieux remplie */
.artist-avatar img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;

  /* rend les logos “mieux cadrés” même s’ils ont du vide autour */
  padding: 10px;

  /* léger zoom pour éviter l'effet "tout petit" */
  transform: scale(1.32);
  transform-origin: center;
}

/* Cas des logos très clairs : on évite le rendu “perdu” */
.artist-avatar{
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
/* ===== FINAL PERFECT SIZE ===== */
.roster .artist-card{
  align-items: center;
}

.roster .artist-card .artist-avatar{
  width: 80px !important;
  height: 80px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: #111 !important;
  flex: 0 0 80px !important;
  display: block !important;
}

.roster .artist-card .artist-avatar img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}