/* === PATCH CRITIQUE — Menu mobile: empiler les sous-menus === */
/* À coller TOUT EN BAS de votre CSS (ou dans un <style> après le bloc existant) */
@media (max-width: 1024px) {
  /* 1) Le LI ne doit PAS être un conteneur flex horizontal */
  nav.eltdf-mobile-nav > .eltdf-grid > ul > li {
    display: block !important;         /* <-- corrige l'empilement */
    align-items: stretch !important;   /* neutralise l'ancien alignement */
  }

  /* 2) On garde le flex SEULEMENT sur la barre cliquable */
  nav.eltdf-mobile-nav > .eltdf-grid > ul > li > .menu-toggle-div {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
  }

  /* 3) Les sous-menus restent sous le parent, 100% largeur */
  nav.eltdf-mobile-nav ul.sub-menu {
    position: static !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 0 0 12px !important;    /* indentation */
    box-shadow: none !important;
    transform: none !important;
    white-space: normal !important;
    /* NE PAS toucher à display ici → on laisse votre JS ouvrir/fermer */
  }

  /* Niveaux imbriqués: indentation supplémentaire */
  nav.eltdf-mobile-nav ul.sub-menu ul.sub-menu {
    padding-left: 12px !important;
  }

  /* Clic confortable */
  nav.eltdf-mobile-nav a { display: block; width: 100%; }
}
/* === Fin patch === */
/* /css/custom.css — Mobile menu: polish spacing/borders (à coller tout en bas) */
@media (max-width: 1024px) {
  /* Variables de thème */
  nav.eltdf-mobile-nav {
    --mm-pad: 14px;
    --mm-indent: 16px;
    --mm-gap: 8px;
    --mm-border: 1px solid #e9ecef;
    --mm-bg: #fff;
    --mm-hover: #f7f7f7;
    --mm-radius: 8px;
  }

  /* 1) Normalisation structure */
  nav.eltdf-mobile-nav ul#menu-main-menu,
  nav.eltdf-mobile-nav ul.sub-menu {
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;           /* why: éviter cadres imbriqués */
    box-shadow: none !important;
    background: var(--mm-bg);
  }

  nav.eltdf-mobile-nav > .eltdf-grid > ul > li,
  nav.eltdf-mobile-nav ul.sub-menu > li {
    display: block !important;       /* why: empilement vertical sûr */
    float: none !important;
    width: 100% !important;
    border-bottom: var(--mm-border);
    box-sizing: border-box;
  }
  /* pas de double bordure sur le dernier élément */
  nav.eltdf-mobile-nav li:last-child { border-bottom: 0; }

  /* 2) Barre cliquable (parent) + liens */
  nav.eltdf-mobile-nav .menu-toggle-div,
  nav.eltdf-mobile-nav li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px;
    padding: var(--mm-pad) !important;
    min-height: 44px;                /* why: cible tactile */
    text-decoration: none;
  }

  /* Flèche */
  nav.eltdf-mobile-nav .eltdf-mobile-arrow { 
    flex: 0 0 auto;
    line-height: 1;
    transition: transform .2s ease, opacity .2s ease;
    opacity: .8;
  }
  nav.eltdf-mobile-nav li.open > .menu-toggle-div .eltdf-mobile-arrow { transform: rotate(180deg); }

  /* 3) Sous-menus: “carte” propre sous le parent */
  nav.eltdf-mobile-nav li.open > ul.sub-menu {
    margin-top: var(--mm-gap) !important;   /* espace entre parent et carte */
    border-top: var(--mm-border) !important;
    border-radius: var(--mm-radius);
    overflow: hidden;                        /* why: coins nets */
  }
  /* évite la double bordure parent/sous-menu */
  nav.eltdf-mobile-nav li.open { border-bottom: 0 !important; }

  /* 4) Indentation par niveau sur les items enfants */
  nav.eltdf-mobile-nav ul.sub-menu > li > .menu-toggle-div,
  nav.eltdf-mobile-nav ul.sub-menu > li > a {
    padding-left: calc(var(--mm-pad) + var(--mm-indent)) !important;
  }
  nav.eltdf-mobile-nav ul.sub-menu .sub-menu > li > .menu-toggle-div,
  nav.eltdf-mobile-nav ul.sub-menu .sub-menu > li > a {
    padding-left: calc(var(--mm-pad) + 2 * var(--mm-indent)) !important;
  }

  /* 5) États */
  nav.eltdf-mobile-nav li > a:hover,
  nav.eltdf-mobile-nav .menu-toggle-div:hover { background: var(--mm-hover); }

  /* 6) Facultatif: lignes séparatrices internes du sous-menu */
  nav.eltdf-mobile-nav ul.sub-menu > li { border-bottom: var(--mm-border); }
  nav.eltdf-mobile-nav ul.sub-menu > li:last-child { border-bottom: 0; }

  /* 7) Sécurité typographique */
  nav.eltdf-mobile-nav .item_text { white-space: normal; }
}