@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap');
/* Cache les scrollbars natives */
html, body {
scrollbar-width: none;        /* Firefox */
-ms-overflow-style: none;     /* IE/Edge */
overflow-y: scroll;           /* important pour maintenir le scroll */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
display: none;                /* Chrome, Safari, Opera */
}

body {
  font-family: 'Space Grotesk', sans-serif;
  background-color: #ffffff;
  color: #111111;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}
@keyframes slideUpIn {
from {
  transform: translateY(100%);
  opacity: 1;
}
to {
  transform: translateY(0);
  opacity: 1;
}
}

.ScrollBar-component {
position: fixed;
right: 5px;
top: 0;
width: 10px;
height: 100vh;
z-index: 1000;
background: transparent;
user-select: none;
}

.ScrollBar-thumb {
position: absolute;
width: 50%;
background-color: #9e9e9e62;
border-radius: 100px;
cursor: grab;
transition: all 0.2s;
}
.ScrollBar-thumb:hover {
background-color: #facc15; /* jaune */
width: 100%;
}



@keyframes slideUpOut {
from {
  transform: translateY(0);
  opacity: 1;
}
to {
  transform: translateY(-100%);
  opacity: 1;
}
}

.animate-slide-up-in {
animation: slideUpIn 0.5s ease-out forwards;
}

.animate-slide-up-out {
animation: slideUpOut 0.5s ease-in forwards;
}

.custom-font {
  letter-spacing: -0.5px;
}

  .floating {
    animation: float 6s ease-in-out infinite;
  }
  .floating-slow {
    animation: float 12s ease-in-out infinite;
  }
  .floating-fast {
    animation: float 3s ease-in-out infinite;
  }

  @keyframes float {
    0% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-20px);
    }
    100% {
      transform: translateY(0px);
    }
  }