// components/_menu.scss
// ==========================================
// MENU PRINCIPAL (Magix CMS 4 / Bootstrap 5)
// ==========================================

.navbar-nav {
  // ----------------------------------------
  // 1. COMPORTEMENT SUR BUREAU (Desktop)
  // ----------------------------------------
  @include media-breakpoint-up(lg) {

    // a. Ouverture au survol (Hover)
    .nav-item.dropdown:hover > .dropdown-menu {
      display: block;
      margin-top: 0; // Colle le menu sous le lien
      animation: fadeIn 0.2s ease-in-out;
    }

    // b. Sous-sous-menus (Niveau 3) qui s'ouvrent sur le côté
    .dropend:hover > .dropdown-menu {
      display: block;
      top: 0;
      left: 100%;
      margin-left: .125rem; // Petit espace
    }

    // c. Mega Menu
    .mega-menu {
      position: absolute;
      left: 0;
      right: 0;
      padding: 2rem;
    }

    // d. Esthétique des liens principaux (NETTOYÉ DES DOUBLONS)
    // 🟢 AJOUT : On cible uniquement les enfants directs pour ne pas toucher aux sous-menus complexes
    > .nav-item {
      > .nav-link {

        // Le lien lit la variable forcée par le Centre de Contrôle du #header
        color: var(--color-text);
        transition: color 0.2s;

        // 🟢 AJOUT : Structure du span pour l'effet de soulignement centré
        span {
          position: relative;
          padding-bottom: calc(var(--spacer) / 2); // Équivalent de calc(var(--spacer) / 2)

          &::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%) scaleX(0);
            transform-origin: 50% 50%;
            width: 100%;
            height: 2px;
            background-color: var(--main-color); // Remplacement de @gold-color
            transition: transform 250ms ease-in-out;
          }
        }

        &:hover, &.active {
          color: var(--main-color);

          // 🟢 AJOUT : Déclenchement de l'animation au survol ou si actif
          span::after {
            transform: translateX(-50%) scaleX(1);
          }
        }
      }
    }
    .nav-item{}
    .nav-link.dropdown-toggle::after {
      display: none !important;
    }
    .dropdown-menu {
      background-color: var(--bs-dropdown-bg);
      color: var(--color-text);
      .dropdown-item {
        &:hover, &.active {
          background-color: var(--bs-dropdown-link-hover-bg);
          color: var(--main-color);
        }
      }
    }
    .dropdown-hover:hover {
      > .dropdown-menu{

      }
    }
  }

  // ----------------------------------------
  // 2. COMPORTEMENT SUR MOBILE (Tiroir)
  // ----------------------------------------
  @include media-breakpoint-down(lg) {

    // Les liens dans le tiroir mobile
    .nav-link {
      padding: 0.75rem 1rem;
      font-size: 1.1rem;
      border-bottom: 1px solid rgba(0,0,0,0.05);
      display: flex;
      justify-content: space-between;
      align-items: center;

      // Assure que le texte reste lisible sur mobile, peu importe le header
      color: var(--bs-body-color);
    }

    // 🟢 FUSION MOBILE : On garde vos flèches Bootstrap Icons
    .dropdown-toggle::after {
      display: inline-block;
      font-family: "bootstrap-icons"; // On utilise bien votre police Bootstrap
      content: "\F4FE"; // Code pour bi-plus-lg
      border: none;
      font-size: 1rem;
      transition: transform 0.3s ease;
      vertical-align: middle;
    }

    // Quand l'accordéon est ouvert
    .dropdown-toggle[aria-expanded="true"]::after {
      content: "\F2EA"; // Code pour bi-dash-lg
      transform: rotate(180deg);
    }

    // Esthétique des sous-menus mobiles
    .dropdown-menu {
      border: none;
      background-color: #f8f9fa; // Légèrement grisé pour différencier
      padding-left: 1.5rem; // Indentation
      margin-top: 0;

      .dropdown-item {
        padding: 0.5rem 1rem;
        font-size: 0.95rem;
      }
    }
  }
}

// ----------------------------------------
// 3. ANIMATIONS (Fade In pour le Desktop)
// ----------------------------------------
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 992px) {
  .dropdown-hover:hover > .dropdown-menu {
    display: block;
    margin-top: 0;
    animation: fadeInMenu 0.2s ease-in-out;
  }
}

@keyframes fadeInMenu {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}