/* ===== APERÇU DE LA PROPRIÉTÉ ===== */

.property-preview{
  margin-top:90px;
  border-top:1px solid #e5e5e5;
  padding-top:60px;
}

.property-preview h2{
  font-size:18px;
  letter-spacing:2px;
  margin-bottom:40px;
}

.preview-grid{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:20px;
}

.preview-grid .large{
  grid-row:span 2;
}

.preview-grid img{
  width:100%;
  height:100%;
  object-fit:cover;
  cursor:pointer;
}

/* 🔥 4 COLONNES */
.preview-grid .small-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
}


/* ===== GALERIE FULLSCREEN ===== */

.gallery{
  position:fixed;
  inset:0;
  background:#000;
  display:none;
  z-index:4000;
}

.gallery.active{display:block}

.gallery img{
  width:100vw;
  height:100vh;
  object-fit:cover;
}

.gallery .close,
.gallery .prev,
.gallery .next{
  position:absolute;
  color:#fff;
  font-size:32px;
  cursor:pointer;
  user-select:none;
}

.gallery .close{
  top:30px;
  right:40px;
}

.gallery .prev,
.gallery .next{
  top:50%;
  transform:translateY(-50%);
  font-size:48px;
  padding:20px;
}

.gallery .prev{left:20px}
.gallery .next{right:20px}


/* ===== RESPONSIVE ===== */

/* écran moyen */
@media(max-width:1200px){
  .preview-grid .small-grid{
    grid-template-columns:repeat(3, 1fr);
  }
}

@media(max-width:900px){
  .preview-grid{
    grid-template-columns:1fr;
  }

  .preview-grid .large{
    grid-row:auto;
  }

  .preview-grid .small-grid{
    grid-template-columns:repeat(2, 1fr);
  }
}

/* ✅ TEST iPhone : 2 colonnes au lieu de 1 */
@media(max-width:600px){
  .preview-grid .small-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:12px;
  }
}

@media(max-width:900px){
  .preview-grid img{
    height:auto;
  }
}


/* ===== PATCH TABLETTES TACTILES : 4 colonnes compactes ===== */

@media (min-width:768px) and (max-width:1400px) and (any-pointer:coarse){

  .preview-grid{
    grid-template-columns: 1.5fr 1fr;
    gap:16px;
  }

  .preview-grid .small-grid{
    grid-template-columns:repeat(4, 1fr);
    gap:10px;
  }

  .preview-grid .small-grid img{
    height:auto;
    aspect-ratio: 1 / 1;
    object-fit:cover;
    display:block;
  }

  .preview-grid .large img{
    height:auto;
    aspect-ratio: 16 / 9;
    object-fit:cover;
    display:block;
  }
}