/* ============================================================
   CHRYS BERNARD — responsive.css
   Breakpoints : tablette (< 900px) et mobile (< 600px)
   ============================================================ */


/* ── Tablette ── */
@media (max-width: 900px) {

  .nav__links {
    display: none; /* menu burger à implémenter si besoin */
  }

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

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

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

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


/* ── Mobile ── */
@media (max-width: 600px) {

  :root {
    --space-xl: 4rem;
    --space-lg: 2.5rem;
  }

  .nav {
    padding: 0 var(--space-sm);
  }

  .nav__lang {
    margin-left: var(--space-sm);
    padding-left: var(--space-sm);
  }

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

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

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

  .footer {
    flex-direction: column;
    text-align: center;
    gap: 0.4rem;
  }

  .hero__logo-wrap {
    width: 90vw;
  }

  .section-title {
    font-size: clamp(1.8rem, 8vw, 2.5rem);
  }

  .page-hero__title {
    font-size: clamp(2rem, 9vw, 3rem);
  }
}