/* =========================
   BASE
========================= */
html {
  scroll-behavior: smooth;
}

/* éviter bugs overflow Materialize */
body {
  overflow-x: hidden;
}

/* =========================
   DESKTOP NAV (FIXED ALIGNÉ CONTAINER)
========================= */

.kfdj-nav-inner {
  display: flex;
  flex-direction: column;
  gap: .5rem;

  width: max-content;

  pointer-events: auto;
}

.kfdj-nav-inner .nav-item {
  display: block;

  padding: .5rem .9rem;

  border-radius: 999px;

  color: #333;
  
  backdrop-filter: blur(15px) saturate(180%);
  -webkit-backdrop-filter: blur(15px) saturate(180%);
  background-color: rgba(255, 255, 255, 0.9);

  text-decoration: none;

  font-size: 14px;

  transition: .2s ease;
}

.kfdj-nav-inner .nav-item:hover {
  background-color: var(--color);
  color: #fff;
}

.kfdj-nav-inner .nav-item.active {
  background-color: var(--color-marron);
  color: #fff;
}

/* =========================
   MOBILE NAV (BOTTOM BAR)
========================= */

.kfdj-nav-mobile {
  position: fixed;
  bottom: 12px;
  left: 12px;
  right: 12px;

  display: flex;
  justify-content: space-around;
  align-items: center;

  padding: 10px 12px;

  border-radius: 999px;
  backdrop-filter: blur(15px) saturate(180%);
  -webkit-backdrop-filter: blur(15px) saturate(180%);
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);

  z-index: 990;
}

.nav-icon {
  font-size: 22px;
  text-decoration: none;

  opacity: 0.5;
  transform: scale(1);

  transition: .2s ease;
}

.nav-icon:hover {
  opacity: 0.8;
  transform: scale(1.2);
}

.nav-icon.active {
  opacity: 1;
  transform: scale(1.5);
}

/* =========================
   SECTIONS
========================= */

.menu-section {
  scroll-margin-top: 120px;
  padding: 40px 0;
}

.kfdj-nav-desktop.fixed{
    position:fixed;
    top:90px;
    z-index:990;
}