.list-prestation {
    text-align: left;
    padding:10px;
    background-color: white;
    box-shadow: 0 3px 10px pink;
    border-radius: 8px;
}
.boutonPrestationPlus{
    text-align: left;
}

.boutonChoixDate{
    text-align: left;
}
.choixDate {
    font-size: 0.9rem;
}

.list-horaire {
    padding:10px;
    border-radius: 8px;
}

.day-slot {
    display: inline-block; /* Change l'affichage pour permettre les marges verticales */
    text-align: center;
    text-decoration: none;
    color: black;
    background-color: #f6f5f2;
    padding: 5px 10px;   
    margin-bottom: 5px; /* Marge en bas */
    border-radius: 5px; /* Ajoute un contour arrondi pour améliorer l'apparence */
}

.horaire-button {
    padding-left: 50px;
}

.semi-bold-horaire {
    color: #333;
}

/* Style pour les jours sans créneaux disponibles */
#daysContainer .disabled {
    color: #bbb; /* Grise le texte */
    pointer-events: none; /* Désactive les clics */
    opacity: 0.6; /* Rend l'élément plus pâle */
}

#daysContainer .disabled .no-available-slot {
    font-style: italic;
    color: #ccc; /* Couleur différente pour afficher 'Pas de créneau' */
}
#daysContainer {
    display: flex;
    overflow-x: auto; /* Permet le défilement horizontal */
    scroll-behavior: smooth;
    width: 600px; /* Largeur fixe pour afficher 5 colonnes de 100px */
    max-width: 100%; /* S'adapte aux petits écrans */
}
#daysContainer > div {
    flex-shrink: 0; /* Empêche les colonnes de se réduire */
    width: 100px; /* Largeur d'une colonne */
}
/* Limiter l'affichage à 5 jours visibles sur les grands écrans */
#daysContainer {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    max-width: calc(5 * 100px); /* Max 5 jours visibles */
}

#daysContainer > div {
    flex: 0 0 auto;
    text-align: center;
}

/* Désactiver l'interaction pour les jours sans créneaux disponibles */
.accordion-item.disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* Vue pour les grands écrans */
#horizontalView {
    display: flex;
    align-items: start;
    justify-content: space-between;
    margin-bottom: 1rem;
    background-color: white;
    padding: 1rem;
    border-radius: 0.25rem;
    max-width: 728px;  /* Largeur maximale de 728px */
    width: 100%;       /* Occupe toute la largeur disponible jusqu'à 728px */
    overflow: hidden;  /* Assure que rien ne dépasse du conteneur */
}

/* Fixer la largeur du bouton scrollLeft (bouton gauche) */
.custom-scroll-button {
    width: 40px;  /* Largeur fixe du bouton */
}

/* Contrôle la largeur du conteneur pour les petits écrans */
@media (max-width: 991px) {
    #horizontalView {
        max-width: 100%;  /* Revenir à la largeur de 100% sous 991px */
    }
}

/* Pour les très petits écrans comme les mobiles (moins de 800px) */
@media (max-width: 800px) {
    #horizontalView {
        max-width: 100%;  /* Toujours s'adapte à la taille de l'écran */
    }
}

#showMoreButton {
    width: 100%;
    padding: 10px;
    text-align: center;
}
.accordion-item.hidden {
    display: none;
}