/* commander.css - version animée & wow */

body {
    background: linear-gradient(to right, #f8f9fa, #e9ecef, #f8f9fa);
    background-size: 200% 200%;
    animation: gradientMove 12s ease infinite;
  }
  
  @keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
  
  section h2 {
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 2rem;
    color: #343a40;
    animation: fadeIn 1s ease-in-out;
  }
  
  form {
    background: #fff;
    padding: 2.5rem;
    border-radius: 1rem;
    box-shadow: 0 4px 40px rgba(0, 0, 0, 0.08);
    animation: fadeSlide 0.6s ease;
  }
  
  .form-group label {
    font-weight: 500;
    margin-top: 1rem;
  }
  
  input:focus,
  textarea:focus,
  select:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.25);
    transition: all 0.3s ease;
  }
  
  button[type="submit"],
  button[type="button"],
  .btn {
    border-radius: 50px !important;
    padding: 0.6rem 1.8rem;
    font-weight: 500;
    transition: all 0.3s ease-in-out;
  }
  
  button:hover,
  .btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
  }
  
  .alert-info {
    background-color: #e3f2fd;
    color: #0d47a1;
    border-left: 6px solid #0d6efd;
  }
  
  .alert-success {
    animation: popIn 0.4s ease;
    border-left: 6px solid #198754;
  }
  
  .progress {
    height: 12px;
    border-radius: 5px;
    margin-bottom: 2rem;
  }
  
  .fade-step {
    animation: fadeSlide 0.5s ease-in-out;
  }
  
  @keyframes fadeSlide {
    0% {
      opacity: 0;
      transform: translateY(20px) scale(0.97);
    }
    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
  
  @keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  
  @keyframes popIn {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
  }
  /* 🌙 Styles Dark Mode */

body.dark-mode {
  background: linear-gradient(to right, #2c2c2c, #1e1e1e, #2c2c2c);
}

body.dark-mode section h2 {
  color: #f8f9fa;
}

body.dark-mode form {
  background: #2b2b2b;
  color: #f1f1f1;
  box-shadow: 0 4px 30px rgba(255, 255, 255, 0.05);
}

body.dark-mode .form-group label {
  color: #e0e0e0;
}

body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
  background-color: #3c3c3c;
  color: #fff;
  border-color: #555;
}

body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.4);
}

body.dark-mode .btn {
  background-color: #0d6efd;
  border-color: #0d6efd;
  color: white;
}

body.dark-mode .btn:hover {
  background-color: #0b5ed7;
}

body.dark-mode .alert-info {
  background-color: #1d3557;
  color: #a8dadc;
  border-left-color: #457b9d;
}

body.dark-mode .alert-danger {
  background-color: #781f26;
  color: #f8d7da;
  border-left-color: #dc3545;
}