:root {
    --bg-color: #121212;
    --card-bg: #1e1e1e;
    --text-main: #ffffff;
    --gold: #D4AF37;
    --green: #4caf50;
    --red: #f44336;
    --whatsapp: #25D366;
    --insta: #C13584;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-main);
    /* Utilisation de dvh pour le mobile (Dynamic Viewport Height) */
    height: 100dvh; 
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; 
}

.app-container {
    width: 100%; max-width: 450px; height: 100%;
    display: flex; flex-direction: column; padding: 20px;
    position: relative; z-index: 1;
}

/* HEADER */
.header-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; height: 60px; flex-shrink: 0; }
.logo-container { flex: 1; display: flex; justify-content: center; align-items: center; padding: 0 10px; }
.logo-container a { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }
.logo-img { max-width: 100%; max-height: 50px; object-fit: contain; cursor: pointer; }
.nav-btn { background: none; border: none; color: white; font-size: 1.3rem; cursor: pointer; padding: 10px; width: 40px; }
.nav-btn:hover { color: var(--gold); }
.hidden { visibility: hidden; opacity: 0; pointer-events: none; }

.progress-track { width: 100%; height: 4px; background: #333; border-radius: 2px; }
.progress-fill { height: 100%; background: var(--gold); width: 0%; transition: width 0.3s ease; }

/* MAIN - Correction du scroll ici */
main {
    flex: 1; 
    display: flex; 
    flex-direction: column;
    /* On aligne en haut pour permettre le scroll si c'est trop grand */
    justify-content: flex-start; 
    align-items: center;
    width: 100%; 
    text-align: center; 
    overflow-y: none; /* Scroll vertical autorisé */
    padding-bottom: 100px; /* IMPORTANT: Espace pour le bouton WhatsApp en bas */
    padding-top: 10px;
}

h1, h2 { margin-bottom: 15px; font-weight: 600; font-size: 1.5rem; }
h3 { margin-bottom: 5px; color: var(--gold); font-size: 1.2rem; }
p { color: #aaa; margin-bottom: 25px; line-height: 1.4; font-size: 0.9rem; }

/* BOUTONS GENERAUX */
button { cursor: pointer; border: none; font-family: inherit; transition: 0.2s; }
.profile-choice { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 15px; width: 100%; }
.big-btn {
    flex: 1; background: var(--card-bg); border: 1px solid #333;
    padding: 30px 10px; border-radius: 15px; color: white;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    transition: all 0.2s; min-width: 0;
}
.big-btn:hover { border-color: var(--gold); background: #252525; transform: translateY(-2px); }
.big-btn i { font-size: 2rem; color: var(--gold); }

/* GRILLES - Réduction de la hauteur max pour laisser de la place au bouton */
.events-grid, .moments-grid, .shop-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    width: 100%; 
    max-height: 45vh; /* Réduit de 55vh à 45vh pour mobile */
    overflow-y: auto; 
    padding-bottom: 10px;
}
.event-btn, .moment-card, .shop-item {
    background: var(--card-bg); border: 1px solid #333; padding: 15px;
    border-radius: 10px; color: #aaa; cursor: pointer; font-size: 0.85rem;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 5px; text-align: center; transition: all 0.2s;
}
.moment-card.selected, .shop-item.selected {
    border-color: var(--gold); background: #2a2510; color: white; font-weight: bold;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
}
.shop-item i { font-size: 1.5rem; margin-bottom: 5px; color: var(--gold); }

/* INPUTS */
input, textarea { width: 100%; padding: 12px; margin-bottom: 10px; border-radius: 8px; border: 1px solid #444; background: #1a1a1a; color: white; font-family: inherit; }
input:focus, textarea:focus { outline: none; border-color: var(--gold); }
.other-input { margin-top: 15px; border-color: var(--gold); }

/* SWIPE CARDS */
.card-wrapper { position: relative; width: 100%; height: 400px; perspective: 1000px; flex-shrink: 0; }
.swipe-card {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: var(--card-bg); border-radius: 20px; border: 1px solid #333;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    transition: transform 0.4s ease, opacity 0.4s;
    user-select: none; cursor: grab;
}
.swipe-card:active { cursor: grabbing; }
.swipe-card i { font-size: 4rem; color: var(--gold); margin-bottom: 25px; pointer-events: none; }
.swipe-card h3 { font-size: 1.6rem; color: white; margin-bottom: 15px; pointer-events: none; }
.swipe-card p { font-size: 1rem; max-width: 85%; line-height: 1.5; pointer-events: none; }

/* CONTROLES */
.controls { display: flex; gap: 40px; margin-top: 30px; flex-shrink: 0; }
.control-btn {
    width: 65px; height: 65px; border-radius: 50%; font-size: 1.8rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.btn-no { background: transparent; color: var(--red); border: 2px solid var(--red); }
.btn-no:hover { background-color: var(--red); color: white; transform: scale(1.1); box-shadow: 0 0 20px rgba(244, 67, 54, 0.6); }
.btn-yes { background: transparent; color: var(--green); border: 2px solid var(--green); }
.btn-yes:hover { background-color: var(--green); color: white; transform: scale(1.1); box-shadow: 0 0 20px rgba(76, 175, 80, 0.6); }

/* ACTIONS SUCCES */
.success-actions { display: flex; flex-direction: column; gap: 15px; width: 100%; margin-top: 20px; }
.btn-action { display: block; width: 100%; padding: 15px; text-decoration: none; font-weight: bold; text-align: center; border-radius: 50px; transition: transform 0.2s; }
.btn-action:hover { transform: scale(1.02); }
.btn-web { background: var(--card-bg); border: 1px solid var(--gold); color: var(--gold); }
.btn-insta { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); color: white; border: none; }

/* RECAP & SUBMIT */
.recap-container { width: 100%; max-height: 25vh; overflow-y: auto; margin-bottom: 15px; text-align: left; }
.recap-section { background: #1a1a1a; padding: 10px; border-radius: 8px; margin-bottom: 5px; font-size: 0.85rem; border-left: 3px solid var(--gold); }
.btn-submit { width: 100%; padding: 15px; background: var(--gold); color: black; font-weight: bold; border-radius: 50px; margin-top: 20px; margin-bottom: 40px; font-size: 1rem; }

/* WHATSAPP */
.whatsapp-float {
    position: fixed; bottom: 20px; right: 20px; background-color: var(--whatsapp);
    color: white; width: 60px; height: 60px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 30px; box-shadow: 2px 2px 10px rgba(0,0,0,0.5); z-index: 100;
    text-decoration: none; transition: transform 0.3s;
}
.whatsapp-float:hover { transform: scale(1.1); }

/* --- PAGE.CSS --- */

/* ... (Garde tout ton code existant avant) ... */

/* Cache le badge reCAPTCHA */
.grecaptcha-badge {
    visibility: hidden !important;
}