/* ══════════════════════════════════════════════════════════════
   MPH-TECH — Shared Styles (extracted from inline duplication)
   ══════════════════════════════════════════════════════════════ */

/* ── MENU MOBILE — Tiroir latéral droit ── */

/* Overlay sombre */
#menu-overlay {
  position:fixed; inset:0; z-index:48;
  background:rgba(0,0,0,.5);
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s;
}
#menu-overlay.open { opacity:1; visibility:visible; }

/* Drawer latéral */
#mobile-menu {
  position:fixed; top:0; right:0; z-index:49;
  width:300px; max-width:85vw; height:100vh; height:100dvh;
  background:#080d18;
  border-left:2px solid rgba(0,85,229,.3);
  transform:translateX(100%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column;
  box-shadow:-8px 0 40px rgba(0,0,0,.4);
}
#mobile-menu.open { transform:translateX(0); }

/* Accent bleu vertical */
#mobile-menu::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,#0055e5,#00c6ff,transparent);
}

/* En-tête */
#mobile-menu .drawer-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:28px 24px 20px;
}
#mobile-menu .drawer-header .logo-text {
  font-size:1rem; font-weight:800; letter-spacing:.05em;
  background:linear-gradient(135deg,#0055e5,#00c6ff);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
#mobile-menu .drawer-close {
  background:none; border:none; color:rgba(255,255,255,.5); font-size:1.6rem;
  cursor:pointer; padding:4px 8px; line-height:1; transition:color .2s;
}
#mobile-menu .drawer-close:hover { color:#fff; }

/* Liens */
#mobile-menu .drawer-links {
  flex:1; display:flex; flex-direction:column; gap:2px;
  padding:0 16px; overflow-y:auto;
}
#mobile-menu .drawer-links a {
  display:block; padding:13px 16px; border-radius:8px;
  font-size:.95rem; font-weight:500; color:rgba(255,255,255,.65);
  text-decoration:none; transition:all .2s ease;
}
#mobile-menu .drawer-links a:hover,
#mobile-menu .drawer-links a.active {
  color:#fff; background:rgba(0,85,229,.1);
}
#mobile-menu .drawer-links a.active {
  color:#00c6ff; font-weight:600;
}
#mobile-menu .drawer-links a.devis-link {
  color:#00c6ff; font-weight:600;
  border:1px solid rgba(0,198,255,.2);
  border-radius:8px; margin-top:8px;
  background:rgba(0,198,255,.04);
}

/* Footer CTA */
#mobile-menu .drawer-footer {
  padding:20px 24px 32px;
  border-top:1px solid rgba(255,255,255,.06);
}
#mobile-menu .drawer-footer a {
  display:block; text-align:center; padding:13px;
  border-radius:8px; font-size:.9rem; font-weight:600;
  text-decoration:none; transition:all .2s;
}
#mobile-menu .drawer-footer .cta-primary {
  background:#0055e5; color:#fff;
}
#mobile-menu .drawer-footer .cta-primary:hover { background:#0066ff; }

/* Bouton hamburger */
#menu-btn {
  display:flex; align-items:center; gap:8px;
  background:none; border:none; cursor:pointer; padding:4px;
  color:#fff; font-size:.82rem; font-weight:500;
  font-family:'Space Grotesk',sans-serif;
}
#menu-btn .bars { display:flex; flex-direction:column; gap:5px; }
#menu-btn .bars span {
  display:block; width:28px; height:3px; background:#fff;
  border-radius:3px; transition:all .3s ease;
}

/* ── NAV RESPONSIVE ──────────────────────────────────────────── */
/* Mobile : liens cachés, hamburger visible */
nav .nav-links { display:none; list-style:none; padding:0; margin:0; }

/* Desktop (≥768px) : liens visibles, hamburger caché */
@media(min-width:768px) {
  nav .nav-links { display:flex; }
  #menu-btn       { display:none !important; }
}

/* ── NAV LINK COLORS ── */
nav .nav-links li a.nav-link {
  color: rgba(255,255,255,.58);
  text-decoration: none;
  font-size: .875rem;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  position: relative;
  padding-bottom: 2px;
  transition: color .2s;
}
nav .nav-links li a.nav-link::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0; right: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #0055e5, #00c6ff);
  transform: scaleX(0);
  transition: transform .2s ease;
  transform-origin: left;
}
nav .nav-links li a.nav-link:hover { color: #fff; }
nav .nav-links li a.nav-link:hover::after,
nav .nav-links li a.nav-active::after { transform: scaleX(1); }
nav .nav-links li a.nav-active {
  color: #00c6ff;
  font-weight: 600;
}
nav .nav-links li a.nav-link[href*="calculateur"] { color: #7dd3fc; }
nav .nav-links li a.nav-link[href*="calculateur"]::after {
  background: linear-gradient(90deg, #7c3aed, #e879f9);
}

/* ── Masquer le hamburger redondant de enhancements.js ──────────
   shared.js fournit déjà #menu-btn + #mobile-menu drawer.
   #sx-hamburger et #sx-mobile-menu sont donc doublon. */
#sx-hamburger  { display: none !important; }
#sx-mobile-menu { display: none !important; }

/* ── Contact button nav: masquer sur mobile (le drawer contient déjà un CTA) ── */
@media (max-width: 767px) {
  nav > a[href*="contact"] { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — MPH-TECH v2.1
   ══════════════════════════════════════════════════════════════ */

/* Hero carousel: visible seulement sur desktop */
.hero-carousel-wrap { display: block; }

@media (max-width: 767px) {

  /* 1. Masquer le carrousel hero sur mobile */
  .hero-carousel-wrap { display: none !important; }

  /* 2. Nav: padding plus serré */
  nav { padding: 8px 14px !important; }
  .nav-logo img { height: 40px !important; }

  /* 3. Hero stats: envelopper et centrer */
  .hero-stats {
    flex-wrap: wrap;
    gap: 14px 28px;
    margin-top: 32px;
    justify-content: center;
  }
  .hero-stat { text-align: center; min-width: 72px; }
  .hero-stat strong { font-size: 1.5rem; }

  /* 4. Sections: padding réduit */
  .section       { padding: 56px 18px !important; }
  .section-full  { padding: 56px 18px !important; }
  .page-hero     { padding: 100px 18px 50px !important; }
  .cta2          { padding: 56px 18px !important; }
  footer         { padding: 40px 18px !important; }

  /* 5. Services bento cards */
  .srv-bento-card { padding: 22px 18px !important; }

  /* 6. Pricing cards */
  .price-card { padding: 24px 18px !important; }
  .price-value { font-size: 2.4rem !important; }

  /* 7. CTA section: empiler le formulaire */
  .cta2-row  { flex-direction: column; gap: 0; }
  .cta2-card { padding: 24px 18px !important; }
  .cta2-inner { gap: 32px !important; }
  .cta2-title { font-size: clamp(1.8rem, 7vw, 2.4rem) !important; }

  /* 8. Footer bottom: empiler */
  .footer-bottom {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  /* 9. Stats bar */
  .stat { padding: 24px 12px !important; }
  .stat-number { font-size: 1.8rem !important; }

  /* 10. Services split panel */
  .srv2-slide      { padding: 28px 18px !important; }
  .srv2-slide h3   { font-size: 1.4rem !important; }

  /* 11. Section header 2 colonnes → 1 colonne */
  .section-header-2col {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* 12. Blog cards */
  .blog-card-body { padding: 18px 16px !important; }

  /* 13. Chatbot: au-dessus de la promo bar */
  #mph-chat-btn { bottom: 80px !important; }

  /* 14. Portfolio tabs: défilement horizontal */
  .pricing-tabs, .portfolio-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pricing-tabs::-webkit-scrollbar,
  .portfolio-tabs::-webkit-scrollbar { display: none; }
  .ptab, .portab { flex-shrink: 0; }

  /* 15. Grille 2-col hero-cta buttons → pleine largeur */
  .hero-btns { flex-direction: column; align-items: stretch; }
  .hero-btns a, .hero-btns button {
    text-align: center;
    justify-content: center;
  }

  /* 16. Section title */
  .section-title { font-size: clamp(1.6rem, 6vw, 2rem) !important; }
  .page-hero-title, .page-hero h1 {
    font-size: clamp(1.8rem, 7vw, 2.6rem) !important;
  }
}

/* Extra-small (≤400px) */
@media (max-width: 400px) {
  nav { padding: 10px 14px !important; }
  .hero-stats { flex-direction: column; align-items: center; }
  .section      { padding: 44px 14px !important; }
  .section-full { padding: 44px 14px !important; }
  .cta2         { padding: 44px 14px !important; }
  footer        { padding: 36px 14px !important; }
  .srv-bento-card { padding: 18px 14px !important; }
  .price-card     { padding: 20px 14px !important; }
}