.categories-wrapper {
  overflow-x: scroll !important;  /* barre toujours active */
  overflow-y: hidden;             /* pas de scroll vertical inutile */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: rgba(220, 53, 69, 0.5) rgba(220, 53, 69, 0.1); /* Firefox */
  scrollbar-width: thin; /* Firefox : barre fine */
}

/* Forcer affichage sur Chrome, Edge, Safari, Linux */
.categories-wrapper::-webkit-scrollbar {
  height: 8px;
  background-color: rgba(220, 53, 69, 0.1); /* fond clair visible */
}

.categories-wrapper::-webkit-scrollbar-thumb {
  background-color: rgba(220, 53, 69, 0.5); /* rouge pâle */
  border-radius: 4px;
}

.categories-wrapper::-webkit-scrollbar-thumb:hover {
  background-color: rgba(220, 53, 69, 0.8); /* rouge plus vif au survol */
}

/* Reste du style inchangé */
.category-item {
  scroll-snap-align: start;
  min-width: 80px;
  text-align: center;
  padding: 5px;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.category-item:hover {
  background-color: rgba(220, 53, 69, 0.1);
}

.banner-container {
    width: 100%;
    max-width: 1200px; /* largeur de la bannière */
    height: 300px;      /* hauteur fixe */
    overflow: hidden;
    margin: 20px auto;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    position: relative;
}

.banner-track {
    display: flex;
    transition: transform 1s ease-in-out;
}

.banner-item {
    min-width: 100%; /* une seule image visible à la fois */
    height: 100%;
    flex-shrink: 0;
}

.banner-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* s'ajuste à la taille, sans débordement */
    display: block;
}