/* ═══════════════════════════════════════════════════════════
   COMPONENT — kebab-menu
   Bouton `⋯` qui ouvre un menu déroulant d'actions secondaires
   (Aspirer, Pilotage, Export, Archiver, etc.). À droite des CTA
   primaires dans les barres commande des modules.
   ───────────────────────────────────────────────────────────
   HTML attendu :
     <div class="kebab-menu">
       <button class="kebab-menu__trigger" type="button"
               aria-haspopup="true" aria-expanded="false"
               aria-label="Plus d'actions">
         <svg viewBox="0 0 24 24" fill="currentColor">
           <circle cx="12" cy="5" r="2"/>
           <circle cx="12" cy="12" r="2"/>
           <circle cx="12" cy="19" r="2"/>
         </svg>
       </button>
       <div class="kebab-menu__panel" role="menu">
         <button class="kebab-menu__item" role="menuitem">
           <svg class="kebab-menu__item-icon">…</svg>
           <span class="kebab-menu__item-label">Pilotage</span>
           <span class="kebab-menu__item-kbd">⌥P</span>
         </button>
         <hr class="kebab-menu__sep">
         <button class="kebab-menu__item kebab-menu__item--danger">…</button>
       </div>
     </div>
   ───────────────────────────────────────────────────────────
   Le JS associé (kebab-menu.js) gère :
   - Click trigger → toggle .is-open sur .kebab-menu
   - Click outside → ferme
   - Escape → ferme
   - Click sur item → ferme + déclenche action
   ───────────────────────────────────────────────────────────
   Tokens : --soma-card, --soma-text, --soma-text2, --soma-muted,
            --soma-r-md, --soma-r-sm, --soma-sh-md, --soma-border,
            --soma-bg, --soma-green-soft, --soma-red,
            --soma-font-body, --soma-text-md, --soma-text-sm,
            --soma-weight-*, --soma-s-*, --soma-dur-*, --soma-ease-out
   ═══════════════════════════════════════════════════════════ */

.kebab-menu {
  position: relative;
  display: inline-block;
}

/* ── Trigger : bouton ⋯ ─────────────────────────────────── */

.kebab-menu__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 0;
  border-radius: var(--soma-r-sm);
  color: var(--soma-muted);
  cursor: pointer;
  transition:
    background var(--soma-dur-fast) var(--soma-ease-out),
    color var(--soma-dur-fast) var(--soma-ease-out);
}

.kebab-menu__trigger:hover {
  background: var(--soma-bg);
  color: var(--soma-text);
}

.kebab-menu__trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--soma-green-soft);
}

.kebab-menu.is-open .kebab-menu__trigger {
  background: var(--soma-bg);
  color: var(--soma-text);
}

.kebab-menu__trigger svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* ── Panel : menu déroulant ─────────────────────────────── */

.kebab-menu__panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  padding: 6px;
  background: var(--soma-card);
  border: 1px solid var(--soma-border);
  border-radius: var(--soma-r-md);
  box-shadow: var(--soma-sh-md);
  z-index: 100;
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  transform-origin: top right;
  pointer-events: none;
  transition:
    opacity var(--soma-dur-mid) var(--soma-ease-out),
    transform var(--soma-dur-mid) var(--soma-ease-out);
}

.kebab-menu.is-open .kebab-menu__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Variante panel ouvert à gauche (si pas la place à droite) */
.kebab-menu--left .kebab-menu__panel {
  right: auto;
  left: 0;
  transform-origin: top left;
}

/* ── Item de menu ──────────────────────────────────────── */

.kebab-menu__item {
  display: flex;
  align-items: center;
  gap: var(--soma-s-5);
  width: 100%;
  padding: var(--soma-s-5) var(--soma-s-7);
  background: transparent;
  border: 0;
  border-radius: var(--soma-r-sm);
  color: var(--soma-text);
  font-family: var(--soma-font-body);
  font-size: var(--soma-text-md);
  font-weight: var(--soma-weight-regular);
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: background var(--soma-dur-fast) var(--soma-ease-out);
}

.kebab-menu__item:hover,
.kebab-menu__item:focus-visible {
  outline: none;
  background: var(--soma-bg);
}

.kebab-menu__item-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--soma-muted);
}

.kebab-menu__item-label {
  flex: 1 1 auto;
}

.kebab-menu__item-kbd {
  color: var(--soma-muted);
  font-size: var(--soma-text-sm);
  font-weight: var(--soma-weight-bold);
  letter-spacing: 0.3px;
}

/* ── Variante danger (item destructif) ─────────────────── */

.kebab-menu__item--danger {
  color: var(--soma-red);
}

.kebab-menu__item--danger .kebab-menu__item-icon {
  color: var(--soma-red);
}

.kebab-menu__item--danger:hover {
  background: rgba(224, 32, 32, 0.06);
}

/* ── Séparateur ────────────────────────────────────────── */

.kebab-menu__sep {
  height: 1px;
  margin: 4px 6px;
  background: var(--soma-border);
  border: 0;
}