/* public/css/style.css */

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Une police moderne */
    background-color: #f0f2f5; /* Un arrière-plan doux */
}

.card {
    border: none;
    border-radius: 1rem; /* Bords arrondis pour la modernité */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); /* Ombre légère */
}

.card-title {
    font-weight: 700;
    color: #007bff; /* Couleur primaire de Bootstrap, à ajuster si Beaufort a une charte */
}

#lyrics-display p {
    margin-bottom: 0.5rem;
    line-height: 1.8;
}

.input-group-text {
    background-color: #e9ecef;
    border-color: #dee2e6;
}

.form-control-lyrics {
    display: inline-block; /* Pour que les inputs soient sur la même ligne que le texte */
    width: auto; /* Largeur automatique */
    max-width: 150px; /* Limiter la largeur max */
    min-width: 80px; /* Largeur min pour la visibilité */
    vertical-align: baseline; /* Aligner avec le texte */
    margin: 0 5px; /* Petit espacement autour */
}

#player-lives .fa-heart {
    font-size: 1.5rem;
    transition: transform 0.2s ease-in-out;
}

#player-lives .fa-heart.lost {
    color: #ccc !important; /* Cœur gris quand une vie est perdue */
}

/* Animations pour les validations */
.feedback-correct {
    color: #28a745 !important;
    font-weight: bold;
    animation: fadeEffect 1s forwards;
}

.feedback-incorrect {
    color: #dc3545 !important;
    font-weight: bold;
    animation: fadeEffect 1s forwards;
}

@keyframes fadeEffect {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* Styles pour les modales */
.modal-content {
    border-radius: 1rem;
}

.modal-header.bg-danger {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}