/* Atmos Fest — section « Premier nom » de l'accueil
   S'ajoute à styles.css (tokens de la charte v1.0, eyebrow, boutons).
   Reprend la fiche de la page /programmation/ : photo noir et blanc qui se
   colore au survol, bio, derniers lives, sons joués par la barre de la radio. */

.headliner {
  --line: rgba(255,255,255,.14);
  --muted: rgba(255,255,255,.62);
  --row: 60px;   /* hauteur commune des lignes lives / sons */
  position: relative;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  min-height: min(100svh, 980px);
  background: var(--nuit); color: #fff;
}
/* La première vue est coupée en diagonale : la section remonte dessous */
.seam--hero + .headliner { padding-top: 2.8vw; }

/* ---- Ruban d'annonce : « Première tête d'affiche annoncée », en Lavande
   sur toute la largeur, qui défile au-dessus de la photo et du nom ---- */
.headliner__ribbon {
  grid-column: 1 / -1;
  margin: 0; overflow: hidden; white-space: nowrap;
  background: var(--lavande); color: var(--nuit);
  padding: clamp(10px, 1.4vw, 18px) 0;
}
.headliner__ribbon-track {
  display: inline-flex; align-items: center;
  animation: headliner-ribbon 38s linear infinite;
}
.headliner__ribbon-track span {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(22px, 3.4vw, 48px); line-height: 1;
  letter-spacing: -0.01em; text-transform: uppercase;
}
.headliner__ribbon-track i { font-style: normal; font-size: clamp(16px, 2vw, 28px); margin: 0 .9em; }
@keyframes headliner-ribbon { to { transform: translateX(-50%); } }
.headliner .sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---- Photo : noir et blanc, lente dérive, couleur au survol ---- */
.headliner__photo { position: relative; margin: 0; overflow: hidden; background: #000; }
.headliner__photo img {
  position: absolute; inset: -4%;
  width: 108%; height: 108%; max-width: none; object-fit: cover; object-position: 50% 20%;
  filter: grayscale(1) contrast(1.12) brightness(.92);
  transition: filter .9s ease;
  animation: headliner-drift 22s ease-in-out infinite alternate;
}
.headliner__photo:hover img,
.headliner.is-colored .headliner__photo img { filter: grayscale(0) contrast(1.05) brightness(1); }
/* Sans survol (tactile) : la couleur arrive un temps après l'arrivée sur la section */
.headliner.is-colored .headliner__photo img { transition: filter 1.4s ease .5s; }
.headliner__photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(26,16,32,0) 70%, rgba(26,16,32,.6));
}
.headliner__credit {
  position: absolute; z-index: 1; right: var(--page-x); bottom: 24px;
  font-size: 11px; letter-spacing: .04em; color: rgba(255,255,255,.55);
}
@keyframes headliner-drift {
  0%   { transform: scale(1)    translate3d(0, 0, 0); }
  100% { transform: scale(1.08) translate3d(-1.5%, -2%, 0); }
}

/* ---- Texte ---- */
.headliner__body {
  display: flex; flex-direction: column; justify-content: center; gap: 18px;
  min-width: 0;
  padding: clamp(64px, 9vw, 128px) var(--page-x);
  /* Halos d'angle, à peine visibles */
  background:
    radial-gradient(60% 45% at 100% 0%, rgba(142, 91, 232, .16), transparent 70%),
    radial-gradient(55% 40% at 0% 100%, rgba(198, 154, 255, .09), transparent 70%),
    radial-gradient(40% 30% at 100% 100%, rgba(232, 89, 60, .06), transparent 70%);
}
.headliner__body > * { width: 100%; max-width: 640px; }
.headliner .eyebrow { color: var(--lavande); }
.headliner__name {
  margin: 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(60px, 8.4vw, 140px); line-height: .86;
  letter-spacing: -0.03em; text-transform: uppercase;
  text-wrap: balance;
}
.headliner.is-revealing .headliner__name,
.headliner.is-revealing .headliner__slot {
  opacity: 0; transform: translateY(.35em); filter: blur(10px);
}
.headliner .headliner__name, .headliner .headliner__slot {
  transition: opacity .9s ease, transform 1.1s cubic-bezier(.2, .8, .2, 1), filter .9s ease;
}
.headliner .headliner__slot { transition-delay: .35s; }
.headliner__meta {
  margin: 0;
  font-weight: 700; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
/* Pastille toujours sur une ligne : sa taille suit la largeur de la colonne
   (unités cqi), de 9 à 13 px ; au pire elle se coupe, sans déborder */
.headliner__body { container-type: inline-size; }
.headliner__slot {
  width: auto; max-width: 100%; align-self: flex-start;
  margin: 0; padding: 7px 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border: 1.5px solid var(--lavande); border-radius: 999px;
  font-weight: 700; font-size: clamp(9px, 3.15cqi, 13px); letter-spacing: .06em; text-transform: uppercase; color: var(--lavande);
}
.headliner__bio {
  margin: 0;
  font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; color: rgba(255,255,255,.86);
  text-wrap: pretty;
}

.headliner__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 44px); align-items: start;
  margin-top: 10px;
}
.headliner__label {
  margin: 0 0 12px;
  font-weight: 700; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
}
.headliner__lives, .headliner__tracks { list-style: none; margin: 0; padding: 0; }
.headliner__lives li {
  display: grid; grid-template-columns: 4.8em 1fr; column-gap: 12px; align-content: center;
  min-height: var(--row); padding: 6px 0; border-top: 1px solid var(--line);
}
.headliner__lives li:last-child, .headliner__tracks li:last-child .track { border-bottom: 1px solid var(--line); }
.headliner__lives time { grid-row: span 2; align-self: center; font-weight: 800; font-size: 14px; color: var(--lavande); }
.headliner__venue { font-weight: 700; font-size: 15px; line-height: 1.25; }
.headliner__city { font-size: 13px; line-height: 1.3; color: var(--muted); }

/* Sons : des liens SoundCloud au départ, des boutons de la radio une fois branchée */
.headliner .track {
  position: relative; width: 100%;
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  min-height: var(--row); padding: 6px 0; border: 0; border-top: 1px solid var(--line);
  background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.headliner .track__icon {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid rgba(255,255,255,.5);
  transition: background-color .2s, border-color .2s;
}
.headliner .track__icon::before {
  content: ""; margin-left: 3px;
  border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
.headliner .track.is-playing .track__icon { background: var(--lavande); border-color: var(--lavande); color: var(--nuit); }
.headliner .track.is-playing .track__icon::before {
  margin: 0; width: 10px; height: 12px; border: 0;
  background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%);
}
.headliner .track:hover .track__icon { border-color: var(--lavande); }
.headliner .track__title { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.headliner .track__time { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--muted); }
.headliner .track.is-active .track__title { color: var(--lavande); }
.headliner .track__bar { position: absolute; left: 50px; right: 0; bottom: 6px; height: 2px; overflow: hidden; }
.headliner .track.is-active .track__bar { background: var(--line); }
.headliner .track__bar > span { display: block; height: 100%; background: var(--lavande); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
.headliner .track:focus-visible { outline: 3px solid var(--lavande); outline-offset: 2px; border-radius: 6px; }

.headliner__links {
  list-style: none; margin: 8px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px;
}
/* Le libellé vient de l'aria-label de la liste : « Écouter sur », « Listen on »… */
.headliner__links::before {
  content: attr(aria-label);
  font-weight: 600; font-size: 12px; letter-spacing: .08em; color: rgba(255,255,255,.4);
}
.headliner__links a {
  display: inline-flex; align-items: center; gap: 4px; min-height: 32px;
  font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; color: rgba(255,255,255,.62); transition: color .2s;
}
.headliner__links a:hover { color: var(--lavande); }
.headliner__links .icon { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
.headliner a:focus-visible { outline: 3px solid var(--lavande); outline-offset: 3px; border-radius: 6px; }

/* ---- Barre de la radio : flottante en bas au centre, barre pleine largeur
   sur mobile ; cachée tant qu'on n'est pas arrivé sur la section ---- */
.radio {
  position: fixed; z-index: 20; left: 50%; bottom: 20px;
  width: min(640px, calc(100% - 2 * var(--page-x))); height: 72px;
  display: block; border: 0; color-scheme: dark;
  transform: translate(-50%, calc(100% + 40px)); opacity: 0; pointer-events: none;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .3s;
}
.radio.is-shown { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
/* Le bas du pied de page reste lisible au-dessus de la barre */
.has-radio .footer { padding-bottom: calc(40px + 104px + env(safe-area-inset-bottom)); }
/* Première vue : son contenu (bouton, prix, flèche) et le bouton son remontent
   de la hauteur de la barre. Un décalage par marge, pour ne pas toucher aux
   positions propres à chaque largeur d'écran dans styles.css. */
.has-radio { --radio-space: 92px; }
.page { transition: padding-bottom .45s cubic-bezier(.2, .8, .2, 1); }
.has-radio .page { padding-bottom: var(--radio-space); }
.has-radio .page .sound { margin-bottom: var(--radio-space); }

/* ---- Écrans moyens : les listes passent l'une sous l'autre ---- */
@media (max-width: 1180px) {
  .headliner__grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ---- Mobile : photo en haut, texte dessous ---- */
@media (max-width: 760px) {
  .headliner { grid-template-columns: 1fr; min-height: 0; }
  .seam--hero + .headliner { padding-top: 4.4vw; }
  .headliner__photo { height: 62svh; min-height: 380px; }
  .headliner__photo::after { background: linear-gradient(rgba(26,16,32,0) 60%, var(--nuit)); }
  .headliner__body { padding: 8px var(--page-x) 72px; gap: 16px; }
  .headliner__name { font-size: clamp(52px, 15vw, 88px); }

  .radio { left: 0; bottom: 0; width: 100%; height: calc(64px + env(safe-area-inset-bottom, 0px)); transform: translateY(100%); }
  .radio.is-shown { transform: none; }
  .has-radio .footer { padding-bottom: calc(40px + 72px + env(safe-area-inset-bottom)); }
  .has-radio { --radio-space: calc(64px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .headliner__photo img, .headliner__ribbon-track { animation: none; }
  .radio { transition: opacity .2s; }
}