/*
 * ClubOS — géométrie Musique desktop.
 * Chargé après le socle commun et isolé à partir de 768 px.
 */
@media (min-width: 768px) {
    body.music-page-shell .music-track-table {
        width: 100%;
        table-layout: auto;
    }

    body.music-page-shell .music-track-table .music-track-cover-cell {
        width: 62px;
    }

    body.music-page-shell .music-track-table .music-track-number-cell {
        width: 74px;
    }

    body.music-page-shell .music-track-table .music-track-duration-cell {
        width: 92px;
        white-space: nowrap;
    }

    body.music-page-shell .music-track-table .music-track-actions-cell {
        width: 212px;
    }

    body.music-page-shell .music-track-table .music-track-title-cell {
        min-width: 12rem;
    }

    body.music-page-shell .music-track-table .track-cover-thumb {
        width: 46px;
        height: 46px;
        object-fit: cover;
        border-radius: .55rem;
    }

    body.music-page-shell .music-track-table .music-track-actions {
        flex-wrap: nowrap !important;
    }

    body.music-page-shell .music-track-table .music-track-play-btn {
        width: 38px;
        height: 38px;
        min-width: 38px;
        display: inline-grid;
        place-items: center;
        padding: 0;
        border-radius: 50%;
    }

    body.music-page-shell .music-track-table .music-track-play-icon {
        font-size: 0;
        line-height: 0;
    }

    body.music-page-shell .music-track-table .music-track-play-icon::before {
        content: "";
        display: block;
        width: 16px;
        height: 16px;
        background: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    body.music-page-shell .music-track-table .js-music-play-trigger.is-playing .music-track-play-icon::before,
    body.music-page-shell .music-track-table .music-track-row.is-track-playing .music-track-play-icon::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 5h4v14H7zm6 0h4v14h-4z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 5h4v14H7zm6 0h4v14h-4z'/%3E%3C/svg%3E");
    }

    /* Le composeur desktop est un composant à part entière, pas le fallback HTML brut. */
    body.music-page-shell .music-comment-composer {
        max-width: 100%;
        padding: .75rem;
        border: 1px solid var(--music-border-soft);
        border-radius: 16px;
        background: var(--music-surface-raised);
        box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
    }

    body.music-page-shell .music-comment-composer__avatar {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
    }

    body.music-page-shell .music-comment-composer .js-track-comment-content {
        min-height: 46px;
        max-height: 10rem;
        background: var(--music-surface);
    }

    body.music-page-shell .music-comment-composer__tools {
        margin-left: 46px;
    }

    body.music-page-shell .music-comment-composer__time {
        margin-left: 46px;
    }

    body.music-page-shell .music-comment-composer__clear-time {
        min-width: 34px;
        min-height: 34px;
        border: 1px solid var(--music-border-soft);
        border-radius: 50%;
    }

    body.music-page-shell .music-comment-reply-form {
        width: min(100%, 760px);
        padding: .65rem;
        border: 1px solid var(--music-border-soft);
        border-radius: 14px;
        background: var(--music-surface-raised);
    }

    body.music-page-shell .music-comment-reply-form .js-comment-reply-content {
        width: 100%;
        min-height: 58px;
        max-height: 10rem;
        resize: vertical;
        border-color: var(--music-border-soft);
        background: var(--music-surface);
        color: var(--music-text-main);
    }

    body.music-page-shell .music-comment-reply-form__actions {
        display: flex;
        justify-content: flex-end;
        gap: .45rem;
        margin-top: .45rem;
    }
}