/* =========================================================
   LDDP — Page Artistes
   Palette "Identité" (sombre) — hex en dur, pas de var() Divi
   Tout est scopé sous .lddp-artistes
   ========================================================= */

.lddp-artistes {
  background: #12100E;
  color: #F1EDE4;
  font-family: "EB Garamond", Georgia, serif;
  padding: 4.5rem 1.25rem 6rem;
  position: relative;
  overflow: hidden;
}

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

.lddp-artistes__inner {
  max-width: 1080px;
  margin: 0 auto;
}

/* ---------- Reset listes ----------
   Divi cible les <li> directement (puce + padding), avec une spécificité
   plus forte qu'un list-style posé sur le <ul>. On neutralise sur les deux. */

.lddp-artistes ul,
.lddp-artistes ol,
.lddp-artistes li {
  list-style: none !important;
  list-style-type: none !important;
  list-style-image: none !important;
  margin: 0;
  padding: 0;
}

.lddp-artistes li::marker { content: none; }

.lddp-artistes li::before {
  content: none !important;
  display: none !important;
}

/* ---------- En-tête ---------- */

.lddp-art-eyebrow {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #D98E3B;
  margin: 0 0 1.25rem;
}

.lddp-art-titre {
  /* taille calée sur la largeur d'écran pour tenir sur une ligne, du 320px au grand écran */
  font-size: clamp(1.75rem, 8.8vw, 5rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.02em;
  white-space: nowrap;
  color: #F1EDE4;
  margin: 0 0 1rem;
}

.lddp-art-titre em {
  font-style: italic;
  color: #A69C8D;
}

.lddp-art-chapo {
  font-size: clamp(1.05rem, 2.6vw, 1.2rem);
  line-height: 1.55;
  color: #A69C8D;
  margin: 0 0 2.75rem;
}

/* ---------- Barre de filtres ---------- */

.lddp-art-filtres {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #322D28;
}

.lddp-art-recherche {
  flex: 1 1 15rem;
  min-width: 0;
  background: #1C1917;
  border: 1px solid #322D28;
  border-radius: 2px;
  color: #F1EDE4;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: .8rem;
  padding: .7rem .85rem;
}

.lddp-art-recherche::placeholder { color: #7A7166; }

.lddp-art-recherche:focus-visible {
  outline: 2px solid #D98E3B;
  outline-offset: 1px;
  border-color: #D98E3B;
}

.lddp-art-chips {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}

.lddp-art-chip {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid #322D28;
  border-radius: 2px;
  color: #A69C8D;
  padding: .55rem .8rem;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease;
}

.lddp-art-chip:hover { color: #F1EDE4; border-color: #A69C8D; }

.lddp-art-chip[aria-pressed="true"] {
  color: #12100E;
  background: #D98E3B;
  border-color: #D98E3B;
}

.lddp-art-chip:focus-visible {
  outline: 2px solid #D98E3B;
  outline-offset: 2px;
}

/* ---------- Le répertoire ---------- */

.lddp-art-item { border-bottom: 1px solid #322D28; }

.lddp-art-ligne {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "nom refs"
    "ville refs";
  column-gap: 1rem;
  align-items: center;
  background: transparent;
  border: 0;
  color: inherit;
  text-align: left;
  padding: 1.35rem 0;
  cursor: pointer;
  font-family: inherit;
}

.lddp-art-ligne:focus-visible {
  outline: 2px solid #D98E3B;
  outline-offset: -2px;
}

.lddp-art-nom {
  grid-area: nom;
  font-size: clamp(1.6rem, 6.5vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -.01em;
  color: #F1EDE4;
  transition: color .18s ease;
}

.lddp-art-ville {
  grid-area: ville;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #7A7166;
  margin-top: .35rem;
}

/* Les numéros de catalogue : ils disent combien de disques, et lesquels */
.lddp-art-refs {
  grid-area: refs;
  display: flex;
  gap: .3rem;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: .68rem;
  color: #A69C8D;
}

.lddp-art-ref {
  border: 1px solid #322D28;
  border-radius: 2px;
  padding: .2rem .4rem;
  transition: border-color .18s ease, color .18s ease;
}

.lddp-art-ligne:hover .lddp-art-nom { color: #D98E3B; }
.lddp-art-ligne:hover .lddp-art-ref { border-color: #8C3B2E; color: #F1EDE4; }

.lddp-art-item.est-ouvert .lddp-art-nom { color: #D98E3B; font-style: italic; }

/* ---------- La fiche dépliée ---------- */

.lddp-art-fiche {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .38s cubic-bezier(.4, 0, .2, 1);
}

.lddp-art-item.est-ouvert .lddp-art-fiche { grid-template-rows: 1fr; }

.lddp-art-fiche__contenu {
  overflow: hidden;
  min-height: 0;
}

.lddp-art-fiche__grille {
  display: grid;
  gap: 1.5rem;
  padding: .25rem 0 2.25rem;
}

.lddp-art-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid #322D28;
  border-radius: 2px;
  background: #1C1917;
  display: block;
}

.lddp-art-photo--vide { aspect-ratio: 3 / 2; }

.lddp-art-bio {
  font-size: 1.02rem;
  line-height: 1.65;
  color: #A69C8D;
  margin: 0 0 1.5rem;
}

.lddp-art-bio p { margin: 0 0 .9rem; }
.lddp-art-bio p:last-child { margin-bottom: 0; }
.lddp-art-bio strong { color: #F1EDE4; font-weight: 500; }
.lddp-art-bio a { color: #D98E3B; }

.lddp-art-sorties-titre {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: .65rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #7A7166;
  margin: 0 0 .75rem;
}

.lddp-art-sorties {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.lddp-art-sortie {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  text-decoration: none;
  color: #F1EDE4;
  border: 1px solid #322D28;
  border-radius: 2px;
  padding: .7rem .85rem;
  transition: border-color .18s ease, background .18s ease;
}

a.lddp-art-sortie:hover,
a.lddp-art-sortie:focus-visible {
  border-color: #D98E3B;
  background: #1C1917;
  outline: none;
}

.lddp-art-sortie__cat {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: .68rem;
  color: #D98E3B;
  flex: 0 0 auto;
}

.lddp-art-sortie__titre { font-size: 1.05rem; }
.lddp-art-sortie__titre i { font-style: italic; color: #A69C8D; }

/* ---------- État vide ---------- */

.lddp-art-vide {
  padding: 3rem 0;
  color: #A69C8D;
  font-size: 1.1rem;
}

.lddp-art-vide button {
  background: none;
  border: 0;
  border-bottom: 1px solid #D98E3B;
  color: #D98E3B;
  font: inherit;
  cursor: pointer;
  padding: 0;
}

/* ---------- Aperçu au survol (desktop uniquement) ---------- */

.lddp-art-apercu {
  display: none;
  position: fixed;
  right: max(2rem, calc((100vw - 1080px) / 2 - 15rem));
  width: 18rem;
  aspect-ratio: 3 / 2;
  margin: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 5;
  border: 1px solid #322D28;
  border-radius: 2px;
  overflow: hidden;
  background: #1C1917;
  transition: opacity .25s ease;
}

.lddp-art-apercu img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lddp-art-apercu.est-visible { opacity: 1; }

/* ---------- Desktop ---------- */

@media (min-width: 48rem) {
  .lddp-artistes { padding: 6rem 2.5rem 8rem; }

  .lddp-art-ligne {
    grid-template-columns: minmax(0, 1fr) 12rem auto;
    grid-template-areas: "nom ville refs";
    padding: 1.6rem 0;
  }

  .lddp-art-ville { margin-top: 0; }

  .lddp-art-fiche__grille {
    grid-template-columns: 22rem minmax(0, 1fr);
    gap: 2.5rem;
    padding-bottom: 3rem;
  }

  .lddp-art-sorties { flex-direction: row; flex-wrap: wrap; }
  .lddp-art-sortie { flex: 0 1 auto; }
}

@media (min-width: 64rem) and (hover: hover) and (pointer: fine) {
  .lddp-art-apercu { display: block; }
  .lddp-art-fiche__grille { grid-template-columns: 18rem minmax(0, 1fr); }
}

/* ---------- Mouvement réduit ---------- */

@media (prefers-reduced-motion: reduce) {
  .lddp-art-fiche,
  .lddp-art-apercu,
  .lddp-art-nom,
  .lddp-art-ref { transition: none; }
}
