/* ===========================================================================
   RecR Studio Immo — MOBILE OPTIMIZATION (v2 — comprehensive)
   ----------------------------------------------------------------------------
   Chargé en dernier sur toutes les pages. S'active uniquement sur smartphones
   et n'affecte JAMAIS le rendu desktop.
   =========================================================================== */

/* ============================================================================
   1. NO-ZOOM + BASE FIXES — toutes tailles
   ============================================================================ */
html {
  /* Lock zoom totalement sur iOS + Android */
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Smooth, hardware-accelerated scroll on iOS */
  -webkit-overflow-scrolling: touch;
}
body {
  /* Disable pull-to-refresh + over-scroll bounce */
  overscroll-behavior-y: contain;
  /* Better text rendering on mobile */
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}
/* Désactive le double-tap-to-zoom (Safari iOS) sur les éléments interactifs */
a, button, label, input, select, textarea, [role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* Prevent iOS form-zoom by enforcing min 16 px font-size globally */
@supports (-webkit-touch-callout: none) {
  input, select, textarea { font-size: 16px !important; }
}

/* ============================================================================
   2. MOBILE GENERAL (≤ 768 px) — overlay massif
   ============================================================================ */
@media (max-width: 768px) {

  /* ----- A. Base ----- */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
  body {
    font-size: 15px;
    line-height: 1.55;
  }
  /* Forcer tous les médias à rester dans leur container */
  img, video, iframe, canvas, svg, picture, source {
    max-width: 100% !important;
    height: auto;
  }
  /* Empêcher les containers internes de pousser la page */
  *, *::before, *::after {
    max-width: 100%;
  }

  /* ----- B. Typography ----- */
  h1 { font-size: clamp(32px, 8.5vw, 52px) !important; line-height: 1.05 !important; letter-spacing: -0.02em !important; }
  h2 { font-size: clamp(24px, 6.5vw, 38px) !important; line-height: 1.1 !important; letter-spacing: -0.015em !important; }
  h3 { font-size: clamp(18px, 4.8vw, 24px) !important; line-height: 1.2 !important; }
  h4 { font-size: clamp(15px, 3.8vw, 19px) !important; }
  p, li { font-size: 15px; line-height: 1.55; }
  p.lede, .lede { font-size: 15px !important; line-height: 1.6 !important; }
  .section-num, .meta-mono { font-size: 10.5px !important; letter-spacing: 0.16em !important; }
  /* Empêche les italiques très longs de déborder */
  .ital { word-break: break-word; }

  /* ----- C. Espacements sections ----- */
  section { padding-top: 52px !important; padding-bottom: 52px !important; }
  .container, .container-wide {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .section-head {
    padding-bottom: 26px !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .section-head .left, .section-head .right { gap: 10px !important; max-width: 100% !important; }

  /* ============================================================
     3. HEADER + MOBILE MENU FLUIDE (index)
     ============================================================ */
  .site-header { transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .25s ease; }
  .site-header .row { padding: 12px 18px !important; gap: 10px !important; }
  .brandmark { font-size: 16px !important; }
  .brandmark small { font-size: 9.5px !important; letter-spacing: 0.16em !important; }
  /* Nav-pill desktop : cachée sur mobile */
  .nav-pill { display: none !important; }
  /* Toggle hamburger : agrandi */
  .mobile-toggle {
    display: flex !important;
    width: 44px; height: 44px;
    align-items: center; justify-content: center;
    border: 1px solid rgba(245,239,226,0.35);
    border-radius: 8px;
    background: rgba(15,15,18,0.4);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    color: var(--paper);
    transition: background .25s, border-color .25s;
  }
  body.menu-open { overflow: hidden !important; }
  /* Menu plein écran fluide */
  .nav.open, .nav-pill.open {
    display: flex !important;
    flex-direction: column;
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important; height: 100% !important;
    background: var(--bg-deep) !important;
    z-index: 100 !important;
    padding: 80px 24px 32px !important;
    gap: 0 !important;
    align-items: stretch !important;
    border: 0 !important;
    overflow-y: auto;
    animation: navSlideIn .35s cubic-bezier(.22,1,.36,1);
  }
  @keyframes navSlideIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
  .nav.open a, .nav-pill.open a, .nav.open .nav-tab a {
    padding: 18px 0 !important;
    border-bottom: 1px solid rgba(245,239,226,0.08);
    font-family: var(--font-display) !important;
    font-size: 22px !important;
    letter-spacing: -0.01em !important;
    color: var(--paper) !important;
    text-transform: none;
    text-decoration: none;
    transition: padding-left .2s ease, color .2s ease;
  }
  .nav.open a:active, .nav-pill.open a:active { padding-left: 8px !important; color: var(--accent-2) !important; }

  /* Top-bars autres pages (devis/rdv/etc) */
  .top-bar { padding: 11px 14px !important; gap: 8px !important; grid-template-columns: auto 1fr auto !important; }
  .top-bar .back { padding: 8px 12px !important; font-size: 10px !important; min-height: 38px; }
  .top-bar .brandmark { font-size: 14px !important; }
  .top-bar .center-meta, .top-bar .other-svc, .top-bar .progress { display: none !important; }

  /* ============================================================
     4. HERO (index)
     ============================================================ */
  .hero-stage { min-height: 92vh; padding: 0 !important; }
  .hero-title {
    font-size: clamp(42px, 11vw, 64px) !important;
    bottom: auto !important;
    top: clamp(92px, 18vh, 140px) !important;
    left: 18px !important;
    max-width: 92% !important;
    line-height: 0.92 !important;
  }
  .hero-title .second-line { padding-left: 3vw !important; }
  .hero-title-mark { font-size: 10px !important; margin-bottom: 12px !important; }
  .hero-tagrow {
    top: 18px !important;
    left: 18px !important; right: 18px !important;
    font-size: 9px !important;
    letter-spacing: 0.14em !important;
  }
  .hero-bottom {
    position: relative !important;
    padding: 0 18px 24px !important;
    row-gap: 14px !important; column-gap: 0 !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: "lede" "cta" !important;
  }
  .hero-bottom .lede {
    font-size: 14.5px !important;
    max-width: 100% !important;
    line-height: 1.55 !important;
  }
  .hero-cta { gap: 10px !important; flex-direction: column !important; align-items: stretch !important; }
  .hero-cta .btn { width: 100%; min-height: 50px; justify-content: center; font-size: 12px; }
  .hero-side { display: none !important; }

  /* ============================================================
     5. BOUTONS — touch target + clean uniform
     ============================================================ */
  .btn {
    min-height: 46px;
    padding: 13px 20px;
    font-size: 12px;
    letter-spacing: 0.14em;
    display: inline-flex;
    align-items: center; justify-content: center;
    transition: transform .2s, background .25s, color .25s, border-color .25s;
  }
  /* Pas de transform au tap (évite le "saut" peu naturel) */
  .btn:active { transform: scale(0.98); }

  /* ============================================================
     6. GRILLES MULTI-COL → 1 col
     ============================================================ */
  .who-grid, .stats, .process, .inclus-grid, .pricing, .pg-grid,
  .ps-stack, .philo, .mp-grid, .mp-bullets, .svc-cta .ctas,
  .feats, .legal-section ul.data-grid {
    grid-template-columns: 1fr !important;
  }
  .pg-card { padding: 22px 20px !important; }
  .pg-head h3 { font-size: 24px !important; }
  .site-footer .top { grid-template-columns: 1fr !important; gap: 26px !important; padding-bottom: 32px !important; }
  .site-footer .wordmark { font-size: clamp(40px, 13vw, 60px) !important; }

  /* ============================================================
     7. SERVICES, AVANT/APRÈS, BENTO, VID-ROW
     ============================================================ */
  .svc-row {
    grid-template-columns: 32px 1fr auto !important;
    gap: 10px !important;
    padding: 18px 12px !important;
  }
  .svc-row .t { font-size: 15px !important; }
  .svc-row .d, .svc-row .inc { display: none !important; }
  .ba-frame { aspect-ratio: 4/3 !important; }
  .bento-grid { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
  .b-2x2, .b-1x2, .b-2x1 { grid-column: span 2 !important; grid-row: auto !important; aspect-ratio: 16/10 !important; }
  .b-1x1 { aspect-ratio: 1/1 !important; }
  .vid-card { width: clamp(180px, 60vw, 240px) !important; }
  .vid-row-hint { font-size: 10px !important; }

  /* ============================================================
     8. PORTFOLIO PAGE
     ============================================================ */
  .mason-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .mason-col { gap: 8px !important; }
  .mason-item { border-radius: 6px !important; }
  /* Lightbox plein écran sur mobile */
  .lightbox-slide img { max-width: 96vw !important; max-height: 80vh !important; }
  .lb-btn { width: 38px !important; height: 38px !important; }
  .lb-prev { left: 8px !important; }
  .lb-next { right: 8px !important; }
  .lb-close { top: 18px !important; right: 18px !important; }

  /* ============================================================
     9. VIDEO PAGE
     ============================================================ */
  .vg-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .vg-card { border-radius: 10px !important; }
  .vg-caption { font-size: 9.5px !important; letter-spacing: 0.12em !important; }
  .vg-duration { font-size: 9px !important; padding: 3px 6px !important; }
  .fc-stage { height: clamp(360px, 70vh, 480px) !important; }
  .fc-card {
    width: clamp(190px, 50vw, 240px) !important;
    height: clamp(340px, 65vh, 430px) !important;
    border-radius: 16px !important;
  }
  .fc-btn { width: 38px !important; height: 38px !important; }
  .vp-video { max-height: calc(100vh - 130px) !important; }
  .vp-close { top: 14px !important; right: 14px !important; width: 38px !important; height: 38px !important; }

  /* ============================================================
     10. MATTERPORT
     ============================================================ */
  .mp-grid { gap: 22px !important; }
  .mp-bullet { padding: 14px 14px !important; gap: 10px !important; column-gap: 12px !important; }
  .mp-bullet h3 { font-size: 15px !important; }
  .mp-bullet p { font-size: 13px !important; }
  .mp-viewer { aspect-ratio: 4/3 !important; min-height: 240px !important; }
  .mp-viewer-hint { font-size: 9.5px !important; }
  .mp-ctas { flex-direction: column !important; gap: 10px !important; }
  .mp-ctas .btn { width: 100%; }

  /* ============================================================
     11. AVIS GOOGLE
     ============================================================ */
  .avis-section { padding: 52px 0 !important; }
  .avis-head h2 { font-size: clamp(22px, 6.5vw, 32px) !important; }
  .avis-google-btn { padding: 14px 16px !important; gap: 12px !important; }
  .avis-google-sub { display: none !important; }
  .avis-google-icon { width: 36px !important; height: 36px !important; }
  .avis-google-title { font-size: 14px !important; }

  /* ============================================================
     12. FAQ
     ============================================================ */
  .faq-q {
    grid-template-columns: 36px 1fr 32px !important;
    gap: 10px !important;
    padding: 16px 0 !important;
  }
  .faq-q h3 { font-size: 15.5px !important; line-height: 1.25 !important; }
  .faq-q .n { font-size: 10px !important; }
  .faq-q .toggle { width: 28px !important; height: 28px !important; font-size: 15px !important; }
  .faq-a-inner { padding: 0 0 16px !important; font-size: 13.5px !important; }

  /* ============================================================
     13. FINAL CTA / CONTACT
     ============================================================ */
  .final-cta { padding: 52px 0 !important; }
  .final-cta h2 { font-size: clamp(26px, 7.5vw, 44px) !important; line-height: 1.05 !important; }
  .final-cta .container { grid-template-columns: 1fr !important; gap: 24px !important; }
  .final-cta .ctas-pair { flex-direction: column !important; gap: 10px !important; }
  .final-cta .ctas-pair .btn { width: 100%; }

  /* ============================================================
     14. TARIFS — grille de prix
     ============================================================ */
  .pg-wrap, .pg-grid { gap: 14px !important; }
  .pg-vol-wrap {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 14px !important;
  }
  .pg-vol-tiers { flex-direction: column !important; gap: 6px !important; }
  .pg-vol { justify-content: space-between !important; padding: 12px 14px !important; min-height: 46px; }
  .pg-card { padding: 20px !important; }
  .pg-head h3 { font-size: 22px !important; }
  .pg-opt { padding: 9px 0 !important; }
  .pg-opt-text { font-size: 13px !important; }
  .pg-total-amount { font-size: 30px !important; }
  .pg-launch-body { flex-direction: column !important; gap: 14px !important; padding: 20px !important; align-items: stretch !important; }
  .pg-launch-big { font-size: 34px !important; }
  .pg-launch-meta { flex-wrap: wrap; gap: 6px; }

  /* ============================================================
     15. FORMULAIRES (devis, rdv)
     ============================================================ */
  .d-content, .r-content { grid-template-columns: 1fr !important; gap: 18px !important; }
  .d-summary, .r-summary {
    position: static !important;
    max-height: none !important;
    margin-top: 12px;
  }
  .d-step, .r-step { padding: 20px 16px !important; }
  .d-step legend, .r-step legend { font-size: 14px !important; gap: 10px !important; }
  .chip {
    font-size: 12px !important;
    padding: 9px 14px !important;
    min-height: 40px;
    border-radius: 999px;
  }
  .svc-pick { padding: 14px !important; min-height: 110px; }
  .svc-pick h4 { font-size: 14px !important; }
  .svc-pick p { font-size: 11.5px !important; }
  .svc-meta { font-size: 10px !important; }
  input[type="text"], input[type="email"], input[type="tel"], textarea, select {
    padding: 12px 14px !important;
    border-radius: 10px;
    min-height: 46px;
    font-size: 16px !important; /* anti-zoom iOS */
  }
  textarea { min-height: 100px !important; }
  /* Step indicators plus visibles */
  .step-bar { gap: 4px !important; }
  .step-bar span { padding: 6px 10px !important; font-size: 10px !important; }

  /* ============================================================
     16. PAGES LÉGALES / APPROCHE / SERVICE
     ============================================================ */
  .legal-section { margin: 4vh 0 !important; }
  .legal-section h2 { font-size: clamp(22px, 6.5vw, 32px) !important; }
  .legal-section p { font-size: 14px !important; }
  .approche-section { padding: 40px 0 !important; }
  main.legal-page { padding: 14vh 18px 8vh !important; }
  .legal-hero h1 { font-size: clamp(34px, 9vw, 56px) !important; }
  .legal-hero p.lede { font-size: 14.5px !important; }
  /* Service page hero */
  .svc-hero { padding: 14vh 0 5vh !important; }
  .svc-hero h1 { font-size: clamp(38px, 10vw, 60px) !important; line-height: 1 !important; }
  .svc-hero p.lede { font-size: 14.5px !important; }
  .svc-hero .tags { gap: 6px !important; flex-wrap: wrap; }
  .svc-hero .tags span { font-size: 10px !important; padding: 5px 10px !important; }
  /* Inclus / process / pricing block */
  .inclus-item, .proc-step { padding: 20px 18px !important; }

  /* ============================================================
     17. DÉSACTIVE LES EFFETS LOURDS SUR MOBILE
     ============================================================ */
  /* StoryFlow rotation : trop coûteuse + saccadée sur mobile */
  .story-flow-target {
    transform: none !important;
  }
  /* Hero scrub / scroll-expand : composants déjà retirés mais sécurité */
  .scroll-expand { height: auto !important; min-height: 80vh; }
  .se-media { transform: none !important; }
  /* Backdrop filters lourds sur mobile */
  .top-bar, .site-header, .mobile-toggle {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }
  /* Grain overlay : retire sur mobile (gain perf) */
  html[data-grain="on"] body::after { display: none !important; }
  /* Grid overlay (debug) : off sur mobile */
  html[data-gridoverlay="on"] body::before { display: none !important; }
  /* Marquee : ralentir pour économiser GPU */
  .marquee-track { animation-duration: 60s !important; }

  /* ============================================================
     18. INTERACTIONS TACTILES NATURELLES
     ============================================================ */
  /* Évite la sélection accidentelle au scroll */
  .vid-card, .vg-card, .mason-item, .bento-item, .pg-card, .mp-bullet,
  .svc-row, .avis-google-btn, .fc-card, .btn {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
}

/* ============================================================================
   3. TACTILE (hover:none) — désactive hover qui ne marche pas
   ============================================================================ */
@media (hover: none) and (pointer: coarse) {
  *:hover { transform: none !important; }
  .vid-card:hover, .pg-card:hover, .avis-google-btn:hover, .mp-bullet:hover,
  .svc-row:hover, .mason-item:hover, .vg-card:hover, .bento-item:hover,
  .fc-card:hover, .btn:hover {
    transform: none !important;
    box-shadow: initial;
    filter: none;
  }
  /* Désactive aussi tous les ::hover des navs */
  a:hover, button:hover { color: inherit; background: inherit; }
}

/* ============================================================================
   4. ULTRA-SMALL (< 380 px : iPhone SE 1, etc.)
   ============================================================================ */
@media (max-width: 380px) {
  .container, .container-wide { padding-left: 14px !important; padding-right: 14px !important; }
  h1 { font-size: 28px !important; }
  h2 { font-size: 22px !important; }
  h3 { font-size: 17px !important; }
  .hero-title { font-size: 38px !important; }
  .pg-card { padding: 16px 14px !important; }
  .vg-grid, .mason-grid, .bento-grid { grid-template-columns: 1fr !important; }
  .btn { padding: 12px 16px; font-size: 11px; }
  .svc-row .t { font-size: 14px !important; }
  .pg-total-amount { font-size: 26px !important; }
}

/* ============================================================================
   5. LANDSCAPE MOBILE — height réduite
   ============================================================================ */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 480px) {
  .hero-stage { min-height: 110vh; }
  .hero-title { font-size: clamp(34px, 7vw, 50px) !important; top: 60px !important; }
  .hero-bottom { padding-bottom: 14px !important; }
  section { padding-top: 40px !important; padding-bottom: 40px !important; }
}

/* ============================================================================
   6. SAFE AREAS — iPhone X+, Android avec notch
   ============================================================================ */
@media (max-width: 768px) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  .site-header, .top-bar {
    padding-top: max(11px, env(safe-area-inset-top)) !important;
  }
  .site-footer .bottom { padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  /* Menu plein écran : safe-area top */
  .nav.open, .nav-pill.open {
    padding-top: max(80px, calc(env(safe-area-inset-top) + 70px)) !important;
    padding-bottom: max(32px, env(safe-area-inset-bottom)) !important;
  }
}

/* ============================================================================
   7. REDUCED MOTION — respect du système
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}