/* style.css */

/* Réduire les marges extérieures du tableau et élargir le tableau */
.container {
    margin-left: 10px;
    margin-right: 10px;
}

.table-container {
    width: 150%;
    overflow-x: auto;
}

/* Ajuster les miniatures */
.img-thumbnail-custom {
    max-width: 100px;  /* Taille réduite des miniatures */
    max-height: 100px; /* Taille réduite des miniatures */
    height: auto;
    display: inline-block;
    margin-right: 5px;
}

/* Ajuster la colonne des images */
.table .image-column {
    width: 350px; /* Ajustez cette valeur selon vos besoins */
    text-align : center;
}

/* Autres styles pour la fenêtre modale */
.modal {
    display: none; 
    position: fixed; 
    z-index: 1; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4); 
}

.modal-content {
    margin: 15% auto; 
    padding: 20px;
    border: 1px solid #888;
    width: 120%;
    max-width: 950px; /* Taille réduite de l'image dans la modale */
    max-height: 950px; /* Taille réduite de l'image dans la modale */
    object-fit: contain; /* Conserver le ratio d'aspect de l'image */
}

/* Classes de positionnement pour la fenêtre modale */
.modal-top {
    top: 10%;
}

.modal-center {
    top: 50%;
    transform: translateY(-50%);
}

.modal-bottom {
    top: 90%;
    transform: translateY(-90%);
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}