/* MEDIXA Clinique & Diagnostic - Feuille de styles principale (css/style.css) */

html {
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
}

/* --- 1. ANIMATIONS MARQUEE STANDARDS --- */
@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

.animate-marquee {
  display: flex;
  width: 200%;
  animation: marquee 25s linear infinite;
}

.animate-marquee-reverse {
  display: flex;
  width: 200%;
  animation: marquee 25s linear infinite reverse;
}

.animate-marquee:hover, 
.animate-marquee:active,
.animate-marquee-reverse:hover,
.animate-marquee-reverse:active {
  animation-play-state: paused;
}

/* --- 2. ANIMATIONS MARQUEE ACCÉLÉRÉES (12s) --- */
@keyframes marqueeFast {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

.animate-marquee-fast {
  display: flex;
  width: 200%;
  animation: marqueeFast 12s linear infinite;
}

.animate-marquee-reverse-fast {
  display: flex;
  width: 200%;
  animation: marqueeFast 12s linear infinite reverse;
}

.animate-marquee-fast:hover, 
.animate-marquee-fast:active,
.animate-marquee-reverse-fast:hover,
.animate-marquee-reverse-fast:active {
  animation-play-state: paused;
}

/* --- 3. DÉFILEMENT TACTILE ET MASQUAGE BARRES --- */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.touch-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.touch-carousel-item {
  scroll-snap-align: start;
  flex-shrink: 0;
}

/* --- 4. AJUSTEMENTS MOBILE VERTICAL (< 640px) --- */
@media (max-width: 640px) {
  .mobile-object-top {
    object-position: top center !important;
  }
  .mobile-px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}