/* D044 : pattern "table → cards" mobile-first. Un <table class="table-cards">
   inchangé (thead/tbody/tr/td classiques, hx-swap-oob déjà en place) devient
   une pile de cartes sous le seuil md — chaque <td data-label="…"> affiche son
   libellé au-dessus de sa valeur. Aucune structure DOM dupliquée : le même
   tbody swappé par htmx sert les deux rendus (table ≥md, cartes <md). */
@media (max-width: 767.98px) {
  .table-cards,
  .table-cards thead,
  .table-cards tbody,
  .table-cards tr,
  .table-cards td {
    display: block;
    width: 100%;
  }
  .table-cards thead {
    display: none;
  }
  .table-cards tr {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0.75rem 1rem;
  }
  .table-cards td {
    border: none;
    padding: 0.3rem 0;
    text-align: left !important;
  }
  .table-cards td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }
}