body {
    font-family: 'Sour Gummy', cursive; /* Typographie moderne et ludique */
    background-color: #f1c40f; /* Couleur de fond douce */
    margin: 0;
    padding: 20px;
}

.container {
    max-width: 600px;
    margin: auto;
    background: #ffffff; /* Fond blanc pour le conteneur */
    padding: 20px;
    border-radius: 15px; /* Coins arrondis */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Ombre douce */
}

h1 {
    font-family: 'Sour Gummy', cursive; /* Appliquer la police Sour Gummy */
    text-align: center;
    color: #2c3e50; /* Couleur bleue douce */
    font-size: 2.5em; /* Taille de police plus grande */
    margin-bottom: 20px; /* Espace en bas du titre */
}

.question, 
.options label, 
#result {
    font-family: 'Sour Gummy', cursive; /* Appliquer la police Sour Gummy */
    color: #333; /* Couleur gris foncé */
    font-size: 1.5em; /* Taille de police plus grande */
}

.button-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 colonnes */
    gap: 15px; /* Espace entre les boutons */
    margin-bottom: 20px; /* Espace en bas de la grille */
}

.button-icon {
    width: 64px; /* Largeur de l'image */
    height: 64px; /* Hauteur de l'image */
    object-fit: contain; /* Pour s'assurer que l'image garde ses proportions */
}


#mix {
    width: 100%; /* Prendre toute la largeur */
    margin-top: 10px; /* Espace au-dessus du bouton Mix */
}

.quiz-button {
    padding: 20px; /* Augmenter le padding pour des boutons plus grands */
    display: block;
    width: 100%;
    background-color: #1abc9c; 
    color: #ffffff; /* Texte blanc */
    border: none;
    border-radius: 10px; /* Coins arrondis */
    cursor: pointer;
    font-size: 1.5em; /* Taille de police plus grande */
    margin-bottom: 10px;
    transition: background-color 0.3s;
    font-family: 'Sour Gummy', cursive; /* Appliquer la police Sour Gummy */
}

.quiz-button:hover {
    background-color: #16a085; /* Même couleur de survol que .answer-button */
    transform: scale(1.05); /* Effet de zoom subtil */
}


.question {
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.5em; /* Taille de police plus grande */
    color: #333; /* Couleur gris foncé */
}


button {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #1abc9c; /* Vert vif */
    color: white;
    border: none;
    border-radius: 10px; /* Coins arrondis */
    cursor: pointer;
    font-size: 1.2em; /* Taille de police plus grande */
}

button:hover {
    background-color: #388e3c; /* Vert plus foncé au survol */
}

#result {
    margin-top: 20px;
    font-size: 1.5em; /* Taille de police plus grande */
    color: #333; /* Couleur gris foncé */
}


.error-message {
    background-color: #e74c3c; /* Rouge vif */
    color: white;
    padding: 10px;
    border-radius: 10px;
    margin-top: 10px;
    text-align: center;
}

.error-item {
    color: #e74c3c; /* Rouge pour les erreurs */
    margin-bottom: 10px;
    font-size: 1.2em;
    text-align: center;
}


.options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.option {
    background-color: #f8f9fa; /* Couleur de fond des options */
    border: 1px solid #ced4da;
    border-radius: 10px; /* Coins arrondis */
    padding: 10px;
    transition: background-color 0.3s;
}

.option:hover {
    color: white;
    background-color: #3498db; /* Couleur de fond au survol */
}



/* Ajout d'animations */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}


.centered {
    text-align: center; /* Centre le texte */
}

#next{
    display: none;
    background-color: #ffffff;
}

#next:hover{
    display: none;
    background-color: #ffffff;
}

.answer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 colonnes */
    gap: 10px; /* Espacement entre les boutons */
    margin-top: 20px; /* Espacement au-dessus des boutons */
}

.answer-button {
    display: block;
    width: 100%; /* Prendre toute la largeur de la colonne */
    padding: 10px;
    font-size: 1.2em;
    background-color: #1abc9c;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-align: center; /* Centrer le texte */
    transition: transform 0.2s ease, background-color 0.3s ease; /* Ajout d'une transition pour le zoom */
}

.answer-button:hover {
    background-color: #16a085;
    transform: scale(1.05); /* Appliquer un zoom plus subtil (5% plus grand) */
}

.quiz-stats {
    text-align: center;
    font-size: 1.2em;
    margin-bottom: 20px;
    color: #34495e;
}


#play-again:hover {
    background-color: #16a085; /* Même couleur de survol que .answer-button */
    transform: scale(1.05); /* Effet de zoom subtil */
}


#play-again {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #1abc9c; /* Même couleur que .answer-button */
    font-family: 'Sour Gummy', cursive;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.2em;
    text-align: center;
    transition: transform 0.2s ease, background-color 0.3s ease; /* Transition harmonieuse */
}

.final-message {
    font-size: 1.5em;
    margin-top: 30px;
}

.final-message.perfect {
    color: #2ecc71; /* Vert pour un score parfait */
    font-weight: bold;
}

.final-message.good-job {
    color: #3498db; /* Bleu pour un bon score */
    font-weight: bold;
}

.final-message.encouragement {
    color: #f39c12; /* Orange pour encouragement */
    font-weight: bold;
}