/* CSS pour les colonnes */
.spectacle-layout-wrapper {
    display: flex; /* Utilisation de Flexbox pour les colonnes */
    flex-wrap: wrap; /* Permet aux colonnes de passer à la ligne sur les petits écrans */
    gap: 30px; /* Espace entre les colonnes */
}

.spectacle-column {
    flex: 1; /* Chaque colonne prendra une part égale de l'espace disponible */
    min-width: 300px; /* Largeur minimale pour éviter un écrasement sur les petits écrans */
}

.left-column {
    flex: 0 0 25%; /* La colonne de gauche prend 40% de la largeur, ne rétrécit pas, ne grandit pas */
    max-width: 25%; /* Largeur maximale pour la colonne de gauche */
}

.right-column {
    flex: 1; /* La colonne de droite prend le reste de l'espace disponible */
}

/* Ajustements pour les petits écrans (responsive) */
@media (max-width: 768px) {
    .spectacle-layout-wrapper {
        flex-direction: column; /* Les colonnes s'empilent verticalement */
    }
    .left-column,
    .right-column {
        flex: 0 0 100%; /* Chaque colonne prend toute la largeur */
        max-width: 100%;
    }
}

/* Votre CSS existant pour le diaporama */
.diaporama-container { margin-top: 20px; }
.diaporama-thumbs { display: flex; gap: 10px; flex-wrap: wrap; justify-content: start; }
.diapo-thumb {
    cursor: pointer;
    max-height: 150px;
    border: 2px solid #ddd;
    transition: transform 0.2s;
}
.diapo-thumb:hover { transform: scale(1.05); }

/* display de la lightbox */
/* Styles pour la lightbox elle-même */
#lightbox { /* Utilisez #lightbox car c'est l'ID dans votre HTML */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Fond semi-transparent */
    display: none; /* Utilisé par JS pour afficher, assure le centrage */
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Assurez-vous qu'elle est au-dessus de tout */
}

/* Styles pour l'image dans la lightbox */
#lightbox-img {
    max-width: 90%; /* Ajuste la largeur de l'image pour qu'elle ne déborde pas */
    max-height: 90%; /* Ajuste la hauteur de l'image */
    object-fit: contain; /* S'assure que l'image est entièrement visible */
}

/* Styles pour les boutons de navigation (précédent/suivant) */
.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5); /* Fond semi-transparent noir pour le contraste */
    color: white !important; /* Texte/Symbole en blanc pour la visibilité */
    border: none;
    padding: 15px 20px; /* Augmente la taille de la zone cliquable */
    cursor: pointer;
    font-size: 2.5em !important; /* Agrandit le symbole (flèche) */
    line-height: 1; /* Pour un bon alignement vertical du symbole */
    z-index: 10000; /* Assure qu'ils sont au-dessus de l'image */
    user-select: none; /* Empêche la sélection de texte au clic */
    border-radius: 5px; /* Adoucit les coins */
    transition: background-color 0.3s ease; /* Effet de transition au survol */
}

/* Effet de survol */
.lightbox-prev:hover,
.lightbox-next:hover {
    background-color: rgba(0, 0, 0, 0.7); /* Plus opaque au survol */
}

.lightbox-prev {
    left: 10px; /* Positionnement à gauche */
}

.lightbox-next {
    right: 10px; /* Positionnement à droite */
}

/* Styles pour le bouton de fermeture de la lightbox */
.lightbox-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.5); /* Fond semi-transparent noir */
    color: white; /* Texte/Symbole en blanc */
    border: none;
    padding: 8px 15px;
    cursor: pointer;
    font-size: 1.8em;
    z-index: 10000;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.lightbox-close:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

/* Media query pour les petits écrans (téléphones) */
@media only screen and (max-width: 768px) {
    .lightbox-prev,
    .lightbox-next {
        font-size: 2em; /* Légèrement plus petit sur mobile mais toujours visible */
        padding: 10px 15px;
    }

    .lightbox-close {
        font-size: 1.5em;
        padding: 6px 12px;
    }
}

/* Nettoyage de la classe eo-ABL-meta-top */
.eo-ABL-meta-top {
    display: block; /* Annule le display: flex ou float précédent si existant */
    margin-bottom: 0; /* Ajustez si besoin */
    clear: both; /* S'assure que rien ne flotte à côté */
}
.eo-ABL-thumb {
    float: none; /* Annule le flottement si l'image était flottante */
    margin-right: 0; /* Annule la marge si l'image était flottante */
}

/* Style pour la vidéo */
.spectacle-video {
    margin-top: 20px;
    /* Ajoutez des styles pour l'intégration vidéo si nécessaire, par exemple pour la largeur */
}
.spectacle-video iframe {
    max-width: 100%;
    height: auto;
    display: block;
}