.mlc-player-container {
    background: var(--mlc-bg) !important;
    padding: 15px !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    box-sizing: border-box !important;
    /* margin: 1.5em 0 !important; */
    display: block !important;
    width: 100%;
}

.mlc-player-container .mlc-title {
    display: block !important;
    color: var(--mlc-title) !important;
    font-size: var(--mlc-fs) !important;
    font-weight: var(--mlc-fw) !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    background: none !important;
    width: auto !important;
    border: none !important;
    font-family: inherit !important;
}

.mlc-controls-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 15px !important;
    width: 100% !important;
}

.mlc-player-container button.mlc-play-btn {
    all: unset !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    background-color: var(--mlc-main) !important;
    color: var(--mlc-svg) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}

.mlc-progress-wrapper {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.mlc-progress-container {
    background: rgba(0,0,0,0.1) !important;
    height: 8px !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    margin-bottom: 5px !important;
    cursor: pointer !important;
}

/* LA BARRE QUI SE REMPLIT */
.mlc-progress-bar {
    background-color: var(--mlc-main) !important;
    height: 100% !important;
    width: 0%;
    transition: width 0.1s linear;
}

.mlc-volume-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: var(--mlc-vol-svg) !important;
    flex-shrink: 0 !important;
    height: 44px !important;
}

/* RESET DU SLIDER DE VOLUME */
.mlc-volume-slider {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    width: 70px !important;
    height: 6px !important; /* On en fait une ligne */
    background: rgba(0,0,0,0.1) !important;
    border-radius: 5px !important;
    border: none !important; /* Enlève la bordure rectangulaire du thème */
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    accent-color: var(--mlc-main) !important;
}

/* Style du curseur (le rond) pour Chrome/Safari */
.mlc-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    width: 12px !important;
    height: 12px !important;
    background: var(--mlc-main) !important;
    border-radius: 50% !important;
}

/* Style du curseur pour Firefox */
.mlc-volume-slider::-moz-range-thumb {
    width: 12px !important;
    height: 12px !important;
    background: var(--mlc-main) !important;
    border-radius: 50% !important;
    border: none !important;
}

.mlc-time-info {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 12px !important;
    color: var(--mlc-title) !important;
}

.wp-block-mlc-lecteur-custom .mlc-player-container,
.mlc-editor-wrapper .mlc-player-container {
    background-color: var(--mlc-bg) !important;
}