/* Styles de base */
body {
    background-color: rgba(106, 14, 76, 0.49); /* Un fond plus clair pour contraster */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Police moderne */
    color: white; /* Texte blanc pour le contraste */
    margin: 0; /* Supprimer les marges par défaut */
    display: flex;
    flex-direction: column;
    height: 100vh; /* Prendre toute la hauteur */
}

nav {
    padding: 1rem 2rem; /* Espacement autour du nav */
    background-color: rgba(27, 5, 34, 0.43);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Ombre sous le nav */
}

nav h1 {
    color: white; /* Couleur du titre */
}

nav ul {
    list-style: none; /* Supprimer les puces de la liste */
    display: flex; /* Disposition horizontale */
}

a {
    color: white; /* Couleur des liens */
    text-decoration: none; /* Pas de soulignement */
    transition: color 0.3s; /* Transition douce pour les liens */
}

a:hover {
    color: #2196F3; /* Couleur au survol */
}

.container {
    display: flex;
    justify-content: center; /* Centrer le contenu */
    align-items: center; /* Centrer verticalement */
    flex-grow: 1; /* Prendre l'espace disponible */
    padding: 20px; /* Espacement */
}

.response-container {
    width: 100%; /* Prendre toute la largeur */
    max-width: 600px; /* Limiter la largeur pour un meilleur rendu */
}

#response-list {
    padding: 0; /* Supprimer le padding par défaut */
}

li {
    list-style: none; /* Supprimer les puces de la liste */
}

/* Styles pour les réponses formatées */
.formatted-response {
    margin: 10px 0; /* Espacement entre les réponses */
    padding: 10px; /* Espacement interne */
    background-color: #f5f5f5; /* Fond clair pour les réponses */
    color: #333; /* Couleur du texte */
    border-radius: 5px; /* Coins arrondis */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Ombre sous les réponses */
    transition: transform 0.3s; /* Transition pour l'effet au survol */
}

.formatted-response:hover {
    transform: scale(1.02); /* Légère mise à l'échelle au survol */
}

@media screen and (max-width: 768px) {
    .container {
        width: 90%; /* Largeur réduite sur mobile */
        margin-top: 5%; /* Espacement en haut */
    }

    /* Styles pour les réponses formatées */
    .formatted-response {
        padding: 5px; /* Espacement interne réduit sur mobile */
        font-size: 14px; /* Réduire la taille de la police */
    }
}