/* ==========================================================================
   RESPONSIVE
   Ce fichier doit être chargé APRÈS tous les autres fichiers CSS : il
   s'appuie sur l'ordre de la cascade pour surcharger leurs règles.
   ========================================================================== */
@media (max-width: 980px){
  .feature-row, .focus-split, .cta-banner, .tab-panel, .testimonial{
    grid-template-columns: 1fr;
  }
  .feature-row--reverse .feature-row__media,
  .feature-row--reverse .feature-row__text{ order:0; }
  .footer-top{ grid-template-columns: 1fr 1fr; }
  .cta-banner{ padding: 44px 28px; }
  .stat-row{ grid-template-columns: repeat(2,1fr); gap: 32px; }

  .hero--split{
    grid-template-columns: 1fr;
    text-align:center;
  }
  .hero--split .hero__content{ align-items:center; }
  .hero--split .hero__cta{ justify-content:center; }
}

@media (max-width: 760px){
  .main-nav{
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    width: min(78vw, 320px);
    background: #fff;
    flex-direction: column;
    align-items: flex-start;
    padding: 100px 28px 28px;
    gap: 22px;
    transform: translateX(100%);
    transition: transform .4s var(--ease);
    box-shadow: -20px 0 40px rgba(0,0,0,.15);
  }
  .main-nav.is-open{ transform: translateX(0); }
  .nav-toggle{ display:flex; }
  .icon-grid, .round-grid{ grid-template-columns: 1fr; }
  .pricing-grid{ grid-template-columns: 1fr; }
  .price-card--highlight{ transform:none; }
  .price-card--highlight:hover{ transform: translateY(-6px); }
  .footer-top{ grid-template-columns: 1fr; }
  .stat-row{ grid-template-columns: 1fr 1fr; }
}