:root {
	font-size: 62.5%;
	--bg-color: #0A0C1A;
    --text-color: #E8EBF2;
    --primary-color: #5D54A0;
    --secondary-color: #4C3C78;
    --accent-color: #8C78D2;
    background-color: var(--bg-color);
}

.choice-container {
    display: flex;
    margin-bottom: 1.2rem; /* Augmente légèrement l'espacement entre les choix */
    width: 100%;
    font-size: 1.8rem;
    border: none; /* On retire la bordure fine */
    background-color: var(--secondary-color); /* Changer le fond en gris foncé pour mieux s'intégrer au fond de page */
    color: white;
    border-radius: 0.5rem; /* Ajout d'angles arrondis pour un look plus moderne */
    overflow: hidden; /* Important pour que l'arrondi s'applique à tous les coins */
    transition: transform 150ms, box-shadow 150ms; /* Ajout de la transition ici */
}

.choice-container:hover {
    cursor: pointer;
    box-shadow: 0 0.4rem 1.4rem 0 var(--accent-color); /* Ombre plus intense au survol */
    transform: translateY(-0.2rem); /* Effet de soulèvement un peu plus marqué */
}

.choice-prefix {
    padding: 1.5rem 2.5rem;
    background-color: var(--primary-color); /* Bleu vif pour le préfixe (A, B, C...) */
    color: white;
    font-weight: bold; /* Rendre le préfixe plus visible */
    /* Pas besoin de border-radius ici grâce à overflow: hidden sur le parent */
}

.choice-text {
    padding: 1.5rem;
    color: white; /* Le texte doit être blanc maintenant que le fond est sombre */
    width: 100%;
    align-self: center; /* Centrer verticalement le texte pour plus de clarté */
}

/* --------------------- Couleurs de Feedback --------------------- */

.correct {
    /* Utiliser une couleur vive mais harmonieuse, et la rendre plus opaque */
    background-color: #4CAF50 !important; /* Vert vibrant (vous pouvez aussi garder lawngreen) */
    color: white !important; /* S'assurer que le texte est lisible */
}

.incorrect {
    /* Utiliser un rouge distinct */
    background-color: #F44336 !important;
    color: white !important; /* S'assurer que le texte est lisible */
}

/* NOUVEAU: Mettre en évidence les préfixes de la bonne/mauvaise réponse */
.correct .choice-prefix,
.incorrect .choice-prefix {
    background-color: inherit !important; /* Pour que le préfixe prenne la couleur de l'état */
}

/* NOUVEAU: S'assurer que le texte de la réponse est bien coloré */
.correct .choice-text,
.incorrect .choice-text {
    color: white !important;
}

/* --------------------- HUD --------------------- */

#hud {
    display: flex;
    justify-content: space-between;
}

.hud-prefix {
    text-align: center;
    font-size: 2rem;
}

.hud-main-text {
    text-align: center;
}

#progressBar {
    width: 20rem;
    height: 4rem;
    border: 0.3rem solid white;
    margin-top: 1.5rem;
}

#progressBarFull {
    height: 3.4rem;
    background-color:  var(--accent-color);
    width: 0%;
}

.software-prefix {
    /* Rendre le texte en gras et plus grand pour attirer l'attention */
    font-weight: 700; 
    font-size: 3rem; /* Légèrement plus grand que le reste de la question */
    
    /* Ajouter une couleur d'accent différente, par exemple l'orange pour bien contraster avec le bleu */
    color: var(--accent-color); /* Un orange vif */
    
    /* Ajouter un espace pour séparer clairement du reste de la question */
    margin-right: 1rem;
    padding-right: 1rem;
    
    /* Optionnel : Si vous voulez un style d'arrière-plan */
    /* background-color: rgba(255, 152, 0, 0.1); 
    border-radius: 0.3rem;
    padding: 0.2rem 0.5rem; */
}

#question {
    font-size: 2.8rem;
    font-weight: 500;
    margin-bottom: 3rem; /* Ajouter un espace plus grand en dessous */
    padding: 1rem;
    border-left: 0.5rem solid var(--accent-color); /* Petite bordure bleue pour encadrer le titre */
    text-align: left; /* Assurez-vous qu'elle n'est pas centrée, c'est plus naturel */
    line-height: 1.4; /* Améliore la lisibilité des longs textes */
    display: flex; /* Permet au margin-right sur .software-prefix de fonctionner */
    align-items: baseline;
}

.hidden {
	display: none !important;
}

/* Dans game.css pour le style spécifique du bouton Suivant */
.next-q-btn {
    /* Augmenter la marge pour le séparer visuellement des réponses */
    margin-top: 3rem; 
}