.fom-root{
  --brand:#1B2A5B;
  --bg:#ffffff;
  --ink:#0f172a;
  --muted:#64748b;
  --line:rgba(15,23,42,.12);
  --shadow:0 18px 60px rgba(2,6,23,.28);
  --overlay:rgba(2,6,23,.55);
}

/* safe scope */
.fom-root, .fom-root *{ box-sizing:border-box; }
.fom-root a{ text-decoration:none; color:inherit; }
.fom-root button{ font:inherit; }

/* Floating controls */
.fom-root .fom-floating-controls{
  position:fixed;
  top:36px; left:42px; right:18px;
  z-index:2000;
  display:flex;
  align-items:center;
  justify-content:space-between;
  pointer-events:none;
}
.fom-root .fom-floating-left{
  display:flex; align-items:center; gap:10px;
  pointer-events:auto;
}

.fom-root .fom-float-btn{
  height:48px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  box-shadow:0 12px 35px rgba(2,6,23,.10);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:0 14px;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  user-select:none;
  white-space:nowrap;
}


/* Burger */
.fom-root .fom-burger{ width:48px; padding:0; }
.fom-root .fom-burger__icon{ width:22px; height:16px; position:relative; }
.fom-root .fom-burger__icon span{
  position:absolute; left:0; right:0; height:2px;
  background:var(--brand); border-radius:2px;
  transition:transform .18s ease, top .18s ease, opacity .18s ease;
}
.fom-root .fom-burger__icon span:nth-child(1){ top:0; }
.fom-root .fom-burger__icon span:nth-child(2){ top:7px; }
.fom-root .fom-burger__icon span:nth-child(3){ top:14px; }
.fom-root .fom-is-open .fom-burger__icon span:nth-child(1){ top:7px; transform:rotate(45deg); }
.fom-root .fom-is-open .fom-burger__icon span:nth-child(2){ opacity:0; }
.fom-root .fom-is-open .fom-burger__icon span:nth-child(3){ top:7px; transform:rotate(-45deg); }

/* Logo */
.fom-root .fom-logo-btn{ font-weight:900; color:var(--brand); padding:0 16px 0 12px; }
.fom-root .fom-logo-mark{
  width:34px; height:34px; border-radius:12px;
  background:var(--brand);
  display:grid; place-items:center;
  box-shadow:0 12px 30px rgba(27,42,91,.25);
}
.fom-root .fom-logo-mark svg{ width:18px; height:18px; fill:#fff; }

/* Logo image */
.fom-root .fom-logo-img{height:40px;width:auto;display:block;}

/* Overlay */
.fom-root .fom-menu-overlay{
  position:fixed; inset:0; z-index:9999;
  display:none;
}
.fom-root .fom-menu-overlay[aria-hidden="false"]{ display:block; }
.fom-root .fom-menu-overlay__backdrop{ position:absolute; inset:0; background:var(--overlay); }
/* =========================
   OVERLAY (animated in/out) - SAFE
   ========================= */
.fom-root .fom-menu-overlay{
  position:fixed;
  inset:0;
  z-index:999999; /* safe above page */
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition: opacity .22s ease, visibility 0s linear .22s;
}

/* ouvert si aria-hidden=false OU si classe is-open */
.fom-root .fom-menu-overlay[aria-hidden="false"],
.fom-root .fom-menu-overlay.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition: opacity .22s ease, visibility 0s linear 0s;
}

/* Backdrop */
.fom-root .fom-menu-overlay__backdrop{
  position:absolute;
  inset:0;
  background:var(--overlay);
  opacity:0;
  transition: opacity .22s ease;
}

.fom-root .fom-menu-overlay[aria-hidden="false"] .fom-menu-overlay__backdrop,
.fom-root .fom-menu-overlay.is-open .fom-menu-overlay__backdrop{
  opacity:1;
}

/* Panel */
.fom-root .fom-menu-panel{
  position:absolute;
  inset:0;
  background:var(--bg);
  box-shadow:var(--shadow);
  display:grid;
  grid-template-rows:auto 1fr;

  opacity:0;
  transform: translateY(-24px) scale(.98);
  transition: opacity .22s ease, transform .32s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}

.fom-root .fom-menu-overlay[aria-hidden="false"] .fom-menu-panel,
.fom-root .fom-menu-overlay.is-open .fom-menu-panel{
  opacity:1;
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce){
  .fom-root .fom-menu-overlay,
  .fom-root .fom-menu-overlay__backdrop,
  .fom-root .fom-menu-panel{
    transition:none !important;
    transform:none !important;
  }
}

.fom-root .fom-menu-panel{
  position:absolute; inset:0;
  background:var(--bg);
  box-shadow:var(--shadow);
  display:grid;
  grid-template-rows:auto 1fr;
  transform:translateY(-10px);
  opacity:0;
  transition:transform .18s ease, opacity .18s ease;
}
.fom-root .fom-menu-overlay[aria-hidden="false"] .fom-menu-panel{
  transform:translateY(0);
  opacity:1;
}

/* Top: close + logo left */
/* Mobile (par défaut) */
.fom-root .fom-menu-panel__top{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  padding:16px 18px;
  border-bottom:1px solid var(--line);
  background:#fff;
}


/* Desktop / grands écrans */
@media (min-width: 1024px){
  .fom-root .fom-menu-panel__top{
    padding:36px 43px;
  }
}

.fom-root .fom-close-btn{
  width:48px; height:48px; padding:0;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  cursor:pointer;
  display:grid; place-items:center;
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.fom-root .fom-close-btn:hover{
   /* couleur légère basée sur le brand settings */
  background-color: color-mix(in srgb, var(--brand) 7%, transparent);

  /* bordure légèrement teintée par la même couleur */
  border-color: color-mix(in srgb, var(--brand) 28%, var(--line));
}
.fom-root .fom-close-btn svg{ width:20px; height:20px; fill:var(--brand); }

/* Overlay logo: no pill effect */
.fom-root .fom-logo-in-overlay{
  box-shadow:none;
  background:transparent;
  border:0;
  padding:0 8px 0 0;
}

/* Columns */
.fom-root .fom-menu-panel__body{
  display:grid;
  grid-template-columns:35% 65%;
  min-height:0;
}
.fom-root .fom-menu-left{
  border-right:1px solid var(--line);
  padding:18px;
  overflow:auto;
  background:linear-gradient(180deg, rgba(27,42,91,.04), rgba(27,42,91,0));
}
.fom-root .fom-menu-right{ padding:18px; overflow:auto; }

.fom-root .fom-label{
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(27,42,91,.72);
  margin:6px 0 12px;
}

/* Parents */
.fom-root .fom-parent-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.fom-root .fom-parent-btn,
.fom-root .fom-parent-link{
  width:100%;
  border:1px solid var(--line);
  background:#fff;
  border-radius:16px;
  padding:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
  text-align:left;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.fom-root .fom-parent-btn:hover,
.fom-root .fom-parent-link:hover{
  box-shadow: none;
  transform: none;

  /* couleur légère basée sur le brand settings */
  background-color: color-mix(in srgb, var(--brand) 7%, transparent);

  /* bordure légèrement teintée par la même couleur */
  border-color: color-mix(in srgb, var(--brand) 28%, var(--line));
}

/* HOVER (parents + enfants) : couleur légère basée sur --brand */
.fom-root .fom-parent-btn:hover,
.fom-root .fom-parent-link:hover,
.fom-root .fom-child-btn:hover,
.fom-root .fom-child-link:hover{
  box-shadow: none;
  transform: none;
  background-color: color-mix(in srgb, var(--brand) 7%, transparent);
  border-color: color-mix(in srgb, var(--brand) 28%, var(--line));
}

/* ACTIVE / SELECTED (persistant) */
.fom-root .fom-parent-btn.is-active,
.fom-root .fom-parent-link.is-active{
  background-color: color-mix(in srgb, var(--brand) 12%, transparent);
  border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
}

/* Optionnel: un petit indicateur visuel à gauche */
.fom-root .fom-parent-btn.is-active,
.fom-root .fom-parent-link.is-active{
  position: relative;
}
.fom-root .fom-parent-btn.is-active::before,
.fom-root .fom-parent-link.is-active::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  bottom:8px;
  width:3px;
  border-radius:999px;
  background: var(--brand);
  opacity: .9;
}

/* Focus clavier (accessibilité) */
.fom-root .fom-parent-btn:focus-visible,
.fom-root .fom-parent-link:focus-visible,
.fom-root .fom-child-btn:focus-visible,
.fom-root .fom-child-link:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--brand) 55%, transparent);
  outline-offset: 2px;
}

.fom-root .fom-parent-btn[aria-selected="true"]{
  background-color: color-mix(in srgb, var(--brand) 7%, transparent);
  border-color: color-mix(in srgb, var(--brand) 28%, var(--line));
}
.fom-root .fom-parent-name{ font-weight:900; color:var(--brand); }
.fom-root .fom-parent-hint{ font-size:12px; color:var(--muted); font-weight:650; margin-top:2px; }
.fom-root .fom-chev{ width:18px; height:18px; fill:rgba(27,42,91,.75); }

/* Children */
.fom-root .fom-children-title{
  font-size:22px;
  margin:6px 0 14px;
  color:var(--brand);
  letter-spacing:-.02em;
  font-weight:900;
}
.fom-root .fom-children-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  max-width:760px;
}
.fom-root .fom-child-link, 
.fom-root .fom-subchild-link{
  border:1px solid var(--line);
  background:#fff;
  border-radius:16px;
  padding:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.fom-root .fom-child-link:hover,
.fom-root .fom-subchild-link:hover{
  border-color:rgba(27,42,91,.32);
}
.fom-root .fom-child-name{ font-weight:900; color:var(--ink); }
.fom-root .fom-child-desc{ display:block; font-size:12px; color:var(--muted); font-weight:650; margin-top:2px; }
.fom-root .fom-pill{
  font-size:12px;
  font-weight:900;
  color:#fff;
  background:var(--brand);
  padding:6px 10px;
  border-radius:999px;
  box-shadow:0 12px 28px rgba(27,42,91,.22);
  white-space:nowrap;
}
.fom-root .fom-empty{
  border:1px dashed rgba(27,42,91,.28);
  border-radius:18px;
  padding:18px;
  color:var(--muted);
  background:rgba(27,42,91,.03);
  font-weight:700;
  max-width:760px;
}

/* Responsive */
@media (max-width: 880px){
  .fom-root .fom-menu-panel__body{ grid-template-columns:1fr; }
  .fom-root .fom-menu-left{ border-right:0; border-bottom:1px solid var(--line); }
  .fom-root .fom-children-grid{ grid-template-columns:1fr; }
  .fom-root .fom-floating-controls{ top:12px; left:12px; right:12px; }
  .fom-root .fom-float-btn{ height:46px; border-radius:14px; }
  .fom-root .fom-burger, .fom-root .fom-close-btn{ width:46px; height:46px; }
}

/* Lock scroll */
body.fom-menu-open{ overflow:hidden; }

.fom-root .fom-parent-link{ text-decoration:none; }


/* Base: état fermé */
.fom-root .fom-menu-panel{
  transform: translateY(-12px);
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
}

/* Ouvert */
.fom-root .fom-menu-overlay[aria-hidden="false"] .fom-menu-panel{
  transform: translateY(0);
  opacity: 1;
}

/* Colonnes: animation d'entrée */
.fom-root .fom-menu-left,
.fom-root .fom-menu-right{
  opacity: 0;
  transform: translateY(10px);
  transition: transform .22s ease, opacity .22s ease;
}

.fom-root .fom-menu-overlay[aria-hidden="false"] .fom-menu-left{
  opacity: 1;
  transform: translateY(0);
  transition-delay: .06s;
}

.fom-root .fom-menu-overlay[aria-hidden="false"] .fom-menu-right{
  opacity: 1;
  transform: translateY(0);
  transition-delay: .12s;
}


/* Parents: état fermé */
.fom-root .fom-parent-item{
  opacity: 0;
  transform: translateY(8px);
  transition: transform .22s ease, opacity .22s ease;
}

/* Parents: état ouvert => visible */
.fom-root .fom-menu-overlay[aria-hidden="false"] .fom-parent-item{
  opacity: 1;
  transform: translateY(0);
}

/* petit bonus: hover plus fluide */
.fom-root .fom-parent-btn,
.fom-root .fom-parent-link{
  will-change: transform;
}


.fom-menu-panel{
  opacity: 0;
  transform: translateY(-28px) scale(0.97);
  filter: blur(6px);
  transition:
    opacity .28s ease,
    transform .34s cubic-bezier(.22,.61,.36,1),
    filter .28s ease;
}

.fom-menu-overlay[aria-hidden="false"] .fom-menu-panel{
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}



/* =========================
   Deep mode (niveau 3+)
   ========================= */

/* on anime la colonne parents pour la faire sortir */
.fom-root.fom-deep .fom-menu-left{
  animation: fomSlideOutLeft .28s cubic-bezier(.2,.8,.2,1) forwards;
}

@keyframes fomSlideOutLeft{
  to{ transform:translateX(-110%); opacity:0; }
}

/* après l’animation, on la cache complètement (JS ajoute .fom-left-hidden) */
.fom-root.fom-left-hidden .fom-menu-panel__body{
  grid-template-columns: 1fr; /* la droite prend tout */
}
.fom-root.fom-left-hidden .fom-menu-left{
  display:none;
}

/* grille interne dans la colonne droite -> 65/35 */
.fom-root .fom-right-grid{
  display:grid;
  grid-template-columns: 1fr; /* default */
  gap:14px;
}

/* quand on est en deep mode : 65/35 */
.fom-root.fom-left-hidden .fom-right-grid{
  grid-template-columns: 35% 65%;
}

/* colonnes droites */
.fom-root .fom-right-col{
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.55);
  overflow:hidden;
  min-height:0;
}

/* header des colonnes */
.fom-root .fom-right-col__head{
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:12px;
  color:color-mix(in srgb, var(--brand) 70%, var(--ink));
}
.fom-root .fom-right-col__body{
  padding:12px;
}

/* animation d’apparition des colonnes à droite */
.fom-root .fom-anim-in{
  animation:fomFadeUp .28s cubic-bezier(.2,.8,.2,1);
}
@keyframes fomFadeUp{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}

/* hover léger basé sur --brand (parents+enfants+sous-enfants) */
.fom-root .fom-parent-btn:hover,
.fom-root .fom-parent-link:hover,
.fom-root .fom-child-link:hover,
.fom-root .fom-subchild-link:hover{
  box-shadow:none;
  transform:none;
  background-color: color-mix(in srgb, var(--brand) 7%, transparent);
  border-color: color-mix(in srgb, var(--brand) 28%, var(--line));
}

/* parent sélectionné persistant */
.fom-root .fom-parent-btn.is-active,
.fom-root .fom-parent-link.is-active{
  background-color: color-mix(in srgb, var(--brand) 12%, transparent);
  border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
}


/* =========================
   Responsive deep mode (35/65 -> 1 col)
   ========================= */

/* Desktop: deep mode => 35% / 65% */
.fom-root.fom-left-hidden .fom-right-grid{
  grid-template-columns: 35% 65%;
}

/* Mobile/Tablet: stack => 1 colonne */
@media (max-width: 900px){
  .fom-root .fom-right-grid{
    grid-template-columns: 1fr !important;
  }

  /* optionnel: si tu veux que la colonne "sous-sous" prenne toute la largeur */
  .fom-root .fom-right-col{
    width: 100%;
  }
}