/* ============================================================
   Responsive — Swiss DeFi Canada
   ============================================================ */

/* ── Tablette (≤ 991px) ───────────────────────────────────── */
@media (max-width: 991px) {
  h1 { font-size: clamp(36px, 7vw, 56px); }
  h2 { font-size: clamp(28px, 5vw, 40px); }
  h3 { font-size: clamp(22px, 4vw, 30px); }

  .nav-menu   { display: none; }
  .nav-hamburger { display: flex; }

  .nav-actions .btn-primary.nav-cta { display: none; }
  .nav-actions .lang-switcher       { display: none; }

  .nav-menu.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 80px; left: 0; right: 0;
    background: var(--swiss-white);
    padding: var(--sp-md);
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    z-index: 999;
    gap: 4px;
  }
  .nav-menu.open .nav-link { padding: 12px 16px; font-size: 16px; }

  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { display: none; }
  .hero { min-height: 60vh; padding: var(--sp-2xl) 0; }

  .products-grid   { grid-template-columns: repeat(2, 1fr); }
  .stats-grid      { grid-template-columns: repeat(2, 1fr); }
  .pillars-grid    { grid-template-columns: repeat(2, 1fr); }
  .kyc-steps       { grid-template-columns: 1fr; }
  .kyc-steps::before { display: none; }
  .chains-grid     { grid-template-columns: repeat(2, 1fr); }
  .blog-grid       { grid-template-columns: repeat(2, 1fr); }
  .footer-grid     { grid-template-columns: 1fr 1fr; gap: var(--sp-lg); }
  .dashboard-layout { grid-template-columns: 1fr; }
  .dash-sidebar    { display: none; }
  .grid-12 .col-6  { grid-column: span 12; }
  .grid-12 .col-4  { grid-column: span 6; }
  .grid-12 .col-3  { grid-column: span 6; }
  .grid-12 .col-8  { grid-column: span 12; }

  .sim-results { grid-template-columns: 1fr 1fr; }
}

/* ── Mobile (≤ 575px) ─────────────────────────────────────── */
@media (max-width: 575px) {
  :root { --sp-2xl: 48px; --sp-3xl: 64px; }

  .container { padding-inline: 16px; }

  .nav-container { padding: var(--sp-sm) 16px; gap: var(--sp-sm); }
  .network-badge { display: none; }
  .btn-wallet    { padding: 6px 10px; font-size: 12px; }

  /* Prevent any element from overflowing the viewport */
  * { max-width: 100%; }
  pre, code, table { overflow-x: auto; }

  .hero { padding: var(--sp-xl) 0; }
  .hero-stats  { grid-template-columns: 1fr 1fr; gap: var(--sp-sm); }
  .hero-badges { flex-direction: column; gap: var(--sp-xs); }
  .hero-cta    { flex-direction: column; }
  .hero-cta .btn { width: 100%; justify-content: center; }

  .products-grid { grid-template-columns: 1fr; }
  .stats-grid    { grid-template-columns: 1fr 1fr; }
  .pillars-grid  { grid-template-columns: 1fr; }
  .chains-grid   { grid-template-columns: 1fr 1fr; }
  .blog-grid     { grid-template-columns: 1fr; }
  .footer-grid   { grid-template-columns: 1fr; }

  .sim-results   { grid-template-columns: 1fr; }
  .simulator-widget { padding: var(--sp-md); }

  .wallet-panel  { left: var(--sp-sm); right: var(--sp-sm); width: auto; }

  .progress-steps .step-label { display: none; }

  .cookie-inner { flex-direction: column; gap: var(--sp-sm); }
  .cookie-actions { width: 100%; justify-content: flex-end; }

  .footer-bottom-inner { flex-direction: column; text-align: center; }

  .grid-12 .col-4 { grid-column: span 12; }
  .grid-12 .col-3 { grid-column: span 12; }

  .data-table { font-size: 12px; }
  .data-table th, .data-table td { padding: 8px 10px; }
}

/* ── Large (≥ 1200px) ─────────────────────────────────────── */
@media (min-width: 1200px) {
  .products-grid { grid-template-columns: repeat(3, 1fr); }
  .pillars-grid  { grid-template-columns: repeat(4, 1fr); }
  .chains-grid   { grid-template-columns: repeat(4, 1fr); }
}

/* ── XL (≥ 1400px) ───────────────────────────────────────── */
@media (min-width: 1400px) {
  :root { --container-max: 1400px; }
}

/* ── Print ────────────────────────────────────────────────── */
@media print {
  .site-header, .site-footer, .legal-banner,
  .cookie-banner, .scroll-progress, .wallet-panel,
  .nav-actions, .hero-cta, .cta-band { display: none !important; }
  body { font-size: 12pt; color: #000; background: #fff; }
  a::after { content: " (" attr(href) ")"; font-size: 10pt; }
}

/* ── Préférence mouvement réduit ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .scroll-progress { display: none; }
}

/* ── Mode sombre ──────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  body.dark-auto {
    --swiss-bg:    #0D1B2E;
    --swiss-white: #111D2E;
    --swiss-text:  #E8EDF3;
    --swiss-text-light: #8B9CB5;
    --swiss-border: #1E3251;
    --swiss-primary: #C9A84C;
    background: var(--dark-bg);
    color: var(--swiss-text);
  }
}