@keyframes glissementSlide {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

#btnPrevHero,
#btnNextHero {
    transition: all 0.25s ease;
}

#btnPrevHero:hover,
#btnNextHero:hover {
    transform: translateY(-50%) scale(1.08);
}

.hero-dot {
    cursor: pointer;
}

/* -----------------------------------------------------------------------------
   CARTES PRODUITS & MICRO-INTERACTIONS
----------------------------------------------------------------------------- */
.produit-carte,
.kit-carte,
.assoc-carte {
    transition:
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.28s ease;
}

.produit-carte:hover,
.kit-carte:hover,
.assoc-carte:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 40px -20px rgba(0, 28, 66, 0.35);
}

.produit-carte img,
.kit-carte img {
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.produit-carte:hover img,
.kit-carte:hover img {
    transform: scale(1.05);
}

button,
a {
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease;
}

button:not(:disabled):hover {
    transform: translateY(-2px);
}

button:not(:disabled):active {
    transform: translateY(0) scale(0.97);
}

.btn-add-carte:hover,
.btn-add-kit:hover {
    box-shadow: 0 10px 20px -8px rgba(0, 28, 66, 0.55);
}

.btn-fav-carte span,
#btnFavProduit span {
    transition: transform 0.25s ease;
}

.btn-fav-carte:hover span {
    transform: scale(1.18);
}

/* Animation du panier lors d'un ajout */
@keyframes secousssePanier {
    0% {
        transform: scale(1) rotate(0deg);
    }
    30% {
        transform: scale(1.25) rotate(-12deg);
    }
    60% {
        transform: scale(1.15) rotate(10deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

.panier-anime {
    animation: secousssePanier 0.55s ease;
}

@keyframes pulsationBadge {
    from {
        transform: scale(0.4);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.badge-anime {
    animation: pulsationBadge 0.3s cubic-bezier(0.22, 1.4, 0.36, 1);
}

/* -----------------------------------------------------------------------------
   APPARITION PROGRESSIVE AU DÉFILEMENT (SCROLL REVEAL)
----------------------------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity 0.6s ease,
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.reveal.visible {
    opacity: 1;
    transform: none;
}

/* -----------------------------------------------------------------------------
   FOOTER
----------------------------------------------------------------------------- */
footer a {
    position: relative;
}

footer ul a:hover {
    transform: translateX(3px);
    display: inline-block;
}

footer .rounded-full:hover {
    transform: translateY(-3px);
}

/* -----------------------------------------------------------------------------
   ACCESSIBILITÉ : respect des préférences de mouvement réduit
----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}
/* -----------------------------------------------------------------------------
   CORRECTION DRAWERS (.ouvert) & OVERLAY
----------------------------------------------------------------------------- */
/* Styles pour tous les drawers */
#drawerPanier,
#drawerFavoris,
#drawerFiltres,
#drawerTri {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 420px;
    background-color: #ffffff;
    z-index: 60 !important; /* Supérieur à l'overlay */
    box-shadow: -10px 0 25px -5px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Cas particulier pour les filtres et le tri si ce sont des drawers bas */
#drawerFiltres,
#drawerTri {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 100%;
    transform: translateY(100%);
}

/* Classe activée par ton JavaScript */
#drawerPanier.ouvert,
#drawerFavoris.ouvert {
    transform: translateX(0) !important;
}

#drawerFiltres.ouvert,
#drawerTri.ouvert {
    transform: translateY(0) !important;
}

/* Fix Overlay pour qu'il soit bien sous le drawer */
#overlay {
    z-index: 50 !important;
    transition: opacity 0.3s ease;
}