/* Une reference dans une liste — partiel site._ligne-produit (D-80)
 *
 * Charge par le partiel lui-meme (@once) : recherche, pages marque et
 * carrosserie, poids lourds. Reprend .gat-result du theme et corrige ce qui
 * cassait : la grille de 4 colonnes fixes en « 1fr » debordait a 375 px des
 * qu'une designation ou une reference n'avait pas d'espace, et la derniere
 * colonne affichait « En stock » en dur.
 *
 * Chaque <li> est sa propre grille : les colonnes ne s'alignent d'une ligne
 * a l'autre que parce que leurs largeurs sont FIXES, la designation prend le
 * reste. Les colonnes photo et actions sont communes a toute la liste
 * (WhatsApp et l'interrupteur de disponibilite sont des reglages globaux).
 * Sur telephone tout s'empile, la photo a droite quand elle existe ; pas de
 * cadre gris quand elle manque.
 */

.gat-table-produits { list-style: none; margin: 0; padding: 0; }

.gat-ligne,
.gat-table-entete {
  display: grid;
  grid-template-columns: 11.5rem minmax(0, 1fr) 12rem 56px;
  grid-template-areas: "ref nom type photo";
  column-gap: var(--space-6);
  align-items: center;
  padding: var(--space-4) var(--space-6);
}
.gat-ligne.a-actions,
.gat-table-entete.a-actions {
  grid-template-columns: 11.5rem minmax(0, 1fr) 12rem 56px 8.5rem;
  grid-template-areas: "ref nom type photo act";
}

.gat-table-entete {
  padding-block: var(--space-3);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  background: linear-gradient(to right, var(--line-strong), var(--line-strong)) no-repeat bottom / 100% 1px;
}
.gat-table-entete > :nth-child(1) { grid-area: ref; }
.gat-table-entete > :nth-child(2) { grid-area: nom; }
.gat-table-entete > :nth-child(3) { grid-area: type; }

.gat-ligne {
  position: relative;
  background: linear-gradient(to right, var(--line), var(--line)) no-repeat bottom / 100% 1px;
}
.gat-ligne:hover { background-color: var(--color-neutral-200); }

/* La reference : chasse fixe, un clic la selectionne entiere pour la copier.
   Elle passe au-dessus du lien etire, comme le bouton WhatsApp. */
.gat-ligne-ref {
  grid-area: ref; justify-self: start; position: relative; z-index: 1;
  font-family: var(--font-mono); font-size: 14px; font-weight: 600; letter-spacing: .02em;
  color: var(--color-accent-700); overflow-wrap: anywhere;
  -webkit-user-select: all; user-select: all; cursor: text;
}

.gat-ligne-nom { grid-area: nom; min-width: 0; }
.gat-ligne-lien {
  display: block; overflow-wrap: anywhere;
  font-family: var(--font-heading); font-weight: 500; font-size: 15px; line-height: 1.3;
  color: var(--ink); text-decoration: none;
}
/* Le lien couvre toute la ligne : on clique ou l'on veut. */
.gat-ligne-lien::after { content: ""; position: absolute; inset: 0; }
.gat-ligne-lien:hover { color: var(--color-accent-700); text-decoration: underline; }
.gat-ligne-lien:focus-visible { outline: none; color: var(--color-accent-700); text-decoration: underline; }
.gat-ligne-lien:focus-visible::after { outline: 2px solid var(--color-accent-600); outline-offset: -2px; border-radius: var(--radius-sm); }

.gat-ligne-details { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.gat-ligne-details .sep { margin: 0 .45em; opacity: .6; }
.gat-ligne-details .gat-wordmark { color: var(--ink); }

.gat-ligne-type { grid-area: type; display: flex; align-items: center; gap: var(--space-2); font-size: 14px; min-width: 0; }
.gat-ligne-ico { width: 16px; height: 16px; flex: none; }
.gat-ligne-type .gat-ligne-ico { color: var(--color-accent-600); }

.gat-ligne-photo {
  grid-area: photo; width: 56px; height: 56px;
  object-fit: contain; border-radius: var(--radius-sm);
}

.gat-ligne-actions { grid-area: act; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); min-width: 0; }
.gat-ligne-wa { position: relative; z-index: 1; min-height: 36px; }
.gat-ligne-wa .gat-ligne-ico { color: #3f8f74; }
.gat-ligne-dispo { white-space: nowrap; }

@media (max-width: 860px) {
  .gat-table-entete { display: none; }

  .gat-ligne,
  .gat-ligne.a-actions {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "ref" "nom" "type";
    row-gap: var(--space-1);
    padding: var(--space-4) var(--space-2);
  }
  .gat-ligne.a-actions { grid-template-areas: "ref" "nom" "type" "act"; }
  .gat-ligne.a-photo {
    grid-template-columns: minmax(0, 1fr) 64px;
    grid-template-areas: "ref photo" "nom photo" "type photo";
    column-gap: var(--space-4);
  }
  .gat-ligne.a-photo.a-actions { grid-template-areas: "ref photo" "nom photo" "type photo" "act act"; }

  .gat-ligne-photo { width: 64px; height: 64px; align-self: start; }
  .gat-ligne-type { font-size: 13px; color: var(--muted); }
  .gat-ligne-actions { flex-direction: row; align-items: center; justify-content: space-between; margin-top: var(--space-2); }
  .gat-ligne-wa { min-height: 40px; }
}