/* ============================================================
   EPYK — Responsive
   Breakpoints : 768px (tablette), 480px (mobile)
   ============================================================ */

/* ========================
   TABLETTE (≤ 768px)
   ======================== */
@media (max-width: 768px) {

  :root {
    --spacing-section-h: 24px;
    --spacing-section-v: 64px;
  }

  /* Nav */
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .nav .btn-sm { display: none; }

  /* Hero */
  .hero {
    padding: 100px var(--spacing-section-h) 80px;
  }

  .hero-logo {
    height: 54px;
    margin-bottom: 34px;
  }

  .hero .text-hero {
    font-size: 52px;
  }

  /* Statement */
  .statement {
    padding: 72px var(--spacing-section-h);
  }

  /* SOA Showcase */
  .soa-showcase {
    flex-direction: column;
    text-align: center;
    padding: 48px var(--spacing-section-h);
  }

  .soa-showcase-divider {
    width: 48px;
    height: 1px;
  }

  /* Feature blocks → 1 colonne */
  .feat-grid {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .feat-grid--reverse {
    direction: ltr;
  }

  .feat-copy {
    padding: 48px var(--spacing-section-h);
  }

  .feat-copy .text-body {
    max-width: 100%;
  }

  .feat-visual {
    min-height: 320px;
    border-left: none;
    border-top: var(--border-thin);
  }

  .feat-grid--reverse .feat-visual {
    border-right: none;
    border-top: var(--border-thin);
  }

  /* Trio → 1 colonne */
  .trio-grid {
    grid-template-columns: 1fr;
  }

  .trio-cell {
    border-right: none;
    border-bottom: var(--border-thin);
    padding: 48px var(--spacing-section-h);
  }

  .trio-cell:last-child {
    border-bottom: none;
  }

  /* FAQ */
  .faq-wrap {
    padding: 64px var(--spacing-section-h);
  }

  /* Forum */
  .forum-wrap {
    padding: 64px var(--spacing-section-h);
  }

  .forum-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  /* CTA */
  .cta-section {
    padding: 100px var(--spacing-section-h);
  }

  /* Footer */
  .footer {
    flex-direction: column;
    text-align: center;
    padding: 32px var(--spacing-section-h);
    gap: 20px;
  }

  .footer-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }
}

/* ========================
   MOBILE (≤ 480px)
   ======================== */
@media (max-width: 480px) {

  :root {
    --spacing-section-h: 20px;
  }

  /* Hero */
  .hero-logo {
    height: 44px;
  }

  .hero .text-hero {
    font-size: 32px;
  }

  .hero .text-body-lg {
    font-size: 14px;
  }

  /* Boutons */
  .btn-group--center {
    flex-direction: column;
    align-items: stretch;
  }

  .btn {
    justify-content: center;
    text-align: center;
  }

  /* Statement */
  .statement .text-quote {
    font-size: 26px;
  }

  /* FAQ titre */
  .faq-wrap .text-section-title {
    font-size: 32px;
  }

  /* CTA */
  .cta-section .text-cta-title {
    font-size: 48px;
  }

  .cta-price-val {
    font-size: 44px;
  }

  /* Trio chiffres */
  .trio-num {
    font-size: 56px;
  }

  /* Phone mock — réduire un peu */
  .phone-mock {
    width: 185px;
  }

  /* Nav logo */
  .nav-logo img {
    height: 28px;
  }
}