@keyframes fade-in-left {
from {opacity: 0; transform: translateX(-40px);}
to {opacity: 1; transform: translateX(0);}
}
@keyframes fade-in-up {
from {opacity: 0; transform: translateY(30px);}
to {opacity: 1; transform: translateY(0);}
}
@keyframes count {
from {transform: scale(1);}
50% {transform: scale(1.2);}
to {transform: scale(1);}
}
@keyframes pulse-red {
0% { transform: scale(1); opacity: 0.3; }
50% { transform: scale(1.2); opacity: 0.6; }
100% { transform: scale(1); opacity: 0.3; }
}
[data-animate="slide-left"] {
  opacity: 0;
  transform: translateX(-100%);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
[data-animate="slide-left"].active {
  opacity: 1;
  transform: translateX(0);
}

.animate-fade-in-left { animation: fade-in-left 1s ease-in-out both; }
.animate-fade-in-up { animation: fade-in-up 1s ease-in-out both; }
.animate-count { animation: count 1.5s ease-in-out infinite; }
.animate-pulse-red {
animation: pulse-red 2s infinite;
background-color: #f87171; /* text-red-400 */
opacity: 0.3;
z-index: 0;
}
.bg-light {
background-color: #f8f9fa;
}

.rounded-circle {
border-radius: 50%;
}

#loader {
    display: none;
    opacity: 1;
    transition: opacity 0.5s ease;
    background-color: #ececec; 
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.animate-pulse {
    animation: pulse 2s infinite;
}

#loader {
    display: none;
    opacity: 1;
    transition: opacity 0.5s ease;
    background-color: #ececec; 
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.animate-pulse {
    animation: pulse 2s infinite;
}

.nav-logo
{
    max-width: 85px;
    max-height: 85px;    
}

.main-content{
    background-color: rgb(44, 44, 44);
    color: white;
    min-height: calc(100vh - 100px);
    display: none;
    flex-direction: column;
}

.main-content .content{
    margin-top: 10vh;
}

.header-transparent {
    background-color: rgba(250,250,250,0.15);
    transition: background-color 0.3s ease;
  }
  .header-transparent.scrolled {
    background-color: rgba(255, 255, 255, 0.9);
  }

  .availableDate {
    background-color: #4CAF50; 
    color: white;
    border-radius: 50%;
}
.calendar-container {
    background-color: #f9fafb;
    border-radius: 8px;
    border: 1px solid #f3f4f6;
}

.fc {
border-radius: 10px;
color:black;
overflow: hidden;
}

.fc-day {
background-color: #ffffff;
}

.fc-day.availableDate {
background-color: #ffffff;
}

/* Style pour les événements */
.fc-event {
border-radius: 5px;
}
.fc-day-number {
color: #000000;
}

@media (min-width: 768px) {
    .calendar-container {
        max-width: 66.666667%;
    }
    .time-selector {
        max-width: 33.333333%;
    }
}

.time-slots {
    max-height: 300px;
    overflow-y: auto;
}

.time-slot-button {
    transition: background-color 0.3s;
}