/* ==========================================================================
   DIGITAL STRONG — responsive.css
   Mobile-first breakpoint overrides
   ========================================================================== */

/* ---------- ≤ 1180px : nav condensed / grids to 2 cols ---------- */
@media (max-width: 1180px) {
  .main-nav { display: none; }
  .header-actions .btn--gold span.full { display: none; }
  .nav-toggle { display: inline-flex; }

  .footer-top { grid-template-columns: 1fr 1fr; }
  .reason-grid { grid-template-columns: repeat(2, 1fr); }
  .audience-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- ≤ 1024px : hero, service grid, portfolio to 2 cols ---------- */
@media (max-width: 1024px) {
  /* Hero et grille de services : règles spécifiques dans home.css */

  .local-block { grid-template-columns: 1fr; }
  .contact-layout { grid-template-columns: 1fr; }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- ≤ 860px : general stacking ---------- */
@media (max-width: 860px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .presta-grid { grid-template-columns: 1fr; }
  .mega-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ---------- ≤ 768px : type scale, spacing, sections ---------- */
@media (max-width: 768px) {
  :root { --section-pad: clamp(48px, 12vw, 80px); }
  .reason-grid, .audience-grid { grid-template-columns: 1fr; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .process-item { grid-template-columns: 60px 1fr; gap: 16px; }
  .hero-actions, .page-hero-actions, .cta-band-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn, .page-hero-actions .btn, .cta-band-actions .btn { width: 100%; justify-content: center; }
  .form-grid { grid-template-columns: 1fr; }
  .whatsapp-float span { display: none; }
  .whatsapp-float { padding: 14px; }
  .back-to-top { bottom: 84px; }
}

/* ---------- ≤ 430px : tight phones ---------- */
@media (max-width: 430px) {
  .container { padding-inline: 18px; }
  .brand-name { font-size: 0.92rem; }
  .btn { padding: 13px 22px; font-size: 0.86rem; }
  .cta-band { padding: 32px 22px; }
  .mobile-drawer { padding: 92px 20px 32px; }
}

/* ---------- ≥ 1600px : keep composition from over-stretching ---------- */
@media (min-width: 1600px) {
  :root { --container-w: 1320px; }
}