/* =========================================================
   AFEBAS – HEADER + MENU COMPLET (DESKTOP + MOBILE)
   Objectifs :
   - Gros logo (branding)
   - Barre sticky
   - Actif en jaune
   - Dropdown niv2 avec scroll
   - Niv3+ au clic (accordéon)
   - MOBILE : burger + accordéon, sous-menus visibles quand ouverts
   - Neutralise les "display:none / visibility:hidden" du thème parent
   ========================================================= */

/* ---------- Variables ---------- */
:root{
  --nav-bg:#0d2d54;
  --nav-bg2:#071e3a;
  --nav-accent:#F9C319;
  --nav-active:#F9C319;
  --nav-active-text:#071e3a;
  --nav-text:#dce8f5;
  --nav-drop-bg:#0a2444;
  --nav-h:54px;
  --nav-r:8px;
  --nav-shadow: 0 8px 24px rgba(0,0,0,.45);
}

/* ---------- Branding (gros logo) ---------- */
#afebas-masthead,
#afebas-masthead *{
  box-sizing:border-box;
}

#afebas-masthead .afebas-branding{
  background: linear-gradient(100deg, #061a33, #0b2a5b);
  border-bottom: 1px solid rgba(249,195,25,.25);
  padding: 18px 14px;
  text-align: center;
}

#afebas-masthead .afebas-branding-link{
  display:inline-block;
}

#afebas-masthead .afebas-branding-img{
  max-width: 560px;
  width: min(560px, 92vw);
  height: auto;
  display: inline-block;
}

/* ---------- Barre sticky ---------- */
#afebas-masthead .afebas-topbar{
  position: sticky;
  top: 0;
  z-index: 9999;
  min-height: var(--nav-h);
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 14px;
  background:linear-gradient(100deg,var(--nav-bg),var(--nav-bg2));
  border-bottom:2px solid var(--nav-accent);
  box-shadow:0 2px 8px rgba(0,0,0,.35);
}

#afebas-masthead .afebas-nav{ flex:1; min-width:0; }

/* ---------- UL principal ---------- */
#afebas-menu.afebas-menu{
  list-style:none;
  margin:0 !important;
  padding:0 !important;
  display:flex;
  align-items:center;
  gap:2px;
}

/* ---------- Top-level links ---------- */
#afebas-menu.afebas-menu > li{
  position:relative;
}

#afebas-menu.afebas-menu > li > a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:9px 13px;
  color:var(--nav-text) !important;
  font-size:13.5px;
  text-decoration:none !important;
  border-radius:var(--nav-r);
  white-space:nowrap;
  transition:background .18s,color .18s,transform .15s;
}

#afebas-menu.afebas-menu > li > a:hover{
  background:rgba(255,255,255,.11);
  color:#fff !important;
  transform:translateY(-1px);
}

/* Actif WP menu + fallback pages */
#afebas-menu.afebas-menu > li.current-menu-item > a,
#afebas-menu.afebas-menu > li.current-menu-ancestor > a,
#afebas-menu.afebas-menu > li.current_page_item > a,
#afebas-menu.afebas-menu > li.current_page_ancestor > a{
  background:var(--nav-active) !important;
  color:var(--nav-active-text) !important;
  font-weight:800;
}

/* Caret top-level (WP menu + fallback pages) */
#afebas-menu.afebas-menu > li.menu-item-has-children > a::after,
#afebas-menu.afebas-menu > li.page_item_has_children > a::after{
  content:"▾";
  font-size:10px;
  opacity:.75;
  margin-left:6px;
  transition:transform .2s;
}

/* Ouvert */
#afebas-menu.afebas-menu > li.af-open > a::after{
  transform:rotate(180deg);
}

/* ---------- Dropdown niveau 2 ---------- */
/* IMPORTANT : on neutralise les styles du parent qui cachent */
#afebas-menu.afebas-menu > li > ul.sub-menu{
  display:none;
  position:absolute;
  left:0;
  top:100%;
  min-width:260px;
  background:var(--nav-drop-bg);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--nav-r);
  box-shadow:var(--nav-shadow);
  padding:6px 0;
  z-index:10000;

  max-height: min(70vh, 520px);
  overflow:auto;

  float:none !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
}

/* Desktop : hover + focus + class af-open (JS) */
#afebas-menu.afebas-menu > li.menu-item-has-children:hover > ul.sub-menu,
#afebas-menu.afebas-menu > li.page_item_has_children:hover > ul.sub-menu,
#afebas-menu.afebas-menu > li.af-open > ul.sub-menu,
#afebas-menu.afebas-menu > li:focus-within > ul.sub-menu{
  display:block;
}

/* ---------- Items dropdown ---------- */
#afebas-menu.afebas-menu ul.sub-menu{
  list-style:none;
  margin:0;
}

#afebas-menu.afebas-menu ul.sub-menu li{
  position:relative;
  list-style:none;
}

#afebas-menu.afebas-menu ul.sub-menu a{
  display:flex;
  align-items:center;
  padding:9px 18px;
  color:var(--nav-text) !important;
  font-size:13px;
  text-decoration:none !important;
  white-space:nowrap;
  transition:background .15s,color .15s;
}

#afebas-menu.afebas-menu ul.sub-menu a:hover{
  background:rgba(255,255,255,.09);
  color:#fff !important;
}

#afebas-menu.afebas-menu ul.sub-menu li.current-menu-item > a,
#afebas-menu.afebas-menu ul.sub-menu li.current_page_item > a{
  background:var(--nav-active) !important;
  color:var(--nav-active-text) !important;
  font-weight:800;
}

/* ---------- Niveau 3+ (accordéon au clic) ---------- */
#afebas-menu.afebas-menu > li > ul.sub-menu ul.sub-menu{
  display:none;
  margin-left:10px;
  padding-left:10px;
  border-left:1px solid rgba(255,255,255,.10);
}

/* Ouverture du sous-sous-menu */
#afebas-menu.afebas-menu ul.sub-menu li.af-subopen > ul.sub-menu{
  display:block !important;
}

/* Indicateur ▸ sur items qui ont des enfants (dropdown) */
#afebas-menu.afebas-menu ul.sub-menu li.menu-item-has-children > a,
#afebas-menu.afebas-menu ul.sub-menu li.page_item_has_children > a{
  padding-right:44px;
}

#afebas-menu.afebas-menu ul.sub-menu li.menu-item-has-children > a::after,
#afebas-menu.afebas-menu ul.sub-menu li.page_item_has_children > a::after{
  content:"▸";
  position:absolute;
  right:16px;
  opacity:.75;
  transition:transform .2s;
}

/* Quand le niveau 3 est ouvert */
#afebas-menu.afebas-menu ul.sub-menu li.af-subopen > a::after{
  transform:rotate(90deg);
}

/* ---------- Burger ---------- */
#afebas-masthead .afebas-burger{
  display:none;
  margin-left:auto;
  background:rgba(255,255,255,.10);
  border:0;
  color:#fff;
  border-radius:var(--nav-r);
  padding:8px 12px;
  cursor:pointer;
  font-size:20px;
}

#afebas-masthead .afebas-burger:hover{
  background:rgba(255,255,255,.20);
}

/* =========================================================
   MOBILE (<= 960px) : burger + menu plein écran + accordéon
   ========================================================= */
@media (max-width: 960px){

  /* burger visible, nav masquée tant que pas ouvert */
  #afebas-masthead .afebas-burger{ display:inline-flex; align-items:center; }
  #afebas-masthead .afebas-nav{ display:none; }

  /* mode menu ouvert */
  #afTopbar.af-mobile-open{
    position:fixed;
    inset:0;
    height:100vh;
    align-items:flex-start;
    flex-direction:column;
    padding:14px 14px 24px;
    overflow-y:auto;
    z-index:100000;
  }

  #afTopbar.af-mobile-open .afebas-burger{
    position:absolute;
    top:10px;
    right:14px;
  }

  #afTopbar.af-mobile-open .afebas-nav{
    display:block !important;
    width:100% !important;
  }

  /* UL principal en colonne */
  #afTopbar.af-mobile-open #afebas-menu.afebas-menu{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    width:100% !important;
  }

  #afTopbar.af-mobile-open #afebas-menu > li > a{
    width:100% !important;
    padding:12px 16px !important;
    font-size:14px;
    justify-content:space-between;
  }

  /* MOBILE : on neutralise le thème parent (souvent display:none / visibility hidden) */
  #afTopbar.af-mobile-open #afebas-menu .sub-menu{
    display:none !important;              /* caché par défaut */
    position:static !important;
    float:none !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    box-shadow:none !important;
    border:0 !important;
    border-radius:0 !important;
    max-height:none !important;
    overflow:visible !important;
    background:rgba(0,0,0,.15) !important;
    margin:0 !important;
    padding:0 0 0 16px !important;
  }

  /* Niv2 : visible quand le top LI a af-open */
  #afTopbar.af-mobile-open #afebas-menu > li.af-open > .sub-menu{
    display:block !important;
  }

  /* Niv3+ : visible quand LI dropdown a af-subopen */
  #afTopbar.af-mobile-open #afebas-menu .sub-menu li.af-subopen > .sub-menu{
    display:block !important;
  }

  #afTopbar.af-mobile-open #afebas-menu .sub-menu a{
    padding:10px 14px !important;
    font-size:13.5px;
    white-space:normal !important; /* évite la coupe */
    justify-content:space-between;
  }

  /* Caret mobile (si thème parent l’enlève) */
  #afTopbar.af-mobile-open #afebas-menu li.menu-item-has-children > a::after,
  #afTopbar.af-mobile-open #afebas-menu li.page_item_has_children > a::after{
    content:"▾" !important;
    font-size:12px !important;
    opacity:.85 !important;
    margin-left:10px !important;
  }

  #afTopbar.af-mobile-open #afebas-menu > li.af-open > a::after,
  #afTopbar.af-mobile-open #afebas-menu .sub-menu li.af-subopen > a::after{
    transform:rotate(180deg);
  }
}

/* =========================================================
   BONUS : TOC (si vous utilisez votre Sommaire)
   ========================================================= */
.afebas-toc-box{
  margin: 14px 0 18px;
  padding: 14px 14px 10px;
  border-radius: 12px;
  border: 1px solid rgba(13,45,84,.18);
  background: rgba(13,45,84,.06);
}

.afebas-toc-title{
  font-weight: 800;
  margin-bottom: 10px;
  color:#0d2d54;
}

.afebas-toc-list{
  margin:0;
  padding-left:18px;
}

.afebas-toc-list li{
  margin:6px 0;
}

.afebas-toc-list a{
  text-decoration:none;
  font-weight:600;
}

.afebas-toc-list a:hover{
  text-decoration:underline;
}