/* Style pour le conteneur enveloppant avec défilement horizontal */
.scroll-container {
    overflow-x: auto;
    white-space: nowrap;
    padding: 6px;
    border: 1px solid #ccc; /* Bordure pour visualiser le conteneur */
    -webkit-overflow-scrolling: touch; /* Pour les appareils iOS */
    scroll-behavior: smooth; /* Défilement fluide */
}

/* Style pour le conteneur des boutons circulaires */
.custom-button-container {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
}

/* Style pour chaque bouton circulaire */
.custom-button {
    display: flex;
    flex-direction: column; /* Empile l'icône et le texte verticalement */
    justify-content: center;
    align-items: center;
    width: 12vw;
    height: 12vw;
    max-width: 100px;
    max-height: 100px;
    border-radius: 45%; /* Rendu plus circulaire */
    text-align: center;
    text-decoration: none;
    color: #fff;
    font-size: 0.8em; /* Ajustement de la taille du texte */
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s, background-color 0.3s;
    overflow: hidden;
    padding: 2px;
    white-space: normal; /* Permet au texte de passer à la ligne */
    word-wrap: break-word; /* Coupe les mots longs */
    word-break: break-word; /* Coupure du texte si nécessaire */
}

.custom-button i {
    font-size: 2em; /* Taille des icônes Font Awesome */
    line-height: 1.25; /* Assure un bon espacement entre l'icône et le texte */
}

.custom-button span {
    margin-top: 4px; /* Ajoute un espacement entre l'icône et le texte */
    display: block; /* Assure que le texte s'affiche sous l'icône */
    width: 100%; /* Occupe toute la largeur du bouton pour éviter le débordement */
}

/* Ajustements pour les petits écrans */
@media (max-width: 600px) {
    .custom-button {
        width: 12vw;
        height: 12vw;
        max-width: 80px;
        max-height: 80px;
        font-size: 0.5em; /* Ajustement de la taille du texte sur les petits écrans */
    }

    .custom-button i {
        font-size: 1.4em; /* Ajuste la taille des icônes pour les petits écrans */
    }
}

/* Couleurs des boutons */
.button-fetes { background-color: #005f99; }
.button-anniv { background-color: #3498db; }
.button-amis { background-color: #27ae60; }
.button-gestion { background-color: #f39c12; }
.button-ajout { background-color: #8e44ad; }
.button-deconnexion { background-color: #c0392b; }
.button-modif-profil { background-color: #e74c3c; }
.button-modif-mdp { background-color: #e67e22; }
.button-recup-mdp { background-color: #d35400; }
.button-supprimer { background-color: #c0392b; }
.button-guide { background-color: #2980b9; }
.button-mentions { background-color: #2c3e50; }
.button-cgu { background-color: #34495e; }
.button-rgpd { background-color: #2c3e50; }
.button-timpo { background-color: #1abc9c; }
.button-generateur { background-color: #16a085; }
.button-histoire { background-color: #9b59b6; }
.button-inscription { background-color: #d35400; }
.button-retour { background-color: #1abc9c; }
.button-csv { background-color: orange; }