/* =========================================
   FICHIER : css/benevole-responsive.css
   PAGE    : benevole.njk
   ROLE    : responsive global
   ========================================= */

/* Tablette */
@media (max-width: 980px) {
  .vol-hero__layout {
    grid-template-columns: 1fr;
  }

  .vol-hero__panel {
    min-height: auto;
  }

  .vol-section-heading--split {
    grid-template-columns: 1fr;
  }

  .vol-values,
  .vol-process__steps {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .vol-value:nth-child(2) {
    border-right: 0;
  }

  .vol-process__step {
    margin-bottom: 32px;
  }
}

/* Tablette compacte */
@media (max-width: 760px) {
  .vol-missions {
    padding: 76px 0;
  }

  .vol-mission-grid {
    grid-template-columns: 1fr;
  }

  .vol-mission-card {
    min-height: 0;
    padding: 24px 20px;
  }

  .vol-missions__other {
    align-items: stretch;
    flex-direction: column;
    padding: 22px 20px;
  }

  .vol-missions__other .btn-outline {
    width: 100%;
  }

  .vol-apply {
    padding: 76px 0 88px;
  }

  .vol-apply__heading,
  .vol-form__grid {
    grid-template-columns: 1fr;
  }

  .vol-apply__heading {
    gap: 16px;
  }

  .vol-form {
    padding: 22px 18px;
  }

  .vol-form__submit {
    align-items: stretch;
    flex-direction: column;
  }

  .vol-form__submit .btn-main {
    width: 100%;
  }

  .vol-form__submit p {
    text-align: left;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .vol-hero {
    padding: 132px 0 64px;
  }

  .vol-hero__layout {
    gap: 38px;
  }

  .vol-hero h1 {
    font-size: var(--hz-title-editorial);
  }

  .vol-hero__actions a {
    width: 100%;
  }

  .vol-hero__panel {
    padding: 26px 20px;
    border-radius: 24px;
  }

  .vol-commitment,
  .vol-process {
    padding: 72px 0;
  }

  .vol-values,
  .vol-process__steps {
    grid-template-columns: 1fr;
  }

  .vol-value,
  .vol-value:nth-child(2) {
    border-right: 0;
    border-bottom:
      1px solid
      var(--vol-line);
  }

  .vol-value:last-child {
    border-bottom: 0;
  }

  .vol-process__step {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 14px;
    padding: 0 0 28px;
    margin: 0;
  }

  .vol-process__step::after {
    display: none;
  }

  .vol-process__number {
    margin: 0;
  }
}