/* --- 1. POPUP VISITEURS (VOTRE STYLE) --- */
#beb-popup-overlay {
    display: none;
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.6); z-index: 99999;
}
#beb-popup {
    background: white; width: 420px; padding: 25px; border-radius: 10px;
    box-shadow: 0 6px 30px rgba(0,0,0,0.35);
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-family: "Montserrat", sans-serif;
}
#beb-popup h2 { font-size: 22px; margin-bottom: 20px; }
#beb-popup label { font-weight: 600; margin-bottom: 5px; display: block; }
#beb-popup select { width: 100%; margin-bottom: 15px; padding: 10px; border-radius: 6px; border: 1px solid #ccc; }

/* Boutons Popup */
#beb-actions { display: flex; gap: 12px; margin-top: 15px; }
#beb-save, #beb-cancel { flex: 1; padding: 12px 0; font-size: 16px; border-radius: 6px; border: none; cursor: pointer; text-align: center; }
#beb-save { background: black; color: white; }
#beb-save:hover { background: #444; }
#beb-cancel { background: #eee; color: #333; }
#beb-cancel:hover { background: #ddd; }

/* --- 2. BOUTON FLOTTANT & INTERFACE --- */
#beb-floating-btn {
    position: fixed; bottom: 20px; right: 20px; z-index: 999998;
    background-color: #866D4B; color: #fff;
    padding: 12px 24px; border-radius: 5px;
    font-weight: bold; text-transform: uppercase; font-size: 13px;
    border: none; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    display: inline-block !important;
}

/* --- 3. INDICATEURS DE STOCK & SOLD OUT --- */

/* Pastilles rondes (inchangé) */
.beb-stock-indicator { display: inline-block !important; margin-right: 8px; margin-bottom: 2px; width: 12px; height: 12px; border-radius: 50%; vertical-align: middle; }
.beb-dot-green { background-color: #28a745; box-shadow: 0 0 4px #28a745; }
.beb-dot-orange { background-color: #fd7e14; box-shadow: 0 0 4px #fd7e14; }
.beb-dot-red { background-color: #dc3545; box-shadow: 0 0 4px #dc3545; }

/* A. Style du badge TEXTE (seulement si c'est une DIV et pas une image) */
div.beb-sold-out { 
    background: #866D4B !important; 
    color: #fff !important; 
    padding: 2px 6px !important; 
    font-size: 10px; 
    border-radius: 4px; 
    display: inline-block !important; 
    margin-right: 8px; 
    vertical-align: middle; 
}

/* B. Style de l'IMAGE SOLD OUT (Reset total) */
/* On applique le reset à toutes les images qui ont la classe sold-out */
img.beb-sold-out, 
img.beb-custom-badge-img {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    
    /* Positionnement Absolu par-dessus la photo */
    position: absolute !important;
    top: 0px !important;    /* Ajustez la hauteur ici */
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 150px !important; /* Ajustez la taille ici */
    height: auto !important;
    z-index: 100 !important;
    pointer-events: none;
}

/* --- C. Griser l'image du produit (VERSION SOMBRE) --- */

/* 1. Bloquer le clic sur tout le bloc */
li.product.beb-prod-sold-out,
.beb-prod-sold-out {
    pointer-events: none !important; 
    cursor: default !important;
}

/* 2. On ASSOMBRIT l'image du produit MAIS PAS le badge sold-out */
/* L'astuce est ici : :not(.beb-sold-out) empêche le filtre de toucher au badge */
.beb-prod-sold-out .ct-image-container img:not(.beb-sold-out), 
.beb-prod-sold-out > a > img:not(.beb-sold-out),
.beb-prod-sold-out img:not(.beb-sold-out) { 
    /* brightness(30%) : Rend l'image très sombre (30% de sa lumière) */
    /* grayscale(100%) : La passe en noir et blanc */
    filter: brightness(50%) grayscale(100%) !important; 
    
    opacity: 1 !important; /* On garde l'opacité à 100% pour que le noir soit profond */
    transition: none !important; /* Pas de délai */
}

/* 3. On protège le badge Sold Out pour qu'il reste lumineux */
.beb-prod-sold-out img.beb-sold-out {
    filter: none !important; /* Annule l'effet sombre sur le badge */
    opacity: 1 !important;
    z-index: 999 !important;
}

/* 2. On grise l'image du produit MAIS PAS le badge sold-out */
.beb-prod-sold-out .ct-image-container img, 
.beb-prod-sold-out > a > img:not(.beb-sold-out) { 
    filter: grayscale(100%) opacity(0.5) !important; /* Plus propre que brightness */
    transition: none !important; /* Suppression du délai d'animation */
}

/* 3. On s'assure que le badge Sold Out reste éclatant (pas gris, pas transparent) */
.beb-prod-sold-out img.beb-sold-out {
    filter: none !important;
    opacity: 1 !important;
    z-index: 999 !important; /* Force le badge au-dessus de tout */
}

/* --- D. EMPÊCHER le texte "SOLD OUT" automatique de s'afficher --- */
.beb-prod-sold-out::after { 
    display: none !important; 
}

/* --- E. Ajustement structurel --- */
ul.products li.product {
    position: relative !important;
    z-index: 1; /* S'assure que la pile est correcte */
}
.woocommerce-loop-product__title {
    position: static !important;
    overflow: visible !important;
}

/* --- 4. TABLEAU DES VISITES & BOUTONS --- */
.beb-variants-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
.beb-variants-table th { text-align: left; padding: 10px; border-bottom: 2px solid #ddd; font-weight: bold; }
.beb-variants-table td { text-align: left; padding: 10px; border-bottom: 1px solid #eee; vertical-align: middle; }

.beb-reserve-btn { background-color: #866D4B; color: #fff; border: none; border-radius: 50px; padding: 6px 18px; cursor: pointer; font-weight: 600; font-size: 14px; }
.beb-reserve-btn.beb-btn-disabled { background-color: #e0e0e0 !important; color: #999 !important; pointer-events: none; cursor: not-allowed; }

/* --- 5. PANIER PERSONNALISÉ --- */
.beb-custom-cart { background: #fff; border: 1px solid #ddd; margin-bottom: 30px; font-family: inherit; }
.beb-cart-header { background: #866D4B; color: #fff; padding: 10px 20px; }
.beb-cart-header h2 { color: #fff; margin: 0; font-size: 18px; }
.beb-cart-body { padding: 20px; border-bottom: 1px solid #eee; }
.beb-cart-cols { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 20px; }
.beb-cart-left { flex: 1; min-width: 200px; padding-right: 20px; border-right: 1px solid #eee; }
.beb-cart-right { flex: 2; min-width: 300px; }
.beb-cart-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.beb-btn-custom { background: #866D4B; color: #fff; padding: 8px 16px; text-decoration: none; border-radius: 4px; font-size: 13px; font-weight: bold; transition: opacity 0.3s; }
.beb-btn-custom:hover { opacity: 0.8; color: #fff; }

.beb-cart-accordion { border-top: 1px solid #eee; }
.beb-accordion-header { background: #866D4B; color: #fff; padding: 10px 20px; cursor: pointer; display: flex; justify-content: space-between; font-weight: bold; font-size: 14px; }
.beb-accordion-content { padding: 15px; background: #fff; }

/* Table panier */
.beb-cart-table { width: 100%; border-collapse: collapse; }
.beb-cart-table th { text-align: left; padding: 10px; border-bottom: 2px solid #ddd; font-weight: bold; }
.beb-cart-table td { text-align: left; padding: 10px; border-bottom: 1px solid #eee; vertical-align: middle; }
.beb-cart-table tbody tr:nth-child(even) { background-color: #f9f9f9; }
.beb-cart-table tbody tr:nth-child(odd) { background-color: #fff; }
.beb-cart-table .remove { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; background-color: #000; color: #fff !important; border-radius: 50%; text-decoration: none; font-weight: bold; font-size: 16px; line-height: 1; transition: background 0.2s; }
.beb-cart-table .remove:hover { background-color: #444; }

/* Alertes */
.beb-cart-conflict { background-color: #ffe6e6 !important; border-left: 4px solid #d00; }
.beb-cart-conflict td { color: #a00; }
.beb-alert-full { width: 100% !important; display: block !important; clear: both !important; grid-column: 1 / -1 !important; margin-bottom: 20px !important; box-sizing: border-box !important; }

/* --- 6. FORMULAIRE PARTENAIRE --- */
#beb-partner-wrapper { background:#fff; padding:25px; border:1px solid #ddd; border-radius:5px; max-width:800px; margin:0 auto; }
.beb-cols { display:flex; gap:20px; flex-wrap:wrap; } .beb-cols .beb-field { flex:1; min-width:200px; }
.beb-field { margin-bottom:15px; } .beb-field label { display:block; font-weight:bold; margin-bottom:5px; } 
.beb-field input, .beb-field select { width:100%; padding:8px; border:1px solid #ccc; border-radius:4px; }
.beb-cols-4 { display:flex; gap:10px; flex-wrap:wrap; } .beb-cols-4 .col { flex:1; min-width:140px; } .beb-cols-4 select { width:100%; padding:5px; }
hr { margin: 25px 0; border: 0; border-top: 1px solid #eee; } 
#beb-vip-msg { margin-top:15px; font-weight:bold; }

/* --- BANDEAU SUPPLÉMENT (VERSION SOUS L'IMAGE) --- */

.beb-supplement-overlay {
    /* Mise en forme du texte */
    text-align: center;
    font-weight: 800; /* Très gras */
    text-transform: uppercase;
    font-size: 15px; /* Taille augmentée pour la lisibilité */
    color: #000;
    
    /* Espacement pour ne pas coller à l'image ni au lien carte */
    margin-top: 15px;
    margin-bottom: 5px;
    
    /* AMÉLIORATION VISUELLE : Cadre gris clair pour faire "officiel" */
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    padding: 12px 10px; /* Espace interne */
    border-radius: 6px; /* Coins légèrement arrondis */
    
    /* Sécurité d'affichage */
    display: block;
    width: 100%;
    box-sizing: border-box;
    line-height: 1.4;
}

/* Optionnel : Une petite bordure gauche colorée pour attirer l'oeil (style "Info") */
.beb-supplement-overlay {
    border-left: 5px solid #866D4B; /* Couleur de votre charte */
}