.navbar {
    --bs-navbar-padding-x: 0;
    --bs-navbar-padding-y: 0.5rem;
    --bs-navbar-color: rgba(var(--bs-emphasis-color-rgb), 0.65);
    --bs-navbar-hover-color: rgba(var(--bs-emphasis-color-rgb), 0.8);
    --bs-navbar-disabled-color: rgba(var(--bs-emphasis-color-rgb), 0.3);
    --bs-navbar-active-color: rgba(var(--bs-emphasis-color-rgb), 1);
    --bs-navbar-brand-padding-y: 0.3125rem;
    --bs-navbar-brand-margin-end: 1rem;
    --bs-navbar-brand-font-size: 1.25rem;
    --bs-navbar-brand-color: rgba(var(--bs-emphasis-color-rgb), 1);
    --bs-navbar-brand-hover-color: rgba(var(--bs-emphasis-color-rgb), 1);
    --bs-navbar-nav-link-padding-x: 0.5rem;
    --bs-navbar-toggler-padding-y: 0.25rem;
    --bs-navbar-toggler-padding-x: 0.75rem;
    --bs-navbar-toggler-font-size: 1.25rem;
    --bs-navbar-toggler-icon-bg: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e);
    --bs-navbar-toggler-border-color: rgba(var(--bs-emphasis-color-rgb), 0.15);
    --bs-navbar-toggler-border-radius: var(--bs-border-radius);
    --bs-navbar-toggler-focus-width: 0.25rem;
    --bs-navbar-toggler-transition: box-shadow 0.15sease-in-out;
    position: relative;
    display: flex
;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: var(--bs-navbar-padding-y) var(--bs-navbar-padding-x);
}
.buil-navbar {
    color: var(--text-color);
    background: var(--theme-white);
    padding: 0px 0px;
    transition: easetop .35s;
}

/* Ajouter cette classe pour l'animation */
@keyframes slideIn {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}

#mobileMenu {
  animation: slideIn 0.3s ease-out;
}

.user-list {
    display: flex;
    align-items: center;
    margin-top: 15px;
}
.flex {
    display: flex;
}
.user-count {
    margin-left: 10px;
    font-size: 1rem;
}
@media (min-width: 768px) {
    .user-list img {
        width: 40px;
        height: 40px;
    }
}
.user-list img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: 0 5px;
    border: 2px solid white;
}
<style>
.border-white {
    --tw-border-opacity: 1;
    border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
<style>
.border {
    border-width: 1px;
}

.rounded-full {
    border-radius: 9999px;
}

.w-8 {
    width: 2rem;
}

.h-8 {
    height: 2rem;
}
.border-white {
    --bs-border-opacity: 1;
    border-color: rgba(var(--bs-white-rgb), var(--bs-border-opacity)) !important;
}
.border {
    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

img, video {
    max-width: 100%;
    height: auto;
}
.-space-x-3 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;
margin-right:calc(-0.75rem * var(--tw-space-x-reverse));
margin-left:calc(-0.75rem * calc(1 - var(--tw-space-x-reverse)))}
img{
    display: block;
    vertical-align: middle;
}
img, svg {
    vertical-align: middle;
}
img {
    max-width: 100%;
    height: auto;
}

   .banner {
            width: 100%;
            height: 50vh;
            background: url('../img/fond-dynamique.jpg') no-repeat center center/cover;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            color: white;
            position: relative;
            padding: 20px;
        }
        .banner h1 {
            font-size: 3rem;
            margin-bottom: 10px;
        }
        .banner p {
            font-size: 1.2rem;
            margin-bottom: 20px;
        }
        .btn {
            background-color: #22c5b6;
            color: white;
            padding: 15px 25px;
            font-size: 1rem;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            transition: 0.3s;
        }
        .btn:hover {
            background-color: #16a34a;
        }
        .user-list {
            display: flex;
            align-items: center;
            margin-top: 15px;
        }
        .user-list img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin: 0 5px;
            border: 2px solid white;
        }
        .user-count {
            margin-left: 10px;
            font-size: 1rem;
        }



.off {
      display:block
	}
	
	/* Style par défaut pour les écrans de taille moyenne et plus grand */
@media (min-width: 768px) {
    /* Styles pour les tablettes et plus grand */
    nav {
        padding: 1rem 2rem;
    }
    
    #mobileMenu {
        display: none;
    }
    
    #menu {
        display: flex;
        align-items: center;
        gap: 1.5rem;
    }
	.off {
      display:block
	}
	 .banner h1 {
                font-size: 2rem;
            }
            .banner p {
                font-size: 1rem;
            }
            .btn {
                padding: 10px 20px;
            }
            .user-list img {
                width: 40px;
                height: 40px;
            }
			
}

/* Pour les petits écrans (smartphones) */
@media (max-width: 767px) {
    /* Réduire l'espacement et la taille des éléments */
    nav {
        padding: 0.8rem 1rem;
    }
    
    /* Icônes plus grandes pour les smartphones */
    .text-xl, .text-2xl, .text-3xl {
        font-size: 1.5rem;
    }
    
    /* Cacher les éléments de menu par défaut sur mobile */
    #menu {
        display: none;
        flex-direction: column;
        gap: 1rem;
    }

    /* Ajouter des bordures entre les éléments */
    #mobileMenu ul li {
        border-bottom: 1px solid #ddd;
        padding: 10px;
    }

    /* Afficher le menu mobile lorsque le toggle est activé */
    #mobileMenu.show {
        display: block;
    }

    .block.md:hidden {
        display: block;
    }
	.off {
      display:none
	}
	.user-count {
    position: absolute;
    font-size: 1rem;
    margin: -89px;
    margin-top: -17px;
    right: 184px;
    color: #CC7;
    bottom: 19px;
}
}

/* Responsivité pour très petits écrans (téléphones très compacts) */
@media (max-width: 480px) {
    nav {
        padding: 0.5rem;
    }

    /* Réduire encore la taille du texte sur les très petits écrans */
    .text-2xl {
        font-size: 1.25rem;
    }

    /* Réduire les bordures entre les éléments */
    #mobileMenu ul li {
        padding: 8px;
    }

    .flex.items-center.cursor-pointer img {
        width: 25px;
        height: 25px;
    }
	.off {
      display:none
	}
	.user-count {
    position: absolute;
    font-size: 1rem;
    margin: -89px;
    margin-top: -17px;
    right: 184px;
    color: #CC7;
    bottom: 19px;
}
}

/* Personnaliser les champs de recherche pour les petits écrans */
@media (max-width: 600px) {
    .hidden.md\:flex {
        width: 80%;
    }

    .flex.items-center.cursor-pointer input {
        width: 80%;
    }
	.off {
      display:none
	}
    .user-count {
        position: absolute;
        font-size: 1rem;
        margin: -3px;
        margin-top: 140px;
        right: 107px;
        color: #ffffff;
        bottom: 18px;
    }
}

/* Personnaliser les champs de recherche pour les petits écrans */
@media (max-width: 390) {
    .hidden.md\:flex {
        width: 80%;
    }

    .flex.items-center.cursor-pointer input {
        width: 80%;
    }
	.off {
      display:none
	}
    .user-count {
        position: absolute;
        font-size: 1rem;
        margin: -3px;
        margin-top: 140px;
        right: 107px;
        color: #ffffff;
        bottom: 18px;
    }
}

/* Personnaliser les champs de recherche pour les petits écrans */
@media (max-width: 1024px) {
    .hidden.md\:flex {
        width: 80%;
    }

    .flex.items-center.cursor-pointer input {
        width: 80%;
    }
	.off {
      display:none
	}
	.flex {
    display: flex;
    flex-wrap: wrap;
}

}