/**
 * Lore & Science � Custom Header
 * Header siempre blanco solido, sticky, sin efectos de transparencia.
 * Row 1: Switcher | Logo centrado | Connexion + Cart
 * Row 2: Menu principal | CTA rose + Search
 */

/* -- BASE --------------------------------------- */
.bcc-custom-header {
  background: rgba(250, 248, 245, 0.80); /* Lovable: #FAF8F5CC */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(13,73,89,0.08);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 12px rgba(13,73,89,0.06);
}

/* -- CONTENEDOR INNER (flex flex-col) ------------------------- */
.bcc-custom-header__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

/* -- DESKTOP ONLY: oculto en mobile, visible en desktop -------- */
.bcc-desktop-only {
  display: none;
}
@media (min-width: 768px) {
  .bcc-desktop-only {
    display: inline-flex;
  }
}

/* -- FILAS -------------------------------------- */
.bcc-custom-header__row {
  display: grid;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 2rem);
  gap: 1rem;
}

.bcc-custom-header__row--brand {
  grid-template-columns: 1fr auto 1fr;
  padding-top: 1rem;    /* Lovable: sm:py-4 = 1rem */
  padding-bottom: 1rem;
}

.bcc-custom-header__row--nav {
  grid-template-columns: 1fr auto;
  padding-top: 0.25rem;
  padding-bottom: 1rem; /* igual al brand row → cart y search alineados por borde derecho */
}

/* -- SIDES -------------------------------------- */
.bcc-custom-header__side {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.bcc-custom-header__side--left  { justify-self: start; }
.bcc-custom-header__side--right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: flex-end;
  padding-left: 9rem; /* separa los botones del logo, empuja a la derecha */
}

/* -- LOGO --------------------------------------- */
.bcc-custom-header__logo {
  justify-self: center;
  display: block;
  line-height: 0;
  /* Forzar columna 2 del grid 1fr auto 1fr — centrado independiente del toggle */
  grid-column: 2;
}
.bcc-custom-header__logo img {
  height: 100px !important;   /* tamaño real del logo — vence atributos inline width/height */
  width: auto !important;
  max-height: none !important;
  max-width: none !important;
  display: block;
}

/* -- LANG SWITCHER ------------------------------ */
.bcc-lang-switcher { position: relative; display: inline-flex; }
.bcc-lang-switcher__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid rgba(13,73,89,0.2);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #0D4959;
  background: #fff;
  cursor: pointer;
}
.bcc-lang-switcher__toggle:hover { border-color: #0D4959; }
.bcc-site-switcher__chevron { transition: transform 0.2s ease; }
.bcc-lang-switcher__toggle[aria-expanded="true"] .bcc-site-switcher__chevron { transform: rotate(180deg); }

/* Dropdown */
.bcc-site-dropdown {
  position: absolute;
  top: calc(100% + 0.375rem);
  right: 0;
  background: #fff;
  border: 1px solid rgba(13,73,89,0.15);
  border-radius: 0.625rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  list-style: none;
  padding: 0.25rem;
  margin: 0;
  min-width: 100%;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.bcc-site-dropdown.is-open {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}
.bcc-site-option {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border-radius: 0.375rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #0D4959;
  text-decoration: none;
  transition: background 0.15s;
  white-space: nowrap;
}
.bcc-site-option:hover { background: rgba(13,73,89,0.06); }

/* -- HEADER BUTTONS ----------------------------- */
.bcc-header-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 1rem;
  border: 1px solid #DB063B;
  color: #DB063B;
  background: #ffffff;
  border-radius: 999px;
  font-family: "DM Sans", sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
  white-space: nowrap; /* evita que textos largos (ej. "Iniciar sesión") rompan a 2 líneas */
  line-height: 1.2;
  min-height: 2.5rem; /* altura uniforme entre account / wishlist / cart / lang */
  box-sizing: border-box;
}
.bcc-header-btn:hover { background: #DB063B; color: #fff; }
.bcc-header-btn:hover svg { stroke: #fff; }
.bcc-header-btn svg { stroke: #DB063B; }

.bcc-header-btn--cart {
  color: #188A81;
  border-color: rgba(24,138,129,0.3);
  position: relative;
}
.bcc-header-btn--cart svg { stroke: #188A81; }
.bcc-header-btn--cart:hover { background: rgba(24,138,129,0.08); color: #188A81; }
.bcc-header-btn--cart:hover svg { stroke: #188A81; }

.bcc-header-btn__badge {
  position: absolute;
  top: -6px; right: -6px;
  background: #DB063B;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 50%;
  width: 18px; height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Carte préventive se oculta del menú vía filtro PHP (wp_nav_menu_objects),
   independiente del idioma — ver functions.php */

/* -- MENU PRINCIPAL ----------------------------- */
.bcc-primary-menu {
  display: flex;
  list-style: none;
  margin: 0; padding: 0;
  gap: 0;
  flex-wrap: nowrap;
  align-items: stretch; /* items igual altura → líneas inferiores parejas */
  justify-content: space-between; /* Lovable: nav justify-between → reparte ancho */
  width: 100%;
}
.bcc-primary-menu li {
  position: relative;
  display: flex;
  align-items: stretch;
}
.bcc-primary-menu li > a { height: 100%; }
.bcc-primary-menu li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 1.5rem; /* altura fija — uniforme en todos los separadores */
  width: 1px;
  background: rgba(13,73,89,0.2);
}
.bcc-primary-menu a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.375rem 1rem; /* vertical reducido a la mitad */
  font-family: "DM Sans", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(14,76,90,0.7);
  text-decoration: none;
  transition: color 0.15s;
  white-space: normal;
  max-width: 12rem; /* permite 2 líneas en la opción más larga */
  line-height: 1.25;
  border-bottom: 2px solid transparent; /* reserva espacio — evita salto en hover/active */
}
/* Español: textos más largos → más ancho para mantener máx. 2 líneas */
.bcc-lang-es .bcc-primary-menu a {
  max-width: 15rem;
}
.bcc-primary-menu a:hover {
  color: #0D4959;
  border-bottom-color: rgba(13,73,89,0.4);
}
.bcc-primary-menu .current-menu-item > a,
.bcc-primary-menu .current_page_item > a,
.bcc-primary-menu .current-menu-ancestor > a {
  color: #0D4959;
  font-weight: 700;
  border-bottom-color: #0D4959;
}

/* -- NAV SIDE ----------------------------------- */
.bcc-custom-header__nav-side {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

/* Separador antes del CTA conseil — igual que los del menú */
.bcc-nav-separator {
  display: inline-block;
  width: 1.5px;
  height: 1.25rem;
  background: rgba(13,73,89,0.2);
  align-self: center;
  flex-shrink: 0;
}

/* Separador vertical antes del search toggle — comme Lovable */
.bcc-custom-header__nav-side .bcc-search-toggle {
  position: relative;
  margin-left: 0.25rem;
}
.bcc-custom-header__nav-side .bcc-search-toggle::before {
  content: "";
  position: absolute;
  left: -0.625rem;
  top: 15%;
  bottom: 15%;
  width: 1px;
  background: rgba(13,73,89,0.2);
}

.bcc-conseil-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.25rem;
  background: #DB063B;
  color: #fff;
  border-radius: 999px;
  font-family: "DM Sans", sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.1;
  max-width: 200px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(219,6,59,0.22);
  transition: background-color 0.2s, transform 0.1s;
}
.bcc-conseil-cta:hover {
  background: #BD0533;
  color: #fff;
  transform: translateY(-1px);
}

.bcc-search-toggle {
  /* Reset completo — anula cualquier estilo de Elementor/Hello */
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(24,138,129,0.25);
  padding: 0.45rem 0.6rem;
  cursor: pointer;
  border-radius: 50%;
  color: #188A81;
  transition: background-color 0.15s, border-color 0.15s;
}
.bcc-search-toggle:hover {
  background: rgba(24,138,129,0.08);
  border-color: #188A81;
  color: #188A81;
}
.bcc-search-toggle svg { display: block; stroke: #188A81; }
.bcc-search-toggle:hover svg { stroke: #188A81; }
.bcc-search-toggle:focus { outline: 2px solid #188A81; outline-offset: 2px; }
.bcc-search-toggle:focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; }
.bcc-search-toggle:focus svg, .bcc-search-toggle:active svg { stroke: #188A81 !important; }

/* -- SEARCH MODAL ------------------------------- */
.bcc-search-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: flex-start;
  justify-content: center;
  padding-top: clamp(5rem, 12vh, 8rem);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.bcc-search-modal.is-open {
  display: flex;
}
.bcc-search-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 20, 15, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.bcc-search-modal__panel {
  position: relative;
  z-index: 1;
  background: var(--bcc-background, #F9F8F5);
  border-radius: 0.75rem;
  padding: 0;
  width: 100%;
  max-width: 48rem; /* max-w-3xl comme Lovable */
  max-height: calc(100vh - clamp(5rem, 12vh, 8rem) - 1rem);
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0,0,0,0.22);
  animation: bcc-modal-in 0.2s ease forwards;
}
@keyframes bcc-modal-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Zone sticky en haut du panel */
.bcc-search-modal__inner {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bcc-background, #F9F8F5);
  border-bottom: 1px solid rgba(13,73,89,0.1);
  padding: 1.25rem 1.25rem 1rem;
}
.bcc-search-modal__title {
  font-family: "Playfair Display", serif;
  font-size: 1.125rem;
  font-weight: 600;
  color: #1E2D26;
  margin: 0 0 0.875rem;
}

/* Formulaire input + bouton */
.bcc-search-modal__form {
  display: flex;
  gap: 0.5rem;
}
.bcc-search-modal__input-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}
.bcc-search-modal__icon {
  position: absolute !important;
  left: 0.875rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
  stroke: #8a9e99 !important;
  z-index: 2 !important;
  width: 16px !important;
  height: 16px !important;
}
.bcc-search-modal__input {
  all: unset !important;
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  border: 1.5px solid #d1dbd8 !important;
  border-radius: 0.5rem !important;
  padding: 0.625rem 2.75rem 0.625rem 2.625rem !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.9375rem !important;
  color: #1E2D26 !important;
  background: #fff !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
.bcc-search-modal__input:focus {
  border-color: #188A81 !important;
  box-shadow: 0 0 0 3px rgba(24,138,129,0.12) !important;
  outline: none !important;
}
.bcc-search-modal__input::placeholder { color: #a8b8b4 !important; }

/* Botón X — reset total, gris neutro, sin borde, sin rojo */
.bcc-search-modal__clear {
  all: unset !important;
  box-sizing: border-box !important;
  position: absolute !important;
  right: 0.5rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: #9ca3af !important;
  background: transparent !important;
  border: none !important;
  border-radius: 50% !important;
  padding: 0 !important;
  transition: color 0.15s, background 0.15s !important;
}
.bcc-search-modal__clear:hover {
  color: #374151 !important;
  background: rgba(0,0,0,0.06) !important;
}
.bcc-search-modal__clear.is-visible { display: flex !important; }

/* Botón Rechercher — teal con texto blanco como Lovable */
.bcc-search-modal__submit {
  all: unset !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  padding: 0.625rem 1.25rem !important;
  background: #188A81 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0.5rem !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: background 0.2s !important;
}
.bcc-search-modal__submit:hover {
  background: #126e67 !important;
  color: #fff !important;
}

.bcc-search-modal__submit {
  flex-shrink: 0;
  padding: 0.625rem 1.25rem;
  background: #188A81;
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  font-family: "DM Sans", sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}
.bcc-search-modal__submit:hover { background: #126e67; }

/* Hint */
.bcc-search-modal__hint {
  margin: 0.625rem 0 0;
  font-family: "DM Sans", sans-serif;
  font-size: 0.75rem;
  color: #8a9e99;
  line-height: 1.5;
}
.bcc-search-modal__hint em {
  font-style: italic;
  color: #5a7872;
}

/*
 * ═══════════════════════════════════════════════════════════════
 * MOBILE RESPONSIVE — Fiel a SiteHeader.tsx (Lovable)
 *
 * Referencia exacta Lovable:
 * - Fila superior: flex justify-between w-full relative
 *   · Izquierda: <div class="md:hidden"> hamburger (Menu/X icon h-6 w-6)
 *   · Centro:    <Link absolute left-1/2 -translate-x-1/2> logo h-10 mobile / h-14 sm / h-20 md
 *   · Derecha:   flex gap-2 ml-auto → lang (hidden md), cuenta (hidden md), cart (siempre)
 * - Menú mobile: motion.nav md:hidden, border-t bg-white, overflow-hidden
 *   · NO es fullscreen, es dropdown debajo del header (height 0→auto)
 *   · Links: py-4 px-4 text-base font-medium border-b border-gray-100 text-[#0E4C5A]
 *   · Active: bg-[#8dcac9]/15 font-bold
 *   · CTA conseil: bg-[#db0345] text-white rounded-lg py-4 px-4 text-center font-semibold my-1
 *   · Se connecter: flex items-center gap-2 border-b border-gray-100
 *   · LanguageSwitcher al final (sin border-b)
 * ═══════════════════════════════════════════════════════════════
 */

/* ── Hamburger toggle: oculto por defecto ───────────────────── */
.bcc-mobile-toggle {
  display: none;
}

/* ── Drawer mobile + overlay: ocultos por defecto ───────────── */
.bcc-mobile-menu,
.bcc-mobile-overlay {
  display: none;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE < 768px
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Row brand → flex */
  .bcc-custom-header__row--brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    position: relative;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  /* Logo centrado absolute */
  .bcc-custom-header__logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
    grid-column: auto;
  }
  .bcc-custom-header__logo img {
    /* CAUSA RAIZ encontrada: la regla base (mas arriba en este archivo,
       fuera de cualquier media query) tiene height/max-width con
       !important. Sin !important aca tambien, esta regla NUNCA podia
       vencerla -- por eso ni el height:40px original ni el max-width:150px
       del intento anterior tuvieron efecto real; el logo seguia a su
       tamano fijo de siempre (100px de alto, sin limite de ancho), lo que
       ademas explica que invadiera el espacio del boton de favoritos. */
    height: auto !important;
    width: auto !important;
    max-width: 150px !important; /* deja aire a los dos lados en una
                                     pantalla tipica de ~360-390px, con la
                                     hamburguesa a la izquierda y los
                                     iconos (favoritos+carrito) a la
                                     derecha */
    max-height: 48px !important;
  }

  /* Hamburger visible — color forzado teal, sin herencia de Elementor */
  .bcc-mobile-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    cursor: pointer;
    padding: 0.5rem;
    color: #0E4C5A !important;
    flex-shrink: 0;
    z-index: 1;
  }

  /* Nav desktop oculta */
  .bcc-custom-header__row--nav {
    display: none !important;
  }

  /* Desktop-only oculto */
  .bcc-desktop-only { display: none !important; }

  /* Cart en mobile */
  .bcc-custom-header__side--right {
    margin-left: auto;
    z-index: 1;
    padding-left: 0; /* el padding-left:9rem de la regla base (mas arriba
                         en este archivo) separa los iconos del logo en
                         desktop, donde el header es ancho. En mobile ese
                         mismo valor (144px) es casi el 40% del ancho total
                         de la pantalla y nunca se reseteaba -- por eso el
                         grupo de iconos quedaba empujado contra el logo
                         centrado. */
  }
  .bcc-header-btn--cart { padding: 0.5rem; border-color: transparent; background: transparent; }
  .bcc-header-btn--cart:hover { background: transparent; }

  /* ── DRAWER FULLSCREEN ──────────────────────────────────────── */
  .bcc-mobile-menu {
    display: none;
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 9998;
    background: #fff;
    overflow-y: auto;
    flex-direction: column;
  }
  .bcc-mobile-menu.is-open {
    display: flex !important;
  }

  .bcc-mobile-overlay {
    display: none;
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 9997;
    background: rgba(0,0,0,0.3);
  }
  .bcc-mobile-overlay.is-open { display: block; }

  /* Cuando hay sesion de administrador, WordPress agrega su propia barra
     fija arriba (clase "admin-bar" en el body) y desplaza el contenido
     normal del documento hacia abajo automaticamente -- pero eso no afecta
     a elementos position:fixed como el drawer y su overlay, que se siguen
     posicionando desde el borde real del viewport. Por eso el header del
     sitio (que es sticky, no fixed) nunca chocaba, y el drawer si. 46px es
     la altura que usa WordPress para su barra en pantallas de celular. */
  body.admin-bar .bcc-mobile-menu,
  body.admin-bar .bcc-mobile-overlay {
    top: 46px;
  }

  /* Header del drawer */
  .bcc-mobile-menu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1.5rem;    /* px-6 para alinear con los links */
    border-bottom: 1px solid #e5e7eb;
    position: relative;
    min-height: 56px;
    flex-shrink: 0;
  }
  .bcc-mobile-menu__header .bcc-custom-header__logo {
    /* Se oculta en vez de seguir centrandolo: con position:absolute
       quedaba fuera del flujo normal del flex (X - logo - corazon/carrito),
       asi que el espacio que "deberia" ocupar nunca se reservaba, y el
       corazon/carrito del lado derecho caian encima del logo centrado.
       La X de cerrar ya deja claro que se esta en el menu, y el logo
       principal del sitio sigue visible siempre en el header de arriba. */
    display: none;
  }

  /* Botón cerrar — color teal, SIN fondo rojo */
  .bcc-mobile-menu__close {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    z-index: 1;
    color: #0E4C5A !important;
  }
  .bcc-mobile-menu__close svg {
    stroke: #0E4C5A !important;
  }

  .bcc-mobile-cart {
    display: flex;
    align-items: center;
    color: #0E4C5A;
    text-decoration: none;
    padding: 0.5rem;
    z-index: 1;
    position: relative;
  }

  /* Nav del drawer — container con padding lateral como Lovable (container px) */
  .bcc-mobile-menu__nav {
    display: flex;
    flex-direction: column;
    padding: 1rem 0;          /* py-4, sin padding lateral — lo dan los links */
    flex: 1;
    gap: 0;
  }

  /* Links normales — py-4 px-6 (mayor padding lateral que antes para igualar Lovable) */
  .bcc-mobile-link {
    display: block;
    padding: 1rem 1.5rem;     /* py-4 px-6 — más espacio lateral como en Lovable */
    font-weight: 500;
    color: #0E4C5A;
    text-decoration: none;
    border-bottom: 1px solid #f3f4f6;
    background: transparent;
    transition: background 0.15s;
    font-family: var(--bcc-font-sans, 'DM Sans', sans-serif);
    border-radius: 0.5rem;   /* sutil redondeo en hover */
  }
  .bcc-mobile-link:hover { background: #f9fafb; }
  .bcc-mobile-link--active {
    background: rgba(141,202,201,0.15);
    font-weight: 700;
    color: #0E4C5A;
  }

  /* CTA Conseil — rojo redondeado */
  .bcc-mobile-cta {
    display: block;
    margin: 0.25rem 1.5rem;    /* mismo margen lateral que los links */
    padding: 1rem;
    background: #db0345 !important;
    color: #fff !important;
    text-align: center;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.15s;
    font-family: var(--bcc-font-sans, 'DM Sans', sans-serif);
  }
  .bcc-mobile-cta:hover { opacity: 0.9; color: #fff !important; }

  /* Se connecter */
  .bcc-mobile-link--connect {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
  }

  /* Footer lang switcher */
  .bcc-mobile-menu__footer {
    padding: 0.75rem 1.5rem;   /* px-6 para alinear con los links */
    border-top: 1px solid #e5e7eb;
    flex-shrink: 0;
  }
}

/* ── TABLET 768–960px ───────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 960px) {
  .bcc-custom-header__row--brand { grid-template-columns: auto 1fr auto; gap: 0.5rem; }
  .bcc-custom-header__logo img   { max-height: 52px; }
  .bcc-header-btn span           { display: none; }
  .bcc-header-btn                { padding: 0.45rem 0.6rem; }
  .bcc-custom-header__row--nav   { grid-template-columns: 1fr; }
  .bcc-custom-header__nav-side   { justify-content: center; }
  .bcc-primary-menu              { justify-content: center; }
  .bcc-primary-menu a            { padding: 0.45rem 0.6rem; font-size: 0.8rem; }
  .bcc-conseil-cta               { font-size: 0.75rem; padding: 0.6rem 1rem; }
}

/* ── DESKTOP ≥ 768px ────────────────────────────────────────── */
@media (min-width: 768px) {
  .bcc-mobile-toggle,
  .bcc-mobile-menu,
  .bcc-mobile-overlay { display: none !important; }
}

/* Glassmorphism al scroll */
.bcc-custom-header.is-scrolled {
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}