/* Header : logo « LAVA » à gauche (tracé du titre du héros), nav à droite, « Contact » en CTA permanent.
   Se retire au scroll vers le bas, revient au scroll vers le haut. */
.header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: var(--header-h);
  transition: transform var(--t-ui) var(--ease), background-color var(--t-ui), border-color var(--t-ui);
  border-bottom: 1px solid transparent;
}
.header.is-solid {
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  border-color: var(--line);
}
.header.is-hidden { transform: translateY(-100%); }
.header__inner {
  height: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: auto 1fr; align-items: center;
}
.header__logo {
  grid-column: 1; justify-self: start;
  display: inline-flex; align-items: center;
  min-height: 44px;            /* zone cliquable confortable */
  color: var(--blue);          /* couleur du titre du héros */
  transition: opacity var(--t-micro);
}
.header__logo:hover { opacity: 0.75; }
/* Même SVG que le titre du héros (trait proportionnel : ~2 px à cette taille) */
.header__mark { display: block; height: clamp(14px, 0.45vw + 10px, 18px); width: auto; aspect-ratio: 372 / 55; overflow: hidden; }

.header__nav { grid-column: 2; justify-self: end; }
.header__nav ul { display: flex; align-items: center; gap: clamp(0.25rem, 1.2vw, 1rem); }
.header__nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.7rem;
  font-size: var(--fs-sm); color: var(--ink-2);
  border-radius: var(--r-pill);
  transition: color var(--t-micro), background-color var(--t-micro);
}
.header__nav a:hover { color: var(--ink); }
.header__nav a[aria-current="true"]:not(.header__cta) { color: var(--ink); }
.header__nav a[aria-current="true"]:not(.header__cta)::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--orange); margin-right: 0.5em; }
/* « Contact » : CTA permanent, aplat orange */
.header__cta { background: var(--orange); border: 1px solid var(--orange); padding: 0 1.1rem !important; color: var(--on-orange) !important; margin-left: 0.4rem; font-weight: 600; }
.header__cta:hover, .header__cta[aria-current="true"] { background: var(--orange-hover); border-color: var(--orange-hover); color: var(--on-orange) !important; }

.header__progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; }
.header__progress span { display: block; height: 100%; background: var(--lava); transform-origin: left; transform: scaleX(var(--p, 0)); }

/* ---------- Mobile et tablette (≤ 899 px) : logo à gauche, hamburger à droite ---------- */
.header__burger, .header__menu { display: none; }
@media (max-width: 899px) {
  .header__nav { display: none; }
  .header { transition: background-color var(--t-ui), border-color var(--t-ui); }
  .header.is-hidden { transform: none; }
  .header.is-open { background: var(--bg); border-color: var(--line); }

  /* Hamburger : deux traits fins bleus qui se croisent en « × » à l'ouverture */
  .header__burger {
    grid-column: 2; justify-self: end;
    position: relative; display: block;
    width: 44px; height: 44px; margin-right: -10px; /* cible 44 px, traits alignés sur la marge */
    color: var(--blue);
  }
  .header__burger span {
    position: absolute; left: 10px; right: 10px; height: 1.5px;
    background: currentColor; border-radius: 1px;
    transition: transform 420ms var(--ease), top 420ms var(--ease);
  }
  .header__burger span:nth-child(1) { top: 17px; }
  .header__burger span:nth-child(2) { top: 26px; }
  .header__burger[aria-expanded="true"] span:nth-child(1) { top: 21.5px; transform: rotate(45deg); }
  .header__burger[aria-expanded="true"] span:nth-child(2) { top: 21.5px; transform: rotate(-45deg); }

  /* Panneau : descend depuis le header (rideau), les liens apparaissent l'un après l'autre */
  .header__menu {
    display: block;
    position: absolute; left: 0; right: 0; top: 100%;
    max-height: calc(100svh - var(--header-h)); overflow-y: auto;
    padding: 0.5rem var(--gutter) 1.75rem;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 30px 50px -30px var(--shadow);
    clip-path: inset(0 0 100% 0);
    transition: clip-path 600ms var(--ease-io), visibility 0s linear 600ms;
    visibility: hidden;
  }
  .header.is-open .header__menu { clip-path: inset(0 0 -60px 0); visibility: visible; transition: clip-path 600ms var(--ease-io), visibility 0s; }
  .header__menu ul { border-top: 1px solid var(--line); }
  .header__menu li { border-bottom: 1px solid var(--line); }
  .header__menu a {
    display: flex; align-items: center; gap: 1.1rem; min-height: 60px;
    font-family: var(--font-display); font-weight: var(--display-weight);
    letter-spacing: var(--display-track); text-transform: uppercase; line-height: 1;
    font-size: clamp(1.1rem, 0.8rem + 1.6vw, 1.5rem); color: var(--ink);
    opacity: 0; transform: translateY(14px);
    transition: opacity var(--t-ui) var(--ease), transform var(--t-enter) var(--ease), color var(--t-micro);
  }
  .header__menu a span { font-family: var(--font-body); font-size: var(--fs-xs); letter-spacing: 0.08em; color: var(--neon); min-width: 1.6em; }
  .header__menu a[aria-current="true"] { color: var(--blue); }
  .header__menu a[aria-current="true"]::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); margin-left: auto; }
  .header.is-open .header__menu a { opacity: 1; transform: none; }
  .header.is-open .header__menu li:nth-child(1) a { transition-delay: 160ms; }
  .header.is-open .header__menu li:nth-child(2) a { transition-delay: 220ms; }
  .header.is-open .header__menu li:nth-child(3) a { transition-delay: 280ms; }
  .header.is-open .header__menu li:nth-child(4) a { transition-delay: 340ms; }

  /* Voile sur la page pendant que le menu est ouvert (un toucher dessus referme) */
  .menu-scrim { position: fixed; inset: 0; z-index: 49; background: rgba(10, 30, 82, 0.18); opacity: 0; pointer-events: none; transition: opacity 500ms var(--ease); }
  .menu-open .menu-scrim { opacity: 1; pointer-events: auto; }
}