@charset "utf-8";
/* CSS Document */

<style>
/* Media Queries pour les petits écrans */
@media (max-width: 768px) {
    .header {
        flex-direction: column; /* Colonne pour les petits écrans */
        align-items: flex-start; /* Alignement à gauche */
		height: auto; /* Hauteur automatique pour permettre la flexibilité */
    }

    .header span {
        margin: 5px 0; /* Espacement vertical entre les éléments */
    }

    .marquee {
		margin-top: 15px; /* Augmenter l'espacement en mode responsive */
        font-size: 14px; /* Réduire la taille de la police pour les petits écrans */
    }
}

@media (max-width: 480px) {
    .header {
        padding: 5px 20px; /* Réduire le padding pour les petits écrans */
    }

    .marquee {
		
        font-size: 1rem; /*13px; /* Réduire encore la taille de la police */
		margin-bottom:20px;		
    }
}

/* Media Queries pour les petits écrans */
@media (max-width: 1024px) {
    .nav-links {
        display: none; /* Masquer les liens par défaut */
        flex-direction: column; /* Colonne pour les liens */
        width: 100%; /* Largeur complète */
        position: absolute; /* Positionnement absolu */
        top: 60px; /* Positionner juste en dessous de la barre de navigation */
        left: 0; /* Aligner à gauche */
        background-color: #fff; /* Couleur de fond */
        z-index: 99; /* Assure que le menu est au-dessus des autres éléments */
    }

    .nav-links.active {
        display: flex; /* Affiche les liens si le menu est actif */
    }

    .menu-toggle {
        display: flex; /* Affiche le menu hamburger sur les petits écrans */
    }

    /* Ajustements pour les tablettes */
    .navbar {
        flex-direction: row; /* Garde la mise en ligne pour les tablettes */
    }
}

@media (max-width: 768px) {
    .nav-links {
        display: none; /* Masquer les liens par défaut */
    }
}


/* Media Queries pour les petits écrans */
@media (max-width: 768px) {
    .chat {
        width: 90%; /* Prend 90% de la largeur de l'écran */
        max-width: 100%; /* Assure que le chat ne dépasse pas la largeur de l'écran */
    }
    
    .chat-cabecera {
        flex-direction: column; /* Colonne pour les petits écrans */
        align-items: flex-start; /* Alignement à gauche */
    }

    .chat-cabecera-texto {
        margin-left: 0; /* Supprime l'espacement à gauche */
    }

    .chat-cuerpo {
        max-height: 150px; /* Réduire la hauteur maximale pour les petits écrans */
    }

    .chat-pie {
        justify-content: center; /* Centrer le bouton sur les petits écrans */
    }
}

@media (max-width: 480px) {
    .chat {
        width: 100%; /* Prend toute la largeur sur les très petits écrans */
    }

    .chat-cuerpo {
        max-height: 120px; /* Réduire encore la hauteur maximale */
        padding: 5px; /* Réduire le padding */
    }

    .chat-cabecera {
        padding: 5px; /* Réduire le padding de l'en-tête */
    }

    .chat-pie {
        padding: 5px; /* Réduire le padding du pied */
    }

    .chat-cuerpo-dialogo {
        font-size: 14px; /* Réduire la taille de la police pour les petits écrans */
    }

    .chat-cabecera-texto-nombre {
        font-size: 16px; /* Ajuster la taille du nom */
    }
}


/* Media Queries pour les petits écrans */
@media (max-width: 480px) {
    .chat-pie-boton {
        padding: 8px; /* Ajuster le remplissage */
        font-size: 12px; /* Réduire la taille de la police */
    }

    .chat-pie-boton img {
        width: 25px; /* Réduire la taille de l'icône */
        height: 25px; /* Réduire la taille de l'icône */
    }
}

 @media (max-width: 600px) {
            .footer-container {
                flex-direction: column;
                align-items: center;
            }
        }
		
/* Media query pour les petites tailles d'écran */
@media (max-width: 768px) {
    .filter {
        flex-direction: column; /* Change la direction en colonne sur les petits écrans */
        align-items: stretch; /* Étirer les éléments pour qu'ils prennent toute la largeur */
    }

    .filter select,
    .filter input {
        width: 90%; /* Prend toute la largeur sur les petits écrans */
        margin-bottom: 10px; /* Ajoute un espacement entre les éléments */
    }
}

</style>