/* =========================================
   FICHIER : css/benevole-fields.css
   PAGE    : benevole.njk
   ROLE    : champs du formulaire
   ========================================= */

.vol-field {
  display: grid;
  gap: 8px;
}

.vol-field > span {
  color: var(--vol-deep);
  font-size: 0.9rem;
  font-weight: 800;
}

.vol-field > span strong {
  color: var(--vol-accent);
}

.vol-field input,
.vol-field select,
.vol-field textarea {
  width: 100%;
  border:
    1px solid
    rgba(30, 61, 89, 0.16);
  border-radius: 13px;
  background: #fbfcfd;
  color: var(--vol-deep);
  outline: 0;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.vol-field input,
.vol-field select {
  min-height: 52px;
  padding: 0 14px;
}

.vol-field textarea {
  min-height: 170px;
  padding: 14px;
  resize: vertical;
  line-height: 1.6;
}

.vol-field input:focus,
.vol-field select:focus,
.vol-field textarea:focus {
  border-color:
    rgba(255, 110, 64, 0.72);
  background: #fff;
  box-shadow:
    0 0 0 4px
    rgba(255, 110, 64, 0.09);
}

.vol-field select.is-prefilled {
  border-color:
    var(--vol-accent);
  background:
    rgba(255, 110, 64, 0.045);
}

.vol-field--message {
  margin-top: 18px;
}

.vol-field small {
  color: var(--vol-muted);
  font-size: 0.8rem;
}