/*====================================================
        BIBLIOTHEQUE - STRUCTURE GENERALE
====================================================*/


.bibliotheque-container{

    width:95%;
    max-width:1400px;
    margin:30px auto;

}


.library{

    width:95%;
    max-width:1400px;
    margin:30px auto;
    background:var(--background);

}



/*====================================================
              HEADER BIBLIOTHEQUE
====================================================*/


.library-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:20px;

    margin-bottom:15px;

    box-shadow:var(--shadow);

}



.library-title h1{

    margin:0;

    font-size:30px;

    color:var(--text);

    font-family:var(--font-title);

}



.library-title p{

    margin:6px 0 0;

    color:var(--text-light);

}



/*====================================================
                BOUTON AJOUT
====================================================*/


.btn-add{

    background:var(--primary);

    color:var(--text-white);

    padding:10px 16px;

    text-decoration:none;

    border-radius:var(--pill-radius);

    font-weight:bold;

    transition:var(--transition);

}



.btn-add:hover{

    background:var(--primary-dark);

}



/*====================================================
                FILTRES
====================================================*/


.library-toolbar{

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:20px;

    padding:25px;

    box-shadow:var(--shadow);

    margin-bottom:30px;

}



.library-search{

    display:grid;

    grid-template-columns:1fr 220px 180px;

    gap:20px;

    align-items:center;

}



.library-search input,
.library-search select{

    height:54px;

    padding:0 20px;

    border:1px solid var(--border);

    background:var(--surface-alt);

    color:var(--text);

    font-size:16px;

}



.library-search input{

    border-radius:50px;

}



.library-search select{

    border-radius:14px;

}



.library-search input:focus,
.library-search select:focus{

    outline:none;

    border-color:var(--primary);

}



/* bouton recherche */


.btn-search{

    height:54px;

    border:none;

    border-radius:50px;

    background:var(--primary);

    color:#fff;

    font-weight:600;

    font-size:16px;

    cursor:pointer;

    transition:.3s;

}



.btn-search:hover{

    background:var(--primary-dark);

    transform:translateY(-2px);

}



/*====================================================
              CONTENEUR TABLEAU
====================================================*/


.library-grid{

    width:100%;

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:var(--radius);

    overflow:hidden;

    padding:0;

}



/*====================================================
              ENTETE TABLEAU DESKTOP
====================================================*/


.grid-header{

    display:grid;

    grid-template-columns:

    2fr
    130px
    80px
    70px
    1.3fr
    1fr
    1.4fr
    120px;


    padding:10px 12px;

    background:var(--primary);

    color:var(--text-white);

    font-size:13px;

    font-weight:bold;

}



/*====================================================
              LIGNE DANSE
====================================================*/


.grid-row{

    display:grid;

    grid-template-columns:
    minmax(230px,2fr)
    130px
    80px
    70px
    1.3fr
    1fr
    1.4fr
    120px;


    align-items:center;

    padding:8px 12px;

    border-top:1px solid var(--border);

    background:var(--surface);

    color:var(--text);

    font-size:14px;

    position:relative;

}



/*====================================================
              NOM DANSE
====================================================*/


.dance-name{
    display:flex;
    align-items:center;
    gap:8px;

    padding-left:55px;

    font-weight:bold;
    color:var(--text);
}

/*====================================================
              BADGES NIVEAUX
====================================================*/


.niveau-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:5px 10px;

    border-radius:var(--pill-radius);

    font-size:12px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.5px;

    white-space:nowrap;

}



/* Débutant */

.badge-debutant{

    background:#dfe8d3;

    color:#49613b;

    border:1px solid #c3d3b4;

}



/* Novice */

.badge-novice{

    background:#D9ECFF;

    color:#1E5A8A;

    border:1px solid #A8D0F0;

}



/* Intermédiaire */

.badge-intermediaire{

    background:#E6D6BC;

    color:#80601d;

    border:1px solid #C9AD76;

}



/* Avancé */

.badge-avance{

    background:#8b4b45;

    color:#fff;

    border:1px solid #6d3732;

}



/* Partenaire */

.badge-partenaire{

    background:#DCC6E0;

    color:#5B3A63;

    border:1px solid #BFA3C5;

}



/*====================================================
              RUBANS
====================================================*/


.grid-row{

    overflow:hidden;

}



.corner-ribbon{

    position:absolute;

    top:16px;

    left:-41px;

    width:150px;

    height:30px;

    display:flex;

    align-items:center;

    justify-content:center;

    transform:rotate(-45deg);

    color:#fff;

    font-size:.70rem;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

    z-index:10;

}



.ribbon-new{

    background:#6E8353;
    background:linear-gradient(135deg,#7A8F5B,#5D7144);

}



.ribbon-populaire{

    background:linear-gradient(135deg,#D75A4A,#B83A2E);

}



.ribbon-classique{

    background:#8A633C;

}



.ribbon-retro{

    background:#54718A;

}

.ribbon-top50{

    background:linear-gradient(135deg,#D8B24A,#B88B17);

}

.ribbon-top100{

    background:linear-gradient(135deg,#4A88C9,#2F66A5);

}

.ribbon-favorite{

    background:linear-gradient(135deg,#D86A8C,#B84E70);

}



/*====================================================
              ACTIONS
====================================================*/


.actions{

    display:flex;

    gap:5px;

    align-items:center;

    white-space:nowrap;

}



.action-btn{

    width:32px;

    height:28px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:var(--radius-small);

    text-decoration:none;

    font-size:13px;

    font-weight:bold;

    transition:var(--transition);

}



.action-btn:hover{

    transform:translateY(-2px);

    opacity:.85;

}



/* PDF */

.action-btn.pdf{

    background:#8b4b45;

    color:#fff;

}



/* Youtube */

.action-btn.youtube{

    background:#333;

    color:#fff;

}



/* Modifier */

.action-btn.edit{

    background:var(--secondary-dark);

    color:var(--text);

}



/* Supprimer */

.action-btn.delete{

    background:#555;

    color:#fff;

}



/*====================================================
              MEDIA BUTTONS
====================================================*/


.media-btn{

    border:1px solid transparent;

    transition:var(--transition);

}



.pdf-btn{

    background:#8b4b45;

    color:white;

}



.pdf-btn:hover{

    background:var(--surface);

    color:#8b4b45;

    border-color:#8b4b45;

}



.youtube-btn{

    background:#333;

    color:white;

}



.youtube-btn:hover{

    background:var(--surface);

    color:#333;

    border-color:#333;

}



/*====================================================
              EXPANSION DANSE
====================================================*/


.dance-expand{

    display:none;

    padding:25px;

    border-top:1px solid var(--border);

}



.dance-item.expanded .dance-expand{

    display:grid;

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

    gap:25px;

}



/* Colonnes expansion */


.expand-left,
.expand-center,
.expand-right{

    background:var(--surface-alt);

    padding:20px;

    border-radius:var(--radius-small);

    border:1px solid var(--border);

    box-shadow:var(--shadow);

}



/* Titres */


.expand-left h3,
.expand-center h3,
.expand-right h3{

    margin-bottom:20px;

    color:var(--primary);

    font-family:var(--font-title);

}



/* Informations expansion */


.detail-item{

    display:flex;

    justify-content:space-between;

    padding:10px 0;

    border-bottom:1px solid var(--border);

}



.detail-item:last-child{

    border-bottom:none;

}



.detail-item strong{

    color:var(--primary-dark);

}



.detail-item span{

    color:var(--text);

    font-weight:500;

}



/*====================================================
              VIDEO
====================================================*/


.expand-center iframe{

    width:100%;

    aspect-ratio:16/9;

    border:none;

    border-radius:var(--radius-small);

}



.empty-preview{

    display:flex;

    justify-content:center;

    align-items:center;

    height:220px;

    border:2px dashed var(--secondary-dark);

    border-radius:var(--radius-small);

    color:var(--text-light);

    font-weight:600;

    background:var(--surface);

}



/*====================================================
              PDF
====================================================*/


.pdf-preview{

    width:100%;

    height:420px;

    border:none;

    border-radius:var(--radius-small);

    background:var(--surface);

}



.pdf-toggle{

    background:var(--surface);

    border:2px solid var(--secondary-dark);

    border-radius:var(--radius);

    padding:30px;

    text-align:center;

    transition:var(--transition);

}



.pdf-toggle:hover{

    border-color:var(--primary);

}



.pdf-icon{

    font-size:42px;

    color:#8b4b45;

    margin-bottom:15px;

}



.pdf-toggle h3{

    margin-bottom:10px;

    color:var(--primary-dark);

}



.pdf-toggle p{

    color:var(--text-light);

    margin-bottom:25px;

}



.show-pdf-btn{

    background:var(--primary);

    color:var(--text-white);

    border:none;

    padding:12px 22px;

    border-radius:var(--pill-radius);

    cursor:pointer;

    font-weight:600;

}



/*====================================================
              OMBRES / TRANSITIONS
====================================================*/


.library-grid,
.library-header,
.expand-left,
.expand-center,
.expand-right{

    box-shadow:var(--shadow);

}



.grid-row,
.library-header,
.library-grid,
.expand-left,
.expand-center,
.expand-right{

    transition:var(--transition);

}

/*====================================================
              RESPONSIVE TABLETTE
====================================================*/


@media(max-width:1100px){

    .grid-header{

        display:none !important;

    }

}



/*====================================================
              MOBILE CARTE DANSE
====================================================*/


@media(max-width:800px){


    .grid-row{

        display:flex !important;

        flex-direction:column;

        gap:15px;

        padding:25px !important;

        margin-bottom:20px;

        border-radius:22px;

        background:var(--surface);

        box-shadow:var(--shadow);

        align-items:stretch;

    }



    .grid-row > div{

        width:100%;

    }
    
    /*====================================================
        RUBAN HORS FLUX GRID
====================================================*/

.grid-row > .corner-ribbon{

    position:absolute;

}

.grid-row{

    position:relative;

}

.corner-ribbon{

    grid-column:auto;

}



    /*--------------------------------
            TITRE
    --------------------------------*/


    .dance-name{

        order:1;

        font-size:22px;

        font-weight:700;

        color:var(--primary-dark);

        display:flex;

        align-items:center;

        padding-left:45px;

        padding-top:18px;

    }



    /*--------------------------------
            NIVEAU
    --------------------------------*/


    .grid-row > div:nth-of-type(2){

        order:2;

        padding-left:45px;

        background:none;

    }



    .niveau-badge{

        width:max-content;

    }



    /*--------------------------------
            INFORMATIONS
    --------------------------------*/


    .grid-row > div:nth-of-type(n+3):not(.actions){

        display:flex;

        justify-content:space-between;

        align-items:center;

        gap:15px;

        background:var(--surface-alt);

        padding:12px;

        border-radius:12px;

        order:3;

    }



    /* Comptes */


    .grid-row > div:nth-of-type(3)::before{

        content:"Comptes";

        font-weight:700;

        color:var(--primary-dark);

    }



    /* Murs */


    .grid-row > div:nth-of-type(4)::before{

        content:"Murs";

        font-weight:700;

        color:var(--primary-dark);

    }



    /* Chorégraphe */


    .grid-row > div:nth-of-type(5)::before{

        content:"Chorégraphe";

        font-weight:700;

        color:var(--primary-dark);

    }



    /* Artiste */


    .grid-row > div:nth-of-type(6)::before{

        content:"Artiste";

        font-weight:700;

        color:var(--primary-dark);

    }



    /* Musique */


    .grid-row > div:nth-of-type(7)::before{

        content:"Musique";

        font-weight:700;

        color:var(--primary-dark);

    }



    /*--------------------------------
            ACTIONS
    --------------------------------*/


    .actions{

        order:10;

        justify-content:flex-start;

        width:100%;

    }



}



/*====================================================
              EXPANSION MOBILE
====================================================*/


@media(max-width:800px){


    .dance-item.expanded .dance-expand{

        display:flex;

        flex-direction:column;

        gap:20px;

    }



    .expand-left{

        order:1;

    }



    .expand-center{

        order:2;

    }



    .expand-right{

        order:3;

    }

}



/*====================================================
              PETITS ECRANS
====================================================*/


@media(max-width:600px){


    .grid-row{

        display:flex !important;

        flex-direction:column;

        gap:15px;

        padding:25px !important;

        margin-bottom:20px;

        border-radius:22px;

        background:var(--surface);

        box-shadow:var(--shadow);

        align-items:stretch;

    }



    .grid-row > div{

        width:92%;

    }






    .library-header{

        flex-direction:column;

        align-items:stretch;

        text-align:center;

    }



    .library-title h1{

        font-size:24px;

    }



    .btn-add{

        width:100%;

    }



    .library-search{

        grid-template-columns:1fr;

        gap:15px;

    }



    .btn-search{

        width:100%;

    }



    .container{

        padding-left:10px;

        padding-right:10px;

    }



}



/*====================================================
              HOVER MOBILE
====================================================*/


@media(max-width:800px){


    .grid-row:hover{

        transform:translateY(-4px);

        box-shadow:0 12px 30px rgba(0,0,0,.10);

    }


}

/*====================================================
                    PAGINATION
====================================================*/


.pagination{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    margin:30px 0;

    flex-wrap:wrap;

}



.pagination a{

    text-decoration:none;

}



.page-number,
.page-btn{

    min-width:42px;

    height:42px;

    padding:0 15px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:var(--radius-small);

    color:var(--text);

    font-weight:600;

    transition:var(--transition);

}



.page-number:hover,
.page-btn:hover{

    background:var(--primary);

    border-color:var(--primary);

    color:var(--text-white);

}



.page-number.active{

    background:var(--primary);

    color:var(--text-white);

    border-color:var(--primary);

    box-shadow:var(--shadow);

}



/*====================================================
                COMPTEUR DANSES
====================================================*/


.dance-count{

    font-size:13px;

    color:var(--text-light);

    white-space:nowrap;

}



.dance-count strong{

    color:var(--primary);

}



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


.dance-info{

    color:var(--text-light);

}



.dance-info small{

    color:var(--text-light);

    font-size:11px;

}



/*====================================================
              SEPARATION DES CARTES
====================================================*/


.dance-card + .dance-card{

    border-top:1px solid var(--border);

}



/*====================================================
              FINITIONS THEME
====================================================*/


.library-grid,
.library-header,
.grid-row,
.expand-left,
.expand-center,
.expand-right{

    transition:var(--transition);

}



/* Ombres cohérentes */


.library-grid,
.library-header,
.expand-left,
.expand-center,
.expand-right{

    box-shadow:var(--shadow);

}



/*====================================================
              RESPONSIVE PAGINATION
====================================================*/


@media(max-width:600px){


    .pagination{

        gap:6px;

        margin:20px 0;

    }



    .page-number,
    .page-btn{

        min-width:36px;

        height:36px;

        font-size:13px;

        padding:0 10px;

    }


}



/*====================================================
              FINITIONS MOBILE
====================================================*/


@media(max-width:600px){


    .library-grid{

        border-radius:18px;

    }



    .grid-row{

        margin-bottom:15px;

    }



    .actions{

        flex-wrap:wrap;

    }



}

.ribbon-test {
    background: red;
    color:white;
}




.explorer-autrement{

    margin:40px 0;


}

.explorer-autrement h3{

    margin:0 0 18px;
    font-size:20px;
    text-align:center;
    width:100%;

}

.collection-btn{

    display:inline-flex;

    align-items:center;

    padding:12px 22px;

    border-radius:999px;

    background:#F7F3EC;

    color:#4B3F35;

    text-decoration:none;

    font-weight:600;

    border:1px solid #DDD;

    transition:.25s;

}

.collection-btn:hover{

    background:#6E8353;

    color:#fff;

}

.collection-btn.active{

    background:#6E8353;

    color:#fff;

}

.collection-buttons{

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

}


@media (max-width:768px){

    .collection-buttons{

        flex-direction:column;
        align-items:center;

    }

    .collection-btn{

        width:100%;
        max-width:320px;
        justify-content:center;

    }

}

    .explorer-autrement h3{

        text-align:center;
        width:100%;
        margin:0 auto 20px;

    }

}