/* ==========================================================================
   ACF COMPUTER — Motion design commun (toutes les pages du site public)

   Étend à l'ensemble du site le système d'apparition au défilement déjà
   utilisé sur l'accueil (index.html / style.css / home.js) : mêmes classes
   (.reveal / .in-view / .js-anim) pour rester cohérent avec l'existant au
   lieu d'introduire une deuxième convention. Ajoute aussi les
   micro-interactions qui manquaient partout : retour tactile des boutons,
   pulsation du panier, fondu d'apparition des images.

   Chargé par toutes les pages, y compris index.html (les règles ci-dessous
   n'entrent pas en conflit avec celles déjà présentes dans style.css —
   mêmes noms de classes, mêmes valeurs).
   ========================================================================== */

.js-anim .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s var(--ease, cubic-bezier(0.16, 1, 0.3, 1)),
                transform 0.8s var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}
.js-anim .reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Cascade douce sur les enfants directs d'un bloc révélé (grilles, listes de cartes...) */
.js-anim .reveal.in-view > * {
    animation: motionChildFade 0.6s var(--ease, ease) both;
}
.reveal.in-view > *:nth-child(2) { animation-delay: 0.06s; }
.reveal.in-view > *:nth-child(3) { animation-delay: 0.12s; }
.reveal.in-view > *:nth-child(4) { animation-delay: 0.18s; }
.reveal.in-view > *:nth-child(5) { animation-delay: 0.24s; }
.reveal.in-view > *:nth-child(6) { animation-delay: 0.3s; }
.reveal.in-view > *:nth-child(n+7) { animation-delay: 0.36s; }
@keyframes motionChildFade {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

/* Retour tactile au clic : tout élément dont la classe contient "btn" */
a[class*="btn"], button[class*="btn"], input[type="submit"], button[type="submit"] {
    transition: transform 0.18s ease, box-shadow 0.18s ease,
                background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
a[class*="btn"]:active, button[class*="btn"]:active,
input[type="submit"]:active, button[type="submit"]:active {
    transform: scale(0.96);
}

/* Élévation générique au survol pour les cartes qui n'ont pas déjà la leur */
.motion-lift {
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.motion-lift:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-3, 0 20px 48px rgba(3, 15, 30, 0.16));
}

/* Icône panier : pulsation quand un article est ajouté */
@keyframes motionCartPulse {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.25); }
    55%  { transform: scale(0.95); }
    100% { transform: scale(1); }
}
.cart-icon-wrapper.motion-pulse { animation: motionCartPulse 0.5s ease; }

@keyframes motionBadgePop {
    0%   { transform: scale(0); opacity: 0; }
    60%  { transform: scale(1.25); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
.cart-badge.motion-pop { animation: motionBadgePop 0.35s ease; }

/* Fondu d'apparition des images au chargement (évite le "pop" brut) */
.motion-img-fade {
    opacity: 0;
    transition: opacity 0.5s ease;
}
.motion-img-fade.is-loaded { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .reveal, .js-anim .reveal, .js-anim .reveal.in-view,
    .js-anim .reveal.in-view > *,
    .motion-lift, .motion-lift:hover,
    .cart-icon-wrapper.motion-pulse, .cart-badge.motion-pop,
    .motion-img-fade,
    a[class*="btn"], button[class*="btn"] {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}