/* Animation simple */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Erreur – bloc centré, rouge vif */
.error {
  position: relative;
  display: block;
  max-width: 600px;
  margin: 20px auto;
  padding: 15px 30px;
  background-color: #fce8e6;   /* Rouge clair mais plus chaud */
  color: #b71c1c;              /* Rouge sombre pour le texte */
  border: 2px solid #f44336;   /* Rouge vif bordure */
  border-radius: 6px;
  font-size: 16px;
  font-family: Arial, sans-serif;
  animation: fadeIn 0.6s ease-out forwards;
  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}
.error::before {
  content: '\2716';             /* Croix */
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: #b71c1c;
}

/* Succès – bloc centré, vert plus prononcé */
.updated {
  position: relative;
  display: block;
  max-width: 600px;
  margin: 20px auto;
  padding: 15px 30px;
  background-color: #e6f4ea;   /* Vert très clair */
  color: #1b5e20;              /* Vert foncé pour le texte */
  border: 2px solid #4caf50;   /* Vert vif bordure */
  border-radius: 6px;
  font-size: 16px;
  font-family: Arial, sans-serif;
  animation: fadeIn 0.6s ease-out forwards;
  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}
.updated::before {
  content: '\2713';             /* Coche */
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: #1b5e20;
}

	.generic-form {
	    position: relative;
	    padding: 20px;
	    background-color: #f8f9fa; /* Fond gris clair */
	    border: 1px solid #ced4da; /* Bordure gris clair */
	    border-radius: 5px;
	    font-size: 14px;
	    width: 100%;
	    max-width: 600px;
	    margin: 20px auto;
	    font-family: Arial, sans-serif;
	}

	.generic-form table {
	    width: 100%;
	    border-collapse: collapse;
	}

	.generic-form td {
	    padding: 10px;
	    vertical-align: middle;
	}

	.generic-form label {
	    font-weight: bold;
	    margin-bottom: 5px;
	    display: block;
	}

	.generic-form input[type="text"],
	.generic-form input[type="email"],
	.generic-form input[type="password"] {
	    width: 100%;
	    padding: 10px;
	    margin-bottom: 5px;
	    border: 1px solid #ced4da;
	    border-radius: 5px;
	    font-size: 14px;
	}

	.generic-form input[type="submit"] {
		background-color: #004080; /* Bleu*/
        color: #fff; /* Texte blanc */
        border-color: #007cba; /* Bordure assortie */
	    border: none;
	    padding: 10px 20px;
	    border-radius: 5px;
	    font-size: 14px;
	    cursor: pointer;
	    display: inline-block;
	}

	.generic-form input[type="submit"]:hover {
	    background-color: #f08700; /* Vert plus foncé au survol */
	}

	.generic-form .button {
		background-color: #004080; /* Bleu*/
        color: #fff; /* Texte blanc */
        border-color: #007cba; /* Bordure assortie */
	    border: none;
	    padding: 10px 20px;
	    border-radius: 5px;
	    font-size: 14px;
	    cursor: pointer;
	    display: inline-block;
	}

	.generic-form .button:hover {
	    background-color: #f08700; /* Vert plus foncé au survol */
	}

	.generic-form .form-message {
	    position: relative;
	    padding: 10px 20px;
	    background-color: #d4edda; /* Vert clair */
	    color: #28a745; /* Couleur de texte verte */
	    border: 1px solid #c3e6cb; /* Bordure verte clair */
	    border-radius: 5px;
	    font-size: 14px;
	    display: inline-block;
	    opacity: 0;
	    animation: fadeIn 1s forwards;
	    font-family: Arial, sans-serif;
	}

	.generic-form .form-message::before {
	    content: '\2713'; /* Symbole de la coche */
	    font-size: 18px;
	    margin-right: 10px;
	    position: absolute;
	    left: 10px;
	    top: 50%;
	    transform: translateY(-50%);
	}

	.generic-form .error-message {
	    position: relative;
	    padding: 10px 20px;
	    background-color: #f8d7da; /* Rouge clair */
	    color: #dc3545; /* Couleur du texte rouge */
	    border: 1px solid #f5c6cb; /* Bordure rouge clair */
	    border-radius: 5px;
	    font-size: 14px;
	    display: inline-block;
	    opacity: 0;
	    animation: fadeIn 1s forwards;
	    font-family: Arial, sans-serif;
	}

	.generic-form .error-message::before {
	    content: '\2716'; /* Symbole de la croix */
	    font-size: 18px;
	    margin-right: 10px;
	    position: absolute;
	    left: 10px;
	    top: 50%;
	    transform: translateY(-50%);
	}

	@keyframes fadeIn {
	    0% {
	        opacity: 0;
	    }
	    100% {
	        opacity: 1;
	    }
	}