/* ========================================
   FORM VALIDATION STYLES - Priorité 4
   Styles pour la validation des formulaires
   ======================================== */

/* Champs en erreur */
input.input-error,
textarea.input-error,
select.input-error {
  border-color: #dc3545 !important;
  background-color: rgba(220, 53, 69, 0.05);
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

/* Focus sur champ en erreur */
input.input-error:focus,
textarea.input-error:focus,
select.input-error:focus {
  outline: none;
  border-color: #dc3545;
  box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.15);
}

/* Messages d'erreur */
.form-error {
  color: #dc3545;
  font-size: 12px;
  font-weight: 500;
  margin-top: 4px;
  display: block;
  animation: slideInError 0.3s ease-out;
}

@keyframes slideInError {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Champs valides (feedback positif optionnel) */
input.input-valid,
textarea.input-valid,
select.input-valid {
  border-color: #28a745;
}

input.input-valid:focus,
textarea.input-valid:focus {
  outline: none;
  border-color: #28a745;
  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
}

/* Statut du formulaire */
#formStatus {
  padding: 12px 16px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  animation: slideInStatus 0.4s ease-out;
}

@keyframes slideInStatus {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#formStatus.success {
  color: #155724;
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
}

#formStatus.error {
  color: #721c24;
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
}

/* Bouton en attente */
button[type="submit"]:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Groupe de formulaire */
.form-group {
  position: relative;
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #0B243E;
  font-size: 14px;
}

/* Champs avec focus standard (amélioration a11y) */
input:focus,
textarea:focus,
select:focus {
  outline: 2px solid #C5A059;
  outline-offset: 2px;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .form-error {
    font-size: 11px;
  }

  #formStatus {
    font-size: 13px;
    padding: 10px 12px;
  }

  .form-group {
    margin-bottom: 14px;
  }
}

/* Print styles - cache les messages d'erreur à l'impression */
@media print {
  .form-error,
  #formStatus {
    display: none !important;
  }

  input.input-error,
  textarea.input-error {
    border-color: #333 !important;
    background-color: white !important;
  }
}