/* Menu, StatusMenu — nouveau (remplace les ⋯ en <details> et la modale de
   déplacement). */
.menu { position: relative; display: inline-block; }
.menu-panel {
  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0;
  min-width: 220px; max-width: min(360px, calc(100vw - 32px)); max-height: min(420px, 70dvh); overflow-y: auto;
  padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-overlay);
  animation: overlay-enter var(--enter) ease-out;
}
.menu-panel[data-align="end"] { left: auto; right: 0; }
.menu-panel ul { margin: 0; padding: 0; list-style: none; }
.menu-item {
  display: flex; align-items: start; gap: var(--space-2); width: 100%; min-height: 40px;
  padding: 8px 12px 8px 8px; border: 0; border-radius: var(--radius-small); background: none;
  color: var(--text); font-size: var(--text-sm); text-align: left;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--surface-2); }
.menu-item:focus-visible { outline-offset: -2px; }
.menu-item[aria-checked="true"] { color: var(--accent); font-weight: 600; }
.menu-item-danger { color: var(--danger); }
.menu-item[aria-disabled="true"] { color: var(--text-muted); cursor: not-allowed; }
.menu-item-icon { display: inline-grid; place-items: center; flex: 0 0 20px; height: 20px; margin-top: 1px; }
.menu-item-text { display: grid; gap: 2px; line-height: 22px; }
.menu-item-note { font-size: var(--text-xs); line-height: 16px; color: var(--text-muted); font-weight: 400; }
.menu-separator { height: 1px; margin: 4px 0; background: var(--border); }

/* Contrôle de statut : pastille + colonne + chevron (C04). */
.status-control { gap: var(--space-2); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }

/* Petit écran : le menu devient une feuille ancrée en bas, cibles 44 px. */
@media (max-width: 600px) {
  .menu-panel {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0;
    max-width: none; max-height: 70dvh; min-width: 0;
    padding: 8px 8px max(8px, env(safe-area-inset-bottom));
    border-radius: 12px 12px 0 0;
  }
  .menu-item { min-height: 44px; }
}
.menu-item:focus { background: var(--surface-2); outline: none; }
.menu-item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* Menu ancré (raccourci M d'une carte) : pas de déclencheur, le panneau
   pend sous le parent. */
.menu-anchored { display: block; height: 0; }