/* ══════════════════════════════════════════════
   NAVIGATION — thème "site patrimoine" (accent or)
   MENU-2A (16/09/2026) — mega-menu desktop.
   Structure STRICTEMENT identique à navigation-immobilier.css :
   seul le bloc :root d'accent (ci-dessous) diffère (or vs corail).
   Utilisé par : index.html et les pages "site patrimoine".
   Voir docs/NAVIGATION-PROACTIFS.md.
══════════════════════════════════════════════ */
:root {
  --nav-accent: #C4973A;
  --nav-accent-strong: #B8882E;
  --pat-accent: #C4973A;
  --pat-accent-pale: #FBF4E3;
  --immo-accent: #E05D3D;
  --immo-accent-pale: #FBEAE3;
}

/* ===== Barre ===== */
#nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(24px, 4vw, 48px); box-sizing: border-box; background: rgba(250,250,247,.97); box-shadow: 0 1px 0 var(--border), var(--shadow-sm); transition: background .3s, box-shadow .3s, height .3s; }
#nav.scrolled { height: 64px; background: rgba(250,250,247,.98); backdrop-filter: blur(12px); }
.nav-logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.nav-logo img { height: 44px; width: auto; display: block; opacity: .92; }

/* ===== Liens de premier niveau ===== */
.nav-links { display: flex; align-self: stretch; align-items: stretch; justify-content: center; gap: 26px; list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0; }
.nav-item { display: flex; align-items: center; }
.nav-item.nav-drop { position: relative; }
.nav-link, .nav-trigger { font-family: inherit; font-size: 14px; font-weight: 500; color: var(--ink-soft); background: none; border: 0; cursor: pointer; padding: 6px 2px; margin: 0; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; position: relative; transition: color .2s; }
.nav-link:hover, .nav-trigger:hover { color: var(--nav-accent); }
.nav-trigger .chevron { font-size: 9px; line-height: 1; transition: transform .2s; pointer-events: none; }
.nav-item.open .nav-trigger .chevron { transform: rotate(180deg); }
.nav-link[aria-current="page"], .nav-trigger[aria-current="page"] { color: var(--nav-accent); }
.nav-link[aria-current="page"]::after, .nav-trigger[aria-current="page"]::after { content: ''; position: absolute; left: 2px; right: 2px; bottom: -3px; height: 2px; background: var(--nav-accent); border-radius: 2px; }
.nav-link:focus-visible, .nav-trigger:focus-visible { outline: 2px solid var(--nav-accent); outline-offset: 4px; border-radius: 3px; }

/* ===== Panneaux (affichage) ===== */
.mega-panel, .drop-panel { display: none; }
html.nav-js .nav-item.open > .drop-panel { display: block; }
html.nav-js .nav-item.open > .mega-panel { display: grid; }
html:not(.nav-js) .nav-item:hover > .drop-panel,
html:not(.nav-js) .nav-item:focus-within > .drop-panel { display: block; }
html:not(.nav-js) .nav-item:hover > .mega-panel,
html:not(.nav-js) .nav-item:focus-within > .mega-panel { display: grid; }

/* ===== Mega-menu (Patrimoine / Immobilier) ===== */
.mega-panel { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: min(820px, calc(100vw - 48px)); grid-template-columns: repeat(3, 1fr); gap: 26px; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 22px 26px; z-index: 1001; }
.mega-col { display: flex; flex-direction: column; gap: 1px; }
.mega-col-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; color: var(--slate); margin: 0 0 7px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.mega-col a { display: block; padding: 7px 10px; margin: 0 -10px; border-radius: var(--r-sm); font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: none; transition: background .15s, color .15s; }
.mega-col a:hover { background: var(--sand); color: var(--pat-accent); }
.mega-panel--immo .mega-col a:hover { color: var(--immo-accent); }
.mega-col a.mega-col-more { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--border); border-radius: 0; font-size: 12.5px; font-weight: 600; color: var(--slate); }
.mega-col a.mega-col-more:hover { background: transparent; color: var(--immo-accent); }

/* Carte commerciale (colonne 3 Immobilier) */
.mega-col--card { justify-content: center; }
.mega-card { background: var(--immo-accent-pale); border-radius: var(--r-md); padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.mega-card-title { font-size: 15px; font-weight: 700; color: var(--forest); margin: 0; line-height: 1.3; }
.mega-card-text { font-size: 13px; line-height: 1.5; color: var(--ink-soft); margin: 0; }
.mega-card-cta { align-self: flex-start; margin-top: 2px; font-size: 13px; font-weight: 700; color: var(--immo-accent); text-decoration: none; }
.mega-card-cta:hover { text-decoration: underline; }

/* ===== Dropdown simple (Ressources) ===== */
.drop-panel { position: absolute; top: 100%; left: 0; min-width: 200px; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 8px; z-index: 1001; }
.drop-panel a { display: block; padding: 9px 12px; border-radius: var(--r-sm); font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: none; transition: background .15s, color .15s; }
.drop-panel a:hover { background: var(--sand); color: var(--nav-accent); }

/* ===== CTA ===== */
.nav-cta-btn { background: var(--nav-accent); color: #fff; padding: 10px 20px; border-radius: 999px; font-size: 13.5px; font-weight: 700; text-decoration: none; white-space: nowrap; flex-shrink: 0; transition: background .2s, transform .15s, box-shadow .2s; }
.nav-cta-btn:hover { background: var(--nav-accent-strong); transform: translateY(-1px); box-shadow: var(--shadow-md); }

/* ===== Hamburger (mobile) ===== */
.hamburger { display: none; flex-direction: column; gap: 5px; padding: 8px; background: none; border: 0; cursor: pointer; margin-left: auto; }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: all .3s; }
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(6px,6px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(6px,-6px); }

/* ===== Conteneur menu mobile (MENU-3) — display:none global, hidden en desktop ===== */
.mobile-menu { display: none; position: fixed; top: 72px; left: 0; right: 0; height: calc(100vh - 72px); height: calc(100dvh - 72px); max-height: calc(100dvh - 72px); overflow: hidden; background: var(--ivory); border-top: 1px solid var(--border); z-index: 999; }

/* ===== Responsive : bascule desktop -> hamburger ===== */
@media (max-width: 900px) {
  #nav { padding: 0 24px; }
  .nav-links { display: none; }
  .nav-cta-btn { display: none; }
  .hamburger { display: flex; }
}


/* ═══ Menu mobile 2 niveaux (MENU-3) — entièrement isolé au breakpoint mobile ═══ */
@media (max-width: 900px) {
  .mobile-menu.open { display: block; }
  body.m-open { overflow: hidden; }

  .m-view { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 16px 24px calc(28px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: var(--ivory); transition: transform .22s ease; }
  .m-view--root { transform: translateX(0); z-index: 2; }
  .m-view--root.slid { transform: translateX(-100%); }
  .m-view--sub { transform: translateX(100%); z-index: 3; }
  .m-view--sub.active { transform: translateX(0); }

  .m-item, .m-back { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 44px; padding: 11px 2px; margin: 0; font-family: inherit; font-size: 16px; font-weight: 500; color: var(--ink); background: none; border: 0; border-bottom: 1px solid var(--border); text-align: left; text-decoration: none; cursor: pointer; }
  .m-item .m-caret { color: var(--slate); font-size: 20px; line-height: 1; }
  .m-parent[aria-current="page"] { color: var(--nav-accent); }
  .m-back { justify-content: flex-start; gap: 6px; min-height: 40px; border-bottom: 0; font-size: 14px; font-weight: 600; color: var(--slate); }
  .m-title { margin: 4px 0 10px; font-size: 22px; font-weight: 700; color: var(--forest); }
  .m-group { margin: 16px 0 2px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; color: var(--slate); }
  .m-view--sub .m-item { font-size: 15px; }
  .m-more { display: flex; align-items: center; min-height: 44px; padding: 12px 2px; font-size: 14px; font-weight: 600; color: var(--nav-accent); text-decoration: none; }
  .m-cta { display: block; margin-top: 18px; padding: 14px 20px; border-radius: 999px; background: var(--nav-accent); color: #fff; font-size: 15px; font-weight: 700; text-align: center; text-decoration: none; }

  /* Accent par univers (comme desktop) */
  .m-view[data-view="patrimoine"] .m-more { color: var(--pat-accent); }
  .m-view[data-view="patrimoine"] .m-cta { background: var(--pat-accent); }
  .m-view[data-view="immobilier"] .m-more { color: var(--immo-accent); }
  .m-view[data-view="immobilier"] .m-cta { background: var(--immo-accent); }

  .m-item:focus-visible, .m-back:focus-visible, .m-more:focus-visible, .m-cta:focus-visible { outline: 2px solid var(--nav-accent); outline-offset: 3px; border-radius: 6px; }

  @media (prefers-reduced-motion: reduce) { .m-view { transition: none; } }
}