/* Modal plein écran immersive */
.modal-fullscreen .modal-content {

    background-size: 100%;
    background-color: #949a9e;
    height: 100vh;
    border: none;
    border-radius: 0;
}

/* Supprimer marges internes classiques */
.modal-body {
    padding: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Image centrée */
.modalImage {
    max-height: 85vh;
    object-fit: contain;
    margin: auto;
    display: block;
}

/* Ombre interne cinéma */
.modal-body::after {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 180px rgba(0,0,0,0.85);
    pointer-events: none;
}

/* Header plus discret */
.modal-header,
.modal-footer {
    background: transparent;
    border: none;
    color: #fff;
}

/* Texte blanc pour immersion */
.modal-body p,
.modal-body strong,
.modal-title,
#modalCounter {
    color: #fff;
}

/* Boutons plus subtils */
#prevBtn,
#nextBtn {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
}

#prevBtn:hover,
#nextBtn:hover {
    background: rgba(255,255,255,0.2);
}

button.fermer{
    position: relative;
    display: inline-block;
    padding: 4px;
    margin:2em;
    background-color: silver;
    color: whitesmoke!important;
}
.mobile
{
    display: block;
}
/* Adaptation pour écrans ≤ 768px */
@media (max-width: 768px) {
  /* Boutons Précédent / Suivant centrés et plus petits */
    #prevBtn,
    #nextBtn {
        font-size: 0.85rem;
        padding: 0.3rem 0.6rem;
        margin: 0 0.3rem;
    }

    /* Réduire taille du QR code */
    #qrImage {
        width: 50px;
        height: 50px;
    }

    /* Texte plus petit pour mobile */
    .modal-body p,
    .modal-body strong,
    .modal-title,
    #modalCounter {
        font-size: 0.85rem;
    }

    /* Image centrée avec max-height adaptée */
    .modalImage {
        max-height: 65vh;
    }

    /* Footer plus compact */
    .modal-footer {
        padding: 0.5rem 1rem;
    }

    /* Espacement du compteur */
    #modalCounter {
        margin-bottom: 0.3rem;
    }

    /* Ombre interne plus légère pour petit écran */
    .modal-body::after {
        box-shadow: inset 0 0 120px rgba(0,0,0,0.85);
    }

    /* Boutons plus visibles sur petit écran */
    #prevBtn,
    #nextBtn {
        background: rgba(255,255,255,0.15);
        border: 1px solid rgba(255,255,255,0.3);
    }

    #prevBtn:hover,
    #nextBtn:hover {
        background: rgba(255,255,255,0.25);
    }

    /* Header plus compact */
    .modal-header {
        padding: 0.25rem 1rem;
    }

    .mobile
{
    display: none;
}
}