/* .page-template-page-origine-et-qualite-php { */
#mapContainer {
  #mapBloc {
    .leaflet-pane {
      .leaflet-marker-icon {
        span {
          font-family: "DeliciousHandrawn";
          font-size: 30px;
          line-height: 24px;
        }
      }
    }
    .leaflet-popup.produit {
      .leaflet-popup-content {
        width: 460px;

        .top {
          display: flex;
          align-items: flex-start;
          gap: 20px;
          padding: 1em;
          border-bottom: 1px solid #dddddd;

          .product-list-item {
            flex: 0 0 110px;
            /* overflow: hidden; */
            position: relative;
            box-shadow: 0 3px 11px rgb(0 0 0 / 12%);
            transition: all ease-in-out 0.3s;
            border-radius: 10px;
            background: #fff;

            & > div {
              display: flex;
              flex-direction: column;
              align-items: flex-start;
              padding: 5px;

              .product-image {
                width: 100%;

                a {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  overflow: hidden;
                  aspect-ratio: 800/960;
                  width: 100%;
                  mask-image: url(../img/masks/vignette-produit.svg),
                    linear-gradient(
                      transparent,
                      transparent calc(100%),
                      #2c2121 calc(100%),
                      black
                    );
                  mask-repeat: no-repeat;
                  mask-size: 100% 100%;
                  mask-position: center center;

                  img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    transition: all ease-in-out 0.3s;
                  }
                }
              }

              .product-bottom {
                position: relative;
                margin-top: 1rem;
                width: 100%;

                .product-labels {
                  position: absolute;
                  bottom: 30px;
                  right: -0.5rem;
                  display: flex;
                  align-items: center;
                  /* transform: translateY(-120%); */
                  gap: 10px;

                  a {
                    display: block;

                    img {
                      height: auto;
                      width: 60px;
                    }
                  }
                }

                .product-title {
                  text-align: left;

                  a {
                    color: #000;
                    font-size: 18px;
                  }
                }
              }
            }

            .labels {
              position: absolute;
              top: -20px;
              right: -20px;

              img {
                width: 40px;
                height: 40px;
              }
            }
          }
          .title {
            h2 {
              font-size: 28px;
              line-height: 28px;
            }
          }
        }
        .details-data {
          padding: 1em;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 5px;
          font-size: 14px;
          line-height: 24px;
          .etablissement {
            font-weight: 900;
          }
          .categorie {
            font-size: 16px !important;
            font-weight: 900;
            position: relative;
            display: flex;
            align-items: center;
            gap: 10px;
            &:before {
              content: "";
              display: block;
              background-repeat: no-repeat;
              background-size: cover;
            }
            &.boissons {
              &:before {
                background-image: url(../img/produits/boissons.svg);
                width: 13px;
                height: 34px;
              }
            }
            &.condiments-et-miel {
              &:before {
                background-image: url(../img/produits/condiments-et-miel.svg);
                width: 40px;
                height: 25px;
              }
            }
            &.fromages-et-produits-laitiers {
              &:before {
                background-image: url(../img/produits/fromages-et-produits-laitiers.svg);
                width: 28px;
                height: 31px;
              }
            }
            &.fruits {
              &:before {
                background-image: url(../img/produits/fruits.svg);
                width: 17px;
                height: 35px;
              }
            }
            &.legumes {
              &:before {
                background-image: url(../img/produits/legumes.svg);
                width: 23px;
                height: 27px;
              }
            }
            &.poissons-fruits-de-mer {
              &:before {
                background-image: url(../img/produits/poissons-fruits-de-mer.svg);
                width: 50px;
                height: 25px;
              }
            }

            &.specialites {
              &:before {
                background-image: url(../img/produits/specialites.svg);
                width: 29px;
                height: 25px;
              }
            }
            &.viandes {
              &:before {
                background-image: url(../img/produits/viandes.svg);
                width: 30px;
                height: 22px;
              }
            }
          }
          .adresse {
            text-align: center;
          }
          .site_web,
          .email {
            a {
              font-size: 14px !important;
              font-family: "Inter", sans-serif !important;
              font-weight: 100 !important;
            }
          }
          .tel {
          }
          .email {
          }
        }
      }
    }

    .leaflet-popup.entreprise {
      .leaflet-popup-content {
        width: 460px !important;

        @media screen and (max-width: 800px) {
          width: 250px !important;
        }
        .top {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          gap: 20px;

          .company-list-item {
            /* overflow: hidden; */
            position: relative;

            & > div {
              display: flex;
              align-items: center;
              justify-content: center;
              flex-direction: column;
              gap: 10px;
              padding: 5px;
              font-family: "Inter", sans-serif;

              .title {
                h2 {
                  font-family: "Inter", sans-serif;
                  font-size: 18px;
                  font-weight: 900;
                  @media screen and (max-width: 800px) {
                    font-size: 18px !important;
                    line-height: 31px !important;
                  }
                }
              }

              .adresse {
                text-align: center;
                font-size: 14px;
              }

              .site_web,
              .email {
                position: relative;
                padding-left: 2em;
                &:before {
                  content: "";
                  position: absolute;
                  left: 0;
                }
                a {
                  font-size: 14px !important;
                  font-family: "Inter", sans-serif !important;
                  font-weight: 100 !important;
                }
              }
              .email {
                &:before {
                  background-image: url(../img/enveloppe.svg);
                  width: 17px;
                  height: 15px;
                }
                a {
                }
              }

              .site_web {
                &:before {
                  background-image: url(../img/curseur.svg);
                  width: 18px;
                  height: 18px;
                }
                a {
                }
              }

              .medailles-list {
                width: 400px;
                padding: 20px 0;
                position: relative;
                border-top: 1px solid #dddddd;
                display: block;
                height: 190px;
                &.js-ready {
                  .items {
                    display: block;
                  }
                  #loader {
                    display: none;
                  }
                  &.not-slick {
                    .items {
                      display: flex;
                    }
                  }
                }
                @media screen and (max-width: 800px) {
                  width: 125px;
                }
                #loader {
                  display: block;
                }
                .items {
                  display: none;
                }
                .slick-list {
                  height: 150px;
                }
                .item {
                  position: relative;
                  min-height: 125px;
                  width: 125px !important;

                  .inner-item {
                    box-shadow: 0 3px 11px rgb(0 0 0 / 12%);
                    transition: all ease-in-out 0.3s;
                    border-radius: 10px;
                    background: #fff;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    padding: 10px;
                    margin: 0 10px;

                    .img-medaille {
                      width: 50px;
                      height: 56px;
                      background-repeat: no-repeat;
                      background-size: cover;

                      &.saveur-dor {
                        background-image: url(../img/concours-saveur-or.svg);
                      }

                      &.saveur-dargent {
                        background-image: url(../img/concours-saveur-argent.svg);
                      }

                      &.saveur-de-bronze {
                        background-image: url(../img/concours-saveur-bronze.svg);
                      }

                      &.mention-speciale-du-jury {
                        background-image: url(../img/concours-saveur-mention-speciale-jury.svg);
                      }
                    }

                    h4.nom-produit {
                      font-size: 0.8rem;
                      line-height: 0.8rem;
                      margin: 5px 0 0px 0;

                      & + .produit {
                        margin: 0;
                      }
                    }

                    .produit {
                      font-family: "DeliciousHandrawn";
                      font-size: 18px;
                      line-height: 20px;
                      font-weight: 100;
                      text-align: center;
                      margin: 10px 0;
                    }
                  }
                }
              }
              .slick-slider {
                & .slick-arrow {
                  position: absolute;
                  width: 26px !important;
                  height: 12px !important;
                  top: 0;
                  bottom: 0;
                  margin: auto 0;
                  &::before {
                    width: 26px !important;
                    height: 12px !important;
                    background-size: contain;
                  }
                  &.slick-prev {
                    left: -30px;
                  }
                  &.slick-next {
                    right: 0px !important;
                  }
                }
              }
            }
          }
        }
      }

      &.popupFiche {
        text-align: center;
        h2 {
          color: var(--yellow-color);
          font-weight: 100;
        }
        .popupTypeDePoduit {
          font-size: 1rem;
          font-weight: 600;
          text-align: center;

          &:empty {
            display: none;
          }
        }

        .popupAdresse {
          font-size: 1rem;
          text-align: center;
        }

        .popupContact {
          display: flex;
          flex-wrap: wrap;
          gap: 0.25rem 1rem;
          width: 100%;
          justify-content: center;
          flex-direction: column;
          align-items: center;
          .contactItem {
            display: flex;
            gap: 0.5rem;

            .contactTitle {
              display: none;
            }
            .contactValue {
              font-weight: 500;
              a {
                display: block;
                max-width: 300px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
            }
          }
        }
      }
    }
  }
}

/* } */

.page-template-page-exploration-gourmande {
  .page-header {
    padding-bottom: 4rem !important;
  }

  #pageContent {
    position: relative;
    z-index: 1;

    &::before {
      content: "";
      position: absolute;
      top: -250px;
      left: 0;
      width: 250px;
      height: 100%;
      background: url(../img/svg/bg-produits-topo.svg) 0px 0px no-repeat;
      z-index: 0;
    }

    & > section,
    & > div {
      position: relative;
      z-index: 10;
    }

    & > div {
      padding-bottom: 6rem;
      background: #fff url(../img/svg/bg-origine.svg) 0% 50% no-repeat !important;

      & > section {
        position: relative;
        z-index: 10;
      }

      &::after {
        content: "";
        background: url(../img/svg/bg-origine-right.svg) 100% 83% no-repeat !important;
        position: absolute;
        z-index: 0;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
      }
    }

    #labelsList {
      margin: 3rem 0;

      h2 {
        font-family: "Inter";
        font-size: 30px;
        font-weight: 100;

        span {
          font-family: "DeliciousHandrawn";
          color: var(--yellow-color);
          font-size: 70px;
        }

        p {
          font-weight: 600;
          font-size: 30px;
        }
      }

      .parentItem {
        margin: 3rem 0 4rem;

        h3 {
          font-family: "DeliciousHandrawn";
          font-weight: 100;
          font-size: 40px;
          margin-bottom: 3rem;
        }

        .labels-list-items {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          gap: 3rem;

          .label-item {
            flex: 0 0 calc(25% - 2.25rem);
            text-align: center;
            font-size: 18px;
            transition: all 0.3s ease-in-out;

            .labelImage {
              display: flex;
              /* align-items: center; */
              justify-content: center;
              aspect-ratio: 1/1;
              width: 65%;
              margin: 0 auto 1rem;

              img {
                width: auto;
                height: auto;
              }
            }

            .labelContentText {
              margin-bottom: 1.5rem;

              h4 {
                font-size: 18px;
                line-height: 2rem;
              }
            }

            &:hover {
              transform: scale(1.1) rotate(2deg);
            }
          }
        }
      }
    }

    #SIQO {
      margin: 4rem 0 0;

      .inner {
        padding: 4rem 0;

        h2 {
          font-size: 70px;
          margin-bottom: 1.5rem;
          font-family: "DeliciousHandrawn";
          text-transform: initial;
          font-weight: 100;
          line-height: 70px;

          p {
            font-size: 30px;
            font-family: "Inter";
            font-weight: 600;
            color: #000;
          }
        }

        & > p {
          text-align: center;
        }
      }

      #mapContainer {
        position: relative;

        #mapBloc {
          height: 74vh;
          width: calc(100% - 25%);
          margin-left: auto;
        }

        #mapFilter {
          position: absolute;
          background: var(--yellow-color);
          width: 25%;
          height: 100%;
          z-index: 10;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: center;
          padding: 3rem;
          gap: 0.75rem;

          .label-item {
            display: flex;
            align-items: flex-start;

            input {
              clip: inherit !important;
              flex: 0 0 20px !important;
              height: 20px !important;
              position: relative !important;
              margin-right: 0.5rem;
              top: 3px;
            }

            .labelDetails {
              display: flex;
              align-items: flex-start;

              img {
                width: 32px;
                height: auto;
                max-height: 32px;
                margin-right: 0.5rem;
              }
            }
          }

          .medaille-item {
            display: flex;
            align-items: flex-start;

            input {
              clip: inherit !important;
              flex: 0 0 20px !important;
              height: 20px !important;
              position: relative !important;
              margin-right: 0.5rem;
              top: 3px;
            }

            .medailleDetails {
              display: flex;
              align-items: flex-start;

              img {
                width: 32px;
                height: auto;
                max-height: 32px;
                margin-right: 0.5rem;
              }
            }
          }
        }
      }
    }
  }
}

#mapContainer {
  #loader {
    position: absolute;
    z-index: 999999999;
    display: none;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
  }
}