/* MENU MONSIEUR SPOON - Burger + liens à gauche, logo centre, Instagram droite */

/* POPUP MENU - Couleurs Monsieur Spoon (turquoise + crème) */
.menu-mobile-wrap {
  background-color: #329B98 !important;
}

/* Header du popup - fond turquoise (enlever le violet/mauve) */
.menu-mobile-wrap .nav {
  background-color: #329B98 !important;
}

.menu-mobile-wrap .menu-link {
  color: #FFFBE3 !important;
  font-size: 6rem;
}

.menu-mobile-wrap .menu-link:hover {
  color: #FF4A16 !important;
}

/* Logo dans le popup - couleur CRÈME via filter */
.menu-mobile-wrap .nav-logo-wrap img {
  filter: brightness(0) saturate(100%) invert(96%) sepia(13%) saturate(384%) hue-rotate(325deg) brightness(104%) contrast(101%) !important;
}

/* Border separator crème dans le popup */
.menu-mobile-wrap .nav .nav-padding-pv1 {
  border-bottom: 1px solid #FFFBE3 !important;
}

/* Burger/Croix dans le popup - couleur crème */
.menu-mobile-wrap .burger-line {
  background-color: #FFFBE3 !important;
}

/* Instagram icon dans le popup - couleur crème */
.menu-mobile-wrap .ig-svg svg path {
  fill: #FFFBE3 !important;
}

/* Desktop layout */
@media (min-width: 992px) {
  .nav-container .nav-wrap {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  /* Groupe gauche : burger + liens */
  .nav-container .burger-wrap.burger-desktop {
    display: flex !important;
    margin-right: 2rem;
  }

  .nav-container .nav-links-desktop {
    display: flex !important;
    gap: 2rem;
    order: 0;
  }

  /* Forcer le burger + liens à être à gauche ensemble */
  .nav-container .burger-wrap.burger-desktop,
  .nav-container .nav-links-desktop {
    order: -1;
  }

  /* Logo au centre */
  .nav-container .nav-logo-wrap {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  /* Instagram à droite */
  .nav-container .ig-mobile-wrap {
    display: flex !important;
    order: 1;
    margin-left: auto;
  }

  /* Cacher le burger mobile en desktop */
  .nav-container .burger-wrap.burger-mobile {
    display: none !important;
  }

  /* POPUP MENU - Même layout que menu desktop */
  .menu-mobile-wrap .nav-wrap {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  /* Croix à gauche (même position que burger desktop) */
  .menu-mobile-wrap .burger-wrap {
    order: -1;
    margin-right: auto;
  }

  /* Instagram à droite (même position que menu desktop) */
  .menu-mobile-wrap .ig-mobile-wrap {
    order: 1;
    margin-left: auto;
  }
}

/* Mobile : comportement normal */
@media (max-width: 991px) {
  .nav-container .burger-wrap.burger-desktop {
    display: none !important;
  }

  .nav-container .burger-wrap.burger-mobile {
    display: flex !important;
  }

  .nav-container .nav-links-desktop {
    display: none !important;
  }

  /* MOBILE HEADER - Instagram gauche, Logo centre, Burger droite */
  .nav-container .nav-wrap {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    position: relative;
  }

  .nav-container .ig-mobile-wrap {
    order: -1 !important;
    margin-right: auto !important;
  }

  .nav-container .nav-logo-wrap {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  .nav-container .burger-wrap.burger-mobile {
    order: 1 !important;
    margin-left: auto !important;
  }

  /* Taille de police popup menu réduite en mobile */
  .menu-mobile-wrap .menu-link {
    font-size: 3rem !important;
  }
}

@media (max-width: 767px) {
  .menu-mobile-wrap .menu-link {
    font-size: 2.5rem !important;
  }
}

@media (max-width: 479px) {
  .menu-mobile-wrap .menu-link {
    font-size: 2rem !important;
  }
}

/* =========================================
   LANGUAGE SWITCHER - Sélecteur de langue
   ========================================= */
.language-switcher-mobile {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 1.5rem 0;
  margin-top: 1.5rem;
  border-top: 1px solid rgba(255, 251, 227, 0.3);
}

.lang-option {
  font-size: 0.875rem;
  color: #FFFBE3;
  opacity: 0.6;
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.5rem;
  transition: opacity 0.2s ease;
}

.lang-option.is-active,
.lang-option:hover {
  opacity: 1;
}

.lang-option.is-active {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lang-separator {
  color: #FFFBE3;
  opacity: 0.4;
  font-size: 0.75rem;
}