.elementor-666 .elementor-element.elementor-element-40ca4b2c{--display:flex;--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;--gap:40px 0px;--row-gap:40px;--column-gap:0px;--overflow:hidden;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:10%;--padding-bottom:10%;--padding-left:12.5%;--padding-right:12.5%;}.elementor-666 .elementor-element.elementor-element-352cc98a{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:flex-end;--padding-top:0%;--padding-bottom:0%;--padding-left:0%;--padding-right:0%;}.elementor-666 .elementor-element.elementor-element-1d6c4ca1{--swiper-slides-to-display:2;--swiper-slides-gap:30px;width:100%;max-width:100%;--arrow-prev-left-align:0%;--arrow-prev-translate-x:0px;--arrow-prev-left-position:-49px;--arrow-prev-top-align:50%;--arrow-prev-translate-y:-50%;--arrow-prev-top-position:0px;--arrow-next-right-align:0%;--arrow-next-translate-x:0%;--arrow-next-right-position:0px;--arrow-next-top-align:50%;--arrow-next-translate-y:-50%;--arrow-next-top-position:0px;--arrow-size:32px;--arrow-normal-color:var( --e-global-color-text );}.elementor-666 .elementor-element.elementor-element-1d6c4ca1.elementor-element{--align-self:center;}.elementor-666 .elementor-element.elementor-element-1d6c4ca1 .swiper-slide > .elementor-element{height:100%;}@media(min-width:768px){.elementor-666 .elementor-element.elementor-element-40ca4b2c{--width:100%;}}@media(max-width:1024px){.elementor-666 .elementor-element.elementor-element-1d6c4ca1{--swiper-slides-to-display:2;}}@media(max-width:767px){.elementor-666 .elementor-element.elementor-element-1d6c4ca1{--swiper-slides-to-display:1;}}/* Start custom CSS for container, class: .elementor-element-40ca4b2c *//* =========================================================
   RÉALISATIONS – Loop Carousel (Elementor/Swiper)
   - Hover: zoom + overlay + titre
   - Largeurs: gauche étroite / droite large (via classes JS is-narrow/is-wide)
   - Mobile: 1 slide
   - Slides: hauteur FIXE + images en cover (pas de ratio fixe)
   - Pas de "peek" des autres cartes (overflow hidden sur .swiper)
   ========================================================= */

/* ===== Réglages rapides (ajuste au besoin) ===== */
:root{
  --realisations-card-height-desktop: 420px; /* hauteur fixe desktop/tablette */
  --realisations-card-height-mobile:  320px; /* hauteur fixe mobile */
  --realisations-title-left:          24px;
  --realisations-title-bottom:        22px;
}

/* =========================================================
   CARROUSEL (Swiper) – structure / recadrage
   ========================================================= */

/* IMPORTANT : recadre tout ce qui dépasse (évite de voir 4 cartes partielles) */
.realisations-carousel .swiper{
  overflow: hidden;
  height: auto !important; /* évite un height forcé par Elementor/Swiper */
}

/* Wrapper : les slides peuvent s’étirer */
.realisations-carousel .swiper-wrapper{
  align-items: stretch;
  /* overflow: visible;  <-- inutile ici, et peut re-montrer les "peek" */
}

/* Slide : flex pour permettre à la carte de remplir proprement */
.realisations-carousel .swiper-slide{
  height: auto !important;
  display: flex;
}

/* =========================================================
   LARGEURS (desktop/tablette) + mobile
   Ces classes sont ajoutées par ton JS : is-narrow / is-wide
   ========================================================= */
@media (min-width: 768px){
  .realisations-carousel .swiper-slide.is-narrow{ width: 42% !important; }
  .realisations-carousel .swiper-slide.is-wide{   width: 58% !important; }
}

@media (max-width: 767px){
  .realisations-carousel .swiper-slide{ width: 100% !important; }
}

/* =========================================================
   CARTE + HOVER
   Objectif : hauteur fixe + image cover + overlay + titre hover
   ========================================================= */

/* Wrapper carte :
   - hauteur fixe = toutes les slides égales
   - overflow hidden = le zoom reste dans la carte */
.realisations-carousel .card{
  position: relative;
  overflow: hidden;
  width: 100%;
  height: var(--realisations-card-height-desktop);
}

/* Mobile : hauteur fixe plus petite */
@media (max-width: 767px){
  .realisations-carousel .card{
    height: var(--realisations-card-height-mobile);
  }
}

/* Image (widget Image) : cover dans une hauteur fixe */
.realisations-carousel .card img{
  transition: transform .35s ease;
  transform: scale(1);
  display: block;
  width: 100%;
  height: 100%;          /* IMPORTANT : plus de height:auto */
  object-fit: cover;     /* cover */
}

/* Si tu utilises un container .bg (background) au lieu de <img> */
.realisations-carousel .card .bg{
  transition: transform .35s ease;
  transform: scale(1);
  width: 100%;
  height: 100%;
  min-height: 0;
}

/* Overlay plein écran */
.realisations-carousel .card .overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0) 55%);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}

/* Titre */
.realisations-carousel .card .title{
  position: absolute;
  left: var(--realisations-title-left);
  bottom: var(--realisations-title-bottom);
  margin: 0;
  color: #fff;
  text-transform: uppercase;
  font-weight: 800;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
  z-index: 2;
}

/* Hover : zoom */
.realisations-carousel .card:hover img,
.realisations-carousel .card:hover .bg{
  transform: scale(1.06);
}

/* Hover : affiche overlay + titre */
.realisations-carousel .card:hover .overlay,
.realisations-carousel .card:hover .title{
  opacity: 1;
}

/* Hover : remonte le titre */
.realisations-carousel .card:hover .title{
  transform: translateY(0);
}

@media (min-width: 768px){
  /* Animation de largeur + perf */
  .realisations-carousel .swiper-slide{
    transition: width 380ms cubic-bezier(.22,.9,.25,1);
    will-change: width;
  }
}

@media (min-width: 768px){
  /* Width de secours si une slide n'a pas encore is-narrow/is-wide */
  .realisations-carousel .swiper-slide{
    width: 42% !important;
  }
}/* End custom CSS */