{# Panier latéral - Intégré au site #}
<div class="shop-cart-sidebar" id="shop-cart-sidebar">
    <div class="shop-cart-overlay" onclick="closeShopCart()"></div>

    <div class="shop-cart-panel">
        {# Header #}
        <div class="shop-cart-header">
            <h3>
                <i class="fas fa-shopping-cart"></i>
                Mon panier
                <span class="shop-cart-count" id="cart-count-badge">0</span>
            </h3>
            <button class="shop-cart-close" onclick="closeShopCart()">
                <i class="fas fa-times"></i>
            </button>
        </div>

        {# Contenu du panier #}
        <div class="shop-cart-content" id="shop-cart-content">
            {# Vide par défaut - rempli via JavaScript #}
            <div class="shop-cart-empty">
                <i class="fas fa-shopping-bag fa-3x"></i>
                <p>Votre panier est vide</p>
            </div>
        </div>

        {# Footer avec total et checkout #}
        <div class="shop-cart-footer" id="shop-cart-footer" style="display: none;">
            <div class="shop-cart-total">
                <span>Total</span>
                <strong id="cart-total">0,00 €</strong>
            </div>
            <a href="#" class="shop-cart-checkout-btn" onclick="goToCheckout(event)">
                <i class="fas fa-credit-card"></i>
                Passer la commande
            </a>
            <button class="shop-cart-continue-btn" onclick="closeShopCart()">
                Continuer mes achats
            </button>
        </div>
    </div>
</div>

<style>
/* Panier sidebar */
.shop-cart-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    pointer-events: none;
    transition: all 0.3s ease;
}

.shop-cart-sidebar.open {
    pointer-events: auto;
}

.shop-cart-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.shop-cart-sidebar.open .shop-cart-overlay {
    opacity: 1;
    pointer-events: auto;
}

.shop-cart-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 400px;
    max-width: 100%;
    height: 100%;
    background: white;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.2);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.shop-cart-sidebar.open .shop-cart-panel {
    transform: translateX(0);
}

@media (max-width: 576px) {
    .shop-cart-panel {
        width: 100%;
    }
}

/* Header */
.shop-cart-header {
    padding: 1.5rem;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.shop-cart-header h3 {
    margin: 0;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #1e293b;
}

.shop-cart-count {
    background: var(--site-primary-color, #667eea);
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
}

.shop-cart-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #64748b;
    padding: 0.5rem;
    transition: color 0.3s ease;
}

.shop-cart-close:hover {
    color: #1e293b;
}

/* Content */
.shop-cart-content {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.shop-cart-empty {
    text-align: center;
    padding: 4rem 2rem;
    color: #94a3b8;
}

.shop-cart-empty i {
    color: #cbd5e1;
    margin-bottom: 1rem;
}

.shop-cart-empty p {
    font-size: 1.1rem;
}

/* Item panier */
.shop-cart-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.2s ease;
}

.shop-cart-item:hover {
    background: #f8f9fa;
}

.shop-cart-item-image {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.shop-cart-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shop-cart-item-image-placeholder {
    width: 100%;
    height: 100%;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
}

.shop-cart-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.shop-cart-item-name {
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.3rem;
}

.shop-cart-item-price {
    color: var(--site-primary-color, #667eea);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.shop-cart-item-quantity {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
}

.shop-cart-qty-btn {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: #1e293b;
    font-size: 0.9rem;
    font-weight: 600;
}

.shop-cart-qty-btn:hover {
    background: var(--site-primary-color, #667eea);
    border-color: var(--site-primary-color, #667eea);
    color: white;
}

.shop-cart-qty-value {
    min-width: 35px;
    text-align: center;
    font-weight: 600;
    color: #1e293b;
    font-size: 1rem;
}

.shop-cart-item-remove {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    padding: 0.5rem;
    transition: color 0.2s ease;
}

.shop-cart-item-remove:hover {
    color: #dc2626;
}

/* Footer */
.shop-cart-footer {
    padding: 1.5rem;
    border-top: 2px solid #e0e0e0;
}

.shop-cart-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: #1e293b;
    font-weight: 600;
}

.shop-cart-total strong {
    color: var(--site-primary-color, #667eea);
    font-size: 1.5rem;
    font-weight: 700;
}

.shop-cart-checkout-btn {
    width: 100%;
    padding: 1rem;
    background: var(--site-primary-color, #667eea);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
    margin-bottom: 0.5rem;
}

.shop-cart-checkout-btn:hover {
    background: var(--site-primary-color-dark, #5568d3);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.shop-cart-continue-btn {
    width: 100%;
    padding: 0.8rem;
    background: transparent;
    color: #64748b;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.shop-cart-continue-btn:hover {
    border-color: var(--site-primary-color, #667eea);
    color: var(--site-primary-color, #667eea);
}
</style>

<script>
// Fonctions globales pour le panier
function openShopCart() {
    document.getElementById('shop-cart-sidebar').classList.add('open');
    document.body.style.overflow = 'hidden';
}

function closeShopCart() {
    document.getElementById('shop-cart-sidebar').classList.remove('open');
    document.body.style.overflow = '';
}

// Fermer avec Escape
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        closeShopCart();
    }
});

// Aller au checkout avec le bon siteName
function goToCheckout(event) {
    event.preventDefault();
    // Extraire le siteName de l'URL actuelle
    const currentPath = window.location.pathname;
    const match = currentPath.match(/\/site\/([^\/]+)\//);
    if (match) {
        const siteName = match[1];
        window.location.href = `/site/${siteName}/shop/checkout`;
    } else {
        alert('Impossible de déterminer le site');
    }
}
</script>