/* =========================================================================
   Bawaba Import — Mobile Menu Unified (Design A : Gradient vert premium)
   Applique un look uniforme sur tous les menus mobiles du site, quelle que
   soit la structure HTML utilisée par la page d'origine (index, articles,
   contact, blog, procédures, packs, etc.).
   Charger APRÈS le <style> inline de la page pour surcharger correctement.
   ========================================================================= */

:root{
  --bmm-green: #006C4F;
  --bmm-emerald: #00A97F;
  --bmm-gold: #D4B47A;
  --bmm-grad: linear-gradient(135deg,#006C4F 0%,#00A97F 48%,#D4B47A 100%);
  --bmm-shadow: 0 16px 48px rgba(0,0,0,.15);
  --bmm-ease: all .3s cubic-bezier(.4,0,.2,1);
}

/* ============================================================
   1) BOUTON HAMBURGER UNIFIÉ
   Cible : .nav-toggle (index/packs), .hamburger (articles/autres),
           .menu-toggle (pages légales cgv/mentions/privacy)
   NOTE : on ne force PAS `display` ici pour respecter la media
   query d'origine de chaque page (affiché < 1024px, caché au-dessus).
   ============================================================ */
.nav-toggle,
.hamburger,
.menu-toggle{
  background: var(--bmm-grad) !important;
  border: 1px solid rgba(0,169,127,.3) !important;
  border-radius: 12px !important;
  padding: 10px !important;
  cursor: pointer;
  transition: var(--bmm-ease) !important;
  width: 44px !important;
  height: 44px !important;
  position: relative;
  box-shadow: 0 4px 12px rgba(0,108,79,.2) !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 5px !important;
}

/* Responsive : caché sur desktop, visible en mobile (pour les pages qui ne
   définissent pas clairement la règle en media query) */
@media (max-width: 1023px){
  .nav-toggle,
  .hamburger,
  .menu-toggle{
    display: flex !important;
  }
}
@media (min-width: 1024px){
  .nav-toggle,
  .hamburger,
  .menu-toggle{
    display: none !important;
  }
  /* Sécurité : fermer le drawer s'il était ouvert */
  .mobile-menu,
  .mobile-overlay,
  nav#mobile-nav,
  .overlay#overlay{
    display: none !important;
  }
}

.nav-toggle:hover,
.hamburger:hover,
.menu-toggle:hover{
  box-shadow: 0 6px 16px rgba(0,108,79,.35) !important;
  border-color: rgba(0,169,127,.5) !important;
  transform: translateY(-2px);
}

.nav-toggle span,
.hamburger span,
.menu-toggle span{
  display: block !important;
  width: 24px !important;
  height: 3px !important;
  background: var(--bmm-gold) !important;
  margin: 0 auto !important;
  transition: var(--bmm-ease) !important;
  border-radius: 3px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.1);
  opacity: 1 !important;
}

/* Animation X à l'état actif */
.nav-toggle.active span:nth-child(1),
.hamburger.active span:nth-child(1),
.menu-toggle.active span:nth-child(1){
  transform: rotate(45deg) translate(7px,7px) !important;
  background: var(--bmm-gold) !important;
}
.nav-toggle.active span:nth-child(2),
.hamburger.active span:nth-child(2),
.menu-toggle.active span:nth-child(2){
  opacity: 0 !important;
}
.nav-toggle.active span:nth-child(3),
.hamburger.active span:nth-child(3),
.menu-toggle.active span:nth-child(3){
  transform: rotate(-45deg) translate(7px,-7px) !important;
  background: var(--bmm-gold) !important;
}

/* ============================================================
   2) OVERLAY UNIFIÉ
   Cible : .mobile-overlay (tous), .overlay#overlay (pages légales)
   ============================================================ */
.mobile-overlay,
.overlay#overlay{
  position: fixed !important;
  top: 0; left: 0;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0,0,0,.5) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  opacity: 0;
  visibility: hidden;
  transition: all .3s !important;
  z-index: 99 !important;
  border-radius: 0 !important;
  display: block !important;
}
.mobile-overlay.active,
.overlay#overlay.active{
  opacity: 1 !important;
  visibility: visible !important;
}

/* ============================================================
   3) DRAWER UNIFIÉ
   Cible : .mobile-menu (index/articles), nav#mobile-nav (pages légales)
   Force le gradient vert peu importe la structure interne
   ============================================================ */
.mobile-menu,
nav#mobile-nav{
  position: fixed !important;
  top: 0 !important;
  right: -100% !important;
  left: auto !important;
  width: 85% !important;
  max-width: 380px !important;
  height: 100vh !important;
  background: var(--bmm-grad) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-left: 1px solid rgba(255,255,255,.2) !important;
  border-right: none !important;
  border-radius: 0 !important;
  padding: 24px !important;
  transition: right .4s cubic-bezier(.68,-.55,.265,1.55) !important;
  z-index: 100 !important;
  overflow-y: auto;
  box-shadow: var(--bmm-shadow) !important;
  color: #fff !important;
}
.mobile-menu.active,
.mobile-menu[aria-hidden="false"],
.mobile-menu.open,
nav#mobile-nav.open,
nav#mobile-nav.active{
  right: 0 !important;
}

/* RTL */
[dir="rtl"] .mobile-menu,
[dir="rtl"] nav#mobile-nav{
  right: auto !important;
  left: -100% !important;
  border-left: none !important;
  border-right: 1px solid rgba(255,255,255,.2) !important;
}
[dir="rtl"] .mobile-menu.active,
[dir="rtl"] .mobile-menu[aria-hidden="false"],
[dir="rtl"] .mobile-menu.open,
[dir="rtl"] nav#mobile-nav.open,
[dir="rtl"] nav#mobile-nav.active{
  left: 0 !important;
}

/* Liens directs dans nav#mobile-nav (pages légales, pas de wrapper .mobile-nav interne) */
nav#mobile-nav > a{
  padding: 16px 20px !important;
  border-radius: 16px !important;
  font-weight: 600 !important;
  font-size: 1.05rem !important;
  transition: var(--bmm-ease) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  color: #fff !important;
  background: transparent !important;
  text-decoration: none !important;
  margin-bottom: 8px !important;
}
nav#mobile-nav > a:hover,
nav#mobile-nav > a.active{
  background: rgba(255,255,255,.25) !important;
  border-color: #fff !important;
  color: #fff !important;
  transform: translateX(8px);
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
[dir="rtl"] nav#mobile-nav > a:hover,
[dir="rtl"] nav#mobile-nav > a.active{
  transform: translateX(-8px);
}
/* Section langue dans les pages légales */
nav#mobile-nav .mobile-lang h4{
  color: rgba(255,255,255,.85) !important;
  margin: 16px 0 12px !important;
  font-size: .9rem !important;
}

/* ============================================================
   4) EN-TÊTE DU DRAWER (logo + close)
   Cible : .mobile-header, .mobile-head
   ============================================================ */
.mobile-menu .mobile-header,
.mobile-menu .mobile-head{
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 32px !important;
  padding-bottom: 20px !important;
  border-bottom: 2px solid rgba(255,255,255,.3) !important;
  background: transparent !important;
}

.mobile-menu .mobile-logo,
.mobile-menu .mobile-head .brand,
.mobile-menu .mobile-head .logo{
  display: flex !important;
  align-items: center !important;
  gap: 10px;
}
.mobile-menu .mobile-logo img,
.mobile-menu .mobile-head img{
  width: auto !important;
  max-width: 180px !important;
  height: 48px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 8px rgba(255,255,255,.3)) brightness(0) invert(1) !important;
}
.mobile-menu .mobile-head .brandname,
.mobile-menu .mobile-head span{
  color: #fff !important;
}

/* Bouton de fermeture */
.mobile-menu .mobile-close{
  background: rgba(255,255,255,.2) !important;
  border: 2px solid rgba(255,255,255,.4) !important;
  color: #fff !important;
  font-size: 1.5rem !important;
  cursor: pointer;
  padding: 8px !important;
  border-radius: 12px !important;
  transition: var(--bmm-ease) !important;
  line-height: 1;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.mobile-menu .mobile-close:hover{
  background: rgba(255,255,255,.3) !important;
  border-color: #fff !important;
  transform: rotate(90deg);
}
.mobile-menu .mobile-close svg{
  stroke: #fff !important;
  fill: none !important;
  width: 20px !important;
  height: 20px !important;
}

/* ============================================================
   5) LISTE DES LIENS
   Cible : .mobile-nav, .mobile-list
   ============================================================ */
.mobile-menu .mobile-nav,
.mobile-menu .mobile-list{
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

.mobile-menu .mobile-nav a,
.mobile-menu .mobile-list a,
.mobile-menu nav a{
  padding: 16px 20px !important;
  border-radius: 16px !important;
  font-weight: 600 !important;
  font-size: 1.05rem !important;
  transition: var(--bmm-ease) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  color: #fff !important;
  background: transparent !important;
  text-decoration: none !important;
}
.mobile-menu .mobile-nav a:hover,
.mobile-menu .mobile-nav a.active,
.mobile-menu .mobile-nav a[aria-current="page"],
.mobile-menu .mobile-list a:hover,
.mobile-menu .mobile-list a.active,
.mobile-menu .mobile-list a[aria-current="page"]{
  background: rgba(255,255,255,.25) !important;
  border-color: #fff !important;
  color: #fff !important;
  transform: translateX(8px);
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
[dir="rtl"] .mobile-menu .mobile-nav a:hover,
[dir="rtl"] .mobile-menu .mobile-nav a.active,
[dir="rtl"] .mobile-menu .mobile-list a:hover,
[dir="rtl"] .mobile-menu .mobile-list a.active{
  transform: translateX(-8px);
}

/* Icônes SVG éventuelles (design B contact.html) */
.mobile-menu .mobile-nav a svg,
.mobile-menu .mobile-list a svg{
  stroke: #fff !important;
  fill: none !important;
  width: 22px !important;
  height: 22px !important;
  flex-shrink: 0;
}

/* ============================================================
   6) SECTION LANGUE DANS LE DRAWER
   Cible : .mobile-lang, .lang-section
   ============================================================ */
.mobile-menu .mobile-lang,
.mobile-menu .lang-section{
  margin-top: 24px !important;
  padding-top: 24px !important;
  border-top: 1px solid rgba(255,255,255,.3) !important;
}

.mobile-menu .mobile-lang-label,
.mobile-menu .lang-section-label,
.mobile-menu .lang-section > label,
.mobile-menu .lang-section > span{
  color: rgba(255,255,255,.85) !important;
  font-weight: 600 !important;
  margin-bottom: 10px !important;
  display: block !important;
}

/* Pills de langue (3 variantes de structure) */
.mobile-menu .lang,
.mobile-menu .lang-switch,
.mobile-menu .lang-section .lang-pills,
.mobile-menu .lang-section nav{
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
  background: rgba(255,255,255,.2) !important;
  padding: 4px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.3) !important;
  box-shadow: none !important;
}

.mobile-menu .lang button,
.mobile-menu .lang-pill,
.mobile-menu .lang-switch a,
.mobile-menu .lang-switch button{
  padding: 8px 16px !important;
  border-radius: 999px !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer;
  font-weight: 600 !important;
  color: #fff !important;
  font-size: .9rem !important;
  transition: var(--bmm-ease) !important;
  min-width: auto !important;
  height: auto !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
}
.mobile-menu .lang button.active,
.mobile-menu .lang-pill.active,
.mobile-menu .lang-switch a.active,
.mobile-menu .lang-switch button.active{
  background: #fff !important;
  color: var(--bmm-green) !important;
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0,0,0,.1) !important;
}
.mobile-menu .lang button:hover:not(.active),
.mobile-menu .lang-pill:hover:not(.active),
.mobile-menu .lang-switch a:hover:not(.active),
.mobile-menu .lang-switch button:hover:not(.active){
  color: #fff !important;
  background: rgba(255,255,255,.15) !important;
}

/* ============================================================
   7) SCROLLBAR DU DRAWER (discret)
   ============================================================ */
.mobile-menu::-webkit-scrollbar{ width: 6px; }
.mobile-menu::-webkit-scrollbar-track{ background: transparent; }
.mobile-menu::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.3);
  border-radius: 999px;
}

/* ============================================================
   8) PRINT : masquer le menu mobile
   ============================================================ */
@media print{
  .mobile-menu,
  .mobile-overlay,
  .nav-toggle,
  .hamburger{
    display: none !important;
  }
}