/* =====================================================
   FEED PAGE
   ===================================================== */
.main-content { padding:0 !important; padding-bottom:calc(56px + env(safe-area-inset-bottom,12px) + 12px) !important; }

/* =====================================================
   HERO — dark premium with mesh background
   ===================================================== */
.hero {
  position:relative; overflow:hidden;
  background:#0a1628;
  padding:40px 0 0;
}
/* Subtle mesh grid */
.hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:40px 40px;
}
/* Glow orbs */
.hero::after {
  content:''; position:absolute; pointer-events:none;
  width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle, rgba(245,158,11,.12) 0%, transparent 70%);
  top:-200px; left:50%; transform:translateX(-50%);
}

.hero-inner {
  position:relative; z-index:2;
  padding:0 20px 32px;
  text-align:center; max-width:860px; margin:0 auto;
}
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:6px;
  background:linear-gradient(135deg,rgba(245,158,11,.2),rgba(245,158,11,.08));
  border:1px solid rgba(245,158,11,.35); border-radius:100px;
  padding:5px 16px; font-size:.7rem; font-weight:800;
  color:#fcd34d; letter-spacing:.8px; text-transform:uppercase;
  margin-bottom:18px;
}
.hero h1 {
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(1.6rem,5vw,3rem);
  font-weight:900; color:#f8fafc;
  margin:0 0 12px; line-height:1.1; letter-spacing:-.5px;
}
.hero h1 em { font-style:normal; color:#f59e0b; }
.hero-sub {
  font-size:.9rem; color:rgba(248,250,252,.5);
  margin:0 0 28px; line-height:1.7;
  max-width:400px; margin-left:auto; margin-right:auto;
}


/* ── HERO SEARCH BOX ────────────────────────────────── */
.hero-searchbox {
  display:flex; align-items:stretch;
  background:rgba(255,255,255,.08);
  border:1.5px solid rgba(255,255,255,.18);
  border-radius:14px; overflow:hidden;
  max-width:680px; width:100%; margin:0 auto 20px;
  backdrop-filter:blur(6px);
  transition:border-color .2s, box-shadow .2s;
}
.hero-searchbox:focus-within {
  border-color:rgba(245,158,11,.6);
  box-shadow:0 0 0 3px rgba(245,158,11,.12);
}
.hsb-seg {
  display:flex; align-items:center;
  border-right:1px solid rgba(255,255,255,.12);
  flex-shrink:0;
}
.hsb-seg:last-of-type { border-right:none; }
.hsb-icon {
  display:flex; align-items:center; justify-content:center;
  width:38px; color:rgba(255,255,255,.45); font-size:.8rem; flex-shrink:0;
}
.hsb-select, .hsb-input {
  background:transparent; border:none; outline:none;
  color:white; font-family:inherit; font-size:.84rem;
  padding:0; height:46px;
}
.hsb-select {
  padding-right:28px; cursor:pointer; min-width:0;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5' viewBox='0 0 9 5'%3E%3Cpath fill='rgba(255,255,255,.5)' d='M0 0l4.5 5L9 0z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center;
}
.hsb-select option { background:#0f2744; color:#f8fafc; }
.hsb-input { flex:1; min-width:0; padding-right:8px; }
.hsb-input::placeholder { color:rgba(255,255,255,.38); }
.hsb-seg-q { flex:1; min-width:0; }
.hsb-btn {
  display:flex; align-items:center; gap:7px;
  background:var(--accent); border:none; color:#0f2744;
  padding:0 22px; font-size:.84rem; font-weight:800;
  cursor:pointer; font-family:inherit; white-space:nowrap;
  transition:background .18s; flex-shrink:0;
}
.hsb-btn:hover { background:var(--accent-light); }
@media(max-width:600px){
  .hsb-seg:nth-child(1) .hsb-select { display:none; }
  .hsb-seg:nth-child(1) .hsb-icon { display:none; }
  .hsb-seg:nth-child(3) { display:none; }
  .hsb-btn span { display:none; }
  .hsb-btn { padding:0 16px; }
}

/* ── ADVANCED FILTERS TOGGLE ────────────────────────── */
.hero-adv-row {
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.hero-adv-toggle {
  display:inline-flex; align-items:center; gap:7px;
  background:transparent; color:rgba(248,250,252,.55);
  border:1px solid rgba(248,250,252,.15); border-radius:20px;
  padding:6px 16px; font-size:.76rem; font-weight:700; letter-spacing:.2px;
  cursor:pointer; font-family:inherit;
  transition:all .18s;
}
.hero-adv-toggle:hover {
  background:rgba(255,255,255,.08); color:#f8fafc;
  border-color:rgba(255,255,255,.3);
}
.hero-adv-toggle.active {
  background:rgba(245,158,11,.15); color:#fcd34d;
  border-color:rgba(245,158,11,.4);
}
.hero-filter-badge {
  background:#f59e0b; color:#fff; border-radius:100px;
  padding:1px 8px; font-size:.62rem; font-weight:900;
}

/* ── ADVANCED FILTERS PANEL ─────────────────────────── */
.hero-adv-panel {
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .4s cubic-bezier(.4,0,.2,1), opacity .3s;
  width:100%; max-width:780px; margin:0 auto;
}
.hero-adv-panel.open { max-height:700px; opacity:1; }

.adv-inner {
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(12px);
  border-radius:16px; padding:18px;
  margin-top:12px;
}
.adv-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(165px,1fr));
  gap:10px; margin-bottom:14px;
}
.adv-field { display:flex; flex-direction:column; gap:5px; }
.adv-label {
  font-size:.6rem; font-weight:800; letter-spacing:.7px;
  text-transform:uppercase; color:rgba(248,250,252,.45);
}
.adv-sel, .adv-inp {
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  border-radius:9px; color:#f1f5f9;
  padding:9px 11px; font-size:.84rem;
  font-family:inherit; outline:none;
  -webkit-appearance:none; appearance:none;
  transition:border-color .15s, background .15s;
}
.adv-sel:focus, .adv-inp:focus {
  border-color:rgba(245,158,11,.5);
  background:rgba(255,255,255,.12);
}
.adv-sel option { background:#0f2744; color:#f1f5f9; }
.adv-inp::placeholder { color:rgba(248,250,252,.3); }
.adv-check-field { display:flex; align-items:flex-end; }
.adv-check {
  display:flex; align-items:center; gap:9px; cursor:pointer;
  padding:9px 11px; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12); border-radius:9px;
  font-size:.84rem; font-weight:600; color:rgba(248,250,252,.8);
  width:100%; transition:border-color .15s;
}
.adv-check:has(input:checked) { border-color:rgba(245,158,11,.5); background:rgba(245,158,11,.1); color:#fcd34d; }
.adv-check input { width:15px; height:15px; accent-color:#f59e0b; cursor:pointer; }
.adv-actions {
  display:flex; gap:10px; justify-content:space-between; align-items:center;
  padding-top:12px; border-top:1px solid rgba(255,255,255,.08);
}
.adv-reset {
  color:rgba(248,250,252,.45); font-size:.8rem; font-weight:700;
  text-decoration:none; display:flex; align-items:center; gap:6px;
  transition:color .15s;
}
.adv-reset:hover { color:#f87171; }
.adv-submit {
  display:flex; align-items:center; gap:7px;
  background:linear-gradient(135deg,#f59e0b,#d97706);
  color:#fff; border:none; border-radius:10px;
  padding:10px 22px; font-size:.86rem; font-weight:800;
  cursor:pointer; font-family:inherit; transition:filter .15s;
}
.adv-submit:hover { filter:brightness(1.1); }

/* ── STATS STRIP ────────────────────────────────────── */
.hero-stats {
  position:relative; z-index:2;
  display:flex; justify-content:center;
  background:rgba(0,0,0,.3);
  border-top:1px solid rgba(255,255,255,.07);
  padding:11px 0; overflow-x:auto;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.hero-stats::-webkit-scrollbar { display:none; }
.hero-stat {
  padding:2px 22px; text-align:center;
  border-right:1px solid rgba(255,255,255,.07); flex-shrink:0;
}
.hero-stat:last-child { border-right:none; }
.hero-stat-val {
  font-family:'Space Grotesk',sans-serif;
  font-size:1.1rem; font-weight:900; color:#f59e0b;
}
.hero-stat-lbl {
  font-size:.56rem; color:rgba(248,250,252,.4);
  font-weight:700; text-transform:uppercase; letter-spacing:.7px; margin-top:1px;
}

/* CTA button */
.hero-cta-row {
  margin-top:16px;
  display:flex; justify-content:center; gap:10px; flex-wrap:wrap;
}
.cta-primary {
  display:inline-flex; align-items:center; gap:7px;
  background:linear-gradient(135deg,#f59e0b,#d97706);
  color:#fff; padding:11px 22px; border-radius:12px;
  font-weight:800; font-size:.88rem; text-decoration:none;
  box-shadow:0 4px 18px rgba(245,158,11,.35);
  transition:filter .15s, transform .1s;
}
.cta-primary:hover  { filter:brightness(1.08); transform:translateY(-1px); color:#fff; }
.cta-secondary {
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.08); color:rgba(248,250,252,.8);
  padding:11px 22px; border-radius:12px;
  font-weight:700; font-size:.88rem; text-decoration:none;
  border:1px solid rgba(255,255,255,.15);
  transition:background .15s, color .15s;
}
.cta-secondary:hover { background:rgba(255,255,255,.15); color:#fff; }

/* =====================================================
   PAGE BODY
   ===================================================== */
.feed-body { padding:16px 14px 0; }

/* desktop overrides */
@media(min-width:769px) {
  .main-content { padding:22px !important; }
  .feed-body    { padding:0; }
  .hero { margin:-24px -24px 28px; padding:52px 0 0; }
  .hero h1 { font-size:clamp(1.8rem,3vw,2.8rem); }
  .hero-sub { font-size:1rem; }
  .hero-cta-row a { padding:12px 26px; font-size:.92rem; }
}
/* =====================================================
   TINY PHONES
   ===================================================== */
@media (max-width:768px) {
  /* Compact card body */
  .card-body  { padding:8px 10px 10px; }
  .annonce-title { font-size:.85rem; margin-bottom:5px; }
  .spec-row   { margin-bottom:5px; gap:3px; }
  .spec-chip  { font-size:.65rem; padding:2px 6px; }
  .card-foot  { padding-top:6px; }
  .card-time  { display:none; }
  .seller-lbl { font-size:.62rem; }
  .feed-body  { padding:10px 10px 0; }
  .feed-grid  { gap:10px; }

  /* Sticky sort/results bar — stays visible while scrolling */
  .results-bar {
    position: sticky;
    top: 56px;
    z-index: 200;
    background: var(--bg);
    padding: 8px 10px;
    margin: 0 -10px 10px;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
  }

  /* Smooth overscroll — no rubber-band bounce */
  .feed-body { overscroll-behavior-y: contain; }

  /* Larger fav tap target */
  .fav-btn {
    min-width: 36px; min-height: 36px;
    display: flex; align-items: center; justify-content: center;
  }
}
@media (max-width:380px) {
  .hero h1 { font-size:1.35rem; }
  .annonce-price { font-size:.88rem; }
}

/* =====================================================
   SELLER FLOAT AVATAR (TikTok-style)
   ===================================================== */
.seller-float-btn {
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  width:50px;height:50px;
  border-radius:50%;
  border:3px solid #fff;
  display:block;
  cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,.38),0 1px 4px rgba(0,0,0,.22);
  z-index:8;
  flex-shrink:0;
  animation:sfbPulse 2.4s ease-in-out 1;
  overflow:visible;
}
.seller-float-btn img {
  width:100%;height:100%;
  border-radius:50%;
  object-fit:cover;
  display:block;
}
.seller-float-plus {
  position:absolute;
  bottom:-5px;left:50%;
  transform:translateX(-50%);
  width:20px;height:20px;
  background:var(--accent,#f59e0b);
  color:#0f2744;
  border-radius:50%;
  font-size:13px;font-weight:900;line-height:1;
  display:flex;align-items:center;justify-content:center;
  border:2px solid #fff;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
  pointer-events:none;
}
@keyframes sfbPulse {
  0%   { transform:translateY(-50%) scale(1); }
  40%  { transform:translateY(-50%) scale(1.12); }
  70%  { transform:translateY(-50%) scale(0.96); }
  100% { transform:translateY(-50%) scale(1); }
}
/* Mobile touch target */
@media(max-width:768px) {
  .seller-float-btn { width:54px;height:54px;right:8px; }
}

/* =====================================================
   FEED GRID
   ===================================================== */
.feed-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
/* Mid-feed ad slot — spans full grid width but disappears when empty */

@media(min-width:769px) { .feed-grid { grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; } }

/* =====================================================
   LISTING CARDS
   ===================================================== */
.annonce-card-wrap { animation:cardIn .32s ease both; }
.annonce-card-wrap:nth-child(1){animation-delay:.04s}
.annonce-card-wrap:nth-child(2){animation-delay:.08s}
.annonce-card-wrap:nth-child(3){animation-delay:.12s}
.annonce-card-wrap:nth-child(4){animation-delay:.16s}
.annonce-card-wrap:nth-child(5){animation-delay:.20s}
.annonce-card-wrap:nth-child(6){animation-delay:.24s}
@keyframes cardIn { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }

.annonce-card {
  background:var(--card);
  border-radius:16px;
  border:1px solid var(--border);
  overflow:hidden;
  height:100%;
  display:flex;
  flex-direction:column;
  box-shadow:0 2px 8px rgba(15,39,68,.07),0 1px 2px rgba(15,39,68,.04);
  transition:transform .18s,box-shadow .18s;
}
.annonce-card:active  { transform:scale(.977); }
.annonce-card:hover   { transform:translateY(-3px); box-shadow:0 8px 28px rgba(15,39,68,.13); }

.card-img-wrap  { position:relative; overflow:hidden; aspect-ratio:16/10; flex-shrink:0; width:100%; }
.annonce-img    { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.annonce-card:hover .annonce-img { transform:scale(1.04); }

/* Badge overlays */
.img-tl,.img-tr,.img-bl,.img-br { position:absolute; display:flex; gap:4px; }
.img-tl { top:7px; left:7px; flex-wrap:wrap; max-width:62%; }
.img-tr { top:7px; right:7px; flex-direction:column; align-items:flex-end; }
.img-bl { bottom:7px; left:7px; }
.img-br { bottom:7px; right:7px; }

.badge-fuel  { padding:2px 7px; border-radius:100px; font-size:.6rem; font-weight:800; backdrop-filter:blur(4px); box-shadow:0 1px 4px rgba(0,0,0,.2); }
.fuel-essence,.fuel-sp95,.fuel-sp98 { background:rgba(254,243,199,.95); color:#92400e; }
.fuel-diesel,.fuel-gasoil            { background:rgba(219,234,254,.95); color:#1e40af; }
.fuel-gpl                             { background:rgba(220,252,231,.95); color:#166534; }
.fuel-hybride                         { background:rgba(240,253,244,.95); color:#15803d; }
.fuel-electrique                      { background:rgba(237,233,254,.95); color:#6b21a8; }

.badge-views  { background:rgba(0,0,0,.58); color:#fff; border-radius:100px; padding:2px 7px; font-size:.6rem; display:flex; align-items:center; gap:3px; backdrop-filter:blur(4px); }
.badge-store  { color:#fff; border-radius:100px; padding:2px 8px; font-size:.58rem; font-weight:800; display:flex; align-items:center; gap:3px; max-width:88px; overflow:hidden; }
.badge-neg    { background:var(--green,#16a34a); color:#fff; border-radius:6px; padding:2px 6px; font-size:.58rem; font-weight:800; }
.etat-badge   { padding:2px 7px; border-radius:100px; font-size:.6rem; font-weight:700; }
.etat-excellent,.etat-tres_bon,.etat-neuf,.etat-comme_neuf { background:rgba(220,252,231,.92); color:#166534; }
.etat-bon     { background:rgba(254,243,199,.92); color:#92400e; }
.etat-acceptable,.etat-correct { background:rgba(255,237,213,.92); color:#9a3412; }
.etat-mauvais,.etat-pour_pieces { background:rgba(254,226,226,.92); color:#991b1b; }

/* Card body */
.card-body     { padding:11px 13px 13px; display:flex; flex-direction:column; flex:1; }
.price-row     { display:flex; align-items:flex-start; justify-content:space-between; gap:4px; margin-bottom:5px; }
.annonce-price { font-family:'Space Grotesk',sans-serif; font-size:1.05rem; font-weight:900; color:var(--primary); line-height:1.2; }
.fav-btn       { background:none; border:none; cursor:pointer; color:#cbd5e1; font-size:.9rem; padding:2px; flex-shrink:0; transition:color .14s,transform .14s; }
.fav-btn.fav-on,.fav-btn:active { color:#e11d48; transform:scale(1.2); }

.annonce-title {
  font-size:.88rem; font-weight:700; color:var(--text); line-height:1.4; margin-bottom:8px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

.spec-row  { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:8px; }
.spec-chip { display:inline-flex; align-items:center; gap:3px; background:var(--bg); color:var(--text-muted); border-radius:6px; padding:3px 7px; font-size:.68rem; font-weight:600; }

.card-foot  { display:flex; align-items:center; gap:5px; padding-top:8px; border-top:1px solid var(--border); margin-top:auto; }
.av-round   { width:19px; height:19px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.av-sq      { width:19px; height:19px; border-radius:5px; object-fit:cover; flex-shrink:0; }
.seller-lbl { font-size:.64rem; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0; }
.plan-tag   { font-size:.58rem; font-weight:800; padding:1px 6px; border-radius:6px; flex-shrink:0; }
.plan-premium { background:#fef3c7; color:#92400e; }
.plan-pro     { background:#eff6ff; color:#2563eb; }
.plan-basic   { background:#f0fdf4; color:#16a34a; }
.card-time    { font-size:.62rem; color:var(--text-muted); flex-shrink:0; margin-left:auto; }
.cmp-btn      { background:none; border:none; cursor:pointer; padding:2px 4px; border-radius:5px; color:var(--text-muted); font-size:.76rem; }
.cmp-btn.cmp-on { background:#eff6ff; color:var(--primary-light,#2563eb); }

/* =====================================================
   RESULTS BAR
   ===================================================== */
.results-bar  { display:flex; align-items:center; justify-content:space-between; margin-bottom:11px; gap:8px; flex-wrap:wrap; }
.results-count { font-weight:700; color:var(--text); font-size:.85rem; }
.results-count span { color:var(--primary-light,#2563eb); }
.sort-sel {
  padding:6px 10px; border:1.5px solid var(--border); border-radius:9px;
  font-family:inherit; font-size:.78rem; background:var(--card); color:var(--text);
  cursor:pointer; outline:none; max-width:140px;
}

/* =====================================================
   EMPTY STATE
   ===================================================== */
.empty-state  { text-align:center; padding:52px 20px; background:var(--card); border-radius:16px; border:1px solid var(--border); box-shadow:var(--shadow,0 2px 8px rgba(0,0,0,.07)); }
.empty-icon   { font-size:2.8rem; margin-bottom:12px; opacity:.28; }
.empty-state h3 { font-family:'Space Grotesk',sans-serif; font-size:1rem; font-weight:800; margin-bottom:6px; }
.empty-state p  { font-size:.84rem; color:var(--text-muted); margin-bottom:20px; }

/* =====================================================
   SHIMMER (used in search skeleton)
   ===================================================== */
@keyframes shimmer { 0%{background-position:-600px 0} 100%{background-position:600px 0} }

/* =====================================================
   COMPARE FLOAT BAR
   ===================================================== */
.compare-float {
  position:fixed; bottom:72px; left:12px; right:12px; z-index:900;
  background:var(--primary,#0f2744); color:#fff; border-radius:14px;
  padding:11px 15px; display:flex; align-items:center; gap:10px;
  box-shadow:0 5px 24px rgba(0,0,0,.26); font-size:.83rem;
}
.compare-float a { background:#fff; color:var(--primary,#0f2744); border-radius:8px; padding:5px 12px; font-weight:800; text-decoration:none; font-size:.78rem; white-space:nowrap; }
@media(min-width:769px) { .compare-float { left:50%; right:auto; transform:translateX(-50%); min-width:340px; } }

/* =====================================================
   ACTIVE FILTER TAGS
   ===================================================== */
.active-filters { display:flex; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; gap:6px; margin-bottom:11px; padding-bottom:1px; align-items:center; }
.active-filters::-webkit-scrollbar { display:none; }
.active-tag { display:inline-flex; align-items:center; gap:5px; background:#dbeafe; color:#1e40af; border-radius:100px; padding:5px 10px 5px 13px; font-size:.74rem; font-weight:700; white-space:nowrap; flex-shrink:0; }
.active-tag .rm { color:#3b82f6; text-decoration:none; font-weight:800; font-size:.75rem; padding:0 2px; }

/* =====================================================
   RESPONSIVE — TABLET (601–768px)
   ===================================================== */
@media(min-width:601px) and (max-width:768px){
  .feed-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
  .hero h1 { font-size:1.7rem; }
  .hero-sub { font-size:.88rem; }
  .hero-inner { padding:0 16px 24px; }
  .hero-cta-row { margin-top:12px; }
  .cta-primary, .cta-secondary { padding:10px 18px; font-size:.84rem; }
}
/* =====================================================
   RESPONSIVE — LARGE TABLET / SMALL DESKTOP (769–1024px)
   ===================================================== */
@media(min-width:769px) and (max-width:1024px){
  .feed-grid { grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
}
/* =====================================================
   RESPONSIVE — MID PHONES (481–600px)
   ===================================================== */
@media(max-width:600px){
  /* ── Compact hero: hide fluff, show only search ── */
  .hero { padding:12px 0 0; }
  .hero-eyebrow { display:none; }
  .hero h1 { font-size:1.1rem; margin-bottom:5px; }
  .hero-sub { display:none; }
  .hero-inner { padding:0 12px 12px; }
  .hero-cta-row { display:none; }
  .hero-adv-row { margin-top:8px; }

  /* Compact stats strip */
  .hero-stats { padding:7px 0; }
  .hero-stat { padding:2px 12px; }
  .hero-stat-val { font-size:.9rem; }
  .hero-stat-lbl { font-size:.5rem; }

  /* ── 2-column listing grid ── */
  .feed-grid { grid-template-columns:repeat(2,1fr); gap:8px; }
  .feed-body { padding:8px 8px 0; }

  /* 2-col card: tighter image + body */
  .card-img-wrap { aspect-ratio:4/3; }
  .card-body { padding:7px 8px 8px; }
  .price-row { margin-bottom:3px; }
  .annonce-price { font-size:.88rem; line-height:1.2; }
  .annonce-title { font-size:.74rem; -webkit-line-clamp:1; margin-bottom:4px; }
  .spec-row { gap:3px; margin-bottom:4px; flex-wrap:nowrap; overflow:hidden; }
  .spec-chip { font-size:.58rem; padding:2px 5px; white-space:nowrap; flex-shrink:0; }
  .card-foot { padding-top:4px; gap:4px; }
  .av-round,.av-sq { width:15px; height:15px; }
  .seller-lbl { font-size:.58rem; }
  .cmp-btn { display:none; }

  /* Smaller overlay badges so they don't crowd the image */
  .badge-fuel  { font-size:.53rem; padding:1px 5px; }
  .badge-views { font-size:.53rem; padding:1px 4px; }
  .etat-badge  { font-size:.53rem; padding:1px 5px; }
  .badge-neg   { font-size:.53rem; padding:1px 5px; }

  /* Filter/sort bar */
  .adv-grid { grid-template-columns:1fr 1fr; }
  .results-bar { gap:6px; }
  .sort-sel { max-width:120px; font-size:.74rem; }
}
/* =====================================================
   RESPONSIVE — SMALL PHONES (≤390px)
   ===================================================== */
@media(max-width:390px){
  /* 2-col stays, just tweak sizes */
  .annonce-price { font-size:.84rem; }
  .annonce-title { font-size:.72rem; }
  .spec-chip { font-size:.56rem; padding:2px 4px; }
  .hero-stat-val { font-size:.85rem; }
  .hero-stat { padding:2px 9px; }
  .feed-grid { gap:6px; }
}
/* =====================================================
   RESPONSIVE — TINY PHONES (≤320px)
   ===================================================== */
@media(max-width:320px){
  .hero h1 { font-size:1rem; }
  .card-body { padding:5px 6px 7px; }
  .annonce-price { font-size:.82rem; }
  .feed-grid { gap:5px; }
}

/* =====================================================
   SNAP FEED — full-screen mobile listing cards
   Desktop grid is untouched; this only activates ≤768px
   ===================================================== */

/* Filter pill bar */
.sf-filter-bar {
  display:none;
  position:fixed; top:56px; left:0; right:0;
  height:48px; z-index:500;
  background:var(--card);
  border-bottom:1px solid var(--border);
  align-items:center; gap:8px;
  padding:0 14px;
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}
.sf-filter-bar::-webkit-scrollbar { display:none; }

.sf-pill {
  display:inline-flex; align-items:center; gap:5px;
  height:30px; padding:0 14px;
  border-radius:100px; font-size:.76rem; font-weight:700;
  white-space:nowrap; flex-shrink:0;
  text-decoration:none;
  border:1.5px solid var(--border);
  color:var(--text-muted); background:var(--bg);
  transition:all .15s;
  -webkit-tap-highlight-color:transparent;
}
.sf-pill.active {
  background:var(--primary); color:white; border-color:var(--primary);
}

/* Snap scroll container */
.sf-wrap {
  display:none;
  position:fixed;
  top:104px;   /* 56px navbar + 48px filter bar */
  bottom:60px; /* above bottom nav */
  left:0; right:0;
  z-index:400;
  overflow-y:scroll;
  scroll-snap-type:y mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  background:var(--bg);
  /* GPU layer — makes the whole scroller composite-accelerated */
  will-change: transform;
  transform: translateZ(0);
  /* Prevent accidental horizontal scroll jank */
  touch-action: pan-y;
}
.sf-wrap::-webkit-scrollbar { display:none; }

/* ── CARD: full-screen photo + overlaid UI (TikTok / Instagram Reels) ── */
.sf-card {
  width:100%;
  /* Explicit height = viewport minus navbar (56px) + filter bar (48px) + bottom nav (60px) */
  height: calc(100vh - 164px);
  scroll-snap-align:start; scroll-snap-stop:always;
  flex-shrink:0;
  position:relative; overflow:hidden;
  background:#0a0a0a;
  /* Isolate each card's paint — neighboring cards don't repaint on scroll */
  contain: layout style paint;
  /* Pre-promote card to own GPU layer so swipe is instant */
  transform: translateZ(0);
}
/* Use small viewport height on mobile browsers where the toolbar shrinks */
@supports (height: 100svh) {
  .sf-card { height: calc(100svh - 164px); }
}

/* Photo fills entire card */
.sf-photo {
  position:absolute; inset:0; z-index:0;
  /* Dark background fills letterbox bars above/below the landscape photo */
  background:#0a0a0a;
  display:flex; align-items:center; justify-content:center;
}
.sf-photo > img {
  width:100%; height:100%;
  /* contain = show the full car, never crop or zoom */
  object-fit:contain; object-position:center;
  display:block;
}
/* Heavy bottom scrim — makes white text legible */
.sf-photo::after {
  content:''; position:absolute;
  inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to top,  rgba(0,0,0,.88) 0%, rgba(0,0,0,.45) 38%, transparent 62%),
    linear-gradient(to bottom,rgba(0,0,0,.5) 0%, transparent 28%);
}

/* ── Top-left badges ── */
.sf-tl {
  position:absolute; top:10px; left:10px; z-index:3;
  display:flex; gap:5px; flex-wrap:wrap; max-width:65%;
}
.sf-obadge {
  padding:3px 10px; border-radius:100px;
  font-size:.62rem; font-weight:800;
  /* No backdrop-filter — causes GPU overdraw on every frame during scroll */
  box-shadow:0 1px 6px rgba(0,0,0,.3);
}
.sf-boosted { background:var(--accent); color:white; }

/* ── Right sidebar — vertical action stack (TikTok style) ── */
.sf-sidebar {
  position:absolute; right:10px; bottom:100px;
  z-index:4;
  display:flex; flex-direction:column; align-items:center; gap:18px;
}
.sf-act {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  -webkit-tap-highlight-color:transparent; cursor:pointer;
}
.sf-act-ico {
  width:46px; height:46px; border-radius:50%;
  background:rgba(0,0,0,.42);
  /* No backdrop-filter — costs a full GPU pass per icon per frame */
  border:1.5px solid rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; color:white;
  transition:transform .12s, background .12s;
}
.sf-act-ico:active { transform:scale(.82); background:rgba(255,255,255,.28); }
.sf-act-ico.fav-on { background:rgba(225,29,72,.3); color:#ff6b8a; border-color:rgba(225,29,72,.45); }
.sf-act-lbl {
  font-size:.6rem; font-weight:800; color:rgba(255,255,255,.8);
  text-shadow:0 1px 4px rgba(0,0,0,.7); letter-spacing:.2px;
}

/* ── Bottom-left info overlay ── */
.sf-overlay {
  position:absolute;
  bottom:0; left:0; right:64px; /* leave 64px for sidebar */
  padding:0 14px 14px;
  z-index:3;
  display:flex; flex-direction:column; gap:7px;
}

/* Seller row */
.sf-seller {
  display:flex; align-items:center; gap:7px;
}
.sf-av {
  width:26px; height:26px; border-radius:50%;
  object-fit:cover; flex-shrink:0;
  border:2px solid rgba(255,255,255,.35);
}
.sf-av-sq { border-radius:6px; }
.sf-sname {
  font-size:.76rem; font-weight:700; color:white;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1;
  text-shadow:0 1px 4px rgba(0,0,0,.5);
}
.sf-stime {
  font-size:.62rem; color:rgba(255,255,255,.5); flex-shrink:0;
}

/* Price */
.sf-price {
  display:flex; align-items:center; gap:8px; line-height:1;
}
.sf-price-num {
  font-family:'Space Grotesk',sans-serif;
  font-size:1.6rem; font-weight:900; color:white;
  text-shadow:0 2px 12px rgba(0,0,0,.4);
}
.sf-price-tag {
  font-size:.62rem; font-weight:800;
  padding:3px 8px; border-radius:6px;
  font-family:'DM Sans',sans-serif;
}
.sf-sold-tag { background:rgba(153,27,27,.85); color:#fff; }
.sf-neg-tag  { background:rgba(22,163,74,.85);  color:#fff; }

/* Make · Model · Year · City */
.sf-meta {
  font-size:.84rem; color:rgba(255,255,255,.78);
  font-weight:500; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  text-shadow:0 1px 4px rgba(0,0,0,.4);
}
.sf-meta strong { color:white; font-weight:800; }

/* Spec chips — horizontally scrollable, frosted glass */
.sf-chips {
  display:flex; gap:5px;
  overflow-x:auto; scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.sf-chips::-webkit-scrollbar { display:none; }
.sf-chip {
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 11px; border-radius:100px;
  background:rgba(0,0,0,.45);
  /* No backdrop-filter — chips are tiny but each blur = GPU compositing cost */
  border:1px solid rgba(255,255,255,.15);
  font-size:.68rem; font-weight:700; color:white;
  white-space:nowrap; flex-shrink:0;
}

/* CTA buttons */
.sf-actions {
  display:flex; gap:8px;
}
.sf-btn {
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  height:42px; border-radius:12px;
  font-size:.84rem; font-weight:800;
  text-decoration:none; border:none; cursor:pointer;
  font-family:inherit;
  transition:filter .15s, transform .1s;
  -webkit-tap-highlight-color:transparent;
}
.sf-btn:active { transform:scale(.94); filter:brightness(.88); }
.sf-btn-view {
  background:white; color:var(--primary);
  box-shadow:0 2px 12px rgba(0,0,0,.25);
}
.sf-btn-msg {
  background:rgba(0,0,0,.5);
  /* No backdrop-filter on CTA button */
  border:1.5px solid rgba(255,255,255,.3);
  color:white;
}

/* Views badge (shown in sidebar) */
.sf-views-badge {
  display:flex; align-items:center; gap:4px;
  font-size:.6rem; font-weight:800;
  color:rgba(255,255,255,.8);
  text-shadow:0 1px 3px rgba(0,0,0,.6);
}

/* Right-edge progress dots */
.sf-dots {
  display:none;
  flex-direction:column; align-items:center; gap:5px;
  position:fixed; right:6px; top:50%; transform:translateY(-50%);
  z-index:450; pointer-events:none;
}
.sf-dot {
  width:4px; height:4px; border-radius:2px;
  background:rgba(128,128,128,.25);
  transition:opacity .2s ease, background .2s ease;
}
.sf-dot.active { height:18px; background:var(--primary); }

/* ── PULL-TO-REFRESH indicator ── */
.sf-ptr {
  display:none;
  position:fixed;
  top:104px; /* below navbar + filter bar */
  left:50%; transform:translateX(-50%) translateY(-72px);
  z-index:600;
  width:48px; height:48px;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1), opacity .2s;
  pointer-events:none;
  will-change:transform;
}
.sf-ptr-circle {
  width:48px; height:48px; border-radius:50%;
  background:var(--card);
  box-shadow:0 2px 16px rgba(0,0,0,.18);
  display:flex; align-items:center; justify-content:center;
}
.sf-ptr-spinner {
  width:22px; height:22px; border-radius:50%;
  border:2.5px solid var(--border);
  border-top-color:var(--primary);
  transition:transform .2s;
}
.sf-ptr.loading .sf-ptr-spinner {
  animation:sfPtrSpin .6s linear infinite;
}
@keyframes sfPtrSpin { to { transform:rotate(360deg); } }
.sf-ptr.ready .sf-ptr-spinner {
  border-top-color:var(--accent);
  transform:rotate(180deg);
}

/* Toast message after refresh */
.sf-ptr-toast {
  display:none;
  position:fixed;
  bottom:80px; left:50%; transform:translateX(-50%);
  z-index:700;
  background:var(--primary); color:#fff;
  padding:8px 20px; border-radius:20px;
  font-size:.8rem; font-weight:700;
  box-shadow:0 4px 16px rgba(0,0,0,.25);
  pointer-events:none;
  animation:sfToastIn .25s ease;
}
@keyframes sfToastIn { from{opacity:0;transform:translateX(-50%) translateY(8px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }

/* New cards slide-in from top */
.sf-card-new {
  animation:sfCardSlideIn .35s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes sfCardSlideIn {
  from { opacity:0; transform:translateY(-40px) scale(.96); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

/* Next-page end card */
.sf-end-card {
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:12px; text-align:center;
  background:var(--bg);
  padding:24px; height:100%;
}

/* ── ACTIVATE on mobile ── */
@media(max-width:768px){
  .sf-filter-bar { display:flex; }
  .sf-wrap       { display:block; }
  .sf-dots       { display:flex; }
  .hero, .feed-body { display:none !important; }
}

/* Tweak for very small phones */
@media(max-width:380px){
  .sf-price-num { font-size:1.1rem; }
  .sf-meta      { font-size:.76rem; }
  .sf-chip      { font-size:.62rem; padding:3px 7px; }
  .sf-btn       { height:36px; font-size:.78rem; }
}

/* Slide sizing — each slide is 100% of the track's viewport */
.ar-slide{
  flex-shrink:0;width:100%;height:100%;
  scroll-snap-align:start;scroll-snap-stop:always;
  position:relative;background:#111;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
/* Hide scrollbar in webkit */
#adReelTrack::-webkit-scrollbar{display:none;}
/* Chevron pulse animation */
@keyframes arPulse{0%,100%{transform:translateY(0)opacity:.6}50%{transform:translateY(-4px);opacity:1}}
#adReelChevron{animation:arPulse 1.4s ease infinite;}