/* --- Variables CSS Globales --- */
:root {
    /* ... (variables de couleurs et de police comme avant) ... */
    --primary-start: #430f8a;
    --primary-end: #3a0ca3;
    --accent-gold: #ffca3a;
    --accent-glow: #ffdd7a;
    --level-up-color: #4ade80;
    --jackpot-color: #ff6b6b; /* Couleur pour le jackpot */
    --jackpot-glow: #ff9a9a;
    --text-light: #f0f3f5;
    --text-dark: #212529;
    --text-secondary: #6c757d;
    --card-bg-start: #ffffff;
    --card-bg-end: #f8f9fa;
    --cooldown-bg: rgba(20, 20, 40, 0.75);
    --cooldown-progress: var(--accent-gold);
    --shadow-color-light: rgba(58, 12, 163, 0.25);
    --shadow-color-dark: rgba(0, 0, 0, 0.15);
    --xp-bar-bg: rgba(0, 0, 0, 0.25);
    --xp-bar-fill: linear-gradient(90deg, #ffca3a 0%, #ff9f1c 100%);
    --modal-bg: rgba(0, 0, 0, 0.65);
    --modal-content-bg: #2c0f5e;
    --danger-color: #dc3545;
    --danger-hover-bg: #c82333;

    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

    /* ... (safe areas, animations, transitions comme avant) ... */
     --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);

    --anim-fast: 0.2s;
    --anim-medium: 0.4s;
    --anim-slow: 0.6s;
    --transition-smooth: cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* --- Réinitialisation et Base --- */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
    height: 100vh; width: 100vw; overflow: hidden;
    font-family: var(--font-main); background-color: #000;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    color: var(--text-light); position: relative;
}

/* --- État de Chargement --- */
.loading-overlay {
    /* ... (identique à avant, avec texte mis à jour via HTML) ... */
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(140deg, var(--primary-start) 0%, var(--primary-end) 100%);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    z-index: 1000; opacity: 1; transition: opacity 0.5s ease, visibility 0.5s ease; visibility: visible;
}
.loading-overlay:not(.active) { opacity: 0; visibility: hidden; pointer-events: none; }
.spinner { width: 50px; height: 50px; border: 4px solid rgba(255, 255, 255, 0.3); border-top-color: var(--accent-gold); border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 15px; }
.loading-overlay p { font-size: 1rem; font-weight: 600; color: var(--text-light); }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Conteneur Principal --- */
.app-container {
    max-width: 480px; height: 100%; margin: 0 auto;
    background: linear-gradient(140deg, var(--primary-start) 0%, var(--primary-end) 100%);
    display: flex; flex-direction: column;
    position: relative; box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
    transition: transform 0.1s ease-in-out;
}
.app-container.shake { animation: screenShake 0.3s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes screenShake {
    10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-3px, 0, 0); } 40%, 60% { transform: translate3d(3px, 0, 0); }
}

/* --- Header --- */
.app-header {
    padding: 10px 15px; padding-top: calc(10px + var(--safe-area-top));
    padding-left: calc(15px + var(--safe-area-left)); padding-right: calc(15px + var(--safe-area-right));
    display: flex; justify-content: space-between; align-items: center;
    background-color: rgba(255, 255, 255, 0.03); backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); flex-shrink: 0; z-index: 10;
}
/* ... (Styles h1, .pro, .header-actions, .icon-button, .balance-container comme avant) ... */
.app-header h1 { font-size: 1.4rem; font-weight: 800; text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4); }
.app-header h1 .highlight { color: var(--accent-gold); }
.app-header h1 .pro { /* Style 'Ultimate' a été enlevé du titre */ font-size: 0; } /* Cache 'Ultimate' */
.header-actions { display: flex; align-items: center; gap: 10px; }
.icon-button { background: rgba(255, 255, 255, 0.1); border: none; border-radius: 50%; width: 38px; height: 38px; display: inline-flex; justify-content: center; align-items: center; color: rgba(255, 255, 255, 0.8); font-size: 1.1rem; cursor: pointer; transition: background-color var(--anim-fast) ease, color var(--anim-fast) ease, transform var(--anim-fast) ease; backdrop-filter: blur(5px); }
.icon-button:hover { background-color: rgba(255, 255, 255, 0.2); color: #fff; }
.icon-button:active { transform: scale(0.92); }
.withdraw-button i { color: var(--accent-gold); }
.withdraw-button.active-pulse { animation: activePulse 0.3s ease-in-out; }
@keyframes activePulse { 0% { transform: scale(1); } 50% { transform: scale(0.9); } 100% { transform: scale(1); } }
.balance-container { display: flex; align-items: center; background-color: rgba(0, 0, 0, 0.3); padding: 5px 12px; border-radius: 50px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.4), 0 1px 1px rgba(255,255,255,0.05); }
.coin-icon { color: var(--accent-gold); margin-right: 6px; font-size: 1.2rem; animation: spin-pulse 3s infinite ease-in-out; }
@keyframes spin-pulse { 0% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.15) rotate(10deg); } 100% { transform: scale(1) rotate(0deg); } }
.balance-value { font-size: 1.2rem; font-weight: 700; min-width: 40px; text-align: right; transition: transform var(--anim-fast) ease, color var(--anim-fast) ease; position: relative; }
.balance-value.glow::before { content: ''; position: absolute; top: -5px; left: -10px; right: -10px; bottom: -5px; background: radial-gradient(ellipse at center, var(--accent-glow) 0%, transparent 70%); opacity: 0; border-radius: 10px; animation: balance-glow-anim var(--anim-medium) ease-out forwards; z-index: -1; pointer-events: none; }
@keyframes balance-glow-anim { 0% { opacity: 0.8; transform: scale(1.2); } 100% { opacity: 0; transform: scale(1.5); } }
.balance-container .currency { margin-left: 4px; font-size: 0.9rem; font-weight: 400; opacity: 0.7; }


/* --- Barre XP/Niveau --- */
.xp-bar-container {
    padding: 8px 15px; padding-left: calc(15px + var(--safe-area-left)); padding-right: calc(15px + var(--safe-area-right));
    background-color: rgba(0, 0, 0, 0.15); display: flex; align-items: center; gap: 10px;
    flex-shrink: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
/* ... (Styles internes .level-display, .xp-bar, .xp-bar-fill, .xp-bar-text comme avant) ... */
.level-display { font-size: 0.9rem; font-weight: 700; color: var(--accent-glow); background-color: rgba(0,0,0,0.2); padding: 3px 8px; border-radius: 5px; white-space: nowrap; }
.xp-bar { flex-grow: 1; height: 18px; background-color: var(--xp-bar-bg); border-radius: 10px; overflow: hidden; position: relative; box-shadow: inset 0 1px 3px rgba(0,0,0,0.3); }
.xp-bar-fill { height: 100%; width: 0%; background: var(--xp-bar-fill); border-radius: 10px; transition: width var(--anim-medium) var(--transition-smooth); box-shadow: 0 0 10px rgba(255, 202, 58, 0.5); }
.xp-bar-text { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; font-size: 0.75rem; font-weight: 600; color: rgba(255, 255, 255, 0.9); text-shadow: 1px 1px 1px rgba(0,0,0,0.6); }


/* --- Contenu Principal --- */
.app-content {
    flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding: 20px; padding-left: calc(20px + var(--safe-area-left)); padding-right: calc(20px + var(--safe-area-right));
    overflow-y: auto; min-height: 0; position: relative;
}
/* Instructions modifiées */
.instructions {
    font-size: 1.1rem; /* Légèrement plus grand */
    margin-bottom: 35px; /* Plus d'espace */
    text-align: center;
    opacity: 0.9;
    padding: 0 15px;
    font-weight: 400;
}
.instructions .highlight-text {
    font-weight: 700;
    color: var(--accent-gold); /* Met en valeur le gain */
}

/* --- Carte "Publicité" --- */
.ad-card-wrapper { perspective: 1000px; margin-bottom: 20px; }
.ad-card {
    /* ... (Styles de base, ombres, tilt 3D, :active comme avant) ... */
    background: linear-gradient(150deg, var(--card-bg-start) 0%, var(--card-bg-end) 100%); color: var(--text-dark);
    padding: 35px 30px; border-radius: 25px; box-shadow: 0 12px 25px var(--shadow-color-light), 0 6px 12px var(--shadow-color-dark);
    text-align: center; cursor: pointer; position: relative; overflow: hidden; user-select: none;
    transition: transform var(--anim-fast) ease, box-shadow var(--anim-fast) ease;
    width: clamp(280px, 80vw, 340px); will-change: transform, box-shadow;
}
@media (hover: hover) and (pointer: fine) {
    .ad-card:hover { transform: translateY(-8px) rotateX(5deg) rotateY(-3deg) scale(1.03); box-shadow: 0 18px 35px var(--shadow-color-light), 0 8px 15px var(--shadow-color-dark); }
    .ad-card:hover .ad-icon { transform: scale(1.2) rotate(-5deg); /* Animation icône survol */ }
}
.ad-card:active { transform: scale(0.96); transition-duration: 0.1s; box-shadow: 0 5px 10px var(--shadow-color-light), 0 2px 5px var(--shadow-color-dark); }

/* Contenu de la carte (textes mis à jour via HTML) */
.ad-content .ad-icon {
    /* Style pour l'icône Euro */
    font-size: 4.5rem; /* Encore plus grande */
    color: var(--accent-gold); /* Couleur OR */
    text-shadow: 1px 1px 5px rgba(0,0,0,0.2);
    margin-bottom: 15px;
    display: inline-block;
    transition: transform var(--anim-medium) cubic-bezier(0.68, -0.55, 0.27, 1.55);
    animation: euro-pulse 2.5s infinite ease-in-out; /* Ajout animation pulse */
}
/* Keyframe pour pulse icône Euro */
@keyframes euro-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

.ad-content h2 { font-size: 1.6rem; font-weight: 700; margin-bottom: 8px; color: var(--text-dark); }
.ad-content p { font-size: 1rem; color: var(--text-secondary); opacity: 0.9; }

/* ... (Effets Shine, Ripple, Cooldown Overlay/Progress/Text comme avant) ... */
.ad-shine { position: absolute; top: -50%; left: -75%; width: 50%; height: 200%; background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%); transform: rotate(25deg); animation: shine 5s infinite linear; opacity: 0.9; pointer-events: none; }
@keyframes shine { 100% { left: 125%; } }
.ad-ripple { position: absolute; border-radius: 50%; background-color: rgba(150, 100, 255, 0.5); width: 100px; height: 100px; transform: scale(0); opacity: 1; pointer-events: none; }
.ad-ripple.animate { animation: ripple-effect var(--anim-medium) linear; }
@keyframes ripple-effect { to { transform: scale(4); opacity: 0; } }
.ad-cooldown-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--cooldown-bg); border-radius: 25px; display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: opacity var(--anim-fast) ease, visibility var(--anim-fast) ease; z-index: 5; pointer-events: none; }
.ad-card.disabled .ad-cooldown-overlay { opacity: 1; visibility: visible; pointer-events: auto; }
.ad-card.disabled { cursor: not-allowed; filter: grayscale(40%); }
.cooldown-progress { position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; border-radius: 50%; background: conic-gradient(var(--cooldown-progress) 0deg, transparent 0deg); transform: translate(-50%, -50%) rotate(-90deg); transition: background 0.05s linear; }
.cooldown-text { font-size: 1.2rem; font-weight: 600; color: var(--text-light); text-shadow: 1px 1px 2px rgba(0,0,0,0.5); }

/* ... (Indicateur Level Up comme avant) ... */
.level-up-indicator { position: absolute; top: -15px; left: 50%; background: linear-gradient(45deg, #f7b733, #fc4a1a); color: white; font-size: 1rem; font-weight: 800; padding: 5px 15px; border-radius: 15px 15px 0 0; box-shadow: 0 -4px 10px rgba(252, 74, 26, 0.5); opacity: 0; transform: translate(-50%, 10px) scale(0.8); transition: opacity var(--anim-medium) ease, transform var(--anim-medium) cubic-bezier(0.68, -0.55, 0.27, 1.55); pointer-events: none; z-index: 6; }
.level-up-indicator.show { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* Indicateur Jackpot */
.jackpot-indicator {
    position: absolute;
    bottom: -10px; /* En bas, dépasse légèrement */
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(45deg, var(--jackpot-color), #fbc531); /* Dégradé Jackpot */
    color: white;
    font-size: 1.1rem;
    font-weight: 800;
    padding: 6px 18px;
    border-radius: 0 0 15px 15px; /* Coins arrondis bas */
    box-shadow: 0 5px 12px rgba(255, 107, 107, 0.6); /* Ombre Jackpot */
    opacity: 0;
    transform: translate(-50%, -10px) scale(0.8);
    transition: opacity var(--anim-medium) ease, transform var(--anim-medium) cubic-bezier(0.68, -0.55, 0.27, 1.55);
    pointer-events: none;
    z-index: 6; /* Au même niveau que level up */
    text-transform: uppercase;
    letter-spacing: 1px;
}
.jackpot-indicator.show {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
}


/* --- Particules --- */
.particle-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.particle { position: absolute; width: 8px; height: 8px; background-color: var(--accent-gold); border-radius: 50%; opacity: 0.9; animation: float-up-scatter-burst 1.5s ease-out forwards; box-shadow: 0 0 6px var(--accent-glow); will-change: transform, opacity; }
/* Keyframe animation particules (inchangée) */
@keyframes float-up-scatter-burst {
    0% { transform: translate(0, 0) scale(1.2); opacity: 1; }
    100% { transform: translate(var(--random-x, 0px), calc(-180px * var(--random-y-mult, 1))) scale(0); opacity: 0; }
}

/* --- Feedback --- */
.feedback {
    min-height: 25px; font-size: 1rem; font-weight: 600; color: var(--accent-gold);
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4); opacity: 0; transform: translateY(10px);
    transition: opacity var(--anim-medium) ease, transform var(--anim-medium) ease;
    text-align: center; margin-top: 10px;
}
.feedback.show { opacity: 1; transform: translateY(0); }
/* Style spécial pour feedback jackpot */
.feedback.jackpot {
    color: var(--jackpot-color); /* Couleur Jackpot */
    font-weight: 700;
    transform: translateY(0) scale(1.1); /* Légèrement plus grand */
}


/* --- Footer (Barre de Navigation) --- */
.app-footer {
    /* ... (Styles identiques à avant, assure le positionnement en bas) ... */
    flex-shrink: 0; background-color: rgba(0, 0, 0, 0.25); backdrop-filter: blur(12px);
    display: flex; justify-content: space-around; padding: 10px 0;
    padding-bottom: calc(10px + var(--safe-area-bottom)); padding-left: var(--safe-area-left); padding-right: var(--safe-area-right);
    border-top: 1px solid rgba(255, 255, 255, 0.1); z-index: 10;
}
.nav-item { display: flex; flex-direction: column; align-items: center; color: rgba(255, 255, 255, 0.6); font-size: 0.7rem; cursor: pointer; transition: color var(--anim-fast) ease, transform var(--anim-fast) ease; padding: 0 5px; }
.nav-item i { font-size: 1.4rem; margin-bottom: 4px; transition: transform 0.2s ease; }
.nav-item.active { color: var(--accent-gold); transform: scale(1.05); }
.nav-item:not(.active):hover { color: rgba(255, 255, 255, 0.8); }
.nav-item:active i { transform: scale(0.85); }

/* --- Modal Paramètres --- */
.settings-modal { /* ... (Styles identiques à avant) ... */ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--modal-bg); backdrop-filter: blur(5px); display: flex; justify-content: center; align-items: center; z-index: 100; opacity: 0; visibility: hidden; transition: opacity var(--anim-medium) ease, visibility var(--anim-medium) ease; }
.settings-modal.active { opacity: 1; visibility: visible; }
.settings-content { background-color: var(--modal-content-bg); padding: 25px 30px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); width: 90%; max-width: 350px; color: var(--text-light); transform: scale(0.95); opacity: 0; transition: transform var(--anim-medium) var(--transition-smooth), opacity var(--anim-medium) ease; }
.settings-modal.active .settings-content { transform: scale(1); opacity: 1; }
.settings-content h2 { font-size: 1.5rem; font-weight: 700; text-align: center; margin-bottom: 25px; color: var(--accent-gold); }
.setting-item { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.setting-item:last-of-type { border-bottom: none; }
.setting-item label { font-size: 1rem; font-weight: 600; margin-right: 10px; }
.setting-item .setting-value { font-size: 0.9rem; opacity: 0.8; }
.setting-item .setting-value small { font-size: 0.8em; opacity: 0.7; }
.switch { position: relative; display: inline-block; width: 50px; height: 28px; flex-shrink: 0; }
.switch input { display: none; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #555; transition: .4s; }
.slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: white; transition: .4s; }
input:checked + .slider { background-color: var(--accent-gold); }
input:focus + .slider { box-shadow: 0 0 1px var(--accent-gold); }
input:checked + .slider:before { transform: translateX(22px); }
.slider.round { border-radius: 34px; }
.slider.round:before { border-radius: 50%; }
.close-button { display: block; width: 100%; padding: 12px; margin-top: 20px; background: linear-gradient(45deg, var(--accent-gold), #f77737); border: none; border-radius: 8px; color: white; font-size: 1rem; font-weight: 600; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.close-button:hover { box-shadow: 0 4px 15px rgba(255, 202, 58, 0.4); }
.close-button:active { transform: scale(0.97); }
.button-danger { display: inline-block; padding: 8px 15px; margin-left: auto; background-color: var(--danger-color); border: none; border-radius: 6px; color: white; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background-color 0.2s ease, transform 0.1s ease; }
.button-danger:hover { background-color: var(--danger-hover-bg); }
.button-danger:active { transform: scale(0.96); }