@media (max-width: 767.98px) {
    body.music-page-shell,
    body.clubos-mobile-active {
        --music-search-surface: var(--music-mobile-surface, var(--site-surface, #fff));
        --music-search-surface-2: var(--music-mobile-surface-2, color-mix(in srgb, var(--site-surface, #fff) 94%, var(--site-accent, #1381c4) 6%));
        --music-search-border: var(--music-mobile-border, var(--site-border, #d4deeb));
        --music-search-text: var(--music-mobile-text, var(--site-text, #172033));
        --music-search-muted: var(--music-mobile-muted, var(--site-text-muted, #66758d));
        --music-search-accent: var(--music-mobile-accent, var(--site-accent, #1381c4));
    }

    .music-mobile-search-launch {
        display: grid;
        width: 100%;
        grid-template-columns: 2.4rem minmax(0, 1fr) 1.3rem;
        align-items: center;
        gap: .65rem;
        margin: .55rem 0 .75rem;
        padding: .62rem .72rem;
        border: 1px solid var(--music-search-border);
        border-radius: 1rem;
        background: var(--music-search-surface);
        color: var(--music-search-text);
        box-shadow: 0 5px 16px rgba(26, 45, 72, .06);
        text-align: left;
    }

    .music-mobile-search-launch > svg:first-child {
        width: 1.2rem;
        height: 1.2rem;
        justify-self: center;
        fill: currentColor;
        color: var(--music-search-accent);
    }

    .music-mobile-search-launch > span:nth-child(2) {
        display: grid;
        min-width: 0;
        gap: .08rem;
    }

    .music-mobile-search-launch strong,
    .music-mobile-search-launch small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .music-mobile-search-launch strong {
        font-size: .82rem;
        font-weight: 800;
    }

    .music-mobile-search-launch small {
        color: var(--music-search-muted);
        font-size: .66rem;
    }

    .music-mobile-search-launch > span:last-child,
    .music-mobile-search-launch > span:last-child svg {
        width: 1.1rem;
        height: 1.1rem;
        color: var(--music-search-muted);
        fill: currentColor;
    }

    .music-mobile-search-dialog {
        position: fixed;
        inset: 0;
        width: 100%;
        max-width: none;
        height: 100dvh;
        max-height: none;
        margin: 0;
        padding: 0;
        border: 0;
        background: var(--music-search-surface);
        color: var(--music-search-text);
        overflow: hidden;
        z-index: 7100;
    }

    .music-mobile-search-dialog::backdrop {
        background: rgba(4, 12, 26, .54);
        backdrop-filter: blur(5px);
    }

    .music-mobile-search-dialog[open] {
        display: grid;
        grid-template-rows: auto auto minmax(0, 1fr);
    }

    .music-mobile-search__header {
        display: grid;
        grid-template-columns: 2.75rem minmax(0, 1fr);
        align-items: center;
        gap: .45rem;
        padding: calc(.55rem + env(safe-area-inset-top, 0px)) .65rem .55rem;
        border-bottom: 1px solid var(--music-search-border);
        background: var(--music-search-surface);
    }

    .music-mobile-search__close {
        display: inline-grid;
        width: 2.65rem;
        height: 2.65rem;
        place-items: center;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: var(--music-search-text);
    }

    .music-mobile-search__close svg,
    .music-mobile-search__field svg {
        width: 1.2rem;
        height: 1.2rem;
        fill: currentColor;
    }

    .music-mobile-search__field {
        display: grid;
        grid-template-columns: 1.3rem minmax(0, 1fr);
        align-items: center;
        gap: .45rem;
        min-height: 2.65rem;
        padding: 0 .75rem;
        border: 1px solid var(--music-search-border);
        border-radius: 999px;
        background: var(--music-search-surface-2);
        color: var(--music-search-muted);
    }

    .music-mobile-search__field input {
        width: 100%;
        min-width: 0;
        border: 0;
        outline: 0;
        background: transparent;
        color: var(--music-search-text);
        font: inherit;
        font-size: .86rem;
    }

    .music-mobile-search__tabs {
        display: flex;
        gap: .4rem;
        overflow-x: auto;
        padding: .55rem .65rem;
        border-bottom: 1px solid var(--music-search-border);
        background: var(--music-search-surface);
        scrollbar-width: none;
    }

    .music-mobile-search__tabs::-webkit-scrollbar { display: none; }

    .music-mobile-search__tabs button {
        display: inline-flex;
        min-height: 2.25rem;
        flex: 0 0 auto;
        align-items: center;
        gap: .28rem;
        padding: .4rem .68rem;
        border: 1px solid var(--music-search-border);
        border-radius: 999px;
        background: transparent;
        color: var(--music-search-text);
        font: inherit;
        font-size: .72rem;
        font-weight: 750;
    }

    .music-mobile-search__tabs button.is-active {
        border-color: var(--music-search-accent);
        background: var(--music-search-accent);
        color: #fff;
    }

    .music-mobile-search__tabs small {
        display: inline-grid;
        min-width: 1.1rem;
        min-height: 1.1rem;
        place-items: center;
        padding: 0 .22rem;
        border-radius: 999px;
        background: color-mix(in srgb, currentColor 16%, transparent);
        font-size: .58rem;
    }

    .music-mobile-search__body {
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: .55rem .65rem calc(1rem + env(safe-area-inset-bottom, 0px));
    }

    .music-mobile-search__status {
        padding: .28rem .18rem .62rem;
        color: var(--music-search-muted);
        font-size: .72rem;
    }

    .music-mobile-search__status.is-empty {
        padding-top: 2rem;
        text-align: center;
    }

    .music-mobile-search__results {
        display: grid;
        gap: .45rem;
    }

    .music-mobile-search-result {
        overflow: hidden;
        border: 1px solid var(--music-search-border);
        border-radius: .95rem;
        background: var(--music-search-surface);
    }

    .music-mobile-search-result__main {
        display: grid;
        grid-template-columns: 3.35rem minmax(0, 1fr) 2.45rem;
        align-items: center;
        gap: .65rem;
        min-height: 4.35rem;
        padding: .5rem .55rem;
        color: inherit;
        text-decoration: none;
    }

    .music-mobile-search-result__media,
    .music-mobile-search-result__media img,
    .music-mobile-search__placeholder {
        display: grid;
        width: 3.2rem;
        height: 3.2rem;
        place-items: center;
        border-radius: .75rem;
        object-fit: cover;
        background: var(--music-search-surface-2);
    }

    .music-mobile-search__placeholder svg {
        width: 1.35rem;
        height: 1.35rem;
        fill: currentColor;
        color: var(--music-search-accent);
    }

    .music-mobile-search-result__text {
        display: grid;
        min-width: 0;
        gap: .04rem;
    }

    .music-mobile-search-result__text strong,
    .music-mobile-search-result__text > span:not(.music-mobile-search-result__type),
    .music-mobile-search-result__text small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .music-mobile-search-result__text strong {
        font-size: .82rem;
        font-weight: 800;
    }

    .music-mobile-search-result__text > span:not(.music-mobile-search-result__type) {
        color: var(--music-search-muted);
        font-size: .68rem;
    }

    .music-mobile-search-result__text small {
        color: var(--music-search-accent);
        font-size: .58rem;
    }

    .music-mobile-search-result__type {
        width: max-content;
        padding: .08rem .32rem;
        border-radius: .35rem;
        background: color-mix(in srgb, var(--music-search-accent) 12%, transparent);
        color: var(--music-search-accent);
        font-size: .55rem;
        font-weight: 850;
        text-transform: uppercase;
    }

    .music-mobile-search__play,
    .music-mobile-search__arrow {
        display: inline-grid;
        width: 2.35rem;
        height: 2.35rem;
        place-items: center;
        justify-self: end;
        border-radius: 999px;
        color: var(--music-search-text);
    }

    .music-mobile-search__play {
        background: var(--music-search-accent);
        color: #fff;
    }

    .music-mobile-search__play svg,
    .music-mobile-search__arrow svg {
        width: 1.1rem;
        height: 1.1rem;
        fill: currentColor;
    }

    .music-mobile-search__secondary {
        display: block;
        padding: .42rem .65rem .5rem 4.4rem;
        border-top: 1px solid var(--music-search-border);
        color: var(--music-search-accent);
        font-size: .68rem;
        font-weight: 750;
        text-decoration: none;
    }

    .music-mobile-search__more,
    .music-mobile-progressive-tracks {
        display: block;
        width: calc(100% - 1.1rem);
        min-height: 2.75rem;
        margin: .7rem auto;
        border: 1px solid var(--music-search-border);
        border-radius: .85rem;
        background: var(--music-search-surface);
        color: var(--music-search-accent);
        font: inherit;
        font-size: .75rem;
        font-weight: 800;
    }

    .music-mobile-search__skeleton {
        display: grid;
        gap: .5rem;
    }

    .music-mobile-search__skeleton span {
        display: block;
        height: 4.25rem;
        border-radius: .95rem;
        background: linear-gradient(90deg, var(--music-search-surface-2), color-mix(in srgb, var(--music-search-surface-2) 60%, #fff), var(--music-search-surface-2));
        background-size: 220% 100%;
        animation: music-search-shimmer 1.2s linear infinite;
    }

    body.music-mobile-search-open {
        overflow: hidden !important;
    }

    .music-track-row.is-progressively-hidden,
    .music-track-comments-row.is-progressively-hidden {
        display: none !important;
    }
}

@keyframes music-search-shimmer {
    from { background-position: 100% 0; }
    to { background-position: -120% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .music-mobile-search__skeleton span { animation: none; }
}

/* Les attributs hidden doivent toujours gagner sur les styles de bouton. */
@media (max-width: 767.98px) {
    .music-mobile-search__more[hidden],
    .music-mobile-progressive-tracks[hidden] {
        display: none !important;
    }
}

/* Action explicite « Lire ensuite » dans la recherche mobile. */
@media (max-width: 767.98px) {
    .music-mobile-search-result__queue {
        display: flex;
        justify-content: flex-end;
        padding: .42rem .55rem .5rem 4.4rem;
        border-top: 1px solid var(--music-search-border);
    }

    .music-mobile-search-result__queue button {
        display: inline-flex;
        min-height: 2.15rem;
        align-items: center;
        gap: .38rem;
        padding: .36rem .7rem;
        border: 1px solid color-mix(in srgb, var(--music-search-accent) 52%, var(--music-search-border));
        border-radius: 999px;
        background: color-mix(in srgb, var(--music-search-accent) 9%, var(--music-search-surface));
        color: var(--music-search-accent);
        font: inherit;
        font-size: .68rem;
        font-weight: 820;
    }

    .music-mobile-search-result__queue button.is-queued {
        border-color: color-mix(in srgb, #24966f 58%, var(--music-search-border));
        background: color-mix(in srgb, #24966f 12%, var(--music-search-surface));
        color: #187454;
    }

    .music-mobile-search-result__queue button[hidden] {
        display: none !important;
    }

    .music-mobile-search-result__queue svg {
        width: 1rem;
        height: 1rem;
        flex: 0 0 auto;
        fill: currentColor;
    }
}

/* Retrait sûr des seuls éléments futurs, commun au dock et à la file mobile. */
.music-queue-removable-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2rem;
    align-items: center;
    gap: .25rem;
    min-width: 0;
}

.music-queue-removable-row > .global-music-player__dock-queue-item,
.music-queue-removable-row > .music-mobile-queue__item {
    width: 100%;
    min-width: 0;
}

.music-queue-remove {
    display: inline-grid;
    width: 1.9rem;
    height: 1.9rem;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: currentColor;
    opacity: .62;
}

.music-queue-remove:hover,
.music-queue-remove:focus-visible {
    background: color-mix(in srgb, currentColor 10%, transparent);
    opacity: 1;
}

.music-queue-remove svg {
    width: .95rem;
    height: .95rem;
    fill: currentColor;
}

@media (max-width: 767.98px) {
    .music-mobile-queue__group .music-queue-removable-row {
        grid-template-columns: minmax(0, 1fr) 2.35rem;
        gap: .2rem;
    }

    .music-mobile-queue__group .music-queue-remove {
        width: 2.25rem;
        height: 2.25rem;
        color: var(--music-search-muted, #66758d);
    }
}


.music-mobile-search__queue-notice {
    position: sticky;
    top: 4.25rem;
    z-index: 8;
    margin: .45rem .75rem 0;
    padding: .62rem .75rem;
    border: 1px solid color-mix(in srgb, #15966f 45%, transparent);
    border-radius: .72rem;
    background: color-mix(in srgb, #15966f 12%, var(--music-search-surface, #fff));
    color: #147052;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .1);
    font-size: .78rem;
    font-weight: 820;
}
.music-mobile-search__queue-notice[hidden] { display: none !important; }
.music-mobile-search__queue-notice.is-error {
    border-color: color-mix(in srgb, #dc2626 45%, transparent);
    background: color-mix(in srgb, #dc2626 10%, var(--music-search-surface, #fff));
    color: #b91c1c;
}
.music-mobile-search-result__queue button.is-confirmed {
    animation: musicQueueConfirmed .7s ease;
}
@keyframes musicQueueConfirmed {
    0%, 100% { transform: scale(1); }
    42% { transform: scale(1.035); box-shadow: 0 0 0 4px color-mix(in srgb, #15966f 18%, transparent); }
}
:root[data-theme="dark"] .music-mobile-search__queue-notice { color: #8be0bd; }
:root[data-theme="dark"] .music-mobile-search__queue-notice.is-error { color: #fca5a5; }

/* B.3.8 : longues listes et téléphones modestes. */
@supports (content-visibility: auto) {
    .music-mobile-search-result,
    .music-album-grid__item {
        content-visibility: auto;
        contain-intrinsic-size: auto 150px;
    }
}

.clubos-constrained-network .music-mobile-search-dialog {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.clubos-constrained-network .music-mobile-search__skeleton span,
.clubos-constrained-network .music-mobile-search-result [data-music-queue-next].is-confirmed,
.clubos-constrained-network .music-mobile-search-result [data-music-queue-last].is-confirmed {
    animation: none !important;
}
