/* ============================================================
   celina-discographie.css  v1.5.0 — 26.6.26
   Pages : index discographie, albums, titres, packs
   Chargé conditionnellement via functions.php
   ============================================================ */

/* ── Variables ────────────────────────────────────────────── */

body.page-template-page-discographie,
body.single-discography,
body.single-titre,
body.single-pack {
  --disco-bg:        #1C0038;
  --disco-bg-deep:   #130025;
  --disco-bg-light:  #F5F2EE;
  --disco-text:      #FFFFFF;
  --disco-text-muted:rgba(255,255,255,0.7);
  --disco-accent:    #7B2D8B;
  --disco-accent-2:  #B040C8;
  --disco-border:    rgba(255,255,255,0.12);
  --disco-card-border: rgba(255,255,255,0.1);
  --disco-card-bg:   rgba(255,255,255,0.04);
  --disco-card-hover:rgba(255,255,255,0.08);
  --disco-spotify:   #1DB954;
  --disco-apple:     #FC3C44;
  --disco-deezer:    #FF0092;
  --disco-ytmusic:   #FF0000;
  --disco-font-d:    var(--font-display);
  --disco-font-b:    var(--font-body);
  --disco-max-w:     1220px;
  --disco-gutter:    clamp(1.25rem, 4vw, 2.5rem);
  --disco-ease:      cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Header dark (même pattern que page-biographie) ─────────── */

body.page-template-page-discographie .header,
body.single-discography .header,
body.single-titre .header,
body.single-pack .header {
  background-color: var(--disco-bg);
}

body.page-template-page-discographie .header ul.menu li a,
body.single-discography .header ul.menu li a,
body.single-titre .header ul.menu li a,
body.single-pack .header ul.menu li a {
  color: var(--disco-text);
}

body.page-template-page-discographie .header ul.menu li a:hover,
body.single-discography .header ul.menu li a:hover,
body.single-titre .header ul.menu li a:hover,
body.single-pack .header ul.menu li a:hover {
  color: var(--disco-accent-2);
}

body.page-template-page-discographie .header ul.menu li.current-menu-item > a,
body.page-template-page-discographie .header ul.menu li.current-menu-parent > a,
body.single-discography .header ul.menu li.current-menu-item > a,
body.single-discography .header ul.menu li.current-menu-parent > a,
body.single-titre .header ul.menu li.current-menu-item > a,
body.single-titre .header ul.menu li.current-menu-parent > a,
body.single-pack .header ul.menu li.current-menu-item > a,
body.single-pack .header ul.menu li.current-menu-parent > a {
  color: var(--disco-accent-2);
}

/* Fallback : marquer DISCOGRAPHIE comme actif sur les pages enfants */
body.single-discography .header nav.main_nav a[href*="/discographie"],
body.single-titre .header nav.main_nav a[href*="/discographie"],
body.single-pack .header nav.main_nav a[href*="/discographie"] {
  color: var(--disco-accent-2);
}

/* Icônes streaming blanches sur fond sombre */
body.page-template-page-discographie nav.secondary_menu ul.menu li.menu-icon a::before,
body.single-discography nav.secondary_menu ul.menu li.menu-icon a::before,
body.single-titre nav.secondary_menu ul.menu li.menu-icon a::before,
body.single-pack nav.secondary_menu ul.menu li.menu-icon a::before {
  background-color: var(--disco-text);
}

/* Scrolled : icônes streaming repassent en sombre (header redevenu blanc) —
   sans ce reset elles restaient blanches sur fond blanc une fois scrollé. */
body.page-template-page-discographie .header.smallscroll nav.secondary_menu ul.menu li.menu-icon a::before,
body.single-discography .header.smallscroll nav.secondary_menu ul.menu li.menu-icon a::before,
body.single-titre .header.smallscroll nav.secondary_menu ul.menu li.menu-icon a::before,
body.single-pack .header.smallscroll nav.secondary_menu ul.menu li.menu-icon a::before {
  background-color: #1C0038;
}

/* Scrolled : revenir au header semi-transparent */
body.page-template-page-discographie .header.smallscroll,
body.single-discography .header.smallscroll,
body.single-titre .header.smallscroll,
body.single-pack .header.smallscroll {
  background-color: rgba(255, 255, 255, 0.80);
}

body.page-template-page-discographie .header.smallscroll ul.menu li a,
body.single-discography .header.smallscroll ul.menu li a,
body.single-titre .header.smallscroll ul.menu li a,
body.single-pack .header.smallscroll ul.menu li a {
  color: #1C0038;
}

body.page-template-page-discographie .header.smallscroll ul.menu li a:hover,
body.single-discography .header.smallscroll ul.menu li a:hover,
body.single-titre .header.smallscroll ul.menu li a:hover,
body.single-pack .header.smallscroll ul.menu li a:hover {
  color: #52ade1;
}

body.page-template-page-discographie .header.smallscroll ul.menu li.current-menu-item > a,
body.page-template-page-discographie .header.smallscroll ul.menu li.current-menu-parent > a,
body.single-discography .header.smallscroll ul.menu li.current-menu-item > a,
body.single-discography .header.smallscroll ul.menu li.current-menu-parent > a,
body.single-titre .header.smallscroll ul.menu li.current-menu-item > a,
body.single-titre .header.smallscroll ul.menu li.current-menu-parent > a,
body.single-pack .header.smallscroll ul.menu li.current-menu-item > a,
body.single-pack .header.smallscroll ul.menu li.current-menu-parent > a {
  color: #B040C8;
}

/* Fallback : marquer DISCOGRAPHIE comme actif sur les pages enfants (scrolled) */
body.single-discography .header.smallscroll nav.main_nav a[href*="/discographie"],
body.single-titre .header.smallscroll nav.main_nav a[href*="/discographie"],
body.single-pack .header.smallscroll nav.main_nav a[href*="/discographie"] {
  color: #B040C8;
}

/* Menu toggle visible sur fond sombre */
body.page-template-page-discographie .header .menu-toggle,
body.single-discography .header .menu-toggle,
body.single-titre .header .menu-toggle {
  background-color: #B040C8;
}

/* ── Main page container ───────────────────────────────────── */

.disco-page {
  background: var(--disco-bg);
  color:       var(--disco-text);
  font-family: var(--disco-font-b);
  min-height:  100vh;
}

.disco-page.pack-detail-page {
  background: var(--disco-bg);
  color:       var(--disco-text);
}

.disco-container {
  max-width:     var(--disco-max-w);
  padding-inline:var(--disco-gutter);
  margin-inline: auto;
}

/* ── Hero ─────────────────────────────────────────────────── */

.disco-hero {
  padding-block: clamp(8rem, 17vw, 15rem) clamp(3rem, 7.5vw, 6.625rem);
  text-align: center;
}
/* Quand une cover est affichée au-dessus, le titre est déjà rendu par la cover :
   le hero ne contient que le texte d'intro → on réduit le padding haut pour
   coller exactement à l'espace de page-biographie (.bio-hero--after-cover). */
.disco-hero--after-cover {
  padding-block-start: clamp(2rem, 5vw, 3.5rem);
}

.disco-hero__eyebrow {
  font-size:      0.75rem;
  font-weight:    600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color:          var(--disco-text-muted);
  margin-bottom:  1.25rem;
}

.disco-hero__title {
  margin-top: -50px;
  margin-bottom: 1.5rem;
}

.disco-hero__text {
  max-width:  62ch; /* 52ch + 20% (marges G/D réduites de 20%) */
  margin-inline: auto;
  color:      var(--disco-text-muted);
  font-size:  clamp(1rem, 1.5vw, 1.125rem);
  line-height:1.7;
}

/* ── Tabs ─────────────────────────────────────────────────── */

.disco-tabs-wrap {
  width:           min(calc(100% - var(--disco-gutter) * 2), var(--disco-max-w));
  margin:          0 auto;
  padding:         2rem 0;
  display:         flex;
  justify-content: center;
}

.disco-tabs {
  display:         flex;
  gap:             0.4rem;
  padding:         0.25rem;
  background:      rgba(255,255,255,0.06);
  border-radius:   100px;
  border:          1px solid rgba(255,255,255,0.07);
  flex-wrap:       wrap;
  justify-content: center;
}

.disco-tab {
  flex-shrink:    0;
  padding:        0.5rem 1.25rem;
  font-family:    var(--disco-font-b);
  font-size:      0.73rem;
  font-weight:    600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color:          rgba(255,255,255,0.55);
  background:     none;
  border:         none;
  border-radius:  100px;
  cursor:         pointer;
  transition:     all 0.25s var(--disco-ease);
  white-space:    nowrap;
}

.disco-tab.is-active,
.disco-tab[aria-selected="true"] {
  background: #fff;
  color:      var(--disco-bg);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.disco-tab:hover:not(.is-active) {
  color: var(--disco-text);
}

.disco-tab:focus-visible {
  outline:        2px solid var(--disco-accent-2);
  outline-offset: -2px;
  border-radius:  100px;
}

/* ── Tab panels ───────────────────────────────────────────── */

.tab-panel {
  display: none;
}
.tab-panel.is-active {
  display: block;
  padding-top: 10px;
  animation: tabFadeIn 0.3s var(--disco-ease) both;
}
@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tab-panel:focus-visible {
  outline: none;
}

/* ── Section header ───────────────────────────────────────── */

.section-header {
  display:       flex;
  align-items:   baseline;
  gap:           1rem;
  margin-bottom: 2.5rem;
  padding-bottom:0.75rem;
  border-bottom: 1px solid var(--disco-border);
}

.section-header__title {
  font-family: var(--disco-font-d);
  font-size:   clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 600;
  line-height: 1.1;
}

.section-header__count {
  font-size:  0.8125rem;
  color:      var(--disco-text-muted);
  font-weight:500;
}

/* ── Disco sections & grids ───────────────────────────────── */

.disco-section {
  padding-block: clamp(3rem, 6vw, 5rem);
}

.disco-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:                   1.75rem;
}

.disco-grid--titres {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap:                   1.25rem;
}

/* ── Cover card ───────────────────────────────────────────── */

.cover-card {
  display:       flex;
  flex-direction:column;
  gap:           1rem;
  text-decoration: none;
  color:         inherit;
  cursor:        pointer;
  opacity:       0;
  transform:     translateY(20px);
  transition:    opacity 0.5s var(--disco-ease), transform 0.5s var(--disco-ease);
}

.cover-card.is-visible {
  opacity:   1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .cover-card { opacity: 1; transform: none; transition: none; }
}

.cover-card__img-wrap {
  position:     relative;
  aspect-ratio: 1 / 1;
  overflow:     hidden;
  border-radius: 2px;
  background:   var(--disco-card-bg);
}

.cover-card__img-wrap img {
  width:          100%;
  height:         100%;
  object-fit:     cover;
  transition:     transform 0.5s var(--disco-ease);
  display:        block;
}

.cover-card:hover .cover-card__img-wrap img,
.cover-card:focus-visible .cover-card__img-wrap img {
  transform: scale(1.04);
}

.cover-card__placeholder {
  width:         100%;
  height:        100%;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-family:   var(--disco-font-d);
  font-size:     clamp(0.85rem, 2vw, 1.1rem);
  font-weight:   700;
  line-height:   1.2;
  color:         rgba(255,255,255,0.85);
  text-shadow:   0 2px 8px rgba(0,0,0,0.5);
  padding:       1rem;
  position:      relative;
  background-image: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 60%);
}
.cover-card__placeholder::after {
  content:  '';
  position: absolute;
  inset:    0;
  background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 60%);
  pointer-events: none;
}
.cover-card__placeholder span { position: relative; z-index: 1; }
.vinyl-icon {
  width:  60%;
  height: 60%;
  max-width: 150px;
  max-height: 150px;
  position: relative;
  z-index: 2;
}

/* Fallback pour cover-placeholder utilisé dans cpt-item-titre */
.cover-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: relative;
}

.cover-card__badge {
  position:     absolute;
  top:          0.6rem;
  right:        0.6rem;
  font-size:    0.65rem;
  font-weight:  700;
  letter-spacing: 0.04em;
  text-transform:uppercase;
  padding:      0.25rem 0.5rem;
  border-radius:2px;
  background:   var(--disco-accent-2);
  color:        #fff;
}

/* ── Cover card overlay + play button ──────────────────────── */

.cover-card__overlay {
  position:        absolute;
  inset:           0;
  background:      rgba(123,45,139,0.55);
  opacity:         0;
  transition:      opacity 0.3s var(--disco-ease);
  display:         flex;
  align-items:     center;
  justify-content: center;
  pointer-events:  none;
}

.cover-card:hover .cover-card__overlay,
.cover-card:focus-visible .cover-card__overlay {
  opacity: 1;
}

.cover-card__play {
  width:        52px;
  height:       52px;
  border-radius:50%;
  background:   #fff;
  display:      flex;
  align-items:  center;
  justify-content: center;
  transform:    scale(0.7);
  opacity:      0;
  transition:   transform 0.35s var(--disco-ease), opacity 0.3s var(--disco-ease);
  box-shadow:   0 4px 20px rgba(0,0,0,0.3);
}
.cover-card__play svg {
  width:       20px;
  height:      20px;
  fill:        #1C0038;
  margin-left: 3px;
}
.cover-card:hover .cover-card__play,
.cover-card:focus-visible .cover-card__play {
  transform: scale(1);
  opacity:   1;
}

@media (prefers-reduced-motion: reduce) {
  .cover-card__overlay,
  .cover-card__play { transition: none; }
}

/* ── Cover card meta ─────────────────────────────────────── */

.cover-card__meta {
  display:        flex;
  flex-direction: column;
  gap:            0.25rem;
}

.cover-card__title {
  font-family:  var(--disco-font-d);
  font-size:    1.1rem;
  font-weight:  600;
  line-height:  1.2;
  color:        var(--disco-text);
}

.cover-card__year {
  font-size: 0.8125rem;
  color:     var(--disco-text-muted);
}

.cover-card__type {
  font-size:      0.6rem;
  font-weight:    700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color:          var(--disco-accent-2);
  margin-top:     0.1rem;
}

.cover-card:focus-visible {
  outline:        2px solid var(--disco-accent-2);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ── Titre récent ─────────────────────────────────────────── */

.titre-recent {
  padding-block: clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid var(--disco-border);
}

.titre-recent__label {
  font-size:      0.75rem;
  font-weight:    600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color:          var(--disco-accent-2);
  margin-bottom:  2rem;
}

.titre-recent__card {
  display:    grid;
  gap:        2.5rem 3rem;
  align-items:center;
  opacity:    0;
  transform:  translateY(20px);
  transition: opacity 0.6s var(--disco-ease), transform 0.6s var(--disco-ease);
}

.titre-recent__card.is-visible {
  opacity:   1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .titre-recent__card { opacity: 1; transform: none; transition: none; }
}

@media (min-width: 700px) {
  .titre-recent__card {
    grid-template-columns: 240px 1fr;
  }
}

.titre-recent__cover {
  aspect-ratio: 1 / 1;
  border-radius: 2px;
  overflow:     hidden;
  background:   var(--disco-card-bg);
}
.titre-recent__cover img {
  width:     100%;
  height:    100%;
  object-fit:cover;
  display:   block;
}
.titre-recent__cover .cover-card__placeholder {
  width:  100%;
  height: 100%;
}

.titre-recent__info {
  display:       flex;
  flex-direction:column;
  gap:           1rem;
}

.titre-recent__title {
  font-family: var(--disco-font-d);
  font-size:   clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1.1;
}

.titre-recent__date {
  font-size: 0.875rem;
  color:     var(--disco-text-muted);
}

.titre-recent__desc {
  color:       var(--disco-text-muted);
  line-height: 1.65;
  max-width:   52ch;
}

/* ── Streaming buttons ────────────────────────────────────── */

.streaming-btns {
  display:   flex;
  flex-wrap: wrap;
  gap:       0.5rem;
  margin-top:0.5rem;
}

.btn-streaming {
  display:        inline-flex;
  align-items:    center;
  gap:            0.5rem;
  padding:        0.5rem 1rem;
  border-radius:  100px;
  font-size:      0.8125rem;
  font-weight:    600;
  font-family:    var(--disco-font-b);
  text-decoration:none;
  color:          #fff;
  background:     rgba(255,255,255,0.1);
  border:         1px solid rgba(255,255,255,0.15);
  transition:     background 0.2s, transform 0.15s;
  white-space:    nowrap;
}
.btn-streaming:hover { background: rgba(255,255,255,0.18); transform: translateY(-1px); }
.btn-streaming:focus-visible { outline: 2px solid var(--disco-accent-2); outline-offset: 2px; }

.btn-streaming svg { width: 14px; height: 14px; flex-shrink: 0; }

.btn-streaming--spotify  { background: var(--disco-spotify);  border-color: var(--disco-spotify);  }
.btn-streaming--spotify:hover  { background: #17a745; }
.btn-streaming--apple    { background: var(--disco-apple);    border-color: var(--disco-apple);    }
.btn-streaming--apple:hover    { background: #e0353d; }
.btn-streaming--deezer   { background: var(--disco-deezer);   border-color: var(--disco-deezer);   }
.btn-streaming--deezer:hover   { background: #d90080; }
.btn-streaming--ytmusic  { background: var(--disco-ytmusic);  border-color: var(--disco-ytmusic);  }
.btn-streaming--ytmusic:hover  { background: #d90000; }

/* ── Action links (paroles, commande, téléchargement) ─────── */

.disco-action-links {
  display:   flex;
  flex-wrap: wrap;
  gap:       0.5rem;
  margin-top:0.75rem;
}

.disco-action-link {
  display:        inline-flex;
  align-items:    center;
  gap:            0.4rem;
  padding:        0.5rem 0.875rem;
  border-radius: 2px;
  font-size:      0.8rem;
  font-weight:    500;
  text-decoration:none;
  color:          var(--disco-text);
  background:     transparent;
  border:         1px solid var(--disco-border);
  transition:     border-color 0.2s, color 0.2s;
}
.disco-action-link:hover { border-color: rgba(255,255,255,0.4); color: #fff; }
.disco-action-link svg { width: 13px; height: 13px; opacity: 0.7; }

/* ── Audio player ─────────────────────────────────────────── */

.player {
  background:    var(--disco-card-bg);
  border:        1px solid var(--disco-border);
  border-radius: 2px;
  overflow:      hidden;
  margin-block:  2rem;
}

.player__top {
  display:       flex;
  align-items:   center;
  gap:           1rem;
  padding:       1rem 1.25rem;
  background:    rgba(255,255,255,0.03);
  border-bottom: 1px solid var(--disco-border);
}

.player__cover {
  width:         48px;
  height:        48px;
  border-radius: 2px;
  object-fit:    cover;
  flex-shrink:   0;
}

.player__info {
  flex: 1;
  min-width: 0;
}
.player__track-title {
  font-weight:   600;
  font-size:     0.9375rem;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}
.player__album-name {
  font-size: 0.8125rem;
  color:     var(--disco-text-muted);
  margin-top:0.1rem;
}

.player__controls {
  display:    flex;
  align-items:center;
  gap:        0.5rem;
}
.player__btn {
  display:        flex;
  align-items:    center;
  justify-content:center;
  width:          36px;
  height:         36px;
  border:         none;
  background:     transparent;
  color:          var(--disco-text);
  cursor:         pointer;
  border-radius:  50%;
  transition:     background 0.15s;
}
.player__btn:hover { background: rgba(255,255,255,0.1); }
.player__btn:focus-visible { outline: 2px solid var(--disco-accent-2); outline-offset: 1px; }
.player__btn--play {
  width:      44px;
  height:     44px;
  background: var(--disco-accent);
  color:      #fff;
}
.player__btn--play:hover { background: var(--disco-accent-2); }
.player__btn svg { width: 18px; height: 18px; }
.player__btn--play svg { width: 20px; height: 20px; }

.player__progress-wrap {
  padding:    0 1.25rem 0;
  display:    flex;
  align-items:center;
  gap:        0.75rem;
}
.player__time {
  font-size:   0.75rem;
  color:       var(--disco-text-muted);
  font-variant-numeric: tabular-nums;
  min-width:   2.5rem;
}
.player__time--total { text-align: right; }

.player__progress {
  flex:               1;
  -webkit-appearance: none;
  appearance:         none;
  height:             4px;
  background:         rgba(255,255,255,0.15);
  border-radius:      2px;
  cursor:             pointer;
  outline:            none;
}
.player__progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  width:        14px;
  height:       14px;
  border-radius:50%;
  background:   var(--disco-accent-2);
  cursor:       pointer;
}
.player__progress::-moz-range-thumb {
  width:         14px;
  height:        14px;
  border-radius: 50%;
  background:    var(--disco-accent-2);
  border:        none;
  cursor:        pointer;
}
.player__progress:focus-visible { outline: 2px solid var(--disco-accent-2); }

.player__tracklist {
  list-style: none;
  padding:    0;
  margin:     0;
  border-top: 1px solid var(--disco-border);
}

.player__tracklist-item {
  display:         flex;
  align-items:     center;
  gap:             0.75rem;
  padding:         0.625rem 1.25rem;
  cursor:          pointer;
  transition:      background 0.15s;
  border-bottom:   1px solid var(--disco-border);
}
.player__tracklist-item:last-child { border-bottom: none; }
.player__tracklist-item:hover { background: var(--disco-card-hover); }
.player__tracklist-item.is-playing { color: var(--disco-accent-2); }

.player__track-num {
  font-size:            0.75rem;
  color:                var(--disco-text-muted);
  font-variant-numeric: tabular-nums;
  min-width:            1.25rem;
  text-align:           right;
}
.player__tracklist-item.is-playing .player__track-num { color: var(--disco-accent-2); }
.player__track-name { flex: 1; font-size: 0.875rem; }
.player__track-dur  { font-size: 0.75rem; color: var(--disco-text-muted); font-variant-numeric: tabular-nums; }

/* ── Streaming embed ──────────────────────────────────────── */

.disco-embed {
  border-radius: 2px;
  overflow:      hidden;
  margin-block:  2rem;
  background:    var(--disco-card-bg);
}

.disco-embed iframe {
  display: block;
  width:   100%;
  border:  none;
}

/* ── Packs hero ───────────────────────────────────────────── */

.packs-hero {
  padding-block:  clamp(1.5rem, 3vw, 2.5rem);
  max-width:      70ch;
}

.packs-hero__title {
  font-family:  var(--disco-font-d);
  font-size:    clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight:  600;
  margin-bottom:1.25rem;
}

.packs-hero__text {
  color:      var(--disco-text-muted);
  font-size:  1.125rem;
  line-height:1.7;
}
.packs-hero__text p {
  font-size: 1.125rem;
  margin-bottom: 0.75rem;
}
.packs-hero__text p:last-child { margin-bottom: 0; }

/* ── Packs grid & card ────────────────────────────────────── */

.packs-section {
  padding-bottom: clamp(4rem, 8vw, 7rem);
}

.packs-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:                   1.75rem;
}

.pack-card {
  display:        flex;
  flex-direction: column;
  gap:            0.625rem;
  padding:        0.75rem;
  background:     var(--disco-card-bg);
  border:         1px solid var(--disco-border);
  border-radius: 2px;
  text-decoration:none;
  color:          inherit;
  transition:     background 0.2s, transform 0.2s var(--disco-ease);
  opacity:        0;
  transform:      translateY(20px);
}
.pack-card.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .pack-card { opacity: 1; transform: none; transition: none; } }

.pack-card:hover { background: var(--disco-card-hover); transform: translateY(-3px); }
.pack-card:focus-visible { outline: 2px solid var(--disco-accent-2); outline-offset: 3px; border-radius: 2px; }

.pack-card__cover {
  aspect-ratio:  1 / 1;
  border-radius: 2px;
  overflow:      hidden;
  background:    var(--disco-card-bg);
  position:      relative;
}
.pack-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pack-card__cover .pack-cover-placeholder { border-radius: 0; }

.pack-card__title {
  font-family: var(--disco-font-d);
  font-size:   1.25rem;
  font-weight: 600;
  line-height: 1.2;
  color:       var(--disco-text);
}
.pack-card__sub,
.pack-card__type {
  font-size:  0.8125rem;
  color:      var(--disco-text-muted);
  line-height:1.5;
}

.pack-card__contenu {
  list-style: none;
  padding:    0;
  margin:     0;
  display:    flex;
  flex-direction:column;
  gap:        0.35rem;
}
.pack-card__contenu li {
  font-size:  0.8125rem;
  color:      var(--disco-text-muted);
  display:    flex;
  align-items:baseline;
  gap:        0.4rem;
}
.pack-card__contenu li::before {
  content:     '✓';
  color:       var(--disco-accent-2);
  font-weight: 700;
  flex-shrink: 0;
}

.pack-card__cta {
  margin-top: auto;
  display:    inline-flex;
  align-items:center;
  gap:        0.4rem;
  font-size:  0.8125rem;
  font-weight:600;
  color:      var(--disco-accent-2);
}
.pack-card__cta svg { width: 13px; height: 13px; }

/* ── Pack detail page ─────────────────────────────────────── */

/* ── Pack detail page ─────────────────────────────────────── */

.pack-detail-page {
  background:  var(--disco-bg);
  color:       var(--disco-text);
  font-family: var(--disco-font-b);
  min-height:  100vh;
}

.pack-back-link {
  color: var(--disco-text-muted);
}
.pack-back-link svg { stroke: var(--disco-text-muted); }
.pack-back-link:hover { color: var(--disco-text); }

.pack-detail-wrap {
  max-width:      var(--disco-max-w);
  margin:         0 auto;
  padding-inline: var(--disco-gutter);
  padding-block:  clamp(2rem, 4vw, 3rem);
}

.pack-detail-back { margin-bottom: 2rem; }

.pack-detail {
  display:     grid;
  gap:         clamp(2rem, 5vw, 5rem);
  align-items: start;
}

@media (min-width: 768px) {
  .pack-detail { grid-template-columns: clamp(220px, 28vw, 340px) 1fr; }
  .pack-detail__left { position: sticky; top: 5rem; }
}

.pack-detail__cover {
  aspect-ratio:  1 / 1;
  border-radius: 2px;
  overflow:      hidden;
  box-shadow:    0 16px 48px rgba(0,0,0,0.2);
  margin-bottom: 1.25rem;
}
.pack-detail__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Cover placeholder pack ──────────────────────────────── */

.pack-cover-placeholder {
  width:           100%;
  height:          100%;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  padding:         1.5rem;
  text-align:      center;
  position:        relative;
}

.pack-cover-placeholder__label {
  font-family:   var(--disco-font-d);
  font-size:     clamp(1.4rem, 3vw, 2.2rem);
  font-weight:   700;
  color:         rgba(255,255,255,0.2);
  line-height:   1.1;
  letter-spacing: 0.04em;
}

.pack-cover-placeholder__title {
  font-size:      0.8rem;
  font-weight:    700;
  color:          rgba(255,255,255,0.85);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top:     0.75rem;
}

.pack-cover-placeholder__sig {
  position:    absolute;
  bottom:      0.75rem;
  right:       0.85rem;
  font-size:   0.6rem;
  font-family: var(--disco-font-d);
  color:       rgba(255,255,255,0.45);
}

.pack-cover-placeholder--sm .pack-cover-placeholder__label { font-size: 1.1rem; }

/* ── Extrait audio + lien titre ──────────────────────────── */

.pack-detail__preview-label {
  font-size:      0.68rem;
  font-weight:    700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color:          rgba(28,0,56,0.5);
  margin-bottom:  0.5rem;
}

.pack-detail__preview audio {
  width:         100%;
  border-radius: 2px;
  margin-bottom: 1.25rem;
}

.pack-detail__titre-link {
  display:        flex;
  align-items:    center;
  gap:            0.875rem;
  padding:        0.75rem 1rem;
  background:     var(--disco-card-bg);
  border:         1px solid var(--disco-card-border);
  border-radius: 2px;
  text-decoration:none;
  color:          var(--disco-text);
  transition:     background 0.2s, box-shadow 0.2s, color 0.2s;
  margin-top:     0.25rem;
}
.pack-detail__titre-link:hover {
  color:       var(--disco-text);
  background:  rgba(255,255,255,0.07);
  box-shadow:  0 0 0 1px rgba(255,255,255,0.25),
               0 0 28px rgba(176,64,200,0.5);
}

.pack-detail__titre-thumb {
  width:         44px;
  height:        44px;
  border-radius: 2px;
  flex-shrink:   0;
}

.pack-detail__titre-info {
  display:        flex;
  flex-direction: column;
  gap:            0.15rem;
  flex:           1;
  min-width:      0;
}

.pack-detail__titre-label {
  font-size:      0.65rem;
  font-weight:    700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color:          var(--disco-accent-2);
}

.pack-detail__titre-name {
  font-size:   0.875rem;
  font-weight: 500;
  white-space: nowrap;
  overflow:    hidden;
  text-overflow:ellipsis;
}

/* ── Colonne droite ──────────────────────────────────────── */

.pack-detail__eyebrow {
  font-size:      0.68rem;
  font-weight:    700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color:          var(--disco-accent);
  margin-bottom:  0.5rem;
}

.pack-detail__title {
  font-family:    var(--disco-font-b);
  font-size:      clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight:    700;
  font-style:     normal;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height:    1.2;
  color:          var(--disco-text);
  margin-bottom:  0.4rem;
}

.pack-detail__sub {
  font-size:      0.8rem;
  color:          var(--disco-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom:  1.5rem;
}

.pack-detail__texte {
  font-size:     0.92rem;
  line-height:   1.75;
  color:         var(--disco-text-muted);
  margin-bottom: 2rem;
}

/* ── Contenu du pack ─────────────────────────────────────── */

.pack-detail__contenu {
  background:    rgba(255,255,255,0.08);
  border:        1px solid rgba(255,255,255,0.12);
  border-radius: 2px;
  padding:       1.25rem 1.5rem;
  margin-bottom: 2rem;
  box-shadow:    0 2px 12px rgba(0,0,0,0.3);
}

.pack-detail__contenu h3 {
  font-size:      0.68rem;
  font-weight:    700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color:          var(--disco-accent-2);
  margin-bottom:  1rem;
}

.pack-detail__contenu-list {
  list-style:     none;
  padding:        0;
  margin:         0;
  display:        flex;
  flex-direction: column;
  gap:            0.6rem;
}

.pack-detail__contenu-item {
  display:     flex;
  align-items: flex-start;
  gap:         0.6rem;
  font-size:   0.88rem;
  color:       var(--disco-text);
}

.pack-detail__contenu-item::before {
  content:      '';
  display:      block;
  width:        6px;
  height:       6px;
  border-radius:50%;
  background:   var(--disco-accent);
  flex-shrink:  0;
  margin-top:   0.45rem;
}

/* ── Formulaire de commande (Gravity Forms) ──────────────── */

.pack-order-form {
  background:    rgba(255,255,255,0.08);
  border:        1px solid rgba(255,255,255,0.12);
  border-radius: 2px;
  padding:       clamp(1.5rem, 4vw, 2.5rem);
  box-shadow:    0 2px 12px rgba(0,0,0,0.3);
}

.pack-order-form h2 {
  font-family:   var(--disco-font-d);
  font-size:     1.5rem;
  font-weight:   600;
  color:         var(--disco-text);
  margin-bottom: 0.35rem;
}

.pack-order-form__sub {
  font-size:     0.82rem;
  color:         rgba(255,255,255,0.6);
  margin-bottom: 1.75rem;
  line-height:   1.6;
}

/* Gravity Forms overrides — pack page */
.pack-order-form .gform_wrapper { margin: 0; }
.pack-order-form .gfield_label {
  font-size:      0.73rem !important;
  font-weight:    600 !important;
  letter-spacing: 0.05em !important;
  color:          rgba(28,0,56,0.65) !important;
  margin-bottom:  0.35rem !important;
}
.pack-order-form input[type="text"],
.pack-order-form input[type="email"],
.pack-order-form textarea {
  width:         100% !important;
  background:    #f9f7f5 !important;
  border:        1px solid rgba(28,0,56,0.15) !important;
  border-radius: 2px !important;
  padding:       0.7rem 0.9rem !important;
  font-family:   var(--disco-font-b) !important;
  font-size:     0.9rem !important;
  color:         #1C0038 !important;
  transition:    border-color 0.2s !important;
}
.pack-order-form input[type="text"]:focus,
.pack-order-form input[type="email"]:focus,
.pack-order-form textarea:focus {
  outline:       none !important;
  border-color:  var(--disco-accent) !important;
  background:    #fff !important;
}
.pack-order-form input[readonly] {
  background:    #f0ede8 !important;
  color:         rgba(28,0,56,0.5) !important;
  cursor:        default !important;
}
.pack-order-form textarea { resize: vertical; min-height: 90px; }
.pack-order-form .gform_footer,
.pack-order-form .gform_page_footer { margin-top: 1.25rem; }
.pack-order-form input[type="submit"],
.pack-order-form button[type="submit"] {
  background:     var(--disco-accent) !important;
  color:          #fff !important;
  border:         none !important;
  border-radius: 2px !important;
  padding:        0.8rem 2rem !important;
  font-family:    var(--disco-font-b) !important;
  font-size:      0.9rem !important;
  font-weight:    600 !important;
  cursor:         pointer !important;
  transition:     background 0.2s, transform 0.15s !important;
}
.pack-order-form input[type="submit"]:hover,
.pack-order-form button[type="submit"]:hover {
  background:  var(--disco-accent-2) !important;
  transform:   translateY(-1px) !important;
}
.pack-order-form .gform_confirmation_message {
  font-family:  var(--disco-font-b) !important;
  font-size:    0.88rem !important;
  font-weight:  400 !important;
  line-height:  1.65 !important;
  color:        rgba(28,0,56,0.75) !important;
  padding:      1rem 1.25rem;
  background:   rgba(46,125,50,0.07);
  border:       1px solid rgba(46,125,50,0.2);
  border-radius: 2px;
}

/* ── Section autres packs ────────────────────────────────── */

.pack-related {
  background:   #ede9e3;
  padding-block: clamp(3rem, 6vw, 5rem);
}

.pack-related__inner {
  max-width:      var(--disco-max-w);
  margin:         0 auto;
  padding-inline: var(--disco-gutter);
}

.pack-related h2 {
  font-family:   var(--disco-font-d);
  font-size:     1.4rem;
  color:         #1C0038;
  margin-bottom: 1.5rem;
}

/* 4 colonnes fixes dans la section related */
.pack-related .disco-grid,
.pack-related .packs-grid {
  grid-template-columns: repeat(4, 1fr);
}

/* Bouton "Voir tout" */
.cr-see-all {
  display:         inline-block;
  margin-top:      1.75rem;
  padding:         0.6rem 1.75rem;
  border:          1.5px solid rgba(28,0,56,0.25);
  border-radius:   2px;
  font-family:     var(--disco-font-b);
  font-size:       0.875rem;
  font-weight:     600;
  letter-spacing:  0.04em;
  text-transform:  uppercase;
  color:           #1C0038;
  text-decoration: none;
  transition:      background 0.2s, border-color 0.2s;
}
.cr-see-all:hover {
  background:    rgba(28,0,56,0.06);
  border-color:  rgba(28,0,56,0.45);
}

/* Cover-card in related section (cream bg) — texte sombre */
.pack-related .cover-card__title { color: #1C0038; }
.pack-related .cover-card__year  { color: rgba(28,0,56,0.5); }

/* Pack card in related section — flush cover, no internal padding */
.pack-related .pack-card {
  padding:    0;
  background: transparent;
  border:     none;
  gap:        0.5rem;
}

.pack-related .pack-card__title,
.pack-related .pack-card__type,
.pack-related .pack-card__sub {
  padding-inline: 0.25rem;
}

/* Dark text context */
.pack-related .pack-card__title { color: #1C0038; }
.pack-related .pack-card__sub,
.pack-related .pack-card__type { color: rgba(28,0,56,0.5); }
.pack-related .pack-card__cta   { color: var(--disco-accent); }
.pack-related .pack-card__cta svg { stroke: var(--disco-accent); }
.pack-related .pack-card__contenu li { color: rgba(28,0,56,0.7); }
.pack-related .pack-card__contenu li::before { background: var(--disco-accent); }

/* ── Album detail page ────────────────────────────────────── */

.album-detail-page,
.titre-detail-page {
  background:  var(--disco-bg);
  color:       var(--disco-text);
  font-family: var(--disco-font-b);
  min-height:  100vh;
}

.disco-single-header {
  padding-block: clamp(4rem, 8vw, 7rem);
  display:       grid;
  gap:           2.5rem 4rem;
  align-items:   start;
}

@media (min-width: 768px) {
  .disco-single-header { grid-template-columns: 280px 1fr; }
}
@media (min-width: 1024px) {
  .disco-single-header { grid-template-columns: 320px 1fr; }
}

.disco-single-cover {
  position:     sticky;
  top:          6rem;
  aspect-ratio: 1 / 1;
  border-radius: 2px;
  overflow:     hidden;
  box-shadow:   0 16px 40px rgba(0,0,0,0.4);
  background:   #3D0B5C;
}
.disco-single-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.disco-single-cover .cover-card__placeholder { background-image: linear-gradient(135deg, #7B2D8B, #3D0B5C); width: 100%; height: 100%; }

.disco-single-info {
  display:       flex;
  flex-direction:column;
  gap:           1.25rem;
}

.disco-single-meta {
  display:    flex;
  align-items:center;
  gap:        0.75rem;
  flex-wrap:  wrap;
}
.disco-single-date { font-size: 0.875rem; color: var(--disco-text-muted); }

.disco-single-badge {
  font-size:    0.65rem;
  font-weight:  700;
  letter-spacing: 0.04em;
  text-transform:uppercase;
  padding:      0.2rem 0.5rem;
  border-radius:2px;
  background:   var(--disco-accent-2);
}

.disco-single-title {
  font-family: var(--disco-font-d);
  font-size:   clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 600;
  line-height: 1.05;
}

.disco-single-desc {
  color:      var(--disco-text-muted);
  line-height:1.65;
  max-width:  52ch;
}

.disco-single-links {
  display:   flex;
  flex-wrap: wrap;
  gap:       0.75rem;
  margin-top:0.25rem;
}

.disco-parent-link {
  display:     inline-flex;
  align-items: center;
  gap:         0.35rem;
  font-size:   0.875rem;
  color:       var(--disco-text-muted);
  text-decoration:none;
  transition:  color 0.2s;
}
.disco-parent-link:hover { color: var(--disco-text); }
.disco-parent-link svg { width: 14px; height: 14px; }

/* ── Album texte long / titres liés ───────────────────────── */

.disco-single-body {
  padding-block: 2rem clamp(4rem, 8vw, 7rem);
  display:       flex;
  flex-direction:column;
  gap:           3rem;
}

.disco-texte-long {
  max-width:  68ch;
  line-height:1.75;
  color:      var(--disco-text-muted);
}
.disco-texte-long p { margin-bottom: 1rem; }
.disco-texte-long p:last-child { margin-bottom: 0; }
.disco-texte-long h2, .disco-texte-long h3 {
  font-family: var(--disco-font-d);
  color:       var(--disco-text);
  margin-bottom:.75rem;
  margin-top:  1.5rem;
}

.disco-related h2 {
  font-family:  var(--disco-font-d);
  font-size:    1.4rem; /* aligné sur .pack-related h2 (22.4px) */
  font-weight:  600;
  margin-bottom:1.5rem;
}

/* ── Titre detail layout ──────────────────────────────────── */

.titre-detail {
  padding-block: clamp(3rem, 7vw, 6rem);
  display:       grid;
  gap:           2rem 4rem;
  align-items:   start;
}
@media (min-width: 768px) {
  .titre-detail { grid-template-columns: 280px 1fr; }
}
@media (min-width: 1024px) {
  .titre-detail { grid-template-columns: 320px 1fr; }
}

.titre-detail__left {
  display:        flex;
  flex-direction: column;
  gap:            0.75rem;
  position:       sticky;
  top:            6rem;
}

.titre-detail__cover {
  aspect-ratio: 1 / 1;
  border-radius: 2px;
  overflow:     hidden;
  box-shadow:   0 16px 40px rgba(0,0,0,0.4);
  background:   #3D0B5C;
}
.titre-detail__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.titre-detail__cover-placeholder {
  width:          100%;
  height:         100%;
  display:        flex;
  align-items:    center;
  justify-content: center;
  padding:        1rem;
  color:          rgba(255,255,255,0.9);
  font-family:    var(--disco-font-d);
  font-size:      1.25rem;
}

.titre-related-card {
  display:         flex;
  align-items:     center;
  gap:             0.875rem;
  padding:         0.75rem 1rem;
  background:      var(--disco-card-bg);
  border:          1px solid var(--disco-card-border);
  border-radius: 2px;
  text-decoration: none;
  color:           var(--disco-text);
  transition:      background 0.2s, box-shadow 0.2s, color 0.2s;
}
.titre-related-card:hover {
  color:       var(--disco-text);
  background:  rgba(255,255,255,0.07);
  box-shadow:  0 0 0 1px rgba(255,255,255,0.25),
               0 0 28px rgba(176,64,200,0.5);
}
.titre-related-card__thumb {
  width:         44px;
  height:        44px;
  border-radius: 2px;
  flex-shrink:   0;
  overflow:      hidden;
  position:      relative;
}
.titre-related-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.titre-related-card__thumb--pack {
  display:     flex;
  align-items: center;
  justify-content: center;
}
.pack-mini-label {
  font-size:     0.55rem;
  font-weight:   700;
  text-transform:uppercase;
  letter-spacing: 0.04em;
  color:         rgba(255,255,255,0.7);
  text-align:    center;
  line-height:   1.2;
}
.titre-related-card__info {
  flex:           1;
  display:        flex;
  flex-direction: column;
  gap:            0.15rem;
  min-width:      0;
}
.titre-related-card__label {
  font-size:     0.65rem;
  font-weight:   700;
  letter-spacing: 0.04em;
  text-transform:uppercase;
  color:         var(--disco-accent-2);
}
.titre-related-card__name {
  font-size:   0.875rem;
  font-weight: 500;
  white-space: nowrap;
  overflow:    hidden;
  text-overflow:ellipsis;
}

.titre-detail__right {
  display:        flex;
  flex-direction: column;
  gap:            1.25rem;
}

.titre-detail__eyebrow {
  font-size:     0.7rem;
  font-weight:   700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:         var(--disco-text-muted);
}

.titre-detail__title {
  font-family:    var(--disco-font-b);
  font-size:      clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight:    700;
  font-style:     normal;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height:    1.2;
}

.titre-detail__date {
  font-size:   0.9375rem;
  color:       var(--disco-text-muted);
}

.titre-detail__desc {
  font-size:   0.9375rem;
  color:       var(--disco-text-muted);
  line-height: 1.6;
}

.titre-detail__quote {
  border-left:  3px solid rgba(255,255,255,0.2);
  padding:      0.25rem 0 0.25rem 1.25rem;
  margin:       0;
  background:   transparent !important;
  color:        var(--disco-text-muted);
  font-size:    0.9375rem;
  line-height:  1.75;
  box-shadow:   none !important;
}
.titre-detail__quote p { margin: 0; background: transparent; }

.titre-player-wrap,
.titre-streaming-wrap {
  display:        flex;
  flex-direction: column;
  gap:            0.625rem;
}

.titre-player-label {
  font-size:     0.65rem;
  font-weight:   700;
  letter-spacing: 0.04em;
  text-transform:uppercase;
  color:         var(--disco-text-muted);
}

.spotify-embed {
  border-radius: 2px;
  overflow:      hidden;
  background:    #000;
}
.spotify-embed iframe { display: block; border-radius: 2px; }

/* ── Back link ────────────────────────────────────────────── */

.disco-back-link {
  display:        inline-flex;
  align-items:    center;
  gap:            0.4rem;
  padding:        0.75rem 0;
  margin-top:     100px;
  margin-bottom:  20px;
  font-size:      0.875rem;
  font-weight:    500;
  color:          var(--disco-text-muted);
  text-decoration:none;
  transition:     color 0.2s;
}
.disco-back-link:hover { color: var(--disco-text); }
.disco-back-link svg { width: 16px; height: 16px; }

.pack-detail-page .disco-back-link {
  color:      var(--disco-text-muted);
  background: none;
  padding:    0.5rem 0;
  font-size:  0.875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.pack-detail-page .disco-back-link:hover { color: var(--disco-text); }
.pack-detail-page .disco-back-link svg   { stroke: currentColor; }

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 700px) {
  .disco-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  .disco-grid--titres {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.875rem;
  }
  .packs-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  .streaming-btns {
    gap: 0.375rem;
  }
  .btn-streaming {
    font-size: 0.75rem;
    padding:   0.4rem 0.75rem;
  }
  .disco-single-header {
    grid-template-columns: 1fr;
  }
  .disco-single-cover {
    position: static;
    max-width: 240px;
  }
  .titre-detail {
    grid-template-columns: 1fr;
  }
  .titre-detail__left {
    position: static;
    max-width: 240px;
  }
  .pack-detail {
    grid-template-columns: 1fr;
  }
  .pack-detail__cover {
    position: static;
    max-width: 200px;
  }
}

@media (max-width: 480px) {
  .disco-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .cover-card__title { font-size: 0.9375rem; }
  .packs-grid { grid-template-columns: 1fr; }
}

/* ── Accessibility ────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .tab-panel.is-active { animation: none; }
}