/*====================================================
                    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;

    }


}