body {
    font-size: 0.875rem;
    font-family: 'Inter';
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.01), #f8f0cc);
    /*  background-color: rgb(249, 249, 249); */
}
.container {
    padding: 1rem;
}
.row {
    margin: 0;
}
.form-control {
    padding: 50px 0px ;
    height: 50px ;
    box-shadow: 0px 8px 32px -3px rgb(241, 238, 238);
    -webkit-box-shadow: 0px 8px 32px -3px rgb(241, 241, 241);
    -moz-box-shadow: 0px 8px 32px -3px rgb(250, 244, 244);
}
#entete {
    background-color: #f8f9fa;
    padding: 1rem;
    border-bottom: 2px solid #ddd;
    margin-bottom: 2rem; /* Ajoute une marge en bas pour éviter le chevauchement */
    text-align: center; /* Centre le texte */
}
#entete h1 {
    margin: 0;
    font-size: 1.5rem;
    color: #333;
}
#entete .steps {
    margin-top: 1rem;
    text-align: center; /* Centre le texte des étapes */
}
#entete .steps .step {
    display: flex;
    align-items: center;
    justify-content: center; /* Centre horizontalement les éléments dans chaque étape */
    margin-bottom: 0.5rem;
    font-size: 1rem;
}
#entete .steps .step i {
    color: #fac905;
    margin-right: 0.5rem;
}
#entete .steps .step::before {
    content: counter(step) ". "; /* Numéros des étapes */
    counter-increment: step;
    font-weight: bold;
}
#entete {
    counter-reset: step; /* Réinitialiser le compteur */
}
#left-container, #right-container {
    padding: 1rem;
    border-radius: 0.25rem;
}
.text-center h2, #left-container h4, #right-container h4 {
    font-size: 1.25rem;
}
.btn {
    font-size: 15px;
    padding: 0.5rem 1rem;
    background-color: #fac905;
    border: 1px ;
    width: 30%;
}
.form-control, .form-select {
    font-size: 0.875rem;
    padding: 0.5rem;
}
.modal-content {
    font-size: 0.875rem;
}
.modal-header, .modal-body, .modal-footer {
    padding: 0.75rem;
}
.time-btn {
    font-size: 0.75rem;
    padding: 0.25rem;
}
#time-slots .form-select {
    width: 100%;
}





#calendar {
    background-color: #fff;
    border-radius: 10px;
    padding: 10px;

    overflow: hidden; /* Masque la barre de défilement, donc le reste du calendrier ne sera pas accessible */
}

.fc .fc-button-primary {
  /*  background-color: #142b4a;*/
    border: none ;
    background-color: #fac905;
    padding: 5px 8px ;
    font-size : 11px ;
}
.fc .fc-daygrid-day:hover {
    background-color: rgba(250, 201, 5, 0.3);
}
.fc .fc-daygrid-event {
    background-color: #fac905;
    border: none;
    font-size: 10px;
    padding : 4px ;
    color: #000;
}
.fc-daygrid-day {
height: 5px; /* Modifier la hauteur de la cellule */
width: 5px; /* Modifier la largeur de la cellule */
padding: 2px; /* Ajuster le padding */ 
border: none ;
}
.fc-daygrid-day-frame {
border-radius: 20px;
height: 44px; /* Ajuster la hauteur des cellules */
width: 45px; /* Ajuster la largeur des cellules */
/* border-radius: 10px; 
overflow: hidden;    
background-color: #f0f0f0; 
border: 1px solid #ddd;  */
}

.fc-day-header {
font-size: 14px; /* Ajuste la taille du texte dans les cellules des noms des jours */
height: 50px; /* Ajuste la hauteur des cellules des noms des jours */
line-height: 40px; /* Ajuste la hauteur de ligne pour centrer le texte verticalement */
text-align: center; /* Centre le texte horizontalement */
}

.fc-daygrid-day-number {
font-size: 15px; /* Modifier la taille de la date */
color: #555; /* Modifier la couleur de la date */ 
}

.fc-toolbar-title {
font-size: 10px; /* Ajuste cette valeur pour la taille souhaitée */
font-weight: bold; /* Optionnel : rendre le texte en gras */
color : black ;
}

.fc a {
text-decoration: none;
}
.fc-col-header-cell-cushion {
font-size: 12px; /* Modifier la taille de la police */
padding : 10px ;
font-weight: 600; /* Modifier le poids de la police */
text-align: center; /* Centrer le texte */
color : black ;
}
/* Sélecteur spécifique pour changer la taille de la police du titre (mois et année) */
.fc .fc-toolbar-title {
font-size: 20px !important; /* Forcer la taille de la police avec !important */
font-weight: 500; /* Optionnel : rendre le texte en gras */
color: #333; /* Optionnel : changer la couleur du texte */
}




@media (max-width: 1000px) {
    #left-container, #right-container {
        display: block; /* Les conteneurs passent en affichage bloc */
    }

    #left-container {
        width: 100%;
        margin-bottom: 20px; /* Ajoute de l'espace en bas pour séparer les sections */
    }

    #right-container {
        width: 100%;
    }

    #calendar {
        width: 100%; /* Assure que le calendrier utilise la largeur totale */
    }
}
/* Media Queries pour les écrans de moins de 576px de large (pour les très petits écrans) */