/* ── Fonts ────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ── Design Tokens ─────────────────────────────────────────────────────────── */
:root {
  --bg:      #080710;
  --bg2:     #0D0C18;
  --card:    #13111E;
  --card2:   #1A1828;
  --accent:  #C9A84C;
  --accent2: #E8D090;
  --ar: 201; --ag: 168; --ab: 76;
  --text:    #F0EAE0;
  --text2:   #BDB5A8;
  --muted:   #908A84;
  --border:  #28241E;
  --border2: #352F28;
  --danger:  #D06060;
  --success: #70A880;
  --mesh:
    radial-gradient(ellipse 75% 55% at 12% 38%, rgba(110,45,180,0.38) 0%, transparent 58%),
    radial-gradient(ellipse 55% 45% at 88% 18%, rgba(175,80,40,0.28) 0%, transparent 55%),
    radial-gradient(ellipse 65% 60% at 55% 92%, rgba(75,25,145,0.22) 0%, transparent 58%),
    #080710;
  --nav-height:    68px;
  --player-height: 72px;
}

/* ── Album II — Blanc cassé / Diamant ──────────────────────────────────────── */
/* body = fond blanc + orbes masqués (navbar et player gardent leur thème sombre) */
body.album-ii-page { background: #000000 !important; }
body.album-ii-page .bg-scene,
body.album-ii-page .bgo { display: none !important; }
body.album-ii-page .page-album2,
body.album-ii-page .a2-hero,
body.album-ii-page .a2-ticker,
body.album-ii-page .a2-prologue,
body.album-ii-page .a2-climb,
body.album-ii-page .a2-summit { background-color: #e6e2e2 !important; }

/* Variables scoped à .page-album2 uniquement (navbar et player non affectés) */
.page-album2 {
  --bg:    #EDE8E0;
  --bg2:   #E6E0D8;
  --card:  #EBE8E2;
  --card2: #E4E0DA;
  --accent:  #6A6A70;
  --accent2: #AAAAB0;
  --ar: 106; --ag: 106; --ab: 112;
  --text:    #1C1A18;
  --text2:   #4A4842;
  --muted:   #68625E;
  --border:  #D8D4CE;
  --border2: #C8C4BE;
}
/* Hero : supprimer image floue et vignette sombre → fond blanc pur */
.page-album2 .a2-hero-blur { display: none; }
.page-album2 .a2-hero-vignette { display: none; }
.page-album2 .a2-grid-vline { background: rgba(0,0,0,.05); }
.page-album2 .a2-grid-hline { background: rgba(0,0,0,.04); }
.page-album2 .a2-hero-cover { border-color: rgba(0,0,0,.12); box-shadow: 0 16px 48px rgba(0,0,0,.18); }
/* Titre plus bas + gradient diamant noir → argent → argent clair → argent → noir */
.page-album2 .a2-hero-inner { padding-top: clamp(5rem, 10vh, 12rem); }
.page-album2 .a2-big-title {
  background-image: linear-gradient(108deg, var(--text) 0%, var(--text) 38%, #707076 46%, #C8C8CE 52%, #707076 58%, var(--text) 66%, var(--text) 100%);
}
/* Boutons hero sur fond clair */
.page-album2 .a2-btn-solid { background: var(--text); color: var(--bg); }
.page-album2 .a2-btn-solid:hover { background: #3A3836; box-shadow: 0 8px 28px rgba(0,0,0,.22); }
/* Gauge fond clair */
.page-album2 .a2-climb-rail { background: rgba(0,0,0,.1); }
/* Section sommet : annuler le fond ivoire pour garder l'image dramatique */
body.album-ii-page .a2-summit { background-color: transparent !important; }
/* Titre sommet : même style que le grand titre du hero (uppercase + gradient diamant clair) */
body.album-ii-page .a2-summit-title {
  text-transform: uppercase;
  letter-spacing: -3px;
  line-height: .88;
  font-size: clamp(2rem, 4vw, 4rem);
  background-image: linear-gradient(108deg, #F0EAE0 0%, #F0EAE0 38%, #B8B8BE 46%, #FFFFFF 52%, #B8B8BE 58%, #F0EAE0 66%, #F0EAE0 100%);
  background-size: 300% 100%;
  background-position: 200% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: a1TitleShine 8s ease-in-out 2.5s infinite;
}

/* ── Reset ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', system-ui, sans-serif;
  min-height: 100vh;
  line-height: 1.6;
  overflow-x: hidden;
}
body::before {
  content: '';
  position: fixed; inset: 0;
  background: var(--mesh);
  z-index: -2; pointer-events: none;
}
body::after {
  content: '';
  position: fixed; inset: 0;
  z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: .028;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; object-fit: cover; }
button, input, textarea, select { font-family: inherit; font-size: inherit; }
button { cursor: pointer; border: none; background: none; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(201,168,76,.4); border-radius: 3px; }

/* ── Navbar ────────────────────────────────────────────────────────────────── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-height);
  z-index: 900;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(20px) saturate(1.6);
  border-bottom: 1px solid rgba(255,255,255,.055);
}
.nav-container {
  max-width: 1400px; margin: 0 auto;
  padding: 0 2.5rem; height: 100%;
  display: flex; align-items: center; gap: 2.5rem;
}
.nav-logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem; font-style: italic; font-weight: 600;
  letter-spacing: .5px; flex-shrink: 0;
  background-image: linear-gradient(100deg,
    rgba(201,168,76,.95) 0%,  rgba(201,168,76,.95) 36%,
    #E8D090 47%, #fff7e2 51%, #E8D090 55%,
    rgba(201,168,76,.95) 66%, rgba(201,168,76,.95) 100%);
  background-size: 240% 100%; background-position: 140% 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: txtShine 6.5s ease-in-out infinite;
}
.nav-links {
  display: flex; list-style: none; gap: .15rem; flex: 1;
}
.nav-links a {
  padding: .32rem .9rem; border-radius: 4px;
  font-size: .83rem; color: var(--text2); letter-spacing: .2px;
  transition: all .18s;
}
.nav-links a:hover { background: rgba(201,168,76,.1); color: var(--text); }
.nav-auth { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.nav-user { display: flex; align-items: center; gap: .75rem; }
.nav-username { font-size: .8rem; color: var(--text2); }
.btn-nav {
  padding: .32rem 1rem; border-radius: 4px;
  font-size: .8rem; font-weight: 500; letter-spacing: .3px;
  transition: all .18s; cursor: pointer;
  background: rgba(201,168,76,.18); color: var(--accent);
  border: 1px solid rgba(201,168,76,.25);
}
.btn-nav:hover { background: rgba(201,168,76,.28); color: var(--accent2); }
.btn-nav-outline {
  background: transparent; color: var(--text2);
  border: 1px solid rgba(255,255,255,.08);
}
.btn-nav-outline:hover { border-color: rgba(201,168,76,.35); color: var(--text); }

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn-gold, .hp-btn-cta {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .72rem 1.8rem; background: var(--accent);
  color: #0a0808; font-weight: 700; border-radius: 3px;
  font-size: .88rem; letter-spacing: .4px;
  transition: all .22s; border: none; cursor: pointer;
}
.btn-gold:hover, .hp-btn-cta:hover {
  background: var(--accent2); color: #0a0808;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(201,168,76,.35);
}
.btn-outline, .hp-btn-outline {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .68rem 1.6rem; border: 1px solid rgba(255,255,255,.14);
  color: var(--text2); border-radius: 3px; font-size: .85rem;
  transition: all .2s;
}
.btn-outline:hover, .hp-btn-outline:hover {
  border-color: rgba(201,168,76,.45); color: var(--text);
}
.btn-primary {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .58rem 1.3rem; background: var(--accent);
  color: #0a0808; border: none; border-radius: 3px;
  font-size: .85rem; font-weight: 700; cursor: pointer;
  transition: all .2s;
}
.btn-primary:hover { background: var(--accent2); }
.btn-full { width: 100%; justify-content: center; }

/* ── Alerts ────────────────────────────────────────────────────────────────── */
.alert {
  padding: .6rem .9rem; border-radius: 2px;
  font-size: .82rem; margin-bottom: 1rem; border-left: 2px solid;
}
.alert-error   { background: rgba(208,96,96,.08);   border-color: var(--danger);  color: var(--danger);  }
.alert-success { background: rgba(112,168,128,.08); border-color: var(--success); color: var(--success); }
.alert-info    { background: rgba(201,168,76,.08);  border-color: var(--accent);  color: var(--accent);  }

/* ── Gold Shimmer ──────────────────────────────────────────────────────────── */
.txt-shine {
  background-image: linear-gradient(100deg,
    rgba(201,168,76,.95) 0%,  rgba(201,168,76,.95) 36%,
    #E8D090 47%, #fff7e2 51%, #E8D090 55%,
    rgba(201,168,76,.95) 66%, rgba(201,168,76,.95) 100%);
  background-size: 240% 100%; background-position: 140% 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .txt-shine { animation: txtShine 6.5s ease-in-out infinite; }
}
@keyframes txtShine {
  0%        { background-position: 140%  0; }
  58%, 100% { background-position: -140% 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   HOME PAGE
══════════════════════════════════════════════════════════════════════════ */

/* ── Hero ──────────────────────────────────────────────────────────────────── */
.hp-hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center;
  overflow: hidden; padding: 0 2.5rem;
}
.hp-orbs { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hp-orb   { position: absolute; border-radius: 50%; filter: blur(80px); }
.hp-orb-1 {
  width: 640px; height: 640px;
  background: radial-gradient(circle, rgba(110,45,180,.38) 0%, transparent 68%);
  top: -180px; left: -120px;
  animation: hp-orb1 13s ease-in-out infinite alternate;
}
.hp-orb-2 {
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(175,80,40,.28) 0%, transparent 68%);
  bottom: -100px; right: -100px;
  animation: hp-orb2 17s ease-in-out infinite alternate;
}
.hp-orb-3 {
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(75,25,145,.22) 0%, transparent 68%);
  top: 40%; right: 10%;
  animation: hp-orb3 11s ease-in-out infinite alternate;
}
@keyframes hp-orb1 { to { transform: translate(55px, 35px)  scale(1.12); } }
@keyframes hp-orb2 { to { transform: translate(-45px,-55px) scale(1.09); } }
@keyframes hp-orb3 { to { transform: translate(-35px, 45px) scale(1.14); } }

.hp-hero-inner {
  position: relative; z-index: 2;
  max-width: 1400px; margin: 0 auto; width: 100%;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6rem; align-items: center;
  padding: calc(var(--nav-height) + 4rem) 0 6rem;
}

/* Text column */
.hp-text-col {}
.hp-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .28rem .85rem; border-radius: 99px;
  border: 1px solid rgba(201,168,76,.35);
  background: rgba(201,168,76,.08);
  font-size: .72rem; color: var(--accent);
  letter-spacing: 1px; margin-bottom: 1.8rem;
}
.hp-badge-dot {
  width: 7px; height: 7px; background: var(--accent);
  border-radius: 50%; animation: hp-blink 2.2s ease-in-out infinite;
}
@keyframes hp-blink { 0%,100% { opacity:1; } 50% { opacity:.3; } }

.hp-eyebrow { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.4rem; }
.hp-eyebrow-line  { width: 32px; height: 1px; background: var(--accent); opacity: .7; }
.hp-eyebrow-text  { font-size: .68rem; letter-spacing: 3.5px; text-transform: uppercase; color: var(--accent); font-weight: 500; }

.hp-hero-h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(3.2rem, 6.5vw, 6rem);
  font-weight: 600; line-height: .95; margin-bottom: 1.5rem;
  display: flex; flex-direction: column;
}
.hp-h1-eyebrow {
  font-size: 1.1rem; font-style: normal; font-weight: 300;
  letter-spacing: 4px; text-transform: uppercase;
  color: var(--text2); margin-bottom: .5rem;
  font-family: 'DM Sans', sans-serif;
}
.hp-h1-fill   { font-style: italic; color: var(--accent); }
.hp-h1-stroke {
  font-weight: 800;
  background-image: linear-gradient(110deg,
    #6e6e6e 0%, #a8a8a8 18%, #d4d4d4 32%,
    #f0f0f0 42%, #ffffff 50%, #f0f0f0 58%,
    #d4d4d4 68%, #a8a8a8 82%, #6e6e6e 100%);
  background-size: 250% 100%;
  background-position: 200% 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: silverShine 5s ease-in-out infinite;
}
@media (prefers-reduced-motion: no-preference) {
  .hp-h1-stroke { animation: silverShine 5s ease-in-out infinite; }
}
@keyframes silverShine {
  0%        { background-position: 200%  0; }
  55%, 100% { background-position: -200% 0; }
}

.hp-hero-sub {
  font-size: 1rem; color: var(--text2); line-height: 1.75;
  max-width: 420px; margin-bottom: 2.5rem;
}
.hp-hero-btns {
  display: flex; gap: 1rem; align-items: center;
  flex-wrap: wrap; margin-bottom: 3rem;
}
.hp-btn-icon {
  width: 24px; height: 24px; background: rgba(10,8,8,.2);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.hp-hero-stats { display: flex; gap: 2.5rem; }
.hp-stat       { border-left: 1px solid rgba(201,168,76,.3); padding-left: 1rem; }
.hp-stat b {
  display: block; font-family: 'Cormorant Garamond', serif;
  font-size: 2rem; font-style: italic; color: var(--accent); line-height: 1;
}
.hp-stat span { font-size: .68rem; text-transform: uppercase; letter-spacing: 2px; color: var(--muted); }
.hp-stat-line { display: none; }

/* Cover stack column */
.hp-covers-col {
  position: relative; display: flex;
  align-items: center; justify-content: center;
}
.hp-cover-stack { position: relative; width: 360px; height: 360px; }
.hp-cover-back {
  position: absolute; top: 24px; left: 24px; right: -24px; bottom: -24px;
  border-radius: 4px; overflow: hidden; opacity: .4; filter: blur(2px);
}
.hp-cover-back img { width: 100%; height: 100%; }
.hp-cover-main {
  position: absolute; inset: 0; border-radius: 4px; overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,.65);
  border: 1px solid rgba(255,255,255,.08);
  transition: transform .4s ease; cursor: pointer;
}
.hp-cover-main img { width: 100%; height: 100%; transition: transform .6s ease; }
.hp-cover-main:hover img { transform: scale(1.04); }
.hp-cover-badge {
  position: absolute; bottom: -18px; right: -18px;
  width: 90px; height: 90px; border-radius: 50%;
  background: var(--card); border: 3px solid var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: .75rem; color: var(--accent); text-align: center;
  line-height: 1.3; box-shadow: 0 8px 24px rgba(0,0,0,.5); cursor: pointer;
  z-index: 10;
}

/* ── Flip card (hero cover) ────────────────────────────────────────────────── */
.hp-cover-flip {
  position: absolute; inset: 0;
  border-radius: 4px;
  cursor: pointer;
  perspective: 1200px;
}
.hp-cover-flip .hp-flip-inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .75s cubic-bezier(.4,0,.2,1);
  border-radius: 4px;
}
.hp-cover-flip.flipped .hp-flip-inner { transform: rotateY(180deg); }
.hp-flip-front, .hp-flip-back {
  position: absolute; inset: 0;
  border-radius: 4px; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,.65);
  border: 1px solid rgba(255,255,255,.08);
}
.hp-flip-front img, .hp-flip-back img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.hp-flip-back { transform: rotateY(180deg); }
.hp-flip-link {
  position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: .4rem;
  padding: .5rem 1.2rem; border-radius: 2rem;
  background: rgba(0,0,0,.65); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.15);
  color: #fff; font-size: .78rem; letter-spacing: .5px;
  white-space: nowrap; text-decoration: none;
  transition: background .2s, border-color .2s;
}
.hp-flip-link:hover { background: var(--accent); border-color: var(--accent); color: #000; }
.hp-flip-hint {
  position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: .4rem;
  font-size: .7rem; color: rgba(255,255,255,.45); white-space: nowrap;
  pointer-events: none; letter-spacing: .5px;
  opacity: 1; transition: opacity .3s;
}
.hp-cover-flip.flipped .hp-flip-hint { opacity: 0; }

.hp-scroll-down {
  position: absolute; bottom: 2.5rem; left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.3); animation: bob 2.5s ease-in-out infinite;
  display: flex; align-items: center; justify-content: center;
}
.hp-scroll-down:hover { color: var(--accent); }
@keyframes bob {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(8px); }
}

/* ── Albums section ────────────────────────────────────────────────────────── */
.hp-albums { padding: 6rem 2.5rem; }
.hp-albums-inner { max-width: 1400px; margin: 0 auto; }

.hp-sec-head {
  display: flex; flex-direction: column;
  margin-bottom: 3rem; padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}
.hp-sec-tag {
  font-size: .65rem; letter-spacing: 3px;
  text-transform: uppercase; color: var(--accent); margin-bottom: .5rem;
}
.hp-sec-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 700; color: var(--text);
}
.hp-sec-bar { display: none; }

.hp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
}
.hp-card {
  display: flex; gap: 1.75rem; align-items: center;
  padding: 1.5rem; background: rgba(255,255,255,.028);
  border: 1px solid var(--border); border-radius: 4px;
  transition: all .28s; cursor: pointer; color: var(--text);
}
.hp-card:hover {
  background: rgba(255,255,255,.05);
  border-color: rgba(201,168,76,.3);
  transform: translateX(6px); color: var(--text);
}
.hp-card:hover .hp-card-img-wrap img { transform: scale(1.06); }
.hp-card-img-wrap {
  flex-shrink: 0; width: 100px; height: 100px;
  border-radius: 3px; overflow: hidden; background: var(--card);
  position: relative;
}
.hp-card-img-wrap img { width: 100%; height: 100%; transition: transform .45s ease; }
.hp-card-shade {
  position: absolute; inset: 0; background: rgba(0,0,0,.2);
  opacity: 0; transition: opacity .2s;
}
.hp-card:hover .hp-card-shade { opacity: 1; }
.hp-card-hover-layer {
  position: absolute; inset: 0; display: flex;
  flex-direction: column; align-items: center; justify-content: center;
  gap: .3rem; opacity: 0; transition: opacity .2s;
  color: #fff; font-size: .6rem; text-transform: uppercase; letter-spacing: 1px;
}
.hp-card:hover .hp-card-hover-layer { opacity: 1; }
.hp-card-playbtn {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
}
.hp-card-foot { flex: 1; min-width: 0; }
.hp-card-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem; font-weight: 700; line-height: 1.1;
  color: var(--text); margin-bottom: .3rem;
}
.hp-card-meta { font-size: .83rem; color: var(--text2); }
.hp-cdot { margin: 0 .4rem; color: var(--muted); }
.hp-empty {
  text-align: center; color: var(--muted); padding: 3rem;
  font-family: 'Cormorant Garamond', serif; font-style: italic;
}

/* ── Join section ──────────────────────────────────────────────────────────── */
.hp-join {
  padding: 5rem 2.5rem 7rem;
  border-top: 1px solid var(--border);
  position: relative; overflow: hidden;
}
.hp-join-glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(201,168,76,.06) 0%, transparent 70%);
  pointer-events: none;
}
.hp-join-inner {
  max-width: 580px; margin: 0 auto;
  text-align: center; position: relative; z-index: 1;
}
.hp-join-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-style: italic; font-weight: 600; margin: 1rem 0;
}
.hp-join p { color: var(--text2); font-size: .95rem; line-height: 1.75; margin-bottom: 2rem; }
.hp-join-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════════════════════
   ALBUM PAGE
══════════════════════════════════════════════════════════════════════════ */
.album-page {}
.album-main { padding-bottom: calc(var(--player-height) + 2rem); }

/* Cinema header */
.album-hero {
  position: relative; height: 75vh; min-height: 480px;
  display: flex; align-items: flex-end; overflow: hidden;
  padding-top: var(--nav-height);
}
.album-hero-bg { position: absolute; inset: 0; z-index: 0; }
.album-hero-bg img {
  width: 100%; height: 100%;
  filter: brightness(.28) saturate(1.3) blur(4px);
  transform: scale(1.04); object-fit: cover;
}
.album-hero-vignette {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--bg) 0%, rgba(0,0,0,.4) 50%, transparent 100%);
  z-index: 1;
}
.album-hero-content {
  position: relative; z-index: 2;
  max-width: 1400px; margin: 0 auto; width: 100%;
  padding: 0 2.5rem 3rem;
  display: flex; align-items: flex-end; gap: 3rem;
}
.album-cover-container { flex-shrink: 0; }
.album-cover-large {
  width: 200px; height: 200px; border-radius: 3px;
  box-shadow: 0 20px 60px rgba(0,0,0,.7);
  border: 1px solid rgba(255,255,255,.1);
  object-fit: cover; display: block;
}
.album-meta {}
.album-label {
  display: block; font-size: .65rem; letter-spacing: 3.5px;
  text-transform: uppercase; color: var(--accent); margin-bottom: .75rem;
}
.album-title-big {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 800; line-height: .95; color: var(--text); margin-bottom: .6rem;
}
.album-artist-name { font-size: 1rem; color: var(--text2); margin-bottom: .5rem; }
.album-description {
  font-size: .88rem; color: var(--muted);
  max-width: 520px; line-height: 1.65; margin-bottom: 1rem;
}
.album-year-badge {
  display: inline-block; padding: .22rem .7rem;
  border: 1px solid var(--border2); border-radius: 2px;
  font-size: .72rem; color: var(--text2); letter-spacing: .5px;
  margin-right: .5rem;
}
.btn-standard-view, .btn-imm {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem 1.2rem;
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text2); border-radius: 3px; font-size: .82rem;
  transition: all .2s; margin-top: .75rem;
}
.btn-standard-view:hover, .btn-imm:hover {
  border-color: rgba(201,168,76,.4); color: var(--text);
}

/* Magazine body */
.album-magazine {
  max-width: 1400px; margin: 0 auto;
  padding: 3rem 2.5rem 6rem;
  display: grid; grid-template-columns: 1fr 360px; gap: 4rem;
}

/* Tracklist */
.tracklist-section { margin-bottom: 2.5rem; }
.tracklist-mag-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border);
}
.tracklist-mag-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem; font-style: italic; color: var(--text);
}
.tracklist-mag-count { font-size: .75rem; color: var(--muted); }

.tracklist { width: 100%; border-collapse: collapse; }
.tracklist thead th {
  text-align: left; padding: .5rem 1rem;
  font-size: .72rem; text-transform: uppercase;
  letter-spacing: 1.5px; color: var(--muted);
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.track-item {
  cursor: pointer; border-bottom: 1px solid rgba(255,255,255,.04);
  transition: all .18s; border-left: 2px solid transparent;
}
.track-item:hover { border-left-color: rgba(201,168,76,.4); background: rgba(255,255,255,.02); }
.track-item.playing { border-left-color: var(--accent); background: rgba(201,168,76,.06); }
.track-item td { padding: .85rem 1rem; vertical-align: middle; }
.track-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem; font-style: italic; color: var(--muted);
  text-align: center; width: 2.5rem;
}
.track-item.playing .track-num { color: var(--accent); }
.track-title-text { font-size: .9rem; font-weight: 500; color: var(--text); }
.track-item.playing .track-title-text { color: var(--accent); }
.track-duration { color: var(--muted); font-size: .82rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.track-fav     { width: 2.5rem; text-align: center; }
.track-comments { width: 5.5rem; text-align: center; }

.btn-favorite {
  background: none; border: none; cursor: pointer;
  color: var(--muted);
  transition: color .2s, transform .2s;
  padding: .2rem .4rem; border-radius: 4px;
  display: inline-flex; align-items: center;
}
.btn-favorite svg { fill: none; transition: fill .2s; }
.btn-favorite:hover { transform: scale(1.2); color: var(--danger); }
.btn-favorite:hover svg { fill: currentColor; }
.btn-favorite.active { color: var(--danger); }
.btn-favorite.active svg { fill: currentColor; }

.btn-comments-toggle {
  background: none; border: 1px solid var(--border); color: var(--muted);
  padding: .25rem .55rem; border-radius: 2px; cursor: pointer;
  font-size: .78rem; transition: border-color .2s, color .2s;
  display: inline-flex; align-items: center; gap: .3rem;
}
.btn-comments-toggle:hover { border-color: rgba(201,168,76,.4); color: var(--text); }

/* Sidebar */
.album-sidebar {}
.sidebar-about, .sidebar-tracks-quick {
  padding: 1.5rem; background: rgba(255,255,255,.028);
  border: 1px solid var(--border); border-radius: 3px; margin-bottom: 1.5rem;
}
.sidebar-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem; font-style: italic; color: var(--text); margin-bottom: .75rem;
}
.sidebar-text { font-size: .85rem; color: var(--text2); line-height: 1.75; }
.sidebar-tracks-quick .sidebar-title {
  font-size: .65rem; font-style: normal; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--muted); font-family: 'DM Sans', sans-serif;
}

/* Comments */
.comments-section { margin-top: 1rem; }
.comments-panel {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 3px; padding: 1.25rem; margin-bottom: 1rem;
}
.comments-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem; font-style: italic; color: var(--text); margin-bottom: 1rem;
}
.comment-form { margin-bottom: 1.5rem; display: flex; gap: .75rem; align-items: flex-start; }
.comment-input {
  flex: 1; background: rgba(255,255,255,.04);
  border: 1px solid var(--border); border-radius: 2px;
  color: var(--text); padding: .6rem .8rem; font-size: .85rem;
  resize: vertical; min-height: 52px; transition: border-color .2s;
}
.comment-input:focus { outline: none; border-color: rgba(201,168,76,.5); }
.comment-input::placeholder { color: var(--muted); }
.no-comments { color: var(--muted); font-size: .85rem; padding: .5rem 0; }
.login-to-comment { color: var(--muted); font-size: .85rem; margin-bottom: 1rem; }
.login-to-comment a { color: var(--accent); }
.comment-bubble {
  background: rgba(255,255,255,.03); border: 1px solid var(--border);
  border-radius: 2px; padding: .9rem 1rem; margin-bottom: .75rem;
}
.comment-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .4rem; gap: .5rem; flex-wrap: wrap; }
.comment-author { font-weight: 600; font-size: .85rem; color: var(--accent); }
.comment-date   { font-size: .72rem; color: var(--muted); }
.comment-body   { font-size: .88rem; color: var(--text2); }
.comment-actions { display: flex; align-items: center; gap: .4rem; margin-left: auto; }
.btn-reply-toggle { background: none; border: none; color: var(--muted); font-size: .75rem; cursor: pointer; padding: .15rem .4rem; border-radius: 2px; transition: color .2s; }
.btn-reply-toggle:hover { color: var(--accent); }
.btn-delete-comment { background: none; border: none; color: var(--muted); font-size: .8rem; cursor: pointer; padding: .15rem .35rem; border-radius: 2px; line-height: 1; transition: color .2s; }
.btn-delete-comment:hover { color: #e05c5c; }
.inline-form { display: inline; margin: 0; padding: 0; }
.reply-bubble { margin-left: 1.5rem; border-left: 2px solid rgba(201,168,76,.3); border-top: none; border-right: none; border-bottom: none; padding-left: .85rem; }
.reply-form-container { margin-top: .75rem; }
.reply-form { margin-bottom: 0; }
.reply-btns { display: flex; gap: .5rem; margin-top: .4rem; justify-content: flex-end; }
.btn-cancel-reply { background: none; border: 1px solid var(--border); color: var(--muted); font-size: .8rem; padding: .3rem .75rem; border-radius: 2px; cursor: pointer; transition: color .2s; }
.btn-cancel-reply:hover { color: var(--text); }

/* ══════════════════════════════════════════════════════════════════════════
   AUDIO PLAYER
══════════════════════════════════════════════════════════════════════════ */
.audio-player {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: var(--player-height);
  background: rgba(8,7,18,.96);
  backdrop-filter: blur(32px) saturate(1.8);
  border-top: 1px solid rgba(255,255,255,.06);
  z-index: 900; display: none;
  transition: height .38s cubic-bezier(.32,1,.32,1);
}
.album-page .audio-player { display: block; }
.audio-player.is-expanded { height: clamp(300px, 52vh, 500px); }

/* ── Expanded panel ───────────────────────────────────────────────────────── */
.player-expand-panel {
  position: absolute; bottom: var(--player-height); left: 0; right: 0;
  height: 0; overflow: hidden;
  background: rgba(8,7,18,.96);
  display: flex; gap: 0;
  transition: height .38s cubic-bezier(.32,1,.32,1);
}
.audio-player.is-expanded .player-expand-panel {
  bottom: 0;
  height: 100%;
  padding-top: 2.75rem;
}

/* Vinyl section (left) */
.player-vinyl-sec {
  flex: 0 0 300px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.25rem;
  padding: 2rem; border-right: 1px solid rgba(255,255,255,.06);
}
.vinyl-wrap { position: relative; width: 180px; height: 180px; }
.vinyl-disc {
  width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    #1a1a1a 0%, #1a1a1a 18%, #0a0a0a 18%, #0a0a0a 22%,
    #1a1a1a 22%, #1a1a1a 28%, #0a0a0a 28%, #0a0a0a 33%,
    #1a1a1a 33%, #1a1a1a 40%, #0a0a0a 40%, #0a0a0a 44%,
    #141414 44%, #141414 100%);
  box-shadow: 0 8px 32px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.05);
  animation: spinVinyl 4s linear infinite paused;
}
.vinyl-disc.spinning { animation-play-state: running; }
.vinyl-art {
  position: absolute; top: 50%; left: 50%;
  width: 70px; height: 70px; border-radius: 50%; overflow: hidden;
  transform: translate(-50%,-50%); border: 2px solid rgba(255,255,255,.1);
}
.vinyl-art img { width: 100%; height: 100%; object-fit: cover; }
.vinyl-center-dot {
  position: absolute; top: 50%; left: 50%;
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(var(--ar),var(--ag),var(--ab),.6);
  transform: translate(-50%,-50%); z-index: 2;
}
.vinyl-track-name {
  font-family: 'Cormorant Garamond', serif; font-size: 1rem; font-style: italic;
  color: var(--text2); text-align: center; max-width: 220px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@keyframes spinVinyl { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Main controls section (center) */
.player-main-sec {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: 2.5rem; gap: 1.5rem;
}
.player-big-progress { display: flex; align-items: center; gap: .85rem; }
.p-time { font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 36px; }
.pbar {
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 3px; border-radius: 2px; background: var(--border2); cursor: pointer; transition: height .15s;
}
.pbar:hover { height: 5px; }
.pbar::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); cursor: pointer; transition: transform .18s; }
.pbar:hover::-webkit-slider-thumb { transform: scale(1.2); }
.player-big-controls { display: flex; align-items: center; justify-content: center; gap: .75rem; }
.p-ctrl {
  width: 36px; height: 36px; border-radius: 50%; border: none; background: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--text2); cursor: pointer; transition: all .18s;
}
.p-ctrl:hover { color: var(--text); background: rgba(255,255,255,.07); }
.p-ctrl.on { color: var(--accent); background: rgba(var(--ar),var(--ag),var(--ab),.15); }
.p-play {
  width: 52px; height: 52px; border-radius: 50%; border: none;
  background: var(--accent); color: #0a0808; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .22s;
}
.p-play:hover { filter: brightness(1.12); transform: scale(1.06); }
.player-vol-row { display: flex; align-items: center; gap: .75rem; justify-content: center; }
.vol-icon { color: var(--muted); display: flex; align-items: center; }
.pvol {
  width: 100px; -webkit-appearance: none; appearance: none;
  height: 3px; border-radius: 2px; background: var(--border2); cursor: pointer;
}
.pvol::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--text2); cursor: pointer; }

/* Queue */
/* Queue section (colonne droite du panneau étendu) */
.player-queue-sec {
  flex: 0 0 240px; display: flex; flex-direction: column;
  padding: 1.5rem 1.25rem; gap: 0;
  border-left: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
}
.queue-title { font-size: .62rem; letter-spacing: 2.5px; text-transform: uppercase; color: var(--muted); margin-bottom: .75rem; flex-shrink: 0; }
#player-queue {
  flex: 1; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent;
}
#player-queue::-webkit-scrollbar { width: 3px; }
#player-queue::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 2px; }
.queue-item {
  display: flex; align-items: center; gap: .65rem; padding: .38rem 0;
  cursor: pointer; transition: background .15s; border-bottom: 1px solid rgba(255,255,255,.04);
}
.queue-item:hover { background: rgba(255,255,255,.03); }
.queue-item:hover .qi-name { color: var(--accent); }
.queue-item.q-active { background: rgba(var(--ar),var(--ag),var(--ab),.08); }
.queue-item.q-active .qi-name { color: var(--accent); }
.queue-item.q-active .qi-num { color: var(--accent); }
.qi-num { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: .85rem; color: var(--muted); width: 18px; flex-shrink: 0; text-align: right; }
.qi-name { font-size: .78rem; color: var(--text2); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .15s; }
.qi-dur { font-size: .68rem; color: var(--muted); flex-shrink: 0; font-variant-numeric: tabular-nums; }

/* ── Always-visible bar ───────────────────────────────────────────────────── */
.player-bar {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: var(--player-height);
  display: flex; align-items: center; gap: 1.25rem;
  padding: 0 1.75rem;
}
.p-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: .75rem; }
.p-thumb { width: 40px; height: 40px; border-radius: 2px; overflow: hidden; flex-shrink: 0; background: var(--card); }
.player-cover-thumb { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
.player-cover-thumb.loaded { opacity: 1; }
.p-now { font-size: .83rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.p-mini-controls { display: flex; align-items: center; gap: .3rem; }
.pm-ctrl {
  background: none; border: none; color: var(--text2); cursor: pointer;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; transition: color .18s, background .18s;
}
.pm-ctrl:hover { color: var(--text); background: rgba(255,255,255,.07); }
.pm-play {
  width: 36px; height: 36px; border-radius: 50%; border: none;
  background: var(--accent); color: #0a0808;
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .18s;
}
.pm-play:hover { filter: brightness(1.1); }
.ctrl-btn-toggle { position: relative; }
.ctrl-btn-toggle.active { color: var(--accent); background: rgba(var(--ar),var(--ag),var(--ab),.15); }
.ctrl-btn-toggle.active::after {
  content: ''; position: absolute; bottom: 2px; left: 50%;
  transform: translateX(-50%); width: 4px; height: 4px; background: var(--accent); border-radius: 50%;
}
.p-progress-mini { display: flex; align-items: center; gap: .6rem; flex: 2; }
.time-label { font-size: .72rem; color: var(--muted); white-space: nowrap; min-width: 35px; font-variant-numeric: tabular-nums; }
.progress-bar, .volume-bar {
  -webkit-appearance: none; appearance: none;
  height: 3px; border-radius: 2px; background: var(--border2); cursor: pointer; transition: height .15s;
}
.progress-bar { flex: 1; }
.progress-bar:hover, .volume-bar:hover { height: 5px; }
.progress-bar::-webkit-slider-thumb,
.volume-bar::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 12px;
  border-radius: 50%; background: var(--accent); cursor: pointer;
}
.player-volume { display: flex; align-items: center; gap: .5rem; }
.volume-icon { color: var(--muted); display: flex; align-items: center; }
.volume-bar { width: 80px; }
.p-expand-btn {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  color: var(--muted); border: 1px solid rgba(255,255,255,.08); border-radius: 3px;
  background: none; cursor: pointer; flex-shrink: 0; transition: all .18s;
}
.p-expand-btn:hover { color: var(--text); border-color: rgba(255,255,255,.2); }
.p-expand-btn svg { display: block; transition: transform .3s ease; }
.audio-player.is-expanded .p-expand-btn svg { transform: rotate(180deg); }
.audio-player.is-expanded .p-mini-controls,
.audio-player.is-expanded .p-progress-mini,
.audio-player.is-expanded .p-info,
.audio-player.is-expanded .player-volume { display: none; }
.audio-player.is-expanded .player-bar {
  bottom: auto; top: 0.6rem;
  left: auto; right: 1.25rem;
  width: auto; height: auto;
  padding: 0;
  z-index: 10;
}
@keyframes vizBarAnim { from { height: 3px; } to { height: 80px; } }

/* ══════════════════════════════════════════════════════════════════════════
   AUTH PAGES
══════════════════════════════════════════════════════════════════════════ */
.auth-page {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 2rem;
  position: relative; overflow: hidden;
}
.auth-page::before {
  content: ''; position: absolute;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,76,.12) 0%, transparent 65%);
  top: -150px; right: -100px; pointer-events: none; z-index: 0;
}
.auth-page::after {
  content: ''; position: absolute;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,76,.08) 0%, transparent 65%);
  bottom: -100px; left: -80px; pointer-events: none; z-index: 0;
}
.auth-container { width: 100%; max-width: 440px; padding: 1.5rem; position: relative; z-index: 2; }
.auth-card {
  background: rgba(255,255,255,.035); border: 1px solid var(--border);
  border-radius: 4px; padding: 2.75rem; backdrop-filter: blur(20px);
}
.auth-logo {
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: 2rem; justify-content: center;
  font-size: 1.2rem; font-family: 'Cormorant Garamond', serif;
  font-style: italic; color: var(--accent);
}
.auth-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.9rem; font-weight: 700;
  text-align: center; margin-bottom: 1.75rem; color: var(--text);
}
.auth-form { display: flex; flex-direction: column; gap: .9rem; }
.form-group { display: flex; flex-direction: column; gap: .3rem; }
.form-group label { font-size: .75rem; font-weight: 500; color: var(--text2); letter-spacing: .3px; }
.form-input {
  background: rgba(255,255,255,.04); border: 1px solid var(--border);
  border-radius: 2px; color: var(--text);
  padding: .65rem .9rem; font-size: .9rem; font-family: inherit;
  transition: border-color .2s, box-shadow .2s; width: 100%;
}
.form-input:focus { outline: none; border-color: rgba(201,168,76,.55); box-shadow: 0 0 0 3px rgba(201,168,76,.1); }
.form-input::placeholder { color: var(--muted); }
.field-error { font-size: .78rem; color: var(--danger); }
.auth-link { text-align: center; margin-top: 1.25rem; font-size: .82rem; color: var(--muted); }
.auth-link a { color: var(--accent); font-weight: 600; }
.auth-link a:hover { opacity: .7; }

/* ══════════════════════════════════════════════════════════════════════════
   IMMERSIVE PAGE
══════════════════════════════════════════════════════════════════════════ */
.immersive-page { overflow-x: hidden; min-height: 100vh; }

/* ── Back bar ─────────────────────────────────────────────────────────────── */
.imm-back {
  position: fixed; top: var(--nav-height); left: 0; right: 0; z-index: 800;
  padding: .6rem 2.5rem;
  background: rgba(0,0,0,.5); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.05);
  display: flex; align-items: center; justify-content: space-between;
}
.imm-back-btn {
  display: flex; align-items: center; gap: .5rem;
  font-size: .8rem; color: var(--text2); transition: color .18s;
}
.imm-back-btn:hover { color: var(--accent); }
.imm-back-title {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: .95rem; color: var(--muted);
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.imm-hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center; overflow: hidden;
}
.imm-hero-bg { position: absolute; inset: 0; z-index: 0; }
.imm-hero-bg img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.22) saturate(1.5); transform: scale(1.06);
}
.imm-hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(135deg, rgba(0,0,0,.6) 0%, transparent 60%),
    linear-gradient(to top, var(--bg) 0%, transparent 40%);
}
.imm-hero-body {
  position: relative; z-index: 2;
  max-width: 1400px; margin: 0 auto; width: 100%;
  padding: calc(var(--nav-height) + 3rem) 2.5rem 2.5rem;
  display: flex; align-items: center; gap: 4rem;
}
.imm-hero-cover-wrap {
  flex-shrink: 0; width: 240px; height: 240px;
  border-radius: 3px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 24px 72px rgba(0,0,0,.75);
  animation: floatCover 5s ease-in-out infinite;
}
.imm-hero-cover { width: 100%; height: 100%; object-fit: cover; }
.imm-hero-info {}
.imm-hero-tag {
  display: block; font-size: .65rem; letter-spacing: 4px;
  text-transform: uppercase; color: var(--accent); margin-bottom: 1rem;
}
.imm-hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  font-style: italic; font-weight: 700;
  line-height: .95; color: var(--text); margin-bottom: .6rem;
}
.imm-hero-artist { font-size: 1rem; color: var(--text2); margin-bottom: .5rem; }
.imm-hero-desc {
  color: var(--muted); font-size: .9rem; line-height: 1.7;
  max-width: 460px; margin-bottom: 1.25rem;
}
.imm-hero-pills { display: flex; gap: .6rem; }
.imm-pill {
  padding: .22rem .65rem; border: 1px solid var(--border2);
  border-radius: 2px; font-size: .72rem; color: var(--text2);
}
.imm-scroll-indicator {
  position: absolute; bottom: 2.5rem; left: 50%;
  transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  color: rgba(255,255,255,.3); font-size: .62rem;
  letter-spacing: 2.5px; text-transform: uppercase;
  animation: bob 2.5s ease-in-out infinite;
}
.scroll-chevron {
  width: 16px; height: 16px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
}

/* ── Song sections ────────────────────────────────────────────────────────── */
.imm-songs { position: relative; }
.imm-section {
  position: relative; min-height: 100vh;
  display: grid; grid-template-columns: 1fr 1fr; overflow: hidden;
}
.imm-section.rev { direction: rtl; }
.imm-section.rev > * { direction: ltr; }

/* Image panel */
.imm-img-panel { position: relative; overflow: hidden; background: var(--bg2); }
.imm-img-panel img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.72) saturate(1.2); will-change: transform;
}
.imm-img-tint {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right, transparent 45%, var(--bg) 100%);
}
.imm-section.rev .imm-img-tint {
  background: linear-gradient(to left, transparent 45%, var(--bg) 100%);
}

/* Anim type 0 – horizontal wipe */
.imm-section[data-anim="0"] .imm-img-panel { clip-path: inset(0 100% 0 0); }
.imm-section[data-anim="0"].rev .imm-img-panel { clip-path: inset(0 0 0 100%); }
.imm-section[data-anim="0"].visible .imm-img-panel { animation: imgWipeH .95s cubic-bezier(.4,0,.2,1) forwards; }
.imm-section[data-anim="0"].rev.visible .imm-img-panel { animation: imgWipeHR .95s cubic-bezier(.4,0,.2,1) forwards; }

/* Anim type 1 – scale-blur */
.imm-section[data-anim="1"] .imm-img-panel { opacity: 0; transform: scale(1.14); }
.imm-section[data-anim="1"] .imm-img-panel img { filter: brightness(.45) saturate(1.2) blur(12px); }
.imm-section[data-anim="1"].visible .imm-img-panel { animation: imgBlurReveal 1.3s cubic-bezier(.25,1,.5,1) forwards; }

/* Anim type 2 – vertical curtain */
.imm-section[data-anim="2"] .imm-img-panel { clip-path: inset(100% 0 0 0); }
.imm-section[data-anim="2"].visible .imm-img-panel { animation: imgWipeV .9s cubic-bezier(.4,0,.2,1) .08s forwards; }

/* Ken Burns pan on visible images */
.imm-section.visible .imm-img-panel img { animation: slowPan 12s ease-in-out infinite alternate; }

/* Text panel */
.imm-text-panel {
  display: flex; flex-direction: column; justify-content: center;
  padding: 5rem 4rem;
}

/* Giant number */
.imm-section-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 6rem; font-style: italic; font-weight: 300;
  color: rgba(var(--ar),var(--ag),var(--ab),.14);
  line-height: 1; margin-bottom: -.5rem;
  opacity: 0; transform: scale(1.4) rotate(-8deg);
}
.imm-section.visible .imm-section-num { animation: numSpin .9s cubic-bezier(.34,1.56,.64,1) .08s both; }

/* Label */
.imm-section-label {
  font-size: .62rem; letter-spacing: 8px; text-transform: uppercase;
  color: var(--accent); margin-bottom: 1rem; display: block; opacity: 0;
}
.imm-section.visible .imm-section-label { animation: labelArrive .7s ease .32s both; }

/* Title mask */
.imm-title-mask { overflow: hidden; margin-bottom: .6rem; }
.imm-section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 700; line-height: 1.05; color: var(--text);
  transform: translateY(110%); opacity: 0;
}
.imm-section.visible .imm-section-title { animation: titleSlide .75s cubic-bezier(.22,1,.36,1) .44s both; }

/* Rule */
.imm-section-rule {
  width: 40px; height: 1px; background: var(--accent); opacity: .7;
  margin: 1.2rem 0; transform: scaleX(0); transform-origin: left;
}
.imm-section.visible .imm-section-rule { animation: ruleDraw .65s ease .8s both; }

/* Duration */
.imm-section-dur {
  font-size: .8rem; letter-spacing: 2px; color: var(--accent);
  margin-bottom: 1.5rem; opacity: 0; transform: translateY(-10px);
}
.imm-section.visible .imm-section-dur { animation: durDrop .5s ease .92s both; }

/* Play button */
.btn-imm-play {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(var(--ar),var(--ag),var(--ab),.18);
  border: 1px solid rgba(var(--ar),var(--ag),var(--ab),.35);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; cursor: pointer;
  transform: scale(0); opacity: 0;
}
.imm-section.visible .btn-imm-play { animation: playPop .68s cubic-bezier(.34,1.56,.64,1) 1.08s both; }
.btn-imm-play:hover {
  background: rgba(var(--ar),var(--ag),var(--ab),.32);
  transform: scale(1.1) !important; transition: background .2s, transform .2s;
}
.btn-imm-play.playing {
  background: rgba(var(--ar),var(--ag),var(--ab),.28);
  border-color: var(--accent);
}

/* ── End section ──────────────────────────────────────────────────────────── */
.imm-end {
  padding: 6rem 2.5rem calc(var(--player-height) + 4rem);
  text-align: center; border-top: 1px solid var(--border);
}
.imm-end-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem; font-style: italic; color: var(--text);
  margin: .5rem 0 2rem;
}
.imm-end-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════════════════════════════════════════ */
@keyframes heroRise  { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:translateY(0); } }
@keyframes coverRise { from { opacity:0; transform:translateY(34px) scale(.96); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes floatCover { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }

@keyframes imgWipeH     { from { clip-path:inset(0 100% 0 0); }  to { clip-path:inset(0 0 0 0); } }
@keyframes imgWipeHR    { from { clip-path:inset(0 0 0 100%); }  to { clip-path:inset(0 0 0 0); } }
@keyframes imgWipeV     { from { clip-path:inset(100% 0 0 0); }  to { clip-path:inset(0 0 0 0); } }
@keyframes imgBlurReveal { from { opacity:0; transform:scale(1.14); } to { opacity:1; transform:scale(1); } }
@keyframes slowPan      { from { transform:scale(1) translate(0,0); } to { transform:scale(1.07) translate(-10px,-6px); } }
@keyframes numSpin      { 0% { opacity:0; transform:scale(1.4) rotate(-8deg); } 60% { opacity:.18; transform:scale(.95) rotate(2deg); } 100% { opacity:1; transform:scale(1) rotate(0); } }
@keyframes labelArrive  { from { opacity:0; letter-spacing:10px; } to { opacity:1; letter-spacing:3.5px; } }
@keyframes titleSlide   { from { opacity:0; transform:translateY(110%); } to { opacity:1; transform:translateY(0); } }
@keyframes ruleDraw     { from { transform:scaleX(0); transform-origin:left; } to { transform:scaleX(1); transform-origin:left; } }
@keyframes durDrop      { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:translateY(0); } }
@keyframes playPop      { 0% { opacity:0; transform:scale(0); } 65% { opacity:1; transform:scale(1.18); } 100% { opacity:1; transform:scale(1); } }

@media (prefers-reduced-motion: no-preference) {
  .album-hero-content .album-cover-large { animation: coverRise 1s cubic-bezier(.22,1,.36,1) .12s both; }
  .album-hero-content .album-meta        { animation: heroRise  .9s cubic-bezier(.22,1,.36,1) .28s both; }
  .hp-hero .hp-text-col                  { animation: heroRise  .9s cubic-bezier(.22,1,.36,1) .15s both; }
  .hp-hero .hp-covers-col               { animation: coverRise 1.05s cubic-bezier(.22,1,.36,1) .4s both; }
}

/* Scroll-reveal */
.sr-up { opacity:0; transform:translateY(30px); transition: opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1); }
.sr-up.revealed { opacity:1; transform:translateY(0); }

/* ══════════════════════════════════════════════════════════════════════════
   HAMBURGER + MOBILE NAV
══════════════════════════════════════════════════════════════════════════ */
.nav-hamburger {
  display: none;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 5px;
  width: 36px; height: 36px;
  background: none; border: none; cursor: pointer;
  padding: 0; flex-shrink: 0;
}
.nav-hamburger span {
  display: block; width: 22px; height: 1.5px;
  background: var(--text2); border-radius: 2px;
  transition: transform .28s ease, opacity .2s ease, background .2s;
}
.nav-hamburger:hover span { background: var(--text); }
.nav-hamburger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-mobile-menu {
  position: absolute; top: 100%; left: 0; right: 0;
  background: rgba(8,7,18,.97);
  backdrop-filter: blur(24px) saturate(1.6);
  border-bottom: 1px solid rgba(255,255,255,.07);
  padding: 1rem 1.25rem 1.25rem;
  display: none; flex-direction: column; gap: 1rem;
  z-index: 899;
}
.nav-mobile-menu.is-open { display: flex; }

.nav-mobile-links {
  list-style: none;
  display: flex; flex-direction: column; gap: .2rem;
}
.nav-mobile-links a {
  display: block; padding: .6rem .75rem; border-radius: 4px;
  font-size: .9rem; color: var(--text2); transition: all .18s;
}
.nav-mobile-links a:hover { background: rgba(201,168,76,.1); color: var(--text); }

.nav-mobile-auth {
  display: flex; gap: .6rem; flex-wrap: wrap;
  padding-top: .75rem; border-top: 1px solid rgba(255,255,255,.06);
}
.nav-mobile-user { display: flex; gap: .6rem; flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .hp-hero-inner { grid-template-columns: 1fr; gap: 3rem; }
  .hp-covers-col { display: none; }
  .hp-hero-inner { text-align: center; }
  .hp-eyebrow, .hp-hero-btns, .hp-hero-stats { justify-content: center; }
  .hp-hero-sub { margin: 0 auto 2.5rem; }
  .album-magazine { grid-template-columns: 1fr; }
  .album-sidebar { display: none; }
  .imm-section { grid-template-columns: 1fr; min-height: auto; }
  .imm-section.rev { direction: ltr; }
  .imm-img-panel { height: 55vw; max-height: 380px; }
  .imm-img-tint, .imm-section.rev .imm-img-tint { background: none; }
  .imm-text-panel { padding: 3rem 2rem; }
}
@media (max-width: 768px) {
  /* 3-row player: progress+times / info+controls / volume */
  :root { --player-height: 108px; }

  .nav-links { display: none; }
  .nav-auth { display: none; }
  .nav-hamburger { display: flex; }
  .nav-container { padding: 0 1.25rem; gap: 1rem; }
  .album-hero-content { flex-direction: column; gap: 1.5rem; padding-bottom: 2rem; }
  .album-cover-large { width: 160px; height: 160px; }
  .album-title-big { font-size: 1.8rem; }
  .tracklist thead th:last-child { display: none; }
  .imm-back { padding: .5rem 1.25rem; }
  .imm-back-title { display: none; }

  /* ── Player bar: grille 2×2 ────────────────────────────────
     [info          ] [contrôles]
     [progress+temps pleine largeur   ]                       */
  .player-bar {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 4px .75rem;
    padding: 8px 1rem 7px;
  }

  .p-info          { grid-column: 1;      grid-row: 1; min-width: 0; }
  .p-mini-controls { grid-column: 2;      grid-row: 1; gap: 0; }
  .p-progress-mini {
    grid-column: 1 / -1; grid-row: 2;
    display: flex;
    gap: .4rem;
    align-items: center;
    min-width: 0;
  }
  .player-volume { display: none !important; }

  .progress-bar { flex: 1; }
  .time-label {
    display: block;
    font-size: .64rem;
    min-width: 26px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .p-expand-btn { display: none; }

  /* Player expand panel: stack vertically */
  .player-expand-panel { flex-direction: column; overflow-y: auto; }
  .player-vinyl-sec { flex: 0 0 auto; border-right: none; border-bottom: 1px solid rgba(255,255,255,.06); padding: 1.5rem; flex-direction: row; gap: 1.25rem; justify-content: flex-start; }
  .vinyl-wrap { width: 120px; height: 120px; }
  .player-main-sec { padding: 1.25rem 1.5rem; }
  .player-queue-sec { flex: 0 0 auto; border-left: none; border-top: 1px solid rgba(255,255,255,.06); max-height: 180px; }
}
@media (max-width: 480px) {
  .hp-hero { padding: 0 1rem; }
  .hp-hero-h1 { font-size: clamp(2.8rem, 10vw, 3.8rem); }
  .hp-hero-stats { gap: 1.25rem; }
  .hp-albums { padding: 4rem 1.25rem; }
  .hp-join { padding: 3.5rem 1.25rem 5rem; }
  .hp-cards { grid-template-columns: 1fr; }
  .imm-hero-body { flex-direction: column; gap: 2rem; text-align: center; align-items: center; }
  .imm-hero-cover-wrap { width: 180px; height: 180px; }
  .imm-hero-title { font-size: 2rem; }
  .imm-text-panel { padding: 2rem 1.25rem; }
  .album-magazine { padding: 2rem 1.25rem 4rem; }
  .album-hero-content { padding: 0 1.25rem 2rem; }

  /* Auth pages on small phones */
  .auth-card { padding: 2rem 1.5rem; }
  .auth-page { padding: 1rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SCROLLYTELLING — coller à la fin de main.css
   Remplace la vue immersive existante pour Album I et Album II.
   Aucun token inventé : utilise les variables déjà présentes dans :root.
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── BgScene — 5 orbes animés ──────────────────────────────────────────── */
.bg-scene{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.bgo{position:absolute;border-radius:50%;filter:blur(100px)}
.bgo-1{width:680px;height:680px;top:-18%;left:-14%;
  background:radial-gradient(circle,rgba(var(--ar),var(--ag),var(--ab),.26),transparent 70%);
  animation:bgoA 30s ease-in-out infinite alternate}
.bgo-2{width:520px;height:520px;top:45%;right:-12%;
  background:radial-gradient(circle,rgba(130,48,210,.22),transparent 70%);
  animation:bgoB 24s ease-in-out infinite alternate}
.bgo-3{width:600px;height:600px;bottom:-18%;left:28%;
  background:radial-gradient(circle,rgba(var(--ar),var(--ag),var(--ab),.14),transparent 70%);
  animation:bgoC 38s ease-in-out infinite alternate}
.bgo-4{width:360px;height:360px;top:22%;left:52%;
  background:radial-gradient(circle,rgba(190,75,55,.16),transparent 70%);
  animation:bgoD 20s ease-in-out infinite alternate}
.bgo-5{width:280px;height:280px;bottom:20%;right:18%;
  background:radial-gradient(circle,rgba(var(--ar),var(--ag),var(--ab),.1),transparent 70%);
  animation:bgoE 16s ease-in-out infinite alternate}
@keyframes bgoA{from{transform:translate(0,0) scale(1)}to{transform:translate(7%,6%) scale(1.18)}}
@keyframes bgoB{from{transform:translate(0,0) scale(1)}to{transform:translate(-7%,-9%) scale(1.22)}}
@keyframes bgoC{from{transform:translate(0,0) scale(1)}to{transform:translate(5%,-6%) scale(1.12)}}
@keyframes bgoD{from{transform:translate(0,0) scale(1)}to{transform:translate(-12%,14%) scale(1.32)}}
@keyframes bgoE{from{transform:translate(0,0) scale(1)}to{transform:translate(10%,-10%) scale(1.25)}}

/* ══════════════════════════════════════════════════════════════════════════
   ALBUM I — « Les Légendes d'Eliott »  (épique · or · serif)
   ══════════════════════════════════════════════════════════════════════════ */
.page-album1{background:transparent;min-height:100vh}

/* ─── Hero ───────────────────────────────────────────────────────────────── */
.a1-hero{position:relative;min-height:calc(100vh - var(--nav-height));display:flex;flex-direction:column;overflow:hidden}
.a1-hero-bg{position:absolute;inset:0;z-index:0}
.a1-hero-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.08) saturate(.4) blur(28px);transform:scale(1.08)}
.a1-hero-vignette{position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgba(0,0,0,.12) 0%,transparent 32%,rgba(0,0,0,.6) 75%,var(--bg) 100%)}

/* Particules d'or */
.a1-hero-particles{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.a1-particle{position:absolute;width:2px;height:2px;border-radius:50%;background:var(--accent);
  left:var(--pd);bottom:-10px;opacity:0;
  animation:a1ParticleFloat calc(6s + var(--ps) * 4) calc(var(--pi) * .3s) linear infinite}
@media(prefers-reduced-motion:no-preference){.a1-particle{opacity:1}}
@keyframes a1ParticleFloat{
  0%  {transform:translateY(0) scale(0);opacity:0}
  10% {opacity:.35}
  90% {opacity:.15}
  100%{transform:translateY(calc(-100vh - 20px)) scale(.5);opacity:0}
}

.a1-hero-inner{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:space-between;
  padding:3rem 3rem 3.5rem;max-width:1400px;width:100%;margin:0 auto}
.a1-hero-eyebrow{display:flex;align-items:center;gap:.85rem;color:var(--muted);font-size:.62rem;letter-spacing:3.5px;text-transform:uppercase}
.a1-eyebrow-line{width:28px;height:1px;background:var(--accent);opacity:.6}

/* Titre staggeré */
.a1-hero-title{display:flex;flex-direction:column;line-height:.85;margin:auto 0}
.a1-tl{font-family:'Cormorant Garamond',Georgia,serif;font-weight:800;
  font-size:clamp(5rem,13vw,13rem);letter-spacing:-3px;text-transform:uppercase;
  background-image:linear-gradient(108deg,var(--text) 0%,var(--text) 38%,var(--accent2) 46%,#fff9f0 51%,var(--accent2) 56%,var(--text) 64%,var(--text) 100%);
  background-size:300% 100%;background-position:200% 0;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:a1WordIn .9s cubic-bezier(.22,1,.36,1) both,a1TitleShine 8s ease-in-out 2.5s infinite}
.a1-tl-1{animation-delay:.1s,2.5s}
.a1-tl-2{animation-delay:.22s,2.5s}
.a1-tl-3{animation-delay:.36s,2.5s;font-style:italic}
@keyframes a1WordIn{from{opacity:0;transform:translateY(40px) skewY(3deg)}to{opacity:1;transform:translateY(0) skewY(0)}}
@keyframes a1TitleShine{0%,100%{background-position:200% 0}55%{background-position:-100% 0}}

.a1-hero-foot{display:flex;align-items:flex-end;gap:2rem;margin-top:2rem}
.a1-hero-cover{flex-shrink:0;width:130px;height:130px;border-radius:2px;overflow:hidden;
  border:1px solid rgba(255,255,255,.12);box-shadow:0 16px 48px rgba(0,0,0,.6);position:relative}
.a1-hero-cover img{width:100%;height:100%;object-fit:cover}
.a1-hero-cover-glow{position:absolute;inset:-20px;
  background:radial-gradient(circle,rgba(var(--ar),var(--ag),var(--ab),.35),transparent 65%);
  pointer-events:none;animation:a1CoverGlow 3s ease-in-out infinite alternate}
@keyframes a1CoverGlow{from{opacity:.5}to{opacity:1}}
.a1-hero-right{flex:1}
.a1-hero-desc{font-size:.88rem;color:var(--text2);line-height:1.65;max-width:480px;margin-bottom:1.25rem}
.a1-hero-btns{display:flex;gap:.75rem;flex-wrap:wrap}

.a1-btn-solid{display:inline-flex;align-items:center;gap:.55rem;padding:.75rem 1.9rem;
  background:var(--accent);color:#0a0808;font-size:.72rem;font-weight:700;letter-spacing:2.5px;
  border:none;border-radius:2px;cursor:pointer;transition:all .22s;font-family:'DM Sans',sans-serif}
.a1-btn-solid:hover{background:var(--accent2);transform:translateY(-2px);box-shadow:0 8px 28px rgba(var(--ar),var(--ag),var(--ab),.4)}
.a1-btn-ghost{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.5rem;
  background:transparent;color:var(--text2);font-size:.72rem;font-weight:600;letter-spacing:2.5px;
  border:1px solid var(--border2);border-radius:2px;cursor:pointer;transition:all .2s;
  text-decoration:none;font-family:'DM Sans',sans-serif}
.a1-btn-ghost:hover{border-color:rgba(var(--ar),var(--ag),var(--ab),.45);color:var(--text)}

.a1-scroll-cue{position:absolute;bottom:2rem;right:3rem;z-index:2;display:flex;flex-direction:column;align-items:center;gap:.45rem}
.a1-scroll-text{font-size:.52rem;letter-spacing:3.5px;color:var(--muted);opacity:.4;text-transform:uppercase}
.a1-scroll-bar{width:1px;height:44px;background:linear-gradient(to bottom,var(--accent),transparent);opacity:.4;animation:a1ScrollPulse 2.2s ease-in-out infinite}
@keyframes a1ScrollPulse{
  0%  {transform:scaleY(0);transform-origin:top}
  50% {transform:scaleY(1);transform-origin:top}
  51% {transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}

/* ─── Ticker ──────────────────────────────────────────────────────────────── */
.a1-ticker{overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:.5rem 0;background:var(--bg2)}
.a1-ticker-track{display:flex;width:max-content;white-space:nowrap;animation:a1Ticker 28s linear infinite}
.a1-ticker-item{font-size:.65rem;letter-spacing:3.5px;text-transform:uppercase;padding-right:1.25rem;flex-shrink:0;color:var(--accent);opacity:.55}
@keyframes a1Ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ─── Intro ───────────────────────────────────────────────────────────────── */
.a1-intro{max-width:1000px;margin:0 auto;padding:9rem 3rem 7rem}
.a1-intro-inner{max-width:760px}
.a1-intro-kicker{display:block;font-size:.62rem;letter-spacing:5px;text-transform:uppercase;color:var(--accent);margin-bottom:2rem;opacity:0;transform:translateY(16px);transition:opacity .8s,transform .8s}
.a1-intro-big{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(2.4rem,5vw,4rem);font-style:italic;font-weight:600;line-height:1.08;color:var(--text);margin-bottom:1.75rem;opacity:0;transform:translateY(28px);transition:opacity .9s .12s,transform .9s .12s}
.a1-intro-body{font-size:1.02rem;line-height:1.85;color:var(--text2);max-width:600px;margin-bottom:2.5rem;opacity:0;transform:translateY(24px);transition:opacity .9s .26s,transform .9s .26s}
.a1-intro-body strong{color:var(--accent);font-weight:600}
.a1-intro-inner.is-in .a1-intro-kicker,
.a1-intro-inner.is-in .a1-intro-big,
.a1-intro-inner.is-in .a1-intro-body{opacity:1;transform:translateY(0)}
.a1-acts-row{display:flex;gap:1rem;flex-wrap:wrap;opacity:0;transition:opacity .8s .5s}
.a1-intro-inner.is-in .a1-acts-row{opacity:1}
.a1-act-chip{display:flex;flex-direction:column;padding:.75rem 1.25rem;border:1px solid rgba(255,255,255,.06);border-left:2px solid var(--ac,var(--accent));gap:.2rem}
.a1-act-chip-num{font-size:.55rem;letter-spacing:3px;text-transform:uppercase;color:var(--ac,var(--accent))}
.a1-act-chip-name{font-family:'Cormorant Garamond',Georgia,serif;font-size:1rem;font-style:italic;color:var(--text2)}

/* ─── Arc + cover groupe ──────────────────────────────────────────────────── */
.a1-arc-cover-group{display:flex;align-items:center;gap:1.5rem}
.a1-sticky-cover{width:90px;height:90px;flex-shrink:0;border-radius:2px;overflow:hidden;
  border:1px solid rgba(255,255,255,.12);box-shadow:0 8px 24px rgba(0,0,0,.55)}
.a1-sticky-cover img{width:100%;height:100%;object-fit:cover}

/* ─── Epic — sticky split ──────────────────────────────────────────────── */
.a1-epic{position:relative;max-width:1400px;margin:0 auto;padding:0 3rem;display:grid;grid-template-columns:.9fr 1fr;gap:5rem}
.a1-epic-left{position:relative}
.a1-epic-sticky{position:sticky;top:calc(var(--nav-height) + 2rem);height:min(580px,calc(100vh - var(--nav-height) - var(--player-height) - 4rem));display:flex;flex-direction:column;justify-content:center;gap:2rem}

/* Arc SVG */
.a1-arc-wrap{position:relative;width:120px;height:120px}
.a1-arc-svg{width:100%;height:100%}
.a1-arc-bg{fill:none;stroke:rgba(255,255,255,.06);stroke-width:3}
.a1-arc-fill{fill:none;stroke-width:3;stroke-linecap:round;stroke:var(--accent);transition:stroke-dasharray .4s ease,stroke .5s ease}
.a1-arc-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.a1-arc-num{font-family:'Cormorant Garamond',Georgia,serif;font-size:2.4rem;font-weight:800;font-style:italic;line-height:1;color:var(--accent);transition:color .5s}
.a1-arc-num.pop{animation:a1NumPop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes a1NumPop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
.a1-arc-of{font-size:.55rem;letter-spacing:2px;color:var(--muted);margin-top:.1rem}

.a1-epic-act-label{display:block;font-size:.58rem;letter-spacing:5px;text-transform:uppercase;color:var(--accent);transition:color .5s;margin-bottom:.25rem}
.a1-epic-act-name{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.6rem;font-style:italic;color:var(--text);line-height:1;margin-bottom:.4rem}
.a1-epic-track-title{font-size:.8rem;color:var(--text2);letter-spacing:.3px}

.a1-epic-bar-row{display:flex;align-items:center;gap:.75rem}
.a1-epic-bar{flex:1;height:2px;background:rgba(255,255,255,.08);border-radius:1px;overflow:hidden}
.a1-epic-bar-fill{height:100%;border-radius:1px;background:var(--accent);transition:width .2s linear,background .5s}
.a1-epic-pct{font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums;min-width:36px;text-align:right}

.a1-act-dots{display:flex;gap:.6rem;align-items:center}
.a1-act-dot{width:8px;height:8px;border-radius:50%;border:1px solid rgba(255,255,255,.15);transition:all .35s;background:transparent}
.a1-act-dot.is-active{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,255,255,.08);transform:scale(1.25)}

/* Act séparateurs */
.a1-act-sep{display:flex;align-items:center;gap:1rem;padding:3rem 0 1.5rem;opacity:.55}
.a1-act-sep-num{font-size:.58rem;letter-spacing:4px;text-transform:uppercase;color:var(--accent);flex-shrink:0}
.a1-act-sep-line{flex:1;height:1px;background:var(--border)}
.a1-act-sep-name{font-family:'Cormorant Garamond',Georgia,serif;font-size:.9rem;font-style:italic;color:var(--muted);flex-shrink:0}

/* Chapitres Album I */
.a1-chapter{position:relative;min-height:75vh;display:flex;flex-direction:column;justify-content:center;padding:2.5rem 0;
  opacity:.28;transform:translateY(6px);transition:opacity .6s ease,transform .6s ease}
.a1-chapter.is-focus{opacity:1;transform:translateY(0)}

.a1-chap-ghost{position:absolute;right:-1rem;top:50%;transform:translateY(-50%);
  font-family:'Cormorant Garamond',Georgia,serif;font-size:8rem;font-weight:800;font-style:italic;
  line-height:1;color:rgba(var(--ar),var(--ag),var(--ab),.05);pointer-events:none;user-select:none;transition:color .5s}
.a1-chapter.is-focus .a1-chap-ghost{color:rgb(181 157 90 / 55%)}

.a1-chap-kicker{font-size:.58rem;letter-spacing:4px;text-transform:uppercase;color:var(--accent);margin-bottom:1rem;display:block;opacity:0;transition:opacity .5s .1s}
.a1-chapter.is-focus .a1-chap-kicker{opacity:.7}

.a1-chap-title{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(2rem,4.5vw,3.8rem);font-weight:700;line-height:1.05;color:var(--text);margin-bottom:1.25rem;text-wrap:balance;
  clip-path:inset(0 100% 0 0);transition:clip-path .85s cubic-bezier(.22,1,.36,1) .15s}
.a1-chapter.is-focus .a1-chap-title{clip-path:inset(0 0% 0 0)}

.a1-chap-story{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.15rem;font-style:italic;line-height:1.75;color:var(--text2);max-width:490px;margin-bottom:2rem;
  opacity:0;transform:translateY(14px);transition:opacity .75s .38s,transform .75s .38s}
.a1-chapter.is-focus .a1-chap-story{opacity:1;transform:translateY(0)}

.a1-chap-foot{display:flex;align-items:center;gap:1.25rem;opacity:0;transition:opacity .6s .55s}
.a1-chapter.is-focus .a1-chap-foot{opacity:1}

.a1-chap-play{display:inline-flex;align-items:center;gap:.6rem;padding:.62rem 1.4rem;
  border:1px solid var(--border2);border-radius:99px;background:transparent;color:var(--text2);
  font-size:.68rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:all .2s;font-family:'DM Sans',sans-serif}
.a1-chap-play:hover{border-color:rgba(var(--ar),var(--ag),var(--ab),.45);color:var(--text)}
.a1-chap-play.is-playing{border-color:var(--accent);color:var(--accent);background:rgba(var(--ar),var(--ag),var(--ab),.1)}
.a1-chap-dur{font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums}

/* ─── Climax ──────────────────────────────────────────────────────────────── */
.a1-climax{position:relative;margin-top:6rem;min-height:95vh;display:flex;align-items:center;justify-content:center;overflow:hidden;text-align:center}
.a1-climax-bg{position:absolute;inset:0;z-index:0}
.a1-climax-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.45) saturate(1.3);transform:scale(1.06)}
.a1-climax-veil{position:absolute;inset:0;z-index:1;
  background:radial-gradient(ellipse 65% 65% at 50% 45%,transparent 0%,rgba(0,0,0,.6) 100%),
  linear-gradient(to bottom,var(--bg) 0%,transparent 20%,transparent 80%,var(--bg) 100%)}
.a1-climax-rings{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;pointer-events:none}
.a1-ring{position:absolute;border-radius:50%;border:1px solid rgba(var(--ar),var(--ag),var(--ab),.18);animation:a1RingPulse 3s ease-out infinite}
.a1-ring-1{width:300px;height:300px;animation-delay:0s}
.a1-ring-2{width:500px;height:500px;animation-delay:.8s}
.a1-ring-3{width:720px;height:720px;animation-delay:1.6s}
@keyframes a1RingPulse{0%{transform:scale(.6);opacity:.6}100%{transform:scale(1.4);opacity:0}}
.a1-climax-inner{position:relative;z-index:2;max-width:760px;padding:0 2rem}
.a1-climax-kicker{display:block;font-size:.68rem;letter-spacing:7px;text-transform:uppercase;color:var(--accent);margin-bottom:1.5rem;opacity:0;transform:translateY(18px);transition:opacity .8s,transform .8s}
.a1-climax-title{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(2.8rem,7.5vw,7rem);font-weight:800;font-style:italic;line-height:.95;color:var(--text);margin-bottom:1.5rem;text-wrap:balance;opacity:0;transform:translateY(30px) scale(.96);transition:opacity 1.1s .15s,transform 1.1s .15s}
.a1-climax-sub{font-size:1.05rem;line-height:1.7;color:var(--text2);max-width:520px;margin:0 auto 2.5rem;opacity:0;transform:translateY(20px);transition:opacity .9s .32s,transform .9s .32s}
.a1-climax-btn{display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 2.4rem;background:var(--accent);color:#0a0808;font-size:.74rem;font-weight:700;letter-spacing:2.5px;border:none;border-radius:2px;cursor:pointer;font-family:'DM Sans',sans-serif;opacity:0;transform:translateY(16px);transition:opacity .9s .5s,transform .9s .5s,background .22s,box-shadow .22s}
.a1-climax-btn:hover{background:var(--accent2);box-shadow:0 10px 36px rgba(var(--ar),var(--ag),var(--ab),.45)}
.a1-climax-inner.is-in .a1-climax-kicker,
.a1-climax-inner.is-in .a1-climax-title,
.a1-climax-inner.is-in .a1-climax-sub,
.a1-climax-inner.is-in .a1-climax-btn{opacity:1;transform:translateY(0) scale(1)}

/* ─── Tracklist épilogue A1 ──────────────────────────────────────────────── */
.a1-list-wrap{max-width:1100px;margin:0 auto;padding:6rem 3rem 4rem}
.a1-list-head{display:flex;align-items:center;gap:1.25rem;margin-bottom:2.5rem}
.a1-list-label{font-size:.62rem;letter-spacing:4px;text-transform:uppercase;color:var(--muted);flex-shrink:0}
.a1-list-rule{flex:1;height:1px;background:var(--border)}
.a1-list-count{font-size:.58rem;letter-spacing:3px;color:var(--border2);flex-shrink:0}
.a1-list{display:flex;flex-direction:column}
.a1-row{display:grid;grid-template-columns:46px 1fr auto auto;align-items:center;gap:1.5rem;
  padding:1rem .75rem;border-bottom:1px solid var(--border);cursor:pointer;
  transition:background .18s,border-left-color .18s;border-left:2px solid transparent;
  opacity:0;transform:translateX(-12px)}
.a1-row.is-in{animation:a1RowIn .55s cubic-bezier(.22,1,.36,1) var(--row-delay,0ms) both}
@keyframes a1RowIn{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:translateX(0)}}
.a1-row:hover{background:rgba(255,255,255,.02);border-left-color:var(--accent)}
.a1-row:hover .a1-row-title{color:var(--text)}
.a1-row.is-playing{border-left-color:var(--accent);background:rgba(var(--ar),var(--ag),var(--ab),.06)}
.a1-row.is-playing .a1-row-title{color:var(--accent)}
.a1-row-num{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:1.1rem;color:var(--muted);text-align:center}
.a1-row-title{font-size:.95rem;font-weight:500;color:var(--text2);letter-spacing:.3px;transition:color .18s}
.a1-row-act{font-size:.55rem;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);text-align:right}
.a1-row-dur{font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums;min-width:40px;text-align:right}

/* ─── Barre de nav bas ────────────────────────────────────────────────────── */
.a1-strip{display:flex;align-items:center;justify-content:space-between;padding:2rem 3rem calc(var(--player-height) + 2.5rem);border-top:1px solid var(--border);max-width:1400px;margin:0 auto}
.a1-strip-btn{font-size:.65rem;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);background:none;border:none;cursor:pointer;transition:color .2s;text-decoration:none;display:inline-block;font-family:'DM Sans',sans-serif}
.a1-strip-btn:hover{color:var(--text2)}
.a1-strip-btn--accent:hover{color:var(--accent)}

/* ─── Bars animation (lecture en cours) ─────────────────────────────────── */
.scroll-bars{display:inline-flex;align-items:flex-end;gap:2px;height:13px;vertical-align:middle}
.scroll-bars span{display:inline-block;width:3px;background:var(--accent);border-radius:1px;animation:scVizBar .7s ease-in-out infinite}
.scroll-bars span:nth-child(2){animation-delay:.12s}
.scroll-bars span:nth-child(3){animation-delay:.24s}
.scroll-bars span:nth-child(4){animation-delay:.08s}
@keyframes scVizBar{0%,100%{height:3px}50%{height:13px}}

/* ══════════════════════════════════════════════════════════════════════════
   ALBUM II — « L'Ascension »  (électro · géométrique · contraste)
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── Hero A2 ─────────────────────────────────────────────────────────────── */
.page-album2{background:transparent;min-height:100vh}
.a2-hero{position:relative;min-height:calc(100vh - var(--nav-height));display:flex;flex-direction:column;overflow:hidden}
.a2-hero-blur{position:absolute;inset:0;z-index:0}
.a2-hero-blur img{width:100%;height:100%;object-fit:cover;filter:brightness(.07) saturate(.3) blur(32px);transform:scale(1.08)}
.a2-hero-vignette{position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgba(0,0,0,.1) 0%,transparent 30%,rgba(0,0,0,.65) 80%,var(--bg) 100%)}
.a2-hero-grid{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.a2-grid-vline{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.03);left:calc(var(--gi,0) * 16.66%);animation:a2GridFade 3s ease calc(var(--gi,0) * .2s) forwards;opacity:0}
.a2-grid-hline{position:absolute;left:0;right:0;height:1px;background:rgba(255,255,255,.03);top:calc(var(--gi,0) * 25%)}
@keyframes a2GridFade{from{opacity:0}to{opacity:1}}
.a2-hero-inner{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:space-between;padding:3rem 3rem 3.5rem;max-width:1400px;width:100%;margin:0 auto}
.a2-meta-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.a2-meta-chip{font-size:.62rem;letter-spacing:3px;text-transform:uppercase;color:var(--muted);padding:.25rem .6rem;border:1px solid var(--border2)}
.a2-meta-dot{color:var(--muted);opacity:.4}
.a2-big-title{font-family:'Cormorant Garamond',Georgia,serif;font-weight:800;font-style:italic;
  font-size:clamp(5.5rem,13vw,13rem);letter-spacing:-3px;line-height:.88;text-transform:uppercase;
  background-image:linear-gradient(108deg,var(--text) 0%,var(--text) 42%,var(--accent2) 50%,#fff 54%,var(--accent2) 58%,var(--text) 66%,var(--text) 100%);
  background-size:300% 100%;background-position:200% 0;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:a1WordIn .9s .1s cubic-bezier(.22,1,.36,1) both,a1TitleShine 8s ease-in-out 2.5s infinite}
.a2-hero-foot{display:flex;align-items:flex-end;gap:2rem;margin-top:2rem}
.a2-hero-cover{flex-shrink:0;width:130px;height:130px;border-radius:2px;overflow:hidden;border:1px solid rgba(255,255,255,.12);box-shadow:0 16px 48px rgba(0,0,0,.7)}
.a2-hero-cover img{width:100%;height:100%;object-fit:cover}
.a2-hero-details{flex:1}
.a2-hero-desc{font-size:.88rem;color:var(--text2);line-height:1.65;max-width:480px;margin-bottom:1.25rem}
.a2-hero-btns{display:flex;gap:.75rem;flex-wrap:wrap}
.a2-btn-solid{display:inline-flex;align-items:center;gap:.55rem;padding:.75rem 1.9rem;background:var(--accent);color:#0a0808;font-size:.72rem;font-weight:700;letter-spacing:2.5px;border:none;border-radius:2px;cursor:pointer;transition:all .22s;font-family:'DM Sans',sans-serif}
.a2-btn-solid:hover{background:var(--accent2);transform:translateY(-2px);box-shadow:0 8px 28px rgba(var(--ar),var(--ag),var(--ab),.4)}
.a2-btn-outline{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.5rem;background:transparent;color:var(--text2);font-size:.72rem;font-weight:600;letter-spacing:2.5px;border:1px solid var(--border2);border-radius:2px;cursor:pointer;transition:all .2s;text-decoration:none;font-family:'DM Sans',sans-serif}
.a2-btn-outline:hover{border-color:rgba(var(--ar),var(--ag),var(--ab),.45);color:var(--text)}
.a2-scroll-cue{position:absolute;bottom:2rem;right:3rem;z-index:2;display:flex;flex-direction:column;align-items:center;gap:.45rem}
.a2-scroll-word{font-size:.52rem;letter-spacing:3.5px;color:var(--muted);opacity:.4;text-transform:uppercase}
.a2-scroll-line{width:1px;height:44px;background:linear-gradient(to bottom,var(--accent),transparent);opacity:.4;animation:a1ScrollPulse 2.2s ease-in-out infinite}

/* ─── Ticker A2 ───────────────────────────────────────────────────────────── */
.a2-ticker{overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:.5rem 0;background:var(--bg2)}
.a2-ticker-track{display:flex;width:max-content;white-space:nowrap;animation:a2Ticker 26s linear infinite}
.a2-ticker-item{font-size:.65rem;letter-spacing:3.5px;text-transform:uppercase;padding-right:1.25rem;flex-shrink:0;color:var(--accent);opacity:.5}
@keyframes a2Ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ─── Prologue A2 ─────────────────────────────────────────────────────────── */
.a2-prologue{max-width:900px;margin:0 auto;padding:8rem 3rem 6rem}
.a2-prologue-inner{max-width:680px}
.a2-prologue-kicker{display:block;font-size:.62rem;letter-spacing:5px;text-transform:uppercase;color:var(--accent);margin-bottom:2rem;opacity:0;transform:translateY(16px);transition:opacity .8s,transform .8s}
.a2-prologue-lead{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(2rem,4vw,3.2rem);font-style:italic;font-weight:600;line-height:1.08;color:var(--text);margin-bottom:1.5rem;opacity:0;transform:translateY(28px);transition:opacity .9s .12s,transform .9s .12s}
.a2-prologue-body{font-size:1rem;line-height:1.85;color:var(--text2);max-width:580px;opacity:0;transform:translateY(24px);transition:opacity .9s .26s,transform .9s .26s}
.a2-prologue-body strong{color:var(--accent);font-weight:600}
.a2-prologue-inner.is-in .a2-prologue-kicker,
.a2-prologue-inner.is-in .a2-prologue-lead,
.a2-prologue-inner.is-in .a2-prologue-body{opacity:1;transform:translateY(0)}

/* ─── Climb — sticky split ────────────────────────────────────────────────── */
.a2-climb{position:relative;max-width:1400px;margin:0 auto;padding:0 3rem;display:grid;grid-template-columns:.85fr 1fr;gap:4rem}
.a2-climb-left{position:relative}
.a2-climb-sticky{position:sticky;top:calc(var(--nav-height) + 2rem);height:min(560px,calc(100vh - var(--nav-height) - var(--player-height) - 4rem));display:flex;flex-direction:column;justify-content:center;gap:2rem;align-items:flex-start}
.a2-climb-cover{width:200px;height:200px;border-radius:4px;overflow:hidden;position:relative;transition:transform .4s ease}
.a2-climb-cover img{width:100%;height:100%;object-fit:cover}
.a2-climb-cover-ring{position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(var(--ar),var(--ag),var(--ab),.4);pointer-events:none;transition:opacity .3s;animation:a2CoverRingPulse 2s ease-in-out infinite}
@keyframes a2CoverRingPulse{0%,100%{transform:scale(.95)}50%{transform:scale(1.05)}}
.a2-climb-phase{display:block;font-size:.58rem;letter-spacing:5px;text-transform:uppercase;color:var(--accent);margin-bottom:.4rem}
.a2-climb-bignum{font-family:'Cormorant Garamond',Georgia,serif;font-size:3rem;font-weight:800;font-style:italic;line-height:1;color:var(--text)}
.a2-climb-bignum.pop{animation:a1NumPop .5s cubic-bezier(.34,1.56,.64,1)}
.a2-climb-now{font-size:.82rem;color:var(--text2);margin-top:.3rem}
.a2-climb-gauge{display:flex;align-items:flex-end;gap:1rem}
.a2-climb-rail{width:3px;height:160px;background:rgba(255,255,255,.08);border-radius:2px;position:relative;overflow:hidden}
.a2-climb-fill{position:absolute;bottom:0;left:0;right:0;background:var(--accent);transition:height .2s linear;border-radius:2px}
.a2-climb-marker{position:absolute;left:50%;width:9px;height:9px;border-radius:50%;background:var(--accent);transform:translate(-50%,50%);box-shadow:0 0 0 4px rgba(var(--ar),var(--ag),var(--ab),.18);transition:bottom .2s linear}
.a2-climb-gauge-meta{display:flex;flex-direction:column;gap:.5rem;justify-content:flex-end;padding-bottom:.2rem}
.a2-climb-pct{font-size:1.2rem;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;color:var(--accent);font-variant-numeric:tabular-nums}
.a2-climb-gauge-label{font-size:.52rem;letter-spacing:3px;text-transform:uppercase;color:var(--muted)}

/* Chapitres Album II */
.a2-chapter{position:relative;min-height:78vh;display:flex;flex-direction:column;justify-content:center;padding:2.5rem 0;opacity:.25;transform:translateY(6px);transition:opacity .6s ease,transform .6s ease}
.a2-chapter.is-focus{opacity:1;transform:translateY(0)}
.a2-chap-geo{position:absolute;top:2.5rem;right:0;width:48px;height:48px;pointer-events:none}
.a2-chap-geo-br{display:block;position:absolute;bottom:0;right:0;width:100%;height:100%;border-bottom:1px solid rgba(var(--ar),var(--ag),var(--ab),.18);border-right:1px solid rgba(var(--ar),var(--ag),var(--ab),.18);transition:border-color .3s}
.a2-chapter.is-focus .a2-chap-geo-br{border-color:rgba(var(--ar),var(--ag),var(--ab),.45)}
.a2-chapter-kicker{font-size:.58rem;letter-spacing:4px;text-transform:uppercase;color:var(--accent);margin-bottom:1rem;display:block;opacity:0;transition:opacity .5s .08s}
.a2-chapter.is-focus .a2-chapter-kicker{opacity:.8}
.a2-chapter-kicker-sep{opacity:.5}
.a2-chapter-title{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(2rem,4.5vw,3.8rem);font-weight:700;line-height:1.05;color:var(--text);margin-bottom:1.25rem;text-wrap:balance;clip-path:inset(0 100% 0 0);transition:clip-path .85s cubic-bezier(.22,1,.36,1) .1s}
.a2-chapter.is-focus .a2-chapter-title{clip-path:inset(0 0% 0 0)}
.a2-chapter-story{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.12rem;font-style:italic;line-height:1.75;color:var(--text2);max-width:490px;margin-bottom:2rem;opacity:0;transform:translateY(14px);transition:opacity .75s .35s,transform .75s .35s}
.a2-chapter.is-focus .a2-chapter-story{opacity:1;transform:translateY(0)}
.a2-chapter-foot{display:flex;align-items:center;gap:1.25rem;opacity:0;transition:opacity .6s .55s}
.a2-chapter.is-focus .a2-chapter-foot{opacity:1}
.a2-chapter-play{display:inline-flex;align-items:center;gap:.6rem;padding:.62rem 1.4rem;border:1px solid var(--border2);border-radius:99px;background:transparent;color:var(--text2);font-size:.68rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:all .2s;font-family:'DM Sans',sans-serif}
.a2-chapter-play:hover{border-color:rgba(var(--ar),var(--ag),var(--ab),.45);color:var(--text)}
.a2-chapter-play.is-playing{border-color:var(--accent);color:var(--accent);background:rgba(var(--ar),var(--ag),var(--ab),.1)}
.a2-chapter-dur{font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums}

/* ─── Sommet ──────────────────────────────────────────────────────────────── */
.a2-summit{position:relative;margin-top:6rem;min-height:95vh;display:flex;align-items:center;justify-content:center;overflow:hidden;text-align:center}
.a2-summit-bg{position:absolute;inset:0;z-index:0}
.a2-summit-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.45) saturate(1.4);transform:scale(1.06)}
.a2-summit-veil{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse 65% 65% at 50% 45%,transparent 0%,rgba(0,0,0,.65) 100%),linear-gradient(to bottom,var(--bg) 0%,transparent 20%,transparent 80%,var(--bg) 100%)}
.a2-summit-pulse{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;pointer-events:none}
.a2-sp{position:absolute;border-radius:50%;border:1px solid rgba(var(--ar),var(--ag),var(--ab),.2);animation:a2SummitPulse 3.5s ease-out infinite}
.a2-sp-1{width:250px;height:250px;animation-delay:0s}
.a2-sp-2{width:450px;height:450px;animation-delay:1s}
.a2-sp-3{width:680px;height:680px;animation-delay:2s}
@keyframes a2SummitPulse{0%{transform:scale(.5);opacity:.7}100%{transform:scale(1.5);opacity:0}}
.a2-summit-inner{position:relative;z-index:2;max-width:760px;padding:0 2rem}
.a2-summit-kicker{display:block;font-size:.68rem;letter-spacing:7px;text-transform:uppercase;color:#c5c5c5;margin-bottom:1.5rem;opacity:0;transform:translateY(18px);transition:opacity .8s,transform .8s}
.a2-summit-title{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(2.8rem,7.5vw,7rem);font-weight:800;font-style:italic;line-height:.95;color:var(--text);margin-bottom:1.5rem;text-wrap:balance;opacity:0;transform:translateY(30px) scale(.96);transition:opacity 1.1s .15s,transform 1.1s .15s}
.a2-summit-line{font-size:1rem;line-height:1.7;color:var(--text2);max-width:520px;margin:0 auto 2.5rem;opacity:0;transform:translateY(20px);transition:opacity .9s .32s,transform .9s .32s}
.a2-summit-btn{display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 2.4rem;background:var(--accent);color:#0a0808;font-size:.74rem;font-weight:700;letter-spacing:2.5px;border:none;border-radius:2px;cursor:pointer;font-family:'DM Sans',sans-serif;opacity:0;transform:translateY(16px);transition:opacity .9s .5s,transform .9s .5s,background .22s,box-shadow .22s}
.a2-summit-btn:hover{background:var(--accent2);box-shadow:0 10px 36px rgba(var(--ar),var(--ag),var(--ab),.45)}
.a2-summit-inner.is-in .a2-summit-kicker,
.a2-summit-inner.is-in .a2-summit-title,
.a2-summit-inner.is-in .a2-summit-line,
.a2-summit-inner.is-in .a2-summit-btn{opacity:1;transform:translateY(0) scale(1)}

/* ─── Tracklist A2 ─────────────────────────────────────────────────────────── */
.a2-list-wrap{max-width:1100px;margin:0 auto;padding:6rem 3rem 4rem}
.a2-grid-head{display:flex;align-items:center;gap:1.25rem;margin-bottom:2.5rem}
.a2-grid-label{font-size:.62rem;letter-spacing:4px;text-transform:uppercase;color:var(--muted);flex-shrink:0}
.a2-grid-rule{flex:1;height:1px;background:var(--border)}
.a2-grid-count{font-size:.58rem;letter-spacing:3px;color:var(--border2);flex-shrink:0}
.a2-list{display:flex;flex-direction:column}
.a2-row{display:grid;grid-template-columns:46px 1fr auto auto;align-items:center;gap:1.5rem;padding:1rem .75rem;border-bottom:1px solid var(--border);cursor:pointer;transition:background .18s,border-left-color .18s;border-left:2px solid transparent;opacity:0;transform:translateX(-12px)}
.a2-row.is-in{animation:a1RowIn .55s cubic-bezier(.22,1,.36,1) var(--row-delay,0ms) both}
.a2-row:hover{background:rgba(255,255,255,.02);border-left-color:var(--accent)}
.a2-row:hover .a2-row-title{color:var(--text)}
.a2-row.is-playing{border-left-color:var(--accent);background:rgba(var(--ar),var(--ag),var(--ab),.06)}
.a2-row.is-playing .a2-row-title{color:var(--accent)}
.a2-row-num{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:1.1rem;color:var(--muted);text-align:center}
.a2-row-title{font-size:.95rem;font-weight:500;color:var(--text2);transition:color .18s}
.a2-row-phase{font-size:.55rem;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);text-align:right}
.a2-row-dur{font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums;min-width:40px;text-align:right}

.a2-strip{display:flex;align-items:center;justify-content:space-between;padding:2rem 3rem calc(var(--player-height) + 2.5rem);border-top:1px solid var(--border);max-width:1400px;margin:0 auto}
.a2-strip-btn{font-size:.65rem;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);background:none;border:none;cursor:pointer;transition:color .2s;text-decoration:none;display:inline-block;font-family:'DM Sans',sans-serif}
.a2-strip-btn:hover{color:var(--text2)}
.a2-strip-btn--accent:hover{color:var(--accent)}

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media(max-width:900px){
  .a1-hero-inner,.a2-hero-inner{padding:2rem 1.5rem 2.5rem}
  .a1-hero-foot,.a2-hero-foot{flex-direction:column;align-items:flex-start;gap:1.25rem}
  .a1-epic,.a2-climb{grid-template-columns:1fr;gap:0;padding:0 1.5rem}
  .a1-epic-left,.a2-climb-left{position:static}
  .a1-epic-sticky,.a2-climb-sticky{position:sticky;top:var(--nav-height);height:auto;min-height:0;flex-direction:row;align-items:center;flex-wrap:wrap;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--border);z-index:10}
  .a1-arc-wrap{width:56px;height:56px}
  .a1-arc-num,.a2-climb-bignum{font-size:1.4rem}
  .a1-epic-track-title,.a2-climb-now{display:none}
  .a1-epic-bar-row,.a1-act-dots,.a2-climb-gauge{display:none}
  .a2-climb-cover{width:56px;height:56px}
  .a2-climb-cover-ring{display:none}
  .a1-chapter,.a2-chapter{min-height:65vh;padding:2rem 0}
  .a1-climax,.a2-summit{min-height:80vh}
  .a1-list-wrap,.a2-list-wrap{padding:4rem 1.5rem 3rem}
  .a1-row,.a2-row{grid-template-columns:34px 1fr auto;gap:1rem}
  .a1-row-act,.a2-row-phase{display:none}
  .a1-strip,.a2-strip{padding:1.5rem;flex-direction:column;gap:.75rem;align-items:flex-start}
  .a1-scroll-cue,.a2-scroll-cue{right:1.5rem}
  .a1-intro,.a2-prologue{padding:5rem 1.5rem 4rem}

  /* Ghost number: scale down and pin to top-right corner so it clears the text */
  .a1-chap-ghost{
    font-size:4rem;
    top:.5rem;
    transform:none;
    right:.25rem;
    color:rgba(var(--ar),var(--ag),var(--ab),.06);
  }
  .a1-chapter.is-focus .a1-chap-ghost{
    color:rgba(var(--ar),var(--ag),var(--ab),.15);
  }
}
@media(max-width:480px){
  .a1-tl,.a2-big-title{font-size:clamp(3.5rem,15vw,6rem);letter-spacing:-1.5px}
  .a1-chap-story,.a2-chapter-story{font-size:1rem}
  /* Hide ghost entirely on small phones — text readability takes priority */
  .a1-chap-ghost{display:none}
}

/* ─── Settings page ───────────────────────────────────────────────────────── */
.settings-page { background: var(--bg); }
.settings-wrapper { padding-top: calc(var(--nav-height) + 2.5rem); padding-bottom: 5rem; min-height: 100vh; }
.settings-inner { max-width: 900px; margin: 0 auto; padding: 0 2rem; }

.settings-header { margin-bottom: 2.5rem; }
.settings-title { font-family:'Cormorant Garamond',serif; font-size:2.2rem; font-weight:600; color:var(--text); letter-spacing:-.5px; margin:0 0 .35rem; }
.settings-subtitle { color:var(--muted); font-size:.875rem; margin:0; }

.settings-layout { display:flex; gap:3rem; align-items:flex-start; }

/* Sidebar */
.settings-sidebar { width:185px; flex-shrink:0; }
.settings-nav { display:flex; flex-direction:column; gap:.2rem; }
.settings-nav-item { display:flex; align-items:center; gap:.55rem; padding:.6rem .9rem; border-radius:6px; color:var(--muted); font-size:.84rem; text-decoration:none; transition:background .15s,color .15s; font-family:'DM Sans',sans-serif; white-space:nowrap; }
.settings-nav-item:hover { background:rgba(255,255,255,.04); color:var(--text2); }
.settings-nav-item.active { background:rgba(255,255,255,.07); color:var(--text); }
.settings-nav-item svg { flex-shrink:0; opacity:.65; }
.settings-nav-item.active svg { opacity:1; }
.settings-nav-item--danger { color:rgba(239,68,68,.7); }
.settings-nav-item--danger:hover,.settings-nav-item--danger.active { background:rgba(239,68,68,.08); color:#ef4444; }

/* Content */
.settings-content { flex:1; min-width:0; }
.settings-section { display:block; }
.settings-section.hidden { display:none; }
.settings-section-header { margin-bottom:2rem; padding-bottom:1.1rem; border-bottom:1px solid var(--border); }
.settings-section-title { font-family:'Cormorant Garamond',serif; font-size:1.35rem; font-weight:600; color:var(--text); margin:0 0 .3rem; letter-spacing:-.15px; }
.settings-section-title--danger { color:#ef4444; }
.settings-section-desc { color:var(--muted); font-size:.85rem; margin:0; }

/* Form */
.settings-form .form-group { margin-bottom:1.4rem; }
.settings-form label { display:block; font-size:.75rem; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); margin-bottom:.45rem; font-family:'DM Sans',sans-serif; }
.settings-form .form-input { width:100%; max-width:400px; background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:6px; padding:.65rem .95rem; color:var(--text); font-size:.925rem; font-family:'DM Sans',sans-serif; transition:border-color .2s,background .2s; box-sizing:border-box; }
.settings-form .form-input:focus { outline:none; border-color:var(--accent); background:rgba(255,255,255,.07); }
.form-hint { font-size:.77rem; color:var(--muted); margin:.4rem 0 0; font-style:italic; }
.form-actions { margin-top:1.75rem; }
.btn-settings-primary { background:var(--accent); color:#000; border:none; padding:.6rem 1.5rem; border-radius:6px; font-size:.8rem; letter-spacing:1.4px; text-transform:uppercase; font-family:'DM Sans',sans-serif; font-weight:500; cursor:pointer; transition:opacity .2s,transform .15s; }
.btn-settings-primary:hover { opacity:.85; transform:translateY(-1px); }
.btn-settings-primary:active { transform:translateY(0); }

/* Alerts */
.alert { padding:.7rem 1rem; border-radius:6px; font-size:.85rem; margin-bottom:1.5rem; max-width:400px; font-family:'DM Sans',sans-serif; }
.alert-success { background:rgba(74,222,128,.08); border:1px solid rgba(74,222,128,.25); color:#4ade80; }
.alert-info    { background:rgba(99,179,237,.08); border:1px solid rgba(99,179,237,.25); color:#63b3ed; }

/* Danger zone */
.danger-zone { background:rgba(239,68,68,.04); border:1px solid rgba(239,68,68,.18); border-radius:8px; padding:1.5rem; }
.danger-zone-info { margin-bottom:1.25rem; }
.danger-zone-info p { color:var(--text2); font-size:.875rem; margin:0 0 .5rem; }
.danger-zone-info ul { color:var(--muted); font-size:.85rem; padding-left:1.2rem; display:flex; flex-direction:column; gap:.25rem; }
.btn-settings-danger { background:transparent; border:1px solid #ef4444; color:#ef4444; padding:.6rem 1.4rem; border-radius:6px; font-size:.8rem; letter-spacing:1.2px; text-transform:uppercase; font-family:'DM Sans',sans-serif; cursor:pointer; transition:background .2s,color .2s; }
.btn-settings-danger:hover { background:#ef4444; color:#fff; }
.btn-settings-danger:disabled { opacity:.38; cursor:not-allowed; }
.btn-settings-danger:disabled:hover { background:transparent; color:#ef4444; }
.btn-settings-outline { background:transparent; border:1px solid var(--border); color:var(--muted); padding:.6rem 1.4rem; border-radius:6px; font-size:.8rem; letter-spacing:1.2px; text-transform:uppercase; font-family:'DM Sans',sans-serif; cursor:pointer; transition:border-color .2s,color .2s; }
.btn-settings-outline:hover { border-color:var(--text2); color:var(--text2); }

/* Modal */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.78); z-index:1000; display:flex; align-items:center; justify-content:center; padding:1rem; backdrop-filter:blur(4px); }
.modal-box { background:#181620; border:1px solid var(--border); border-radius:10px; padding:2rem; max-width:430px; width:100%; }
.modal-title { font-family:'Cormorant Garamond',serif; font-size:1.4rem; font-weight:600; color:var(--text); margin:0 0 .75rem; }
.modal-desc { color:var(--muted); font-size:.875rem; margin:0 0 1.25rem; line-height:1.65; }
.modal-username { color:#ef4444; }
.modal-confirm-input { width:100%; margin-bottom:.5rem; box-sizing:border-box; }
.modal-actions { display:flex; gap:.75rem; margin-top:1.25rem; justify-content:flex-end; }

/* Responsive */
@media(max-width:700px) {
  .settings-layout { flex-direction:column; gap:1.5rem; }
  .settings-sidebar { width:100%; }
  .settings-nav { flex-direction:row; overflow-x:auto; padding-bottom:.4rem; gap:.35rem; }
  .settings-form .form-input { max-width:100%; }
  .alert { max-width:100%; }
}