/* ============================================================
   HEADER & MEGA MENU
   ============================================================ */

#site-header {
  position: sticky; top: 0; z-index: 900;
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  transition: box-shadow .2s;
}
#site-header.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,.09); }

.hdr-wrap  { max-width: 1280px; margin: 0 auto; padding: 0 28px; }
.hdr-inner { display: flex; align-items: center; height: 64px; gap: 0; }

/* ---- Logo ------------------------------------------------- */
.logo {
  display: flex; align-items: center; gap: 9px;
  text-decoration: none; flex-shrink: 0; margin-right: 20px;
}
.logo-icon { font-size: 1.35rem; line-height: 1; }
.logo span  { font-size: 1.2rem; font-weight: 800; color: #0d1f3c; letter-spacing: -.5px; }
.logo-accent { color: #c9a84c; }

/* ---- Nav -------------------------------------------------- */
.main-nav { display: flex; align-items: center; gap: 2px; }
.hdr-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }

/* ---- Boutons nav ------------------------------------------ */
.nav-item { position: relative; }

.nav-link,
.nav-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 12px; border-radius: 7px;
  font-size: .875rem; font-weight: 500; color: #444;
  text-decoration: none; background: none; border: none;
  cursor: pointer; white-space: nowrap; font-family: inherit;
  transition: color .15s, background .15s;
}
.nav-link:hover, .nav-btn:hover,
.nav-link[aria-current="page"] { color: #0d1f3c; background: #f5f5f7; }
.nav-link[aria-current="page"] { font-weight: 700; }

.nav-chev { font-size: .55rem; color: #bbb; transition: transform .2s; }
.nav-item.open .nav-chev,
.nav-item:hover .nav-chev { transform: rotate(180deg); color: #0d1f3c; }

/* ---- CTA -------------------------------------------------- */
.hdr-cta { display: flex; align-items: center; gap: 7px; font-size: .83rem; padding: 8px 16px; }

/* ---- Burger ----------------------------------------------- */
.nav-toggle {
  display: none; background: none;
  border: 1.5px solid #ddd; border-radius: 8px;
  width: 40px; height: 40px; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0;
}
.brg { display: block; width: 18px; height: 2px; background: #0d1f3c; border-radius: 2px; transition: all .22s; }
.nav-toggle.active .brg:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active .brg:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.active .brg:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   MEGA MENU BASE
   ============================================================ */
.mega {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%; transform: translateX(-50%) translateY(-6px);
  background: #fff;
  border: 1px solid #e4e4e4;
  border-radius: 14px;
  box-shadow: 0 12px 48px rgba(0,0,0,.13);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .16s, transform .16s, visibility 0s linear .16s;
  z-index: 1000;
}
.mega::before { content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }

@media (min-width: 1025px) {
  .nav-item.has-mega:hover > .mega {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition-delay: 0s;
  }
}
.nav-item.open > .mega {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0) !important;
  transition-delay: 0s;
}

/* ---- Tailles -------------------------------------------- */
.mega-sm { width: 480px; }

/* ---- Colonnes ------------------------------------------- */
.mega-inner { display: grid; padding: 8px; }
.mega-2col  { grid-template-columns: 1fr 1fr; }

.mega-col { padding: 12px 11px; }
.mega-col + .mega-col { border-left: 1px solid #f0f0f0; }

.mega-label {
  font-size: .67rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .7px; color: #bbb; margin: 0 0 8px;
  padding-bottom: 7px; border-bottom: 1px solid #f0f0f0;
}

/* ---- mlink ---------------------------------------------- */
.mlink {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 6px 8px; border-radius: 7px; text-decoration: none;
  color: #444; transition: background .12s; margin-bottom: 1px;
}
.mlink:hover { background: #f0f2f5; color: #0d1f3c; }
.mlink b  { display: block; font-size: .83rem; color: #0d1f3c; font-weight: 600; line-height: 1.2; }
.mlink em { display: block; font-size: .72rem; color: #888; font-style: normal; margin-top: 1px; }
.mlink-sm { padding: 4px 7px; }
.mlink-sm b { font-size: .8rem; }

.mlink-ico {
  width: 28px; height: 28px; border-radius: 7px; background: #f0f2f5;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: .85rem;
}
.mlink-ico i { font-size: .75rem; }
.ico-blue   { background: #e8f4fd; color: #004085; }
.ico-green  { background: #d4edda; color: #155724; }
.ico-orange { background: #fff3e0; color: #c56000; }
.ico-yellow { background: #fff9c4; color: #7a5c00; }
.ico-red    { background: #fce8e8; color: #721c24; }
.ico-purple { background: #f0e8fc; color: #5c0a98; }
.ico-teal   { background: #d1f0f0; color: #005f5f; }
.mlink-pin  { color: #c9a84c; font-size: .65rem; margin-top: 4px; flex-shrink: 0; }

/* ============================================================
   MEGA MARCHÉS — ancré à droite pour ne pas déborder
   ============================================================ */
#ni-marches > .mega {
  left: auto;
  right: -120px;
  transform: translateY(-6px);
  width: 780px;
  min-width: 0;
}
@media (min-width: 1025px) {
  #ni-marches:hover > .mega {
    transform: translateY(0) !important;
    opacity: 1; visibility: visible; pointer-events: auto;
  }
}
#ni-marches.open > .mega {
  transform: translateY(0) !important;
}

.mega-marches .mega-inner {
  display: grid;
  grid-template-columns: 240px 1fr 160px;
  padding: 0; gap: 0;
}

/* --- Régions (colonne 1) ---------------------------------- */
.mm-regions {
  padding: 10px 6px;
  border-right: 1px solid #f0f0f0;
  max-height: 420px;
  overflow-y: auto;
}
.mm-regions .mega-label { margin: 2px 8px 8px; }

.mm-reg-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px; border-radius: 7px;
  font-size: .82rem; font-weight: 500; color: #444;
  cursor: pointer; gap: 4px; transition: background .12s;
  white-space: nowrap;
}
.mm-reg-item:hover,
.mm-reg-item.active { background: #eef2ff; color: #0d1f3c; }
.mm-reg-item.active { font-weight: 600; }

.mm-reg-right { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.mm-reg-prix  { font-size: .68rem; color: #bbb; }
.mm-reg-item i { font-size: .5rem; color: #ccc; }

/* --- Départements (colonne 2) ----------------------------- */
.mm-depts {
  padding: 10px 12px;
  border-right: 1px solid #f0f0f0;
  min-height: 200px;
}
.mm-dept-panel { display: none; }
.mm-dept-panel.active { display: block; }

.mm-dept-region-name {
  font-size: .67rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .7px; color: #bbb;
  margin: 2px 0 10px; padding-bottom: 7px;
  border-bottom: 1px solid #f0f0f0;
}

.mm-depts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.mm-dept-link {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 7px; border-radius: 6px;
  font-size: .79rem; text-decoration: none; color: #555;
  transition: background .1s;
}
.mm-dept-link:hover { background: #f5f5f7; color: #0d1f3c; }
.mm-dept-num {
  font-size: .65rem; background: #f0f0f0; color: #777;
  border-radius: 4px; padding: 1px 5px; font-weight: 700;
  flex-shrink: 0; min-width: 26px; text-align: center;
}
.mm-dept-name { font-size: .79rem; font-weight: 500; line-height: 1.2; }

.mm-placeholder {
  display: flex; align-items: center; justify-content: center;
  height: 140px; color: #ccc; font-size: .82rem; flex-direction: column; gap: 8px;
}
.mm-placeholder i { font-size: 1.2rem; }

/* --- Top villes (colonne 3) ------------------------------- */
.mm-villes {
  padding: 10px 10px;
  background: #f7f8fa;
  border-radius: 0 14px 14px 0;
}
.mm-villes .mega-label { margin-bottom: 8px; }

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 1024px) {
  .nav-toggle { display: flex; }

  .main-nav {
    position: fixed;
    top: 64px; left: 0; right: 0; bottom: 0;
    background: #fff; z-index: 800;
    overflow-y: auto;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 12px 32px;
    width: 100%; box-sizing: border-box;
    transform: translateX(100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    border-top: 1px solid #eee;
  }
  .main-nav.open { transform: translateX(0); }

  .nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 799; }
  .nav-overlay.open { display: block; }

  .nav-item { width: 100%; }
  .nav-link, .nav-btn {
    width: 100%; justify-content: space-between;
    padding: 13px 14px; font-size: .95rem; border-radius: 8px;
  }

  /* Mega mobile */
  .mega, #ni-marches > .mega {
    position: static !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    width: 100% !important;
    background: #f7f8fa;
    margin: 2px 0 8px;
    display: none;
    opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
  }
  .nav-item.open > .mega { display: block !important; }

  .mega-marches .mega-inner {
    display: flex !important; flex-direction: column !important;
    padding: 0 !important; gap: 0 !important;
  }
  .mm-regions { max-height: none; border-right: none; border-bottom: 1px solid #eee; }
  .mm-depts   { border-right: none; border-bottom: 1px solid #eee; }
  .mm-villes  { background: transparent; border-radius: 0; }

  .mega-sm { width: 100% !important; }
  .mega-inner { grid-template-columns: 1fr 1fr !important; }
  .mega-col + .mega-col { border-left: none; border-top: 1px solid #f0f0f0; }
}

@media (max-width: 480px) {
  .hdr-wrap { padding: 0 14px; }
  .hdr-cta span { display: none; }
  .hdr-cta { padding: 8px 11px; }
}