:where([class^="ri-"])::before { content: "\f3c2"; }
.search-container {
  background-image: linear-gradient(
      rgba(76, 78, 205, 0.35), 
      rgba(76, 78, 205, 0.45)
    ),
    url('https://readdy.ai/api/search-image?query=construction%20professionals%20working%20on%20a%20modern%20building%20site%20with%20blueprints%20and%20equipment%2C%20soft%20lighting%2C%20blurred%20background%2C%20professional%20atmosphere%2C%20clean%20and%20organized%20construction%20site%2C%20with%20natural%20daylight&width=1600&height=800&seq=hero-bg-123&orientation=landscape');
  background-size: cover;
  background-position: center;

}
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
  }
  .custom-checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
  }
  .custom-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  }
  .checkmark {
  height: 20px;
  width: 20px;
  background-color: #fff;
  border: 2px solid #e2e8f0;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  .custom-checkbox input:checked ~ .checkmark {
  background-color: #4c4ecd;
  border-color: #4c4ecd;
  }
  .checkmark:after {
  content: "";
  display: none;
  }
  .custom-checkbox input:checked ~ .checkmark:after {
  display: block;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  }
  .custom-radio {
  display: flex;
  align-items: center;
  cursor: pointer;
  }
  .custom-radio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  }
  .radiomark {
  height: 20px;
  width: 20px;
  background-color: #fff;
  border: 2px solid #e2e8f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  .custom-radio input:checked ~ .radiomark {
  border-color: #4c4ecd;
  }
  .radiomark:after {
  content: "";
  display: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4c4ecd;
  }
  .custom-radio input:checked ~ .radiomark:after {
  display: block;
  }
  .switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 24px;
  }
  .switch input {
  opacity: 0;
  width: 0;
  height: 0;
  }
  .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #e2e8f0;
  transition: .4s;
  border-radius: 24px;
  }
  .slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
  }
  input:checked + .slider {
  background-color: #4c4ecd;
  }
  input:checked + .slider:before {
  transform: translateX(22px);
  }
  .category-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px -5px rgba(76, 78, 205, 0.1), 0 10px 10px -5px rgba(76, 78, 205, 0.04);
  }
  .category-card:hover .category-icon {
  background-color: rgba(76, 78, 205, 0.1);
  color: #4c4ecd;
  }


  /* Transition douce pour le dropdown */
  #categories-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
  }

  /* Quand le menu est visible */
  #categories-menu.show {
    max-height: 500px; /* assez grand pour contenir le menu */
    opacity: 1;
    pointer-events: auto;
  }


  .pro-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px -5px rgba(76, 78, 205, 0.1), 0 10px 10px -5px rgba(76, 78, 205, 0.04);
  }

.gallery-img {
    transition: transform 0.3s ease;
}

.gallery-img:hover {
    transform: scale(1.05);
}

div[style*="z-index: 1000000"][style*="position: absolute"][style*="bottom: 0px"][style*="left: 0px"] {
  display: none !important;
}

div[style*="display: inline-flex"][style*="position: absolute"][style*="right: 0px"][style*="bottom: 0px"] {
  display: none !important;
}

.gm-style-moc {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Cibler précisément les images SVG dans le contrôle zoom Google Maps */
/* Cibler le div principal par sa couleur de fond inline */
div[style*="background-color: rgb(229, 227, 223)"] {
  height: 100% !important;
  width: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  background-color: rgb(229, 227, 223) !important;
}

/* Forcer le bouton dans ce div (premier button positionné) */
div[style*="background-color: rgb(229, 227, 223)"] > div > button {
  background: transparent !important;
  display: block !important;
  border-width: medium !important;
  margin: 0 !important;
  padding: 0 !important;
  text-transform: none !important;
  appearance: none !important;
  position: absolute !important;
  cursor: pointer !important;
  user-select: none !important;
  z-index: 1000002 !important;
  outline-offset: 3px !important;
  right: 0 !important;
  bottom: 0 !important;
  transform: translateX(100%) !important;
}

/* Forcer la carte (div avec aria-label="Carte") */
div[aria-label="Carte"] {
  position: absolute !important;
  height: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  border-width: 0 !important;
  margin: 0 !important;
  left: 0 !important;
  top: 0 !important;
}

/* Forcer les contrôles de zoom (boutons sous .gmnoprint) */
.gmnoprint button {
  background: rgb(255, 255, 255) !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  text-transform: none !important;
  appearance: none !important;
  position: relative !important;
  cursor: pointer !important;
  user-select: none !important;
  overflow: hidden !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 100% !important;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px !important;
}

/* Exemple pour forcer l'opacité ou l'affichage de certains éléments */
.gm-style-moc {
  opacity: 0 !important;
  display: none !important;
}