/* ===================== Burger Button ===================== */
.burger {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 30px;
  height: 25px;
  cursor: pointer;
  margin-right: auto; /* à droite pour RTL */
}

.burger span {
  display: block;
  height: 3px;
  background-color: rgb(69, 69, 69);
  border-radius: 2px;
  transition: 0.3s;
}

/* ===================== Responsive Menu ===================== */
@media screen and (max-width: 768px) {
  .menu {
    display: none;
    flex-direction: column;
    width: 100%;
    margin-top: 10px;
    gap: 0;
    text-align: right; /* alignement du texte à droite */
  }

  .menu.show {
    display: flex;
  }

  .menu-txt {
    width: 100%;
    border-radius: 0;
    margin: 0;
    padding: 10px 15px;
    background-color: rgba(255, 255, 255, 0.95);
    flex-direction: column;
    align-items: flex-end; /* alignement des éléments à droite */
    position: relative;
  }

  .menu-txt.show-sub>.sub-menu {
    display: flex;
    flex-direction: column;
  }

  .sub-menu {
    display: none;
    position: relative;
    top: 0;
    right: 0; /* sous-menu aligné à droite */
    opacity: 1;
    pointer-events: auto;
    background-color: rgba(255, 255, 255, 0.95);
    width: 100%;
    box-shadow: none;
    white-space: normal;
    flex-direction: column;
    padding-right: 10px; /* padding à droite pour RTL */
    gap: 5px;
    border-radius: 0;
  }

  .sub-label {
    color: rgb(69, 69, 69);
    padding-right: 20px; /* padding inversé pour RTL */
    display: block;
    text-decoration: none;
    transition: background 0.3s, color 0.3s;
  }

  .burger {
    display: flex;
  }
}

/* ===================== Burger Animation ===================== */
.burger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.burger.active span:nth-child(2) {
  opacity: 0;
}

.burger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}