/* ══════════════════════════════════════════════════════════════════════════
   Sen Keur Market — Design System v2.0
   Sprint UX/UI — Phase 1
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. DESIGN TOKENS ─────────────────────────────────────────────────────── */
:root {
  --km-primary:        #27AE60;
  --km-primary-dark:   #1e8449;
  --km-primary-light:  #d1fae5;
  --km-primary-muted:  rgba(39,174,96,.08);
  --km-secondary:      #2980B9;
  --km-secondary-dark: #1a5276;
  --km-cta:            #E8651A;
  --km-cta-dark:       #c45414;
  --km-dark:           #1a1a2e;
  --km-dark-secondary: #262640;
  --km-surface:        #ffffff;
  --km-bg:             #f4f7f4;
  --km-border:         #e2e8e2;
  --km-text:           #1a1a2e;
  --km-text-muted:     #6b7a7b;
  --km-text-light:     #9eadb0;

  --r-xs:   6px;
  --r-sm:   10px;
  --r-base: 12px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-pill: 50px;

  --shadow-xs:      0 1px 3px rgba(0,0,0,.05);
  --shadow-sm:      0 2px 8px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.04);
  --shadow-md:      0 4px 16px rgba(0,0,0,.09), 0 2px 6px rgba(0,0,0,.05);
  --shadow-lg:      0 8px 32px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06);
  --shadow-xl:      0 16px 48px rgba(0,0,0,.14), 0 6px 18px rgba(0,0,0,.07);
  --shadow-primary: 0 4px 20px rgba(39,174,96,.25);

  --t-fast: 150ms ease;
  --t-base: 220ms ease;
  --t-slow: 360ms ease;
}

/* ── 2. BASE ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--km-bg);
  color: var(--km-text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
table { table-layout: auto; }

/* ── 3. LAYOUT ────────────────────────────────────────────────────────────── */
@media (min-width: 1600px) {
  .container, .container-xl, .container-xxl { max-width: 1560px !important; }
}

/* ── 4. NAVBAR ────────────────────────────────────────────────────────────── */
.navbar { border-bottom: 1px solid rgba(0,0,0,.05); }
.navbar-brand { padding-top: 6px; padding-bottom: 6px; }
.navbar-brand img { height: 72px; width: auto; max-width: 100%; transition: opacity var(--t-fast); }
.navbar-brand img:hover { opacity: .85; }
.navbar-brand .brand-fallback { font-weight: 900; font-size: 1.6rem; letter-spacing: -.5px; display: none; }
.navbar-brand .brand-fallback .keur { color: var(--km-primary); }
.navbar-brand .brand-fallback .market { color: var(--km-dark); }

.nav-link {
  color: #444;
  border-radius: var(--r-sm);
  transition: color var(--t-fast), background var(--t-fast);
}
.nav-link:hover { color: var(--km-primary) !important; background: var(--km-primary-muted); }
.nav-link.active, .nav-link[aria-current="page"] { color: var(--km-primary) !important; font-weight: 600; }

/* ── 5. BRAND UTILITIES ───────────────────────────────────────────────────── */
.text-primary { color: var(--km-primary) !important; }
.bg-primary-km { background-color: var(--km-primary) !important; }
.border-primary { border-color: var(--km-primary) !important; }

/* ── 6. BUTTONS ───────────────────────────────────────────────────────────── */
.btn {
  font-weight: 600;
  letter-spacing: .01em;
  border-radius: var(--r-sm) !important;
  transition: all var(--t-base);
}
.btn:active { transform: scale(.97) !important; }

.btn-primary {
  background-color: var(--km-primary) !important;
  border-color: var(--km-primary) !important;
  color: #fff !important;
}
.btn-primary:hover {
  background-color: var(--km-primary-dark) !important;
  border-color: var(--km-primary-dark) !important;
  box-shadow: var(--shadow-primary) !important;
  transform: translateY(-1px);
}
.btn-primary:focus { box-shadow: 0 0 0 .2rem rgba(39,174,96,.3) !important; }

.btn-outline-primary {
  color: var(--km-primary) !important;
  border-color: var(--km-primary) !important;
}
.btn-outline-primary:hover {
  background-color: var(--km-primary) !important;
  color: #fff !important;
}

.btn-cta {
  background-color: var(--km-cta) !important;
  border-color: var(--km-cta) !important;
  color: #fff !important;
}
.btn-cta:hover {
  background-color: var(--km-cta-dark) !important;
  border-color: var(--km-cta-dark) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(232,101,26,.3) !important;
}
.btn-cta:focus, .btn-cta:active {
  background-color: var(--km-cta-dark) !important;
  border-color: var(--km-cta-dark) !important;
  box-shadow: 0 0 0 .25rem rgba(232,101,26,.35) !important;
}

/* ── 7. FORMS ─────────────────────────────────────────────────────────────── */
.form-control, .form-select {
  border-radius: var(--r-sm) !important;
  border-color: var(--km-border);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.form-control:focus, .form-select:focus {
  border-color: var(--km-primary) !important;
  box-shadow: 0 0 0 .2rem rgba(39,174,96,.15) !important;
}
.input-group-text { border-color: var(--km-border); background: #f8faf8; }
.form-label { font-weight: 600; font-size: .875rem; }

/* ── 8. TRANSACTION BADGES ────────────────────────────────────────────────── */
.badge-vente    { background-color: #198754 !important; }
.badge-location { background-color: #0d6efd !important; }
.badge-colocation { background-color: #fd7e14 !important; }

/* ── 9. LISTING CARDS ─────────────────────────────────────────────────────── */
.listing-card {
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
  border: 1px solid var(--km-border) !important;
  border-radius: var(--r-md) !important;
  overflow: hidden;
  background: var(--km-surface);
  position: relative;
  animation: fadeInUp .38s ease both;
  box-shadow: var(--shadow-sm);
}
.listing-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(39,174,96,.15) !important;
  border-color: rgba(39,174,96,.40) !important;
}
.listing-card:nth-child(2) { animation-delay: .05s; }
.listing-card:nth-child(3) { animation-delay: .10s; }
.listing-card:nth-child(4) { animation-delay: .15s; }
.listing-card:nth-child(5) { animation-delay: .20s; }
.listing-card:nth-child(6) { animation-delay: .25s; }
.listing-card:nth-child(n+7) { animation-delay: .28s; }

/* Aspect-ratio image wrapper (new partial) */
.listing-img-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #eaeeed, #d6ddd6);
}
.listing-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
  display: block;
}
.listing-card:hover .listing-img-wrap img { transform: scale(1.05); }

/* Legacy card-img-top for non-partial templates */
.listing-card .card-img-top {
  height: 220px;
  object-fit: cover;
  width: 100%;
  display: block;
  transition: transform var(--t-slow);
}
.listing-card:hover .card-img-top { transform: scale(1.05); }

/* Price tag */
.price-tag {
  font-weight: 900;
  color: var(--km-primary);
  font-size: 1.2rem !important;
  letter-spacing: -.3px;
  line-height: 1.2;
}

/* Placeholder */
.img-placeholder {
  background: linear-gradient(135deg, #eaeeed, #d6ddd6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b0c4b0;
}

/* Favourite button on listing cards */
.card-fav-btn {
  background: none; border: none; padding: 4px 6px;
  cursor: pointer; border-radius: var(--r-sm);
  color: var(--km-text-muted);
  font-size: 1rem; line-height: 1;
  transition: color var(--t-fast), transform var(--t-fast);
  position: relative; z-index: 5;
  flex-shrink: 0;
}
.card-fav-btn:hover { color: #e74c3c; transform: scale(1.2); }
.card-fav-btn.active { color: #e74c3c; }
.card-fav-btn.active i { font-weight: 900; }

/* ── Category-aware placeholder (no-photo fallback) ── */
.cat-ph {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #111d12, #1e3020);
}
.cat-ph-inner {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  opacity: .82;
  color: #6fcf97;
}
.cat-ph-inner i   { font-size: 2.4rem; line-height: 1; }
.cat-ph-inner span {
  font-size: .65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  text-align: center; max-width: 80%;
}

.cat-ph--immobilier         { background: linear-gradient(145deg, #0b1f12, #163320); color: #4ade80; }
.cat-ph--immobilier .cat-ph-inner { color: #4ade80; }

.cat-ph--automobile         { background: linear-gradient(145deg, #091428, #142240); }
.cat-ph--automobile .cat-ph-inner { color: #60a5fa; }

.cat-ph--electronique       { background: linear-gradient(145deg, #160d28, #241545); }
.cat-ph--electronique .cat-ph-inner { color: #c084fc; }

.cat-ph--telephones         { background: linear-gradient(145deg, #0a1530, #12234e); }
.cat-ph--telephones .cat-ph-inner { color: #7dd3fc; }

.cat-ph--mode-beaute        { background: linear-gradient(145deg, #280a18, #42102a); }
.cat-ph--mode-beaute .cat-ph-inner { color: #f9a8d4; }

.cat-ph--emploi             { background: linear-gradient(145deg, #121820, #1e2a36); }
.cat-ph--emploi .cat-ph-inner { color: #94a3b8; }

.cat-ph--services           { background: linear-gradient(145deg, #081c1a, #112e2a); }
.cat-ph--services .cat-ph-inner { color: #5eead4; }

.cat-ph--agriculture        { background: linear-gradient(145deg, #0e1808, #1a2e0e); }
.cat-ph--agriculture .cat-ph-inner { color: #86efac; }

.cat-ph--ameublement        { background: linear-gradient(145deg, #1c0e06, #2e1a0a); }
.cat-ph--ameublement .cat-ph-inner { color: #d4a574; }

.cat-ph--materiaux-construction { background: linear-gradient(145deg, #131b20, #1f2e38); }
.cat-ph--materiaux-construction .cat-ph-inner { color: #9db8c4; }

.cat-ph--famille-enfants    { background: linear-gradient(145deg, #201208, #362013); }
.cat-ph--famille-enfants .cat-ph-inner { color: #fdba74; }

.cat-ph--location-vacances  { background: linear-gradient(145deg, #081628, #0e2540); }
.cat-ph--location-vacances .cat-ph-inner { color: #7dd3fc; }

.cat-ph--professionnels     { background: linear-gradient(145deg, #12181c, #1e2e38); }
.cat-ph--professionnels .cat-ph-inner { color: #90bfd4; }

.cat-ph--restaurants        { background: linear-gradient(145deg, #200a0a, #381414); }
.cat-ph--restaurants .cat-ph-inner { color: #fca5a5; }

/* Premium borders */
.listing-premium { border: 2px solid #f6c90e !important; }
.listing-premium-plus {
  border: 2px solid var(--km-primary) !important;
  box-shadow: 0 4px 20px rgba(39,174,96,.15) !important;
}

/* Premium badges */
.badge-listing-premium {
  background: linear-gradient(135deg, #fdd835, #f9a825);
  color: #1a1000;
  font-size: .72rem; font-weight: 800;
  padding: 4px 11px; border-radius: 20px;
  letter-spacing: .3px; display: inline-block;
  box-shadow: 0 2px 10px rgba(230,168,0,.65), 0 1px 3px rgba(0,0,0,.2);
  text-shadow: 0 1px 0 rgba(255,255,255,.3);
}
.badge-listing-premium-plus {
  background: linear-gradient(135deg, #2ecc71, var(--km-primary-dark));
  color: #fff;
  font-size: .72rem; font-weight: 800;
  padding: 4px 11px; border-radius: 20px;
  display: inline-block;
  box-shadow: 0 2px 10px rgba(39,174,96,.65), 0 1px 3px rgba(0,0,0,.2);
  text-shadow: 0 1px 2px rgba(0,0,0,.2);
}

/* Gradient overlay on listing image — enables price/badge legibility */
.listing-img-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 60%;
  background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.28) 55%, transparent 100%);
  z-index: 1; pointer-events: none;
  border-radius: 0;
}

/* Price pill — bottom-right on image */
.listing-price-pill {
  background: var(--km-primary);
  color: #fff;
  font-weight: 800;
  font-size: .85rem;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  line-height: 1.4;
  letter-spacing: -.2px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  transition: transform var(--t-fast), background var(--t-fast);
}
.listing-price-pill small { font-weight: 500; opacity: .85; font-size: .7rem; }
.listing-card:hover .listing-price-pill { transform: scale(1.05); background: var(--km-primary-dark); }

/* Transaction type badge — bottom-left on image */
.badge-trans {
  font-size: .68rem; font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  color: #fff;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  white-space: nowrap;
}
.badge-trans-vente      { background: rgba(25,135,84,.85); }
.badge-trans-location   { background: rgba(13,110,253,.85); }
.badge-trans-colocation { background: rgba(253,126,20,.85); }

/* "À la Une" sponsored badge — top-left on image */
.badge-listing-sponsored {
  background: linear-gradient(135deg, #ff6b35, #e8651a);
  color: #fff;
  font-size: .72rem; font-weight: 800;
  padding: 4px 11px;
  border-radius: 20px;
  display: inline-block;
  box-shadow: 0 2px 10px rgba(232,101,26,.65), 0 1px 3px rgba(0,0,0,.2);
  text-shadow: 0 1px 2px rgba(0,0,0,.15);
  letter-spacing: .2px;
}

/* Verified badge — top-right on image */
.badge-listing-verified {
  background: linear-gradient(135deg, #27ae60, #1e8449);
  color: #fff;
  font-size: .72rem; font-weight: 800;
  padding: 4px 10px;
  border-radius: 20px;
  display: inline-block;
  box-shadow: 0 2px 10px rgba(39,174,96,.60), 0 1px 3px rgba(0,0,0,.15);
  text-shadow: 0 1px 2px rgba(0,0,0,.15);
  letter-spacing: .2px;
}

/* Category label above title */
.listing-category-label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
  color: var(--km-text-muted);
  line-height: 1.2;
}

/* Section heading with green left-border accent */
.section-title {
  position: relative;
  padding-left: 14px;
}
.section-title::before {
  content: '';
  position: absolute;
  left: 0; top: .15em; bottom: .1em;
  width: 4px;
  background: linear-gradient(to bottom, var(--km-primary), var(--km-primary-dark));
  border-radius: 2px;
}

/* ── 10. CATEGORY CARDS ───────────────────────────────────────────────────── */
.category-card {
  border-radius: var(--r-md) !important;
  border: 2px solid transparent !important;
  transition: all var(--t-base);
  background: var(--km-surface);
}
.category-card:hover {
  border-color: var(--km-primary) !important;
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(39,174,96,.15) !important;
}

/* ── 11. ALERTS ───────────────────────────────────────────────────────────── */
.alert { border: none; border-radius: var(--r-md) !important; }
.alert-success { background: #d1fae5; color: #065f3e; }
.alert-danger  { background: #fee2e2; color: #7f1d1d; }
.alert-warning { background: #fef3c7; color: #78350f; }
.alert-info    { background: #dbeafe; color: #1e3a8a; }

/* ── 12. FOOTER ───────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--km-dark);
  color: #8d9db0;
  border-top: 3px solid var(--km-primary);
}
.site-footer h5, .site-footer h6 { color: #fff; margin-bottom: 0; }
.site-footer a { color: #8d9db0; text-decoration: none; transition: color var(--t-fast); }
.site-footer a:hover { color: var(--km-primary); }

/* Footer navigation links — uniform vertical spacing */
.footer-links { margin: 0; }
.footer-links li {
  display: flex;
  align-items: flex-start;
  gap: .15rem;
  padding: .28rem 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
  line-height: 1.4;
}
.footer-links li:last-child { border-bottom: none; }
.footer-links a { display: block; color: #8d9db0; }
.footer-links a:hover { color: var(--km-primary); padding-left: 2px; transition: padding-left .15s; }

/* Social icons in footer */
.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  text-decoration: none;
  transition: background var(--t-fast), transform var(--t-fast);
}
.footer-social-link:hover { background: rgba(255,255,255,.14); transform: translateY(-2px); }

/* ── 13. PAGINATION ───────────────────────────────────────────────────────── */
.page-item.active .page-link {
  background-color: var(--km-primary) !important;
  border-color: var(--km-primary) !important;
}
.page-link { color: var(--km-primary) !important; border-radius: var(--r-sm) !important; }
.page-link:hover { background: var(--km-primary-muted); color: var(--km-primary) !important; }

/* ── 14. BREADCRUMB ───────────────────────────────────────────────────────── */
.breadcrumb-item a { color: var(--km-primary); text-decoration: none; }
.breadcrumb-item a:hover { text-decoration: underline; }

/* ── 14b. PREMIUM AD COMPONENTS ──────────────────────────────────────────── */

/* Subtle "Pub" pill — absolute top-right on image banners */
.ad-label {
  position: absolute;
  top: 8px; right: 8px;
  background: rgba(0,0,0,.32);
  color: rgba(255,255,255,.8);
  font-size: .6rem; font-weight: 600;
  letter-spacing: .05em;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: none;
  z-index: 5;
}

/* Inline text label for card footer / text areas */
.ad-label-inline {
  display: inline-block;
  font-size: .62rem; font-weight: 600;
  letter-spacing: .06em;
  color: var(--km-text-muted);
  border: 1px solid var(--km-border);
  padding: 1px 7px;
  border-radius: var(--r-pill);
  text-transform: uppercase;
}

/* Full-width top banner */
.ad-banner-wrap {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
}
.ad-banner-wrap img {
  width: 100%; display: block;
  min-height: 180px; max-height: 240px;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.ad-banner-wrap:hover img { transform: scale(1.02); }

/* Thin inline strip (between filters and grid) */
.ad-strip-wrap {
  position: relative;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--km-border);
}
.ad-strip-wrap img {
  width: 100%; display: block;
  max-height: 88px;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.ad-strip-wrap:hover img { transform: scale(1.01); }

/* Ad card — fits inside the listing grid naturally */
.ad-card-inline {
  border-radius: var(--r-md) !important;
  border: 1px dashed var(--km-border) !important;
  background: var(--km-surface);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.ad-card-inline:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md) !important;
}

/* ── 15. SIDEBAR ADS ──────────────────────────────────────────────────────── */
.sticky-sidebar { position: sticky; top: 100px; }
.sticky-sidebar img { max-height: calc(72vh - 60px); object-fit: cover; }
.sticky-sidebar [data-ad-rotator] { overflow: hidden; border-radius: var(--r-md); }

/* Image réelle : hauteur skyscraper */
.ad-skyscraper-img {
  width: 100%;
  display: block;
  min-height: 580px;
  max-height: 800px;
  object-fit: cover;
}
/* Démo : hauteur contrôlée via min-height inline */
.ad-skyscraper-demo { transition: opacity .55s ease; }

.ad-square-img {
  width: 100%;
  display: block;
  height: 250px;
  object-fit: cover;
}

/* ── 16. ANIMATIONS ───────────────────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes skeletonShimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes popIn {
  0%   { opacity: 0; transform: scale(.8); }
  70%  { transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes pulseGreen {
  0%, 100% { box-shadow: 0 0 0 0 rgba(39,174,96,.35); }
  50%       { box-shadow: 0 0 0 6px rgba(39,174,96,0); }
}

/* Apply entrance animations to badges on image */
.badge-listing-sponsored,
.badge-listing-verified,
.badge-listing-premium,
.badge-listing-premium-plus { animation: popIn .35s ease both; }

/* Pulse on verified badge hover */
.badge-listing-verified:hover { animation: pulseGreen 1.2s ease infinite; }

/* Shine on premium badge hover */
@keyframes shimmerBadge {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.badge-listing-premium:hover {
  background: linear-gradient(135deg, #fdd835 0%, #fff9c4 40%, #f9a825 60%, #fdd835 100%);
  background-size: 200% auto;
  animation: shimmerBadge .8s linear infinite;
}

/* ── 17. SKELETON LOADING ─────────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, #e8ede8 25%, #f4f7f4 50%, #e8ede8 75%);
  background-size: 1200px 100%;
  animation: skeletonShimmer 1.5s ease-in-out infinite;
  border-radius: var(--r-sm);
}
.skeleton-card {
  border-radius: var(--r-md) !important;
  overflow: hidden;
  background: var(--km-surface);
  border: 1px solid var(--km-border);
}
.skeleton-img { aspect-ratio: 4 / 3; }
.skeleton-line { height: 13px; margin-bottom: 8px; }
.skeleton-line.w-full { width: 100%; }
.skeleton-line.w-70   { width: 70%; }
.skeleton-line.w-45   { width: 45%; }

/* ── 18. FLOATING HELP BUTTON ─────────────────────────────────────────────── */
.float-help-btn {
  position: fixed; bottom: 24px; right: 24px; z-index: 1055;
  background: var(--km-primary); color: #fff;
  border-radius: var(--r-pill);
  padding: 10px 18px; font-size: .88rem; font-weight: 600;
  text-decoration: none;
  display: flex; align-items: center; gap: 8px;
  box-shadow: var(--shadow-lg);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.float-help-btn:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: var(--shadow-xl), var(--shadow-primary);
  color: #fff;
}

/* ── 19. ADMIN / DASHBOARD ────────────────────────────────────────────────── */
.admin-nav .nav-link { border-radius: var(--r-sm); font-weight: 600; font-size: .85rem; }
.admin-nav .nav-link.active { background: var(--km-primary); color: #fff !important; }
.admin-nav .nav-link:hover:not(.active) {
  background: var(--km-primary-muted); color: var(--km-primary);
}
.stat-card { border-radius: var(--r-lg); padding: 1.25rem 1.5rem; }
.stat-value { font-size: 1.8rem; font-weight: 800; line-height: 1.1; }
.gift-card-badge {
  border: 2px dashed #27AE60; border-radius: 10px;
  background: #f0fff5; font-family: monospace; letter-spacing: .08em;
}

/* ── 20. HERO ─────────────────────────────────────────────────────────────── */
.hero-section {
  background:
    linear-gradient(150deg, rgba(10,28,16,.94) 0%, rgba(14,36,24,.88) 50%, rgba(10,28,16,.95) 100%),
    url('https://picsum.photos/seed/dakar-architecture/1920/700') center/cover no-repeat;
  min-height: 480px;
  position: relative;
}

.hero-eyebrow {
  font-size: .78rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--km-primary);
  margin-bottom: .75rem;
}

.hero-title {
  font-size: clamp(2rem, 6vw, 3.4rem);
  font-weight: 900; letter-spacing: -.04em;
  line-height: 1.1; margin-bottom: 1rem;
  color: #fff;
}

.hero-subtitle {
  font-size: clamp(.9rem, 2.2vw, 1.1rem);
  font-weight: 400; color: rgba(255,255,255,.65);
  margin-bottom: 2rem; letter-spacing: .01em;
}

.hero-search-wrap {
  background: rgba(255,255,255,.97);
  border-radius: var(--r-lg);
  padding: 1.35rem 1.35rem .5rem;
  box-shadow: 0 24px 64px rgba(0,0,0,.3), 0 8px 20px rgba(0,0,0,.15);
}
.hero-search-wrap .form-control,
.hero-search-wrap .form-select {
  background: #fff;
}

/* Stats bar inside the search card */
.hero-stats-bar {
  display: flex; align-items: center; justify-content: center;
  gap: 1rem; flex-wrap: wrap;
  padding: .75rem .5rem .35rem;
  border-top: 1px solid var(--km-border);
  margin-top: .75rem;
}
.hero-stat {
  display: flex; flex-direction: column; align-items: center;
  gap: 1px;
}
.hero-stat-num {
  font-size: 1.15rem; font-weight: 800;
  color: var(--km-primary); line-height: 1.1;
}
.hero-stat-lbl {
  font-size: .68rem; color: var(--km-text-muted);
  font-weight: 500; text-align: center;
}
.hero-stat-sep {
  width: 1px; height: 28px;
  background: var(--km-border);
  flex-shrink: 0;
}

/* ── 21. SPACING UTILITIES ────────────────────────────────────────────────── */
.py-6 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
.pt-6 { padding-top: 4rem !important; }
.pb-6 { padding-bottom: 4rem !important; }
/* Compact section gap between content blocks */
.section-gap { margin-bottom: 2.5rem; }
.section-gap-sm { margin-bottom: 1.5rem; }

/* ── Demo ad slider ──────────────────────────────────────────────────────── */
.demo-ad-slide {
  display: flex; min-height: 290px;
  border-radius: var(--r-xl); overflow: hidden;
}
.demo-ad-text {
  flex: 0 0 55%; padding: 2.5rem 2rem 2.5rem 2.5rem;
  display: flex; flex-direction: column; justify-content: center;
}
.demo-ad-visual {
  flex: 1; display: flex; align-items: center; justify-content: center;
  min-height: 290px;
}
.demo-ad-icon {
  width: 140px; height: 140px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.demo-ad-badge {
  display: inline-block; font-size: .68rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  background: rgba(255,255,255,.15); color: rgba(255,255,255,.8);
  padding: 4px 12px; border-radius: var(--r-pill);
  margin-bottom: .75rem; width: fit-content;
}
.demo-ad-title {
  font-size: clamp(1.1rem, 2.5vw, 1.55rem);
  font-weight: 900; line-height: 1.2;
  margin-bottom: .75rem;
}
.demo-ad-desc {
  font-size: .88rem; color: rgba(255,255,255,.65);
  margin-bottom: 1.25rem; line-height: 1.5;
}
.demo-ad-cta {
  display: inline-block; font-size: .9rem; font-weight: 700;
  padding: 10px 22px; border-radius: var(--r-pill);
  cursor: pointer; width: fit-content; letter-spacing: .01em;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}

/* ══════════════════════════════════════════════════════════════════════
   23. AVATAR UTILISATEUR
══════════════════════════════════════════════════════════════════════ */
.km-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--km-primary), var(--km-primary-dark));
  color: #fff; font-weight: 800; text-transform: uppercase;
  flex-shrink: 0; user-select: none; line-height: 1;
}
.km-avatar--xs { width: 24px; height: 24px; font-size: .58rem; }
.km-avatar--sm { width: 36px; height: 36px; font-size: .75rem; }
.km-avatar--md {
  width: 56px; height: 56px; font-size: 1.1rem;
  border: 2px solid var(--km-primary);
}
.km-avatar--lg {
  width: 100px; height: 100px; font-size: 2rem;
  border: 3px solid var(--km-primary);
}
.km-avatar-photo { object-fit: cover; border-radius: 50%; display: block; }

/* ══════════════════════════════════════════════════════════════════════
   24. AD SLOT CAROUSEL (publicités animées)
══════════════════════════════════════════════════════════════════════ */
.ad-slot-wrap {
  position: relative; overflow: hidden;
  border-radius: var(--r-base);
}
/* Crossfade fluide */
.ad-slot-wrap .carousel-fade .carousel-item {
  opacity: 0; transition: opacity .55s ease; transform: none;
}
.ad-slot-wrap .carousel-fade .carousel-item.active { opacity: 1; }

/* Dots indicateurs — petits, discrets, coin inférieur droit */
.ad-slot-dots {
  position: absolute; bottom: .55rem; right: .8rem;
  display: flex; gap: 5px; z-index: 10;
}
.ad-slot-dots button {
  width: 7px; height: 7px; border-radius: 50%; border: none; padding: 0;
  background: rgba(255,255,255,.35); cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast);
}
.ad-slot-dots button.active {
  background: #fff; transform: scale(1.25);
}
.ad-slot-dots button:focus { outline: none; }

/* Badge "ESPACE PUB · DÉMO" */
.ad-demo-badge {
  position: absolute; top: .5rem; left: .8rem; z-index: 10;
  font-size: .58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.45); background: rgba(0,0,0,.2);
  padding: 2px 8px; border-radius: var(--r-pill); pointer-events: none;
}

/* Sidebar ad slot */
.ad-slot-sidebar { border-radius: var(--r-base); overflow: hidden; }
.demo-ad-cta:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.25); }

@media (max-width: 767.98px) {
  .demo-ad-text { flex: 1; padding: 1.75rem 1.25rem; }
  .demo-ad-title { font-size: 1.1rem; }
  .demo-ad-desc { font-size: .82rem; margin-bottom: .85rem; }
}

/* ── 22. RESPONSIVE ───────────────────────────────────────────────────────── */
@media (max-width: 576px) {
  .navbar-brand img { height: 52px; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .navbar-brand img { height: 60px; }
}

@media (max-width: 991.98px) {
  .navbar-actions > .btn,
  .navbar-actions > a.btn { text-align: left; justify-content: flex-start !important; }
  .navbar-actions .dropdown-toggle { justify-content: flex-start !important; }
  .navbar-actions .dropdown-menu {
    position: static !important; inset: auto !important; transform: none !important;
    box-shadow: var(--shadow-sm) !important;
    border: 1px solid var(--km-border) !important;
    margin-top: .25rem !important; width: 100%;
  }
}

@media (max-width: 767.98px) {
  .btn:not(.btn-xs, .btn-sm) { min-height: 40px; }
  input.form-control, select.form-select, textarea.form-control { font-size: 16px !important; }
  .form-control, .form-select { max-width: 100%; }
  .stat-card .card-body { gap: .5rem !important; }

  /* Hero — mobile */
  .hero-section { min-height: 0; }
  .hero-title { font-size: clamp(1.6rem, 8vw, 2.4rem); }
  .hero-search-wrap { padding: 1rem 1rem .35rem; }
  .hero-stats-bar { gap: .6rem; padding: .6rem .25rem .25rem; }
  .hero-stat-sep { display: none !important; }
  .hero-stat-num { font-size: 1rem; }

  /* py-6 mobile — réduction */
  .py-6 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

  /* Ad banner — mobile adapté */
  .ad-banner-wrap img { min-height: 120px; max-height: 180px; }

  /* Section-title bar visible sur mobile */
  .section-title { padding-left: 12px; }
  .section-title::before { width: 3px; }

  /* Listing cards animation stagger supprimée sur mobile */
  .listing-card { animation-delay: 0s !important; }

  /* Card footer */
  .card-footer { flex-wrap: wrap; gap: .25rem; }
}

@media (max-width: 575.98px) {
  /* Footer mobile */
  .site-footer .col-12.col-md-12 { text-align: center; }
  .site-footer .col-12.col-md-12 .footer-links { text-align: left; display: inline-block; }
  .site-footer .footer-social-link { margin: 0 auto; }
  .site-footer .d-flex.gap-3 { justify-content: center; }
  .site-footer .d-flex.flex-wrap.gap-2 { justify-content: center; }

  .display-5 { font-size: 1.6rem !important; }
  .filter-prix-min, .filter-prix-max { width: 100%; }

  /* Hero subtitle masqué sur xs pour gagner de la place */
  .hero-subtitle { font-size: .85rem; }
  .hero-eyebrow { font-size: .72rem; }

  /* Demo slider — slide compact sur xs */
  .demo-ad-slide { min-height: 220px; }
  .demo-ad-text { padding: 1.25rem 1rem; }
  .demo-ad-title { font-size: 1rem; }
  .demo-ad-desc { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   25. BANNIÈRE PREMIUM — home_banner
══════════════════════════════════════════════════════════════════════ */
.ad-slot-premium {
  box-shadow: 0 10px 50px rgba(39,174,96,.20), 0 2px 16px rgba(0,0,0,.12);
  border-radius: var(--r-lg) !important;
}
.ad-slot-premium .ad-banner-wrap { min-height: 360px !important; }

/* Mise en page interne slide premium */
.km-premium-slide {
  display: flex !important;
  flex-direction: column;
}
.km-premium-header {
  padding: 1rem 2rem 0;
  position: relative; z-index: 1;
}
.km-premium-label {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .6rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: #c8a84b;
  background: rgba(0,0,0,.28); padding: 3px 10px;
  border-radius: var(--r-pill); border: 1px solid rgba(200,168,75,.28);
}
.km-premium-body {
  display: flex; align-items: center; gap: 2rem;
  flex: 1; padding: .65rem 2rem 0;
  position: relative; z-index: 1;
}
.km-premium-icon {
  width: 90px; height: 90px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.km-premium-cta {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--km-cta); color: #fff;
  font-weight: 700; font-size: 1rem;
  padding: 14px 28px; border-radius: var(--r-pill);
  cursor: default; white-space: nowrap; flex-shrink: 0;
  box-shadow: 0 4px 20px rgba(232,101,26,.40);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.km-premium-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(232,101,26,.50); }
.km-premium-features {
  display: flex; padding: .65rem 2rem 1.1rem;
  border-top: 1px solid rgba(255,255,255,.08);
  position: relative; z-index: 1;
}
.km-premium-feature {
  display: flex; align-items: flex-start; gap: .4rem; flex: 1;
}
.km-premium-feature > i {
  font-size: .88rem; margin-top: 2px;
  color: rgba(255,255,255,.50); flex-shrink: 0;
}
.km-premium-feature strong {
  display: block; font-size: .76rem;
  color: rgba(255,255,255,.85); font-weight: 700;
}
.km-premium-feature small {
  font-size: .67rem; color: rgba(255,255,255,.46);
  display: block; line-height: 1.3;
}
.km-premium-contact {
  display: flex; gap: 1.25rem; flex-wrap: wrap; margin-top: .45rem;
}
.km-premium-contact span {
  font-size: .78rem; color: rgba(255,255,255,.60);
  display: flex; align-items: center; gap: .3rem;
}
/* Éléments décoratifs de fond */
.km-premium-deco {
  position: absolute; right: -10px; top: 50%;
  transform: translateY(-50%);
  font-size: 250px; opacity: .045; line-height: 1;
  color: #fff; pointer-events: none; user-select: none;
}
.km-premium-circle-a {
  position: absolute; width: 270px; height: 270px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.055);
  right: 45px; top: -110px; pointer-events: none;
}
.km-premium-circle-b {
  position: absolute; width: 200px; height: 200px;
  border-radius: 50%; background: rgba(255,255,255,.025);
  right: -55px; bottom: -85px; pointer-events: none;
}
/* Dots centrés sur la bannière premium */
.ad-slot-premium .ad-slot-dots {
  left: 50%; transform: translateX(-50%); right: auto; bottom: .55rem;
}
/* Flèches de navigation */
.ad-slot-premium .carousel-control-prev,
.ad-slot-premium .carousel-control-next { width: 44px; opacity: .40; }
.ad-slot-premium .carousel-control-prev:hover,
.ad-slot-premium .carousel-control-next:hover { opacity: .78; }

@media (max-width: 991.98px) {
  .km-premium-header { padding: 1rem 1.5rem 0; }
  .km-premium-body { padding: .65rem 1.5rem 0; gap: 1.5rem; }
  .km-premium-features { padding: .6rem 1.5rem 1rem; }
  .ad-slot-premium .ad-banner-wrap { min-height: 260px !important; }
}
@media (max-width: 767.98px) {
  .km-premium-header { padding: .85rem 1.25rem 0; }
  .km-premium-body { padding: .6rem 1.25rem 0; gap: 1rem; }
  .km-premium-features { display: none !important; }
  .km-premium-cta { font-size: .85rem; padding: 10px 20px; }
  .km-premium-deco { font-size: 150px; opacity: .03; }
  .ad-slot-premium .ad-banner-wrap { min-height: 210px !important; }
}
@media (max-width: 575.98px) {
  .ad-slot-premium .ad-banner-wrap { min-height: 185px !important; }
  .km-premium-circle-a, .km-premium-circle-b { display: none; }
}

/* ── 23. CUSTOM SCROLLBAR ─────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f4f7f4; }
::-webkit-scrollbar-thumb { background: #c0d0c0; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--km-primary); }