/* 
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 */

:root {
    --h-header: 52px;
}
@media  (max-width: 1024px) {
    :root {
        --h-header: 59px;
    }
}

h1, h2 {
  text-transform: uppercase;
}

@media screen and (max-width: 600px) {
  .error404 {
    h1.elementor-heading-title {
      font-size: 6rem!important;
    }
  }
}
 

#heros-section, .heros-section { margin-top: calc(var(--h-header) * -1); }

.red {
    color: #CC2026!important;
}

.uppercase {
    text-transform: uppercase!important;
}

.bizot-droite {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 80px), calc(100% - 80px) 100%, 0 100%);
}


.bizot-droite-sm {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%);
}


.bizot-gauche {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 80px 100%, 0 calc(100% - 80px));
}


.bizot-gauche-sm{
  clip-path: polygon(0 0, 100% 0, 100% 100%, 40px 100%, 0 calc(100% - 40px));
}


.only-border, .only-border .elementor-heading-title {
    color: transparent!important;
    -webkit-text-stroke: 1.5px #d32f2f!important;  /* contour rouge */
}

/* btn cta */
.with-full-circle-icon i {
    font-size: 0.625rem!important;
}


.max-1230 {
    max-width: 1230px!important;
}


.max-width-550 {
    max-width: 550px!important
}

.elementor-nav-menu--dropdown {
    background: transparent!important;
}

@media screen and (max-width: 1024px){
    .max-width-550 {
        max-width: 100%!important
    }
}



@media all and (max-width: 600px) {
    h1.elementor-heading-title,
    h2.elementor-heading-title {
        font-size: 2.375rem!important;
    }
}

/* animations */
@keyframes fadeDown {
    from {
      opacity: 0;
      transform: translate3d(0, -30px, 0);
    }
  
    to {
      opacity: 1;
      transform: none;
    }
  }
  
  .elementor-element.fadeInDown {
    animation-name: fadeDown;
  }
  
  @keyframes fadeLeft {
    from {
      opacity: 0;
      transform: translate3d(-30px, 0, 0);
    }
  
    to {
      opacity: 1;
      transform: none;
    }
  }
  
  .elementor-element.fadeInLeft {
    animation-name: fadeLeft;
  }
  
  @keyframes fadeRight {
    from {
      opacity: 0;
      transform: translate3d(30px, 0, 0);
    }
  
    to {
      opacity: 1;
      transform: none;
    }
  }
  
  .elementor-element.fadeInRight {
    animation-name: fadeRight;
  }
  
  @keyframes fadeUp {
    from {
      opacity: 0;
      transform: translate3d(0, 30px, 0);
    }
  
    to {
      opacity: 1;
      transform: none;
    }
  }
  
  .elementor-element.fadeInUp {
    animation-name: fadeUp;
  }
  
  @keyframes slideUp {
    from {
      opacity: 0;
      transform: translate3d(0, 100px, 0);
    }
  
    to {
      opacity: 1;
      transform: none;
    }
  }
  
  .elementor-element.slideInUp {
    animation-name: slideUp;
  }

/* overlay de la section hero */
.heros-section  {
    position: relative;
}

.heros-section::before {
    content: "";
    position: absolute;
    inset: 0;
                     /* au-dessus de l'image, sous le contenu */
    background: linear-gradient(180deg, rgba(13,13,13,.63) 0%, rgba(13,13,13,.70) 100%);
    pointer-events: none;
}

.max-w-375 {
    max-width: 375px!important;
}

.compteur .elementor-counter {
    gap: 10px;
}



.remote-arrow-carousel {
  & .ue-remote-carousel-navigation {
    & .ue-remote-arrow {
      &.ue-carousel-prev {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 15px 100%, 0 calc(100% - 15px));
      }
      &.ue-carousel-next {
        background: var(--e-global-color-primary)!important;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%);
      } 
    }
  }
}


#avis-container {
  & .swiper-horizontal {
      overflow: visible!important;
  }

  & .swiper-slide {
      min-width: 400px!important;

      @media (max-width: 450px) {
        min-width: 100%!important;
      }
  }

  &::before,
  &::after {
      content: '';
      position: absolute;
      width: 75px;
      top: 0;
      height: 100%;
      z-index: 2;
      background: #fff;
  }

  &::before {
      left: 0;
      mask-image: linear-gradient(to right, #fff 0px, transparent 50px);
      -webkit-mask-image: linear-gradient(to right, #fff 0px, transparent 50px);
  }

  &::after {
      right: 0;
      mask-image: linear-gradient(to left, #fff 0px, transparent 50px);
      -webkit-mask-image: linear-gradient(to left, #fff 0px, transparent 50px);
  }
}

.avis-google p:last-child {
  margin-bottom:0!important;
}




.page-inspection-de-systeme-de-protection-incendie,
.page-conception-et-ingenierie {
  .max-w-690 {
      max-width: 690px;
  }
  
  .max-w-500 {
      max-width: 500px;
      @media (max-width: 1024px) {
          max-width: 800px;
      }
  }

  .max-w-440 {
      max-width: 440px;
  }

  .max-w-660 {
      max-width: 660px!important;
  }

}



#carousel-realisations {
  /* breakout à droite : bord gauche aligné 1280, débordement à droite */
  margin-right: calc((1280px - 100vw) / 2);

  & .owl-stage-outer {
    overflow: visible !important;
  }

  /* débordement des cards adjacentes (ton bloc existant) */
  & .owl-stage-outer {
    overflow: visible !important;
  }

  /* piste en flex → cards à hauteur égale */
  & .owl-stage {
    display: flex;
  }

  /* garde la largeur imposée par Owl, empêche le rétrécissement */
  & .owl-item {
    flex: 0 0 auto;
    height: auto;
  }

  /* la hauteur descend jusqu'à la card */
  & .owl-item > .ue-carousel-item,
  & .owl-item .e-loop-item,
  & .owl-item .elementor {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  /* réserver 2 lignes pour le titre → images alignées */
  & .elementor-widget-heading .elementor-heading-title {
    min-height: 2.6em;
    display: flex;
    align-items: flex-start;
  }
}

@media screen and (max-width: 768px) {
    #carousel-realisations::before {
        left: 0;
    }
}


#etape-carousel {

  & .owl-stage-outer {
    overflow: visible;

    & .owl-item {
      & .elementor-widget-text-editor .elementor-widget-container p {
        margin-bottom: 0!important;
      }

      & .etapes > div  > div:first-child {
        position: relative;
        display: flex;
        flex-direction: row;

        & .elementor-heading-title {
          &::after {
            content: ".";
            position: absolute;
            font-size: 2rem;
            color: #fff;
            bottom: 3px;
            padding-left: 2px;
          }
        }
      }

      &:hover {
        & .etapes {
          background: #fff!important;
          border: solid #C82127 3px!important;
          margin-top: -10px!important;

          & > div  > div:first-child {
            & .elementor-heading-title {
              color: #C82127!important;
              font-size: 2rem!important;
              &::after {
                font-size: 3rem;
                color: #C82127;
                bottom: 1px;
                font-weight: 700!important;
            }
            }
          }

          & .elementor-heading-title {
            color: #0D0D0D!important;
          }
  
          & .elementor-widget-text-editor .elementor-widget-container p {
            color: #0D0D0D!important;
          }
        }
      }

      &.uc-active-item.active {
        & > div {
          border: 0 !important;
        }
      }
    }
  }
}


/* === Cartes .etapes à hauteur égale dans le carousel Owl === */

/* 1. La piste Owl en flex : tous les slides s'alignent sur le plus haut */
#etape-carousel .owl-stage {
	display: flex;
}

/* 2. Largeur fixe d'Owl conservée + hauteur libre pour autoriser l'étirement */
#etape-carousel .owl-item {
	flex: 0 0 auto; /* empêche flex de rétrécir les 295px imposés par Owl */
	height: auto;
}

/* 3. La hauteur descend la chaîne jusqu'à .etapes */
#etape-carousel .owl-item > .ue-carousel-item,
#etape-carousel .ue-carousel-item > .elementor,
#etape-carousel .ue-carousel-item > .elementor > .etapes {
	height: 100%;
}

#etape-carousel {
  min-height: 400px!important;

  @media(max-width: 1024px) {
    min-height: 300px!important;
  }
}

#etape-carousel-action {
  @media (max-width: 550px) {
      flex-direction: column-reverse!important;
      gap: 30px!important;

      & > div {
        align-self: center!important;
      }
  }
}

#carousel-realisation-bullet {
  border-top-right-radius: 300px;
  border-top-left-radius: 300px;
  border-bottom-right-radius: 300px;
  border-bottom-left-radius: 300px;
  overflow: hidden;

  & .ue-remote-bullets {
      display: flex!important;
      width: 100%!important;
    }
    .ue-remote-bullet-btn {
      flex: 1 1 0!important;   /* part égale = largeur conteneur / nb de boutons */
      min-width: 0!important;  /* autorise à descendre sous la largeur du contenu, évite le débordement */
    }
}



#zone-intervention-container {
  & #zone-intervention-map {
      @media (max-width: 767px) {
          background-image: none!important;
          min-height: 0!important;
          padding: 0!important;
      }
  }

}

#zone-intervention {
      gap: 0px!important;
  & .elementor-widget-container {
      overflow: visible!important;
      & .elementor-icon-list-items.elementor-inline-items {
      width: 100%!important;
      margin: 0!important;
     
          & .elementor-icon-list-item.elementor-inline-item {
              margin:0px 20px 30px -17px!important;
              padding-right: 20px!important;

              &:first-child {
                  margin-left: 0!important;
              }
          }
      }
  }
}

.underline-last {
  & .elementor-icon-list-item:last-child {
      border-bottom: solid 2px #262626;
  }
}



#carousel-certification {
  overflow: hidden!important;
  & .swiper-slide {
      min-width: 200px!important;

      @media (max-width: 1024px) {
          max-width: 200px!important;
      }
  }

  &::before,
  &::after {
      content: '';
      position: absolute;
      width: 75px;
      top: 0;
      height: 100%;
      z-index: 2;
      background: #262626;
  }

  &::before {
      left: 0;
      mask-image: linear-gradient(to right, #262626 0px, transparent 50px);
      -webkit-mask-image: linear-gradient(to right, #262626 0px, transparent 50px);
  }

  &::after {
      right: 0;
      mask-image: linear-gradient(to left, #262626 0px, transparent 50px);
      -webkit-mask-image: linear-gradient(to left, #262626 0px, transparent 50px);
  }
}

.lowercase.elementor-element .elementor-heading-title {
  text-transform: lowercase!important;
  &::first-letter {
    text-transform: capitalize!important;
  }
}


/* formulaire de contact */

/* Wrapper en position relative pour placer le bouton rouge */
.elementor-field-type-upload {
  position: relative;
}

/* Styler l'input */
.elementor-upload-field {
  display: flex;
  align-items: center;
  width: 100%;
  height: 46px;
  background: var(--e-global-color-5f8954b);
  border: none;
  cursor: pointer;
  padding: 13px 70px 6px 16px;
  box-sizing: border-box;
  vertical-align: middle;
  color: var(--e-global-color-4430a30);
  line-height: 1.4;
}

/* Masquer le bouton natif "Choisir un fichier" */
.elementor-upload-field::file-selector-button {
  display: none;
}

/* Bouton rouge avec icône via pseudo-élément */
.elementor-field-type-upload::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 0;
  width: 46px;
  height: 46px;
  background: var(--e-global-color-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' width='22' height='22'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm-1 1.5L18.5 9H13V3.5zM8 17v-1h8v1H8zm0-3v-1h8v1H8zm0-3v-1h5v1H8z'/%3E%3C/svg%3E") center / 22px no-repeat;
  border-radius: 0 8px 8px 0;
  pointer-events: none;
}

/* Hover sur le fond gris */
.elementor-upload-field:hover {
  background: #e8e8e8;
}

/* btn with icon circle */
.elementor-button .elementor-button-content-wrapper .elementor-button-icon {
  & .fas.fa-circle::before {
    font-size: 0.625rem !important; 
  }
}


/* btn plus de projet */
.hide-everywhere {
  display: none!important;
}

.home {
  & .hide-everywhere {
    display: flex!important;
  }
}

/* page legales */

.contenue-legal {
  & h2 {
    color: var(--e-global-color-ea282da)!important;
  }

  & a {
    color: var(--e-global-color-primary)!important;
  }
}

/* animation carousel */
/* Loop catégories — entrée vers le haut */
.carousel-timeline.blankAnimationUp .owl-stage .owl-item,
.carousel-realisations.blankAnimationUp .elementor-grid .realisation,
.grid-rea.blankAnimationUp .realisation-grid .realisation-grid__item,
.carousel-emplois.blankAnimationUp .elementor-grid .carriere,
.carousel-nos-realisations.blankAnimationUp .owl-stage .owl-item,
.carousel-avis.blankAnimationUp .swiper-wrapper .avis-google,
.etape-carousel.blankAnimationUp .owl-stage .owl-item{
  opacity: 0;
  animation: customSlideUp 1s forwards cubic-bezier(0.16, 1, 0.3, 1);
}

/* Loop catégories — entrée vers le bas */
.carousel-timeline.blankAnimationDown .owl-stage .owl-item,
.carousel-realisations.blankAnimationDown .elementor-grid .realisation,
.grid-rea.blankAnimationDown .realisation-grid .realisation-grid__item,
.carousel-emplois.blankAnimationDown .elementor-grid .carriere,
.carousel-nos-realisations.blankAnimationDown .owl-stage .owl-item,
.carousel-avis.blankAnimationDown .swiper-wrapper .avis-google,
.etape-carousel.blankAnimationDown .owl-stage .owl-item{
  opacity: 0;
  animation: customSlideDown 1s forwards cubic-bezier(0.16, 1, 0.3, 1);
}

/* Délais en cascade — loop catégories */


.grid-rea .realisation-grid > *:nth-of-type(1),
.carousel-avis .swiper-wrapper > *:nth-of-type(1) { animation-delay: 400ms !important; }

.carousel-timeline, .carousel-nos-realisations, .etape-carousel {
  & .owl-stage > *:nth-of-type(1) { animation-delay: 400ms !important; }
}

.carousel-realisations, .carousel-emplois {
  & .elementor-grid > *:nth-of-type(1) { animation-delay: 400ms !important; }
}

.grid-rea .realisation-grid > *:nth-of-type(2),
.carousel-avis .swiper-wrapper > *:nth-of-type(2) { animation-delay: 500ms !important; }

.carousel-timeline, .carousel-nos-realisations, .etape-carousel {
  & .owl-stage > *:nth-of-type(2) { animation-delay: 500ms !important; }
}

.carousel-realisations, .carousel-emplois {
  & .elementor-grid > *:nth-of-type(2) { animation-delay: 500ms !important; }
}

.grid-rea .realisation-grid > *:nth-of-type(3),
.carousel-avis .swiper-wrapper > *:nth-of-type(3) { animation-delay: 600ms !important; }

.carousel-timeline, .carousel-nos-realisations, .etape-carousel {
  & .owl-stage > *:nth-of-type(3) { animation-delay: 600ms !important; }
}

.carousel-realisations, .carousel-emplois {
  & .elementor-grid > *:nth-of-type(3) { animation-delay: 600ms !important; }
}

.grid-rea .realisation-grid > *:nth-of-type(4),
.carousel-avis .swiper-wrapper > *:nth-of-type(4) { animation-delay: 700ms !important; }

.carousel-timeline, .carousel-nos-realisations, .etape-carousel {
  & .owl-stage > *:nth-of-type(4) { animation-delay: 700ms !important; }
}

.carousel-realisations, .carousel-emplois {
  & .elementor-grid > *:nth-of-type(4) { animation-delay: 700ms !important; }
}

.grid-rea .realisation-grid > *:nth-of-type(5),
.carousel-avis .swiper-wrapper > *:nth-of-type(5) { animation-delay: 800ms !important; }

.carousel-timeline, .carousel-nos-realisations, .etape-carousel {
  & .owl-stage > *:nth-of-type(5) { animation-delay: 800ms !important; }
}

.carousel-realisations, .carousel-emplois {
  & .elementor-grid > *:nth-of-type(5) { animation-delay: 800ms !important; }
}

.grid-rea .realisation-grid > *:nth-of-type(6),
.carousel-avis .swiper-wrapper > *:nth-of-type(6) { animation-delay: 900ms !important; }


.carousel-timeline, .carousel-nos-realisations, .etape-carousel {
  & .owl-stage > *:nth-of-type(6) { animation-delay: 900ms !important; }
}

.carousel-realisations, .carousel-emplois {
  & .elementor-grid > *:nth-of-type(6) { animation-delay: 900ms !important; }
}

.grid-rea .realisation-grid > *:nth-of-type(7),
.carousel-avis .swiper-wrapper > *:nth-of-type(7) { animation-delay: 1000ms !important; }

.carousel-timeline, .carousel-nos-realisations, .etape-carousel {
  & .owl-stage > *:nth-of-type(7) { animation-delay: 1000ms !important; }
}

.carousel-realisations, .carousel-emplois {
  & .elementor-grid > *:nth-of-type(7) { animation-delay: 1000ms !important; }
}

/* plan du site */
.sitemap {
  & ul::marker {
    color: var(--e-global-color-primary)!important;
  }

  & ul {
    list-style: none;
    padding-left: 0;

    & li::before {
      content: "•";
      color: var(--e-global-color-primary)!important;
      font-size: 2.5rem;
      margin-right: 8px;
      display: inline-block;
      vertical-align: middle;
    }

  & li > a {
    font-size: 1.5rem!important;
    color: var(--e-global-color-ea282da);

    &:hover {
      color: var(--e-global-color-primary)
    }
  }

  & li ul {
    padding-left: 40px;
    & li > a {
      font-size: 1.25rem!important;
    }
  }
}




/* ===== Carrousel logos partenaires — hauteur uniforme ===== */

/* Centrage vertical dans chaque slide */
.gdlm-logos .swiper-slide {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* --- Cas 1 : Carrousel d'images natif Elementor (background-image sur un div) --- */
.gdlm-logos .elementor-carousel-image {
  height: 4rem !important;          /* hauteur commune, ajuste */
  width: 100%;
  background-size: contain !important;   /* garde le ratio, pas de crop */
  background-position: center !important;
  background-repeat: no-repeat;
}

/* --- Cas 2 : carrousel avec vraies balises img (loop, media carousel, custom) --- */
.gdlm-logos img {
  height: 4rem !important;
  width: auto !important;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
}

/* ===== Fade opacité sur les bords gauche/droite ===== */
.gdlm-logos .swiper,
.gdlm-logos .elementor-image-carousel-wrapper,
.gdlm-logos .swiper-container {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 8%,
    #000 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 8%,
    #000 92%,
    transparent 100%
  );
}