/* ============================================================
   services-uber-premium.css  v1.0
   Uber / Airbnb premium services UI — CSS overrides only.
   Loaded last → highest cascade priority.
   Zero JS logic changes. Zero SearchEngine / MatchingEngine changes.
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   1. REMOVE LEFT SIDEBAR — collapse layout to full width
   ══════════════════════════════════════════════════════════ */

/* Sidebar: gone */
#artisans-section .results-filters,
#artisans-section .results-filters-column,
#artisans-section aside.results-filters,
.filters-sidebar, .filters-left, .results-filters-column {
  display: none !important;
}

/* Layout: single-column full width */
#artisans-section .results-layout {
  display: block !important;
  grid-template-columns: unset !important;
  gap: 0 !important;
}

#artisans-section .results-main-column {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Results page shell */
#artisans-section .results-page-shell,
#artisans-section .container.results-page-shell {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  width: 100% !important;
}

/* ══════════════════════════════════════════════════════════
   2. VEDETTE GRID — 3 col desktop → 2 tablet → 1 mobile
   ══════════════════════════════════════════════════════════ */

#fixeo-homepage-vedette-grid.ssb2-vedette-grid,
#fixeo-homepage-vedette-grid.fhp-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: none !important;
}

#fixeo-homepage-vedette-grid .pvc-card {
  width: 100% !important;
  min-width: 0 !important;
}

/* ══════════════════════════════════════════════════════════
   3. SERVICES SECTION LAYOUT — centered, premium spacing
   ══════════════════════════════════════════════════════════ */

#services.services-section > .container {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

/* Section header */
#services.services-section .section-header {
  text-align: center !important;
  margin-bottom: 20px !important;
}

/* ══════════════════════════════════════════════════════════
   4. PREMIUM CITY PILL — 44px, glass, location emoji
   ══════════════════════════════════════════════════════════ */

html body .svc-city-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  height: 44px !important;
  padding: 0 18px 0 14px !important;
  border-radius: 999px !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  /* Glass premium */
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: rgba(255,255,255,0.84) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.08) !important;
  transition: background 0.18s ease, border-color 0.18s ease,
              box-shadow 0.18s ease, transform 0.14s ease !important;
}

html body .svc-city-pill:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.22) !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.12) !important;
  transform: translateY(-1px) !important;
}

html body .svc-city-pill.has-value {
  background: rgba(225,48,108,0.16) !important;
  border-color: rgba(225,48,108,0.45) !important;
  color: #ff85b0 !important;
  box-shadow: 0 0 0 1px rgba(225,48,108,0.18), 0 4px 16px rgba(225,48,108,0.18) !important;
}

html body .svc-city-pill.open {
  background: rgba(255,255,255,0.11) !important;
  border-color: rgba(255,255,255,0.26) !important;
  transform: translateY(-1px) !important;
}

/* Pin icon — slightly larger */
html body .svc-city-pin {
  width: 13px !important;
  height: 13px !important;
  opacity: 0.75 !important;
}

html body .svc-city-chevron {
  width: 10px !important;
  height: 6px !important;
  opacity: 0.5 !important;
}

/* City filter bar spacing */
#services.services-section .services-filter-bar,
#services.services-section .svc-city-wrap {
  margin-bottom: 16px !important;
  justify-content: center !important;
}

/* ══════════════════════════════════════════════════════════
   5. UBER PREMIUM SERVICE CHIPS — desktop 44px
   ══════════════════════════════════════════════════════════ */

html body #services.services-section .category-chips,
html body #services.services-section.homepage-conversion-priority .category-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 10px !important;
  max-width: 1000px !important;
  margin: 0 auto 28px !important;
  padding: 0 !important;
  overflow: visible !important;
  /* Kill any scroll gradient overlays */
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

html body #services.services-section .category-chips::before,
html body #services.services-section .category-chips::after {
  display: none !important;
  content: none !important;
}

html body #services.services-section .service-chip,
html body #services.services-section.homepage-conversion-priority .service-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  height: 44px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  width: auto !important;
  max-width: none !important;
  min-height: 0 !important;
  min-width: fit-content !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
  /* Glass style */
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: rgba(255,255,255,0.78) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: 0 1px 8px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,0.06) !important;
  transition: background 0.16s ease, border-color 0.16s ease,
              color 0.16s ease, transform 0.14s ease, box-shadow 0.16s ease !important;
}

/* Chip icon */
html body #services.services-section .service-chip .chip-icon {
  font-size: 1rem !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

/* Chip hover */
html body #services.services-section .service-chip:hover {
  background: rgba(255,255,255,0.11) !important;
  border-color: rgba(255,255,255,0.20) !important;
  color: rgba(255,255,255,0.96) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.10),
              0 0 0 1px rgba(255,255,255,0.06) !important;
}

/* Active chip — Fixeo gradient */
html body #services.services-section .service-chip.active,
html body #services.services-section.homepage-conversion-priority .service-chip.active {
  background: linear-gradient(135deg, rgba(225,48,108,0.85), rgba(131,58,180,0.80)) !important;
  border-color: rgba(225,48,108,0.60) !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 20px rgba(225,48,108,0.35), 0 0 0 1px rgba(225,48,108,0.30),
              inset 0 1px 0 rgba(255,255,255,0.18) !important;
  transform: translateY(-1px) !important;
}

/* Focus ring */
html body #services.services-section .service-chip:focus-visible {
  outline: 2px solid rgba(225,48,108,0.75) !important;
  outline-offset: 2px !important;
}

/* Chip visibility (v12 animate) */
html body #services.services-section .service-chip.svc-visible {
  opacity: 1 !important;
}
html body #services.services-section .service-chip:not(.svc-visible) {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ══════════════════════════════════════════════════════════
   6. MOBILE ≤768px — horizontal scroll chips, 48px height
   ══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Chips — horizontal scroll + snap */
  html body #services.services-section .category-chips,
  html body #services.services-section.homepage-conversion-priority .category-chips {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
    padding: 4px 16px 10px !important;
    margin: 0 -20px 24px !important;
    gap: 8px !important;
    /* Hide scrollbar — keep scroll functionality */
    scrollbar-width: none !important;
    max-width: none !important;
  }
  html body #services.services-section .category-chips::-webkit-scrollbar {
    display: none !important;
  }

  /* Each chip: snap alignment, 48px touch target */
  html body #services.services-section .service-chip,
  html body #services.services-section.homepage-conversion-priority .service-chip {
    scroll-snap-align: start !important;
    height: 48px !important;
    padding: 0 16px !important;
    font-size: 0.875rem !important;
    flex-shrink: 0 !important;
    min-width: fit-content !important;
  }

  /* City pill — 44px on mobile too */
  html body .svc-city-pill {
    height: 44px !important;
    font-size: 0.875rem !important;
  }

  /* Vedette grid — 1 column on mobile */
  #fixeo-homepage-vedette-grid.ssb2-vedette-grid,
  #fixeo-homepage-vedette-grid.fhp-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Section container padding */
  #services.services-section > .container {
    padding: 0 0 !important;
  }
  #services.services-section .section-header {
    padding: 0 20px !important;
  }
  #services.services-section .services-filter-bar,
  #services.services-section .svc-city-wrap {
    padding: 0 20px !important;
    margin-bottom: 10px !important;
  }
}

/* ══════════════════════════════════════════════════════════
   7. TABLET ≤1024px — 2 column grid
   ══════════════════════════════════════════════════════════ */

@media (min-width: 769px) and (max-width: 1024px) {
  #fixeo-homepage-vedette-grid.ssb2-vedette-grid,
  #fixeo-homepage-vedette-grid.fhp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
  html body #services.services-section .service-chip,
  html body #services.services-section.homepage-conversion-priority .service-chip {
    height: 42px !important;
    padding: 0 16px !important;
  }
}

/* ══════════════════════════════════════════════════════════
   8. PREMIUM VISUAL — fhp-section-header
   ══════════════════════════════════════════════════════════ */

#fixeo-homepage-header.fhp-section-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 20px !important;
  padding: 0 !important;
}

.fhp-title {
  font-size: 1.45rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin: 0 0 4px !important;
}

.fhp-subtitle {
  font-size: 0.85rem !important;
  color: rgba(255,255,255,0.52) !important;
  margin: 0 !important;
}

.fhp-counter {
  font-size: 0.80rem !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.50) !important;
  white-space: nowrap !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 999px !important;
  padding: 5px 12px !important;
}

/* ══════════════════════════════════════════════════════════
   9. PVC-CARD premium polish (inside vedette grid)
   ══════════════════════════════════════════════════════════ */

#fixeo-homepage-vedette-grid .pvc-card {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.06) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
  overflow: hidden !important;
}

#fixeo-homepage-vedette-grid .pvc-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.14) !important;
}

/* ══════════════════════════════════════════════════════════
   10. HIDE EXTRA FILTER PANEL IN HOMEPAGE MODE
       (Note min, Prix max, Qualité dropdowns — legacy UI)
   ══════════════════════════════════════════════════════════ */

/* In homepage mode: hide the extra filter panel (sidebar content in disguise) */
body.fixeo-homepage-mode #fixeo-premium-filters-extra,
body:not(.fixeo-search-mode) #fixeo-premium-filters-extra {
  display: none !important;
}

/* Also hide results-toolbar in homepage mode */
body.fixeo-homepage-mode .results-toolbar,
body:not(.fixeo-search-mode) .results-toolbar {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════
   11. HERO-SEARCH MODE — suppress ALL extra filter UI
       body.fixeo-hero-search-mode = set by quick-search-modal.js
       after "Trouver maintenant" CTA fires.
       Removed in _enterHomepageMode() when user returns to homepage.
   ══════════════════════════════════════════════════════════ */

/* ── TOP RESULTS CHROME (title + urgent banner) → keep only fhp-section-header ── */
body.fixeo-hero-search-mode #artisans-section .results-header,
body.fixeo-hero-search-mode #artisans-section .premium-results-header,
html body.fixeo-hero-search-mode #artisans-section .results-header.premium-results-header {
  display: none !important;
}

/* ── ASIDE SIDEBAR (Filtres panel) ── */
body.fixeo-hero-search-mode #artisans-section aside.results-filters,
body.fixeo-hero-search-mode #artisans-section .results-filters {
  display: none !important;
}

/* ── EXTRA FILTERS PANEL (Note min / Prix max / Qualité) ── */
body.fixeo-hero-search-mode #fixeo-premium-filters-extra {
  display: none !important;
}

/* ── RESULTS TOOLBAR ── */
body.fixeo-hero-search-mode #artisans-section .results-toolbar,
html body.fixeo-hero-search-mode #artisans-section .results-toolbar {
  display: none !important;
}

/* ── EDIT SEARCH BUTTON ── */
body.fixeo-hero-search-mode #edit-results-search-btn {
  display: none !important;
}

/* ── OTHER ARTISANS BANNER ── */
body.fixeo-hero-search-mode #other-artisans-banner,
html body.fixeo-hero-search-mode #other-artisans-banner.other-artisans-banner {
  display: none !important;
}

/* ── fhp-section-header: keep visible but clean ─────────── */
body.fixeo-hero-search-mode #fixeo-homepage-header.fhp-section-header {
  display: flex !important;
  margin-bottom: 20px !important;
}

/* ── Vedette grid: always full width in hero-search mode ── */
body.fixeo-hero-search-mode #fixeo-homepage-vedette-grid.ssb2-vedette-grid,
body.fixeo-hero-search-mode #fixeo-homepage-vedette-grid.fhp-grid {
  display: grid !important;
}

/* ── Services section: hide chips/city filter in hero-search mode
      (user already searched — no need to show chip selector) ── */
html body.fixeo-hero-search-mode #services.services-section .services-filter-bar,
html body.fixeo-hero-search-mode #services.services-section .category-chips,
html body.fixeo-hero-search-mode #services.services-section.homepage-conversion-priority .category-chips,
html body.fixeo-hero-search-mode #services.services-section .svc-city-wrap,
html body.fixeo-hero-search-mode #services.services-section .section-header {
  display: none !important;
}

/* Collapse services section height gracefully */
body.fixeo-hero-search-mode #services.services-section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
}

/* ══════════════════════════════════════════════════════════
   12. EXPLICIT RESTORE — services always visible in homepage mode
       Belt-and-suspenders: ensure chips never disappear in normal mode
   ══════════════════════════════════════════════════════════ */

/* In homepage mode (default): always show services chips */
body.fixeo-homepage-mode #services.services-section .category-chips,
body:not(.fixeo-hero-search-mode) #services.services-section .category-chips {
  display: flex !important;
}

body.fixeo-homepage-mode #services.services-section .services-filter-bar,
body:not(.fixeo-hero-search-mode) #services.services-section .services-filter-bar {
  display: flex !important;
}

body.fixeo-homepage-mode #services.services-section .section-header,
body:not(.fixeo-hero-search-mode) #services.services-section .section-header {
  display: block !important;
}

body.fixeo-homepage-mode #services.services-section,
body:not(.fixeo-hero-search-mode) #services.services-section {
  padding-top: var(--section-padding-top, 60px) !important;
  padding-bottom: var(--section-padding-bottom, 60px) !important;
}

/* ══════════════════════════════════════════════════════════
   MOBILE OVERRIDE — horizontal snap carousel
   Must come LAST in this file to beat the grid rules above
   ══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  #fixeo-homepage-vedette-grid.ssb2-vedette-grid,
  #fixeo-homepage-vedette-grid.fhp-grid,
  #fixeo-homepage-vedette-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 14px !important;
    padding: 8px 16px 24px !important;
    grid-template-columns: unset !important;
    align-items: stretch !important;
  }
  #fixeo-homepage-vedette-grid.ssb2-vedette-grid::-webkit-scrollbar,
  #fixeo-homepage-vedette-grid.fhp-grid::-webkit-scrollbar,
  #fixeo-homepage-vedette-grid::-webkit-scrollbar { display: none !important; }

  /* Cards: nearly full-width, snap-to */
  #fixeo-homepage-vedette-grid .pvc-card,
  #fixeo-homepage-vedette-grid .fhp-card {
    min-width: 88vw !important;
    max-width: 88vw !important;
    width: 88vw !important;
    flex-shrink: 0 !important;
    scroll-snap-align: start !important;
  }
}

/* ================================================================
   PHASE 1+2 PREMIUM UPGRADE — 2026-05-02
   Tasks 2–6: hide Ville label, section shell, bigger chips,
   stronger active, premium container, mobile polish,
   city dropdown lighter on mobile.
   Appended last → wins all cascade ties.
   ================================================================ */

/* TASK 2 — Hide static "Ville :" label (class added to HTML span) */
.services-city-static-label {
  display: none !important;
}

/* TASK 3 — Premium section shell: wrap filter-bar in glass card */
#services.services-section .services-filter-bar {
  width: min(920px, calc(100% - 32px)) !important;
  margin: 0 auto 20px !important;
  padding: 14px 18px !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,0.035) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.14) !important;
  justify-content: center !important;
}

/* TASK 4 — Chips: bigger hit area, stronger contrast, more action-like */
html body #services.services-section .service-chip,
html body #services.services-section.homepage-conversion-priority .service-chip {
  height: 44px !important;
  padding: 0 22px !important;
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: rgba(255,255,255,0.90) !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  letter-spacing: -0.01em !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.13),
              inset 0 1px 0 rgba(255,255,255,0.07) !important;
  transition: transform 0.20s ease, box-shadow 0.20s ease,
              border-color 0.20s ease, background 0.20s ease !important;
}

html body #services.services-section .service-chip:hover,
html body #services.services-section.homepage-conversion-priority .service-chip:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(255,255,255,0.26) !important;
  background: rgba(255,255,255,0.11) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,0.20),
              inset 0 1px 0 rgba(255,255,255,0.10) !important;
  color: #fff !important;
}

/* TASK 4 — Active chip: deeper gradient, bolder glow */
html body #services.services-section .service-chip.active,
html body #services.services-section.homepage-conversion-priority .service-chip.active {
  background: linear-gradient(135deg, rgba(225,48,108,0.95), rgba(147,51,234,0.88)) !important;
  border-color: rgba(255,255,255,0.28) !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 14px 40px rgba(225,48,108,0.34),
              0 0 0 1px rgba(225,48,108,0.32),
              inset 0 1px 0 rgba(255,255,255,0.22) !important;
  transform: translateY(-1px) !important;
}

/* TASK 5 — Chip container: wider, tighter premium gap */
html body #services.services-section .category-chips,
html body #services.services-section.homepage-conversion-priority .category-chips {
  max-width: 980px !important;
  gap: 12px !important;
  margin: 0 auto 28px !important;
}

/* TASK 6 — Mobile: keep chips readable, lighter dropdown, no overflow */
@media (max-width: 768px) {

  /* Section shell — flat on mobile (no card needed) */
  #services.services-section .services-filter-bar {
    width: 100% !important;
    margin: 0 0 12px !important;
    padding: 10px 16px !important;
    border-radius: 0 !important;
    background: rgba(255,255,255,0.025) !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
  }

  /* Chips: keep horizontal scroll (uber style), slightly smaller */
  html body #services.services-section .service-chip,
  html body #services.services-section.homepage-conversion-priority .service-chip {
    height: 42px !important;
    padding: 0 18px !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
  }

  /* City dropdown: lighter, shorter */
  .svc-city-dropdown {
    max-height: 220px !important;
    border-radius: 22px !important;
    background: rgba(10,12,24,0.97) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.55),
                0 0 0 1px rgba(255,255,255,0.06) !important;
  }
}

/* ================================================================
   ULTRA PREMIUM UX BOOST — 2026-05-02
   Tasks 1–6: primary chips, opacity hierarchy, speed hint,
   filter-bar subtle, category chips border separator,
   desktop micro-interaction upgrade.
   Appended last → wins all cascade ties.
   ================================================================ */

/* TASK 3 — Speed signal below subtitle */
#services .services-speed-hint {
  font-size: 0.84rem !important;
  color: rgba(255,255,255,0.62) !important;
  margin: 6px auto 0 !important;
  text-align: center !important;
  letter-spacing: 0.01em !important;
  max-width: 480px !important;
}

/* TASK 2 — De-emphasise all secondary chips (visible ones only) */
html body #services.services-section .service-chip.svc-visible {
  opacity: 0.76 !important;
  transition: opacity 0.18s ease, transform 0.20s ease,
              box-shadow 0.20s ease, border-color 0.20s ease,
              background 0.20s ease !important;
}
html body #services.services-section .service-chip.svc-visible:hover {
  opacity: 1 !important;
}

/* TASK 1 — Primary service chips: Plomberie, Électricité, Climatisation
   Use [data-category] attribute selector — same specificity tier,
   appended last → wins over base .service-chip rule.
   Primary chips are always "hot" regardless of .active state. */
html body #services.services-section .service-chip.svc-visible[data-category="plomberie"],
html body #services.services-section .service-chip.svc-visible[data-category="electricite"],
html body #services.services-section .service-chip.svc-visible[data-category="climatisation"] {
  height: 52px !important;
  padding: 0 26px !important;
  font-size: 0.93rem !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  background: linear-gradient(135deg, rgba(225,48,108,0.90), rgba(147,51,234,0.82)) !important;
  border-color: rgba(255,255,255,0.22) !important;
  color: #fff !important;
  box-shadow: 0 10px 28px rgba(225,48,108,0.26),
              inset 0 1px 0 rgba(255,255,255,0.18) !important;
  transform: translateY(-2px) !important;
}

/* Primary chip hover — stronger glow */
html body #services.services-section .service-chip.svc-visible[data-category="plomberie"]:hover,
html body #services.services-section .service-chip.svc-visible[data-category="electricite"]:hover,
html body #services.services-section .service-chip.svc-visible[data-category="climatisation"]:hover {
  background: linear-gradient(135deg, rgba(225,48,108,1), rgba(147,51,234,0.95)) !important;
  border-color: rgba(255,255,255,0.32) !important;
  box-shadow: 0 18px 44px rgba(225,48,108,0.40),
              inset 0 1px 0 rgba(255,255,255,0.24) !important;
  transform: translateY(-3px) scale(1.02) !important;
  opacity: 1 !important;
}

/* Ensure primary chips keep full opacity even in active state */
html body #services.services-section .service-chip.svc-visible.active[data-category="plomberie"],
html body #services.services-section .service-chip.svc-visible.active[data-category="electricite"],
html body #services.services-section .service-chip.svc-visible.active[data-category="climatisation"] {
  opacity: 1 !important;
  height: 52px !important;
  padding: 0 26px !important;
  font-size: 0.93rem !important;
  font-weight: 700 !important;
}

/* TASK 4 — City filter bar: lighter presence */
#services.services-section .services-filter-bar {
  opacity: 0.84 !important;
  transition: opacity 0.22s ease !important;
}
#services.services-section .services-filter-bar:hover,
#services.services-section .services-filter-bar:focus-within {
  opacity: 1 !important;
}

/* TASK 5 — Visual separator above chip grid */
html body #services.services-section .category-chips,
html body #services.services-section.homepage-conversion-priority .category-chips {
  margin-top: 16px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
}

/* TASK 6 — Desktop micro-interaction upgrade */
@media (min-width: 1024px) {

  html body #services.services-section .service-chip.svc-visible {
    transition: opacity 0.16s ease, transform 0.22s cubic-bezier(0.34,1.56,0.64,1),
                box-shadow 0.22s ease, border-color 0.20s ease,
                background 0.20s ease !important;
  }

  html body #services.services-section .service-chip.svc-visible:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,0.26),
                inset 0 1px 0 rgba(255,255,255,0.10) !important;
    opacity: 1 !important;
  }

}

/* Mobile safety — keep primary chips readable in horizontal scroll */
@media (max-width: 768px) {

  html body #services.services-section .service-chip.svc-visible[data-category="plomberie"],
  html body #services.services-section .service-chip.svc-visible[data-category="electricite"],
  html body #services.services-section .service-chip.svc-visible[data-category="climatisation"] {
    height: 48px !important;
    padding: 0 20px !important;
    font-size: 0.88rem !important;
    transform: none !important;
  }

  html body #services.services-section .service-chip.svc-visible {
    opacity: 0.88 !important;
  }

  /* No border-top separator on mobile — chips scroll horizontally */
  html body #services.services-section .category-chips,
  html body #services.services-section.homepage-conversion-priority .category-chips {
    border-top: none !important;
    margin-top: 8px !important;
    padding-top: 0 !important;
  }

}

/* ================================================================
   VISUAL CARDS TRANSFORMATION — 2026-05-02
   Chip pills → service cards (CSS only, no HTML, no JS).
   Files: css/services-uber-premium.css only.

   SPECIFICITY NOTES:
   - Container grid rule uses :not(.fixeo-hero-search-mode) to beat
     the display:flex !important restore rule at L479 (spec 1,3,1).
     Our rule = (1,3,2) > (1,3,1).
   - Chip card rule uses .chip.service-chip (2 classes) to beat
     existing .service-chip rules (1 class): (1,3,2) > (1,2,2).
   - Primary chip override uses [data-category] attr: (1,4,2) wins all.
   - No opacity set on card rules — svc-visible system handles it.
   ================================================================ */

/* ── DESKTOP CARD GRID (>768px) ─────────────────────────────────── */

/* Container: flex → grid.
   Must beat L479 body:not(.fixeo-hero-search-mode) display:flex (1,3,1).
   Using html + both body-mode variants at spec (1,3,2). */
html body:not(.fixeo-hero-search-mode) #services.services-section .category-chips,
html body.fixeo-homepage-mode #services.services-section .category-chips,
html body:not(.fixeo-hero-search-mode) #services.services-section.homepage-conversion-priority .category-chips,
html body.fixeo-homepage-mode #services.services-section.homepage-conversion-priority .category-chips {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  max-width: 980px !important;
  margin: 18px auto 0 !important;
  padding-top: 14px !important;
  padding-bottom: 0 !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  overflow: visible !important;
  /* kill horizontal scroll properties from prior mobile rules */
  flex-wrap: unset !important;
  scroll-snap-type: none !important;
  overflow-x: visible !important;
}

/* Card chip — use .chip.service-chip (spec 1,3,2) to beat existing .service-chip (1,2,2) */
html body #services.services-section .chip.service-chip {
  width: 100% !important;
  height: 96px !important;
  min-height: 96px !important;
  max-height: none !important;
  padding: 16px 12px !important;
  border-radius: 22px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-align: center !important;
  white-space: normal !important;
  line-height: 1.12 !important;
  flex-shrink: unset !important;
  scroll-snap-align: none !important;
}

/* Card chip icon — large, stacked above label */
html body #services.services-section .chip.service-chip .chip-icon {
  font-size: 2.2rem !important;
  line-height: 1 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

/* ── TASK 2: Primary services — same card height, keep gradient premium ── */
html body #services.services-section .chip.service-chip[data-category="plomberie"],
html body #services.services-section .chip.service-chip[data-category="electricite"],
html body #services.services-section .chip.service-chip[data-category="climatisation"] {
  height: 96px !important;
  min-height: 96px !important;
  padding: 16px 12px !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  transform: none !important;
  border-color: rgba(255,255,255,0.24) !important;
  box-shadow: 0 16px 44px rgba(225,48,108,0.22),
              inset 0 1px 0 rgba(255,255,255,0.18) !important;
}

/* ── TASK 3: "Tout voir" — full-width utility pill ── */
html body #services.services-section .chip.service-chip[data-category="all"] {
  grid-column: 1 / -1 !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  flex-direction: row !important;
  gap: 8px !important;
  border-radius: 999px !important;
  padding: 0 24px !important;
  white-space: nowrap !important;
  opacity: 0.78 !important;
  justify-content: center !important;
}

/* ── TASK 4: Active state + hover in card context ── */
html body #services.services-section .chip.service-chip.active {
  background: linear-gradient(135deg, rgba(225,48,108,0.95), rgba(147,51,234,0.88)) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.26) !important;
  box-shadow: 0 20px 54px rgba(225,48,108,0.34),
              inset 0 1px 0 rgba(255,255,255,0.20) !important;
  font-weight: 700 !important;
}

html body #services.services-section .chip.service-chip:not([data-category="all"]):hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.22),
              inset 0 1px 0 rgba(255,255,255,0.10) !important;
}

html body #services.services-section .chip.service-chip.active:hover {
  transform: translateY(-4px) !important;
}

/* ── MOBILE CARD GRID (≤768px) ──────────────────────────────────── */
@media (max-width: 768px) {

  /* 3-column grid — beats prior flex/nowrap rules */
  html body:not(.fixeo-hero-search-mode) #services.services-section .category-chips,
  html body.fixeo-homepage-mode #services.services-section .category-chips,
  html body:not(.fixeo-hero-search-mode) #services.services-section.homepage-conversion-priority .category-chips,
  html body.fixeo-homepage-mode #services.services-section.homepage-conversion-priority .category-chips {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 12px 0 !important;
    margin: 12px 0 0 !important;
    overflow: visible !important;
    overflow-x: visible !important;
    border-top: none !important;
    scroll-snap-type: none !important;
    flex-wrap: unset !important;
  }

  /* Mobile cards */
  html body #services.services-section .chip.service-chip {
    height: 84px !important;
    min-height: 84px !important;
    max-height: none !important;
    padding: 12px 8px !important;
    border-radius: 18px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    text-align: center !important;
    white-space: normal !important;
    font-size: 0.78rem !important;
    line-height: 1.12 !important;
    overflow: hidden !important;
    scroll-snap-align: none !important;
    flex-shrink: unset !important;
  }

  html body #services.services-section .chip.service-chip .chip-icon {
    font-size: 1.85rem !important;
    line-height: 1 !important;
    margin: 0 !important;
  }

  /* Mobile primary chips — same card height */
  html body #services.services-section .chip.service-chip[data-category="plomberie"],
  html body #services.services-section .chip.service-chip[data-category="electricite"],
  html body #services.services-section .chip.service-chip[data-category="climatisation"] {
    height: 84px !important;
    min-height: 84px !important;
    padding: 12px 8px !important;
    flex-direction: column !important;
    transform: none !important;
  }

  /* Mobile "Tout voir" full-width pill */
  html body #services.services-section .chip.service-chip[data-category="all"] {
    grid-column: 1 / -1 !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    flex-direction: row !important;
    border-radius: 999px !important;
    font-size: 0.86rem !important;
    padding: 0 20px !important;
    white-space: nowrap !important;
  }

  /* Mobile: no hover transform */
  html body #services.services-section .chip.service-chip:hover,
  html body #services.services-section .chip.service-chip.active:hover {
    transform: none !important;
  }

}

/* ================================================================
   SERVICES CARDS — FINAL POLISH — 2026-05-02
   CSS only. services-uber-premium.css only.
   No HTML, no JS, no hero, no how-it-works.

   SPECIFICITY NOTES:
   Task 3 uses .svc-visible guard (spec 1,9,2) to ensure opacity:0
   on hidden chips (:not(.svc-visible)) is never overridden.
   Task 4 ::after: apostrophe uses U+2019 RIGHT SINGLE QUOTATION MARK.
   Task 2 primary cards use min-height:110px to accommodate ::after line.
   ================================================================ */

/* ── TASK 1: "Tout voir" — pushed last, more subtle ── */
html body #services.services-section .chip.service-chip[data-category="all"] {
  order: 999 !important;
  margin-top: 10px !important;
  opacity: 0.60 !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow: none !important;
}

/* ── TASK 2: Primary services — scale prominence + ::after accommodation ── */
html body #services.services-section .chip.service-chip[data-category="plomberie"],
html body #services.services-section .chip.service-chip[data-category="electricite"],
html body #services.services-section .chip.service-chip[data-category="climatisation"] {
  transform: scale(1.03) !important;
  z-index: 2 !important;
  min-height: 110px !important;
  height: 110px !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  box-shadow:
    0 22px 60px rgba(225,48,108,0.30),
    0 0 40px rgba(147,51,234,0.18) !important;
}

/* ── TASK 3: Soften secondary visible chips (NOT primary, NOT active) ──
   Guard: .svc-visible required so opacity:0 on hidden chips is never lost. */
html body #services.services-section .chip.service-chip.svc-visible:not([data-category="plomberie"]):not([data-category="electricite"]):not([data-category="climatisation"]):not(.active):not([data-category="all"]) {
  opacity: 0.78 !important;
}
html body #services.services-section .chip.service-chip.svc-visible:not([data-category="plomberie"]):not([data-category="electricite"]):not([data-category="climatisation"]):not(.active):not([data-category="all"]):hover {
  opacity: 1 !important;
}

/* ── TASK 4: Micro action signal on primary cards via ::after ── */
html body #services.services-section .chip.service-chip[data-category="plomberie"]::after,
html body #services.services-section .chip.service-chip[data-category="electricite"]::after,
html body #services.services-section .chip.service-chip[data-category="climatisation"]::after {
  content: "Disponible aujourd\2019hui" !important;
  display: block !important;
  font-size: 0.68rem !important;
  line-height: 1 !important;
  opacity: 0.68 !important;
  color: rgba(255,255,255,0.85) !important;
  margin-top: 4px !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
}

/* ── TASK 5: Card depth — glass gradient background ── */
html body #services.services-section .chip.service-chip {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.055),
    rgba(255,255,255,0.020)
  ) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

/* ── TASK 6: Premium hover — desktop only ── */
@media (min-width: 1024px) {

  html body #services.services-section .chip.service-chip:not([data-category="all"]):hover {
    transform: translateY(-6px) scale(1.02) !important;
    box-shadow:
      0 26px 70px rgba(0,0,0,0.35),
      0 0 40px rgba(225,48,108,0.22) !important;
  }

}

/* ── TASK 7: Mobile safety ── */
@media (max-width: 768px) {

  /* Font size + line-height */
  html body #services.services-section .chip.service-chip {
    font-size: 0.80rem !important;
    line-height: 1.1 !important;
  }

  /* Smaller ::after hint on mobile */
  html body #services.services-section .chip.service-chip::after {
    font-size: 0.62rem !important;
  }

  /* Primary cards: no scale on mobile (avoids clipping in grid) */
  html body #services.services-section .chip.service-chip[data-category="plomberie"],
  html body #services.services-section .chip.service-chip[data-category="electricite"],
  html body #services.services-section .chip.service-chip[data-category="climatisation"] {
    transform: none !important;
    height: 90px !important;
    min-height: 90px !important;
  }

  /* "Tout voir" on mobile: restore height/opacity from prior rules */
  html body #services.services-section .chip.service-chip[data-category="all"] {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    opacity: 0.70 !important;
    margin-top: 8px !important;
  }

  /* Secondary chip opacity: slightly higher on mobile (better readability) */
  html body #services.services-section .chip.service-chip.svc-visible:not([data-category="plomberie"]):not([data-category="electricite"]):not([data-category="climatisation"]):not(.active):not([data-category="all"]) {
    opacity: 0.88 !important;
  }

}

/* ================================================================
   SERVICES SECTION — FINAL UX DECISION LAYER — 2026-05-02
   CSS only. services-uber-premium.css only.
   No HTML, no JS.

   HEIGHT MATH (::after badge):
   Desktop primary — icon(38)+gap(8)+label(18)+margin(4)+badge(17)+padding(32) ≈ 117px
   → height:120px to absorb overflow safely.
   Mobile primary — icon(30)+gap(7)+label(14)+margin(3)+badge(14)+padding(24) ≈ 102px
   → height:100px / min-height:100px.

   SPECIFICITY:
   Secondary soften: .svc-visible:not() × 4 attr/class = (1,9,2)
   Beats prior T3 opacity:0.78 at same (1,9,2) → last appended wins.
   ================================================================ */

/* ── TASK 1: Visual grouping via spacing — secondary row implied by softer opacity.
   Grid order ensures primary chips (no explicit order) come before order:999 tout-voir.
   No explicit positioning change needed — handled by Tasks 2/4/5. */

/* ── TASK 2: Stronger primary border + glow (desktop) ── */
html body #services.services-section .chip.service-chip[data-category="plomberie"],
html body #services.services-section .chip.service-chip[data-category="electricite"],
html body #services.services-section .chip.service-chip[data-category="climatisation"] {
  height: 120px !important;
  min-height: 120px !important;
  border-color: rgba(255,255,255,0.34) !important;
  box-shadow:
    0 24px 70px rgba(225,48,108,0.36),
    inset 0 1px 0 rgba(255,255,255,0.18) !important;
}

/* ── TASK 3: Badge ::after — inline-flex pill style ── */
html body #services.services-section .chip.service-chip[data-category="plomberie"]::after,
html body #services.services-section .chip.service-chip[data-category="electricite"]::after,
html body #services.services-section .chip.service-chip[data-category="climatisation"]::after {
  content: "\26A1 Disponible" !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  margin-top: 4px !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.92) !important;
  background: rgba(255,255,255,0.14) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  opacity: 1 !important;
  letter-spacing: 0.01em !important;
  line-height: 1 !important;
}

/* ── TASK 4: Secondary chips — softer background + opacity ── */
html body #services.services-section .chip.service-chip.svc-visible:not([data-category="plomberie"]):not([data-category="electricite"]):not([data-category="climatisation"]):not([data-category="all"]):not(.active) {
  opacity: 0.72 !important;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.045),
    rgba(255,255,255,0.015)
  ) !important;
}
html body #services.services-section .chip.service-chip.svc-visible:not([data-category="plomberie"]):not([data-category="electricite"]):not([data-category="climatisation"]):not([data-category="all"]):not(.active):hover,
html body #services.services-section .chip.service-chip.svc-visible:not([data-category="plomberie"]):not([data-category="electricite"]):not([data-category="climatisation"]):not([data-category="all"]):not(.active):focus-visible {
  opacity: 1 !important;
}

/* ── TASK 5: "Tout voir" — secondary but discoverable ── */
html body #services.services-section .chip.service-chip[data-category="all"] {
  order: 999 !important;
  grid-column: 1 / -1 !important;
  opacity: 0.72 !important;
  margin-top: 14px !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  background: rgba(255,255,255,0.045) !important;
  border-color: rgba(255,255,255,0.10) !important;
  box-shadow: none !important;
}

/* ── TASK 6: Mobile decision clarity ── */
@media (max-width: 768px) {

  /* Primary cards height accommodates badge */
  html body #services.services-section .chip.service-chip[data-category="plomberie"],
  html body #services.services-section .chip.service-chip[data-category="electricite"],
  html body #services.services-section .chip.service-chip[data-category="climatisation"] {
    height: 100px !important;
    min-height: 100px !important;
    transform: none !important;
    border-color: rgba(255,255,255,0.28) !important;
    box-shadow:
      0 12px 36px rgba(225,48,108,0.28),
      inset 0 1px 0 rgba(255,255,255,0.14) !important;
  }

  /* Badge shorter on mobile */
  html body #services.services-section .chip.service-chip[data-category="plomberie"]::after,
  html body #services.services-section .chip.service-chip[data-category="electricite"]::after,
  html body #services.services-section .chip.service-chip[data-category="climatisation"]::after {
    content: "\26A1 Dispo" !important;
    font-size: 0.60rem !important;
    padding: 2px 6px !important;
    margin-top: 3px !important;
  }

  /* Secondary cards calmer on mobile */
  html body #services.services-section .chip.service-chip.svc-visible:not([data-category="plomberie"]):not([data-category="electricite"]):not([data-category="climatisation"]):not([data-category="all"]):not(.active) {
    opacity: 0.82 !important;
  }

  /* "Tout voir" on mobile */
  html body #services.services-section .chip.service-chip[data-category="all"] {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    opacity: 0.78 !important;
    margin-top: 10px !important;
  }

}

/* ================================================================
   SERVICES CARDS — FINAL HIERARCHY FIX — 2026-05-02
   CSS only. services-uber-premium.css only.
   No HTML, no JS.

   GRID ORDER FIX (critical context):
   DOM order is: all(0) plomberie(1) electricite(2) PEINTURE(3) climatisation(4) ...
   peinture sits between primary chips in the DOM.
   CSS order:-3/-2/-1 on primary chips floats them to positions 1/2/3.
   Secondary chips (order:0 default) auto-place after them.
   Result — Desktop 4-col row 1: [plomberie, electricite, climatisation, peinture]
   Result — Mobile  3-col row 1: [plomberie, electricite, climatisation] (clean primary row)

   SEPARATION MARGIN TARGETS (after order fix):
   Desktop: 'nettoyage' = row 2 col 1 → add margin-top to create gap after row 1
   Mobile:  'peinture'  = row 2 col 1 → add margin-top

   HEIGHT MATH:
   Primary desktop: 128px (18px pad + icon~38px + gap~8px + label~18px + gap~4px + badge~18px + 18px pad ≈ 122px → 128px safe)
   Primary mobile:  112px (14px pad + icon~30px + gap~6px + label~14px + gap~3px + badge~14px + 14px pad ≈ 109px → 112px safe)
   Secondary desktop: 88px
   Secondary mobile:  78px
   ================================================================ */

/* ── PRIMARY CHIPS: CSS order to guarantee visual position 1/2/3 in grid ── */
html body #services.services-section .chip.service-chip[data-category="plomberie"] {
  order: -3 !important;
}
html body #services.services-section .chip.service-chip[data-category="electricite"] {
  order: -2 !important;
}
html body #services.services-section .chip.service-chip[data-category="climatisation"] {
  order: -1 !important;
}

/* ── TASK 1: Primary cards physically larger ── */
html body #services.services-section .chip.service-chip[data-category="plomberie"],
html body #services.services-section .chip.service-chip[data-category="electricite"],
html body #services.services-section .chip.service-chip[data-category="climatisation"] {
  min-height: 128px !important;
  height: 128px !important;
  padding: 18px 12px !important;
}

/* ── TASK 2: Secondary cards compact ──
   .svc-visible guard: prevents fighting opacity:0 on hidden chips */
html body #services.services-section .chip.service-chip.svc-visible:not([data-category="plomberie"]):not([data-category="electricite"]):not([data-category="climatisation"]):not([data-category="all"]) {
  min-height: 88px !important;
  height: 88px !important;
}

/* ── TASK 3: Visual separation — margin-top on first secondary row ──
   Desktop 4-col: nettoyage = row 2 col 1 (first item after primary+peinture row)
   All 4 chips in row 2 get margin-top for a clean gap across the full row */
html body #services.services-section .chip.service-chip[data-category="nettoyage"],
html body #services.services-section .chip.service-chip[data-category="menuiserie"],
html body #services.services-section .chip.service-chip[data-category="serrurerie"],
html body #services.services-section .chip.service-chip[data-category="maconnerie"] {
  margin-top: 14px !important;
}

/* ── TASK 4: Badge more readable ── */
html body #services.services-section .chip.service-chip[data-category="plomberie"]::after,
html body #services.services-section .chip.service-chip[data-category="electricite"]::after,
html body #services.services-section .chip.service-chip[data-category="climatisation"]::after {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  opacity: 1 !important;
  color: #fff !important;
  background: rgba(255,255,255,0.18) !important;
  border-color: rgba(255,255,255,0.22) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18) !important;
}

/* ── TASK 5: Secondary cards calmer — opacity + reduced shadow ── */
html body #services.services-section .chip.service-chip.svc-visible:not([data-category="plomberie"]):not([data-category="electricite"]):not([data-category="climatisation"]):not([data-category="all"]):not(.active) {
  opacity: 0.70 !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.14) !important;
}
html body #services.services-section .chip.service-chip.svc-visible:not([data-category="plomberie"]):not([data-category="electricite"]):not([data-category="climatisation"]):not([data-category="all"]):hover,
html body #services.services-section .chip.service-chip.svc-visible:not([data-category="plomberie"]):not([data-category="electricite"]):not([data-category="climatisation"]):not([data-category="all"]):focus-visible {
  opacity: 1 !important;
}

/* ── MOBILE overrides ── */
@media (max-width: 768px) {

  /* Task 1 mobile: primary cards slightly larger */
  html body #services.services-section .chip.service-chip[data-category="plomberie"],
  html body #services.services-section .chip.service-chip[data-category="electricite"],
  html body #services.services-section .chip.service-chip[data-category="climatisation"] {
    min-height: 112px !important;
    height: 112px !important;
    padding: 14px 8px !important;
  }

  /* Task 2 mobile: secondary cards compact */
  html body #services.services-section .chip.service-chip.svc-visible:not([data-category="plomberie"]):not([data-category="electricite"]):not([data-category="climatisation"]):not([data-category="all"]) {
    min-height: 78px !important;
    height: 78px !important;
  }

  /* Task 3 mobile: peinture = row 2 col 1 (first secondary) + nettoyage row 2 col 2/3 */
  html body #services.services-section .chip.service-chip[data-category="peinture"],
  html body #services.services-section .chip.service-chip[data-category="nettoyage"],
  html body #services.services-section .chip.service-chip[data-category="menuiserie"] {
    margin-top: 12px !important;
  }

  /* Desktop row-2 margin reset on mobile (nettoyage/menuiserie already covered above) */
  html body #services.services-section .chip.service-chip[data-category="serrurerie"],
  html body #services.services-section .chip.service-chip[data-category="maconnerie"] {
    margin-top: 0 !important;
  }

  /* Task 4 mobile: badge smaller */
  html body #services.services-section .chip.service-chip[data-category="plomberie"]::after,
  html body #services.services-section .chip.service-chip[data-category="electricite"]::after,
  html body #services.services-section .chip.service-chip[data-category="climatisation"]::after {
    font-size: 0.62rem !important;
    padding: 3px 7px !important;
  }

}

/* ================================================================
   SERVICES SECTION — FINAL UX BREAKTHROUGH — 2026-05-02
   CSS only. services-uber-premium.css only. No HTML, no JS.

   IMPLEMENTATION NOTES:
   - position:relative added to .category-chips to anchor ::before
   - ::before creates soft glow behind primary row (not a real border)
   - Primary chips have order:-3/-2/-1 (prior block) → row 1 is theirs
   - Desktop row 1 height = 128px (primary) → ::before height:150px covers it
   - scale(0.97) on secondary chips is visual-only; no grid layout impact
   - peinture margin-top:22px desktop (new); 18px mobile (overrides prior 12px)
   ================================================================ */

/* Enable ::before positioning */
html body #services.services-section .category-chips {
  position: relative !important;
}

/* ── TASK 1: Primary zone — stronger glow, z-index anchor ── */
html body #services.services-section .chip.service-chip[data-category="plomberie"],
html body #services.services-section .chip.service-chip[data-category="electricite"],
html body #services.services-section .chip.service-chip[data-category="climatisation"] {
  position: relative !important;
  z-index: 2 !important;
  box-shadow:
    0 30px 80px rgba(225,48,108,0.35),
    0 0 40px rgba(147,51,234,0.25) !important;
}

/* ── TASK 2: Fake background container behind primary row ── */
html body #services.services-section .category-chips::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -10px !important;
  right: -10px !important;
  height: 150px !important;
  background: linear-gradient(
    180deg,
    rgba(225,48,108,0.08),
    rgba(147,51,234,0.05)
  ) !important;
  border-radius: 26px !important;
  filter: blur(18px) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* ── TASK 3: Push secondary row down — clear visual break ── */
html body #services.services-section .chip.service-chip[data-category="peinture"] {
  margin-top: 22px !important;
}

/* ── TASK 4: Badge pops harder ── */
html body #services.services-section .chip.service-chip[data-category="plomberie"]::after,
html body #services.services-section .chip.service-chip[data-category="electricite"]::after,
html body #services.services-section .chip.service-chip[data-category="climatisation"]::after {
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  background: rgba(255,255,255,0.22) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  box-shadow:
    0 8px 24px rgba(0,0,0,0.25),
    0 0 10px rgba(255,255,255,0.15) !important;
}

/* ── TASK 5: Secondary clearly lower priority ── */
html body #services.services-section .chip.service-chip.svc-visible:not([data-category="plomberie"]):not([data-category="electricite"]):not([data-category="climatisation"]):not([data-category="all"]):not(.active) {
  opacity: 0.65 !important;
  transform: scale(0.97) !important;
}
html body #services.services-section .chip.service-chip.svc-visible:not([data-category="plomberie"]):not([data-category="electricite"]):not([data-category="climatisation"]):not([data-category="all"]):hover,
html body #services.services-section .chip.service-chip.svc-visible:not([data-category="plomberie"]):not([data-category="electricite"]):not([data-category="climatisation"]):not([data-category="all"]):focus-visible {
  opacity: 1 !important;
  transform: scale(1) !important;
}

/* ── MOBILE overrides ── */
@media (max-width: 768px) {

  /* Task 3 mobile: peinture = row 2 start, needs clear gap */
  html body #services.services-section .chip.service-chip[data-category="peinture"] {
    margin-top: 18px !important;
  }

  /* Task 4 mobile: badge smaller */
  html body #services.services-section .chip.service-chip[data-category="plomberie"]::after,
  html body #services.services-section .chip.service-chip[data-category="electricite"]::after,
  html body #services.services-section .chip.service-chip[data-category="climatisation"]::after {
    font-size: 0.62rem !important;
  }

  /* Task 5 mobile: no scale transform on secondary (avoids clipping in tight grid) */
  html body #services.services-section .chip.service-chip.svc-visible:not([data-category="plomberie"]):not([data-category="electricite"]):not([data-category="climatisation"]):not([data-category="all"]):not(.active) {
    transform: none !important;
  }

  /* ::before height covers mobile primary row (112px) */
  html body #services.services-section .category-chips::before {
    height: 130px !important;
  }

}

/* ================================================================
   SERVICES — FINAL HIERARCHY LOCK — 2026-05-02
   CSS only. services-uber-premium.css only. No HTML, no JS.

   NOTE: transform:scale(1.06) uses !important — required to beat
   prior `transform:none !important` rules at same specificity.
   Mobile block resets ALL chip transforms to none !important so
   scale(0.97) secondary and scale(1.06) primary both neutralised.
   ================================================================ */

/* ── TASK 1: Primary cards visually bigger + elevated ── */
html body #services.services-section .chip.service-chip[data-category="plomberie"],
html body #services.services-section .chip.service-chip[data-category="electricite"],
html body #services.services-section .chip.service-chip[data-category="climatisation"] {
  height: 130px !important;
  min-height: 130px !important;
  transform: scale(1.06) !important;
  z-index: 3 !important;
}

/* ── TASK 2: Stronger separation below primary row ── */
html body #services.services-section .chip.service-chip[data-category="peinture"] {
  margin-top: 36px !important;
}

/* ── TASK 3: Secondary even softer ── */
html body #services.services-section .chip.service-chip.svc-visible:not([data-category="plomberie"]):not([data-category="electricite"]):not([data-category="climatisation"]):not(.active):not([data-category="all"]) {
  opacity: 0.55 !important;
}

/* ── MOBILE ── */
@media (max-width: 768px) {

  /* Task 1 mobile: primary normal height, no scale */
  html body #services.services-section .chip.service-chip[data-category="plomberie"],
  html body #services.services-section .chip.service-chip[data-category="electricite"],
  html body #services.services-section .chip.service-chip[data-category="climatisation"] {
    height: 110px !important;
    min-height: 110px !important;
  }

  /* Task 2 mobile: strong gap */
  html body #services.services-section .chip.service-chip[data-category="peinture"] {
    margin-top: 28px !important;
  }

  /* Task 4: reset ALL chip transforms on mobile — no scale anywhere */
  html body #services.services-section .chip.service-chip {
    transform: none !important;
  }

}

/* ================================================================
   UX BALANCE PASS v5 — 2026-05-09
   CSS only. services-uber-premium.css only. No HTML, no JS.

   OBJECTIVES:
   Phase A — Visual balance: primary cards less dominant, secondary
             cards clearly alive (not disabled).
   Phase B — Flow continuity: reduce dead space, lighter "Tout voir",
             fluid transition to artisans section.
   Phase C — Hero-search mode: keep services section present (not
             invisible), hide orphaned speed-hint text.
   Phase D — Mobile: verified at 360/390/412px widths.

   SPECIFICITY NOTES:
   - Primary reductions beat prior (1,x,2) rules via html prefix +
     both body-class variants → (1,4,2) or higher.
   - Secondary brightness uses .svc-visible guard chain, same as
     prior blocks — last appended wins at equal specificity.
   - Section-level padding uses #services ID (1,1,0) over .section
     class (0,1,0) and beats services-premium.css #services rule
     since we append after it.
   ================================================================ */

/* ── PHASE A: Primary cards — reduce dominance, stay premium ────── */

/* Calmer height + scale — still clearly featured, not overpowering */
html body #services.services-section .chip.service-chip[data-category="plomberie"],
html body #services.services-section .chip.service-chip[data-category="electricite"],
html body #services.services-section .chip.service-chip[data-category="climatisation"] {
  height: 108px !important;
  min-height: 108px !important;
  transform: scale(1.02) !important;
  box-shadow:
    0 14px 36px rgba(225,48,108,0.22),
    0 0 20px rgba(147,51,234,0.12),
    inset 0 1px 0 rgba(255,255,255,0.16) !important;
  border-color: rgba(255,255,255,0.22) !important;
}

/* Reduce margin that pushes secondary row too far down */
html body #services.services-section .chip.service-chip[data-category="peinture"] {
  margin-top: 16px !important;
}
html body #services.services-section .chip.service-chip[data-category="nettoyage"],
html body #services.services-section .chip.service-chip[data-category="menuiserie"],
html body #services.services-section .chip.service-chip[data-category="serrurerie"],
html body #services.services-section .chip.service-chip[data-category="maconnerie"] {
  margin-top: 0 !important;
}

/* ── PHASE A: Secondary cards — alive, not disabled ─────────────── */

/* Base secondary: opacity 0.82 (was 0.55 — felt dead) */
html body #services.services-section .chip.service-chip.svc-visible:not([data-category="plomberie"]):not([data-category="electricite"]):not([data-category="climatisation"]):not([data-category="all"]):not(.active) {
  opacity: 0.82 !important;
  transform: none !important;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.075),
    rgba(255,255,255,0.035)
  ) !important;
  border: 1px solid rgba(255,255,255,0.13) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.14),
              inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* Secondary hover: fully alive */
html body #services.services-section .chip.service-chip.svc-visible:not([data-category="plomberie"]):not([data-category="electricite"]):not([data-category="climatisation"]):not([data-category="all"]):hover,
html body #services.services-section .chip.service-chip.svc-visible:not([data-category="plomberie"]):not([data-category="electricite"]):not([data-category="climatisation"]):not([data-category="all"]):focus-visible {
  opacity: 1 !important;
  transform: translateY(-3px) !important;
  border-color: rgba(255,255,255,0.22) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.22),
              inset 0 1px 0 rgba(255,255,255,0.10) !important;
}

/* ── PHASE A: Background glow behind primary row — softer ──────── */
html body #services.services-section .category-chips::before {
  background: linear-gradient(
    180deg,
    rgba(225,48,108,0.05),
    rgba(147,51,234,0.03)
  ) !important;
  height: 125px !important;
  filter: blur(24px) !important;
}

/* ── PHASE B: Services section — tighter bottom padding ────────── */
/* Must beat homepage-conversion-optimizer.css which adds .homepage-conversion-priority */
html body #services.section.section-sm.services-section.homepage-conversion-priority,
html body #services.section.services-section.homepage-conversion-priority,
html body #services.services-section.homepage-conversion-priority,
html body:not(.fixeo-hero-search-mode) #services.services-section,
html body.fixeo-homepage-mode #services.services-section {
  padding-bottom: 24px !important;
}

/* ── PHASE B: "Tout voir" — inline pill, lighter, less footer-like  */
html body #services.services-section .chip.service-chip[data-category="all"] {
  order: 999 !important;
  grid-column: 1 / -1 !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  margin-top: 16px !important;
  opacity: 0.62 !important;
  font-size: 0.80rem !important;
  font-weight: 500 !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  box-shadow: none !important;
  letter-spacing: 0.01em !important;
  transition: opacity 0.18s ease, border-color 0.18s ease !important;
}
html body #services.services-section .chip.service-chip[data-category="all"]:hover {
  opacity: 0.90 !important;
  border-color: rgba(255,255,255,0.18) !important;
  background: rgba(255,255,255,0.04) !important;
  transform: none !important;
}

/* ── PHASE B: Vedette section — reduce top padding, fluid arrival ── */
#secondary-search-section {
  padding-top: 40px !important;
  padding-bottom: 60px !important;
}

/* ── PHASE B: service-artisans-section — zero gap when empty ──── */
#service-artisans-section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* When section has content (JS injects cards): restore spacing */
#service-artisans-section:not(:empty) {
  padding-bottom: 16px !important;
}

/* ── PHASE B: section-divider between services and artisans ─────── */
/* Collapse the divider between #services and #secondary-search-section */
#services.services-section ~ .section-divider:first-of-type {
  display: none !important;
}

/* ── PHASE C: Hero-search mode — keep section presence ─────────── */

/* Hide orphaned speed-hint text when chips are hidden */
body.fixeo-hero-search-mode #services.services-section .services-speed-hint {
  display: none !important;
}

/* Keep a minimal presence instead of total height collapse */
/* Must beat .homepage-conversion-priority selector */
body.fixeo-hero-search-mode #services.services-section,
body.fixeo-hero-search-mode #services.services-section.homepage-conversion-priority,
html body.fixeo-hero-search-mode #services.section.section-sm.services-section.homepage-conversion-priority {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  min-height: 0 !important;
}

/* Vedette section: tighter top in search mode (results are primary) */
body.fixeo-hero-search-mode #secondary-search-section {
  padding-top: 24px !important;
}

/* ── PHASE D: Mobile ≤ 768px ────────────────────────────────────── */
@media (max-width: 768px) {

  /* Primary cards — calmer on mobile, no scale */
  html body #services.services-section .chip.service-chip[data-category="plomberie"],
  html body #services.services-section .chip.service-chip[data-category="electricite"],
  html body #services.services-section .chip.service-chip[data-category="climatisation"] {
    height: 96px !important;
    min-height: 96px !important;
    transform: none !important;
    box-shadow:
      0 10px 28px rgba(225,48,108,0.20),
      inset 0 1px 0 rgba(255,255,255,0.12) !important;
  }

  /* Secondary cards — alive on mobile */
  html body #services.services-section .chip.service-chip.svc-visible:not([data-category="plomberie"]):not([data-category="electricite"]):not([data-category="climatisation"]):not([data-category="all"]):not(.active) {
    opacity: 0.86 !important;
    transform: none !important;
  }

  /* peinture row gap on mobile */
  html body #services.services-section .chip.service-chip[data-category="peinture"] {
    margin-top: 10px !important;
  }

  /* "Tout voir" on mobile */
  html body #services.services-section .chip.service-chip[data-category="all"] {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    margin-top: 12px !important;
    opacity: 0.70 !important;
    font-size: 0.80rem !important;
  }

  /* Services section: tighter on mobile */
  #services.services-section,
  body:not(.fixeo-hero-search-mode) #services.services-section {
    padding-bottom: 16px !important;
  }

  /* Vedette: less top gap on mobile */
  #secondary-search-section {
    padding-top: 28px !important;
  }

  /* No hover lift on mobile secondary */
  html body #services.services-section .chip.service-chip.svc-visible:not([data-category="plomberie"]):not([data-category="electricite"]):not([data-category="climatisation"]):not([data-category="all"]):hover {
    transform: none !important;
    opacity: 0.95 !important;
  }

  /* Badge smaller on mobile primary */
  html body #services.services-section .chip.service-chip[data-category="plomberie"]::after,
  html body #services.services-section .chip.service-chip[data-category="electricite"]::after,
  html body #services.services-section .chip.service-chip[data-category="climatisation"]::after {
    font-size: 0.60rem !important;
    padding: 2px 6px !important;
  }

}

/* ── PHASE D: Very small mobile ≤ 380px ─────────────────────────── */
@media (max-width: 380px) {

  html body #services.services-section .chip.service-chip[data-category="plomberie"],
  html body #services.services-section .chip.service-chip[data-category="electricite"],
  html body #services.services-section .chip.service-chip[data-category="climatisation"] {
    height: 88px !important;
    min-height: 88px !important;
  }

  html body #services.services-section .chip.service-chip.svc-visible:not([data-category="plomberie"]):not([data-category="electricite"]):not([data-category="climatisation"]):not([data-category="all"]):not(.active) {
    height: 72px !important;
    min-height: 72px !important;
    font-size: 0.72rem !important;
  }

}

/* ================================================================
   SEARCH UX UNIFICATION v6 — 2026-05-09
   Root cause: body.fixeo-hero-search-mode #fixeo-homepage-vedette-grid
   had `display:grid !important` (specificity 0,2,1) which beat the
   @media(max-width:640px) flex-carousel rule (0,1,1) at all times.
   Result: hero-search on mobile stacked cards vertically in a
   single column instead of the horizontal snap carousel.

   Fix: re-assert the carousel inside a scoped @media block that
   also carries the body-class selector → specificity (0,3,1) beats
   the bare (0,2,1) rule.  Desktop (>640px) keeps display:grid.

   Phase B: constrain artisans-section height in hero-search mode
   so the page doesn't balloon (3333px → ~500px on mobile).

   Phase C: ensure mini-trust strip and how-it-works section stay
   visible and properly spaced during hero-search mode.
   ================================================================ */

/* ── Phase A: Mobile carousel preserved in hero-search mode ──────
   Specificity: body.fixeo-hero-search-mode #id.class.class = (0,3,1)
   Beats bare rule at L451 (0,2,1). Appended last → also wins cascade.
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  body.fixeo-hero-search-mode #fixeo-homepage-vedette-grid.ssb2-vedette-grid,
  body.fixeo-hero-search-mode #fixeo-homepage-vedette-grid.fhp-grid,
  body.fixeo-hero-search-mode #fixeo-homepage-vedette-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 14px !important;
    padding: 8px 16px 24px !important;
    grid-template-columns: unset !important;
    align-items: stretch !important;
  }
  body.fixeo-hero-search-mode #fixeo-homepage-vedette-grid::-webkit-scrollbar {
    display: none !important;
  }
  /* Cards: same 88vw snap behaviour as homepage mode */
  body.fixeo-hero-search-mode #fixeo-homepage-vedette-grid .pvc-card,
  body.fixeo-hero-search-mode #fixeo-homepage-vedette-grid .fhp-card {
    min-width: 88vw !important;
    max-width: 88vw !important;
    width: 88vw !important;
    flex-shrink: 0 !important;
    scroll-snap-align: start !important;
  }
}

/* ── Phase B: artisans-section overflow chain fix ────────────────
   The horizontal snap carousel sits inside:
     artisans-section > .results-page-shell > .results-layout >
     .results-main-column > #fixeo-homepage-vedette-grid (flex row)
   Multiple CSS rules add overflow-x:clip to these ancestors which
   clips the carousel. We must override the ENTIRE ancestor chain.
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Unclip the ancestor chain so the flex carousel can overflow */
  body.fixeo-hero-search-mode #artisans-section,
  body.fixeo-hero-search-mode #artisans-section .container,
  body.fixeo-hero-search-mode #artisans-section .results-page-shell,
  body.fixeo-hero-search-mode #artisans-section .results-layout,
  body.fixeo-hero-search-mode #artisans-section .results-main-column,
  body.fixeo-hero-search-mode #artisans-section .results-list,
  body.fixeo-hero-search-mode #artisans-section #artisans-container.artisans-grid {
    overflow-x: visible !important;
    overflow-y: visible !important;
  }
  /* results-layout: single-column, no sidebar, no padding interference */
  body.fixeo-hero-search-mode #artisans-section .results-layout {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  body.fixeo-hero-search-mode #artisans-section .results-main-column {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding: 0 !important;
    display: block !important;
    flex-direction: unset !important;
  }
}

/* ── Phase C: trust strip + how-it-works visible in hero-search ── */
body.fixeo-hero-search-mode #fxf-mini-trust {
  display: block !important;
}
body.fixeo-hero-search-mode .how-it-works-section,
body.fixeo-hero-search-mode #how-it-works {
  display: block !important;
}

/* ── Phase D (768px): tablet hero-search stays 2-col ───────────── */
@media (max-width: 768px) and (min-width: 641px) {
  body.fixeo-hero-search-mode #fixeo-homepage-vedette-grid.ssb2-vedette-grid,
  body.fixeo-hero-search-mode #fixeo-homepage-vedette-grid.fhp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    display: grid !important;
  }
}

/* ── Snap indicator: subtle dot on mobile carousel ──────────────
   Shows users the carousel is scrollable — improves discoverability.
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  #artisans-section .fhp-grid-wrap,
  #fixeo-homepage-vedette-grid {
    position: relative !important;
  }
}

/* ══════════════════════════════════════════════════════════
   PHASE F — HERO-SEARCH SERVICES VISIBILITY (micro-patch)
   Goal: keep chips visually present + compact, not invisible.
   Append-only. Do NOT edit lines above.
   ══════════════════════════════════════════════════════════ */

/* 1 — Unblock chips/section-header in hero-search mode
        (overrides L458-464 display:none !important with display:flex !important)
        Must beat: html body.class #id.class.class.class (0,4,2) → use same or higher */
html body.fixeo-hero-search-mode #services.services-section .category-chips,
html body.fixeo-hero-search-mode #services.services-section.homepage-conversion-priority .category-chips {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}
html body.fixeo-hero-search-mode #services.services-section .category-chips::-webkit-scrollbar {
  display: none;
}

/* 2 — Section-header hidden is fine (keeps compact), svc-city-wrap hidden is fine.
        Filter-bar can stay hidden — chips are the key interactive element. */

/* 3 — Secondary appearance: dimmed + compact
        Chips stay at reduced opacity so artisan results feel primary */
html body.fixeo-hero-search-mode #services.services-section .chip.service-chip {
  opacity: 0.55 !important;
  transform: scale(0.90) !important;
  transition: opacity 160ms ease, transform 160ms ease !important;
  height: 72px !important;
  min-height: 72px !important;
}
html body.fixeo-hero-search-mode #services.services-section .chip.service-chip:hover,
html body.fixeo-hero-search-mode #services.services-section .chip.service-chip:focus {
  opacity: 0.85 !important;
  transform: scale(0.94) !important;
}

/* 4 — Section padding: enough to show chips, not too much */
body.fixeo-hero-search-mode #services.services-section,
body.fixeo-hero-search-mode #services.services-section.homepage-conversion-priority,
html body.fixeo-hero-search-mode #services.section.section-sm.services-section.homepage-conversion-priority {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  min-height: 0 !important;
}

/* 5 — Ensure chips row doesn't cause horizontal page overflow on mobile */
@media (max-width: 768px) {
  html body.fixeo-hero-search-mode #services.services-section .category-chips {
    padding-left: 8px !important;
    padding-right: 8px !important;
    gap: 6px !important;
  }
  html body.fixeo-hero-search-mode #services.services-section .chip.service-chip {
    min-width: 64px !important;
    flex-shrink: 0 !important;
    height: 64px !important;
    min-height: 64px !important;
  }
}

/* ══════════════════════════════════════════════════════════
   PHASE G — SERVICES ALWAYS VISIBLE (marketplace-first)
   Direction: Services is a primary discovery zone, never hidden.
   Overrides Phase F dimmed/compact approach.
   Append-only. Never edit lines above.
   ══════════════════════════════════════════════════════════ */

/* 1 — Restore section-header visibility in hero-search mode.
        Beats L458-464 display:none !important (spec 0,4,2)
        by using html body selector chain (0,4,2) + later position. */
html body.fixeo-hero-search-mode #services.services-section .section-header {
  display: block !important;
}

/* 2 — Restore filter-bar (city + search bar area) in hero-search mode.
        Keep it visible so user can pivot category without re-typing hero search. */
html body.fixeo-hero-search-mode #services.services-section .services-filter-bar {
  display: flex !important;
}

/* 3 — Full-opacity chips in both modes.
        Overrides Phase F opacity:0.55 / scale(0.90) — chips must feel clickable. */
html body.fixeo-hero-search-mode #services.services-section .chip.service-chip {
  opacity: 1 !important;
  transform: none !important;
  height: auto !important;
  min-height: unset !important;
}

/* 4 — Comfortable section padding in hero-search mode.
        Overrides Phase C 8px and Phase F 12px — needs real breathing room. */
body.fixeo-hero-search-mode #services.services-section,
body.fixeo-hero-search-mode #services.services-section.homepage-conversion-priority,
html body.fixeo-hero-search-mode #services.section.section-sm.services-section.homepage-conversion-priority {
  padding-top: 36px !important;
  padding-bottom: 40px !important;
  min-height: unset !important;
}

/* 5 — chips row: normal grid layout (not forced flex-nowrap from Phase F).
        Overrides Phase F display:flex + overflow-x:auto. */
html body.fixeo-hero-search-mode #services.services-section .category-chips,
html body.fixeo-hero-search-mode #services.services-section.homepage-conversion-priority .category-chips {
  display: grid !important;
  overflow-x: unset !important;
  flex-wrap: unset !important;
}

/* 6 — Mobile: keep chips grid, slightly tighter padding. */
@media (max-width: 768px) {
  body.fixeo-hero-search-mode #services.services-section,
  body.fixeo-hero-search-mode #services.services-section.homepage-conversion-priority {
    padding-top: 24px !important;
    padding-bottom: 28px !important;
  }
  html body.fixeo-hero-search-mode #services.services-section .chip.service-chip {
    height: 96px !important;
    min-height: 96px !important;
  }
}
@media (max-width: 380px) {
  html body.fixeo-hero-search-mode #services.services-section .chip.service-chip {
    height: 88px !important;
    min-height: 88px !important;
  }
}

/* ══════════════════════════════════════════════════════════
   PHASE H — SERVICES GRID COLUMNS IN HERO-SEARCH MODE
   Root cause: Phase G set display:grid but no grid-template-columns
   → browser defaulted to 1-column → 16 chips × ~90px = 1442px tall.
   Fix: explicit multi-column grid, matching homepage-mode layout.
   Append-only. Never edit lines above.
   ══════════════════════════════════════════════════════════ */

/* Desktop: 4 columns — same as homepage mode */
html body.fixeo-hero-search-mode #services.services-section .category-chips,
html body.fixeo-hero-search-mode #services.services-section.homepage-conversion-priority .category-chips {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
}

/* Tablet 641–900px: 3 columns */
@media (max-width: 900px) and (min-width: 641px) {
  html body.fixeo-hero-search-mode #services.services-section .category-chips,
  html body.fixeo-hero-search-mode #services.services-section.homepage-conversion-priority .category-chips {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }
}

/* Mobile ≤640px: 2 columns — halves single-column height */
@media (max-width: 640px) {
  html body.fixeo-hero-search-mode #services.services-section .category-chips,
  html body.fixeo-hero-search-mode #services.services-section.homepage-conversion-priority .category-chips {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}

/* Section padding: slightly tighter to reduce total height further */
body.fixeo-hero-search-mode #services.services-section,
body.fixeo-hero-search-mode #services.services-section.homepage-conversion-priority,
html body.fixeo-hero-search-mode #services.section.section-sm.services-section.homepage-conversion-priority {
  padding-top: 28px !important;
  padding-bottom: 28px !important;
}

/* Section-header margin-bottom: tighter */
html body.fixeo-hero-search-mode #services.services-section .section-header {
  margin-bottom: 16px !important;
}

/* Mobile ≤768px: tighter section padding */
@media (max-width: 768px) {
  body.fixeo-hero-search-mode #services.services-section,
  body.fixeo-hero-search-mode #services.services-section.homepage-conversion-priority {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
}

/* ══════════════════════════════════════════════════════════
   PHASE I — MAKE HERO-SEARCH MODE VISUALLY IDENTICAL TO NORMAL
   Direction: mirror every :not(.fixeo-hero-search-mode) rule
   with a body.fixeo-hero-search-mode equivalent carrying the
   exact same values. Phases F/G/H overrides are neutralised
   by these later, same-specificity declarations.
   Append-only. Never edit lines above.
   ══════════════════════════════════════════════════════════ */

/* ── 1. Section visibility: same display/padding as normal mode ── */
html body.fixeo-hero-search-mode #services.services-section,
html body.fixeo-hero-search-mode #services.services-section.homepage-conversion-priority,
html body.fixeo-hero-search-mode #services.section.section-sm.services-section.homepage-conversion-priority {
  padding-top: var(--section-padding-top, 60px) !important;
  padding-bottom: 24px !important;
  min-height: unset !important;
}

/* ── 2. Section-header: same as normal mode ── */
html body.fixeo-hero-search-mode #services.services-section .section-header {
  display: block !important;
  margin-bottom: 20px !important;
}

/* ── 3. Filter-bar: same as normal mode ── */
html body.fixeo-hero-search-mode #services.services-section .services-filter-bar {
  display: flex !important;
}

/* ── 4. Desktop chips grid: mirror of :not() rule at L800-803
        display:grid, 4-col, 14px gap — identical to normal mode ── */
html body.fixeo-hero-search-mode #services.services-section .category-chips,
html body.fixeo-hero-search-mode #services.services-section.homepage-conversion-priority .category-chips {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  max-width: 980px !important;
  margin: 18px auto 0 !important;
  padding-top: 14px !important;
  padding-bottom: 0 !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  overflow: visible !important;
  overflow-x: visible !important;
  flex-wrap: unset !important;
  scroll-snap-type: none !important;
}

/* ── 5. Chip appearance: same as normal mode (phases F/G/H overrides neutralised) ──
        .chip.service-chip already styled by html body #services rule (both modes).
        Explicit restate here so hero-search-mode overrides don't win. */
html body.fixeo-hero-search-mode #services.services-section .chip.service-chip {
  opacity: unset !important;   /* falls through to html body #services rule */
  transform: unset !important; /* falls through to html body #services rule */
  height: unset !important;
  min-height: unset !important;
  flex-shrink: unset !important;
}
html body.fixeo-hero-search-mode #services.services-section .chip.service-chip:hover,
html body.fixeo-hero-search-mode #services.services-section .chip.service-chip:focus {
  opacity: unset !important;
  transform: unset !important;
}

/* ── 6. Mobile ≤768px: mirror :not() rule at L902-905 — 3-col grid ── */
@media (max-width: 768px) {
  html body.fixeo-hero-search-mode #services.services-section .category-chips,
  html body.fixeo-hero-search-mode #services.services-section.homepage-conversion-priority .category-chips {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 12px 0 !important;
    margin: 12px 0 0 !important;
    overflow: visible !important;
    overflow-x: visible !important;
    border-top: none !important;
    scroll-snap-type: none !important;
    flex-wrap: unset !important;
  }
  html body.fixeo-hero-search-mode #services.services-section .chip.service-chip {
    height: unset !important;
    min-height: unset !important;
  }
  html body.fixeo-hero-search-mode #services.services-section,
  html body.fixeo-hero-search-mode #services.services-section.homepage-conversion-priority {
    padding-top: var(--section-padding-top, 60px) !important;
    padding-bottom: 16px !important;
  }
}

/* ── 7. Tablet overrides from Phase H (neutralise) ── */
@media (max-width: 900px) and (min-width: 641px) {
  html body.fixeo-hero-search-mode #services.services-section .category-chips,
  html body.fixeo-hero-search-mode #services.services-section.homepage-conversion-priority .category-chips {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

/* ── 8. Phase G ≤768px chip height override (neutralise) ── */
@media (max-width: 380px) {
  html body.fixeo-hero-search-mode #services.services-section .chip.service-chip {
    height: unset !important;
    min-height: unset !important;
  }
}

/* ══════════════════════════════════════════════════════════
   PHASE I — MICRO-FIX: active primary chip compressed in hero-search
   Root cause: L708-715 sets height:52px/padding:0 26px on
   .service-chip.svc-visible.active[data-category=primary] with
   specificity (1,5,2) — higher than later card overrides (1,4,2).
   In hero-search mode this was never neutralised.
   Fix: same selector + .chip class → (1,5,2), same specificity,
   appears later → wins. Restores card dimensions for active chips.
   Append-only. Never edit lines above.
   ══════════════════════════════════════════════════════════ */

html body #services.services-section .chip.service-chip.svc-visible.active[data-category="plomberie"],
html body #services.services-section .chip.service-chip.svc-visible.active[data-category="electricite"],
html body #services.services-section .chip.service-chip.svc-visible.active[data-category="climatisation"] {
  height: 120px !important;
  min-height: 120px !important;
  padding: 16px 12px !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}