/* apps-core 0.1.52 — module « sort-header » : titres de colonnes triables visibles au premier coup d'œil.
   Demande (Billix, 2026-10-25) : « on ne voit pas au premier coup d'oeil que l'on peut trier les colonnes ».
   Balisage (AppsCore\SortHeader::th) :
     <th aria-sort="none|ascending|descending">
       <a class="sort-h" href="?sort=…" aria-label="Trier par Client" title="Trier par Client">      (ou <button type="button" class="sort-h">)
         <span class="sort-h__label">Client</span><span class="sort-h__icon" aria-hidden="true"></span>       (▲ / ▼ sur la colonne triée)
       </a></th>
   Couleurs (facultatives, à poser par l'application sur :root ou le tableau) :
     --sort-h-icon    icône neutre ⇅ (défaut : couleur du texte du titre, contraste garanti)
     --sort-h-active  ▲ / ▼ de la colonne triée (défaut : --accent de l'application, sinon couleur du texte)
     --sort-h-hover   fond au survol (défaut : couleur du texte à 9 %)
   Titre aligné à droite (montants) : classe .sort-h--end (ou th.num / th.is-num / th.right) : l'icône passe à gauche du libellé,
   le bord droit du libellé reste aligné sur les chiffres. Impression : icônes masquées. */
.sort-h {
  display: inline-flex; align-items: center; gap: .35em;
  margin: -.2em -.35em; padding: .2em .35em; border: 0; border-radius: 4px;
  background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: inherit;
  text-decoration: none; white-space: nowrap; cursor: pointer; vertical-align: baseline;
  -webkit-appearance: none; appearance: none;
}
.sort-h:hover, .sort-h:focus-visible {
  background: var(--sort-h-hover, color-mix(in srgb, currentColor 9%, transparent));
  text-decoration: underline; text-underline-offset: .2em;
}
.sort-h:focus-visible { outline: 2px solid var(--sort-h-active, var(--accent, currentColor)); outline-offset: 1px; }
/* libellé jamais tronqué : la colonne garde la largeur de son titre (comme avant, nowrap) */
.sort-h__icon {
  position: relative; display: inline-block; flex: none; width: .75em; height: 1em;
  color: var(--sort-h-icon, currentColor); font-size: .8em; font-style: normal; font-weight: 400; line-height: 1;
  text-align: center; text-decoration: none;
}
/* icône neutre ⇅ dessinée en CSS (deux triangles), place réservée : rien ne bouge quand la colonne devient triée */
.sort-h__icon:empty::before, .sort-h__icon:empty::after {
  content: ""; position: absolute; left: 50%; margin-left: -.3em;
  border-left: .3em solid transparent; border-right: .3em solid transparent;
}
.sort-h__icon:empty::before { top: .04em; border-bottom: .38em solid currentColor; }
.sort-h__icon:empty::after { bottom: .04em; border-top: .38em solid currentColor; }
.sort-h.is-sorted .sort-h__icon,
[aria-sort="ascending"] > .sort-h .sort-h__icon,
[aria-sort="descending"] > .sort-h .sort-h__icon { color: var(--sort-h-active, var(--accent, currentColor)); font-weight: 700; }
/* montants alignés à droite : icône à gauche du libellé */
.sort-h--end, th.num > .sort-h, th.is-num > .sort-h, th.right > .sort-h { flex-direction: row-reverse; }
@media (forced-colors: active) {
  .sort-h__icon { forced-color-adjust: none; color: CanvasText; }
  .sort-h.is-sorted .sort-h__icon { color: Highlight; }
  .sort-h:focus-visible { outline-color: Highlight; }
}
@media print {
  .sort-h__icon { display: none !important; }
  .sort-h { background: none !important; text-decoration: none !important; margin: 0; padding: 0; }
}