/* Fond d'écran pour toute la page */
body {
    background: url('https://www.cocolands.fr/img/ecrant.jpg') no-repeat center center fixed;
    background-size: cover;
}

/* Conteneurs semi-transparents */
#header,
#chatContainer,
#usersContainer,
#usersContainer2,
.chat-window-wrap div.message div.content,
#memberListContainer { /* Ajout de la liste des membres */
    background-color: rgba(255, 255, 255, 0.57) !important; /* Blanc avec 80% d'opacité */
    border-radius: 10px;
    padding: 10px;
}

/* Zones interactives semi-transparentes */
.nav-tabs, 
.ham-dropdown-list, 
.table-hover > tbody > tr:hover, 
.light-modal .table-striped > tbody > tr:nth-of-type(odd):hover {
    background-color: rgba(240, 240, 240, 0.7) !important;
}

/* Effet de transparence pour les bordures et ombres des conteneurs */
#usersContainer, 
#usersContainer2, 
.oneRoomDiv {
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
}

/* Transparence pour le chat */
.chat-window-wrap {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
}

/* Boutons légèrement transparents */
button {
    background-color: rgba(57, 148, 246, 0);
    color: #000000;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.3s ease;
}

button:hover {
    background-color: rgba(57, 148, 246, 0);
}

/* Input avec transparence */
input, textarea {
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: black;
    padding: 5px;
    border-radius: 5px;
}

input:focus, textarea:focus {
    background-color: rgba(255, 255, 255, 0.7);
}

/* Listes et menus déroulants */
select {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(200, 200, 200, 0.5);
}
/* Barre de saisie du chat */
.chat-input-container {
    background-color: rgba(255, 255, 255, 0.8) !important; /* Même transparence que le chat */
    border-radius: 10px;
}

/* Conteneur de la liste des utilisateurs */
#usersContainer {
    background-color: rgba(255, 255, 255, 0.57) !important;
    border-radius: 10px;
}

/* Pour les éléments internes */
#usersContainer .user-list, 
#usersContainer .user-item {
    background-color: rgba(255, 255, 255, 0.57) !important;
}