/* ===========================================================================
   TABLEAUX — en-tête, lignes alternées, tableau vide, pagination
   ===========================================================================

   DEUX PIÈGES, tous deux vus pour de vrai :

   1. UN TABLEAU DÉBORDE, ET IL DÉBORDE SUR TÉLÉPHONE. Il faut l'envelopper dans
      un conteneur qui défile HORIZONTALEMENT tout seul. Sans lui, c'est la PAGE
      entière qui part en travers, et plus rien ne se lit — pas seulement le
      tableau. L'enveloppe n'est donc pas une commodité, elle est obligatoire.

   2. UN TABLEAU VIDE NE DOIT JAMAIS ÊTRE UN TABLEAU VIDE. Des en-têtes au-dessus
      de rien du tout laissent croire à une panne. Il faut une phrase qui dise
      s'il n'y a rien, ou si le filtre a tout écarté — et, dans ce second cas,
      le geste pour revenir en arrière.

   Le zébrage se pose sur les lignes PAIRES : sur un tableau d'une seule ligne,
   la ligne unique reste alors sur le fond de page, et ne semble pas
   sélectionnée.

   Voir `tableaux.html`.
   =========================================================================== */

/* --- L'enveloppe qui défile — obligatoire ---------------------------------- */
.iav-tableau-enveloppe {
  overflow-x: auto;
  border: var(--iav-trait, 1px) solid var(--iav-bordure, #E3E9F0);
  border-radius: var(--iav-rayon, 8px);
  /* Le défilement au doigt s'arrête net au bord au lieu d'entraîner la page. */
  overscroll-behavior-x: contain;
}

.iav-tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--iav-taille-texte, 14px);
  color: var(--iav-texte-principal, #1B2733);
  background: var(--iav-fond-page, #FFFFFF);
}

/* --- L'en-tête -------------------------------------------------------------
   `position: sticky` le garde visible pendant qu'on descend une longue liste.
   Il exige une couleur de fond OPAQUE, sans quoi les lignes défilent au travers.
   --------------------------------------------------------------------------- */
.iav-tableau thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--iav-fond-bloc, #F7F9FC);
  text-align: left;
  padding: var(--iav-espace-moyen, 12px);
  font-size: var(--iav-taille-secondaire, 12px);
  font-weight: var(--iav-graisse-forte, 700);
  color: var(--iav-texte-secondaire, #5A6B7F);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  border-bottom: var(--iav-trait, 1px) solid var(--iav-bordure, #E3E9F0);
}

.iav-tableau tbody td {
  padding: var(--iav-espace-moyen, 12px);
  border-bottom: var(--iav-trait, 1px) solid var(--iav-bordure, #E3E9F0);
  vertical-align: top;
}

/* La dernière ligne n'a pas besoin de son filet : l'enveloppe en pose déjà un. */
.iav-tableau tbody tr:last-child td { border-bottom: 0; }

/* Lignes alternées. Sur les PAIRES — voir l'en-tête de fichier. */
.iav-tableau tbody tr:nth-child(even) { background: var(--iav-fond-bloc, #F7F9FC); }

.iav-tableau tbody tr:hover { background: var(--iav-fond-survol, #EDF3FA); }

/* --- Colonnes de chiffres --------------------------------------------------
   Alignées à droite et en chasse fixe : c'est ce qui met les unités sous les
   unités. Sans `tabular-nums`, un 1 est plus étroit qu'un 8 dans une pile
   système, et les colonnes se décalent de ligne en ligne.
   --------------------------------------------------------------------------- */
.iav-tableau .iav-colonne-nombre {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Une colonne d'actions ne se laisse pas comprimer par une colonne de texte. */
.iav-tableau .iav-colonne-actions {
  text-align: right;
  white-space: nowrap;
  width: 1%;
}

/* --- Le tableau vide -------------------------------------------------------
   Une cellule qui traverse toute la largeur, avec une phrase et, s'il y a lieu,
   le geste pour revenir en arrière.
   --------------------------------------------------------------------------- */
.iav-tableau-vide {
  padding: var(--iav-espace-section, 32px) var(--iav-espace-grand, 16px);
  text-align: center;
  color: var(--iav-texte-secondaire, #5A6B7F);
}

/* Le geste proposé dans un tableau vide se centre sous la phrase. Une classe
   plutôt qu'un `style=` dans le balisage : une valeur écrite en dur dans un
   attribut ne suit ni la charte, ni le mode sombre, et le vérificateur la
   refuse — à juste titre. */
.iav-tableau-vide-actions {
  justify-content: center;
  margin-top: var(--iav-espace-moyen, 12px);
}

.iav-tableau-vide-titre {
  display: block;
  font-size: var(--iav-taille-intertitre, 16px);
  font-weight: var(--iav-graisse-semi, 600);
  color: var(--iav-texte-principal, #1B2733);
  margin-bottom: var(--iav-espace-petit, 8px);
}

/* --- Pagination ------------------------------------------------------------ */

.iav-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--iav-espace-moyen, 12px);
  flex-wrap: wrap;
  padding: var(--iav-espace-moyen, 12px) 0 0;
  font-size: var(--iav-taille-secondaire, 12px);
  color: var(--iav-texte-secondaire, #5A6B7F);
}

/* Le décompte se lit « 1 à 20 sur 143 », jamais « page 1/8 » seul : le nombre
   total de RÉSULTATS est ce que l'utilisateur cherche à savoir. */
.iav-pagination-compte { font-variant-numeric: tabular-nums; }

.iav-pagination-boutons {
  display: flex;
  align-items: center;
  gap: var(--iav-espace-minuscule, 4px);
}

.iav-pagination-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  padding: 0 var(--iav-espace-petit, 8px);
  border: var(--iav-trait, 1px) solid transparent;
  border-radius: var(--iav-rayon-petit, 4px);
  color: var(--iav-bleu-lien, #2B6CB0);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  background: transparent;
  font-family: inherit;
  font-size: var(--iav-taille-secondaire, 12px);
}
.iav-pagination-page:hover:not(:disabled) {
  background: var(--iav-fond-survol, #EDF3FA);
  text-decoration: none;
}

/* La page courante ne se distingue pas par la couleur seule : elle porte aussi
   `aria-current="page"`, annoncé par un lecteur d'écran. */
.iav-pagination-page[aria-current="page"] {
  background: var(--iav-bleu-lien, #2B6CB0);
  border-color: var(--iav-bleu-lien, #2B6CB0);
  /* Un aplat de couleur vive : `--iav-texte-sur-aplat`, qui bascule. */
  color: var(--iav-texte-sur-aplat, #FFFFFF);
  font-weight: var(--iav-graisse-semi, 600);
  cursor: default;
}

.iav-pagination-page:disabled {
  color: var(--iav-texte-desactive, #9AA7B5);
  cursor: not-allowed;
}