/* horizontal-scroll-menu.css */

.main-menu-topbar {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}

.main-navigation {
  display: flex;
  align-items: center;
  position: relative;
  min-height: 60px;
  width: 100%;
}

/* Conteneur de l'icône - aligné avec la navigation */
.category-icon-container {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: 15px;
  z-index: 15;
  background: inherit; /* Prend la couleur de fond du parent */
}

/* Lien icône catégorie */
.category-icon-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  /*color: rgba(2, 163, 136);*/
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  padding: 8px 16px;
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid #dee2e6;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  height: 36px; /* Hauteur fixe pour alignement */
  min-width: 140px; /* Largeur minimale pour le contenu */
}

.category-icon-link:hover {
  background: rgba(2, 147, 122) !important;
  color: #ffffff;
  border-color: rgba(2, 147, 122);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0,123,255,0.2);
}

.category-icon-link img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(0);
  transition: filter 0.2s ease;
}

.category-icon-link:hover img {
  filter: brightness(0) saturate(100%) invert(1);
}

.category-text {
  font-weight: 600;
}

.scroll-container {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 10px 0;
}

.scroll-container::-webkit-scrollbar {
  display: none;
}

/* Style pour votre liste existante */
.scroll-container .clearlist {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  min-width: max-content;
  gap: 8px;
}

.scroll-container .clearlist li {
  display: inline-flex;
  margin: 0;
  padding: 0;
}

.scroll-container .clearlist a {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  text-decoration: none;
  /*color: rgba(2, 163, 136);*/
  background: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  height: 36px; /* Même hauteur que l'icône */
}

.scroll-container .clearlist a:hover {
  background: rgba(2, 147, 122);
  color: #ffffff;
  border-color: rgba(2, 147, 122);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(2, 147, 122,0.2);
}

/* Boutons de scroll */
.scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  background: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 50%;
  cursor: pointer;
  z-index: 20;
  display: none; /* Caché par défaut */
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: rgba(2, 163, 136);
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.scroll-btn.visible {
  display: flex;
}

.scroll-btn:hover:not(:disabled) {
  background: rgba(2, 147, 122);
  color: #ffffff;
  border-color: rgba(2, 147, 122);
  box-shadow: 0 4px 12px rgba(2, 147, 122,0.3);
}

.scroll-btn:disabled {
  display: none !important;
  cursor: not-allowed;
}

.scroll-left {
  left: 10px !important; /* Décalé pour éviter l'icône */
}

.scroll-right {
  right: 10px;
}

/* Barre de progression */
.scroll-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(0,0,0,0.05);
  display: none;
}

.scroll-progress.visible {
  display: block;
}

.scroll-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, rgba(2, 147, 122), rgba(2, 147, 122));
  width: 0%;
  transition: width 0.3s ease;
}

/* Style pour aligner verticalement tout */
.main-menu-topbar .clearlist a,
.category-icon-link,
.scroll-btn {
  align-items: center;
  height: 36px; /* Même hauteur pour tout */
  box-sizing: border-box;
}

/* Version Flexbox CSS */
.nav-content-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 10px;
  min-height: 60px;
  padding: 0 10px;
}

.category-icon-wrapper {
  flex-shrink: 0;
}

.category-icon-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 20px;
  text-decoration: none;
  /*color: rgba(2, 163, 136);*/
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s ease;
  height: 36px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.scrollable-content {
  flex: 1;
  display: flex;
  align-items: center;
  position: relative;
  min-width: 0; /* Important pour le flex-shrink */
}

.scroll-container {
  flex: 1;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 10px 0;
  min-width: 0;
}