.button{
    border-radius: 30px;
    color:white;
    width: 100px;
    height: 50px;
    font-family: Butterpop;
    font-size: 25px;
}

#but-oui{
    background-color: rgba(33, 165, 0, 0.87);
}
#but-non{
    background-color: rgb(190, 0, 0);
    position: fixed;
    z-index: 10;
    white-space: nowrap;
    /* 0.05s = réaction quasi instantanée, 0.1s = fluide mais risqué */
    transition: all 0.01s ease-out; 
    pointer-events: auto; /* On s'assure qu'il est "physique" */
}

#main-text{
    font-family: Butterpop;
    font-size: 45px;
    color: #e91e63;
}


/* Centre le bloc principal au milieu de l'écran */
body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: sans-serif;
    background-color: pink;
}

/* Aligne l'image, le texte et le conteneur de boutons verticalement */
.main {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centre horizontalement chaque bloc */
    text-align: center;
    gap: 20px; /* Espace entre img, p et boutons */
}


.container-boutons {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
    min-height: 50px; /* Assure un alignement stable */
}



/* Styles pour les cœurs qui suivent le curseur */
.falling-heart {
    position: fixed; /* Positionnement par rapport à la fenêtre */
    width: 30px;     /* Taille du cœur (ajuste selon ton image) */
    height: auto;
    opacity: 0.8;    /* Légèrement transparent */
    pointer-events: none; /* Important : permet de cliquer à travers le cœur */
    z-index: 9999;   /* Assure que les cœurs sont au-dessus de tout */
    transform: translate(-50%, -50%); /* Centre le cœur sur le curseur */
    animation: fadeOut 1s forwards; /* Animation de disparition */
}

/* Animation de disparition (facultatif mais recommandé pour un bel effet) */
@keyframes fadeOut {
    0% { opacity: 0.8; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); } /* Légèrement plus grand en disparaissant */
}



#success-message{
    font-family: Butterpop;
}
#success-message {
    display: flex;
    flex-direction: column; /* Aligne l'image et le texte verticalement */
    align-items: center;    /* Centre horizontalement */
    justify-content: center; /* Centre verticalement si besoin */
    text-align: center;
    gap: 20px;
}

#success-message h1 {
    font-size: 3rem;
    color: #e91e63;
    margin: 0;
}
@font-face {
    font-family: Butterpop;
    src: url(font/Butterpop.ttf);
}