/* ============================================================
   HEADER CORPORATE BOLLWERK — Réplique du header de bollwerk-joailliers.com
   Chargé via wp_enqueue_style (inc/enqueue-assets.php)
   Le HTML correspondant : partials/header-corporate-bollwerk.html
   (à coller dans l'éditeur "Custom Header" de LiveCanvas)
   ============================================================ */

.bw-header, .bw-header * { box-sizing: border-box; }
  .bw-header {
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    color: #2F2D2D;
    background: #ffffff;
    position: relative;
    z-index: 999;
  }
  .bw-header a { color: inherit; text-decoration: none; }
  .bw-header ul { list-style: none; margin: 0; padding: 0; }
  .bw-header button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }

  /* ---------- Barre du haut : logo centré + badge Rolex ---------- */
  .bw-topbar__inner {
    max-width: 1800px;
    margin: 0 auto;
    padding: 15px 30px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  .bw-logo { grid-column: 2; justify-self: center; }
  .bw-logo img { display: block; width: 170px; height: auto; }

  /* Cadre "carte" autour du logo, desktop uniquement (>= 992px) :
     fond blanc, coins arrondis, fine bordure grise, ombre douce. */
  @media (min-width: 992px) {
    .bw-logo {
      background: #ffffff;
      border: 1.2px solid #E4E4E4;
      border-radius: 0px;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
      padding: 8px 20px; /* moins de padding, mais horizontal > vertical -> reste rectangulaire */
    }
  }
  .bw-badge { grid-column: 3; justify-self: end; }
  .bw-badge img { display: block; width: 150px; height: auto; }

  /* ---------- Barre de navigation ---------- */
  .bw-nav {
    border-top: 1px solid #eee;
  }
  .bw-nav__inner {
    max-width: 1800px;
    margin: 0 auto;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 52px;
  }

  /* Menu principal (desktop)
     flex-wrap: nowrap volontaire — le menu ne doit JAMAIS revenir à la
     ligne sur cette rangée horizontale (ex. "CONTACT" qui se replie tout
     seul selon le navigateur). En dessous de 1280px, le point de rupture
     mobile ci-bas bascule sur le panneau burger ; au-dessus, le palier
     "compact" (1280–1439px) réduit gap/font pour garantir que les 10
     entrées tiennent sur une seule ligne, avec une bonne marge de
     sécurité (mesuré : ~1285px requis à 32px/16px, ~1100px à 16px/15px). */
  .bw-menu {
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: nowrap;
    justify-content: center;
  }
  .bw-menu > li { position: relative; display: flex; align-items: center; }
  .bw-menu > li > a {
    font-size: 16px;
    line-height: 1.2;
    padding: 16px 0;
    white-space: nowrap;
  }
  .bw-menu > li:not(.bw-mobile-logo):hover > a,
  .bw-menu > li:not(.bw-mobile-logo):focus-within > a,
  .bw-menu > li:not(.bw-mobile-logo).is-open > a { text-decoration: underline; text-underline-offset: 4px; }

  /* Logo affiché uniquement en haut du panneau mobile (masqué par défaut,
     réactivé dans le point de rupture mobile plus bas) */
  .bw-menu > li.bw-mobile-logo { display: none; } /* spécificité > ".bw-menu > li { display:flex }" ci-dessus */
  .bw-menu > li.bw-mobile-logo > a {
    display: flex;
    justify-content: center;
    padding: 20px 24px 16px;
  }
  .bw-mobile-logo img { display: block; height: 48px; width: auto; } /* +20% (était 40px) */

  .bw-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: 2px;
    padding: 16px 0;
  }
  .bw-toggle svg { width: 10px; height: 10px; transition: transform .2s ease; }
  li:hover > .bw-toggle svg,
  li:focus-within > .bw-toggle svg,
  li.is-open > .bw-toggle svg { transform: rotate(180deg); }

  /* Sous-menus (niveau 2) */
  .bw-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 8px 24px rgba(149,157,165,.2);
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
    z-index: 10;
  }
  .bw-menu > li:hover > .bw-submenu,
  .bw-menu > li:focus-within > .bw-submenu,
  .bw-menu > li.is-open > .bw-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* Sous-sous-menus et au-delà (flyout niveau 3+, imbrication récursive :
     un .bw-flyout peut lui-même contenir un .bw-subrow + .bw-flyout,
     ex. HORLOGERIE > Marques > TUDOR > BLACK BAY / PELAGOS / ...) */
  .bw-submenu > li,
  .bw-flyout > li { position: relative; }

  .bw-submenu > li > a,
  .bw-flyout > li > a,
  .bw-submenu > li > .bw-subrow,
  .bw-flyout > li > .bw-subrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 22px;
    font-size: 15px;
    white-space: nowrap;
    position: relative; /* ancre la ligne (::after) animée au survol */
  }
  /* Ligne noire pleine largeur, collée en bas : part du centre et se déploie
     vers les extrémités au survol, et se rétracte vers le centre quand on
     quitte le survol (scaleX + transform-origin: center). */
  .bw-submenu > li > a::after,
  .bw-flyout > li > a::after,
  .bw-submenu > li > .bw-subrow::after,
  .bw-flyout > li > .bw-subrow::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: #000;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .25s ease;
  }
  .bw-submenu > li > a:hover,
  .bw-flyout > li > a:hover,
  .bw-submenu > li:hover > .bw-subrow,
  .bw-flyout > li:hover > .bw-subrow,
  .bw-submenu > li:focus-within > .bw-subrow,
  .bw-flyout > li:focus-within > .bw-subrow,
  .bw-submenu > li.is-open > .bw-subrow,
  .bw-flyout > li.is-open > .bw-subrow {
    background: #F4F5F7;
  }
  .bw-submenu > li > a:hover::after,
  .bw-flyout > li > a:hover::after,
  .bw-submenu > li:hover > .bw-subrow::after,
  .bw-flyout > li:hover > .bw-subrow::after,
  .bw-submenu > li:focus-within > .bw-subrow::after,
  .bw-flyout > li:focus-within > .bw-subrow::after,
  .bw-submenu > li.is-open > .bw-subrow::after,
  .bw-flyout > li.is-open > .bw-subrow::after {
    transform: scaleX(1);
  }

  .bw-submenu .bw-toggle,
  .bw-flyout .bw-toggle { padding: 0; width: 14px; height: 14px; }
  .bw-submenu .bw-toggle svg,
  .bw-flyout .bw-toggle svg { width: 8px; height: 8px; transform: rotate(-90deg); }
  .bw-submenu li:hover > .bw-subrow .bw-toggle svg,
  .bw-flyout li:hover > .bw-subrow .bw-toggle svg,
  .bw-submenu li:focus-within > .bw-subrow .bw-toggle svg,
  .bw-flyout li:focus-within > .bw-subrow .bw-toggle svg,
  .bw-submenu li.is-open > .bw-subrow .bw-toggle svg,
  .bw-flyout li.is-open > .bw-subrow .bw-toggle svg { transform: rotate(-90deg) rotate(180deg); }

  .bw-flyout {
    position: absolute;
    top: -8px;
    left: 100%;
    min-width: 200px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 8px 24px rgba(149,157,165,.2);
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateX(4px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
    z-index: 11;
  }
  /* Ouverture au survol/focus/clic, à n'importe quelle profondeur */
  .bw-submenu > li:hover > .bw-flyout,
  .bw-submenu > li:focus-within > .bw-flyout,
  .bw-submenu > li.is-open > .bw-flyout,
  .bw-flyout > li:hover > .bw-flyout,
  .bw-flyout > li:focus-within > .bw-flyout,
  .bw-flyout > li.is-open > .bw-flyout {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }

  /* Bouton fermer le panneau mobile (masqué par défaut, réactivé en mobile plus bas) */
  .bw-close-mobile {
    display: none;
    position: absolute;
    top: 18px; right: 18px;
    width: 32px; height: 32px;
    align-items: center; justify-content: center;
  }
  .bw-close-mobile svg { width: 16px; height: 16px; }

  /* Burger (mobile uniquement) */
  .bw-burger {
    display: none;
    width: 26px;
    height: 20px;
    position: relative;
  }
  .bw-burger span {
    position: absolute; left: 0; width: 100%; height: 2px; background: #2F2D2D;
    transition: transform .2s ease, opacity .2s ease;
  }
  .bw-burger span:nth-child(1) { top: 0; }
  .bw-burger span:nth-child(2) { top: 9px; }
  .bw-burger span:nth-child(3) { top: 18px; }
  .bw-burger.is-active span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
  .bw-burger.is-active span:nth-child(2) { opacity: 0; }
  .bw-burger.is-active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

  .bw-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.4);
    opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
    z-index: 1000;
  }
  .bw-overlay.is-active { opacity: 1; visibility: visible; }

  /* ---------- Responsive : barre du haut (logo + badge Rolex) ----------
     Seuil inchangé (991px) : la barre du haut n'a jamais posé de problème
     de largeur, seule la ligne de navigation ci-dessous était concernée. */
  @media (max-width: 991px) {
    .bw-topbar__inner {
      display: block;
      position: relative;
      padding: 12px 90px 12px 20px;
      text-align: center;
    }
    .bw-logo { grid-column: auto; }
    .bw-badge {
      grid-column: auto;
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);
    }
    .bw-logo img { width: 110px; margin: 0 auto; }
    .bw-badge img { width: 64px; }
  }

  /* ---------- Responsive : palier "compact" (1280–1439px) ----------
     Juste au-dessus du seuil mobile ci-dessous : réduit l'espacement et la
     taille des liens pour garantir que les 10 entrées du menu tiennent sur
     une seule ligne avec une bonne marge de sécurité (~120px, mesuré),
     insensible aux petites variations de rendu des polices entre
     navigateurs (Chrome/Firefox/Safari). Au-dessus de 1440px, le menu
     retrouve sa taille d'origine (gap 32px / police 16px). */
  @media (min-width: 1280px) and (max-width: 1439.98px) {
    .bw-menu { gap: 16px; }
    .bw-menu > li > a { font-size: 15px; }
  }

  /* ---------- Responsive : navigation (menu + burger) ----------
     Seuil relevé de 991px à 1279px : le menu complet (10 entrées) a
     besoin d'environ 1285px de large pour tenir sur une seule ligne avec
     l'espacement/police d'origine (32px / 16px) — en dessous, certains
     navigateurs/résolutions (tablette, petits écrans desktop autour de
     1024–1280px) faisaient revenir "CONTACT" à la ligne. Le panneau
     burger prend maintenant le relais dès 1279px, garantissant que la
     ligne horizontale ne se replie jamais de façon visible. */
  @media (max-width: 1279px) {
    .bw-nav__inner { justify-content: flex-start; padding: 10px 20px; min-height: auto; }
    .bw-burger { display: block; }
    .bw-menu > li.bw-mobile-logo { display: block; } /* même spécificité que la règle de masquage ci-dessus : gagne car déclarée plus loin dans le fichier */

    /* Corrige le bug classique flexbox "min-width: auto" : sans ça, les
       <li>/<div class="bw-subrow"> flex imbriqués refusent de rétrécir
       sous la largeur intrinsèque de leur contenu (libellés longs type
       "FREDERIQUE CONSTANT"), ce qui pousse tout le panneau mobile en
       débordement horizontal au lieu de laisser le texte passer à la ligne. */
    .bw-menu, .bw-menu * { min-width: 0; }

    .bw-menu {
      position: fixed;
      top: 0; left: 0;
      width: 320px; max-width: 85vw; height: 100vh;
      background: #fff;
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: stretch;
      gap: 0;
      padding: 70px 0 30px;
      overflow-y: auto;
      overflow-x: hidden;
      transform: translateX(-100%);
      transition: transform .25s ease;
      z-index: 1001;
      box-shadow: 8px 0 24px rgba(0,0,0,.08);
    }
    .bw-menu.is-active { transform: translateX(0); }

    .bw-menu > li { flex-direction: column; align-items: stretch; border-bottom: 1px solid #F0F0F0; }
    .bw-menu > li > a { padding: 14px 24px; flex: 1; }
    .bw-menu > li > .bw-toggle { position: absolute; right: 24px; top: 6px; padding: 8px; width: 32px; height: 32px; }

    /* Sur mobile, les sous-menus se déplient en accordéon (plus de flyout) */
    .bw-submenu, .bw-flyout {
      position: static;
      min-width: 0;
      box-shadow: none;
      opacity: 1; visibility: visible; transform: none;
      max-height: 0;
      overflow: hidden;
      padding: 0;
      background: #FAFAFA;
      transition: max-height .25s ease;
    }
    .bw-menu > li.is-open > .bw-submenu { max-height: 3000px; padding: 4px 0; }
    .bw-submenu > li.is-open > .bw-flyout,
    .bw-flyout > li.is-open > .bw-flyout { max-height: 2000px; padding: 4px 0; }
    .bw-submenu > li > a, .bw-submenu > li > .bw-subrow { padding-left: 36px; }
    .bw-flyout > li > a, .bw-flyout > li > .bw-subrow { padding-left: 50px; }
    .bw-flyout .bw-flyout > li > a, .bw-flyout .bw-flyout > li > .bw-subrow { padding-left: 64px; }

    /* Évite le débordement horizontal / scroll-clip sur les libellés longs
       des niveaux profonds (ex. "FREDERIQUE CONSTANT", "1926 LUNA") */
    .bw-submenu > li > a, .bw-flyout > li > a,
    .bw-submenu > li > .bw-subrow, .bw-flyout > li > .bw-subrow {
      white-space: normal;
    }

    .bw-close-mobile { display: flex; }
  }