body {
       margin: 0;
       font-family: 'Montserrat', sans-serif;
       display: flex;
       justify-content: center;
       align-items: center;
       height: 100vh;
       background: linear-gradient(135deg, #0a1f44, #035888);
       overflow: hidden;
   }

   /* Effet de particules lumineuses */
   body::before {
       content: "";
       position: absolute;
       width: 100%;
       /* au lieu de 200% */
       height: 100%;
       background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 2px, transparent 2px);
       background-size: 40px 40px;
       animation: moveBackground 20s linear infinite;
   }

   @keyframes moveBackground {
       from {
           transform: translate(0, 0);
       }

       to {
           transform: translate(-200px, -200px);
       }
   }

   .login-container {
       position: relative;
       z-index: 1;
       width: 350px;
       padding: 40px;
       border-radius: 20px;
       background: rgba(255, 255, 255, 0.1);
       backdrop-filter: blur(15px);
       box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
       text-align: center;
       color: #fff;
       transform: perspective(1000px) rotateX(5deg);
       animation: floatCard 6s ease-in-out infinite;
   }

   @keyframes floatCard {

       0%,
       100% {
           transform: perspective(1000px) rotateX(5deg) translateY(0);
       }

       50% {
           transform: perspective(1000px) rotateX(5deg) translateY(-10px);
       }
   }

   .login-container h2 {
       margin-bottom: 20px;
       font-weight: 600;
       font-size: 1.5rem;
   }

   .login-container input {
       width: 100%;
       padding: 12px;
       margin: 10px 0;
       border-radius: 10px;
       border: none;
       outline: none;
       font-size: 0.95rem;
   }

   .login-container input[type="email"],
   .login-container input[type="password"] {
       background: rgba(255, 255, 255, 0.9);
       color: #333;
   }

   .login-container button {
       width: 100%;
       padding: 12px;
       margin-top: 15px;
       background: linear-gradient(135deg, #ff6a00, #ff3c3c);
       border: none;
       border-radius: 10px;
       color: white;
       font-size: 1rem;
       font-weight: 600;
       cursor: pointer;
       transition: transform 0.2s, box-shadow 0.2s;
   }

   .login-container button:hover {
       transform: translateY(-3px) scale(1.02);
       box-shadow: 0 8px 20px rgba(255, 90, 90, 0.6);
   }

   .error {
       background: rgba(255, 50, 50, 0.8);
       padding: 10px;
       border-radius: 8px;
       margin-bottom: 15px;
       font-size: 0.9rem;
   }



   /* foooter */

   .auth-wrapper {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 40px;
       position: relative;
       z-index: 1;
       flex-wrap: wrap;
       /* important pour mobile */
   }

   .login-container,
   .auth-footer {
       background: rgba(255, 255, 255, 0.08);
       backdrop-filter: blur(10px);
       border-radius: 15px;
       padding: 30px 25px;
       color: #fff;
       box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
       max-width: 350px;
       flex: 1;
   }

   .auth-footer {
       text-align: left;
       min-width: 250px;
   }

   .auth-footer h3 {
       margin: 0 0 10px;
       font-size: 1.3rem;
   }

   .auth-footer p {
       margin: 5px 0;
       font-size: 0.9rem;
       opacity: 0.85;
   }

   .auth-footer hr {
       border: none;
       border-top: 1px solid rgba(255, 255, 255, 0.2);
       margin: 15px 0;
   }

   /* Mobile : les blocs passent l’un sous l’autre */
   @media (max-width: 768px) {
       .auth-wrapper {
           flex-direction: column;
           gap: 20px;
       }

       .auth-footer {
           text-align: center;
       }
   }