/* Style global du body */
    body {
        font-family: 'Arial', sans-serif;
        background-color: #121212;
        color: #ffffff;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        flex-direction: column;
    }

    * {
      cursor: url('../Model/person.cur'), auto;
    }

    /* Conteneur pour le défi */
    .challenge-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 20px;
        padding: 20px;
        background-color: #1c1c1c;
        border: 2px solid #00ff00;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 255, 0, 0.2);
        width: 90%;
        max-width: 1000px;
        animation: fadeIn 1s ease-out; /* Animation d'apparition du conteneur */
    }

    /* Animation d'apparition */
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Titre principal du défi */
    .challenge-container h3 {
        font-size: 24px;
        color: #00ff00;
        text-align: center;
        margin-bottom: 20px;
        animation: fadeIn 2s ease-out;
    }

    /* Paragraphe explicatif */
    .challenge-container p {
        font-size: 18px;
        color: #ffffff;
        text-align: center;
        margin-bottom: 20px;
        animation: fadeIn 2s ease-out;
    }

    /* Conteneur pour le puzzle */
    .puzzle-container {
        background-color: #333333;
        border-radius: 8px;
        padding: 20px;
        margin-top: 20px;
        border: 2px solid #00ff00;
        box-shadow: 0 4px 8px rgba(0, 255, 0, 0.2);
        width: 100%;
        max-width: 600px;
        animation: fadeIn 2s ease-out;
        text-align: center;
    }

    /* Animation d’apparition du puzzle */
    .puzzle-container p {
        font-size: 24px;
        color: #00ff00;
        margin-bottom: 20px;
        animation: fadeIn 2s ease-out;
    }

    /* Champ de saisie de la réponse */
    .puzzle-container input[type="text"] {
        background-color: #555555;
        color: #ffffff;
        border: 2px solid #00ff00;
        padding: 15px;
        font-size: 18px;
        border-radius: 8px;
        width: 100%;
        max-width: 350px;
        margin-bottom: 20px;
        outline: none;
        box-sizing: border-box;
        transition: background-color 0.3s ease, transform 0.2s ease;
    }

    /* Effet de survol et focus sur le champ de saisie */
    .puzzle-container input[type="text"]:focus {
        background-color: #444444;
        border-color: #00cc00;
        transform: scale(1.03);
    }

    /* Bouton de validation */
    .puzzle-container button {
        background-color: #00ff00;
        color: #121212;
        padding: 15px 30px;
        font-size: 18px;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.2s ease-in-out;
        margin-top: 20px;
        width: 100%;
        max-width: 200px;
        cursor: url('../Model/click.cur'), pointer;
    }

    /* Effet de survol du bouton */
    .puzzle-container button:hover {
        background-color: #00cc00;
        transform: translateY(-2px);
    }

    /* Message d'erreur ou feedback */
    .feedback {
        background-color: #333333;
        border: 1px solid #00ff00;
        padding: 15px;
        margin-top: 15px;
        color: #ffffff;
        border-radius: 8px;
        text-align: center;
    }


    .next-btn {
        background-color: #222222;
        color: #00ff00;
        padding: 15px 30px;
        font-size: 18px;
        font-weight: bold;
        border: 2px solid #00ff00;
        border-radius: 8px;
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
        text-align: center;
        width: 100%;
        max-width: 250px;
        display: inline-block;
        margin-bottom: 20px;
        cursor: url('../Model/click.cur'), pointer;

    }

    /* Box d'indice */
    .hint-box {
        background-color: #333333;
        padding: 10px;
        border: 1px solid #00ff00;
        margin-top: 10px;
        display: none;
        color: #ffffff;
        animation: fadeIn 1s ease-out;
    }

    /* Style du bouton "Demander un Indice" */
    .hint-btn {
        background-color: #222222;
        color: #00ff00;
        padding: 15px 30px;
        font-size: 18px;
        font-weight: bold;
        border: 2px solid #00ff00;
        border-radius: 8px;
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
        text-align: center;
        width: 100%;
        max-width: 250px;
        display: inline-block;
        margin-bottom: 20px;
    }

    /* Effet au survol du bouton */
    .hint-btn:hover {
        background-color: #00ff00;
        color: #121212;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 255, 0, 0.4);
    }

    /* Effet actif au clic */
    .hint-btn:active {
        transform: translateY(2px);
        background-color: #00cc00;
    }

    /* Effet lorsque le bouton est désactivé (indice déjà demandé ou non disponible) */
    .hint-btn.disabled {
        background-color: #555555;
        color: #999999;
        border-color: #666666;
        cursor: not-allowed;
        box-shadow: none;
    }

    /* Animation d'apparition du bouton */
    .hint-btn {
        animation: fadeInButton 1s ease-out;
        cursor: url('../Model/click.cur'), pointer;
    }

    

    /* Animation d’apparition douce */
    @keyframes fadeInButton {
        0% {
            opacity: 0;
            transform: translateY(10px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Feedback message */
    .feedback {
        background-color: #333333;
        border: 1px solid #00ff00;
        padding: 15px;
        margin-top: 15px;
        color: #ffffff;
        border-radius: 8px;
        text-align: center;
    }

    /* Section avec l'image à gauche */
    .challenge-container .image {
        flex: 1;
        max-width: 150px;
        padding-right: 20px;
    }

    .challenge-container .image img {
        width: 100%;
        height: auto;
        border-radius: 8px;
        border: 2px solid #00ff00;
    }

    /* Media Queries pour les petits écrans */
    @media (max-width: 768px) {
        .challenge-container {
            flex-direction: column;
            align-items: center;
        }

        .question {
            padding: 15px;
        }

        .submit-btn {
            font-size: 16px;
            padding: 12px 25px;
        }
    }

    /* Style pour la section de validation du mot de passe */
    .password-container {
        background-color: #333333;
        border-radius: 8px;
        padding: 20px;
        margin-top: 20px;
        border: 2px solid #00ff00;
        box-shadow: 0 4px 8px rgba(0, 255, 0, 0.2);
        width: 100%;
        max-width: 600px;
        animation: fadeIn 2s ease-out;
        text-align: center;
    }

    /* Animation d’apparition de la section */
    .password-container h3 {
        font-size: 24px;
        color: #00ff00;
        margin-bottom: 20px;
        animation: fadeIn 2s ease-out;
    }

    /* Champ de saisie du mot de passe */
    .password-container input[type="password"] {
        background-color: #555555;
        color: #ffffff;
        border: 2px solid #00ff00;
        padding: 15px;
        font-size: 18px;
        border-radius: 8px;
        width: 100%;
        max-width: 350px;
        margin-bottom: 20px;
        outline: none;
        box-sizing: border-box;
        transition: background-color 0.3s ease, transform 0.2s ease;
    }

    /* Effet de survol et focus sur le champ de saisie */
    .password-container input[type="password"]:focus {
        background-color: #444444;
        border-color: #00cc00;
        transform: scale(1.03);
    }

    /* Bouton de validation */
    .password-container button {
        background-color: #00ff00;
        color: #121212;
        padding: 15px 30px;
        font-size: 18px;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.2s ease-in-out;
        margin-top: 20px;
        width: 100%;
        max-width: 200px;
        cursor: url('../Model/click.cur'), pointer;
    }

    /* Effet de survol du bouton */
    .password-container button:hover {
        background-color: #00cc00;
        transform: translateY(-2px);
    }

    /* Message d'erreur ou feedback */
    .password-container .error-message {
        color: #ff0000;
        font-size: 16px;
        margin-top: 15px;
    }

    /* Style pour le compteur */
    #compteur {
        font-size: 24px;
        font-weight: bold;
        color: #00ff00;
        background-color: #333333;
        padding: 10px 20px;
        border-radius: 8px;
        border: 2px solid #00ff00;
        box-shadow: 0 4px 8px rgba(0, 255, 0, 0.2);
        display: inline-block;
        margin-top: 20px;
        animation: pulse 2s infinite;
    }

    /* Animation de pulsation pour le compteur */
    @keyframes pulse {
        0%, 100% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.1);
        }
    }

    .green-box {
        border: 2px groove #00ff00;
        padding: 1%;
        border-radius: 8px;
        display: inline-block;
        text-align: center;
        margin-bottom: 2%;
    }

    .challenge-container .back-button {
        align-self: flex-start;
        margin-top: 20px;
        padding: 10px 20px;
        font-size: 1em;
        background: #00ff00;
        color: #121212;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s ease;
        cursor: url('../Model/click.cur'), pointer;
    }

    /* Style pour le timer */
    .timer {
        margin-bottom: 1%;
        text-align: center;
    }