/* ═══════════ MusicLab ML — thème sombre & musical : encre, crème, or de scène ═══════════ */
:root {
  --fond: #0e0f11;
  --fond-2: #131518;
  --encre: #ece7db;          /* texte principal, crème */
  --gris: #8f8c83;
  --hairline: rgba(236, 231, 219, .13);
  --accent: #d4a63f;         /* or, lumière de scène */
  --marge: clamp(1.4rem, 7vw, 7rem);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: "Outfit", system-ui, sans-serif;
  font-weight: 300;
  background: var(--fond);
  color: var(--encre);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent); color: var(--fond); }
h1, h2 { font-family: "Fraunces", Georgia, serif; font-weight: 400; line-height: 1.08; }
em { font-style: italic; }
a { color: inherit; }
img { max-width: 100%; display: block; }

/* petites capitales espacées — le fil conducteur */
.hero-kicker, .section-num, .hero-stats, .filtre, .clip-artiste,
.nav a, .brand, .footer, .rs-detail {
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* liens texte soulignés */
.lien-souligne {
  font-size: .82rem; letter-spacing: .18em; text-transform: uppercase;
  text-decoration: none; padding-bottom: .35rem;
  border-bottom: 1px solid var(--encre);
  transition: color .2s, border-color .2s;
}
.lien-souligne:hover { color: var(--accent); border-color: var(--accent); }

/* ── Barre de navigation ── */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 1.3rem var(--marge);
  background: rgba(14, 15, 17, .88);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--hairline);
}
.brand { font-weight: 500; text-decoration: none; }
.brand span { color: var(--accent); }
.nav { display: flex; gap: 2.4rem; }
.nav a { text-decoration: none; color: var(--gris); font-weight: 300; transition: color .2s; }
.nav a:hover { color: var(--encre); }
.nav-burger { display: none; font-size: 1.3rem; background: none; border: none; cursor: pointer; color: var(--encre); }

/* ── Héros ── */
.hero { padding: clamp(5rem, 16vh, 10rem) var(--marge) clamp(4rem, 10vh, 7rem); }
.hero-kicker { color: var(--gris); margin-bottom: 2.2rem; }
.hero h1 {
  font-size: clamp(2.6rem, 7.5vw, 5.6rem);
  letter-spacing: -.01em;
  margin-bottom: 2rem;
}
.hero h1 em { color: var(--accent); }

/* l'onde sonore du logo, tracée au chargement */
.onde { width: min(240px, 50vw); margin-bottom: 2.2rem; overflow: visible; }
.onde path {
  stroke: var(--accent); stroke-width: 1.6;
  stroke-dasharray: 420; stroke-dashoffset: 420;
  animation: tracer 1.6s ease-out .3s forwards;
}
@keyframes tracer { to { stroke-dashoffset: 0; } }

.hero-sub {
  max-width: 34rem; font-size: 1.05rem; font-weight: 300;
  color: #b4b0a5; margin-bottom: 3rem;
}
.hero-actions { display: flex; gap: 2.8rem; flex-wrap: wrap; margin-bottom: 4.5rem; }
.hero-stats { color: var(--gris); }

/* ── Sections ── */
.section {
  padding: clamp(4rem, 10vh, 7rem) var(--marge);
  border-top: 1px solid var(--hairline);
}
.section-num { color: var(--accent); margin-bottom: 2.5rem; }
.section h2 { font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: 2.5rem; }

/* À propos */
.apropos-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem); align-items: start;
}
.apropos-grid h2 { margin-bottom: 0; }
.apropos-texte p { margin-bottom: 1.4rem; max-width: 34rem; color: #cfcabe; }
.apropos-styles { color: var(--gris) !important; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; margin-top: 2.4rem; }

/* Filtres */
.filtres { display: flex; gap: 1.8rem; flex-wrap: wrap; margin-bottom: 3rem; }
.filtre {
  background: none; border: none; cursor: pointer;
  font-family: "Outfit", sans-serif; font-weight: 300;
  color: var(--gris); padding: 0 0 .3rem;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.filtre:hover { color: var(--encre); }
.filtre.actif { color: var(--accent); border-color: var(--accent); }

/* Grille clips */
.clips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
}
.clip-video { position: relative; aspect-ratio: 16 / 9; background: #000; cursor: pointer; overflow: hidden; }
.clip-video img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(.9) brightness(.82);
  transition: filter .45s ease, transform .45s ease;
}
.clip-video:hover img { filter: grayscale(0) contrast(1) brightness(1); transform: scale(1.025); }
.clip-video iframe { width: 100%; height: 100%; border: none; }
.clip-play {
  position: absolute; inset: 0; display: grid; place-items: center;
}
.clip-play::before {
  content: "▶";
  font-size: .8rem; color: var(--encre); padding-left: 3px;
  width: 56px; height: 56px; border: 1px solid rgba(236, 231, 219, .8); border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(14, 15, 17, .35);
  transition: background .25s, transform .25s, border-color .25s, color .25s;
}
.clip-video:hover .clip-play::before {
  background: rgba(14, 15, 17, .6); transform: scale(1.06);
  border-color: var(--accent); color: var(--accent);
}
.clip-corps { padding: 1.1rem 0 0; }
.clip-titre { font-family: "Fraunces", serif; font-weight: 400; font-size: 1.15rem; margin-bottom: .35rem; }
.clip-artiste { color: var(--gris); }
.clips-more { margin-top: 4rem; }
.dernieres .separateur { border: none; border-top: 1px solid var(--hairline); margin: 4.5rem 0; }

/* Réseaux — liste typographique, façon tracklist */
.reseaux-liste { list-style: none; counter-reset: piste; }
.reseaux-liste li { border-bottom: 1px solid var(--hairline); counter-increment: piste; }
.reseaux-liste li:first-child { border-top: 1px solid var(--hairline); }
.reseaux-liste a {
  display: grid; grid-template-columns: 2.4rem minmax(9rem, 14rem) 1fr auto;
  align-items: baseline; gap: 1.5rem;
  padding: 1.6rem .2rem; text-decoration: none;
  transition: padding-left .25s ease;
}
.reseaux-liste a::before {
  content: counter(piste, decimal-leading-zero);
  font-size: .78rem; letter-spacing: .1em; color: var(--gris);
}
.reseaux-liste a:hover { padding-left: 1rem; }
.rs-nom { font-family: "Fraunces", serif; font-size: 1.5rem; }
.rs-detail { color: var(--gris); }
.rs-fleche { font-size: 1.1rem; color: var(--gris); transition: color .2s, transform .25s; }
.reseaux-liste a:hover .rs-fleche { color: var(--accent); transform: translateX(6px); }

/* Contact */
.section-contact { padding-bottom: clamp(5rem, 14vh, 9rem); }
.contact-mail {
  font-family: "Fraunces", serif;
  font-size: clamp(1.3rem, 3.6vw, 2.6rem);
  text-decoration: none;
  border-bottom: 1px solid var(--encre);
  padding-bottom: .3rem;
  transition: color .2s, border-color .2s;
}
.contact-mail:hover { color: var(--accent); border-color: var(--accent); }

/* Pied de page */
.footer {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem;
  flex-wrap: wrap;
  padding: 2rem var(--marge) 2.5rem;
  border-top: 1px solid var(--hairline);
  color: var(--gris);
  background: var(--fond-2);
}
.footer-liens { display: flex; gap: 1.8rem; }
.footer-liens a { text-decoration: none; color: var(--gris); transition: color .2s; }
.footer-liens a:hover { color: var(--accent); }

/* ── Responsive ── */
@media (max-width: 780px) {
  .nav {
    display: none; position: absolute; top: 100%; right: 0; left: 0;
    flex-direction: column; gap: 0; background: var(--fond);
    border-bottom: 1px solid var(--hairline); padding: .6rem 0;
  }
  .nav.ouvert { display: flex; }
  .nav a { padding: .9rem var(--marge); }
  .nav-burger { display: block; }
  .apropos-grid { grid-template-columns: 1fr; }
  .reseaux-liste a { grid-template-columns: 2.4rem 1fr auto; }
  .rs-detail { grid-column: 2; grid-row: 2; }
  .rs-fleche { grid-row: 1 / span 2; align-self: center; }
}