/* ============================ */
/*        LISTE CHANSONS        */ 
/* ============================ */

.song-list-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:22px;
    row-gap:15px;
    margin-top:20px;
}

.song-list-card{
    display:flex;
    flex-direction:column;
    margin:0;
    background:#1a102d;

    border-radius:18px;

    border:1px solid rgba(255,255,255,0.08);

    padding:18px;

    text-align:left;

    box-shadow:
    0 4px 14px rgba(0,0,0,0.28);

    transition:.2s ease;
}


.song-list-title{
    margin:0 0 14px;

    font-size:20px;

    font-weight:700;

    line-height:1.3;

    font-style:normal;
}

.song-list-body{
    display:grid;

    grid-template-columns:110px minmax(0,1fr);

    gap:16px;

    align-items:start;
}

.song-list-cover{
    display:block;
}

.song-list-cover img{
    display:block;

    width:110px;
    height:110px;

    object-fit:cover;

    border-radius:14px;

    border:1px solid rgba(255,255,255,0.08);

    transition:.2s ease;
}

.song-list-card:hover .song-list-cover img{
    transform:scale(1.03);
}

.song-list-content{
    min-width:0;
}

.song-future-badge{
    display:inline-flex;
    align-items:center;

    margin-right:10px;

    padding:4px 10px;

    border-radius:999px;

    background:
    linear-gradient(
        145deg,
        rgba(170,120,255,0.35),
        rgba(70,30,140,0.55)
    );

    border:1px solid rgba(255,255,255,0.10);

    font-size:11px;
    font-weight:700;

    letter-spacing:.4px;

    text-transform:uppercase;

    color:#ffffff;
}

.song-list-description{
    font-size:15px;

    line-height:1.7;

    opacity:.92;
}

.song-list-status{
    font-size:15px;
	
    line-height:1.6;

    opacity:.88;
	
	margin-bottom:10px;
	
}

.song-list-status strong{
    color:#ffffff;
}

.song-list-actions{
    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:18px;

    padding-top:16px;

    border-top:1px solid rgba(255,255,255,0.08);
}

.song-list-button{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    padding:4px 4px;

    border-radius:12px;

    text-decoration:none;

    font-size:13px;
    font-weight:700;

    transition:.2s ease;
}

.song-list-button:hover{
    transform:translateY(-2px);
}

.song-list-button.details{
	
	width:100%;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-top:10px;

    padding:3px auto;

    border-radius:999px;

    background:
    linear-gradient(
        145deg,
        rgba(145,95,255,0.55),
        rgba(30,12,50,0.92)
    );

    box-shadow:
    0 8px 24px rgba(0,0,0,0.45),
    0 0 18px rgba(170,120,255,0.35);

    border:1px solid rgba(201,182,255,0.16);

    color:#c9b6ff;

    font-size:11px;

    font-weight:700;

    letter-spacing:.2px;

   

    transition:
    transform .16s ease,
    background .16s ease,
    border-color .16s ease;
}

.song-list-button.details:hover{

    transform:translateY(-1px);

    border-color:rgba(201,182,255,0.28);

    background:
    linear-gradient(
        145deg,
        rgba(201,182,255,0.20),
        rgba(120,90,200,0.14)
    );
}


/* ======================= */
/* BOUTONS PLATEFORMES DANS FICHES CHANSONS */
/* ======================= */

.song-platform-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:10px;

    min-height:42px;

    padding:10px 18px;

    border-radius:999px;

    text-decoration:none;

    font-size:14px;
    font-weight:700;

    letter-spacing:.2px;

    border:1px solid rgba(255,255,255,0.10);

    background:
    linear-gradient(
        145deg,
        rgba(40,40,55,0.96),
        rgba(20,20,32,0.98)
    );

    box-shadow:
    0 4px 14px rgba(0,0,0,0.24);

    transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.song-platform-link svg{
    width:18px;
    height:18px;

    fill:currentColor;

    flex-shrink:0;
}

.song-platform-link:hover{

    transform:translateY(-2px);

    background:
    linear-gradient(
        145deg,
        rgba(145,95,255,0.55),
        rgba(30,12,50,0.92)
    );

    box-shadow:
    0 8px 24px rgba(0,0,0,0.45),
    0 0 18px rgba(170,120,255,0.35);
}


/* ===== SPOTIFY ===== */

.song-platform-link.spotify{
    color:#1DB954;
}

.song-platform-link.spotify:hover{
    border-color:#1DB954;
}


/* ===== YOUTUBE ===== */

.song-platform-link.youtube{
    color:#FF4D4D;
}

.song-platform-link.youtube:hover{
    border-color:#FF4D4D;
}


/* ===== LABELS MOBILE ===== */

.mobile-label{
    display:none;
}

@media (max-width:768px){

    .desktop-label{
        display:none;
    }

    .mobile-label{
        display:inline;
    }

    .music-links{
        gap:8px;
        padding-left:0;
        margin-top:12px;
    }

    .song-platform-link{

        min-height:38px;

        padding:8px 12px;

        gap:7px;

        font-size:13px;
    }

    .song-platform-link svg{
        width:16px;
        height:16px;
    }
}




@media (min-width:769px){

    .song-list-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }

}

@media (max-width:768px){

    .song-list-grid{
        grid-template-columns:1fr;
    }

    .song-list-body{
        grid-template-columns:110px minmax(0,1fr);

        gap:14px;
    }

    .song-list-cover img{
        width:110px;
        height:110px;
    }

    .song-list-title{
        font-size:18px;
    }

    .song-list-description,
    .song-list-status{
        font-size:14px;
        line-height:1.6;
    }

    .song-list-actions{
        gap:8px;
    }

    .song-list-button{
        font-size:12px;

        padding:4px 12px;
    }
}

/* ======================= */
/* ===== PAGINATION ===== */
/* ======================= */
.pagination{

display:flex;
justify-content:center;
align-items:center;
gap:8px;

padding:10px 15px 20px;

flex-wrap:wrap;
}


.page{

display:flex;
align-items:center;
justify-content:center;

min-width:38px;
height:38px;

padding:0 12px;

border-radius:10px;

background:#1a102d;

color:#ffffff;

text-decoration:none;

font-weight:700;

transition:.2s ease;

border:1px solid rgba(255,255,255,0.08);
}


.page:hover{

transform:translateY(-2px);

background:#2b1848;
}


.page.current{

background:#ffffff;

color:#111111;
}



/* ================================ */
/* ==== PAGE CHANSON DETAILLEES ====*/
/* ================================ */


.song-detail-title { 
    text-align:center;
	font-size:22px;
}

.song-detail-title::before {
    content: "🎵";
    margin-right: 8px;
    opacity: 0.8;
    font-size: 0.9em;
}


.song-detail-section-img-desc {
	display: flex;
    gap: 15px;
	margin:10px 0 20px;
	
}

.song-detail-section-img-desc img {
    width:300px;
    height:300px;
    min-width:300px;
    object-fit:cover;
    border-radius:18px;
    flex-shrink:0;
	border:1px solid #ffffff;
}

.song-detail-section-one-present{
    flex:1;
	padding:18px;
	text-align:left;
	background:#1a102d;
    border-radius:18px;
	border:1px solid rgba(255,255,255,0.10);
}

.song-description-longue {
	margin-top:10px;
}

  /* infos detail chansons */
.info-mini{

    display:flex;

    flex-wrap:wrap;

    gap:10px 4px;

    margin:18px 0 0;

    padding:12px 0;

    border-top:1px solid rgba(255,255,255,0.06);

    border-bottom:1px solid rgba(255,255,255,0.06);

    font-size:12px;

    line-height:1.5;
}


.info{

    display:inline-flex;

    align-items:center;

    gap:7px;

    padding:3px 9px;

    min-height:28px;

    border-radius:999px;

    background:
    linear-gradient(
        145deg,
        rgba(255,255,255,0.04),
        rgba(255,255,255,0.02)
    );

    border:1px solid rgba(255,255,255,0.05);

    color:rgba(255,255,255,0.82);


    white-space:nowrap;
}
.info strong{

    color:#c9b6ff;

    font-weight:700;
}

.music-links {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:5px 0;
    padding-left:20px;
}
	


/*   PAROLES + H2... */
.song-paroles-section {
	margin:10px 0 10px;
	padding:18px;
	text-align:left;
	background:#1a102d;
    border-radius:18px;
	border:1px solid rgba(255,255,255,0.10);
}
/*   PAROLES SEULES... */

.song-lyrics{
	
	position:relative;
    overflow:hidden;

    margin-top:22px;

    padding:34px 34px 34px 52px;

    border-radius:18px;

    background:
    linear-gradient(
        145deg,
        rgba(255,255,255,0.045),
        rgba(255,255,255,0.02)
    );

    border:1px solid rgba(255,255,255,0.05);

    font-size:18px;

    line-height:2;

    color:rgba(255,255,255,0.95);

    box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 8px 24px rgba(0,0,0,0.18);
}

.song-lyrics::before{

    content:"";

    position:absolute;

    top:26px;
    bottom:26px;

    left:28px;

    width:1px;

   background:
     linear-gradient(
     to bottom,
     transparent,
     rgba(201,182,255,0.22),
     rgba(201,182,255,0.22),
     transparent
);

    pointer-events:none;
}

.lyrics-space{
    height:42px;
}

.song-lyrics br{
   display:block;
   content:"";
   margin-top:10px;
}

/* ======================= */
/* NAVIGATION CHANSONS */
/* ======================= */

.song-nav{

    display:grid;

    grid-template-columns:1fr auto 1fr;

    gap:18px;

    align-items:center;

    margin:10px 0 20px;
}


/* ===== CARTES ===== */

.song-cardmini{

    display:flex;

    align-items:center;

    gap:14px;

    min-width:0;

    text-decoration:none;

    background:#1a102d;

    border-radius:14px;

    padding:12px 14px;

    border:1px solid rgba(255,255,255,0.06);

    transition:
    transform .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.song-cardmini:hover{

    transform:translateY(-3px);

    background:
    linear-gradient(
        145deg,
        rgba(145,95,255,0.55),
        rgba(30,12,50,0.92)
    );

    box-shadow:
    0 8px 24px rgba(0,0,0,0.45),
    0 0 18px rgba(170,120,255,0.35);

    color:#c9b6ff;
}


/* ===== IMAGES ===== */

.song-cardmini img{

    width:56px;
    height:56px;

    object-fit:cover;

    border-radius:10px;

    flex-shrink:0;
}


/* ===== TEXTE ===== */

.song-cardmini strong{

    color:#fff;

    font-size:.92rem;

    line-height:1.35;
}

.song-cardmini .label{

    display:block;

    font-size:.72rem;

    color:#c9b6ff;

    margin-bottom:2px;

    opacity:.82;
}


/* ===== PRECEDENT ===== */

.song-cardmini.prev{

    justify-content:flex-end;

    text-align:right;
}


/* ===== SUIVANT ===== */

.song-cardmini.next{

    justify-content:flex-start;

    text-align:left;
}


/* ===== BOUTON CENTRE ===== */

.song-all{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:42px;

    padding:.85rem 1.3rem;

    background:transparent;

    border:1px solid #444;

    border-radius:999px;

    text-decoration:none;

    color:#c9b6ff;

    font-size:.88rem;

    transition:
    background .18s ease,
    color .18s ease,
    border-color .18s ease;
}

.song-all:hover{

background:
    linear-gradient(
        145deg,
        rgba(145,95,255,0.55),
        rgba(30,12,50,0.92)
    );

    box-shadow:
    0 8px 24px rgba(0,0,0,0.45),
    0 0 18px rgba(170,120,255,0.35);

    border-color:#666;
}


@media (max-width:768px){

    .song-detail-section-img-desc{
        flex-direction:column;
        align-items:center;
        gap:0;
    }

    .song-detail-section-img-desc img{
        margin-bottom:20px;

        width:100%;
        max-width:320px;
        height:auto;
        min-width:0;
    }

    .song-detail-section-one-present{
        width:100%;
    }

    .info{
        align-items:center;
    }

    .info-mini{
        font-size:0.85rem;
        gap:0.5rem 0.25rem;
    }

    .music-links{
        gap:8px;
        padding-left:0;
        margin-top:12px;
    }

    .song-platform-link{

        min-height:38px;

        padding:8px 12px;

        gap:7px;

        font-size:13px;
    }

    .song-platform-link svg{
        width:16px;
        height:16px;
    }

    .desktop-label{
        display:none;
    }

    .mobile-label{
        display:inline;
    }

    .song-lyrics{

        padding:26px 22px 26px 44px;

        font-size:16px;

        line-height:1.9;
    }

    .song-lyrics::before{
        left:22px;
    }

    .lyrics-space{
        height:34px;
    }


    /* ======================= */
    /* NAVIGATION MOBILE */
    /* ======================= */

    .song-nav{

        display:flex;

        flex-wrap:wrap;

        justify-content:center;

        gap:10px;

        margin:20px 0 10px;
    }

    .song-cardmini{

        flex:0 0 auto;

        min-width:0;

        min-height:40px;

        justify-content:center;

        padding:10px 12px;

        border-radius:999px;
    }

    .song-cardmini.prev{
        order:1;
    }

    .song-cardmini.next{
        order:2;
    }

    .song-all{

        order:3;

        width:auto;

        margin-left:0 auto;

        min-height:40px;

        padding:.8rem 1rem;

        border-radius:999px;

        text-align:center;

        font-size:.85rem;
}

    .song-cardmini img,
    .song-cardmini strong{
        display:none;
    }

    .song-cardmini .label{

        display:block;

        margin:0;

        font-size:.82rem;
    }
}