/* ===========================================================
   GOOD DAYS AHEAD — IA MUSIC
   Palette et typos issues du branding de l'EP.
   =========================================================== */

:root{
  /* Charte IA MUSIC — planche de branding du label. L'orange est la couleur
     du label, les quatre autres tournent sur les pochettes. */
  --pink:#FF4F91;           /* HOT PINK */
  --orange:#FF4B0A;         /* IA ORANGE */
  --gold:#FFD26A;           /* ambre : hors charte, sert de liant chaud */
  --teal:#85FF22;           /* ACID GREEN */
  --blue:#165DFF;           /* ELECTRIC BLUE */
  --magenta:#8B38FF;        /* DEEP PURPLE */

  --cream:#F3F0EB;          /* OFF WHITE */
  --white:#FFFFFF;
  --black:#090909;          /* DEEP BLACK */
  --coal:#1A1A1A;
  --grey:#9B9B9B;

  --gutter:clamp(1.25rem, 4vw, 4rem);
  --player-h:84px;

  --ease:cubic-bezier(.22,1,.36,1);

  --font-title:"Archivo", "Arial Black", system-ui, sans-serif;
  --font-body:"Space Grotesk", ui-sans-serif, system-ui, sans-serif;
}

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

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--black);
  color:var(--cream);
  font-family:var(--font-body);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  padding-bottom:calc(var(--player-h) + env(safe-area-inset-bottom));
}

body.is-playing{ --player-h:84px; }

img{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

::selection{ background:var(--pink); color:var(--white); }

/* La typo "impact" : Archivo pousse a fond en largeur, facon Monument Extended. */
.t-impact{
  font-family:var(--font-title);
  font-weight:900;
  font-variation-settings:"wdth" 125, "wght" 900;
  letter-spacing:-.01em;
  line-height:.86;
  text-transform:uppercase;
}

.t-mono{
  font-size:.68rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:400;
}

/* ---------- fonds et textures ---------- */

#bg{
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:-2;
  display:block;
  opacity:0;
  transition:opacity 1.2s ease;
}
#bg.ready{ opacity:1; }

/* grain analogique */
.overlay-grain{
  position:fixed; inset:-50%;
  z-index:-1;
  pointer-events:none;
  opacity:.16;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  animation:grain 1.1s steps(4) infinite;
  will-change:transform;
}
@keyframes grain{
  0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-2%)}
  100%{transform:translate(0,0)}
}

/* fines lignes de balayage */
.overlay-scan{
  position:fixed; inset:0;
  z-index:-1; pointer-events:none; opacity:.35;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;
}

/* barre de chargement */
.boot{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:60;
  background:rgba(243,240,235,.08);
}
.boot span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--pink),var(--orange),var(--gold),var(--teal),var(--blue));
  transition:width .4s var(--ease);
}
.boot.done{ opacity:0; transition:opacity .5s .2s ease; }

/* ---------- signature de bas de page ---------- */

.signoff{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:1.6rem;
  padding:clamp(3rem,9vw,7rem) var(--gutter) clamp(2rem,5vw,4rem);
  text-align:center;
}

.badge{ display:inline-block; text-decoration:none; flex:none; }
.badge__ring{
  display:grid; place-items:center;
  width:96px; height:96px; border-radius:50%;
  border:1.5px solid var(--gold);
  color:var(--gold);
  font-family:var(--font-title);
  font-variation-settings:"wdth" 125, "wght" 900;
  font-size:.82rem; line-height:1.15; text-align:center;
  text-transform:uppercase; letter-spacing:-.01em;
  animation:spin 26s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }

.signoff__tag{
  margin:0;
  font-size:clamp(.72rem,1.8vw,.95rem);
  letter-spacing:.24em; line-height:2.1;
  color:var(--cream); text-transform:uppercase;
}

/* ---------- album ---------- */

.album{
  position:relative; z-index:1;
  --accent:var(--gold);                 /* surcharge par album.json */
  border-top:1px solid rgba(243,240,235,.14);
}
.album:last-of-type{ border-bottom:1px solid rgba(243,240,235,.14); }

/* ---------- la bandelette ---------- */

.album__head{ margin:0; }

.album__strip{
  display:flex; align-items:baseline; gap:clamp(.8rem,2vw,1.8rem);
  width:100%;
  padding:clamp(1.1rem,2.6vw,1.9rem) var(--gutter);
  background:none; border:0; color:inherit; font:inherit; text-align:left;
  cursor:pointer; position:relative;
  transition:background .45s var(--ease);
}
.album__strip:hover{ background:rgba(243,240,235,.045); }

/* filet vertical : plein quand l'album est deplie, au survol sinon */
.album__strip::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--accent);
  transform:scaleY(0); transform-origin:top;
  transition:transform .5s var(--ease);
}
.album__strip:hover::before,
.album__strip:focus-visible::before,
.album.is-open .album__strip::before{ transform:scaleY(1); }

.album__strip-title{
  flex:1 1 auto; min-width:0;
  font-size:clamp(1.5rem,4.6vw,3.4rem);
  color:var(--cream);
  transition:color .4s ease;
}
.album.is-open .album__strip-title{ color:var(--accent); }
/* mots en ligne, et non empiles comme dans l'ancien grand titre : une
   bandelette tient sur une ligne. Le debordement masque garde l'animation
   d'entree mot a mot. */
.album__strip-title .word{ display:inline-block; overflow:hidden; vertical-align:bottom; }
.album__strip-title .word > span{ display:block; will-change:transform; }

.album__strip-meta{
  flex:none; display:flex; align-items:center; gap:.7rem;
  color:var(--grey); font-size:clamp(.62rem,1.4vw,.78rem);
}
.album__strip-meta b{ color:var(--accent); font-weight:400; }
.album__strip-meta .dot{
  width:4px; height:4px; border-radius:50%;
  background:var(--accent); opacity:.5;
}

.album__chevron{ flex:none; display:grid; place-items:center; width:34px; height:34px; }
.album__chevron svg{
  width:22px; height:22px;
  fill:none; stroke:var(--cream); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .5s var(--ease), stroke .4s ease;
}
.album.is-open .album__chevron svg{ transform:rotate(180deg); stroke:var(--accent); }

@media (max-width:640px){
  .album__strip{
    display:grid; grid-template-columns:minmax(0,1fr) auto;
    align-items:center; gap:.45rem 1rem;
  }
  .album__strip-title, .album__strip-meta{ grid-column:1; }
  .album__chevron{ grid-column:2; grid-row:1 / span 2; }
}

/* ---------- le panneau ---------- */

/* La ligne de grille passe de 0fr a 1fr : le panneau se deplie a la hauteur
   de son contenu, sans avoir a la mesurer en JavaScript.
   `overflow:clip` et non `hidden` — clip masque le debordement sans creer de
   conteneur de defilement, la pochette collante continue donc de tenir. */
.album__panel{
  display:grid; grid-template-rows:0fr;
  overflow:clip;
  transition:grid-template-rows .6s var(--ease);
}
.album.is-open .album__panel{ grid-template-rows:1fr; }
/* Une fois deplie, plus rien a masquer : on rend le debordement visible.
   `clip` ne sert que pendant l'animation, et le garder emprisonnerait la
   pochette collante du grand ecran dans un conteneur qui rogne. */
.album.is-open.is-settled .album__panel{ overflow:visible; }

/* Le remplissage bas doit se refermer avec le panneau : une ligne de grille a
   `0fr` met la hauteur de contenu a zero, mais laisse le padding en place —
   un album replie garderait sinon une bande vide de 48 px. */
.album__inner{
  min-height:0;
  padding:0 var(--gutter);
  opacity:0;
  transition:opacity .4s ease .06s, padding-bottom .6s var(--ease);
}
.album.is-open .album__inner{
  opacity:1;
  padding-bottom:clamp(3rem,8vw,7rem);
}

@media (prefers-reduced-motion:reduce){
  .album__panel, .album__inner{ transition:none; }
}

.album__kicker{
  display:flex; flex-wrap:wrap; gap:.9rem; align-items:center;
  margin:0 0 1.4rem; color:var(--grey);
}
.album__kicker b{ color:var(--gold); font-weight:400; }
.album__kicker .dot{ width:4px; height:4px; border-radius:50%; background:var(--pink); }

.album__sub{
  margin:0 0 2.2rem;
  max-width:34ch;
  font-size:clamp(.95rem,1.6vw,1.15rem);
  line-height:1.6; color:var(--cream); opacity:.75;
}

.album__grid{
  display:grid; gap:clamp(2rem,5vw,4.5rem);
  grid-template-columns:minmax(0,1fr);
  align-items:start;
}
@media (min-width:900px){
  .album__grid{ grid-template-columns:minmax(320px,42%) minmax(0,1fr); }
}

/* pochette + son shader */
.art{
  position:relative;
  aspect-ratio:1;
  border-radius:2px;
  overflow:hidden;
  background:var(--coal);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9);
  isolation:isolate;
  cursor:pointer;
}
/* la pastille remplace le curseur quand elle est active */
.art.has-cursor{ cursor:none; }
@media (min-width:900px){ .art{ position:sticky; top:clamp(1.5rem,5vh,4rem); } }

.art img, .art canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.art canvas{ opacity:0; transition:opacity .8s ease; }
.art canvas.ready{ opacity:1; }

/* pastille aimantee au curseur pendant le survol de la pochette */
.art__cursor{
  position:absolute; top:0; left:0; z-index:4;
  display:grid; place-content:center; gap:.15rem;
  width:96px; height:96px; margin:-48px 0 0 -48px;
  border-radius:50%;
  background:var(--cream); color:var(--black);
  font-family:var(--font-title);
  font-variation-settings:"wdth" 125, "wght" 900;
  font-size:.68rem; letter-spacing:-.01em; text-align:center;
  text-transform:uppercase;
  opacity:0; transform:scale(0);
  pointer-events:none;
  box-shadow:0 0 0 1px rgba(17,17,17,.25), 0 18px 40px -12px rgba(0,0,0,.8);
}
.art__cursor b{ font-size:1rem; line-height:1; }

.art__cta{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  display:flex; gap:.6rem; padding:1rem;
  opacity:0; transform:translateY(8px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.art:hover .art__cta, .art:focus-within .art__cta{ opacity:1; transform:none; }

.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.72rem 1.15rem; border-radius:999px;
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; font-weight:500;
  border:1.5px solid currentColor;
  transition:transform .3s var(--ease), background .3s, color .3s;
  backdrop-filter:blur(6px);
}
.btn:hover{ transform:translateY(-2px); }
.btn--pink{ background:var(--pink); color:var(--white); border-color:var(--pink); }
.btn--pink:hover{ background:var(--magenta); border-color:var(--magenta); }
.btn--ghost{ color:var(--cream); background:rgba(17,17,17,.55); }
.btn--ghost:hover{ background:var(--cream); color:var(--black); }

/* ---------- liste des titres ---------- */

.tracks{ list-style:none; margin:0; padding:0; }

.track{
  position:relative;
  display:grid;
  grid-template-columns:2.6rem minmax(0,1fr) auto 2rem;
  align-items:center; gap:1rem;
  padding:1.05rem .9rem;
  border-top:1px solid rgba(243,240,235,.12);
  transition:color .3s, background .4s;
  will-change:transform;
}
.tracks .track:last-child{ border-bottom:1px solid rgba(243,240,235,.12); }

/* le trait de couleur qui balaye la ligne au survol */
.track::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(255,0,134,.22), rgba(255,158,0,.14) 45%, transparent 80%);
  transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--ease);
}
.track:hover::before{ transform:scaleX(1); }
.track:hover .track__title{ color:var(--white); }

.track__n{
  font-size:.72rem; letter-spacing:.12em; color:var(--grey);
  font-variant-numeric:tabular-nums;
}
.track__title{
  display:block; text-align:left; padding:0; cursor:pointer;
  font-family:var(--font-title);
  font-variation-settings:"wdth" 112, "wght" 700;
  font-size:clamp(1.05rem,2.4vw,1.6rem);
  text-transform:uppercase; letter-spacing:-.005em;
  transition:color .3s;
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.track__time{ font-size:.78rem; color:var(--grey); font-variant-numeric:tabular-nums; }

/* bouton de partage : le lien pointe directement sur le titre */
.track__share{
  display:grid; place-items:center; width:2rem; height:2rem; border-radius:50%;
  color:var(--grey); opacity:0;
  transition:opacity .3s, color .3s, transform .3s var(--ease);
}
.track__share svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; }
.track:hover .track__share{ opacity:1; }
.track__share:focus-visible{ opacity:1; }
.track__share:hover{ color:var(--gold); transform:translateY(-2px) rotate(8deg); }

/* Sur écran tactile il n'y a pas de survol : sans ça le bouton de partage
   reste invisible tout en occupant sa place. */
@media (hover:none){
  .track__share{ opacity:.5; }
}

/* Les titres longs — « GOLDEN HOUR (HORA FELIZ) » — passent à la ligne
   plutôt que d'être coupés au milieu. */
@media (max-width:600px){
  .track{ grid-template-columns:2.2rem minmax(0,1fr) auto 1.8rem; gap:.6rem; }
  .track__title{ white-space:normal; overflow:visible; text-overflow:clip; line-height:1.1; }
}

/* fine ligne de progression sous la ligne en cours de lecture */
.track__line{
  position:absolute; left:0; bottom:-1px; height:2px; width:var(--p,0%);
  background:linear-gradient(90deg,var(--pink),var(--orange),var(--gold));
  opacity:0; transition:opacity .3s;
}
.track.is-current .track__line{ opacity:1; }

.track.is-current{ color:var(--gold); }
.track.is-current .track__title{ color:var(--gold); }
.track.is-current .track__n{ color:var(--pink); }
.track.is-current::before{ transform:scaleX(1); opacity:.6; }

/* egaliseur anime a la place du numero quand ca joue */
.track__eq{
  display:none; align-items:flex-end; gap:2px; height:14px;
}
.track.is-playing .track__eq{ display:flex; }
.track.is-playing .track__num{ display:none; }
.track__eq i{
  width:2.5px; background:var(--pink); border-radius:1px;
  animation:eq .9s ease-in-out infinite;
}
.track__eq i:nth-child(1){ height:40%; animation-delay:-.2s; background:var(--pink); }
.track__eq i:nth-child(2){ height:100%; animation-delay:-.5s; background:var(--orange); }
.track__eq i:nth-child(3){ height:65%; animation-delay:-.8s; background:var(--teal); }
@keyframes eq{ 0%,100%{ transform:scaleY(.35) } 50%{ transform:scaleY(1) } }

/* Version d'un morceau : rattachée à la ligne du dessus, un cran en retrait
   et sans bordure, pour qu'elle ne se lise pas comme une piste à part. */
.track--version{ border-top:0; padding-top:.45rem; margin-top:-.5rem; }
.track--version .track__title{ font-size:clamp(.9rem,1.8vw,1.15rem); opacity:.9; }
.track__num--version{ color:var(--gold); font-size:1rem; line-height:1; }

/* titres pas encore sortis */
.track--soon{ cursor:default; opacity:.4; }
.track--soon::before{ display:none; }
.track--soon .track__title{ color:var(--grey); }
.track--soon:hover .track__title{ color:var(--grey); }
.track__soon{
  font-family:var(--font-title);
  font-variation-settings:"wdth" 125, "wght" 900;
  font-size:.6rem; color:var(--gold);
  text-transform:uppercase; letter-spacing:.06em;
}

/* ---------- pied de page ---------- */

.footer{
  position:relative; z-index:1;
  padding:clamp(3rem,8vw,7rem) var(--gutter) 3rem;
  border-top:1px solid rgba(243,240,235,.1);
  text-align:center;
}
.footer__mark{
  margin:0 0 1rem;
  font-family:var(--font-title);
  font-variation-settings:"wdth" 125, "wght" 900;
  font-size:clamp(1.6rem,8vw,5rem);
  text-transform:uppercase; line-height:.9;
  color:transparent;
  -webkit-text-stroke:1px rgba(243,240,235,.28);
}
.footer__meta{ margin:0; font-size:.66rem; letter-spacing:.2em; color:var(--grey); text-transform:uppercase; }

/* ---------- lecteur ---------- */

.player{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  height:var(--player-h);
  display:grid; align-items:center; gap:1rem;
  grid-template-columns:auto minmax(120px,17%) auto minmax(0,1fr) auto;
  grid-template-areas:"art now ctl seek vol";
  padding:0 clamp(.8rem,3vw,1.6rem) env(safe-area-inset-bottom);
  background:rgba(17,17,17,.82);
  backdrop-filter:blur(18px) saturate(1.3);
  border-top:1px solid rgba(243,240,235,.14);
  transform:translateY(110%);
}
.player[hidden]{ display:none; }

/* liseré de couleur en haut du lecteur */
.player::before{
  content:""; position:absolute; top:-1px; left:0; right:0; height:1px;
  background:linear-gradient(90deg,var(--pink),var(--orange),var(--gold),var(--teal),var(--blue),var(--magenta));
  opacity:.9;
}

.player__art{ grid-area:art; width:56px; height:56px; border-radius:2px; overflow:hidden; flex:none; }
.player__art img{ width:100%; height:100%; object-fit:cover; }

.player__now{ grid-area:now; min-width:0; }
.player__title{
  margin:0; font-family:var(--font-title);
  font-variation-settings:"wdth" 108, "wght" 700;
  font-size:.95rem; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.player__album{
  margin:.15rem 0 0; font-size:.62rem; letter-spacing:.16em;
  color:var(--grey); text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.player__controls{ grid-area:ctl; display:flex; align-items:center; gap:.35rem; }
.ctl{
  display:grid; place-items:center;
  width:38px; height:38px; border-radius:50%;
  transition:transform .25s var(--ease), background .25s, color .25s;
}
.ctl svg{ width:19px; height:19px; fill:currentColor; stroke:currentColor; stroke-width:0; }
.ctl:hover{ transform:scale(1.12); color:var(--gold); }
.ctl--main{ width:46px; height:46px; background:var(--cream); color:var(--black); }
.ctl--main:hover{ background:var(--pink); color:var(--white); }
.ctl--sm{ width:32px; height:32px; }
.ctl--sm svg{ width:16px; height:16px; fill:none; stroke-width:1.6; }

.i-pause{ display:none; }
body.is-playing .i-play{ display:none; }
body.is-playing .i-pause{ display:block; }

.player__seek{ grid-area:seek; display:flex; align-items:center; gap:.7rem; min-width:0; }
.player__seek .t{ font-size:.66rem; color:var(--grey); font-variant-numeric:tabular-nums; flex:none; }

/* timeline : la forme d'onde du morceau, cliquable */
.bar{
  position:relative; flex:1; height:38px; min-width:80px;
  cursor:pointer; touch-action:none;
}
.bar canvas{ width:100%; height:100%; display:block; }

.bar__hover{
  position:absolute; top:-1.35rem; left:50%; transform:translateX(-50%);
  font-size:.6rem; letter-spacing:.1em; color:var(--gold);
  font-variant-numeric:tabular-nums;
  opacity:0; transition:opacity .2s; pointer-events:none;
}
.bar:hover .bar__hover{ opacity:1; }

.ctl.is-off{ color:var(--pink); }

/* petite confirmation "Lien copié" */
#toast{
  position:fixed; left:50%; bottom:calc(var(--player-h) + 1.2rem);
  transform:translate(-50%,12px); z-index:60;
  padding:.6rem 1.1rem; border-radius:999px;
  background:var(--cream); color:var(--black);
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  opacity:0; pointer-events:none;
  transition:opacity .3s, transform .3s var(--ease);
}
#toast.show{ opacity:1; transform:translate(-50%,0); }

.player__vol{ grid-area:vol; display:flex; align-items:center; gap:.4rem; }
#vol{
  width:82px; height:3px; appearance:none; border-radius:2px;
  background:rgba(243,240,235,.18); cursor:pointer;
}
#vol::-webkit-slider-thumb{
  appearance:none; width:11px; height:11px; border-radius:50%; background:var(--cream);
}
#vol::-moz-range-thumb{ width:11px; height:11px; border:0; border-radius:50%; background:var(--cream); }

/* mise en page du lecteur sur petits ecrans */
@media (max-width:860px){
  :root{ --player-h:120px; }
  .player{
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"art now ctl" "seek seek seek";
    row-gap:.2rem; align-content:center;
  }
  .player__art{ grid-area:art; width:44px; height:44px; }
  .player__now{ grid-area:now; }
  .player__controls{ grid-area:ctl; }
  .player__seek{ grid-area:seek; }
  .player__vol{ display:none; }
}

:where(a,button,input,[tabindex]):focus-visible{
  outline:2px solid var(--gold); outline-offset:3px; border-radius:2px;
}

/* Mode sobre : on coupe ce qui bouge tout seul en boucle, on garde les
   transitions declenchees par l'utilisateur (survol, focus) — sinon
   l'interface ne repond plus a rien. */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .overlay-grain{ animation:none; }
  .badge__ring{ animation:none; }
  .track__eq i{ animation:none; transform:scaleY(.7); }
}