/* ============================================================================
   layout-3col.css  ·  EcoMutuelle v3
   Desktop grid: 5vw | 20vw TOC | 45vw content | 25vw form | 5vw
   Mobile (<1024px): vertical stack — TOC accordion sticky, content full-width,
   form in normal flow, header collapses to 56 px, floating CTA appears.
   ========================================================================== */

/* ── Fixed header / body offset ────────────────────────────────────────── */
.hdr {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--header-h-desktop);
  z-index: 100;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-100);
}
body { padding-top: var(--header-h-desktop); }

.hdr-inner {
  height: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--sp-5);
  padding: 0 var(--sp-5);
  max-width: 1600px;
  margin: 0 auto;
}
.hdr-brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-mark { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, var(--primary-500), var(--secondary-500)); }
.brand-name { font-weight: 800; font-size: var(--fs-md); color: var(--ink-900); letter-spacing: -.01em; }
.brand-name-em { color: var(--primary-600); }
.hdr-nav { display: flex; gap: var(--sp-5); justify-content: center; }
.hdr-nav a { color: var(--ink-700); font-weight: 600; font-size: var(--fs-sm); padding: 6px 0; }
.hdr-nav a:hover { color: var(--primary-600); text-decoration: none; }
.hdr-trust { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-600); font-size: var(--fs-xs); font-weight: 600; }
.trust-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--secondary-500); box-shadow: 0 0 0 4px var(--secondary-100); }

/* ── DESKTOP (≥1024px) — 5/20/45/25/5 grid ────────────────────────────── */
@media (min-width: 1024px) {
  .page-3col {
    display: grid;
    grid-template-columns: 5vw 20vw 45vw 25vw 5vw;
    gap: 0;
    max-width: none;
    align-items: start;
    padding: var(--sp-6) 0 var(--sp-9);
  }

  .page-3col .page-toc {
    grid-column: 2;
    position: sticky;
    top: calc(var(--header-h-desktop) + 16px);
    max-height: calc(100vh - var(--header-h-desktop) - 32px);
    overflow-y: auto;
    padding: 0 var(--sp-5) 0 var(--sp-3);
    scrollbar-width: thin;
  }

  .page-3col .page-content {
    grid-column: 3;
    padding: 0 var(--sp-6);
    min-width: 0; /* prevents grid overflow */
  }

  .page-3col .page-form {
    grid-column: 4;
    position: sticky;
    top: calc(var(--header-h-desktop) + 16px);
    max-height: calc(100vh - var(--header-h-desktop) - 32px);
    overflow-y: auto;
    padding: 0 var(--sp-3) 0 var(--sp-5);
    scrollbar-width: thin;
  }

  .page-toc-toggle { display: none; } /* desktop = always-open list */

  .mobile-cta-floating { display: none; }

  /* Footer should sit underneath the form column visually */
  .ftr-grid { padding-right: 0; }
}

/* ── MOBILE (<1024px) — vertical stack ─────────────────────────────────── */
@media (max-width: 1023px) {
  :root { --header-h-desktop: var(--header-h-mobile); }
  .hdr { height: var(--header-h-mobile); }
  body { padding-top: var(--header-h-mobile); }

  .hdr-inner { grid-template-columns: auto 1fr auto; gap: var(--sp-3); padding: 0 var(--sp-4); }
  .hdr-nav { display: none; }
  .hdr-trust { display: none; }

  .page-3col {
    display: block;
    padding: var(--sp-4) var(--sp-4) var(--sp-8);
  }

  .page-3col .page-toc {
    position: sticky;
    top: var(--header-h-mobile);
    z-index: 50;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-100);
    padding: 10px var(--sp-4);
    margin: 0 calc(-1 * var(--sp-4)) var(--sp-5);
  }
  .page-toc-toggle {
    display: flex; width: 100%;
    justify-content: space-between; align-items: center;
    background: transparent; border: 0;
    font-weight: 700; color: var(--ink-800); font-size: var(--fs-sm);
    padding: 6px 0;
  }
  .page-toc .page-toc-list { display: none; padding-top: 10px; }
  .page-toc.is-open .page-toc-list { display: block; }

  .page-3col .page-content { padding: 0; }
  .page-3col .page-form { margin-top: var(--sp-7); padding: 0; position: static; max-height: none; overflow: visible; }

  /* Floating bottom CTA */
  .mobile-cta-floating {
    position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
    z-index: 90;
    background: var(--primary-500); color: #fff;
    padding: 12px 22px; border-radius: var(--r-pill);
    font-weight: 700; font-size: var(--fs-sm);
    box-shadow: 0 8px 24px rgba(124, 58, 237, .35);
  }
  .mobile-cta-floating:hover { background: var(--primary-600); color: #fff; text-decoration: none; }
}

/* ── Very narrow phones (<420px): tighter padding ──────────────────────── */
@media (max-width: 419px) {
  .page-3col { padding: var(--sp-3) var(--sp-3) var(--sp-7); }
  .brand-name { font-size: var(--fs-sm); }
}

/* ── Mid-width tablets (1024–1279px): collapse 5vw gutters slightly ────── */
@media (min-width: 1024px) and (max-width: 1279px) {
  .page-3col { grid-template-columns: 3vw 22vw 46vw 26vw 3vw; }
}

/* ── Ultra-wide (≥1600px): cap content width via inner max-width ───────── */
@media (min-width: 1600px) {
  .page-3col {
    max-width: 1600px;
    margin: 0 auto;
    grid-template-columns:
      minmax(40px, 1fr)
      minmax(220px, 320px)
      minmax(560px, 720px)
      minmax(300px, 400px)
      minmax(40px, 1fr);
  }
}

/* ── Footer ────────────────────────────────────────────────────────────── */
.ftr { background: var(--ink-900); color: var(--ink-300); padding: var(--sp-7) 0 var(--sp-6); margin-top: var(--sp-9); }
.ftr a { color: var(--ink-300); }
.ftr a:hover { color: #fff; text-decoration: none; }
.ftr-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-6); max-width: 1280px; margin: 0 auto; padding: 0 var(--sp-6); }
.ftr-h { color: #fff; font-size: var(--fs-sm); font-weight: 700; margin-bottom: 12px; text-transform: uppercase; letter-spacing: .08em; }
.ftr-p { font-size: var(--fs-sm); color: var(--ink-400); line-height: var(--lh-loose); }
.ftr-list { display: flex; flex-direction: column; gap: 8px; }
.ftr-list li a { font-size: var(--fs-sm); }
.ftr-bottom { max-width: 1280px; margin: var(--sp-6) auto 0; padding: var(--sp-5) var(--sp-6) 0; border-top: 1px solid rgba(255,255,255,.08); font-size: var(--fs-xs); color: var(--ink-500); }

@media (max-width: 768px) { .ftr-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .ftr-grid { grid-template-columns: 1fr; } }