/* ============================================================================
   mobile.css  ·  EcoMutuelle v3
   Mobile-only refinements layered AFTER layout-3col.css / page-content.css.
   Scope: @media (max-width: 1023px). Targets phones (≤768px) and tablets-portrait.
   - Tightens spacing, enlarges tap targets to ≥44×44 px.
   - Forces ≥16 px font-size on form inputs (iOS anti-zoom).
   - Refines hero photo aspect ratio (4/3 on mobile vs 3/2 on desktop).
   - Stacks card grids to 1-column.
   - Bottom-padded footer to keep the floating CTA from masking content.
   - Replaces the desktop sticky TOC behaviour with a slim accordion that
     auto-hides while the user reads (driven by mobile-enhancements.js).
   - Floating CTA gets a `is-hidden` state used by JS scroll logic.
   ========================================================================== */

@media (max-width: 1023px) {

  /* ── Header — fixed 56 px, brand-only, hamburger placeholder ─────────── */
  .hdr {
    height: var(--header-h-mobile);
    box-shadow: 0 1px 0 rgba(15, 23, 42, .04);
  }
  .hdr.is-scrolled { box-shadow: 0 4px 14px rgba(15, 23, 42, .08); }
  .hdr-inner {
    grid-template-columns: auto 1fr auto;
    padding: 0 var(--sp-4);
    gap: var(--sp-3);
  }
  .hdr-brand { gap: 8px; }
  .brand-mark { width: 26px; height: 26px; border-radius: 7px; }
  .brand-name { font-size: var(--fs-sm); }
  .hdr-nav, .hdr-trust { display: none; }
  .hdr-cta {
    padding: 9px 14px;
    font-size: var(--fs-xs);
    min-height: 36px;
  }

  /* ── Main 3-col → single column ──────────────────────────────────────── */
  .page-3col {
    display: block;
    padding: var(--sp-4) var(--sp-4) calc(var(--sp-8) + 72px);
    /* 72 px bottom pad reserves space for the floating CTA */
  }

  /* ── TOC accordion (sticky under header) ─────────────────────────────── */
  .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);
    transition: transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease);
  }
  .page-3col .page-toc.is-auto-hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
  }
  .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: 10px 0;            /* taller for tap target */
    min-height: 44px;
    cursor: pointer;
  }
  .page-toc .page-toc-list { display: none; padding-top: 10px; }
  .page-toc.is-open .page-toc-list { display: block; }
  .page-toc-items li a {
    padding: 12px 10px;          /* ≥44 px tap target */
    min-height: 44px;
    align-items: center;
  }
  .page-toc-progress { margin: 6px 0; }

  /* ── Article content — full width, comfortable reading rhythm ────────── */
  .page-3col .page-content { padding: 0; min-width: 0; }
  .page-body { gap: var(--sp-6); }
  .page-section { scroll-margin-top: 96px; }
  .page-section h2 { font-size: clamp(1.4rem, 5vw, 1.75rem); margin-bottom: var(--sp-3); }
  .page-section h3 { font-size: var(--fs-md); margin-top: var(--sp-4); }
  .page-section p {
    font-size: var(--fs-base);
    line-height: 1.65;
    -webkit-hyphens: auto; hyphens: auto;
  }
  .page-section ul, .page-section ol { padding-left: 20px; }
  .page-section .callout { padding: 14px 14px; grid-template-columns: 24px 1fr; gap: 10px; }
  .page-section .table-data { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Hero (article + home) */
  .page-hero { margin-bottom: var(--sp-6); padding-bottom: var(--sp-5); }
  .page-hero h1, .hero h1 { font-size: clamp(1.85rem, 6.5vw, 2.4rem); }
  .page-hero .lede, .hero .lede { font-size: var(--fs-base); }
  .hero { padding: var(--sp-5) 0 var(--sp-5); margin-bottom: var(--sp-6); }
  .hero-cta-row { flex-direction: column; gap: var(--sp-2); }
  .hero-cta-row .btn { width: 100%; min-height: 48px; }
  .hero-trust { flex-direction: column; gap: var(--sp-2); }

  /* Card grids stack 1-col (home & related) */
  .cards-3 { grid-template-columns: 1fr; gap: var(--sp-3); }
  .related-grid { grid-template-columns: 1fr; }

  /* Hero photo / illustration aspect ratio = 4/3 on mobile */
  .hero-photo, .page-hero-photo, .page-section img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--r-3);
  }
  .page-section img { aspect-ratio: auto; }   /* inline images keep their ratio */

  /* ── Form — sits in normal flow, larger touch targets ────────────────── */
  .page-3col .page-form {
    margin-top: var(--sp-7);
    padding: 0;
    position: static;
    max-height: none;
    overflow: visible;
  }
  .multi-form { padding: var(--sp-5) var(--sp-4); border-radius: var(--r-3); }
  .form-title { font-size: var(--fs-lg); }

  /* Inputs: 16 px+ font (iOS anti-zoom) and 44 px+ height */
  .input, select.input, textarea.input {
    font-size: 16px;
    min-height: 48px;
    padding: 12px 14px;
    border-radius: var(--r-2);
  }
  textarea.input { min-height: 96px; }
  .radio-pill { min-height: 40px; padding: 10px 14px; }
  .radio-card { min-height: 64px; padding: 14px; }
  .radio-card-grid { grid-template-columns: 1fr; gap: 10px; }
  .slider { height: 8px; }
  .slider::-webkit-slider-thumb { width: 26px; height: 26px; }
  .slider::-moz-range-thumb { width: 26px; height: 26px; }
  .form-foot .btn {
    min-height: 48px;
    min-width: 96px;
    padding: 12px 22px;
    font-size: var(--fs-sm);
  }
  .consent-row input[type="checkbox"] { width: 20px; height: 20px; }

  /* ── End-of-article CTA — full width button ──────────────────────────── */
  .cta-end { padding: var(--sp-5) var(--sp-4); }
  .cta-end .btn { width: 100%; min-height: 48px; }

  /* ── Footer — extra bottom padding so floating CTA can't mask links ──── */
  .ftr {
    padding: var(--sp-6) 0 calc(var(--sp-6) + 80px);
    margin-top: var(--sp-7);
  }
  .ftr-grid { padding: 0 var(--sp-4); gap: var(--sp-5); }
  .ftr-bottom { padding: var(--sp-4) var(--sp-4) 0; }

  /* ── Buttons — global tap target floor ───────────────────────────────── */
  .btn { min-height: 40px; }
  .btn-sm { min-height: 36px; }
  .btn-lg { min-height: 48px; }

  /* ── Focus visibility (AA) ───────────────────────────────────────────── */
  a:focus-visible,
  button:focus-visible,
  .btn:focus-visible,
  .input:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
    border-radius: var(--r-2);
  }

  /* ── Floating CTA — visible by default, JS toggles is-hidden ─────────── */
  .mobile-cta-floating {
    position: fixed; left: 50%; bottom: 16px; transform: translate(-50%, 0);
    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 10px 28px rgba(124, 58, 237, .35), 0 2px 6px rgba(15, 23, 42, .08);
    transition: transform var(--dur-base) var(--ease),
                opacity var(--dur-base) var(--ease);
    min-height: 48px; min-width: 200px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    text-decoration: none;
  }
  .mobile-cta-floating::before {
    content: "→";
    font-size: var(--fs-md);
    display: inline-block; transform: rotate(-45deg);
  }
  .mobile-cta-floating.is-hidden {
    transform: translate(-50%, 140%);
    opacity: 0;
    pointer-events: none;
  }
  .mobile-cta-floating:hover,
  .mobile-cta-floating:active {
    background: var(--primary-600); color: #fff; text-decoration: none;
  }

  /* ── Breadcrumb — single-line scroll on very long trails ─────────────── */
  .breadcrumb {
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .breadcrumb::-webkit-scrollbar { display: none; }
}

/* ── Phones ≤480 px — squeeze padding, larger headings stay ─────────────── */
@media (max-width: 480px) {
  .page-3col { padding-left: 14px; padding-right: 14px; }
  .ftr-grid { grid-template-columns: 1fr; }
  .multi-form { padding: var(--sp-4) var(--sp-4); }
  .mobile-cta-floating { left: 12px; right: 12px; transform: none; width: auto; min-width: 0; }
  .mobile-cta-floating.is-hidden { transform: translateY(140%); }
}

/* ── Very small phones ≤360 px — last-resort tightening ─────────────────── */
@media (max-width: 360px) {
  .page-hero h1, .hero h1 { font-size: 1.65rem; line-height: 1.2; }
  .brand-name { font-size: var(--fs-xs); }
  .hdr-cta { padding: 8px 12px; }
}

/* ── Tablet portrait 768–1023 — keep single column but breathe more ─────── */
@media (min-width: 768px) and (max-width: 1023px) {
  .page-3col { padding: var(--sp-5) var(--sp-6) calc(var(--sp-8) + 80px); }
  .page-content { max-width: 720px; margin: 0 auto; }
  .page-form { max-width: 720px; margin-left: auto; margin-right: auto; }
  .page-toc { max-width: 720px; margin-left: auto; margin-right: auto; }
  .cards-3 { grid-template-columns: repeat(2, 1fr); }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
  .ftr-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-cta-row { flex-direction: row; }
  .hero-cta-row .btn { width: auto; }
}

/* ── Reduced motion — disable CTA/TOC transitions ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .mobile-cta-floating,
  .page-toc { transition: none !important; }
}