/* Réglages des sliders de volume et de recherche */
    .slider-container {
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1;
    }

    .seek-slider,
    .volume-slider {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        height: 5px;
        background: black;
    }

    .seek-slider::-webkit-slider-thumb,
    .volume-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 15px;
        height: 15px;
        background: var(--color-primary);
        cursor: pointer;
        border-radius: 50%;
        margin-top: -6.5px;
    }

    .seek-slider::-webkit-slider-runnable-track,
    .volume-slider::-webkit-slider-runnable-track {
        background: var(--color-primary);
        height: 2px;
    }

    .seek-slider::-moz-range-track,
    .volume-slider::-moz-range-track {
        background: var(--color-primary);
        height: 2px;
    }

    .seek-slider {
        width: 60%;
    }

    .volume-slider {
        width: 30%;
    }

    i.fa-volume-down,
    i.fa-volume-up {
        padding: 10px;
    }

    .current-time,
    .total-duration {
        padding: 10px;
    }

    /* Affichage du lecteur et de ses éléments */
    .player {
        display: grid;
        grid-template-columns: minmax(auto, 180px) minmax(auto, 1fr) minmax(auto, 1fr) minmax(auto, 1fr) minmax(auto, 1fr);
        grid-template-rows: repeat(4, 1fr);
        max-width: 80vw;
        height: 180px;
        margin: 50px auto;
        background-color: black;
        color: var(--color-primary);
        box-shadow: var(--shadow-card);
        font-family: Philosopher, serif;
        border-radius : 7px;
    }

    .art {
        grid-area: 1 / 1 / 5 / 2;
        display: flex;
        justify-content: center;
        align-items: center;
        max-height: 180px;
    }

    .track-art {
        border-radius: 2%;
        max-height: 85%;
        width: auto;
    }

    .track-name {
        grid-area: 1 / 2 / 2 / 5;
        padding-left: 2%;
        color: var(--color-nav);
        font-size: 1.7rem;
        display: flex;
        align-items: center;
        font-weight: bold;
    }

    .track-artist {
        grid-area: 2 / 2 / 3 / 4;
        padding-left: 4%;
    }

    .now-playing {
        grid-area: 1 / 5 / 2 / 6;
        text-align: right;
        padding: 10px 10%;
        font-weight: bold;
    }

    .seek {
        grid-area: 3 / 2 / 4 / 6;
        margin-top: -2%;
    }

    .volume {
        grid-area: 4 / 5 / 5 / 6;
        width: 20vw;
        display: flex;
        align-items: center;
        max-height: 70%;
    }

    .external-link {
        grid-area: 2 / 4 / 3 / 6;
        padding: 1% 5%;
        background-color: var(--color-nav);
        font-weight: bold;
        border-radius: 10px;
        margin: auto;
        margin-right: 5%;
        margin-top: -1%;
    }

    .external-link:hover {
        background-color: var(--color-hover);
        transition: background-color .2s ease;
    }

    .mobile-external-link {
        display: none;
    }
    
    /* Boutons de navigation */
    .player-buttons {
        grid-area: 4 / 1 / 5 / 6;
        display: flex;
        justify-content: center;
        align-items: center;
        max-height: 70%;
    }

    .prev-track,
    .playpause-track,
    .next-track {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 2%;
        transition: color .2s;
        color: var(--color-nav);
        max-height: 5%;
    }

    .playpause-track:hover,
    .prev-track:hover,
    .next-track:hover {
        color: var(--color-hover);    
    }

    .playpause-track {
        margin: 0 2vw;
        width: auto;
    }

    i.fa-play-circle,
    i.fa-pause-circle,
    i.fa-step-forward,
    i.fa-step-backward {
        cursor: pointer;
    }

    /* Responsif */
    @media screen and (max-width: 900px) {
        .player {
            max-width: 560px;
        }

        .playpause-track,
        .next-track,
        .prev-track {
            max-height: 70%;
        }

        .mobile-external-link {
            display: inline;
        }

        .desktop-external-link {
            display: none;
        }

        .seek {
            margin-top: -5%;
        }
    }

    @media screen and (max-width: 760px) {
        .player {
            grid-template-columns: 0fr 1fr 1fr 1fr 1fr;
        }

        .track-art {
            display: none;
        }

        .volume {
            display: none;
        }

        .playpause-track {
            margin: 0 10vw;
        }

        .external-link {
            padding: 4% 2%;
            margin-top: -4%;
        }

        .track-name {
            padding: 2vw 3vw;
        }

        .track-artist {
            padding: 0 6vw;
        }
    }

    @media screen and (max-width: 580px) {
        .player {
            max-width: 90vw;
        }
    }