/* --- Polices --- */
body {
    font-family: 'Poppins', sans-serif;
    background-color: #f8f9fa;
}

h1, h2, h3, h4, h5, h6, .navbar-brand {
    font-family: 'Montserrat', sans-serif;
}

/* --- Thème Tropical --- */
html {
    /* Ajoute un défilement fluide lors du clic sur les ancres */
    scroll-behavior: smooth;
}

.tropical-hero {
    background-color: #f0f7f4; /* Vert pastel */
    border: none;
}

.category-section {
    /* Ajoute un espace au-dessus du titre lors du défilement pour compenser le menu collant */
    scroll-margin-top: 80px; 
}

.category-title {
    padding-bottom: 10px;
    border-bottom: 2px solid #0d6efd; /* Bleu Bootstrap */
    margin-bottom: 20px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}

.service-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

.rating-stars {
    color: #ffc107; /* Jaune Bootstrap */
}

/* Style pour la barre de navigation des thèmes */
.theme-nav {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.theme-nav .nav-link {
    display: flex;
    align-items: center;
    justify-content: center; /* Centrer l'icône */
    background-color: #e9ecef;
    border-radius: 50%; /* Rendre le lien parfaitement circulaire */
    width: 40px;  /* Définir une largeur fixe */
    height: 40px; /* Définir une hauteur fixe */
    margin-right: 10px;
    margin-bottom: 5px;
    transition: background-color 0.2s, color 0.2s;
}

.theme-nav .nav-link:hover {
    background-color: #0d6efd;
    color: #fff;
}

.theme-nav .nav-link i {
    font-size: 1.2rem; /* Agrandir un peu l'icône */
    margin: 0; /* S'assurer qu'il n'y a pas de marge résiduelle */
}

/* Rendre la barre de thèmes scrollable horizontalement sur mobile */
@media (max-width: 991.98px) {
    .theme-nav .container .navbar-nav {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px; /* Espace pour la scrollbar */
        margin-bottom: -15px; /* Compenser le padding */
    }
}