/* Force le reset contre les styles hérités */
        html, body { 
            height: 100% !important; 
            margin: 0 !important; 
            padding: 0 !important;
            width: 100% !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            background-color: #f1f5f9 !important;
            font-family: 'Plus Jakarta Sans', sans-serif !important;
        }

        /* Conteneur principal forçant le centrage */
        .page-centerer {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            width: 100% !important;
            max-width: 1000px !important;
            margin: 0 auto !important;
            padding: 20px !important;
        }

        .header { margin-bottom: 40px; text-align: center; }
        .header img { max-width: 600px; height: auto; border-radius: 10px; }

        /* Alertes */
        .alert {
            width: 100%;
            padding: 15px;
            border-radius: 12px;
            margin-bottom: 25px;
            text-align: center;
            font-weight: 700;
            color: white;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
			 font-size: 0.8rem !important; 
        }

        /* Grille des 2 blocs */
        .login-grid {
            display: grid !important;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
            gap: 30px !important;
            width: 100% !important;
        }

        .card {
            background: #ffffff !important;
            padding: 40px !important;
            border-radius: 24px !important;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
            border: 1px solid #e2e8f0 !important;
            text-align: center !important;
        }

        .card h2 { 
            font-size: 1.5rem !important; 
            margin-bottom: 25px !important; 
            color: #003576 !important;
            font-weight: 800 !important;
        }

        .input-group { text-align: left !important; margin-bottom: 20px !important; }
        
        label { 
           
            font-size: 0.8rem !important; 
            font-weight: 700 !important; 
            margin-bottom: 8px !important; 
            color: #64748b !important;
            text-transform: uppercase !important;
        }

        input[type="text"], input[type="password"] {
            width: 100% !important;
            padding: 14px !important;
            border: 2px solid #f1f5f9 !important;
            background: #f8fafc !important;
            border-radius: 12px !important;
            box-sizing: border-box !important;
            font-size: 1rem !important;
        }

        .btn {
            width: 100% !important;
            padding: 16px !important;
            border: none !important;
            border-radius: 12px !important;
            font-size: 1rem !important;
            font-weight: 700 !important;
            color: white !important;
            cursor: pointer !important;
            transition: 0.2s !important;
        }

        .btn-student { background: linear-gradient(to bottom, #003576 0%, #00224d 100%); !important; }
        .btn-teacher { background: linear-gradient(to bottom, #003576 0%, #00224d 100%); !important; }
		
		 .btn-student:hover { background: linear-gradient(to bottom, #004aA4 0%, #003576 100%); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.18); !important; transform: translateY(-2px);}
        .btn-teacher:hover { background: linear-gradient(to bottom, #004aA4 0%, #003576 100%); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.18); !important; transform: translateY(-2px);}
		


        .links { margin-top: 20px !important; display: flex !important; flex-direction: column !important; gap: 10px !important; }
        .links a { color: #00a1e0 !important; text-decoration: none !important; font-size: 0.85rem !important; font-weight: 600 !important; }

        footer {
            margin-top: 50px !important;
            text-align: center !important;
            color: #94a3b8 !important;
            font-size: 0.8rem !important;
        }