/* Configuration des variables */
:root {
    --primary: #1e5f52;
    --primary-dark: #174d42;
    --primary-light: #e8f0ee;
    --background-light: #f5f0e8;
    --background-dark: #12302a;
    --cream: #faf7f2;
}

/* Base et Layout */
body {
    scroll-behavior: smooth;
}

/* Cards */
.product-card {
    @apply bg-white rounded-xl overflow-hidden border border-stone-200 shadow-sm transition-all duration-300 flex flex-col;
}

.product-card:hover {
    @apply shadow-xl -translate-y-1;
}

.card-image {
    @apply aspect-[16/9] relative overflow-hidden bg-stone-100;
}

.card-image img {
    @apply w-full h-full object-cover transition-transform duration-500;
}

.product-card:hover .card-image img {
    @apply scale-105;
}

.ref-tag {
    @apply absolute top-3 left-3 bg-white/90 backdrop-blur px-2 py-1 rounded text-[10px] font-bold tracking-widest z-10 border border-stone-200;
}

.card-body {
    @apply p-5 flex flex-col flex-1;
}

.card-body h3 {
    @apply font-bold text-stone-900 mb-2;
}

.price-row {
    @apply mt-auto grid grid-cols-3 gap-2 border-t border-stone-100 pt-4;
}

/* Boutons */
.btn-primary {
    @apply flex items-center gap-2 px-5 py-2.5 bg-[#1e5f52] text-white rounded-lg text-sm font-semibold hover:bg-[#174d42] transition-all;
}

.btn-secondary {
    @apply flex items-center gap-2 px-5 py-2.5 border-2 border-[#1e5f52] text-[#1e5f52] rounded-lg text-sm font-semibold hover:bg-[#1e5f52] hover:text-white transition-all;
}

.pill {
    @apply px-5 py-2 rounded-lg text-sm font-medium border border-stone-200 bg-white transition-all hover:border-[#1e5f52] hover:text-[#1e5f52];
}

.pill.active {
    @apply bg-[#1e5f52] text-white border-[#1e5f52];
}

/* Animation d'entrée fluide */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Optimisation pour l'impression (PDF) */
@media print {
    .no-print { display: none !important; }

    body { background-color: white !important; }

    main { padding: 0 !important; max-width: 100% !important; }

    #productGrid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5cm !important;
    }

    .product-card {
        break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #eee !important;
        border-radius: 8px !important;
    }

    @page {
        size: A4;
        margin: 1.5cm;
    }
}