@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
                * { margin: 0; padding: 0; box-sizing: border-box; }
                :root {
                    --primary-color: #4a90e2;
                    --secondary-color: #357abd;
                    --text-dark: #1f2937;
                    --text-light: #6b7280;
                    --surface-light: rgba(255, 255, 255, 0.95);
                }
                body {
                    font-family: 'Inter', sans-serif;
                    background: linear-gradient(to bottom, #4a90e2 0%, #357abd 40%, #2c7cc4 65%, #ffffff 65%, #f8fafc 100%);
                    background-repeat: no-repeat;
                    background-size: 100% 100vh;
                    min-height: 100vh;
                    color: var(--text-dark);
                }
                .container {
                    max-width: 720px; /* Augmenté de 500px à 720px */
                    margin: 0 auto;
                    padding: 80px 20px; /* Réduit légèrement le padding vertical */
                    position: relative;
                    z-index: 2;
                }
                .header {
                    text-align: center;
                    margin-bottom: 50px;
                }
                .header h1 {
                    font-size: 2.8rem; /* Légèrement plus grand */
                    font-weight: 700;
                    margin-bottom: 10px;
                    color: white;
                }
                .header p {
                    font-size: 1.3rem; /* Légèrement plus grand */
                    color: rgba(255, 255, 255, 0.9);
                }
                .form-container {
                    background: var(--surface-light);
                    backdrop-filter: blur(20px);
                    border-radius: 24px;
                    padding: 60px; /* Augmenté de 50px à 60px */
                    border: 1px solid rgba(255, 255, 255, 0.2);
                    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
                }
                .form-title {
                    color: #4a90e2;
                    font-size: 2rem; /* Augmenté de 1.8rem à 2rem */
                    margin-bottom: 35px;
                    font-weight: 600;
                    text-align: center;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 12px;
                }
                .form-group {
                    margin-bottom: 28px; /* Légèrement plus d'espace */
                }
                label {
                    display: block;
                    margin-bottom: 10px;
                    font-weight: 500;
                    color: var(--text-dark);
                    font-size: 15px; /* Légèrement plus grand */
                }
                input[type="email"], input[type="password"] {
                    width: 100%;
                    padding: 18px 24px; /* Plus de padding */
                    border: 2px solid rgba(74, 144, 226, 0.2);
                    border-radius: 12px;
                    font-size: 17px; /* Plus grand */
                    font-family: 'Inter', sans-serif;
                    transition: all 0.3s ease;
                    background: rgba(255, 255, 255, 0.8);
                }
                input:focus {
                    outline: none;
                    border-color: #4a90e2;
                    background: rgba(255, 255, 255, 0.95);
                    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
                    transform: translateY(-2px);
                }
                .checkbox-group {
                    display: flex;
                    align-items: center;
                    gap: 12px;
                    margin: 28px 0;
                    padding: 18px;
                    background: rgba(74, 144, 226, 0.05);
                    border-radius: 12px;
                }
                .checkbox-group input[type="checkbox"] {
                    margin: 0;
                    width: 20px;
                    height: 20px;
                    accent-color: #4a90e2;
                }
                .checkbox-group label {
                    margin: 0;
                    font-size: 15px;
                }
                .btn {
                    width: 100%;
                    padding: 20px; /* Augmenté de 18px à 20px */
                    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
                    color: white;
                    border: none;
                    border-radius: 12px;
                    font-size: 17px; /* Plus grand */
                    font-weight: 600;
                    cursor: pointer;
                    transition: all 0.3s ease;
                    font-family: 'Inter', sans-serif;
                }
                .btn:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 10px 25px rgba(74, 144, 226, 0.3);
                }
                .btn:disabled {
                    background: #ccc;
                    cursor: not-allowed;
                    transform: none;
                }
                .links {
                    text-align: center;
                    margin-top: 35px;
                    padding-top: 35px;
                    border-top: 1px solid rgba(74, 144, 226, 0.1);
                }
                .links p { 
                    margin-bottom: 15px;
                    font-size: 15px;
                }
                .links a {
                    color: #4a90e2;
                    text-decoration: none;
                    font-weight: 500;
                    font-size: 15px;
                }
                .alert {
                    padding: 18px 24px;
                    border-radius: 12px;
                    margin-bottom: 28px;
                    font-weight: 500;
                    font-size: 15px;
                }
                .alert-error {
                    background: rgba(239, 68, 68, 0.1);
                    color: #dc2626;
                    border: 1px solid rgba(239, 68, 68, 0.2);
                }
                .alert-success {
                    background: rgba(34, 197, 94, 0.1);
                    color: #16a34a;
                    border: 1px solid rgba(34, 197, 94, 0.2);
                }
                .loading { display: none; }
                .welcome-message {
                    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
                    color: white;
                    padding: 24px;
                    border-radius: 12px;
                    margin-bottom: 35px;
                    text-align: center;
                    animation: pulse 2s ease-in-out infinite alternate;
                }
                .welcome-message i {
                    font-size: 1.8rem;
                    margin-bottom: 12px;
                    display: block;
                }
                .welcome-message small {
                    opacity: 0.9;
                    font-size: 14px;
                }
                @keyframes pulse {
                    from { box-shadow: 0 0 20px rgba(34, 197, 94, 0.3); }
                    to { box-shadow: 0 0 30px rgba(34, 197, 94, 0.5); }
                }
                
                /* Responsive - Tablettes */
                @media (max-width: 1024px) {
                    .container {
                        max-width: 600px;
                    }
                }
                
                /* Responsive - Mobile */
                @media (max-width: 768px) {
                    .container {
                        max-width: 500px;
                        padding: 60px 20px;
                    }
                    .form-container {
                        padding: 40px 30px;
                    }
                    .header h1 {
                        font-size: 2.2rem;
                    }
                    input[type="email"], input[type="password"] {
                        font-size: 16px;
                        padding: 16px 20px;
                    }
                    .btn {
                        font-size: 16px;
                        padding: 18px;
                    }
                }
                
                @media (max-width: 480px) {
                    .container {
                        padding: 40px 15px;
                    }
                    .form-container {
                        padding: 30px 20px;
                    }
                    .header h1 {
                        font-size: 2rem;
                    }
                }