/* css/style-listing.css — 0.0.0.21: page-specific chunk split out of css/style.css (Step 5).
   Loaded ONLY on: listing.html. Base style.css keeps everything shared. */
/* detail */
/* A-02 (0.0.0.21): the detail DOM is emitted in semantic order
   (gallery → h1/price/meta → actions → seller/rating → description →
   answers → similar — see the js/app.js detailInnerHtml handoff) and the
   DESKTOP 2-column mockup is rebuilt with grid placement, NOT flex `order`.
   DOM order == visual order == screen-reader order on every viewport.
   (The old mobile `order` rules are deleted; Worker 1's DOM change and this
   CSS must land together in 0.0.0.21.) */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.detail > * { min-width: 0; }
.d-gallery  { grid-column: 1; grid-row: 1; }
.d-head     { grid-column: 2; grid-row: 1; }
.d-actions  { grid-column: 2; grid-row: 2; }
.d-seller   { grid-column: 2; grid-row: 3; }
.d-desc     { grid-column: 1; grid-row: 2; }
.d-answers  { grid-column: 1; grid-row: 3; }
.d-matches  { grid-column: 1; grid-row: 4; }
@media (max-width: 860px) {
  .detail { grid-template-columns: minmax(0, 1fr); }
  .d-gallery, .d-head, .d-actions, .d-seller,
  .d-desc, .d-answers, .d-matches { grid-column: 1; grid-row: auto; }
}
.gallery { position: relative; overflow: hidden; background: #e9f0ed; border-radius: var(--radius); aspect-ratio: 4/3; }
/* LIS-9 (16 Sep 2026): shimmer placeholder while the main photo streams in. */
.gallery::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); animation: dlShimmer 1.1s linear infinite; pointer-events: none; }
.gallery.ld::after { display: none; }
/* GAL-1 (v61): fixed 4:3 gallery — the image is contained whole, never
   cropped. Portrait photos show fully with side letterbox; tapping opens
   the lightbox for the full portrait view. Page dimensions stay stable. */
.gallery img { display: block; position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; border-radius: var(--radius); border: 1px solid var(--line); cursor: zoom-in; }
@keyframes dlShimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.thumbs { display: flex; gap: 8px; margin-top: 8px; }
.thumbs img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; cursor: pointer; border: 2px solid transparent; }
.thumbs img.active { border-color: var(--emerald); }
.d-head .price, .detail-side .price { font-size: 26px; font-weight: 800; color: var(--emerald); margin: 8px 0; }
.d-head h1, .detail-side h1 { font-size: 20px; }

.stat-row { display: flex; gap: 18px; color: var(--muted); font-size: 13px; margin-top: 10px; }
.desc { white-space: pre-wrap; line-height: 1.7; overflow-wrap: anywhere; /* R-6 (0.0.0.21): unbroken tokens must wrap, not overflow */ }
/* A-05 (0.0.0.21): detail section headings — h2 preferred (see the Worker 1
   markup handoff), h3 supported during transition; rendered identically. */
.detail-box h2, .detail-box h3 { font-size: 1.17em; margin: 1em 0; font-weight: 700; }

/* LIS-8 (16 Sep 2026): fullscreen photo viewer. */
.lightbox {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,.92);
  display: flex; align-items: center; justify-content: center;
}
.lightbox .lb-img {
  max-width: 96vw; max-height: 92vh; object-fit: contain;
  border-radius: 8px;
  touch-action: none; /* LBZ-1: the lightbox owns all touch gestures */
}
.lightbox .lb-close {
  position: absolute; top: 14px; inset-inline-end: 14px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #fff; border: 0;
  font-size: 18px; cursor: pointer;
}
.lightbox .lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #fff; border: 0;
  font-size: 18px; cursor: pointer;
}
.lightbox .lb-prev { inset-inline-start: 10px; }
.lightbox .lb-next { inset-inline-end: 10px; }
.lightbox .lb-count {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  color: #fff; font-size: 14px; background: rgba(0,0,0,.5);
  padding: 4px 12px; border-radius: 12px;
}

.matches-section { margin-top: 26px; }
.matches-section h3, .matches-section h2 {
  margin-bottom: 12px;
  padding-inline-start: 4px;
  border-inline-start: 3px solid #7c3aed;
}

/* ---------- listing detail polish ------------------------------------------- */
.d-head .price, .detail-side .price {
  font-size: 28px; font-weight: 800; color: var(--emerald);
  font-variant-numeric: tabular-nums; letter-spacing: .2px;
}
.detail-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.detail-actions .btn, .detail-actions .fav-btn { flex: 1 1 140px; }
/* v100 (16 Sep 2026, Zak-approved mockup): every listing action button looks
   like "Contacter le vendeur" — solid emerald, white text, slightly smaller.
   Scoped to the listing page only; the owner's delete button stays red. */
.detail-actions .btn:not(.btn-danger), .detail-actions .fav-btn,
.seller-card .btn {
  background: var(--emerald); color: #fff; border: none;
  padding: 10px 14px; border-radius: var(--radius);
  font-weight: 700; font-size: 14px;
}
.detail-actions .btn:not(.btn-danger):hover, .detail-actions .fav-btn:hover,
.seller-card .btn:hover { background: var(--emerald-dark); }
.detail-actions .fav-btn.on { border: none; color: #fff; }
.seller-card .btn { flex: 1; }
/* LIS-11 (17 Sep 2026, Zak-approved mockup): listing actions live in a compact
   card — grid 2 columns; primary actions (offer, contact) solid emerald,
   secondary (fav, share, report) light. Scoped to the listing page. */
.detail .actions-card { padding: 10px; }
.detail .actions-card .detail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 0; }
.detail .actions-card .detail-actions .btn,
.detail .actions-card .detail-actions .fav-btn { padding: 8px 4px; font-size: 12.5px; border-radius: 8px; margin: 0; }
.detail .actions-card #offerBtn { order: 1; }
.detail .actions-card #contactBtn { order: 2; }
.detail .actions-card #favBtn { order: 3; background: #eef4f1; color: var(--emerald); }
.detail .actions-card #favBtn:hover { background: #dfe9e4; }
.detail .actions-card #favBtn.on { background: var(--emerald); color: #fff; }
.detail .actions-card #shareBtn { order: 4; background: #eef4f1; color: var(--emerald); }
.detail .actions-card #shareBtn:hover { background: #dfe9e4; }
.detail .actions-card #repAdBtn { order: 5; grid-column: 1 / -1; background: #eef4f1; color: var(--emerald); }
.detail .actions-card #repAdBtn:hover { background: #dfe9e4; }
.detail .actions-card #editBtn { order: 6; }
.detail .actions-card #delBtn { order: 7; }
/* LIS-11: compact seller card on the listing page (mockup round 2). */
.detail .seller-card { padding: 10px; }
/* A-05 (0.0.0.21): the seller-card heading is an h2 after the Worker 3
   markup change; keep h3 styled during the transition. */
.detail .seller-card h2, .detail .seller-card h3 { font-size: 13px; margin-bottom: 4px; }
.detail .seller-card .follow-btn { padding: 6px 12px; font-size: 12px; }
.detail .seller-card .btn { padding: 8px; font-size: 12.5px; border-radius: 8px; }
.detail .seller-card #repUserBtn { background: #eef4f1; color: var(--emerald); }
.detail .seller-card #repUserBtn:hover { background: #dfe9e4; }

  /* 0.0.0.21 (A-02): an empty rateBox (no rateable deal) takes zero
     space. (Kept from the removed mobile-order block.) */
  .detail #rateBox:empty { display: none; }

/* ---------- detail page gallery thumbs: bigger tap areas ---------------------- */
.thumbs img { width: 76px; height: 76px; }
.thumbs { display: flex; gap: 8px; }