/* ===================================================================
   MSA — Menu mobile en accordéon
   Ne cible QUE .mobile-menu (le menu mobile cloné par le thème) → aucun
   impact sur le menu desktop (.list-menu). Repli par défaut, chevron pour
   déplier, sous-menus indentés et différenciés. Tirets "-- " supprimés.
   =================================================================== */

/* 1) Supprimer les tirets "-- " / "---- " hérités du thème parent */
.mobile-menu li li a:before,
.mobile-menu li li li a:before {
  content: "" !important;
  padding: 0 !important;
}

/* 2) Items alignés à gauche et lisibles (override du centrage parent) */
.mobile-menu > ul { max-width: 100%; margin: 0; }
.mobile-menu a {
  margin: 0 !important;
  max-width: none !important;
  text-align: left !important;
}

/* 3) Rubriques principales : pleine largeur, en gras */
.mobile-menu > ul > li > a {
  padding: 0 22px !important;
  font-weight: 800;
}
.mobile-menu > ul > li.menu-item-has-children > a {
  padding-right: 56px !important; /* place pour le chevron */
}
.mobile-menu li.menu-item-has-children { position: relative; }

/* 4) Bouton chevron (injecté en JS) — zone de tap à droite de la rubrique */
.mobile-menu .msa-submenu-toggle {
  position: absolute;
  top: 0; right: 0;
  width: 54px; height: 55px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; margin: 0; padding: 0;
  cursor: pointer; z-index: 5;
  -webkit-tap-highlight-color: transparent;
}
.mobile-menu .msa-chevron {
  display: block; width: 9px; height: 9px;
  border-right: 2px solid rgba(255,255,255,0.85);
  border-bottom: 2px solid rgba(255,255,255,0.85);
  transform: rotate(-45deg);      /* › fermé : pointe vers la droite */
  transition: transform 0.3s ease;
  margin-left: -3px;
}
.mobile-menu li.msa-open > .msa-submenu-toggle .msa-chevron {
  transform: rotate(45deg);       /* ⌄ ouvert : pointe vers le bas */
}

/* 5) Sous-menus : repliés par défaut + animation de dépliage douce */
.mobile-menu .sub-menu {
  display: block;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
  background: rgba(255,255,255,0.05); /* bande légèrement plus claire = niveau enfant */
}
.mobile-menu li.msa-open > .sub-menu { max-height: 600px; }

/* 6) Sous-éléments : indentés + texte plus discret (hiérarchie claire) */
.mobile-menu .sub-menu li { border-top: 1px solid rgba(255,255,255,0.08); }
.mobile-menu .sub-menu li a {
  padding: 0 22px 0 42px !important; /* indentation vers la droite */
  font-weight: 600;
  font-size: 13px;
  text-transform: none;              /* casse normale = plus lisible que MAJUSCULES */
  color: rgba(255,255,255,0.78) !important;
  line-height: 48px;
}
.mobile-menu .sub-menu li a:hover { color: #fff !important; }

/* 7) 3e niveau éventuel : indentation supplémentaire */
.mobile-menu .sub-menu .sub-menu li a { padding-left: 62px !important; }