/* --- Variables --- */
:root { 
    --primary: #ff4081; 
    --bg: #fff5f7; 
}

body { background-color: var(--bg); margin: 0; overflow-x: hidden; font-family: 'Segoe UI', sans-serif; }

/* --- Coeurs animés --- */
.heart-background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.heart { position: absolute; width: 15px; height: 15px; background-color: var(--primary); transform: rotate(45deg); animation: fall linear forwards; }
.heart::before, .heart::after { content: ''; position: absolute; width: 15px; height: 15px; background-color: var(--primary); border-radius: 50%; }
.heart::before { left: -8px; } .heart::after { top: -8px; }
@keyframes fall { 0% { transform: translateY(-20px) rotate(45deg); opacity: 1; } 100% { transform: translateY(110vh) rotate(405deg); opacity: 0; } }

/* --- Carte Principale centrée --- */
.main-card { 
    position: relative; z-index: 10; background: white; border-radius: 20px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); width: 100%; max-width: 550px; padding: 2.5rem;
    margin: 0 auto; /* Centrage horizontal */
}

/* --- Médias & Images --- */
.q-image { 
    width: 100%; max-width: 100%; border-radius: 12px; display: block; 
    margin: 0 auto 1rem auto; /* Centre l'image dans son conteneur */
    max-height: 400px; object-fit: contain; 
}

/* Effet Polaroid pour l'image finale */
.success-photo {
    border: 10px solid white !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2) !important;
    transform: rotate(-1.5deg); /* Inclinaison légère */
}

/* --- UI Elements --- */
.input { 
    border-radius: 15px !important; 
    text-align: center; 
    height: 3.5rem; 
    text-transform: uppercase; /* Force l'affichage en majuscules */
}

.button.is-love { background-color: var(--primary); color: white; border-radius: 15px; font-weight: bold; height: 3.5rem; border: none; }
.hidden { display: none !important; }

#hintText { background: #f0f4f7; padding: 12px; border-radius: 10px; border-left: 5px solid var(--primary); margin-top: 15px; }