:root{
  --fmm-ink:#0f1b3a;
  --fmm-bg:#ffffff;
  --fmm-muted:rgba(15,27,58,.66);
  --fmm-line:rgba(15,27,58,.08);
  --fmm-shadow:0 20px 60px rgba(10,12,30,.18);
  --fmm-ease:cubic-bezier(.2,.8,.2,1);
}

.fmm-root{
  color:var(--fmm-ink);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

.fmm-topbar{background:var(--fmm-bg); position:relative; z-index:5}
.fmm-topbar__inner{height:64px; display:flex; align-items:center; padding:0 18px; gap:14px}

/* ✅ NO animation on these buttons */
.fmm-btn-icon,
.fmm-btn-close{
  width:44px;height:44px;
  border:1px solid var(--fmm-line);
  background:#fff;
  color: #0f1b3a !important;
  border-radius:12px;
  display:grid;place-items:center;
  cursor:pointer;
  transition:none !important;
  transform:none !important;
  box-shadow:none !important;
}
.fmm-btn-icon:hover,.fmm-btn-icon:active,
.fmm-btn-close:hover,.fmm-btn-close:active{
  background:#fff;
    color: #0f1b3a !important;

  border-color:var(--fmm-line);
}

/* =========================
   FMM – Lock open button styles (anti-theme hover/focus)
========================= */

.fmm-btn-icon,
.fmm-btn-icon:hover,
.fmm-btn-icon:active,
.fmm-btn-icon:focus,
.fmm-btn-icon:focus-visible,
.fmm-btn-icon:focus-within{
  background: #fff !important;
  border-color: var(--fmm-line) !important;
  box-shadow: none !important;
  outline: none !important;
  transform: none !important;
}

/* Empêche les thèmes de colorer le SVG */
.fmm-btn-icon svg,
.fmm-btn-icon path{
  fill: currentColor !important;
}

/* Accessibilité propre (remplace le focus rose du thème) */
.fmm-btn-icon:focus-visible{
  outline: 3px solid rgba(15,27,58,.22) !important;
  outline-offset: 3px;
  border-radius: 12px;
}

/* Logo */
.fmm-logo{margin-left:126px; display:flex; align-items:center}
.fmm-logo__img{max-height:48px; width:auto; display:block}
.fmm-logo__text{font-weight:800; letter-spacing:.2px; font-size:18px}
.fmm-logo__text span{opacity:.7; font-weight:700}

/* Overlay */
.fmm-overlay{position:fixed; inset:0; display:none; z-index:9999}
.fmm-overlay[aria-hidden="false"]{display:block}
.fmm-overlay__backdrop{position:absolute; inset:0; background:rgba(10,12,30,.34); opacity:0; transition:opacity .22s var(--fmm-ease)}
.fmm-overlay[aria-hidden="false"] .fmm-overlay__backdrop{opacity:1}
.fmm-overlay__panel{
  position:absolute; inset:0; background:var(--fmm-bg);
  transform:translateY(12px); opacity:0;
  transition:transform .26s var(--fmm-ease), opacity .26s var(--fmm-ease);
  box-shadow:var(--fmm-shadow);
}
.fmm-overlay[aria-hidden="false"] .fmm-overlay__panel{transform:translateY(0); opacity:1}
body.fmm-locked{overflow:hidden}

/* Header panel */
.fmm-menu-head{height:76px; display:flex; align-items:center; padding:0 22px; border-bottom:1px solid var(--fmm-line); gap:12px}
.fmm-menu-title{font-weight:800; font-size:18px; letter-spacing:.2px}
.fmm-spacer{flex:1}

/* Layout 2 -> 3 columns */
.fmm-menu-body{
  height:calc(100vh - 76px);
  display:grid;
  grid-template-columns: 40% 60%;
  min-height:0;
  transition:grid-template-columns .22s var(--fmm-ease);
}
.fmm-menu-body.is-col3{grid-template-columns: 38% 34% 28%}

/* =========================
   ✅ UPDATE: Left scrollbar hidden + vertical thin line
   ✅ UPDATE: Mid can be hidden when empty
========================= */

.fmm-col{overflow:auto; padding:28px 26px}

/* LEFT: keep scroll, hide scrollbar, keep thin separator */
.fmm-col-left{
  position:relative;
  /* keep scrolling but hide the scrollbar */
  scrollbar-width:none; /* Firefox */
  -ms-overflow-style:none; /* IE/Edge legacy */
}
.fmm-col-left::-webkit-scrollbar{width:0;height:0} /* WebKit */

.fmm-col-left::after{
  content:"";
  position:absolute;
  top:0; right:0;
  width:1px; height:100%;
  background:var(--fmm-line); /* thin grey line */
  pointer-events:none;
}

/* MID/RIGHT base */
.fmm-col-mid{
  border-left:1px solid var(--fmm-line);
}
.fmm-col-right{
  border-left:1px solid var(--fmm-line);
  display:none;
}
.fmm-menu-body.is-col3 .fmm-col-right{display:block}

/* ✅ If mid has nothing to show, hide the entire MID column
   (your JS should toggle .is-empty on .fmm-col-mid) */
.fmm-col-mid.is-empty{
  display:none !important;
  border-left:none !important;
}

/* ✅ When mid is hidden, the layout becomes 1 column (left) + optional right via is-col3 */
.fmm-menu-body.is-mid-empty{ /* your JS adds this on .fmm-menu-body */
  grid-template-columns: 100% !important;
}
.fmm-menu-body.is-mid-empty.is-col3{
  /* if you ever want left + right even when mid hidden, uncomment:
  grid-template-columns: 72% 28% !important;
  */
}

/* Left */
.fmm-group{padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid var(--fmm-line)}
.fmm-primary{font-size:28px; font-weight:800; margin:0 0 12px}
.fmm-primary-list,.fmm-sub-list,.fmm-mid-list,.fmm-right-list{list-style:none; padding:0; margin:0}
.fmm-primary-item{margin:0 0 18px}

.fmm-item-link{
  display:inline-flex; align-items:center; gap:10px;
  text-decoration:none; color:var(--fmm-ink);
  font-weight:600; font-size:22px; line-height:1.2;
  padding:8px 10px; border-radius:12px;
  transition:background .18s var(--fmm-ease), transform .18s var(--fmm-ease);
}
.fmm-item-link:hover{background:rgba(15,27,58,.05); transform:translateX(2px)}
.fmm-chev{width:18px;height:18px; opacity:.45}

.fmm-sub-list{margin-top:10px; padding-left:38px; display:grid; gap:10px}
.fmm-sub-link{
  display:inline-flex; align-items:center; gap:10px;
  text-decoration:none; color:var(--fmm-ink);
  font-weight:400; font-size:22px;
  padding:10px 10px; border-radius:12px;
  transition:background .18s var(--fmm-ease), transform .18s var(--fmm-ease);
}
.fmm-sub-link:hover{background:rgba(15,27,58,.05); transform:translateX(2px)}
.fmm-sub-link.is-active{background:rgba(15,27,58,.07)}
.fmm-dot{width:6px;height:6px;border-radius:999px;background:rgba(15,27,58,.25); flex:0 0 auto; margin-left:2px}

/* Mid/Right */
.fmm-panel-title{font-size:22px; font-weight:600; margin:0 0 10px; letter-spacing:.2px}
.fmm-panel-desc{margin:0 0 18px; color:var(--fmm-muted); font-size:16px; max-width:52ch}
.fmm-card{border-radius:18px; border:1px solid var(--fmm-line); padding:16px; background:#fff}

.fmm-mid-link,.fmm-right-link{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  text-decoration:none; color:var(--fmm-ink);
  padding:12px 12px; border-radius:14px;
  border:1px solid transparent;
  transition:background .18s var(--fmm-ease), border-color .18s var(--fmm-ease), transform .18s var(--fmm-ease);
  font-size:18px; font-weight:400;
}
.fmm-mid-link:hover,.fmm-right-link:hover{
  background:rgba(15,27,58,.04);
  border-color:rgba(15,27,58,.10);
  transform:translateX(2px);
}
.fmm-mid-link.is-active{background:rgba(15,27,58,.06); border-color:rgba(15,27,58,.10)}
.fmm-arrow{color:var(--fmm-muted); font-weight:700; font-size:13px}
.fmm-right-empty{color:var(--fmm-muted); font-size:15px; margin:0}

/* Mobile */
@media (max-width: 980px){
  .fmm-menu-body, .fmm-menu-body.is-col3{grid-template-columns:1fr}

  /* when stacked, don't draw left/right vertical separators */
  .fmm-col-left::after{display:none}

  .fmm-col-mid{border-left:none; border-top:1px solid var(--fmm-line)}
  .fmm-col-right{display:block; border-left:none; border-top:1px solid var(--fmm-line)}
  .fmm-sub-list{padding-left:26px}
  .fmm-sub-link{font-size:22px}
  .fmm-item-link{font-size:20px}
  .fmm-panel-title{font-size:24px}

  /* on mobile, if mid empty, show nothing (keeps flow clean) */
  .fmm-col-mid.is-empty{display:none !important}
}

.fmm-root a:focus-visible,
.fmm-root button:focus-visible{
  outline:3px solid rgba(15,27,58,.22);
  outline-offset:3px;
  border-radius:14px;
}

/* ===== FMM FORCE ICON VISIBILITY (anti-theme reset) ===== */
.fmm-mid-link, .fmm-right-link { color: var(--fmm-ink) !important; }
.fmm-arrow { color: var(--fmm-ink) !important; }
.fmm-arrow svg { display:block !important; width:16px !important; height:16px !important; }
.fmm-arrow svg * { fill: currentColor !important; stroke: currentColor !important; }


/* =========================
   FMM – Hide scrollbar on MID column (keep scroll)
========================= */

.fmm-col-mid{
  overflow-y: auto;          /* garde le scroll */
  scrollbar-width: none;     /* Firefox */
  -ms-overflow-style: none;  /* IE / Edge legacy */
}

.fmm-col-mid::-webkit-scrollbar{
  width: 0;
  height: 0;
}

.fmm-col-mid{
  position: relative;
}

.fmm-col-mid::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:1px;
  height:100%;
  background:var(--fmm-line);
  pointer-events:none;
}


/* =========================
   FMM – Option 2: Fade + Lift (mid/right)
========================= */

/* Base: ready for animation */
.fmm-col-mid,
.fmm-col-right{
  will-change: opacity, transform;
}

/* Mid: hidden by default (but NOT display:none) */
.fmm-col-mid{
  opacity:0;
  transform:translateY(6px);
  transition:
    opacity .18s ease-out,
    transform .18s ease-out;
}

/* Right: hidden by default */
.fmm-col-right{
  opacity:0;
  transform:translateY(6px);
  transition:
    opacity .18s ease-out,
    transform .18s ease-out;
  transition-delay:.04s; /* léger décalage sympa */
}

/* Visible state */
.fmm-col-mid.is-visible{
  opacity:1;
  transform:translateY(0);
}

.fmm-col-right.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* IMPORTANT:
   Si mid est "empty", tu la caches vraiment (comme tu voulais) */
.fmm-col-mid.is-empty{
  display:none !important;
  opacity:0 !important;
  transform:none !important;
  transition:none !important;
}

/* Mobile: pas d’animation (plus rapide / plus stable) */
@media (max-width: 980px){
  .fmm-col-mid,
  .fmm-col-right{
    transition:none !important;
    transform:none !important;
    opacity:1 !important;
  }
}