/* ==================================================================
   STYLE.CSS – Page de connexion ultra-minimaliste (2025)
   Tout le superflu a été retiré (pas de "Se souvenir", pas d'inscription, etc.)
   ================================================================== */

/* ------------------------------------------------------------------
   1. Réinitialisation globale (reset)
   ------------------------------------------------------------------ */
* {
  margin: 0;                    /* Supprime toutes les marges par défaut */
  padding: 0;                   /* Supprime tous les paddings par défaut */
  box-sizing: border-box;       /* Inclut padding & border dans la largeur/hauteur */
}

/* ------------------------------------------------------------------
   2. Fond de page + centrage parfait de la box
   ------------------------------------------------------------------ */
body {
  font-family: 'Inter', sans-serif;          /* Police moderne et très lisible */
  min-height: 100vh;                         /* Prend toute la hauteur de l'écran */
  background: linear-gradient(135deg, #e5e6e9 0%, #1c1622 100%); /* Dégradé violet-bleu élégant */
  display: flex;
  align-items: center;                       /* Centrage vertical */
  justify-content: center;                   /* Centrage horizontal */
  padding: 20px;                             /* Petit espace sur mobile */
  color: white;                              /* Texte blanc par défaut */
}

/* ------------------------------------------------------------------
   3. Box principale (tout le contenu est ici)
   ------------------------------------------------------------------ */
.login-box {
  background: rgba(255, 255, 255, 0.15);      /* Fond semi-transparent (effet verre) */
  backdrop-filter: blur(14px);                /* Flou derrière la box → glassmorphism */
  -webkit-backdrop-filter: blur(14px);        /* Compatibilité Safari */
  border-radius: 24px;                        /* Coins bien arrondis */
  border: 1px solid rgba(255, 255, 255, 0.25); /* Bordure subtile */
  padding: 50px 40px;                         /* Grand espace intérieur */
  width: 100%;                                /* Pleine largeur sur mobile */
  max-width: 420px;                           /* Largeur max sur grand écran */
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);  /* Ombre profonde et élégante */
  text-align: center;                         /* Tout centré à l'intérieur */
}

/* ------------------------------------------------------------------
   4. Header : logo + titre
   ------------------------------------------------------------------ */
.login-header {
  margin-bottom: 45px;                        /* Espace sous le titre */
}

.login-logo {
  width: 270px;                                /* Taille du logo */
  height: auto;                               /* Garde les proportions */
  margin-bottom: 20px;                        /* Espace sous le logo */
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.2)); /* Ombre légère sur le SVG */
  transition: transform 0.4s ease;            /* Animation fluide */
}

.login-logo:hover {
  transform: translateY(-4px) scale(1.05);    /* Petit effet au survol */
}

.login-header h2 {
  font-size: 26px;                            /* Taille du titre */
  font-weight: 600;                           /* Semi-gras élégant */
}

/* ------------------------------------------------------------------
   5. Champs de saisie (email + mot de passe)
   ------------------------------------------------------------------ */
.form-group {
  margin-bottom: 24px;                        /* Espace entre les champs */
  text-align: left;                           /* Labels alignés à gauche */
}

label {
  display: block;                             /* Label prend toute la ligne */
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;                         /* Espace sous le label */
}

input {
  width: 100%;                                /* Pleine largeur */
  padding: 15px 18px;                         /* Confort de saisie */
  background: rgba(255, 255, 255, 0.22);       /* Fond légèrement transparent */
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 14px;
  color: white;                               /* Texte blanc */
  font-size: 16px;
  transition: all 0.3s ease;                  /* Transitions douces */
}

input::placeholder {
  color: rgba(255, 255, 255, 0.65);            /* Placeholder discret */
}

input:focus {
  outline: none;                              /* Supprime le contour par défaut */
  background: rgba(255, 255, 255, 0.28);       /* Un peu plus clair au focus */
  border-color: rgba(255, 255, 255, 0.7);      /* Bordure plus visible */
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.15); /* Halo lumineux */
}

/* ------------------------------------------------------------------
   6. Bouton "Se connecter"
   ------------------------------------------------------------------ */
button {
  width: 100%;                                /* Pleine largeur */
  padding: 16px;                              /* Hauteur confortable */
  margin-top: 10px;                           /* Petit espace au-dessus */
  background: white;                          /* Bouton blanc qui ressort bien */
  color: #667eea;                             /* Texte en couleur du dégradé */
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);   /* Ombre naturelle */
}

button:hover {
  transform: translateY(-3px);                /* Léger soulèvement */
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25); /* Ombre plus forte */
}

button:active {
  transform: translateY(-1px);                /* Effet clic */
}

/* ------------------------------------------------------------------
   7. Responsive – adaptation mobile/tablette
   ------------------------------------------------------------------ */
@media (max-width: 480px) {
  .login-box {
    padding: 40px 30px;                       /* Moins d'espace sur petit écran */
  }
  .login-logo {
    width: 80px;                              /* Logo un peu plus petit */
  }
  .login-header h2 {
    font-size: 23px;                          /* Titre légèrement réduit */
  }
}

/* ==================================================================
   FIN DU FICHIER – Tout est propre, commenté et prêt à l'emploi !
   ================================================================== */