/**
 * XoXo Cards - Styles principaux front-end
 * 
 * @package XoXo_Cards
 * @since 2.0.0
 * @updated 4.0.0 - Checkboxes rôles, WYSIWYG fix, conditions générales dynamiques
 */

/* ============================
   CSS Variables
   ============================ */
:root {
    --xoxo-primary: #FF00AA;
    --xoxo-primary-dark: #CC0088;
    --xoxo-primary-light: rgba(255, 0, 170, 0.1);
    --xoxo-primary-glow: 0 0 20px rgba(255, 0, 170, 0.4);
    --xoxo-secondary: #FF00AA;
    --xoxo-success: #28a745;
    --xoxo-warning: #ffc107;
    --xoxo-danger: #dc3545;
    --xoxo-info: #17a2b8;
    --xoxo-text: #333333;
    --xoxo-text-light: #666666;
    --xoxo-text-muted: #999999;
    --xoxo-bg: #ffffff;
    --xoxo-bg-light: #ffffff;
    --xoxo-bg-dark: #1a1a2e;
    --xoxo-border: #e0e0e0;
    --xoxo-border-radius: 8px;
    --xoxo-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --xoxo-shadow-hover: 0 4px 16px rgba(255, 0, 170, 0.15);
    --xoxo-transition: 0.3s ease;
    
    /* Couleurs des niveaux */
    --xoxo-coquine: #FF69B4;
    --xoxo-sexy: #FF0000;
    --xoxo-xoxo: #FF00AA;
    --xoxo-club: #8B00FF;
    --xoxo-rarissime: #FFD700;
    --xoxo-rares: #FFD700; /* alias rétrocompatibilité */
    --xoxo-evenement: #00CED1;
    --xoxo-partenaire: #E67E22;
}

/* ============================
   Base
   ============================ */
.xoxo-cards-collection,
.xoxo-cards-album,
.xoxo-cards-packs,
.xoxo-cards-exchanges,
.xoxo-cards-puzzles,
.xoxo-cards-points,
.xoxo-cards-scanner,
.xoxo-cards-my-cards,
.xoxo-promo-code-form,
.xoxo-card-generator,
.xoxo-leaderboard {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--xoxo-text);
}

/* ============================
   Blocs avec fond blanc
   ============================ */
.xoxo-block,
.xoxo-stats-bar,
.xoxo-points-card,
.xoxo-points-info,
.xoxo-pack-card,
.xoxo-exchange-form,
.xoxo-scanner-manual,
.xoxo-validation-card,
.xoxo-notice {
    background: var(--xoxo-bg);
    border-radius: var(--xoxo-border-radius);
}

/* ============================
   Boutons
   ============================ */
.xoxo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border: none;
    border-radius: var(--xoxo-border-radius);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--xoxo-transition);
    text-decoration: none;
    line-height: 1.4;
    gap: 6px;
}

.xoxo-btn:hover {
    transform: translateY(-1px);
}

.xoxo-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.xoxo-btn-primary {
    background: var(--xoxo-primary);
    color: #fff;
    border: 2px solid var(--xoxo-primary);
}

.xoxo-btn-primary:hover {
    background: var(--xoxo-primary-dark);
    border-color: var(--xoxo-primary-dark);
    box-shadow: var(--xoxo-primary-glow);
}

.xoxo-btn-secondary {
    background: transparent;
    color: var(--xoxo-primary);
    border: 2px solid var(--xoxo-primary);
}

.xoxo-btn-secondary:hover {
    background: var(--xoxo-primary-light);
    box-shadow: var(--xoxo-primary-glow);
}

.xoxo-btn-outline {
    background: transparent;
    border: 2px solid var(--xoxo-primary);
    color: var(--xoxo-primary);
}

.xoxo-btn-outline:hover {
    background: var(--xoxo-primary-light);
    box-shadow: var(--xoxo-primary-glow);
}

.xoxo-btn-large {
    padding: 14px 28px;
    font-size: 16px;
}

/* ============================
   Stats Bar
   ============================ */
.xoxo-stats-bar {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: var(--xoxo-bg);
    border-radius: var(--xoxo-border-radius);
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.xoxo-stat-item {
    flex: 1;
    min-width: 80px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.xoxo-stat-value {
    display: inline;
    font-size: 22px;
    font-weight: 700;
    color: var(--xoxo-primary);
    line-height: 1.2;
}

.xoxo-stat-label {
    display: inline;
    font-size: 13px;
    color: var(--xoxo-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ============================
   Filtres
   ============================ */
.xoxo-filters {
    display: flex;
    gap: 6px;
    padding: 16px 0;
    margin-bottom: 16px;
    flex-wrap: nowrap;
    align-items: center;
    overflow-x: auto;
}

.xoxo-filter-btn {
    padding: 6px 12px;
    border: 2px solid var(--xoxo-border);
    border-radius: 20px;
    background: transparent;
    color: var(--xoxo-text-light);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--xoxo-transition);
    white-space: nowrap;
    flex-shrink: 0;
}

.xoxo-filter-btn:hover {
    border-color: var(--xoxo-primary);
    color: var(--xoxo-primary);
    background: var(--xoxo-primary-light);
}

.xoxo-filter-btn.active {
    background: var(--xoxo-primary);
    border-color: var(--xoxo-primary);
    color: #fff;
}

.xoxo-view-toggle {
    margin-left: auto;
    display: flex;
    gap: 4px;
}

.xoxo-view-btn {
    padding: 6px 10px;
    border: 1px solid var(--xoxo-border);
    background: transparent;
    cursor: pointer;
    border-radius: 4px;
}

.xoxo-view-btn.active {
    background: var(--xoxo-primary);
    border-color: var(--xoxo-primary);
    color: #fff;
}

/* ============================
   Tabs
   ============================ */
.xoxo-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--xoxo-border);
    margin-bottom: 24px;
}

.xoxo-tab {
    padding: 12px 24px;
    border: none;
    background: transparent;
    color: var(--xoxo-text-light);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: all var(--xoxo-transition);
    position: relative;
}

.xoxo-tab:hover {
    color: var(--xoxo-primary);
}

.xoxo-tab.active {
    color: var(--xoxo-primary);
    border-bottom-color: var(--xoxo-primary);
}

.xoxo-badge-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--xoxo-primary);
    color: #fff;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    margin-left: 6px;
}

/* Compteur de collection dans la navigation BuddyPress */
.xoxo-nav-counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 7px;
    background: linear-gradient(135deg, var(--xoxo-primary, #e91e8c), #ff4da6);
    color: #fff;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    margin-left: 5px;
    letter-spacing: 0.3px;
    line-height: 1.4;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(233, 30, 140, 0.3);
}

.xoxo-tab-content {
    display: none;
}

.xoxo-tab-content.active {
    display: block;
}

/* ============================
   Form Elements
   ============================ */
.xoxo-form-group {
    margin-bottom: 16px;
}

.xoxo-form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--xoxo-text);
}

.xoxo-input {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid var(--xoxo-border);
    border-radius: var(--xoxo-border-radius);
    font-size: 14px;
    transition: border-color var(--xoxo-transition), box-shadow var(--xoxo-transition);
    box-sizing: border-box;
}

.xoxo-input:focus {
    border-color: var(--xoxo-primary);
    outline: none;
    box-shadow: 0 0 0 3px var(--xoxo-primary-light);
}

.xoxo-input-large {
    padding: 14px 18px;
    font-size: 18px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.xoxo-form-inline {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.xoxo-form-inline .xoxo-input {
    flex: 1;
}

.xoxo-form-row {
    display: flex;
    gap: 16px;
}

.xoxo-form-row .xoxo-form-group {
    flex: 1;
}

.xoxo-hint {
    font-size: 12px;
    color: var(--xoxo-text-muted);
    margin-top: 4px;
}

.xoxo-subtitle {
    color: var(--xoxo-text-light);
    font-size: 14px;
    margin-bottom: 20px;
}

/* ============================
   Notices
   ============================ */
.xoxo-notice {
    padding: 16px;
    border-radius: var(--xoxo-border-radius);
    margin-bottom: 20px;
    border-left: 4px solid;
}

.xoxo-notice-warning {
    background: #fff3cd;
    border-color: var(--xoxo-warning);
}

.xoxo-notice-info {
    background: #e3f2fd;
    border-color: var(--xoxo-info);
}

.xoxo-notice-success {
    background: #e8f5e9;
    border-color: var(--xoxo-success);
}

.xoxo-notice-error {
    background: #ffebee;
    border-color: var(--xoxo-danger);
}

/* ============================
   Progress Bar
   ============================ */
.xoxo-album-progress {
    margin-bottom: 24px;
}

.xoxo-progress-bar {
    height: 24px;
    background: #f5f5f5;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--xoxo-border);
}

.xoxo-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--xoxo-primary), #FF66CC);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    transition: width 0.5s ease;
}

.xoxo-progress-fill span {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.xoxo-progress-text {
    font-size: 13px;
    color: var(--xoxo-text-muted);
    margin-top: 8px;
}

/* ============================
   Points Card (Cagnotte) - Fond blanc
   ============================ */
.xoxo-points-card {
    background: var(--xoxo-bg);
    color: var(--xoxo-text);
    border-radius: var(--xoxo-border-radius);
    padding: 32px;
    margin-bottom: 24px;
    border: 1px solid var(--xoxo-border);
}

.xoxo-points-main {
    text-align: center;
    margin-bottom: 24px;
}

.xoxo-points-label {
    display: block;
    font-size: 14px;
    color: var(--xoxo-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.xoxo-points-amount {
    display: block;
    font-size: 56px;
    font-weight: 800;
    line-height: 1.2;
    margin: 12px 0;
    color: var(--xoxo-primary);
}

.xoxo-points-unit {
    font-size: 14px;
    color: var(--xoxo-text-muted);
    text-transform: uppercase;
}

.xoxo-points-details {
    display: flex;
    gap: 24px;
    justify-content: center;
}

.xoxo-points-detail {
    text-align: center;
}

.xoxo-detail-label {
    display: block;
    font-size: 12px;
    color: var(--xoxo-text-muted);
    margin-bottom: 4px;
}

.xoxo-detail-value {
    font-size: 18px;
    font-weight: 700;
}

.xoxo-text-positive {
    color: var(--xoxo-success);
}

.xoxo-text-negative {
    color: var(--xoxo-danger);
}

/* ============================
   Points Balance Bar
   ============================ */
.xoxo-points-balance {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--xoxo-bg);
    border-radius: var(--xoxo-border-radius);
    margin-bottom: 24px;
    border: 1px solid var(--xoxo-border);
}

.xoxo-balance-label {
    font-size: 14px;
    color: var(--xoxo-text-light);
}

.xoxo-balance-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--xoxo-primary);
}

.xoxo-balance-unit {
    font-size: 12px;
    color: var(--xoxo-text-muted);
}

/* ============================
   Pack Cards
   ============================ */
.xoxo-packs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
@media (max-width: 900px) {
    .xoxo-packs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .xoxo-packs-grid {
        grid-template-columns: 1fr;
    }
}

.xoxo-pack-card {
    background: var(--xoxo-bg);
    border: 2px solid var(--xoxo-border);
    border-radius: var(--xoxo-border-radius);
    padding: 16px 12px;
    text-align: center;
    transition: all var(--xoxo-transition);
    position: relative;
    overflow: hidden;
}

.xoxo-pack-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--pack-color, var(--xoxo-primary));
}

.xoxo-pack-card:hover {
    border-color: var(--pack-color, var(--xoxo-primary));
    box-shadow: var(--xoxo-shadow-hover);
}

.xoxo-pack-header {
    margin-bottom: 16px;
}

.xoxo-pack-name {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--xoxo-text);
}

.xoxo-pack-count {
    font-size: 13px;
    color: var(--xoxo-text-muted);
}

.xoxo-pack-image {
    width: 120px;
    height: 160px;
    margin: 0 auto 16px;
    border-radius: var(--xoxo-border-radius);
    overflow: hidden;
}

.xoxo-pack-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.xoxo-pack-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
}

.xoxo-pack-icon {
    font-size: 48px;
}

.xoxo-pack-description {
    font-size: 13px;
    color: var(--xoxo-text-light);
    margin-bottom: 16px;
    line-height: 1.5;
}

.xoxo-pack-guarantees {
    padding: 8px 12px;
    background: #fafafa;
    border-radius: var(--xoxo-border-radius);
    margin-bottom: 16px;
    font-size: 13px;
}

.xoxo-guarantee-badge {
    display: inline-block;
    padding: 2px 8px;
    background: var(--xoxo-primary);
    color: #fff;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 4px;
}

.xoxo-pack-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.xoxo-pack-actions .xoxo-pack-cost {
    white-space: nowrap;
    font-size: 13px;
    color: #666;
}
/* v5.6.2 [TACHE 98 BUG 2] Decompte "Il vous manque X points" affiche au-dessus
   du bouton Obtenir quand le solde est insuffisant. Styling tight pour tenir
   dans le cadre du pack (word-wrap + line-height + font-size reduit). Couleur
   d'alerte douce (orange) pour signaler l'indisponibilite sans agresser. */
.xoxo-pack-actions .xoxo-pack-points-needed {
    display: block;
    width: 100%;
    font-size: 12px;
    font-weight: 600;
    color: #D97706;
    text-align: center;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: anywhere;
    padding: 2px 0;
}
.xoxo-pack-actions .xoxo-btn {
    width: 100%;
    font-size: 12px;
    padding: 8px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}
/* v5.6.2 [TACHE 98 BUG 2] Bouton Obtenir desactive : styling explicite (opacite
   + curseur) pour un rendu coherent entre navigateurs (`disabled` laisse parfois
   la couleur inchangee sur certains themes). */
.xoxo-pack-actions .xoxo-redeem-pack-btn-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================
   Exchange Form
   ============================ */
.xoxo-exchange-columns {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
}

.xoxo-exchange-column {
    flex: 1;
}

.xoxo-exchange-column h4 {
    font-size: 16px;
    margin: 0 0 12px;
    color: var(--xoxo-text);
}

.xoxo-exchange-selector {
    min-height: 120px;
    border: 2px dashed var(--xoxo-border);
    border-radius: var(--xoxo-border-radius);
    padding: 16px;
    margin-bottom: 12px;
    background: var(--xoxo-bg);
    transition: border-color var(--xoxo-transition);
}

.xoxo-exchange-selector:hover {
    border-color: var(--xoxo-primary);
}

.xoxo-exchange-balance {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    min-width: 80px;
}

.xoxo-exchange-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--xoxo-primary);
}

.xoxo-exchange-indicator {
    font-size: 32px;
    margin: 8px 0;
    color: var(--xoxo-text-muted);
}

/* ============================
   Modals
   ============================ */

/* v7.5.1 [TACHE 172] Popup de confirmation custom XoXoCards.confirm() / .alert()
   Surcharge .xoxo-modal pour z-index superieur (apparait au-dessus des autres modals
   ouvertes - ex: un confirm dans un modal de wishlist). Animation d'entree fluide.
   Variant 'danger' pour actions irreversibles (suppression, annulation). */
.xoxo-confirm-modal {
    z-index: 100000 !important;
}
.xoxo-confirm-modal .xoxo-modal-overlay {
    background: rgba(0, 0, 0, 0.55);
    animation: xoxoConfirmFadeIn .25s ease-out;
}
.xoxo-confirm-content {
    /* L'inline style est applique pour fonctionnalite minimale meme si CSS pas charge.
       Ce bloc affine pour theme + responsive. */
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}
.xoxo-confirm-modal .xoxo-confirm-close:hover {
    color: #1f2937 !important;
}
.xoxo-confirm-modal .xoxo-confirm-close:focus {
    outline: 2px solid #ff00aa;
    outline-offset: 2px;
    border-radius: 4px;
}
/* Variant DANGER : couleur rouge pour le bouton confirm (suppression, annulation
   irreversible, etc.). Surcharge .xoxo-btn-danger si non defini par ailleurs. */
.xoxo-confirm-danger .xoxo-confirm-icon {
    color: #dc2626;
}
.xoxo-btn-danger {
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    border-radius: 999px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}
.xoxo-btn-danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
}
.xoxo-btn-danger:focus {
    outline: 2px solid #dc2626;
    outline-offset: 2px;
}
@keyframes xoxoConfirmIn {
    from { opacity: 0; transform: translateY(-20px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes xoxoConfirmFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Responsive : sur mobile la popup occupe quasi tout l'ecran */
@media (max-width: 480px) {
    .xoxo-confirm-content {
        max-width: 95% !important;
        margin: 0 auto;
    }
    .xoxo-confirm-footer {
        flex-direction: column-reverse;
    }
    .xoxo-confirm-footer .xoxo-btn {
        width: 100%;
    }
}

.xoxo-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.xoxo-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
}

.xoxo-modal-content {
    position: relative;
    background: var(--xoxo-bg);
    border-radius: var(--xoxo-border-radius);
    padding: 32px;
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

.xoxo-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--xoxo-bg);
    border: none;
    font-size: 42px;
    cursor: pointer;
    color: var(--xoxo-text-muted);
    line-height: 1;
    transition: color var(--xoxo-transition), background var(--xoxo-transition);
    z-index: 10;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 0;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.xoxo-modal-close:hover {
    color: var(--xoxo-primary);
    background: rgba(255, 0, 170, 0.08);
}

/* Masquer les artefacts scrollbar dans les modals */
.xoxo-modal-content::-webkit-scrollbar {
    width: 6px;
}
.xoxo-modal-content::-webkit-scrollbar-track {
    background: transparent;
}
.xoxo-modal-content::-webkit-scrollbar-thumb {
    background: var(--xoxo-border);
    border-radius: 3px;
}
.xoxo-modal-content::-webkit-scrollbar-thumb:hover {
    background: var(--xoxo-text-muted);
}
.xoxo-modal-content {
    scrollbar-width: thin;
    scrollbar-color: var(--xoxo-border) transparent;
}

/* ============================
   QR Scanner
   ============================ */
.xoxo-scanner-zone {
    max-width: 400px;
    margin: 0 auto 24px;
}

.xoxo-qr-reader {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--xoxo-border-radius);
    overflow: hidden;
    background: #000;
    margin-bottom: 16px;
}

.xoxo-scanner-controls {
    text-align: center;
}

.xoxo-scanner-manual {
    max-width: 500px;
    margin: 0 auto 24px;
    padding: 24px;
    background: var(--xoxo-bg);
    border-radius: var(--xoxo-border-radius);
    border: 1px solid var(--xoxo-border);
}

.xoxo-scanner-result {
    max-width: 500px;
    margin: 0 auto;
}

.xoxo-validation-card {
    padding: 24px;
    background: var(--xoxo-bg);
    border-radius: var(--xoxo-border-radius);
    border: 2px solid var(--xoxo-success);
}

/* ============================
   Card Generator
   ============================ */
.xoxo-generator-layout {
    display: flex;
    gap: 32px;
}

.xoxo-generator-form {
    flex: 1;
}

.xoxo-generator-preview {
    width: 280px;
    flex-shrink: 0;
    max-height: 60vh;
    overflow: hidden;
}

.xoxo-card-preview {
    width: 250px;
    max-height: 400px;
    border: 2px solid var(--xoxo-border);
    border-radius: var(--xoxo-border-radius);
    overflow: hidden;
    background: var(--xoxo-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 20px;
}

.xoxo-card-preview-container {
    max-height: 400px;
    overflow: hidden;
}

.xoxo-card-preview-container canvas {
    max-width: 100%;
    max-height: 400px;
}

.xoxo-card-preview-placeholder {
    text-align: center;
    padding: 20px;
    color: var(--xoxo-text-muted);
}

/* ============================
   Loading
   ============================ */
.xoxo-loading {
    text-align: center;
    padding: 40px;
    color: var(--xoxo-text-muted);
}

/* ============================
   Empty State
   ============================ */
.xoxo-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--xoxo-text-muted);
    background: var(--xoxo-bg);
    border-radius: var(--xoxo-border-radius);
}

/* ============================
   Points Info
   ============================ */
.xoxo-points-info {
    padding: 20px;
    background: var(--xoxo-bg);
    border-radius: var(--xoxo-border-radius);
    margin-bottom: 24px;
    border: 1px solid var(--xoxo-border);
}

.xoxo-points-info h4 {
    margin: 0 0 12px;
    color: var(--xoxo-text);
}

.xoxo-points-info ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.xoxo-points-info li {
    padding: 6px 0;
    font-size: 14px;
    color: var(--xoxo-text-light);
}

.xoxo-points-info li::before {
    content: '+';
    color: var(--xoxo-success);
    font-weight: 700;
    margin-right: 8px;
}

/* ============================
   Points History


/* ============================
   Autocomplete Dropdown
   ============================ */
.xoxo-autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--xoxo-bg);
    border: 2px solid var(--xoxo-primary);
    border-top: none;
    border-radius: 0 0 var(--xoxo-border-radius) var(--xoxo-border-radius);
    max-height: 250px;
    overflow-y: auto;
    z-index: 1000;
    /* v5.3.19 - BUG 2 : masque en base, visible uniquement si .active */
    display: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* v5.2.0 : Items autocompletion recherche echanges */
.xoxo-ac-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid var(--xoxo-border);
    font-size: 13px;
}

.xoxo-ac-item:last-child {
    border-bottom: none;
}

.xoxo-ac-item:hover {
    background: var(--xoxo-primary-light);
}

.xoxo-autocomplete-dropdown.active {
    display: block;
}

.xoxo-autocomplete-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background var(--xoxo-transition);
    border-bottom: 1px solid var(--xoxo-border);
}

.xoxo-autocomplete-item:last-child {
    border-bottom: none;
}

.xoxo-autocomplete-item:hover {
    background: var(--xoxo-primary-light);
}

.xoxo-autocomplete-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.xoxo-autocomplete-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.xoxo-autocomplete-name {
    font-weight: 600;
    color: var(--xoxo-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.xoxo-autocomplete-meta {
    font-size: 12px;
    color: var(--xoxo-text-muted);
    display: block;
}

.xoxo-form-group {
    position: relative;
}

/* ============================
   Card Thumbnail (format timbre)
   ============================ */
.xoxo-card-thumbnail {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: var(--xoxo-bg);
    border: 1px solid var(--xoxo-border);
    border-radius: var(--xoxo-border-radius);
    cursor: pointer;
    transition: all var(--xoxo-transition);
    margin-bottom: 8px;
}

.xoxo-card-thumbnail:hover {
    border-color: var(--xoxo-primary);
    box-shadow: var(--xoxo-primary-glow);
}

.xoxo-card-thumbnail-img {
    width: 40px;
    height: 56px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

.xoxo-card-thumbnail-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--xoxo-text);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xoxo-card-thumbnail-remove {
    width: 24px;
    height: 24px;
    border: none;
    background: var(--xoxo-danger);
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--xoxo-transition);
}

.xoxo-card-thumbnail-remove:hover {
    background: #c82333;
    transform: scale(1.1);
}

/* ============================
   Modal Cards Grid
   ============================ */
.xoxo-modal-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    max-height: 400px;
    overflow-y: auto;
    padding: 4px;
}

.xoxo-modal-card-item {
    cursor: pointer;
    border-radius: var(--xoxo-border-radius);
    overflow: hidden;
    transition: all var(--xoxo-transition);
    border: 2px solid transparent;
}

/* ============================
   Scanner QR - Design moderne
   ============================ */
.xoxo-cards-scanner {
    max-width: 100%;
    margin: 0 auto;
}

/* Sur mobile, conserver le comportement actuel avec max-width limite */
@media (max-width: 768px) {
    .xoxo-cards-scanner {
        max-width: 600px;
    }
}

.xoxo-scanner-hero {
    text-align: center;
    padding: 32px 20px;
    background: linear-gradient(135deg, var(--xoxo-primary), #FF66CC);
    border-radius: var(--xoxo-border-radius);
    color: #fff;
    margin-bottom: 24px;
}

.xoxo-scanner-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.xoxo-scanner-hero h3 {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 700;
}

.xoxo-scanner-hero .xoxo-subtitle {
    margin: 0;
    opacity: 0.9;
    color: #fff;
}

.xoxo-scanner-content {
    margin-bottom: 32px;
}

.xoxo-scanner-card {
    background: var(--xoxo-bg);
    border-radius: var(--xoxo-border-radius);
    padding: 24px;
    border: 1px solid var(--xoxo-border);
}

.xoxo-scanner-zone {
    text-align: center;
    margin-bottom: 24px;
}

.xoxo-qr-reader {
    width: 100%;
    max-width: 300px;
    aspect-ratio: 1;
    margin: 0 auto 20px;
    border-radius: var(--xoxo-border-radius);
    overflow: hidden;
    background: #1a1a2e;
    position: relative;
}

.xoxo-qr-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #fff;
    padding: 20px;
}

.xoxo-qr-frame {
    width: 150px;
    height: 150px;
    border: 3px solid var(--xoxo-primary);
    border-radius: 12px;
    position: relative;
    margin-bottom: 16px;
    animation: qr-pulse 2s infinite;
}

.xoxo-qr-frame::before,
.xoxo-qr-frame::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    border: 3px solid var(--xoxo-primary);
}

.xoxo-qr-frame::before {
    top: -3px;
    left: -3px;
    border-right: none;
    border-bottom: none;
    border-radius: 8px 0 0 0;
}

.xoxo-qr-frame::after {
    bottom: -3px;
    right: -3px;
    border-left: none;
    border-top: none;
    border-radius: 0 0 8px 0;
}

/* v5.3.12 : Spinner inline (utilise par le bouton "Ajout en cours..." dans wishlist.js confirmAddToWishlist). CSS pur, zero dependance FontAwesome. */
@keyframes xoxo-spin {
    to { transform: rotate(360deg); }
}

/* v5.3.14 - TACHE 70 : Etapes numerotees sur page Proposer (onglet echanges). Design propre, accessible. */
.xoxo-propose-steps {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0;
}
.xoxo-propose-steps .xoxo-step {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.xoxo-propose-steps .xoxo-step:hover {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.xoxo-propose-steps .xoxo-step-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 22px 14px;
    background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%);
    border-bottom: 1px solid #f9a8d4;
}
.xoxo-propose-steps .xoxo-step-number {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #FF00AA;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
    box-shadow: 0 3px 10px rgba(255, 0, 170, 0.35);
    letter-spacing: -0.01em;
}
.xoxo-propose-steps .xoxo-step-title-wrap {
    flex: 1;
    min-width: 0;
}
.xoxo-propose-steps .xoxo-step-title {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.3;
}
.xoxo-propose-steps .xoxo-step-desc {
    margin: 0;
    font-size: 13px;
    color: #4b5563;
    line-height: 1.55;
}
.xoxo-propose-steps .xoxo-step-body {
    padding: 20px 22px;
}
.xoxo-propose-steps .xoxo-step-1 .xoxo-step-body {
    text-align: left;
}
/* Mobile */
@media (max-width: 640px) {
    .xoxo-propose-steps .xoxo-step-header {
        padding: 16px 14px 12px;
        gap: 12px;
    }
    .xoxo-propose-steps .xoxo-step-number {
        width: 34px;
        height: 34px;
        font-size: 16px;
    }
    .xoxo-propose-steps .xoxo-step-title {
        font-size: 15px;
    }
    .xoxo-propose-steps .xoxo-step-body {
        padding: 16px 14px;
    }
}

/* v5.3.14 - TACHE 70 : bouton Reinitialiser recherche (style outline discret) */
#xoxo-search-reset:hover {
    border-color: #FF00AA;
    color: #FF00AA;
}

@keyframes qr-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.xoxo-qr-placeholder p {
    font-size: 13px;
    opacity: 0.7;
    margin: 0;
}

.xoxo-scanner-controls {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.xoxo-btn-icon {
    margin-right: 6px;
}

.xoxo-scanner-divider {
    display: flex;
    align-items: center;
    margin: 24px 0;
}

.xoxo-scanner-divider::before,
.xoxo-scanner-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--xoxo-border);
}

.xoxo-scanner-divider span {
    padding: 0 16px;
    color: var(--xoxo-text-muted);
    font-size: 13px;
    text-transform: uppercase;
}

.xoxo-scanner-manual h4 {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--xoxo-text);
}

/* Résultat de validation */
.xoxo-scanner-result {
    margin-top: 24px;
}

.xoxo-validation-card {
    padding: 24px;
    background: var(--xoxo-bg);
    border-radius: var(--xoxo-border-radius);
    border: 2px solid var(--xoxo-success);
    text-align: center;
}

.xoxo-validation-success {
    color: var(--xoxo-success);
}
/* v7.10.1 [TACHE 181 RCA] FIX accolade fermante manquante (ROOT CAUSE bug B2).
   L accolade fermante de .xoxo-validation-success etait absente, ce qui faisait
   que le parseur CSS du navigateur considerait que la declaration etait toujours
   ouverte. Le commentaire de section Wishlist suivant etait avale comme valeur
   de la propriete color, puis l arrivee du selecteur .xoxo-cards-wishlist
   provoquait une erreur Identifier is expected. Tout le bloc Wishlist
   (.xoxo-wishlist-... et .xoxo-wl-...) etait silencieusement IGNORE par le
   navigateur depuis [version inconnue]. Cela explique l apparence cassee du
   mini-guide 3 etapes en v7.10.0 avec numeros natifs sur l element ol visibles.
   Sans ce fix, MEME la refonte v7.10.1 du CSS ne s applique pas. Ce bug
   pre-existait dans la baseline v7.10.0 (verifie par css-tree parser : 2
   erreurs de syntaxe a la meme position). */

/* ============================
   Wishlist
   ============================ */
.xoxo-cards-wishlist {
    max-width: 1200px;
}

.xoxo-wishlist-header {
    margin-bottom: 24px;
}

.xoxo-wishlist-header h3 {
    margin: 0 0 8px;
    color: var(--xoxo-text);
}

.xoxo-wishlist-actions {
    display: flex;
    gap: 12px;
    /* v5.3.18 - BUG 1 : espacement 25px entre le bouton "Ajouter des cartes" et la grille */
    margin-bottom: 25px;
}

.xoxo-wishlist-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.xoxo-wishlist-card {
    position: relative;
}

/* v5.3.11 : Bouton X retrait - <div role="button"> avec styles INLINE dans wishlist.js (spec 1,0,0,0). 
   Ces regles CSS sont un filet de securite pour (a) neutraliser tout pseudo-element ::before/::after du theme et (b) garantir l'outline focus. */
.xoxo-wishlist-card .xoxo-wishlist-remove-btn {
    box-sizing: border-box;
}
.xoxo-wishlist-card .xoxo-wishlist-remove-btn::before,
.xoxo-wishlist-card .xoxo-wishlist-remove-btn::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: 0 !important;
}
.xoxo-wishlist-card .xoxo-wishlist-remove-btn:focus-visible {
    outline: 2px solid #FF00AA;
    outline-offset: 2px;
}

/* v5.2.0 : Label serie/puzzle sur les vignettes wishlist */
.xoxo-wishlist-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(26, 26, 46, 0.85);
    color: #e5e7eb;
    padding: 3px 6px;
    font-size: 9px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    backdrop-filter: blur(4px);
}

/* État vide wishlist */
.xoxo-wishlist-empty {
    text-align: center;
    padding: 60px 20px;
    background: var(--xoxo-bg);
    border-radius: var(--xoxo-border-radius);
}

.xoxo-empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

.xoxo-wishlist-empty h4 {
    margin: 0 0 8px;
    color: var(--xoxo-text);
}

.xoxo-wishlist-empty p {
    color: var(--xoxo-text-muted);
    margin-bottom: 20px;
}

/* ============================================================
   v7.10.0 [TACHE 180 - WISHLIST UX] Refonte page Wishlist FO
   Toutes les nouvelles classes sont préfixées .xoxo-wl-* pour
   isolation. Aucune ancienne règle modifiée (back-compat 100%).
   ============================================================ */

/* --- HERO 3 étapes — v7.10.1 [TACHE 181] REFONTE TIMELINE HORIZONTALE STYLE A ---
   Refonte complete du mini-guide pedagogique (3 etapes Selectionnez / Soyez alerte
   / Echangez). Choix UX user (Q4=A, Q5=A, Q6=B) :
   - Desktop : timeline horizontale avec icone-top, pastille-num au centre,
     libelle-bottom, lignes pointillees roses degradees entre etapes.
   - Mobile (<720px) : stack vertical avec connecteurs verticaux (ligne pointillee
     + chevron pointant vers le bas).
   - Hover discret : translateY(-2px) + ombre rose intensifiee.
   Defense forte contre theme SocialV qui injecte `list-style: decimal !important`
   sur tous les <ol> (RCA bug B2 v7.10.0 : numeros natifs visibles dans la zone). */
.xoxo-wl-hero {
    padding-bottom: 26px;
}
.xoxo-wl-steps {
    /* Defense level 1 : neutralisation theme SocialV (decimal + padding-left:40px) */
    list-style: none !important;
    padding-left: 0 !important;

    margin: 22px 0 0;
    padding: 24px 18px 18px;
    display: flex;
    align-items: stretch;
    gap: 0;
    background: #ffffff;
    border: 1px solid #f5dde9;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(255, 0, 170, 0.05);
    position: relative;
}
/* Defense level 2 : neutralisation ::marker injecte par certains themes/parents */
.xoxo-wl-steps > li::marker { content: '' !important; }

/* Une etape = colonne flex (icone -> pastille -> texte) */
.xoxo-wl-step {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: 4px 8px 6px;
    border-radius: 12px;
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
    position: relative;
}
/* Hover discret (Q6=B) */
.xoxo-wl-step:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(255, 0, 170, 0.10);
    background: rgba(255, 245, 250, 0.6);
}
/* Icone au-dessus de la pastille */
.xoxo-wl-step-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 0, 170, 0.10);
    color: #FF00AA;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    transition: background 0.22s ease;
}
.xoxo-wl-step:hover .xoxo-wl-step-icon {
    background: rgba(255, 0, 170, 0.16);
}
/* Pastille numerotee (au centre de la timeline, anneau blanc pour relief) */
.xoxo-wl-step-num {
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF00AA 0%, #d4008e 100%);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(255, 0, 170, 0.42);
    margin-bottom: 12px;
    border: 3px solid #ffffff;
}
/* Texte sous la pastille */
.xoxo-wl-step-text {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.35;
    width: 100%;
}
.xoxo-wl-step-text strong {
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 4px;
    letter-spacing: 0.1px;
}
.xoxo-wl-step-text span {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
}
/* Connecteur entre etapes : ligne pointillee rose degradee + chevron */
.xoxo-wl-step-arrow {
    flex: 0 1 80px;
    min-width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* Aligne avec centre vertical pastilles (icone 44 + gap 10 = 54 -> + demi-pastille 16) */
    padding-top: 54px;
    pointer-events: none;
    user-select: none;
}
.xoxo-wl-step-arrow::before {
    content: '';
    position: absolute;
    top: calc(54px + 16px - 1px);
    left: 6px;
    right: 6px;
    height: 2px;
    background-image: linear-gradient(
        to right,
        rgba(255, 0, 170, 0) 0%,
        rgba(255, 0, 170, 0.55) 25%,
        rgba(255, 0, 170, 0.85) 50%,
        rgba(255, 0, 170, 0.55) 75%,
        rgba(255, 0, 170, 0) 100%
    );
    /* Pointille via mask pour effet dashed homogene */
    -webkit-mask-image: repeating-linear-gradient(to right, #000 0 4px, transparent 4px 8px);
            mask-image: repeating-linear-gradient(to right, #000 0 4px, transparent 4px 8px);
}
.xoxo-wl-step-arrow svg {
    position: relative;
    z-index: 1;
    margin-top: 16px;
    background: #ffffff;
    border-radius: 50%;
    padding: 2px;
    color: #FF00AA;
    opacity: 0.85;
}
/* Responsive : <720px -> stack vertical avec connecteurs verticaux (Q5=A) */
@media (max-width: 720px) {
    .xoxo-wl-steps {
        flex-direction: column;
        align-items: stretch;
        padding: 18px 14px;
        gap: 4px;
    }
    .xoxo-wl-step {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 14px;
        padding: 10px 8px;
    }
    .xoxo-wl-step-icon { margin-bottom: 0; }
    .xoxo-wl-step-num {
        margin-bottom: 0;
        align-self: center;
    }
    .xoxo-wl-step-text { flex: 1 1 auto; }
    /* Connecteur vertical : ligne pointillee verticale + chevron pointant vers le bas */
    .xoxo-wl-step-arrow {
        flex: 0 0 auto;
        padding-top: 0;
        height: 36px;
        width: 100%;
        transform: none;
        align-items: center;
        justify-content: flex-start;
        /* Aligne le chevron sous le centre de l'icone (padding 14 + demi-icone 22 - demi-svg 9) */
        padding-left: calc(14px + 22px - 9px);
    }
    .xoxo-wl-step-arrow::before {
        top: 0;
        bottom: 0;
        left: calc(14px + 22px); /* axe vertical aligne avec centre icone */
        right: auto;
        width: 2px;
        height: auto;
        background-image: linear-gradient(
            to bottom,
            rgba(255, 0, 170, 0) 0%,
            rgba(255, 0, 170, 0.85) 50%,
            rgba(255, 0, 170, 0) 100%
        );
        -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 4px, transparent 4px 8px);
                mask-image: repeating-linear-gradient(to bottom, #000 0 4px, transparent 4px 8px);
    }
    .xoxo-wl-step-arrow svg {
        margin-top: 0;
        transform: rotate(90deg); /* chevron pointe vers le bas */
        background: #ffffff;
        border-radius: 50%;
        padding: 1px;
    }
}

/* --- BARRE D'ACTIONS : toggle + bouton ajouter --- */
.xoxo-wl-actionbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 22px 0 14px;
}

/* --- TOGGLE PILULE LARGE (segmented control style C) --- */
.xoxo-wl-toggle {
    display: inline-flex;
    align-items: stretch;
    background: #f5f6f8;
    padding: 5px;
    border-radius: 999px;
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.06),
        0 1px 0 rgba(255, 255, 255, 0.6);
    flex: 1 1 auto;
    max-width: 560px;
    min-width: 280px;
}
.xoxo-wl-toggle-btn {
    flex: 1 1 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border: 0;
    background: transparent;
    border-radius: 999px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition:
        background 0.22s ease,
        color 0.22s ease,
        box-shadow 0.22s ease,
        transform 0.18s ease;
    -webkit-appearance: none;
    appearance: none;
    white-space: nowrap;
    user-select: none;
}
.xoxo-wl-toggle-btn:hover:not(.xoxo-wl-toggle-btn--active) {
    color: #FF00AA;
    background: rgba(255, 0, 170, 0.06);
}
.xoxo-wl-toggle-btn:focus-visible {
    outline: 2px solid #FF00AA;
    outline-offset: 2px;
}
.xoxo-wl-toggle-btn--active {
    background: linear-gradient(135deg, #FF00AA 0%, #e6009a 100%);
    color: #ffffff;
    box-shadow:
        0 4px 12px rgba(255, 0, 170, 0.35),
        0 1px 2px rgba(0, 0, 0, 0.08);
    transform: translateY(-0.5px);
}
.xoxo-wl-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.xoxo-wl-toggle-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);
    color: inherit;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
}
.xoxo-wl-toggle-btn--active .xoxo-wl-toggle-count {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}
.xoxo-wl-toggle-label {
    font-weight: 600;
    letter-spacing: 0.01em;
}
@media (max-width: 480px) {
    .xoxo-wl-toggle {
        min-width: 0;
        width: 100%;
    }
    .xoxo-wl-toggle-btn {
        padding: 9px 10px;
        font-size: 12px;
    }
    .xoxo-wl-toggle-label {
        display: none;
    }
}

/* --- Bouton "+ Ajouter des cartes" dans la barre d'actions --- */
.xoxo-wl-add-wrap {
    flex: 0 0 auto;
}
.xoxo-wl-add-btn {
    white-space: nowrap;
}
@media (max-width: 600px) {
    .xoxo-wl-actionbar {
        flex-direction: column;
        align-items: stretch;
    }
    .xoxo-wl-add-wrap {
        width: 100%;
    }
    .xoxo-wl-add-btn {
        width: 100%;
        justify-content: center;
    }
}

/* --- Bandeau hint contextuel --- */
.xoxo-wl-hint {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    padding: 10px 14px;
    background: linear-gradient(90deg, rgba(255, 0, 170, 0.04) 0%, rgba(255, 0, 170, 0.01) 100%);
    border-left: 3px solid #FF00AA;
    border-radius: 8px;
    color: #6b7280;
    font-size: 12.5px;
    line-height: 1.45;
}
.xoxo-wl-hint-icon {
    flex-shrink: 0;
    color: #FF00AA;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.xoxo-wl-hint-text strong {
    color: #1f2937;
    font-weight: 600;
}

/* --- Vues toggle (animation simple) --- */
.xoxo-wl-view {
    animation: xoxoWlFadeIn 0.22s ease both;
}
.xoxo-wl-view[hidden] {
    display: none !important;
}
@keyframes xoxoWlFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Grille des correspondances --- */
.xoxo-wl-matches-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}
@media (max-width: 480px) {
    .xoxo-wl-matches-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

/* --- Carte d'une correspondance --- */
.xoxo-wl-match-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #ebebef;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;
}
.xoxo-wl-match-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 0, 170, 0.12), 0 1px 3px rgba(0, 0, 0, 0.04);
    border-color: rgba(255, 0, 170, 0.3);
}
.xoxo-wl-match-img {
    position: relative;
    aspect-ratio: 3 / 4;
    background: #f3f4f6;
    overflow: hidden;
}
.xoxo-wl-match-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}
.xoxo-wl-match-card:hover .xoxo-wl-match-img img {
    transform: scale(1.04);
}

/* ============================
   v8.1.3 [TACHE 187 BUG 2] HOTFIX VISUEL CORRESPONDANCES WISHLIST
   ----------------------------
   CONTEXTE : avant v8.1.3 les cartes de l'onglet "Correspondances" etaient
   affichees en couleur + nettes, ce qui tuait l'interet GAMEPLAY (le membre
   pouvait deja "voir" la carte sans la posseder, donc plus besoin d'acheter
   des packs). Or par definition, dans Correspondances, les cartes affichees
   sont des cartes que le membre veut (sa wishlist) MAIS NE POSSEDE PAS
   encore -> elles doivent suivre la regle visuelle UNIFIEE des cartes
   non-possedees v7.0.11 [TACHE 162] : grayscale + blur + overlay logo XoXo.
   ----------------------------
   APPROCHE GREEN MODE Q2=a : reutilisation de la convention .xoxo-card-missing
   (deja appliquee dans Ma Collection / Album / Modal echanges / Detail / etc.)
   en ajoutant la classe `xoxo-card-missing` au wrapper `.xoxo-wl-match-card`
   (cf wishlist.js renderWishlistMatches). Ici on adapte les selecteurs aux
   noms de classes specifiques du markup Wishlist Correspondances
   (`.xoxo-wl-match-img` au lieu de `.xoxo-card-image`) pour appliquer le
   meme traitement visuel exact que cards.css L.428-498.
   ============================ */
.xoxo-wl-match-card.xoxo-card-missing {
    opacity: 0.85;
}
.xoxo-wl-match-card.xoxo-card-missing .xoxo-wl-match-img > img {
    filter: grayscale(100%) blur(8px);
    -webkit-filter: grayscale(100%) blur(8px);
    will-change: filter;
}
/* Owner avatar (pastille membre) DOIT rester net pour la reconnaissance sociale.
   Garde-fou explicite identique a cards.css L.459-464 (regle produit TACHE 90). */
.xoxo-wl-match-card.xoxo-card-missing .xoxo-wl-match-owner img,
.xoxo-wl-match-card.xoxo-card-missing .xoxo-wl-match-owner-avatar-fallback {
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
}
.xoxo-wl-match-card.xoxo-card-missing .xoxo-wl-match-img {
    overflow: hidden;
    position: relative;
}
/* Overlay logo XoXo Cards centre absolu (identique a cards.css L.480-498).
   Reutilise le meme asset embarque (public/assets/images/logo-overlay.png)
   pour garantir la coherence pixel-perfect avec les autres ecrans non-possedes. */
.xoxo-wl-match-card.xoxo-card-missing .xoxo-wl-match-img::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    height: 50%;
    background-image: url('../images/logo-overlay.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 5;
    opacity: 0.95;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
    -webkit-filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}
/* Au hover, on annule legerement le scale image car le blur le rendrait
   visuellement instable */
.xoxo-wl-match-card.xoxo-card-missing:hover .xoxo-wl-match-img > img {
    transform: none;
}

/* Badge level overlay bottom-left de l'image */
.xoxo-wl-match-level {
    position: absolute;
    bottom: 8px;
    left: 8px;
    padding: 3px 8px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
/* Pastille "Disponible" verte top-right */
.xoxo-wl-match-avail {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: rgba(16, 185, 129, 0.95);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35);
}
.xoxo-wl-match-avail::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

/* Info de la carte */
.xoxo-wl-match-info {
    padding: 10px 12px 8px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.xoxo-wl-match-name {
    margin: 0 0 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: #111827;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 32px;
}

/* Bloc propriétaire (avatar + nom) */
.xoxo-wl-match-owner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    margin: 0 0 10px;
    background: rgba(255, 0, 170, 0.04);
    border: 1px solid rgba(255, 0, 170, 0.10);
    border-radius: 8px;
    font-size: 11.5px;
    color: #6b7280;
    line-height: 1.2;
}
.xoxo-wl-match-owner img,
.xoxo-wl-match-owner-avatar-fallback {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    background: #e5e7eb;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.xoxo-wl-match-owner-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: #1f2937;
}
.xoxo-wl-match-owner-label {
    color: #9ca3af;
    font-weight: 500;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 1px;
    display: block;
}

/* CTA "Proposer un échange" */
.xoxo-wl-match-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: auto;
    padding: 8px 12px;
    background: linear-gradient(135deg, #FF00AA 0%, #e6009a 100%);
    color: #ffffff;
    border: 0;
    border-radius: 8px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: 0 2px 6px rgba(255, 0, 170, 0.25);
}
.xoxo-wl-match-cta:hover,
.xoxo-wl-match-cta:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 0, 170, 0.4);
    background: linear-gradient(135deg, #e6009a 0%, #cc0089 100%);
    color: #ffffff;
    text-decoration: none;
    outline: none;
}
.xoxo-wl-match-cta:focus-visible {
    outline: 2px solid #FF00AA;
    outline-offset: 2px;
}
.xoxo-wl-match-cta:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(255, 0, 170, 0.25);
}
.xoxo-wl-match-cta svg {
    flex-shrink: 0;
}

/* --- État vide enrichi --- */
.xoxo-wl-empty {
    text-align: center;
    padding: 50px 24px;
    background: #ffffff;
    border: 1px dashed #e5e7eb;
    border-radius: 14px;
    margin: 12px 0;
}
.xoxo-wl-empty-illu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: rgba(255, 0, 170, 0.06);
    color: #FF00AA;
}
.xoxo-wl-empty-title {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
}
.xoxo-wl-empty-desc {
    margin: 0 auto 22px;
    max-width: 460px;
    color: #6b7280;
    font-size: 13.5px;
    line-height: 1.5;
}
.xoxo-wl-empty-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Modal wishlist */
.xoxo-wishlist-modal-content {
    max-width: 850px;
}

/* v5.3.11 : Onglets filtre modal - <div role="button"> avec styles INLINE dans bp-wishlist.php.
   Ces regles CSS sont un filet de securite pour neutraliser tout pseudo-element ::before/::after du theme SocialV qui pourrait creer une forme "tab-folder trapeze". */
#xoxo-wishlist-modal .xoxo-wishlist-tabs .xoxo-wishlist-tab::before,
#xoxo-wishlist-modal .xoxo-wishlist-tabs .xoxo-wishlist-tab::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: 0 !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
}
#xoxo-wishlist-modal .xoxo-wishlist-tabs .xoxo-wishlist-tab:focus-visible {
    outline: 2px solid #FF00AA !important;
    outline-offset: 2px !important;
}

/* v5.2.0 : Grille modal wishlist — memes dimensions que Ma collection */
.xoxo-wishlist-modal-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    max-height: 420px;
    overflow-y: auto;
    padding: 4px;
    margin-bottom: 15px;
}

/* v5.3.9 : Carte selectionnable dans le modal - clic ouvre popup detail, checkbox dediee toggle selection */
.xoxo-modal-selectable {
    cursor: pointer;
    transition: all 0.2s;
}

.xoxo-modal-selectable:hover {
    transform: translateY(-2px);
}

.xoxo-modal-selectable.xoxo-modal-selected {
    outline: 3px solid #FF00AA;
    outline-offset: -1px;
    border-radius: var(--xoxo-border-radius);
}

/* v5.3.9 : Checkbox de selection - positionnee sous le titre, centree (remplace l'overlay image) */
.xoxo-wishlist-select {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 8px;
    padding-top: 6px;
}

.xoxo-wishlist-select-cb {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #d1d5db;
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
    position: relative;
    transition: all 0.18s ease;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
}

.xoxo-wishlist-select-cb:hover {
    border-color: #FF00AA;
}

.xoxo-wishlist-select-cb:checked {
    background: #FF00AA;
    border-color: #FF00AA;
}

.xoxo-wishlist-select-cb:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.xoxo-wishlist-select-cb:focus-visible {
    outline: 2px solid rgba(255, 0, 170, 0.35);
    outline-offset: 2px;
}

/* v5.2.0 : Carte selectable dans le modal echanges */
.xoxo-modal-card-selectable {
    cursor: pointer;
    transition: all 0.2s;
}

.xoxo-modal-card-selectable:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.xoxo-modal-card-active {
    outline: 3px solid #FF00AA;
    outline-offset: -1px;
    border-radius: var(--xoxo-border-radius);
}

/* v5.2.0 : Coche de selection dans les modals echanges */
.xoxo-exchange-check {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: all 0.2s;
    color: transparent;
    font-size: 11px;
}

.xoxo-exchange-check.checked {
    background: #FF00AA;
    border-color: #FF00AA;
    color: #fff;
}


.xoxo-modal-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    max-height: 400px;
    overflow-y: auto;
    padding: 4px;
    margin-bottom: 20px;
}

.xoxo-modal-card-item {
    position: relative;
    cursor: pointer;
    border: 2px solid var(--xoxo-border);
    border-radius: var(--xoxo-border-radius);
    overflow: hidden;
    transition: all var(--xoxo-transition);
}

.xoxo-modal-card-item img {
    width: 100%;
    aspect-ratio: 5 / 7;
    object-fit: cover;
    display: block;
}

.xoxo-modal-card-item:hover {
    border-color: var(--xoxo-primary);
}

.xoxo-modal-card-item.selected {
    border-color: var(--xoxo-primary);
    box-shadow: var(--xoxo-primary-glow);
}

.xoxo-modal-card-item img {
    width: 100%;
    aspect-ratio: 5/7;
    object-fit: cover;
}

.xoxo-modal-card-name {
    padding: 6px 8px;
    font-size: 11px;
}
/* v7.10.1 [TACHE 181 RCA] FIX 3e accolade fermante manquante (meme pattern que
   le bug ROOT CAUSE B2 ligne 1521 et le commentaire orphelin pre-Historique
   des points). Pre-existait dans la baseline v7.10.0. */

/* ============================
   Puzzles - Container fond blanc
   ============================ */
.xoxo-cards-puzzles {
    max-width: 1200px;
}

.xoxo-puzzles-container {
    background: var(--xoxo-bg);
    border-radius: var(--xoxo-border-radius);
    padding: 24px;
    border: 1px solid var(--xoxo-border);
}

.xoxo-puzzles-header {
    margin-bottom: 24px;
}

.xoxo-puzzles-header h3 {
    margin: 0 0 8px;
    color: var(--xoxo-text);
}

.xoxo-puzzles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

/* v7.10.1 [TACHE 181 RCA] FIX 4e bug pre-existant : 5 proprietes CSS
   orphelines sans selecteur (font-weight, white-space, overflow,
   text-overflow, background). Probable fragment perdu lors d une edition
   anterieure. Encapsulees dans un selecteur factice neutre pour rendre le
   CSS valide sans changer le rendu (aucun element n a cet attribut). Si
   un visuel manque, a investiguer dans une tache dediee (probable
   .xoxo-modal-card-name suite). */
[data-xoxo-deprecated-orphan-2471] {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--xoxo-bg);
}

.xoxo-modal-card-level {
    padding: 2px 8px;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
}

.xoxo-modal-card-check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: var(--xoxo-primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    opacity: 0;
    transition: opacity var(--xoxo-transition);
}

.xoxo-modal-card-item.selected .xoxo-modal-card-check {
    opacity: 1;
}

.xoxo-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0 0;
    margin-top: 16px;
    border-top: 1px solid var(--xoxo-border);
    gap: 24px;
}

#xoxo-selected-count {
    font-size: 14px;
    color: var(--xoxo-text-muted);
    flex-shrink: 0;
}

.xoxo-modal-footer .xoxo-btn {
    /* Bouton aligné à droite par défaut grâce à justify-content: flex-end */
}

/* Section correspondances */
.xoxo-wishlist-matches-section {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--xoxo-border);
}

/* v5.2.0 : Responsive wishlist — aligner sur la grille cartes */
@media (max-width: 768px) {
    .xoxo-wishlist-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .xoxo-modal-cards-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .xoxo-wishlist-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .xoxo-modal-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.xoxo-match-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--xoxo-bg);
    border-radius: var(--xoxo-border-radius);
    margin-bottom: 12px;
    border: 1px solid var(--xoxo-border);
}

.xoxo-match-member {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.xoxo-match-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.xoxo-match-info {
    display: flex;
    flex-direction: column;
}

.xoxo-match-info strong {
    color: var(--xoxo-text);
}

.xoxo-match-info span {
    font-size: 12px;
    color: var(--xoxo-text-muted);
}

.xoxo-match-cards {
    display: flex;
    gap: 6px;
}

.xoxo-match-card-thumb {
    width: 40px;
    height: 56px;
    border-radius: 4px;
    object-fit: cover;
}

.xoxo-btn-small {
    padding: 8px 16px;
    font-size: 12px;
}

/* v7.10.1 [TACHE 181 RCA] FIX 5e bug pre-existant : suppression d une
   accolade fermante orpheline qui n avait pas d ouverture associee. Cette
   accolade en trop provoquait un PARSE ERROR Selector is expected. Pre-existait
   dans la baseline v7.10.0. */

.xoxo-validation-error {
    border-color: var(--xoxo-danger);
    color: var(--xoxo-danger);
}

.xoxo-validation-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.xoxo-validation-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 8px;
}

.xoxo-validation-details {
    font-size: 14px;
    color: var(--xoxo-text-light);
}

/* Historique */
.xoxo-scanner-history-section {
    background: var(--xoxo-bg);
    border-radius: var(--xoxo-border-radius);
    padding: 20px;
    border: 1px solid var(--xoxo-border);
}

.xoxo-scanner-history-section h4 {
    margin: 0 0 16px;
    font-size: 16px;
    color: var(--xoxo-text);
}

.xoxo-history-list {
    max-height: 300px;
    overflow-y: auto;
}

.xoxo-history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid var(--xoxo-border);
}

.xoxo-history-item:last-child {
    border-bottom: none;
}

.xoxo-history-member {
    font-weight: 500;
    color: var(--xoxo-text);
}

.xoxo-history-card {
    font-size: 13px;
    color: var(--xoxo-text-muted);
}

.xoxo-history-time {
    font-size: 12px;
    color: var(--xoxo-text-muted);
}


.xoxo-modal-card-item:hover {
    border-color: var(--xoxo-primary);
    transform: translateY(-2px);
}

.xoxo-modal-card-item.selected {
    border-color: var(--xoxo-primary);
    box-shadow: var(--xoxo-primary-glow);
}

.xoxo-modal-card-item img {
    width: 100%;
    aspect-ratio: 2/3;
    object-fit: cover;
}

/* ============================
   Card Preview Modal
   ============================ */
.xoxo-card-preview-content {
    max-width: 400px;
    text-align: center;
}

.xoxo-card-preview-content img {
    max-width: 100%;
    max-height: 60vh;
    border-radius: var(--xoxo-border-radius);
    margin-bottom: 16px;
}

#xoxo-card-preview-info {
    text-align: left;
}

#xoxo-card-preview-info h4 {
    margin: 0 0 8px;
    color: var(--xoxo-text);
}

#xoxo-card-preview-info p {
    margin: 0;
    font-size: 14px;
    color: var(--xoxo-text-light);
}

/* v7.10.1 [TACHE 181 RCA] FIX commentaire orphelin (2e ROOT CAUSE bug B2).
   Suppression de la ligne "============================" suivie d un closing
   de commentaire qui etait orpheline (pas d ouverture associee). Cette 2e
   erreur de syntaxe provoquait un PARSE ERROR Selector is expected en plus
   du bug de la ligne 1521, et invalidait silencieusement le bloc Historique
   des points et la suite jusqu a recuperation. Pre-existait dans la baseline
   v7.10.0. */
.xoxo-points-history {
    background: var(--xoxo-bg);
    border-radius: var(--xoxo-border-radius);
    padding: 20px;
    border: 1px solid var(--xoxo-border);
}

.xoxo-points-history h4 {
    margin: 0 0 16px;
    color: var(--xoxo-text);
}

/* ============================
   Pagination
   ============================ */
.xoxo-pagination {
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 20px 0;
}

.xoxo-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border: 1px solid var(--xoxo-border);
    border-radius: 6px;
    font-size: 14px;
    color: var(--xoxo-text);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--xoxo-transition);
}

.xoxo-pagination .page-numbers:hover {
    border-color: var(--xoxo-primary);
    color: var(--xoxo-primary);
    box-shadow: var(--xoxo-primary-glow);
}

.xoxo-pagination .page-numbers.current {
    background: var(--xoxo-primary);
    border-color: var(--xoxo-primary);
    color: #fff;
}

/* ============================
   Pagination universelle (TACHE 131 v5.11.0 / TACHE 5 v5.23.4 redesign)
   Format << < 1 ... 5 [6] 7 ... 12 > >> avec page courante centree.
   v5.23.4 [TACHE 5] BUG-T5 redesign : passage d'une pagination plein-rose
   massive a une pagination COMPACTE, transparente, texte #FF00AA,
   sans retour a la ligne automatique. Specifications user :
     - Numeros en #FF00AA (texte rose au lieu du fond rose plein)
     - Background transparent (au lieu de #FF00AA plein)
     - Largeur compacte (boutons 28-30px au lieu de 38px)
     - flex-wrap: nowrap (au lieu de wrap, evite les sauts de ligne automatiques)
     - overflow-x: auto en fallback si tres nombreuses pages (scroll horizontal)
     - Page courante reste distincte : fond rose plein + texte blanc
   ============================ */
.xoxo-pagination-bar,
.xoxo-wishlist-pagination /* v8.1.1 [TACHE 185] alias modal Wishlist : reuse styling */ {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap; /* v5.23.4 [TACHE 5] : ne pas wrap (rester sur 1 ligne) */
    gap: 4px; /* v5.23.4 [TACHE 5] : compact (etait 6px) */
    margin: 20px 0 12px;
    padding: 6px 0;
    list-style: none;
    overflow-x: auto; /* v5.23.4 [TACHE 5] : scroll horizontal en fallback si depassement */
    scrollbar-width: thin; /* Firefox : barre de scroll fine si overflow active */
    -webkit-overflow-scrolling: touch; /* Safari iOS : scroll fluide */
}
.xoxo-pagination-bar[role="navigation"],
.xoxo-wishlist-pagination[role="navigation"] /* v8.1.1 [TACHE 185] alias modal Wishlist */ {
    /* role pour accessibilite - aucune incidence visuelle */
}
/* Masque la scrollbar webkit si elle apparait (UX plus propre, scroll reste fonctionnel) */
.xoxo-pagination-bar::-webkit-scrollbar,
.xoxo-wishlist-pagination::-webkit-scrollbar /* v8.1.1 [TACHE 185] alias modal Wishlist */ {
    height: 3px;
}
.xoxo-pagination-bar::-webkit-scrollbar-thumb,
.xoxo-wishlist-pagination::-webkit-scrollbar-thumb /* v8.1.1 [TACHE 185] alias modal Wishlist */ {
    background: rgba(255, 0, 170, 0.3);
    border-radius: 2px;
}
.xoxo-pagination-btn,
.xoxo-wishlist-pagebtn /* v8.1.1 [TACHE 185] alias modal Wishlist : reuse styling */ {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* v6.0.1 [BUG-UI1] : box-sizing + dimensions + line-height unifies pour
       garantir un alignement vertical pixel-perfect entre les boutons actif
       (fond rose visible) et inactifs (transparents). Sans ces defenses, le
       theme parent SocialV injectait des styles (padding vertical, line-height
       1.6, vertical-align baseline) qui decalaient optiquement le chiffre
       dans les boutons inactifs par rapport au rectangle du bouton actif. */
    box-sizing: border-box !important;
    min-width: 28px;
    width: auto;
    height: 28px;
    line-height: 28px !important; /* v6.0.1 [BUG-UI1] : match exact avec height */
    padding: 0 6px !important; /* v6.0.1 [BUG-UI1] : force padding vertical 0 */
    margin: 0 !important; /* v6.0.1 [BUG-UI1] : neutralise margin SocialV button */
    vertical-align: middle; /* v6.0.1 [BUG-UI1] : baseline neutralise au cas ou */
    background: transparent; /* v5.23.4 [TACHE 5] : fond transparent (etait #FF00AA plein) */
    color: #FF00AA; /* v5.23.4 [TACHE 5] : texte rose (etait blanc) */
    border: 1px solid transparent; /* v5.23.4 [TACHE 5] : bordure transparente, apparait au hover */
    border-radius: 4px; /* v5.23.4 [TACHE 5] : compact (etait 6px) */
    font-size: 13px; /* v5.23.4 [TACHE 5] : compact (etait 14px) */
    font-weight: 600;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
    user-select: none;
    flex-shrink: 0; /* v5.23.4 [TACHE 5] : anti-shrink dans flex nowrap */
    white-space: nowrap; /* v5.23.4 [TACHE 5] : pas de retour a la ligne dans le bouton */
    /* Reset des styles boutons par defaut WP/SocialV */
    text-decoration: none;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
    /* v5.23.4 [TACHE 5] : retrait du box-shadow lourd qui alourdissait visuellement */
    box-shadow: none;
    /* v6.0.1 [BUG-UI1] : text-align center en fallback pour navigateurs
       anciens qui ne respectent pas pleinement inline-flex justify-content */
    text-align: center;
}
.xoxo-pagination-btn:hover:not(:disabled):not([aria-current="page"]),
.xoxo-wishlist-pagebtn:hover:not(:disabled):not([aria-current="page"]) /* v8.1.1 [TACHE 185] alias modal Wishlist */ {
    background: rgba(255, 0, 170, 0.08); /* v5.23.4 [TACHE 5] : hover fond rose tres leger */
    color: #FF00AA;
    border-color: #FF00AA; /* v5.23.4 [TACHE 5] : bordure rose au hover */
    transform: none; /* v5.23.4 [TACHE 5] : retrait translateY pour rendu plus stable */
}
.xoxo-pagination-btn:active:not(:disabled),
.xoxo-wishlist-pagebtn:active:not(:disabled) /* v8.1.1 [TACHE 185] alias modal Wishlist */ {
    background: rgba(255, 0, 170, 0.16);
    transform: none;
}
.xoxo-pagination-btn:focus-visible,
.xoxo-wishlist-pagebtn:focus-visible /* v8.1.1 [TACHE 185] alias modal Wishlist */ {
    outline: 2px solid #FF00AA;
    outline-offset: 1px;
}
.xoxo-pagination-btn[aria-current="page"],
.xoxo-wishlist-pagebtn[aria-current="page"], /* v8.1.1 [TACHE 185] alias modal Wishlist */
.xoxo-wishlist-pagebtn.active /* v8.1.1 [TACHE 185] : wishlist.js genere aussi `.active` (legacy) */ {
    /* v5.23.4 [TACHE 5] : page courante = fond rose plein + texte blanc
       (inverse du nouveau design transparent pour bien la distinguer) */
    background: #FF00AA;
    border-color: #FF00AA;
    color: #FFFFFF;
    cursor: default;
    box-shadow: none;
}
.xoxo-pagination-btn:disabled,
.xoxo-wishlist-pagebtn:disabled /* v8.1.1 [TACHE 185] alias modal Wishlist */ {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
    background: transparent;
    border-color: transparent;
    color: #FF00AA;
}
.xoxo-pagination-ellipsis,
.xoxo-wishlist-pageellipsis /* v8.1.1 [TACHE 185] alias modal Wishlist : reuse styling */ {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* v6.0.1 [BUG-UI1] : memes defenses que .xoxo-pagination-btn pour garantir
       l'alignement vertical identique a tous les elements de la barre. */
    box-sizing: border-box !important;
    min-width: 18px; /* v5.23.4 [TACHE 5] : compact (etait 28px) */
    height: 28px; /* v5.23.4 [TACHE 5] : compact (etait 38px) */
    line-height: 28px !important; /* v6.0.1 [BUG-UI1] : match exact avec height */
    padding: 0 2px !important; /* v5.23.4 [TACHE 5] / v6.0.1 : force padding vertical 0 */
    margin: 0 !important;
    vertical-align: middle;
    color: #FF00AA; /* v5.23.4 [TACHE 5] : ellipsis rose pour coherence (etait #6b7280 gris) */
    font-weight: 600;
    font-size: 13px;
    user-select: none;
    flex-shrink: 0; /* anti-shrink dans flex nowrap */
    text-align: center;
}
/* Variantes pour fleches doubles (premiere/derniere) */
.xoxo-pagination-btn--first,
.xoxo-pagination-btn--last,
.xoxo-pagination-btn--prev,
.xoxo-pagination-btn--next {
    font-size: 14px; /* v5.23.4 [TACHE 5] : compact (etait 16px) */
}

/* ============================
   v8.1.1 [TACHE 185] HOTFIX VISUEL PAGINATION MODAL WISHLIST
   ----------------------------
   CONTEXTE : la modal "Ajouter Des Cartes A Ma Wishlist" generee par
   wishlist.js renderModalPagination() (L.683-718) utilise des classes
   CSS DEDIEES (`.xoxo-wishlist-pagination`, `.xoxo-wishlist-pagebtn`,
   `.xoxo-wishlist-pageellipsis`, `.xoxo-wishlist-pageindicator`) qui
   n'avaient AUCUNE regle CSS plugin -> les <button> tombaient sur les
   styles natifs du theme SocialV (gradient rose carre decentre,
   meme symptome que B2 v8.0.1 sur les boutons FluentCart).
   ----------------------------
   APPROCHE GREEN MODE : aliasing CSS pur (zero impact JS) en ajoutant
   les classes `.xoxo-wishlist-page*` aux selecteurs `.xoxo-pagination-*`
   existants ci-dessus (lignes ~2808-2935). Les styles sont ainsi MUTUALISES,
   garantissant une coherence VISUELLE TOTALE entre la pagination
   universelle du plugin (Ma Collection, Mes Cartes, Echanges, etc.) et
   la pagination modal Wishlist.
   ----------------------------
   AJOUT INDICATEUR "Page X/Y" : la modal Wishlist genere aussi un
   <span class="xoxo-wishlist-pageindicator"> en fin de barre (cf
   wishlist.js L.715), absent des paginations universelles. On le style
   ici de facon coherente (texte rose discret, decale a droite).
   ============================ */
.xoxo-wishlist-pageindicator {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    box-sizing: border-box;
    height: 28px;
    line-height: 28px;
    margin: 0 0 0 12px;
    padding: 0 4px;
    color: #6b7280; /* gris discret pour ne pas competir avec les boutons rose */
    font-size: 12px;
    font-weight: 500;
    user-select: none;
    flex-shrink: 0;
    white-space: nowrap;
    /* Pousser l'indicateur a l'extremite droite de la barre flex */
    margin-left: auto;
}

/* Responsive : sur mobile, encore plus compact */
@media (max-width: 640px) {
    .xoxo-pagination-bar,
    .xoxo-wishlist-pagination /* v8.1.1 [TACHE 185] alias modal Wishlist */ {
        gap: 3px;
        padding: 4px 0;
    }
    .xoxo-pagination-btn,
    .xoxo-wishlist-pagebtn /* v8.1.1 [TACHE 185] alias modal Wishlist */ {
        min-width: 26px;
        height: 26px;
        padding: 0 4px;
        font-size: 12px;
    }
    .xoxo-pagination-ellipsis,
    .xoxo-wishlist-pageellipsis /* v8.1.1 [TACHE 185] alias modal Wishlist */ {
        min-width: 14px;
        height: 26px;
        font-size: 12px;
    }
    .xoxo-wishlist-pageindicator /* v8.1.1 [TACHE 185] : compact mobile */ {
        height: 26px;
        line-height: 26px;
        font-size: 11px;
        margin-left: 8px;
    }
}

/* ============================
   v6.0.1 [BUG-UI2] Bouton clear des barres de recherche FO
   (Ma Collection + Mes Cartes). Avant v6.0.1 : styles inline dans
   bp-my-cards.php L.191-192 et bp-collection.php L.105-106 avec
   width:26px + height:26px + border-radius:50%. Le theme parent SocialV
   injectait un `padding: 0 12px` sur tous les `<button>` -> le bouton
   etait etire horizontalement en ovale au lieu du cercle attendu.
   Fix : classe CSS dediee avec box-sizing:border-box + padding:0
   !important + dimensions forcees. La visibilite (display:none/flex)
   reste pilotee par le JS (toggle data-visible).
   ============================ */
.xoxo-search-clear-btn {
    position: absolute !important;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    /* display:none par defaut, JS passe a display:inline-flex quand input non vide */
    display: none;
    align-items: center;
    justify-content: center;
    box-sizing: border-box !important;
    width: 26px !important;
    height: 26px !important;
    padding: 0 !important; /* defense critique contre padding theme parent */
    margin: 0 !important;
    background: #f1f5f9;
    border: none !important;
    border-radius: 50% !important; /* cercle parfait (etait ovale avec padding theme) */
    cursor: pointer;
    color: #64748b;
    font-size: 18px;
    line-height: 1 !important;
    font-family: inherit;
    text-decoration: none;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
    transition: background-color 160ms ease, color 160ms ease;
}
.xoxo-search-clear-btn:hover {
    background: #e2e8f0;
    color: #1e293b;
}
.xoxo-search-clear-btn:focus-visible {
    outline: 2px solid #FF00AA;
    outline-offset: 2px;
}
.xoxo-search-clear-btn.is-visible {
    display: inline-flex;
}


/* ============================
   Cards Grid
   ============================ */
.xoxo-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.xoxo-card-item {
    background: var(--xoxo-bg);
    border-radius: var(--xoxo-border-radius);
    overflow: hidden;
    transition: all var(--xoxo-transition);
    cursor: pointer;
    border: 1px solid var(--xoxo-border);
}

.xoxo-card-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--xoxo-shadow-hover);
}

.xoxo-card-image {
    width: 100%;
    aspect-ratio: 2/3;
    overflow: hidden;
}

.xoxo-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.xoxo-card-info {
    padding: 12px;
}

.xoxo-card-level {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    color: #fff; /* v5.8.6 [TACHE 119] fallback - override par style inline `color:` (color_secondary) */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
/* v5.8.6 [TACHE 119] : icone Font Awesome optionnelle prefixant le libelle. */
.xoxo-card-level > i.fa,
.xoxo-card-level > i.fas,
.xoxo-card-level > i.far,
.xoxo-card-level > i.fab,
.xoxo-card-level > i[class*="fa-"] {
    margin-right: 4px;
    font-size: 0.95em;
    line-height: 1;
}

.xoxo-card-name {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 4px;
    color: var(--xoxo-text);
}

.xoxo-card-stats-mini {
    font-size: 11px;
    color: var(--xoxo-text-muted);
}

.xoxo-card-stats-mini span {
    display: block;
}

/* ============================
   Section Headers
   ============================ */
.xoxo-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.xoxo-section-header h3 {
    margin: 0;
    color: var(--xoxo-text);
}

.xoxo-my-cards-header {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--xoxo-border);
}

.xoxo-my-cards-header h3 {
    margin: 0;
    color: var(--xoxo-text);
}

.xoxo-my-cards-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}


/* v5.4.2 [TACHE 78] Section CSS "Puzzle Creator" entierement supprimee
   (classes .xoxo-puzzle-grid, .xoxo-puzzle-slot*, .xoxo-card-picker*) en meme
   temps que le retrait du mode "Cartes existantes" de la popup de creation
   puzzle. Ces classes n'ont plus aucun usage dans le markup. */

/* Sélecteur de cadres puzzle */
.xoxo-puzzle-frame-selector {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    padding: 10px 0;
}

.xoxo-puzzle-frame-option {
    border: 2px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
    text-align: center;
    min-width: 100px;
    transition: all 0.2s ease;
    background: #fff;
}

.xoxo-puzzle-frame-option:hover {
    border-color: var(--xoxo-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.xoxo-puzzle-frame-option.selected {
    border-color: var(--xoxo-primary);
    background: rgba(255, 0, 170, 0.03);
}

.xoxo-puzzle-frame-option img {
    width: 80px;
    height: 60px;
    object-fit: contain;
    border-radius: 4px;
    margin-bottom: 8px;
}

.xoxo-puzzle-frame-option span {
    font-size: 12px;
    font-weight: 500;
    display: block;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ============================
   Podium / Classement (v5.2.0 Tache 44)
   ============================ */
.xoxo-podium-page {
    max-width: 100%;
}
.xoxo-podium-header {
    margin-bottom: 24px;
}
.xoxo-podium-header h3 {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 700;
}
.xoxo-podium-section-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--xoxo-text, #1a1a2e);
}

/* --- TOP 3 PODIUM HERO --- */
.xoxo-podium-hero {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 16px;
    margin-bottom: 32px;
    align-items: end;
}
.xoxo-podium-card {
    background: var(--xoxo-bg, #fff);
    border-radius: 16px;
    padding: 24px 16px 20px;
    text-align: center;
    position: relative;
    border: 2px solid transparent;
    transition: transform 0.3s, box-shadow 0.3s;
}
.xoxo-podium-card:hover {
    transform: translateY(-4px);
}

/* Gold — 1er */
.xoxo-podium-gold {
    border-color: #FFD700;
    background: linear-gradient(180deg, #FFFDF0 0%, #FFF8E1 100%);
    box-shadow: 0 8px 32px rgba(255,215,0,0.25);
    padding-top: 32px;
    min-height: 280px;
}
.xoxo-podium-gold .xoxo-podium-rank-badge {
    background: linear-gradient(135deg, #FFD700, #FFA000);
    color: #fff;
    font-size: 15px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.xoxo-podium-gold .xoxo-podium-avatar-wrap {
    width: 96px;
    height: 96px;
    border: 4px solid #FFD700;
    box-shadow: 0 0 20px rgba(255,215,0,0.4);
}
.xoxo-podium-gold .xoxo-podium-score {
    color: #B8860B;
    font-size: 22px;
}

/* Silver — 2e */
.xoxo-podium-silver {
    border-color: #C0C0C0;
    background: linear-gradient(180deg, #FAFAFA 0%, #F0F0F0 100%);
    box-shadow: 0 6px 24px rgba(192,192,192,0.25);
}
.xoxo-podium-silver .xoxo-podium-rank-badge {
    background: linear-gradient(135deg, #D4D4D4, #A0A0A0);
    color: #fff;
}
.xoxo-podium-silver .xoxo-podium-avatar-wrap {
    width: 80px;
    height: 80px;
    border: 3px solid #C0C0C0;
    box-shadow: 0 0 16px rgba(192,192,192,0.3);
}
.xoxo-podium-silver .xoxo-podium-score {
    color: #6B6B6B;
}

/* Bronze — 3e */
.xoxo-podium-bronze {
    border-color: #CD7F32;
    background: linear-gradient(180deg, #FFF8F0 0%, #FAEBD7 100%);
    box-shadow: 0 6px 24px rgba(205,127,50,0.2);
}
.xoxo-podium-bronze .xoxo-podium-rank-badge {
    background: linear-gradient(135deg, #CD7F32, #A0522D);
    color: #fff;
}
.xoxo-podium-bronze .xoxo-podium-avatar-wrap {
    width: 80px;
    height: 80px;
    border: 3px solid #CD7F32;
    box-shadow: 0 0 16px rgba(205,127,50,0.25);
}
.xoxo-podium-bronze .xoxo-podium-score {
    color: #8B4513;
}

/* Podium elements */
.xoxo-podium-rank-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 14px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
    z-index: 2;
}
.xoxo-podium-avatar-wrap {
    margin: 0 auto 12px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;
}
.xoxo-podium-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.xoxo-podium-avatar-placeholder {
    color: #bbb;
    font-size: 28px;
}
.xoxo-podium-name {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.xoxo-podium-score {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 12px;
}
.xoxo-podium-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    margin-bottom: 8px;
}
.xoxo-podium-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.xoxo-podium-stat-val {
    font-size: 16px;
    font-weight: 700;
    color: var(--xoxo-text, #1a1a2e);
}
.xoxo-podium-stat-lbl {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--xoxo-text-muted, #888);
}

/* Activity indicators */
.xoxo-podium-activity, .xoxo-activity-dot {
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.xoxo-podium-activity i, .xoxo-activity-dot i {
    font-size: 7px;
}
.xoxo-activity-active { color: #22c55e; }
.xoxo-activity-recent { color: #84cc16; }
.xoxo-activity-away   { color: #f59e0b; }
.xoxo-activity-inactive { color: #ef4444; }

/* --- CHALLENGERS (4-10) --- */
.xoxo-podium-challengers {
    margin-bottom: 32px;
}
.xoxo-challengers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.xoxo-challenger-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--xoxo-bg, #fff);
    border: 1px solid var(--xoxo-border, #e5e7eb);
    border-radius: 12px;
    padding: 12px 14px;
    transition: box-shadow 0.2s, border-color 0.2s;
    flex-wrap: wrap;
}
.xoxo-challenger-card:hover {
    border-color: var(--xoxo-primary, #FF00AA);
    box-shadow: 0 4px 16px rgba(255,0,170,0.08);
}
.xoxo-challenger-rank {
    font-size: 16px;
    font-weight: 800;
    color: var(--xoxo-primary, #FF00AA);
    min-width: 28px;
}
.xoxo-challenger-avatar-wrap {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #f0f0f0;
}
.xoxo-challenger-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.xoxo-challenger-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
.xoxo-challenger-name {
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.xoxo-challenger-score {
    font-size: 12px;
    font-weight: 700;
    color: var(--xoxo-primary, #FF00AA);
}
.xoxo-challenger-meta {
    display: flex;
    gap: 8px;
    font-size: 11px;
    color: var(--xoxo-text-muted, #888);
    width: 100%;
    padding-left: 38px;
}
.xoxo-challenger-meta i {
    margin-right: 2px;
}

/* --- FULL LIST TABLE --- */
.xoxo-podium-full-list {
    margin-bottom: 24px;
}
.xoxo-podium-my-rank {
    background: linear-gradient(135deg, rgba(255,0,170,0.06), rgba(255,0,170,0.02));
    border: 1px solid rgba(255,0,170,0.2);
    border-radius: 10px;
    padding: 10px 16px;
    margin-bottom: 16px;
    font-size: 14px;
    color: var(--xoxo-primary, #FF00AA);
}
.xoxo-podium-my-rank i {
    margin-right: 6px;
}
.xoxo-podium-table-wrap {
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid var(--xoxo-border, #e5e7eb);
}
.xoxo-podium-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.xoxo-podium-table thead th {
    background: #f9fafb;
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    color: var(--xoxo-text-muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 2px solid var(--xoxo-border, #e5e7eb);
    white-space: nowrap;
}
.xoxo-podium-table tbody tr {
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.15s;
}
.xoxo-podium-table tbody tr:hover {
    background: #fafafa;
}
.xoxo-podium-table td {
    padding: 10px 12px;
    vertical-align: middle;
}
.xoxo-podium-row-me {
    background: rgba(255,0,170,0.04) !important;
}
.xoxo-podium-row-me td {
    font-weight: 600;
}
.xoxo-podium-rank-medal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-weight: 800;
    font-size: 12px;
    color: #fff;
}
.xoxo-medal-gold   { background: linear-gradient(135deg, #FFD700, #FFA000); }
.xoxo-medal-silver  { background: linear-gradient(135deg, #D4D4D4, #A0A0A0); }
.xoxo-medal-bronze  { background: linear-gradient(135deg, #CD7F32, #A0522D); }
.xoxo-podium-rank-num {
    font-weight: 700;
    color: var(--xoxo-text-muted, #888);
}
.xoxo-podium-member-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}
.xoxo-podium-table-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.xoxo-podium-member-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}
.xoxo-podium-you-badge {
    background: var(--xoxo-primary, #FF00AA);
    color: #fff;
    font-size: 10px;
    padding: 1px 8px;
    border-radius: 10px;
    font-weight: 600;
    flex-shrink: 0;
}
.xoxo-podium-progress-bar {
    position: relative;
    background: #eee;
    border-radius: 6px;
    height: 18px;
    overflow: hidden;
    min-width: 60px;
}
.xoxo-podium-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--xoxo-primary, #FF00AA), #FF69B4);
    border-radius: 6px;
    transition: width 0.5s;
}
.xoxo-podium-progress-bar span {
    position: relative;
    z-index: 1;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    display: block;
    text-align: center;
    color: #333;
}

/* --- CTA --- */
.xoxo-podium-cta {
    margin: 24px 0;
}
.xoxo-podium-cta-inner {
    background: linear-gradient(135deg, #FFF0F7 0%, #FFF5FA 100%);
    border: 2px dashed var(--xoxo-primary, #FF00AA);
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
}
.xoxo-podium-cta-inner h4 {
    font-size: 18px;
    font-weight: 700;
    margin: 12px 0 8px;
}
.xoxo-podium-cta-inner p {
    color: var(--xoxo-text-muted, #888);
    font-size: 14px;
    margin-bottom: 16px;
}

/* --- LEGEND --- */
.xoxo-podium-legend {
    margin-top: 16px;
}
/* v5.3.18 - BUG 5 : legende score en cadre rose toujours visible (coherence avec .xoxo-page-block-hero)
   Supprime l'UX "cliquer pour afficher" de <details>/<summary> qui n'etait pas intuitif. */
.xoxo-podium-legend-card {
    background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%);
    border: 1px solid #f9a8d4;
    border-radius: 12px;
    padding: 18px 20px;
}
.xoxo-podium-legend-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    color: #9d174d;
    margin-bottom: 10px;
}
.xoxo-podium-legend-title svg {
    color: #FF00AA;
    flex-shrink: 0;
}
.xoxo-podium-legend-notice {
    background: #ffffff;
    border-left: 3px solid #FF00AA;
    padding: 10px 14px;
    border-radius: 4px;
    color: #4b5563;
    font-size: 13px;
    line-height: 1.55;
}
.xoxo-podium-legend-notice strong {
    color: #9d174d;
}
.xoxo-podium-legend summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--xoxo-text-muted, #888);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 0;
}
.xoxo-podium-legend-content {
    padding: 12px 0;
    font-size: 13px;
    line-height: 1.6;
}
.xoxo-podium-legend-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.xoxo-legend-chip {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: var(--chip-bg);
}
.xoxo-legend-sm {
    font-size: 11px;
    padding: 3px 10px;
}

/* Responsive */
@media (max-width: 768px) {
    .xoxo-podium-hero {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .xoxo-podium-gold {
        min-height: auto;
        order: -1;
    }
    .xoxo-challengers-grid {
        grid-template-columns: 1fr;
    }
    .xoxo-podium-table {
        font-size: 12px;
    }
    .xoxo-podium-member-name {
        max-width: 100px;
    }
}

/* ============================
   Statistiques individuelles (v5.2.0 Phase 3)
   ============================ */
.xoxo-stats-page {
    max-width: 100%;
}
.xoxo-stats-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    background: var(--xoxo-bg, #fff);
    border: 1px solid var(--xoxo-border, #e5e7eb);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.xoxo-stats-hero-left {
    display: flex;
    align-items: center;
    gap: 16px;
}
.xoxo-stats-avatar-wrap {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 3px solid var(--xoxo-primary, #FF00AA);
    box-shadow: 0 0 16px rgba(255,0,170,0.15);
}
.xoxo-stats-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.xoxo-stats-name {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 4px;
}
.xoxo-stats-level-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: var(--level-color);
}
.xoxo-stats-rank-info {
    font-size: 13px;
    color: var(--xoxo-text-muted, #888);
    margin-top: 4px;
}
.xoxo-stats-hero-right {
    text-align: right;
}
.xoxo-stats-score-big {
    font-size: 36px;
    font-weight: 800;
    color: var(--xoxo-primary, #FF00AA);
    line-height: 1;
}
.xoxo-stats-score-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--xoxo-text-muted, #888);
}

/* Level progress bar */
.xoxo-stats-level-progress {
    background: var(--xoxo-bg, #fff);
    border: 1px solid var(--xoxo-border, #e5e7eb);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 20px;
}
.xoxo-stats-level-bar-header {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--xoxo-text-muted, #888);
}
.xoxo-stats-level-bar {
    height: 10px;
    background: #eee;
    border-radius: 10px;
    overflow: hidden;
}
.xoxo-stats-level-fill {
    height: 100%;
    border-radius: 10px;
    transition: width 0.8s;
}
.xoxo-stats-level-bar-footer {
    font-size: 12px;
    color: var(--xoxo-text-muted, #888);
    margin-top: 6px;
    text-align: center;
}

/* Stats grid */
.xoxo-stats-grid-main {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}
.xoxo-stat-card {
    background: var(--xoxo-bg, #fff);
    border: 1px solid var(--xoxo-border, #e5e7eb);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}
.xoxo-stat-card i {
    font-size: 20px;
    color: var(--xoxo-primary, #FF00AA);
    margin-bottom: 8px;
}
/* v5.3.18 - BUG 6 : rendu SVG des icones statistiques (coherence visuelle avec FA) */
.xoxo-stat-card > svg {
    color: var(--xoxo-primary, #FF00AA);
    margin: 0 auto 8px;
    display: block;
}
.xoxo-stat-card-val {
    font-size: 24px;
    font-weight: 800;
    display: block;
    color: var(--xoxo-text, #1a1a2e);
}
.xoxo-stat-card-sub {
    font-size: 14px;
    font-weight: 400;
    color: var(--xoxo-text-muted, #888);
}
.xoxo-stat-card-lbl {
    font-size: 12px;
    color: var(--xoxo-text-muted, #888);
    margin-top: 2px;
}
.xoxo-stat-card-pct {
    font-size: 11px;
    font-weight: 600;
    color: var(--xoxo-primary, #FF00AA);
    margin-top: 4px;
    display: block;
}
.xoxo-stats-mini-bar {
    height: 4px;
    background: #eee;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 8px;
}
.xoxo-stats-mini-bar div {
    height: 100%;
    background: var(--xoxo-primary, #FF00AA);
    border-radius: 4px;
    transition: width 0.5s;
}

/* Stats by type */
.xoxo-stats-by-type {
    margin-bottom: 24px;
}
/* v5.3.18 - BUG 7 : 25px entre titre "Repartition par type" et premiere ligne de la grille */
.xoxo-stats-by-type .xoxo-podium-section-title {
    margin-bottom: 25px;
}
.xoxo-stats-type-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.xoxo-stats-type-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--xoxo-bg, #fff);
    border: 1px solid var(--xoxo-border, #e5e7eb);
    border-radius: 8px;
    font-size: 13px;
}
.xoxo-stats-type-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.xoxo-stats-type-name {
    font-weight: 600;
    min-width: 90px;
}
.xoxo-stats-type-count {
    color: var(--xoxo-text-muted, #888);
    flex: 1;
}
.xoxo-stats-type-pts {
    font-weight: 700;
    color: var(--xoxo-primary, #FF00AA);
}

@media (max-width: 768px) {
    .xoxo-stats-hero {
        flex-direction: column;
        text-align: center;
    }
    .xoxo-stats-hero-left {
        flex-direction: column;
    }
    .xoxo-stats-hero-right {
        text-align: center;
    }
    .xoxo-stats-grid-main {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ============================================================
   v8.0.1 [TACHE 183 RCA] BOUTONS DEFILEMENT MENU BP XOXO CARDS - REFONTE
   RCA v8.0.0 : sur theme SocialV, les <button> natifs ont des styles forts
   (border-radius:0, padding genereux, background colore) qui battaient
   ma section .xoxo-nav-scroll-btn par specificite ou par cascade.
   Resultat : boutons rectangulaires, mal alignes, asymetriques (gauche
   pale / droit intense - heritage de styles parents).
   FIX v8.0.1 :
   1. Specificite augmentee via .xoxo-nav-scroller .xoxo-nav-scroll-btn
   2. Reset COMPLET des proprietes <button> natifs du theme (background,
      border, padding, line-height, font, box-shadow, etc.)
   3. !important sur les proprietes geometriques critiques (width, height,
      border-radius, padding, position, top, transform)
   4. Centrage vertical defensif via display:inline-flex + align-items
   ============================================================ */
.xoxo-nav-scroller {
    position: relative !important;
    /* Reserve espace lateral pour les boutons sans deformer le menu */
    padding: 0 4px;
}
.xoxo-nav-scroller-track {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.xoxo-nav-scroller-track::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}
.xoxo-nav-scroller-track > ul {
    /* Force flex-nowrap sur le <ul> pour qu'il puisse deborder horizontalement */
    flex-wrap: nowrap !important;
    white-space: nowrap;
    /* Force overflow:visible pour que track.scrollWidth detecte le debordement
       (certains themes BP appliquent overflow-x:hidden sur le <ul> parent ce
       qui empeche XoXoCards.initNavScroller() de detecter la scrollabilite) */
    overflow: visible !important;
    overflow-x: visible !important;
    width: max-content !important;
    max-width: none !important;
    min-width: 100% !important;
}

/* SPECIFICITE MAX : .xoxo-nav-scroller > .xoxo-nav-scroll-btn (battre theme) */
.xoxo-nav-scroller > .xoxo-nav-scroll-btn,
button.xoxo-nav-scroll-btn,
.xoxo-nav-scroll-btn {
    /* Reset complet des styles <button> natifs theme SocialV */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    margin: 0 !important;
    font-family: inherit !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
    white-space: nowrap !important;

    /* Positionnement absolu centre vertical */
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;

    /* Geometrie ronde 36x36 — FORCE !important pour battre theme */
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    padding: 0 !important;
    border: 1px solid #f1d6e6 !important;
    border-radius: 50% !important;

    /* Couleurs — initial state (gris clair / rose pale) */
    background: rgba(255, 245, 250, 0.95) !important;
    background-color: rgba(255, 245, 250, 0.95) !important;
    background-image: none !important;
    color: #FF00AA !important;
    box-shadow: 0 2px 10px rgba(255, 0, 170, 0.18) !important;
    cursor: pointer !important;

    /* Centrage du SVG enfant */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    transition: opacity 0.2s ease, transform 0.18s ease, background 0.18s ease,
                box-shadow 0.2s ease, visibility 0.2s linear !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
}

.xoxo-nav-scroller > .xoxo-nav-scroll-btn--left,
button.xoxo-nav-scroll-btn--left,
.xoxo-nav-scroll-btn--left {
    left: -8px !important;
    right: auto !important;
}
.xoxo-nav-scroller > .xoxo-nav-scroll-btn--right,
button.xoxo-nav-scroll-btn--right,
.xoxo-nav-scroll-btn--right {
    right: -8px !important;
    left: auto !important;
}

/* SVG enfant : taille fixe + couleur heritee */
.xoxo-nav-scroll-btn > svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    pointer-events: none !important;
    fill: none !important;
    stroke: currentColor !important;
}

/* Hover : intensification + arret oscillation */
.xoxo-nav-scroller > .xoxo-nav-scroll-btn:hover,
button.xoxo-nav-scroll-btn:hover,
.xoxo-nav-scroll-btn:hover,
.xoxo-nav-scroller > .xoxo-nav-scroll-btn:focus-visible,
.xoxo-nav-scroll-btn:focus-visible {
    background: #FF00AA !important;
    background-color: #FF00AA !important;
    background-image: none !important;
    color: #ffffff !important;
    border-color: #FF00AA !important;
    box-shadow: 0 4px 16px rgba(255, 0, 170, 0.42) !important;
    outline: none !important;
    animation: none !important;
}
.xoxo-nav-scroll-btn:active {
    transform: translateY(-50%) scale(0.92) !important;
}

/* Etat cache (debut ou fin de scroll) */
.xoxo-nav-scroll-btn.xoxo-nav-scroll-btn--hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Animation oscillation laterale (4px tous les 3s) tant que scrollable */
@keyframes xoxo-nav-pulse-left {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    50% { transform: translateY(-50%) translateX(-4px); }
}
@keyframes xoxo-nav-pulse-right {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    50% { transform: translateY(-50%) translateX(4px); }
}
.xoxo-nav-scroller--scrollable .xoxo-nav-scroll-btn--left:not(.xoxo-nav-scroll-btn--hidden):not(:hover):not(:focus-visible) {
    animation: xoxo-nav-pulse-left 3s ease-in-out infinite !important;
}
.xoxo-nav-scroller--scrollable .xoxo-nav-scroll-btn--right:not(.xoxo-nav-scroll-btn--hidden):not(:hover):not(:focus-visible) {
    animation: xoxo-nav-pulse-right 3s ease-in-out infinite !important;
}

@media (prefers-reduced-motion: reduce) {
    .xoxo-nav-scroll-btn,
    .xoxo-nav-scroller-track {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   v8.0.1 [TACHE 183 RCA] OVERRIDE FLUENTCART "AJOUTER AU PANIER" - REFONTE
   RCA v8.0.0 : selecteurs .fct-add-to-cart erronés - le DOM rendu par
   ShopApp.js (Vue.js) genere `<button>` SANS classe specifique, enfant de
   `.fct-product-card`. FluentCart 1.3.27 utilise des CSS variables
   `--fct-card-btn-bg-color`, `--fct-btn-bg-color` (etc.) avec valeur defaut
   #253241 (gris fonce). PRESERVATION Q2=A.global : portee universelle.
   STRATEGIE FIX (3 niveaux) :
   1. Override des CSS variables au :root + body (battre toute cascade)
   2. Cibler les VRAIS selecteurs : .fct-product-card button et
      .fct-product-view-button (le truly utilises par FluentCart)
   3. Conserver les anciens selecteurs .fct-add-to-cart en redondance
      (en cas de futurs templates FluentCart qui les utiliseraient)
   ============================================================ */

/* Niveau 1 : Override des CSS variables FluentCart globalement.
   Toutes les declarations FluentCart qui referencent var(--fct-...) sont
   automatiquement redirigees vers le rose XoXo. */
:root,
:root body,
body {
    --fct-card-btn-bg-color: #FF00AA !important;
    --fct-card-btn-text-color: #ffffff !important;
    --fct-btn-bg-color: #FF00AA !important;
    --fct-btn-text-color: #ffffff !important;
    --fct-btn-hover-bg-color: #d4008e !important;
    --fct-btn-hover-text-color: #ffffff !important;
    --fct-button-bg: #FF00AA !important;
    --fct-button-color: #ffffff !important;
    --fct-button-hover-bg: #d4008e !important;
}

/* Niveau 2 : VRAIS selecteurs FluentCart (rendu Vue.js / ShopApp.js).
   .fct-product-card button = bouton "Ajouter au panier" sur les cards produit
   .fct-product-view-button = bouton "Acheter maintenant" / "Voir produit" */
.fct-product-card button:not(.xoxo-fluentcart-skip),
.fct-product-view-button:not(.xoxo-fluentcart-skip) {
    background: linear-gradient(135deg, #FF00AA 0%, #d4008e 100%) !important;
    background-color: #FF00AA !important;
    background-image: linear-gradient(135deg, #FF00AA 0%, #d4008e 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 999px !important;
    /* Responsive fluide via clamp() */
    padding: clamp(8px, 1.4vw, 14px) clamp(12px, 2vw, 24px) !important;
    min-height: clamp(38px, 4vw, 44px) !important;
    font-size: clamp(12px, 1.05vw, 14px) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    text-align: center !important;
    box-shadow: 0 4px 14px rgba(255, 0, 170, 0.32),
                inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    transition: background 0.22s ease, box-shadow 0.22s ease,
                transform 0.18s ease, filter 0.22s ease !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    /* Reset du gradient blanc 18% qu'utilise FluentCart (style3.css L.1) */
    box-sizing: border-box !important;
}

.fct-product-card button:not(.xoxo-fluentcart-skip):hover,
.fct-product-view-button:not(.xoxo-fluentcart-skip):hover {
    background: linear-gradient(135deg, #d4008e 0%, #b30077 100%) !important;
    background-image: linear-gradient(135deg, #d4008e 0%, #b30077 100%) !important;
    background-color: #d4008e !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(255, 0, 170, 0.48),
                inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
    transform: translateY(-1px) !important;
    filter: brightness(1.04) !important;
    text-decoration: none !important;
}

.fct-product-card button:not(.xoxo-fluentcart-skip):active,
.fct-product-view-button:not(.xoxo-fluentcart-skip):active {
    transform: translateY(0) scale(0.98) !important;
    box-shadow: 0 2px 8px rgba(255, 0, 170, 0.30) !important;
}

.fct-product-card button:not(.xoxo-fluentcart-skip):focus-visible,
.fct-product-view-button:not(.xoxo-fluentcart-skip):focus-visible {
    outline: 2px solid #FF00AA !important;
    outline-offset: 3px !important;
}

/* Echappatoire developpeur : `.xoxo-fluentcart-skip` revert local des CSS
   variables FluentCart aux valeurs d'origine + reset des styles XoXo. */
.fct-product-card button.xoxo-fluentcart-skip,
.fct-product-view-button.xoxo-fluentcart-skip,
.fct-add-to-cart.xoxo-fluentcart-skip,
[class*="fct-add-to-cart"].xoxo-fluentcart-skip {
    --fct-card-btn-bg-color: #253241 !important;
    --fct-card-btn-text-color: #ffffff !important;
    --fct-btn-bg-color: #253241 !important;
    --fct-btn-text-color: #ffffff !important;
    --fct-btn-hover-bg-color: #253241 !important;
    background: linear-gradient(180deg, #ffffff29, #fff0), #253241 !important;
    background-image: linear-gradient(180deg, #ffffff29, #fff0), #253241 !important;
    background-color: #253241 !important;
    color: #ffffff !important;
    text-transform: none !important;
    border-radius: 8px !important;
    box-shadow: inset 0 .5px .5px .5px #ffffff1a !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    padding: 12px !important;
    min-height: 40px !important;
    border: 0 !important;
    text-decoration: none !important;
    transform: none !important;
    filter: none !important;
}

/* Etat "out-of-stock" / disabled : conserver le gris d'origine FluentCart */
.fct-product-card button.out-of-stock,
.fct-product-view-button.out-of-stock,
.fct-product-card button[disabled]:not(.xoxo-fluentcart-skip),
.fct-product-card button.disabled:not(.xoxo-fluentcart-skip) {
    background: #ffffff !important;
    background-image: none !important;
    color: rgb(157, 159, 172) !important;
    border: 1px solid rgb(214, 218, 225) !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    transform: none !important;
    filter: none !important;
    text-transform: uppercase !important;
}

/* Niveau 3 : ANCIENS selecteurs (redondance pour templates futurs) */
.fct-add-to-cart:not(.xoxo-fluentcart-skip),
.fct-btn-add-to-cart:not(.xoxo-fluentcart-skip),
.fct-cart-btn:not(.xoxo-fluentcart-skip),
.fct-product-add-to-cart:not(.xoxo-fluentcart-skip),
.fct-product-list-item .fct-btn:not(.xoxo-fluentcart-skip),
.fct-products-grid .fct-btn:not(.xoxo-fluentcart-skip),
button.fct-add-to-cart:not(.xoxo-fluentcart-skip),
a.fct-add-to-cart:not(.xoxo-fluentcart-skip),
.wp-block-button .fct-add-to-cart:not(.xoxo-fluentcart-skip),
.fluent-cart .fct-add-to-cart:not(.xoxo-fluentcart-skip),
.fluent-cart-button.fct-add-to-cart:not(.xoxo-fluentcart-skip),
[class*="fct-add-to-cart"]:not(.xoxo-fluentcart-skip),
[class*="fct-btn-add-to-cart"]:not(.xoxo-fluentcart-skip) {
    background: #FF00AA !important;
    background-image: linear-gradient(135deg, #FF00AA 0%, #d4008e 100%) !important;
    color: #ffffff !important;
    border: 1px solid #d4008e !important;
    border-radius: 999px !important;
    /* Responsive fluide : taille bouton + texte se scale proportionnellement
       de 320px (mobile) a 1440px (desktop) */
    padding: clamp(8px, 1.4vw, 14px) clamp(14px, 2.2vw, 28px) !important;
    font-size: clamp(12px, 1.1vw, 15px) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    text-align: center !important;
    box-shadow: 0 4px 14px rgba(255, 0, 170, 0.32) !important;
    transition: background 0.22s ease, box-shadow 0.22s ease,
                transform 0.18s ease, filter 0.22s ease !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    /* Empêche FluentCart de subordonner la couleur via une css var locale */
    --fct-button-bg: #FF00AA !important;
    --fct-button-color: #ffffff !important;
    --fct-button-hover-bg: #d4008e !important;
}

.fct-add-to-cart:not(.xoxo-fluentcart-skip):hover,
.fct-btn-add-to-cart:not(.xoxo-fluentcart-skip):hover,
.fct-cart-btn:not(.xoxo-fluentcart-skip):hover,
.fct-product-add-to-cart:not(.xoxo-fluentcart-skip):hover,
.fct-product-list-item .fct-btn:not(.xoxo-fluentcart-skip):hover,
.fct-products-grid .fct-btn:not(.xoxo-fluentcart-skip):hover,
button.fct-add-to-cart:not(.xoxo-fluentcart-skip):hover,
a.fct-add-to-cart:not(.xoxo-fluentcart-skip):hover,
.wp-block-button .fct-add-to-cart:not(.xoxo-fluentcart-skip):hover,
.fluent-cart .fct-add-to-cart:not(.xoxo-fluentcart-skip):hover,
.fluent-cart-button.fct-add-to-cart:not(.xoxo-fluentcart-skip):hover,
[class*="fct-add-to-cart"]:not(.xoxo-fluentcart-skip):hover,
[class*="fct-btn-add-to-cart"]:not(.xoxo-fluentcart-skip):hover {
    background: #d4008e !important;
    background-image: linear-gradient(135deg, #d4008e 0%, #b30077 100%) !important;
    color: #ffffff !important;
    border-color: #b30077 !important;
    box-shadow: 0 6px 20px rgba(255, 0, 170, 0.48) !important;
    transform: translateY(-1px) !important;
    filter: brightness(1.04) !important;
    text-decoration: none !important;
}

.fct-add-to-cart:not(.xoxo-fluentcart-skip):active,
.fct-btn-add-to-cart:not(.xoxo-fluentcart-skip):active,
[class*="fct-add-to-cart"]:not(.xoxo-fluentcart-skip):active {
    transform: translateY(0) scale(0.98) !important;
    box-shadow: 0 2px 8px rgba(255, 0, 170, 0.30) !important;
}

.fct-add-to-cart:not(.xoxo-fluentcart-skip):focus-visible,
.fct-btn-add-to-cart:not(.xoxo-fluentcart-skip):focus-visible,
[class*="fct-add-to-cart"]:not(.xoxo-fluentcart-skip):focus-visible {
    outline: 2px solid #FF00AA !important;
    outline-offset: 2px !important;
}

.fct-add-to-cart:not(.xoxo-fluentcart-skip)[disabled],
.fct-add-to-cart:not(.xoxo-fluentcart-skip).disabled,
[class*="fct-add-to-cart"]:not(.xoxo-fluentcart-skip)[disabled],
[class*="fct-add-to-cart"]:not(.xoxo-fluentcart-skip).disabled {
    background: #d1d5db !important;
    background-image: none !important;
    color: #6b7280 !important;
    border-color: #d1d5db !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    transform: none !important;
    opacity: 0.78 !important;
}

/* Cas du bouton "Voir le panier" / "Aller au panier" (post-add) : meme style */
.fct-cart-link:not(.xoxo-fluentcart-skip),
.fct-cart-go-to-cart:not(.xoxo-fluentcart-skip),
[class*="fct-cart-link"]:not(.xoxo-fluentcart-skip),
[class*="fct-go-to-cart"]:not(.xoxo-fluentcart-skip) {
    background: #FF00AA !important;
    background-image: linear-gradient(135deg, #FF00AA 0%, #d4008e 100%) !important;
    color: #ffffff !important;
    border: 1px solid #d4008e !important;
    border-radius: 999px !important;
    padding: clamp(8px, 1.4vw, 14px) clamp(14px, 2.2vw, 28px) !important;
    font-size: clamp(12px, 1.1vw, 15px) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(255, 0, 170, 0.32) !important;
    transition: all 0.22s ease !important;
}
.fct-cart-link:not(.xoxo-fluentcart-skip):hover,
.fct-cart-go-to-cart:not(.xoxo-fluentcart-skip):hover,
[class*="fct-cart-link"]:not(.xoxo-fluentcart-skip):hover,
[class*="fct-go-to-cart"]:not(.xoxo-fluentcart-skip):hover {
    background-image: linear-gradient(135deg, #d4008e 0%, #b30077 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(255, 0, 170, 0.48) !important;
}

/* Echappatoire developpeur : ajouter la classe `.xoxo-fluentcart-skip` sur un
   bouton pour exclure de l'override XoXo (utile pour CTA secondaire neutre). */