/* FOND */
.blueback {

    background:
        linear-gradient(
            to top right,
            rgba(18,175,235,.28) 0%,
            rgba(18,175,235,.18) 35%,
            rgba(18,175,235,.06) 58%,
            rgba(18,175,235,0) 75%,
            rgba(18,175,235,0) 100%
        );

    border-radius:20px;
    padding:20px;
}



.audio-top {
    display:flex;
    gap:20px;
    align-items:flex-start;
    margin-bottom:15px;
}


.audio-top {
    display: flex;
    gap: 25px;

    align-items: flex-end;
}

/* LOGO */
.audio-cover {
    position: relative;
    width: 220px;
    height: 220px;
    flex-shrink: 0;
    overflow: hidden;
    cursor: pointer;
}

.audio-cover img {
    width: 100%;
    height: 100%;
	border-radius:10px;
    object-fit:cover;
}

/* PLAY */
.audio-cover::after {
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    width:140px;
    height:160px;
    transform:translate(-38%,-50%);
    background:white;
    opacity:.55;
    clip-path:polygon(
        0 0,
        100% 50%,
        0 100%
    );
}
/* PAUSE */
.audio-cover.playing::after {
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    width:120px;
    height:160px;
    transform:translate(-50%,-50%);
    clip-path:none;     /* important */
    background:
        linear-gradient(
            to right,
            white 0%,
            white 35%,
            transparent 35%,
            transparent 65%,
            white 65%,
            white 100%
        );
    opacity:.55;
}

.audio-cover,
.audio-cover * {
    /*outline:none !important;*/
    user-select:none;
    /*-webkit-user-select:none;*/
}

/* TURN AROUND */
.audio-cover img {
    transition:
        border-radius .8s ease,
        transform .8s ease;
}
.audio-cover.playing img {
    border-radius: 50%;
	transform: scale(.95);
	animation: spin 20s linear infinite;
}
@keyframes spin {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}



.track-active {

    font-weight: bold;

    color: #ffffff;

    text-shadow: 0 0 5px rgba(255,255,255,.5);
}

@media (min-width: 1236px) {

    .post_text {

        line-height: 1.2;

        font-size: 1.1em;
    }

}

.post_text span {

    display:block;
}


/* pour que le titre ne sorte pas du cadre*/
@media (max-width: 1235px) {

    .audio-top {

        display:flex;

        gap:15px;

    }

    .post_text {

        flex:1;
		font-size:0.85em;
        min-width:0;
    }

    .post_text span {

        display:block;

        overflow:hidden;

        white-space:nowrap;

        text-overflow:ellipsis;
    }

    .post_head{
		display:flex;
        min-width:0;
    }

    .post_title{
		flex:1;
        overflow:hidden;

        white-space:nowrap;

        text-overflow:ellipsis;

        min-width:0;

    }
}