.hidden { display: none; }
 /* === Style global (fond dégradé + image) === */ 
 body {
   margin: 0; 
   padding: 0; 
   font-family: "Segoe UI", Arial, sans-serif; 
   background: linear-gradient(135deg, rgba(0, 51, 102, 0.9), rgba(0, 128, 128, 0.9)), url("images.png") no-repeat center center fixed; 
   background-size: cover; 
   height: 100vh; 
   display: flex; 
   justify-content: center; 
   align-items: center;
   } 
   /* === Carte en glassmorphism === */ 
   .card-container { 
    backdrop-filter: blur(12px); 
    background: rgba(255, 255, 255, 0.15);
   border: 1px solid rgba(255, 255, 255, 0.3); 
   border-radius: 16px; 
   padding: 40px 30px; 
   width: 350px; 
   box-shadow: 0 8px 25px rgba(0,0,0,0.25); 
   text-align: center; 
   color: white; 
   animation: fadeIn 1s ease; 
  } 
  .card-container img { 
    max-width: 90px; 
    margin-bottom: 15px;
   border-radius: 8px; 
   background: white; 
   padding: 5px; 
  } 
   h2 { 
    margin-bottom: 20px; 
    font-size: 22px; 
    font-weight: bold; 
  } 
  label { 
    display: block; 
    text-align: left; 
    font-weight: 600; 
    margin: 12px 0 6px; 
    font-size: 16px; 
  }
     input[type="text"], 
     input[type="password"], 
     input[type="email"], 

     select { 
      width: 100%; 
      padding: 12px; 
      border: none; 
      border-radius: 8px; 
      margin-bottom: 10px; 
      font-size: 14px; 
    } 

    input:focus, select:focus {
       outline: 2px solid #66ccff; 
       background: rgba(255,255,255,0.9); } button { 
        margin-top: 15px; 
        width: 100%; 
        padding: 12px; 
        background: #0078d7; 
        border: none; 
        border-radius: 8px; 
        font-size: 16px; 
        font-weight: bold; 
        color: #fff; 
        cursor: pointer; 
        transition: all 0.3s ease; 
      } 

    button:hover { 
      background: #005fa3; 
    } 
    a { 
      color: #66ccff; 
      text-decoration: none;
     } 
    a:hover { 
      text-decoration: underline; 
    } 
    .footer { 
      margin-top: 15px; 
      font-size: 12px; 
      color: rgba(255,255,255,0.8); 
    } 
    @keyframes fadeIn { 
      from { 
        opacity: 0; 
        transform: translateY(-15px); 
      } to { 
        opacity: 1; 
        transform: translateY(0); 
      } 
    } 
       /* === Messages d'alerte stylés (succès / erreur / avertissement) === */ /* ======= Messages élégants ======= */ 
       .alert { 
        margin-top: 15px; 
        padding: 15px; 
        border-radius: 10px; 
        font-weight: 500; 
        animation: fadeIn 0.4s ease; 
      } 
       .alert-success { 
            background: rgba(46, 204, 113, 0.25);
            color: #ffffff; /* Texte blanc */
            border: 1px solid rgba(46, 204, 113, 0.8); 
          } 
       .alert-error { 
        background: rgba(231, 76, 60, 0.15); 
        color: #c0392b; 
        border: 1px solid #e74c3c; 
      } 
       .alert-warning { 
        background: rgba(241, 196, 15, 0.15); 
        color: #b7950b; 
        border: 1px solid #f1c40f;
       } 
       .link {display: inline-block;
            margin-top: 8px;
            text-decoration: none;
            color: #66ccff;
            font-weight: bold;
            transition: color 0.3s ease; 
          } 
       .link:hover { 
        color: #ffffff;
        text-decoration: underline; 
      }