/* ==========================================================================
   BREAKPOINT : 1050px (Tablettes en mode paysage & petits écrans)
   ========================================================================== */
@media (max-width: 1050px) {
  .container {
    width: min(calc(100% - 32px), var(--container));
  }

  .two-col,
  .service-detail,
  .service-detail.reverse,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

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

  .gallery-item.large {
    grid-column: span 1;
  }

  .profile-box {
    grid-template-columns: 1fr;
  }

  .profile-image {
    min-height: 420px;
    order: -1;
  }

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

  .hero-main-card {
    position: relative;
  }

  .service-detail .image img,
  .two-col-image img {
    height: 400px;
  }
}

/* ==========================================================================
   BREAKPOINT : 850px (Tablettes en mode portrait)
   ========================================================================== */
@media (max-width: 850px) {
  .section {
    padding: 85px 0;
  }

  .page-hero {
    min-height: 370px;
    padding: 125px 0 75px;
  }

  .section-head {
    margin-bottom: 40px;
  }
}

/* ==========================================================================
   BREAKPOINT : 650px (Smartphones)
   ========================================================================== */
@media (max-width: 650px) {
  .container {
    width: min(calc(100% - 28px), var(--container));
  }

  .section {
    padding: 75px 0;
  }

  .page-hero {
    min-height: 340px;
    padding: 115px 0 65px;
  }

  .page-hero-content h1 {
    font-size: 42px;
  }

  .section-head h1,
  .section-head h2 {
    font-size: 34px;
  }

  .cards-grid,
  .news-grid,
  .gallery-grid,
  .profile-stats,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-group.full {
    grid-column: 1 / -1; /* Correction : assure un étalement complet sur la grille mobile */
  }

  .gallery-item {
    height: 240px;
  }

  .profile-content {
    padding: 32px 24px;
  }

  .profile-image {
    min-height: 350px;
  }

  .two-col-image img,
  .service-detail .image img {
    height: 330px;
  }

  .service-detail {
    gap: 28px;
  }

  .contact-form {
    padding: 22px;
  }

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

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

  .btn {
    width: 100%;
  }
}