/* styles.css */

/* Couleurs personnalisées */
:root {
    --main-color: #01796F; /* Vert canard */
    --secondary-color: #025D57;
    --accent-color: #FFFFFF;
    --background-color: #01796F; /* Fond de la page */
}

/* Style global */
body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--background-color);
    color: var(--accent-color);
}

/* Titres */
h1 {
    font-size: 2.5em;
    margin-bottom: 0.5em;
    text-align: center;
    color: var(--accent-color);
}

h2, h3 {
    color: var(--accent-color);
}

/* Conteneur */
.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 40px 20px;
    background-color: var(--main-color);
    border-radius: 10px;
}

/* Styles pour les onglets */
.nav-tabs .nav-link.active {
    background-color: var(--secondary-color);
    color: var(--accent-color);
}

.nav-tabs .nav-link {
    color: var(--accent-color);
}

.nav-tabs .nav-link:hover {
    background-color: var(--secondary-color);
    color: var(--accent-color);
}

/* Contenu des onglets */
.tab-content {
    padding: 20px;
    border: 1px solid var(--secondary-color);
    border-top: none;
    background-color: var(--main-color);
    color: var(--accent-color);
    border-radius: 0 0 10px 10px;
}

/* Formulaires */
.form-check-label {
    margin-left: 0.5rem;
    color: var(--accent-color);
}

.form-check-input {
    accent-color: var(--accent-color);
}

#word-limit-msg {
    color: #E74C3C;
}

/* Boutons */
.btn-primary {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--accent-color);
}

.btn-primary:hover {
    background-color: #014942;
    border-color: #014942;
}

.btn-success {
    background-color: #028378;
    border-color: #028378;
    color: var(--accent-color);
}

.btn-success:hover {
    background-color: #026259;
    border-color: #026259;
}

.btn-info {
    background-color: #029C8B;
    border-color: #029C8B;
    color: var(--accent-color);
}

.btn-info:hover {
    background-color: #027F6F;
    border-color: #027F6F;
}

.btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
    color: var(--accent-color);
}

.btn-secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
}

.btn-danger {
    background-color: #E74C3C;
    border-color: #E74C3C;
    color: var(--accent-color);
}

.btn-danger:hover {
    background-color: #C0392B;
    border-color: #C0392B;
}

/* Liste générée */
#random-list {
    margin-top: 20px;
}

#random-list li {
    margin-bottom: 10px;
    background-color: var(--main-color);
    color: var(--accent-color);
}

/* Section d'évaluation */
#evaluation-section {
    margin-top: 20px;
}

#evaluation-section .form-label {
    font-weight: bold;
    color: var(--accent-color);
}

#evaluation-section .form-select {
    display: inline-block;
    width: auto;
    background-color: var(--main-color);
    color: var(--accent-color);
    border-color: var(--secondary-color);
}

#evaluation-section .form-select option {
    background-color: #fff;
    color: #000;
}

/* Statistiques */
#gestalt-stats-table, #cible-stats-table {
    color: var(--accent-color);
}

.table thead th {
    background-color: var(--secondary-color);
    color: var(--accent-color);
}

.table tbody td {
    background-color: var(--main-color);
    color: var(--accent-color);
}

/* Ajustement des bordures du tableau */
.table {
    border-color: var(--secondary-color);
}

.table-bordered > :not(caption) > * > * {
    border-color: var(--secondary-color);
}

/* Ajustement du style pour la section du bouton Afficher */
#show-list-section {
    margin-top: 10px;
}

/* Indicateur de chargement */
#loading-indicator {
    text-align: center;
    color: var(--accent-color);
}

/* Responsive */
@media (max-width: 768px) {
    h1 {
        font-size: 2em;
    }

    .nav-tabs .nav-link {
        font-size: 0.9em;
    }

    .form-control, .form-select {
        width: 100%;
        margin-bottom: 10px;
    }

    .btn {
        width: 100%;
        margin-bottom: 10px;
    }
}