/* ========================================================================== */
/* 1. IMAGES INDIVIDUELLES                                                    */
/* ========================================================================== */

/* Conteneur standard d'une image. */
.image-wrapper {
    max-width: 500px;
    height: 100%;
    margin-bottom: 2rem;
}

/* Image responsive et cliquable pour la lightbox. */
.image-wrapper img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius, 10px);
    cursor: zoom-in;
}

/* Limite la hauteur de l'image de localisation sur l'accueil. */
.section-trouver .image-wrapper img {
    max-height: 18rem;
}

/* Préserve entièrement l'image des restaurants de Villeneuve. */
.section-restaurants-villeneuve .image-section .image-wrapper img {
    height: auto !important;
    object-fit: contain !important;
}

/* ========================================================================== */
/* 2. GALERIES                                                                */
/* ========================================================================== */

/* Grille standard de deux images par ligne. */
.image-section {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
}

/* Coupe proprement les images qui dépassent des coins arrondis. */
.image-section .image-wrapper {
    overflow: hidden;
    border-radius: var(--radius, 10px);
}

/* Sur la page séjour, les images remplissent leurs cadres uniformément. */
.sejour-page .image-section .image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
 * Galerie des chambres : on laisse le navigateur calculer la hauteur réelle
 * des cartes et des images. Cela évite qu'une image disparaisse si la hauteur
 * 100 % n'a pas de hauteur de référence exploitable dans la grille.
 */
.section-chambre .image-section .image-wrapper {
    height: auto;
}

.section-chambre .image-section .image-wrapper img {
    height: auto;
    object-fit: cover;
}

/* Certaines galeries spécifiques affichent trois images par ligne. */
.section-capot .image-section,
.section-acces-peniche .image-section {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* ========================================================================== */
/* 3. TEXTE + PICTOGRAMME                                                     */
/* ========================================================================== */

/* Aligne horizontalement un texte et son pictogramme. */
.text-picto {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Supprime la marge basse du paragraphe à l'intérieur du composant. */
.text-picto p {
    margin: 0;
}

/* Taille standard d'un pictogramme. */
.picto {
    width: 3.5rem;
    height: auto;
    vertical-align: middle;
}

/* ========================================================================== */
/* 4. RESPONSIVE                                                              */
/* ========================================================================== */

/* Sur mobile, toutes les galeries passent sur une seule colonne. */
@media (max-width: 768px) {
    .image-section,
    .section-capot .image-section,
    .section-acces-peniche .image-section {
        grid-template-columns: 1fr !important;
    }

    /* Réduit les pictogrammes pour économiser de l'espace. */
    .picto {
        width: 1.5rem;
    }
}

/* ========================================================================== */
/* 5. LIGHTBOX                                                                */
/* ========================================================================== */

/* Fond plein écran de la visionneuse ; caché par défaut. */
#lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.9);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

/* Rend la lightbox visible et interactive. */
#lightbox.open {
    opacity: 1;
    pointer-events: auto;
}

/* Limite l'image à l'intérieur de l'écran sans la déformer. */
#lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: var(--radius, 10px);
    object-fit: contain;
}

/* Bouton de fermeture placé en haut à droite. */
#lightbox .close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 3rem;
    cursor: pointer;
    user-select: none;
}

/* Neutralise le style natif du <button> utilisé pour fermer la lightbox. */
#lightbox button.close {
    padding: 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    line-height: 1;
}