/* =====================================================================
   SOLERIA / SOLERIA — Mobile-only refinements (iPhone-first, ≤ 640px)
   Scoped under @media so DESKTOP IS NEVER AFFECTED.
   Loaded after styles.css + agents.css so it can safely override.
   ===================================================================== */

@media (max-width: 640px) {

  /* -------- 0. Base & safety -------- */
  html, body { overflow-x: hidden !important; }
  body { -webkit-text-size-adjust: 100%; }
  * { min-width: 0; }
  img, video, iframe, svg { max-width: 100%; height: auto; }
  .container { padding-left: 20px !important; padding-right: 20px !important; }

  /* Reserve room under the floating navbar */
  body { padding-top: 76px !important; }

  /* -------- 1. Floating navbar (pill) -------- */
  .nav { top: 10px !important; left: 10px !important; right: 10px !important; transform: none !important; }
  .nav-inner { padding: 0 !important; }
  .nav-shell {
    padding: 8px 10px 8px 12px !important;
    border-radius: 999px !important;
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    background: rgba(255,255,255,.78) !important;
    box-shadow: 0 10px 30px rgba(15,23,42,.12), 0 1px 0 rgba(255,255,255,.6) inset !important;
  }
  .nav-links, .nav-dropdown-wrap { display: none !important; }
  .nav-logo, .brand { font-size: 15px !important; }
  .nav .btn, .nav-cta {
    font-size: 12.5px !important;
    padding: 8px 14px !important;
    height: auto !important;
    line-height: 1 !important;
  }

  /* -------- 2. Hero -------- */
  .hero { padding: 28px 0 56px !important; min-height: auto !important; }
  .hero-kicker { font-size: 12px !important; letter-spacing: .04em !important; }
  .hero-title {
    font-size: clamp(34px, 9.2vw, 44px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
    text-wrap: balance;
    word-break: keep-all;
    hyphens: none;
  }
  .hero-sub, .hero-sub-secondary { font-size: 15px !important; line-height: 1.55 !important; }
  .hero-prompt { flex-direction: column !important; gap: 10px !important; padding: 10px !important; border-radius: 22px !important; }
  .hero-prompt-agent, .hero-prompt-trigger, .hero-prompt-cta { width: 100% !important; justify-content: center !important; }
  .hero-cta-divider, .hero-cta-note { display: none !important; }
  .hero-press { gap: 10px !important; }
  .hero-press img { max-height: 22px !important; }

  /* Trustpilot strip above hero title — keep on one line, shrink */
  .hero-trust, .trustpilot, [class*="trust"] {
    font-size: 12px !important;
    padding: 6px 10px !important;
  }

  /* -------- 3. "Pendant. / Ce temps" mega type — contain overflow -------- */
  .constat-section { padding: 48px 0 !important; overflow: hidden; }
  .constat-mega--word {
    font-size: clamp(58px, 18vw, 84px) !important;
    letter-spacing: -0.045em !important;
    line-height: .9 !important;
    text-align: center;
  }
  .constat-mega { width: 100% !important; text-align: center !important; }
  .mega-outline, .mega-fill, .mega-fill > span { white-space: nowrap; }

  /* -------- 4. Section titles -------- */
  .section-title, h2.section-title, .agent-section-title {
    font-size: clamp(28px, 7.6vw, 36px) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.02em !important;
    text-wrap: balance;
  }
  .section-sub, .agent-section-intro, .agent-pitch-line {
    font-size: 15.5px !important;
    line-height: 1.55 !important;
  }
  .eyebrow, .agent-tag, .agent-id { font-size: 12px !important; letter-spacing: .12em !important; }

  /* -------- 5. Agent sections -------- */
  .agent-section { padding: 56px 0 !important; }
  .agent-row { display: flex !important; flex-direction: column !important; gap: 28px !important; }
  .agent-section.reverse .agent-row,
  .agent-section.alt.reverse .agent-row { flex-direction: column !important; }
  .agent-mockup-wrap { order: 2; width: 100% !important; }
  .agent-content { order: 1; width: 100% !important; }
  .agent-quote { font-size: 16px !important; line-height: 1.5 !important; padding-left: 14px !important; }
  .agent-rich-lead, .agent-rich-out { font-size: 15px !important; line-height: 1.6 !important; }
  .agent-features li, .agent-examples-item { font-size: 14.5px !important; }
  .agent-cta-row { display: flex !important; flex-direction: column !important; gap: 10px !important; }
  .agent-cta-row .btn, .agent-cta { width: 100% !important; justify-content: center !important; text-align: center; font-size: 14.5px !important; padding: 14px 18px !important; }

  /* Examples cards (Immobilier / Avocat / etc.) — full width, generous tap targets */
  .agent-examples-item, .ex-item, .example-card {
    display: grid !important;
    grid-template-columns: 92px 1fr !important;
    gap: 12px !important;
    align-items: center !important;
    padding: 14px !important;
  }

  /* ROI / metric pill */
  .agent-roi { padding: 14px !important; border-radius: 18px !important; }
  .agent-roi-title { font-size: 16px !important; line-height: 1.35 !important; }

  /* -------- 6. Pipeline CRM (mk-pipe) → swipe horizontal premium -------- */
  .mockup, .mockup-inner { border-radius: 22px !important; }
  .mockup-inner { padding: 14px !important; }
  .mk-toolbar { gap: 6px !important; }
  .mk-title { font-size: 12px !important; }

  .mk-pipe {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 78% !important;
    grid-template-columns: none !important;
    gap: 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding: 10px !important;
    padding: 4px 4px 14px !important;
    margin: 0 -4px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .mk-pipe::-webkit-scrollbar { display: none; }
  .mk-pipe-col {
    scroll-snap-align: start !important;
    min-width: 0 !important;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px !important;
    padding: 10px !important;
  }
  .mk-pipe-h { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 8px !important; font-size: 12.5px !important; }
  .mk-pipe-h .lbl { font-weight: 700 !important; letter-spacing: .02em; }
  .mk-pipe-h .cnt { font-variant-numeric: tabular-nums; opacity: .85; }
  .mk-pipe-cards { display: flex !important; flex-direction: column !important; gap: 8px !important; }
  .mk-lead { padding: 9px 10px !important; border-radius: 10px !important; background: rgba(255,255,255,.05) !important; }
  .mk-lead .name { font-size: 12.5px !important; font-weight: 600 !important; }
  .mk-lead .meta { font-size: 12px !important; opacity: .75 !important; margin-top: 2px; }
  .mk-pipe-footer { font-size: 12.5px !important; padding-top: 8px !important; text-align: center; }

  /* Subtle "← glisser →" affordance */
  .mockup-inner::after {
    content: "← glisser pour voir le pipeline →";
    display: block;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .55;
    text-align: center;
    margin-top: 6px;
    color: inherit;
  }

  /* -------- 7. Embedded video iframe blocks (recouvrement / facture) -------- */
  .landing-ka-split { flex-direction: column !important; gap: 16px !important; max-width: 100% !important; }
  .landing-ka-video, .landing-ka-screen { width: 100% !important; min-height: 0 !important; }
  .landing-ka-video { min-height: 360px !important; }
  .landing-ka-window {
    min-height: 320px !important;
    height: 60vw !important;
    max-height: 380px !important;
    border-radius: 18px !important;
  }
  .landing-ka-window iframe { min-height: 0 !important; height: 100% !important; }

  /* -------- 8. Audio call mockup (Standard IA demo) -------- */
  .mk-call, .mk-call-inner { padding: 14px !important; }
  .mk-call .mk-row { flex-wrap: wrap; }

  /* -------- 9. Closer IA simulator -------- */
  #agent-07 .closer-calc { padding: 14px !important; border-radius: 18px !important; }
  #agent-07 .closer-sim-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  #agent-07 .closer-sim-input label { font-size: 12.5px !important; }
  #agent-07 .closer-sim-value { font-size: 13.5px !important; }
  #agent-07 .closer-sim-result-big { font-size: 32px !important; }
  #agent-07 .closer-vs { grid-template-columns: 1fr !important; gap: 12px !important; }
  #agent-07 .closer-vs-col { padding: 14px !important; }
  #agent-07 .closer-wake { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* -------- 10. FAQ / final CTA -------- */
  .faq-item { padding: 16px 14px !important; }
  .faq-item h3, .faq-q { font-size: 15.5px !important; }
  .faq-a { font-size: 14.5px !important; line-height: 1.55 !important; }

  .final-cta, .cta-section, #cta { padding: 56px 0 !important; }
  .final-cta h2, #cta h2 { font-size: clamp(28px, 8vw, 38px) !important; line-height: 1.1 !important; }
  .cta-bullets { flex-direction: column !important; gap: 8px !important; align-items: stretch !important; }
  .cta-bullets > * { width: 100% !important; justify-content: center !important; }

  /* -------- 11. Footer -------- */
  footer .container, .footer-inner { flex-direction: column !important; gap: 18px !important; text-align: center !important; }
  .footer-cols { grid-template-columns: 1fr 1fr !important; gap: 18px !important; }

  /* -------- 12. Floating assistant — keep, smaller, safer placement -------- */
  #soleria-launcher {
    bottom: calc(14px + env(safe-area-inset-bottom)) !important;
    right: 12px !important;
    z-index: 2147483000 !important;
  }
  #soleria-fab { width: 56px !important; height: 56px !important; }
  #soleria-launcher .soleria-label {
    font-size: 12px !important;
    padding: 3px 8px !important;
    max-width: 120px !important;
    background: rgba(17,17,17,.78) !important;
  }
  /* Hide assistant on dedicated full-screen video pages */
  body.is-video-page #soleria-launcher,
  html[data-video-page] #soleria-launcher { display: none !important; }

  /* -------- 13. Buttons globally -------- */
  .btn, .btn-lg {
    font-size: 14.5px !important;
    padding: 13px 18px !important;
    border-radius: 999px !important;
    line-height: 1.1 !important;
  }
  .btn-lg { padding: 15px 20px !important; }

  /* -------- 14. Blockquotes -------- */
  blockquote { font-size: 16px !important; line-height: 1.5 !important; }

  /* -------- 15. Anchor offset under sticky navbar -------- */
  section[id], [id^="agent-"] { scroll-margin-top: 80px; }

}

/* Smaller phones extra tightening */
@media (max-width: 380px) {
  .hero-title { font-size: 32px !important; }
  .constat-mega--word { font-size: 54px !important; }
  body { padding-top: 72px !important; }
  #soleria-fab { width: 52px !important; height: 52px !important; }
}