/*
 * mobile.css — Correctifs responsive pour styles inline
 * Chargé sur toutes les pages après style.css
 * Cible les composants avec styles inline non modifiables facilement
 */

/* ─── Base mobile ──────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Boutons CTA côte à côte → empilés */
  .cta-buttons,
  .hero-actions,
  [style*="display:flex"][style*="gap:1rem"][style*="justify-content:center"],
  [style*="display:flex"][style*="gap:1rem"][style*="margin-top:2rem"],
  [style*="display:flex"][style*="gap:1rem"][style*="flex-wrap:wrap"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Stat grids 3 colonnes → 2 */
  .stat-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
  }

  /* Cards grid → 1 colonne */
  .cards-grid {
    grid-template-columns: 1fr !important;
  }

  /* Two col → 1 col */
  .two-col,
  .mission-grid,
  .cpts-grid,
  .ville-grid,
  .blog-layout {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  /* Steps → 1 col */
  .step-list { gap: 1rem !important; }
  .approach-steps { grid-template-columns: 1fr !important; }

  /* Values / network */
  .values-grid { grid-template-columns: 1fr 1fr !important; }
  .network-grid { grid-template-columns: 1fr 1fr !important; }

  /* Sidebar sticky → normale */
  .sidebar-card,
  [style*="position: sticky"],
  [style*="position:sticky"] {
    position: static !important;
  }

  /* Info cards grid 2×4 inline */
  [style*="grid-template-columns: 1fr 1fr"][style*="gap:0.75rem"],
  [style*="grid-template-columns:1fr 1fr"][style*="gap:0.75rem"] {
    grid-template-columns: 1fr !important;
  }

  /* Highlight box CTA button */
  .highlight-box .btn { width: 100% !important; text-align: center !important; }

  /* Pricing card */
  .pricing-card { width: 100% !important; }

  /* Articles */
  .article-card { grid-template-columns: 1fr !important; }
  .article-emoji { height: 80px !important; width: 100% !important; }

  /* Prose pages */
  .prose-body { padding: 2.5rem 1rem !important; }

  /* Grilles inline "display:grid;grid-template-columns:1fr 1fr" génériques */
  div[style*="grid-template-columns: 1fr 1fr"],
  div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* CTA band */
  .cta-band div[style] { flex-direction: column !important; align-items: stretch !important; }
  .cta-band .btn,
  .cta-band a.btn { display: block !important; width: 100% !important; text-align: center !important; }

  /* Urgency bar */
  .urgency-inner {
    flex-direction: column !important;
    text-align: center !important;
  }

  /* Phone bar */
  .phone-bar {
    font-size: 0.78rem;
    padding: 0.5rem 1rem;
    text-align: center;
  }

  /* Footer bottom */
  .footer-bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: 0.75rem !important;
  }
  .footer-legal { justify-content: center !important; flex-wrap: wrap !important; }

  /* Shortcut grid (404) */
  .shortcut-grid { grid-template-columns: 1fr 1fr !important; }

  /* Sitemap stats */
  .stats-bar { gap: 1.25rem !important; }
}

/* ─── Petit mobile (≤480px) ──────────────────────────────── */
@media (max-width: 480px) {

  /* Stat grid → 1 colonne */
  .stat-grid { grid-template-columns: 1fr !important; }
  .values-grid { grid-template-columns: 1fr !important; }
  .network-grid { grid-template-columns: 1fr !important; }
  .shortcut-grid { grid-template-columns: 1fr !important; }

  /* Forcer 1 colonne sur tout grid inline */
  div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Textes hero */
  .patho-hero h1,
  .ville-hero h1,
  .cpts-hero h1 { font-size: 1.65rem !important; }

  /* Padding sections réduit */
  section[class*="-section"],
  section[class*="content-section"],
  .section { padding: 2.5rem 0 !important; }

  /* Boutons en pleine largeur partout */
  .btn { min-width: 0 !important; }
  a.btn[style*="width:100%"],
  a.btn[style*="display:block"] { font-size: 0.9rem !important; }

  /* Service tags wrapping */
  .service-tags,
  .cpts-liens,
  .cat-pills { gap: 0.4rem !important; }

  /* Blog sidebar → cachée sur très petit */
  .blog-layout > aside { display: none; }
}

/* ─── Overflow horizontal global ─────────────────────────── */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* ─── Images responsive ──────────────────────────────────── */
img {
  max-width: 100%;
  height: auto;
}

/* ─── Tableaux scrollables ───────────────────────────────── */
@media (max-width: 768px) {
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 0.85rem;
  }
}

/* ─── Touch targets min 44px ─────────────────────────────── */
@media (max-width: 768px) {
  .btn,
  a.btn,
  button,
  input[type="submit"],
  .faq-question,
  .nav a {
    min-height: 44px;
  }
}