/* ================================
   MENU DESKTOP (horizontal)
   .main-menu-desktop
================================== */
.main-menu-desktop {
  position: relative;
  background-color: var(--color-background);
  font-family: var(--font-heading);
  text-align: center;
  flex-grow: 1;
}

.main-menu-desktop > ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  gap: var(--space-lg);
}

.main-menu-desktop > ul > li {
  position: relative;
}

.main-menu-desktop > ul > li > a,
.main-menu-desktop > ul > li > span {
  position: relative;
  font-size: var(--text-lg);
  color: var(--color-dark);
  text-decoration: none;
  padding: var(--space-sm) 0;
  font-family: var(--font-heading);
  transition: color var(--transition-base);
  cursor: pointer;
}

.main-menu-desktop > ul > li > a::after,
.main-menu-desktop > ul > li > span::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  width: 0;
  background-color: var(--color-tertiary);
  transition: width var(--transition-base);
}

.main-menu-desktop > ul > li > a:hover,
.main-menu-desktop > ul > li > span:hover,
.main-menu-desktop > ul > li:hover > span {
  color: var(--color-tertiary);
}

.main-menu-desktop > ul > li > a:hover::after,
.main-menu-desktop > ul > li > span:hover::after,
.main-menu-desktop > ul > li:hover > span::after {
  width: 100%;
}

.main-menu-desktop > ul > li > a.is-active,
.main-menu-desktop > ul > li > a.active {
  color: var(--color-tertiary);
  font-weight: bold;
}

.main-menu-desktop > ul > li > a.is-active::after,
.main-menu-desktop > ul > li > a.active::after {
  width: 100%;
  background-color: var(--color-tertiary);
}

/* Menu déroulant */
.main-menu-desktop ul li ul {
  display: none;
  position: absolute;
  top: calc(100% + var(--space-sm));
  left: 0;
  background-color: var(--color-background);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  list-style: none;
  margin: 0;
  padding: var(--space-sm) 0;
  min-width: 355px;
  z-index: 1000;
}

.main-menu-desktop ul li:hover > ul {
  display: block;
}

.main-menu-desktop ul li ul li a {
  display: block;
  padding: var(--space-sm) var(--space-lg);
  color: var(--color-dark);
  text-decoration: none;
  font-size: var(--text-md);
  text-align: left;
  position: relative;
  transition: color var(--transition-base);
}

.main-menu-desktop ul li ul li a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 1.2em;
  margin-left: 15px;
  background-color: var(--color-tertiary);
  transition: width var(--transition-base);
  transform: translateY(-50%);
}

.main-menu-desktop ul li ul li a:hover {
  color: var(--color-tertiary);
}

.main-menu-desktop ul li ul li a:hover::before {
  width: 4px;
}

.main-menu-desktop ul > li:last-child > ul {
  left: auto;
  right: 0;
}


/* ================================
   MENU BURGER (mobile)
   #mobile-menu
================================== */
#mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  right: -100%;
  width: 75%;
  max-width: 320px;
  height: 100vh;
  background-color: var(--color-background);
  border-left: 4px solid var(--color-primary);
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1);
  z-index: 2000;
  padding: var(--space-lg);
  overflow-y: auto;
  transition: right var(--transition-base);
  font-family: var(--font-heading);
}

#mobile-menu.active {
  right: 0;
}

.close-icon {
  text-align: right;
  font-size: 1.5rem;
  cursor: pointer;
  margin-bottom: var(--space-md);
  color: var(--color-dark);
}

/* Conteneur UL vertical */
.mobile-menu-wrapper > ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Liens dans le menu burger */
#mobile-menu a {
  display: block;
  padding: var(--space-sm) 0;
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-dark);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
  transition: background-color var(--transition-base), color var(--transition-base);
}

#mobile-menu a:hover {
  background-color: var(--color-grey);
  color: var(--color-primary);
}

#mobile-menu ul > li:last-child a {
  border-bottom: none;
}


/* ================================
   BURGER ICON
================================== */
.burger-icon {
  display: none;
  font-size: 2rem;
  cursor: pointer;
  color: var(--color-dark);
  margin-left: auto;
  padding: var(--space-sm);
}


/* ================================
   RESPONSIVE BEHAVIOR
================================== */
@media (max-width: 1500px) {
  .main-menu-desktop {
    display: none;
  }

  .burger-icon {
    display: block;
  }

  #mobile-menu {
    display: block;
  }
}