.elementor-102141 .elementor-element.elementor-element-1b537a7{--display:flex;--min-height:0px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:-22px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:6em;--padding-bottom:7em;--padding-left:0em;--padding-right:0em;}.elementor-102141 .elementor-element.elementor-element-1b537a7:not(.elementor-motion-effects-element-type-background), .elementor-102141 .elementor-element.elementor-element-1b537a7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );}.elementor-102141 .elementor-element.elementor-element-35f2794{--display:flex;--flex-direction:column-reverse;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:2em 2em;--row-gap:2em;--column-gap:2em;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0em;--padding-bottom:0em;--padding-left:0em;--padding-right:0em;}.elementor-102141 .elementor-element.elementor-element-35f2794.e-con{--align-self:center;--flex-grow:0;--flex-shrink:0;}.elementor-102141 .elementor-element.elementor-element-15b22ba{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-102141 .elementor-element.elementor-element-623567d > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0em 0em 0em 0em;}.elementor-102141 .elementor-element.elementor-element-623567d.elementor-element{--align-self:center;}.elementor-102141 .elementor-element.elementor-element-623567d .spf-template-project-field-value{font-family:"Radley", Sans-serif;color:var( --e-global-color-667a578 );}.elementor-102141 .elementor-element.elementor-element-623567d .spf-template-project-field-wrapper{text-align:center;}.elementor-102141 .elementor-element.elementor-element-548d2cf .spf-template-project-field-value{font-family:"Great Vibes", Sans-serif;font-size:4.4em;color:#94A083;}.elementor-102141 .elementor-element.elementor-element-559418f{--display:flex;--min-height:0px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0em;--padding-bottom:7em;--padding-left:0em;--padding-right:0em;}.elementor-102141 .elementor-element.elementor-element-559418f:not(.elementor-motion-effects-element-type-background), .elementor-102141 .elementor-element.elementor-element-559418f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );}.elementor-102141 .elementor-element.elementor-element-c176e16 .spf-template-project-gallery img{object-fit:cover;opacity:1;}.elementor-102141 .elementor-element.elementor-element-8b575ef{--display:flex;--min-height:0px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:-22px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:6em;--padding-bottom:7em;--padding-left:0em;--padding-right:0em;}.elementor-102141 .elementor-element.elementor-element-8b575ef:not(.elementor-motion-effects-element-type-background), .elementor-102141 .elementor-element.elementor-element-8b575ef > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );font-style:var( --e-global-typography-accent-font-style );text-decoration:var( --e-global-typography-accent-text-decoration );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );word-spacing:var( --e-global-typography-accent-word-spacing );}.elementor-102141 .elementor-element.elementor-element-5d7f198 .elementor-button{background-color:#4A5D4E00;font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );font-style:var( --e-global-typography-accent-font-style );text-decoration:var( --e-global-typography-accent-text-decoration );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );word-spacing:var( --e-global-typography-accent-word-spacing );fill:var( --e-global-color-accent );color:var( --e-global-color-accent );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-accent );border-radius:0px 0px 0px 0px;padding:15px 24px 14px 23px;}.elementor-102141 .elementor-element.elementor-element-5d7f198 .elementor-button:hover, .elementor-102141 .elementor-element.elementor-element-5d7f198 .elementor-button:focus{background-color:var( --e-global-color-accent );color:#0A0A0A;border-color:var( --e-global-color-accent );}.elementor-102141 .elementor-element.elementor-element-5d7f198.elementor-element{--align-self:center;}.elementor-102141 .elementor-element.elementor-element-5d7f198 .elementor-button:hover svg, .elementor-102141 .elementor-element.elementor-element-5d7f198 .elementor-button:focus svg{fill:#0A0A0A;}@media(max-width:1024px){.elementor-102141 .elementor-element.elementor-element-35f2794{--gap:0em 0em;--row-gap:0em;--column-gap:0em;}.elementor-widget-button .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );word-spacing:var( --e-global-typography-accent-word-spacing );}.elementor-102141 .elementor-element.elementor-element-5d7f198 .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );word-spacing:var( --e-global-typography-accent-word-spacing );}}@media(max-width:767px){.elementor-102141 .elementor-element.elementor-element-1b537a7{--padding-top:4em;--padding-bottom:2em;--padding-left:0em;--padding-right:0em;}.elementor-102141 .elementor-element.elementor-element-35f2794{--width:322px;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:1em 1em;--row-gap:1em;--column-gap:1em;}.elementor-102141 .elementor-element.elementor-element-559418f{--min-height:383px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:1em;--padding-bottom:4em;--padding-left:1em;--padding-right:1em;}.elementor-102141 .elementor-element.elementor-element-c176e16 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0em 0em 24em 0em;}.elementor-102141 .elementor-element.elementor-element-8b575ef{--min-height:158px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:2em;--padding-bottom:4em;--padding-left:1em;--padding-right:1em;}.elementor-widget-button .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );word-spacing:var( --e-global-typography-accent-word-spacing );}.elementor-102141 .elementor-element.elementor-element-5d7f198{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:13px 0px 0px 0px;}.elementor-102141 .elementor-element.elementor-element-5d7f198.elementor-element{--align-self:center;}.elementor-102141 .elementor-element.elementor-element-5d7f198 .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );word-spacing:var( --e-global-typography-accent-word-spacing );}}@media(min-width:768px){.elementor-102141 .elementor-element.elementor-element-35f2794{--width:100%;}.elementor-102141 .elementor-element.elementor-element-15b22ba{--width:62%;}}/* Start custom CSS for container, class: .elementor-element-1b537a7 */.elementor-102141 .elementor-element.elementor-element-1b537a7 {
    background-color: #f8f7f5;
    background-image: linear-gradient(45deg, rgba(0,0,0,0.02) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.02) 75%, rgba(0,0,0,0.02));
    background-size: 10px 10px;
}/* End custom CSS */
/* Start custom CSS for spf-template-project-gallery, class: .elementor-element-c176e16 *//* On cible le conteneur par son sélecteur de classe */
.spf-template-project-gallery-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 15px !important;
}

.spf-template-project-gallery-item {
    position: relative !important;
    width: 100% !important;
    padding-top: 100% !important; /* Maintient le ratio 1:1 */
    overflow: hidden !important;
    margin: 0 !important;
    cursor: pointer;
}

.spf-template-project-gallery-item img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.4s ease-in-out !important;
}

/* Zoom fluide */
.spf-template-project-gallery-item:hover img {
    transform: scale(1.15);
}








<style>
/* 🌑 Overlay plein écran */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
  z-index: 9999;
}
.lightbox-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* 🖼️ Image principale */
.lightbox-content {
  position: relative;
  max-width: 90%;
  max-height: 85%;
}
.lightbox-content img {
  max-width: 100%;
  max-height: 85vh;
  border-radius: 10px;
  box-shadow: 0 0 40px rgba(0,0,0,0.4);
  object-fit: contain;
}

/* 🔘 Boutons (croix + flèches) */
.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  cursor: pointer;
  transition: background .25s ease;
  z-index: 10000;
  box-shadow: 0 0 8px rgba(0,0,0,0.3);
  user-select: none;
}

/* 🌟 Hover = fond plus clair (pas de zoom) */
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
  background: rgba(0, 0, 0, 0.6);
}

/* ❌ Croix en CSS (deux barres parfaitement centrées) */
.lightbox-close {
  top: 25px;
  right: 25px;
}
.lightbox-close::before,
.lightbox-close::after {
  content: "";
  position: absolute;
  width: 60%;
  height: 2px;
  background: white;
  border-radius: 1px;
  left: 20%;
  top: 50%;
  transform-origin: center;
  transition: background 0.25s ease;
}
.lightbox-close::before {
  transform: translateY(-50%) rotate(45deg);
}
.lightbox-close::after {
  transform: translateY(-50%) rotate(-45deg);
}

/* ⬅️➡️ Flèches navigation */
.lightbox-prev,
.lightbox-next {
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.8rem;
  color: white;
  line-height: 0;
}
.lightbox-prev { left: 25px; }
.lightbox-next { right: 25px; }

@media (max-width: 768px) {
  .lightbox-prev,
  .lightbox-next,
  .lightbox-close {
    width: 40px;
    height: 40px;
  }
}
</style>

<!-- 🌙 Structure Lightbox -->
<div class="lightbox-overlay">
  <div class="lightbox-content">
    <img src="" alt="">
  </div>
  <span class="lightbox-close"></span>
  <span class="lightbox-prev">&#10094;</span>
  <span class="lightbox-next">&#10095;</span>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
  const gallery = document.querySelector('.spf-lightbox');
  if (!gallery) return;

  const images = gallery.querySelectorAll('.spf-template-project-gallery-item img');
  const overlay = document.querySelector('.lightbox-overlay');
  const imgDisplay = overlay.querySelector('img');
  const closeBtn = overlay.querySelector('.lightbox-close');
  const prevBtn = overlay.querySelector('.lightbox-prev');
  const nextBtn = overlay.querySelector('.lightbox-next');

  let currentIndex = 0;

  const openLightbox = (index) => {
    currentIndex = index;
    imgDisplay.src = images[index].src;
    overlay.classList.add('active');
  };

  const closeLightbox = () => overlay.classList.remove('active');

  const showNext = () => {
    currentIndex = (currentIndex + 1) % images.length;
    imgDisplay.src = images[currentIndex].src;
  };

  const showPrev = () => {
    currentIndex = (currentIndex - 1 + images.length) % images.length;
    imgDisplay.src = images[currentIndex].src;
  };

  images.forEach((img, i) => {
    img.style.cursor = 'zoom-in';
    img.addEventListener('click', () => openLightbox(i));
  });

  closeBtn.addEventListener('click', closeLightbox);
  nextBtn.addEventListener('click', showNext);
  prevBtn.addEventListener('click', showPrev);

  overlay.addEventListener('click', (e) => {
    if (e.target === overlay) closeLightbox();
  });

  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') closeLightbox();
    if (e.key === 'ArrowRight') showNext();
    if (e.key === 'ArrowLeft') showPrev();
  });
});
</script>/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-559418f */.elementor-102141 .elementor-element.elementor-element-559418f {
    background-color: #f8f7f5;
    background-image: linear-gradient(45deg, rgba(0,0,0,0.02) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.02) 75%, rgba(0,0,0,0.02));
    background-size: 10px 10px;
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-5d7f198 */.elementor-102141 .elementor-element.elementor-element-5d7f198 {
    animation: flotter 3s ease-in-out infinite;
}

@keyframes flotter {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b575ef */.elementor-102141 .elementor-element.elementor-element-8b575ef {
    background-color: #f8f7f5;
    background-image: linear-gradient(45deg, rgba(0,0,0,0.02) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.02) 75%, rgba(0,0,0,0.02));
    background-size: 10px 10px;
}/* End custom CSS */