/* ==========================================================================
   Responsive — chargé en dernier
   Un seul point de bascule PC / téléphone à 920px : au-delà, mise en page
   desktop multi-colonnes avec une section = un écran ; en-deçà, version
   téléphone en défilement naturel, sans contrainte de hauteur d'écran.
   ========================================================================== */

@media (max-width: 920px) {
  :root {
    --header-height: 78px;
    --header-height-scrolled: 64px;
  }

  html {
    scroll-snap-type: none;
  }

  .section--full {
    min-height: auto;
    padding-top: calc(var(--header-height) + var(--space-lg));
  }

  h1 {
    font-size: var(--fs-3xl);
  }

  h2 {
    font-size: var(--fs-2xl);
  }

  .hero__inner {
    grid-template-columns: 1fr;
    padding-top: calc(var(--header-height) + var(--space-lg));
    gap: var(--space-lg);
  }

  .hero__watermark {
    display: none;
  }

  .two-col {
    grid-template-columns: 1fr;
  }

  .two-col__visual {
    order: -1;
    aspect-ratio: 16 / 9;
    max-height: none;
  }

  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
      "feature feature"
      "a b"
      "c c";
  }

  .bento-tile--feature {
    min-height: 220px;
  }

  .process-steps {
    grid-template-columns: 1fr;
  }

  .process-steps__connector {
    display: none;
  }

  .process-step:nth-of-type(2),
  .process-step:nth-of-type(3) {
    margin-top: 0;
  }

  .contact-layout {
    grid-template-columns: 1fr;
  }

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

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

  .site-nav {
    position: fixed;
    inset: var(--header-height) var(--space-sm) auto;
    background: rgba(23, 21, 18, 0.97);
    border: 1px solid var(--color-border-on-dark);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-md);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--transition-base), opacity var(--transition-base);
  }

  .site-header.nav-open .site-nav {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .site-nav__list {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .nav-toggle {
    display: flex;
  }

  .site-header__phone span {
    display: none;
  }
}

@media (max-width: 720px) {
  .bento-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "feature"
      "a"
      "b"
      "c";
  }

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

  .contact-form {
    grid-template-columns: 1fr;
    padding: var(--space-md);
  }

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

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}