/* ===============================================================
   THBD — thbd.art
   Brutalisme éditorial : noir, rose fluo, typo display qui déborde,
   grille asymétrique, aucune ombre, aucun coin arrondi superflu.
   =============================================================== */

@font-face { font-family: Display; src: url(../fonts/anton.woff2) format("woff2");
             font-weight: 400; font-display: swap; }
@font-face { font-family: Grotesk; src: url(../fonts/grotesk-400.woff2) format("woff2");
             font-weight: 400; font-display: swap; }
@font-face { font-family: Grotesk; src: url(../fonts/grotesk-700.woff2) format("woff2");
             font-weight: 700; font-display: swap; }
@font-face { font-family: Mono; src: url(../fonts/mono-400.woff2) format("woff2");
             font-weight: 400; font-display: swap; }

:root {
  --bg:    #0a0a0b;
  --ink:   #f2f2f4;
  --dim:   #86868f;
  --rose:  #ff2d95;
  --rose-d:#c9126e;
  --line:  #ffffff1f;
  --panel: #131315;

  --pad: clamp(1.125rem, 4vw, 3.5rem);
  --max: 100rem;

  /* Échelle d'espacement. Un seul jeu de valeurs pour tout le site,
     pour que deux respirations de même nature soient identiques. */
  --s1: .5rem;     /* éléments d'un même bloc */
  --s2: 1rem;      /* label -> contenu */
  --s3: 1.5rem;    /* blocs voisins liés */
  --s4: 2.5rem;    /* blocs distincts */
  --s5: 4rem;      /* respiration forte */

  /* Compensation optique d'Anton en line-height .78 : les capitales
     débordent de .046em au-dessus de leur boîte et de .034em en
     dessous. Sans ça, les marges du titre mentent sur ce qu'on voit. */
  --anton-top: .046em;
  --anton-bot: .034em;

  color-scheme: dark;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.5 Grotesk, -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Grain : casse l'aplat numérique, très légèrement. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9999;
  pointer-events: none; opacity: .038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--rose); color: #0a0a0b; }

a { color: inherit; }

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 1rem; top: 1rem; z-index: 100;
  padding: .75rem 1rem; background: var(--rose); color: #0a0a0b;
  font: 400 .75rem/1 Mono, monospace;
}

:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }

/* --- Barre supérieure ------------------------------------------ */
.top {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center;
  gap: clamp(.75rem, 2vw, 1.75rem);
  padding: .875rem var(--pad);
  border-bottom: 1px solid var(--line);
  background: #0a0a0bd9;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font: 400 .6875rem/1 Mono, monospace;
  text-transform: uppercase; letter-spacing: .14em;
}
.top__brand {
  display: flex; align-items: center; min-height: 44px;
  text-decoration: none;
}
.top__brand img {
  display: block; height: 1.5rem; width: auto;
  transition: opacity .15s;
}
.top__brand:hover img { opacity: .7; }
.top__nav { display: flex; gap: clamp(.5rem, 2.5vw, 2rem); margin-left: auto; }
.top__nav a {
  /* zone tactile confortable au doigt, sans grossir le bandeau */
  display: flex; align-items: center; min-height: 44px;
  padding-inline: .375rem;
  text-decoration: none; color: var(--dim); transition: color .15s;
}
.top__nav a:hover { color: var(--rose); }
/* le bandeau ne grandit pas pour autant */
.top { padding-block: 0; min-height: 44px; }

.top__meta {
  display: flex; gap: clamp(.625rem, 1.5vw, 1.25rem);
  margin: 0;
  white-space: nowrap;
  color: var(--dim);
}
.top__meta span::before {
  content: "\25C6"; color: var(--rose);
  margin-right: .45em;   /* l'espace d'un content: est trop fragile */
}
/* En dessous de 62rem, la navigation prime : le genre reste dit par la
   bio, juste en dessous. */
@media (max-width: 62rem) { .top__meta { display: none; } }

/* Sur petit écran : "Contact" saute (l'adresse est dans le pied de
   page), et on resserre pour que les libellés tiennent sur une ligne. */
@media (max-width: 34rem) {
  .top { padding-inline: .875rem; }
  .top__nav a:nth-child(4) { display: none; }
  .top__nav { gap: 0; }
  .top__nav a { padding-inline: .3125rem; letter-spacing: .06em; }
  .top { font-size: .625rem; }
  .top__brand img { height: 1.25rem; }
}
.top__nav a { white-space: nowrap; }

/* --- Accroche --------------------------------------------------- */
.hero {
  /* sert de référence au titre : 1cqi = 1% de la largeur utile ici,
     padding déduit. Le titre se cale donc tout seul, à toute taille. */
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 clamp(var(--s2), 3vw, var(--s4));
  align-items: end;
  padding: var(--s4) var(--pad) 0;
  max-width: var(--max); margin-inline: auto;
}


/* Le titre occupe toute la largeur et mord sur les marges optiques */
.hero__title {
  grid-column: 1 / -1;
  /* Ces deux valeurs annulent le débordement des glyphes : l'espace
     réellement visible vaut alors --s2 au-dessus et --s3 en dessous,
     comme partout ailleurs. */
  padding-top: var(--anton-top);
  margin: 0 0 calc(var(--s3) + var(--anton-bot));
  /* "THBD" en Anton mesure ~1.77x sa taille de police : 58cqi le fait
     occuper toute la largeur utile et mordre légèrement sur les bords
     (le débordement est coupé par overflow-x sur body). */
  font: 400 58cqi/.78 Display, sans-serif;
  letter-spacing: -.02em;
  text-transform: uppercase;
  white-space: nowrap;
  margin-left: -.055em;   /* annule le sidebearing gauche d'Anton */
}

.hero__fig { grid-column: 1 / 7; margin: 0; }
.hero__fig img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 38%;
  filter: contrast(1.06) saturate(1.12);
}

.hero__aside {
  grid-column: 8 / -1;
  padding-bottom: var(--s1);
}
.hero__bio {
  margin: 0 0 var(--s4);
  font-size: clamp(1.125rem, 2vw, 1.625rem);
  line-height: 1.3; letter-spacing: -.01em;
  text-wrap: balance;
}

.socials { display: flex; flex-direction: column; }
.socials a {
  /* 44px minimum : ces liens sont surtout touchés au doigt */
  display: flex; align-items: center; min-height: 44px;
  border-top: 1px solid var(--line);
  text-decoration: none;
  font: 400 .75rem/1 Mono, monospace;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--dim);
  transition: color .15s, padding-left .18s;
}
.socials a:last-child { border-bottom: 1px solid var(--line); }
.socials a::after { content: " ↗"; opacity: .5; }
.socials a:hover { color: var(--rose); padding-left: .625rem; }

@media (max-width: 56rem) {
  .hero { align-items: start; }
  .hero__fig   { grid-column: 1 / -1; }
  .hero__fig img { aspect-ratio: 5 / 4; object-position: 50% 34%; }
  .hero__aside { grid-column: 1 / -1; padding-top: var(--s3); }
}

/* --- Bandeau défilant ------------------------------------------- */
.marquee { overflow: hidden; }
.marquee__row {
  display: flex; align-items: center;
  width: max-content;
  animation: slide 38s linear infinite;
}
.marquee__row i { font-style: normal; }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__row { animation: none; } }

/* Paroles : gros, rose, une phrase sur deux en contour */
.marquee--lyrics {
  margin-top: var(--s5);
  border-block: 1px solid var(--line);
  background: var(--rose);
  color: #0a0a0b;
}
.marquee--lyrics .marquee__row {
  gap: clamp(1rem, 2.5vw, 2rem);
  padding: clamp(.375rem, 1vw, .75rem) 0;
  font: 400 clamp(1.75rem, 5.5vw, 4.5rem)/1 Display, sans-serif;
  text-transform: uppercase; letter-spacing: -.01em;
  /* ~77 px/s : assez vif pour le ton, assez lent pour être lu.
     À réajuster si tu ajoutes ou retires des phrases : la vitesse
     vaut (largeur du bandeau / 2) / durée. */
  animation-duration: 30s;
}
/* Contour plutôt que plein : donne le contretemps visuel */
.marquee--lyrics .is-out {
  color: transparent;
  -webkit-text-stroke: 2px #0a0a0b;
  paint-order: stroke fill;
}
.marquee--lyrics i {
  font-size: .4em;
  opacity: .5;
  transform: translateY(-.35em);
}

/* Info : petit, mono, défile dans l'autre sens */
.marquee--info {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  color: var(--dim);
}
.marquee--info .marquee__row {
  gap: 1.25rem;
  padding: .5rem 0;
  font: 400 .75rem/1 Mono, monospace;
  text-transform: uppercase; letter-spacing: .16em;
  animation-duration: 44s;
  animation-direction: reverse;
}
.marquee--info i { color: var(--rose); }

/* --- En-tête de section ----------------------------------------- */
.sec__head {
  padding-bottom: var(--s2); margin-bottom: var(--s4);
  border-bottom: 1px solid var(--line);
}
.sec__head h2 {
  margin: 0;
  font: 400 clamp(1.75rem, 5vw, 3.25rem)/1 Display, sans-serif;
  text-transform: uppercase; letter-spacing: -.01em;
}

section {
  /* respiration entre sections, bornée par l'échelle */
  padding: clamp(var(--s4), 7vw, var(--s5)) var(--pad) 0;
  max-width: var(--max); margin-inline: auto;
}

/* --- Écoute ------------------------------------------------------ */
.listen__grid {
  display: grid; gap: clamp(var(--s2), 2.5vw, var(--s3));
  grid-template-columns: 1fr;
}
@media (min-width: 56rem) {
  /* stretch : le player et la carte se calent sur la même hauteur */
  .listen__grid { grid-template-columns: 5fr 7fr; align-items: stretch; }
}

.release {
  display: grid; align-content: start;
  gap: .5rem;
  padding: 1.25rem;
  text-decoration: none;
  background: var(--panel);
  border: 1px solid var(--line);
  transition: background-color .2s, border-color .2s;
}
.release img {
  width: 100%; max-width: 13rem; height: auto; aspect-ratio: 1;
  object-fit: cover; margin-bottom: .75rem;
}
.release__tag {
  font: 400 .6875rem/1 Mono, monospace;
  text-transform: uppercase; letter-spacing: .18em; color: var(--rose);
}
.release__title {
  font: 400 clamp(1.5rem, 3vw, 2.25rem)/1 Display, sans-serif;
  text-transform: uppercase;
}
.release__meta { font-size: .875rem; color: var(--dim); }
.release__go {
  margin-top: .5rem;
  font: 400 .75rem/1 Mono, monospace;
  text-transform: uppercase; letter-spacing: .14em; color: var(--dim);
  transition: color .2s;
}
.release:hover { background: #1a1a1d; border-color: #ffffff3d; }
.release:hover .release__go { color: var(--rose); }

.player { display: flex; }
.player iframe {
  display: block; width: 100%; border: 0;
  /* remplit la hauteur de la ligne ; 352px est le minimum utile de
     l'embed Spotify (en dessous, il bascule en mode compact) */
  height: 100%; min-height: 352px;
  /* la carte de l'embed a des coins arrondis (12px) et son document est
     opaque : sans ce clip, du blanc dépasse aux quatre angles. Rogné au
     même rayon, ce sont les angles transparents et le fond de la page
     qui passent à travers */
  border-radius: 12px;
}
@media (max-width: 56rem) {
  /* en colonne unique, la grille n'étire plus l'iframe :
     on lui donne de quoi respirer */
  .player iframe { min-height: 30rem; }
}

/* --- Tracklist ---------------------------------------------------- */
.list { margin: 0; padding: 0; list-style: none; counter-reset: t; }
.list li { border-bottom: 1px solid var(--line); }
.list li:first-child { border-top: 1px solid var(--line); }

.list a {
  display: grid;
  grid-template-columns: auto 2.75rem 1fr auto;
  align-items: center;
  gap: clamp(.875rem, 2vw, 1.75rem);
  padding: .875rem 1rem;
  text-decoration: none;
  transition: background-color .16s, color .16s;
}
.list__n {
  font: 400 .75rem/1 Mono, monospace;
  letter-spacing: .1em; color: var(--dim);
}
.list a img {
  width: 2.75rem; height: 2.75rem; object-fit: cover;
  filter: grayscale(1); transition: filter .2s;
}
.list__t {
  font: 400 clamp(1.125rem, 2.6vw, 1.75rem)/1.05 Display, sans-serif;
  text-transform: uppercase; letter-spacing: -.005em;
}
.list__t em {
  font: 400 .6875rem/1 Mono, monospace;
  font-style: normal; text-transform: uppercase; letter-spacing: .12em;
  color: var(--dim); margin-left: .5rem; white-space: nowrap;
}
.list__go {
  font: 400 .6875rem/1 Mono, monospace;
  text-transform: uppercase; letter-spacing: .16em; color: var(--dim);
  transition: color .16s;
}
.list__go::after { content: " ↓"; }

.list a:hover { background: var(--rose); color: #0a0a0b; }
.list a:hover .list__n,
.list a:hover .list__t em,
.list a:hover .list__go { color: #0a0a0b; }
.list a:hover img { filter: grayscale(0); }

@media (max-width: 34rem) {
  .list a { grid-template-columns: auto 2.25rem 1fr; gap: .75rem; padding: .75rem .5rem; }
  .list a img { width: 2.25rem; height: 2.25rem; }
  .list__go { display: none; }
  .list__t em { display: block; margin: .25rem 0 0; }
}

/* --- Use my music -------------------------------------------------- */
.use__lead {
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  max-width: 34ch;
  font-size: clamp(1.25rem, 2.4vw, 1.875rem);
  line-height: 1.25; letter-spacing: -.01em;
}
.use__lead b { color: var(--rose); font-weight: 400; }

.use__rules {
  display: grid; gap: 1px;
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); padding: 0;
  list-style: none;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (min-width: 52rem) { .use__rules { grid-template-columns: repeat(3, 1fr); } }

.use__rules li { padding: 1.25rem; background: var(--bg); }
.use__rules h3 {
  margin: 0 0 .5rem;
  font: 400 1.0625rem/1.15 Display, sans-serif;
  text-transform: uppercase; letter-spacing: .005em;
}
.use__rules li::before {
  display: block; margin-bottom: .75rem;
  content: counter(r, decimal-leading-zero);
  counter-increment: r;
  font: 400 .6875rem/1 Mono, monospace;
  letter-spacing: .18em; color: var(--rose);
}
.use__rules { counter-reset: r; }
.use__rules p { margin: 0; font-size: .875rem; line-height: 1.5; color: var(--dim); }
.use__rules b { color: var(--ink); font-weight: 400; }
.use__rules a { color: var(--rose); text-underline-offset: 3px; }

/* Générateur de crédit */
.credit { border: 1px solid var(--line); background: var(--panel); }
.credit__bar {
  display: flex; align-items: center; gap: .875rem;
  padding: .875rem 1.25rem;
  border-bottom: 1px solid var(--line);
}
.credit__bar label {
  font: 400 .6875rem/1 Mono, monospace;
  text-transform: uppercase; letter-spacing: .18em; color: var(--dim);
}
.credit__bar select {
  flex: 1; max-width: 18rem;
  min-height: 44px;
  padding: .4375rem .625rem;
  color: var(--ink); background: #0a0a0b;
  border: 1px solid var(--line); border-radius: 0;
  font: 400 .8125rem/1.2 Mono, monospace;
  cursor: pointer;
}
.credit pre {
  margin: 0; padding: 1.25rem;
  font: 400 .8125rem/1.7 Mono, monospace;
  color: var(--ink);
  white-space: pre-wrap; word-break: break-word;
  user-select: all;
}
/* Bouton copier : détaché du bloc, ombre solide décalée, balayage
   lumineux en boucle. Il doit se voir depuis l'autre bout de la page. */
.copybtn {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; width: 100%;
  margin: 1.25rem 0 .5rem;
  padding: 1.125rem 1.375rem;
  background: var(--rose);
  color: #0a0a0b;
  border: 1px solid var(--rose);
  box-shadow: 7px 7px 0 var(--ink);
  font: 400 .875rem/1 Mono, monospace;
  font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background-color .16s;
}
.copybtn__in { display: flex; align-items: center; gap: .75rem; }
.copybtn svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }
.copybtn__done { font-weight: 400; letter-spacing: .12em; }

/* Balayage : une bande claire traverse le bouton en boucle */
.copybtn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, #fff0 38%, #ffffffa6 50%, #fff0 62%);
  transform: translateX(-100%);
  animation: sweep 3.4s ease-in-out infinite;
}
@keyframes sweep {
  0%, 55%  { transform: translateX(-100%); }
  100%     { transform: translateX(100%); }
}

/* Au survol, le bouton se cale sur son ombre : effet d'enfoncement */
.copybtn:hover  { transform: translate(7px, 7px); box-shadow: 0 0 0 var(--ink); }
.copybtn:active { background: #fff; }

@media (prefers-reduced-motion: reduce) {
  .copybtn::before { animation: none; }
  .copybtn:hover { transform: none; }
}

/* --- Pied de page --------------------------------------------------- */
.foot {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 1rem;
  max-width: var(--max); margin: clamp(var(--s4), 7vw, var(--s5)) auto 0;
  padding: 1.5rem var(--pad) 2.5rem;
  border-top: 1px solid var(--line);
  font: 400 .75rem/1.4 Mono, monospace;
  text-transform: uppercase; letter-spacing: .14em; color: var(--dim);
}
.foot__mail {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--ink); text-decoration: none;
}
.foot__mail:hover { color: var(--rose); }
.foot p { margin: 0; }