/* ---------------------------------------------------------
   BASE CSS — Reset & tokens globaux
   --------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* ======================================================
   TOKENS PARTAGÉS
   ====================================================== */
:root {
  --eleve-color:      #ff6f61;
  --etudiant-color:   #4caf50;
  --professeur-color: #2196f3;
}

/* ======================================================
   RESET MINIMAL
   ====================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
}

/* ======================================================
   SYSTÈME AUTHENTIFICATION (.auth-body)
   ====================================================== */

.auth-body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #ffffff 0%, #f9f8f6 100%);
  font-family: 'Inter', sans-serif; /* L'Indie Flower est un peu dur à lire pour un long formulaire, Inter est plus pro */
  padding: 20px;
}

.auth-body .auth-container {
  background: #ffffff;
  border-radius: 12px;
  padding: 40px;
  width: 100%;
  max-width: 450px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* THEME DYNAMIQUE : Le secret pour ne pas répéter le CSS */
.role-etudiant { --theme-color: var(--etudiant-color); }
.role-professeur { --theme-color: var(--professeur-color); }
.role-eleve { --theme-color: var(--eleve-color); }

/* Titres & Sous-titres */
.auth-body h1 {
  text-align: center;
  color: var(--theme-color, #333); /* Utilise la couleur du thème, sinon gris par défaut */
  margin-bottom: 10px;
  font-size: 28px;
  font-family: 'Pacifico', cursive;
}

.auth-body .subtitle {
  text-align: center;
  margin-top: -10px;
  margin-bottom: 20px;
  font-family: 'Indie Flower', cursive;
  font-size: 16px;
  color: #666;
}

/* Formulaires */
.auth-body .form-group { margin-bottom: 20px; }

.auth-body label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #555;
}

.auth-body input,
.auth-body select {
  width: 100%;
  padding: 12px;
  border: 2px solid #ddd;
  border-radius: 6px;
  font-size: 16px;
  transition: border-color 0.3s, box-shadow 0.3s;
  font-family: inherit;
}

.auth-body input:focus,
.auth-body select:focus {
  border-color: var(--theme-color, #667eea);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05); /* Ombre neutre légère */
  outline: none;
}

/* Boutons */
.auth-body button {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  color: white;
  background-color: var(--theme-color, #333); /* S'adapte au rôle ! */
  margin-top: 10px;
}

.auth-body button:hover:not(:disabled) {
  filter: brightness(0.9);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.auth-body button:disabled {
  background-color: #bdc3c7;
  cursor: not-allowed;
  opacity: 0.7;
}

/* Messages & Alertes */
.auth-body .error,
.auth-body .success,
.auth-body .loading {
  margin-top: 15px;
  padding: 12px;
  border-radius: 6px;
  text-align: center;
  font-size: 14px;
  display: none;
}

.auth-body .error   { background: #fee; color: #c33; border: 1px solid #fbb; }
.auth-body .success { background: #efe; color: #393; border: 1px solid #bfb; }
.auth-body .loading { color: var(--theme-color, #333); }
.auth-body .show    { display: block; }

/* Encadré d'infos */
.auth-body .info {
  background: #f8f9fa;
  border-left: 4px solid var(--theme-color, #333);
  padding: 15px;
  margin-bottom: 25px;
  border-radius: 4px;
  font-size: 13px;
  color: #444;
}
.auth-body .info ul { margin: 10px 0 10px 20px; }

/* Liens */
.auth-body .link-section {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  color: #777;
}
.auth-body .link-section a { 
  color: var(--theme-color, #667eea); 
  text-decoration: none; 
  font-weight: 600;
}
.auth-body .link-section a:hover { text-decoration: underline; }

/* ======================================================
   LOGO CENTRALISÉ
   ====================================================== */
.auth-body .logo-global { 
  display: block; 
  width: 120px; 
  height: 120px; /* ⚠️ Indispensable : donnez une hauteur pour que l'image s'affiche */
  margin: 0 auto 20px; 
  
  /* L'image est chargée d'ici ! */
  background-image: url('../images/logo.png'); 
  background-size: contain;     /* Empêche le logo d'être rogné */
  background-repeat: no-repeat;
  background-position: center;
}
/* ======================================================
   RESPONSIVE (Mobile)
   ====================================================== */
@media (max-width: 480px) {
  .auth-body .auth-container {
    padding: 30px 20px; /* Moins de marges sur téléphone */
  }
  .auth-body h1 {
    font-size: 24px;
  }
}