@layer components{
/* ════════════════════════════════════════════════════════════════════
   Menu contextuel maison (clic droit) - look compact, minimaliste, moderne.
   Moteur : assets/js/22-contextmenu.js (providers + sous-menus + filtre).
   ════════════════════════════════════════════════════════════════════ */

.ctxmenu{
  position:fixed; z-index:var(--z-popover); min-width:212px; max-width:330px;
  max-height:min(72vh,560px); overflow-y:auto; overflow-x:hidden;
  padding:var(--sp-4); box-sizing:border-box;
  background:color-mix(in srgb, var(--card) 88%, transparent);
  -webkit-backdrop-filter:saturate(1.6) blur(14px); backdrop-filter:saturate(1.6) blur(14px);
  border:1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius:var(--radius);
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 2px 5px -1px rgba(0,0,0,.09), 0 1px 2px rgba(0,0,0,.04);
  font-size:var(--fs-md); line-height:var(--lh-tight); color:var(--txt);
  user-select:none; outline:none; scrollbar-width:thin;
  animation:ctxin .11s cubic-bezier(.22,1,.36,1);
  transform-origin:top left;
}
.ctxmenu.is-sub{ animation:ctxsub .1s cubic-bezier(.22,1,.36,1); transform-origin:left top; }
@keyframes ctxin{ from{opacity:0; transform:scale(.96) translateY(-3px)} to{opacity:1; transform:none} }
@keyframes ctxsub{ from{opacity:0; transform:translateX(-4px) scale(.98)} to{opacity:1; transform:none} }
.ctxmenu::-webkit-scrollbar{ width:8px } .ctxmenu::-webkit-scrollbar-thumb{ background:var(--line); border-radius:var(--radius); border:2px solid transparent; background-clip:padding-box }

.ctxmenu-sep{ height:1px; margin:var(--sp-4) var(--sp-8); background:color-mix(in srgb, var(--line) 70%, transparent); }

.ctxmenu-hd{
  padding:var(--sp-6) var(--sp-10) var(--sp-4); font-size:var(--fs-2xs); font-weight:var(--fw-bold); letter-spacing:.06em;
  text-transform:uppercase; color:var(--mut,#64748b);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.ctxmenu-item{
  display:flex; align-items:center; gap:var(--sp-10); padding:var(--sp-6) var(--sp-10); border-radius:var(--radius);
  cursor:pointer; color:var(--txt); white-space:nowrap; position:relative;
  transition:background .08s ease, color .08s ease;
}
.ctxmenu-item .ic,.ctxmenu-item>svg{ width:15px; height:15px; flex:0 0 15px; opacity:.7; }
.ctxmenu-item .chk{ width:15px; height:15px; flex:0 0 15px; display:inline-flex; color:var(--accent); }
.ctxmenu-item .chk svg{ width:15px; height:15px; }
.ctxmenu-item .lbl{ flex:1; overflow:hidden; text-overflow:ellipsis; }
.ctxmenu-item .key{
  margin-left:var(--sp-14); font-size:var(--fs-xs); font-weight:var(--fw-strong); letter-spacing:.02em;
  color:var(--mut,#64748b); opacity:.85; font-variant-numeric:tabular-nums;
}
.ctxmenu-item .arr{ margin-left:var(--sp-6); font-size:var(--fs-base); line-height:var(--lh-flat); opacity:.45; }
.ctxmenu-item.checked .lbl{ font-weight:var(--fw-strong); }

.ctxmenu-item:hover,.ctxmenu-item.on,.ctxmenu-item.open{
  background:var(--accent); color:var(--on-solid);
}
.ctxmenu-item:hover .ic,.ctxmenu-item:hover>svg,.ctxmenu-item.on .ic,.ctxmenu-item.on>svg,.ctxmenu-item.open>svg{ opacity:1; }
.ctxmenu-item:hover .key,.ctxmenu-item.on .key,.ctxmenu-item:hover .arr,.ctxmenu-item.on .arr{ color:var(--on-solid); opacity:.9; }
.ctxmenu-item:hover .chk,.ctxmenu-item.on .chk{ color:var(--on-solid); }

.ctxmenu-item.danger{ color:var(--err); }
.ctxmenu-item.danger:hover,.ctxmenu-item.danger.on{ background:var(--err); color:var(--on-solid); }
.ctxmenu-item.disabled{ opacity:.38; pointer-events:none; }

/* ── Rangée d'actions compacte (édition : couper/copier/coller/tout sél.) ── */
.ctxmenu-row{ display:flex; gap:var(--sp-4); padding:var(--sp-2) var(--sp-4) var(--sp-4); }
.ctxmenu-rbtn{
  flex:1; display:inline-flex; align-items:center; justify-content:center;
  height:34px; border:0; border-radius:var(--radius); cursor:pointer;
  background:color-mix(in srgb, var(--line) 38%, transparent);
  color:var(--txt); transition:background .08s ease, transform .06s ease;
}
.ctxmenu-rbtn svg{ width:16px; height:16px; opacity:.82; }
.ctxmenu-rbtn:hover{ background:var(--accent); color:var(--on-solid); }
.ctxmenu-rbtn:hover svg{ opacity:1; }
.ctxmenu-rbtn:active{ transform:scale(.93); }
.ctxmenu-rbtn.disabled{ opacity:.3; pointer-events:none; }

/* ── Barre de filtre (apparaît quand on tape) ── */
.ctxmenu-filter{
  display:flex; align-items:center; gap:var(--sp-8); margin:var(--sp-1) var(--sp-2) var(--sp-4);
  padding:var(--sp-6) var(--sp-10); border-radius:var(--radius);
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  color:var(--txt); font-size:var(--fs-sm);
}
.ctxmenu-filter .fi{ display:inline-flex; opacity:.6; } .ctxmenu-filter .fi svg{ width:14px; height:14px; }
.ctxmenu-filter .ft{ flex:1; font-weight:var(--fw-strong); }
.ctxmenu-filter .ft::after{ content:'▏'; margin-left:var(--sp-1); opacity:.6; animation:ctxcaret 1s steps(1) infinite; }
@keyframes ctxcaret{ 50%{opacity:0} }

/* ── Mode sombre : verre plus dense ── */
html[data-theme="dark"] .ctxmenu, .dark .ctxmenu{
  background:color-mix(in srgb, var(--card) 82%, transparent);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 18px 48px -10px rgba(0,0,0,.6), 0 2px 10px rgba(0,0,0,.4);
}

@media (prefers-reduced-motion: reduce){
  .ctxmenu,.ctxmenu.is-sub{ animation:none; }
  .ctxmenu-item,.ctxmenu-rbtn{ transition:none; }
  .ctxmenu-filter .ft::after{ animation:none; }
}

}