/* === Gestion des produits en rachat ===
   Aucune règle ici n'est active au-delà de 768px : la page reste rendue par les
   styles génériques de main.css sur desktop/tablette paysage (aucun changement
   visuel PC). En dessous de 768px, le tableau (dense, illisible et en grande
   partie inatteignable derrière l'overflow-x:hidden global de main.css) est
   reconstruit en liste de cartes, une ligne = une carte. */
@media (max-width: 768px) {
  .grp-table-wrap {
    overflow-x: visible;
  }

  .grp-table {
    display: block;
    width: 100%;
  }

  .grp-table thead {
    display: none;
  }

  .grp-table tbody,
  .grp-table tr {
    display: block;
    width: 100%;
  }

  .grp-table tr {
    box-sizing: border-box;
    margin: 0 0 10px 0;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  }

  .grp-table tr.line-alternate {
    background: #fafafa;
  }

  /* Libellé au-dessus de la valeur (plutôt qu'un alignement en 2 colonnes) :
     la cellule Payé contient un bouton ou un texte, le libellé produit un
     lien + texte — l'empilement reste correct dans tous les cas. */
  .grp-table td {
    display: block;
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    overflow-wrap: anywhere;
    word-break: break-word;
    padding: 7px 2px;
    border-bottom: 1px solid #f0f0f0;
  }

  .grp-table td:last-child {
    border-bottom: none;
  }

  .grp-table td::before {
    content: attr(data-label);
    display: block;
    font-weight: 600;
    font-size: 9pt;
    color: #555;
    margin-bottom: 3px;
  }

  /* Bouton Payer : cible tactile confortable (>= 44px) */
  .grp-table td button {
    min-height: 44px;
    min-width: 44px;
    padding: 6px 14px;
  }
}