/* =========================================
   Album page (namespaced) — /assets/css/album.css
   - Zéro override global
   - .ap- uniquement
   ========================================= */

/* Base */
.ap-body{background:var(--bg-color); color:var(--ink);
  font-family:'Lato',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif; line-height:1.65;}
.ap-header{position:sticky; top:0; z-index:60; padding:1rem 1rem 1.2rem;
  background:linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.12));
  backdrop-filter:saturate(1.1) blur(8px); border-bottom:1px solid rgba(255,255,255,.06);}
.ap-back{color:var(--muted); text-decoration:none;}
.ap-page-title{font-family:'Playfair Display',serif; font-size:clamp(2.2rem,5vw,3.4rem);
  margin:.3rem 0 0; letter-spacing:.3px; color:var(--ink); text-shadow:0 10px 30px rgba(0,0,0,.45);}

/* -----------------------------------------
   HERO (blur + overlay + Ken Burns subtil)
   ----------------------------------------- */
.ap-hero{position:relative; min-height:56vh; border-bottom:1px solid rgba(255,255,255,.06); overflow:hidden;}
.ap-hero::before{
  content:''; position:absolute; inset:0;
  background-image:var(--ap-hero-img); background-size:110% 110%; background-position:center;
  filter:blur(6px) contrast(.95) saturate(1.05);
  transform:scale(1.06);
  animation:ap-kenburns 14s ease-in-out infinite alternate;
}
.ap-hero::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.58), rgba(0,0,0,.58));
}
@keyframes ap-kenburns{
  0%{background-position:48% 52%; transform:scale(1.06);}
  100%{background-position:52% 48%; transform:scale(1.12);}
}

/* --- HERO en zones alignées (centre smartlinks sur la cover) --- */
.ap-hero-inner{
  position:relative; z-index:1;
  max-width:var(--max); margin:0 auto;
  padding:calc(var(--header) * .4) var(--g) .6rem;

  display:grid;
  grid-template-columns:560px 1fr;
  grid-template-rows:auto auto auto;             /* title, cover, intro (gauche) */
  grid-template-areas:
    "title smart"
    "cover smart"
    "intro smart";
  gap:32px;
}
.ap-hero-fade{position:absolute; left:0; right:0; bottom:-28px; height:44px;
  background:linear-gradient(180deg, rgba(0,0,0,0), rgba(15,15,16,1)); filter:saturate(1.1);}

/* Colonne gauche */
.ap-hero-left{position:relative; padding:14px 0 28px;}
.ap-title-block{grid-area:title; margin-bottom:.6rem;}
.ap-album-title{font-family:'Playfair Display',serif; font-size:clamp(1.8rem,4vw,2.6rem);
  margin:0; color:var(--h2-color); text-shadow:0 4px 22px rgba(201,168,106,.22);
  letter-spacing:.3px; filter:drop-shadow(0 2px 10px rgba(0,0,0,.35));}
.ap-artist{margin:.25rem 0 1rem; color:var(--muted); font-size:1rem; opacity:.9;}
.ap-cover-card{grid-area:cover; align-self:center; width:360px; aspect-ratio:1/1;
  border-radius:14px; overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06);}
.ap-cover{width:100%; height:100%; object-fit:cover; display:block;}
.ap-intro{grid-area:intro; max-width:520px; margin:.9rem 0 0;}

/* Colonne droite : smartlinks centrés verticalement */
.ap-smartlinks{grid-area:smart; align-self:center; padding:10px 0;}
.ap-cta-list{list-style:none; margin:0; padding:0; display:grid; gap:.5rem;}
.ap-cta{
  --ap-ring:rgba(255,255,255,.14);
  display:flex; align-items:center; gap:10px;
  padding:.68rem .85rem; text-decoration:none; border-radius:12px; border:1px solid var(--ap-ring);
  background:rgba(15,15,16,.55); color:var(--ink); backdrop-filter:blur(8px) saturate(1.2);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
  max-width:380px;
}
.ap-cta:hover{transform:translateY(-2px); box-shadow:0 8px 28px rgba(0,0,0,.3); border-color:rgba(255,255,255,.22); background:rgba(15,15,16,.65);}
.ap-ico{width:20px; height:20px; opacity:.95; flex:0 0 auto;}
.ap-label{font-weight:700; letter-spacing:.25px;}
.ap-chip{margin-left:auto; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  height:26px; padding:0 .7rem; border-radius:999px; background:var(--gold); color:#1a120c; font-weight:800; font-size:.84rem;}

/* Accents par service */
.ap-spotify{background:linear-gradient(90deg, rgba(30,215,96,.18), rgba(15,15,16,.55));}
.ap-apple{background:linear-gradient(90deg, rgba(255,255,255,.12), rgba(15,15,16,.55));}
.ap-deezer{background:linear-gradient(90deg, rgba(0,204,255,.18), rgba(15,15,16,.55));}
.ap-youtube{background:linear-gradient(90deg, rgba(255,0,0,.18), rgba(15,15,16,.55));}
.ap-amazon{background:linear-gradient(90deg, rgba(255,153,0,.20), rgba(15,15,16,.55));}
.ap-tidal{background:linear-gradient(90deg, rgba(0,220,255,.18), rgba(15,15,16,.55));}
.ap-soundcloud{background:linear-gradient(90deg, rgba(255,102,0,.20), rgba(15,15,16,.55));}

/* -----------------------------------------
   TRACKLIST + paroles inline
   ----------------------------------------- */
.ap-tracks{max-width:var(--max); margin:0 auto 3rem; padding:0 var(--g); transform:translateY(-18px);}
.ap-tracks-header{display:flex; align-items:center; justify-content:space-between; margin:1.2rem 0 .6rem;}
.ap-tracks-h3{margin:0; font-size:1.6rem; color:var(--h2-color); font-family:'Playfair Display',serif;}
.ap-btn{appearance:none; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04); color:var(--ink);
  border-radius:999px; padding:.42rem .75rem; cursor:pointer; font-size:.9rem;}
.ap-btn:hover{box-shadow:0 6px 20px rgba(0,0,0,.25); transform:translateY(-1px);}
.ap-tracklist{list-style:none; padding:0; margin:0; border:1px solid rgba(255,255,255,.08); border-radius:12px; overflow:hidden; background:rgba(255,255,255,.02);}
.ap-track{border-bottom:1px dashed rgba(255,255,255,.1);}
.ap-track:last-child{border-bottom:none;}
.ap-track-row{
  width:100%; display:grid; grid-template-columns:auto 1fr auto; gap:.9rem; align-items:center;
  padding:.82rem .95rem; appearance:none; background:transparent; border:none; text-align:left; font:inherit; color:inherit; cursor:pointer;
  transition:background .2s ease, transform .15s ease;
}
.ap-track-row:hover{background:rgba(255,255,255,.04);}
.ap-track-row[aria-expanded='true']{background:linear-gradient(0deg, rgba(201,168,106,.12), rgba(201,168,106,.06));}
.ap-num{font-family:'Playfair Display',serif; color:var(--gold); min-width:2ch;}
.ap-name{font-weight:700;}
.ap-time{color:var(--muted); font-variant-numeric:tabular-nums;}
.ap-lyrics{padding:0 .95rem .9rem; background:linear-gradient(180deg, rgba(255,255,255,.03), transparent);}
.ap-lyrics-inner{border-left:2px solid var(--gold); margin-left:.15rem; padding:.55rem 0 .2rem .85rem; color:var(--ink); opacity:.95;}
.ap-lyrics p{margin:.5rem 0;}

/* -----------------------------------------
   Footer local (si utilisé)
   ----------------------------------------- */
.ap-footer{text-align:center; color:var(--muted); padding:3rem 1rem 4rem;}

/* -----------------------------------------
   Responsive
   ----------------------------------------- */
@media (max-width:1100px){
  .ap-hero-inner{grid-template-columns:520px 1fr;}
  .ap-cover-card{width:340px;}
}
@media (max-width:900px){
  .ap-hero-inner{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto auto;
    grid-template-areas:
      "title"
      "cover"
      "intro"
      "smart";
    gap:20px;
  }
  .ap-cover-card{width:260px;}
  .ap-smartlinks{align-self:initial;}
  .ap-smartlinks .ap-cta{max-width:100%;}
}