/* ===== MEGA-MENU.CSS — Panneau mega menu desktop + accordéon mobile ===== */

/* === POSITIONNEMENT : on garde position:static sur la nav et l'item parent
   pour que le mega menu (position:fixed) ne soit pas piégé dans un contexte
   de stacking ou un containing block intermédiaire. === */
header nav[aria-label],
.nav__menu-item--has-mega {
  position: static;
}

/* === PANNEAU MEGA MENU ===
   Position fixed sur le viewport : le mega menu est toujours centré
   horizontalement sur l'écran et docké sous le header, quelle que soit
   la position du nav item qui le déclenche. Évite tout débordement
   sur les écrans étroits (1024–1280 px) où la <nav> est décalée à droite
   à cause du logo et du sélecteur de langue. */
.mega-menu {
  position: fixed;
  top: var(--header-height);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: var(--mega-menu-width);
  display: flex;
  flex-direction: row;
  background: var(--c-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
  z-index: calc(var(--z-nav) + 10);
  overflow: hidden;
}

/* Barre dégradée en haut — supprimée pour éviter le double trait avec le lien actif */
/* .mega-menu::before { ... } */

/* === OUVERTURE : uniquement via classe JS (évite le clignotement) === */
.nav__menu-item--has-mega.mega-open > .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Icône dropdown : rotation à l'ouverture */
.nav__menu-item--has-mega.mega-open > .nav__dropdown .nav__dropdown-icon {
  transform: rotate(180deg);
}

/* Masquer le trait du lien quand le mega menu est ouvert (évite le double trait) */
.nav__menu-item--has-mega.mega-open > .nav__link::after,
.nav__menu-item--has-mega.mega-open > .nav__dropdown::after {
  transform: scaleX(0) !important;
}

/* === COLONNE GAUCHE : LIENS === */
.mega-menu__links {
  width: var(--mega-menu-links-width);
  min-width: var(--mega-menu-links-width);
  display: flex;
  flex-direction: column;
  padding: var(--space-4) 0;
  border-right: 1px solid var(--c-border);
}

/* === LIEN INDIVIDUEL === */
.mega-menu__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  color: var(--c-navy);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  transition: background var(--transition-fast), color var(--transition-fast);
  position: relative;
}

.mega-menu__link:hover,
.mega-menu__link:focus-visible,
.mega-menu__link[aria-current="true"] {
  background: var(--mega-menu-link-hover);
  color: var(--c-magenta);
}

/* Barre latérale active */
.mega-menu__link:hover::before,
.mega-menu__link:focus-visible::before,
.mega-menu__link[aria-current="true"]::before {
  content: '';
  position: absolute;
  left: 0;
  top: var(--space-2);
  bottom: var(--space-2);
  width: 3px;
  background: var(--gradient-doit);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Icône SVG du lien */
.mega-menu__link-icon {
  width: var(--mega-menu-icon-size);
  height: var(--mega-menu-icon-size);
  flex-shrink: 0;
  color: var(--c-navy-light);
  transition: color var(--transition-fast);
}

.mega-menu__link:hover .mega-menu__link-icon,
.mega-menu__link:focus-visible .mega-menu__link-icon {
  color: var(--c-magenta);
}

/* === LIEN DEUX LIGNES (DOA / POA) === */
.mega-menu__link--twoline {
  align-items: flex-start;
}

.mega-menu__link-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.3;
}

.mega-menu__link-sub {
  display: block;
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--c-text-secondary);
  letter-spacing: 0.02em;
  transition: color var(--transition-fast);
}

.mega-menu__link:hover .mega-menu__link-sub,
.mega-menu__link:focus-visible .mega-menu__link-sub {
  color: var(--c-magenta);
  opacity: 0.75;
}

/* === GROUPE D'IMPLANTATIONS (filiales Do iT Platinium) ===
   Intitule de regroupement suivi de N liens indentes. Pour ajouter une
   implantation (Do iT Germany, Do iT USA), dupliquer un lien .mega-menu__link--nested. */
.mega-menu__group {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--c-border);
}

.mega-menu__group-label {
  padding: 0 var(--space-4) var(--space-1);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-secondary);
}

.mega-menu__link--nested {
  padding-left: var(--space-6);
}

/* === LIEN « VOIR TOUT » === */
.mega-menu__view-all {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  margin-top: auto;
  color: var(--c-magenta);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 600;
  border-top: 1px solid var(--c-border);
  transition: background var(--transition-fast);
}

.mega-menu__view-all:hover {
  background: var(--mega-menu-link-hover);
}

.mega-menu__view-all-arrow {
  transition: transform var(--transition-fast);
}

.mega-menu__view-all:hover .mega-menu__view-all-arrow {
  transform: translateX(4px);
}

/* === COLONNE DROITE : PREVIEW === */
.mega-menu__preview {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-8) var(--space-6);
  background: var(--mega-menu-preview-bg);
  position: relative;
  overflow: hidden;
  min-height: 260px;
}

/* Cercle décoratif */
.mega-menu__preview::after {
  content: '';
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(var(--c-magenta-rgb), 0.08) 0%, rgba(var(--c-purple-rgb), 0.08) 100%);
  pointer-events: none;
}

.mega-menu__preview-content {
  position: relative;
  z-index: 1;
  transition: opacity var(--transition-fast);
}

.mega-menu__preview-content--fading {
  opacity: 0;
}

.mega-menu__preview-icon {
  width: 40px;
  height: 40px;
  color: var(--c-magenta);
  margin-bottom: var(--space-3);
}

.mega-menu__preview-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--c-navy);
  margin-bottom: var(--space-2);
}

.mega-menu__preview-desc {
  font-size: var(--text-sm);
  color: var(--c-text-secondary);
  line-height: 1.6;
}

/* === MOBILE + TABLETTE : max-width 1023px === */
@media (max-width: 1023px) {
  /* Masquer la preview sur mobile/tablette */
  .mega-menu__preview {
    display: none;
  }

  /* Rétablir le positionnement relatif du parent */
  .nav__menu-item--has-mega {
    position: relative;
  }

  /* Supprimer le trait de soulignement desktop sur les triggers mega-menu */
  .nav__menu-item--has-mega > .nav__link::after {
    display: none;
  }

  /* Le mega-menu se comporte comme un accordéon */
  .mega-menu {
    position: static;
    width: 100%;
    transform: none;
    flex-direction: column;
    box-shadow: none;
    border-radius: var(--radius-lg);
    background: var(--c-navy-pale);
    max-height: 0;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    transition: max-height 300ms ease-in-out, padding 300ms ease-in-out;
    padding: 0;
    margin: var(--space-2) 0;
  }

  .mega-menu::before {
    display: none;
  }

  /* Ouvert en mobile */
  .nav__menu-item--has-mega.submenu-open > .mega-menu {
    max-height: 720px;
    padding: var(--space-2);
  }

  .mega-menu__links {
    width: 100%;
    min-width: 0;
    padding: 0;
    border-right: none;
  }

  .mega-menu__link {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    color: var(--c-text);
  }

  .mega-menu__link:hover {
    background: var(--c-white);
    color: var(--c-magenta);
  }

  .mega-menu__link::before {
    display: none;
  }

  /* Groupe d'implantations : intitule + liens indentes */
  .mega-menu__group {
    margin-top: var(--space-1);
    padding-top: var(--space-1);
  }

  .mega-menu__group-label {
    padding: var(--space-1) var(--space-3);
  }

  .mega-menu__link--nested {
    padding-left: var(--space-6);
  }

  .mega-menu__view-all {
    border-top: none;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
  }
}

/* === RÉDUCTION DES MOUVEMENTS === */
@media (prefers-reduced-motion: reduce) {
  .mega-menu,
  .mega-menu__preview-content,
  .mega-menu__link,
  .mega-menu__view-all-arrow,
  .mega-menu__link-icon,
  .mega-menu__link-sub {
    transition: none;
  }
}