/* Pagination des annonces (accueil, à louer, à vendre) : palette indigo / bleu / marron */
.mi-pagination {
    --mi-indigo-900: #16123a;
    --mi-indigo-600: #3b2f8f;
    --mi-bleu-500: #1f6fd6;
    --mi-marron-500: #9a6434;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin: 36px 0 12px;
    font-family: 'Open Sans', 'Roboto', sans-serif;
}

.mi-pagination-info {
    margin: 0;
    color: #6f6c8c;
    font-size: 14px;
}

.mi-pagination-info strong {
    color: var(--mi-indigo-900);
}

.mi-pagination ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mi-pagination button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid #dcd8f0;
    border-radius: 10px;
    background: #fff;
    color: var(--mi-indigo-600);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s, border-color .2s, color .2s, transform .2s, box-shadow .2s;
}

.mi-pagination button:hover:not(:disabled) {
    border-color: var(--mi-bleu-500);
    color: var(--mi-bleu-500);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(31, 111, 214, .15);
}

.mi-pagination button:focus-visible {
    outline: 2px solid var(--mi-bleu-500);
    outline-offset: 2px;
}

.mi-pagination .mi-page-active {
    border-color: transparent;
    background: linear-gradient(135deg, var(--mi-indigo-600), var(--mi-bleu-500));
    color: #fff;
    box-shadow: 0 8px 18px rgba(59, 47, 143, .30);
    cursor: default;
}

.mi-pagination .mi-page-fleche {
    padding: 0 16px;
    color: var(--mi-marron-500);
    border-color: rgba(154, 100, 52, .35);
}

.mi-pagination .mi-page-fleche:hover:not(:disabled) {
    background: var(--mi-marron-500);
    border-color: var(--mi-marron-500);
    color: #fff;
    box-shadow: 0 6px 14px rgba(154, 100, 52, .25);
}

.mi-pagination .mi-page-fleche:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.mi-pagination .mi-page-fleche b {
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    margin-top: -3px;
}

.mi-page-points {
    min-width: 20px;
    color: #9a97b8;
    font-weight: 700;
    text-align: center;
}

.mi-pagination-vide {
    width: 100%;
    margin: 36px 0;
    color: #6f6c8c;
    text-align: center;
}

/* Sur mobile, les flèches n'affichent que l'icône */
@media (max-width: 600px) {
    .mi-pagination ul {
        gap: 6px;
    }

    .mi-pagination button {
        min-width: 38px;
        height: 38px;
        padding: 0 8px;
        font-size: 14px;
    }

    .mi-pagination .mi-page-fleche {
        padding: 0 10px;
    }

    .mi-pagination .mi-page-fleche span {
        display: none;
    }
}