/*
 * Surcharge Hueman — Sidebar mobile < 480px
 * v3 : animation max-height sur .sidebar-content
 */

@media only screen and (max-width: 479px) {

  /* ── 1. Sidebar : bandeau fixe de 50px, ne s'étale plus ── */
  .sidebar.s1 {
    width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    background: #f0f0f0 !important;
    display: block !important;
    position: relative !important;
	padding: 0;
  }

  /* ── 2. Toujours afficher le bouton toggle ── */
  .sidebar.s1 .sidebar-toggle {
    display: block !important;
    width: 100% !important;
    height: 50px !important;
  }

  /* ── 3. Animation max-height sur sidebar-content ──
     On remplace display:none / opacity par max-height.
     La valeur max (9999px) doit être supérieure à la hauteur réelle
     de votre sidebar ; ajustez si elle est très longue. */
  .sidebar.s1 .sidebar-content {
    display: block !important;   /* on ne cache plus via display */
    opacity: 1 !important;       /* on neutralise les manipulations d'opacity du JS */
    overflow: hidden !important;
    max-height: 0 !important;
    transition: max-height 0.4s ease-in-out !important;
    -webkit-transition: max-height 0.4s ease-in-out !important;
  }

  /* ── 4. Sidebar ouverte : max-height libérée ── */
  .sidebar.s1.expanded .sidebar-content {
    max-height: 9999px !important;
    transition: max-height 0.6s ease-in-out !important;
    -webkit-transition: max-height 0.6s ease-in-out !important;
  }

  /* ── 5. Le contenu principal prend toute la largeur ── */
  .content {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
  }

  .main,
  .main-inner {
    padding: 0 !important;
    background-image: none !important;
  }

  /* ── 6. Nettoyage : pas d'ombre quand réduite ── */
  .sidebar.s1.collapsed {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
  }
  
    
  /*.sidebar[data-position="left"] .sidebar-toggle-arrows::before, .sidebar[data-position="middle-left"] .sidebar-toggle-arrows::before {
	content: "\f103" !important;
	}*/

	.expanded.sidebar .sidebar-toggle-arrows::before {
		content: "\f102" !important;
	}
	
	.collapsed.sidebar .sidebar-toggle-arrows::before {
		content: "\f103" !important;
	}

	.expanded .sidebar-toggle-arrows {
		opacity: 1 !important;
	}
}