/**
 * MZ Informatique — Ajustements responsive
 */

/* Mobile first : les bases sont déjà en mobile.
   Ici on ajoute les breakpoints pour tablette et desktop. */

@media (max-width: 767px) {
  .hero-cta {
    flex-direction: column;
  }

  .hero-cta .btn {
    width: 100%;
    justify-content: center;
  }

  .section-padding-x {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  .hero-desc {
    width: 100%;
  }

  .site-logo img {
    width: 100%;
    max-width: 280px;
  }

  .container {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }
}

@media (min-width: 768px) {
  .hero {
    padding-top: var(--space-4xl);
    padding-bottom: var(--space-xl);
  }

  .grid-2--md {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
    align-items: start;
  }

  .hero-desc {
    max-width: 100%;
  }
}

@media (min-width: 992px) {
  .grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
  }
}

/* Images responsives */
img {
  max-width: 100%;
  height: auto;
}

img[loading="lazy"] {
  content-visibility: auto;
}

/* Tablettes : menu déroulant déjà géré dans components (nav-main.is-open) */