/**
 * Habillage du formulaire d'inscription.
 *
 * Reprend la couleur du bouton de validation, qui était jusqu'ici définie dans le
 * CSS personnalisé de trois formulaires Fluent Forms, avec le même contenu recopié
 * à l'identique. Un seul endroit désormais.
 *
 * Au passage, la règle de survol ne s'appliquait pas : les deux déclarations
 * étaient séparées par un « \n » littéral, ce qui rendait le second sélecteur
 * invalide aux yeux du navigateur.
 */

.ff-btn-submit {
  background-color: #ff0900 !important;
  border-color: #ff0900 !important;
  color: #fff !important;
}

.ff-btn-submit:hover,
.ff-btn-submit:focus {
  background-color: #d40800 !important;
  border-color: #d40800 !important;
  color: #fff !important;
}

/* Message sous la liste des créneaux : combien correspondent à l'âge saisi. */
.imagine-note {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: #666;
}

.imagine-note--alerte {
  color: #b91c1c;
}

.imagine-note a {
  text-decoration: underline;
}

/**
 * Bloc de liste d'attente, affiché uniquement quand tous les créneaux de l'âge
 * saisi sont complets.
 *
 * Le « !important » n'est pas de la coquetterie : le bloc est rendu avec
 * l'attribut hidden, et il suffit qu'une règle du thème pose un display sur un
 * conteneur pour que l'attribut soit ignoré. Le formulaire s'afficherait alors en
 * permanence, y compris aux familles qui ont des places disponibles, et il serait
 * rempli par des gens qui pouvaient s'inscrire normalement.
 */
.imagine-attente[hidden] {
  display: none !important;
}

.imagine-attente {
  margin: 28px 0;
  padding: 20px 22px;
  border: 2px solid #ff0900;
  border-radius: 8px;
  background: #fff6f5;
}

.imagine-attente h2 {
  margin-top: 0;
  font-size: 20px;
}

.imagine-attente > p {
  margin-bottom: 18px;
  line-height: 1.6;
}