/* Menus déroulants personnalisés (ordinateur uniquement — le mobile garde le sélecteur natif) */
.cs { position: relative; display: block; margin-top: 6px; text-transform: none; letter-spacing: 0; font-weight: 400; }
label .cs { margin-top: 6px; }
.cs-native { position: absolute !important; inset: auto 0 0 0; width: 100% !important; height: 1px !important; opacity: 0; pointer-events: none; margin: 0 !important; padding: 0 !important; border: 0 !important; }
.cs-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  padding: 12px 14px; min-height: 46px; text-align: left; cursor: pointer;
  background: var(--cs-bg, #fffaf3); color: var(--ivory); border: 1px solid var(--cs-line, var(--line-strong)); border-radius: var(--cs-radius, 4px);
  font: 400 1rem var(--sans); letter-spacing: 0; text-transform: none;
  transition: border-color .25s, box-shadow .25s;
}
.cs-btn::after {
  content: ''; flex: 0 0 auto; width: 8px; height: 8px; margin-right: 2px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg);
  transition: transform .25s; opacity: .7;
}
.cs.open .cs-btn::after { transform: translateY(2px) rotate(-135deg); }
.cs-btn:hover { border-color: var(--accent, var(--gold)); }
.cs-btn:focus-visible, .cs.open .cs-btn { outline: none; border-color: var(--accent, var(--gold)); box-shadow: 0 0 0 3px rgba(var(--accent-rgb2, var(--accent-rgb)), .14); }
.cs-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-empty .cs-value { color: var(--muted); }
.cs-invalid .cs-btn { border-color: var(--danger); }
.cs-list {
  position: absolute; left: 0; min-width: 100%; width: max-content; max-width: min(380px, 92vw); top: calc(100% + 6px); z-index: 60; margin: 0; padding: 6px; list-style: none;
  max-height: 280px; overflow-y: auto; outline: none;
  background: var(--cs-panel, #fffaf3); border: 1px solid var(--cs-line, var(--line-strong)); border-radius: var(--cs-radius, 6px);
  box-shadow: 0 18px 40px -18px rgba(40, 20, 10, .35);
  opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .18s, transform .18s;
}
.cs.up .cs-list { top: auto; bottom: calc(100% + 6px); transform: translateY(4px); }
.cs.open .cs-list { opacity: 1; transform: none; pointer-events: auto; }
.cs-list li { padding: 10px 12px; border-radius: 4px; cursor: pointer; color: var(--ivory); font-size: .97rem; line-height: 1.35; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cs-list li.is-active { background: rgba(var(--accent-rgb2, var(--accent-rgb)), .09); }
.cs-list li[aria-selected="true"] { color: var(--accent, var(--gold)); font-weight: 600; }
.cs-list li[aria-selected="true"]::after { content: '✓'; font-size: .9em; }
.cs-list li[aria-disabled="true"] { opacity: .45; cursor: default; }
.cs-list li.cs-placeholder { color: var(--muted); }
.cs-list::-webkit-scrollbar { width: 8px; }
.cs-list::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; }
/* Variante compacte (tri des collections, statuts dans les tableaux) */
.coll-sort .cs, form.inline .cs, .cs.cs-compact { margin: 0; min-width: 180px; }
.coll-sort .cs-btn, form.inline .cs-btn { min-height: 38px; padding: 8px 12px; font-size: .9rem; }