@view-transition {
  navigation: auto;
}

body:has(.marques-select) {
  .et-db #et-boc .et-l .et_pb_column_10_tb_footer {
    margin-top: 0 !important;
  }
}

.products-list-wrapper {
  display: flex;
  flex-direction: column-reverse;

  .marques-select {
    margin: 25px 0;
    padding: 7px;
    font-size: 16px;
    border: none;
    scale: 1.3;
  }
}

.marques {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  align-items: center;

  .marque {
    height: 45px;
    max-width: 100px;
    max-height: 45px;

    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
}

.product-img {
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

#page-container:has(#header-univerture) {
  padding-top: 0 !important;
}

#header-univerture {
  container: header-univerture / inline-size;

  #top-header-univerture {
    @container header-univerture (max-width: 980px) {
      /* display: none !important; */
    }

    #et-secondary-nav {
      display: flex !important;
      justify-content: center;
      flex-wrap: wrap;
      padding: 0;
      gap: 15px;
      @container header-univerture (max-width: 640px) {
        flex-direction: column;
        align-items: center;
        gap: 5px;

        li:not(:first-of-type) {
          display: none !important;
        }
      }

      li {
        position: relative !important;
        font-size: 16px;
        font-weight: normal;
        font-style: normal;
        text-transform: uppercase;
        text-decoration: none;
        margin-right: 0;

        a {
          color: #fff;
          display: inline-block;
          text-align: center;

          &:not([href]) {
            cursor: default;
          }

          &::before {
            font-family: "icomoon" !important;
            color: #1497da;
            margin-right: 6px;
            font-size: 25px;
            vertical-align: bottom;
          }
        }

        &.info-city {
          margin-right: auto;
          @container header-univerture (max-width: 640px) {
            margin-right: 0;
          }

          a:first-of-type:before {
            content: "\e900";

            .city-name {
              font-weight: bold;
            }
          }
        }

        &.info-number a:first-of-type:before {
          content: "\e901";
        }
        &.info-number a:not(:first-of-type):before {
          content: none !important;
        }
        &.info-mail a:first-of-type:before {
          content: "\e902";
        }

        &.info-quote a:first-of-type:before {
          content: "\e904";
        }

        &.info-cata {
          margin-left: 0;

          @media (max-width: 980px) {
            display: none !important;
          }

          a {
            position: relative;
            padding-left: 30px;

            &:before {
              content: "";
              background: url(https://univerture.com/wp-content/uploads/2020/09/catalog-icon.png);
              background-size: contain;
              width: 25px;
              height: 25px;
              position: absolute;
              background-repeat: no-repeat;
              left: 0px;
            }
          }
        }
      }
    }
  }

  #main-header-univerture {
    .et_pb_column {
      display: flex;
      align-items: center;
      gap: 15px;
      padding-top: 40px;
      padding-bottom: 40px;
      padding-left: 240px;
      transition: padding 250ms ease-in-out;

      @container header-univerture (max-width: 980px) {
        flex-wrap: wrap;
        padding-left: 0;
        padding-top: 30px;
        padding-bottom: 30px;
      }

      #logo-header-wrapper {
        position: absolute;
        left: 0;
        top: 5%;
        margin: 0px;
        height: 110%;
        max-height: 110%;
        transition: all 250ms ease-in-out;
        z-index: 2;

        @container header-univerture (max-width: 980px) {
          left: 50%;
          translate: -50%;
          max-width: 40cqi;
        }

        * {
          height: 100%;
        }

        .acf_image {
          width: 100%;
          max-width: 230px !important;
          object-fit: contain;
        }
      }

      .et_pb_menu {
        flex-grow: 1;
        margin: 0;
        opacity: 1;
        transition: all 350ms ease-in-out;
        translate: 0 0;

        @container header-univerture (max-width: 980px) {
          width: calc(100%);
        }

        .et_mobile_menu {
          width: 90cqi;
          background: #fff !important;
          translate: 0 40px;
        }

        .et_pb_menu__wrap,
        .et_pb_menu__menu,
        .et-menu-nav {
          width: 100%;
          background: none;
        }

        #menu-menu {
          display: flex;
          gap: 10px;
          justify-content: space-evenly;
          flex-wrap: nowrap;

          li {
            margin: 0;
            padding: 0;

            a {
              padding: 8px 0;
              position: relative;
            }

            &.menu-item-has-children {
              a {
                padding-right: 20px;

                &::after {
                  top: 50%;
                  right: 5px;
                  translate: 0 -50%;
                }
              }
              .sub-menu {
                background: #fff !important;

                flex-direction: column;
                justify-content: center;
                text-align: center;

                li {
                  width: 100%;
                  padding: 0;

                  a {
                    padding: 8px 20px;
                    width: 100%;
                    display: block;
                    text-align: center;

                    &:hover {
                      background: #f5f5f5;
                    }
                  }
                }
              }

              &:hover .sub-menu {
                display: flex;
              }
            }
          }
        }
      }

      #divi_top_search_wrapper {
        margin: 0;
        opacity: 1;
        transition: all 350ms ease-in-out;
        translate: 0 0;

        @container header-univerture (max-width: 980px) {
          position: absolute;
          right: 45px;
        }

        #et_top_search {
          position: relative;
          width: 25px;
          height: 25px;
          margin: 0;
          bottom: unset;
          right: unset;
          cursor: pointer;

          #et_search_icon {
            font-size: 25px;
            color: #1497da;
            width: 25px;
            aspect-ratio: 1/1;

            &::before {
              content: url("../img/search_icon.svg");
              width: 100%;
              height: 100%;
              position: absolute;
              left: 0;
              top: 0;
            }
          }
        }
      }

      &:has(.et_pb_search_visible) {
        .et_pb_menu,
        #divi_top_search_wrapper {
          animation-delay: 150ms;
          translate: 0 25px;
          opacity: 0;
        }
      }

      #main-header-search-bar-wrapper {
        top: 50%;
        translate: 0 -50%;
        position: absolute;
        pointer-events: none;
        z-index: 3;

        &:has(.et_pb_search_visible) {
          pointer-events: all;
        }

        .et_search_form_container {
          width: 100%;
          padding-left: 240px;
          height: auto;

          @container header-univerture (max-width: 980px) {
            padding-left: 0;
            width: 90%;
          }

          &.et_pb_search_form_hidden {
            pointer-events: none;
          }

          .search-bar {
            width: 100% !important;
            max-width: 100% !important;
            display: flex;
            align-items: center;
            position: relative;
            height: fit-content;

            form {
              flex-grow: 1;

              ul {
                padding: 0;

                li {
                  padding: 0;

                  label {
                    width: 100%;

                    input {
                      width: 100%;
                      box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
                    }
                  }
                }
              }
            }

            .et_close_search_field {
              display: block;
              width: 30px;
              height: 30px;
              position: relative;
              margin: 0;
            }
          }
        }
      }
    }
  }

  &.et_pb_sticky {
    #main-header-univerture {
      .et_pb_column {
        padding-top: 20px;
        padding-bottom: 20px;

        .et_pb_menu {
          flex-grow: 1;
          margin: 0;

          .et_mobile_menu {
            translate: 0 20px;
          }
        }
      }
    }
  }
}

*:has(> .acf_image) {
  height: inherit;
  max-height: inherit;
}

/* Slider Home */

.slider-home-2 {
  .slick-dots {
    text-align: right;
    width: 370px;
    right: 0;
    padding: 0px 12% 0px 13% !important;
    bottom: 14px;

    @media (max-width: 980px) {
      text-align: center;
      width: 100%;
    }

    li,
    li button,
    li button:before {
      width: 13px;
      height: 13px;
    }

    li button:before {
      color: #fff;
      opacity: 1;
      font-size: 13px;
      line-height: 13px;
    }

    li.slick-active button:before {
      color: #3a3f44;
      opacity: 1;
    }
  }
  .slick-track {
    display: grid !important;
    grid-auto-flow: column;
  }

  .slide {
    display: grid !important;
    height: 100%;
    grid-template-columns: 70% 30%;

    & > div {
      width: unset !important;
    }

    @media (max-width: 980px) {
      grid-template-columns: 100%;
      grid-template-rows: subgrid;
      grid-row: span 2;
    }
    .photo-slide-wrapper {
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .mob {
        display: none;
        @media (max-width: 500px) {
          display: block;
        }
      }
      .desk {
        display: block;
        @media (max-width: 500px) {
          display: none;
        }
      }
    }

    .texte-slide {
      display: flex;
      justify-content: center;
      flex-direction: column;
      background-color: #1497e0;

      height: 100%;
      padding: 60px;

      @media (max-width: 980px) {
        padding: 20px 5% 50px 5% !important;
      }

      .et_pb_text.surtitre {
        font-family: "Roboto Condensed", Helvetica, Arial, Lucida, sans-serif;
        text-transform: uppercase;
        font-size: 17px;

        @media (max-width: 980px) {
          margin-bottom: 0px !important;
          p {
            padding-bottom: 0px !important;
          }
        }
      }

      .et_pb_text.titre-blanc {
        font-family: "Roboto Condensed", Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        color: #fff;
        text-transform: uppercase;
        font-size: 25px;
        line-height: 1.2;
        margin-top: 18px !important;

        @media (max-width: 980px) {
          margin-top: 16px !important;
          margin-bottom: 16px !important;
          font-size: 20px;
          p {
            padding-bottom: 0px !important;
          }
        }
      }

      .et_pb_button_module_wrapper {
        margin-top: 36px !important;
        @media (max-width: 980px) {
          margin-top: 18px !important;
        }

        .et_pb_button {
          color: #3a3f44 !important;
          border-width: 0px !important;
          border-radius: 0px;
          font-size: 16px;
          font-family:
            "Roboto Condensed", Helvetica, Arial, Lucida, sans-serif !important;
          font-weight: 700 !important;
          text-transform: uppercase !important;
          background-color: #ffffff;
          padding-right: 57px !important;
          padding-left: 23px !important;
          box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.3);

          &:hover {
            background-color: #182d4c !important;
            color: #fff !important;
          }

          &:after {
            opacity: 1;
            margin-left: 0.3em !important;
            font-size: 16px !important;
            line-height: inherit;
            content: attr(data-icon);
            opacity: 1;
            color: #1497e0;
          }
        }
      }
    }
  }
}