.modal-right {
    min-width:500px !important;
    width:60% !important;
}
.modal-dialog {
    max-width:55%;
}
.modal {
    min-width:600px !important;
    
}
.modal-dialog-right {
    position: fixed;
    margin: 0;
    right: 0;
    top: 0;
    min-width:700px !important;
    width: 60%; /* 1/4 de la largeur de la page */
    height: 100vh; /* Toute la hauteur de la fenêtre */
    display: flex;
    align-items: stretch; /* S'étend pour remplir la hauteur */
    transition: transform 0.3s ease-out; /* Transition fluide */
}

.modal-dialog-right .modal-content {
    width: 100%;
    height: auto; /* Hauteur automatique pour s'adapter au contenu */
    border: 0;
    border-radius: 0;

}
.rightVolet{
    position: fixed !important;
    margin: 0 !important;
    right: 0 !important;
    top: 0 !important;
    width: 55% !important; 
    height: 100vh !important; 
    display: flex !important;
    align-items: stretch !important; 
    transition: transform 0.3s ease-out !important; 
}
/* Ajustement pour l'animation d'ouverture */
.modal.fade:not(.show) .modal-dialog-right {
    transform: translateX(100%);
}

.modal.fade.show .modal-dialog-right {
    transform: translateX(0);
}
/* Assurez-vous que cette règle CSS est chargée après le CSS de Bootstrap pour qu'elle soit appliquée correctement */
.modal-backdrop.show {
    opacity: none !important;
}