.large-carousel {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 900px;
    margin: auto;
    flex-wrap: wrap;
}

.large-image {
    flex: 2;
    position: relative;
}

.large-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.small-images {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.small-image {
    width: 100%;
    height: auto;
    cursor: pointer;
    border-radius: 10px;
    transition: transform 0.3s ease-in-out;
}

.small-image:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* � RESPONSIVE DESIGN � */

/* Sur les petits écrans, on empile les images */
@media (max-width: 768px) {
    .large-carousel {
        flex-direction: column;
        align-items: center;
    }

    .small-images {
        flex-direction: row;
        width: 100%;
        justify-content: center;
    }

    .small-image {
        width: 48%;
    }
}

/* Pour les très petits écrans (téléphones en mode portrait) */
@media (max-width: 480px) {
    .small-image {
        width: 100%;
    }
}




/* Conteneur principal */
.property-gallery {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 30px;
    width: 100%;
    max-width: 1300px;
	margin-top: -10px;
	 cursor: pointer;
}

/* Grande image à gauche */
.main-image-container {
    width: 66.66%; /* 2/3 de l’espace */
    max-width: 900px;
    display: flex;
    align-items: stretch;
    position: relative; /* Permet de positionner le compteur */
}

.large-image {
    will-change: transform, opacity;
}


.large-image {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 10px;
}

/* Style du compteur */
.photo-counter {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 14px;
    padding: 5px 12px;
    border-radius: 5px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px; /* Espace entre l'icône et le texte */
}

/* Style de l'icône */
.photo-counter svg {
    width: 16px;
    height: 16px;
    fill: white; /* Couleur blanche */
}

@media screen and (max-width: 480px) {
    .photo-counter {
        font-size: 12px; /* Réduit la taille du texte */
        padding: 4px 8px; /* Moins d'espacement */
    }

    .photo-counter svg {
        width: 14px; /* Réduit la taille de l'icône */
        height: 14px;
		margin-bottom: 2px;
    }
}




/* Conteneur des images à droite */
.side-images-container {
    width: 33.33%; /* 1/3 de l’espace */
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Deux images à droite */
.side-image {
    width: 100%;
    height: 50%;
    object-fit: cover;
    border-radius: 5px;
    flex-grow: 1;
}

/* Adaptation mobile */
@media (max-width: 768px) {
    .property-gallery {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .main-image-container {
        width: 100%;
    }

    .side-images-container {
        display: none;
    }

    .large-image {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
    }
}


/* Lightbox */
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    justify-content: center;
    align-items: center;
    z-index: 10000;
    transition: opacity 0.3s ease-in-out;
}

/* Image affichée dans la lightbox */
.lightbox img {
    width: auto;
    height: auto;
    max-width: 90%;
    max-height: 90vh;
    border-radius: 10px;
    transition: transform 0.3s ease-in-out;
}

/* Ajustement pour grands écrans */
@media screen and (min-width: 992px) {
    .lightbox img {
        max-width: 1100px;
        max-height: 90vh;
    }
}

/* Navigation (flèches) */
.lightbox-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
}

/* Flèches précédente et suivante */
.prev-lightbox, .next-lightbox {
    cursor: pointer;
    font-size: 3rem;
    color: white;
    user-select: none;
    padding: 15px;
    transition: opacity 0.3s, transform 0.2s ease-in-out;
}

.prev-lightbox:hover, .next-lightbox:hover {
    opacity: 0.8;
    transform: scale(1.1);
}

/* Bouton de fermeture plus rond */
.close-lightbox {
    position: absolute;
    top: 15px;
    right: 20px;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    transition: opacity 0.3s ease-in-out, transform 0.2s ease-in-out;
    background: rgba(255, 255, 255, 0.2);
    padding: 10px; /* Même valeur pour rendre le bouton rond */
    border-radius: 50%;
    width: 30px; /* Définir une largeur fixe */
    height: 30px; /* Définir une hauteur fixe */
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-lightbox:hover {
    opacity: 1;
    transform: scale(1.15);
}


/* Compteur d'images */
.lightbox-counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 1rem;
    font-weight: bold;
    background: rgba(0, 0, 0, 0.6);
    padding: 6px 12px;
    border-radius: 6px;
}

/* Adaptation pour les écrans plus petits */
@media screen and (max-width: 768px) {
    .lightbox img {
        max-width: 88%;
        max-height: 80vh;
    }

    .prev-lightbox, .next-lightbox {
        font-size: 2.5rem;
        padding: 12px;
    }

   .close-lightbox {
        width: 35px;
        height: 35px;
        font-size: 1.8rem; /* Réduction de la taille de l'icône */
        top: 10px; /* Ajuste la position */
        right: 15px;
    }
    .lightbox-counter {
        font-size: 0.9rem;
    }
}

@media screen and (max-width: 480px) {
    .lightbox img {
        max-width: 95%;
        max-height: 75vh;
    }

    .prev-lightbox, .next-lightbox {
        font-size: 2rem;
        padding: 10px;
    }

    .close-lightbox {
        width: 30px;
        height: 30px;
        font-size: 1.6rem;
        top: 8px;
        right: 10px;
    }
    .lightbox-counter {
        font-size: 0.85rem;
        padding: 5px 10px;
    }
}



/* ——— Forcer 4:3 partout, sans changer le layout ——— */

/* Grande image */
.main-image-container > img.large-image,
.large-carousel .large-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;   /* 4:3 = plus large que haut */
  object-fit: cover;     /* recadre proprement, sans déformer */
  object-position: center;
}

/* Deux images de droite */
.side-images-container > img.side-image {
  display: block;
  width: 100%;
  height: auto;          /* override si une hauteur était définie avant */
  aspect-ratio: 4 / 3;   /* impose le 4:3 */
  object-fit: cover;     /* recadre si l’original est vertical ou panoramique */
  object-position: center;
}

/* Si tu avais .side-image { height: 50%; } plus haut, on l’annule proprement */
.side-image { height: auto; }

img { image-orientation: from-image; }