/* ── Mixfeed — DJ Playlist — TMTL v2.1 ─────────────────────── */
/* Palette : theme-card=#080228  theme-bg-alt=#0b0124  theme-bg=#050018
             theme-accent=#ff2fd4  theme-muted=#a6a4c4  theme-radius=18px */

/* ══════════════════════════════════════════════════════════════
   FILTRES
   ══════════════════════════════════════════════════════════════ */
.mxf-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
    padding: 12px 16px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--theme-card) 92%, transparent),
        color-mix(in srgb, var(--theme-bg-alt) 55%, transparent));
    border: 1px solid rgba(255,255,255,.10);
    border-radius: calc(var(--theme-radius) + 4px);
    box-shadow: 0 14px 34px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
}
.mxf-filter-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 120px;
    flex: 1 1 120px;
}
.mxf-filter-label {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--theme-accent);
}
.mxf-select {
    appearance: none;
    background: color-mix(in srgb, var(--theme-bg) 42%, transparent);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 10px;
    color: var(--theme-text, #fff);
    font-size: 12px;
    padding: 6px 26px 6px 10px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ff2fd4' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    outline: none;
    transition: border-color .15s;
}
.mxf-select:focus { border-color: var(--theme-accent); }
.mxf-search { flex: 2 1 180px; min-width: 140px; }
.mxf-search input {
    width: 100%;
    background: color-mix(in srgb, var(--theme-bg) 42%, transparent);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 10px;
    color: var(--theme-text, #fff);
    font-size: 12px;
    padding: 6px 10px;
    outline: none;
    box-sizing: border-box;
    transition: border-color .15s;
}
.mxf-search input:focus { border-color: var(--theme-accent); }
.mxf-search input::placeholder { color: #2a2840 !important; opacity: 1 !important; }
.mxf-count {
    align-self: flex-end;
    font-size: 11px;
    font-weight: 700;
    color: color-mix(in srgb, var(--theme-accent) 70%, transparent);
    white-space: nowrap;
    padding-bottom: 6px;
}

/* ══════════════════════════════════════════════════════════════
   LISTE
   ══════════════════════════════════════════════════════════════ */
.mxf-list { display: flex; flex-direction: column; gap: 10px; }

@media (min-width: 900px) {
    .mxf-list--cols-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .mxf-list--cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .mxf-list--cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
}
@media (max-width: 899px) {
    .mxf-list--cols-2,
    .mxf-list--cols-3,
    .mxf-list--cols-4 { display: flex; flex-direction: column; }
}

.mxf-empty {
    padding: 36px;
    text-align: center;
    color: var(--theme-muted);
    font-size: 14px;
    border: 1px dashed rgba(255,255,255,.12);
    border-radius: calc(var(--theme-radius) + 4px);
}

/* ══════════════════════════════════════════════════════════════
   CARD — BASE (liste 1 colonne)
   ══════════════════════════════════════════════════════════════ */
.mxf-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    position: relative;
    overflow: hidden;
    border-radius: calc(var(--theme-radius) + 4px);
    border: 1px solid rgba(255,255,255,.10);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--theme-card) 92%, transparent),
        color-mix(in srgb, var(--theme-bg-alt) 55%, transparent));
    box-shadow:
        0 14px 34px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.06);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.mxf-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255,255,255,.16);
    box-shadow:
        0 18px 44px rgba(0,0,0,.34),
        inset 0 1px 0 rgba(255,255,255,.08);
}

/* Barre accent gauche */
.mxf-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--theme-accent) 90%, white) 0%,
        var(--theme-accent) 50%,
        color-mix(in srgb, var(--theme-accent) 50%, transparent) 100%);
    opacity: 0;
    transition: opacity .2s;
    z-index: 1;
}

/* Sheen supérieur */
.mxf-card::after {
    content: '';
    position: absolute;
    top: 0; left: 20%; right: 20%; height: 1px;
    background: linear-gradient(90deg,
        transparent,
        color-mix(in srgb, var(--theme-accent) 50%, transparent) 50%,
        transparent);
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;
}

/* ── État PLAYING ── */
.mxf-card.is-playing {
    border-color: color-mix(in srgb, var(--theme-accent) 45%, rgba(255,255,255,.10));
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--theme-card) 85%, color-mix(in srgb, var(--theme-accent) 30%, transparent)),
        color-mix(in srgb, var(--theme-bg-alt) 55%, transparent));
    box-shadow:
        0 18px 44px rgba(0,0,0,.34),
        0 0 32px color-mix(in srgb, var(--theme-accent) 18%, transparent),
        inset 0 1px 0 rgba(255,255,255,.10);
    transform: translateY(-2px);
}
.mxf-card.is-playing::before { opacity: 1; }
.mxf-card.is-playing::after  { opacity: 1; }
.mxf-card[data-hidden="1"]   { display: none; }

/* ── Top : pochette [+ canvas col-mode] ── */
.mxf-top {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    align-items: stretch;
}

/* ── Pochette ── */
.mxf-cover {
    width: 62px; height: 62px;
    flex-shrink: 0;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--theme-accent) 25%, var(--theme-card)),
        var(--theme-bg));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 10px;
    margin: 10px 0 10px 12px;
    box-shadow: 0 4px 14px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.07);
    transition: transform .22s ease, box-shadow .22s ease;
}
.mxf-card.is-playing .mxf-cover {
    transform: scale(1.05);
    box-shadow:
        0 6px 20px rgba(0,0,0,.55),
        0 0 18px color-mix(in srgb, var(--theme-accent) 32%, transparent),
        0 0 0 1px color-mix(in srgb, var(--theme-accent) 45%, transparent);
}
.mxf-cover img {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 8px;
}
.mxf-cover-icon {
    font-size: 26px;
    color: var(--theme-accent);
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--theme-accent) 55%, transparent));
}

/* Canvas — caché en 1-col */
.mxf-viz { display: none; }

/* ── Corps ── */
.mxf-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 14px 10px 12px;
    gap: 5px;
}

/* ══════════════════════════════════════════════════════════════
   CARD — MODE MULTI-COLONNES
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
    .mxf-list--cols-2 .mxf-card,
    .mxf-list--cols-3 .mxf-card,
    .mxf-list--cols-4 .mxf-card { flex-direction: column; }

    .mxf-list--cols-2 .mxf-top,
    .mxf-list--cols-3 .mxf-top,
    .mxf-list--cols-4 .mxf-top {
        flex-direction: row;
        align-items: stretch;
        padding: 12px 12px 0;
        gap: 10px;
        width: 100%;
        box-sizing: border-box;
    }

    .mxf-list--cols-2 .mxf-cover,
    .mxf-list--cols-3 .mxf-cover,
    .mxf-list--cols-4 .mxf-cover {
        width: 56px; height: 56px;
        margin: 0;
        flex-shrink: 0;
        border-radius: 8px;
    }

    .mxf-list--cols-2 .mxf-viz,
    .mxf-list--cols-3 .mxf-viz,
    .mxf-list--cols-4 .mxf-viz {
        display: block;
        flex: 1;
        min-width: 0;
        height: 56px;
        border-radius: 8px;
        background: color-mix(in srgb, var(--theme-bg) 42%, transparent);
        border: 1px solid rgba(255,255,255,.08);
        cursor: pointer;
        transition: border-color .18s;
    }
    .mxf-list--cols-2 .mxf-card.is-playing .mxf-viz,
    .mxf-list--cols-3 .mxf-card.is-playing .mxf-viz,
    .mxf-list--cols-4 .mxf-card.is-playing .mxf-viz {
        border-color: color-mix(in srgb, var(--theme-accent) 35%, transparent);
        box-shadow: 0 0 14px color-mix(in srgb, var(--theme-accent) 14%, transparent);
    }

    .mxf-list--cols-2 .mxf-body,
    .mxf-list--cols-3 .mxf-body,
    .mxf-list--cols-4 .mxf-body { padding: 10px 12px 12px; }
}

/* ══════════════════════════════════════════════════════════════
   MÉTA
   ══════════════════════════════════════════════════════════════ */
.mxf-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.mxf-title {
    font-family: system-ui, sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    letter-spacing: .02em;
}
.mxf-card.is-playing .mxf-title {
    color: #fff;
    text-shadow: 0 0 14px color-mix(in srgb, var(--theme-accent) 40%, transparent);
}

.mxf-tags { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }

.mxf-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
    letter-spacing: .02em;
}
.mxf-tag--dj {
    background: color-mix(in srgb, var(--theme-accent) 18%, transparent);
    color: color-mix(in srgb, var(--theme-accent-soft, #ff2fd4) 90%, white);
    border: 1px solid color-mix(in srgb, var(--theme-accent) 35%, transparent);
}
.mxf-tag--genre {
    background: rgba(255,255,255,.08);
    color: var(--theme-muted, #a6a4c4);
    border: 1px solid rgba(255,255,255,.12);
}
.mxf-tag--bpm {
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.38);
    border: 1px solid rgba(255,255,255,.08);
}

.mxf-duration {
    font-size: 10px;
    color: rgba(255,255,255,.38);
    font-variant-numeric: tabular-nums;
}
.mxf-desc {
    font-size: 11px;
    color: var(--theme-muted, #a6a4c4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ══════════════════════════════════════════════════════════════
   PLAYER
   ══════════════════════════════════════════════════════════════ */
.mxf-player {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
}
.mxf-player audio { display: none; }

/* ── Bouton play/pause — icônes CSS pures (évite rendu emoji bleu) ── */
.mxf-btn-play {
    flex-shrink: 0;
    position: relative;
    width: 30px; height: 30px;
    border-radius: 50%;
    border: none;
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
    background: linear-gradient(135deg, var(--theme-accent), color-mix(in srgb, var(--theme-accent) 70%, white));
    color: transparent !important;   /* masque le texte Unicode */
    font-size: 0 !important;         /* masque le texte Unicode */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 2px 10px color-mix(in srgb, var(--theme-accent) 45%, transparent),
        0 1px 0 rgba(255,255,255,.2) inset;
    transition: transform .12s, box-shadow .18s, opacity .15s;
}
.mxf-btn-play:hover  { opacity: .88; transform: scale(1.07); }
.mxf-btn-play:active { transform: scale(.88); }
.mxf-btn-play:focus  { outline: none; }

/* Icône ▶ (triangle CSS) */
.mxf-btn-play::before {
    content: '';
    display: block;
    position: absolute;
    top: 50%; left: 53%;
    transform: translate(-50%, -50%);
    width: 0; height: 0;
    border-style: solid;
    border-width: 5.5px 0 5.5px 9.5px;
    border-color: transparent transparent transparent #fff;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
}

/* Icône ⏸ (deux barres CSS) quand is-playing */
.mxf-card.is-playing .mxf-btn-play::before {
    width: 3px; height: 11px;
    border-style: none;
    border-width: 0;
    background: #fff;
    box-shadow: 6px 0 0 0 #fff;
    border-radius: 1px;
    top: 50%; left: 50%;
    transform: translate(-70%, -50%);
    filter: none;
}

/* Glow pulsant en lecture */
.mxf-card.is-playing .mxf-btn-play {
    box-shadow:
        0 3px 14px color-mix(in srgb, var(--theme-accent) 60%, transparent),
        0 0 24px color-mix(in srgb, var(--theme-accent) 35%, transparent),
        0 1px 0 rgba(255,255,255,.2) inset;
    animation: mxf-pulse 2s ease-in-out infinite;
}
@keyframes mxf-pulse {
    0%, 100% {
        box-shadow:
            0 3px 14px color-mix(in srgb, var(--theme-accent) 60%, transparent),
            0 0 24px color-mix(in srgb, var(--theme-accent) 30%, transparent),
            0 1px 0 rgba(255,255,255,.2) inset;
    }
    50% {
        box-shadow:
            0 3px 20px color-mix(in srgb, var(--theme-accent) 80%, transparent),
            0 0 40px color-mix(in srgb, var(--theme-accent) 45%, transparent),
            0 1px 0 rgba(255,255,255,.2) inset;
    }
}

/* ── Barre de progression ── */
.mxf-track { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }

.mxf-bar {
    height: 4px;
    background: rgba(255,255,255,.10);
    border-radius: 999px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: height .15s;
}
.mxf-bar:hover { height: 6px; }

.mxf-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: linear-gradient(90deg,
        var(--theme-accent),
        color-mix(in srgb, var(--theme-accent) 60%, white));
    border-radius: 999px;
    width: 0%;
    transition: width .1s linear;
    pointer-events: none;
}
.mxf-card.is-playing .mxf-fill {
    box-shadow: 0 0 8px color-mix(in srgb, var(--theme-accent) 55%, transparent);
}

.mxf-times {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: rgba(255,255,255,.38);
    font-variant-numeric: tabular-nums;
}
.mxf-card.is-playing .mxf-times { color: var(--theme-muted, #a6a4c4); }

/* ── Volume ── */
.mxf-vol {
    writing-mode: vertical-lr;
    direction: rtl;
    -webkit-appearance: slider-vertical;
    appearance: none;
    width: 4px; height: 36px;
    background: rgba(255,255,255,.10);
    border-radius: 999px;
    cursor: pointer;
    outline: none;
    accent-color: var(--theme-accent);
    flex-shrink: 0;
    margin-left: auto;
}
.mxf-vol::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--theme-accent);
    cursor: pointer;
    box-shadow: 0 0 6px color-mix(in srgb, var(--theme-accent) 50%, transparent);
}
.mxf-vol::-moz-range-thumb {
    width: 12px; height: 12px;
    border: none; border-radius: 50%;
    background: var(--theme-accent);
    cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 500px) {
    .mxf-cover { width: 54px; height: 54px; }
    .mxf-vol   { display: none; }
    .mxf-filters { gap: 6px; }
    .mxf-filter-group { min-width: 100%; flex: 1 1 100%; }
}