/* Styles du modal */
.modal {
    display: none; /* Cacher le modal par défaut */
    position: fixed;
    z-index: 1; /* S'assurer qu'il est au-dessus des autres éléments */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    
}

/* Contenu du modal */
.modal-content {
    
    margin: 15% auto;
    padding: 20px;
    border-radius: 10px;
    width: 30%;
    position: relative; /* Nécessaire pour positionner le bouton de fermeture à droite */
}

/* Bouton de fermeture aligné à droite */
.close-btn {
   
    font-size: 28px;
    font-weight: bold;
    position: absolute; /* Positionné de façon absolue par rapport au modal-content */
    top: 10px; /* Un peu d'espace du haut */
    right: 10px; /* Un peu d'espace de la droite */
    cursor: pointer;
}

/* Changer la couleur du bouton de fermeture au survol */
.close-btn:hover,
.close-btn:focus {
    /* color: black; */
    text-decoration: none;
}


/* Formulaire */
form {
    display: flex;
    flex-direction: column;
}

.filter-group {
    padding: 5px;
    display: flex;
    gap: 10px; /* Espacement horizontal entre les champs */
  }
  
  .filter-field {
    min-width: 150px; /* Largeur minimale des champs */
  }
  
 /* Réduit la taille de la police pour les films */
#data-table td, #data-table th {
    font-size: 12px; /* Ajustez cette valeur selon vos besoins */
    text-align: left; /* Centrer le texte pour tous les éléments du tableau */
}

/* Assurez-vous que les colonnes sont alignées */
#data-table th, #data-table td {
    padding: 8px;
    text-align: left;
}

/* Limiter la longueur de l'overview */
.short-overview {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px; /* Ajustez selon la largeur que vous souhaitez */
}