/* ==========================================================================
   MENU - V6 (Clean, consolidated) - Mega menu full width (premium sport)
   - Fond mega menu full width, contenu aligne sur grille NAV (wide)
   - Niveau 1 clean (hover sobre + underline discret)
   - Niveau 2 = titre de colonne (pas des "cards")
   - Niveau 3 = liens (plus discrets)
   - Mobile: mega off (offcanvas plus tard)
   ========================================================================== */



/* FIX: supprimer les indicateurs "expanded" du base theme/core */
.nav-primary nav.menu--main .menu-item--expanded > a{
  background-image: none !important;
}

/* Si le base theme met un chevron via pseudo-element */
.nav-primary nav.menu--main .menu-item--expanded > a::after{
  content: "" !important;
  -webkit-mask: none !important;
  mask: none !important;
  background-image: none !important;
}








/* --- Safety: mega panel can overflow outside container --- */
.site-nav{
  position: relative;
  z-index: 50;
  overflow: visible;

  /* look premium */
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.site-nav .container,
.nav-primary,
.nav-primary .region,
.nav-primary nav.menu--main{
  overflow: visible;
}

/* --- TOP LEVEL (level 1) --- */
.nav-primary nav.menu--main > ul.menu{
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(12px, 1.6vw, 20px);
}

/* Important: li static so mega panel anchors to .site-nav (not the li) */
.nav-primary nav.menu--main > ul.menu > li.menu-item{
  position: static;
  margin: 0;
  padding: 0;
}

.nav-primary nav.menu--main > ul.menu > li.menu-item > a{
  display: inline-flex;
  align-items: center;


  background: transparent;
  border-radius: 0;
  padding: 14px 10px;
  border-radius: 12px;

  text-decoration: none;
  color: var(--text);

  font-size: var(--nav-fs);
  font-weight: var(--nav-fw);
  letter-spacing: var(--nav-ls);


  position: relative;
  transition: background .12s ease, color .12s ease;
}

/* underline hover/active (discret, pas "UI kit") */
.nav-primary nav.menu--main > ul.menu > li.menu-item > a::after{
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 8px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);

  transform: scaleX(0);
  transform-origin: left;
  transition: transform .14s ease;
  opacity: .85;
}

.nav-primary nav.menu--main > ul.menu > li.menu-item > a:hover{
  /*background: rgba(11,18,32,.04);*/
}
.nav-primary nav.menu--main > ul.menu > li.menu-item > a:hover::after{
  transform: scaleX(1);
}

.nav-primary nav.menu--main > ul.menu > li.menu-item > a.is-active,
.nav-primary nav.menu--main > ul.menu > li.menu-item.menu-item--active-trail > a{
  /*background: rgba(10,60,255,.06);*/
  font-weight: var(--nav-fw-active);
}
.nav-primary nav.menu--main > ul.menu > li.menu-item > a.is-active::after,
.nav-primary nav.menu--main > ul.menu > li.menu-item.menu-item--active-trail > a::after{
  transform: scaleX(1);
}

/* Chevron for expanded items (level 1) */
.nav-primary nav.menu--main > ul.menu > li.menu-item--expanded > a{
  padding-right: 24px;
}
.nav-primary nav.menu--main > ul.menu > li.menu-item--expanded > a::before{
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 10px;
  height: 10px;
  transform: translateY(-50%);
  opacity: .7;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Keyboard focus */
.nav-primary nav.menu--main > ul.menu > li.menu-item > a:focus-visible{
  box-shadow: var(--ring);
}

/* --- MEGA PANEL (level 2 container) --- */
.nav-primary nav.menu--main > ul.menu > li.menu-item--expanded > ul.menu{
  list-style: none;
  margin: 0;

  position: absolute;
  left: 50%;
  top: 100%;
  width: 100vw;
  transform: translateX(-50%) translateY(10px);

  /* panel look (propre, premium) */
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.92));
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 22px 54px rgba(11,18,32,.12);

  /* spacing */
  padding-block: 22px;

  /* contenu aligne sur la grille NAV (wide) */
  padding-inline: max(
    var(--nav-pad),
    calc((100vw - var(--nav-max)) / 2 + var(--nav-pad))
  );

  /* layout colonnes */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;

  /* closed by default */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s;

  z-index: 60;
}

/* Open on hover + keyboard */
.nav-primary nav.menu--main > ul.menu > li.menu-item--expanded:hover > ul.menu,
.nav-primary nav.menu--main > ul.menu > li.menu-item--expanded:focus-within > ul.menu{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity .14s ease, transform .14s ease;
}

/* --- MEGA PANEL - column wrapper (level 2 item) --- */
.nav-primary nav.menu--main > ul.menu > li.menu-item--expanded > ul.menu > li.menu-item{
  margin: 0;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid transparent;

  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* subtle column hover (helps reading) */
.nav-primary nav.menu--main > ul.menu > li.menu-item--expanded > ul.menu > li.menu-item:hover{
  background: rgba(11,18,32,.03);
  border-color: rgba(11,18,32,.06);
}

/* Level 2 link = column title (not a button) */
.nav-primary nav.menu--main > ul.menu > li.menu-item--expanded > ul.menu > li.menu-item > a{
  display: inline-block;
  padding: 4px 2px;

  text-decoration: none;
  color: var(--text);


  font-size: var(--mega-title-fs);
  font-weight: var(--mega-title-fw);
  letter-spacing: var(--mega-title-ls);
  text-transform: uppercase;
  opacity: .92;


  background: transparent;
  border: 0;
  border-radius: 0;
}

.nav-primary nav.menu--main > ul.menu > li.menu-item--expanded > ul.menu > li.menu-item > a:hover{
  background: transparent;
}

/* --- LEVEL 3 (if Drupal renders ul.menu inside a level-2 item) --- */
.nav-primary nav.menu--main > ul.menu > li.menu-item--expanded > ul.menu > li.menu-item > ul.menu{
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  flex-direction: column;
  gap: 3px;
}

.nav-primary nav.menu--main > ul.menu > li.menu-item--expanded > ul.menu > li.menu-item > ul.menu > li.menu-item > a{
  display: block;
  padding: 7px 8px;
  border-radius: 10px;

  text-decoration: none;
  color: var(--text);

  font-size: var(--mega-link-fs);
  font-weight: var(--mega-link-fw);
  letter-spacing: var(--mega-link-ls);
  opacity: .88;



  border: 1px solid transparent;
  background: transparent;

  transition: background .12s ease, opacity .12s ease;
}

.nav-primary nav.menu--main > ul.menu > li.menu-item--expanded > ul.menu > li.menu-item > ul.menu > li.menu-item > a:hover{
  background: rgba(11,18,32,.04);
  opacity: 1;
}

/* --- Columns responsive --- */
@media (max-width: 1100px){
  .nav-primary nav.menu--main > ul.menu > li.menu-item--expanded > ul.menu{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- Mobile: keep bar scroll, disable hover mega (offcanvas later) --- */
@media (max-width: 900px){
  .nav-primary nav.menu--main > ul.menu{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 6px;
  }
  .nav-primary nav.menu--main > ul.menu::-webkit-scrollbar{ display: none; }

  .nav-primary nav.menu--main > ul.menu > li.menu-item--expanded > ul.menu{
    display: none !important;
  }
}







/* =========================
   POLISH MEGA MENU (premium)
   ========================= */

/* Mega panel: un peu plus “cinema”, moins blanc plat */
.nav-primary nav.menu--main > ul.menu > li.menu-item--expanded > ul.menu{
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92));
  border-top: 1px solid rgba(11,18,32,.10);
  border-bottom: 1px solid rgba(11,18,32,.10);
}

/* Colonnes: moins “box”, plus “section” */
.nav-primary nav.menu--main > ul.menu > li.menu-item--expanded > ul.menu > li.menu-item{
  padding: 10px 10px;
  border-radius: 12px;
}

/* Titre colonne (niveau 2) : label premium */
.nav-primary nav.menu--main > ul.menu > li.menu-item--expanded > ul.menu > li.menu-item > a{
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .78;
}

/* Liens niveau 3 : plus clean */
.nav-primary nav.menu--main > ul.menu > li.menu-item--expanded > ul.menu > li.menu-item > ul.menu > li.menu-item > a{
  padding: 7px 8px;
  border-radius: 10px;
  opacity: .90;
}

/* Hover niveau 3 : discret mais net */
.nav-primary nav.menu--main > ul.menu > li.menu-item--expanded > ul.menu > li.menu-item > ul.menu > li.menu-item > a:hover{
  background: rgba(11,18,32,.035);
}

/* Evite l’effet “bloc hover” trop marqué sur toute la colonne */
.nav-primary nav.menu--main > ul.menu > li.menu-item--expanded > ul.menu > li.menu-item:hover{
  background: rgba(11,18,32,.02);
  border-color: transparent;
}