:root {
  --motion-blue: #1199ee;
  --motion-orange: #f8b12e;
}

/* La bordure haute de la méthode reprend le bleu de la carte de visite. */
.index-page .step-item {
  border: 1px solid rgba(91, 159, 214, 0.2) !important;
  border-top: 4px solid var(--motion-blue) !important;
}

/* Finitions responsive communes à toutes les sections. */
@media (max-width: 991px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  .index-page main,
  .index-page .section,
  .index-page .container,
  .index-page .container-fluid,
  .index-page .row,
  .index-page .row > * {
    min-width: 0;
  }

  .index-page img,
  .index-page svg,
  .index-page video,
  .index-page iframe {
    max-width: 100%;
  }

  .index-page .section > .container,
  .index-page .section > .container-fluid {
    width: 100%;
    max-width: 100%;
  }

  .index-page .feature-item,
  .index-page .testimonial-item,
  .index-page .service-card,
  .index-page .step-item,
  .index-page .portfolio-entry,
  .index-page .team-member,
  .index-page .faq-item,
  .index-page .contact-info-box,
  .index-page .contact-form-wrapper {
    width: 100%;
    min-width: 0;
  }

  .index-page .hero .content,
  .index-page .hero .description,
  .index-page .about-content,
  .index-page .service-intro,
  .index-page .service-summary,
  .index-page .step-info,
  .index-page .member-info,
  .index-page .contact-info-box > div:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .index-page .portfolio-filters {
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .index-page .team-modal-content {
    width: min(92vw, 560px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
  }

  .index-page .form-control,
  .index-page select,
  .index-page textarea {
    max-width: 100%;
    font-size: 16px;
  }

  .index-page .mobile-nav-toggle,
  .index-page .navmenu a,
  .index-page button,
  .index-page .btn {
    touch-action: manipulation;
  }

}

@media (max-width: 575px) {
  .index-page .section {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .index-page .section > .container,
  .index-page .section > .container-fluid {
    padding-right: 16px;
    padding-left: 16px;
  }

  .index-page .hero {
    padding-top: 108px;
  }

  .index-page .hero-mobile-visual {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }

  .index-page .hero-mobile-visual img {
    width: min(92vw, 390px);
    margin-inline: auto;
  }

  .index-page .cta-button,
  .index-page .cta-button .btn,
  .index-page .btn-submit {
    width: 100%;
  }

  .index-page .cta-button .btn,
  .index-page .btn-submit {
    min-height: 50px;
    justify-content: center;
  }

  .index-page .service-card,
  .index-page .step-item,
  .index-page .team-member,
  .index-page .faq-item,
  .index-page .contact-info-box,
  .index-page .contact-form-wrapper {
    border-radius: 16px;
  }

  .index-page .contact-info-box {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
  }

  .index-page .contact-info-box .icon-box {
    width: 48px;
    height: 48px;
  }

  .index-page .contact-info-box a,
  .index-page .footer a {
    overflow-wrap: anywhere;
  }

  .index-page .contact-form-wrapper {
    padding: 22px 17px;
  }
}

@media (max-width: 380px) {
  .index-page .section > .container,
  .index-page .section > .container-fluid {
    padding-right: 13px;
    padding-left: 13px;
  }

  .index-page .service-card,
  .index-page .step-item,
  .index-page .team-member,
  .index-page .faq-item,
  .index-page .contact-info-box,
  .index-page .contact-form-wrapper {
    padding-right: 15px;
    padding-left: 15px;
  }
}