/* ============================================================
   Revalta by Altus Conseil — design-system/header.css
   ------------------------------------------------------------
   Header « identité » (étude 9, porté le 28/09/2026).
   Repos   : barre fixe pleine largeur, 90 px, transparente, sans
             filet ; texte et logo suivent la section sous la barre
             (data-revalta-theme="auto", mécanique de header.js).
   Scroll  : la barre se détache — 95 % de large, 72 px, pilule,
             verre liquide (fond translucide + flou + saturation).
   Grille  : menu (gauche) · logo (centre) · actions (droite :
             téléphone + bouton). Le markup est généré par le MCP ;
             `header.html` en est la démo.
   À charger après colors_and_type.css.
   ============================================================ */

.revalta-header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: 100%;
  max-width: 100%;
  height: var(--revalta-header-h, 90px);
  margin: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 0 40px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  color: var(--revalta-fg1);
  font-family: var(--revalta-font);
  transition:
    top            220ms var(--revalta-ease),
    width          220ms var(--revalta-ease),
    max-width      220ms var(--revalta-ease),
    height         220ms var(--revalta-ease),
    padding        220ms var(--revalta-ease),
    border-radius  220ms var(--revalta-ease),
    background     220ms var(--revalta-ease),
    box-shadow     220ms var(--revalta-ease),
    color          220ms var(--revalta-ease);
}

/* Schéma de couleurs — thème actif posé par header.js :
   "light" = texte papier (section sombre), "dark" = texte encre. */
.revalta-header[data-revalta-theme-active="light"] { color: var(--revalta-fg1-inverse); }
.revalta-header[data-revalta-theme-active="dark"]  { color: var(--revalta-fg1); }

/* Scroll — verre liquide détaché (seuil ≈ 24 px, header.js). */
.revalta-header[data-scrolled="true"] {
  top: 14px;
  width: 95%;
  max-width: 1400px;
  height: 72px;
  padding: 0 28px;
  border-radius: var(--revalta-r-pill);
  background: color-mix(in srgb, var(--revalta-light) 62%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
          backdrop-filter: blur(22px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 12px 32px -20px rgba(16, 28, 51, 0.28);
}
.revalta-header[data-scrolled="true"][data-revalta-theme-active="light"] {
  background: color-mix(in srgb, var(--revalta-bg-inverse) 55%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(245, 243, 238, 0.12),
    0 12px 32px -20px rgba(0, 0, 0, 0.4);
}

/* ─── Logo — centré, 65 px de haut (52 px au scroll) ─────────
   Deux assets superposés, bascule en opacité selon le thème. */
.revalta-header-logo {
  justify-self: center;
  display: block;
  height: 65px;
  width: auto;
  text-decoration: none;
  outline: none;
  transition: height 220ms var(--revalta-ease);
}
.revalta-header[data-scrolled="true"] .revalta-header-logo { height: 52px; }
.revalta-header-logo .alt-logo-stack {
  position: relative;
  display: block;
  height: 100%;
  width: auto;
}
.revalta-header-logo .alt-logo-stack img {
  display: block;
  height: 100%;
  width: auto;
}
.revalta-header-logo .alt-logo-stack img + img {
  position: absolute;
  top: 0; left: 0;
}
.revalta-header-logo .alt-logo-on-dark  { opacity: 0; transition: opacity 220ms var(--revalta-ease); }
.revalta-header-logo .alt-logo-on-light { opacity: 1; transition: opacity 220ms var(--revalta-ease); }
.revalta-header[data-revalta-theme-active="light"] .alt-logo-on-dark  { opacity: 1; }
.revalta-header[data-revalta-theme-active="light"] .alt-logo-on-light { opacity: 0; }

/* ─── Menu — à gauche, trois entrées au plus, liens en pilule ── */
.revalta-header-nav {
  order: -1;                 /* passe devant le logo quel que soit l'ordre DOM */
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
}
.revalta-header-nav > a,
.revalta-header-nav-parent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: var(--revalta-r-pill);
  font-family: var(--revalta-font);
  font-size: 15px;
  font-weight: var(--revalta-w-medium);
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
  text-decoration: none;
  opacity: 1;
  white-space: nowrap;
  transition: background 200ms var(--revalta-ease);
}
.revalta-header-nav > a:hover,
.revalta-header-nav > a:focus-visible,
.revalta-header-nav > a[aria-current="page"],
.revalta-header-nav-group:hover .revalta-header-nav-parent,
.revalta-header-nav-group:focus-within .revalta-header-nav-parent {
  background: color-mix(in srgb, currentColor 8%, transparent);
  outline: none;
}

/* ─── Actions — téléphone + bouton, à droite ─────────────────
   Markup : div.revalta-header-actions > a.revalta-header-phone + a.revalta-btn. */
.revalta-header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 22px;
}
.revalta-header-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: var(--revalta-w-medium);
  font-variant-numeric: tabular-nums;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 200ms var(--revalta-ease);
}
.revalta-header-phone:hover { opacity: 0.7; }
.revalta-header-phone svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.revalta-header .revalta-btn { padding: 12px 20px; font-size: 14px; }
/* Sur thème sombre actif, le bouton passe en papier (survol or inverse). */
.revalta-header[data-revalta-theme-active="light"] .revalta-btn-primary {
  background: var(--revalta-fg1-inverse);
  color: var(--revalta-bg-inverse);
}
.revalta-header[data-revalta-theme-active="light"] .revalta-btn-primary:hover {
  background: var(--revalta-gold-inverse);
  color: var(--revalta-bg-inverse);
}

/* ─── Burger — 44 px rond, bord currentColor 20 % ─────────── */
.revalta-header-burger {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  place-items: center;
  background: transparent;
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  border-radius: 50%;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.revalta-header-burger svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.revalta-header-burger .alt-burger-close { display: none; }
.revalta-header[data-mobile-open="true"] .revalta-header-burger .alt-burger-open  { display: none; }
.revalta-header[data-mobile-open="true"] .revalta-header-burger .alt-burger-close { display: inline; }

/* ─── Mobile ≤ 768 px — burger · logo · bouton, nav en panneau ── */
@media (max-width: 768px) {
  .revalta-header {
    grid-template-columns: auto 1fr auto;
    height: 72px;
    padding: 0 18px;
    gap: 12px;
  }
  .revalta-header[data-scrolled="true"] {
    top: 10px;
    width: calc(100% - 20px);
    height: 64px;
    padding: 0 12px 0 14px;
  }
  .revalta-header-burger { display: grid; order: -2; }
  .revalta-header-logo { height: 44px; }
  .revalta-header[data-scrolled="true"] .revalta-header-logo { height: 44px; }
  .revalta-header-phone { display: none; }
  .revalta-header .revalta-btn { padding: 11px 16px; font-size: 13px; }

  .revalta-header-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 18px 16px;
    background: color-mix(in srgb, var(--revalta-light) 94%, transparent);
    color: var(--revalta-fg1);
    border-bottom: 1px solid var(--revalta-sep);
    border-radius: 0 0 20px 20px;
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
  }
  .revalta-header[data-mobile-open="true"] .revalta-header-nav { display: flex; }
  /* Menu ouvert : barre en blanc plein, sans flou (un backdrop-filter sur
     le header créerait une « backdrop root » qui annulerait celui du panneau). */
  .revalta-header[data-mobile-open="true"] {
    background: var(--revalta-light);
    color: var(--revalta-fg1);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
  .revalta-header-nav > a,
  .revalta-header-nav-group {
    display: flex;
    padding: 14px 0;
    border-radius: 0;
    border-bottom: 1px solid var(--revalta-sep);
    font-size: 17px;
  }
  .revalta-header-nav > a:hover,
  .revalta-header-nav > a:focus-visible,
  .revalta-header-nav > a[aria-current="page"] { background: none; }
  .revalta-header-nav > a:last-child,
  .revalta-header-nav-group:last-child { border-bottom: 0; }
}
@media (max-width: 480px) {
  .revalta-header { height: 64px; padding: 0 14px; gap: 10px; }
  .revalta-header[data-scrolled="true"] { height: 60px; }
  .revalta-header-logo,
  .revalta-header[data-scrolled="true"] .revalta-header-logo { height: 36px; }
  .revalta-header .revalta-btn { padding: 10px 14px; }
}

/* ============================================================
   SOUS-MENUS DÉROULANTS
   ------------------------------------------------------------
   Markup injecté (ne pas réécrire) :
     .revalta-header-nav-group[data-revalta-submenu]
       └ a.revalta-header-nav-parent      (lien parent, reste cliquable)
       └ button.revalta-header-nav-caret   (bascule le sous-menu)
       └ .revalta-header-submenu[role=menu]
            └ a[role=menuitem] … (+ <small> optionnel : description)

   Desktop  : panneau flottant arrondi sous le parent, ouvert au :hover
              du groupe et au :focus-within (clavier). Fonctionne SANS JS.
   Tactile  : accordéon sous le parent, basculé par le caret (header.js).
   ============================================================ */

.revalta-header-nav-group {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
}

/* Caret — chevron tracé en CSS, pivote 180° */
.revalta-header-nav-caret {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  margin: 0 0 0 -8px;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  opacity: 0.8;
  -webkit-tap-highlight-color: transparent;
  transition: opacity var(--revalta-motion-dur-fast, 0.2s) var(--revalta-ease-inout, cubic-bezier(0.645, 0.045, 0.355, 1));
}
.revalta-header-nav-caret:hover { opacity: 1; }
.revalta-header-nav-caret:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; border-radius: 50%; }
.revalta-header-nav-caret::before {
  content: '';
  display: block;
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--revalta-motion-dur-fast, 0.2s) var(--revalta-ease-inout, cubic-bezier(0.645, 0.045, 0.355, 1));
}

/* Fond du panneau selon le thème actif du header */
.revalta-header[data-revalta-theme-active="light"] .revalta-header-submenu { background: var(--revalta-bg-inverse); }
.revalta-header[data-revalta-theme-active="dark"]  .revalta-header-submenu { background: var(--revalta-light); }
.revalta-header-submenu a small {
  display: block;
  font-size: 13px;
  font-weight: var(--revalta-w-light);
  line-height: 1.4;
  color: var(--revalta-fg2);
}
.revalta-header[data-revalta-theme-active="light"] .revalta-header-submenu a small { color: var(--revalta-fg2-inverse); }

/* DESKTOP — panneau flottant arrondi */
@media (min-width: 769px) {
  .revalta-header-submenu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    padding: 8px;
    border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
    border-radius: 18px;
    box-shadow: 0 20px 48px rgba(16, 28, 51, 0.16);
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    z-index: 20;
    transition:
      opacity   var(--revalta-motion-dur-fast, 0.2s) var(--revalta-ease-inout, cubic-bezier(0.645, 0.045, 0.355, 1)),
      transform var(--revalta-motion-dur-fast, 0.2s) var(--revalta-ease-inout, cubic-bezier(0.645, 0.045, 0.355, 1));
  }
  /* Pont invisible : comble l'écart parent ↔ panneau pendant l'ouverture. */
  .revalta-header-submenu::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0; right: 0;
    height: 10px;
  }
  .revalta-header-submenu a {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 11px 14px;
    border-radius: 12px;
    font-family: var(--revalta-font);
    font-size: 15px;
    font-weight: var(--revalta-w-medium);
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    opacity: 1;
    transition: background var(--revalta-motion-dur-fast, 0.2s) var(--revalta-ease-inout, cubic-bezier(0.645, 0.045, 0.355, 1));
  }
  .revalta-header-submenu a:hover,
  .revalta-header-submenu a:focus-visible {
    background: color-mix(in srgb, currentColor 8%, transparent);
    outline: none;
  }

  /* États ouverts — survol, focus clavier, ou ouverture explicite (JS) */
  .revalta-header-nav-group:hover .revalta-header-submenu,
  .revalta-header-nav-group:focus-within .revalta-header-submenu,
  .revalta-header-nav-group[data-open="true"] .revalta-header-submenu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .revalta-header-nav-group:hover .revalta-header-nav-caret::before,
  .revalta-header-nav-group:focus-within .revalta-header-nav-caret::before,
  .revalta-header-nav-group[data-open="true"] .revalta-header-nav-caret::before {
    transform: rotate(225deg);
  }

  /* Échap : force la fermeture (data-suppress posé par header.js). */
  .revalta-header-nav-group[data-suppress="true"] .revalta-header-submenu {
    opacity: 0 !important;
    transform: translateY(-6px) !important;
    pointer-events: none !important;
  }
  .revalta-header-nav-group[data-suppress="true"] .revalta-header-nav-caret::before {
    transform: rotate(45deg) !important;
  }
}

/* MOBILE — accordéon vertical (burger ouvert) */
@media (max-width: 768px) {
  .revalta-header-nav-group { flex-wrap: wrap; align-items: center; }
  .revalta-header-nav-group a.revalta-header-nav-parent {
    flex: 1 1 auto;
    padding: 0;
    border-radius: 0;
    font-size: 17px;
  }
  .revalta-header-nav-group:hover .revalta-header-nav-parent,
  .revalta-header-nav-group:focus-within .revalta-header-nav-parent { background: none; }
  .revalta-header-nav-caret {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    margin: -8px -8px -8px 0;
  }
  .revalta-header-nav-caret::before { width: 8px; height: 8px; }

  .revalta-header-submenu {
    position: static;
    flex-basis: 100%;
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    border: 0;
    box-shadow: none;
    overflow: hidden;
    max-height: 0;
    transition: max-height 320ms var(--revalta-ease-inout, cubic-bezier(0.645, 0.045, 0.355, 1));
  }
  .revalta-header-nav-group[data-open="true"] .revalta-header-submenu,
  .revalta-header-nav-group:focus-within .revalta-header-submenu {
    max-height: 60vh;
    padding-top: 8px;
  }
  .revalta-header-nav-group[data-open="true"] .revalta-header-nav-caret::before,
  .revalta-header-nav-group:focus-within .revalta-header-nav-caret::before {
    transform: rotate(225deg);
  }
  .revalta-header-submenu a {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 11px 0 11px 18px;
    font-size: 15px;
    font-weight: var(--revalta-w-medium);
    color: inherit;
    text-decoration: none;
    opacity: 0.9;
    border-bottom: 0;
  }
  .revalta-header-submenu a:hover,
  .revalta-header-submenu a:focus-visible { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .revalta-header,
  .revalta-header *,
  .revalta-header-nav { transition: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .revalta-header .revalta-header-submenu {
    transform: none !important;
    transition: opacity var(--revalta-motion-dur-fast, 0.2s) var(--revalta-ease-inout, cubic-bezier(0.645, 0.045, 0.355, 1)) !important;
  }
}