/********************************************
 * 🎯 GESTION DES ERREURS DE FORMULAIRES
 * Compatible CakePHP 5 + Foundation
 ********************************************/
/* === état erreur global (CakePHP génère .input.error ...) === */
.input.error {
  position: relative; /* permet de positionner le message par rapport au bloc */
}

.input.error input,
.input.error select,
.input.error textarea {
  border: 1px solid #f06f61 !important;
  background-color: #fdf2f2;
  font-size: 1rem;
  color: #000; /* texte en noir dans le champ */
  box-shadow: 0 0 4px rgba(231, 76, 60, 0.25);
  transition: border-color .2s ease, background-color .2s ease;
}

/* Optionnel : label rouge en cas d'erreur */

.input.error label {
  /* color: #e74c3c; */
  font-weight: 600;
  display: block;
  margin-bottom: .4rem;
  padding-right: 12ch;

}


/* Harmonise si CakePHP ajoute aussi .form-error sur le champ */
.form-error {
  border: 1px solid #f06f61 !important;
  background-color: #fdf2f2;
}


/* 🟠 Met en évidence les champs obligatoires */
.input.required input,
.input.required select,
.input.required textarea {
  border: 1px solid #e6b412 !important; /* orange vif */
  background-color: #fffaf4;             /* fond légèrement orangé */
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* Optionnel : ajoute un astérisque orange après le label */
.input.required label::after {
  content: " *";
  color: #750f03;
  font-weight: 600;
}

/* Empêche tout espace du champ sous l’input/select */
.input.error input,
.input.error select,
.input.error textarea {
  margin-bottom: 0;
  padding-bottom: 0;
  display: block;
}

/* Le message vient immédiatement sous le champ */
.input.error .error-message {
  font-size: 0.7rem;
  color: #750f03;
  margin: 0; /* aucune marge nulle part */
  padding: 0;
  display: block;
  line-height: 1; /* réduit vraiment l’espace vertical */
}

/* Priorité au rouge quand le champ est à la fois required et error */
.input.required.error input,
.input.required.error select,
.input.required.error textarea {
  border: 1px solid #e74c3c !important;
  background-color: #fdf2f2;
}


/* Style invalide */
#newpassword.invalidp{
  border-color: red !important;
}

/* Style valide */
#newpassword.validp {
  border-color: green !important;
}

/* Style invalide */
#password.invalidp{
  border-color: red !important;
}

/* Style valide */
#password.validp {
  border-color: green !important;
}

/* Style invalide */
#password1.invalidp{
  border-color: red !important;
}

/* Style valide */
#password1.validp {
  border-color: green !important;
}