/* Lecteur d'épisode intégrable dans les articles (blocs timestamp & clip).
   Couleurs adaptatives (mode clair/sombre) via les variables du thème. */
.mcb-ep-card { margin: 1.75rem 0; }
.mcb-ep-card__hook {
    font-weight: 600;
    margin: 0 0 .6rem;
    color: var(--color-on-surface);
}
.mcb-ep {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--color-surface-container);
    color: var(--color-on-surface);
    border: 1px solid var(--color-outline);
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
}
.mcb-ep > a { color: var(--color-primary); font-weight: 600; }
.mcb-ep__cover {
    width: 56px; height: 56px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    transition: opacity .15s;
}
.mcb-ep__cover:hover { opacity: .82; }
.mcb-ep__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.mcb-ep__title {
    font-weight: 700; font-size: .95rem; line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.mcb-ep__row { display: flex; align-items: center; gap: 8px; }
.mcb-ep__btn, .mcb-ep__play {
    background: transparent; border: 0; color: inherit; cursor: pointer;
    padding: 2px; display: inline-flex; align-items: center; gap: 1px;
    line-height: 0; opacity: .9;
}
.mcb-ep__btn:hover, .mcb-ep__play:hover { opacity: 1; }
.mcb-ep__play {
    background: var(--color-primary); color: #fff;
    width: 40px; height: 40px; border-radius: 999px;
    justify-content: center; flex-shrink: 0; opacity: 1;
}
.mcb-ep__play svg { width: 22px; height: 22px; fill: #fff; }
.mcb-ep__btn svg { width: 20px; height: 20px; fill: currentColor; }
.mcb-ep__sk { font-size: .6rem; font-weight: 700; line-height: 1; }
.mcb-ep__progress {
    flex: 1 1 auto; min-width: 60px; height: 4px;
    accent-color: var(--color-primary); cursor: pointer;
}
.mcb-ep__time {
    font-size: .72rem; font-variant-numeric: tabular-nums;
    opacity: .8; flex-shrink: 0; min-width: 40px;
}
.mcb-ep__cur { text-align: right; }
.mcb-ep__sub {
    display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
    background: #1DB954; color: #fff; font-weight: 700; font-size: .75rem;
    line-height: 1; padding: 7px 13px; border-radius: 999px; text-decoration: none;
    white-space: nowrap; transition: background .15s;
}
.mcb-ep__sub:hover { background: #1ed760; color: #fff; }
.mcb-ep__sub svg { width: 15px; height: 15px; fill: #fff; flex-shrink: 0; }
@media (max-width: 600px) {
    .mcb-ep__cover { width: 46px; height: 46px; }
    .mcb-ep__tot { display: none; }
    .mcb-ep__sub span { display: none; }
}