/* BHK Formulaires -- état d'erreur commun aux trois formulaires (contact, recrutement, remplacement),
 * posé par bhk-formulaire-commun.js.
 *
 * Une erreur se dit par la couleur, un pictogramme ET un message écrit -- jamais par la couleur seule.
 * Le rouge d'alerte n'est pas une couleur de marque : il reste en dur, comme l'avis d'erreur du formulaire de
 * remplacement (#8d2119 sur #fdeceb). Sur un champ en erreur, ce rouge prend aussi la place de la bordure du
 * focus. Contrastes (formule WCAG) : #8d2119 sur blanc 8,88 ; #b3261e sur #fffafa 6,32 ; blanc sur #b3261e
 * 6,54 -- au-dessus des seuils 4,5 (texte) et 3,0 (bordure).
 */

/* Le champ en cause. `!important` : chaque feuille de formulaire pose sa bordure avec une spécificité
   égale ou supérieure (champ, états :hover et :focus). */
.bhk-champ--erreur {
    border: 2px solid #b3261e !important;
    background-color: #fffafa !important;
}

/* Une case se signale par son libellé (une bordure sur la case elle-même ne se voit pas). La mise en page
   du libellé (flex des cases de consentement) reste celle de sa feuille. */
label.bhk-champ--erreur {
    padding: 10px 12px;
    border-radius: 10px;
}

.bhk-champ-message {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 8px 0 0;
    color: #8d2119;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 600;
}

/* Le pictogramme : un disque plein marqué « ! », lu avec le texte (il ne porte pas le sens seul). */
.bhk-champ-message::before {
    content: "!";
    flex: 0 0 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: 50%;
    background: #b3261e;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

/* La phrase ajoutée à l'avis du serveur quand la saisie a été rendue. */
.bhk-saisie-conservee {
    display: block;
    margin-top: 6px;
}

/* Titre de l'avis d'erreur rendu par le serveur (« Votre demande n'est pas encore partie. »). */
.bhk-avis-titre {
    display: block;
    margin-bottom: 4px;
}