/* ========================================
   COMMERCIFY VIGNETTES PAGINATION
   Chargé dès que la pagination est activée (tpl_head) — tous modes (small/large) et palettes.
   Libellé et espacement identiques partout ; mode large n’agrandit que les boutons (body.pagination-size-large).
   Police = même que le menu « Carte du monde » du header top (commercify_topheaderlogo_beta.css).
   ======================================== */

/* Police identique au header top (menu Carte du monde) — tous blocs et tous modes (small/large) */
.vignettes-pagination-display-text,
#vignettes-pagination-text-top,
#vignettes-pagination-text-bottom,
.vignettes-pagination-row,
#vignettes-pagination-top,
#vignettes-pagination-bottom,
.vignettes-pagination-row .pagination,
.vignettes-pagination-row .page-link,
.vignettes-pagination-catalog-select {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* CSS Containment pour isoler les reflows */
#vignettes-pagination-top,
#vignettes-pagination-bottom {
    contain: layout style paint;
}

/* Libellé "Affichage de X à X sur X annonces" — mode small : taille un peu agrandie */
.vignettes-pagination-display-text,
#vignettes-pagination-text-top,
#vignettes-pagination-text-bottom {
    font-size: 0.75rem !important;
    line-height: 1.3;
    margin-bottom: 0 !important;
}

/* Paragraphe à l’intérieur : hérite de la taille (évite toute règle ciblant div.text-center p) */
.vignettes-pagination-display-text p,
#vignettes-pagination-text-top p,
#vignettes-pagination-text-bottom p {
    font-size: inherit !important;
}

/* Marges bloc top (margin-bottom = espace libellé → boutons, toujours 0) */
#vignettes-pagination-text-top {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
}

/* Liens du sélecteur de catalogue (pagination) — visibles et cliquables */
.vignettes-pagination-catalog-link {
    color: var(--bs-link-color, #0d6efd);
    text-decoration: underline;
}
.vignettes-pagination-catalog-link:hover {
    color: var(--bs-link-hover-color, #0a58ca);
}
.vignettes-pagination-catalog-current {
    font-weight: 600;
}

/* Sélecteur catalogue à la suite des boutons de pagination — TOUTES résolutions, MÊME LIGNE */
.vignettes-pagination-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.5rem !important;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.vignettes-pagination-row .vignettes-pagination-nav {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex: 0 0 auto;
}

.vignettes-pagination-row .pagination {
    flex-wrap: nowrap !important;
    white-space: nowrap;
}

.vignettes-pagination-row .vignettes-pagination-catalog-select-wrap {
    flex-shrink: 0;
    margin-left: 0 !important;
    white-space: nowrap;
}

.vignettes-pagination-catalog-select {
    font-size: 0.875rem !important;
    max-width: 15em !important;
    flex-shrink: 0;
    width: auto !important;
}

@media (max-width: 1199.98px) {
    .vignettes-pagination-catalog-select {
        max-width: 12em !important;
        font-size: 0.8125rem !important;
    }
}

@media (max-width: 991.98px) {
    .vignettes-pagination-catalog-select {
        max-width: 10em !important;
        font-size: 0.75rem !important;
    }
}

@media (max-width: 767.98px) {
    .vignettes-pagination-row {
        gap: 0.25rem !important;
    }
    .vignettes-pagination-catalog-select {
        max-width: 9em !important;
        font-size: 0.75rem !important;
    }
}

@media (max-width: 575.98px) {
    .vignettes-pagination-row {
        gap: 0.25rem !important;
    }
    .vignettes-pagination-catalog-select {
        max-width: 8em !important;
        font-size: 0.6875rem !important;
        padding: 0.25rem 0.5rem !important;
    }
}

/* Renforcer avec sélecteur plus spécifique pour éviter les conflits */
body #vignettes-pagination-text-top,
div#vignettes-pagination-text-top.text-center.mb-0 {
    margin-top: 10px !important;
}

/* Texte d'affichage pagination bottom : même réduction d'espace */
#vignettes-pagination-text-bottom {
    margin-bottom: 0 !important;
}

/* Fallback avec sélecteur :has() pour compatibilité (top) */
div.text-center.mb-0:has(+ .vignettes-pagination-row) {
    margin-bottom: 0 !important;
}

/* Variables CSS pour les couleurs dynamiques (générées via JS) */
/* Les styles dynamiques sont injectés via l'élément <style id='pagination-dynamic-styles'> */
/* Ce fichier contient les styles statiques optimisés */

/* ========================================
   PAGINATION LARGE (DESKTOP) — TOP ET BOTTOM, MÊME RENDU
   body.pagination-size-large = choix utilisateur
   Espacement libellé → boutons identique (margin-top 0 sur le nav)
   ======================================== */

@media (min-width: 992px) {
    /* --- Mode LARGE (réduit) : libellé et numéros dans la même proportion --- */
    body.pagination-size-large .vignettes-pagination-display-text,
    body.pagination-size-large #vignettes-pagination-text-top,
    body.pagination-size-large #vignettes-pagination-text-bottom {
        font-size: 0.95rem !important;
        line-height: 1.35;
    }
    
    body.pagination-size-large .vignettes-pagination-display-text p,
    body.pagination-size-large #vignettes-pagination-text-top p,
    body.pagination-size-large #vignettes-pagination-text-bottom p {
        font-size: inherit !important;
    }
    
    /* --- Bloc du HAUT --- */
    body.pagination-size-large #vignettes-pagination-top .pagination {
        font-size: 1.1rem !important;
    }
    
    body.pagination-size-large #vignettes-pagination-top .page-link {
        font-size: 1.1rem !important;
        padding: 0.65rem 1.2rem !important;
        min-width: 2.5rem !important;
        min-height: 2.5rem !important;
        line-height: 1.5 !important;
        border-radius: 0;
        transform: translateZ(0);
        transition: transform 0.2s ease, opacity 0.2s ease;
    }
    
    body.pagination-size-large #vignettes-pagination-top .page-link span[aria-hidden="true"] {
        font-size: 1.2rem !important;
        font-weight: bold !important;
    }
    
    body.pagination-size-large #vignettes-pagination-top .page-item {
        margin: 0 0.35rem !important;
    }
    
    body.pagination-size-large #vignettes-pagination-top .page-item.disabled .page-link {
        font-size: 1.1rem !important;
        padding: 0.65rem 0.9rem !important;
    }
    
    body.pagination-size-large #vignettes-pagination-top .page-link:hover {
        transform: scale(1.1) translateZ(0) !important;
        transition: transform 0.2s ease !important;
    }
    
    /* --- Bloc du BAS --- */
    body.pagination-size-large #vignettes-pagination-bottom {
        margin-top: 0 !important;
        margin-bottom: 4rem !important;
        transform: translateZ(0);
        will-change: transform;
    }
    
    body.pagination-size-large #vignettes-pagination-bottom .pagination {
        font-size: 1.1rem !important;
    }
    
    body.pagination-size-large #vignettes-pagination-bottom .page-link {
        font-size: 1.1rem !important;
        padding: 0.65rem 1.2rem !important;
        min-width: 2.5rem !important;
        min-height: 2.5rem !important;
        line-height: 1.5 !important;
        border-radius: 0;
        transform: translateZ(0);
        transition: transform 0.2s ease, opacity 0.2s ease;
    }
    
    body.pagination-size-large #vignettes-pagination-bottom .page-link span[aria-hidden="true"] {
        font-size: 1.2rem !important;
        font-weight: bold !important;
    }
    
    body.pagination-size-large #vignettes-pagination-bottom .page-item {
        margin: 0 0.35rem !important;
    }
    
    body.pagination-size-large #vignettes-pagination-bottom .page-item.disabled .page-link {
        font-size: 1.1rem !important;
        padding: 0.65rem 0.9rem !important;
    }
    
    body.pagination-size-large #vignettes-pagination-bottom .page-link:hover {
        transform: scale(1.1) translateZ(0) !important;
        transition: transform 0.2s ease !important;
    }
}

/* ========================================
   MASQUAGE PAGINATION QUAND STICKYFILTERS ACTIF
   CSS OPTIMISÉ - ZÉRO KILLER DE PERFORMANCE
   Utilise uniquement la classe JS pour éviter les sélecteurs complexes
   ======================================== */

/* Masquer la pagination via classe JS (sélecteur simple = performance maximale) */
.pagination-hidden-sticky {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    /* Éviter les reflows avec contain */
    contain: layout style paint;
}