/* ════════════════════════════════════════
   BACK TO TOP BUTTON
════════════════════════════════════════ */
.back-to-top {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--black);
  color: var(--white);
  font-size: 14px;
  font-weight: var(--fw-medium);
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease;
  z-index: 90;
  cursor: pointer;
  border: none;
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.back-to-top svg { width: 16px; height: 16px; }

/* ════════════════════════════════════════
   CHAT WIDGET (bottom right – Intercom style)
════════════════════════════════════════ */
/* Chat widget removed globally. */

/* ── Back to top (version inline dans footer) ── */
.back-to-top-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--black);
  color: var(--white);
  font-size: 14px;
  font-weight: var(--fw-medium);
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  transition: opacity var(--transition);
}
.back-to-top-inline:hover { opacity: 0.8; }

/* Supprimer l'ancien back-to-top flottant si encore présent */
.back-to-top { display: none !important; }


/* ════════════════════════════════════════════════════════════
   MOBILE SEARCH BAR ROW — input + bouton Filter + bouton Sort
   Ces boutons sont CACHÉS en desktop (display:none), visibles
   uniquement sous 1100px. En desktop, le bouton Sort original
   (.btn-sort dans results-bar) reste géré par main.css existant
   du projet (search bar / results bar), inchangé.
════════════════════════════════════════════════════════════ */

/* Bouton "Filter" — visible uniquement mobile, à côté de la search bar.
   Icône seule (pas de texte) comme sur le site original en mobile. */
.btn-filter-mobile {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  width: 44px;
  padding: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
  background: var(--bg-white);
  color: var(--black);
  font-size: 14px;
  font-weight: var(--fw-medium);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-filter-mobile svg { width: 18px; height: 18px; flex-shrink: 0; }
/* Le texte "Filter" est masqué en mobile — icône seule, comme l'original */
.btn-filter-mobile span { display: none; }

/* Bouton "Sort" mobile — même style, icône seule */
.btn-sort-mobile {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  width: 44px;
  padding: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
  background: var(--bg-white);
  color: var(--black);
  font-size: 14px;
  font-weight: var(--fw-medium);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
}
.btn-sort-mobile svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-sort-mobile span { display: none; }

/* Rangée search + filter + sort en mobile.
   min-width:0 sur tous les enfants flex est CRITIQUE : sans ça, un
   input ou un texte trop long force le flex item à dépasser sa
   largeur allouée et fait scroller toute la page horizontalement. */
.search-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
.search-bar-row .search-bar-wrap {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}
.search-bar-row .search-bar-wrap .search-bar {
  min-width: 0;
}
.search-bar-row .search-bar-wrap .search-bar input {
  min-width: 0;
}
/* Le wrapper position:relative du bouton Sort (contient le dropdown)
   ne doit pas non plus pousser en largeur */
.search-bar-row > div[style*="position:relative"] {
  flex-shrink: 0;
}

/* Le bouton Sort desktop (dans .results-bar) doit disparaître en mobile
   puisqu'il est remplacé par .btn-sort-mobile dans la search row. */
@media (max-width: 1100px) {
  .results-bar .btn-sort { display: none; }
  .btn-filter-mobile,
  .btn-sort-mobile {
    display: flex;
  }
}


/* ════════════════════════════════════════
   RESPONSIVE — LAYOUT GÉNÉRAL
════════════════════════════════════════ */

/* Empêche tout débordement horizontal global, quelle que soit
   la largeur d'écran (cause la plus fréquente de "page qui scroll
   sur le côté" sur mobile). */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Tablet: 2 columns */
@media (max-width: 1100px) {
  .page-wrapper {
    padding: 0 var(--space-md);
    gap: var(--space-md);
    max-width: 100%;
  }
  :root { --sidebar-w: 220px; }
  .cars-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile: 1 column */
@media (max-width: 768px) {
  .page-wrapper {
    flex-direction: column;
    padding: 0 var(--space-md);
    width: 100%;
    max-width: 100%;
  }

  /* main-content doit pouvoir rétrécir sous sa largeur de contenu
     naturelle, sinon il pousse .page-wrapper plus large que l'écran */
  .main-content {
    min-width: 0;
    width: 100%;
  }

  /* NOTE : .sidebar n'est PAS remise en position:static ici —
     filters.css la transforme en drawer fixed plein écran sous
     1100px ; on ne doit pas contredire cette règle, sinon le
     drawer "Filters" ne peut plus s'afficher en overlay. */

  .cars-grid { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .link-grid { grid-template-columns: 1fr; }

  .link-section { padding: var(--space-md); }

  .search-bar-row { gap: 6px; }
}

@media (max-width: 480px) {
  .btn-filter-mobile,
  .btn-sort-mobile {
    width: 40px;
    height: 40px;
  }
}