/* Assurer que la table prend tout l'espace disponible */
.table {
width: 100%;
}

/* Centrer le contenu des cellules */
.table td, .table th {
text-align: center;
vertical-align: middle;
}

/* Hauteur minimale des cellules */
.table td {
height: 2em;
position: relative;
}

/* Ajouter un indicateur visuel pour les jours avec des événements */
.table td.bg-primary {
cursor: pointer;
transition:background 0.3s;
}

/* Ajuster la taille des boutons sur les petits écrans */
@media (max-width: 576px) {
#prevMonth, #nextMonth {
padding: 5px 10px;
font-size: 0.9rem;
}

#monthYear {
font-size: 1.2rem;
}
}


.event-link {
color: white; /* Couleur du texte du lien */
text-decoration: none; /* Supprime le soulignement */
}

.event-link:hover {
color: white; /* Couleur du texte du lien */
text-decoration: none; /* Ajouter le soulignement au survol */
}

td.bg-primary:hover {
background:var(--accent-color) !important;
}


/* Styles pour les transitions */


.calendarContainer {
position:relative;
}

.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.9); /* Couleur de fond semi-transparente */
display: none; /* Masqué par défaut */
justify-content: center; /* Centrer le contenu */
align-items: center; /* Centrer le contenu */
z-index: 9999; /* S'assurer qu'il est au-dessus des autres éléments */
}

.overlay.active {
display: flex; /* Affichez-le en tant que flex lorsque la classe active est ajoutée */
}

/* Animation de défilement */
#calendarBody {
transition: opacity 0.5s ease;
transform: translateX(0);
opacity: 1;
}

#calendarBody.slide-left {
transform: translateX(-100%);
transition: transform 0.5s ease, opacity 0.5s ease;
opacity: 0;
}

#calendarBody.slide-right {
transform: translateX(100%);
transition: transform 0.5s ease, opacity 0.5s ease;
opacity: 0;
}