/**
 * La Boite à Bijoux - Custom Styles
 * Styles supplémentaires au-delà de Tailwind
 */

/* Police Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

/* Variables CSS */
:root {
    --color-primary: #1F2937;
    --color-secondary: #F9FAFB;
    --color-accent: #D4AF37;
    --color-accent-dark: #B8962E;
    --color-success: #10B981;
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Inter', sans-serif;
}

/* Styles globaux */
body {
    font-family: var(--font-body);
    color: var(--color-primary);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.6s ease-out forwards;
}

/* Hover effects */
.product-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.product-card img {
    transition: transform 0.5s ease;
}

.product-card:hover img {
    transform: scale(1.05);
}

/* Navigation mega menu */
.mega-menu {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.nav-item:hover .mega-menu {
    opacity: 1;
    visibility: visible;
}

/* Cart drawer */
.cart-drawer {
    transition: transform 0.3s ease;
}

/* Button styles */
.btn-primary {
    @apply bg-amber-500 text-white px-6 py-3 rounded-lg font-medium transition-colors;
}

.btn-primary:hover {
    @apply bg-amber-600;
}

.btn-secondary {
    @apply border-2 border-gray-800 text-gray-800 px-6 py-3 rounded-lg font-medium transition-colors;
}

.btn-secondary:hover {
    @apply bg-gray-800 text-white;
}

/* Badge nouveau */
.badge-new {
    @apply absolute top-2 left-2 bg-green-500 text-white text-xs px-2 py-1 rounded;
}

/* Badge soldes */
.badge-sale {
    @apply absolute top-2 left-2 bg-red-500 text-white text-xs px-2 py-1 rounded;
}

/* Form styles */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent;
}

/* Table styles */
.table {
    @apply w-full border-collapse;
}

.table th {
    @apply text-left py-3 px-4 bg-gray-50 font-semibold border-b-2 border-gray-200;
}

.table td {
    @apply py-3 px-4 border-b border-gray-200;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #D4AF37;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #B8962E;
}

/* Loading spinner */
.spinner {
    @apply inline-block w-6 h-6 border-2 border-white border-t-transparent rounded-full animate-spin;
}

/* Image lazy loading */
img[loading="lazy"] {
    @apply opacity-0 transition-opacity duration-300;
}

img[loading="lazy"].loaded {
    @apply opacity-100;
}

/* Utility classes */
.text-amber-gold {
    color: var(--color-accent);
}

.bg-amber-gold {
    background-color: var(--color-accent);
}

.border-amber-gold {
    border-color: var(--color-accent);
}