/* Styles personnalisés pour compléter le thème Bootstrap */

/* Ajouter plus d'espacement pour la lisibilité */
body {
    line-height: 1.6;
}

/* Styling des cartes */
.card {
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

/* Éléments de formulaire et inputs */
.form-control, .form-select {
    padding: 0.75rem;
}

/* Conteneur de graphique */
#scoreChart {
    min-height: 200px;
    width: 100%;
}

/* Mettre en évidence les informations importantes */
.alert-info {
    border-left: 4px solid var(--bs-info);
}

.alert-warning {
    border-left: 4px solid var(--bs-warning);
}

.alert-secondary {
    border-left: 4px solid var(--bs-secondary);
}

.alert-success {
    border-left: 4px solid var(--bs-success);
}

.alert-danger {
    border-left: 4px solid var(--bs-danger);
}

/* Styling de tableau */
.table thead {
    background-color: rgba(33, 37, 41, 0.05);
}

.table-active {
    background-color: rgba(var(--bs-info-rgb), 0.1) !important;
}

/* Ajustements responsifs */
@media (max-width: 768px) {
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* Améliorer l'accessibilité */
.btn {
    font-weight: 500;
}

.form-label {
    margin-bottom: 0.5rem;
    font-weight: 500;
}

/* Ajouter une légère transition aux éléments pour une meilleure expérience utilisateur */
.btn, 
.form-control, 
.form-select, 
.accordion-button {
    transition: all 0.2s ease-in-out;
}

/* Améliorer le style d'accordéon */
.accordion-button:not(.collapsed) {
    background-color: rgba(var(--bs-info-rgb), 0.1);
    color: var(--bs-info);
}

/* Indicateur de score */
.score-indicator {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 8px solid var(--bs-info);
    background-color: rgba(var(--bs-dark-rgb), 0.8);
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.score-indicator.score-good {
    border-color: var(--bs-success);
    box-shadow: 0 0 15px rgba(var(--bs-success-rgb), 0.5);
}

.score-indicator.score-medium {
    border-color: var(--bs-warning);
    box-shadow: 0 0 15px rgba(var(--bs-warning-rgb), 0.5);
}

.score-indicator.score-bad {
    border-color: var(--bs-danger);
    box-shadow: 0 0 15px rgba(var(--bs-danger-rgb), 0.5);
}

.score-value {
    font-size: 3rem;
    font-weight: bold;
    line-height: 1;
}

.score-label {
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

/* Support du thème clair/sombre */
html[data-bs-theme="light"] {
    --text-color: #212529;
    --bg-color: #f8f9fa;
}

html[data-bs-theme="dark"] {
    --text-color: #f8f9fa;
    --bg-color: #212529;
}

/* Transition de thème */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}