/** En-tête du site : logo, navigation multi-niveaux, recherche, menu mobile. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Fond opaque (pas de backdrop-filter : il créerait un bloc conteneur
     piégeant le menu mobile en position:fixed). */
  background: var(--jdj-bg);
  border-bottom: 1px solid var(--jdj-border);
}

.site-header__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--jdj-header-h);
}

.site-brand { display: inline-flex; align-items: center; gap: var(--sp-2); text-decoration: none; color: var(--jdj-text); flex: 0 0 auto; }
.site-brand__logo { max-height: 44px; width: auto; }

/* Logo personnalisé (the_custom_logo) : sans contrainte, le reset img{max-width:100%}
   le fait collapser à 0 dans le header en flex → on fixe une hauteur et flex:0 0 auto. */
.custom-logo-link { flex: 0 0 auto; display: inline-flex; align-items: center; line-height: 0; }
.custom-logo { height: 46px; width: auto; max-width: none; }
.site-brand__title { font-family: var(--jdj-font-headings); font-weight: 800; font-size: var(--fs-lg); letter-spacing: -0.02em; }
.site-brand__title .accent { color: var(--jdj-accent); }

/* --- Navigation principale --- */
.primary-nav { margin-inline-start: auto; }
.primary-nav > ul { display: flex; align-items: stretch; gap: clamp(0.35rem, 0.85vw, 0.95rem); list-style: none; padding: 0; margin: 0; }
/* Chaque item parent : label + caret sur une seule ligne, verticalement centrés. */
.primary-nav > ul > .menu-item { display: inline-flex; align-items: center; }
.primary-nav .menu-link {
  display: inline-flex; align-items: center; gap: 0.15em;
  padding: 0.5em 0.15em;
  text-decoration: none; color: var(--jdj-text);
  font-family: var(--jdj-font-sans);
  font-weight: 600; font-size: 0.95rem; line-height: 1.1;
  white-space: nowrap;
  position: relative;
}
.primary-nav > ul > .menu-item > .menu-link::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2.5px;
  background: var(--jdj-accent); transition: right var(--dur) var(--ease);
}
.primary-nav > ul > .menu-item:hover > .menu-link::after,
.primary-nav > ul > .menu-item:focus-within > .menu-link::after,
.primary-nav > ul > .current-menu-item > .menu-link::after { right: 0; }

/* Sous-menus. */
.primary-nav .menu-item-has-children { position: relative; }
.primary-nav .sub-menu {
  position: absolute; top: 100%; left: 0; min-width: 220px;
  display: grid; gap: 2px; padding: var(--sp-1);
  background: var(--jdj-surface); border: 1px solid var(--jdj-border);
  border-radius: var(--jdj-radius-sm); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
  z-index: 50; list-style: none;
}
.primary-nav .menu-item-has-children:hover > .sub-menu,
.primary-nav .menu-item-has-children:focus-within > .sub-menu,
.primary-nav .sub-menu[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); }
.primary-nav .sub-menu .menu-link { padding: 0.55em 0.7em; border-radius: var(--jdj-radius-sm); width: 100%; }
.primary-nav .sub-menu .menu-link:hover { background: var(--jdj-surface-2); }

.submenu-toggle { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-inline-start: 0.15em; color: var(--jdj-text-muted); }
.submenu-toggle svg { width: 13px; height: 13px; max-width: none; }
.primary-nav > ul > .menu-item-has-children:hover > .submenu-toggle { color: var(--jdj-accent); }
@media (min-width: 1200px) { .submenu-toggle { pointer-events: none; } }

/* --- Actions (recherche, thème) --- */
.header-actions { display: flex; align-items: center; gap: var(--sp-1); flex: 0 0 auto; }
.icon-btn {
  display: inline-grid; place-items: center;
  width: 42px; height: 42px; border-radius: var(--jdj-radius-pill);
  color: var(--jdj-text); transition: background var(--dur) var(--ease);
}
.icon-btn:hover { background: var(--jdj-surface-2); }
.icon-btn svg { width: 20px; height: 20px; }

.menu-toggle { display: none; }

/* --- Barre de recherche déployable --- */
.search-panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}
.search-panel[data-open="true"] { grid-template-rows: 1fr; border-color: var(--jdj-border); }
.search-panel__inner { overflow: hidden; }
.search-panel form { display: flex; gap: var(--sp-2); padding-block: var(--sp-3); }
.search-panel input[type="search"] { flex: 1; }

/* --- Mobile --- */
@media (max-width: 1199px) {
  .menu-toggle { display: inline-grid; margin-inline-start: auto; }
  .primary-nav {
    position: fixed; inset: var(--jdj-header-h) 0 0 auto;
    width: min(86vw, 360px);
    background: var(--jdj-surface);
    border-inline-start: 1px solid var(--jdj-border);
    padding: var(--sp-3);
    transform: translateX(100%);
    transition: transform var(--dur) var(--ease);
    overflow-y: auto; z-index: 90; margin: 0;
  }
  .primary-nav[data-open="true"] { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .primary-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .primary-nav .menu-link { padding: 0.85em 0.4em; border-bottom: 1px solid var(--jdj-border); justify-content: space-between; }
  .primary-nav .menu-item-has-children > .menu-link { border-bottom: 0; }
  .primary-nav .sub-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; padding-inline-start: var(--sp-2);
    display: none; background: transparent;
  }
  .primary-nav .sub-menu[data-open="true"] { display: grid; }
  .submenu-toggle { pointer-events: auto; }
  .nav-backdrop { position: fixed; inset: 0; background: rgba(12,14,19,0.45); z-index: 80; opacity: 0; pointer-events: none; transition: opacity var(--dur); }
  .nav-backdrop[data-open="true"] { opacity: 1; pointer-events: auto; }
}