@import url('/vendor/fonts/fonts.css');

:root {
  --color-bg: #F8F9FA;
  --color-surface: #FFFFFF;
  --color-surface-2: #F1F3F5;
  --color-primary: #1B4332;
  --color-primary-light: #2D6A4F;
  --color-primary-dark: #0D2B1D;
  --color-accent: #FF6B35;
  /* L'orange de marque tombe à 2,84:1 sous du texte blanc. Cette teinte plus
     dense atteint 5,2:1 : elle porte les surfaces qui reçoivent un libellé,
     l'orange d'origine reste pour les aplats décoratifs. */
  --color-accent-strong: #C2410C;
  --color-accent-2: #F4A261;
  /* Le vert précédent (#2DC653) échouait dans les deux sens : 2,25:1 en texte
     sur blanc comme en fond sous du blanc. Celui-ci passe 5:1 des deux côtés. */
  --color-success: #15803D;
  --color-warning: #F4A261;
  --color-danger: #B91C1C;
  --color-info: #4A90D9;
  --color-text: #1A1A2E;
  --color-text-muted: #6C757D;
  --color-text-light: #ADB5BD;
  --color-border: #DEE2E6;
  --color-border-light: #F1F3F5;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono: 'Space Grotesk', monospace;
  /* Échelle d'espacement, densité 4 sur 10 : ni serré comme un tableau de
     bord, ni aéré comme une page vitrine. Elle manquait entièrement. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --space-10: 64px;
  --space-12: 96px;
  /* Cible tactile minimale. Le public est sur téléphone, pouce sur l'écran. */
  --tap-min: 44px;
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.06);
  --shadow: 0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.15);
  --shadow-accent: 0 8px 32px rgba(255,107,53,0.25);
  --transition: 0.2s ease;
  --transition-bounce: 0.3s cubic-bezier(0.34,1.56,0.64,1);
  --navbar-height: 64px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

/* === FOCUS CLAVIER ===
   Aucune règle de focus n'existait : qui navigue au clavier ne savait pas où
   il se trouvait. :focus-visible ne se déclenche qu'au clavier, la souris ne
   fait donc apparaître aucun anneau. Le double liseré blanc garde l'anneau
   lisible aussi bien sur fond clair que sur le vert du hero. */
:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.hero :focus-visible,
.footer :focus-visible,
[class*="hero"] :focus-visible {
  outline-color: #fff;
}

/* === TYPOGRAPHY === */
h1, h2, h3, h4, h5, h6 { line-height: 1.3; font-weight: 700; }
h1 { font-size: clamp(1.8rem, 4vw, 3rem); font-family: var(--font-display); }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.4rem); }
p { margin-bottom: 1rem; }
a { color: var(--color-primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-accent); }

.text-muted { color: var(--color-text-muted); }
.text-small { font-size: 0.85rem; }
.text-xs { font-size: 0.75rem; }
.text-primary { color: var(--color-primary); }
.text-accent { color: var(--color-accent); }
.text-success { color: var(--color-success); }
.text-danger { color: var(--color-danger); }
.font-display { font-family: var(--font-display); }
.font-mono { font-family: var(--font-mono); }
.font-bold { font-weight: 700; }
.font-medium { font-weight: 500; }

/* Price formatting */
.price {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}
.price-large { font-size: 1.6rem; }
.price-accent { color: var(--color-accent-strong); }

/* === LAYOUT === */
.container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
.container-sm { max-width: 800px; margin: 0 auto; padding: 0 1rem; }
.section { padding: 3rem 0; }
.section-sm { padding: 1.5rem 0; }

.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-gap { display: flex; gap: 0.75rem; align-items: center; }
.flex-wrap { flex-wrap: wrap; }
.flex-col { flex-direction: column; }
.gap-sm { gap: 0.5rem; }
.gap { gap: 1rem; }
.gap-lg { gap: 1.5rem; }

/* === NAVBAR === */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,0.92);
  border-bottom: 1px solid rgba(222,226,230,0.6);
  height: var(--navbar-height);
  display: flex;
  align-items: center;
  box-shadow: 0 1px 12px rgba(0,0,0,0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  gap: 1rem;
}
.navbar-logo {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-primary);
  white-space: nowrap;
}
.navbar-logo span { color: var(--color-accent); }
.navbar-logo .brand-logo { height: 40px; width: auto; display: block; }
@media (max-width: 768px) { .navbar-logo .brand-logo { height: auto; max-height: 30px; max-width: 58vw; } }
.navbar-nav { display: flex; gap: 0.25rem; align-items: center; }
.navbar-link {
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-weight: 500;
  font-size: 0.9rem;
  transition: all var(--transition);
  white-space: nowrap;
}
.navbar-link:hover, .navbar-link.active { color: var(--color-primary); background: var(--color-surface-2); }
.navbar-actions { display: flex; gap: 0.5rem; align-items: center; }

/* === BUTTONS === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1.25rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  text-decoration: none;
  line-height: 1.2;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-sm { padding: 0.4rem 0.9rem; font-size: 0.82rem; }
.btn-lg { padding: 0.9rem 1.8rem; font-size: 1rem; }
.btn-xl { padding: 1.1rem 2.2rem; font-size: 1.1rem; border-radius: var(--radius-lg); }
.btn-block { width: 100%; }

.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--color-primary-light); transform: translateY(-1px); box-shadow: 0 4px 20px rgba(27,67,50,0.3); }

.btn-accent { background: var(--color-accent-strong); color: #fff; }
/* Le survol doit foncer, pas éclaircir : #e85d2a retombait à 3,5:1. */
.btn-accent:hover:not(:disabled) { background: #9A3412; transform: translateY(-1px); box-shadow: var(--shadow-accent); }

.btn-outline { background: transparent; border-color: var(--color-primary); color: var(--color-primary); }
.btn-outline:hover:not(:disabled) { background: var(--color-primary); color: #fff; }

.btn-outline-accent { background: transparent; border-color: var(--color-accent); color: var(--color-accent); }
.btn-outline-accent:hover:not(:disabled) { background: var(--color-accent-strong); color: #fff; }

.btn-ghost { background: transparent; color: var(--color-text-muted); border-color: transparent; }
.btn-ghost:hover:not(:disabled) { background: var(--color-surface-2); color: var(--color-text); }

.btn-danger { background: var(--color-danger); color: #fff; }
.btn-success { background: var(--color-success); color: #fff; }
.btn-surface { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }
.btn-surface:hover:not(:disabled) { background: var(--color-surface-2); }

.btn-whatsapp { background: #25D366; color: #fff; }
.btn-whatsapp:hover:not(:disabled) { background: #128C7E; }

.btn-icon { padding: 0.65rem; border-radius: var(--radius); }
.btn-icon-sm { padding: 0.4rem; border-radius: var(--radius-sm); }

/* === CIBLES TACTILES ===
   Mesuré à 375 px : ces commandes tombaient entre 23 et 37 px. On agrandit la
   zone sensible sans grossir le dessin, pour ne rien changer visuellement.
   Les liens en ligne dans une phrase sont exclus : la règle des 44 px ne les
   vise pas, et les étirer casserait le rythme du texte. */
.btn-icon,
.listing-card-favorite { min-width: var(--tap-min); min-height: var(--tap-min); }
.tab { min-height: var(--tap-min); }
.navbar-logo { display: inline-flex; align-items: center; min-height: var(--tap-min); }
footer a { display: inline-flex; align-items: center; min-height: var(--tap-min); }

/* Les commandes secondaires restent compactes à la souris, où la norme
   demande 24 px et non 44. Sur un écran tactile, y compris un portable
   tactile en 1440, elles reprennent la taille du doigt. */
@media (pointer: coarse) {
  .navbar-link,
  .btn-sm,
  .btn { min-height: var(--tap-min); }
  /* La case seule fait 18 px ; c'est le libellé qui est la vraie cible, et il
     plafonnait à 26 px. Idem pour la pagination, à 36 px. */
  .check-group,
  .toggle,
  .price-range-input { min-height: var(--tap-min); }
  .page-btn { min-width: var(--tap-min); min-height: var(--tap-min); }
  /* Fil d'Ariane et liens secondaires : 15 à 18 px de haut, intenables au
     pouce. On étire la zone sensible sans changer la taille du texte. */
  .breadcrumb a,
  a.text-xs { display: inline-flex; align-items: center; min-height: var(--tap-min); }
  /* Filtres de catégorie du mobilier (35 px), réponses rapides de l'assistant
     (29 px) et zoom de la carte (30 px) : cibles restées sous le seuil. */
  .cat-pill,
  .ai-quick-reply { min-height: var(--tap-min); }
  /* leaflet.css se charge après nos feuilles : à spécificité égale il gagnait.
     On passe donc au-dessus de son .leaflet-touch .leaflet-bar a. */
  .leaflet-touch .leaflet-bar a.leaflet-control-zoom-in,
  .leaflet-touch .leaflet-bar a.leaflet-control-zoom-out,
  .leaflet-bar a.leaflet-control-zoom-in,
  .leaflet-bar a.leaflet-control-zoom-out {
    width: var(--tap-min);
    height: var(--tap-min);
    line-height: var(--tap-min);
  }
}

/* === CARDS === */
.card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  overflow: hidden;
  transition: all var(--transition);
}
.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.card-body { padding: 1.25rem; }
.card-header { padding: 1.25rem 1.25rem 0; }
.card-footer { padding: 0 1.25rem 1.25rem; }
.card-shadow { box-shadow: var(--shadow); }
.card-no-hover:hover { transform: none; box-shadow: none; }

/* === LISTING CARD === */
.listing-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-light);
  overflow: hidden;
  transition: all 0.25s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.listing-card:hover {
  box-shadow: 0 16px 48px rgba(27,67,50,0.14);
  transform: translateY(-5px);
  border-color: rgba(27,67,50,0.12);
}
.listing-card:hover .listing-card-img img { transform: scale(1.06); }

.listing-card-img {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--color-surface-2);
}
.listing-card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.22) 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s;
}
.listing-card:hover .listing-card-img::after { opacity: 1; }
.listing-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.listing-card-img .no-photo {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: linear-gradient(145deg, #e8f0ec 0%, #d4e4db 50%, #c5d9ce 100%);
  font-size: 2.75rem;
  color: var(--color-primary);
}
/* Les deux opacités se multipliaient (0.55 × 0.7) et écrasaient le libellé à
   1.93:1 sur la fin du dégradé. On ne discrétise plus que le pictogramme. */
.listing-card-img .no-photo > svg { opacity: 0.55; }
.listing-card-img .no-photo span {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--font-body);
}
.listing-card-badges {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.listing-card-favorite {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
}
.listing-card-body { padding: 1rem 1.1rem; flex: 1; display: flex; flex-direction: column; }
.listing-card-price { margin-bottom: 0.3rem; color: var(--color-accent) !important; }
.listing-card-title {
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.45;
  margin-bottom: 0.4rem;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.listing-card-location {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.listing-card-meta {
  display: flex;
  gap: 0.6rem;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border-light);
}
.listing-card-meta span { display: flex; align-items: center; gap: 0.2rem; }

/* Horizontal listing card */
.listing-card-h {
  display: flex;
  flex-direction: row;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  overflow: hidden;
  transition: all var(--transition);
  cursor: pointer;
}
.listing-card-h:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.listing-card-h .listing-card-img { width: 200px; aspect-ratio: 4/3; flex-shrink: 0; }
.listing-card-h .listing-card-body { flex: 1; padding: 1rem; }

/* === BADGES === */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.22rem 0.65rem;
  border-radius: 100px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  white-space: nowrap;
  backdrop-filter: blur(4px);
}
.badge-available { background: rgba(21,128,61,0.14); color: var(--color-success); border: 1px solid rgba(45,198,83,0.25); }
.badge-rented { background: rgba(185,28,28,0.10); color: var(--color-danger); border: 1px solid rgba(185,28,28,0.2); }
.badge-reserved { background: rgba(244,162,97,0.22); color: #b36b00; }
.badge-verified { background: rgba(27,67,50,0.12); color: var(--color-primary); border: 1px solid rgba(27,67,50,0.15); }
.badge-featured { background: rgba(255,107,53,0.15); color: var(--color-accent); border: 1px solid rgba(255,107,53,0.2); }
.badge-furnished { background: rgba(244,162,97,0.22); color: #8B5E00; }
.badge-new { background: var(--color-accent-strong); color: #fff; box-shadow: 0 2px 8px rgba(255,107,53,0.3); }
.badge-premium { background: linear-gradient(135deg, #1B4332, #2D6A4F); color: #fff; box-shadow: 0 2px 8px rgba(27,67,50,0.3); }
.badge-fraud { background: rgba(230,57,70,0.1); color: var(--color-danger); border: 1px solid rgba(230,57,70,0.3); }
.badge-warning { background: rgba(244,162,97,0.2); color: #8B5E00; border: 1px solid rgba(244,162,97,0.4); }

/* Availability pulse */
.available-pulse::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--color-success);
  border-radius: 50%;
  margin-right: 0.4rem;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.3); }
}

/* === FORMS === */
.form-group { margin-bottom: 1.25rem; }
.form-label { display: block; font-weight: 500; font-size: 0.88rem; margin-bottom: 0.4rem; color: var(--color-text); }
.form-label.required::after { content: ' *'; color: var(--color-danger); }

.form-control {
  width: 100%;
  padding: 0.7rem 1rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
  background: var(--color-surface);
  transition: all var(--transition);
  appearance: none;
}
.form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(27,67,50,0.1);
}
.form-control:disabled { background: var(--color-surface-2); color: var(--color-text-muted); cursor: not-allowed; }
.form-control.error { border-color: var(--color-danger); }
textarea.form-control { resize: vertical; min-height: 120px; }
select.form-control { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236C757D' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }

.form-hint { font-size: 0.8rem; color: var(--color-text-muted); margin-top: 0.3rem; }
.form-error { font-size: 0.8rem; color: var(--color-danger); margin-top: 0.3rem; }

.input-group { display: flex; align-items: stretch; }
.input-group .form-control { border-radius: var(--radius) 0 0 var(--radius); flex: 1; }
.input-group .btn { border-radius: 0 var(--radius) var(--radius) 0; }
.input-icon { position: relative; }
.input-icon .form-control { padding-left: 2.75rem; }
.input-icon .icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); pointer-events: none; }

/* Custom checkbox / radio */
.check-group { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.check-group input { width: 18px; height: 18px; accent-color: var(--color-primary); cursor: pointer; }
.check-group label { cursor: pointer; font-size: 0.9rem; }

/* Toggle switch */
.toggle { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; }
.toggle input { display: none; }
.toggle-track {
  width: 44px;
  height: 24px;
  background: var(--color-border);
  border-radius: 100px;
  position: relative;
  transition: background var(--transition);
}
.toggle-track::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  top: 3px;
  left: 3px;
  transition: transform var(--transition);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle input:checked ~ .toggle-track { background: var(--color-primary); }
.toggle input:checked ~ .toggle-track::after { transform: translateX(20px); }

/* Range slider */
.range-slider { position: relative; padding: 0.5rem 0; }
input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  background: var(--color-border);
  border-radius: 2px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: var(--color-primary);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* === SEARCH BAR === */
.search-bar {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: var(--shadow-lg);
  border: 2px solid transparent;
  transition: border-color var(--transition);
}
.search-bar:focus-within { border-color: var(--color-primary); }
.search-bar .divider { width: 1px; height: 24px; background: var(--color-border); flex-shrink: 0; }
.search-bar .search-field { flex: 1; min-width: 0; }
.search-bar .search-field label { display: block; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin-bottom: 0.15rem; }
.search-bar .search-field input, .search-bar .search-field select {
  width: 100%;
  border: none;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  background: transparent;
  color: var(--color-text);
  appearance: none;
}

/* === TABS === */
.tabs { display: flex; gap: 0.25rem; border-bottom: 2px solid var(--color-border); margin-bottom: 1.5rem; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: 0.75rem 1.25rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition: all var(--transition);
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  font-family: var(--font-body);
}
.tab:hover { color: var(--color-primary); }
.tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }

/* === MAP MARKER === */
/* === RÉSUMÉ DE COURSE (déménageurs) ===
   Reprend les codes des applications de transport : le trajet en points
   reliés, puis les chiffres qui décident (distance, durée, prix). */
.course-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 1rem 1.1rem;
  margin-top: 0.75rem;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 14px rgba(16, 24, 40, .06);
}
.course-loading { font-size: 0.88rem; color: var(--color-text-muted); }

.course-points { display: flex; flex-direction: column; gap: 0; }
.course-point { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; }
.course-puce { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.course-puce-depart { background: var(--color-primary); }
.course-puce-arrivee { background: var(--color-accent); }
/* Le trait qui relie départ et arrivée, aligné sur le centre des puces */
.course-ligne {
  width: 2px;
  height: 18px;
  margin-left: 4px;
  background: repeating-linear-gradient(to bottom, var(--color-border) 0 3px, transparent 3px 6px);
}

.course-mesures {
  display: flex;
  gap: 1.5rem;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--color-border);
  flex-wrap: wrap;
}
.course-mesures > div { display: flex; flex-direction: column; }
.course-mesures strong { font-size: 1.05rem; font-weight: 700; color: var(--color-text); }
.course-mesures span { font-size: 0.75rem; color: var(--color-text-muted); }
.course-note { margin-top: 0.6rem; font-size: 0.75rem; color: var(--color-text-muted); }

/* === PASTILLE VIDÉO SUR UNE CARTE D'ANNONCE ===
   Signale qu'une vidéo existe. Seule la vignette est chargée dans les listes ;
   la vidéo elle-même ne se charge qu'au clic, sur la fiche. */
.listing-video-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .3);
  transition: transform .2s ease, background .2s ease;
}
.listing-card:hover .listing-video-badge { background: rgba(0, 0, 0, .7); transform: translate(-50%, -50%) scale(1.08); }
.listing-video-badge .lb-icon { margin-right: 0; margin-left: 3px; }

/* === ICÔNES SVG (js/icons.js) ===
   Une icône posée sur la ligne de base occupe tout le haut de la ligne et
   paraît remonter par rapport au texte. On la redescend d'un cran et on
   l'espace du mot qui suit. Valeurs en em : l'icône suit la taille du texte. */
.lb-icon {
  vertical-align: -0.22em;
  margin-right: 0.4em;
  flex-shrink: 0;
}
/* Boutons réduits à une icône : pas d'espace à droite.
   Ne pas utiliser :only-child, qui ignore les nœuds texte et priverait de
   marge toute icône suivie d'un simple libellé, soit le cas le plus courant. */
.btn-icon .lb-icon,
.fab-icon .lb-icon,
.ai-btn .lb-icon,
.ai-avatar .lb-icon { margin-right: 0; }

/* Notation : un seul tracé d'étoile, rempli ou non selon l'état. Ici plein
   contre contour porte le sens (acquise ou non), ce n'est donc pas le mélange
   de styles que proscrit la règle. */
.lb-icon-fill { fill: currentColor; }
.lb-stars { display: inline-flex; align-items: center; gap: 1px; }
.lb-stars .lb-icon { margin-right: 0; }

.map-marker {
  background: var(--color-primary);
  color: #fff;
  padding: 0.25rem 0.6rem;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 700;
  font-family: var(--font-mono);
  white-space: nowrap;
  box-shadow: var(--shadow);
  border: 2px solid #fff;
  cursor: pointer;
  transition: all var(--transition);
}
.map-marker:hover, .map-marker.active { background: var(--color-accent); transform: scale(1.1); }
.map-marker.available { background: var(--color-success); }

/* === FLOATING ACTION BUTTON (FAB) === */
#pro-fab {
  position: fixed;
  bottom: 1.75rem;
  right: 1.75rem;
  z-index: 900;
}
.fab-btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.4rem;
  border-radius: 50px;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 6px 24px rgba(0,0,0,0.22);
  transition: all 0.2s cubic-bezier(0.34,1.56,0.64,1);
  white-space: nowrap;
  max-width: 260px;
}
.fab-btn:hover { color: #fff; transform: translateY(-3px) scale(1.03); box-shadow: 0 10px 32px rgba(0,0,0,0.28); }
.fab-icon { font-size: 1.2rem; flex-shrink: 0; }
.fab-label { overflow: hidden; max-width: 180px; }

@media (max-width: 480px) {
  /* Sur très petit écran : FAB compact (icône seule) */
  #pro-fab { bottom: 1.25rem; right: 1.25rem; }
  .fab-btn { padding: 1rem; border-radius: 50%; width: 56px; height: 56px; justify-content: center; }
  .fab-label { display: none; }
  .fab-icon { font-size: 1.5rem; }
}

/* === TOAST === */
.toast-container { position: fixed; top: calc(var(--navbar-height) + 1rem); right: 1rem; z-index: 9999; display: flex; flex-direction: column; gap: 0.5rem; }
.toast {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 360px;
  font-size: 0.9rem;
  animation: slideIn 0.3s ease;
  border-left: 4px solid var(--color-primary);
}
.toast.success { border-left-color: var(--color-success); }
.toast.error { border-left-color: var(--color-danger); }
.toast.warning { border-left-color: var(--color-warning); }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } }

/* === SKELETON === */
.skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius); }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skeleton-text { height: 1em; margin: 0.3rem 0; }
.skeleton-text.w-75 { width: 75%; }
.skeleton-text.w-50 { width: 50%; }
.skeleton-img { aspect-ratio: 4/3; }

/* === MODAL === */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: fadeIn 0.2s ease;
}
.modal {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp 0.3s ease;
}
.modal-header { padding: 1.5rem 1.5rem 0; display: flex; align-items: center; justify-content: space-between; }
.modal-body { padding: 1.5rem; }
.modal-footer { padding: 0 1.5rem 1.5rem; display: flex; gap: 0.75rem; justify-content: flex-end; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* === SIDEBAR === */
.sidebar {
  width: 280px;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  height: 100%;
  overflow-y: auto;
  flex-shrink: 0;
}
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  margin: 0.15rem 0.5rem;
  cursor: pointer;
  color: var(--color-text-muted);
  font-weight: 500;
  font-size: 0.9rem;
  transition: all var(--transition);
  text-decoration: none;
}
.sidebar-item:hover, .sidebar-item.active { background: rgba(27,67,50,0.08); color: var(--color-primary); }
.sidebar-item .icon { font-size: 1.1rem; width: 24px; text-align: center; }

/* === DASHBOARD LAYOUT === */
.dashboard-layout { display: flex; min-height: calc(100vh - var(--navbar-height)); }
.dashboard-content { flex: 1; overflow-x: hidden; padding: 1.5rem; }

/* === STATS CARD === */
.stat-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  border: 1px solid var(--color-border);
}
.stat-card .stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 1rem;
}
.stat-card .stat-value { font-size: 2rem; font-weight: 700; font-family: var(--font-mono); line-height: 1.2; }
.stat-card .stat-label { color: var(--color-text-muted); font-size: 0.85rem; margin-top: 0.25rem; }
.stat-card .stat-change { font-size: 0.8rem; font-weight: 600; margin-top: 0.5rem; }
.stat-card .stat-change.up { color: var(--color-success); }
.stat-card .stat-change.down { color: var(--color-danger); }

/* === PAGINATION === */
.pagination { display: flex; gap: 0.35rem; align-items: center; justify-content: center; }
.page-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.page-btn.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.page-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* === CHIPS / TAGS === */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.7rem;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 500;
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  white-space: nowrap;
}
.chip-primary { background: rgba(27,67,50,0.08); color: var(--color-primary); border-color: rgba(27,67,50,0.2); }
.chip-accent { background: rgba(255,107,53,0.1); color: var(--color-accent); border-color: rgba(255,107,53,0.25); }
.chip-success { background: rgba(45,198,83,0.1); color: var(--color-success); border-color: rgba(45,198,83,0.25); }

/* === FEATURE CHIPS === */
.features-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.feature-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.75rem;
  border-radius: 100px;
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  font-size: 0.8rem;
  font-weight: 500;
}

/* === AVATAR === */
.avatar {
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-surface-2);
  flex-shrink: 0;
}
.avatar-sm { width: 32px; height: 32px; }
.avatar-md { width: 48px; height: 48px; }
.avatar-lg { width: 64px; height: 64px; }
.avatar-xl { width: 96px; height: 96px; }
.avatar-initials {
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85em;
}

/* === RATING STARS === */
.stars { color: #F4A261; letter-spacing: 0.1em; }
.stars-empty { color: var(--color-border); }

/* === STEP WIZARD ===
   Une piste unique découpée en segments. Numéro au-dessus, titre en dessous,
   dans le même cadre. Un segment franchi reste vert, dans un vert plus clair
   que celui de l'étape en cours. */
.wizard-steps {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--color-surface-2, #F1F4F6);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  margin-bottom: 2rem;
}
.wizard-step {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 0.5rem 0.35rem 0.55rem;
  border-radius: 10px;
  color: var(--color-text-muted);
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.wizard-step-num {
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.3;
  /* À 0.7, le chiffre tombait à 2.81:1 sur une étape à venir et 4.06:1 sur une
     étape faite. L'affichage étroit passait déjà à 1 ; on aligne le large. */
  opacity: 1;
}
.wizard-step-label {
  font-size: 0.82rem;
  font-weight: 600;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wizard-step.done { background: var(--color-primary-light); color: #fff; }
.wizard-step.active {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 2px 10px rgba(27, 67, 50, 0.28);
}

/* Cinq intitulés ne tiennent pas sur un écran étroit. Seule l'étape en cours
   garde son titre ; les autres gardent leur chiffre, qui suffit à se repérer. */
@media (max-width: 680px) {
  .wizard-steps { gap: 2px; padding: 3px; border-radius: 12px; }
  .wizard-step { padding: 0.55rem 0.2rem; }
  .wizard-step-num { font-size: 0.86rem; opacity: 1; }
  .wizard-step .wizard-step-label { display: none; }
  .wizard-step.active { flex-grow: 3.2; padding: 0.45rem 0.3rem 0.5rem; }
  .wizard-step.active .wizard-step-num { font-size: 0.7rem; opacity: 0.7; }
  .wizard-step.active .wizard-step-label { display: block; font-size: 0.76rem; }
}

/* === DROPZONE === */
.dropzone {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
  background: var(--color-surface-2);
}
.dropzone:hover, .dropzone.drag-over { border-color: var(--color-primary); background: rgba(27,67,50,0.04); }
.dropzone .drop-icon { font-size: 2.5rem; margin-bottom: 1rem; }
.dropzone .drop-text { color: var(--color-text-muted); }

/* === CHAT === */
.chat-bubble {
  max-width: 75%;
  padding: 0.65rem 1rem;
  border-radius: var(--radius-lg);
  font-size: 0.9rem;
  line-height: 1.5;
  word-break: break-word;
}
.chat-bubble.sent { background: var(--color-primary); color: #fff; border-bottom-right-radius: 4px; margin-left: auto; }
.chat-bubble.received { background: var(--color-surface-2); color: var(--color-text); border-bottom-left-radius: 4px; }
.chat-time { font-size: 0.7rem; color: var(--color-text-muted); }
.chat-tick { font-size: 0.7rem; }
.chat-tick.read { color: var(--color-accent); }

/* === ESCROW STATUS === */
.escrow-status {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: var(--radius);
  background: rgba(45,198,83,0.08);
  border: 1px solid rgba(45,198,83,0.2);
}
.escrow-icon { font-size: 1.5rem; }
.escrow-info h4 { font-size: 0.9rem; margin-bottom: 0.15rem; }
.escrow-info p { font-size: 0.8rem; color: var(--color-text-muted); margin: 0; }

/* === MOVER CARD === */
.mover-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  overflow: hidden;
  transition: all var(--transition);
}
.mover-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.mover-card-header { padding: 1.25rem 1.25rem 0; display: flex; align-items: flex-start; gap: 1rem; }
.mover-card-vehicle { padding: 0.75rem 1.25rem; background: var(--color-surface-2); display: flex; align-items: center; gap: 0.75rem; font-size: 0.88rem; }
.mover-card-body { padding: 1rem 1.25rem; }
.mover-card-footer { padding: 0 1.25rem 1.25rem; display: flex; gap: 0.75rem; }

/* === HERO === */
.hero {
  background: linear-gradient(150deg, var(--color-primary-dark) 0%, #1B4332 45%, #2D6A4F 100%);
  color: #fff;
  padding: 4.5rem 1rem 3.5rem;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 85% 20%, rgba(255,107,53,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 10% 80%, rgba(45,106,79,0.4) 0%, transparent 55%),
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.025'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.hero-content { position: relative; max-width: 820px; margin: 0 auto; text-align: center; }
.hero h1 { color: #fff; margin-bottom: 0.75rem; text-shadow: 0 2px 12px rgba(0,0,0,0.25); letter-spacing: -0.01em; }
.hero p { color: rgba(255,255,255,0.8); font-size: 1.05rem; margin-bottom: 2rem; }
.hero-counter {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255,255,255,0.12);
  padding: 0.45rem 1.2rem;
  border-radius: 100px;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.15);
  margin-bottom: 1.75rem;
  letter-spacing: 0.01em;
}

/* === CONFETTI === */
.confetti-particle {
  position: fixed;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  animation: confettiFall 3s ease-out forwards;
  pointer-events: none;
  z-index: 9999;
}
@keyframes confettiFall {
  0% { transform: translateY(-100px) rotateZ(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotateZ(720deg); opacity: 0; }
}

/* === SECTION HEADERS === */
.section-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.75rem; }
.section-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.section-title::after {
  content: '';
  display: block;
  width: 24px;
  height: 3px;
  background: var(--color-accent);
  border-radius: 2px;
  margin-left: 0.1rem;
}
.section-subtitle { color: var(--color-text-muted); font-size: 0.875rem; margin-top: 0.2rem; }

/* === PARTNER CARD === */
.partner-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: all var(--transition);
  cursor: pointer;
}
.partner-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.partner-logo {
  width: 56px;
  height: 56px;
  border-radius: var(--radius);
  object-fit: cover;
  background: var(--color-surface-2);
}

/* === ALERT === */
.alert {
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  border: 1px solid;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9rem;
}
.alert-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.alert-info { background: rgba(74,144,217,0.08); border-color: rgba(74,144,217,0.25); color: #1e5a9c; }
.alert-success { background: rgba(45,198,83,0.08); border-color: rgba(45,198,83,0.25); color: #1a7a35; }
.alert-warning { background: rgba(244,162,97,0.12); border-color: rgba(244,162,97,0.4); color: #8B5E00; }
.alert-danger { background: rgba(230,57,70,0.08); border-color: rgba(230,57,70,0.25); color: var(--color-danger); }

/* === UTIL === */
.d-none { display: none !important; }
.d-flex { display: flex !important; }
.d-block { display: block !important; }
.invisible { visibility: hidden; }
@media (min-width: 768px) {
  .d-md-block { display: block !important; }
  .d-md-flex { display: flex !important; }
  .d-md-none { display: none !important; }
}
.relative { position: relative; }
.overflow-hidden { overflow: hidden; }
.rounded { border-radius: var(--radius); }
.rounded-full { border-radius: 100px; }
.border { border: 1px solid var(--color-border); }
.bg-surface { background: var(--color-surface); }
.bg-surface-2 { background: var(--color-surface-2); }
.bg-primary { background: var(--color-primary); }
.bg-accent { background: var(--color-accent); }
.p-0 { padding: 0 !important; }
.p-1 { padding: 0.5rem; }
.p-2 { padding: 1rem; }
.p-3 { padding: 1.5rem; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.5rem !important; }
.mb-2 { margin-bottom: 1rem !important; }
.mb-3 { margin-bottom: 1.5rem !important; }
.mt-1 { margin-top: 0.5rem !important; }
.mt-2 { margin-top: 1rem !important; }
.mt-3 { margin-top: 1.5rem !important; }
.w-100 { width: 100%; }
.h-100 { height: 100%; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.ml-auto { margin-left: auto; }
.opacity-50 { opacity: 0.5; }

/* === DASHBOARD (sidebar + sections, utilisé par dashboard-owner & admin) === */
.dashboard-sidebar {
  width: 260px; flex-shrink: 0;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  display: flex; flex-direction: column;
  position: sticky; top: var(--navbar-height);
  height: calc(100vh - var(--navbar-height));
  overflow-y: auto;
  padding: 1.25rem 0.85rem;
}
.dashboard-sidebar-header {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0 0.5rem 1.1rem; margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-border);
}
.dashboard-nav { display: flex; flex-direction: column; gap: 0.15rem; }
.dashboard-nav-item {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.6rem 0.85rem; border-radius: 8px;
  font-size: 0.875rem; color: var(--color-text-muted);
  text-decoration: none; cursor: pointer;
  transition: all 0.15s; border: none; background: none;
  font-family: inherit; text-align: left;
}
.dashboard-nav-item:hover { background: var(--color-surface-2); color: var(--color-text); }
.dashboard-nav-item.active { background: #e8f5e9; color: var(--color-primary); font-weight: 600; }
.dashboard-main { flex: 1; padding: 1.75rem; overflow-x: hidden; background: var(--color-background); }
.dashboard-section-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem;
}
.dashboard-title { font-size: 1.35rem; font-weight: 700; margin: 0; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }

/* Dashboard responsive : sidebar → barre horizontale défilante en haut */
@media (max-width: 900px) {
  .dashboard-layout { flex-direction: column; }
  .dashboard-sidebar {
    width: 100%; height: auto; position: sticky; top: var(--navbar-height);
    z-index: 50; flex-direction: row; align-items: center;
    padding: 0.4rem 0.5rem; border-right: none;
    border-bottom: 1px solid var(--color-border);
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .dashboard-sidebar::-webkit-scrollbar { display: none; }
  .dashboard-sidebar-header { display: none !important; }
  .dashboard-sidebar > div { margin-top: 0 !important; padding-top: 0 !important; border-top: none !important; display: flex; }
  .dashboard-nav { flex-direction: row; gap: 0.25rem; min-width: max-content; }
  .dashboard-nav-item { white-space: nowrap; padding: 0.45rem 0.8rem; border-radius: 20px; font-size: 0.82rem; background: var(--color-surface-2); }
  .dashboard-nav-item.active { background: var(--color-primary); color: #fff; }
  .dashboard-main { padding: 1rem 0.85rem; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .stat-card .stat-value { font-size: 1.35rem; }
  .dashboard-section-header { margin-bottom: 1rem; }
  .dashboard-title { font-size: 1.15rem; }
  /* Grilles 2 colonnes inline → 1 colonne */
  .dashboard-main div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
}

/* === SCROLLBAR === */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--color-surface-2); }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-2-sm { grid-template-columns: repeat(2, 1fr); }
  .sidebar { display: none; }
  .sidebar.open { display: block; position: fixed; top: 0; left: 0; bottom: 0; z-index: 500; width: 280px; box-shadow: var(--shadow-lg); }
  .listing-card-h { flex-direction: column; }
  .listing-card-h .listing-card-img { width: 100%; }
  .dashboard-content { padding: 1rem; }
  .hero { padding: 3rem 1rem 2rem; }
  .search-bar { flex-direction: column; border-radius: var(--radius-lg); }
  .search-bar .divider { display: none; }
  .modal { border-radius: var(--radius-lg) var(--radius-lg) 0 0; margin: auto 0 0; max-height: 85vh; }
  .modal-overlay { align-items: flex-end; padding: 0; }

  /* Navbar mobile : masquer les boutons texte, garder icônes + hamburger */
  .navbar-actions .btn-sm { display: none; }
  .navbar-actions .btn-accent { display: none; }

  /* Menu hamburger : liens de navigation */
  .navbar-nav { display: none; }
  .navbar-nav.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: var(--navbar-height);
    left: 0; right: 0;
    background: var(--color-surface);
    padding: 1rem;
    box-shadow: var(--shadow);
    border-bottom: 1px solid var(--color-border);
    z-index: 200;
  }
  .navbar-nav.open .navbar-link { padding: 0.75rem 1rem; font-size: 1rem; min-height: 44px; }

  /* Actions mobile dans le menu déroulant */
  #mobile-nav-auth { display: flex; flex-direction: column; gap: 0.25rem; }
  #mobile-nav-auth .navbar-link { min-height: 44px; }
  .mobile-nav-divider { height: 1px; background: var(--color-border); margin: 0.5rem 0; }

  /* Hero search : empiler les champs sur mobile */
  #hero-search { grid-template-columns: 1fr !important; }
  #hero-tabs { flex-wrap: wrap; gap: 0.25rem; }
  #hero-tabs .tab { font-size: 0.8rem; padding: 0.4rem 0.6rem; flex: 1; min-width: 80px; text-align: center; }

  /* Sections grilles adaptées */
  .section-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; }

  /* Formulaires : champs pleine largeur */
  .form-row { flex-direction: column; }
  input, select, textarea, .form-control { min-height: 44px; font-size: 16px; /* évite zoom iOS */ }
  .btn { min-height: 44px; }
}

/* Sur desktop, masquer le bloc mobile-auth injecté */
@media (min-width: 769px) {
  #mobile-nav-auth { display: none; }
}

@media (min-width: 480px) {
  .grid-sm-2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .container { padding: 0 1.5rem; }
  .grid-md-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-md-3 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .grid-lg-4 { grid-template-columns: repeat(4, 1fr); }
}

/* === SELECTOR CARDS (publish wizard type/transaction pickers) === */
/* Scope to publish form only to avoid affecting hero/search tabs */
#publish-form [data-type],
#publish-form [data-transaction] {
  border: 2px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  transition: all 0.2s ease !important;
  position: relative;
}
#publish-form [data-type]:hover,
#publish-form [data-transaction]:hover {
  border-color: var(--color-primary-light) !important;
  background: rgba(27,67,50,0.04) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(27,67,50,0.12) !important;
}
#publish-form [data-type].selected,
#publish-form [data-transaction].selected {
  border-color: var(--color-primary) !important;
  background: rgba(27,67,50,0.06) !important;
  box-shadow: 0 4px 16px rgba(27,67,50,0.15) !important;
}
#publish-form [data-type].selected::after,
#publish-form [data-transaction].selected::after {
  content: '✓';
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-primary);
  background: rgba(27,67,50,0.1);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: block;
  line-height: 18px;
  text-align: center;
}

/* === SEARCH FILTER SIDEBAR SECTION LABELS === */
.search-page-layout { display: flex; min-height: calc(100vh - var(--navbar-height)); }
.search-filters {
  width: 272px;
  flex-shrink: 0;
  padding: 1.25rem 1rem;
  border-right: 1px solid var(--color-border-light);
  background: var(--color-surface);
  overflow-y: auto;
}
/* Sous 768 px, #filters-sidebar était simplement masqué : la recherche mobile
   se faisait sans aucun filtre, ville et budget compris. Le même formulaire
   est réutilisé en tiroir plein écran. */
.filters-drawer-head { display: none; }
@media (max-width: 767px) {
  #filters-sidebar.filters-open {
    display: block !important;
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    width: auto;
    border-right: none;
    z-index: 1200;
    overflow-y: auto;
  }
  #filters-sidebar.filters-open .filters-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--color-surface);
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
  }
  .filters-backdrop {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(16, 24, 40, 0.5);
    z-index: 1199;
  }
}
.filter-section { margin-bottom: 1.5rem; }
.filter-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border-light);
}

/* === PRICE / ACCENT OVERRIDE ON CARDS === */
.listing-card-price.price { color: var(--color-accent) !important; }

/* === SUBTLE HOVER LINK COLOR === */
.navbar-link { position: relative; }
.navbar-link.active {
  color: var(--color-primary) !important;
  background: rgba(27,67,50,0.07) !important;
}
.navbar-link.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
}

/* === LISTING DETAIL PAGE POLISH === */
.listing-image-gallery {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.contact-sidebar-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-light);
  box-shadow: 0 4px 20px rgba(0,0,0,0.07);
  overflow: hidden;
}