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


.pagination{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:10px;

    margin:10px 10px 10px;
    
    padding-bottom:10px;

}



/* Boutons */

.pagination a,
.page-number,
.page-btn{


    min-width:42px;

    height:42px;

    padding:0 14px;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:14px;


    background:var(--surface);

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


    color:var(--text);

    font-weight:700;


    text-decoration:none;


    box-shadow:
    0 5px 15px rgba(0,0,0,.08);


    transition:.3s ease;

}



/* Survol */

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


    background:var(--primary);

    color:white;

    border-color:var(--primary);


    transform:translateY(-3px);


}



/* PAGE ACTIVE */

.pagination a.active,
.page-number.active{


    background:var(--primary);

    color:white;

    border-color:var(--primary);


    box-shadow:
    0 8px 20px rgba(110,131,83,.35);

}



/* Flèches */

.page-btn{

    min-width:55px;

    border-radius:30px;

}



/* Points */

.dots{

    color:var(--text-light);

    font-weight:700;

    padding:0 5px;

}



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


@media(max-width:576px){


    .pagination{

        gap:6px;

        margin:35px 0;

    }


    .pagination a,
    .page-number,
    .page-btn{


        min-width:36px;

        height:36px;

        padding:0 10px;


        border-radius:12px;

        font-size:.9rem;

    }


}

/* =========================================================
   PAGINATION — BEN'S LINE DANCE
   Brun / crème
========================================================= */

.pagination {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 7px;

    margin: 18px auto 0;

    padding: 0;

}


/* ---------------------------------------------------------
   BOUTONS
--------------------------------------------------------- */

.pagination a {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 40px;

    height: 40px;

    padding: 0 12px;

    box-sizing: border-box;

    border-radius: 10px;

    border: 1px solid #CFC4B8;

    background: #F3EEE8;

    color: #4B3F35;

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

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

}


/* ---------------------------------------------------------
   HOVER
--------------------------------------------------------- */

.pagination a:hover {

    background: #D8CABC;

    border-color: #B9A999;

    color: #4B3F35;

    transform: translateY(-1px);

    box-shadow:
        0 3px 8px rgba(75, 63, 53, .12);

}


/* ---------------------------------------------------------
   PAGE ACTIVE
--------------------------------------------------------- */

.pagination a.active {

    background: #4B3F35;

    border-color: #4B3F35;

    color: #FFFFFF;

    box-shadow:
        0 3px 8px rgba(75, 63, 53, .20);

}


/* ---------------------------------------------------------
   FLÈCHES
--------------------------------------------------------- */

.pagination .page-btn {

    font-size: 18px;

    font-weight: 800;

}


/* ---------------------------------------------------------
   DÉBUT / FIN
--------------------------------------------------------- */

.pagination .page-first,
.pagination .page-last {

    min-width: 48px;

    font-size: 13px;

}


/* =========================================================
   IMPORTANT
   SUPPRIME LE GROS GAP AVANT LE BOTTOM-NAV
========================================================= */

.library {

    padding-bottom: 25px;
}


/* Mobile */

@media (max-width: 800px) {

    .library {

        padding-bottom: 20px;

    }


    .pagination {

        gap: 6px;

        margin-top: 15px;

        margin-bottom: 0;

    }


    .pagination a {

        min-width: 38px;

        height: 38px;

        padding: 0 9px;

        font-size: 13px;

    }


    .pagination .page-first,
    .pagination .page-last {

        display: inline-flex;

        min-width: 42px;

    }

}