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

/* 4. HOVER EFFECTS - ULTRA-OPTIMISÉS POUR GRANDES LISTES */
.product-card: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;
}

/* Badges dans location-info - les styles de hover sont gérés dynamiquement via tpl_head.php selon le thème actif */

.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[data-large-list="true"]:hover .card-img-top {
    transform: translateZ(0) scale(1.005) !important; /* EFFET MINIMAL */
}

/* OPTIMISATION SMARTPHONES: VIGNETTES ULTRA-BASIQUES - ZÉRO EFFET VISUEL */
@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 */
        border: 1px solid #ddd !important;
        /* 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;
    }
    
    /* TEXTE ULTRA-BASIQUE */
    .card-title,
    .card-text,
    .card-body * {
        font-size: 14px !important;
        font-weight: normal !important;
        color: black !important;
        background: white !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 {
        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;
    }
    
    /* BADGES ULTRA-BASIQUES */
.badge,
.urgent-badge,
a.urgent-badge,
.location-info,
.star-rating,
.view-count,
.price-badge {
        background: #f0f0f0 !important;
        color: black !important;
        border: 1px solid #ccc !important;
        padding: 2px 4px !important;
        font-size: 12px !important;
        /* 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 {
        background: #e0e0e0 !important;
        color: black !important;
        border: 1px solid #999 !important;
        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 {
        background: #d0d0d0 !important;
        transform: none !important;
        transition: none !important;
    }
    
    /* CONTAINERS ULTRA-BASIQUES */
    .card,
    .product-card,
    .card-body,
    .card-footer {
        background: white !important;
        border: 1px solid #ddd !important;
        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;
    }
    
    .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: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;
}

.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;
    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;
}

/* White mode only: dropdown = même noir que vignettes « Les éditeurs liés » (#222), texte et liens assortis */
html:not(.dark-mode):not([data-bs-theme="dark"]) .location-postalcode-popover-wrapper,
body:not(.dark-mode) .location-postalcode-popover-wrapper {
    background: #222222 !important;
    border: 1px solid #333333 !important;
    color: #e5e5e5;
}
html:not(.dark-mode):not([data-bs-theme="dark"]) .location-postalcode-popover-wrapper .popover-header,
body:not(.dark-mode) .location-postalcode-popover-wrapper .popover-header {
    background: #222222 !important;
    color: #FFD700 !important;
    border-bottom: 1px solid #333333 !important;
}
html:not(.dark-mode):not([data-bs-theme="dark"]) .location-postalcode-popover-wrapper .popover-body,
body:not(.dark-mode) .location-postalcode-popover-wrapper .popover-body {
    background: #222222 !important;
    color: #e5e5e5;
}
html:not(.dark-mode):not([data-bs-theme="dark"]) .location-postalcode-popover strong,
body:not(.dark-mode) .location-postalcode-popover strong {
    color: #ffffff;
}
html:not(.dark-mode):not([data-bs-theme="dark"]) .location-postalcode-popover-link,
body:not(.dark-mode) .location-postalcode-popover-link {
    color: #FFD700;
    border-bottom-color: rgba(255, 215, 0, 0.6);
}
html:not(.dark-mode):not([data-bs-theme="dark"]) .location-postalcode-popover-link:hover,
body:not(.dark-mode) .location-postalcode-popover-link:hover {
    color: #ffe44d;
    border-bottom-color: #ffe44d;
}

/* Bouton fermer (×) – white mode: or #FFD700 sur fond noir (comme éditeurs liés) ; dark mode inchangé */
.location-postalcode-popover-close {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 2px;
}
.location-postalcode-popover-close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
}
html:not(.dark-mode):not([data-bs-theme="dark"]) .location-postalcode-popover-close,
body:not(.dark-mode) .location-postalcode-popover-close {
    color: #FFD700;
}
html:not(.dark-mode):not([data-bs-theme="dark"]) .location-postalcode-popover-close:hover,
body:not(.dark-mode) .location-postalcode-popover-close:hover {
    color: #ffe44d;
    background: rgba(255, 228, 77, 0.15);
}
.location-postalcode-popover {
    position: relative;
    padding-right: 1.75rem;
}

/* Conteneur Bootstrap du popover : en bas de la vignette, occupe presque toute la hauteur, scroll, peu de padding */
.location-postalcode-popover-wrapper {
    max-width: none !important;
    margin: 2px 4px !important;
}
.product-card .location-postalcode-popover-wrapper,
.vignette-selectable .location-postalcode-popover-wrapper,
.vignette-item .location-postalcode-popover-wrapper {
    position: absolute !important;
    inset: 10% !important;
    margin: 0 !important;
    transform: none !important;
}
.location-postalcode-popover-wrapper .popover-arrow {
    display: none !important;
}
.location-postalcode-popover-wrapper .popover-header {
    text-transform: uppercase !important;
}
.location-postalcode-popover-wrapper .popover-body {
    height: 100%;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.35rem 0.5rem 0.75rem;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.location-postalcode-popover-wrapper .popover-body .location-postalcode-popover ul {
    max-height: none;
}
/* En contexte vignette : limiter hauteur pour rester dans la carte */
.product-card .location-postalcode-popover-wrapper .popover-body,
.vignette-selectable .location-postalcode-popover-wrapper .popover-body,
.vignette-item .location-postalcode-popover-wrapper .popover-body {
    height: 100%;
    max-height: none;
}

.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;
    transition: transform 0.35s cubic-bezier(0.19, 1, 0.22, 1), box-shadow 0.35s cubic-bezier(0.19, 1, 0.22, 1) !important;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12) !important;
    transform: translateZ(0) !important;
}

.product-card.vignette-selectable:hover,
.product-card.vignette-selectable:focus-within {
    transform: translateY(-10px) scale(1.01) !important;
    box-shadow: 0 24px 46px rgba(15, 23, 42, 0.22) !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 : zone sticky filters (barre de filtres) — effets réduits */
body.performance-mode .sticky-filters-container,
body.performance-mode .sticky-filters-container *,
body.performance-mode .sticky-filters-container *::before,
body.performance-mode .sticky-filters-container *::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 « carte du monde » (#mappemonde / .map-modal-overlay) — effets réduits */
body.performance-mode #mappemonde,
body.performance-mode #mappemonde *,
body.performance-mode #mappemonde *::before,
body.performance-mode #mappemonde *::after,
body.performance-mode .map-modal-overlay,
body.performance-mode .map-modal-overlay *,
body.performance-mode .map-modal-overlay *::before,
body.performance-mode .map-modal-overlay *::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 #catalogSelectorModal,
body.performance-mode #catalogSelectorModal *,
body.performance-mode #catalogSelectorModal *::before,
body.performance-mode #catalogSelectorModal *::after,
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;
}

.product-card.vignette-selectable .card-img-top {
    transition: transform 0.4s ease, filter 0.4s ease !important;
}

.product-card.vignette-selectable:hover .card-img-top,
.product-card.vignette-selectable:focus-within .card-img-top {
    transform: scale(1.04) !important;
    filter: brightness(1.05) !important;
}

body.performance-mode .cfy-vignettes-row .product-card.vignette-selectable:hover .card-img-top,
body.performance-mode .cfy-vignettes-row .product-card.vignette-selectable:focus-within .card-img-top,
body.performance-mode .vignettes-container-custom .product-card.vignette-selectable:hover .card-img-top,
body.performance-mode .vignettes-container-custom .product-card.vignette-selectable:focus-within .card-img-top {
    transform: translateZ(0) scale(1.005) !important;
    transition: transform 0.1s ease-out, filter 0.1s ease-out !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;
}

/* Badges dans location-info - les styles de hover sont gérés dynamiquement via tpl_head.php selon le thème actif */
/* 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;
}

.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 la face verso */
.vignette-flip-toggle-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-back:hover {
    background-color: rgba(13, 110, 253, 1) !important;
    transform: scale(1.1);
}

/* 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);
}

.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: '✓';
    color: white;
    font-weight: bold;
    font-size: 12px;
}

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

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

/* ========================================
   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 *,
.product-card-flip-back .product-card-flip-back-text {
    color: #ffffff !important;
    text-shadow: none;
}

/* Texte "OPTIONS À VENIR" */
.product-card-flip-back-text {
    font-size: 1.25rem;
    line-height: 1.35;
    font-weight: 800;
    color: #ffffff;
    text-shadow: none;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0;
    max-width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
    /* Pas d'animation pour limiter le CPU */
}

/* 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-text,
    .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;
}

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

/* Mode dark : les styles de hover sont gérés dynamiquement via tpl_head.php selon le thème actif */

.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;
    }
    
    /* Mode dark sur tablette : les styles de hover sont gérés dynamiquement via tpl_head.php selon le thème actif */
}

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

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

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

/* Bookmark Whitelist - Fond bleu/vert positif */
.flip-action-btn.bookmark-whitelist {
    background: rgba(9, 194, 222, 0.15) !important;
    border-color: rgba(9, 194, 222, 0.3) !important;
}

.flip-action-btn.bookmark-whitelist:hover {
    background: rgba(9, 194, 222, 0.25) !important;
    border-color: rgba(9, 194, 222, 0.5) !important;
}

.flip-action-btn.bookmark-whitelist.active {
    background: rgba(9, 194, 222, 0.3) !important;
    border-color: #09c2de !important;
}

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

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

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

/* Follow/Unfollow boutons */
.flip-action-btn.follow-btn i,
.flip-action-btn.unfollow-btn i {
    color: #09c2de !important;
}

.flip-action-btn.follow-btn.active,
.flip-action-btn.unfollow-btn.active {
    background: rgba(9, 194, 222, 0.2) !important;
    border-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 SOON - Simple et visible */
.soon-btn {
    background-color: #ffc107 !important;
    border: none !important;
    color: #000000 !important;
    cursor: not-allowed !important;
    font-weight: 700 !important;
}

.soon-text {
    font-weight: 900 !important;
    font-size: 1.1em !important;
    letter-spacing: 2px !important;
    color: #000000 !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
   ======================================== */

/* PHASE 2 : Les styles de pagination ont été déplacés dans commercify_vignettes_pagination.css
   pour consolidation et optimisations performance+++
   
   Voir : engine/tpl/css/commercify_vignettes_pagination.css */

/* ========================================
   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) */
.vignettes-container:not(.vignettes-container-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;
}

/* 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 */
.vignettes-container-mini-custom {
    display: grid !important;
    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;
}

/* En miniCustomThumbs, on déplace le wrapper entier pour reproduire
   l'effet visuel "la carte complète monte" du mode grandes vignettes. */
.vignettes-container-mini-custom .vignette-item:hover,
.vignettes-container-mini-custom .vignette-item:focus-within {
    transform: translateY(-10px) scale(1.01);
    z-index: 3;
}

/* Le mouvement étant porté par .vignette-item, on neutralise celui
   de la carte interne dans ce mode pour éviter l'effet "contenu qui monte dedans". */
.vignettes-container-mini-custom .product-card.vignette-selectable:hover,
.vignettes-container-mini-custom .product-card.vignette-selectable:focus-within {
    transform: none !important;
}

/* 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;
    /* Limiter la hauteur pour ne pas déborder */
    height: auto !important;
    max-height: 32px !important; /* Hauteur limitée */
    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;
}

/* Debug overlay contrôlé par config.php */

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

/* En mode performance, les mini-vignettes gardent l'effet image minimal. */
body.performance-mode .vignettes-container-mini-custom .product-card:hover .card-img-top,
body.performance-mode .vignettes-container-mini-custom .product-card:focus-within .card-img-top {
    transform: translateZ(0) scale(1.005) !important;  /* Effet minimal */
    transition: transform 0.1s ease-out, filter 0.1s ease-out !important;  /* Durée réduite */
}

/* Désactiver les animations sur mobile */
@media (max-width: 768px) {
    body.performance-mode .vignettes-container-mini-custom .product-card:hover .card-img-top,
    body.performance-mode .vignettes-container-mini-custom .product-card:focus-within .card-img-top {
        transform: none !important;
        transition: none !important;
    }
    
    .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;
    }
}

/* Désactivation des bannières sur mobile/tablette (identique à customThumbs) */
@media (max-width: 768px) {
    .vignettes-container-mini-custom .vignette-ad {
        display: none !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;
    }
}

/* Désactivation sur mobile/tablette */
@media (max-width: 768px) {
    .vignette-ad {
        display: none !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;
}

/* ========================================
   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;
    --cfy-catalog-action-size: min(34px, calc(100% - 4px));
    --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 : ne garder que le sélecteur catalogue, pleine largeur */
@media (max-width: 768px) {
    .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;
    gap: var(--cfy-catalog-action-gap);
    padding-inline-end: 0;
}

.cfy-vignettes-pre-col-view-icons {
    color: #e8e8e8;
}

/* 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, sticky) */
.cfy-vignettes-pre-banner .cfy-catalog-title-actions .cfy-catalog-action-btn .cfy-view-mode-svg,
.cfy-vignettes-pre-banner .cfy-catalog-title-actions .cfy-catalog-action-btn .header-sticky-filters-toggle-icon {
    display: block;
    margin: auto;
    flex-shrink: 0;
    color: inherit;
    fill: currentColor;
    stroke: currentColor;
}
.cfy-vignettes-pre-banner .cfy-catalog-title-actions .cfy-catalog-action-btn .cfy-view-mode-svg {
    width: 20px;
    height: 20px;
    max-width: 22px;
    max-height: 22px;
}
.cfy-vignettes-pre-banner .cfy-catalog-title-actions .cfy-catalog-action-btn .header-sticky-filters-toggle-icon {
    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;
}

/* Sticky : même dimensions et même bordure que les autres boutons (priorité sur le header) */
.cfy-vignettes-pre-banner .cfy-sticky-homepage-controls .cfy-catalog-action-btn,
.cfy-vignettes-pre-banner .cfy-sticky-homepage-controls .header-sticky-filters-toggle-btn,
.cfy-vignettes-pre-banner .cfy-sticky-homepage-controls .cfy-homepage-options-open-btn {
    width: 100% !important;
    height: 100% !important;
    min-width: 28px !important;
    min-height: 28px !important;
    border: 1px solid var(--cfy-catalog-action-border) !important;
    border-radius: 0;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-inline-end: 1px;
}
.cfy-vignettes-pre-banner .cfy-sticky-homepage-controls .header-sticky-filters-toggle-btn:disabled,
.cfy-vignettes-pre-banner .cfy-sticky-homepage-controls .header-sticky-filters-toggle-btn.cfy-view-mode-disabled,
.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;
}

/* Sticky actif : même bg discret que le hover du bouton dashboard (#6b5a4a), light + dark */
.cfy-vignettes-pre-banner .cfy-sticky-homepage-controls .header-sticky-filters-toggle-btn.active {
    background: #6b5a4a !important;
    color: #FFD700 !important;
    border-color: #FFD700 !important;
}
/* Sticky actif + hover : effet hover distinct (léger éclaircissement) pour garder un retour visuel */
.cfy-vignettes-pre-banner .cfy-sticky-homepage-controls .header-sticky-filters-toggle-btn.active:hover,
.cfy-vignettes-pre-banner .cfy-sticky-homepage-controls .header-sticky-filters-toggle-btn.active:focus-visible {
    background: #7d6b5a !important;
    color: #FFD700 !important;
    border-color: #FFD700 !important;
    outline: none;
}
body.dark-mode .cfy-vignettes-pre-banner .cfy-sticky-homepage-controls .header-sticky-filters-toggle-btn.active,
html.dark-mode .cfy-vignettes-pre-banner .cfy-sticky-homepage-controls .header-sticky-filters-toggle-btn.active,
body[data-bs-theme='dark'] .cfy-vignettes-pre-banner .cfy-sticky-homepage-controls .header-sticky-filters-toggle-btn.active {
    background: #6b5a4a !important;
    color: #FFD700 !important;
    border-color: #FFD700 !important;
}
body.dark-mode .cfy-vignettes-pre-banner .cfy-sticky-homepage-controls .header-sticky-filters-toggle-btn.active:hover,
body.dark-mode .cfy-vignettes-pre-banner .cfy-sticky-homepage-controls .header-sticky-filters-toggle-btn.active:focus-visible,
html.dark-mode .cfy-vignettes-pre-banner .cfy-sticky-homepage-controls .header-sticky-filters-toggle-btn.active:hover,
html.dark-mode .cfy-vignettes-pre-banner .cfy-sticky-homepage-controls .header-sticky-filters-toggle-btn.active:focus-visible,
body[data-bs-theme='dark'] .cfy-vignettes-pre-banner .cfy-sticky-homepage-controls .header-sticky-filters-toggle-btn.active:hover,
body[data-bs-theme='dark'] .cfy-vignettes-pre-banner .cfy-sticky-homepage-controls .header-sticky-filters-toggle-btn.active:focus-visible {
    background: #7d6b5a !important;
    color: #FFD700 !important;
    border-color: #FFD700 !important;
}

/* Wrapper sticky : même taille que les autres boutons */
.cfy-vignettes-pre-banner .cfy-sticky-homepage-controls {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--cfy-catalog-action-size);
    height: var(--cfy-catalog-action-size);
    min-width: 28px;
    min-height: 28px;
}

.cfy-vignettes-pre-banner .cfy-homepage-options-controls {
    margin-inline-start: 0;
}

.cfy-vignettes-pre-banner .cfy-sticky-homepage-controls .header-sticky-filters-feedback {
    left: 0;
    right: auto;
}

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