tailwind.config = {
theme: {
extend: {
colors: {
diblong: {
gold: ‘#FFD700’,
goldDark: ‘#B8860B’,
dark: ‘#050505’,
gray: ‘#1E1E1E’,
light: ‘#F8F8F8’
}
},
fontFamily: {
sans: [‘Inter’, ‘sans-serif’],
display: [‘Oswald’, ‘sans-serif’],
},
screens: {
‘xs’: ‘375px’,
}
}
}
}

.no-select { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
::selection { background-color: #FFD700; color: #000000; }

.glass-card {
background-color: rgba(0, 0, 0, 0.95);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}

.bottom-nav-glass {
background: rgba(10, 10, 10, 0.98);
backdrop-filter: blur(15px);
border-top: 1px solid rgba(255, 215, 0, 0.15);
box-shadow: 0 -5px 20px rgba(0,0,0,0.5);
}

.product-card:hover {
transform: translateY(-5px);
border-color: #FFD700;
box-shadow: 0 10px 30px -10px rgba(255, 215, 0, 0.2);
}

.product-image-container .img-hover {
opacity: 0;
transition: opacity 0.3s ease-in-out;
background-color: #ffffff;
}

@media (hover: hover) {
.product-card:hover .img-hover { opacity: 1; }
.product-card:hover .img-main { opacity: 0; }
}

/* Styles spécifiques pour les filtres */
.filter-btn.active {
background-color: #FFD700;
color: #000000;
border-color: #FFD700;
}

/* Loader */
.loader {
border: 3px solid #333; border-top: 3px solid #FFD700; border-radius: 50%;
width: 40px; height: 40px; animation: spin 1s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Animation Fade In pour les produits filtrés */
.fade-in { animation: fadeIn 0.5s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Correction Menu Desktop */
@media (min-width: 768px) {
#desktop-menu { display: flex !important; visibility: visible !important; opacity: 1 !important; }
#desktop-action { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; }
#desktop-menu a { color: #ffffff !important; }
#desktop-menu a:hover { color: #FFD700 !important; }
}

body { padding-bottom: 80px; }

Tout voir
Comestibles
Usage Externe
Pour Elle

Best Seller

MIEL DIBLONG

1 500 CFA

Commander

Populaire

CANETTE DIBLONG

2 500 CFA

Commander

CAPSULES

3 000 CFA

Commander

SPRAY RETARDANT

5 000 CFA

Commander

GEL LUBRIFIANT

4 000 CFA

Commander

BONBON PLAISIR

1 500 CFA

Commander

PÂTE DIBLONG

3 000 CFA

Commander

CAFÉ DIBLONG

2 500 CFA

Commander

CHOCOLAT H.

2 500 CFA

Commander

Pour Elle

CHOCOLAT LADY

2 500 CFA

Commander

Nouveauté

PRÉSERVATIF

Bientôt


Voir la fiche

document.addEventListener(‘DOMContentLoaded’, () => {

// — GESTION DES FILTRES —
const filterBtns = document.querySelectorAll(‘.filter-btn’);
const products = document.querySelectorAll(‘.product-item’);

filterBtns.forEach(btn => {
btn.addEventListener(‘click’, () => {
// Activer le bouton cliqué
filterBtns.forEach(b => b.classList.remove(‘active’));
btn.classList.add(‘active’);

const filterValue = btn.getAttribute(‘data-filter’);

products.forEach(product => {
// Reset animation
product.classList.remove(‘fade-in’);
void product.offsetWidth; // Trigger reflow

if (filterValue === ‘all’ || product.classList.contains(filterValue)) {
product.style.display = ‘block’;
product.classList.add(‘fade-in’);
} else {
product.style.display = ‘none’;
}
});
});
});

// — GESTION DU MODAL —
const modal = document.getElementById(‘product-modal’);
const iframe = document.getElementById(‘product-iframe’);
const loader = document.getElementById(‘modal-loader’);

function toggleModal(show, url = ”) {
if(show) {
iframe.src = url;
modal.classList.remove(‘hidden’);
loader.style.display = ‘flex’;
iframe.onload = () => loader.style.display = ‘none’;
document.body.style.overflow = ‘hidden’;
} else {
modal.classList.add(‘hidden’);
iframe.src = ”;
document.body.style.overflow = ”;
}
}

document.querySelectorAll(‘.modal-trigger’).forEach(btn => {
btn.addEventListener(‘click’, (e) => {
e.preventDefault();
toggleModal(true, btn.getAttribute(‘href’));
});
});

document.getElementById(‘close-modal’).addEventListener(‘click’, () => toggleModal(false));
document.getElementById(‘modal-overlay’).addEventListener(‘click’, () => toggleModal(false));
});

.fade-in { animation: fadeIn 0.5s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scaleIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.animate-scaleIn { animation: scaleIn 0.2s ease-out forwards; }
.pb-safe { padding-bottom: env(safe-area-inset-bottom); }