/************************
DIAPORAMA
************************/

.diaporama__fs-btn {
    backdrop-filter: blur(5px);
}

.diaporama__caption {
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
}

/* Ajustements pour le mode Plein Écran */

.diaporama-section .is-fullscreen .ratio {
    --bs-aspect-ratio: 100vh !important; /* L'image prend toute la hauteur */
}

.diaporama-section .hover-opacity-100:hover {
    opacity: 1 !important;
}

/* Style des flèches pour plus de visibilité */

.diaporama-section .carousel-control-prev, .carousel-control-next {
    width: 5%;
    opacity: 0.8;
}

.diaporama-section .is-fullscreen .carousel-item {
    height: 100vh !important;
    display: flex !important;
    align-items: center !important; /* Centrage vertical */
    justify-content: center !important; /* Centrage horizontal */
    background-color: #000; /* Fond noir de sécurité */
}

/* 2. On neutralise le ratio Bootstrap en plein écran */

.diaporama-section .is-fullscreen .ratio {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 0 !important; /* Supprime la hauteur forcée du ratio */
    height: 100% !important; /* Occupe toute la hauteur disponible */
    width: 100% !important; /* Occupe toute la largeur disponible */
    position: static !important; /* Libère l'image du carcan absolu */
}

/* 3. On gère l'image elle-même */

.diaporama-section .is-fullscreen .ratio img {
    position: static !important; /* Sort du mode absolu du ratio */
    max-width: 100% !important; /* Ne dépasse pas l'écran en largeur */
    max-height: 100% !important; /* Ne dépasse pas l'écran en hauteur */
    width: auto !important; /* Respecte la taille réelle (si petite) */
    height: auto !important; /* Respecte la taille réelle (si petite) */
    object-fit: contain !important; /* Garde les proportions */
    margin: 0 auto !important; /* Centrage de sécurité */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* Optionnel : détache l'image du fond */
}

.diaporama-section .is-fullscreen .carousel-caption {
    bottom: 5vh !important; /* Remonte un peu la légende pour la visibilité */
    background: rgba(0, 0, 0, 0.5) !important;
    border-radius: var(--radius-card, 8px);
    width: auto !important;
    left: 50% !important;
    transform: translateX(-50%);
    padding: 10px 20px !important;
}