/* ==========================================================================
   Styles du header BHI extraits de index-polish.css.

   POURQUOI CE FICHIER : le mega-menu « Odoo Apps » est injecte par
   header-corporate.js, mais l'essentiel de son habillage vit dans
   index-polish.css. Or ce fichier porte aussi des regles globales toxiques
   hors de la page d'accueil :

       body { display: grid; grid-template-columns: 1fr 1fr; ... }
       html, body, .hero { background: #F5F2EA !important; }

   Le charger en entier casserait la mise en page du magasin. On n'extrait
   donc que les regles scopees au header : .bh-*, .mega-*, .lang-*,
   .mobile-*, .sub-*.

   GENERE — ne pas editer a la main. Si le mega-menu change dans
   index-polish.css, regenerer ce fichier.
   ========================================================================== */

/* lang toggle: ghost pill */
nav:not(.bh-nav) .lang-toggle,
nav:not(.bh-nav) .nav-actions .lang-toggle {
  background: transparent !important;
  border: 1px solid rgba(15, 31, 53, 0.15) !important;
  color: #0F1F35 !important;
  padding: 0.55rem 0.95rem !important;
  border-radius: 999px !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  transition: border-color 0.25s ease, background 0.25s ease !important;
}
nav:not(.bh-nav) .lang-toggle:hover {
  background: rgba(15, 31, 53, 0.05) !important;
  border-color: rgba(15, 31, 53, 0.3) !important;
}
/* =================================================================
   ODOO APPS — Mega Panel (click-to-open)
   ================================================================= */
nav .nav-links .has-mega, nav .bh-menu .has-mega { position: relative; }
nav:not(.bh-nav) .nav-links .mega-trigger {
  display: inline-flex !important;
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer !important;
  color: rgba(255,255,255,0.78) !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 8px 14px !important;
  border-radius: 99px !important;
  letter-spacing: 0 !important;
  transition: color .2s, background .2s !important;
}
nav:not(.bh-nav) .nav-links .mega-trigger:hover,
nav:not(.bh-nav) .nav-links .mega-trigger.is-open {
  color: #ffffff !important;
  background: rgba(255,255,255,0.08) !important;
}
.mega-caret { margin-left: 4px; transition: transform .25s ease; }
.mega-trigger.is-open .mega-caret { transform: rotate(180deg); }
.mega-panel {
  position: fixed;
  top: 88px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1240px, calc(100vw - 48px));
  /* the panel gets TALLER as viewports get shorter (grid drops to 2 then 1
     column), and being fixed-position, page scroll can't reveal any overflow.
     Cap it to the space under the header and scroll inside instead. */
  max-height: calc(100vh - var(--nav-h, 146px) - 20px);
  /* dvh tracks the *small* viewport, so the cap stays inside the fold while a
     mobile URL bar is showing; the vh line above is the fallback. */
  max-height: calc(100dvh - var(--nav-h, 146px) - 20px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: #FAFAF8;
  border-radius: 18px;
  box-shadow:
    0 40px 80px -16px rgba(15, 31, 53, 0.32),
    0 24px 48px -8px rgba(15, 31, 53, 0.22),
    0 0 0 1px rgba(15, 31, 53, 0.05);
  padding: 36px 44px;
  z-index: 80;
  animation: mega-in .25s cubic-bezier(.16,1,.3,1);
}
.mega-panel[hidden] { display: none; }
.mega-panel-inner { max-width: 100%; }
.mega-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto;
  gap: 28px 32px;
}
.mega-cat h4 {
  font-family: 'Geist Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  margin: 0 0 14px !important;
  padding-bottom: 10px !important;
  border-bottom: 1.5px solid currentColor !important;
}
.mega-cat-finance h4 { color: #4A6890; }
/* navy medium */
.mega-cat-sales h4 { color: #8A6A32; }
/* gold, darkened for AA on the light panel */
.mega-cat-websites h4 { color: #3F6675; }
/* dusty teal, darkened for AA */
.mega-cat-supply h4 { color: #8A6A32; }
.mega-cat-hr h4 { color: #4A6890; }
.mega-cat-marketing h4 { color: #8A6A32; }
.mega-cat-services h4 { color: #8A6A32; }
.mega-cat-productivity h4 { color: #4A6890; }
.mega-cat ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.mega-cat ul li { margin: 0 !important; padding: 0 !important; }
.mega-cat ul a {
  display: block !important;
  padding: 6px 8px !important;
  margin: 0 -8px !important;
  color: #1a1a1a !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  font-family: 'Geist', system-ui, sans-serif !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  background: transparent !important;
  border-radius: 6px !important;
  transition: background .15s, color .15s, padding .15s !important;
  white-space: normal !important;
}
.mega-cat ul a:hover {
  background: rgba(15, 31, 53, 0.06) !important;
  color: #0F1F35 !important;
  padding-left: 12px !important;
}
@media (max-width: 1100px) {
  .mega-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .mega-panel { padding: 24px; }
  .mega-grid { grid-template-columns: 1fr; gap: 20px; }
}
.mega-panel::-webkit-scrollbar { width: 10px; }
.mega-panel::-webkit-scrollbar-track { background: transparent; }
.mega-panel::-webkit-scrollbar-thumb {
  background: rgba(15, 31, 53, 0.18);
  border-radius: 99px;
  border: 3px solid #FAFAF8;
}
.mega-panel::-webkit-scrollbar-thumb:hover { background: rgba(15, 31, 53, 0.3); }
/* =================================================================
   MOBILE — hamburger menu & responsive nav pill
   ================================================================= */
.mobile-menu-btn,
.mobile-menu-panel {display:none}
@media (max-width: 980px) {
  nav .lang-toggle button {padding:5px 7px !important; font-size:10px !important}
  .mobile-menu-btn {
    display:inline-flex !important; align-items:center; justify-content:center;
    width:36px; height:36px; border-radius:99px;
    background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
    color:#fff; cursor:pointer; padding:0;
  }
  .mobile-menu-btn svg {width:18px; height:18px}
  .mobile-menu-panel {
    display:none; position:fixed; top:72px; left:14px; right:14px;
    background:#0a1525; border-radius:18px; padding:16px;
    box-shadow:0 24px 60px -16px rgba(15,31,53,.6); z-index:48;
  }
  .mobile-menu-panel.open {display:block}
  .mobile-menu-panel a {
    display:block; padding:12px 16px; color:rgba(255,255,255,.85);
    text-decoration:none; font-size:15px; border-radius:10px;
    transition:background .2s, color .2s;
  }
  .mobile-menu-panel a:hover, .mobile-menu-panel a.active {
    background:rgba(255,255,255,.08); color:#fff;
  }
  .mobile-menu-panel a + a {margin-top:2px}
}
/* highlighted column reads as gold, not a pale grey slab */


/* =================================================================
   CONTRAST REPAIRS — measured, not guessed
   1. lang dropdown: the header rule .lang-toggle button.active set
      color:#fff, but the dropdown option sits on cream -> ratio 1.12
   2. Loi 25 inner text kept its light-band grey (#4A4A55) on navy -> 1.89
   3. dark-band table head was mid grey (#6b6b6b) on navy
   ================================================================= */
.bh-bar-right .lang-select-menu button,
.lang-select-menu button {color:#0F1F35 !important}
.bh-bar-right .lang-select-menu button.active,
.lang-select-menu button.active {background:#F5F2EA !important;color:#0F1F35 !important}