body {
    font-family: Arial, sans-serif;
    margin: 20px;
    text-align: center;
}

h1 {
    text-align: center;
}

#daily-schedule {
    display: flex;
    justify-content: space-between;
}

/* Ajoutez ou ajustez ces styles dans votre fichier style_agenda.css */

#schedule-container {
    display: flex;
}

#hours-column {
    background-color: lightblue;
}

.time-slot {
    border: 1px solid #ccc;
    text-align: center;
    padding: 10px;
}

.events-column {
    display: flex;
    flex-wrap: wrap;
}

.event {
    flex-basis: calc(100% / 8); /* Pour avoir 8 cases par tranche horaire */
    box-sizing: border-box;
    border: 1px solid #ccc;
    margin: 5px;
    padding: 5px;
}

.day-column {
    flex: 1; /* Ajustez la flexibilité pour répartir également l'espace dans la colonne des jours */
    border: 1px solid #ccc;
}

/* Ajouter la classe events-container */
.events-container {
    border: 1px solid #ccc;
    padding: 5px;
    margin-top: 5px;
    box-sizing: border-box;
    height: 100%; /* Assurez-vous que le conteneur occupe toute la hauteur du créneau horaire */
    overflow-y: auto; /* Ajout d'un défilement vertical si nécessaire */
}

/* Style pour les événements */
.event {
    background-color: #ffa07a;
    padding: 3px;
    margin-bottom: 3px;
    border-radius: 3px;
}