/* ============================================================
   Header — Barre de navigation principale
   ============================================================ */

.vc-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--vc-header-z);
  height: var(--vc-header-height);
  transition: background-color var(--vc-duration-base) var(--vc-ease),
              box-shadow var(--vc-duration-base) var(--vc-ease),
              height var(--vc-duration-base) var(--vc-ease);
}

/* Le menu mobile plein écran (.vc-nav, position:fixed) vit DANS .vc-header :
   son propre z-index ne compte que face à ses frères à l'intérieur de
   .vc-header, jamais face à un élément extérieur comme la bannière de
   consentement (z: calc(header + 50), voir consent.css) — un enfant ne peut
   pas dépasser en z-index le contexte d'empilement d'un frère de son
   ANCÊTRE. Il faut monter .vc-header lui-même, pas .vc-nav. */
.vc-header.is-nav-open {
  z-index: calc(var(--vc-header-z) + 60);
}

/* Header transparent sur le hero */
.vc-header--transparent {
  background-color: transparent;
}

/* Le menu et le logo passent en blanc sur fond transparent. Sans voile propre,
   ils deviennent illisibles dès qu'une diapositive claire passe dessous — le
   dégradé du hero ne couvre que 0.35 d'opacité en haut. Ce scrim garantit le
   contraste quelle que soit l'image, et disparaît avec le header solide. */
.vc-header--transparent:not(.is-scrolled)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(13, 13, 11, .55), rgba(13, 13, 11, 0));
}

/* Header solide sur les autres pages + après scroll */
.vc-header--solid,
.vc-header.is-scrolled {
  background-color: var(--vc-header-bg);
  box-shadow: 0 1px 0 var(--vc-color-border-soft);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
}

.vc-header.is-scrolled { height: 68px; }

/* backdrop-filter crée un nouveau bloc englobant pour tout descendant en
   position:fixed (règle CSS, pas un bug de navigateur) : le menu mobile
   plein écran (.vc-nav, position:fixed) — vivant DANS .vc-header — se
   positionnait alors par rapport aux 88px du header et non plus par rapport
   à l'écran. Invisible sur l'accueil (header transparent tant qu'on n'a pas
   scrollé) mais systématique sur toute page classique, toujours en header
   solide. Le flou n'a plus d'utilité une fois le menu ouvert (fond opaque
   posé par .vc-nav.is-open), on le retire simplement à ce moment-là. */
.vc-header.is-nav-open {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.vc-header-inner {
  display: flex;
  align-items: center;
  height: 100%;
  gap: var(--vc-space-8);
}

/* ─── Logo ────────────────────────────────────────────────── */

.vc-header-brand { flex-shrink: 0; }

.vc-header-logo-link {
  position: relative;
  display: block;
  text-decoration: none;
  line-height: 0;
}

.vc-header-logo {
  height: 46px;
  width: auto;
  object-fit: contain;
  display: block;
  transition: opacity var(--vc-duration-base) var(--vc-ease),
              height var(--vc-duration-base) var(--vc-ease);
}

/* Les deux versions se superposent : on ne fait varier que l'opacité */
.vc-header-logo--light-bg {
  position: absolute;
  inset: 0;
  height: 100%;
}

.vc-header.is-scrolled .vc-header-logo { height: 38px; }

/* Fond transparent (au-dessus du hero) → logo blanc */
.vc-header--transparent:not(.is-scrolled) .vc-header-logo--light-bg { opacity: 0; }
.vc-header--transparent:not(.is-scrolled) .vc-header-logo--dark-bg  { opacity: 1; }

/* Fond clair (header solide ou scrollé) → logo couleur */
.vc-header--solid .vc-header-logo--dark-bg,
.vc-header.is-scrolled .vc-header-logo--dark-bg { opacity: 0; }
.vc-header--solid .vc-header-logo--light-bg,
.vc-header.is-scrolled .vc-header-logo--light-bg { opacity: 1; }

.vc-header-site-name {
  font-family: var(--vc-font-heading);
  font-size: var(--vc-font-size-lg);
  font-weight: 600;
  color: var(--vc-color-ink);
  letter-spacing: var(--vc-tracking-tight);
}
.vc-header--transparent:not(.is-scrolled) .vc-header-site-name { color: var(--vc-on-dark); }

/* ─── Navigation ──────────────────────────────────────────── */

.vc-nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

/* ─── Langues (dépliant, drapeau courant + les autres) ───────── */

.vc-header-lang {
  position: relative;
  flex-shrink: 0;
}

.vc-header-lang-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 var(--vc-space-2) 0 10px;
  background: none;
  border: 1px solid var(--vc-color-border);
  border-radius: var(--vc-radius-full);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  color: var(--vc-color-ink);
  transition: border-color var(--vc-duration-fast) var(--vc-ease);
}

.vc-header-lang-toggle:hover { border-color: var(--vc-color-primary); }

.vc-header-lang-toggle .vc-icon {
  flex: 0 0 auto;
  color: var(--vc-color-grey-500);
  transition: transform var(--vc-duration-fast) var(--vc-ease);
}

.vc-header-lang-toggle[aria-expanded="true"] .vc-icon {
  transform: rotate(180deg);
}

/* Sur le hero (fond transparent), le halo clair se lit sur fond sombre plutôt
   que la bordure grise prévue pour un header solide. */
.vc-header--transparent:not(.is-scrolled) .vc-header-lang-toggle {
  border-color: var(--vc-on-dark-border);
  color: var(--vc-on-dark);
}
.vc-header--transparent:not(.is-scrolled) .vc-header-lang-toggle .vc-icon {
  color: var(--vc-on-dark-muted);
}

/* Drapeaux SVG (inc/language.php) — les émojis de drapeau ne s'affichent pas sous Windows */
.vc-flag {
  display: block;
  flex: 0 0 auto;
  width: 20px;
  height: 14px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px var(--vc-color-border-soft);
}

.vc-header-lang-list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 160px;
  background-color: var(--vc-color-surface);
  border: 1px solid var(--vc-color-border-soft);
  border-radius: var(--vc-radius-md);
  padding: var(--vc-space-2);
  box-shadow: var(--vc-shadow-md);
  z-index: 1;
}

.vc-header-lang-list[hidden] { display: none; }

.vc-header-lang-option {
  display: flex;
  align-items: center;
  gap: var(--vc-space-3);
  padding: var(--vc-space-2) var(--vc-space-3);
  border-radius: var(--vc-radius-sm);
  font-size: 15px;
  color: var(--vc-color-ink);
  text-decoration: none;
}

.vc-header-lang-option span:last-child {
  font-family: var(--vc-font-body);
  font-size: var(--vc-font-size-sm);
}

.vc-header-lang-option:hover,
.vc-header-lang-option:focus-visible {
  background-color: var(--vc-color-cream-2);
}

/* ─── Actions ─────────────────────────────────────────────── */

.vc-header-actions {
  display: flex;
  align-items: center;
  gap: var(--vc-space-2);
  flex-shrink: 0;
}

/* ─── Burger ──────────────────────────────────────────────── */

.vc-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: 1px solid var(--vc-color-border);
  border-radius: var(--vc-radius-full);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: border-color var(--vc-duration-fast) var(--vc-ease);
}
.vc-nav-toggle:hover { border-color: var(--vc-color-primary); }

.vc-burger-line {
  display: block;
  width: 18px;
  height: 1.5px;
  background-color: var(--vc-color-ink);
  border-radius: 2px;
  transition: transform var(--vc-duration-base) var(--vc-ease),
              opacity var(--vc-duration-base) var(--vc-ease),
              background-color var(--vc-duration-base) var(--vc-ease);
}

/* Burger sur le hero (fond sombre) */
.vc-header--transparent:not(.is-scrolled) .vc-nav-toggle { border-color: var(--vc-on-dark-border); }
.vc-header--transparent:not(.is-scrolled) .vc-burger-line { background-color: var(--vc-on-dark); }

.vc-nav-toggle[aria-expanded="true"] .vc-burger-line:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.vc-nav-toggle[aria-expanded="true"] .vc-burger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.vc-nav-toggle[aria-expanded="true"] .vc-burger-line:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Menu mobile ouvert : fond clair, burger toujours lisible */
.vc-header.is-nav-open .vc-nav-toggle { border-color: var(--vc-color-border); }
.vc-header.is-nav-open .vc-burger-line { background-color: var(--vc-color-ink); }

/* ─── Responsive ──────────────────────────────────────────── */

@media (max-width: 1100px) {
  .vc-header-actions .vc-btn--ghost { display: none; }
}

@media (max-width: 900px) {
  .vc-nav-toggle {
    display: flex;
    /* .vc-header-actions passe à display:none et .vc-nav sort du flux
       (position:fixed ci-dessous) : sans ça, il ne reste que le logo et le
       burger dans la ligne flex de .vc-header-inner, qui se collent l'un à
       l'autre à gauche au lieu que le burger reste à droite. */
    margin-left: auto;
  }
  .vc-header-actions { display: none; }

  /* Sur mobile, un accès direct doit rester visible dans la barre :
     - visiteur : Connexion
     - membre connecté : Mon espace */
  body:not(.logged-in) .vc-header-actions {
    display: flex;
    margin-left: auto;
  }

  body.logged-in .vc-header-actions {
    display: flex;
    margin-left: auto;
  }

  body:not(.logged-in) .vc-header-actions .vc-btn {
    padding-left: var(--vc-space-3);
    padding-right: var(--vc-space-3);
  }

  /* Une seule action visible en mobile connecté : Mon espace. */
  body.logged-in .vc-header-actions .vc-btn--ghost {
    display: none;
  }

  body.logged-in .vc-header-actions .vc-btn {
    padding-left: var(--vc-space-3);
    padding-right: var(--vc-space-3);
  }

  body:not(.logged-in) .vc-nav-toggle {
    margin-left: var(--vc-space-2);
  }

  body.logged-in .vc-nav-toggle {
    margin-left: var(--vc-space-2);
  }

  .vc-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--vc-color-bg);
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    padding: var(--vc-header-height) var(--vc-container-padding) var(--vc-space-10);
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--vc-duration-base) var(--vc-ease),
                visibility var(--vc-duration-base);
  }

  .vc-nav.is-open {
    visibility: visible;
    opacity: 1;
  }
}

/* ─── Barre d'administration WordPress ───────────────────────────────────────
   Visible pour les administrateurs sur les pages du site (jamais dans l'app :
   vc_golf7_is_app_page()). L'en-tête est en position fixe à top:0 : sans ce
   décalage, la barre noire de WordPress le recouvrait. Hauteur : 32px, 46px
   sous 782px (valeurs de WordPress).

   Sous 600px, WordPress laisse la barre défiler avec la page (position
   absolute) : l'en-tête, lui, reste collé à 46px du haut et laissait un vide.
   On garde la barre fixe à toutes les largeurs — un seul cas à gérer. */
body.admin-bar {
  --vc-adminbar-height: 32px;
}

@media (max-width: 782px) {
  body.admin-bar {
    --vc-adminbar-height: 46px;
  }
}

@media (max-width: 600px) {
  body.admin-bar #wpadminbar {
    position: fixed;
  }
}

body.admin-bar .vc-header {
  top: var(--vc-adminbar-height);
}

/* Menu mobile plein écran : il démarre sous la barre, pas derrière. */
body.admin-bar .vc-nav {
  top: var(--vc-adminbar-height);
}