/* ═══════════════════════════════════════════════════════════════
   PROMOMEDIA Lyrics — styles publics
   Calqué sur PROMOMEDIA Artist Bio (pmab) pour cohérence visuelle
   ═══════════════════════════════════════════════════════════════ */

/* ── Variables locales (single uniquement) ──────────────────────── */
.pml-single {
    --pml-accent:  var(--rt-accent, #ed261e);
    --pml-border:  var(--rt-border, rgba(0,0,0,.1));
    --pml-text:    var(--rt-text, #111);
    --pml-muted:   var(--rt-muted, rgba(0,0,0,.5));
    --pml-radius:  var(--rt-radius-lg, 8px);
}

/* ════════════════════════════════════════════════════════════════
   SHORTCODE [pml_paroles] — full-bleed identique à BIOGRAPHIES
   ════════════════════════════════════════════════════════════════ */

/* Neutraliser les contraintes max-width des ancêtres (même technique que PMAB) */
.rt-prose:has(.pml-paroles),
.rt-page-text:has(.pml-paroles) {
    max-width: none !important;
    overflow:  visible !important;
}
.rt-container:has(.pml-paroles),
.rt-section:has(.pml-paroles) {
    overflow: visible !important;
}

/* Full-bleed : sort du conteneur parent pour occuper 100vw */
.pml-paroles {
    box-sizing:    border-box;
    width:         100vw;
    margin-left:   calc(50% - 50vw);
    padding-left:  clamp(16px, 5vw, 80px);
    padding-right: clamp(16px, 5vw, 80px);
}

/* ── Recherche — identique à pmab-bio-search ─────────────────── */
.pml-search-wrap {
    position: relative;
    margin-bottom: 16px;
}
.pml-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--rt-muted, rgba(0,0,0,.4));
    pointer-events: none;
    flex-shrink: 0;
}
.pml-search {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 40px 10px 42px;
    border-radius: var(--rt-radius, 4px);
    border: 1px solid var(--rt-border, rgba(0,0,0,.1));
    background: var(--rt-surface, #fff);
    color: var(--rt-text, #111);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color .15s;
}
.pml-search:focus        { border-color: var(--rt-accent, #ed261e); }
.pml-search::placeholder { color: var(--rt-muted, rgba(0,0,0,.4)); }

.pml-search-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--rt-muted, rgba(0,0,0,.4));
    font-size: 13px;
    padding: 4px 6px;
    line-height: 1;
    border-radius: var(--rt-radius, 4px);
    transition: color .15s;
}
.pml-search-clear:hover { color: var(--rt-text, #111); }

/* ── Navigation alphabétique — identique à pmab-alpha-btn ──────── */
.pml-alpha-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 20px;
}

.pml-alpha-btn {
    padding: 4px 10px;
    min-width: 32px;
    border: 1px solid var(--rt-border, rgba(0,0,0,.1));
    border-radius: var(--rt-radius, 4px);
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .03em;
    cursor: pointer;
    color: var(--rt-text, #111);
    font-family: inherit;
    transition: border-color .15s, color .15s, background .15s;
    line-height: 1.5;
    text-align: center;
}
.pml-alpha-btn:hover:not(:disabled) {
    border-color: var(--rt-accent, #ed261e);
    color: var(--rt-accent, #ed261e);
}
.pml-alpha-btn.active {
    background: var(--rt-accent, #ed261e);
    border-color: var(--rt-accent, #ed261e);
    color: #fff;
}
.pml-alpha-btn--empty,
.pml-alpha-btn:disabled { opacity: .25; cursor: default; }

/* ── Grille de cartes — identique à pmab-bio-grid ──────────────── */
.pml-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    gap: 16px;
}

.pml-card {
    position: relative;
    display: flex;           /* flex container → transmet la hauteur de rangée aux enfants */
    flex-direction: column;
    min-width: 0;            /* critique sur grid item flex : empêche min-width:auto de déborder */
}
.pml-card[hidden] { display: none; }

.pml-card__link {
    display: flex;
    flex-direction: column;
    flex: 1;                 /* remplace height:100% — fiable sur iOS Safari */
    text-decoration: none;
    color: var(--rt-text, #111);
    background: var(--rt-surface, #fff);
    border: 1px solid var(--rt-border, rgba(0,0,0,.1));
    border-radius: var(--rt-radius-lg, 8px);
    overflow: hidden;
    transition: border-color .2s, transform .2s;
}
.pml-card__link:hover {
    border-color: var(--rt-accent, #ed261e);
    transform: translateY(-2px);
}

.pml-card__cover {
    width: 100%;
    aspect-ratio: 1;
    background-size: cover;
    background-position: center;
    background-color: var(--rt-surface2, #ebebeb);
}
.pml-card__cover--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: var(--rt-muted, rgba(0,0,0,.2));
}

.pml-card__body   { padding: 10px 12px 12px; flex: 1; }
.pml-card__title  { font-size: 13px; font-weight: 700; line-height: 1.35; margin: 0 0 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pml-card__artist { font-size: 12px; color: var(--rt-accent, #ed261e); font-weight: 600; margin: 0 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pml-card__album  { font-size: 11px; color: var(--rt-muted, rgba(0,0,0,.5)); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Message vide ──────────────────────────────────────────────── */
.pml-empty,
.pml-empty-global {
    text-align: center;
    padding: 48px 20px;
    color: var(--rt-muted, rgba(0,0,0,.5));
    font-size: 15px;
    margin: 0;
}

/* ════════════════════════════════════════════════════════════════
   SINGLE CHANSON /paroles/{slug}/
   ════════════════════════════════════════════════════════════════ */

.pml-single { padding: 40px 0 80px; }

/* ── En-tête ─────────────────────────────────────────────────── */
.pml-single__header {
    display: flex;
    gap: 28px;
    align-items: flex-start;
    margin-bottom: 48px;
}

.pml-single__cover-wrap { flex-shrink: 0; }
.pml-single__cover {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: var(--rt-radius-lg, 8px);
    box-shadow: 0 8px 32px rgba(0,0,0,.2);
    display: block;
}

.pml-single__meta { flex: 1; min-width: 0; }

.pml-single__breadcrumb {
    font-size: 12px;
    color: var(--rt-muted, rgba(0,0,0,.5));
    margin: 0 0 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.pml-single__breadcrumb a { color: var(--rt-muted, rgba(0,0,0,.5)); text-decoration: none; }
.pml-single__breadcrumb a:hover { color: var(--rt-text, #111); }

.pml-single__title {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 900;
    line-height: 1.15;
    margin: 0 0 10px;
    letter-spacing: .02em;
}

.pml-single__artist {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--rt-accent, #ed261e);
    margin: 0 0 6px;
    letter-spacing: .04em;
}
.pml-single__artist-link { color: var(--rt-accent, #ed261e); text-decoration: none; }
.pml-single__artist-link:hover { opacity: .8; }

.pml-single__album { font-size: 13px; color: var(--rt-muted, rgba(0,0,0,.5)); margin: 0 0 16px; }

/* ── Paroles ─────────────────────────────────────────────────── */
.pml-single__lyrics { max-width: 640px; font-size: 1.05rem; line-height: 1.8; }

.pml-lyrics__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--rt-accent, #ed261e);
    margin: 2em 0 .5em;
}

.pml-lyrics__stanza { margin: 0 0 1.6em; color: var(--rt-text, #111); }
.pml-lyrics__empty  { color: var(--rt-muted, rgba(0,0,0,.5)); font-style: italic; }

/* ── Footer single ───────────────────────────────────────────── */
.pml-single__footer {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--rt-border, rgba(0,0,0,.1));
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.pml-single__disclaimer { font-size: 12px; color: var(--rt-muted, rgba(0,0,0,.5)); margin: 0; }
.pml-back-link          { font-size: 13px; font-weight: 600; color: var(--rt-muted, rgba(0,0,0,.5)); text-decoration: none; transition: color .15s; }
.pml-back-link:hover    { color: var(--rt-text, #111); }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .pml-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

@media (max-width: 768px) {
    .pml-grid      { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
    .pml-alpha-btn { padding: 4px 7px; min-width: 26px; font-size: 12px; }
}

@media (max-width: 480px) {
    /* Safari iOS : width:100vw + margin négatif crée un scroll horizontal.
       Sur mobile, le parent occupe déjà 100% du viewport → on annule le full-bleed. */
    .pml-paroles {
        width: auto;
        margin-left: 0;
        padding-left: 12px;
        padding-right: 12px;
    }
    .pml-grid      { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .pml-single__header { flex-direction: column; }
    .pml-single__cover  { width: 120px; height: 120px; }
    .pml-alpha-btn { padding: 3px 6px; font-size: 11px; min-width: 24px; }
}