/*
 * EARONTECH — REPÈRES DE MAINTENANCE
 * Écrans : Menu principal, sous-menus et menu repliable sur smartphone.
 * Chargement : private/view.php.
 * Interactions : public/navigation.js.
 * Les couleurs et tailles paramétrables utilisent les variables --app-* / --product-*.
 * Les blocs @media adaptent la même interface à la largeur de l’écran.
 * Conserver l’ordre des règles : les ajustements spécialisés suivent le socle commun.
 */

/* Menu commun : fixe sur ordinateur/tablette, tiroir sur téléphone. */
/* Le menu principal reste devant le volet des filtres, y compris pendant son animation (100–102). */
body > aside.application-sidebar  {
  z-index:103;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
}

.application-sidebar .sidebar-navigation  {
  display:block;
}

.application-sidebar .nav,.application-sidebar .sidebar-submenu .nav  {
  min-height:var(--app-menu-row-height,29px);
  padding:2px 9px;
  line-height:1.35;
  font-size:var(--app-menu-font-size,11px);
}

.application-sidebar .sidebar-separator  {
  border:0;
  border-top:1px solid var(--app-menu-separator,#354258);
  opacity:1;
  margin:9px 7px;
}

.application-sidebar .sidebar-submenu  {
  border-left-color:var(--app-menu-separator,#354258);
}

.application-sidebar .sidebar-section-title  {
  color:var(--app-menu-text,#eef3fc);
  font-family:inherit;
  font-size:var(--app-menu-font-size,11px);
  margin:9px 9px 4px;
  font-weight:700;
}

body.platform-appearance .navigation-toggle,body.platform-appearance .navigation-close,body.platform-appearance .navigation-backdrop  {
  display:none!important;
}

@media(max-width:1100px)  {
  body > main > .top  {
    flex-wrap:wrap;
    gap:8px;
  }

  body > main > .top > span  {
    flex:1 1 180px;
    min-width:0;
  }

  body > main > .top > .header-account-actions  {
    flex-wrap:wrap;
    gap:6px;
    max-width:100%;
  }

}

@media(max-width:760px)  {
  body > aside.application-sidebar  {
    position:fixed;
    inset:0 auto 0 0;
    width:min(300px,86vw);
    height:100vh;
    height:100dvh;
    box-sizing:border-box;
    z-index:1501;
    display:flex;
    padding:12px;
    transform:translateX(-100%);
    visibility:hidden;
    transition:transform .2s ease,visibility .2s;
  }

  body.navigation-open > aside.application-sidebar  {
    transform:translateX(0);
    visibility:visible;
  }

  body.navigation-open  {
    overflow:hidden;
  }

  .application-sidebar .brand  {
    padding-top:20px;
  }

  .application-sidebar .nav,.application-sidebar .sidebar-submenu .nav  {
    min-height:max(40px,var(--app-menu-row-height,29px));
  }

  body.platform-appearance button.navigation-toggle  {
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    flex:none;
    width:40px;
    min-height:40px!important;
    height:40px!important;
    max-height:40px!important;
    padding:6px;
  }

  body.platform-appearance .application-sidebar .navigation-close  {
    display:flex!important;
    align-items:center;
    justify-content:center;
    align-self:flex-end;
    width:36px;
    min-height:36px;
    padding:0;
    font-size:24px;
    background:transparent;
    color:var(--app-menu-text,#fff);
    border:1px solid currentColor;
  }

  body.platform-appearance > .navigation-backdrop:not([hidden])  {
    display:block!important;
    position:fixed;
    inset:0;
    width:100%;
    height:100%!important;
    max-height:none!important;
    min-height:0!important;
    border:0;
    border-radius:0;
    margin:0;
    padding:0!important;
    background:rgb(0 0 0 / .45)!important;
    z-index:1500;
  }

  body > main  {
    margin-left:0;
  }

  .top  {
    flex-wrap:wrap;
    gap:8px;
  }

  .top > .header-account-actions  {
    flex-wrap:wrap;
    gap:6px;
    max-width:100%;
  }

}

@media(prefers-reduced-motion:reduce)  {
  body > aside.application-sidebar  {
    transition:none;
  }

}