:root {
            --primary-color: #4361ee;
            --secondary-color: #3a0ca3;
            --accent-color: #f72585;
            --light-color: #f8f9fa;
            --dark-color: #212529;
            --success-color: #4cc9f0;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
		
		body {
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        @font-face {
		  font-family: 'Poppins';
		  font-style: normal;
		  font-weight: 300;
		  src: url('CSS/pxiByp8kv8JHgFVrLDz8Z11lFc-K.woff2') format('woff2');
		}
        .login-container {
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 400px;
            overflow: hidden;
            animation: fadeIn 0.6s ease-out;
            transform-style: preserve-3d;
			position: relative; /* Ajoutez ceci */
			z-index: 2; /* Assure que le formulaire est au-dessus */
        }
        
        .login-header {
            background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
			padding: 25px;
            text-align: center;
        }
        
        .login-header h2 {
            font-weight: 600;
            margin-bottom: 5px;
        }
        
        .login-header p {
            opacity: 0.8;
            font-size: 0.9rem;
        }
        
        .login-form {
            padding: 30px;
        }
        
        .form-group {
            margin-bottom: 20px;
            position: relative;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--dark-color);
        }
        
        .form-group input {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid #e9ecef;
            border-radius: 8px;
            font-size: 0.95rem;
            transition: all 0.3s ease;
			z-index : 2000;
        }
        
        .form-group input:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2);
            outline: none;
        }
        
        .form-group input::placeholder {
            color: #adb5bd;
        }
        
        .error-message {
            color: #e63946;
            font-size: 0.85rem;
            margin-top: 5px;
            display: flex;
            align-items: center;
        }
        
        .error-message i {
            margin-right: 5px;
        }
        
        .btn {
            width: 100%;
            padding: 12px;
            border: none;
            border-radius: 8px;
            background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
            color: white;
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        }
        
        .btn:active {
            transform: translateY(0);
        }
        
        .register-link {
            text-align: center;
            margin-top: 20px;
            color: var(--dark-color);
        }
        
        .register-link a {
            color: var(--primary-color);
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        
        .register-link a:hover {
            color: var(--secondary-color);
            text-decoration: underline;
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
/* Ajoutez ces nouveaux styles bubulle******************** */
        .floating-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            pointer-events: none;
            z-index: 1; /* ← Reste DERRIÈRE le formulaire */
            overflow: hidden;
        }

        .floating-bubble {
            position: absolute;
            border-radius: 50%;
            filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.2));
			
            opacity: 0.7;
			will-change: transform;
        }
		
		
		
		
		
		
		/*********** Effet vague décoratif */
        .wave {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100px;
            background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" fill="%234361ee" opacity=".1"/><path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" fill="%234361ee" opacity=".1"/></svg>');
            background-size: cover;
            background-repeat: no-repeat;
            z-index: -1;
        }
		
		
		
    
        
 
		
		
		
 .cold_wallet{
	position: absolute;
            top: 0;
            left: 0;
            padding: 10px;
            z-index: 1000; /* Assurez-vous que le logo reste au-dessus des autres éléments */
	}
	.password-container {
	  position: relative;
	  width: 200px;
	}

	.toggle-password {
	  position: absolute;
	  right: 10px;
	  top: 50%;
	  transform: translateY(-50%);
	  cursor: pointer;
	  user-select: none; /* Empêche la sélection du texte */
	}

	#passwordInput {
	  width: 100%;
	  padding-right: 30px; /* Espace pour l'œil */
	}
		.error-message {
            color: #e63946;
            font-size: 0.85rem;
            margin-top: 5px;
            display: flex;
            align-items: center;
        }
        
        .error-message i {
            margin-right: 5px;
        }
		
    .language-dropdown {
    position: absolute;
    top: 11px;
    right: 50px;
    z-index: 1000;
    display: inline-block;
	}

	.current-language {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 8px 12px;
		background: white;
		border: 1px solid #4361ee;
		border-radius: 5px;
		cursor: pointer;
	}

	.language-options {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		background: white;
		border: 1px solid #ddd;
		border-radius: 5px;
		list-style: none;
		padding: 0;
		margin: 0;
		width: 100%;
	}

	.language-dropdown:hover .language-options {
		display: block;
	}

	.language-options a {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 8px 12px;
		text-decoration: none;
		color: #333;
	}

	.language-options a:hover {
		background: #f0f0f0;
	}		
	
	    
		
		
		/* Styles pour mobile */
@media (max-width: 768px) {
    .floating-container {
        display: none; /* Cache complètement les bulles sur mobile */
    }
    
    .login-container {
        max-width: 90%;
        margin: 20px;
    }
    
    body {
        padding: 10px;
        height: auto;
        min-height: 100vh;
    }
    
    .form-group input {
        font-size: 16px; /* Évite le zoom sur iOS */
    }
}

/* Désactiver l'animation sur les appareils tactiles */
@media (hover: none) and (pointer: coarse) {
    .floating-bubble {
        animation: none !important;
        display: none !important;
    }
}