/* responsive-preview.css — Tom Web Studio (preview) */

/* ── Tablet ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  #hero {
    grid-template-columns: 1fr;
    text-align: center; padding-top: 5.5rem; gap: 3rem;
    max-width: 680px;
  }
  .hero-eyebrow { justify-content: center; }
  .hero-sub { margin: 0 auto 2.25rem; }
  .hero-actions { justify-content: center; }
  .hero-proof { justify-content: center; }
  .hero-img-badge { left: 50%; transform: translateX(-50%); bottom: -1.2rem; }

  .real-grid { grid-template-columns: repeat(2, 1fr); max-width: 700px; margin: 0 auto; }
  .real-grid .real-card--placeholder { grid-column: 1 / -1; }

  /* about-split : bascule en colonne à 1024px */
  .about-split { grid-template-columns: 1fr; gap: 2.5rem; max-width: 620px; margin: 0 auto; }

  .contact-band { max-width: 100%; }
  .contact-intro { max-width: 100%; }

  .pillar-grid { grid-template-columns: 1fr 1fr; }
  .options-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Phablet ────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Nav */
  .nav-toggle { display: flex; }
  .nav-menu {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    padding: 0.75rem; gap: 0.15rem;
    display: none; box-shadow: var(--shadow-md);
  }
  .nav-menu.open { display: flex; }
  .nav-link { padding: 0.8rem 1rem; color: var(--text); }
  .nav-link.nav-cta { text-align: center; margin-left: 0; margin-top: 0.5rem; }

  .hero-img-badge { position: static; margin-top: 1rem; transform: none; justify-content: center; }

  .step-item { grid-template-columns: 56px 1fr; gap: 1rem; padding: 1.75rem 0; }

  .pillar-grid { grid-template-columns: 1fr; }
  .options-grid { grid-template-columns: 1fr; }
  .includes-list { grid-template-columns: 1fr; }

  .real-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }

  .form-row { grid-template-columns: 1fr; }
}

/* ── Mobile ─────────────────────────────────────────────── */
@media (max-width: 480px) {
  :root { --px: 1rem; --py: 3.5rem; }

  #hero-title { font-size: 2.1rem; }
  .hero-sub   { font-size: 0.95rem; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { justify-content: center; text-align: center; }
  .hero-proof { gap: 1.25rem; flex-wrap: wrap; }

  .process-item { grid-template-columns: 1fr; gap: 0.5rem; }
  .process-num  { font-size: 0.65rem; }

  .about-split { gap: 1.75rem; }
  .about-split-heading h2 { font-size: 1.65rem; }

  .step-item { grid-template-columns: 1fr; gap: 0.6rem; }
  .step-marker { justify-content: flex-start; }
  .step-list::before { display: none; }

  .why-block { padding: 1.25rem 1.25rem; }
  .includes-block { padding: 1.25rem 1.25rem; }

  .real-card { min-height: 180px; }

  .contact-details { gap: 0.5rem; }
  .contact-link { padding: 0.9rem 1rem; gap: 0.75rem; }
  .contact-link strong { font-size: 0.88rem; }

  .footer-nav { gap: 0.25rem 1rem; }

  #intro-brand { font-size: 2rem; letter-spacing: 0.08em; }
}

/* ── Large screens ──────────────────────────────────────── */
@media (min-width: 1440px) {
  :root { --max-w: 1280px; }
  #hero-title { font-size: 4.2rem; }
}