/* =============================================================
   100T RESTO BIO — NAV FIX FINAL
   Remplacez TOUT le contenu de custom.css par ce fichier,
   OU collez ce bloc à la TOUTE FIN de custom.css
   (il écrasera les conflits précédents grâce à la cascade)
   ============================================================= */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --green:      #5b8a72;
  --green-dark: #355b48;
  --gold:       #d7a85b;
  --nav-h:      80px;         /* hauteur de la barre nav */
  --radius-nav: 32px;
}

/* ── Reset conflits empilés ─────────────────────────────────── */
.header-full-width,
.nav-white {
  all: unset !important; /* repart de zéro pour ces deux éléments */
  display: block !important;
}

/* ── HEADER wrapper ─────────────────────────────────────────── */
.header-full-width {
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  width: 100% !important;
  background: transparent !important;
  padding: 14px 4vw !important;
  box-sizing: border-box !important;
}

/* ── NAV pill ───────────────────────────────────────────────── */
.nav-white {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;

  width: 100% !important;
  min-height: var(--nav-h) !important;
  padding: 0 28px !important;
  box-sizing: border-box !important;

  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border-radius: var(--radius-nav) !important;
  border: 1px solid rgba(255,255,255,0.6) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.10) !important;

  position: relative !important;  /* pour le menu dropdown mobile */
  overflow: visible !important;
}

/* ── LOGO ───────────────────────────────────────────────────── */
.nav-header {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

.nav-header .brand {
  display: flex !important;
  align-items: center !important;
}

.nav-header .brand img,
.brand img {
  width: 68px !important;
  height: 68px !important;
  object-fit: contain !important;
  border-radius: 50% !important;
  background: #fff !important;
  padding: 6px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.14) !important;
  display: block !important;
}

/* ── HAMBURGER — caché desktop ──────────────────────────────── */
.toggle-bar {
  display: none !important;
}

/* ── MENU DESKTOP ───────────────────────────────────────────── */
.menu {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 4px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.menu li {
  display: inline-flex !important;
  list-style: none !important;
}

.menu li a {
  display: inline-flex !important;
  align-items: center !important;
  padding: 9px 13px !important;
  border-radius: 24px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.8px !important;
  color: #111 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  transition: background 0.25s, color 0.25s !important;
  background: transparent !important;
}

.menu li a:hover,
.menu li.active a,
.menu li.scrollspy.active a {
  background: linear-gradient(135deg, var(--green), var(--green-dark)) !important;
  color: #fff !important;
}

/* langue EN */
.menu li.language-switch a {
  color: var(--gold) !important;
  font-weight: 700 !important;
}

/* ── SEARCH ICON desktop ────────────────────────────────────── */
.attributes {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.wrap-search-fullscreen {
  display: none !important;
}

/* ============================================================
   MOBILE  ≤ 768px
   ============================================================ */
@media (max-width: 768px) {

  /* header + nav */
  .header-full-width {
    padding: 10px 3vw !important;
  }

  .nav-white {
    padding: 0 18px !important;
    min-height: 72px !important;
    border-radius: 24px !important;
    justify-content: space-between !important;
  }

  /* Logo — taille réduite mobile */
  .nav-header .brand img,
  .brand img {
    width: 52px !important;
    height: 52px !important;
  }

  /* Hamburger visible */
  .toggle-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: var(--green) !important;
    border: none !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    order: -1 !important;        /* hamburger à gauche */
  }

  .toggle-bar span,
  .toggle-bar i {
    color: #fff !important;
    font-size: 22px !important;
    background: transparent !important;
    pointer-events: none !important;
  }

  /* Search caché mobile */
  .attributes,
  .wrap-search-fullscreen,
  .toggle-search-fullscreen {
    display: none !important;
  }

  /* ── MENU FERMÉ par défaut ── */
  .menu {
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;

    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;

    background: #fff !important;
    border-radius: 20px !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    box-shadow: 0 20px 55px rgba(0,0,0,0.16) !important;
    z-index: 99999 !important;
  }

  /* ── MENU OUVERT — déclenché par JS via cette classe ── */
  .nav-white.mobile-menu-open .menu {
    display: flex !important;
  }

  .menu li {
    display: block !important;
    width: 100% !important;
  }

  .menu li a {
    display: block !important;
    width: 100% !important;
    padding: 13px 16px !important;
    background: #f5f7f5 !important;
    border-radius: 14px !important;
    font-size: 13px !important;
    text-align: left !important;
    color: #111 !important;
  }

  .menu li a:hover,
  .menu li.active a {
    background: var(--green) !important;
    color: #fff !important;
  }

}
/* ===== FIX MENU MOBILE - TEXTE VISIBLE ===== */
@media (max-width: 768px) {

  /* Tous les items : fond gris clair + texte foncé visible */
  .menu li a {
    background: #f0f4f1 !important;
    color: #111111 !important;
  }

  /* Item actif ou hover : vert + texte blanc */
  .menu li a:hover,
  .menu li.active a,
  .menu li.scrollspy.active a {
    background: #5b8a72 !important;
    color: #ffffff !important;
  }

}