/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */
*:focus {
  outline: none;
}

body.no-scroll {
  overflow-y: hidden !important;
}

#sticky-header {
  transform: translateY(-100%);
  opacity: 0;
  transition: all 300ms ease-in-out;
}
#sticky-header.show {
  opacity: 1;
  transform: translateY(0);
}
.diago-trapeze-001, .slide-in-on-scroll, .swiper-wrapper {
  clip-path: polygon(0 0%, 100% 0%, 100% 0, 0 0);
  -webkit-clip-path: polygon(0 0%, 100% 0%, 100% 0, 0 0);
}

#grid-img-01 {
  clip-path: polygon(0 0, 100% 0, 100% 0%, 0 0%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 0%, 0 0%);
}
#grid-img-02 {

    clip-path: polygon(0 100%, 0% 100%, 100% 100%, 100% 100%, 28.86% 100%);
  -webkit-clip-path: polygon(0 100%, 0% 100%, 100% 100%, 100% 100%, 28.86% 100%);
}
#grid-img-03 {
  clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%);
  -webkit-clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%);
}
#logo-scroll-top {
  cursor: pointer;
}
.slide-in-on-scroll.showed, .swiper-wrapper.showed, .grid-img:not(#grid-img-02).showed {
  animation: slideInShow 0.6s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
#grid-img-02.showed {
  animation: slideInShowAndMorph 1.4s cubic-bezier(0.85, 0, 0.15, 1) forwards;
}
.elementor-lightbox .swiper-wrapper, .elementor-lightbox .swiper-wrapper.showed {
  clip-path: unset !important;
  animation: none !important;
}

@keyframes slideInShowAndMorph {
  60%, 75% {
    clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0, 28.86% 0%);
    -webkit-clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0, 28.86% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 36.87%, 28.86% 0%);
    -webkit-clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 36.87%, 28.86% 0%);
  }
}
@keyframes slideInShow {
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.rectangleIntoTrapeze {
  animation: growAndMorph 1.8s cubic-bezier(0.85, 0, 0.15, 1) forwards;
}

@keyframes growAndMorph {
  0% {
    clip-path: polygon(0 0%, 100% 0%, 100% 0, 0 0);
  }

  60% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }

  80% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }

  100% {
    clip-path: polygon(0% 0%, 100% 30.6%, 100% 100%, 0% 100%);
  }
}

.diago-trapeze-002 {
  clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 36.87%, 28.86% 0%);
  -webkit-clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 36.87%, 28.86% 0%);
}

svg.lediago-motif {
  width: clamp(156px, 10vw, 220px);
  fill: #F4EEE6;
  height: auto;
}
svg.lediago-motif-156 {
  width: 156px !important;
}
svg.lediago-motif-granit {
  fill: #404E5A;
}

.shape {
  clip-path: inset(100% 0 0 0);
}

.shape.revealed {
  animation: revealClip 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.7s ;
}

@keyframes revealClip {
  to {
    clip-path: inset(0% 0% 0% 0%);
  }
}

.sticky-section {
  position: sticky !important;
  top: 0;
}

.menu-item {
  opacity: 0;
  transform: translateY(4px);
  transition: all 400ms ease-out;
}

.menu-item.show {
  opacity: 1;
  transform: translateY(-4px);
}

.show-on-scroll,
.show-on-scroll-stagger-item {
  opacity: 0;
  transform: translateY(30px);
  transition: all 600ms ease-out;
}

.show-on-scroll.showed,
.show-on-scroll-stagger-item.showed {
  opacity: 1;
  transform: translateY(0px);
}

.swiper-slide {
  pointer-events: unset !important;
}

.swiper-slide-inner {
  line-height: 0 !important;
}

.swiper-slide-image {
  height: 567px !important;
  object-fit: cover;
}

.elementor-swiper-button {
  width: 52px !important;
  height: 52px !important;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #F5EEE6;
  border-radius: 100%;
  bottom: 0 !important;
  transform: none !important;
  bottom: 38px !important;
}

@media all and (min-width: 1081px) {
  .elementor-swiper-button {
    left: unset !important;
    top: unset !important;
  }

  .elementor-swiper-button-prev {
    right: 120px !important;
  }

  .elementor-swiper-button-next {
    right: 36px !important;
  }
}

.elementor-swiper-button:hover {
  background-color: #090B0C;
}
.elementor-lightbox .swiper .elementor-swiper-button svg {
  fill: #090B0C !important;
}
.elementor-lightbox .swiper .elementor-swiper-button:hover svg {
  fill: #F5EEE6 !important;
}


.elementor-swiper-button:hover svg {
  fill: #F5EEE6 !important;
}

.elementor-swiper-button,
.elementor-swiper-button svg {
  transition: all .3s;
}


/*Formulaire de contact*/
.wpcf7-spinner {
  display: none;
}

.form-row.row-flex>p {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media all and (min-width: 768px) {
  .form-row.row-flex>p {
    flex-direction: row;
  }
}

.form-row>p {
  margin-bottom: 32px;
  color: #090B0C;
}

.form-row input:not([type="submit"]),
.form-row textarea,
.form-row select {
  border-radius: 32px;
  border: none;
  background-color: #F4EEE6;
}

.form-row *::placeholder,
.form-row option,
.form-row select {
  text-transform: uppercase;
  color: #090B0C;
}

.form-row input:not([type="submit"]),
.form-row select {
  padding: 10px 28px;
}

.form-row textarea {
  padding: 24px 28px;
  height: 200px;
}

.form-row label {
  width: -webkit-fill-available;
}

input.wpcf7-form-control[type="submit"] {
  margin-top: 20px;
  padding: 16px 32px;
  min-width: 216px;
  border: 2px solid #F4EEE6 !important;
  color: #F4EEE6 !important;
}

input.wpcf7-form-control[type="submit"]:hover {
  color: #404E5A !important;
  background-color: #F4EEE6 !important;
}

.gm-style-iw-tc, .gm-style-iw-chr {
  display: none;
}
.gm-style-iw-d, .gm-style-iw.gm-style-iw-c {
  overflow: visible !important;
}
.gm-style-iw.gm-style-iw-c {
  padding: 0 !important;
  background-color: unset !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  top: 98px !important;
  width: 62px !important;
  height: 89px !important;
}
.jet-map-pin__link {
  height: 89px !important;
  display: block;
}


@media all and (max-width: 1080px) {
  #contact {
    background-image: none !important;
  }
  svg.lediago-motif-156 {
    width: 100% !important;
  }
  #menu-mobile {
    transform: translateY(100%);
    clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%);
    -webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%);

    transition:
      transform 300ms ease-in-out 300ms,
      clip-path 300ms ease-in-out,
      -webkit-clip-path 300ms ease-in-out;
  }

  #menu-mobile.open {
    transform: translateY(0);
    clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 0% 30.6%);
    -webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 0% 30.6%);

    transition:
      transform 300ms ease-in-out,
      clip-path 300ms ease-in-out 300ms,
      -webkit-clip-path 300ms ease-in-out 300ms;
  }

  #menu-mobile.closed {
    transform: translateY(100%);
    clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%);
    -webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%);

    transition:
      transform 300ms ease-in-out 300ms,
      clip-path 300ms ease-in-out,
      -webkit-clip-path 300ms ease-in-out;
  }

  .hamburger-menu {
    justify-self: end;
    width: 32px;
    height: 24px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
  }

  .hamburger-menu span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    background-color: #090B0C;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
  }
  .hamburger-menu-sticky span {
    background-color: #F4EEE6;
  }
  .hamburger-menu span:nth-child(1) {
    top: 0px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
  }

  .hamburger-menu span:nth-child(2) {
    top: 10px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
  }

  .hamburger-menu span:nth-child(3) {
    top: 20px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
  }

  .hamburger-menu.open span {
    background-color: #F4EEE6;
  }

  .hamburger-menu.open span:nth-child(1) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top: -3px;
    left: 4px;
  }

  .hamburger-menu.open span:nth-child(2) {
    width: 0%;
    opacity: 0;
  }

  .hamburger-menu.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 20px;
    left: 4px;
  }

  .elementor-swiper-button {
    top: -26px !important;
    margin: 0 auto;
  }
  .elementor-swiper-button-next {
    left: 80px !important;
  }
  .elementor-swiper-button-prev {
    right: 80px !important;
  }
}

@media all and (max-width: 767px) {
  input.wpcf7-form-control[type="submit"] {
    width: -webkit-fill-available;
  }

  .wpcf7-form p:last-of-type {
    text-align: center;
  }

}
@media all and (max-width: 1366px) {
  .diago-trapeze-002 {
    clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 35%, 30% 0%);
    -webkit-clip-path : polygon(0% 0%, 0% 100%, 100% 100%, 100% 35%, 30% 0%);
    }

}
@media all and (max-width: 1366px) and (min-width: 1081px) {
  .grid-img-container {
    max-width: 572px !important;
  }
}