/* ==========================================================================
   POLICES & GLOBAL
   ========================================================================== */
body {
    font-family: 'Inter', sans-serif;
    background-color: #fdfaf6; /* Fond crème/farine */
    overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6, .font-serif {
    font-family: 'Playfair Display', serif;
}
html { scroll-behavior: smooth; }

/* ==========================================================================
   HEADER & NAV
   ========================================================================== */
.main-header {
    background-color: white;
    color: #1f2937;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}
/* Sur la home, on peut vouloir un header transparent au top, 
   mais pour simplifier la cohérence multi-page, on garde souvent un fond blanc 
   ou on gère des classes spécifiques dans index.html */
.main-header.transparent-at-top {
    background-color: transparent;
    color: white;
    box-shadow: none;
}
.main-header.scrolled {
    background-color: white !important;
    color: #1f2937 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

/* Navigation Catégories (Produits) */
.category-nav { top: 80px; }

/* ==========================================================================
   CARROUSEL & PRODUITS
   ========================================================================== */
.carousel-wrapper { position: relative; }

.horizontal-scroll-container {
    display: flex;
    overflow-x: auto;
    gap: 1.5rem;
    padding-bottom: 1.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE */
    scroll-behavior: smooth;
}
.horizontal-scroll-container::-webkit-scrollbar { display: none; }

.product-card {
    flex: 0 0 auto;
    width: 230px;
    scroll-snap-align: start;
}
@media (min-width: 640px) {
    .product-card { width: 320px; }
}

/* ==========================================================================
   CALENDRIER & UI
   ========================================================================== */
.calendar-day.selected {
    background-color: #111827;
    color: white;
    font-weight: bold;
}

/* Animations */
@keyframes jiggle {
    0%, 100% { transform: scale(1) rotate(0); }
    25% { transform: scale(1.1) rotate(-3deg); }
    50% { transform: scale(1.1) rotate(3deg); }
    75% { transform: scale(1.1) rotate(-3deg); }
}
.cart-jiggle { animation: jiggle 0.4s ease-in-out; }

@keyframes puff {
    0% { transform: scale(0.5); opacity: 0.8; }
    100% { transform: scale(2); opacity: 0; }
}
.puff-animation {
    position: fixed; z-index: 10;
    background-color: rgba(100, 100, 100, 0.5);
    border-radius: 50%; width: 30px; height: 30px;
    animation: puff 0.4s ease-out forwards; pointer-events: none;
}

.fly-to-cart-animation {
    position: fixed; z-index: 9999; font-size: 2rem;
    transition: transform 0.6s cubic-bezier(0.2, 0, 0.8, 0.6), opacity 0.6s linear;
}

#demo-banner {
    transform: translateY(0); transition: transform 0.3s ease-in-out;
}
#demo-banner.hide-banner { transform: translateY(100%); }