@layer components{
/* ════════════════════════════════════════════════════════════════════
   Menu contextuel maison (clic droit) : surface pleine, survol en teinte douce, raccourcis en touches.
   Moteur : assets/js/22-contextmenu.js (providers + sous-menus + filtre).
   ════════════════════════════════════════════════════════════════════ */

/* Mis à niveau le 2026-10-20 (le proprio : « améliorer et mettre à niveau le style du menu du clic droit ») : une surface
   pleine et bien détachée (l'ombre de l'élévation 2 au lieu d'un verre translucide à peine ombré), un survol en teinte
   douce où l'icône prend l'accent (l'aplat violet plein criait sur chaque ligne), les raccourcis en petites touches, la
   flèche des sous-menus dessinée. Les rayons s'emboîtent : celui du menu moins sa marge intérieure donne celui des lignes. */
.ctxmenu{
  position:fixed; z-index:var(--z-popover); min-width:224px; max-width:340px;
  max-height:min(72vh,560px); overflow-y:auto; overflow-x:hidden;
  padding:var(--sp-6); box-sizing:border-box;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-modal);
  box-shadow:var(--elev-2);
  font-size:var(--fs-md); line-height:var(--lh-tight); color:var(--txt);
  user-select:none; outline:none; scrollbar-width:thin;
  animation:ctxin .12s 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(.97) translateY(-4px)} to{opacity:1; transform:none} }
@keyframes ctxsub{ from{opacity:0; transform:translateX(-4px)} 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 }

/* Le filet court d'un bord à l'autre du menu, sous la marge intérieure. */
.ctxmenu-sep{ height:1px; margin:var(--sp-6) calc(var(--sp-6) * -1); background:var(--line); }

.ctxmenu-hd{
  padding:var(--sp-6) var(--sp-8) var(--sp-4); font-size:var(--fs-2xs); font-weight:var(--fw-strong); letter-spacing:.06em;
  text-transform:uppercase; color:var(--mut2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.ctxmenu-item{
  display:flex; align-items:center; gap:var(--sp-10); min-height:30px; padding:0 var(--sp-8); border-radius:var(--radius-sm);
  cursor:pointer; color:var(--txt); white-space:nowrap; position:relative;
  transition:background .08s ease, color .08s ease;
}
.ctxmenu-item .ic,.ctxmenu-item>svg{ width:16px; height:16px; flex:0 0 16px; color:var(--mut); transition:color .08s ease; }
.ctxmenu-item .chk{ width:16px; height:16px; flex:0 0 16px; display:inline-flex; color:var(--accent-texte); }
.ctxmenu-item .chk svg{ width:16px; height:16px; }
.ctxmenu-item .lbl{ flex:1; overflow:hidden; text-overflow:ellipsis; }
/* Le raccourci : une petite touche, discrète, alignée à droite. */
.ctxmenu-item .key{
  margin-left:var(--sp-14); min-width:18px; padding:var(--sp-1) var(--sp-4); box-sizing:border-box; text-align:center;
  border-radius:var(--radius-xs); background:color-mix(in srgb, var(--txt) 6%, transparent);
  font-family:var(--font-sans); font-size:var(--fs-2xs); font-weight:var(--fw-medium); letter-spacing:.02em; line-height:var(--lh-tight);
  color:var(--mut); font-variant-numeric:tabular-nums;
}
.ctxmenu-item .arr{ display:inline-flex; margin-left:var(--sp-6); color:var(--mut); }
.ctxmenu-item .arr svg{ width:14px; height:14px; }

.ctxmenu-item:hover,.ctxmenu-item.on,.ctxmenu-item.open{
  background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--txt);
}
.ctxmenu-item:hover>svg,.ctxmenu-item.on>svg,.ctxmenu-item.open>svg,
.ctxmenu-item:hover .arr,.ctxmenu-item.on .arr,.ctxmenu-item.open .arr{ color:var(--accent-texte); }
.ctxmenu-item:hover .key,.ctxmenu-item.on .key{ background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent-texte); }

.ctxmenu-item.danger,.ctxmenu-item.danger>svg{ color:var(--err); }
.ctxmenu-item.danger:hover,.ctxmenu-item.danger.on{ background:color-mix(in srgb, var(--err) 12%, transparent); color:var(--err); }
.ctxmenu-item.danger:hover>svg,.ctxmenu-item.danger.on>svg{ color:var(--err); }
.ctxmenu-item.disabled{ opacity:.45; pointer-events:none; }

/* ── Rangée d'actions compacte (édition : couper/copier/coller/tout sél.) : des touches posées sur le fond doux ── */
.ctxmenu-row{ display:flex; gap:var(--sp-4); padding:0 0 var(--sp-2); }
.ctxmenu-rbtn{
  flex:1; display:inline-flex; align-items:center; justify-content:center;
  height:34px; border:0; border-radius:var(--radius-sm); cursor:pointer;
  background:color-mix(in srgb, var(--txt) 5%, transparent);
  color:var(--mut); transition:background .08s ease, color .08s ease, transform .06s ease;
}
.ctxmenu-rbtn svg{ width:16px; height:16px; }
.ctxmenu-rbtn:hover{ background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--accent-texte); }
.ctxmenu-rbtn:active{ transform:scale(.94); }
.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:0 0 var(--sp-4);
  min-height:30px; padding:0 var(--sp-8); border-radius:var(--radius-sm);
  background:color-mix(in srgb, var(--txt) 5%, transparent);
  color:var(--txt); font-size:var(--fs-sm);
}
.ctxmenu-filter .fi{ display:inline-flex; color:var(--mut); } .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); color:var(--accent-texte); animation:ctxcaret 1s steps(1) infinite; }
@keyframes ctxcaret{ 50%{opacity:0} }

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

}