/**
 * Moto — bouton menu ☰ (v1.0.0-menu).
 *
 * L'ancien bouton affichait le caractère « ☰ » dans la police système :
 * épaisseur et centrage aléatoires selon l'appareil, aspect pauvre.
 * Ici : icône vectorielle (3 traits, le dernier plus court en couleur de
 * marque), surface verre alignée sur la barre du haut, cible tactile 52 px
 * pour un cercle visuel de 46 px, anneau de focus visible au clavier.
 */

.moto-menu-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--gray-border, rgba(45, 27, 78, 0.13));
  border-radius: 50%;
  background: var(--moto-glass-strong, rgba(255, 255, 255, 0.94));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    var(--moto-shadow-card, 0 2px 16px rgba(45, 27, 78, 0.1)),
    0 1px 0 rgba(255, 255, 255, 0.6) inset;
  color: var(--ink, #2d1b4e);
  /* Neutralise l'ancien glyphe texte si un cache sert encore l'ancien DOM. */
  font-size: 0;
  line-height: 0;
  transition: transform 0.14s ease, box-shadow 0.16s ease, background 0.16s ease;
}

/* Cible tactile 52 px sans grossir le cercle : le bouton reste aligné
   avec les autres commandes de la barre du haut. */
.moto-menu-btn::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
}

.moto-menu-btn svg {
  width: 21px;
  height: 21px;
}

.moto-menu-btn__accent {
  stroke: var(--moto-secondary, #e8327a);
}

.moto-menu-btn:active {
  transform: scale(0.94);
  background: var(--moto-glass, rgba(255, 255, 255, 0.86));
}

.moto-menu-btn:focus-visible {
  outline: none;
  box-shadow:
    var(--moto-shadow-card, 0 2px 16px rgba(45, 27, 78, 0.1)),
    0 0 0 3px var(--moto-focus-ring, rgba(123, 57, 183, 0.45));
}

/* Menu ouvert : l'icône se met en retrait, le tiret de marque reste. */
.moto-menu-btn[aria-expanded="true"] {
  background: var(--moto-glass, rgba(255, 255, 255, 0.86));
}

html[data-theme="dark"] .moto-menu-btn {
  box-shadow:
    0 2px 16px rgba(0, 0, 0, 0.45),
    0 1px 0 rgba(255, 255, 255, 0.05) inset;
}