/*
 * header.css — navbar souveraine + mega-menu éditorial (doctrine Frontify).
 * Grid 3 colonnes sticky, panneau éditorial au survol/clic/clavier,
 * drawer mobile accessible via [inert]. Inspiré de la mécanique réelle
 * de header.css/header.js (VITRA/Calzedonia), retokenisé et simplifié
 * en registre éditorial (pas de catalogue produit).
 */

.w3-header {
  /* position:fixed plutôt que sticky : sticky casse silencieusement dès
     qu'un ancêtre porte overflow-x:hidden (notre cas, reset.css — piège
     CSS classique). fixed est immunisé, garantit "toujours visible" sans
     condition — voir le padding-top de compensation dans typography.css. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Toujours au sommet de la pile — au-dessus mega-menu, overlay, drawer,
     toast/chatbot, sans exception. Jamais masqué au scroll (voir header.js). */
  z-index: var(--z-header);
  background: color-mix(in oklab, var(--color-surface) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: var(--border-thin) solid var(--color-border);
  transition: background var(--transition-normal), box-shadow var(--transition-normal);
}

.w3-header.is-scrolled {
  background: color-mix(in oklab, var(--color-surface) 97%, transparent);
  box-shadow: var(--shadow-sm);
}

.w3-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  height: var(--header-height-mobile);
}

@media (min-width: 1024px) {
  .w3-header__inner {
    height: var(--header-height-desktop);
  }
}

/* Lockup pill : mark SVG + wordmark, bordure arrondie complète. */
.w3-header__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.3rem var(--space-3) 0.3rem 0.3rem;
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  color: var(--color-ink);
  white-space: nowrap;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.w3-header__logo:hover {
  border-color: var(--color-signal);
  background: var(--color-signal-dim);
}

.w3-header__logo-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  overflow: hidden;
}

.w3-header__logo-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.w3-header__logo-accent {
  color: var(--color-signal);
}

/* ── Navigation desktop ── */

.w3-nav {
  display: none;
}

@media (min-width: 1024px) {
  .w3-nav {
    display: block;
    justify-self: center;
  }
}

.w3-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.w3-nav__item {
  position: relative;
}

.w3-nav__link,
.w3-nav__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  height: var(--header-height-desktop);
  padding-inline: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  transition: color var(--transition-fast);
}

.w3-nav__link:hover,
.w3-nav__trigger:hover,
.w3-nav__item.is-open .w3-nav__trigger {
  color: var(--color-ink);
}

.w3-nav__trigger-icon {
  width: 0.6em;
  height: 0.6em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--transition-fast);
  margin-top: -0.2em;
}

.w3-nav__item.is-open .w3-nav__trigger-icon {
  transform: rotate(225deg);
  margin-top: 0.2em;
}

/*
 * Voile de page — s'affiche derrière le mega-menu ouvert (desktop),
 * jamais devant : démarre sous la barre de header (le header reste net,
 * cliquable) et dimme tout le contenu en dessous. Empêche tout
 * chevauchement texte/menu perçu. Clic dessus = ferme le menu (câblé
 * dans header.js, même logique que le clic extérieur).
 */
.w3-page-overlay {
  position: fixed;
  top: var(--header-height-mobile);
  right: 0;
  bottom: 0;
  left: 0;
  background: oklch(0% 0 0 / 0.32);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
  z-index: var(--z-overlay);
}

@media (min-width: 1024px) {
  .w3-page-overlay {
    top: var(--header-height-desktop);
  }
}

.w3-page-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* ── Mega-menu éditorial ── */

.w3-megamenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -8px);
  width: min(46rem, 90vw);
  margin-top: var(--space-2);
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  z-index: var(--z-megamenu);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.w3-nav__item.is-open .w3-megamenu {
  opacity: 1;
  transform: translate(-50%, 0);
}

.w3-megamenu__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-6);
  padding: var(--space-6);
}

.w3-megamenu__kicker {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-signal);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.w3-megamenu__title {
  font-size: var(--text-lg);
  margin-top: var(--space-2);
}

.w3-megamenu__desc {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  line-height: var(--leading-normal);
}

.w3-megamenu__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-signal);
}

.w3-megamenu__cta::after {
  content: "→";
  transition: transform var(--transition-fast);
}

.w3-megamenu__cta:hover::after {
  transform: translateX(3px);
}

.w3-megamenu__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  border-left: var(--border-thin) solid var(--color-border);
  padding-left: var(--space-5);
}

.w3-megamenu__link {
  display: block;
  padding: var(--space-2) 0;
  border-radius: var(--radius-xs);
  transition: color var(--transition-fast);
}

.w3-megamenu__link-name {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-ink);
}

.w3-megamenu__link-desc {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-ink-faint);
}

.w3-megamenu__link:hover .w3-megamenu__link-name {
  color: var(--color-signal);
}

/* ── Actions (thème, réseaux, burger) ── */

.w3-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  justify-self: end;
}

/*
 * Icônes GitHub/LinkedIn : masquées sous 1024px — déjà présentes dans le
 * drawer mobile (.w3-drawer__socials), les dupliquer ici provoquait un
 * débordement horizontal (4 boutons + logo dans la même rangée sur un
 * viewport étroit). Le thème et le burger restent visibles partout.
 */
.w3-header__icon-btn {
  display: none;
}

@media (min-width: 1024px) {
  .w3-header__icon-btn {
    display: flex;
  }
}

.w3-header__icon-btn,
.w3-theme-toggle {
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-sm);
  color: var(--color-ink-soft);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.w3-theme-toggle {
  display: flex;
}

.w3-header__icon-btn svg,
.w3-theme-toggle svg {
  width: 1.1rem;
  height: 1.1rem;
}

.w3-header__icon-btn:hover,
.w3-theme-toggle:hover {
  color: var(--color-signal);
  background: var(--color-signal-dim);
}

.w3-theme-toggle .icon-moon {
  display: none;
}

html.dark .w3-theme-toggle .icon-sun {
  display: none;
}

html.dark .w3-theme-toggle .icon-moon {
  display: block;
}

.w3-header__burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.28rem;
  width: 2.25rem;
  height: 2.25rem;
}

@media (min-width: 1024px) {
  .w3-header__burger {
    display: none;
  }
}

.w3-header__burger span {
  display: block;
  height: 1.5px;
  background: var(--color-ink);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.w3-header__burger span:first-child {
  width: 1.1rem;
  margin-left: auto;
}
.w3-header__burger span:nth-child(2) {
  width: 1.4rem;
}
.w3-header__burger span:last-child {
  width: 0.85rem;
  margin-left: auto;
}

.w3-header__burger.is-open span:first-child {
  transform: translateY(6px) rotate(45deg);
  width: 1.4rem;
}
.w3-header__burger.is-open span:nth-child(2) {
  opacity: 0;
}
.w3-header__burger.is-open span:last-child {
  transform: translateY(-6px) rotate(-45deg);
  width: 1.4rem;
}

/* ── Drawer mobile ── */

.w3-drawer-overlay {
  position: fixed;
  inset: 0;
  background: oklch(0% 0 0 / 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
  z-index: var(--z-modal);
}

.w3-drawer-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.w3-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(20rem, 88vw);
  background: var(--color-surface);
  border-left: var(--border-thin) solid var(--color-border);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform var(--transition-normal);
  z-index: calc(var(--z-modal) + 1);
  overflow-y: auto;
  padding: var(--space-6) var(--space-5);
}

.w3-drawer.is-open {
  transform: translateX(0);
}

@media (min-width: 1024px) {
  .w3-drawer,
  .w3-drawer-overlay {
    display: none;
  }
}

.w3-drawer__close {
  margin-left: auto;
  display: block;
  font-size: var(--text-sm);
  color: var(--color-ink-faint);
}

.w3-drawer__nav {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.w3-drawer__nav-item {
  border-bottom: var(--border-thin) solid var(--color-border);
}

.w3-drawer__nav-link {
  display: block;
  padding: var(--space-3) 0;
  font-size: var(--text-lg);
  color: var(--color-ink);
}

.w3-drawer__socials {
  margin-top: var(--space-6);
  display: flex;
  gap: var(--space-3);
}