/* =========================
   GRID / MASONRY + INFINITE
========================= */
.pagination { display: none !important; }

.page-load-status{
  display: none;
  text-align: center;
  padding: 24px 0;
}

.realisations-grid{
  position: relative;
  margin-left: 25px;
  margin-right: 25px;
}

.grid-sizer,
.realisations-item{
  width: calc(25% - 19px);
}

.gutter-sizer{ width: 25px; }

.realisations-item{ margin-bottom: 25px; }

.realisations-item img{
  width: 100%;
  height: auto;
  display: block;
}

/* Infinite Scroll status */
.infinite-scroll-request,
.infinite-scroll-last,
.infinite-scroll-error{ display: none; }

.infinite-scroll-request{ display: inline-block; }

/* Breakpoints */
@media (max-width: 1024px){
  .grid-sizer,
  .realisations-item{ width: calc(33.3333% - 10.6667px); }

  .gutter-sizer{ width: 16px; }

  .realisations-grid{
    margin-left: 16px;
    margin-right: 16px;
  }

  .realisations-item{ margin-bottom: 16px; }
}

@media (max-width: 640px){
  .grid-sizer,
  .realisations-item{ width: calc(50% - 6px); }

  .gutter-sizer{ width: 12px; }

  .realisations-grid{
    margin-left: 12px;
    margin-right: 12px;
  }

  .realisations-item{ margin-bottom: 12px; }
}


/* =========================
   OVERLAY (version real-link)
========================= */
.realisations-item{
  position: relative;
  overflow: hidden;
}

.real-link{
  display: block;
  position: relative;
  text-decoration: none;
  color: inherit;
}

.real-thumb{
  display: block;
  width: 100%;
  height: auto;
  transform: scale(1);
  transition: transform .35s ease;
}

.real-overlay{
  position: absolute;
  inset: 0;
  background: #726d80;
  opacity: 0;
  transition: opacity .25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  text-align: center;
}

.real-overlay-inner{ max-width: 520px; }

.real-title{
  margin: 0 0 10px 0;
  color: #fff;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: .4px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
}

.real-content{
  color: rgba(255,255,255,.92);
  font-size: 14px;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease;
}

/* Hover desktop */
@media (hover:hover) and (pointer:fine){
  .real-link:hover .real-overlay{ opacity: .92; }
  .real-link:hover .real-title,
  .real-link:hover .real-content{
    opacity: 1;
    transform: translateY(0);
  }
}

/* Tap mobile */
.real-link.is-active .real-overlay{ opacity: .92; }
.real-link.is-active .real-title,
.real-link.is-active .real-content{
  opacity: 1;
  transform: translateY(0);
}

/* Curseur neutralisé sur les cards */
.realisations-item,
.realisations-item *{ cursor: default !important; }


/* =========================
   OVERLAY (version realisations-overlay)
   (conservée car présente dans ton code)
========================= */
.realisations-overlay{
  position: absolute;
  inset: 0;
  background: #726d80;
  opacity: 0;
  transition: opacity .25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.realisations-overlay__inner{
  color: #fff;
  max-width: 90%;
}

.realisations-overlay__title{
  margin: 0 0 8px 0;
  font-size: 20px;
  line-height: 1.1;
}

.realisations-overlay__text{ margin: 0; }

@media (hover:hover) and (pointer:fine){
  .realisations-item:hover .realisations-overlay{ opacity: 1; }
}


/* =========================
   MODAL
========================= */
.realisations-modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 999999;
}

.realisations-modal.is-open{
justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.realisations-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.65);
}

/* ✅ ne clippe jamais les flèches */
.realisations-modal__dialog{
  position: relative;
  overflow: visible !important;
  z-index: 1;
  max-height: calc(100vh - 100px);
  max-width: calc(100vw - 100px);
  display: flex;
}

@media (max-width: 600px){
  .realisations-modal__dialog{ margin: 16px auto; }
}

/* Close */
.realisations-modal__close{
  position: fixed;
  top: 27px;
  right: 16px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 55px;
  line-height: 1;
  margin: 0;
  padding: 0;
  transform: rotate(0);
  transition: .5s ease;
  transform-origin: center;
}

.realisations-modal__close::after{ content: none; }

/* Media */
.realisations-modal__media{
  display: flex;
  justify-content: center;
  align-items: center;
}

.realisations-modal__media img{
  width: auto;
  max-height: 100%;
  height: auto;
  max-width: 100%;
}

/* Content (si tu l’utilises) */
.realisations-modal__content{
  padding: 18px 20px 22px;
  color: #fff;
}

.realisations-modal__content h3{ margin: 0 0 10px 0; }

.realisations-modal__content div{
  opacity: .95;
  line-height: 1.5;
}


/* =========================
   MODAL NAV (flèches)
   -> 1 seule version finale, sans conflits
========================= */
.realisations-modal__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border: none;
  background: none; /* garde ton look */
  border-radius: 999px;
  cursor: pointer !important;
  z-index: 1000000;
  opacity: .9;
  padding: 10px; /* zone cliquable */
  transition: .5s ease;
  transform-origin: center;
}

/* rotation hover comme tu avais */
.realisations-modal__nav::after{ content: none; }

.realisations-modal__close:hover,
.realisations-modal__nav:hover{
  background: none;
}

.realisations-modal__close:hover {
  transform: rotate(360deg);
}

/* Position finale (sans négatif) */
.realisations-modal__prev{ left: -55px; }
.realisations-modal__next{ right: -55px; }

/* Taille SVG */
.realisations-modal__nav svg{
  width: 26px;
  height: 26px;
}

/* Couleurs SVG */
.realisations-modal__nav polygon,
.realisations-modal__nav path{
  fill: #726d80;
  transition: 1s;
}

.realisations-modal__nav:hover polygon,
.realisations-modal__nav:hover path{
  fill: #dddddd;
}