/* =============================================================
   Socle · Tableau (.sc-table)
   Toujours dans un enrobage .sc-table-wrap qui porte bordure,
   rayon et défilement horizontal.
   Modificateurs : --striped, --compact · Utilitaire : .is-num
   Enrobage : .sc-table-wrap, modificateur --flush dans une carte
   Tri : .sc-table__sort, un <button> dans le <th>, l'état lu sur
   l'attribut aria-sort du <th>
   Sélection : .sc-table__check, la colonne de cases à cocher, et la
   ligne sélectionnée ramassée au :has()
   ============================================================= */

.sc-table-wrap {
  /* Tokens d'enrobage : le modificateur ne fait que réassigner ceci. */
  --_wrap-border: var(--border-hairline) solid var(--color-border);
  --_wrap-radius: var(--radius-surface);

  overflow-x: auto;
  background: var(--color-bg-surface);
  border: var(--_wrap-border);
  border-radius: var(--_wrap-radius);
}

/* Dans une carte --flush, la carte porte déjà bordure et rayon, mais elle
   pose aussi overflow: hidden : retirer l'enrobage rognerait les colonnes
   au lieu de les faire défiler. On le garde, dépouillé. */
.sc-table-wrap--flush {
  --_wrap-border: none;
  --_wrap-radius: 0;

  background: none;
}

.sc-table {
  /* Tokens de composant : --compact ne fait que réassigner ceci. */
  --_table-th-padding: var(--padding-s) var(--padding-l);
  --_table-td-padding: var(--padding-m) var(--padding-l);

  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--text-body-s-size);
  line-height: var(--leading-snug);
  color: var(--color-text);
  text-align: start;
}

/* ---- En-têtes de colonne ----
   La typographie vient entièrement du sur-titre partagé, .sc-overline
   dans css/base.css, auquel ce sélecteur est rattaché. Ne reste ici que
   ce qui appartient au tableau.
   La graisse n'est plus réassignée : elle suit le sur-titre, en
   régulière. Un en-tête de colonne se distingue déjà par sa casse, son
   interlettrage et sa famille ; il n'a pas besoin d'un quatrième signal
   pour dire qu'il n'est pas une donnée. */

.sc-table thead th {

  padding: var(--_table-th-padding);
  background: var(--color-bg-subtle);
  border-block-end: var(--border-hairline) solid var(--color-border);
  text-align: start;
  white-space: nowrap;
}

/* ---- Cellules ---- */

.sc-table td {
  padding: var(--_table-td-padding);
  border-block-end: var(--border-hairline) solid var(--color-border);
}

/* En-tête de ligne : une cellule comme les autres, simplement
   plus affirmée. Sans cette règle, le th du navigateur reviendrait
   centré et gras. */
.sc-table tbody th {
  padding: var(--_table-td-padding);
  border-block-end: var(--border-hairline) solid var(--color-border);
  font-weight: var(--text-label-weight);
  text-align: start;
}

.sc-table tbody tr {
  transition: background-color var(--motion-fast);
}

/* La dernière ligne s'appuie sur la bordure de l'enrobage. */
.sc-table tbody tr:last-child td,
.sc-table tbody tr:last-child th {
  border-block-end: none;
}

/* ---- Modificateurs ---- */

.sc-table--striped tbody tr:nth-child(even) {
  background: var(--color-bg-subtle);
}

.sc-table--compact {
  --_table-th-padding: var(--padding-xs) var(--padding-m);
  --_table-td-padding: var(--padding-s) var(--padding-m);
}

/* Colonnes numériques : alignées à droite, chiffres tabulaires. */
.sc-table .is-num {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

/* ---- Tri d'une colonne ----
   Un en-tête triable est un <button> DANS le <th>, jamais un <th>
   rendu cliquable : le clavier ne l'atteint et le lecteur d'écran ne
   l'annonce comme commande que si c'en est une. Le <th> porte l'état
   sur aria-sort, le bouton porte le dessin.

   Le tri lui-même n'est pas ici. Ce fichier fournit l'apparence et
   les attributs ; réordonner les lignes appartient au produit. */

/* La cellule cède sa respiration au bouton, sinon la zone cliquable
   s'arrêterait avant les bords de l'en-tête. */
.sc-table thead th:has(.sc-table__sort) {
  padding: 0;
}

.sc-table__sort {
  /* Tokens de composant : les trois états de tri, le survol et
     l'alignement ne font que réassigner ceci. */
  --_sort-bg: transparent;
  --_sort-bg-hover: var(--color-bg-active);
  --_sort-bg-active: var(--color-bg-subtle-active);
  --_sort-mark: var(--color-border-hover);
  --_sort-mark-size: var(--space-12);   /* dimension structurelle */
  /* Non triée : deux triangles opposés, « cette colonne peut se
     trier ». Les deux autres états remplacent la forme, pas
     seulement l'angle : c'est pourquoi l'indicateur se découpe au
     clip-path comme la coche de la case, au lieu de pivoter comme le
     chevron de l'accordéon, qui n'a que deux positions à dire.
     Le tracé passe par le sommet du haut, redescend au sommet du bas
     et revient : le segment vertical parcouru deux fois en sens
     inverse n'a pas d'aire, il ne laisse donc que les deux
     triangles. */
  --_sort-mark-shape: polygon(50% 6%, 92% 40%, 8% 40%, 50% 6%, 50% 94%, 92% 60%, 8% 60%, 50% 94%);
  --_sort-justify: flex-start;

  display: flex;
  align-items: center;
  justify-content: var(--_sort-justify);
  gap: var(--gap-s);
  width: 100%;
  padding: var(--_table-th-padding);
  background: var(--_sort-bg);
  border: none;
  cursor: pointer;
  transition: background-color var(--motion-fast);
}

/* L'indicateur : une boîte en aplat, découpée. En currentColor comme
   le reste des glyphes du système, ici via un token privé pour que
   l'état trié le fasse passer à l'accent. */
.sc-table__sort::after {
  content: "";
  flex: none;
  width: var(--_sort-mark-size);
  height: var(--_sort-mark-size);
  background: var(--_sort-mark);
  clip-path: var(--_sort-mark-shape);
  transition: background-color var(--motion-fast);
}

/* Une colonne de chiffres garde son alignement de fin, indicateur
   compris. */
.sc-table th.is-num .sc-table__sort {
  --_sort-justify: flex-end;
}

/* La bande s'éclaircit sous le pointeur puis sous l'appui, et l'intitulé
   doit monter avec elle : laissé sur son gris de repos, il devenait
   moins lisible à mesure qu'on agissait sur lui, jusqu'à 2,06 en sombre
   sur la cellule enfoncée. Il prend donc la couleur du texte courant,
   celle que les deux états triés prennent déjà juste en dessous. */
.sc-table__sort:is(:hover, [data-state="hover"]) {
  --_sort-bg: var(--_sort-bg-hover);
  --_sort-mark: var(--color-text);

  color: var(--color-text);
}

.sc-table__sort:is(:active, [data-state="active"]) {
  --_sort-bg: var(--_sort-bg-active);
  --_sort-mark: var(--color-text);

  color: var(--color-text);
}

/* Le bouton occupe la cellule d'un bord à l'autre : un anneau posé à
   l'extérieur déborderait sur les colonnes voisines. C'est la raison
   qui autorise ce composant à redéfinir le focus de base.css, et le
   vrai focus comme sa simulation prennent le même décalage. */
.sc-table__sort:focus-visible,
.sc-table__sort[data-state="focus"] {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: calc(var(--focus-ring-offset) * -1);
}

/* Les trois valeurs d'aria-sort. La colonne non triée garde la forme
   par défaut : « none » n'a donc pas de règle à lui. */
.sc-table thead th[aria-sort="ascending"] .sc-table__sort {
  --_sort-mark: var(--color-accent);
  --_sort-mark-shape: polygon(50% 20%, 92% 76%, 8% 76%);
}

.sc-table thead th[aria-sort="descending"] .sc-table__sort {
  --_sort-mark: var(--color-accent);
  --_sort-mark-shape: polygon(8% 24%, 92% 24%, 50% 80%);
}

/* La colonne triée reste lisible sans sa flèche : son intitulé quitte
   le gris atténué du sur-titre et monte d'un cran de graisse, que
   base.css laisse réassignable. Un seul canal, la couleur, ne
   suffirait pas à séparer trois états.
   Un cran seulement, pas deux : depuis que le sur-titre est en
   régulière, passer aux titres ferait un écart que l'œil lit comme un
   changement de nature plutôt que comme un état. */
.sc-table thead th[aria-sort]:not([aria-sort="none"]) {
  --_overline-weight: var(--text-label-weight);

  color: var(--color-text);
}

/* ---- Colonne de sélection ----
   Une case par ligne, plus la case d'en-tête qui bascule tout. Cette
   colonne ne se trie pas : son <th> ne reçoit pas de bouton, et comme
   il n'a aucun texte à donner comme nom accessible, c'est un
   aria-label qui le nomme. */

.sc-table .sc-table__check {
  /* Dimension structurelle : la largeur d'une colonne de contrôle. */
  --_check-width: var(--space-48);

  inline-size: var(--_check-width);
  padding-inline-end: 0;
}

/* En bloc, la case se pose sur la grille de la cellule au lieu de
   suivre la ligne de base d'un texte absent. */
.sc-table .sc-table__check .sc-checkbox {
  display: block;
}

/* ---- Survol de ligne ----
   Déclaré après --striped pour que le survol garde la main
   sur les lignes zébrées, à spécificité égale. */

.sc-table tbody tr:hover,
.sc-table tbody tr[data-state="hover"] {
  background: var(--color-bg-hover);
}

/* Sur un tableau zébré, --color-bg-hover se confond avec la
   teinte des lignes paires : le survol monte d'un cran. */
.sc-table--striped tbody tr:hover,
.sc-table--striped tbody tr[data-state="hover"] {
  background: var(--color-bg-active);
}

/* ---- Ligne sélectionnée ----
   L'état vit déjà dans le balisage, la case cochée : le CSS le
   ramasse au :has() plutôt que d'attendre une classe qu'un script
   viendrait poser. L'attribut de simulation double le vrai état pour
   cette documentation.

   Déclaré après le survol et le zébrage pour garder la main sur eux :
   une ligne sélectionnée le reste sous le curseur. */

.sc-table tbody tr:is(:has(.sc-table__check :checked), [data-state="selected"]) {
  background: var(--color-accent-subtle);
}

.sc-table tbody tr:is(:has(.sc-table__check :checked), [data-state="selected"]):is(:hover, [data-state="hover"]) {
  background: var(--color-accent-subtle-hover);
}