#tutoOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(50, 50, 50, 0.8); /* Un fond plus foncé pour un meilleur focus */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050;
}

.tutoContent {
    background-color: #ffffff; /* Fond clair pour le contenu */
    padding: 40px; /* Plus de padding pour une sensation de luxe */
    border-radius: 15px; /* Coins plus arrondis pour un look moderne */
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3); /* Ombre plus prononcée pour un effet de profondeur */
    width: 80%; /* Utiliser un pourcentage de la largeur pour s'adapter à différents écrans */
    max-width: 800px; /* Limite de largeur pour éviter une taille excessive sur grands écrans */
    text-align: center;
    transition: transform 0.3s ease-out; /* Animation douce lors de l'apparition */
}

#closeTuto {
    background-color: #BCC8DA; /* Couleur de fond du bouton spécifiée */
    color: white; /* Couleur du texte pour assurer un bon contraste */
    border: none;
    padding: 12px 25px; /* Dimensionnement confortable pour l'interaction */
    border-radius: 8px; /* Coins arrondis pour un look moderne */
    font-size: 16px; /* Taille de texte adéquate pour une bonne lisibilité */
    font-weight: bold; /* Texte en gras pour accentuer l'importance */
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); /* Ombre subtile pour un effet 3D léger */
    margin-top: 30px; /* Espacement du contenu principal */
    transition: background-color 0.3s; /* Transition douce pour le survol */
}

#closeTuto:hover {
    background-color: #9FAFBE; /* Une teinte plus foncée pour le survol, calculée à partir de #BCC8DA */
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#tutoOverlay {
    animation: fadeIn 0.5s ease-out forwards; /* Animation d'apparition pour l'overlay */
}

@keyframes float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); } /* Déplacez légèrement vers le haut */
    100% { transform: translateY(0); }
}

#assistantContainer {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1050;
    cursor: pointer;
    animation: float 3s ease infinite; /* Utilisez l'animation float avec une durée de 3 secondes */
    transition: all 0.3s ease; /* Ajoutez une transition pour une animation fluide */
}



#assistantContainer:hover {
    transform: translateY(-10px); /* Déplacez légèrement le logo vers le haut au survol */
}


#assistantIcon {
    width: 150px; /* Ajustez selon la taille de l'icône */
    height: auto;
}

#chatContainer {
    position: fixed;
    right: 20px;
    bottom: 100px; /* Ajustez en fonction de la position de l'assistant */
    width: 300px;
    height: 500px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    z-index: 1050;
    display: flex;
    flex-direction: column;
}

#chatHeader {
    padding: 10px;
    background-color:#5CACEE;
    color: white;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

#chatContent {
    flex-grow: 1;
    padding: 10px;
    overflow-y: auto;
}

#closeChat {
    float: right;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
}

#messages {
    margin-bottom: 10px;
    overflow-y: auto;
    height: 300px; /* Ajustez selon vos besoins */
}

.user, .bot {
    margin: 5px;
    padding: 10px;
    border-radius: 5px;
    color: white;
}

.user {
    background-color: #007bff;
    text-align: right;
}

.bot {
    background-color: #666;
    text-align: left;
}

#sendBtn {
    background-color:#5CACEE;
    border-radius: 10px;
    color: #455A64;
}