/* listing.css — extrait depuis www/pages/annonces.php (2026-05-18, audit UX).
   Regroupe les 3 blocs <style> inline du listing :
     1) .gt-page-breadcrumb (breadcrumb haut de page)
     2) .gt-results / .gt-search-heading / .gt-chip-btn / .gt-sort (header de résultats)
     3) .gt-listing / .gt-listing__card / .gt-listing__pagination / etc. (cards + pagination)
   Aucune modification CSS — extraction byte-fidèle. */

/* ============================================================
   1) Breadcrumb listing
   ============================================================ */
.gt-page-breadcrumb{max-width:980px;margin:10px auto 0;padding:0 14px;font:13px/1.3 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#6b7280}
.gt-page-breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:0}
.gt-page-breadcrumb li{display:inline-flex;align-items:center}
.gt-page-breadcrumb li+li::before{content:"›";color:#cbd5e1;padding:0 6px;font-weight:400}
.gt-page-breadcrumb a{color:#1a4f8c;text-decoration:none}
.gt-page-breadcrumb a:hover{color:#0f3a78;text-decoration:underline}
.gt-page-breadcrumb .active{color:#94a3b8}
@media (max-width:600px){.gt-page-breadcrumb{padding:0 10px}}

/* ============================================================
   2) Header de résultats (heading + chips + tri)
   ============================================================ */
.gt-results{max-width:980px;margin:18px auto 0;padding:0 14px;font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#0f172a}
.gt-results__head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:space-between;margin-bottom:14px}
.gt-search-heading{margin:0;font:600 18px/1.3 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#0f172a;flex:1 1 auto;min-width:0}
.gt-search-heading strong{font-weight:700;color:#1a4f8c}
.gt-search-heading a{color:#1a4f8c;text-decoration:none;border-bottom:1px solid rgba(26,79,140,.25);transition:border-color .15s}
.gt-search-heading a:hover{border-color:#1a4f8c}
.gt-search-heading em{font-style:normal;color:#0f172a;background:#fff3c4;padding:1px 5px;border-radius:4px;font-weight:500}
.gt-results__tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.gt-chip-btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border:1px solid #d6dde5;border-radius:999px;background:#fff;color:#1a4f8c;font:500 13px/1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.gt-chip-btn:hover{background:#f3f7fb;border-color:#1a4f8c;color:#1a4f8c;text-decoration:none}
.gt-chip-btn[aria-pressed=true]{background:#1a4f8c;border-color:#1a4f8c;color:#fff}
.gt-chip-btn[aria-pressed=true] svg{color:#fff;fill:#fff}
.gt-chip-btn svg{width:14px;height:14px;color:#6b7280;flex-shrink:0}
.gt-chip-btn.is-ghost{border-color:transparent;background:transparent;color:#475569;padding:0 8px}
.gt-chip-btn.is-ghost:hover{background:#f3f7fb;color:#1a4f8c}
.gt-results__reveal{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:10px 14px;background:#fef9c3;border:1px solid #fde68a;border-radius:10px;font-size:14px;color:#78350f}
.gt-results__reveal a{display:inline-flex;align-items:center;gap:6px;background:#1a4f8c;color:#fff;text-decoration:none;padding:6px 12px;border-radius:8px;font-weight:600;transition:filter .15s}
.gt-results__reveal a:hover{filter:brightness(1.05);text-decoration:none;color:#fff}
.gt-sort{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:#475569}
.gt-sort__group{display:inline-flex;align-items:center;gap:2px;padding:0 4px;border-radius:8px}
.gt-sort__label{margin-right:4px;font-weight:500;color:#475569}
.gt-sort__group a{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;color:#94a3b8;text-decoration:none;border-radius:6px;transition:background .15s,color .15s}
.gt-sort__group a:hover{background:#f3f7fb;color:#1a4f8c}
.gt-sort__group a svg{width:14px;height:14px}
@media (max-width:600px){
  .gt-results{padding:0 10px}
  .gt-results__head{gap:8px}
  .gt-search-heading{font-size:16px}
  .gt-results__tools{width:100%;justify-content:flex-start}
}

/* ============================================================
   3) Cards listing + pubs + pagination + scroll-to-top
   ============================================================ */
.gt-listing{max-width:980px;margin:0 auto;padding:6px 14px 28px;font:14px/1.55 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#0f172a}
@media (max-width:600px){.gt-listing{padding:6px 10px 24px}}

/* Carte annonce — wrappe le <div col-12 col-md-12> existant via sélecteur child */
.gt-listing__card{position:relative;display:block;background:#fff;border:1px solid #eef1f5;border-radius:14px;box-shadow:0 1px 3px rgba(15,23,42,.04);padding:14px 16px;margin-bottom:12px;transition:transform .18s,box-shadow .18s,border-color .18s;text-decoration:none;color:#0f172a}
.gt-listing__card:hover,.gt-listing__card:focus{transform:translateY(-2px);box-shadow:0 12px 28px rgba(26,79,140,.14);border-color:#cfdcec;text-decoration:none;color:#0f172a}
/* Lien overlay : couvre toute la card sauf le bouton favori (z-index supérieur). */
.gt-listing__card-link{position:absolute;inset:0;z-index:1;text-indent:-9999px;overflow:hidden;border-radius:14px}
.gt-listing__card-link:hover,.gt-listing__card-link:focus{text-decoration:none;color:inherit}
.gt-listing__card .row{margin-left:-8px;margin-right:-8px;display:flex;flex-wrap:wrap;align-items:center}
.gt-listing__card .row > [class*="col-"]{padding-left:8px;padding-right:8px}
/* Thumb : aspect-ratio 1/1 (LeBonCoin-like, photo plus haute), pas de hauteur
   fixe — la photo grandit avec la largeur de la card, plus de crop violent
   sur les photos portrait. object-position: center top pour préserver visages
   plutôt que pieds quand cover doit recadrer. */
.gt-listing__thumb{display:block;width:100%;height:auto;aspect-ratio:1/1;border-radius:10px;background-color:#f3f7fb;object-fit:cover;object-position:center top;border:0}
.gt-listing__card-title{font-size:16px;line-height:1.3;font-weight:600;color:#1a4f8c;margin:0 0 6px;overflow-wrap:anywhere;word-break:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gt-listing__card:hover .gt-listing__card-title{color:#0f3a78}
.gt-listing__card-desc{display:block;font-size:13px;line-height:1.5;color:#475569;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gt-listing__card-info{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;color:#6b7280;margin-bottom:6px}
.gt-listing__card-info .gt-listing__info-sep{color:#cbd5e1}
.gt-listing__card-info .gt-listing__info-date{color:#1a4f8c;font-weight:600}
.gt-listing__card-info .gt-listing__info-loc{display:inline-flex;align-items:center;gap:4px}
.gt-listing__card-price{display:inline-block;font-size:17px;font-weight:700;color:#ea2828;margin-top:4px;letter-spacing:-.01em}

/* Bouton favori (overlay top-right de la card) */
/* ♥ : visible dès le repos (audit a11y : ancien #cbd5e1 = 1.48:1 invisible).
   Repos = silhouette rouge vif sur fond blanc (contraste 4.5+, AA), pressed
   = même rouge + halo rosé pour signaler l'état actif. Pas de hover sur mobile
   donc la couleur de repos doit déjà être contrastée.
   z-index:5 > .gt-listing__card-link (z-index:1) → bouton cliquable au-dessus du lien overlay. */
.gt-listing__card .gt-fav-btn{position:absolute;top:10px;right:12px;width:44px;height:44px;border:1px solid #fecaca;background:#fff;border-radius:50%;color:#ef4444;font-size:20px;line-height:42px;text-align:center;cursor:pointer;padding:0;transition:color .15s,border-color .15s,background .15s,transform .15s;z-index:5;box-shadow:0 1px 3px rgba(15,23,42,.06)}
.gt-listing__card .gt-fav-btn:hover{color:#dc2626;border-color:#fca5a5;background:#fff5f5;transform:scale(1.08)}
.gt-listing__card .gt-fav-btn[aria-pressed="true"]{color:#dc2626;border-color:#dc2626;background:#fff1f1}

/* État vide */
.gt-listing__empty{background:#fff;border:1px solid #eef1f5;border-radius:14px;padding:32px 24px;text-align:center;color:#475569;box-shadow:0 1px 3px rgba(15,23,42,.04);margin:14px 0}
.gt-listing__empty a{color:#1a4f8c;font-weight:600}

/* Liens sponsorisés */
.gt-listing__sponsored-label{display:block;text-align:right;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#94a3b8;font-weight:600;margin:18px 4px 8px;padding-right:4px}
.gt-listing__sponsored{background:#fff;border:1px solid #fde68a;border-radius:14px;padding:14px 16px;margin-bottom:12px;box-shadow:0 1px 3px rgba(15,23,42,.04);transition:transform .15s,box-shadow .15s;display:block;text-decoration:none;color:#0f172a}
.gt-listing__sponsored:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(217,119,6,.18);text-decoration:none;color:#0f172a}
.gt-listing__sponsored .row{margin-left:-8px;margin-right:-8px;display:flex;flex-wrap:wrap;align-items:center}
.gt-listing__sponsored .row > [class*="col-"]{padding-left:8px;padding-right:8px}
.gt-listing__sponsored h4{color:#1a4f8c !important;font-size:15px;line-height:1.3;font-weight:600;margin:0}
.gt-listing__sponsored img{display:inline-block;max-width:100%;height:auto;border-radius:8px}
.gt-listing__sponsored-iframe{background:#fff;border:1px solid #eef1f5;border-radius:14px;overflow:hidden;margin-bottom:12px;box-shadow:0 1px 3px rgba(15,23,42,.04)}
.gt-listing__sponsored-iframe iframe{display:block;width:100%}

/* Pagination — override Bootstrap .pagination */
.gt-listing__pagination{margin:24px 0 8px;text-align:center}
.gt-listing__pagination .pagination{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:6px;padding:0;margin:0;list-style:none;border-radius:0}
.gt-listing__pagination .pagination li{margin:0;display:inline-flex}
.gt-listing__pagination .pagination li a,
.gt-listing__pagination .pagination li span.page{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 12px;border:1px solid #d6dde5;background:#fff;color:#1a4f8c;font-size:14px;font-weight:600;border-radius:10px;text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s,color .15s,transform .15s}
.gt-listing__pagination .pagination li a:hover{background:#f3f7fb;border-color:#1a4f8c;color:#0f3a78;text-decoration:none;transform:translateY(-1px)}
.gt-listing__pagination .pagination li.active a,
.gt-listing__pagination .pagination li.active span.page,
.gt-listing__pagination .pagination li span.sel_page{background:linear-gradient(180deg,#3b7cc2,#1a4f8c);border-color:#1a4f8c;color:#fff;cursor:default;box-shadow:0 4px 12px rgba(26,79,140,.28)}
.gt-listing__pagination .pagination li.active a:hover{transform:none}
.gt-listing__pagination .pagination li.disabled a,
.gt-listing__pagination .pagination li.disabled span.page{color:#cbd5e1;cursor:not-allowed;background:#f8fafc}
.gt-listing__pagination .pagination li.disabled a:hover,
.gt-listing__pagination .pagination li.disabled span.page:hover{background:#f8fafc;border-color:#d6dde5;color:#cbd5e1;transform:none}

/* Footer disclaimer */
.gt-listing__bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:18px;font-size:12px;color:#94a3b8}
.gt-listing__bottom p{margin:0;padding:0}
.gt-listing__scrolltop{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:linear-gradient(180deg,#3b7cc2,#1a4f8c);box-shadow:0 6px 16px rgba(26,79,140,.28);transition:transform .15s,box-shadow .15s}
.gt-listing__scrolltop:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(26,79,140,.42)}
.gt-listing__scrolltop img{width:18px;height:18px;filter:brightness(0) invert(1)}