.control-sidebar {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 100;
  background-color: white;
  padding: 0 1rem 1rem 1rem;
  border-radius: 5px;
  box-shadow: 0 0 0 2px rgba(0,0,0,.1);
  box-sizing: border-box;
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
  width: 280px;
  max-width: 40%;
  max-height: 80%;
  overflow-y: auto;

  /* Animation d'entrée par défaut */
  animation: slideInFromRight 300ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
  transform-origin: center right;
}

@keyframes rotate {
  0%   {transform: rotate(0deg)}
  100%   {transform: rotate(360deg)}
}

@keyframes prixClipFix {
  0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
  25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
  50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
  75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
  100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
}

/* Animation d'entrée depuis la droite */
@keyframes slideInFromRight {
  0% {
    transform: translateX(calc(100% + 20px)) scale(0.95);
    opacity: 0;
  }
  100% {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

/* Animation de sortie vers la droite */
@keyframes slideOutToRight {
  0% {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateX(calc(100% + 20px)) scale(0.95);
    opacity: 0;
  }
}

.maplibregl-cooperative-gesture-screen {
  z-index: 3000 !important;
}

/* Classes pour contrôler les animations */
.control-sidebar.entering {
  animation: slideInFromRight 300ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.control-sidebar.exiting {
  animation: slideOutToRight 300ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.control-sidebar-header {
  z-index: 1000;
  position: sticky;
  top:0 ;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom:  0.5rem;
  padding-top: 1rem;
  padding-bottom: 0.5rem;
  background-color: white;
  border-bottom: 1px solid #e0e0e0;
}

.control-config {
  transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1);
}

.control-sidebar-button {
  padding: 0.4rem !important;
  background-color: transparent !important;
  color: grey !important;
  font-size: small !important;
  margin: 0 0.2rem !important;
}

.control-sidebar-button:hover {
  background-color: lightgrey !important;
}

.sources-sidebar-description {
  font-size: var(--small-text-size);
  color: #6c757d;
  font-style: italic;
  padding: 1rem 0;
  margin: 0;
}

/* LEGENDE */
.legend-icon {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.legend-icon.line {
  width: 20px;
  height: 3px;
}

.legend-icon.fill {
  width: 15px;
  height: 15px;
  border-radius: 3px;
}

.legend-icon.icon {
  width: 14px;
  height: 14px;
}

.legend-container {
  width: 100%;
  font-size: var(--small-text-size);
}

.legend-color-box {
  min-width: 1rem;
  min-height: 1rem;
  border-radius: 0.2rem;
  display: inline-block;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.legend-label {
  flex-grow: 1;
}

.legend-gradient-bar {
  width: 100%;
  height: 1rem;
  border-radius: 4px;
}

.map-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  animation: rotate 1s linear infinite
}

.map-loading::before , .map-loading::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 5px solid #FFF;
  animation: prixClipFix 2s linear infinite ;
}

.map-loading::after{
  border-color: var(--top-color);
  animation: prixClipFix 2s linear infinite , rotate 0.5s linear infinite reverse;
  inset: 6px;
}