/* =======================================================
   LP — Galerie Photos (container 1600px, image 1393×874)
======================================================= */
:root {
  --brand: #004c66;
  --bg: #f6f3ec;
}

.lp-photos-page {
  background: var(--bg);
  min-height: 100vh;
  padding-bottom: 80px;
  font-family: "Montserrat", Arial, sans-serif;
}

/* header centré */
.lp-photos-header {
  width: 100%;
  /* max-width: 1680px; */
  margin-inline: auto;
  padding: 32px 120px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.single-article__back {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
}
.lp-toggle-buttons {
  display: flex;
  gap: 12px;
}
.lp-toggle-buttons .btn {
  border: 0;
  border-radius: 6px;
  padding: 8px 20px;
  font-weight: 600;
  cursor: pointer;
  background: #e7f0f2;
  color: var(--brand);
}
.lp-toggle-buttons .btn.active {
  background: var(--brand);
  color: #fff;
}
.lp-toggle-buttons .btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* wrapper centré */
.lp-gallery {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible; /* on veut pouvoir dépasser pour les flèches */
}

/* --------- Conteneur du visuel + flèches --------- */
.lp-main-wrap {
  position: relative;
  width: 1393px;
  height: 874px;
  margin-inline: auto;
  isolation: isolate; /* propre stacking */
}

/* Swiper principal */
.lp-main-swiper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden; /* on clippe les slides, mais PAS les flèches (elles sont hors de ce bloc) */
}

/* neutralise styles globaux du thème */
.lp-main-swiper .swiper-wrapper {
  align-items: stretch !important;
  gap: 0 !important; /* aucune marge entre slides */
}
.lp-main-swiper .swiper-slide {
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
}
.lp-main-swiper .swiper-slide > img {
  width: 100%;
  height: 100%;
  /* object-fit:cover; */
  border-radius: 20px;
  display: block;
}

/* ===== Chevrons (.my-prev / .my-next) — À L’EXTÉRIEUR ===== */
.lp-main-wrap .controls {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50; /* au-dessus du fond beige et des images */
  pointer-events: none; /* pour laisser passer le drag sur l’image */
  width: 100%;
}

.lp-main-wrap .controls .my-prev,
.lp-main-wrap .controls .my-next {
  position: absolute;
  top: 100%;
  width: 64px;
  height: 64px;
  border: 0;
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto; /* cliquables */
}

/* Placement à -77px / +77px hors du visuel */
.lp-main-wrap .controls .my-prev {
  left: -72px;
}
.lp-main-wrap .controls .my-next {
  right: -72px;
}

.lp-main-wrap .controls .my-prev svg,
.lp-main-wrap .controls .my-next svg {
  width: 50px;
  height: 50px;
  display: block;
}

/* compteur */
.lp-counter {
  position: absolute;
  left: 0;
  right: 0;
  margin-top: 16px;
  font-size: 16px;
  color: #888b97;
  font-weight: 500;
  text-align: center;
}

/* =========================================================
   RESPONSIVE - property-photos.css (desktop-first, max-width)
   Base = 2560-1920 ; correctifs en dessous | PAGES CIBLEES UNIQUEMENT
========================================================= */
@media (max-width: 1680px) {
  /* Contient l'en-tete galerie et le viewport */
  .page-template-templatessingleproperty-photos-php .lp-photos-header {
    min-width: 0;
    max-width: 1200px;
    padding: 32px clamp(40px, 6vw, 64px);
  }
  .page-template-templatessingleproperty-photos-php .lp-gallery {
    max-width: 1280px;
  }
  .page-template-templatessingleproperty-photos-php .lp-main-wrap {
    width: 1120px;
    height: 704px;
  }
}

@media (max-width: 1280px) {
  /* Redimensionne le viewer principal */
  .page-template-templatessingleproperty-photos-php .lp-main-wrap {
    width: 960px;
    height: 600px;
  }
  .page-template-templatessingleproperty-photos-php
    .lp-main-wrap
    .controls
    .my-prev {
    left: -64px;
    transform: translate(-50%, -50%);
  }
  .page-template-templatessingleproperty-photos-php
    .lp-main-wrap
    .controls
    .my-next {
    right: -64px;
    transform: translate(50%, -50%);
  }
}

@media (max-width: 1024px) {
  /* Passage en largeur fluide */
  .page-template-templatessingleproperty-photos-php .lp-photos-header {
    padding: 24px clamp(24px, 6vw, 40px);
    flex-wrap: wrap;
    gap: 16px;
  }
  .page-template-templatessingleproperty-photos-php .lp-main-wrap {
    width: 100%;
    max-width: 720px;
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .page-template-templatessingleproperty-photos-php
    .lp-main-wrap
    .controls
    .my-prev,
  .page-template-templatessingleproperty-photos-php
    .lp-main-wrap
    .controls
    .my-next {
    top: 50%;
  }
}

@media (max-width: 768px) {
  /* Recentre les boutons et compacte les layouts */
  .page-template-templatessingleproperty-photos-php .lp-toggle-buttons {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
  }
  .page-template-templatessingleproperty-photos-php .lp-main-wrap {
    max-width: 560px;
    aspect-ratio: 3 / 2;
  }
  .page-template-templatessingleproperty-photos-php
    .lp-main-wrap
    .controls
    .my-prev,
  .page-template-templatessingleproperty-photos-php
    .lp-main-wrap
    .controls
    .my-next {
    left: 8px;
    right: 8px;
    top: auto;
    bottom: -56px;
    transform: none;
  }
}

@media (max-width: 640px) {
  /* Ajuste les boutons de navigation */
  .page-template-templatessingleproperty-photos-php
    .lp-main-wrap
    .controls
    .my-prev,
  .page-template-templatessingleproperty-photos-php
    .lp-main-wrap
    .controls
    .my-next {
    width: 48px;
    height: 48px;
  }
  .page-template-templatessingleproperty-photos-php
    .lp-main-wrap
    .controls
    .my-prev
    svg,
  .page-template-templatessingleproperty-photos-php
    .lp-main-wrap
    .controls
    .my-next
    svg {
    width: 32px;
    height: 32px;
  }
}

@media (max-width: 480px) {
  /* Evite tout overflow horizontal */
  .page-template-templatessingleproperty-photos-php .lp-photos-header {
    padding-inline: clamp(16px, 6vw, 20px);
  }
  .page-template-templatessingleproperty-photos-php .lp-main-wrap {
    max-width: 100%;
  }
}

@media (max-width: 375px) {
  /* Compresse les marges verticales */
  .page-template-templatessingleproperty-photos-php .lp-gallery {
    padding-inline: 16px;
  }
}

@media (max-width: 320px) {
  /* Dernier garde-fou */
  .page-template-templatessingleproperty-photos-php .lp-main-wrap {
    aspect-ratio: 1 / 1;
  }
}

/* === SPEC 2024 - navigation galerie === */
@media (max-width: 1680px) {
  /* Garantit la visibilite des controles */
  .page-template-templatessingleproperty-photos-php .lp-photos-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(16px, 4vw, 24px);
    margin-inline: auto;
  }
  .page-template-templatessingleproperty-photos-php .single-article__back,
  .page-template-templatessingleproperty-photos-php .lp-toggle-buttons .btn {
    position: relative;
    z-index: 60;
  }
  .page-template-templatessingleproperty-photos-php .lp-gallery {
    margin-inline: auto;
  }
}

@media (max-width: 1024px) {
  /* Maintient le centrage du contenu principal */
  .page-template-templatessingleproperty-photos-php .lp-gallery {
    align-items: center;
  }
  .page-template-templatessingleproperty-photos-php .lp-main-wrap {
    margin-inline: auto;
  }
}

@media (max-width: 768px) {
  /* Positionne les boutons sous le media sans masquer le visuel */
  .page-template-templatessingleproperty-photos-php
    .lp-main-wrap
    .controls
    .my-prev,
  .page-template-templatessingleproperty-photos-php
    .lp-main-wrap
    .controls
    .my-next {
    bottom: -48px;
    z-index: 60;
  }
}

/* --------- Vignettes 100×100 --------- */
.lp-thumbs-swiper {
  margin-top: 50px;
  width: 100%;
  max-width: 1393px;
  margin-inline: auto;
}

/* pas de gap CSS : spacing via Swiper spaceBetween:10 */
.lp-thumbs-swiper .swiper-wrapper {
  gap: 0 !important;
}

.lp-thumbs-swiper .swiper-slide {
  width: 100px !important;
  flex: 0 0 100px !important;
  height: 100px;
  border-radius: 10px;
  overflow: hidden;
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.lp-thumbs-swiper .swiper-slide-thumb-active {
  opacity: 1;
  transform: scale(1.05);
  border: 2px solid var(--brand);
}
.lp-thumbs-swiper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* utilitaire */
.hidden {
  display: none !important;
}
.newsletter{
  margin-top:0;
}
/* responsive */
@media (max-width: 1600px) {
  .lp-main-wrap {
    width: min(92vw, 1393px);
    height: calc(min(92vw, 1393px) * 874 / 1393);
  }
  /* rapproche légèrement les flèches */
  .lp-main-wrap .controls .my-prev {
    left: -48px;
    transform: translate(-50%, -50%);
  }
  .lp-main-wrap .controls .my-next {
    right: -48px;
    transform: translate(50%, -50%);
  }
}
@media (max-width: 1680px) {
  .lp-photos-header {
    min-width: 1280px;
  }
  .swiper {
    width: min(92vw, 1393px);
  }
}
@media (max-width: 1024px) {
  .lp-main-wrap .controls .my-prev,
  .lp-main-wrap .controls .my-next {
    width: 48px;
    height: 48px;
  }
  .lp-main-wrap .controls .my-prev svg,
  .lp-main-wrap .controls .my-next svg {
    width: 22px;
    height: 22px;
  }
  .lp-photos-header {
    min-width: 980px;
  }
}
@media (max-width: 768px) {
  .lp-photos-header {
    min-width: 768px;
  }
}
@media (max-width: 440px) {
  .lp-photos-header {
    min-width: 430px;
    padding: 32px;
  }
  .lp-gallery{
    padding-inline: inherit;
  }
}
@media (max-width: 375px) {
  .lp-photos-header {
    min-width: 375px;
    padding: 32px;
  }
}