/* Atelier DA — Responsive overrides.
   The site's components use inline styles (desktop layout), so mobile
   overrides live here as classed rules with !important — external CSS
   with !important beats an element's own inline style. Two breakpoints:
   860px (nav becomes a hamburger, multi-column grids collapse to one
   column) and 480px (further tightening for small phones). */

html, body { overflow-x: hidden; }
/* Prevent iOS Safari from auto-inflating font sizes in narrow flex columns
   (a real-device-only quirk that desktop viewport emulation doesn't show). */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

@media (max-width: 860px) {
  :root {
    --gutter: 20px;      /* every 'var(--gutter)' padding shrinks site-wide */
    --section-y: 64px;
  }

  /* Header: swap the inline nav + CTA for the hamburger button */
  .ds-header { padding: 14px 20px !important; }
  .ds-nav, .ds-header-cta { display: none !important; }
  .ds-burger { display: inline-flex !important; }

  /* Hero */
  .ds-hero { grid-template-columns: 1fr !important; padding: 48px var(--gutter) 40px !important; gap: 32px !important; }
  .ds-hero-title { font-size: 38px !important; }
  .ds-hero-media { min-height: 260px !important; }

  /* Nos services */
  .ds-services-grid { gap: 16px !important; }
  .ds-service-card { flex-basis: 100% !important; }

  /* Valeurs clés */
  .ds-values-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
  .ds-values-cards { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }

  /* CTA panel */
  .ds-cta { flex-direction: column !important; align-items: flex-start !important; padding: 40px 28px !important; }
  .ds-cta-title { font-size: 27px !important; }
  .ds-cta-btn { width: 100% !important; justify-content: center !important; }

  /* Trust bar + footer */
  .ds-trustbar { gap: 24px 16px !important; }

  /* Tarifs */
  .ds-pricing-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .ds-pricing-item--featured { order: -1 !important; }
  .ds-pricing-card--featured { transform: none !important; }
  .ds-pricing-options-row { flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; }
  .ds-modules-grid { grid-template-columns: 1fr !important; }

  /* Réalisations */
  .ds-portfolio-grid { grid-template-columns: 1fr !important; gap: 32px !important; }

  /* Contact */
  .ds-contact-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .ds-contact-row { grid-template-columns: 1fr !important; }

  /* Section titles */
  .ds-section-title { font-size: 27px !important; }
  .ds-page-title { font-size: 34px !important; }

  /* Static service pages */
  .service-hero h1 { font-size: 34px !important; }
  .service-section h2 { font-size: 24px !important; }
  .service-problem-grid { grid-template-columns: 1fr !important; }
  .service-deliverables { grid-template-columns: 1fr !important; }
  .service-steps-list { flex-direction: column !important; }
  .service-price-card { flex-direction: column !important; align-items: flex-start !important; }
  .service-cta-band-inner { flex-direction: column !important; align-items: flex-start !important; padding: 40px 28px !important; }
  .service-cta-band-inner h2 { font-size: 26px !important; }
  .service-cta-band-btn { width: 100% !important; justify-content: center !important; }
  .services-hub-cards { grid-template-columns: 1fr !important; }
  .services-reassurance-list { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
  .ds-site-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px 24px !important; }
}

@media (max-width: 480px) {
  :root { --gutter: 16px; }

  .ds-hero-title { font-size: 30px !important; }
  .ds-values-cards { grid-template-columns: 1fr !important; }
  .ds-trustbar { grid-template-columns: 1fr !important; }
  .ds-page-title { font-size: 28px !important; }
  .ds-section-title { font-size: 23px !important; }
  .ds-pricing-price { font-size: 36px !important; }
  .service-hero h1 { font-size: 28px !important; }
  .services-reassurance-list { grid-template-columns: 1fr !important; }
  .ds-site-footer-grid { grid-template-columns: 1fr !important; }
  .ds-contact-reassurance li { font-size: 13.5px !important; }
}