/* ═══════════════════════════════════════════════════
   ODS Courtage — Responsive Mobile (partagé)
   Inclure dans toutes les pages via <link>
   ═══════════════════════════════════════════════════ */

/* ─── BURGER ANIMATION (hamburger ↔ X) ─── */
.nav-burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-burger span {
  display: block;
  width: 24px;
  height: 2.5px;
  background: #140A00;
  border-radius: 2px;
  transition: all .3s ease;
  transform-origin: center;
}
.nav-burger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ─── MOBILE MENU OVERLAY ─── */
.mobile-menu-shared {
  position: fixed;
  inset: 0;
  background: #5A3D20;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  padding: 90px 24px 40px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity .35s ease, visibility .35s ease, transform .35s ease;
}
.mobile-menu-shared.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.mobile-menu-shared a {
  font-family: 'Inter', 'Raleway', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #FBFBF4;
  text-decoration: none;
  transition: color .2s ease, transform .2s ease, opacity .3s ease;
  opacity: 0;
  transform: translateY(8px);
}
.mobile-menu-shared.open a {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger animation */
.mobile-menu-shared.open a:nth-child(2) { transition-delay: .05s; }
.mobile-menu-shared.open a:nth-child(3) { transition-delay: .08s; }
.mobile-menu-shared.open a:nth-child(4) { transition-delay: .11s; }
.mobile-menu-shared.open a:nth-child(5) { transition-delay: .14s; }
.mobile-menu-shared.open a:nth-child(6) { transition-delay: .17s; }
.mobile-menu-shared.open a:nth-child(7) { transition-delay: .2s; }
.mobile-menu-shared.open a:nth-child(8) { transition-delay: .26s; }
.mobile-menu-shared.open a:nth-child(9) { transition-delay: .29s; }
.mobile-menu-shared.open a:nth-child(10) { transition-delay: .32s; }
.mobile-menu-shared.open a:nth-child(11) { transition-delay: .35s; }
.mobile-menu-shared.open a:nth-child(12) { transition-delay: .38s; }
.mobile-menu-shared a:hover { color: #FF7B00; transform: translateX(4px); }
.mobile-menu-shared .mm-separator {
  width: 60px; height: 1px;
  background: rgba(255,123,0,.3);
  margin: 8px 0;
}
.mobile-menu-shared .mm-cta {
  margin-top: 16px;
  padding: 14px 36px;
  background: linear-gradient(90deg, #FF7B00, #FFC300);
  color: #2A1A0A !important;
  border-radius: 100px;
  font-weight: 700;
  font-size: 16px;
}
.mobile-menu-close-shared {
  position: fixed;
  top: 20px; right: 24px;
  background: none; border: none;
  color: #FBFBF4;
  font-size: 28px;
  cursor: pointer;
  z-index: 100000;
  transition: transform .3s ease;
}
.mobile-menu-close-shared:hover { transform: rotate(90deg); }

/* ─── SCROLL — compenser le header fixe ─── */
section[id] { scroll-margin-top: 90px; }

/* ─── FLUIDITÉ GLOBALE ─── */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a, button, input, select, textarea {
  transition: color .3s cubic-bezier(0.4,0,0.2,1),
              background .3s cubic-bezier(0.4,0,0.2,1),
              border-color .3s cubic-bezier(0.4,0,0.2,1),
              transform .3s cubic-bezier(0.4,0,0.2,1),
              box-shadow .3s cubic-bezier(0.4,0,0.2,1),
              opacity .3s cubic-bezier(0.4,0,0.2,1);
}
img {
  transition: transform .4s cubic-bezier(0.4,0,0.2,1), opacity .4s ease;
}
.nav-phone-mobile { display: none !important; }

/* ─── TABLET BREAKPOINT (1100px) ─── */
@media (max-width: 1100px) {
  .nav-links, .nav-ctas, div.nav-cta { display: none !important; }
  .nav-burger { display: flex !important; }
  /* Phone number in nav */
  .nav-phone-mobile {
    display: flex !important;
    align-items: center;
    gap: 6px;
    text-decoration: none !important;
    font-family: 'Inter', 'Raleway', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #2A1A0A !important;
    margin-left: auto;
    margin-right: 8px;
    white-space: nowrap;
  }
  .nav-phone-mobile:hover { opacity: .7; }
  .nav-phone-mobile svg { flex-shrink: 0; }
}

/* ─── TOUCH DEVICES — disable custom cursor + fix scroll ─── */
@media (hover: none), (pointer: coarse) {
  *, body, a, button, input, select, textarea { cursor: auto !important; -webkit-tap-highlight-color: transparent !important; }
  #cursor, #cursor-ring, #cursorRing, .cursor-dot, .cursor-ring,
  .cursor, .cursor-ring { display: none !important; opacity: 0 !important; pointer-events: none !important; width: 0 !important; height: 0 !important; }
  /* Prevent touch scroll blocking */
  body { touch-action: manipulation; -webkit-overflow-scrolling: touch; }
  section, div, main { touch-action: pan-y pan-x; }
}

/* ─── RESPONSIVE 768px ─── */
@media (max-width: 768px) {
  /* Prevent horizontal overflow */
  html, body { overflow-x: hidden !important; max-width: 100vw; }

  /* Disable custom cursor on mobile */
  *, body { cursor: auto !important; }
  #cursor, #cursor-ring, #cursorRing, .cursor-dot, .cursor-ring { display: none !important; }

  /* Smooth touch scrolling */
  html { -webkit-overflow-scrolling: touch; }

  /* Disable reveal animations — instant display on mobile */
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .reveal.visible {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Nav — topbar hidden so nav goes to top */
  nav, .nav { top: 0 !important; padding: 8px 0 !important; }
  .nav-links, .nav-ctas, div.nav-cta { display: none !important; }
  .nav-burger { display: flex !important; }
  .nav-logo img, .logo img { height: 42px !important; }
  .topbar { display: none !important; }
  .nav + *:not(.hero):not(.page-hero):not(.legal-hero):not(#hero) { padding-top: 56px !important; }

  /* Container */
  .container { padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box !important; max-width: 100% !important; }

  /* Hero sections (pages produit) */
  .hero-grid, .hero-content-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .hero-content, .hero-text { max-width: 100% !important; overflow-wrap: break-word; word-wrap: break-word; }
  .hero-sub { max-width: 100% !important; }

  /* General section padding */
  section { overflow-x: hidden; }
  section > .container { overflow-x: hidden; }

  /* Grids → single column */
  .features-grid,
  .advantages-grid,
  .steps-grid,
  .why-grid,
  .solutions-grid,
  .solar-sub-layout,
  .courtier-vs-layout,
  .process-grid,
  .benefits-grid,
  .specs-grid {
    grid-template-columns: 1fr !important;
  }

  /* Tags wrap */
  .hero-tags { flex-wrap: wrap; gap: 8px; }

  /* Breadcrumb */
  .breadcrumb { font-size: 11px; flex-wrap: wrap; gap: 4px; }

  /* iOS zoom fix — inputs must be ≥ 16px */
  input, select, textarea { font-size: 16px !important; }
  label { font-size: 13px !important; }

  /* Footer inline grid override */
  .footer-white { padding: 40px 16px 48px !important; }
  .footer-main-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .footer-form-card { padding: 28px 20px !important; }
  .footer-form-card h2 { font-size: 22px !important; }
  .footer-form-row { grid-template-columns: 1fr !important; gap: 12px !important; }
  .footer-legal { padding: 20px 16px !important; flex-direction: column !important; text-align: center; gap: 8px; }

  /* Contact page layout */
  .contact-layout { grid-template-columns: 1fr !important; gap: 32px !important; }
  footer { overflow: visible !important; }

  /* Savings section */
  .savings-layout { grid-template-columns: 1fr !important; gap: 32px !important; }
  .savings-details { order: 1; }

  /* Gallery */
  .solar-gallery {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 160px 160px !important;
  }
  .sol-img:first-child { grid-row: auto !important; }

  /* Comparison */
  .cv-col { padding: 28px 20px !important; }

  /* Cards */
  .aid-card { flex-direction: column; text-align: center; gap: 12px; }
  .aid-amount { font-size: 18px; }

  /* Section titles */
  .section-h2 { font-size: clamp(22px, 6vw, 36px) !important; }
  .hero-title, .page-title {
    font-size: clamp(28px, 7vw, 48px) !important;
  }

  /* Schemas / comparison table */
  .cmp-schema { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .cmp-cell { padding: 14px 12px !important; }
  .cmp-header-left, .cmp-header-right { padding: 16px 12px 12px !important; }
  .cmp-row-text { font-size: 12px !important; }
  .cmp-col-name { font-size: 14px !important; }
  .cmp-icon-wrap { display: none !important; }

  /* ─── PRODUCT DIAGRAMS — scale entire schema card on mobile ─── */
  .sol-diagram,
  .bat-diagram,
  .pac-diagram,
  .pae-diagram,
  .vmc-diagram,
  .ev-diagram {
    zoom: 0.55;
    -moz-transform: scale(0.55);
    -moz-transform-origin: center top;
  }
  /* Scale down & repad the parent card that contains diagram + title + stats */
  div:has(> .sol-diagram),
  div:has(> .bat-diagram),
  div:has(> .pac-diagram),
  div:has(> .pae-diagram),
  div:has(> .vmc-diagram),
  div:has(> .ev-diagram) {
    padding: 16px 10px 28px !important;
    min-height: auto !important;
    overflow: hidden !important;
    border-radius: 10px !important;
  }
  /* Tight container padding around diagram sections */
  section:has(.sol-diagram) .container,
  section:has(.bat-diagram) .container,
  section:has(.pac-diagram) .container,
  section:has(.pae-diagram) .container,
  section:has(.vmc-diagram) .container,
  section:has(.ev-diagram) .container {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  .sol-subtitle, .bat-subtitle, .pac-subtitle, .pae-subtitle, .vmc-subtitle, .ev-subtitle {
    font-size: 13px !important; margin-bottom: 10px !important; line-height: 1.4 !important;
  }
  .sol-title, .bat-title, .pac-title, .pae-title, .vmc-title, .ev-title {
    font-size: 9px !important; letter-spacing: 2px !important;
  }
  /* Stats rows: 2x2 grid on mobile */
  .sol-stats, .pac-stats-row, .pae-stats-row, .bat-stats-row, .vmc-stats-row, .ev-stats-row {
    display: grid !important; grid-template-columns: auto auto !important;
    gap: 10px 32px !important; justify-content: center !important; justify-items: center !important;
    max-width: 100% !important;
  }
  /* Hide stat dividers on mobile */
  .sol-stats > div[style*="width:1px"],
  .pac-stats-row > div[style*="width:1px"],
  .bat-stats-row > div[style*="width:1px"],
  .vmc-stats-row > div[style*="width:1px"],
  .ev-stats-row > div[style*="width:1px"],
  .pae-stats-row > div[style*="width:1px"] {
    display: none !important;
  }
  .sol-stat-val, .pac-stat-val, .pae-stat-val, .bat-stat-val, .vmc-stat-val, .ev-stat-val {
    font-size: 16px !important;
  }
  .sol-stat-lbl, .pac-stat-lbl, .pae-stat-lbl, .bat-stat-lbl, .vmc-stat-lbl, .ev-stat-lbl {
    font-size: 8px !important;
  }

  /* ─── TIMELINE — reduce left padding on mobile ─── */
  .timeline-track { padding-left: 32px !important; }
  .tl-item { padding-left: 32px !important; }

  /* ─── SECTION INTRO / SAVINGS — reduce gap ─── */
  .section-intro { grid-template-columns: 1fr !important; gap: 32px !important; }
  .savings-layout { grid-template-columns: 1fr !important; gap: 32px !important; }

  /* ─── FAQ — constrain width ─── */
  .faq-list { max-width: 100% !important; }

  /* ─── TESTIMONIALS — responsive ─── */
  .testi-mini-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .testi-card {
    width: calc(85vw - 24px) !important;
    min-width: calc(85vw - 24px) !important;
    padding: 24px 20px !important;
    border-radius: 16px !important;
  }
  .testi-title { font-size: clamp(22px, 6vw, 36px) !important; }
  .testi-mini-title { font-size: clamp(22px, 6vw, 36px) !important; }
  .testi-text { font-size: 13px !important; }
  .testi-global { padding: 10px 16px !important; margin-bottom: 32px !important; flex-wrap: wrap !important; justify-content: center !important; gap: 8px !important; }
  .testi-global-score { font-size: 22px !important; }
  .testi-global-count { font-size: 11px !important; }
  .testi-controls { margin-top: 28px !important; }
  .testi-mini-card { padding: 24px 20px !important; }
}

/* ─── RESPONSIVE 600px — intermediate ─── */
@media (max-width: 600px) {
  /* Section padding reduction */
  section { padding-top: 48px !important; padding-bottom: 48px !important; }
  #hero, .hero, .page-hero, .legal-hero { padding: 80px 0 48px !important; }

  /* Hero titles */
  .hero-title, .page-title, .page-hero h1 { font-size: clamp(24px, 7vw, 38px) !important; }
  .hero-sub, .page-hero p { font-size: 14px !important; }

  /* Product pages — timeline, savings */
  #timeline, .timeline-section { padding: 48px 0 !important; }
  .savings-section, #savings { padding: 48px 0 !important; }

  /* Footer gap */
  .footer-main-grid { gap: 24px !important; }
}

@media (max-width: 480px) {
  .hero-title, .page-title {
    font-size: 26px !important;
  }
  .mobile-menu-shared a { font-size: 16px; }
  .solar-gallery {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }

  /* Section padding — tighter */
  section { padding-top: 40px !important; padding-bottom: 40px !important; }
  #hero, .hero, .page-hero, .legal-hero { padding: 72px 0 40px !important; }

  /* Diagrams — even smaller zoom on tiny screens */
  .sol-diagram, .bat-diagram, .pac-diagram, .pae-diagram, .vmc-diagram, .ev-diagram {
    zoom: 0.45;
    -moz-transform: scale(0.45);
  }

  /* Testimonials */
  .testi-card {
    width: calc(90vw - 16px) !important;
    min-width: calc(90vw - 16px) !important;
    padding: 20px 16px !important;
  }
  .testi-text { font-size: 12px !important; line-height: 1.6 !important; }

  /* Stats grids */
  .stats-dark-grid, .stats-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .stats-dark-item { padding: 24px 16px !important; }

  /* Footer */
  .footer-main-grid { gap: 20px !important; }
  .footer-form-card { padding: 24px 16px !important; }
}

/* ─── RESPONSIVE 375px — iPhone SE / small mobile ─── */
@media (max-width: 375px) {
  .hero-title, .page-title, .page-hero h1 { font-size: 22px !important; }
  .hero-sub, .page-hero p { font-size: 13px !important; }
  .section-h2 { font-size: 20px !important; }

  /* Section padding — minimal */
  section { padding-top: 32px !important; padding-bottom: 32px !important; }
  #hero, .hero, .page-hero, .legal-hero { padding: 64px 0 32px !important; }

  /* Container padding */
  .container { padding-left: 12px !important; padding-right: 12px !important; }

  /* Burger menu text */
  .mobile-menu-shared a { font-size: 15px; }
  .mobile-menu-shared .mm-cta { padding: 12px 28px; font-size: 14px; }

  /* Cards and items */
  .testi-card {
    width: calc(92vw - 12px) !important;
    min-width: calc(92vw - 12px) !important;
    padding: 16px 12px !important;
  }

  /* Buttons */
  .btn, .cta-btn, [class*="btn"] { font-size: 14px !important; padding: 12px 24px !important; }

  /* Footer */
  .footer-white { padding: 32px 12px 40px !important; }
  .footer-form-card h2 { font-size: 18px !important; }
}