/**
 * tableau — un vrai <table>, enveloppé dans un conteneur qui prend en charge
 * le défilement horizontal quand la largeur disponible ne suffit plus.
 *
 * Aucune couleur en dur : les filets passent par les jetons du module, avec
 * un repli neutre pour que le composant tienne sans thème. Pas d'aplat une
 * rangée sur deux : le filet est le seul ornement.
 */

.comp--tableau__defilement {
  overflow-x: auto;
}

/* La largeur plancher force le défilement plutôt que l'écrasement : sous
   520px, trois colonnes de texte deviennent trois colonnes d'une syllabe. */
.comp--tableau__table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
}

.comp--tableau__table :is(th, td) {
  text-align: start;
  vertical-align: baseline;
  border-bottom: 1px solid var(--ffc-filet, rgba(0, 0, 0, 0.15));
  padding: 0.75rem 1.25rem;
}

.comp--tableau__table th {
  font-weight: var(--ffc-graisse-moyenne, 500);
  border-bottom: 1px solid var(--ffc-texte-fort, #111);
}

/**
 * Prop `entete_masque` : l'en-tête sort de l'affichage mais reste dans
 * l'arbre d'accessibilité — les cases gardent l'étiquette de leur colonne.
 * Même masquage que le repli étroit plus bas.
 */
.comp--tableau--entete-masque .comp--tableau__table thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/**
 * Sous 900px, la table se replie : chaque rangée devient un bloc, chaque case
 * une ligne. Le défilement horizontal était le repli paresseux — il demande à
 * quelqu'un qui tient son téléphone d'une main de pousser le contenu de
 * l'autre pour lire la fin d'une rangée, et il cache la dernière colonne à qui
 * ne devine pas qu'elle existe.
 *
 * `display: block` retire aux éléments de table leur rôle implicite ; c'est
 * pour ça que le markup porte des `role` explicites. L'en-tête sort du flux :
 * ses libellés reviennent au besoin par `data-entete`, case par case.
 */
@media (max-width: 56.25rem) {
  .comp--tableau__defilement {
    overflow-x: visible;
  }

  .comp--tableau__table,
  .comp--tableau__table tbody,
  .comp--tableau__table tr,
  .comp--tableau__table td {
    display: block;
    width: auto;
  }

  /* La largeur plancher ne vaut que pour la table qui défile ; une fois
     repliée en blocs, elle imposerait un défilement dont on vient justement
     de se passer. */
  .comp--tableau__table {
    min-width: 0;
  }

  .comp--tableau__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .comp--tableau__table tr {
    padding-block: 1rem;
    border-bottom: 1px solid var(--ffc-filet, rgba(0, 0, 0, 0.15));
  }

  .comp--tableau__table td {
    border-bottom: 0;
    padding: 0;
  }

  .comp--tableau__table td:empty {
    display: none;
  }
}