html,
body {
  scroll-behavior: smooth;
}

/* ==========  CIA MAKEUP – SCROLLBAR UNIQUE  ========== */
/* Appliquée à tout le document : root + éléments scrollables */

:root {
  --scrollbar-bg: transparent; /* fond de la piste */
  --scrollbar-thumb: var(--color-primary); /* rose CIA (#fb7185) */
  --scrollbar-thumb-hover: var(--color-primary); /* rose plus foncé au survol */
  --scrollbar-width: 10px; /* largeur verticale */
  --scrollbar-height: 10px; /* hauteur horizontale */
  --plyr-color-main: var(--color-primary);
}

/* Firefox (64+) */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg);
}

/* Webkit : Chrome, Edge, Safari, Opera */
::-webkit-scrollbar {
  width: var(--scrollbar-width);
  height: var(--scrollbar-height);
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-bg);
}

::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 20px;
  border: 2px solid transparent; /* padding visuel */
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}

/* Option : coins arrondis de la piste (sympa sur fond clair) */
::-webkit-scrollbar-corner {
  background: transparent;
}

/* ===== ANIMATION INFINIE ===== */
.marquee-inner {
  display: flex;
  animation: marquee 40s linear infinite;
}

.marquee-reverse {
  animation: marquee-reverse 40s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-50%);
  }
}

@keyframes marquee-reverse {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0%);
  }
}

/*=========== NAVBAR ================ */

.nav-link {
  position: relative;
  padding-bottom: 4px;
  transition: color 0.3s ease;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background-color: var(--color-primary-dark);
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

.cta-banner {
  min-height: 100vh;
  position: relative;
  background-image: url("/assets/main/images/homebanner1.jpg");
  background-size: cover;
  background-position: center;
}

/* Changer l’image à partir de 640px (sm) */
@media (max-width: 640px) {
  .cta-banner {
    background-image: url("/assets/main/images/homebannerrotate.jpg");
  }
}