/*====================================================
            BIBLIOTHEQUE - CARTES DANSES
====================================================*/

.bibliotheque-container{

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

}


/* GRILLE SERRÉE */

.dance-grid{

    display:flex;
    flex-direction:column;
    gap:8px;

}


/* CARTE DANSE */

.dance-card{

    background:#ffffff;
    border:1px solid #ddd;
    border-radius:4px; /* look carré MySQL */
    padding:12px 16px;

    display:flex;
    flex-direction:column;

    transition:0.25s ease;

}


/* HOVER */

.dance-card:hover{

    transform:translateX(5px);
    box-shadow:0 4px 12px rgba(0,0,0,0.15);

}


/* ENTÊTE */

.dance-header{

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

    margin-bottom:8px;

}


.dance-title{

    font-size:20px;
    font-weight:700;
    color:#333;

}


.dance-niveau{

    padding:4px 10px;
    border-radius:3px;

    background:#d6a84f;
    color:white;

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

}



/* INFORMATIONS */

.dance-info{

    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:6px;

    font-size:14px;

}


.dance-info div{

    background:#f5f1e8;

    padding:7px;

    border-left:3px solid #d6a84f;

}



/* BOUTONS */

.dance-actions{

    margin-top:10px;

    display:flex;
    gap:8px;

}


.dance-actions a{

    padding:6px 12px;

    border-radius:3px;

    background:#333;
    color:white;

    font-size:13px;

}


.dance-actions a:hover{

    background:#d6a84f;

}



/*====================================================
                BADGE NOUVEAUTE
====================================================*/

.badge-nouveau{

display:inline-flex;

    align-items:center;

    background:#b88935;

    color:white;

    padding:4px 8px;

    border-radius:3px;

    font-size:10px;

    font-weight:bold;

    text-transform:uppercase;

    letter-spacing:.8px;

}



/*====================================================
                TITRE DANSE
====================================================*/

.dance-title{

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

    margin:0;

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

    color:#2f2f2f;

}



/*====================================================
            LIGNE D'INFORMATIONS
====================================================*/

.dance-meta{

    display:flex;

    flex-wrap:wrap;

    gap:6px;

    margin-top:6px;

}



.meta-item{

    background:#eee6d6;

    border:1px solid #ddd0b8;

    padding:5px 9px;

    border-radius:3px;

    font-size:12px;

    color:#555;

}



.meta-item strong{

    color:#333;

}



/*====================================================
                LIENS MEDIA
====================================================*/

.dance-media{

    display:flex;

    gap:8px;

    margin-top:10px;

}



.media-btn{

    display:flex;

    align-items:center;

    gap:5px;

    padding:7px 12px;

    border-radius:3px;

    font-size:13px;

    font-weight:bold;

    transition:0.2s ease;

}



/* PDF */

.pdf-btn{

    background:#8b3a3a;

    color:white;

}


/* YOUTUBE */

.youtube-btn{

    background:#333;

    color:white;

}



.media-btn:hover{

    transform:translateY(-2px);

    opacity:.85;

}



/*====================================================
              RESPONSIVE MOBILE
====================================================*/

@media(max-width:800px){


    .dance-info{

        grid-template-columns:repeat(2,1fr);

    }


    .dance-meta{

        flex-direction:column;

    }


}

/*====================================================
        CARTE DANSE HORIZONTALE - STYLE PLAYLIST
====================================================*/

.dance-card{

    display:grid;

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

    align-items:center;

    gap:20px;

    min-height:90px;

    padding:12px 18px;

}



/*====================================================
              BLOC TITRE
====================================================*/

.dance-header{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    margin:0;

}



.dance-title{

    font-size:18px;

    line-height:1.2;

}



.dance-niveau{

    margin-top:6px;

}



/*====================================================
              INFORMATIONS CENTRALES
====================================================*/

.dance-info{

    display:flex;

    flex-wrap:wrap;

    gap:6px;

}



.dance-info div{

    padding:5px 10px;

    white-space:nowrap;

}



/*====================================================
              ACTIONS À DROITE
====================================================*/

.dance-actions{

    margin:0;

    display:flex;

    flex-direction:column;

    gap:6px;

}



.dance-actions a{

    text-align:center;

    min-width:90px;

}



/*====================================================
              HOVER PLAYLIST
====================================================*/

.dance-card:hover{

    transform:translateX(4px);

    border-left:4px solid #b88935;

}



/*====================================================
              VERSION MOBILE
====================================================*/

@media(max-width:900px){


    .dance-card{

        grid-template-columns:1fr;

        gap:12px;

    }


    .dance-actions{

        flex-direction:row;

    }

}

/*====================================================
          BARRE OUTILS BIBLIOTHEQUE
====================================================*/

.bibliotheque-toolbar{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    padding:12px 15px;

    margin-bottom:12px;

    background:#ffffff;

    border:1px solid #ddd;

    border-radius:4px;

}



/*====================================================
              RECHERCHE
====================================================*/

.search-box{

    flex:1;

}



.search-box input{

    width:100%;

    height:38px;

    padding:0 12px;

    border:1px solid #ccc;

    border-radius:3px;

    background:#faf8f2;

    font-size:14px;

}



.search-box input:focus{

    outline:none;

    border-color:#b88935;

}



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

.filters{

    display:flex;

    gap:8px;

}



.filters select{

    height:38px;

    padding:0 10px;

    border:1px solid #ccc;

    border-radius:3px;

    background:#fff;

    font-size:13px;

    cursor:pointer;

}



.filters select:focus{

    outline:none;

    border-color:#b88935;

}



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

.dance-count{

    font-size:13px;

    color:#555;

    white-space:nowrap;

}



.dance-count strong{

    color:#b88935;

}



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

@media(max-width:900px){


    .bibliotheque-toolbar{

        flex-direction:column;

        align-items:stretch;

    }


    .filters{

        width:100%;

    }


    .filters select{

        flex:1;

    }

}

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

.bibliotheque-header{

    width:95%;

    max-width:1400px;

    margin:25px auto 15px;

    padding:20px;

    background:#ffffff;

    border:1px solid #ddd;

    border-radius:4px;

}



/* TITRE */

.bibliotheque-header h1{

    margin:0;

    font-size:30px;

    color:#2f2f2f;

    letter-spacing:.5px;

}



/* DESCRIPTION */

.bibliotheque-header p{

    margin-top:8px;

    max-width:800px;

    color:#666;

    font-size:15px;

    line-height:1.5;

}



/*====================================================
            STATISTIQUES RAPIDES
====================================================*/

.bibliotheque-stats{

    display:flex;

    gap:10px;

    margin-top:18px;

}



.stat-box{

    min-width:130px;

    padding:12px 15px;

    background:#eee6d6;

    border-left:4px solid #b88935;

    border-radius:3px;

}



.stat-box span{

    display:block;

    font-size:12px;

    color:#666;

    text-transform:uppercase;

}



.stat-box strong{

    display:block;

    margin-top:4px;

    font-size:22px;

    color:#2f2f2f;

}



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

@media(max-width:700px){


    .bibliotheque-stats{

        flex-direction:column;

    }


    .bibliotheque-header h1{

        font-size:24px;

    }

}

/*====================================================
              NIVEAUX DES DANSES
====================================================*/

.niveau{

    display:inline-flex;

    align-items:center;

    padding:4px 10px;

    font-size:12px;

    font-weight:bold;

    border-radius:3px;

    text-transform:uppercase;

    letter-spacing:.5px;

}



/* DEBUTANT */

.niveau-debutant{

    background:#dfead5;

    color:#356b2d;

}



/* INTERMEDIAIRE */

.niveau-intermediaire{

    background:#eee1bd;

    color:#80601d;

}



/* AVANCE */

.niveau-avance{

    background:#ead4d4;

    color:#7a2727;

}



/*====================================================
          SEPARATION STYLE PLAYLIST
====================================================*/

.dance-card + .dance-card{

    border-top:1px solid #e5e5e5;

}



/*====================================================
          INDICATEUR LATERAL
====================================================*/

.dance-card{

    position:relative;

    overflow:hidden;

}



.dance-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:3px;

    height:100%;

    background:#b88935;

    opacity:0;

    transition:.25s ease;

}



.dance-card:hover::before{

    opacity:1;

}



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

.dance-info{

    color:#555;

}



.dance-info small{

    color:#888;

    font-size:11px;

}



/*====================================================
              BOUTONS MEDIA FINAL
====================================================*/

.media-btn{

    border:1px solid transparent;

    transition:.2s ease;

}



.pdf-btn:hover{

    background:#ffffff;

    color:#8b3a3a;

    border-color:#8b3a3a;

}



.youtube-btn:hover{

    background:#ffffff;

    color:#333;

    border-color:#333;

}

/*====================================================
              RESPONSIVE COMPLET
====================================================*/


@media(max-width:1100px){


    .dance-card{

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

        gap:12px;

        padding:10px 12px;

    }


    .dance-title{

        font-size:16px;

    }


    .dance-info div{

        font-size:12px;

        padding:4px 7px;

    }


}



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


@media(max-width:800px){


    .dance-card{

        grid-template-columns:1fr;

        gap:10px;

    }



    .dance-header{

        flex-direction:row;

        justify-content:space-between;

        align-items:center;

    }



    .dance-info{

        display:grid;

        grid-template-columns:repeat(2,1fr);

    }



    .dance-actions{

        flex-direction:row;

        width:100%;

    }



    .dance-actions a{

        flex:1;

    }


}



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


@media(max-width:500px){


    .bibliotheque-container{

        width:98%;

    }



    .bibliotheque-header{

        padding:15px;

    }



    .bibliotheque-header h1{

        font-size:22px;

    }



    .dance-card{

        padding:12px;

    }



    .dance-info{

        grid-template-columns:1fr;

    }



    .dance-actions{

        flex-direction:column;

    }



    .media-btn{

        justify-content:center;

    }


}

/*====================================================
              STRUCTURE REELLE BIBLIOTHEQUE
====================================================*/


.library{

    width:95%;

    max-width:1400px;

    margin:30px auto;

}



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


.library-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:#ffffff;

    border:1px solid #ddd;

    padding:20px;

    margin-bottom:15px;

}


.library-title h1{

    margin:0;

    font-size:30px;

}


.library-title p{

    margin:6px 0 0;

    color:#777;

}


.btn-add{

    background:#b88935;

    color:white;

    padding:10px 16px;

    text-decoration:none;

    border-radius:3px;

    font-weight:bold;

}

/*====================================================
              RECHERCHE
====================================================*/


.library-search input{

    width:100%;

    height:38px;

    padding:0 12px;

    border:1px solid #ccc;

    border-radius:3px;

}



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


.library-filters{

    display:flex;

    gap:10px;

    margin:12px 0;

}



.library-filters select{

    padding:8px;

    border:1px solid #ccc;

    border-radius:3px;

}



/*====================================================
        GRILLE COMPACTE AJUSTEE
====================================================*/

.grid-header,
.grid-row{

    display:grid;

    grid-template-columns:
    minmax(180px, 2fr)
    110px
    70px
    60px
    minmax(130px, 1fr)
    minmax(100px, 1fr)
    minmax(120px, 1.2fr)
    150px;

    align-items:center;

    gap:8px;

}




/* Texte long */

.grid-row > div{

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

}


/* Nom de danse */

.dance-name{

    font-weight:700;

    color:#333;

}

/*====================================================
        CORRECTION LARGEUR TABLEAU
====================================================*/

.library-grid{

    width:100%;

    overflow-x:auto;

    overflow-y:hidden;

}



.grid-header,
.grid-row{

    min-width:0px;

}


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

/* ACTIONS TOUJOURS VISIBLES */

.actions{

    display:flex;

    gap:5px;

    justify-content:flex-start;

    white-space:nowrap;

}



.actions a{

    width:28px;

    height:26px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:13px;

    border-radius:3px;

}




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


.niveau-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:5px 10px;

    border-radius:3px;

    font-size:12px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.5px;

}



/* 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:#d6b15a;

    color:#3c3020;

    border:1px solid #b88935;

}



/* Avancé */

.badge-avance{

    background:#8b4b45;

    color:#ffffff;

    border:1px solid #6d3732;

}


/*====================================================
              BADGE NOUVEAU
====================================================*/


.dance-name{

    display:flex;

    align-items:center;

    gap:8px;

}



/* Badge */

.badge-nouveau{

    display:inline-flex;

    align-items:center;

    justify-content:center;


    background:#b88935;

    color:#ffffff;


    padding:4px 8px;


    border-radius:3px;


    font-size:10px;

    font-weight:700;


    text-transform:uppercase;

    letter-spacing:.8px;


    border:1px solid #98722b;

}

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


.action-btn{

    width:32px;

    height:28px;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:3px;


    text-decoration:none;


    font-size:13px;

    font-weight:bold;


    transition:.2s ease;

}



/* PDF */

.action-btn.pdf{

    background:#8b4b45;

    color:white;

}



/* Youtube */

.action-btn.youtube{

    background:#333;

    color:white;

}



/* Modifier */

.action-btn.edit{

    background:#d6b15a;

    color:#333;

}



/* Supprimer */

.action-btn.delete{

    background:#555;

    color:white;

}



.action-btn:hover{

    transform:translateY(-2px);

    opacity:.85;

}

/*====================================================
          TITRE BIBLIOTHEQUE
====================================================*/


.library-title h1{

    margin:0;

    font-size:30px;

    color:#2f2f2f;

}



.library-title p{

    margin-top:6px;

    color:#777;

}



/* bouton ajout */

.btn-add{

    background:#b88935;

    color:white;

    padding:10px 16px;

    border-radius:3px;

    text-decoration:none;

    font-weight:bold;

}



.btn-add:hover{

    opacity:.85;

}

/*====================================================
              GRILLE BIBLIOTHEQUE COMPACTE
====================================================*/


.library-grid{

    width:100%;

    background:#ffffff;

    border:1px solid #ddd;

    border-radius:4px;

    overflow:hidden;

}



/* EN-TETE */

.grid-header{

    display:grid;

    grid-template-columns:
    2fr
    130px
    80px
    70px
    1.3fr
    1fr
    1.4fr
    120px;


    padding:10px 12px;

    background:#eee6d6;

    color:#333;

    font-size:13px;

    font-weight:bold;

}



/* LIGNES */

.grid-row{

    display:grid;

    grid-template-columns:
    2fr
    130px
    80px
    70px
    1.3fr
    1fr
    1.4fr
    120px;


    align-items:center;

    padding:8px 12px;

    border-top:1px solid #eeeeee;

    font-size:14px;

}



/* SURVOL */

.grid-row:hover{

    background:#faf7ef;

}



/* NOM DANSE */

.dance-name{

    display:flex;

    align-items:center;

    gap:8px;

    font-weight:bold;

    color:#2f2f2f;

}



/* CELLULES */

.grid-row > div{

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

}

/*====================================================
      PRIORITE TABLEAU BIBLIOTHEQUE
====================================================*/


.library .dance-actions{

    display:none;

}


.library .actions{

    display:flex;

    gap:5px;

    align-items:center;

}

.library .actions{

    display:flex;

    align-items:center;

    gap:5px;

    white-space:nowrap;

}


.library .action-btn{

    flex-shrink:0;

}