/* ═══════════════════════════════════════════════════════
   MonAgent-IA — Correctif responsive mobile + tablette
   Injecté APRÈS le CSS principal
   ═══════════════════════════════════════════════════════ */

/* ── Fix scroll horizontal global ── */
html {
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* ══════ TABLETTE (≤ 960px) ══════ */
@media (max-width: 960px) {
  .hero { padding: 120px 0 80px; }
  .hero-inner { gap: 40px; }
  .hero h1 { font-size: clamp(32px, 5vw, 48px); }
  .hero-sub { font-size: 16px; }

  .phone-float.top { right: 0; }
  .phone-float.bot { left: 0; }

  .section-title { font-size: clamp(28px, 4.5vw, 44px); }

  .hero-trust { gap: 20px; flex-wrap: wrap; }
}

/* ══════ MOBILE (≤ 768px) ══════ */
@media (max-width: 768px) {
  /* Container */
  .container, [class*="inner"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Hero */
  .hero { padding: 100px 0 60px; }
  .hero-inner {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    text-align: center;
  }
  .hero-copy { order: 1; }
  .hero-visual { order: 2; }
  .hero h1 { font-size: 32px; line-height: 1.15; }
  .hero-sub { font-size: 16px; }
  .hero-ctas {
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .hero-ctas .btn { width: 100%; max-width: 320px; text-align: center; }
  .hero-trust {
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
  }

  /* Phone */
  .phone-frame {
    width: 260px !important;
    margin: 0 auto;
    transform: none !important;
  }
  .phone-float { display: none !important; }

  /* Sections */
  section, .features, .parcours, .testimonials, .pricing, .comparison {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  .section-title { font-size: 26px !important; line-height: 1.2; }
  .section-sub { font-size: 15px !important; }

  /* Steps / Parcours */
  .step-row, .step-row:nth-child(even) {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }

  /* Features grid */
  .features-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .feature-card-main {
    grid-column: span 1 !important;
  }

  /* Sectors */
  .sectors-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  /* Stats */
  .stats-grid, .results-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }

  /* Pricing */
  .pricing-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Comparison table */
  .comparison-table {
    font-size: 13px !important;
    overflow-x: auto;
    display: block;
  }

  /* Marquee */
  .marquee-wrap { overflow: hidden !important; }

  /* Testimonials */
  .testi-grid {
    grid-template-columns: 1fr !important;
  }
  .case-study-grid {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }

  /* FAQ */
  .faq-grid {
    grid-template-columns: 1fr !important;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
    text-align: center;
  }

  /* CTA section */
  .cta-section { text-align: center; }
  .cta-section h2 { font-size: 26px !important; }
  .cta-buttons {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  /* Nav mobile */
  .nav-actions { gap: 8px; }
  .nav-actions .btn { padding: 8px 14px !important; font-size: 13px !important; }
}

/* ══════ PETIT MOBILE (≤ 480px) ══════ */
@media (max-width: 480px) {
  .hero h1 { font-size: 26px; }
  .hero-sub { font-size: 15px; }
  .eyebrow { font-size: 11px; padding: 6px 12px 6px 8px; }

  .phone-frame { width: 220px !important; }

  .section-title { font-size: 22px !important; }
  .section-label { font-size: 11px !important; }

  .sectors-grid { grid-template-columns: 1fr !important; }
  .stats-grid, .results-grid { grid-template-columns: 1fr !important; }

  .step-num { font-size: 60px !important; }

  .nav-actions .btn-outline { display: none; }

  .trust-item span { font-size: 12px; }

  /* Comparison table scroll */
  .comparison-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -20px;
    padding: 0 20px;
  }
  .comparison-table {
    min-width: 600px;
  }
}

/* ══════ SAFE AREAS (iPhone notch) ══════ */
@supports (padding: env(safe-area-inset-bottom)) {
  .footer { padding-bottom: env(safe-area-inset-bottom); }
  nav { padding-top: env(safe-area-inset-top); }
}