/* ===================================================================
   InGeTel-BET — Menu overlay (style maquette) + hamburger
   À CHARGER après ingetel-charte-sombre.css.
   Option A : coller ce contenu À LA FIN de ingetel-charte-sombre.css.
   Option B : garder ce fichier et l'enqueue (voir APPLIQUER-MENU-FOOTER.md).
   Toutes les couleurs sont mappées sur les presets theme.json.
   =================================================================== */

/* ---------- Bouton hamburger (déclencheur) ---------- */
.ig-burger {
  display: inline-flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 16px 0 18px;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 999px; background: transparent; cursor: pointer;
  color: var(--wp--preset--color--contrast);
  font: 500 13px/1 var(--wp--preset--font-family--sans);
  transition: border-color .15s, background .15s;
}
.ig-burger:hover { border-color: var(--wp--preset--color--contrast); }
.ig-burger__lines { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; }
.ig-burger__lines span { height: 1.5px; background: currentColor; border-radius: 2px; }
/* 4 traits : haut et bas plus larges que les 2 du milieu (préférence JYL) */
.ig-burger__lines span:nth-child(1), .ig-burger__lines span:nth-child(4) { width: 20px; }
.ig-burger__lines span:nth-child(2), .ig-burger__lines span:nth-child(3) { width: 12px; }

/* ---------- Overlay plein écran ---------- */
.ig-menu {
  position: fixed; inset: 0; z-index: 1000;
  background: color-mix(in oklab, var(--wp--preset--color--base-deep) 94%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s;
}
.ig-menu.is-open { opacity: 1; visibility: visible; }
.ig-menu__in {
  max-width: 1120px; margin: 0 auto; padding: 28px 32px;
  height: 100%; display: flex; flex-direction: column;
}
.ig-menu__top {
  height: 64px; display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.ig-menu__brand {
  font: 700 19px/1 var(--wp--preset--font-family--sans);
  letter-spacing: -.02em; color: var(--wp--preset--color--contrast);
}
.ig-menu__brand .dot { color: var(--wp--preset--color--accent-text); }
.ig-menu__close {
  width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid var(--wp--preset--color--line); background: transparent;
  color: var(--wp--preset--color--contrast); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .15s;
}
.ig-menu__close:hover { border-color: var(--wp--preset--color--contrast); }

.ig-menu__grid {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px;
  flex: 1; align-items: start; padding-top: 16px; min-height: 0; overflow: auto;
}
.ig-menu__nav { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.ig-menu__nav li { margin: 0; }
.ig-menu__nav .sub-menu {
  list-style: none; margin: 2px 0 10px; padding: 0 0 0 2px;
  display: flex; flex-wrap: wrap; gap: 6px 18px;
}
.ig-menu__nav .sub-menu .ig-menu__link {
  font: 400 15px/1 var(--wp--preset--font-family--sans);
  padding: 4px 0; border-bottom: 0; color: var(--wp--preset--color--ink-500);
}
.ig-menu__nav .sub-menu .ig-menu__link:hover { color: var(--wp--preset--color--accent-text); }
.ig-menu__link {
  display: flex; align-items: baseline; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--wp--preset--color--surface);
  font: 300 clamp(22px, 3.2vw, 32px)/1 var(--wp--preset--font-family--sans);
  letter-spacing: -.03em; color: var(--wp--preset--color--contrast);
  text-decoration: none; transition: color .15s, padding-left .2s;
}
.ig-menu__link:hover { color: var(--wp--preset--color--accent-text); padding-left: 10px; }
.ig-menu__link .n {
  font: 500 12px/1 var(--wp--preset--font-family--mono);
  color: var(--wp--preset--color--ink-300); letter-spacing: .1em;
}
.ig-menu__link .sub {
  font: 400 13px/1 var(--wp--preset--font-family--sans);
  color: var(--wp--preset--color--ink-500); letter-spacing: 0; margin-left: auto;
  text-align: right;
}
.ig-menu__aside {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 16px; padding: 28px;
}
.ig-menu__aside h4 {
  font: 500 13px/1 var(--wp--preset--font-family--sans);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--wp--preset--color--ink-300); margin: 0 0 18px;
}
.ig-menu__contact { display: flex; flex-direction: column; gap: 12px; font-size: 15px; color: var(--wp--preset--color--ink-700); }
.ig-menu__contact a, .ig-menu__addr { display: flex; align-items: flex-start; gap: 10px; color: inherit; text-decoration: none; }
.ig-menu__contact a:hover { color: var(--wp--preset--color--contrast); }
.ig-menu__contact .ic { color: var(--wp--preset--color--accent-text); display: inline-flex; flex: 0 0 auto; }
.ig-menu__addr { color: var(--wp--preset--color--ink-500); }
.ig-menu__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 24px; width: 100%; padding: 14px 22px; border-radius: 999px;
  background: var(--wp--preset--color--accent); color: #06120D;
  font: 500 14px/1 var(--wp--preset--font-family--sans); text-decoration: none;
  transition: background .15s, transform .12s;
}
.ig-menu__cta:hover { background: var(--wp--preset--color--accent-text); transform: translateY(-1px); }

body.ig-menu-open { overflow: hidden; }

@media (max-width: 820px) {
  .ig-menu__grid { grid-template-columns: 1fr; gap: 28px; }
  .ig-menu__aside { order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  .ig-menu { transition: none; }
  .ig-menu__link { transition: color .15s; }
}