/* ==========================================================================
   RESPONSIVE.CSS — Breakpoints (mobile-first overrides)
   ========================================================================== */

/* ---- Tablette (≤ 960px) ---- */
@media (max-width: 960px) {
  :root {
    --fs-4xl: 2.6rem;
    --fs-3xl: 2.1rem;
    --fs-2xl: 1.75rem;
  }

  .hero__grid {
    grid-template-columns: 1fr;
  }

  .hero-pro__grid {
    grid-template-columns: 1fr;
  }
  .hero-pro__title {
    max-width: none;
  }

  .hero-photo-section__grid {
    grid-template-columns: 1fr;
  }
  .hero-photo-section__title {
    max-width: none;
  }

  .service-feature {
    grid-template-columns: auto 1fr;
  }
  .service-feature > a {
    grid-column: 2;
  }

  .card-grid,
  .testimonial-grid,
  .industry-grid,
  .article-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .process-list,
  .process-list--5 {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .principle-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .principle {
    padding-inline: 0;
    border-left: none;
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
  }
  .principle:first-child {
    padding-top: 0;
    border-top: none;
  }

  .big-figure-block {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  .big-figure {
    font-size: clamp(3.5rem, 14vw, 5rem);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .split-block,
  .media-split {
    grid-template-columns: 1fr;
  }

  .stats-band {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg) var(--space-md);
  }

  .media-split--reverse .media-split__media,
  .media-split--reverse .media-split__text {
    order: initial;
  }

  .page-banner img {
    height: 240px;
  }
}

/* ---- Mobile (≤ 640px) ---- */
@media (max-width: 640px) {
  :root {
    --fs-4xl: 2.1rem;
    --fs-3xl: 1.8rem;
    --fs-2xl: 1.5rem;
    --space-2xl: 3.5rem;
    --space-3xl: 4.5rem;
  }

  .main-nav {
    position: fixed;
    inset: 76px 0 0 0;
    background: #fff;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-lg);
    gap: var(--space-lg);
    transform: translateX(100%);
    transition: transform var(--transition-base);
    overflow-y: auto;
  }

  .main-nav.is-open {
    transform: translateX(0);
  }

  .main-nav__list {
    flex-direction: column;
    gap: var(--space-md);
    width: 100%;
  }

  .main-nav__link {
    font-size: var(--fs-md);
  }

  .nav-toggle {
    display: flex;
  }

  .nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.is-active span:nth-child(2) { opacity: 0; }
  .nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .card-grid,
  .testimonial-grid,
  .industry-grid,
  .article-grid,
  .process-list,
  .process-list--5,
  .problem-grid {
    grid-template-columns: 1fr;
  }

  .brand-signature {
    max-width: none;
  }

  .feature-row {
    grid-template-columns: 44px 1fr;
  }
  .feature-row__link {
    grid-column: 2;
  }

  .stats-band {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .footer-bottom {
    flex-direction: column;
    gap: var(--space-sm);
    align-items: flex-start;
  }

  .hero__meta {
    flex-wrap: wrap;
    gap: var(--space-md);
  }

  .hero-pro__stats {
    flex-wrap: wrap;
    gap: var(--space-lg) var(--space-xl);
  }

  .floating-card {
    padding: 0.6rem 0.8rem;
    transform: scale(0.85);
  }
  .floating-card--bars { left: 2%; }
  .floating-card--ring, .floating-card--donut { right: 2%; }

  .photo-caption {
    font-size: 0.7rem;
    padding: 0.55rem var(--space-2xs);
  }

  .service-feature {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .service-feature > a {
    grid-column: 1;
  }

  .quote-feature {
    padding: var(--space-lg) var(--space-md);
  }
  .quote-feature p {
    font-size: var(--fs-lg);
  }

  .cta-group {
    flex-direction: column;
  }
  .cta-group .btn {
    width: 100%;
    justify-content: center;
  }

  .cta-band {
    padding: var(--space-xl) var(--space-md);
  }
}