.btn-produit {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='21' viewBox='0 0 20 21' fill='none'%3E%3Cpath d='M17.5 10.5C17.5 12.1666 14.5833 16.3333 10 16.3333C5.41667 16.3333 2.5 12.1666 2.5 10.5C2.5 8.83329 5.41667 4.66663 10 4.66663C14.5833 4.66663 17.5 8.83329 17.5 10.5Z' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12.5 10.5C12.5 11.8807 11.3807 13 10 13C8.61929 13 7.5 11.8807 7.5 10.5C7.5 9.11925 8.61929 7.99996 10 7.99996C11.3807 7.99996 12.5 9.11925 12.5 10.5Z' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  display: block;
  width: 100%;
  background-repeat: no-repeat;
  text-align: center;
  padding-left: 35px;
  background-position-x: calc(50% - 55px);
  background-position-y: 9px;
}

.product-card {
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1.5rem;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.product-card:hover .btn-produit {
  --tw-bg-opacity: 1;
  background-color: rgb(138 44 13 / var(--tw-bg-opacity, 1));
}

.product-card img {
  width: 100%;
}

/*** Small listing 3cols ***/

.product-card {
  width: 100%;
}

@media (min-width: 700px) {

.product-card {
    width: calc(50% - 8px)
}
  }

@media (min-width: 1150px) {

.product-card {
    width: calc((100%/3) - 12px)
}
  }

/**** Big listing 4cols ***/

.all-product .product-card {
  width: 100%;
}

@media (min-width: 700px) {

.all-product .product-card {
    width: calc(50% - 8px)
}
  }

@media (min-width: 1150px) {

.all-product .product-card {
    width: calc(25% - 12px)
}
  }

.tag {
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  align-items: center;
  white-space: nowrap;
  border-radius: 0.375rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  padding-top: 2px;
  padding-bottom: 2px;
}

.tag-agriculture {
  --tw-bg-opacity: 1;
  background-color: rgb(222 247 236 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(23 83 78 / var(--tw-text-opacity, 1));
}

.tag-verger,
.tag-lamiers-sur-telescopique {
  --tw-bg-opacity: 1;
  background-color: rgb(229 237 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(66 56 157 / var(--tw-text-opacity, 1));
}

.tag-accoroutiste,
.tag-lamiers-delagage {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}

.tag-ferroviaire,
.tag-lamiers-sur-pelle {
  --tw-bg-opacity: 1;
  background-color: rgb(253 246 178 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(114 59 19 / var(--tw-text-opacity, 1));
}

.tag-travaux-publics {
  --tw-bg-opacity: 1;
  background-color: rgb(254 236 220 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(138 44 13 / var(--tw-text-opacity, 1));
}

.tag-forets,
.tag-lamiers-sur-chargeur {
  --tw-bg-opacity: 1;
  background-color: rgb(252 232 243 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(153 21 75 / var(--tw-text-opacity, 1));
}

.tag-coupeuse-de-cannes-a-sucre,
.tag-canne-a-sucre {
  --tw-bg-opacity: 1;
  background-color: rgb(237 235 254 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(85 33 181 / var(--tw-text-opacity, 1));
}

.tag-municipalite {
  --tw-bg-opacity: 1;
  background-color: rgb(225 239 254 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(30 66 159 / var(--tw-text-opacity, 1));
}

.tag-vergers,
.tag-tailleuses-arboricoles {
  --tw-bg-opacity: 1;
  background-color: rgb(213 245 246 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(5 80 92 / var(--tw-text-opacity, 1));
}

.tag-entretien-des-espaces-verts,
.tag-taille-haies {
  --tw-bg-opacity: 1;
  background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(6 95 70 / var(--tw-text-opacity, 1));
}

#filters {
  min-width: 80%;
  max-width: 250px;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 60;
  height: 100svh;
  width: 100svw;
  overflow-y: scroll;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1.25rem;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (min-width: 900px) {

#filters {
    min-width: 260px;
    position: relative;
    z-index: 10;
    height: -moz-fit-content;
    height: fit-content;
    width: auto;
    overflow: auto;
    border-radius: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem
}
  }

.filter-block.active {
  display: block;
}

#activite-ok:after,
#metier-ok:after {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M8 10.1392C9.06206 11.601 10.3071 12.9104 11.7021 14.0334C11.8774 14.1744 12.1226 14.1744 12.2979 14.0334C13.6929 12.9104 14.9379 11.601 16 10.1392' stroke='%23057A55' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  height: 1.5rem;
  width: 1.5rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.big-title {
  font-weight: 800;
  font-size: 28px;
}

@media (min-width: 992px) {

.big-title {
    font-size: 32px
}
  }

.accordion {
  width: 100%;
  cursor: pointer;
}

.panel {
  max-height: none;
  overflow: hidden;
  transition: none; /* Désactive la transition au chargement */
}

/* Une fois que le JavaScript est chargé, active la transition */

.js-enabled .panel {
  transition: max-height 0.3s ease-out;
}

/* Classe pour les panels ouverts */

.js-enabled .panel.open {
  max-height: 1000px; /* Une valeur suffisante pour couvrir le contenu */
}

.accordion svg {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.accordion.active svg {
  --tw-rotate: 0deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.filter-icon-block {
  display: flex;
  cursor: pointer;
  align-items: center;
  gap: 0.75rem;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  height: 70px;
}

.filter-icon-block.active {
  --tw-border-opacity: 1;
  border-color: rgb(255 98 42 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 248 241 / var(--tw-bg-opacity, 1));
}

.filter-icon-block.active svg path {
  stroke: #FF622A;
}

.filter-icon-block.active span {
  --tw-text-opacity: 1;
  color: rgb(255 98 42 / var(--tw-text-opacity, 1));
}

.filter-icon-block span {
  font-weight: 600;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.rounded-4 {
  border-radius: 4px;
}

@media (min-width: 1150px) {

.rounded-4 {
    border-radius: 1rem;
  }}

.block-seo h3 {
  margin-bottom: 1.5rem;
  font-weight: 800;
    font-size: 28px;
}

.block-seo .text-left p {
  margin-bottom: 1.5rem;
}

.paire-block {
  flex-direction: column;
}

@media (min-width: 900px) {

.paire-block {
    flex-direction: row-reverse;
  }
  }

.check_item {
  display: flex;
  gap: 0.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}