/* WORKANDPROSPECT_VITRINE_MOBILE_V1
 * Patch responsive complet vitrine WAS/WorkAndProspect.
 * Cible le design system .h2-* + classes globales (.navbar, .hero, .container, .grid-*, .form-*).
 * Append APRÈS le <style> inline de base.html.
 * 4 breakpoints : tablette ≤980, mobile ≤768, small ≤480, XS ≤380.
 */

/* ──────────── TABLET (≤980px) ──────────── */
@media (max-width: 980px) {
  .container { padding: 0 20px; }

  /* Navbar : nav-links cachés sur tablette, on garde brand + CTA */
  .navbar .container { gap: 12px; }
  .nav-links { display: none !important; }
  .nav-cta { flex: 0 0 auto; }
  .nav-cta .btn { padding: 8px 14px; font-size: 13px; }

  /* Hero V2 padding réduit */
  .h2-hero { padding: 72px 0 56px !important; }
  .h2-hero .container { gap: 28px !important; }

  /* Mockup retire la perspective qui déborde */
  .h2-mockup { transform: none !important; max-width: 480px; margin: 0 auto; }

  /* Floating stats deja masqués @980, on s'assure */
  .h2-floating-stat { display: none !important; }

  /* Sections padding réduit */
  section, .h2-features-premium, .h2-pain-section, .h2-cta-section, .h2-testimonials { padding: 64px 0 !important; }
  .section-title h2 { font-size: 30px !important; }
}

/* ──────────── MOBILE (≤768px) ──────────── */
@media (max-width: 768px) {
  .container { padding: 0 16px; }

  /* Navbar compacte */
  .navbar { padding: 10px 0 !important; }
  .brand { font-size: 16px !important; gap: 8px !important; }
  .brand-logo { width: 40px !important; height: 40px !important; border-radius: 10px !important; }
  .nav-cta .btn { padding: 7px 12px !important; font-size: 12px !important; gap: 4px; }
  .nav-cta .btn i { font-size: 12px; }
  .nav-cta .btn span.hide-mobile { display: none; }

  /* Hero typographique */
  .h2-title { font-size: 30px !important; line-height: 1.15 !important; margin-bottom: 16px !important; }
  .h2-lead { font-size: 16px !important; margin-bottom: 24px !important; line-height: 1.55 !important; }
  .h2-eyebrow { font-size: 11px !important; padding: 5px 12px !important; margin-bottom: 16px !important; }

  /* CTA hero : full width pile */
  .h2-ctas { flex-direction: column; gap: 10px !important; }
  .h2-ctas .h2-btn-cta, .h2-ctas .h2-btn-ghost { width: 100%; justify-content: center; padding: 14px 20px !important; font-size: 14px !important; min-height: 48px; }

  /* Trust line wrap */
  .h2-trust { gap: 14px !important; font-size: 12px; }
  .h2-trust span { font-size: 12px !important; }

  /* Hero V2 padding */
  .h2-hero { padding: 36px 0 40px !important; }

  /* Mockup réduit */
  .h2-mockup { padding: 12px !important; max-width: 100% !important; }
  .h2-msg { padding: 8px 10px !important; font-size: 11px !important; }
  .h2-msg-avatar { width: 26px !important; height: 26px !important; font-size: 10px !important; }
  .h2-msg-time { font-size: 9px !important; }

  /* Sections padding réduit */
  section, .h2-features-premium, .h2-pain-section, .h2-cta-section, .h2-testimonials, .cta-section { padding: 44px 0 !important; }
  .section-title { margin-bottom: 32px !important; }
  .section-title h2 { font-size: 24px !important; line-height: 1.2 !important; }
  .section-title p { font-size: 15px !important; }

  /* Headings génériques */
  h1 { font-size: 28px !important; line-height: 1.15 !important; }
  h2 { font-size: 24px !important; line-height: 1.2 !important; }
  h3 { font-size: 18px !important; }

  /* Grids forcées 1 col */
  .grid-3, .grid-2 { grid-template-columns: 1fr !important; gap: 16px !important; }
  .h2-pain-grid, .h2-features-grid, .h2-steps-grid, .h2-testimonials-grid { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* Cards padding réduit */
  .feature, .h2-feature-card, .h2-pain, .h2-step, .h2-testimonial { padding: 20px !important; border-radius: 12px !important; }
  .h2-feature-icon-big { width: 50px !important; height: 50px !important; font-size: 20px !important; margin-bottom: 14px !important; }
  .h2-feature-card h3 { font-size: 17px !important; }
  .h2-feature-card p { font-size: 14px !important; }
  .h2-feature-tag { font-size: 10px !important; }

  /* Pain cards */
  .h2-pain-emoji { font-size: 26px !important; margin-bottom: 10px !important; }
  .h2-pain h4 { font-size: 16px !important; }
  .h2-pain p { font-size: 13px !important; }

  /* CTA section */
  .cta-section h2, .h2-cta-section h2 { font-size: 24px !important; }
  .cta-section p, .h2-cta-section p { font-size: 15px !important; }
  .cta-section .btn, .h2-cta-section .btn { width: 100%; justify-content: center; min-height: 48px; }

  /* Footer responsive */
  footer { padding: 32px 0 20px !important; font-size: 13px; }
  footer .grid { grid-template-columns: 1fr 1fr !important; gap: 24px !important; margin-bottom: 24px !important; }
  footer h4 { font-size: 13px !important; margin-bottom: 10px !important; }
  footer a { padding: 3px 0 !important; font-size: 13px; }
  footer .bottom { font-size: 11px !important; }

  /* Forms iOS-safe */
  .form-card { padding: 22px !important; border-radius: 12px !important; }
  .form-row { grid-template-columns: 1fr !important; gap: 10px !important; }
  .form-group input, .form-group select, .form-group textarea,
  input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="search"],
  textarea, select {
    font-size: 16px !important; /* anti-zoom iOS */
    padding: 12px 14px !important;
    min-height: 44px !important;
    width: 100% !important;
  }
  .form-group label { font-size: 13px !important; }

  /* Boutons touch-friendly généraux */
  .btn { min-height: 44px !important; padding: 12px 18px !important; }
  .btn-lg { padding: 14px 22px !important; font-size: 14px !important; }

  /* Stats hero */
  .hero h1 { font-size: 30px !important; }
  .hero p.lead { font-size: 16px !important; }
  .hero { padding: 40px 0 36px !important; }
  .hero-ctas { flex-direction: column; gap: 10px; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
  .hero-trust { gap: 14px; justify-content: center; font-size: 12px; }

  /* Images / mockups fluid */
  img, svg, video { max-width: 100% !important; height: auto !important; }

  /* Tableaux scroll horizontal */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Animations mesh / float bg : tuer (économise CPU mobile) */
  .h2-hero::before, .h2-mockup:hover, [class*="floatStat"], [class*="meshFloat"] {
    animation: none !important;
  }

  /* Chat bubble taille mobile */
  .cb-fab { width: 54px !important; height: 54px !important; bottom: 16px !important; right: 16px !important; font-size: 20px !important; }
  .cb-panel {
    right: 8px !important; left: 8px !important;
    bottom: 80px !important; width: auto !important;
    max-width: none !important;
    height: calc(100vh - 110px) !important;
    max-height: calc(100vh - 110px) !important;
    border-radius: 14px !important;
  }
}

/* ──────────── SMALL MOBILE (≤480px) ──────────── */
@media (max-width: 480px) {
  .container { padding: 0 14px; }
  .brand-logo { width: 36px !important; height: 36px !important; }
  .brand { font-size: 15px !important; }
  .nav-cta .btn { padding: 6px 10px !important; font-size: 11px !important; }
  .nav-cta .btn .label-full { display: none; }

  .h2-title { font-size: 26px !important; }
  .h2-lead { font-size: 15px !important; }
  h1 { font-size: 24px !important; }
  h2 { font-size: 21px !important; }
  .section-title h2 { font-size: 21px !important; }

  /* Footer 1 colonne */
  footer .grid { grid-template-columns: 1fr !important; }

  /* Sections plus serrées */
  section, .h2-features-premium, .h2-pain-section, .h2-cta-section { padding: 32px 0 !important; }
  .h2-hero { padding: 24px 0 28px !important; }

  /* Cards plus compactes */
  .h2-feature-card, .feature { padding: 16px !important; }
  .h2-feature-icon-big { width: 44px !important; height: 44px !important; font-size: 18px !important; }
}

/* ──────────── XS (≤380px, iPhone SE) ──────────── */
@media (max-width: 380px) {
  .container { padding: 0 12px; }
  .h2-title { font-size: 22px !important; }
  h1 { font-size: 22px !important; }
  h2 { font-size: 19px !important; }
  .section-title h2 { font-size: 19px !important; }
  .brand { font-size: 14px !important; }
  .brand-logo { width: 32px !important; height: 32px !important; }
}

/* ──────────── REDUCED MOTION ──────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}