/* =====================================================================
   Écrire au CSE — formulaire sous la page de contact
   ===================================================================== */

.contact {
    max-width: 52rem;
    margin-top: 1.5rem;
    /* L'ancre #ecrire ne doit pas glisser sous la barre du haut. */
    scroll-margin-top: 7rem;
}

.contact .card-body {
    padding: 1.5rem;
}

.contact__titre {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 1rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--irp-heading);
}

.contact__titre .bi {
    color: var(--irp-cyan);
}

.contact__intro {
    margin-bottom: 1.25rem;
}

.contact fieldset:not(.contact__identite) {
    margin: 0 0 1.25rem;
    padding: 0;
    border: 0;
}

.contact__legende {
    float: none;
    width: auto;
    margin-bottom: .6rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--irp-text-muted);
}

/* L'identité est montrée, pas saisie : des champs estompés, qui ne
   ressemblent pas à des cases à remplir. */
.contact__identite {
    margin: 0 0 1.25rem;
    padding: 1rem;
    border: 0;
    border-radius: var(--irp-radius);
    background: var(--irp-surface-2);
}

.contact__identite .form-control[readonly] {
    background: transparent;
    border-style: dashed;
    color: var(--irp-text);
}

.contact__grille {
    display: grid;
    gap: .75rem;
    margin-bottom: .5rem;
}

.contact__grille--identite {
    grid-template-columns: 8rem minmax(0, 1fr) minmax(0, 1fr);
}

.contact__grille--identite > :last-child {
    grid-column: 1 / -1;
}

@media (max-width: 575.98px) {
    .contact .card-body {
        padding: 1rem;
    }

    .contact__grille--identite {
        grid-template-columns: minmax(0, 1fr);
    }
}

.contact__instance {
    max-width: 24rem;
}

.contact__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
}

/* Piège à robots : sorti de l'écran plutôt que masqué. Un robot ignore
   souvent ce qui porte `hidden` ou `display: none`, rarement ce qui est
   seulement placé hors de vue. Le lecteur d'écran ne l'annonce pas
   (aria-hidden) et la tabulation ne l'atteint pas (tabindex -1). */
.contact__piege {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Sans connexion, la civilité est un choix et non un champ : sa colonne
   s'élargit pour les deux boutons. */
.contact__grille--saisie {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.contact__grille--saisie > :first-child,
.contact__grille--saisie > :last-child {
    grid-column: 1 / -1;
}

.contact__civilites {
    padding-top: .25rem;
}

@media (max-width: 575.98px) {
    .contact__grille--saisie {
        grid-template-columns: minmax(0, 1fr);
    }
}