/* ══════════════════════════════════════════════
   MOBILE FIXES — Complete rewrite
══════════════════════════════════════════════ */

/* ── MOBILE MENU OVERLAY ─────────────────────── */
.mobile-menu {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: #050505 !important;
  z-index: 99999 !important;
  transform: translateX(-100%) !important;
  transition: transform 0.38s cubic-bezier(0.4,0,0.2,1) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 0 !important;
}
.mobile-menu.open {
  transform: translateX(0) !important;
}

/* ── HEADER ROW: logo + X ────────────────────── */
.mob-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid rgba(76,175,80,0.15) !important;
  background: rgba(5,5,5,0.95) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  flex-shrink: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.mob-logo {
  height: 44px !important;
  width: auto !important;
}
.mobile-close {
  all: unset !important;
  color: rgba(255,255,255,0.5) !important;
  font-size: 1.3rem !important;
  font-weight: 400 !important;
  cursor: pointer !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 50% !important;
  transition: all 0.2s ease !important;
}
.mobile-close:active {
  color: #4CAF50 !important;
  border-color: rgba(76,175,80,0.4) !important;
  background: rgba(76,175,80,0.08) !important;
}

/* ── NAV scrollable ──────────────────────────── */
.mob-nav {
  flex: 1 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Old nav styles reset - specific only */
.mobile-menu nav a {
  text-decoration: none !important;
}

/* ── All menu links ──────────────────────────── */
.mob-link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.25rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.85) !important;
  padding: 18px 24px !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  outline: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  background: transparent !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: color 0.2s ease, background 0.2s ease !important;
}
.mob-link:active {
  background: rgba(76,175,80,0.06) !important;
  color: #4CAF50 !important;
}

/* Home icon link */
.mob-home {
  justify-content: flex-start !important;
  gap: 14px !important;
  color: rgba(255,255,255,0.4) !important;
  font-size: 1rem !important;
}

/* Toggle arrow */
.mob-arrow {
  color: rgba(255,255,255,0.25) !important;
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1) !important;
  flex-shrink: 0 !important;
}
.mob-toggle.open .mob-arrow {
  transform: rotate(180deg) !important;
  color: #4CAF50 !important;
}

/* ── Submenu ─────────────────────────────────── */
.mob-sub {
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.36s cubic-bezier(0.4,0,0.2,1) !important;
  display: flex !important;
  flex-direction: column !important;
  background: rgba(76,175,80,0.03) !important;
  border-left: 2px solid rgba(76,175,80,0.18) !important;
  margin-left: 24px !important;
  margin-right: 16px !important;
  border-radius: 0 0 8px 8px !important;
}
.mob-sub.open {
  max-height: 500px !important;
}
.mob-sub a {
  display: block !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.5) !important;
  padding: 14px 20px !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  position: relative !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  width: 100% !important;
  text-decoration: none !important;
  background: transparent !important;
  transition: color 0.2s ease !important;
}
.mob-sub a::before {
  content: '' !important;
  display: none !important;
}
.mob-sub a:active {
  color: #4CAF50 !important;
}

/* ── S'inscrire button ───────────────────────── */
.mob-inscrit {
  color: #000 !important;
  background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%) !important;
  margin: 16px 20px !important;
  border-radius: 24px !important;
  justify-content: center !important;
  font-size: 1.05rem !important;
  letter-spacing: 0.14em !important;
  padding: 18px !important;
  border-bottom: none !important;
  width: calc(100% - 40px) !important;
  box-shadow: 0 4px 20px rgba(76,175,80,0.35) !important;
}

/* ── Social icons row ────────────────────────── */
.mob-socials {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 18px 20px !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  background: rgba(0,0,0,0.6) !important;
  flex-shrink: 0 !important;
}
.mob-social {
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 50% !important;
  color: rgba(255,255,255,0.45) !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
  background: rgba(255,255,255,0.03) !important;
  transition: all 0.2s ease !important;
}
.mob-social:active {
  background: rgba(76,175,80,0.15) !important;
  border-color: rgba(76,175,80,0.4) !important;
  color: #4CAF50 !important;
}
.mob-social-wa {
  border-color: rgba(37,211,102,0.3) !important;
  color: #25d366 !important;
  margin-left: auto !important;
  background: rgba(37,211,102,0.05) !important;
}

/* ══════════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════════ */
@media (max-width: 768px) {
  #navbar {
    position: fixed; top: 0; width: 100%; z-index: 1000;
    background: rgba(0,0,0,0.85) !important;
    backdrop-filter: blur(20px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  }
  .nav-single-row { height: 56px; }
  .nav-logo img { height: 48px !important; }
  .btn-inscription { display: none; }
  .nav-links { display: none; }
  .burger { display: flex !important; }
  main, .page-main { padding-top: 56px !important; }
  .container { padding: 0 16px !important; }
  .section-title { font-size: 2rem !important; }

  /* ── TESTIMONIALS ──────────────────────────── */
  .temo-slider { height: 480px !important; }
  .temo-content { padding: 0 20px 0 24px !important; }
  .temo-name { font-size: 1.4rem !important; }
  .temo-role { font-size: 0.75rem !important; }
  .temo-quote { font-size: 0.88rem !important; line-height: 1.6 !important; }
  .temo-arrow { display: none !important; }

  /* ── PARTNERS BAR ──────────────────────────── */
  .partners-bar, .temo-partners {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding: 24px 20px !important;
  }
  .partners-logos, .temo-partners .partners-logos {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 16px !important;
  }

  /* ── PROGRAMMES ────────────────────────────── */
  .prog-block { padding: 60px 0 !important; }
  .prog-block-inner { grid-template-columns: 1fr !important; gap: 32px !important; }
  .prog-block-reverse { direction: ltr !important; }
  .prog-block-content { padding: 0 !important; }
  .prog-learn-grid { grid-template-columns: 1fr !important; }
  .prog-details-row { flex-wrap: wrap !important; }
  .prog-cta-row { flex-wrap: wrap !important; gap: 12px !important; }
  .btn-prog-inscrit { width: 100% !important; text-align: center !important; }
  .prog-elite-section { min-height: 400px !important; background: #111 !important; }
  .prog-elite-inner { padding: 60px 0 !important; }
  .prog-elite-title { font-size: 2.5rem !important; }
  .prog-elite-photo-placeholder { display: none !important; }
  .stages-section { padding: 60px 0 !important; }
  .stages-inner { grid-template-columns: 1fr !important; gap: 32px !important; }

  /* ── CONTACT ───────────────────────────────── */
  .cnt-hero { min-height: 280px !important; padding-bottom: 32px !important; }
  .cnt-main { padding: 60px 0 !important; padding-top: 160px !important; }
  .cnt-main-inner { grid-template-columns: 1fr !important; gap: 40px !important; }
  .cnt-form-row { grid-template-columns: 1fr !important; }
  .cnt-wa-inner { grid-template-columns: 1fr !important; gap: 32px !important; }
  .cnt-wa-photo { display: none !important; }
  .cnt-social-links { flex-direction: column !important; }

  /* ── METHODE ───────────────────────────────── */
  .meth-philo-grid { grid-template-columns: 1fr !important; }
  .meth-origine-inner { grid-template-columns: 1fr !important; }
  .meth-tunisie-inner { grid-template-columns: 1fr !important; }
  .meth-tunisie-stat-box { position: static !important; margin-top: 16px !important; }
  .meth-5s-grid { grid-template-columns: 1fr 1fr !important; }
  .meth-clubs-grid { grid-template-columns: 1fr 1fr !important; }
  .meth-pyramide-layout { grid-template-columns: 1fr !important; }

  /* ── HOME ──────────────────────────────────── */
  .pq-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .pourquoi-inner { grid-template-columns: 1fr !important; gap: 32px !important; }
  .prog-photo-grid { grid-template-columns: 1fr 1fr !important; }
  .prog-photo-bg { height: 280px !important; }

  /* ── CTA BANNER ────────────────────────────── */
  .cta-banner-inner { flex-direction: column !important; text-align: center !important; padding: 0 20px !important; }
  .cta-banner-title { font-size: 1.8rem !important; }
  .cta-banner-btns { flex-direction: column !important; width: 100% !important; gap: 12px !important; }
  .btn-cta-black, .btn-cta-outline-dark { width: 100% !important; text-align: center !important; padding: 14px 20px !important; }

  /* ── FOOTER ────────────────────────────────── */
  .footer-inner { grid-template-columns: 1fr !important; gap: 32px !important; }
  .footer-bottom-inner { flex-direction: column !important; gap: 8px !important; text-align: center !important; }
}

/* ══════════════════════════════════════════════
   MOBILE 480px
══════════════════════════════════════════════ */
@media (max-width: 480px) {
  main, .page-main { padding-top: 56px !important; }
  .section-title { font-size: 1.7rem !important; }
  .cta-banner-title { font-size: 1.5rem !important; }
  .prog-photo-grid { grid-template-columns: 1fr !important; }
  .meth-5s-grid { grid-template-columns: 1fr !important; }
  .meth-clubs-grid { grid-template-columns: 1fr !important; }
  .temo-slider { height: 520px !important; }
  .temo-content { padding: 0 16px !important; }
  .temo-name { font-size: 1.2rem !important; }

  /* Safari temo image fix */
  .temo-slide-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    filter: grayscale(100%) !important;
    z-index: 0 !important;
  }
  .temo-slide { filter: none !important; }
  .temo-overlay { z-index: 1 !important; }
  .temo-content { z-index: 2 !important; }
}

/* ══════════════════════════════════════════════
   INNER PAGES — no black band
══════════════════════════════════════════════ */
body.page-inner .page-main,
body.page-inner main {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
body.page-inner main > section:first-child,
body.page-inner .page-main > section:first-child {
  padding-top: 80px !important;
}

/* ══════════════════════════════════════════════
   TEMO PARTNERS MOBILE
══════════════════════════════════════════════ */
@media (max-width: 480px) {
  .temo-partners {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding: 24px 20px !important;
  }
  .temo-partners .partners-logos {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 16px !important;
  }
}