/* ========================================
   COMMERCIFY VIGNETTES ULTRA-OPTIMISÉES
   ======================================== */

/* OPTIMISATIONS CRITIQUES */

/* 1. PRODUCT CARD - OPTIMISÉE SANS TRANSITIONS COÛTEUSES */
.product-card {
    overflow: hidden;
    height: 100%;
    /* SUPPRESSION: transition: all 0.3s ease; */
    /* SUPPRESSION: box-shadow complexes */
    will-change: auto; /* ÉLIMINATION DU will-change */
    contain: layout style paint; /* OPTIMISATION CSS CONTAINMENT */
    border-radius: 0 !important; /* Bordures carrées */
    /* OPTIMISATION CLS: Réserver l'espace minimum pour éviter les shifts */
    min-height: 300px;
    display: flex;
    flex-direction: column;
}

/* 2. PRODUCT THUMB - OPTIMISÉE */
.product-thumb {
    position: relative;
    /* SUPPRESSION: transitions inutiles */
    contain: layout style; /* OPTIMISATION */
    border-radius: 0 !important; /* Bordures carrées */
    overflow: hidden;
}

/* 3. IMAGES - OPTIMISATION GPU */
.card-img-top {
    /* SUPPRESSION: transition: transform 0.3s ease-in-out; */
    /* SUPPRESSION: transform: scale(1.1); */
    /* OPTIMISATION: Utilisation de transform3d pour GPU */
    transform: translateZ(0); /* FORCE L'ACCÉLÉRATION GPU */
    border-radius: 0 !important; /* Bordures carrées sur les images */
    backface-visibility: hidden; /* OPTIMISATION RENDERING */
    -webkit-backface-visibility: hidden;
    /* OPTIMISATION CLS: Dimensions pour éviter les shifts - image 320x180px (ratio 16:9) */
    width: 100%;
    height: auto; /* Hauteur automatique pour respecter le ratio naturel */
    display: block; /* Évite l'espace sous l'image */
}

.card-img-top.no-image {
    object-fit: cover;
    transform: none !important;
    filter: none !important;
    transition: none !important;
}

/* 4. HOVER EFFECTS - ULTRA-OPTIMISÉS POUR GRANDES LISTES */
.product-card:not(.vignette-selectable):hover .card-img-top {
    /* OPTIMISATION: Effet minimal pour économiser le CPU */
    transform: translateZ(0) scale(1.01); /* RÉDUIT DE 1.02 À 1.01 */
    transition: transform 0.15s ease-out; /* RÉDUIT LA DURÉE */
    will-change: transform; /* OPTIMISATION GPU */
}

/* OPTIMISATION: Désactivation des effets sur les grandes listes */
.product-card[data-virtual-active="false"] .card-img-top {
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
}

/* OPTIMISATION: Désactivation sur smartphones */
@media (max-width: 768px) {
    .product-card:hover .card-img-top {
        transform: none !important;
        transition: none !important;
    }
}

/* 5. PRODUCT ACTIONS - OPTIMISÉES */
.product-actions {
    position: absolute;
    bottom: 0.25rem;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 0;
    overflow: hidden;
    /* SUPPRESSION: transition: 0.2s linear; */
    display: flex;
    opacity: 0;
    /* OPTIMISATION: Utilisation de opacity au lieu de display */
    transition: opacity 0.15s ease-out; /* RÉDUIT */
}

.product-card:hover .product-actions {
    opacity: 1;
}

/* 6. PRODUCT BADGES - OPTIMISÉS */
.product-badges {
    position: absolute;
    top: 1rem;
    left: 1rem;
    display: flex;
    flex-wrap: wrap;
    margin: -0.25rem;
    /* SUPPRESSION: transitions inutiles */
    contain: layout; /* OPTIMISATION */
}

/* 7. LOCATION INFO - OPTIMISÉE */
.location-info {
    position: absolute;
    top: 40px;
    right: 0;
    background-color: transparent;
    color: white;
    padding: 8px;
    border-bottom-left-radius: 0;
    width: fit-content;
    /* SUPPRESSION: transition-opacity duration-300 */
    /* OPTIMISATION: Utilisation de opacity */
    opacity: 0;
    transition: opacity 0.15s ease-out, background-color 0.3s ease; /* RÉDUIT + transition background */
    pointer-events: none;
}

.location-info:hover,
.location-info.show:hover,
.product-card:hover .location-info.show,
.vignette-selectable:hover .location-info.show {
    background-color: transparent !important;
}


.location-info.show {
    opacity: 1;
    pointer-events: all;
}

/* Date dans les vignettes - cohérence avec location-info */
.vignette-date {
    transition: opacity 0.15s ease-out, display 0.15s ease-out;
}

.vignette-date.d-none {
    display: none !important;
}

/* 8. BADGES ET TAGS - OPTIMISÉS */
.product-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* SUPPRESSION: transitions inutiles */
}

.product-tags a {
    color: #8094ae;
    /* SUPPRESSION: transition: color 0.3s ease; */
    transition: color 0.15s ease-out; /* RÉDUIT */
}

.product-tags a:hover {
    color: #854fff;
}

/* 9. TITLES ET PRICES - OPTIMISÉS */
.product-title {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.product-title a {
    color: #364a63;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease-out, border-bottom-color 0.2s ease-out, text-decoration-color 0.2s ease-out, text-underline-offset 0.2s ease-out;
}
/* Survol titre vignette : soulignement visible (border + underline) + couleur — priorité sur .text-decoration-none et mode performance */
.product-card .product-title a:hover,
.product-card .product-title a:focus-visible,
.vignette-selectable .product-title a:hover,
.vignette-selectable .product-title a:focus-visible,
.vignettes-container .product-title a:hover,
.vignettes-container .product-title a:focus-visible,
.vignettes-container-mini-custom .product-title a:hover,
.vignettes-container-mini-custom .product-title a:focus-visible {
    color: #1e3a5f !important;
    text-decoration: underline !important;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
    text-decoration-color: rgba(133, 79, 255, 0.9);
    border-bottom-color: rgba(133, 79, 255, 0.7) !important;
}

/* 10. RATING STARS - OPTIMISÉES */
.rating .icon {
    font-size: 1rem;
    /* SUPPRESSION: transitions inutiles */
    /* SUPPRESSION: filter: drop-shadow(0 0 2px rgba(0,0,0,0.3)); */
}

/* 11. OPTIMISATIONS SMARTPHONES */
@media (max-width: 768px) {
    .product-card {
        /* SUPPRESSION: box-shadow sur mobile */
        box-shadow: none;
    }
    
    .card-img-top {
        /* SUPPRESSION: transform sur mobile */
        transform: none;
    }
    
    .product-card:hover .card-img-top {
        /* SUPPRESSION: hover effects sur mobile */
        transform: none;
    }
}

/* 12. OPTIMISATIONS POUR RÉDUCTION MOUVEMENT */
@media (prefers-reduced-motion: reduce) {
    .product-card,
    .card-img-top,
    .product-actions,
    .product-tags a,
    .product-title a {
        transition: none !important;
        animation: none !important;
    }
    
    .product-card:hover .card-img-top {
        transform: none !important;
    }
}

/* 13. ÉLIMINATION DES OPTIMISATIONS GPU LOURDES */
/* SUPPRESSION: backdrop-filter */
/* SUPPRESSION: filter: brightness() */
/* SUPPRESSION: box-shadow complexes */
/* SUPPRESSION: transform: scale() excessifs */

/* 14. OPTIMISATIONS CSS CONTAINMENT */
.product-card {
    contain: layout style paint;
}

.product-thumb {
    contain: layout style;
    border-radius: 0 !important; /* Bordures carrées */
}

.product-badges {
    contain: layout;
}

/* 15. OPTIMISATIONS WILL-CHANGE */
/* SUPPRESSION: will-change: transform */
/* SUPPRESSION: will-change: opacity */
/* UTILISATION: will-change: auto (par défaut) */

/* 16. OPTIMISATIONS POUR PERFORMANCE */
.product-card * {
    /* SUPPRESSION: will-change properties */
    will-change: auto;
}

/* 17. ÉLIMINATION DES ANIMATIONS COÛTEUSES */
/* SUPPRESSION: @keyframes complexes */
/* SUPPRESSION: animation: pulse */
/* SUPPRESSION: animation: spin */

/* 18. OPTIMISATIONS POUR RÉSEAU */
.product-card {
    contain: layout style;
}

/* 19. OPTIMISATIONS POUR RENDERING */
.card-img-top {
    /* OPTIMISATION: image-rendering */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    /* OPTIMISATION CLS: S'assurer que l'aspect-ratio est préservé */
    width: 100%;
}

/* 20. ÉLIMINATION DES RÈGLES CSS LOURDES */
/* SUPPRESSION: transition: all */
/* SUPPRESSION: transform: scale(1.1) */
/* SUPPRESSION: box-shadow complexes */
/* SUPPRESSION: backdrop-filter */
/* SUPPRESSION: filter: brightness() */
/* SUPPRESSION: will-change: transform */
/* SUPPRESSION: animation: pulse */
/* SUPPRESSION: animation: spin */

/* 21. CLASSES OPTIMISÉES POUR LES VIGNETTES - HYBRIDE MOBILE/DESKTOP */
.vignette-image-optimized {
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: transform 0.1s ease-out; /* RÉDUIT POUR GRANDES LISTES */
    will-change: auto;
    /* OPTIMISATION: Chargement adaptatif */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    /* OPTIMISATION: Pré-chargement des images critiques */
    content-visibility: auto;
    contain: layout style paint; /* OPTIMISATION CSS CONTAINMENT */
}

/* 22. OPTIMISATIONS SPÉCIFIQUES POUR GRANDES LISTES */
.product-card {
    contain: layout style paint; /* OPTIMISATION CSS CONTAINMENT */
    content-visibility: auto; /* OPTIMISATION RENDERING */
}

/* OPTIMISATION CLS: Colonnes Bootstrap avec align-items-stretch */
.col-xxl-2.col-xl-3.col-lg-4.col-md-6.col-sm-6.d-flex.align-items-stretch {
    contain: layout style;
    min-height: 300px;
    /* OPTIMISATION CLS: Réserver l'espace dès le rendu initial */
    display: flex;
    flex-direction: column;
}

/* ========================================
   SQUELETTE COMMUN DU BLOC VIGNETTES
   ======================================== */
.cfy-vignettes-block,
.glassystem-main-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.cfy-vignettes-layout-shell,
.glassystem-view-container {
    width: 100%;
    margin-top: 0 !important;
    padding-top: 0 !important;
    box-sizing: border-box;
}

.cfy-vignettes-layout {
    width: 100%;
    margin-top: 0 !important;
    padding-top: 0 !important;
    box-sizing: border-box;
}

.cfy-vignettes-layout-grid {
    display: block;
}

/* Le point d'ancrage ne doit jamais créer d'espace vertical parasite
   entre l'entête et la première ligne de vignettes. */
#anchorpublishers {
    display: block;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
}

/* ========================================
   ESPACEMENT INTER-VIGNETTES MODE BOOTSTRAP (thumbs)
   ======================================== */
.cfy-vignettes-row {
    --bs-gutter-x: 0 !important;
    --bs-gutter-y: 0 !important;
    margin-left: -3.5px !important;
    margin-right: -3.5px !important;
}

.cfy-vignettes-row > * {
    padding-right: 0 !important;
    padding-left: 0 !important;
    margin-top: 0 !important;
}

.cfy-vignettes-row > [class*="col-"].d-flex.align-items-stretch,
.cfy-vignettes-row > [class*="col-"].vignette-ad.d-flex.align-items-stretch {
    padding-left: 3.5px !important;
    padding-right: 3.5px !important;
    margin-bottom: 7px !important;
    box-sizing: border-box !important;
}

/* OPTIMISATION: Désactivation des effets coûteux sur les grandes listes */
.product-card[data-large-list="true"] .card-img-top {
    transition: none !important;
    will-change: auto !important;
}

.product-card:not(.vignette-selectable)[data-large-list="true"]:hover .card-img-top {
    transform: translateZ(0) scale(1.005) !important; /* EFFET MINIMAL */
}

/* Smartphones : vignettes sans effet visuel. Les couleurs, fonds et bordures restent ceux du thème. */
@media (max-width: 768px) {
    /* IMAGES ULTRA-BASIQUES */
    .vignette-image-optimized,
    .card-img-top {
        /* OPTIMISATION CLS: Les images sont aux bonnes dimensions (320x180px ratio 16:9) */
        width: 100% !important;
        height: auto !important; /* Hauteur automatique pour respecter le ratio naturel */
        /* ZÉRO EFFET */
        transform: none !important;
        transition: none !important;
        animation: none !important;
        filter: none !important;
        box-shadow: none !important;
        will-change: auto !important;
    }
    
    .vignette-image-optimized:hover,
    .card-img-top:hover {
        transform: none !important;
        transition: none !important;
        filter: none !important;
    }
    
    :is(.product-card, .vignette-selectable) .card-title,
    :is(.product-card, .vignette-selectable) .card-text,
    :is(.product-card, .vignette-selectable) .card-body * {
        font-size: 14px !important;
        font-weight: normal !important;
        /* ZÉRO EFFET */
        text-shadow: none !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
    /* Exception : titre de la vignette garde un hover visible (soulignement + couleur) */
    .product-card .product-title a:hover,
    .product-card .product-title a:focus-visible,
    .vignette-selectable .product-title a:hover,
    .vignette-selectable .product-title a:focus-visible {
        text-decoration: underline !important;
        text-underline-offset: 4px;
        text-decoration-thickness: 2px;
        text-decoration-color: rgba(133, 79, 255, 0.9);
        border-bottom-color: rgba(133, 79, 255, 0.7) !important;
    }
    
    /* BADGES ULTRA-BASIQUES */
.badge,
.urgent-badge,
a.urgent-badge,
.location-info,
.star-rating,
.view-count,
.price-badge {
        /* ZÉRO EFFET */
        animation: none !important;
        transition: none !important;
        transform: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    /* BOUTONS ULTRA-BASIQUES */
    .btn,
    .location-toggle {
        padding: 4px 8px !important;
        font-size: 12px !important;
        /* ZÉRO EFFET */
        transition: none !important;
        transform: none !important;
        box-shadow: none !important;
        animation: none !important;
    }
    
    .btn:hover,
    .location-toggle:hover {
        transform: none !important;
        transition: none !important;
    }
    
    /* CONTAINERS ULTRA-BASIQUES */
    .card,
    .product-card,
    .card-body,
    .card-footer {
        margin: 2px !important;
        padding: 4px !important;
        /* ZÉRO EFFET */
        box-shadow: none !important;
        border-radius: 0 !important;
        transition: none !important;
        transform: none !important;
        animation: none !important;
    }
    /* Carte pleine largeur : la marge de 2px se prend dans la largeur, pour des bords égaux à gauche et à droite */
    .product-card.w-100 {
        width: calc(100% - 4px) !important;
    }
    
    .card:hover,
    .product-card:hover {
        transform: none !important;
        transition: none !important;
        box-shadow: none !important;
    }
}

.vignette-image-optimized:hover {
    transform: translateZ(0) scale(1.02);
}

/* 22. OPTIMISATIONS POUR LES BOUTONS */
.location-toggle {
    transition: transform 0.15s ease-out, opacity 0.15s ease-out;
    transform: translateZ(0);
}

.location-toggle:hover {
    transform: scale(1.05);
}

/* 23. OPTIMISATIONS POUR LES INFORMATIONS */
.location-info {
    transition: opacity 0.15s ease-out;
}

.location-info.show {
    opacity: 1;
}

/* 24. OPTIMISATIONS POUR LES CARTES */
.product-card {
    contain: layout style paint;
}

.product-card:not(.vignette-selectable):hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 25. OPTIMISATIONS POUR LES BADGES */
.product-badges {
    contain: layout;
}

.product-badges li {
    transition: transform 0.15s ease-out;
}

.product-badges li:hover {
    transform: scale(1.05);
}

/* 26. BADGE URGENT OPTIMISÉ - ÉLIMINATION ANIMATION PULSE COÛTEUSE */
/* Couleurs alignées sur boutons neutres inactifs page Publisher AD Index */
.urgent-badge {
    font-size: 0.8rem;
    padding: 0.35em 0.65em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    background-color: #1e293b;
    border: 1px solid #475569;
    color: #e2e8f0;
    /* SUPPRESSION: animation: pulse 2s infinite; - COÛTEUX EN CPU */
    /* OPTIMISATION: Animation plus légère avec opacity - RALENTIE */
    animation: urgent-fade 6s ease-in-out infinite; /* 3s → 6s (2x plus lent) */
    /* OPTIMISATION: Utilisation de will-change: auto */
    will-change: auto;
}
.urgent-badge,
.urgent-badge i {
    color: #e2e8f0;
}
/* Lien pin (catalogue par pin) : curseur pointeur */
a.urgent-badge {
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, border-width 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
/* Survol direct sur le pin : effet très visible, bordure épaisse, orange soutenu (maintenance / documentation) */
a.urgent-badge:hover,
a.urgent-badge:focus-visible {
    transform: scale(1.15);
    background-color: #ffae00 !important;
    border-width: 3px !important;
    border-color: #e69a00 !important;
    border-style: solid !important;
    color: #1f2937 !important;
    box-shadow: 0 0 14px rgba(255, 174, 0, 0.7), 0 2px 8px rgba(0, 0, 0, 0.25);
    outline: 3px solid #ffae00;
    outline-offset: 2px;
}
a.urgent-badge:hover i,
a.urgent-badge:focus-visible i {
    color: #1f2937 !important;
}
.dark-mode a.urgent-badge:hover,
[data-bs-theme='dark'] a.urgent-badge:hover,
html.dark-mode a.urgent-badge:hover,
.dark-mode a.urgent-badge:focus-visible,
[data-bs-theme='dark'] a.urgent-badge:focus-visible,
html.dark-mode a.urgent-badge:focus-visible {
    background-color: #ffae00 !important;
    border-width: 3px !important;
    border-color: #e69a00 !important;
    color: #1f2937 !important;
    box-shadow: 0 0 16px rgba(255, 174, 0, 0.8), 0 2px 8px rgba(0, 0, 0, 0.35);
}
.dark-mode a.urgent-badge:hover i,
[data-bs-theme='dark'] a.urgent-badge:hover i,
html.dark-mode a.urgent-badge:hover i,
.dark-mode a.urgent-badge:focus-visible i,
[data-bs-theme='dark'] a.urgent-badge:focus-visible i,
html.dark-mode a.urgent-badge:focus-visible i {
    color: #1f2937 !important;
}
.dark-mode .urgent-badge,
[data-bs-theme='dark'] .urgent-badge,
html.dark-mode .urgent-badge {
    background-color: #374151;
    border-color: rgba(255, 255, 255, 0.12);
    color: #f3f4f6;
}
.dark-mode .urgent-badge i,
[data-bs-theme='dark'] .urgent-badge i,
html.dark-mode .urgent-badge i {
    color: inherit;
}

/* Hover vignette : garder le badge urgent lisible (override effet 3d .product-card:hover .badge) */
.product-card:hover .urgent-badge,
.product-card.vignette-selectable:hover .urgent-badge {
    background-color: #334155 !important;
    border-color: #64748b !important;
    color: #e2e8f0 !important;
}
.product-card:hover .urgent-badge i,
.product-card.vignette-selectable:hover .urgent-badge i {
    color: inherit !important;
}
.dark-mode .product-card:hover .urgent-badge,
[data-bs-theme='dark'] .product-card:hover .urgent-badge,
html.dark-mode .product-card:hover .urgent-badge,
.dark-mode .product-card.vignette-selectable:hover .urgent-badge,
[data-bs-theme='dark'] .product-card.vignette-selectable:hover .urgent-badge,
html.dark-mode .product-card.vignette-selectable:hover .urgent-badge {
    background-color: #4b5563 !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    color: #f3f4f6 !important;
}
.dark-mode .product-card:hover .urgent-badge i,
[data-bs-theme='dark'] .product-card:hover .urgent-badge i,
html.dark-mode .product-card:hover .urgent-badge i,
.dark-mode .product-card.vignette-selectable:hover .urgent-badge i,
[data-bs-theme='dark'] .product-card.vignette-selectable:hover .urgent-badge i,
html.dark-mode .product-card.vignette-selectable:hover .urgent-badge i {
    color: inherit !important;
}
body.idle .urgent-badge {
    animation: none !important;
}

/* Animation optimisée pour badge urgent */
@keyframes urgent-fade {
    0%, 100% { 
        opacity: 1; 
        transform: scale(1);
    }
    50% { 
        opacity: 0.7; 
        transform: scale(1.02);
    }
}

/* Désactivation de l'animation sur smartphones pour économiser la batterie */
@media (max-width: 768px) {
    .urgent-badge {
        animation: none;
    }
}

/* Hover pin conservé mais plus discret pour reduced-motion */
@media (prefers-reduced-motion: reduce) {
    a.urgent-badge:hover,
    a.urgent-badge:focus-visible {
        transform: scale(1.05);
        transition-duration: 0.1s;
    }
}

/* 27. CLASSES POUR REMPLACER LES INLINE STYLES EXCESSIFS */

/* Overlay de localisation */
.location-overlay {
    display: block;
    width: 100%;
    padding: 0.3rem 0.5rem;
    margin-top: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.92) 0%, rgba(16, 16, 16, 0.9) 100%);
    color: #f8f9fa;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    line-height: 1.1;
}

.location-overlay-rich {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.location-overlay-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 0.4rem;
}

.location-overlay-left {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1;
}

.location-overlay-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
    /* Jamais plus large que la carte : en RTL le débordement rognait le DÉBUT du nom (côté gauche). */
    max-width: 100%;
}
/* Ville trop longue pour tenir à côté du pays : elle passe sous le pays, sur toute la largeur,
   au lieu d'écraser le pays ou de s'empiler en colonne étroite. */
.product-card .location-overlay-content {
    flex-wrap: wrap;
    row-gap: 0.15rem;
}
.product-card .location-overlay-left {
    flex: 0 0 auto;
    max-width: 100%;
}
.product-card .location-overlay-right {
    flex: 0 1 auto;
    margin-inline-start: auto;
}
.location-overlay-right .location-overlay-text {
    min-width: 0;
    max-width: 100%;
}
/* Nom de ville toujours entier : retour à la ligne (2 lignes en pratique), césure selon la langue,
   coupure forcée seulement pour un mot plus large que la colonne. */
.product-card .location-overlay-right .location-city {
    max-width: none !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere;
    hyphens: auto;
    text-align: end;
    line-height: var(--cfy-lh-snug) !important;
}
/* Sens du nom résolu sur son propre contenu : un nom latin dans une page RTL est coupé à sa fin
   (« UNITED KIN… ») et non à son début. */
.product-card .location-overlay .location-city,
.product-card .location-overlay .location-country {
    unicode-bidi: plaintext;
}
/* Le pays cède la place à son tour (le code postal reste entier) */
.location-overlay-left {
    min-width: 0;
}
.location-overlay-left .location-overlay-text {
    min-width: 0;
}
/* Pays toujours entier : sur une carte étroite, le code postal passe sous le pays
   et un nom de pays très long revient à la ligne. */
.product-card .location-overlay-left .location-overlay-text {
    flex-wrap: wrap;
    row-gap: 0;
}
.product-card .location-overlay-left .location-country {
    min-width: 0;
    overflow: visible;
    white-space: normal !important;
    text-overflow: clip;
    overflow-wrap: anywhere;
}

.location-flag-wrapper {
    width: 22px;
    height: 22px;
    border-radius: 0;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.location-flag {
    width: 22px;
    height: 22px;
    object-fit: cover;
    display: block;
    border-radius: 0;
}

.location-overlay-text {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.location-link {
    color: #f8f9fa !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
    display: inline-block;
    position: relative;
}

.location-link:hover,
.location-link:focus {
    color: #ffd166 !important;
    text-shadow: none;
}

.location-country,
.location-city,
.location-postalcode {
    color: #f8f9fa;
}

.location-country {
    font-weight: 700;
}

.location-city {
    font-weight: 500;
    font-size: 0.85rem;
    max-width: 130px;
    text-transform: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.location-postalcode {
    color: #f8f9fa;
    font-weight: 500;
    text-transform: none;
}

/* Bouton code postal (trigger popover) - même rendu que le span, cliquable */
.location-postalcode-trigger {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-decoration: none;
}
.location-postalcode-trigger:hover {
    text-decoration: underline;
}

/* Contenu du popover "zone navigation code postal" */
.location-postalcode-popover {
    min-width: 160px;
    max-width: 100%;
    font-size: 0.9rem;
    line-height: 1.4;
}
.location-postalcode-popover p {
    margin-bottom: 0.35rem;
}
.location-postalcode-popover strong {
    text-transform: capitalize;
}
.location-postalcode-popover ul {
    padding-left: 1rem;
    margin-bottom: 0;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}
.location-postalcode-popover-link {
    color: #DAA520;
    text-decoration: none;
    border-bottom: 1px dotted rgba(218, 165, 32, 0.7);
}
.location-postalcode-popover-link:hover {
    color: #c9941a;
    border-bottom-style: solid;
}
.dark-mode .location-postalcode-popover-link,
[data-bs-theme='dark'] .location-postalcode-popover-link {
    color: #e6b84d;
}
.dark-mode .location-postalcode-popover-link:hover,
[data-bs-theme='dark'] .location-postalcode-popover-link:hover {
    color: #f0c85c;
}

/* Code postal seul dans sa zone (1 seule ville) : catalogue redondant, non-cliquable */
.location-postalcode-popover-current {
    color: #b0b0b0;
    text-decoration: none;
    border-bottom: none;
    cursor: default;
}
.dark-mode .location-postalcode-popover-current,
[data-bs-theme='dark'] .location-postalcode-popover-current {
    color: #9a9a9a;
}


/* ========================================
   CUSTOM THUMBS - GRILLE CSS
   ======================================== */
/* FALLBACK CRITIQUE: grid-template-columns doit toujours être défini
   sinon le conteneur grid collapse à hauteur 0.
   La valeur précise est définie inline par PHP,
   mais ce fallback garantit qu'aucune section ultérieure n'est cassée. */
.vignettes-container-custom {
    display: grid !important;
    grid-template-columns: repeat(9, minmax(0, 1fr)) !important; /* FALLBACK - 9 est la valeur par défaut du serveur */
    grid-auto-flow: row dense; /* bannières 2x1/1x2 : combler les trous de fin de ligne */
    width: 100%;
    box-sizing: border-box;
}


.location-divider {
    color: rgba(255, 255, 255, 0.4);
}

/* Lien drapeau cliquable - ultra-performant (GPU-accelerated) */
.location-flag-link {
    display: inline-flex;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.location-flag-link:hover .location-flag-wrapper {
    transform: scale(1.3);
    box-shadow: 0 0 0 3px rgba(255, 209, 102, 0.4);
}

/* Effet carte 3D et hover */
.product-card.vignette-selectable {
    border-radius: 0 !important;
    background: var(--bs-card-bg, #10141f) !important;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12) !important;
    transform: translateZ(0) !important;
}

/* Mode performance : grandes vignettes + zone « Les éditeurs liés à ce catalogue »
   adoptent le ressenti "tac-tac" (transition quasi instantanée). */
body.performance-mode .cfy-vignettes-row .product-card.vignette-selectable,
body.performance-mode .vignettes-container-custom .product-card.vignette-selectable,
body.performance-mode .cfy-editors-linked-to-catalog .product-card.vignette-selectable {
    transition-duration: 0.01ms !important;
}

/* Mode performance : header-top (logo, menu jump, dashboard, catalogues, etc.) — effets réduits */
body.performance-mode .nk-header,
body.performance-mode .nk-header *,
body.performance-mode .nk-header *::before,
body.performance-mode .nk-header *::after {
    transition-duration: 0.01ms !important;
}

/* Mode performance : menu Dashlite (sidebar latéral, nk-sidebar) — effets réduits */
body.performance-mode .nk-sidebar,
body.performance-mode .nk-sidebar *,
body.performance-mode .nk-sidebar *::before,
body.performance-mode .nk-sidebar *::after,
body.performance-mode .nk-sidebar-overlay,
body.performance-mode .nk-sidebar-overlay *,
body.performance-mode .nk-sidebar-overlay *::before,
body.performance-mode .nk-sidebar-overlay *::after {
    transition-duration: 0.01ms !important;
}

/* Mode performance : zone footer (modern-footer) — effets réduits */
body.performance-mode .modern-footer,
body.performance-mode .modern-footer *,
body.performance-mode .modern-footer *::before,
body.performance-mode .modern-footer *::after {
    transition-duration: 0.01ms !important;
}

/* Mode performance : fenêtre modale dashboard (#dashboardModal) — effets réduits */
body.performance-mode #dashboardModal,
body.performance-mode #dashboardModal *,
body.performance-mode #dashboardModal *::before,
body.performance-mode #dashboardModal *::after {
    transition-duration: 0.01ms !important;
}

/* Mode performance : fenêtre modale « Ma langue IHM » (#languageModal) — effets réduits */
body.performance-mode #languageModal,
body.performance-mode #languageModal *,
body.performance-mode #languageModal *::before,
body.performance-mode #languageModal *::after {
    transition-duration: 0.01ms !important;
}

/* Mode performance : modales annexes — catalogue selector, jeux, export ads, install homescreen */
body.performance-mode #gamesCommercifyModal,
body.performance-mode #gamesCommercifyModal *,
body.performance-mode #gamesCommercifyModal *::before,
body.performance-mode #gamesCommercifyModal *::after,
body.performance-mode #gameKoinkoinsModal,
body.performance-mode #gameKoinkoinsModal *,
body.performance-mode #gameKoinkoinsModal *::before,
body.performance-mode #gameKoinkoinsModal *::after,
body.performance-mode #gameShootYourScammersModal,
body.performance-mode #gameShootYourScammersModal *,
body.performance-mode #gameShootYourScammersModal *::before,
body.performance-mode #gameShootYourScammersModal *::after,
body.performance-mode #modalExportAds,
body.performance-mode #modalExportAds *,
body.performance-mode #modalExportAds *::before,
body.performance-mode #modalExportAds *::after,
body.performance-mode #modalInstallHomescreen,
body.performance-mode #modalInstallHomescreen *,
body.performance-mode #modalInstallHomescreen *::before,
body.performance-mode #modalInstallHomescreen *::after {
    transition-duration: 0.01ms !important;
}

.product-card.vignette-selectable .product-thumb {
    border-radius: 0 !important;
    overflow: hidden !important;
}

@media (max-width: 767.98px) {
    .product-card.vignette-selectable,
    .product-card.vignette-selectable:hover,
    .product-card.vignette-selectable:focus-within {
        transform: none !important;
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16) !important;
    }
}

@media (max-width: 991.98px) {
    .location-overlay {
        padding: 0.4rem 0.65rem;
        min-height: 40px;
    }
    .location-overlay-text {
        gap: 0.4rem;
        font-size: 0.78rem;
    }
    .location-city {
        max-width: 110px;
    }
}

@media (max-width: 575.98px) {
    .location-overlay {
        padding: 0.35rem 0.55rem;
        min-height: 36px;
    }
    .location-overlay-text {
        font-size: 0.75rem;
    }
    .location-city {
        max-width: 90px;
    }
}

/* Affichage du score */
.score-display {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--bs-light);
}

/* Zone score cliquable : curseur sur tout le bloc, effet visuel uniquement sur le score (parenthèses) et les étoiles */
ul.product-tags.rating:has(a.catalog-link-scoring) {
    cursor: pointer;
}
ul.product-tags.rating:has(a.catalog-link-scoring):hover a.catalog-link-scoring,
ul.product-tags.rating:has(a.catalog-link-scoring):focus-within a.catalog-link-scoring {
    color: #DAA520 !important;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}

/* Lien catalogue scoring (zone score des vignettes) : hover visible */
a.catalog-link-scoring,
a.score-display {
    transition: color 0.2s ease, opacity 0.2s ease, text-decoration-color 0.2s ease, border-color 0.2s ease;
}
a.catalog-link-scoring:hover,
a.catalog-link-scoring:focus-visible,
a.score-display.catalog-link-scoring:hover,
a.score-display.catalog-link-scoring:focus-visible {
    color: #DAA520 !important;
    opacity: 1;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}
a.catalog-link-scoring:hover .star-rating,
a.catalog-link-scoring:focus-visible .star-rating {
    opacity: 1;
}
.dark-mode a.catalog-link-scoring:hover,
[data-bs-theme='dark'] a.catalog-link-scoring:hover,
html.dark-mode a.catalog-link-scoring:hover,
.dark-mode a.score-display.catalog-link-scoring:hover,
[data-bs-theme='dark'] a.score-display.catalog-link-scoring:hover,
html.dark-mode a.score-display.catalog-link-scoring:hover,
ul.product-tags.rating:has(a.catalog-link-scoring):hover a.catalog-link-scoring,
.dark-mode ul.product-tags.rating:has(a.catalog-link-scoring):hover a.catalog-link-scoring {
    color: #FFD700 !important;
}

/* Étoiles de notation */
.star-rating {
    font-size: 1.2rem;
    /* SUPPRESSION: filter: drop-shadow(0 0 2px rgba(0,0,0,0.3)); - COÛTEUX EN GPU */
    /* OPTIMISATION: text-shadow désactivé pour texte lisible */
    text-shadow: none;
}

/* Compteur de vues */
.view-count {
    font-size: 0.9rem;
    font-style: italic;
    color: var(--bs-light);
    border-radius: 0;
}

.view-count .icon,
.view-count svg {
    border-radius: 0;
}

/* Badges de prix */
.price-badge {
    background: rgba(218,165,32,0.2);
    font-size: 0.75rem;
    font-weight: 500;
    color: #fff !important;
}
/* Lien vers catalogue prix (Prix fixe / Prix négociable) : transition pour le hover */
a.price-badge {
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, border-width 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
/* Survol direct : bordure épaisse, orange soutenu (maintenance / documentation) */
a.price-badge:hover,
a.price-badge:focus-visible {
    transform: scale(1.15);
    background: #ffae00 !important;
    border-width: 3px !important;
    border-color: #e69a00 !important;
    border-style: solid !important;
    color: #1f2937 !important;
    box-shadow: 0 0 14px rgba(255, 174, 0, 0.7), 0 2px 8px rgba(0, 0, 0, 0.25);
    outline: 3px solid #ffae00;
    outline-offset: 2px;
}
.dark-mode a.price-badge:hover,
[data-bs-theme='dark'] a.price-badge:hover,
html.dark-mode a.price-badge:hover,
.dark-mode a.price-badge:focus-visible,
[data-bs-theme='dark'] a.price-badge:focus-visible,
html.dark-mode a.price-badge:focus-visible {
    background: #ffae00 !important;
    border-width: 3px !important;
    border-color: #e69a00 !important;
    color: #1f2937 !important;
    box-shadow: 0 0 16px rgba(255, 174, 0, 0.8), 0 2px 8px rgba(0, 0, 0, 0.35);
}
@media (prefers-reduced-motion: reduce) {
    a.price-badge:hover,
    a.price-badge:focus-visible {
        transform: scale(1.05);
        transition-duration: 0.1s;
    }
}
.product-card:hover .price-badge,
.product-card.vignette-selectable:hover .price-badge,
.card-list-item.card-selectable:hover .price-badge {
    background: #000 !important;
    color: #fff !important;
    border-color: #000 !important;
}

/* Lien catalogue récurrence (prix récurrents) : hover distinct (bleu/violet, différent du pin et du type de prix) */
a.recurring-catalog-link {
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, border-width 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
a.recurring-catalog-link:hover,
a.recurring-catalog-link:focus-visible {
    transform: scale(1.15);
    background: #6366f1 !important;
    border-width: 3px !important;
    border-color: #4f46e5 !important;
    border-style: solid !important;
    color: #fff !important;
    box-shadow: 0 0 14px rgba(99, 102, 241, 0.7), 0 2px 8px rgba(0, 0, 0, 0.25);
    outline: 3px solid #818cf8;
    outline-offset: 2px;
}
.dark-mode a.recurring-catalog-link:hover,
[data-bs-theme='dark'] a.recurring-catalog-link:hover,
html.dark-mode a.recurring-catalog-link:hover,
.dark-mode a.recurring-catalog-link:focus-visible,
[data-bs-theme='dark'] a.recurring-catalog-link:focus-visible,
html.dark-mode a.recurring-catalog-link:focus-visible {
    background: #6366f1 !important;
    border-width: 3px !important;
    border-color: #4f46e5 !important;
    color: #fff !important;
    box-shadow: 0 0 16px rgba(99, 102, 241, 0.8), 0 2px 8px rgba(0, 0, 0, 0.35);
}
@media (prefers-reduced-motion: reduce) {
    a.recurring-catalog-link:hover,
    a.recurring-catalog-link:focus-visible {
        transform: scale(1.05);
        transition-duration: 0.1s;
    }
}

/* Informations de localisation */
.location-info {
    position: absolute;
    top: 40px;
    right: 0;
    background-color: transparent;
    color: white;
    padding: 8px;
    border-bottom-left-radius: 0;
    width: fit-content;
    display: none;
    transition: background-color 0.3s ease;
}

.location-info:hover,
.product-card:hover .location-info,
.vignette-selectable:hover .location-info {
    background-color: transparent !important;
}

/* ANGLES DROITS : catégorie, sous-catégorie, rayon, sous-rayon - aucun arrondi, tous états et hovers */
.location-info .badge,
.location-info .badge-pill,
.location-info.show .badge,
.location-info.show .badge-pill {
    border-radius: 0 !important;
}
.product-card:hover .location-info .badge,
.product-card:hover .location-info .badge-pill,
.vignette-selectable:hover .location-info .badge,
.vignette-selectable:hover .location-info .badge-pill,
.location-info .badge:hover,
.location-info .badge-pill:hover {
    border-radius: 0 !important;
}
.dark-mode .location-info .badge,
.dark-mode .location-info .badge-pill,
[data-bs-theme='dark'] .location-info .badge,
[data-bs-theme='dark'] .location-info .badge-pill,
html.dark-mode .location-info .badge,
html.dark-mode .location-info .badge-pill,
.dark-mode .product-card:hover .location-info .badge,
.dark-mode .product-card:hover .location-info .badge-pill,
.dark-mode .vignette-selectable:hover .location-info .badge,
.dark-mode .vignette-selectable:hover .location-info .badge-pill,
[data-bs-theme='dark'] .product-card:hover .location-info .badge,
[data-bs-theme='dark'] .product-card:hover .location-info .badge-pill,
[data-bs-theme='dark'] .vignette-selectable:hover .location-info .badge,
[data-bs-theme='dark'] .vignette-selectable:hover .location-info .badge-pill,
html.dark-mode .product-card:hover .location-info .badge,
html.dark-mode .product-card:hover .location-info .badge-pill,
html.dark-mode .vignette-selectable:hover .location-info .badge,
html.dark-mode .vignette-selectable:hover .location-info .badge-pill {
    border-radius: 0 !important;
}

.location-info.show {
    display: block;
}

/* Bouton toggle location */
.location-toggle {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 2;
}

/* Alignement à droite du contenu location-info sur desktop et tablette */
@media (min-width: 769px) {
    .location-info {
        text-align: right;
    }
    
    .location-info li {
        text-align: right;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    .location-info .badge {
        margin-left: 0.25rem;
    }
}

/* Bouton + dédié au toggle catégories / rayons dans les vignettes */
.location-toggle.vignette-categories-rayon-toggle {
    background-color: rgba(0, 0, 0, 0.85) !important;
    color: #f8f9fa !important;
    border-radius: 0;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: absolute;
    top: 5px;
    right: 38px;
    z-index: 2;
}

.location-toggle.vignette-categories-rayon-toggle em {
    color: inherit;
    font-size: 14px;
    line-height: 1;
}

.location-toggle.vignette-categories-rayon-toggle:hover {
    background-color: rgba(0, 0, 0, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.55) !important;
    transform: scale(1.05);
}

/* Bouton flip pour retourner les vignettes */
.vignette-flip-toggle {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: rgba(13, 110, 253, 0.85) !important;
    color: #f8f9fa !important;
    border-radius: 0;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 2;
    transition: transform 0.15s ease-out, opacity 0.15s ease-out, background-color 0.15s ease-out;
}

/* Zone de clic invisible agrandie (tous boutons flip, recto/verso, présents et
   futurs, via la classe commune) : compense le léger décalage vertical du bouton
   pendant l'effet de bordure au survol de la vignette, pour qu'un clic à quelques
   pixels du bouton reste capté par lui au lieu de retomber sur le lien de
   l'annonce en dessous. Plus généreux en haut (sens du décalage observé), plus
   discret côté bouton +/- catégories/rayons voisin pour ne pas lui voler ses clics. */
.vignette-flip-toggle::before {
    content: '';
    position: absolute;
    top: -10px;
    right: -6px;
    bottom: -6px;
    left: -2px;
}

.vignette-flip-toggle em {
    color: inherit;
    font-size: 14px;
    line-height: 1;
}

.vignette-flip-toggle:hover {
    background-color: rgba(13, 110, 253, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.55) !important;
    transform: scale(1.05);
}

.vignette-flip-toggle:active {
    transform: scale(0.98);
}

/* Bouton flip sur une face verso, quelle qu'elle soit (social, géo, titre, et tout
   verso ajouté plus tard) : même position et même aspect bleu que le bouton du
   recto, appliqués via cette seule classe générique .vignette-flip-toggle-verso-back
   - à porter sur le bouton de tout nouveau verso, sans rien ajouter ici. */
.vignette-flip-toggle-verso-back {
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    z-index: 10 !important;
    background-color: rgba(13, 110, 253, 0.95) !important;
}

.vignette-flip-toggle-verso-back:hover {
    background-color: rgba(13, 110, 253, 1) !important;
    transform: scale(1.1);
}

/* Bouton croix des versos (cf. buildVersoCloseButtonHtml() dans
   commercify_vignettes_optimized.js) : juste AVANT le bouton flip du verso, à sa
   gauche (28px de bouton + 4px d'écart), même gabarit. Ferme directement le verso
   et ramène au recto. Pas de classe .vignette-flip-toggle (donc pas de zone de clic
   ::before agrandie) : sa zone ne doit jamais empiéter sur celle du bouton flip. */
.vignette-verso-close {
    position: absolute !important;
    top: 5px !important;
    right: 37px !important;
    z-index: 10 !important;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 0;
    background-color: rgba(220, 53, 69, 0.92) !important;
    color: #f8f9fa !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    transition: transform 0.15s ease-out, background-color 0.15s ease-out;
}

.vignette-verso-close:hover {
    background-color: rgba(220, 53, 69, 1) !important;
    border-color: rgba(255, 255, 255, 0.55) !important;
    transform: scale(1.1);
}

.vignette-verso-close:active {
    transform: scale(0.98);
}

/* Versos géo et titre : leur titre commence tout en haut (pas d'image au-dessus,
   contrairement au verso social) et passerait sous la paire croix + flip. On le
   décale sous la rangée de boutons (5px + 28px + marge). */
.product-card-flip-back-geo .flip-back-content > .flip-back-header,
.product-card-flip-back-title .flip-back-content > .flip-back-header {
    padding-top: 30px;
}

/* Filet de sécurité anti-navigation accidentelle (cf. commercify_vignettes_optimized.js,
   lockCardNavigation()) : pendant les ~500ms qui suivent un clic sur un bouton flip,
   tous les liens de CETTE vignette (image, titre, badges...) sont rendus inertes, le
   temps que l'effet de bordure au survol se stabilise et que les clics rapprochés
   suivants ne retombent plus sur le lien de l'annonce. */
.product-card.vignette-flip-nav-lock a {
    pointer-events: none !important;
}

/* Responsive : adaptation pour petits écrans */
@media (max-width: 576px) {
    .vignette-flip-toggle {
        width: 26px;
        height: 26px;
        right: 5px;
    }
    
    .vignette-flip-toggle em {
        font-size: 12px;
    }
    
    .location-toggle.vignette-categories-rayon-toggle {
        width: 26px;
        height: 26px;
        right: 35px;
    }
    
    .location-toggle.vignette-categories-rayon-toggle em {
        font-size: 12px;
    }
}

/* ========================================
   CASES À COCHER POUR VIGNETTES
   DESKTOP ET TABLETTE UNIQUEMENT
   ======================================== */

/* Case à cocher dans le coin bas droit */
.vignette-checkbox {
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 10;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid #007bff;
    border-radius: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, opacity 0.2s ease;
    transform: translateZ(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* === URGENT-CORNER (revertible) START === */
.vignette-urgent-pin {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    z-index: 5;
    white-space: nowrap;
    pointer-events: auto;
}

/* Slots bannières : jamais de champ urgent — défensif */
.vignette-ad .vignette-urgent-pin { display: none !important; }
/* === URGENT-CORNER (revertible) END === */

.vignette-checkbox:hover {
    background: rgba(0, 123, 255, 0.1);
    transform: scale(1.05);
}

.vignette-checkbox.checked {
    background: #007bff;
    border-color: #0056b3;
}

.vignette-checkbox.checked::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    background: currentColor;
    color: white;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Bordure de sélection pour vignette cochée - CROSS-BROWSER */
.product-card.selected {
    border: 5px solid #007bff !important;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.4), 0 6px 20px rgba(0, 123, 255, 0.3) !important;
    -webkit-transform: translateY(-3px);
    -moz-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    -o-transform: translateY(-3px);
    transform: translateY(-3px);
    position: relative;
}

/* Effet de pulsation pour la bordure - CROSS-BROWSER */
.product-card.selected::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border: 2px solid #007bff;
    border-radius: inherit;
    -webkit-animation: pulse-border 2s infinite;
    -moz-animation: pulse-border 2s infinite;
    -o-animation: pulse-border 2s infinite;
    animation: pulse-border 2s infinite;
    pointer-events: none;
}

@-webkit-keyframes pulse-border {
    0% { opacity: 1; -webkit-transform: scale(1); }
    50% { opacity: 0.5; -webkit-transform: scale(1.02); }
    100% { opacity: 1; -webkit-transform: scale(1); }
}

@-moz-keyframes pulse-border {
    0% { opacity: 1; -moz-transform: scale(1); }
    50% { opacity: 0.5; -moz-transform: scale(1.02); }
    100% { opacity: 1; -moz-transform: scale(1); }
}

@keyframes pulse-border {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.02); }
    100% { opacity: 1; transform: scale(1); }
}

/* Mode sombre - Cases à cocher */
.dark-mode .vignette-checkbox,
[data-bs-theme='dark'] .vignette-checkbox,
html.dark-mode .vignette-checkbox {
    background: rgba(45, 45, 45, 0.9);
    border-color: #0d6efd;
    color: #e9ecef;
}

.dark-mode .vignette-checkbox:hover,
[data-bs-theme='dark'] .vignette-checkbox:hover,
html.dark-mode .vignette-checkbox:hover {
    background: rgba(13, 110, 253, 0.2);
}

.dark-mode .vignette-checkbox.checked,
[data-bs-theme='dark'] .vignette-checkbox.checked,
html.dark-mode .vignette-checkbox.checked {
    background: #0d6efd;
    border-color: #0a58ca;
}

/* Mode sombre - Bordure de sélection */
.dark-mode .product-card.selected,
[data-bs-theme='dark'] .product-card.selected,
html.dark-mode .product-card.selected {
    border: 3px solid #0d6efd !important;
    box-shadow: 0 0 0 1px rgba(13, 110, 253, 0.3), 0 4px 12px rgba(13, 110, 253, 0.2) !important;
}

/* Zone cliquable pour toute la vignette */
.product-card.vignette-selectable {
    cursor: pointer;
    position: relative;
}

/* ========================================
   FLIP 3D CUBE - CLIC DROIT SUR VIGNETTE
   Effet cube 3D optimisé anti-killers
   ======================================== */

/* Container 3D pour le flip - isolé dans la carte pour ne pas en altérer le rendu */
.product-card .product-card-flip-container {
    position: relative;
    width: 100%;
    height: 100%;
    perspective: 1000px;
    perspective-origin: center center;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    /* AUCUN STYLE qui pourrait altérer le rendu de la carte parente */
    background: transparent !important;
    opacity: 1 !important;
    filter: none !important;
}

/* Wrapper interne pour le flip */
.product-card-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transition: transform 0.35s cubic-bezier(0.4, 0.0, 0.2, 1);
    -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.4, 0.0, 0.2, 1);
    /* AUCUN STYLE qui pourrait altérer le rendu */
    background: transparent !important;
    opacity: 1 !important;
    filter: none !important;
}

/* État flip - rotation Y à 180 degrés */
.product-card-flip-inner.flipped {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}

/* Face avant (vignette normale) - CONSERVE LE RENDU ORIGINAL */
.product-card-flip-front {
    position: relative;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* Pas de transform par défaut - seulement lors du flip */
    /* AUCUN STYLE qui pourrait altérer les couleurs originales */
    background: transparent !important;
    opacity: 1 !important;
}

/* Face arrière avec texte "OPTIONS À VENIR" */
.product-card-flip-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    background: #2b3748;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    text-align: center;
    box-sizing: border-box;
    overflow: hidden;
    /* Pas de shadow pour limiter le coût GPU */
}

/* Contenu du dos - styles Commercify */
.flip-back-content {
    width: 100%;
    max-width: 100%;
    padding: 0.5rem 0.75rem;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.flip-back-header .product-card-flip-back-title {
    font-weight: 800;
    font-size: 1rem;
    color: #ffffff;
    letter-spacing: 0.5px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    box-sizing: border-box;
}

.flip-back-header .product-card-flip-back-subtitle {
    font-weight: 500;
    font-size: 0.85rem;
    color: #b7c2d0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    box-sizing: border-box;
}

.flip-back-actions .btn {
    border-radius: 0;
    box-shadow: none !important;
}

.flip-back-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

.flip-pill {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: #ff6b35;
    background: rgba(255, 107, 53, 0.15);
    border: none;
}

/* Lisibilité stricte */
.product-card-flip-back * {
    color: #ffffff !important;
    text-shadow: none;
}

/* Icône ou élément décoratif (optionnel) */
.product-card-flip-back-icon {
    font-size: 3rem;
    color: #09c2de;
    margin-bottom: 1rem;
    text-shadow: none;
    max-width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
    /* Pas d'animation pour limiter le CPU */
}

/* Animation d'apparition du texte */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Suppression translateZ/will-change globaux pour limiter le coût GPU */

/* Pointer events: éviter interférences lors du flip */
.product-card-flip-inner.flipped .product-card-flip-front { pointer-events: none; }
.product-card-flip-inner:not(.flipped) .product-card-flip-back { pointer-events: none; }

/* Désactivation de l'effet sur smartphones pour performance */
@media (max-width: 768px) {
    .product-card-flip-container {
        perspective: none;
    }
    
    .product-card-flip-inner {
        transition: none;
        -webkit-transition: none;
    }
    
    .product-card-flip-back {
        display: none;
    }
}

/* Désactivation pour utilisateurs préférant moins de mouvement */
@media (prefers-reduced-motion: reduce) {
    .product-card-flip-inner {
        transition: none;
        -webkit-transition: none;
    }
    
    .product-card-flip-back-icon {
        animation: none;
    }
}

/* Mode sombre - harmonisation */
.dark-mode .product-card-flip-back,
[data-bs-theme='dark'] .product-card-flip-back,
html.dark-mode .product-card-flip-back {
    background: #2b3748;
}

/* ========================================
   FLIP 3D GÉO - CLIC DROIT SUR ZONE .location-overlay
   Conteneur INDÉPENDANT du flip social (rotation inverse, -180deg).
   Deux .product-card-flip-inner* distincts coexistent en superposition
   (absolute/inset:0) au lieu d'une 3e face sur le même inner : des
   rotations rotateY(+180) et rotateY(-180) combinées sur UN SEUL inner
   se retrouveraient toutes deux face-caméra à ±180 (s'additionnent),
   d'où la nécessité de deux conteneurs de flip séparés.
   ======================================== */

.product-card-flip-container-geo {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    perspective: 1000px;
    perspective-origin: center center;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    pointer-events: none;
    background: transparent !important;
}

.product-card-flip-inner-geo {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transition: transform 0.35s cubic-bezier(0.4, 0.0, 0.2, 1);
    -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.4, 0.0, 0.2, 1);
    background: transparent !important;
}

.product-card-flip-inner-geo.flipped-geo {
    transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
}

.product-card-flip-front-geo {
    position: relative;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    pointer-events: none;
    background: transparent !important;
}

.product-card-flip-back-geo {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    background: #2b3748;
    color: #ffffff;
    /* BUGFIX (2026-09-15) : PAS de display:none ici (contrairement au verso social qui
       bascule display:none/flex via .flipped .product-card-flip-back). display n'est pas
       transitionable : le retirer AU MOMENT MÊME où .flipped-geo est enlevée sortait ce
       visage du rendu instantanément, avant que la rotation de fermeture n'ait le temps de
       s'animer visuellement — d'où une fermeture qui semblait sauter directement au recto
       sans transition. Ici, backface-visibility:hidden (déjà posé ci-dessus) suffit seul à
       masquer ce visage quand il n'est pas face caméra, de façon continue pendant toute la
       rotation, dans les deux sens. */
    display: block;
    /* BUGFIX (2026-09-15) : `overflow-y:auto` ne clippe PAS fiablement sur CET élément —
       il porte lui-même une transform 3D (rotateY) et vit dans un ancêtre
       transform-style:preserve-3d (.product-card-flip-inner-geo/-container-geo), et
       Chromium n'applique alors pas le clipping overflow normalement : le contenu qui
       dépasse (fréquent depuis l'ajout de la région) s'affichait hors de la vignette,
       jusque dans la ligne au-dessus, et restait inatteignable au scroll (aucun scroll
       réel n'avait lieu puisque le clipping lui-même ne fonctionnait pas). Le scroll et
       le clip sont donc délégués à `.flip-back-content` ci-dessous, un wrapper enfant
       SANS transform propre, positionné en absolute avec des offsets fixes (0) plutôt
       qu'un pourcentage en contexte flex (qui s'était lui-même effondré à hauteur 0).
       Ici on ne garde qu'un clip dur de secours. */
    overflow: hidden;
    z-index: 999;
    pointer-events: auto;
    border-radius: 0;
    box-sizing: border-box;
}

.product-card-flip-inner-geo.flipped-geo .product-card-flip-front-geo { pointer-events: none; }
.product-card-flip-inner-geo:not(.flipped-geo) .product-card-flip-back-geo { pointer-events: none; }

@media (max-width: 768px) {
    .product-card-flip-container-geo {
        perspective: none;
    }
    .product-card-flip-inner-geo {
        transition: none;
        -webkit-transition: none;
    }
    .product-card-flip-back-geo {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-card-flip-inner-geo {
        transition: none;
        -webkit-transition: none;
    }
}

.dark-mode .product-card-flip-back-geo,
[data-bs-theme='dark'] .product-card-flip-back-geo,
html.dark-mode .product-card-flip-back-geo {
    background: #2b3748;
}

/* Contenu texte du verso géo : réutilise .location-postalcode-popover*
   (classes conservées de l'ancienne popover, cf. cleanup plus bas dans ce
   fichier) mais sur fond systématiquement sombre #2b3748 (le verso, social
   comme géo, ne suit pas le thème clair/sombre du site). */
.product-card-flip-back-geo .location-postalcode-popover-link {
    color: #e6b84d;
}
.product-card-flip-back-geo .location-postalcode-popover-link:hover {
    color: #f0c85c;
}
.product-card-flip-back-geo .location-postalcode-popover-current {
    color: #9a9a9a;
}
.product-card-flip-back-geo strong {
    color: #ffffff;
    text-transform: capitalize;
}

/* ========================================
   FLIP 3D TITRE - CLIC DROIT SUR .product-title
   Conteneur INDÉPENDANT des flips social/géo (rotation verticale, rotateX).
   Même architecture à conteneur séparé que le flip géo (voir ce bloc plus haut
   pour la justification géométrique) : un 3e conteneur superposé, jamais une
   3e face sur un inner existant.
   ======================================== */

.product-card-flip-container-title {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    perspective: 1000px;
    perspective-origin: center center;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    pointer-events: none;
    background: transparent !important;
}

.product-card-flip-inner-title {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transition: transform 0.35s cubic-bezier(0.4, 0.0, 0.2, 1);
    -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.4, 0.0, 0.2, 1);
    background: transparent !important;
}

.product-card-flip-inner-title.flipped-title {
    transform: rotateX(180deg);
    -webkit-transform: rotateX(180deg);
}

.product-card-flip-front-title {
    position: relative;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    pointer-events: none;
    background: transparent !important;
}

.product-card-flip-back-title {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: rotateX(180deg);
    -webkit-transform: rotateX(180deg);
    background: #2b3748;
    color: #ffffff;
    /* Mêmes bugfixes que le verso géo (display fixe non transitionable + clip
       délégué au wrapper .flip-back-content, cf. commentaires détaillés sur le
       bloc FLIP 3D GÉO ci-dessus). */
    display: block;
    overflow: hidden;
    z-index: 999;
    pointer-events: auto;
    border-radius: 0;
    box-sizing: border-box;
}

.product-card-flip-inner-title.flipped-title .product-card-flip-front-title { pointer-events: none; }
.product-card-flip-inner-title:not(.flipped-title) .product-card-flip-back-title { pointer-events: none; }

@media (max-width: 768px) {
    .product-card-flip-container-title {
        perspective: none;
    }
    .product-card-flip-inner-title {
        transition: none;
        -webkit-transition: none;
    }
    .product-card-flip-back-title {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-card-flip-inner-title {
        transition: none;
        -webkit-transition: none;
    }
}

.dark-mode .product-card-flip-back-title,
[data-bs-theme='dark'] .product-card-flip-back-title,
html.dark-mode .product-card-flip-back-title {
    background: #2b3748;
}

/* ========================================
   Mode sombre DashLite - Harmonisation globale
   ======================================== */
.dark-mode .product-card,
[data-bs-theme='dark'] .product-card,
html.dark-mode .product-card {
    background-color: #101924 !important;
    border-color: #1d2d40 !important;
    color: #d4dceb !important;
}

.dark-mode .product-card .product-title,
[data-bs-theme='dark'] .product-card .product-title,
html.dark-mode .product-card .product-title {
    background: linear-gradient(135deg, rgba(12, 22, 35, 0.96) 0%, rgba(16, 28, 44, 0.96) 100%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(0, 0, 0, 0.35);
}

.dark-mode .product-card .product-title a,
[data-bs-theme='dark'] .product-card .product-title a,
html.dark-mode .product-card .product-title a {
    color: #f5f9ff !important;
}

.dark-mode .product-card .product-title a:hover,
[data-bs-theme='dark'] .product-card .product-title a:hover,
html.dark-mode .product-card .product-title a:hover,
.dark-mode .product-card .product-title a:focus-visible,
[data-bs-theme='dark'] .product-card .product-title a:focus-visible,
html.dark-mode .product-card .product-title a:focus-visible,
.dark-mode .vignette-selectable .product-title a:hover,
[data-bs-theme='dark'] .vignette-selectable .product-title a:hover,
html.dark-mode .vignette-selectable .product-title a:hover,
.dark-mode .vignette-selectable .product-title a:focus-visible,
[data-bs-theme='dark'] .vignette-selectable .product-title a:focus-visible,
html.dark-mode .vignette-selectable .product-title a:focus-visible {
    color: #a5c8ff !important;
    text-decoration: underline !important;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
    text-decoration-color: rgba(165, 200, 255, 0.95);
    border-bottom-color: rgba(165, 200, 255, 0.8) !important;
}

.dark-mode .product-card .text-muted,
[data-bs-theme='dark'] .product-card .text-muted,
html.dark-mode .product-card .text-muted {
    color: #9cb3d6 !important;
}

.dark-mode .product-card .badge:not(.location-info .badge),
[data-bs-theme='dark'] .product-card .badge:not(.location-info .badge),
html.dark-mode .product-card .badge:not(.location-info .badge) {
    background-color: #273240 !important;
    color: #d4dceb !important;
    border-color: #1d2d40 !important;
}

.dark-mode .product-card .location-info,
[data-bs-theme='dark'] .product-card .location-info,
html.dark-mode .product-card .location-info {
    background-color: transparent !important;
    color: #e9eef7 !important;
}


.dark-mode .product-card .view-count,
[data-bs-theme='dark'] .product-card .view-count,
html.dark-mode .product-card .view-count {
    color: #9cb3d6 !important;
}

/* Darkmode - Étoiles de notation jaunes (warning) */
.dark-mode .product-card .star-rating.text-warning,
[data-bs-theme='dark'] .product-card .star-rating.text-warning,
html.dark-mode .product-card .star-rating.text-warning,
.dark-mode .star-rating.text-warning,
[data-bs-theme='dark'] .star-rating.text-warning,
html.dark-mode .star-rating.text-warning {
    color: #ffd93d !important;
    text-shadow: none;
}

/* Darkmode - Étoiles de notation rouges (danger) */
.dark-mode .product-card .star-rating.text-danger,
[data-bs-theme='dark'] .product-card .star-rating.text-danger,
html.dark-mode .product-card .star-rating.text-danger,
.dark-mode .star-rating.text-danger,
[data-bs-theme='dark'] .star-rating.text-danger,
html.dark-mode .star-rating.text-danger {
    color: #ff6b6b !important;
    text-shadow: none;
}

/* Darkmode - Étoiles génériques (fallback) */
.dark-mode .product-card .star-rating,
[data-bs-theme='dark'] .product-card .star-rating,
html.dark-mode .product-card .star-rating {
    color: #f8d26a !important;
    text-shadow: none;
}

.dark-mode .product-card .badge.badge-pill:not(.location-info .badge-pill),
[data-bs-theme='dark'] .product-card .badge.badge-pill:not(.location-info .badge-pill),
html.dark-mode .product-card .badge.badge-pill:not(.location-info .badge-pill) {
    background-color: #273240 !important;
    color: #bfcbe1 !important;
}

.dark-mode .product-card .location-overlay,
[data-bs-theme='dark'] .product-card .location-overlay,
html.dark-mode .product-card .location-overlay {
    background: linear-gradient(90deg, rgba(4, 9, 15, 0.95) 0%, rgba(10, 18, 28, 0.95) 100%) !important;
}

/* Désactivation sur smartphones */
@media (max-width: 768px) {
    .vignette-checkbox {
        display: none !important;
    }
    
    .product-card.selected {
        border: none !important;
        box-shadow: none !important;
        transform: none !important;
    }
    
    .product-card.vignette-selectable {
        cursor: default;
    }
    
    .product-card.vignette-selectable:hover {
        transform: none;
        box-shadow: none;
    }
}

/* Optimisation pour les utilisateurs qui préfèrent moins de mouvement */
@media (prefers-reduced-motion: reduce) {
    .vignette-checkbox {
        transition: none;
    }
    
    .vignette-checkbox:hover {
        transform: none;
    }
    
    .product-card.selected {
        transform: none;
    }
    
    .product-card.vignette-selectable:hover {
        transform: none;
    }
}

/* ========================================
   HARMONISATION COULEURS DASHLITE DARK MODE - TABLETTE
   Viewport tablette (768px - 1024px, incl. 1024x768)
   Synchronisation complète avec le système DashLite
   ======================================== */
.br-tablet-only {
    display: none !important;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .br-tablet-only {
        display: block !important;
    }

    /* Background des cartes - couleur DashLite */
    .dark-mode .product-card,
    [data-bs-theme='dark'] .product-card,
    html.dark-mode .product-card {
        background: #141c26 !important;
    }
    
    /* Bordure des cartes - couleur DashLite */
    .dark-mode .product-card.card-bordered,
    [data-bs-theme='dark'] .product-card.card-bordered,
    html.dark-mode .product-card.card-bordered {
        border-color: #1d2d40 !important;
    }
    
    /* Titre des annonces - couleur DashLite */
    .dark-mode .product-title a,
    [data-bs-theme='dark'] .product-title a,
    html.dark-mode .product-title a {
        color: #fff !important;
    }
    
    /* Prix - couleur harmonisée DashLite */
    .dark-mode .product-price,
    [data-bs-theme='dark'] .product-price,
    html.dark-mode .product-price {
        color: #b6c6e3 !important;
    }
    
    /* Badges - harmonisation avec DashLite (sauf location-info) */
    .dark-mode .badge:not(.location-info .badge),
    [data-bs-theme='dark'] .badge:not(.location-info .badge),
    html.dark-mode .badge:not(.location-info .badge) {
        background-color: #2c3540 !important;
        color: #b7c2d0 !important;
        border-color: #1d2d40 !important;
    }
    
    /* Badge pill spécifique (sauf location-info) */
    .dark-mode .badge-pill:not(.location-info .badge-pill),
    [data-bs-theme='dark'] .badge-pill:not(.location-info .badge-pill),
    html.dark-mode .badge-pill:not(.location-info .badge-pill) {
        background-color: #2c3540 !important;
        color: #b7c2d0 !important;
    }
    
    /* Textes secondaires - couleur DashLite */
    .dark-mode .product-description,
    [data-bs-theme='dark'] .product-description,
    html.dark-mode .product-description {
        color: #8094ae !important;
    }
    
    /* Tags et catégories - couleur DashLite */
    .dark-mode .product-tags a,
    [data-bs-theme='dark'] .product-tags a,
    html.dark-mode .product-tags a {
        color: #8094ae !important;
    }
    
    .dark-mode .product-tags a:hover,
    [data-bs-theme='dark'] .product-tags a:hover,
    html.dark-mode .product-tags a:hover {
        color: #b6c6e3 !important;
    }
    
    /* Hover effect harmonisé */
    .dark-mode .product-card:hover,
    [data-bs-theme='dark'] .product-card:hover,
    html.dark-mode .product-card:hover {
        box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4) !important;
    }
    
    /* Zone localisation - fond transparent sur tablette, noir au hover */
    .location-overlay,
    .location-info {
        background-color: transparent !important;
        transition: background-color 0.3s ease;
    }
    
    /* Mode light : fond noir au hover */
    .location-info:hover,
    .product-card:hover .location-info,
    .vignette-selectable:hover .location-info {
        background-color: rgba(0, 0, 0, 0.85) !important;
    }
    
}

/* ========================================
   FLIP 3D - MENU CLIC DROIT SUR VIGNETTES
   APPROCHE ULTRA-SIMPLE CROSS-BROWSER
   ======================================== */

/* La carte doit être en position relative pour contenir le flip */
.product-card {
    position: relative;
}

/* Conteneur du flip - par-dessus la carte */
.product-card-flip-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* Wrapper interne */
.product-card-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Face avant - contenu normal de la carte */
.product-card-flip-front {
    position: relative;
    width: 100%;
    height: 100%;
    pointer-events: auto;
}

/* Face arrière - menu d'actions (caché par défaut) */
.product-card-flip-back {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: #2b3748;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 999;
    pointer-events: auto;
    border-radius: 0;
    /* Ascenseur invisible : scroll conservé, seule la barre visuelle est masquée */
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    /* Le scroll du verso reste confiné au verso : ne fait plus scroller la page
       (mur) au-delà quand on atteint le haut/bas de ce conteneur */
    overscroll-behavior: contain !important;
}

.product-card-flip-back::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Quand flippé - afficher la face arrière */
.product-card-flip-inner.flipped .product-card-flip-back {
    display: flex !important;
}

/* Contenu du menu */
.flip-back-content {
    width: 100%;
    max-width: 100%;
    color: #ffffff;
    text-align: center;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Ascenseur invisible sur les 3 versos (social/geo/titre) : le scroll reste actif
   (overflow-y:auto posé inline en JS), seule la barre visuelle est masquée */
.product-card-flip-back .flip-back-content,
.product-card-flip-back-geo .flip-back-content,
.product-card-flip-back-title .flip-back-content {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    /* Contient le scroll dans le verso, empêche le scroll chaining vers la page (mur) */
    overscroll-behavior: contain !important;
}

.product-card-flip-back .flip-back-content::-webkit-scrollbar,
.product-card-flip-back-geo .flip-back-content::-webkit-scrollbar,
.product-card-flip-back-title .flip-back-content::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Header avec accent bleu pin's */
.flip-back-header {
    margin-bottom: 1rem;
    padding-top: 1rem;
    border-top: 3px solid #09c2de;
    position: relative;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.flip-back-header::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #ff6b35, transparent);
    opacity: 0.6;
}

.product-card-flip-back-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: #09c2de;
    text-shadow: none;
    max-width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
}

.product-card-flip-back-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.25rem;
    text-shadow: none;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    box-sizing: border-box;
}

.product-card-flip-back-subtitle {
    font-size: 0.85rem;
    color: #b7c2d0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    box-sizing: border-box;
}

/* Actions */
.flip-back-actions {
    margin: 1rem 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.flip-back-actions .d-flex {
    margin-bottom: 0.5rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    justify-content: center;
}

/* Boutons - Noir brillant, taille réduite, sans icônes */
.flip-action-btn {
    padding: 0.4rem 0.6rem !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    border-radius: 0 !important;
    border-width: 1px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: normal !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    background: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
    flex-direction: column !important;
    gap: 0.15rem !important;
    line-height: 1.2 !important;
}

/* Boutons scoring - colonne pour icône et texte sur deux lignes */
.flip-action-btn.like-btn,
.flip-action-btn.dislike-btn {
    flex-direction: column !important;
    gap: 0.25rem !important;
    padding: 0.75rem 1rem !important;
}

.flip-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
    background: #1a1a1a !important;
}

/* Boutons avec texte sur deux lignes */
.flip-action-btn span {
    text-align: center;
    display: block;
    line-height: 1.2;
    font-size: 0.7rem !important;
}

/* Masquer toutes les icônes */
.flip-action-btn i {
    display: none !important;
}

/* Icônes colorées selon l'action */
.flip-action-btn.like-btn i {
    color: #09c2de !important;
}

.flip-action-btn.dislike-btn i {
    color: #b7c2d0 !important;
}

/* Like - Fond vert positif (même convention que bookmark-whitelist/follow) */
.flip-action-btn.like-btn {
    background: rgba(40, 167, 69, 0.2) !important;
    border-color: rgba(40, 167, 69, 0.4) !important;
}

.flip-action-btn.like-btn:hover,
.flip-action-btn.like-btn.active {
    background: rgba(40, 167, 69, 0.3) !important;
    border-color: #28a745 !important;
}

/* Dislike - Fond rouge négatif (même convention que bookmark-blacklist/unfollow) */
.flip-action-btn.dislike-btn {
    background: rgba(255, 68, 68, 0.2) !important;
    border-color: rgba(255, 68, 68, 0.4) !important;
}

.flip-action-btn.dislike-btn:hover,
.flip-action-btn.dislike-btn.active {
    background: rgba(255, 68, 68, 0.3) !important;
    border-color: #ff4444 !important;
}

/* Bookmark Whitelist - Fond vert positif */
.flip-action-btn.bookmark-whitelist {
    background: rgba(40, 167, 69, 0.2) !important;
    border-color: rgba(40, 167, 69, 0.4) !important;
}

.flip-action-btn.bookmark-whitelist:hover {
    background: rgba(40, 167, 69, 0.3) !important;
    border-color: #28a745 !important;
}

.flip-action-btn.bookmark-whitelist.active {
    background: rgba(40, 167, 69, 0.4) !important;
    border-color: #28a745 !important;
}

/* Bookmark Blacklist - Fond rouge négatif */
.flip-action-btn.bookmark-blacklist {
    background: rgba(255, 68, 68, 0.2) !important;
    border-color: rgba(255, 68, 68, 0.4) !important;
}

.flip-action-btn.bookmark-blacklist:hover {
    background: rgba(255, 68, 68, 0.3) !important;
    border-color: #ff4444 !important;
}

.flip-action-btn.bookmark-blacklist.active {
    background: rgba(255, 68, 68, 0.4) !important;
    border: none !important;
}

/* Follow liste blanche - Fond vert positif (même principe que bookmark-whitelist/like) */
.flip-action-btn.follow-whitelist {
    background: rgba(40, 167, 69, 0.2) !important;
    border-color: rgba(40, 167, 69, 0.4) !important;
}

.flip-action-btn.follow-whitelist:hover,
.flip-action-btn.follow-whitelist.active {
    background: rgba(40, 167, 69, 0.3) !important;
    border-color: #28a745 !important;
}

/* Follow liste noire - Fond rouge négatif (même principe que bookmark-blacklist/dislike) */
.flip-action-btn.follow-blacklist {
    background: rgba(255, 68, 68, 0.2) !important;
    border-color: rgba(255, 68, 68, 0.4) !important;
}

.flip-action-btn.follow-blacklist:hover,
.flip-action-btn.follow-blacklist.active {
    background: rgba(255, 68, 68, 0.3) !important;
    border-color: #ff4444 !important;
}

.flip-action-btn.follow-whitelist i,
.flip-action-btn.follow-blacklist i {
    color: #09c2de !important;
}

.flip-action-btn.report-btn i {
    color: #ff6b35 !important;
}

/* État actif pour tous les boutons */
.flip-action-btn.active {
    opacity: 0.9;
}

.flip-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed !important;
}

/* Bouton correspondant à l'état courant (like/dislike/liste blanche/liste noire déjà en
   place) : grisé/non cliquable comme les modales publisher/ad (displayAdModalButton{Like,
   Bookmark}Actions()) — reliker/redisliker/re-bookmarker la même chose est impossible tant
   que cet état reste courant. On garde sa couleur d'état (vert/rouge, cf. règles ci-dessus)
   pour qu'il reste identifiable au premier coup d'œil, mais avec une coche et une opacité
   réduite pour signaler clairement "en place, non cliquable" plutôt qu'une action à faire. */
.flip-action-btn.active:disabled {
    opacity: 0.85 !important;
    cursor: default !important;
}

.flip-action-btn.active:disabled::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 0.35rem;
    vertical-align: -1px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Boutons "Retirer" (retirer mon like/dislike, supprimer mon marque-page) : style neutre/
   discret plutôt que vert/rouge, pour bien les distinguer des actions qui AJOUTENT un état
   (cf. modales publisher/ad, bouton "Retirer" en style ghost/outline). N'apparaissent que
   lorsqu'il y a effectivement quelque chose à retirer (voir setReactionState()/
   setBookmarkState() dans commercify_vignettes_optimized.js). */
.flip-action-btn.remove-reaction-btn,
.flip-action-btn.remove-bookmark-btn,
.flip-action-btn.remove-follow-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: #b7c2d0 !important;
}

.flip-action-btn.remove-reaction-btn:hover,
.flip-action-btn.remove-bookmark-btn:hover,
.flip-action-btn.remove-follow-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
}

/* Status - Alerte orange commercify */
.flip-back-status {
    min-height: 2rem;
    padding: 0.5rem;
    font-size: 0.9rem;
    background-color: rgba(255, 107, 53, 0.15) !important;
    color: #ff6b35 !important;
    border: none !important;
    border-radius: 0 !important;
}

/* Footer */
.flip-back-footer {
    margin-top: 1rem;
    font-size: 0.75rem;
    color: #b7c2d0;
}

/* Disclaimer modération */
.flip-back-moderation-disclaimer {
    background-color: #1a1a1a !important;
    color: #b7c2d0 !important;
    padding: 0.5rem !important;
    border-radius: 0 !important;
    margin-top: 0.75rem !important;
    font-size: 0.75rem !important;
    text-align: center !important;
    border: 1px solid #333 !important;
    line-height: 1.4 !important;
    transition: color 0.2s ease !important;
}

/* Disposition en grille pour les boutons */
.flip-back-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
    padding: 0.5rem 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Bouton signaler sur toute la largeur */
.flip-back-actions .report-btn {
    grid-column: 1 / -1 !important;
}

/* Message visiteur */
.flip-back-visitor-message {
    text-align: center;
    padding: 1rem;
    color: #b7c2d0;
    font-size: 0.85rem;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 0;
    margin: 0.5rem 0;
}

/* Overlay de chargement - Performance optimisée */
.flip-back-loading-overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 100;
    border-radius: 0;
    align-items: center;
    justify-content: center;
    pointer-events: all;
    will-change: opacity;
    transition: opacity 0.2s ease;
}

.flip-back-content {
    position: relative;
}

/* Couleurs Commercify */
.btn-brand-blue {
    background-color: #2b5cff !important;
    border-color: #2b5cff !important;
    color: #ffffff !important;
}

.btn-outline-brand-blue {
    background-color: transparent !important;
    border-color: #2b5cff !important;
    color: #2b5cff !important;
}

.btn-brand-orange {
    background-color: #ff8a00 !important;
    border: none !important;
    color: #ffffff !important;
}

.btn-outline-brand-orange {
    background-color: transparent !important;
    border: none !important;
    color: #ff8a00 !important;
}

.btn-brand-white {
    background-color: #ffffff !important;
    border: none !important;
    color: #000000 !important;
}

.btn-outline-brand-white {
    background-color: transparent !important;
    border: none !important;
    color: #ffffff !important;
}

/* Mobile */
@media (max-width: 768px) {
    .flip-action-btn {
        min-width: 100% !important;
        margin-bottom: 0.25rem !important;
    }
    
    .flip-back-actions .d-flex {
        flex-direction: column !important;
    }
}

/* ========================================
   PAGINATION HOMEPAGE - STYLES PERSONNALISÉS
   ======================================== */

/* ========================================
   PAGINATION HOMEPAGE - STYLES DYNAMIQUES
   ======================================== */


/* ========================================
   PUBLICITÉS DANS LES VIGNETTES
   ======================================== */

/* Container publicitaire de base - même structure que vignette-item */
.vignette-ad {
    /* Les publicités utilisent la même structure que les vignettes normales */
    /* Pas de styles spéciaux nécessaires, elles héritent de vignette-item */
}

/* Vignette publicitaire 1x1 (taille normale) - Taille normale, même dimensions qu'une vignette standard */

/* Bannière publicitaire 2x1 (largeur double) - Pour customThumbs : utilise grid-column: span 2 (défini inline), pour thumbs Bootstrap : utilise col-6 ou col-12 (défini dans le HTML) */

/* Bannière publicitaire 1x2 (hauteur double) - Pour customThumbs : utilise grid-row: span 2 (défini inline), pour thumbs Bootstrap : hauteur double via CSS */

/* BANNIÈRES : OCCUPER TOUT L'ESPACE DE LA CARTE */
/* Faire en sorte que la carte et le product-thumb occupent 100% de la hauteur */
.vignette-ad .product-card {
    height: 100% !important;
    min-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
}

.vignette-ad .product-thumb {
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 100% !important;
    display: flex !important;
    align-items: stretch !important;
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Le lien dans product-thumb doit aussi occuper 100% */
.vignette-ad .product-thumb > a {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    align-items: stretch !important;
    text-decoration: none !important;
}

/* Image publicitaire - occupe TOUT l'espace disponible */
.vignette-ad .card-img-top {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
    flex: 1 1 auto !important;
}

/* Bannière 1x2 - hauteur double (mode Bootstrap uniquement) */
/* IMPORTANT: Empêcher le banner 1x2 d'étirer la row Bootstrap */
/* Solution: align-self: flex-start sur TOUTES les colonnes pour éviter l'étirement de la row */
.vignettes-container:not(.vignettes-container-custom) [class*="col-"].d-flex.align-items-stretch {
    align-self: flex-start !important;
}

/* Hauteur fixe pour le banner 1x2 uniquement (2x la hauteur moyenne d'une vignette + espacement).
   Mode Bootstrap seulement : en grille mini (vignettes-container-mini-custom) la carte figée à 607px laissait une bande
   vide en bas de sa case de 2 rangées, visible depuis que les banners portent le cadre des vignettes (2026-10-06). */
.vignettes-container:not(.vignettes-container-custom):not(.vignettes-container-mini-custom) .vignette-ad-1x2 .product-card {
    min-height: 607px !important;
    height: 607px !important;
}

/* Bannière 1x2 - vidéo (optimisation performance) */
.vignette-ad-1x2 video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
}

/* Mode rangée : la vidéo d'une bannière remplit sa case sans imposer sa hauteur à la rangée
   (une vidéo haute étirait toutes les vignettes voisines). */
.cfy-vignettes-row > .vignette-ad .product-thumb > a {
    position: relative !important;
    min-height: 10rem !important;
}

.cfy-vignettes-row > .vignette-ad .product-thumb > a > video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: cover !important;
}

/* Masquer tout contenu supplémentaire dans les bannières (card-body, title, etc.) */
.vignette-ad .card-body,
.vignette-ad .product-title,
.vignette-ad .product-description,
.vignette-ad .product-badges,
.vignette-ad .location-info,
.vignette-ad .vignette-checkbox {
    display: none !important;
}

/* DÉSACTIVATION DE TOUS LES EFFETS HOVER SUR LES BANNIÈRES PUBLICITAIRES */
/* Aucun effet de survol ne doit s'appliquer aux bannières publicitaires */
.vignette-ad:hover .card-img-top,
.vignette-ad .product-card:hover .card-img-top,
.vignette-ad .card-img-top:hover {
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
    scale: 1 !important;
    filter: none !important;
}

/* Masquer complètement les product-actions sur les bannières */
.vignette-ad .product-actions {
    display: none !important;
    opacity: 0 !important;
}

.vignette-ad:hover .product-actions,
.vignette-ad .product-card:hover .product-actions {
    display: none !important;
    opacity: 0 !important;
    transition: none !important;
}

/* Désactiver les effets sur location-info */
.vignette-ad:hover .location-info,
.vignette-ad .product-card:hover .location-info,
.vignette-ad .vignette-selectable:hover .location-info {
    opacity: 1 !important;
    transition: none !important;
    background-color: transparent !important;
}

/* Désactiver tous les effets de transformation et d'ombre sur la carte */
.vignette-ad:hover,
.vignette-ad .product-card:hover,
.vignette-ad .vignette-selectable:hover {
    transform: none !important;
    transition: none !important;
    box-shadow: none !important;
    filter: none !important;
}

/* Pour les publicités dans customThumbs (CSS Grid) - héritent de vignette-item */
.vignettes-container-custom .vignette-ad {
    /* Les publicités utilisent la même structure que les vignettes normales */
    /* grid-column: span 2 est défini inline pour les bannières 2x1 */
    /* grid-row: span 2 est défini inline pour les bannières 1x2 */
}

/* ========================================
   MINI CUSTOM THUMBS - MINI VIGNETTES
   ======================================== */

/* Conteneur mini vignettes - CSS Grid */
/* FALLBACK CRITIQUE: grid-template-columns doit toujours être défini
   sinon le conteneur grid collapse à hauteur 0 et casse l'affichage
   du footer et des sections suivantes (BUG-COMMERCIFY-001). */
.vignettes-container-mini-custom {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* FALLBACK CRITIQUE */
    grid-auto-flow: row dense; /* bannières 2x1/1x2 : combler les trous de fin de ligne */
    width: 100%;
    box-sizing: border-box;
}

.vignettes-container-mini-custom .vignette-item {
    display: flex;
    align-items: stretch;
    width: 100%;
    position: relative;
    overflow: visible;
    transition: transform 0.35s cubic-bezier(0.19, 1, 0.22, 1), box-shadow 0.35s cubic-bezier(0.19, 1, 0.22, 1);
    transform: translateZ(0);
    will-change: transform;
}

/* Bannières dans miniCustomThumbs */
.vignettes-container-mini-custom .vignette-ad {
    /* Les publicités utilisent la même structure que les vignettes normales */
    /* grid-column: span 2 est défini inline pour les bannières 2x1 */
    /* grid-row: span 2 est défini inline pour les bannières 1x2 */
}

/* Note: Pour miniCustomThumbs, grid-column: span 2 est défini inline dans le HTML */
/* Note: Pour miniCustomThumbs, grid-row: span 2 est défini inline dans le HTML pour 1x2 */

/* Media queries pour viewports desktop uniquement */
/* HD : 992-1919px */
@media (min-width: 992px) and (max-width: 1919px) {
    .vignettes-container-mini-custom {
        /* Styles spécifiques HD si nécessaire */
    }
}

/* FHD : 1920px-2559px */
@media (min-width: 1920px) and (max-width: 2559px) {
    .vignettes-container-mini-custom {
        /* Styles spécifiques FHD si nécessaire */
    }
}

/* 2K : 2560px-3839px */
@media (min-width: 2560px) and (max-width: 3839px) {
    .vignettes-container-mini-custom {
        /* Styles spécifiques 2K si nécessaire */
    }
}

/* 4K : 3840px-7679px */
@media (min-width: 3840px) and (max-width: 7679px) {
    .vignettes-container-mini-custom {
        /* Styles spécifiques 4K si nécessaire */
    }
}

/* 8K : 7680px+ */
@media (min-width: 7680px) {
    .vignettes-container-mini-custom {
        /* Styles spécifiques 8K si nécessaire */
    }
}

/* ========================================
   MINI CUSTOM THUMBS - RÉDUCTION 10% ET OVERLAY INTÉGRÉ
   Version finale V3 - Toutes vérifications effectuées
   ======================================== */

/* Réduction de 10% : Les dimensions sont dans les attributs HTML (288x162px) */
/* Les images gardent width: 100% pour remplir leur conteneur */
.vignettes-container-mini-custom .card-img-top {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;  /* Maintenir le ratio */
    display: block !important;
    margin-bottom: 0 !important;  /* Pas d'espace sous l'image */
    /* Les attributs width="288" height="162" dans le HTML font la réduction */
}

/* S'assurer que les liens d'image n'interfèrent pas avec l'overlay */
.vignettes-container-mini-custom .product-thumb > a {
    display: block !important;
    position: relative !important;
    margin-bottom: 0 !important;
}

/* Overlay positionné exactement en bas de l'image */
.vignettes-container-mini-custom .location-overlay {
    position: absolute !important;
    bottom: 0 !important; /* Utiliser bottom:0 au lieu de top:150px pour coller au bas de l'image */
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    padding: 0.27rem 0.45rem !important;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0%, rgba(16, 16, 16, 0.8) 100%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    z-index: 15 !important;
    display: block !important;
    pointer-events: none !important;
    /* Hauteur au contenu : le bandeau grandit vers le haut quand la ville passe sur 2 lignes */
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
    /* S'assurer que ça ne couvre que la zone nécessaire */
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Réactiver les clics sur les liens de l'overlay */
.vignettes-container-mini-custom .location-overlay a {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 16 !important;
    cursor: pointer !important; /* Curseur pointer pour indiquer la cliquabilité */
}

/* Réactiver les clics sur le bouton code postal (dropdown département / CP / villes) */
.vignettes-container-mini-custom .location-overlay .location-postalcode-trigger,
.vignettes-container-custom .location-overlay .location-postalcode-trigger {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 16 !important;
    cursor: pointer !important;
}

/* Curseur pointer pour tous les éléments de localisation cliquables */
.vignettes-container-mini-custom .location-flag-link,
.vignettes-container-mini-custom .location-country,
.vignettes-container-mini-custom .location-city {
    cursor: pointer !important;
}

/* Supprimer tous les paddings pour bordure collée */
.vignettes-container-mini-custom .product-card {
    padding: 0 !important;  /* Supprimer tous les paddings */
    padding-bottom: 0 !important;  /* Forcer padding-bottom à 0 */
    margin-bottom: 0.9rem !important;  /* 1rem * 0.9 */
    border-radius: 0 !important;  /* Supprimer les coins arrondis pour coller parfaitement */
}

/* S'assurer que l'image remplit complètement la carte */
.vignettes-container-mini-custom .card-img-top {
    border-radius: 0 !important;  /* Pas de coins arrondis sur l'image */
    margin: 0 !important;
    border: none !important;
    padding: 0 !important;  /* Pas de padding sur l'image */
}

/* Supprimer tout espace en bas de la vignette */
.vignettes-container-mini-custom .vignette-item {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.vignettes-container-mini-custom .vignette-item > * {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* S'assurer que product-thumb est en position relative pour l'overlay absolu */
.vignettes-container-mini-custom .product-thumb {
    position: relative !important;  /* Déjà présent dans HTML, mais on force */
    height: 162px !important; /* Fixer la hauteur pour miniCustomThumbs (ratio 16:9 de 288px de large) */
    margin: 0 !important;  /* Supprimer tous les margins */
    padding: 0 !important;  /* Supprimer tous les paddings */
    overflow: hidden !important;  /* Force l'overflow hidden */
    display: block !important;
    width: 100% !important;
    border-radius: 0 !important;  /* Pas de coins arrondis */
}

/* PHASE 2 : Styles YouTube supprimés - maintenant dans v1_commercify_vignettes_youtube.css */
/* Fix pour les vidéos YouTube dans miniCustomThumbs : forcer la hauteur du container interne également */
/*
.vignettes-container-mini-custom .youtube-video-container {
    height: 162px !important;
}

/* Overlay location en position absolue dans product-thumb */
/* z-index: 10 pour être au-dessus des overlays YouTube (z-index: 6) */
.vignettes-container-mini-custom .product-thumb .location-overlay,
.vignettes-container-mini-custom .location-overlay {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    margin-top: 0 !important;
    padding: 0.27rem 0.45rem !important;  /* 0.3rem 0.5rem * 0.9 */
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0%, rgba(16, 16, 16, 0.8) 100%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    z-index: 10 !important;  /* Au-dessus des overlays YouTube (z-index: 6) */
    /* Surcharger les styles globaux */
    display: block !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}


/* Réduction de 10% des éléments de l'overlay */
.vignettes-container-mini-custom .location-overlay-text {
    font-size: 0.648rem !important;  /* 0.72rem * 0.9 */
    gap: 0.315rem !important;  /* 0.35rem * 0.9 */
    color: white !important; /* Forcer le texte en blanc */
    font-weight: 600 !important; /* Texte plus gras pour la lisibilité */
}

/* S'assurer que seuls les textes de l'overlay sont visibles */
.vignettes-container-mini-custom .location-overlay-text,
.vignettes-container-mini-custom .location-overlay span,
.vignettes-container-mini-custom .location-overlay a {
    color: white !important;
    text-shadow: none !important;
    transition: all 0.2s ease !important; /* Transition fluide pour les effets hover */
}

/* Thème clair uniquement : vignettes mini custom colorisées (modération) — fond solide pour lisibilité du texte blanc */
/* Rouge pour score < 3 */
body.light-mode .vignettes-container-mini-custom .product-card[data-has-negative-feedback="1"][data-score="0"] .location-overlay .location-overlay-text,
body.light-mode .vignettes-container-mini-custom .product-card[data-has-negative-feedback="1"][data-score="1"] .location-overlay .location-overlay-text,
body.light-mode .vignettes-container-mini-custom .product-card[data-has-negative-feedback="1"][data-score="2"] .location-overlay .location-overlay-text {
    background-color: #FF0000 !important; /* Rouge solide */
    color: white !important;
    padding: 2px 4px !important;
    border-radius: 4px !important;
    display: inline-flex !important; /* Conserver le layout flex */
}

/* Orange pour score >= 3 */
body.light-mode .vignettes-container-mini-custom .product-card[data-has-negative-feedback="1"][data-score="3"] .location-overlay .location-overlay-text,
body.light-mode .vignettes-container-mini-custom .product-card[data-has-negative-feedback="1"][data-score="4"] .location-overlay .location-overlay-text,
body.light-mode .vignettes-container-mini-custom .product-card[data-has-negative-feedback="1"][data-score="5"] .location-overlay .location-overlay-text {
    background-color: #FF6600 !important; /* Orange solide */
    color: white !important;
    padding: 2px 4px !important;
    border-radius: 4px !important;
    display: inline-flex !important; /* Conserver le layout flex */
}

/* Effets de survol pour les éléments de localisation */
.vignettes-container-mini-custom .location-overlay a:hover {
    color: #FFD700 !important; /* Couleur dorée au survol */
    text-shadow: none !important;
    transform: scale(1.05) !important; /* Légère augmentation de taille */
}

/* Effet hover spécifique pour le drapeau */
.vignettes-container-mini-custom .location-flag-link:hover .location-flag {
    transform: scale(1.1) !important; /* Agrandissement du drapeau */
    filter: brightness(1.2) !important; /* Augmentation de la luminosité */
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.6) !important; /* Halo doré */
}

/* Effet hover pour le code pays */
.vignettes-container-mini-custom .location-country:hover {
    background: rgba(255, 215, 0, 0.2) !important; /* Fond doré transparent */
    border-radius: 0 !important;
    padding: 2px 4px !important;
}

/* Effet hover pour la ville */
.vignettes-container-mini-custom .location-city:hover {
    background: rgba(255, 215, 0, 0.2) !important; /* Fond doré transparent */
    border-radius: 0 !important;
    padding: 2px 4px !important;
}

.vignettes-container-mini-custom .location-flag-wrapper {
    width: 19.8px !important;  /* 22px * 0.9 */
    height: 19.8px !important;
    border-radius: 0 !important;
}

.vignettes-container-mini-custom .location-flag {
    width: 19.8px !important;
    height: 19.8px !important;
    border-radius: 0 !important;
}

/* Réduction de 10% des tailles de police dans le contenu après product-thumb */
.vignettes-container-mini-custom .product-tags,
.vignettes-container-mini-custom .bg-dark {
    font-size: 0.9em !important;
    padding: 0.45rem !important;  /* Réduction proportionnelle */
    padding-bottom: 0 !important;  /* Supprimer padding-bottom */
}

/* Supprimer tous les paddings-bottom des éléments internes */
.vignettes-container-mini-custom .product-title,
.vignettes-container-mini-custom .vignette-checkbox,
.vignettes-container-mini-custom .product-badges,
.vignettes-container-mini-custom .user-avatar {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.vignettes-container-mini-custom .badge {
    font-size: 0.9em !important;  /* Réduction des badges */
    padding: 0.27rem 0.45rem !important;  /* Réduction padding */
}

/* Isolation CSS pour performance */
.vignettes-container-mini-custom .vignette-item {
    contain: layout style paint !important;
}

/* Désactiver les animations sur mobile */
@media (max-width: 768px) {
    .vignettes-container-mini-custom .location-overlay {
        padding: 0.243rem 0.405rem !important;  /* 0.27rem 0.45rem * 0.9 */
        font-size: 0.5832rem !important;  /* 0.648rem * 0.9 */
    }
    
    .vignettes-container-mini-custom .location-flag-wrapper,
    .vignettes-container-mini-custom .location-flag {
        width: 17.82px !important;  /* 19.8px * 0.9 */
        height: 17.82px !important;
    }
}

/* Media queries pour maintenir la réduction de 10% sur tous les viewports */
@media (max-width: 1200px) {
    .vignettes-container-mini-custom .card-img-top {
        /* Les dimensions HTML (288x162px) s'adaptent automatiquement */
        max-width: 100% !important;
    }
}

/* Repositionner la flèche YouTube au milieu de l'image, bord gauche en LTR */
.vignettes-container-mini-custom .youtube-play-overlay {
    top: 50% !important;  /* Milieu de l'image en hauteur */
    left: 20px !important;  /* Bord gauche avec marge */
    right: auto !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;  /* Centrer verticalement */
    /* Garder les autres styles de la flèche YouTube */
}

/* En mode RTL, positionner sur le bord droit */
[dir="rtl"] .vignettes-container-mini-custom .youtube-play-overlay {
    left: auto !important;
    right: 20px !important;  /* Bord droit avec marge en RTL */
}

/* Tablettes : 768px-991px */
@media (min-width: 768px) and (max-width: 991px) {
    .vignettes-container-mini-custom {
        /* Styles spécifiques tablettes si nécessaire */
    }
    
    /* Espacement avec le footer pour tablettes (minicustomthumbs) */
    .editors-grid.vignettes-container-mini-custom {
        margin-bottom: 2rem !important;
        padding-bottom: 0 !important;
    }
    
    /* Cibler la row parente pour ajouter l'espacement */
    .row.editors-row-smartphone-minicustom {
        margin-bottom: 2rem !important;
    }
}

/* Espacement avec le footer pour smartphones verticaux (minicustomthumbs x1) */
@media (max-width: 575px) {
    .editors-grid.vignettes-container-mini-custom {
        margin-bottom: 2rem !important;
        padding-bottom: 0 !important;
    }
    
    /* Cibler la row parente pour ajouter l'espacement */
    .row.editors-row-smartphone-minicustom {
        margin-bottom: 2rem !important;
    }
}

/* Espacement pour smartphones paysage et viewports intermédiaires (576px-767px) */
@media (min-width: 576px) and (max-width: 767px) {
    .editors-grid.vignettes-container-mini-custom {
        margin-bottom: 2rem !important;
        padding-bottom: 0 !important;
    }
    
    /* Cibler la row parente pour ajouter l'espacement */
    .row.editors-row-smartphone-minicustom {
        margin-bottom: 2rem !important;
    }
}

/* Note: Pour customThumbs, grid-column: span 2 est défini inline dans le HTML */
/* Note: Pour customThumbs, grid-row: span 2 est défini inline dans le HTML pour 1x2 */
/* Note: Pour thumbs Bootstrap, les colonnes sont gérées par les classes col-* */

/* Correction débordement desktop - Supprimer gutter Bootstrap et ajuster marges */
@media (min-width: 1200px) {
    .cfy-vignettes-row {
        --bs-gutter-x: 0 !important;
        --bs-gutter-y: 0 !important;
        margin-left: -3.5px !important;
        margin-right: -3.5px !important;
    }
}

/* Masquage si le nombre POSSIBLE de vignettes sur la grille est <= 3 (détection JS) */
.vignettes-container[data-thumbs-auto-size="1"] .vignette-ad,
.vignettes-container[data-thumbs-auto-size="2"] .vignette-ad,
.vignettes-container[data-thumbs-auto-size="3"] .vignette-ad {
    display: none !important;
}

/* Masquage via classe ajoutée par JavaScript */
.vignettes-container.hide-ads .vignette-ad {
    display: none !important;
}

/* Avatar et date sur les bannières - positionnement absolu par-dessus l'image */
.vignette-ad .product-badges,
.vignette-ad ul.list-unstyled {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    pointer-events: none;
}

.vignette-ad .product-badges a,
.vignette-ad ul.list-unstyled a,
.vignette-ad .product-badges li,
.vignette-ad ul.list-unstyled li {
    pointer-events: auto;
}

/* S'assurer que l'avatar et la date sont visibles */
.vignette-ad .user-avatar img,
.vignette-ad .vignette-date .badge {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Optimisation pour les utilisateurs qui préfèrent moins de mouvement */
@media (prefers-reduced-motion: reduce) {
    .vignette-ad img {
        transition: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   État catalogue vide — Charte Commercify (light + dark)
   Boutons et contenu lisibles dans les deux thèmes
   ═══════════════════════════════════════════════════════════════════════════ */
.cfy-catalog-empty-state .cfy-catalog-empty-card {
    background: var(--cfy-bg-primary);
    border: 1px solid var(--cfy-border-color);
    box-shadow: var(--cfy-shadow-lg, 0 1rem 3rem rgba(43, 55, 72, 0.15));
    border-radius: 0 !important;
}
html.dark-mode .cfy-catalog-empty-state .cfy-catalog-empty-card,
.dark-mode .cfy-catalog-empty-state .cfy-catalog-empty-card {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.4);
}
.cfy-catalog-empty-state .cfy-catalog-empty-title {
    color: var(--cfy-text-primary) !important;
}
.cfy-catalog-empty-state .cfy-catalog-empty-desc {
    color: var(--cfy-text-muted) !important;
}
/* Icône SVG : document + plus (déposer une annonce), couleur Commercify */
.cfy-catalog-empty-state .cfy-catalog-empty-icon-wrap {
    display: inline-block;
    line-height: 0;
}
.cfy-catalog-empty-state .cfy-catalog-empty-icon {
    display: block;
    color: #FFD700 !important;
}
html.dark-mode .cfy-catalog-empty-state .cfy-catalog-empty-icon,
.dark-mode .cfy-catalog-empty-state .cfy-catalog-empty-icon {
    color: #FFD700 !important;
}

/* Boutons : même jaune #FFD700 que « Badge non connecté », coins droits, plus gros, typo renforcée */
.cfy-catalog-empty-state .cfy-btn {
    text-decoration: none;
    border-width: 2px;
    border-style: solid;
    font-weight: 700;
    font-size: 1.05rem;
    padding: 0.75rem 1.25rem;
    min-height: 3.25rem;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.cfy-catalog-empty-state .cfy-catalog-empty-btn-primary {
    background-color: #FFD700 !important;
    border-color: #FFD700 !important;
    color: #000000 !important;
}
.cfy-catalog-empty-state .cfy-catalog-empty-btn-primary:hover {
    background-color: #000000 !important;
    border-color: #FFD700 !important;
    color: #FFD700 !important;
}
.cfy-catalog-empty-state .cfy-catalog-empty-btn-outline {
    background-color: transparent !important;
    border-color: #1f2b3a !important;
    color: #1f2b3a !important;
    max-width: 20em;
}
.cfy-catalog-empty-state .cfy-catalog-empty-btn-outline-text {
    display: block;
    line-height: 1.35;
    white-space: normal;
}
.cfy-catalog-empty-state .cfy-catalog-empty-btn-outline:hover {
    background-color: #1f2b3a !important;
    color: #ffffff !important;
    border-color: #1f2b3a !important;
}
.cfy-catalog-empty-state .cfy-catalog-empty-btn-outline:hover .cfy-catalog-empty-btn-outline-text {
    color: inherit;
}
/* Dark mode : bouton outline (bordure + texte or) */
html.dark-mode .cfy-catalog-empty-state .cfy-catalog-empty-btn-outline,
.dark-mode .cfy-catalog-empty-state .cfy-catalog-empty-btn-outline {
    border-color: #FFD700 !important;
    color: #FFD700 !important;
}
html.dark-mode .cfy-catalog-empty-state .cfy-catalog-empty-btn-outline:hover,
.dark-mode .cfy-catalog-empty-state .cfy-catalog-empty-btn-outline:hover {
    background-color: #FFD700 !important;
    border-color: #FFD700 !important;
    color: #000000 !important;
}
/* Dark mode : primary = même jaune #FFD700 que bouton visiteur, texte noir */
html.dark-mode .cfy-catalog-empty-state .cfy-catalog-empty-btn-primary,
.dark-mode .cfy-catalog-empty-state .cfy-catalog-empty-btn-primary {
    background-color: #FFD700 !important;
    border-color: #FFD700 !important;
    color: #000000 !important;
}
html.dark-mode .cfy-catalog-empty-state .cfy-catalog-empty-btn-primary:hover,
.dark-mode .cfy-catalog-empty-state .cfy-catalog-empty-btn-primary:hover {
    background-color: #000000 !important;
    border-color: #FFD700 !important;
    color: #FFD700 !important;
}

.cfy-catalog-empty-state--publisher {
    margin-top: 1.5rem;
    margin-bottom: 2rem;
}
.cfy-catalog-empty-state .cfy-catalog-empty-card--publisher {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% -10%, rgba(255, 215, 0, .14) 0%, rgba(255, 215, 0, 0) 55%),
        var(--cfy-bg-primary);
}
/* Liseré charte en tête de carte (or → cyan) */
.cfy-catalog-empty-state .cfy-catalog-empty-card--publisher::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #FF8C00 0%, #FFD700 50%, #09c2de 100%);
}
.cfy-catalog-empty-state .cfy-catalog-empty-card--adr::before {
    background: linear-gradient(90deg, #FFD700 0%, #09c2de 100%);
}
.cfy-catalog-empty-state .cfy-catalog-empty-card--adp::before {
    background: linear-gradient(90deg, #09c2de 0%, #6f42c1 100%);
}
/* Halo : disque dégradé + anneau pulsé autour de l'icône du catalogue */
.cfy-publisher-empty-halo {
    position: relative;
    width: 112px;
    height: 112px;
    margin: 0 auto 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cfy-publisher-empty-halo-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px dashed rgba(255, 215, 0, .55);
    animation: cfyPublisherEmptySpin 18s linear infinite;
}
.cfy-publisher-empty-halo-disc {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1a1a;
    background: linear-gradient(135deg, #FFD700 0%, #FF8C00 100%);
    box-shadow: 0 10px 30px rgba(255, 140, 0, .35);
    animation: cfyPublisherEmptyFloat 4s ease-in-out infinite;
}
.cfy-catalog-empty-card--adr .cfy-publisher-empty-halo-disc {
    background: linear-gradient(135deg, #FFD700 0%, #09c2de 100%);
    box-shadow: 0 10px 30px rgba(9, 194, 222, .3);
}
.cfy-catalog-empty-card--adp .cfy-publisher-empty-halo-disc {
    color: #ffffff;
    background: linear-gradient(135deg, #09c2de 0%, #6f42c1 100%);
    box-shadow: 0 10px 30px rgba(111, 66, 193, .35);
}
.cfy-catalog-empty-card--adp .cfy-publisher-empty-halo-ring {
    border-color: rgba(9, 194, 222, .55);
}
.cfy-publisher-empty-icon {
    display: block;
}
@keyframes cfyPublisherEmptySpin {
    to { transform: rotate(360deg); }
}
@keyframes cfyPublisherEmptyFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
    .cfy-publisher-empty-halo-ring,
    .cfy-publisher-empty-halo-disc {
        animation: none;
    }
}
.cfy-publisher-empty-slug {
    display: inline-block;
    align-self: center;
    margin-bottom: .75rem;
    padding: .2rem .75rem;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .5px;
    color: var(--cfy-text-muted);
    border: 1px solid var(--cfy-border-color);
    border-radius: 999px;
    word-break: break-all;
}
.cfy-catalog-empty-state--publisher .cfy-catalog-empty-desc {
    max-width: 32rem;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.02rem;
    line-height: 1.55;
}
.cfy-publisher-empty-filter-note {
    display: inline-block;
    align-self: center;
    margin: 0 auto 1.5rem;
    padding: .45rem .9rem;
    font-size: .9rem;
    color: var(--cfy-text-primary);
    background: rgba(255, 215, 0, .12);
    border-left: 3px solid #FFD700;
}
@media (max-width: 575.98px) {
    .cfy-catalog-empty-state .cfy-catalog-empty-card--publisher {
        padding-top: 2.25rem !important;
    }
    .cfy-catalog-empty-state--publisher .cfy-btn {
        width: 100%;
        max-width: none;
    }
    .cfy-catalog-empty-state--publisher form {
        width: 100%;
    }
}

.cfy-catalog-retry-panel {
    background: linear-gradient(160deg, #141414 0%, #0a0a0a 55%, #000000 100%);
    border: 1px solid rgba(255, 215, 0, .22);
    border-radius: 0;
    padding: 2.5rem 1.5rem;
}
.cfy-catalog-retry-panel .cfy-catalog-empty-title {
    color: #ffffff;
}
.cfy-catalog-retry-title {
    color: #FFD700;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}
.cfy-catalog-retry-ring-wrap {
    position: relative;
    width: 110px;
    height: 110px;
    margin: 0 auto 1.25rem;
}
.cfy-catalog-retry-ring {
    width: 110px;
    height: 110px;
    transform: rotate(-90deg);
}
.cfy-catalog-retry-ring-track {
    fill: none;
    stroke: #241a05;
    stroke-width: 6;
}
.cfy-catalog-retry-ring-progress {
    fill: none;
    stroke: url(#cfyCatalogRetryRingGradient);
    stroke-width: 6;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s linear;
}
.cfy-catalog-retry-ring-number {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: 700;
    color: #ffffff;
}
.cfy-catalog-retry-caption {
    color: #a8a8ad;
    font-size: .8rem;
    margin-bottom: 1.5rem;
}
.cfy-catalog-retry-skip {
    display: inline-block;
    border: 2px solid #FFD700;
    color: #FFD700;
    background: transparent;
    padding: .6rem 1.4rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 0;
    transition: background .25s, color .25s, border-color .25s;
}
.cfy-catalog-retry-skip:hover {
    background: linear-gradient(135deg, #FF8C00 0%, #FFA500 50%, #FFB347 100%);
    border-color: #FFD700;
    color: #000000;
}
@media (prefers-reduced-motion: reduce) {
    .cfy-catalog-retry-ring-progress {
        transition: none;
    }
}

/* ========================================
   VIGNETTES ÉDITEURS LIÉS AU CATALOGUE
   - Bouton « Voir toutes les annonces » angles droits
   - Layout compact (avatar 48px, horizontal)
   ======================================== */
.cfy-btn-catalogue-public {
    border-radius: 0 !important;
}
.cfy-editor-card .card-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.cfy-editor-card .card-inner .team {
    min-height: 0;
}
.cfy-editor-card .card-inner .team-view {
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ZONE « LES ÉDITEURS LIÉS À CE CATALOGUE » - DASHLIGHT COMPATIBLE
   Variables CSS isolées : thème clair (défaut) et dark mode (body.dark-mode).
   Aucun effet de bord : tous les sélecteurs sont sous .cfy-editors-linked-to-catalog
   En White Mode comme en Dark Mode : la section est toujours rendue en ton Dark (bannière + vignettes).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Section : bannière (titre + liens) avec fond sombre ; zone vignettes sans fond (transparent) */
.cfy-editors-linked-to-catalog {
    --cfy-elc-banner-bg: #212529;
    --cfy-elc-banner-title: #ffffff;
    --cfy-elc-card-bg: linear-gradient(to bottom, #333 0%, #111 100%);
    --cfy-elc-card-border: #444;
    --cfy-elc-card-shadow: none;
    --cfy-elc-card-title: #fff;
    --cfy-elc-card-subtext: #aaa;
    --cfy-elc-card-details: #ccc;
    --cfy-elc-card-count: #ffffff;
    --cfy-elc-link: #fff;
    --cfy-elc-link-hover: #e0e0e0;
    --cfy-elc-avatar-wrap-bg: linear-gradient(180deg, #333 0%, #1a1a1a 100%);
    --cfy-elc-dropdown-trigger: #ffffff;
    --cfy-elc-status-dot: #dc3545;
    --cfy-elc-btn-bg: #0d0d0d;
    --cfy-elc-btn-border: #ffffff;
    --cfy-elc-btn-border-style: dashed;
    --cfy-elc-btn-text: #ffffff;
    --cfy-elc-btn-hover-bg: #ffffff;
    --cfy-elc-btn-hover-border: #ffffff;
    --cfy-elc-btn-hover-text: #000;
    /* Pleine largeur comme .catalog-title-row (tpl_top) : !important pour éviter qu’un parent flex/row écrase le breakout */
    margin-inline: calc(-1 * var(--nk-content-padding, 0px)) !important;
    width: calc(100% + 2 * var(--nk-content-padding, 0px)) !important;
    max-width: none !important;
    box-sizing: border-box;
    /* Pas de background sur le conteneur global : seule la bannière (titre + liens) a un fond ; zone vignettes sans BG */
    padding-bottom: 1rem !important;
}

/* Ghost card (carte éditeurs anonymes) — fond légèrement distinct, toujours en ton dark */
.cfy-editors-linked-to-catalog .cfy-editor-card-ghost {
    --cfy-elc-card-bg: linear-gradient(145deg, rgba(255, 166, 0, 0.2) 0%, rgba(255, 128, 0, 0.15) 42%, rgba(18, 18, 18, 0.96) 100%);
    --cfy-elc-card-border: rgba(255, 166, 0, 0.52);
    --cfy-elc-link: #ffd587;
    --cfy-elc-link-hover: #ffe8b8;
    --cfy-elc-card-count: #ffe7bf;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Variante visuelle premium (hors mode performance) sans animation GPU coûteuse */
body:not(.performance-mode) .cfy-editors-linked-to-catalog .cfy-editor-card-ghost::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255, 174, 0, 0.18) 0%, rgba(255, 132, 0, 0.1) 34%, rgba(255, 255, 255, 0.04) 100%);
    pointer-events: none;
    z-index: 0;
}
body:not(.performance-mode) .cfy-editors-linked-to-catalog .cfy-editor-card-ghost .card-inner {
    position: relative;
    z-index: 1;
}
body:not(.performance-mode) .cfy-editors-linked-to-catalog .cfy-editor-card-ghost {
    box-shadow: 0 6px 18px rgba(255, 128, 0, 0.16) !important;
}

/* Layout compact : hauteur ≈ avatar + padding, horizontal, sans toucher à la grille */
.cfy-editors-linked-to-catalog .cfy-editor-card .card-inner,
.cfy-editors-linked-to-catalog .cfy-editor-card-ghost .card-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 6px 10px !important;
}
.cfy-editors-linked-to-catalog .cfy-editor-card .team,
.cfy-editors-linked-to-catalog .cfy-editor-card-ghost .team {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex: 1 !important;
    min-width: 0 !important;
    min-height: 0 !important;
}
.cfy-editors-linked-to-catalog .cfy-editor-card .user-card.user-card-s2,
.cfy-editors-linked-to-catalog .cfy-editor-card-ghost .user-card.user-card-s2 {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex: 1 !important;
    min-width: 0 !important;
}
.cfy-editors-linked-to-catalog .cfy-editor-card__avatar--compact,
.cfy-editors-linked-to-catalog .cfy-editor-card-ghost .cfy-editor-card__avatar--compact {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    flex-shrink: 0 !important;
}
.cfy-editors-linked-to-catalog .cfy-editor-card .user-info,
.cfy-editors-linked-to-catalog .cfy-editor-card-ghost .user-info {
    flex: 1 !important;
    min-width: 0 !important;
    padding-left: 8px !important;
}
[dir="rtl"] .cfy-editors-linked-to-catalog .cfy-editor-card .user-info,
[dir="rtl"] .cfy-editors-linked-to-catalog .cfy-editor-card-ghost .user-info {
    padding-left: 0 !important;
    padding-right: 8px !important;
}
.cfy-editors-linked-to-catalog .cfy-editor-card .team-view,
.cfy-editors-linked-to-catalog .cfy-editor-card-ghost .team-view {
    flex-shrink: 0 !important;
    margin-left: 6px !important;
}
[dir="rtl"] .cfy-editors-linked-to-catalog .cfy-editor-card .team-view,
[dir="rtl"] .cfy-editors-linked-to-catalog .cfy-editor-card-ghost .team-view {
    margin-left: 0 !important;
    margin-right: 6px !important;
}
.cfy-editors-linked-to-catalog .cfy-editor-card .cfy-editor-card__title,
.cfy-editors-linked-to-catalog .cfy-editor-card-ghost .cfy-editor-card__title {
    font-size: 0.95rem !important;
    margin: 0 !important;
    line-height: 1.25 !important;
}
.cfy-editors-linked-to-catalog .cfy-editor-card .cfy-editor-card__count,
.cfy-editors-linked-to-catalog .cfy-editor-card-ghost .cfy-editor-card__count {
    display: block !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    margin-top: 2px !important;
}
.cfy-editors-linked-to-catalog .cfy-editor-card .cfy-btn-catalogue-public {
    padding: 4px 10px !important;
    font-size: 0.8rem !important;
    white-space: nowrap !important;
}
.cfy-editors-linked-to-catalog .cfy-editor-card .team-status {
    flex-shrink: 0 !important;
    margin-right: 6px !important;
    padding: 2px 6px !important;
    font-size: 0.7rem !important;
}
[dir="rtl"] .cfy-editors-linked-to-catalog .cfy-editor-card .team-status {
    margin-right: 0 !important;
    margin-left: 6px !important;
}
.cfy-editors-linked-to-catalog .cfy-editor-card-ghost .team-status {
    margin-right: 6px !important;
}
[dir="rtl"] .cfy-editors-linked-to-catalog .cfy-editor-card-ghost .team-status {
    margin-right: 0 !important;
    margin-left: 6px !important;
}

/* Bannière : même formule que .cfy-homepage-discovery .cfy-home-block__banner */
.cfy-editors-linked-to-catalog .cfy-editors-linked-banner {
    background: var(--cfy-elc-banner-bg) !important;
    padding: 18px calc(20px + var(--nk-content-padding, 0px)) !important;
    text-align: start !important;
}

.cfy-editors-linked-to-catalog .cfy-editors-linked-banner h1.cfy-editors-linked-title {
    color: var(--cfy-elc-banner-title) !important;
    /* Titre plus lisible : plage 1.15rem–1.5rem */
    font-size: clamp(1.15rem, 3vw, 1.5rem) !important;
    text-transform: uppercase !important;
}
.cfy-editors-linked-to-catalog .cfy-editors-linked-banner .cfy-editors-banner-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-top: 0.35rem;
}
.cfy-editors-linked-to-catalog .cfy-editors-linked-banner .cfy-editors-banner-links .cfy-editors-search-link {
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.cfy-editors-linked-to-catalog .cfy-editors-linked-banner .cfy-editors-banner-links .cfy-editors-link-icon-wrap {
    flex-shrink: 0;
    line-height: 0;
}
.cfy-editors-linked-to-catalog .cfy-editors-linked-banner .cfy-editors-banner-links .cfy-editors-link-icon {
    vertical-align: middle;
}
.cfy-editors-linked-to-catalog .cfy-editors-linked-banner .cfy-editors-search-link-below-title {
    color: #8b929a;
    display: inline-block;
}
.cfy-editors-linked-to-catalog .cfy-editors-linked-banner .cfy-editors-search-link-rechercher {
    color: #b0b5bc;
}
.cfy-editors-linked-to-catalog .cfy-editors-linked-banner .cfy-editors-search-link-rechercher:hover {
    color: #c5cad1;
    text-decoration: underline;
}
.cfy-editors-linked-to-catalog .cfy-editors-linked-banner .cfy-editors-search-link-rechercher:focus-visible {
    outline: 2px solid #b0b5bc;
    outline-offset: 2px;
}
.cfy-editors-linked-to-catalog .cfy-editors-linked-banner .cfy-editors-search-link-below-title:hover {
    color: #a8adb4;
    text-decoration: underline;
}
.cfy-editors-linked-to-catalog .cfy-editors-linked-banner .cfy-editors-search-link-below-title:focus-visible {
    outline: 2px solid #8b929a;
    outline-offset: 2px;
}

/* Espacement titre → grille éditeurs = 10px (aligné sur .cfy-vignettes-pre-banner → grille ADS) */
.cfy-editors-linked-to-catalog .vignettes-container.editors-grid.cfy-editors-grid-after-banner {
    margin-top: 10px !important;
}
.cfy-editors-linked-to-catalog .row.editors-grid.cfy-editors-grid-after-banner {
    padding-top: 10px !important;
    margin-top: 0 !important;
}

/* Plusieurs lignes : éviter que la première ligne s'étire (avatars en géant, texte absent) */
.cfy-editors-linked-to-catalog .vignettes-container.editors-grid.cfy-editors-grid-after-banner {
    grid-auto-rows: minmax(min-content, auto) !important;
    align-items: start !important;
}
.cfy-editors-linked-to-catalog .vignettes-container.editors-grid .vignette-item {
    align-self: start !important;
}
.cfy-editors-linked-to-catalog .vignettes-container.editors-grid .card-inner.cfy-editor-card__inner-simple {
    max-height: 140px !important;
}
.cfy-editors-linked-to-catalog .vignettes-container.editors-grid .card-inner.cfy-editor-card__inner-simple .cfy-editor-card__avatar-wrap {
    max-height: 100% !important;
}

/* Desktop (menu latéral) : même retrait horizontal que la zone « petites annonces » (.cfy-vignettes-pre-banner → --cfy-header-edge-offset) */
@media (min-width: 992px) {
    .cfy-editors-linked-to-catalog .cfy-editors-linked-banner {
        padding-block-start: 18px !important;
        padding-block-end: 18px !important;
        padding-inline-start: var(--cfy-header-edge-offset, 10px) !important;
        padding-inline-end: var(--cfy-header-edge-offset, 10px) !important;
    }

    .cfy-editors-linked-to-catalog .vignettes-container.editors-grid.cfy-editors-grid-after-banner,
    .cfy-editors-linked-to-catalog .row.editors-grid.cfy-editors-grid-after-banner {
        padding-inline-start: var(--cfy-header-edge-offset, 10px) !important;
        padding-inline-end: var(--cfy-header-edge-offset, 10px) !important;
        box-sizing: border-box !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGNE PRÉ-VIGNETTES (titre + sélecteur catalogue avant la zone des vignettes)
   Thème Dashlight aligné sur « Les éditeurs liés à ce catalogue ».
   LTR = titre au bord gauche, sélecteur au bord droit. RTL = inverse.
   Titre : typographie strictement identique à .cfy-editors-linked-title.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Variables thème — mode clair (même palette que .cfy-editors-linked-to-catalog) */
.cfy-vignettes-pre-banner {
    --cfy-vpre-banner-bg: #1a1a1a;
    --cfy-vpre-title: #FFD700;
    --cfy-vpre-select-bg: #222222;
    --cfy-vpre-select-border: #333333;
    --cfy-vpre-select-text: #ffffff;
    --cfy-vpre-select-focus-border: #FFD700;
    /* Charte boutons catalogue (noir/or alignée login/dashboard) */
    --cfy-catalog-action-bg: #000000;
    --cfy-catalog-action-fg: #FFD700;
    --cfy-catalog-action-border: #FFD700;
    --cfy-catalog-action-hover-bg: #6b5a4a;
    --cfy-catalog-action-hover-fg: #FFD700;
    --cfy-catalog-action-active-bg: #000000;
    --cfy-catalog-action-active-fg: #FFD700;
    --cfy-catalog-action-disabled-bg: #1a1a1a;
    --cfy-catalog-action-disabled-fg: #666666;
    --cfy-catalog-action-disabled-border: #555555;
    /* Taille fixe (pas de % ni de calc()) : les 3 icônes de vue et le bouton options vivent dans deux
       conteneurs flex distincts dont la largeur "auto" est indéterminée pour le calcul d'un %, ce qui
       faisait résoudre calc(100% - 4px) différemment selon le groupe et désalignait les boutons. */
    --cfy-catalog-action-size: 34px;
    --cfy-catalog-action-gap: 10px;
    --cfy-catalog-action-edge-offset: var(--cfy-header-edge-offset, 10px);
    --cfy-vpre-inline-start: var(--cfy-header-edge-offset, 10px);
    --cfy-vpre-inline-end: var(--cfy-header-edge-offset, 10px);
    /* Sélecteur catalogue uniquement — style Menu Jump (bordures discrètes, fondu cyan) */
    --cfy-catalog-selector-bg: rgba(9, 194, 222, 0.1);
    --cfy-catalog-selector-border: rgba(9, 194, 222, 0.3);
    --cfy-catalog-selector-fg: #09c2de;
    --cfy-catalog-selector-hover-bg: rgba(9, 194, 222, 0.2);
    --cfy-catalog-selector-hover-border: #09c2de;
    --cfy-catalog-selector-focus-ring: rgba(9, 194, 222, 0.25);
    /* Dropdown (options uniquement) — contraste fort pour lisibilité */
    --cfy-catalog-selector-option-bg: #252525;
    --cfy-catalog-selector-option-fg: #ffffff;
}

/* Mode sombre */
body.dark-mode .cfy-vignettes-pre-banner,
html.dark-mode .cfy-vignettes-pre-banner,
body[data-bs-theme='dark'] .cfy-vignettes-pre-banner {
    --cfy-vpre-banner-bg: #212529;
    --cfy-vpre-title: #ffffff;
    --cfy-vpre-select-bg: linear-gradient(to bottom, #333 0%, #111 100%);
    --cfy-vpre-select-border: #444;
    --cfy-vpre-select-text: #ffffff;
    --cfy-vpre-select-focus-border: #ffffff;
    /* Boutons catalogue dark : même charte noir/or */
    --cfy-catalog-action-bg: #000000;
    --cfy-catalog-action-fg: #FFD700;
    --cfy-catalog-action-border: #FFD700;
    --cfy-catalog-action-hover-bg: #6b5a4a;
    --cfy-catalog-action-hover-fg: #FFD700;
    --cfy-catalog-action-disabled-bg: #212529;
    --cfy-catalog-action-disabled-fg: #666666;
    --cfy-catalog-action-disabled-border: #555555;
    /* Sélecteur catalogue — style Jump en mode sombre */
    --cfy-catalog-selector-bg: rgba(9, 194, 222, 0.12);
    --cfy-catalog-selector-border: rgba(9, 194, 222, 0.35);
    --cfy-catalog-selector-fg: #0dd9ff;
    --cfy-catalog-selector-hover-bg: rgba(9, 194, 222, 0.22);
    --cfy-catalog-selector-hover-border: #0dd9ff;
    --cfy-catalog-selector-focus-ring: rgba(9, 194, 222, 0.3);
    /* Dropdown (options uniquement) — contraste fort pour lisibilité */
    --cfy-catalog-selector-option-bg: #1a1d21;
    --cfy-catalog-selector-option-fg: #ffffff;
}

.cfy-vignettes-pre-banner {
    background: var(--cfy-vpre-banner-bg) !important;
    padding-block-start: 12px !important;
    padding-block-end: 7px !important;
    padding-inline-start: var(--cfy-vpre-inline-start) !important;
    padding-inline-end: var(--cfy-vpre-inline-end) !important;
    margin-top: 0;
    margin-bottom: 0;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    display: flex;
    align-items: center;
}
.cfy-vignettes-pre-banner > .cfy-vignettes-pre-row {
    width: 100%;
    flex: 1 1 100%;
}

/* Desktop only : espace entre la barre pré-vignettes et la grille */
@media (min-width: 992px) {
    .cfy-vignettes-pre-banner {
        margin-bottom: 10px;
    }
}

/* Smartphone uniquement : densifier barre pré-vignettes + pleine largeur sélecteur */
@media (max-width: 768px) {
    .cfy-vignettes-pre-banner {
        padding-block-start: 6px !important;
        padding-block-end: 4px !important;
        padding-inline-start: 8px !important;
        padding-inline-end: 8px !important;
        margin-bottom: 0 !important;
    }
    .cfy-vignettes-pre-banner .cfy-catalog-title-actions,
    .cfy-vignettes-pre-banner .cfy-vignettes-pre-col-view-icons {
        display: none !important;
    }
    .cfy-vignettes-pre-banner .cfy-vignettes-pre-col-select {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }
    .cfy-vignettes-pre-banner .vignettes-pagination-catalog-select-wrap {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    .cfy-vignettes-pre-banner .vignettes-pagination-catalog-select-wrap .vignettes-pagination-catalog-select {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
}

/* Alignement du sélecteur catalogue : même bord que le logo (padding barre = 10px) */
.cfy-vignettes-pre-banner .cfy-vignettes-pre-col-select {
    margin-inline-start: 0;
    margin-inline-end: 0;
}

.cfy-vignettes-pre-row {
    padding-top: 0;
    padding-bottom: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Titre : strictement la même typo que « Les éditeurs liés à ce catalogue » (couleur via variable locale) */
.cfy-vignettes-pre-banner .cfy-vignettes-pre-title.cfy-editors-linked-title {
    color: var(--cfy-vpre-title) !important;
    font-size: clamp(1.15rem, 3vw, 1.5rem) !important;
    text-transform: uppercase !important;
}

/* Icône SVG avant le titre du catalogue (H1) */
.cfy-catalog-title-icon-wrap {
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    line-height: 1;
}
.cfy-catalog-title-icon-wrap .cfy-catalog-title-icon {
    vertical-align: middle;
}

/* Wrapper sélecteur catalogue pré-vignettes : style Menu Jump (bordures discrètes, fondu cyan) */
.cfy-vignettes-pre-banner .vignettes-pagination-catalog-select-wrap {
    display: inline-flex !important;
    align-items: center;
    justify-content: stretch;
    gap: 0;
    position: relative;
    contain: layout style paint;
    min-height: 2.25rem;
    background: var(--cfy-catalog-selector-bg) !important;
    border: 1px solid var(--cfy-catalog-selector-border);
    border-radius: 0 !important;
    padding-left: 0.35rem;
    padding-right: 0.35rem;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.cfy-vignettes-pre-banner .vignettes-pagination-catalog-select-wrap:hover {
    background: var(--cfy-catalog-selector-hover-bg) !important;
    border-color: var(--cfy-catalog-selector-hover-border) !important;
}
html:not(.dark-mode) .cfy-vignettes-pre-banner .vignettes-pagination-catalog-select-wrap,
body:not(.dark-mode) .cfy-vignettes-pre-banner .vignettes-pagination-catalog-select-wrap {
    background: var(--cfy-catalog-selector-bg) !important;
    border-color: var(--cfy-catalog-selector-border) !important;
}
body.dark-mode .cfy-vignettes-pre-banner .vignettes-pagination-catalog-select-wrap,
html.dark-mode .cfy-vignettes-pre-banner .vignettes-pagination-catalog-select-wrap {
    background: var(--cfy-catalog-selector-bg) !important;
    border-color: var(--cfy-catalog-selector-border) !important;
}
.cfy-vignettes-pre-banner .vignettes-pagination-catalog-select-wrap:focus-within {
    border-color: var(--cfy-catalog-selector-hover-border) !important;
    box-shadow: 0 0 0 0.2rem var(--cfy-catalog-selector-focus-ring);
}
body.dark-mode .cfy-vignettes-pre-banner .vignettes-pagination-catalog-select-wrap:focus-within,
html.dark-mode .cfy-vignettes-pre-banner .vignettes-pagination-catalog-select-wrap:focus-within {
    border-color: var(--cfy-catalog-selector-hover-border) !important;
    box-shadow: 0 0 0 0.2rem var(--cfy-catalog-selector-focus-ring);
}

.cfy-vignettes-pre-banner .cfy-catalog-select-icon {
    position: absolute;
    left: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    min-width: 22px;
    height: 22px;
    pointer-events: none;
    color: var(--cfy-catalog-selector-fg);
    /* pas de transition/will-change : pas de coût GPU continu */
}
.cfy-vignettes-pre-banner .cfy-catalog-select-icon .cfy-catalog-select-icon-svg {
    display: block;
    flex-shrink: 0;
    color: inherit;
    fill: currentColor;
    stroke: currentColor;
    vertical-align: middle;
}
.cfy-vignettes-pre-banner .cfy-catalog-select-arrow {
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    color: var(--cfy-catalog-selector-fg);
    /* pas de transition/will-change : pas de coût GPU continu */
}
.cfy-vignettes-pre-banner .cfy-catalog-select-arrow .cfy-catalog-select-arrow-svg {
    display: block;
    flex-shrink: 0;
    color: inherit;
    fill: currentColor;
    stroke: currentColor;
    vertical-align: middle;
}

/* RTL : inverser l’ordre icône / flèche dans le sélecteur catalogue */
html[dir="rtl"] .cfy-vignettes-pre-banner .vignettes-pagination-catalog-select-wrap {
    flex-direction: row-reverse;
}
html[dir="rtl"] .cfy-vignettes-pre-banner .cfy-catalog-select-icon {
    left: auto;
    right: 0.35rem;
}
html[dir="rtl"] .cfy-vignettes-pre-banner .cfy-catalog-select-arrow {
    right: auto;
    left: 0.35rem;
}

/* Select DEDANS le wrapper : fond transparent, pas de bordure (la boîte = le wrapper), étendu sous icône et flèche — style Jump */
.cfy-vignettes-pre-banner .vignettes-pagination-catalog-select-wrap .vignettes-pagination-catalog-select {
    flex: 1;
    min-width: 0;
    align-self: stretch;
    min-height: 100%;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
    padding-left: 1.5rem !important;
    padding-right: 0.25rem !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    color: var(--cfy-catalog-selector-fg) !important;
    line-height: 1.25 !important;
}
html[dir="rtl"] .cfy-vignettes-pre-banner .vignettes-pagination-catalog-select-wrap .vignettes-pagination-catalog-select {
    padding-left: 0.25rem !important;
    padding-right: 1.5rem !important;
}
.cfy-vignettes-pre-banner .vignettes-pagination-catalog-select-wrap .vignettes-pagination-catalog-select:focus {
    box-shadow: none !important;
}
.cfy-vignettes-pre-banner .vignettes-pagination-catalog-select {
    background: var(--cfy-catalog-selector-bg) !important;
    border-color: var(--cfy-catalog-selector-border) !important;
    color: var(--cfy-catalog-selector-fg) !important;
    width: auto !important;
    min-width: 3em !important;
    max-width: none !important;
    padding-left: 0.35rem !important;
    padding-right: 1.15rem !important;
    border-radius: 0 !important;
}

/* Light + dark : style Jump pour le sélecteur catalogue uniquement */
html:not(.dark-mode) .cfy-vignettes-pre-banner .vignettes-pagination-catalog-select,
body:not(.dark-mode) .cfy-vignettes-pre-banner .vignettes-pagination-catalog-select {
    background: var(--cfy-catalog-selector-bg) !important;
    border-color: var(--cfy-catalog-selector-border) !important;
    color: var(--cfy-catalog-selector-fg) !important;
}

html:not(.dark-mode) .cfy-vignettes-pre-banner .vignettes-pagination-catalog-select option,
body:not(.dark-mode) .cfy-vignettes-pre-banner .vignettes-pagination-catalog-select option {
    background: var(--cfy-catalog-selector-option-bg) !important;
    color: var(--cfy-catalog-selector-option-fg) !important;
}

body.dark-mode .cfy-vignettes-pre-banner .vignettes-pagination-catalog-select,
html.dark-mode .cfy-vignettes-pre-banner .vignettes-pagination-catalog-select {
    background: var(--cfy-catalog-selector-bg) !important;
    border-color: var(--cfy-catalog-selector-border) !important;
    color: var(--cfy-catalog-selector-fg) !important;
}

body.dark-mode .cfy-vignettes-pre-banner .vignettes-pagination-catalog-select option,
html.dark-mode .cfy-vignettes-pre-banner .vignettes-pagination-catalog-select option,
body[data-bs-theme='dark'] .cfy-vignettes-pre-banner .vignettes-pagination-catalog-select option {
    background: var(--cfy-catalog-selector-option-bg) !important;
    color: var(--cfy-catalog-selector-option-fg) !important;
}

.cfy-vignettes-pre-banner .vignettes-pagination-catalog-select:focus {
    border-color: var(--cfy-catalog-selector-hover-border) !important;
    box-shadow: 0 0 0 0.2rem var(--cfy-catalog-selector-focus-ring);
}

body.dark-mode .cfy-vignettes-pre-banner .vignettes-pagination-catalog-select:focus,
html.dark-mode .cfy-vignettes-pre-banner .vignettes-pagination-catalog-select:focus {
    border-color: var(--cfy-catalog-selector-hover-border) !important;
    box-shadow: 0 0 0 0.2rem var(--cfy-catalog-selector-focus-ring);
}

/* LTR : titre au bord gauche, sélecteur au bord droit */
.cfy-vignettes-pre-col-title {
    text-align: start !important;
}

.cfy-vignettes-pre-col-select {
    text-align: end !important;
}

/* Icônes mode affichage — groupe de boutons catalogue (charte noir/or) */
/* Alignement bord écran : comme le bouton login (référence header), bordure à bordure */
.cfy-catalog-title-actions {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: var(--cfy-catalog-action-gap);
    gap: var(--cfy-catalog-action-gap);
    padding-inline-end: 0;
    max-width: 100%;
}

.cfy-vignettes-pre-col-view-icons {
    color: #e8e8e8;
    /* Garde-fou débordement (2026-09-23) : autorise la colonne à rétrécir sous sa largeur de
       contenu naturelle plutôt que de pousser toute la ligne (sélecteur + icônes) plus large que
       le viewport -- comportement flex par défaut (min-width:auto) sinon. */
    min-width: 0;
    max-width: 100%;
}

/* Zone titre catalogue (home) : colonne boutons pleine hauteur */
.cfy-vignettes-pre-banner .cfy-vignettes-pre-col-view-icons {
    align-self: stretch;
    padding-top: 2px;
    padding-bottom: 2px;
}

/* Boutons catalogue : charte noir/or (icône seule, format compact) */
.cfy-vignettes-pre-banner .cfy-catalog-title-actions .cfy-catalog-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--cfy-catalog-action-size);
    height: var(--cfy-catalog-action-size);
    min-width: 28px;
    min-height: 28px;
    padding: 0;
    flex-shrink: 0;
    border: 1px solid var(--cfy-catalog-action-border);
    border-radius: 0;
    background: var(--cfy-catalog-action-bg);
    color: var(--cfy-catalog-action-fg);
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}
/* Centrage des SVG dans tous les boutons (vignette, liste+carte, vignette+carte) */
.cfy-vignettes-pre-banner .cfy-catalog-title-actions .cfy-catalog-action-btn .cfy-view-mode-svg {
    display: block;
    margin: auto;
    flex-shrink: 0;
    color: inherit;
    fill: currentColor;
    stroke: currentColor;
    width: 20px;
    height: 20px;
    max-width: 22px;
    max-height: 22px;
}
.cfy-vignettes-pre-banner .cfy-catalog-title-actions .cfy-catalog-action-btn:hover:not(:disabled):not(.cfy-view-mode-disabled),
.cfy-vignettes-pre-banner .cfy-catalog-title-actions .cfy-catalog-action-btn:focus-visible:not(:disabled):not(.cfy-view-mode-disabled) {
    background: var(--cfy-catalog-action-hover-bg);
    color: var(--cfy-catalog-action-hover-fg);
    border-color: var(--cfy-catalog-action-border);
    outline: none;
}
.cfy-vignettes-pre-banner .cfy-catalog-title-actions .cfy-catalog-action-btn.active {
    background: var(--cfy-catalog-action-active-bg);
    color: var(--cfy-catalog-action-active-fg);
    border-color: var(--cfy-catalog-action-border);
}
.cfy-vignettes-pre-banner .cfy-catalog-title-actions .cfy-catalog-action-btn.is-loading {
    opacity: 0.72;
}
.cfy-vignettes-pre-banner .cfy-catalog-title-actions .cfy-catalog-action-btn:disabled,
.cfy-vignettes-pre-banner .cfy-catalog-title-actions .cfy-catalog-action-btn.cfy-view-mode-disabled {
    background: var(--cfy-catalog-action-disabled-bg) !important;
    color: var(--cfy-catalog-action-disabled-fg) !important;
    border: 1px solid var(--cfy-catalog-action-disabled-border) !important;
    cursor: not-allowed;
    opacity: 0.85;
}

/* Bouton « Affichage images » de la zone catalogue : 3 états explicites, chacun avec sa propre icône
   (au lieu d'une icône unique + couleur) pour rester lisible même sans distinguer les couleurs.
   Formule commune : icône + bordure + fond teinté (~0.2 alpha, ~0.32 au survol) dans LA MÊME teinte.
   '1'   Avec image  : icône "image" pleine, teinte or (#FFD700) — filtre positif, style charte noir/or.
   '0'   Sans image  : icône "image barrée", teinte corail (#FF7A50) — filtre d'exclusion.
   'all' Toutes      : icône "calques" (deux images superposées = les deux à la fois), teinte cyan (#09c2de,
                       reprise du sélecteur de catalogue de cette même barre) — état neutre mais actif,
                       volontairement PAS grisé/estompé pour ne jamais se confondre avec .cfy-view-mode-disabled. */
.cfy-vignettes-pre-banner .cfy-catalog-title-actions .cfy-catalog-action-btn.cfy-image-filter-active {
    background: rgba(255, 215, 0, 0.2) !important;
    border-color: #FFD700 !important;
}
.cfy-vignettes-pre-banner .cfy-catalog-title-actions .cfy-catalog-action-btn.cfy-image-filter-active:hover:not(:disabled) {
    background: rgba(255, 215, 0, 0.32) !important;
}
.cfy-vignettes-pre-banner .cfy-catalog-title-actions .cfy-catalog-action-btn.cfy-image-filter-excluded {
    background: rgba(255, 122, 80, 0.2) !important;
    border-color: #FF7A50 !important;
}
.cfy-vignettes-pre-banner .cfy-catalog-title-actions .cfy-catalog-action-btn.cfy-image-filter-excluded:hover:not(:disabled) {
    background: rgba(255, 122, 80, 0.32) !important;
}
.cfy-vignettes-pre-banner .cfy-catalog-title-actions .cfy-catalog-action-btn.cfy-image-filter-off {
    background: rgba(9, 194, 222, 0.2) !important;
    border-color: #09c2de !important;
}
.cfy-vignettes-pre-banner .cfy-catalog-title-actions .cfy-catalog-action-btn.cfy-image-filter-off:hover:not(:disabled) {
    background: rgba(9, 194, 222, 0.32) !important;
}

.cfy-vignettes-pre-banner .cfy-catalog-title-actions .cfy-catalog-action-btn.cfy-quick-pref-on,
.cfy-vignettes-pre-banner .cfy-catalog-title-actions .cfy-catalog-action-btn.cfy-quick-pref-all {
    background: rgba(255, 215, 0, 0.2) !important;
    border-color: #FFD700 !important;
    color: #FFD700 !important;
}
.cfy-vignettes-pre-banner .cfy-catalog-title-actions .cfy-catalog-action-btn.cfy-quick-pref-on:hover:not(:disabled),
.cfy-vignettes-pre-banner .cfy-catalog-title-actions .cfy-catalog-action-btn.cfy-quick-pref-all:hover:not(:disabled) {
    background: rgba(255, 215, 0, 0.32) !important;
}
.cfy-vignettes-pre-banner .cfy-catalog-title-actions .cfy-catalog-action-btn.cfy-quick-pref-first {
    background: rgba(9, 194, 222, 0.2) !important;
    border-color: #09c2de !important;
    color: #09c2de !important;
}
.cfy-vignettes-pre-banner .cfy-catalog-title-actions .cfy-catalog-action-btn.cfy-quick-pref-first:hover:not(:disabled) {
    background: rgba(9, 194, 222, 0.32) !important;
}
.cfy-vignettes-pre-banner .cfy-catalog-title-actions .cfy-catalog-action-btn.cfy-quick-pref-off,
.cfy-vignettes-pre-banner .cfy-catalog-title-actions .cfy-catalog-action-btn.cfy-quick-pref-none {
    background: rgba(255, 122, 80, 0.2) !important;
    border-color: #FF7A50 !important;
    color: #FF7A50 !important;
}
.cfy-vignettes-pre-banner .cfy-catalog-title-actions .cfy-catalog-action-btn.cfy-quick-pref-off:hover:not(:disabled),
.cfy-vignettes-pre-banner .cfy-catalog-title-actions .cfy-catalog-action-btn.cfy-quick-pref-none:hover:not(:disabled) {
    background: rgba(255, 122, 80, 0.32) !important;
}

.cfy-vignettes-pre-banner .cfy-sticky-homepage-controls .cfy-catalog-action-btn,
.cfy-vignettes-pre-banner .cfy-sticky-homepage-controls .cfy-homepage-options-open-btn {
    width: var(--cfy-catalog-action-size) !important;
    height: var(--cfy-catalog-action-size) !important;
    min-width: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    border: 1px solid var(--cfy-catalog-action-border) !important;
    border-radius: 0;
    background: var(--cfy-catalog-action-bg) !important;
    color: var(--cfy-catalog-action-fg) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0;
}
/* Icône du bouton options : même gabarit que les 3 autres icônes du groupe */
.cfy-vignettes-pre-banner .cfy-sticky-homepage-controls .cfy-homepage-options-open-btn .cfy-view-mode-svg {
    display: block;
    margin: auto;
    flex-shrink: 0;
    color: inherit;
    fill: currentColor;
    stroke: currentColor;
    width: 20px;
    height: 20px;
    max-width: 22px;
    max-height: 22px;
}
.cfy-vignettes-pre-banner .cfy-sticky-homepage-controls .cfy-homepage-options-open-btn:hover:not(:disabled):not(.cfy-view-mode-disabled),
.cfy-vignettes-pre-banner .cfy-sticky-homepage-controls .cfy-homepage-options-open-btn:focus-visible:not(:disabled):not(.cfy-view-mode-disabled) {
    background: var(--cfy-catalog-action-hover-bg) !important;
    color: var(--cfy-catalog-action-hover-fg) !important;
    border-color: var(--cfy-catalog-action-border) !important;
    outline: none;
}
.cfy-vignettes-pre-banner .cfy-sticky-homepage-controls .cfy-homepage-options-open-btn:disabled,
.cfy-vignettes-pre-banner .cfy-sticky-homepage-controls .cfy-homepage-options-open-btn.cfy-view-mode-disabled {
    border-color: var(--cfy-catalog-action-disabled-border) !important;
}

/* Wrapper sticky : largeur AUTO (2026-09-24) -- contient maintenant 2 boutons (Options + Chatbot),
   plus une largeur figée à un seul bouton (--cfy-catalog-action-size) qui faisait déborder le 2e
   hors du wrapper/padding jusqu'au bord du viewport. `gap` remplace le margin-inline-end qui était
   posé individuellement sur chaque bouton. */
.cfy-vignettes-pre-banner .cfy-sticky-homepage-controls {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: var(--cfy-catalog-action-gap, 10px);
    height: var(--cfy-catalog-action-size);
    min-width: 28px;
    min-height: 28px;
}

.cfy-vignettes-pre-banner .cfy-homepage-options-controls {
    /* Espacement géré par le spacer HTML .cfy-catalog-title-actions-spacer (fixe, insensible LTR/RTL) */
    margin-inline-start: 0;
}

/* RTL : conserver l'ordre logique (select puis icônes) */
html[dir="rtl"] .cfy-vignettes-pre-banner .cfy-vignettes-pre-row,
[dir="rtl"] .cfy-vignettes-pre-banner .cfy-vignettes-pre-row {
    flex-direction: row !important;
}

html[dir="rtl"] .cfy-vignettes-pre-col-title,
[dir="rtl"] .cfy-vignettes-pre-col-title {
    text-align: end !important;
}

html[dir="rtl"] .cfy-vignettes-pre-col-select,
[dir="rtl"] .cfy-vignettes-pre-col-select {
    text-align: start !important;
}

html[dir="rtl"] .cfy-vignettes-pre-col-view-icons,
[dir="rtl"] .cfy-vignettes-pre-col-view-icons {
    text-align: start !important;
}


/* Cartes éditeurs (vignettes) */
.cfy-editors-linked-to-catalog .cfy-editor-card,
.cfy-editors-linked-to-catalog .cfy-editor-card-ghost {
    background: var(--cfy-elc-card-bg) !important;
    border-color: var(--cfy-elc-card-border) !important;
    box-shadow: var(--cfy-elc-card-shadow);
}

.cfy-editors-linked-to-catalog .cfy-editor-card__title,
.cfy-editors-linked-to-catalog .cfy-editor-card-ghost .cfy-editor-card__title {
    color: var(--cfy-elc-card-title) !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
}

.cfy-editors-linked-to-catalog .cfy-editor-card__title-link {
    color: var(--cfy-elc-link) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
}

.cfy-editors-linked-to-catalog .cfy-editor-card__title-link:hover {
    color: var(--cfy-elc-link-hover) !important;
}

.cfy-editors-linked-to-catalog .cfy-editor-card__subtext,
.cfy-editors-linked-to-catalog .cfy-editor-card-ghost .cfy-editor-card__subtext {
    color: var(--cfy-elc-card-subtext) !important;
}

.cfy-editors-linked-to-catalog .cfy-editor-card__details,
.cfy-editors-linked-to-catalog .cfy-editor-card-ghost .cfy-editor-card__details {
    color: var(--cfy-elc-card-details) !important;
}

.cfy-editors-linked-to-catalog .cfy-editor-card__count,
.cfy-editors-linked-to-catalog .cfy-editor-card-ghost .cfy-editor-card__count {
    color: var(--cfy-elc-card-count) !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
}

.cfy-editors-linked-to-catalog .cfy-editor-card__avatar-wrap {
    background: var(--cfy-elc-avatar-wrap-bg) !important;
}

.cfy-editors-linked-to-catalog .cfy-editor-card__avatar-link {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    border-radius: 0 !important;
}

.cfy-editors-linked-to-catalog .cfy-editor-card__dropdown-trigger {
    color: var(--cfy-elc-dropdown-trigger) !important;
}

/* Zone slogan : cachée par défaut, visible quand .cfy-slogans-visible sur le conteneur */
.cfy-editors-linked-to-catalog .cfy-editor-card__slogan-wrap {
    display: none !important;
}
/* Quand slogan caché : retirer tout le bloc slogan du flux pour que slug et bouton se suivent sans espace */
.cfy-editors-linked-to-catalog:not(.cfy-slogans-visible) .cfy-editor-card .user-info .cfy-editor-card__subtext {
    display: none !important;
}
.cfy-editors-linked-to-catalog.cfy-slogans-visible .cfy-editor-card__slogan-wrap {
    display: block !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}
/* Slogan visible : permettre retour à la ligne (Bug 4), pas de troncature ; zone extensible pour aligner le bouton en bas */
.cfy-editors-linked-to-catalog.cfy-slogans-visible .cfy-editor-card .user-info .cfy-editor-card__subtext {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    overflow: visible !important;
    max-width: 100% !important;
    display: block !important;
    flex-grow: 1 !important;
    min-height: 0 !important;
}

/* Bouton plus (toggle slogans) : ~4x plus gros (Bug 2), même style que le dropdown-trigger */
.cfy-editors-linked-to-catalog .cfy-editor-card__slogan-toggle {
    color: var(--cfy-elc-dropdown-trigger) !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0.5rem !important;
    min-width: 2.5rem !important;
    min-height: 2.5rem !important;
    line-height: 1 !important;
    cursor: pointer !important;
    font-size: 1.5rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.cfy-editors-linked-to-catalog .cfy-editor-card__slogan-toggle span {
    font-size: inherit !important;
    line-height: 1 !important;
}
.cfy-editors-linked-to-catalog .cfy-editor-card__slogan-toggle:hover {
    color: var(--cfy-elc-link-hover) !important;
}
/* Bug 1 : après clic sur le bouton plus, annuler l'effet hover de la vignette brièvement */
.cfy-editors-linked-to-catalog.cfy-editors-linked--no-hover .product-card.vignette-selectable,
.cfy-editors-linked-to-catalog.cfy-editors-linked--no-hover .product-card.vignette-selectable:hover,
.cfy-editors-linked-to-catalog.cfy-editors-linked--no-hover .product-card.vignette-selectable:focus-within {
    transform: none !important;
    box-shadow: var(--cfy-elc-card-shadow) !important;
}
.cfy-editors-linked-to-catalog.cfy-editors-linked--no-hover .product-card.vignette-selectable .card-img-top {
    transform: none !important;
    filter: none !important;
}
/* Bug 3 : récupérer l'espace quand slogan masqué — permettre au bloc de se tasser */
.cfy-editors-linked-to-catalog .cfy-editor-card .user-info {
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}
.cfy-editors-linked-to-catalog .cfy-editor-card .user-card.user-card-s2 {
    flex-grow: 1 !important;
    min-height: 0 !important;
}
.cfy-editors-linked-to-catalog .cfy-editor-card .card-inner .team {
    min-height: 0 !important;
}
/* Cartes éditeurs : hauteur identique par ligne (stretch), bouton en bas */
/* Plus d'override flex-start : les colonnes/items gardent align-items: stretch pour égaliser les hauteurs. */
.cfy-editors-linked-to-catalog .cfy-editor-card {
    height: 100% !important;
}
/* RTL : team-options en coin haut gauche */
[dir="rtl"] .cfy-editors-linked-to-catalog .team-options {
    left: -0.25rem;
    right: auto;
}

.cfy-editors-linked-to-catalog .cfy-editor-card__status-dot {
    display: inline-block !important;
    width: 12px !important;
    height: 12px !important;
    background-color: var(--cfy-elc-status-dot) !important;
    border-radius: 50% !important;
}

/* Bouton « Voir toutes les annonces » (zone éditeurs uniquement) - mode clair : noir, bordure discrète en pointillés */
.cfy-editors-linked-to-catalog .cfy-btn-catalogue-public {
    background: var(--cfy-elc-btn-bg, transparent) !important;
    border-radius: 0 !important;
    border-style: var(--cfy-elc-btn-border-style, solid) !important;
    border-color: var(--cfy-elc-btn-border) !important;
    color: var(--cfy-elc-btn-text) !important;
}

.cfy-editors-linked-to-catalog .cfy-btn-catalogue-public:hover {
    background: var(--cfy-elc-btn-hover-bg) !important;
    border-color: var(--cfy-elc-btn-hover-border) !important;
    color: var(--cfy-elc-btn-hover-text) !important;
}

/* Team-status text (Déjà abonné / Liste noire / Non suivi) : garder lisible dans les deux thèmes */
.cfy-editors-linked-to-catalog .cfy-editor-card .team-status.text-light,
.cfy-editors-linked-to-catalog .cfy-editor-card .team-status .text-light {
    color: var(--cfy-elc-card-title) !important;
}

/* Compactage final des cartes éditeurs : corrige la min-height héritée et rend le contenu lisible */
.cfy-editors-linked-to-catalog .cfy-editor-card,
.cfy-editors-linked-to-catalog .cfy-editor-card-ghost {
    min-height: 0 !important;
    height: auto !important;
}
.cfy-editors-linked-to-catalog .cfy-editor-card .card-inner,
.cfy-editors-linked-to-catalog .cfy-editor-card-ghost .card-inner {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 8px 10px !important;
}
.cfy-editors-linked-to-catalog .cfy-editor-card .team,
.cfy-editors-linked-to-catalog .cfy-editor-card-ghost .team {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    min-height: 0 !important;
    padding-top: 26px !important;
}
.cfy-editors-linked-to-catalog .cfy-editor-card .team-options,
.cfy-editors-linked-to-catalog .cfy-editor-card-ghost .team-options {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
    margin: 0 !important;
    z-index: 2 !important;
}
[dir="rtl"] .cfy-editors-linked-to-catalog .cfy-editor-card .team-options,
[dir="rtl"] .cfy-editors-linked-to-catalog .cfy-editor-card-ghost .team-options {
    right: auto !important;
    left: 0 !important;
}
.cfy-editors-linked-to-catalog .cfy-editor-card .team-status,
.cfy-editors-linked-to-catalog .cfy-editor-card-ghost .team-status {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    max-width: calc(100% - 56px) !important;
    margin: 0 !important;
    padding: 2px 6px !important;
    font-size: 0.68rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
[dir="rtl"] .cfy-editors-linked-to-catalog .cfy-editor-card .team-status,
[dir="rtl"] .cfy-editors-linked-to-catalog .cfy-editor-card-ghost .team-status {
    left: auto !important;
    right: 0 !important;
}
.cfy-editors-linked-to-catalog .cfy-editor-card .user-card.user-card-s2,
.cfy-editors-linked-to-catalog .cfy-editor-card-ghost .user-card.user-card-s2 {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
}
.cfy-editors-linked-to-catalog .cfy-editor-card__avatar--compact,
.cfy-editors-linked-to-catalog .cfy-editor-card-ghost .cfy-editor-card__avatar--compact {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
}
.cfy-editors-linked-to-catalog .cfy-editor-card .user-info,
.cfy-editors-linked-to-catalog .cfy-editor-card-ghost .user-info {
    width: calc(100% - 52px) !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 0 0 8px !important;
}
[dir="rtl"] .cfy-editors-linked-to-catalog .cfy-editor-card .user-info,
[dir="rtl"] .cfy-editors-linked-to-catalog .cfy-editor-card-ghost .user-info {
    padding: 0 8px 0 0 !important;
}
.cfy-editors-linked-to-catalog .cfy-editor-card__title,
.cfy-editors-linked-to-catalog .cfy-editor-card-ghost .cfy-editor-card__title,
.cfy-editors-linked-to-catalog .cfy-editor-card__title-link {
    display: block !important;
    margin: 0 !important;
    font-size: 0.92rem !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.cfy-editors-linked-to-catalog .cfy-editor-card__count,
.cfy-editors-linked-to-catalog .cfy-editor-card-ghost .cfy-editor-card__count {
    display: block !important;
    margin-top: 2px !important;
    font-size: 0.72rem !important;
    line-height: 1.15 !important;
    font-weight: 600 !important;
}
.cfy-editors-linked-to-catalog .cfy-editor-card .cfy-editor-card__subtext {
    margin-top: 3px !important;
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
}
.cfy-editors-linked-to-catalog:not(.cfy-slogans-visible) .cfy-editor-card .cfy-editor-card__subtext {
    display: none !important;
}
.cfy-editors-linked-to-catalog .cfy-editor-card .team-view {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
.cfy-editors-linked-to-catalog .cfy-btn-catalogue-public {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 28px !important;
    padding: 4px 8px !important;
    font-size: 0.72rem !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
}
.cfy-editors-linked-to-catalog .cfy-editor-card__slogan-toggle,
.cfy-editors-linked-to-catalog .cfy-editor-card__dropdown-trigger {
    min-width: 1.9rem !important;
    min-height: 1.9rem !important;
    padding: 0.2rem !important;
    font-size: 1rem !important;
}

/* Version mate finale : slug sur sa ligne, compteur collé au +, avatar + CTA sur la ligne suivante */
.cfy-editors-linked-to-catalog .cfy-editor-card,
.cfy-editors-linked-to-catalog .cfy-editor-card-ghost {
    min-height: 0 !important;
    height: auto !important;
}
.cfy-editors-linked-to-catalog .cfy-editor-card .card-inner,
.cfy-editors-linked-to-catalog .cfy-editor-card-ghost .card-inner {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 8px 10px !important;
}
.cfy-editors-linked-to-catalog .cfy-editor-card__team {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    min-height: 0 !important;
}
.cfy-editors-linked-to-catalog .cfy-editor-card__header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 8px !important;
    min-width: 0 !important;
}
.cfy-editors-linked-to-catalog .cfy-editor-card__header-main {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 1 !important;
    min-width: 0 !important;
}
.cfy-editors-linked-to-catalog .cfy-editor-card__header-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
}
.cfy-editors-linked-to-catalog .cfy-editor-card__title,
.cfy-editors-linked-to-catalog .cfy-editor-card-ghost .cfy-editor-card__title {
    margin: 0 !important;
    min-width: 0 !important;
    font-size: 0.9rem !important;
    line-height: 1.1 !important;
}
.cfy-editors-linked-to-catalog .cfy-editor-card__title-link,
.cfy-editors-linked-to-catalog .cfy-editor-card-ghost .cfy-editor-card__title-link {
    display: block !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: inherit !important;
    line-height: inherit !important;
}
.cfy-editors-linked-to-catalog .cfy-editor-card__status {
    max-width: 78px !important;
    margin: 0 !important;
    padding: 2px 6px !important;
    font-size: 0.64rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    border-radius: 999px !important;
}
.cfy-editors-linked-to-catalog .cfy-editor-card__status {
    display: none !important;
}
.cfy-editors-linked-to-catalog .cfy-editor-card__count-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 1.45rem !important;
    height: 1.45rem !important;
    padding: 0 0.35rem !important;
    border-radius: 999px !important;
    background: rgba(255, 215, 0, 0.14) !important;
    border: 1px solid rgba(255, 215, 0, 0.35) !important;
    color: var(--cfy-elc-card-count) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}
body.dark-mode .cfy-editors-linked-to-catalog .cfy-editor-card__count-badge,
html.dark-mode .cfy-editors-linked-to-catalog .cfy-editor-card__count-badge {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
}
.cfy-editors-linked-to-catalog .cfy-editor-card__body {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-width: 0 !important;
}
.cfy-editors-linked-to-catalog .cfy-editor-card__body--ghost {
    justify-content: flex-start !important;
}
.cfy-editors-linked-to-catalog .cfy-editor-card__avatar--compact,
.cfy-editors-linked-to-catalog .cfy-editor-card-ghost .cfy-editor-card__avatar--compact,
.cfy-editors-linked-to-catalog .cfy-editor-card__avatar-wrap,
.cfy-editors-linked-to-catalog .cfy-editor-card__avatar {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
}
.cfy-editors-linked-to-catalog .cfy-editor-card__avatar-wrap,
.cfy-editors-linked-to-catalog .cfy-editor-card__avatar {
    overflow: hidden !important;
}
.cfy-editors-linked-to-catalog .cfy-editor-card__avatar-link {
    border-radius: 0 !important;
}
.cfy-editors-linked-to-catalog .team-view {
    display: flex !important;
    justify-content: flex-end !important;
    flex: 1 !important;
    min-width: 0 !important;
    margin: 0 !important;
}
.cfy-editors-linked-to-catalog .cfy-btn-catalogue-public {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 92px !important;
    min-width: 92px !important;
    min-height: 42px !important;
    padding: 4px 6px !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.05 !important;
    font-size: 0.7rem !important;
}
.cfy-editors-linked-to-catalog .cfy-btn-catalogue-public span {
    display: block !important;
    max-width: 100% !important;
}
.cfy-editors-linked-to-catalog .cfy-editor-card__slogan-toggle,
.cfy-editors-linked-to-catalog .cfy-editor-card__dropdown-trigger {
    min-width: 1.75rem !important;
    min-height: 1.75rem !important;
    padding: 0.15rem !important;
    font-size: 0.95rem !important;
}
.cfy-editors-linked-to-catalog .cfy-editor-card__slogan-row {
    display: none !important;
    margin-top: -1px !important;
}
.cfy-editors-linked-to-catalog.cfy-slogans-visible .cfy-editor-card__slogan-row {
    display: block !important;
}
.cfy-editors-linked-to-catalog.cfy-slogans-visible .cfy-editor-card__slogan-row .cfy-editor-card__subtext {
    display: block !important;
    margin: 0 !important;
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}
.cfy-editors-linked-to-catalog:not(.cfy-slogans-visible) .cfy-editor-card__slogan-row .cfy-editor-card__subtext {
    display: none !important;
}
.cfy-editors-linked-to-catalog .cfy-editor-card__ghost-meta {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
}
.cfy-editors-linked-to-catalog .cfy-editor-card__ghost-label {
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
    color: var(--cfy-elc-card-details) !important;
}

/* Layout simple : uniquement avatar (hauteur fixe) + @slug + "X annonces" — sans bouton ni slogan */
.cfy-editors-linked-to-catalog .cfy-editor-card .card-inner.cfy-editor-card__inner-simple,
.cfy-editors-linked-to-catalog .cfy-editor-card-ghost .card-inner.cfy-editor-card__inner-simple {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    height: 100% !important;
    min-height: 88px !important;
    padding: 8px 10px 8px 10px !important;
}
.cfy-editors-linked-to-catalog .cfy-editor-card .card-inner.cfy-editor-card__inner-simple .cfy-editor-card__avatar-wrap,
.cfy-editors-linked-to-catalog .cfy-editor-card-ghost .card-inner.cfy-editor-card__inner-simple .cfy-editor-card__avatar-wrap {
    margin-left: 5px !important;
    flex-shrink: 0 !important;
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    min-height: 72px !important;
    overflow: hidden !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    text-decoration: none !important;
}
[dir="rtl"] .cfy-editors-linked-to-catalog .card-inner.cfy-editor-card__inner-simple .cfy-editor-card__avatar-wrap {
    margin-left: 0 !important;
    margin-right: 5px !important;
}
.cfy-editors-linked-to-catalog .cfy-editor-card__avatar-img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    object-fit: cover !important;
}
.cfy-editors-linked-to-catalog .card-inner.cfy-editor-card__inner-simple .cfy-editor-card__text {
    flex: 1 !important;
    min-width: 0 !important;
    padding-left: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 2px !important;
}
[dir="rtl"] .cfy-editors-linked-to-catalog .card-inner.cfy-editor-card__inner-simple .cfy-editor-card__text {
    padding-left: 0 !important;
    padding-right: 10px !important;
}
.cfy-editors-linked-to-catalog .card-inner.cfy-editor-card__inner-simple .cfy-editor-card__title,
.cfy-editors-linked-to-catalog .card-inner.cfy-editor-card__inner-simple .cfy-editor-card__title-link {
    margin: 0 !important;
    font-size: 1rem !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: var(--cfy-elc-link) !important;
    text-decoration: none !important;
}
.cfy-editors-linked-to-catalog .card-inner.cfy-editor-card__inner-simple .cfy-editor-card__title-link:hover {
    color: var(--cfy-elc-link-hover) !important;
}
.cfy-editors-linked-to-catalog .card-inner.cfy-editor-card__inner-simple .cfy-editor-card__count-line {
    margin: 0 !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: var(--cfy-elc-card-count) !important;
}
/* Lien « Voir toutes les annonces » : section toujours dark → blanc semi-transparent */
.cfy-editors-linked-to-catalog .card-inner.cfy-editor-card__inner-simple .cfy-editor-card__view-ads-link {
    display: inline-block !important;
    margin: 0 !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    text-decoration: none !important;
}
.cfy-editors-linked-to-catalog .card-inner.cfy-editor-card__inner-simple .cfy-editor-card__view-ads-link:hover {
    color: rgba(255, 255, 255, 0.95) !important;
    text-decoration: underline !important;
}
.cfy-editors-linked-to-catalog .cfy-editor-card-ghost .card-inner.cfy-editor-card__inner-simple .cfy-editor-card__title {
    color: #ffd587 !important;
    letter-spacing: 0.01em !important;
    font-weight: 700 !important;
}
.cfy-editors-linked-to-catalog .cfy-editor-card-ghost .card-inner.cfy-editor-card__inner-simple .cfy-editor-card__count-line {
    color: #ffe7bf !important;
}
.cfy-editors-linked-to-catalog .cfy-editor-card-ghost .card-inner.cfy-editor-card__inner-simple .cfy-editor-card__avatar-wrap {
    box-shadow: inset 0 0 0 1px rgba(255, 174, 0, 0.48) !important;
}
.cfy-editors-linked-to-catalog .cfy-editor-card-ghost .cfy-editor-card__avatar-img {
    filter: saturate(1.08) contrast(1.04);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Vignettes Publisher — layout responsive (4K/2K/FHD complets, HD sans « Voir toutes les annonces », tablette/smartphone avatar seul, centré)
   Ne pas casser la grille Bootstrap / grid.
   ═══════════════════════════════════════════════════════════════════════════ */

/* HD et en dessous : masquer le lien « Voir toutes les annonces » (garder avatar + slug) */
@media (max-width: 1399px) {
    .cfy-editors-linked-to-catalog .cfy-editor-card .card-inner.cfy-editor-card__inner-simple .cfy-editor-card__view-ads-link {
        display: none !important;
    }
}

/* Tablette et smartphone : masquer le slug (et le lien), ne garder que l'avatar ; centrer le contenu dans la grille */
@media (max-width: 991px) {
    .cfy-editors-linked-to-catalog .cfy-editor-card .card-inner.cfy-editor-card__inner-simple .cfy-editor-card__text,
    .cfy-editors-linked-to-catalog .cfy-editor-card-ghost .card-inner.cfy-editor-card__inner-simple .cfy-editor-card__text {
        display: none !important;
    }
    .cfy-editors-linked-to-catalog .cfy-editor-card .card-inner.cfy-editor-card__inner-simple,
    .cfy-editors-linked-to-catalog .cfy-editor-card-ghost .card-inner.cfy-editor-card__inner-simple {
        justify-content: center !important;
    }
    .cfy-editors-linked-to-catalog .cfy-editor-card .card-inner.cfy-editor-card__inner-simple .cfy-editor-card__avatar-wrap,
    .cfy-editors-linked-to-catalog .cfy-editor-card-ghost .card-inner.cfy-editor-card__inner-simple .cfy-editor-card__avatar-wrap {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    [dir="rtl"] .cfy-editors-linked-to-catalog .cfy-editor-card .card-inner.cfy-editor-card__inner-simple .cfy-editor-card__avatar-wrap,
    [dir="rtl"] .cfy-editors-linked-to-catalog .cfy-editor-card-ghost .card-inner.cfy-editor-card__inner-simple .cfy-editor-card__avatar-wrap {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Vignettes Publisher — règles progressives desktop (FHD/2K/4K)
   Container Queries : quand la carte est étroite (ex. 14/16 colonnes),
   « Voir toutes les annonces » → « Voir », puis bouton masqué, puis slug masqué.
   Tablettes/smartphones exclus (min-width: 992px).
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
    .cfy-editors-linked-to-catalog .vignettes-container.editors-grid .vignette-item,
    .cfy-editors-linked-to-catalog .row.editors-grid > [class*="col-"] {
        container-type: inline-size;
        container-name: editor-card;
    }

    /* Carte étroite : bouton raccourci en « Voir » (texte masqué + ::after) */
    @container editor-card (max-width: 220px) {
        .cfy-editors-linked-to-catalog .cfy-editor-card .card-inner.cfy-editor-card__inner-simple .cfy-editor-card__view-ads-link {
            font-size: 0 !important;
            line-height: 0 !important;
            overflow: hidden !important;
            display: inline-block !important;
            width: 2.8rem !important;
            vertical-align: middle !important;
        }
        .cfy-editors-linked-to-catalog .cfy-editor-card .card-inner.cfy-editor-card__inner-simple .cfy-editor-card__view-ads-link::after {
            content: 'Voir';
            font-size: 0.8rem !important;
            line-height: 1.25 !important;
            display: block !important;
        }
    }

    /* Carte plus étroite : masquer le bouton (avatar + slug uniquement) */
    @container editor-card (max-width: 170px) {
        .cfy-editors-linked-to-catalog .cfy-editor-card .card-inner.cfy-editor-card__inner-simple .cfy-editor-card__view-ads-link {
            display: none !important;
        }
    }

    /* Carte très étroite : masquer le slug, garder l'avatar centré (tooltip conservé) */
    @container editor-card (max-width: 100px) {
        .cfy-editors-linked-to-catalog .cfy-editor-card .card-inner.cfy-editor-card__inner-simple .cfy-editor-card__text,
        .cfy-editors-linked-to-catalog .cfy-editor-card-ghost .card-inner.cfy-editor-card__inner-simple .cfy-editor-card__text {
            display: none !important;
        }
        .cfy-editors-linked-to-catalog .cfy-editor-card .card-inner.cfy-editor-card__inner-simple,
        .cfy-editors-linked-to-catalog .cfy-editor-card-ghost .card-inner.cfy-editor-card__inner-simple {
            justify-content: center !important;
        }
        .cfy-editors-linked-to-catalog .cfy-editor-card .card-inner.cfy-editor-card__inner-simple .cfy-editor-card__avatar-wrap,
        .cfy-editors-linked-to-catalog .cfy-editor-card-ghost .card-inner.cfy-editor-card__inner-simple .cfy-editor-card__avatar-wrap {
            margin-left: 0 !important;
            margin-right: 0 !important;
        }
        [dir="rtl"] .cfy-editors-linked-to-catalog .cfy-editor-card .card-inner.cfy-editor-card__inner-simple .cfy-editor-card__avatar-wrap,
        [dir="rtl"] .cfy-editors-linked-to-catalog .cfy-editor-card-ghost .card-inner.cfy-editor-card__inner-simple .cfy-editor-card__avatar-wrap {
            margin-left: 0 !important;
            margin-right: 0 !important;
        }
    }
}

/* Mode performance: rendu Ghost distinctif mais ultra léger */
body.performance-mode .cfy-editors-linked-to-catalog .cfy-editor-card-ghost {
    --cfy-elc-card-bg: linear-gradient(180deg, rgba(74, 48, 19, 0.94) 0%, rgba(32, 24, 14, 0.98) 100%);
    --cfy-elc-card-border: rgba(255, 166, 0, 0.4);
    --cfy-elc-link: #ffd087;
    --cfy-elc-link-hover: #ffd087;
    --cfy-elc-card-count: #ffddab;
    box-shadow: none !important;
}
body.performance-mode .cfy-editors-linked-to-catalog .cfy-editor-card-ghost::before {
    content: none !important;
}
body.performance-mode .cfy-editors-linked-to-catalog .cfy-editor-card-ghost .cfy-editor-card__avatar-img {
    filter: none !important;
}
body.performance-mode .cfy-editors-linked-to-catalog .cfy-editor-card-ghost .card-inner.cfy-editor-card__inner-simple .cfy-editor-card__avatar-wrap {
    box-shadow: none !important;
}
.cfy-editors-linked-to-catalog .cfy-editor-card:has(.cfy-editor-card__inner-simple),
.cfy-editors-linked-to-catalog .cfy-editor-card-ghost:has(.cfy-editor-card__inner-simple) {
    min-height: 100px !important;
    height: auto !important;
}
/* Clic sur la zone carte (hors avatar/slug) → annonces publiques */
.cfy-editors-linked-to-catalog .cfy-editor-card[data-ads-url] {
    cursor: pointer !important;
}

/* Bouton « + » des vignettes : chaque information (date, catégories, rayons, pin's) n'apparaît que si
   le bloc de vignettes est ouvert et que l'utilisateur l'a choisie ; tout est masqué par défaut.
   Option « Pin's toujours visibles » : les pin's restent affichés, bouton ouvert ou fermé. */
.cfy-vignettes-block:not(.cfy-meta-show-date) .cfy-meta-date,
.cfy-vignettes-block:not(.cfy-meta-show-pins):not(.cfy-meta-pins-always) .cfy-meta-pins,
.cfy-vignettes-block:not(.cfy-meta-show-cat) .cfy-meta-cat,
.cfy-vignettes-block:not(.cfy-meta-show-rayon) .cfy-meta-rayon {
    display: none !important;
}

.cfy-vignettes-block.cfy-meta-show-cat .location-info,
.cfy-vignettes-block.cfy-meta-show-rayon .location-info {
    display: block;
    opacity: 1;
    pointer-events: all;
}