/* ===========================================================
   mobile.css — Comprehensive responsive fixes for Apollo + Perseus
   Loaded LAST so it overrides earlier rules
   =========================================================== */

/* Prevent horizontal overflow site-wide */
html, body { overflow-x: hidden; max-width: 100vw; }
img, video, canvas, iframe { max-width: 100%; height: auto; }

/* CRITICAL FIX: .reveal AND .split-word-inner stay invisible if IntersectionObserver
   fails (mobile Safari bug, JS errors, slow loads).
   Force them visible on mobile + as a global fallback after page load. */
@media (max-width: 880px) {
  .reveal,
  .split-word-inner { opacity: 1 !important; transform: none !important; }
}
/* Desktop fallback: any .reveal/.split-word-inner NOT marked as .in after 1.5s
   gets shown via JS (see fallback.js). CSS belt-and-braces: if JS fails too,
   show after 2s. */
.reveal:not(.in),
.split-word-inner:not(.in) {
  animation: revealFallback 0s 2s forwards;
}
@keyframes revealFallback {
  to { opacity: 1; transform: none; }
}

/* Apollo nav: "← Perseus" back link — visible only on mobile */
.nav-back-perseus {
  display: none;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
  text-decoration: none;
  padding: 8px 12px;
  border: 1px solid var(--line-strong, rgba(255,255,255,0.16));
  border-radius: 999px;
  white-space: nowrap;
  transition: color .2s, border-color .2s;
}
.nav-back-perseus:hover { color: var(--ink); border-color: var(--ink-dim); }

/* ====================================================
   TABLET — 880px and below
   ==================================================== */
@media (max-width: 880px) {
  /* Apollo: hide horizontal nav + secondary "Site Perseus" desktop link */
  body.apollo .nav-links,
  body.apollo .brand-by,
  body.apollo .nav-perseus-link { display: none; }
  /* Show the compact back-to-Perseus pill instead */
  body.apollo .nav-back-perseus { display: inline-flex; align-items: center; }
  body.apollo .nav-inner { gap: 12px; }

  /* Apollo section spacing tighter only */
  body.apollo .section { padding: clamp(60px, 9vw, 100px) 0; }
}

/* ====================================================
   MOBILE LARGE — 640px and below (iPhone XR/Plus etc.)
   ==================================================== */
@media (max-width: 640px) {
  body.apollo .ap-ctas { flex-direction: column; align-items: stretch; }
  body.apollo .ap-ctas .btn { justify-content: center; width: 100%; }
}

/* ====================================================
   MOBILE — 560px and below (iPhone 14/15 etc.)
   ==================================================== */
@media (max-width: 560px) {

  /* ---------- NAV (Apollo only — Perseus has its own theme defaults) ---------- */
  body.apollo .nav-inner { min-height: 60px !important; gap: 10px !important; padding: 8px 0 !important; }
  body.apollo .nav-actions { gap: 8px; }
  body.apollo .nav-actions .btn,
  body.apollo .nav-cta { padding: 9px 14px !important; font-size: 13px !important; }
  body.apollo .nav-cta span:first-child { display: none; }
  body.apollo .nav-cta::before { content: "Démo"; }

  /* Apollo logo: smaller to fit nav */
  body.apollo .brand-logo-apollo { height: 64px !important; margin: -16px -10px !important; }
  body.apollo .footer .brand-logo-apollo { height: 64px !important; margin: -16px -10px !important; }

  /* ---------- APOLLO HERO ---------- */
  body.apollo .ap-hero { padding-top: 32px; padding-bottom: 48px; }
  body.apollo .ap-h1 { font-size: clamp(38px, 11vw, 56px) !important; line-height: 1; }
  body.apollo .ap-lede { font-size: 15.5px; line-height: 1.55; }
  body.apollo .ap-hero-inner { gap: 22px; }
  body.apollo .ap-hero-stats {
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
    padding-top: 18px;
  }
  body.apollo .ap-hero-stats strong { font-size: 22px; }

  /* Hero mock — chat preview */
  body.apollo .ap-hero-mock { border-radius: 14px; }
  body.apollo .ap-mock-head { padding: 12px 14px; }
  body.apollo .ap-mock-title { font-size: 10px; margin-left: 8px; }
  body.apollo .ap-mock-body { padding: 16px; gap: 12px; }
  body.apollo .ap-mock-msg {
    padding: 10px 14px;
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 4px;
  }
  body.apollo .ap-mock-msg .ap-mock-time { display: inline; }
  body.apollo .ap-mock-msg .ap-mock-text {
    grid-column: 1;
    font-size: 14px;
    line-height: 1.5;
  }
  body.apollo .ap-mock-strip {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 6px;
    padding-top: 12px;
  }
  body.apollo .ap-mock-strip strong { font-size: 18px; }
  body.apollo .ap-mock-strip span { font-size: 8.5px; }

  /* ---------- APOLLO PROBLEM ---------- */
  body.apollo .ap-problem-card { padding: 24px 20px; gap: 14px; }
  body.apollo .ap-problem-card h3 { font-size: 24px; }
  body.apollo .ap-problem-stat strong { font-size: 26px; }
  body.apollo .ap-problem-stat { padding-top: 14px; }

  /* ---------- APOLLO MODULES ---------- */
  body.apollo .ap-module { padding: 26px 20px; gap: 12px; }
  body.apollo .ap-module h3 { font-size: 28px; }
  body.apollo .ap-module-promise { font-size: 15px; }
  body.apollo .ap-module-bullets li { font-size: 13.5px; }
  body.apollo .ap-solution-summary { padding: 24px 22px; margin-top: 32px; }
  body.apollo .ap-solution-summary p { font-size: 18px; line-height: 1.45; }

  /* ---------- APOLLO USE CASES ---------- */
  body.apollo .ap-uc-card { padding: 24px 20px; gap: 12px; }
  body.apollo .ap-uc-card h3 { font-size: 22px; }
  body.apollo .ap-uc-card p { font-size: 14px; }

  /* ---------- APOLLO PROCESS ---------- */
  body.apollo .ap-steps li { padding: 22px 0; gap: 12px !important; }
  body.apollo .ap-step-time { font-size: 10px; letter-spacing: 0.1em; }
  body.apollo .ap-step-body h3 { font-size: 22px; }
  body.apollo .ap-step-body p { font-size: 14.5px; }

  /* ---------- APOLLO PROOF ---------- */
  body.apollo .ap-proof-grid { grid-template-columns: 1fr 1fr !important; }
  body.apollo .ap-proof-stat { padding: 20px 14px; }
  body.apollo .ap-proof-val { font-size: clamp(36px, 12vw, 52px) !important; }
  body.apollo .ap-proof-lbl { font-size: 11px; }
  body.apollo .ap-quote { padding: 28px 22px; margin-top: 32px; }
  body.apollo .ap-quote-text { font-size: 19px; line-height: 1.5; }

  /* ---------- APOLLO TEAM ---------- */
  body.apollo .ap-team-grid { margin-top: 32px; }
  body.apollo .ap-team-photo { aspect-ratio: 1 / 1; }
  body.apollo .ap-team-photo-overlay { padding: 14px 18px; }
  body.apollo .ap-team-photo-num { font-size: 10px; }
  body.apollo .ap-team-photo-role { font-size: 9.5px; padding: 4px 8px; }
  body.apollo .ap-team-body { padding: 24px 22px 28px; gap: 14px; }
  body.apollo .ap-team-name { font-size: 30px; }
  body.apollo .ap-team-mission { font-size: 16px; line-height: 1.4; }
  body.apollo .ap-team-skills li { font-size: 13.5px; }

  /* ---------- APOLLO WORKFLOW ---------- */
  body.apollo .ap-flow-stage { padding: 16px !important; gap: 18px !important; }
  body.apollo .ap-flow-rail { gap: 6px !important; }
  body.apollo .ap-flow-node {
    padding: 10px 12px !important;
    min-width: 110px !important;
  }
  body.apollo .ap-flow-num { font-size: 9.5px; }
  body.apollo .ap-flow-name { font-size: 13px; }
  body.apollo .ap-flow-panel-head h3 { font-size: 20px; }
  body.apollo .ap-flow-panel p { font-size: 14.5px; line-height: 1.55; }
  body.apollo .ap-flow-bullets li { font-size: 13.5px; }
  body.apollo .ap-flow-foot { padding: 18px; gap: 16px; }
  body.apollo .ap-flow-foot-text strong { font-size: 18px; }
  body.apollo .ap-flow-foot-text span { font-size: 13px; }

  /* ---------- APOLLO FAQ ---------- */
  body.apollo .ap-faq-item { padding: 20px 0; }
  body.apollo .ap-faq-item summary {
    font-size: 17px !important;
    gap: 14px;
    line-height: 1.3;
  }
  body.apollo .ap-faq-item p { font-size: 14px; line-height: 1.6; }

  /* ---------- APOLLO FINAL CTA ---------- */
  body.apollo .ap-final-card { padding: 36px 24px !important; }
  body.apollo .ap-final-title { font-size: clamp(34px, 10vw, 56px) !important; line-height: 1.05; }
  body.apollo .ap-final-lede { font-size: 15px; }
  body.apollo .ap-final-foot { gap: 14px; font-size: 10px; }

  /* ---------- APOLLO sections (scoped — Perseus untouched) ---------- */
  body.apollo .section { padding: 48px 0; }
  body.apollo .section-head { gap: 12px !important; margin-bottom: 28px; }
  body.apollo h2.h-section {
    font-size: clamp(30px, 8vw, 44px) !important;
    line-height: 1.05 !important;
  }
  body.apollo .lede { font-size: 15px; line-height: 1.55; }
  body.apollo .eyebrow { font-size: 10px; }

  /* ---------- FOOTER — Apollo only (Perseus footer is dynamic, leave it) ---------- */
  body.apollo .footer { padding-top: 48px; padding-bottom: 32px; }
  body.apollo .footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  body.apollo .footer-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    text-align: left !important;
  }
  body.apollo .footer-contact-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  body.apollo .footer-contact-sep { display: none; }

  /* ---------- LEGAL PAGES ---------- */
  .legal { padding-top: 80px; }
  .legal-h1 { font-size: clamp(34px, 10vw, 48px) !important; }
  .legal h2 { font-size: 21px; margin-top: 32px; }
  .legal h3 { font-size: 15px; margin-top: 24px; }
  .legal p, .legal ul { font-size: 14.5px; line-height: 1.65; }
  .legal-lede { font-size: 16px; padding-left: 14px; }
  .legal-todo { font-size: 12px; }

  /* ---------- COOKIE BANNER — compact on mobile ---------- */
  #perseus-consent { inset: auto 8px 8px 8px; }
  #perseus-consent .pc-card { padding: 10px 12px; gap: 8px; border-radius: 12px; }
  #perseus-consent .pc-text strong { display: none; }
  #perseus-consent .pc-text p {
    font-size: 11.5px; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #perseus-consent .pc-text p a { color: var(--accent); }
  #perseus-consent .pc-actions { gap: 6px; }
  #perseus-consent .pc-btn { padding: 8px 10px; font-size: 11.5px; }

  /* ---------- PERSEUS HOME — minimal nav polish only ---------- */
  body:not(.apollo) .nav-inner { gap: 12px !important; padding: 10px 0 !important; }
  body:not(.apollo) .brand-logo { height: 26px !important; }
  body:not(.apollo) .lang-toggle button { padding: 6px 10px !important; font-size: 11px !important; }
  body:not(.apollo) .nav-actions .btn-primary {
    padding: 9px 14px !important;
    font-size: 12px !important;
    white-space: nowrap;
    flex-shrink: 0;
  }
  body:not(.apollo) .nav-actions .btn-primary .arrow { display: none; }

  /* Hero stats: clean 1-col stack with generous spacing instead of broken 2+1 */
  body:not(.apollo) .hero-meta {
    grid-template-columns: 1fr 1fr !important;
    gap: 18px 24px !important;
    margin-top: 8px;
  }
  body:not(.apollo) .hero-meta > div { display: flex; flex-direction: column; gap: 4px; }
  body:not(.apollo) .hero-meta strong { font-size: 28px !important; line-height: 1; }
  body:not(.apollo) .hero-meta span { font-size: 10px; letter-spacing: 0.1em; }
}

/* ====================================================
   MOBILE EXTRA-SMALL — 380px and below (iPhone SE, mini)
   ==================================================== */
@media (max-width: 380px) {
  body.apollo .ap-h1 { font-size: clamp(34px, 11vw, 44px) !important; }
  body.apollo .ap-team-name { font-size: 28px; }
  body.apollo .ap-module h3 { font-size: 26px; }
  body.apollo .ap-final-title { font-size: clamp(30px, 9vw, 44px) !important; }
  body.apollo .nav-cta::before { content: "→"; }
  body.apollo .nav-cta { padding: 9px 12px !important; }
}

/* ====================================================
   LANDSCAPE phones — height < 500px (Apollo only)
   ==================================================== */
@media (max-height: 500px) and (orientation: landscape) {
  body.apollo .ap-hero { padding-top: 60px; padding-bottom: 32px; }
}

/* ====================================================
   Tap targets — accessibility (WCAG 2.5.5)
   Minimum 44x44 CSS pixels for touch
   ==================================================== */
@media (max-width: 768px) {
  .btn, .nav-cta, .ap-flow-node, button, .pc-btn {
    min-height: 44px;
  }
  .ap-faq-item summary { min-height: 44px; padding: 4px 0; }
  details summary { -webkit-tap-highlight-color: rgba(124, 58, 237, 0.15); }
}

/* ============================================================
   APOLLO LIVE SHOWCASE (replaces "Projet Gym 2026" section)
   Loaded site-wide — works on Perseus desktop + mobile
   ============================================================ */

/* Live badge — emerald green pulse instead of construction orange */
.gym-badge-live {
  background: oklch(0.78 0.18 145 / 0.12) !important;
  border-color: oklch(0.78 0.18 145 / 0.30) !important;
  color: oklch(0.78 0.18 145) !important;
}
.gym-badge-live .pulse {
  background: oklch(0.78 0.18 145) !important;
  box-shadow: 0 0 12px oklch(0.78 0.18 145 / 0.7) !important;
}

/* Feature rows replacing the Build progress bar */
.apollo-feature {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  align-items: start;
  padding: 18px 0;
  border-bottom: 1px solid var(--line, rgba(255,255,255,0.10));
}
.apollo-feature:last-child { border-bottom: none; }
.apollo-feature-num {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--accent, #7c3aed);
  padding-top: 4px;
}
.apollo-feature strong {
  display: block;
  font-family: var(--font-sans, sans-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink, #f3efe7);
  margin-bottom: 4px;
}
.apollo-feature span {
  font-size: 14px;
  color: var(--ink-dim, #b8b4ac);
  line-height: 1.45;
}

.apollo-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}
.apollo-cta-row .btn { flex: 1; min-width: 180px; justify-content: center; }

@media (max-width: 560px) {
  .apollo-feature { padding: 14px 0; gap: 12px; }
  .apollo-feature strong { font-size: 15px; }
  .apollo-feature span { font-size: 13px; }
  .apollo-cta-row { flex-direction: column; }
  .apollo-cta-row .btn { width: 100%; }
}

/* ============================================================
   BURGER MENU — mobile only (≤880px)
   Slide-in drawer from right with all nav links + cross-link
   ============================================================ */
.burger { display: none; }
.burger-drawer { display: none; }

@media (max-width: 880px) {
  .burger {
    display: inline-flex;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1px solid var(--line-strong, rgba(255,255,255,0.16));
    border-radius: 12px;
    cursor: pointer;
    padding: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-shrink: 0;
    transition: border-color .2s, background .2s;
  }
  .burger:hover { border-color: var(--ink-dim, #b8b4ac); background: rgba(255,255,255,0.04); }
  .burger span {
    display: block;
    width: 18px;
    height: 1.5px;
    background: var(--ink, #f3efe7);
    border-radius: 1px;
    transition: transform 0.3s cubic-bezier(.2,.8,.2,1), opacity 0.2s;
  }
  .burger.is-open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .burger.is-open span:nth-child(2) { opacity: 0; }
  .burger.is-open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

  /* Drawer */
  .burger-drawer {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    visibility: hidden;
  }
  .burger-drawer.is-open { pointer-events: auto; visibility: visible; }
  .burger-drawer-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(.2,.8,.2,1);
  }
  .burger-drawer.is-open .burger-drawer-overlay { opacity: 1; }
  .burger-drawer-panel {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: min(86vw, 380px);
    background: var(--bg-raised, #131221);
    border-left: 1px solid var(--line-strong, rgba(255,255,255,0.16));
    padding: 24px 28px;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(.2,.8,.2,1);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .burger-drawer.is-open .burger-drawer-panel { transform: translateX(0); }

  .burger-drawer-close {
    align-self: flex-end;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1px solid var(--line, rgba(255,255,255,0.10));
    border-radius: 10px;
    color: var(--ink, #f3efe7);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s, border-color .2s;
  }
  .burger-drawer-close:hover { background: rgba(255,255,255,0.05); border-color: var(--ink-dim); }

  .burger-drawer-links {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 8px;
  }
  .burger-drawer-links a {
    color: var(--ink, #f3efe7);
    text-decoration: none;
    font-family: var(--font-serif, serif);
    font-size: 28px;
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.2;
    padding: 16px 0;
    border-bottom: 1px solid var(--line, rgba(255,255,255,0.10));
    transition: color .2s, padding-left .2s;
    position: relative;
  }
  .burger-drawer-links a:hover { color: var(--accent, #7c3aed); padding-left: 6px; }
  .burger-drawer-links a:last-child { border-bottom: none; }

  /* Live badge inline with menu link */
  .burger-badge {
    display: inline-block;
    margin-left: 10px;
    padding: 3px 8px;
    background: oklch(0.78 0.18 145 / 0.18);
    border: 1px solid oklch(0.78 0.18 145 / 0.4);
    color: oklch(0.78 0.18 145);
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 4px;
    vertical-align: middle;
    line-height: 1.4;
  }

  /* CTA-style menu item (last button, e.g. Booker démo / Contact) */
  .burger-drawer-cta {
    margin-top: 16px;
    background: var(--ink, #f3efe7) !important;
    color: var(--bg, #0d0c16) !important;
    font-family: var(--font-sans, sans-serif) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-align: center;
    padding: 16px 24px !important;
    border-radius: 999px !important;
    border-bottom: none !important;
    transition: background .2s, transform .2s !important;
  }
  .burger-drawer-cta:hover {
    background: #fff !important;
    color: var(--bg, #0d0c16) !important;
    padding-left: 24px !important;
    transform: translateY(-1px);
  }

  /* Hide redundant elements when burger is present */
  body.apollo .nav-back-perseus { display: none !important; }
}

/* ============================================================
   PROCESS CAROUSEL — mobile (≤880px) animation/sizing fixes
   ============================================================ */
@media (max-width: 880px) {
  /* Prevent visual from being squashed below text */
  body:not(.apollo) .process-slide-visual {
    aspect-ratio: 16 / 10;
    width: 100%;
    max-width: 100%;
    margin-top: 8px;
  }
  body:not(.apollo) .pv-svg {
    width: 100%;
    height: auto;
    max-height: 200px;
  }
  body:not(.apollo) .method-carousel { min-height: auto; }
  body:not(.apollo) .mcar-stage { min-height: auto; }
  body:not(.apollo) .mcar-panel { padding-bottom: 12px; }

  /* Title smaller on mobile */
  body:not(.apollo) .mcar-title { font-size: clamp(36px, 9vw, 56px) !important; line-height: 1; }
  body:not(.apollo) .mcar-text { font-size: 14.5px; }
  body:not(.apollo) .mcar-meta { gap: 10px; margin-bottom: 16px; }

  /* Dots: bigger tap target */
  body:not(.apollo) .mcar-dot { width: 10px; height: 10px; }
  body:not(.apollo) .mcar-dot.is-active { width: 30px; }
  body:not(.apollo) .mcar-prev,
  body:not(.apollo) .mcar-next { width: 44px; height: 44px; }
  body:not(.apollo) .mcar-nav { padding: 0 24px 24px; gap: 14px; }

  /* PV list: stack 2 cols on mobile so labels readable */
  body:not(.apollo) .pv-list { grid-template-columns: 1fr 1fr; gap: 6px 14px; padding-top: 12px; }
  body:not(.apollo) .pv-list li { font-size: 9.5px; }
}

@media (max-width: 560px) {
  body:not(.apollo) .mcar-left { padding: 28px 22px 14px; }
  body:not(.apollo) .mcar-right { padding: 0 22px 24px; }
  body:not(.apollo) .mcar-ghost { font-size: clamp(140px, 40vw, 200px); bottom: -0.06em; right: -0.04em; }
  body:not(.apollo) .pv-list { grid-template-columns: 1fr; }
}

/* ============================================================
   APOLLO LIVE — gym-visual fix (overflow hides CTAs on mobile)
   ============================================================ */
@media (max-width: 880px) {
  body:not(.apollo) .gym-visual {
    aspect-ratio: auto !important;
    overflow: visible !important;
    height: auto !important;
    padding: 32px 28px !important;
  }
  body:not(.apollo) .gym-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    margin-top: 32px !important;
  }
  body:not(.apollo) .gym-visual-title {
    font-size: clamp(40px, 11vw, 64px) !important;
    margin: 16px 0 !important;
  }
  body:not(.apollo) .gym-status {
    margin: 12px 0 24px !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 14px !important;
  }
}