/* Tappo — styles réservés à : annonces.html, categorie.html */
/* Barre de recherche compacte */
.search-compact { background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-sm);
  padding: 8px; display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.search-compact input, .search-compact select { border: none; outline: none; background: transparent; width: 100%; font-weight: 600; color: var(--ink); font-size: .94rem; }
.listing-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 26px 0 18px; }
.listing-head h1 { font-size: clamp(1.4rem, 3vw, 2rem); }
/* Sidebar filtres */
.filters { position: sticky; top: calc(var(--header-h) + 14px); background: #fff; border: 1px solid var(--line);
  border-radius: var(--r); padding: 4px 20px 20px; }
.filters-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.filters-head h3 { font-size: 1.05rem; }
.filters-head button { color: var(--green); font-weight: 700; font-size: .85rem; }
.fgroup { padding: 18px 0; border-bottom: 1px solid var(--line-soft); }
.fgroup:last-child { border-bottom: none; }
.fgroup > h4 { font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); margin-bottom: 12px; }
/* Barre de tri */
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.fchip { display: inline-flex; align-items: center; gap: 7px; background: rgba(22,145,92,.10); color: var(--green-deep); font-weight: 600; font-size: .85rem; padding: 6px 8px 6px 13px; border-radius: var(--r-pill); }
.fchip button { color: var(--green-deep); display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; }
.fchip button:hover { background: rgba(22,145,92,.2); }
.btn-filters { display: none; }
@media (max-width: 900px) {
  .btn-filters { display: inline-flex; }
  .filters { position: fixed; top: 0; left: 0; bottom: 0; width: min(340px, 86vw); z-index: 120; border-radius: 0;
    overflow-y: auto; transform: translateX(-105%); transition: transform .35s var(--ease); box-shadow: var(--sh-lg); }
  .filters-overlay { position: fixed; inset: 0; background: rgba(20,24,31,.5); z-index: 119; opacity: 0; visibility: hidden; transition: .3s; }
}
/* ---- Bannières héros (catégorie/ville/pro/blog) ---- */
.cat-hero { display: block; border-radius: var(--r-lg, 20px); overflow: hidden; margin: 4px 0 18px; box-shadow: var(--sh); }
.cat-hero img { display: block; width: 100%; height: auto; }
/* ---- Bannière contextuelle (annonces) + héros image ---- */
.cat-hero { display: block; border-radius: var(--r-lg, 20px); overflow: hidden; margin: 4px 0 18px; box-shadow: var(--sh); }
.cat-hero img { display: block; width: 100%; height: auto; }
/* ---- Sentinelle scroll infini ---- */
.scroll-sentinel { height: 1px; }
.loading-more { text-align: center; padding: 16px 24px; margin: 8px auto 0; color: var(--green); font-weight: 700; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: var(--r); max-width: 320px; transition: border-color .2s, background .2s, transform .2s; }
.loading-more:hover { border-color: var(--green); background: var(--green-pale, #EAF6F0); transform: translateY(-2px); }
.loading-more svg { width: 16px; height: 16px; vertical-align: -3px; }
.loading-more small { color: var(--slate); font-weight: 500; }
/* ============================================================
   LISTE DES ANNONCES — barre fixe mobile Filtres · Trier (13/09/2026)
   ============================================================ */
.m-filterbar { display: none; }
@media (max-width: 900px) {
  .m-filterbar { display: flex; gap: 8px; position: sticky; top: var(--header-h, 72px); z-index: 40; margin: 0 0 12px; padding: 8px 0;
    background: var(--bg, #fff); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
  .m-filterbar::-webkit-scrollbar { display: none; }
  .mfb-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 999px;
    border: 1.5px solid var(--line); background: #fff; color: var(--ink); font: 600 .86rem/1 var(--font-body, inherit); cursor: pointer; white-space: nowrap; }
  .mfb-btn svg { width: 16px; height: 16px; color: var(--green); flex: none; }
  .mfb-main { background: var(--green); border-color: var(--green); color: #fff; }
  .mfb-main svg { color: #fff; }
  .mfb-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #fff; color: var(--green-deep, #0C6B45); font-size: .72rem; font-weight: 800; display: inline-grid; place-items: center; }
  .mfb-n[hidden] { display: none; }
  .mfb-sort select { border: 0; background: transparent; font: inherit; color: inherit; padding: 0; outline: none; cursor: pointer; }
  .listing-head .btn-filters { display: none; }
  .toolbar { margin-bottom: 10px; }
}
/* Liste : explication sous « M'alerter » */
.toolbar .alert-hint { flex-basis: 100%; margin: -6px 0 0; font-size: .82rem; color: var(--slate); }
.search-fix { margin: 0 0 12px; padding: 8px 12px; border-radius: 10px; background: var(--green-pale, #EAF6F0); color: var(--ink); font-size: .9rem; }
/* ---- Alerte proposée dans les résultats ---- */
.alert-inline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-radius: 16px; background: linear-gradient(135deg, #EEF2FF, #F0FDF4); border: 1px dashed #A5B4FC; }
.alert-inline .ai-ic { font-size: 1.6rem; transform-origin: 50% 10%; animation: ai-ring 2.6s ease-in-out infinite; }
.alert-inline .ai-t { flex: 1; min-width: 200px; font-size: .9rem; color: var(--slate); line-height: 1.4; }
.alert-inline .ai-t b { display: block; color: var(--ink); }
/* Bandeau agences dans les rayons immobilier / véhicules / location */
.pro-strip { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: #F0F7FF; border: 1px solid #BFDBFE; border-radius: 14px; padding: 10px 14px; margin: 0 0 14px; font-size: .9rem; }
.pro-strip a { font-weight: 800; color: var(--green-deep, #0E6B43); white-space: nowrap; }
/* Sous-rubriques animées « à la Tappo » */
.sub-rail { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 12px; margin: 0 0 6px; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.sub-rail::-webkit-scrollbar { display: none; }
.sub-chip { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px 8px 9px; border-radius: 999px; border: 1.5px solid var(--line, #E3E8EE); background: #fff; color: var(--ink, #10231B);
  font: 700 .86rem/1 var(--font-body, inherit); cursor: pointer; scroll-snap-align: start; overflow: hidden; isolation: isolate;
  box-shadow: 0 6px 16px -14px rgba(16,35,27,.5); transition: transform .25s cubic-bezier(.2,.9,.3,1.4), border-color .2s, box-shadow .25s, background .25s, color .2s;
  animation: subIn .55s cubic-bezier(.2,.9,.3,1.25) both; animation-delay: calc(var(--i) * 55ms); }
.sub-chip:hover { transform: translateY(-2px); border-color: var(--green, #16915C); box-shadow: 0 12px 22px -16px rgba(22,145,92,.7); }
.sub-chip::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, var(--green, #16915C), #0E7A4B 55%, var(--orange, #F97316)); opacity: 0; transition: opacity .3s; }
.sub-chip::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-18deg); z-index: 1; pointer-events: none; }
/* ======================================================================
   Page de recherche « à la Tappo » : en-tête coloré, filtres rapides, panneau de filtres en pastilles
   ====================================================================== */
.listing-head.lh-tappo { position: relative; overflow: hidden; align-items: center; padding: 20px 20px 18px 84px; border-radius: 22px; color: #fff; min-height: 88px;
  background: linear-gradient(120deg, var(--g1), var(--g2)); box-shadow: 0 18px 40px -26px var(--g2); }
.listing-head.lh-tappo::before { content: attr(data-emo); position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; display: grid; place-items: center; font-size: 1.7rem; border-radius: 16px; background: rgba(255,255,255,.18); animation: jhFloat 4s ease-in-out infinite; }
.listing-head.lh-tappo::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.22), transparent 70%); animation: som-orbit 10s ease-in-out infinite; pointer-events: none; }
.listing-head.lh-tappo h1 { color: #fff; font-family: 'Sora', var(--font-head), sans-serif; letter-spacing: -.02em; margin: 0; display: inline; }
.lh-sub { margin-left: 8px; font-weight: 700; font-size: 1rem; opacity: .9; }
.listing-head.lh-tappo .btn-filters { background: rgba(255,255,255,.95); border-color: transparent; position: relative; z-index: 1; }
.quick-filters { display: flex; gap: 7px; overflow-x: auto; padding: 2px 2px 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.quick-filters::-webkit-scrollbar { display: none; }
.qf-price { border-style: dashed; }
.qf-sep { flex: none; width: 1px; background: #E2EAE5; margin: 4px 2px; }
/* Panneau de filtres : pastilles au lieu de listes radio */
.filters .fgroup > h4 { font-family: 'Sora', var(--font-head), sans-serif; color: #10231B; font-size: .78rem; }
#filter-cats .fcount { margin-left: auto; font-size: .72rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: #F1F5F4; color: #5B6B63; }
.filters { border-radius: 22px; box-shadow: 0 20px 40px -32px rgba(16,35,27,.5); }
.filters-head h3 { font-family: 'Sora', var(--font-head), sans-serif; }
@media (max-width: 600px) {
  .listing-head.lh-tappo { padding: 16px 14px 14px 74px; }
  .listing-head.lh-tappo::before { left: 14px; width: 44px; height: 44px; font-size: 1.5rem; }
  .listing-head.lh-tappo .btn-filters { display: none; }
}
.toolbar { flex-wrap: wrap; }
/* Recherches fréquentes (calculées sur les vraies annonces) */
.pop-search { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.ps-lab { font-size: .82rem; font-weight: 700; color: var(--slate, #5B6B63); }
.pop-w { border: 1.5px solid #E2EAE5; background: #fff; border-radius: 999px; padding: 6px 11px; font: 600 .82rem var(--font-body, inherit); cursor: pointer; text-transform: capitalize;
  transition: all .2s; animation: subIn .4s ease both; animation-delay: calc(var(--i) * 40ms); }
.pop-w small { font-weight: 800; color: var(--slate, #5B6B63); font-size: .72rem; }
.pop-w:hover { border-color: #16915C; color: #0E6B43; transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .pop-w { animation: none; }
}
/* Quartiers réels de la ville choisie (filtre de localisation précis) */
.lieu-rail { display: flex; align-items: center; gap: 6px; overflow-x: auto; padding: 2px 2px 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.lieu-rail::-webkit-scrollbar { display: none; }
.lr-lab { flex: none; font-size: .82rem; font-weight: 800; color: var(--slate, #5B6472); }
.lieu-chip { flex: none; display: inline-flex; align-items: center; gap: 5px; border: 1.5px solid #E2EAE5; background: #fff; color: #10231B; border-radius: 999px; padding: 7px 12px;
  font: 700 .82rem var(--font-body, inherit); cursor: pointer; transition: transform .2s cubic-bezier(.2,.9,.3,1.4), background .2s, border-color .2s, color .2s;
  animation: subIn .45s cubic-bezier(.2,.9,.3,1.2) both; animation-delay: calc(var(--i, 0) * 35ms); }
.lieu-chip small { font-size: .72rem; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: #F1F5F4; color: var(--slate, #5B6472); }
.lieu-chip:hover { transform: translateY(-2px); border-color: #16915C; }
@media (prefers-reduced-motion: reduce) {
  .lieu-chip { animation: none; }
}
.lr-msg { flex: none; font-size: .78rem; font-weight: 600; color: var(--slate, #5B6472); padding-left: 4px; }