@import "https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css";
 @import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&family=Nunito:wght@400;700&display=swap');

 :root {
            --luciole-gold: #f7d794;
            --night-blue: #1a1a2e;
            --night-yellow: #f7d794;

        }

        body {
            background-color: var(--night-blue);
            font-family: 'Nunito', sans-serif;
            color: white;
            min-height: 100vh;
        }


        .romantic-title {
            font-family: 'Dancing Script', cursive;
            color: var(--luciole-gold);
            text-shadow: 0 0 15px rgba(247, 215, 148, 0.5);
        }


         .game-card {
            background-color: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(247, 215, 148, 0.2);
            border-radius: 20px;
            backdrop-filter: blur(10px);
            padding: 1.5rem;
        }


        .image-container img {
            border-radius: 15px;
            border: 3px solid var(--luciole-gold);
            box-shadow: 0 0 20px rgba(247, 215, 148, 0.3);
            /*max-height: 300px;*/
            width: 100%;
            object-fit: cover;
            cursor: zoom-in;
            transition: transform 0.3s ease;
        }



        .input {
            background-color: rgba(255, 255, 255, 0.1);
            border: 2px solid var(--luciole-gold);
            color: white;
            text-align: center;
            text-transform: uppercase;
        }

        .button.is-luciole {
            background-color: var(--luciole-gold);
            color: var(--night-blue);
            font-weight: bold;
            transition: all 0.3s;
        }

        .button.is-luciole:hover:not([disabled]) {
            background-color: white;
            transform: scale(1.05);
            box-shadow: 0 0 20px var(--luciole-gold);
        }

          /* Animation de flottement pour l'image */
    .float-animation {
        animation: floating 3s ease-in-out infinite;
    }

    @keyframes floating {
        0% { transform: translateY(0px); }
        50% { transform: translateY(-15px); }
        100% { transform: translateY(0px); }
    }

    /* Style optionnel pour l'arrière-plan de la section */
    .section {
        background: radial-gradient(circle at center, #2d1b4e 0%, #1a0b2e 100%);
        min-height: 100vh;
    }


    .patience-msg {
    font-size: 1.5rem; /* Agrandit le texte */
    font-weight: bold;
    color: #ff6b6b;    /* Un joli rouge-orangé pour tes coeurs */
    text-align: center;
    margin-top: 20px;
    animation: pulse 2s infinite; /* Pour un petit effet battement de coeur */
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}