/* Réinitialisation de base pour éviter les marges indésirables du navigateur */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

/* 1. Styles de l'overlay (l'arrière-plan semi-transparent) */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Couleur par défaut */
    z-index: 9998;
    display: none; /* Caché par défaut */
    justify-content: center;
    align-items: center;
    opacity: 0; /* Commence transparent pour l'animation */
    transition: opacity 0.4s ease-in-out;
    overflow: hidden; 
}

/* La classe .active est ajoutée par le JavaScript pour afficher l'overlay */
.lightbox-overlay.active {
    display: flex; /* Rendu visible */
    opacity: 1; /* Rendu opaque */
}

/* 2. Styles du conteneur de contenu de la lightbox */
.lightbox-content {
    position: relative;
    /* Ajustement automatique de la taille pour s'adapter au contenu */
    width: max-content; 
    height: auto;
    max-width: 90%; 
    max-height: 90vh; 
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
    z-index: 9999;
    box-sizing: border-box; /* Inclut le padding dans les dimensions */
    overflow-y: auto; /* Permet le défilement vertical si besoin */
    overflow-x: hidden; /* Empêche le défilement horizontal */

    /* Styles d'animation (zoom et fondu) */
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

/* La classe .active est ajoutée par le JavaScript pour animer le contenu */
.lightbox-content.active {
    opacity: 1;
    transform: scale(1);
}

/* 3. Styles de l'iframe */
.lightbox-content iframe {
    width: 100%; 
    height: 100%; 
    border: none;
    display: block;
}

/* 4. Styles du bouton de fermeture */
.close-btn {
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 30px;
    color: #fff;
    cursor: pointer;
    background: rgba(0, 62, 180, 0.5);
    border-radius: 0 8px 0 0; /* Pour un bouton carré */
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border: none;
    user-select: none;
    transition: background-color 0.3s ease;
}

.close-btn:hover {
    background: rgba(44, 62, 80, 1);
}

/* 5. Styles des messages de chargement et d'erreur */
.loading-message,
.error-message {
    text-align: center;
    font-size: 1.5em;
    padding: 50px;
}

.loading-message {
    color: #555;
}

.error-message {
    color: #c0392b;
}