/* ============================================================
   PHONOMAKER — HEADER GLOBAL
   Commun à toutes les pages (Studio, Notre Histoire, Vinyle,
   Réservation, FAQ, etc.). Scopé sous .pm-global-header pour
   éviter toute fuite sur les styles Divi ou des tiers.

   Palette : #CF3417 orange · #1B4082 bleu · #6BB0C5 cyan
             #F0E7D2 paper · #1F2221 ink
   ============================================================ */

/* ─── VARIABLES ─────────────────────────────────────────────────── */
.pm-global-header {
  --pmh-orange:  #CF3417;
  --pmh-blue:    #1B4082;
  --pmh-paper:   #F0E7D2;
  --pmh-ink:     #1F2221;
  --pmh-white:   #EEEFF1;
  --pmh-font-display: "Impact","Anton",Impact,"Arial Narrow Bold",sans-serif;
  --pmh-font-body:    "Inter",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;

  /* hauteur du bandeau — alignée sur --pm-h de vinyle.css (60px)
     pour que la sous-nav vinyle collante se cale pile dessous */
  --pmh-height: 60px;
}

/* ─── COMPATIBILITÉ AVEC LES UNIVERS EXISTANTS ──────────────────────
   Les pages Vinyle utilisent une sous-nav collante calée sur --pm-h,
   et un wrapper .pm-vu { padding-top: var(--pm-h) }. On aligne donc
   --pm-h sur la hauteur réelle du header global (60px) pour que rien
   ne passe sous le header et que la sous-nav se positionne juste
   en dessous. */
.pm-vinyl { --pm-h: 60px; }

/* ─── CHROME (bande fixe en haut) ───────────────────────────────── */
.pm-global-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  /* état HAUT DE PAGE : fond sombre translucide + blur (lisible même
     sur un hero clair comme Vinyle/Studio), grand logo */
  background: rgba(12,15,14,.72);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(238,239,241,.04);
  transition: background .5s cubic-bezier(.22,1,.36,1),
              border-color .5s cubic-bezier(.22,1,.36,1);
}

/* état SCROLLÉ : fond quasi opaque, plus sombre */
.pm-global-header.is-scrolled {
  background: rgba(10,12,11,.94);
  border-bottom-color: rgba(238,239,241,.1);
}

/* ─── NAV INTERNE ────────────────────────────────────────────────── */
.pm-global-header nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px;
  height: 60px;
  gap: 24px;
}

/* ─── LOGO (brand) ───────────────────────────────────────────────── */
.pmh-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex: none;
}
.pmh-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--pmh-orange);
  animation: pmhPulseDot 2s ease-in-out infinite;
  flex: none;
}
@keyframes pmhPulseDot {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.45; transform:scale(.8); }
}
.pmh-brand img {
  height: 30px; /* grand au haut */
  width: auto;
  display: block;
  user-select: none;
  transition: height .4s cubic-bezier(.22,1,.36,1);
}
/* logo réduit au scroll */
.pm-global-header.is-scrolled .pmh-brand img {
  height: 22px;
}

/* ─── LIENS PRINCIPAUX ───────────────────────────────────────────── */
.pmh-links {
  display: flex;
  align-items: center;
  gap: clamp(14px,1.6vw,24px);
  flex: 1;
  justify-content: center;
}

.pm-global-header .pmh-link,
.pmh-link {
  position: relative;
  font-family: var(--pmh-font-body);
  font-weight: 700;
  font-size: 11.5px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--pmh-white);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  background: none;
  border-left: 0; border-right: 0; border-top: 0;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease;
}
.pm-global-header .pmh-link:hover,
.pmh-link:hover          { color: #fff; border-bottom-color: var(--pmh-orange); }
.pm-global-header .pmh-link.active,
.pmh-link.active         { color: var(--pmh-orange); border-bottom-color: var(--pmh-orange); }

/* ─── SOUS-MENU (dropdown) ───────────────────────────────────────── */
.pmh-has-sub {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.pmh-sub-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pmh-caret {
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s ease;
  flex: none;
}
.pmh-has-sub:hover .pmh-caret,
.pmh-has-sub:focus-within .pmh-caret {
  transform: rotate(225deg) translateY(2px);
}

.pmh-submenu {
  position: absolute;
  top: calc(100% + 16px);
  left: -14px;
  min-width: 230px;
  background: var(--pmh-paper);
  border: 1.5px solid var(--pmh-ink);
  box-shadow: 5px 5px 0 0 var(--pmh-orange);
  padding: 6px;
  margin: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  z-index: 50;
}
/* pont anti-survol (évite que le menu disparaisse entre le lien et le dropdown) */
.pmh-submenu::before {
  content: "";
  position: absolute;
  top: -16px; left: 0; right: 0;
  height: 16px;
}
.pmh-has-sub:hover .pmh-submenu,
.pmh-has-sub:focus-within .pmh-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .18s ease, transform .18s ease;
}
.pm-global-header .pmh-submenu a,
.pmh-submenu a {
  display: block;
  padding: 11px 14px;
  font-family: var(--pmh-font-body);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pmh-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(31,34,33,.08);
}
.pmh-submenu li:last-child a { border-bottom: 0; }
.pmh-submenu a:hover,
.pmh-submenu a:focus { background: var(--pmh-ink); color: var(--pmh-paper); }
.pmh-submenu a.active { color: var(--pmh-orange); }

/* ─── CTAs (boutons droite) ──────────────────────────────────────── */
.pmh-ctas {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.pmh-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 8px;
  font-family: var(--pmh-font-display);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 3px 3px 0 0 var(--pmh-orange);
  transition: transform .15s cubic-bezier(.22,.61,.36,1), box-shadow .15s;
}
.pm-global-header .pmh-cta-outline,
.pmh-cta-outline {
  background: transparent;
  color: var(--pmh-paper);
  border: 1.5px solid rgba(240,231,210,.6);
}
.pm-global-header .pmh-cta-fill,
.pmh-cta-fill {
  background: var(--pmh-paper);
  color: #1A1815;
  border: 1.5px solid var(--pmh-paper);
}
.pmh-cta:hover {
  transform: translate(2px,2px);
  box-shadow: 1px 1px 0 0 var(--pmh-orange);
}

/* ─── BURGER (mobile) ────────────────────────────────────────────── */
.pmh-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  padding: 0; margin: 0;
  background: none;
  border: 0;
  cursor: pointer;
  z-index: 210;
  flex: none;
}
.pmh-burger span,
.pmh-burger span::before,
.pmh-burger span::after {
  width: 24px; height: 2px;
  background: var(--pmh-white);
  display: block;
}
.pmh-burger span {
  position: relative;
}
.pmh-burger span::before,
.pmh-burger span::after {
  content: "";
  position: absolute;
  left: 0;
}
.pmh-burger span::before { top: -7px; }
.pmh-burger span::after  { top:  7px; }

/* ─── OVERLAY BURGER MOBILE ──────────────────────────────────────── */
.pm-burger-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: #0c0e0d;
  padding: 92px 28px 40px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity .26s ease, transform .26s ease, visibility 0s linear .26s;
}
body.pm-burger-open .pm-burger-overlay {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .26s ease, transform .26s ease;
}
body.pm-burger-open { overflow: hidden; }

/* Variables CSS redéclarées directement sur l'overlay (car hors scope) */
.pm-burger-overlay {
  --pmh-orange: #CF3417;
  --pmh-paper:  #F0E7D2;
  --pmh-ink:    #1F2221;
  --pmh-font-body: "Inter",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --pmh-font-display: "Impact","Anton",Impact,"Arial Narrow Bold",sans-serif;
}

.pm-burger-close {
  position: fixed;
  top: 18px; right: 18px;
  z-index: 310;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: rgba(240,231,210,.08);
  border: 1.5px solid rgba(240,231,210,.25);
  border-radius: 50%;
  color: var(--pmh-paper);
  cursor: pointer;
  padding: 0;
}
.pm-burger-close svg { width: 22px; height: 22px; display: block; }

.pm-burger-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  font-family: var(--pmh-font-display);
  font-size: 30px;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--pmh-paper);
  text-decoration: none;
  border-bottom: 1px solid rgba(240,231,210,.12);
}
.pm-burger-link.active { color: var(--pmh-orange); }

/* groupe avec sous-menu (Vinyle, Produits) */
.pm-burger-group .pm-burger-link { cursor: pointer; }
.pm-burger-caret {
  width: 12px; height: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease;
  flex: none;
}
.pm-burger-group.is-open .pm-burger-caret { transform: rotate(225deg); }

.pm-burger-sub {
  list-style: none;
  padding: 4px 0 10px 14px;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.pm-burger-group.is-open .pm-burger-sub { max-height: 400px; }
.pm-burger-sub li a {
  display: block;
  padding: 10px 0;
  font-family: var(--pmh-font-body);
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(240,231,210,.7);
  text-decoration: none;
  border-bottom: 1px solid rgba(240,231,210,.06);
}
.pm-burger-sub li a:hover { color: var(--pmh-paper); }
.pm-burger-sub li a.active { color: var(--pmh-orange); }

/* CTAs dans l'overlay */
.pm-burger-cta {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pm-burger-cta a {
  display: block;
  padding: 14px 18px;
  font-family: var(--pmh-font-display);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
}
.pm-burger-cta a.pmh-cta-outline {
  background: transparent;
  color: var(--pmh-paper);
  border: 1.5px solid rgba(240,231,210,.5);
}
.pm-burger-cta a.pmh-cta-fill {
  background: var(--pmh-paper);
  color: var(--pmh-ink);
  border: 1.5px solid var(--pmh-paper);
}

/* ─── BARRE ADMIN WORDPRESS ──────────────────────────────────────── */
body.admin-bar .pm-global-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .pm-global-header { top: 46px; }
}

/* ─── RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .pm-global-header nav { padding: 0 32px; }
  .pmh-links { gap: clamp(10px,1.2vw,18px); }
}

@media (max-width: 1023px) {
  .pmh-burger { display: inline-flex; }
  .pmh-links  { display: none; }
  .pmh-ctas   { display: none; }
  .pm-global-header nav { padding: 0 20px; }
  .pmh-brand img { height: 24px; }
}

/* ============================================================
   BOUTON « HAUT DE PAGE » GLOBAL (#pmTopBtn)
   Même style que le bouton du Studio, injecté par
   pm-global-header.js sur les pages concernées.
   ============================================================ */
#pmTopBtn {
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: 250;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: #1F2221;
  color: #F0E7D2;
  border: 1.5px solid #1F2221;
  box-shadow: 3px 3px 0 0 #CF3417;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: transform .15s, box-shadow .15s, opacity .25s;
}
#pmTopBtn svg { width: 22px; height: 22px; }
#pmTopBtn.is-visible { opacity: 1; pointer-events: auto; }
#pmTopBtn:hover { transform: translate(2px,2px); box-shadow: 1px 1px 0 0 #CF3417; }

/* Home : on masque le bouton « Haut de page » du bundle React
   (remplacé par #pmTopBtn global ci-dessus). */
#phonomaker-root .fixed.bottom-8.right-8 { display: none !important; }