* { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: "Segoe UI", Arial, sans-serif;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      transition: background 0.6s ease, color 0.6s ease;
    }

    /* --- Fond animé --- */
    body::before {
      content: "";
      position: fixed;
      top: 0; left: 0;
      width: 200%; height: 200%;
      background: linear-gradient(135deg, #1d2b64, #f8cdda, #4facfe, #00f2fe);
      background-size: 400% 400%;
      animation: gradientMove 15s ease infinite;
      z-index: -1;
    }

    @keyframes gradientMove {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    /* --- Carte de connexion --- */
    .login-card {
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(12px);
      padding: 2rem;
      border-radius: 20px;
      box-shadow: 0 10px 25px rgba(0,0,0,0.2);
      width: 100%;
      max-width: 380px;
      animation: slideIn 0.8s ease-out;
      color: #333;
      position: relative;
      transition: background 0.6s ease, color 0.6s ease, box-shadow 0.6s ease;
      text-align: center;
    }

    /* --- Logo animé --- */
    .logo {
      width: 80px;
      height: 80px;
      margin: 0 auto 1rem;
      border-radius: 50%;
      overflow: hidden;
      border: 3px solid #1d2b64;
      animation: rotateLogo 6s linear infinite, pulse 2s ease-in-out infinite;
    }

    .logo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    @keyframes rotateLogo {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    @keyframes pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.05); }
    }

    .login-card h2 {
      margin-bottom: 1.5rem;
      color: #1d2b64;
      transition: color 0.6s ease;
    }

    .login-card label {
      display: block;
      text-align: left;
      font-weight: bold;
      margin-top: 1rem;
      margin-bottom: 0.3rem;
      transition: color 0.6s ease;
    }

    .login-card input {
      width: 100%;
      padding: 12px;
      border: 1px solid #ccc;
      border-radius: 10px;
      outline: none;
      font-size: 14px;
      transition: background 0.6s ease, border 0.6s ease, color 0.6s ease;
    }

    .password-wrapper {
      position: relative;
    }

    .password-wrapper button {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      cursor: pointer;
      font-size: 16px;
    }

    .btn-login {
      width: 100%;
      padding: 12px;
      margin-top: 1.5rem;
      background: #1d2b64;
      color: #fff;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      font-size: 16px;
      transition: background 0.4s ease, transform 0.2s ease;
    }

    .btn-login:hover {
      background: #152048;
      transform: scale(1.05);
    }

    .login-links {
      margin-top: 1rem;
      text-align: center;
    }

    .login-links a {
      display: inline-block;
      margin: 0 10px;
      color: #1d2b64;
      text-decoration: none;
      font-size: 14px;
      transition: color 0.4s ease;
    }

    .login-links a:hover {
      text-decoration: underline;
    }

    footer {
      text-align: center;
      font-size: 12px;
      margin-top: 2rem;
      color: #555;
      transition: color 0.6s ease;
    }

    /* --- Bouton bascule thème --- */
    .theme-toggle {
      position: absolute;
      top: 15px;
      right: 15px;
      background: none;
      border: none;
      font-size: 22px;
      cursor: pointer;
      transition: transform 0.3s ease;
    }

    .theme-toggle:hover {
      transform: rotate(20deg);
    }

    /* --- Animation carte --- */
    @keyframes slideIn {
      from {opacity: 0; transform: translateY(-40px);}
      to {opacity: 1; transform: translateY(0);}
    }

    /* --- 🌙 DARK MODE --- */
    body.dark::before {
      background: linear-gradient(135deg, #0f0f0f, #2c2c2c, #1a1a1a, #333);
    }

    body.dark .login-card {
      background: rgba(30, 30, 30, 0.9);
      color: #f0f0f0;
      box-shadow: 0 10px 25px rgba(255,255,255,0.05);
    }

    body.dark .logo {
      border-color: #f8cdda;
    }

    body.dark .login-card h2 {
      color: #f8cdda;
    }

    body.dark .login-card input {
      background: #2c2c2c;
      border: 1px solid #444;
      color: #fff;
    }

    body.dark .btn-login {
      background: #f8cdda;
      color: #1d2b64;
    }

    body.dark .btn-login:hover {
      background: #e0b6c0;
    }

    body.dark .login-links a {
      color: #f8cdda;
    }

    body.dark footer {
      color: #aaa;
    }

    .bubble {
    position: absolute;
    border-radius: 50%;
    background: rgba(0, 150, 200, 0.25);
    animation: float 10s ease-in-out infinite;
    z-index: 1;
}