/* ============================================================
   MENU MOBILE — FIX COMPLET
   Problème : le menu s'affichait par transparence sur le contenu
   Solution : position fixed + z-index élevé + fond opaque total
============================================================ */

/* OVERLAY — couvre TOUT le viewport y compris la nav */
.mm-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 9998 !important;
  background: rgba(0, 0, 0, 0.85) !important;
  display: none !important;
  cursor: pointer;
}
.mm-overlay.open { display: block !important; }

/* MENU PANEL — fond 100% opaque, z-index maximal */
.mm {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 9999 !important;
  background: #050508 !important;   /* noir solide, AUCUNE transparence */
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 28px !important;
  /* Slide depuis la droite */
  transform: translateX(100%) !important;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  padding: 60px 20px 40px !important;
  /* Supprime toute transparence éventuelle */
  opacity: 1 !important;
  pointer-events: none !important;
}
.mm.open {
  transform: translateX(0) !important;
  pointer-events: all !important;
}

/* Bouton fermer */
.mm-close {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  color: #f4f4f6 !important;
  cursor: pointer !important;
  transition: background .2s !important;
  z-index: 10001 !important;
}
.mm-close:hover { background: rgba(255,255,255,.15) !important; }

/* Liens du menu */
.mm button {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  font-size: 26px !important;
  color: #f4f4f6 !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  min-height: 48px !important;
  width: 100% !important;
  text-align: center !important;
  transition: color .2s !important;
  position: relative !important;
  z-index: 10000 !important;
}
.mm button:hover { color: #2563ff !important; }

.mm-tel {
  font-size: 16px !important;
  color: #3b82f6 !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  margin-top: 8px !important;
}

/* Empêche le scroll du body quand menu ouvert */
body.menu-open {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
}