/* =========================================================================
 * JLMB — Barre de navigation globale
 *
 * Cette CSS s'applique à toutes les pages *sauf* la landing (template-demo),
 * qui possède son propre header déjà stylé via demo.css.
 *
 * Objectif : remplacer intégralement le header The7 (désactivé côté PHP)
 * par une barre cohérente avec la landing, utilisant l'ancien logo PNG.
 *
 * Parti pris visuel :
 *  · sticky en haut, fond blanc translucide avec flou (cohérent avec la demo) ;
 *  · logo à gauche (image PNG), menu + CTA à droite ;
 *  · mobile : menu repliable via bouton burger.
 * ========================================================================= */

/* Variables locales (autonomes : pas de dépendance à demo.css).
   Palette alignée sur le logo JLMB :
    · --jlmb-nav-ink (#0B1F3A) = bleu marine du fond du logo = couleur de CTA ;
    · --jlmb-nav-accent (#F39200) = orange vif du logo (flèche + "BUSINESS")
      = couleur de marque, réservée aux touches d'accent (pas au CTA global,
      pour rester cohérent avec le CTA de la landing, qui est en bleu marine). */
:root {
  --jlmb-nav-ink: #0B1F3A;
  --jlmb-nav-ink-2: #30425A;
  --jlmb-nav-ink-hover: #16407F;
  --jlmb-nav-muted: #6B7891;
  --jlmb-nav-line: rgba(11, 31, 58, .08);
  --jlmb-nav-accent: #F39200;
  --jlmb-nav-accent-dark: #D17E00;
  --jlmb-nav-bg-soft: #F4F6FA;
  --jlmb-nav-container: 1200px;
  --jlmb-nav-height: 72px;
  --jlmb-nav-duration: .22s;
  --jlmb-nav-ease: cubic-bezier(.2,.7,.2,1);
}

/* Filet de sécurité : si un résidu de header The7 venait à s'afficher
   malgré le filtre PHP, on le masque visuellement (ceinture + bretelles). */
body.jlmb-global-nav-active #phantom,
body.jlmb-global-nav-active .masthead,
body.jlmb-global-nav-active #masthead,
body.jlmb-global-nav-active .masthead.mobile-header,
body.jlmb-global-nav-active .masthead-container,
body.jlmb-global-nav-active .dt-mobile-header {
  display: none !important;
}

/* Décalage pour ne pas masquer le contenu derrière la barre sticky. */
body.jlmb-global-nav-active {
  margin: 0;
}

/* ------ Barre principale ------ */
.jlmb-gnav {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--jlmb-nav-line);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.jlmb-gnav * {
  box-sizing: border-box;
}

.jlmb-gnav__inner {
  max-width: var(--jlmb-nav-container);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--jlmb-nav-height);
  gap: 24px;
}

/* Logo : ancienne image PNG. Hauteur contrôlée, largeur auto.
   Angles arrondis pour accorder le bloc logo aux cartes/pills de la
   landing. Le PNG ayant un fond bleu marine, le rayon est visible sur
   le fond blanc translucide de la nav sans altérer le graphique. */
.jlmb-gnav__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
  flex-shrink: 0;
}
.jlmb-gnav__logo img {
  display: block;
  height: 44px;
  width: auto;
  max-width: none;          /* neutralise un max-width:100% hérité de The7
                               qui, combiné à un parent flex trop étroit,
                               écrase la largeur du logo. */
  max-height: 52px;
  object-fit: contain;
  aspect-ratio: 300 / 125;  /* ratio natif du PNG Logo-JLMB.png (300×125) */
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(11,31,58,.08), 0 4px 10px -6px rgba(11,31,58,.18);
}

/* Liens menu */
.jlmb-gnav__links {
  display: flex;
  gap: 2px;
  align-items: center;
  flex-wrap: nowrap;
}
.jlmb-gnav__links a {
  color: var(--jlmb-nav-ink-2);
  font-weight: 500;
  font-size: 14.5px;
  padding: 8px 12px;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--jlmb-nav-duration) var(--jlmb-nav-ease),
              color var(--jlmb-nav-duration) var(--jlmb-nav-ease);
}
.jlmb-gnav__links a:hover,
.jlmb-gnav__links a:focus-visible {
  background: var(--jlmb-nav-bg-soft);
  color: var(--jlmb-nav-ink);
  outline: none;
}

/* CTA */
.jlmb-gnav__cta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.jlmb-gnav__cta a { white-space: nowrap; }

/* Lien "Devenir partenaire" : même grammaire que sur la landing
   (petit point orange, typographie du menu, non-tapageur). */
.jlmb-gnav__link-partner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--jlmb-nav-ink-2);
  padding: 8px 12px;
  border-radius: 8px;
  text-decoration: none;
  transition: background var(--jlmb-nav-duration) var(--jlmb-nav-ease),
              color var(--jlmb-nav-duration) var(--jlmb-nav-ease);
}
.jlmb-gnav__link-partner::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--jlmb-nav-accent);
  box-shadow: 0 0 0 3px rgba(243, 146, 0, .18);
}
.jlmb-gnav__link-partner:hover {
  background: var(--jlmb-nav-bg-soft);
  color: var(--jlmb-nav-ink);
}
@media (max-width: 1200px) {
  .jlmb-gnav__link-partner { display: none; }
}

.jlmb-gnav__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  /* Bleu marine du logo : miroir du .jlmb-btn--primary de la landing pour
     que le CTA garde la même couleur d'une page à l'autre. */
  background: var(--jlmb-nav-ink);
  color: #fff;
  border: 1px solid var(--jlmb-nav-ink);
  transition: background var(--jlmb-nav-duration) var(--jlmb-nav-ease),
              border-color var(--jlmb-nav-duration) var(--jlmb-nav-ease),
              transform var(--jlmb-nav-duration) var(--jlmb-nav-ease);
}
.jlmb-gnav__btn:hover {
  background: var(--jlmb-nav-ink-hover);
  border-color: var(--jlmb-nav-ink-hover);
  color: #fff;
  transform: translateY(-1px);
}

/* ------ Burger (mobile) ------ */
.jlmb-gnav__burger {
  display: none;
  background: transparent;
  border: 0;
  padding: 8px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
  cursor: pointer;
}
.jlmb-gnav__burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--jlmb-nav-ink);
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
.jlmb-gnav__burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.jlmb-gnav__burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.jlmb-gnav__burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Menu mobile déplié */
.jlmb-gnav__mobile {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 14px 20px 20px;
  border-top: 1px solid var(--jlmb-nav-line);
  background: #fff;
}
.jlmb-gnav__mobile a {
  padding: 12px 14px;
  border-radius: 8px;
  color: var(--jlmb-nav-ink);
  text-decoration: none;
  font-weight: 500;
  font-size: 15.5px;
}
.jlmb-gnav__mobile a:hover {
  background: var(--jlmb-nav-bg-soft);
}
.jlmb-gnav__mobile a.jlmb-gnav__btn {
  margin-top: 10px;
  justify-content: center;
  color: #fff;
}

/* Palier intermédiaire : on resserre un peu avant de basculer en burger
   pour éviter que les items à deux mots ne cassent en deux lignes. */
@media (max-width: 1200px) {
  .jlmb-gnav__inner { gap: 16px; }
  .jlmb-gnav__links a { padding: 8px 10px; font-size: 14px; }
}

/* Breakpoint : on bascule en version mobile */
@media (max-width: 1040px) {
  .jlmb-gnav__links,
  .jlmb-gnav__cta {
    display: none;
  }
  .jlmb-gnav__burger {
    display: inline-flex;
  }
  .jlmb-gnav__mobile[data-open="true"] {
    display: flex;
  }
  .jlmb-gnav__logo img {
    height: 38px;
    border-radius: 10px;
  }
}

/* Compatibilité WP admin bar */
body.admin-bar .jlmb-gnav {
  top: 32px;
}
@media (max-width: 782px) {
  body.admin-bar .jlmb-gnav {
    top: 46px;
  }
}