/* ============================================================
   HEADER — Style Vercel / Linear / Stripe
   Utilise les tokens du thème (variables.css)
   ============================================================ */

/* --- Offset body pour header fixed ------------------------- */
body {
  padding-top: 64px;
}
@media (max-width: 768px) {
  body { padding-top: 56px; }
}

/* --- Admin bar offset (WP logged-in view) ----------------- */
.admin-bar .header { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .header { top: 46px; }
}

/* --- Base header ------------------------------------------- */
.header {
  position:        fixed;
  top:             0;
  left:            0;
  right:           0;
  z-index:         1000;
  height:          64px;
  background:      transparent;
  border-bottom:   1px solid transparent;
  transition:
    background     var(--transition-slow),
    border-color   var(--transition-slow),
    backdrop-filter var(--transition-slow);
}

.header.is-scrolled {
  background:    rgba(10, 10, 10, 0.75);
  border-color:  rgba(255, 255, 255, 0.06);
  backdrop-filter:         blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

[data-theme="white"] .header.is-scrolled {
  background:   rgba(255, 255, 255, 0.80);
  border-color: rgba(0, 0, 0, 0.08);
}

/* --- Container -------------------------------------------- */
.header__container {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          100%;
  max-width:       1280px;
  margin-inline:   auto;
  padding-inline:  24px;
  position:        relative;
}

/* --- Logo -------------------------------------------------- */
.header__logo {
  display:         flex;
  align-items:     center;
  gap:             8px;
  text-decoration: none;
  flex-shrink:     0;
  z-index:         1;
}

.header__logo-triangle {
  font-size:   16px;
  line-height: 1;
  color:       var(--color-accent);
  transition:  opacity var(--transition-fast);
}

.header__logo-text {
  font-size:      15px;
  font-weight:    600;
  letter-spacing: -0.02em;
  color:          var(--color-text);
  white-space:    nowrap;
  transition:     color var(--transition-fast);
}

.header__logo:hover .header__logo-triangle {
  opacity: 0.7;
}

.header__logo:hover .header__logo-text {
  color: rgba(255, 255, 255, 0.7);
}

[data-theme="white"] .header__logo:hover .header__logo-text {
  color: rgba(15, 23, 42, 0.6);
}

.header__logo-img {
  display:    block;
  height:     32px;
  width:      auto;
  max-width:  160px;
  object-fit: contain;
  transition: opacity var(--transition-fast);
}

.header__logo:hover .header__logo-img {
  opacity: 0.75;
}

/* --- Nav (desktop) ---------------------------------------- */
.header__nav {
  position:  absolute;
  left:      50%;
  transform: translateX(-50%);
}

.header__menu {
  display:     flex;
  align-items: center;
  gap:         2px;
  list-style:  none;
  margin:      0;
  padding:     0;
}

.header__link {
  display:         block;
  padding:         6px 14px;
  font-size:       13.5px;
  font-weight:     400;
  letter-spacing:  -0.01em;
  color:           rgba(255, 255, 255, 0.55);
  text-decoration: none;
  border-radius:   6px;
  white-space:     nowrap;
  transition:      color var(--transition-fast), background var(--transition-fast);
}

.header__link:hover {
  color:      rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.06);
}

.header__link:focus-visible {
  outline:        2px solid var(--color-accent);
  outline-offset: 2px;
}

[data-theme="white"] .header__link {
  color: rgba(15, 23, 42, 0.55);
}

[data-theme="white"] .header__link:hover {
  color:      rgba(15, 23, 42, 0.95);
  background: rgba(15, 23, 42, 0.05);
}

/* --- Actions (droite) ------------------------------------- */
.header__actions {
  display:     flex;
  align-items: center;
  gap:         8px;
  flex-shrink: 0;
  z-index:     1;
}

/* --- CTA buttons ------------------------------------------ */
.header__cta {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  padding:         7px 16px;
  font-size:       13.5px;
  font-weight:     500;
  letter-spacing:  -0.01em;
  border-radius:   8px;
  text-decoration: none;
  white-space:     nowrap;
  line-height:     1;
  transition:      opacity var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.header__cta--secondary {
  color:      rgba(255, 255, 255, 0.6);
  background: transparent;
}

.header__cta--secondary:hover {
  color:      rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.06);
}

[data-theme="white"] .header__cta--secondary {
  color: rgba(15, 23, 42, 0.55);
}

[data-theme="white"] .header__cta--secondary:hover {
  color:      rgba(15, 23, 42, 0.95);
  background: rgba(15, 23, 42, 0.05);
}

.header__cta--primary {
  color:      #ffffff;
  background: var(--color-accent);
  box-shadow: 0 0 0 1px rgba(94, 106, 210, 0.3),
              0 1px 3px rgba(0, 0, 0, 0.25);
}

.header__cta--primary:hover {
  opacity: 0.85;
}

/* --- Hamburger (mobile) ----------------------------------- */
.header__mobile-toggle {
  display:        none;
  flex-direction: column;
  justify-content: center;
  gap:            5px;
  width:          36px;
  height:         36px;
  padding:        8px;
  background:     none;
  border:         1px solid rgba(255, 255, 255, 0.12);
  border-radius:  8px;
  cursor:         pointer;
  flex-shrink:    0;
  transition:     border-color var(--transition-fast);
}

.header__mobile-toggle:hover {
  border-color: rgba(255, 255, 255, 0.28);
}

[data-theme="white"] .header__mobile-toggle {
  border-color: rgba(15, 23, 42, 0.15);
}

[data-theme="white"] .header__mobile-toggle:hover {
  border-color: rgba(15, 23, 42, 0.35);
}

.header__mobile-toggle span {
  display:          block;
  width:            100%;
  height:           1.5px;
  background:       var(--color-text);
  border-radius:    1px;
  transition:       transform 0.25s ease, opacity 0.2s ease;
  transform-origin: center;
}

.header__mobile-toggle.is-open span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.header__mobile-toggle.is-open span:nth-child(2) {
  opacity:   0;
  transform: scaleX(0);
}
.header__mobile-toggle.is-open span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ============================================================
   MOBILE OVERLAY
   ============================================================ */
.header__overlay {
  position:        fixed;
  top:             64px;
  left:            0;
  right:           0;
  bottom:          0;
  z-index:         999;
  background:      rgba(10, 10, 10, 0.97);
  backdrop-filter:         blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  display:         flex;
  flex-direction:  column;
  padding:         32px 24px 48px;
  opacity:         0;
  pointer-events:  none;
  transform:       translateY(-8px);
  transition:
    opacity   var(--transition-slow),
    transform var(--transition-slow);
}

.header__overlay.is-open {
  opacity:        1;
  pointer-events: auto;
  transform:      translateY(0);
}

[data-theme="white"] .header__overlay {
  background: rgba(255, 255, 255, 0.97);
}

@media (prefers-reduced-motion: reduce) {
  .header__overlay { transition: none; }
}

/* Nav links dans l'overlay */
.header__overlay-menu {
  list-style: none;
  margin:     0;
  padding:    0;
  flex:       1;
}

.header__overlay-menu li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="white"] .header__overlay-menu li {
  border-color: rgba(15, 23, 42, 0.08);
}

.header__overlay-link {
  display:         block;
  padding:         18px 0;
  font-size:       22px;
  font-weight:     500;
  letter-spacing:  -0.02em;
  color:           var(--color-text);
  text-decoration: none;
  transition:      color var(--transition-fast), padding-left var(--transition-fast);
}

.header__overlay-link:hover {
  color:        var(--color-accent);
  padding-left: 6px;
}

/* CTA dans l'overlay */
.header__overlay-actions {
  display:        flex;
  flex-direction: column;
  gap:            12px;
  padding-top:    32px;
}

.header__overlay-actions .header__cta {
  justify-content: center;
  padding:         14px 24px;
  font-size:       15px;
  border-radius:   10px;
}

.header__overlay-actions .header__cta--secondary {
  border: 1px solid rgba(255, 255, 255, 0.12);
}

[data-theme="white"] .header__overlay-actions .header__cta--secondary {
  border-color: rgba(15, 23, 42, 0.15);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .header           { height: 56px; }
  .header__overlay  { top: 56px; }
  .header__nav      { display: none; }
  .header__actions  { display: none; }
  .header__mobile-toggle { display: flex; }
}

@media (min-width: 769px) {
  .header__mobile-toggle { display: none; }
  .header__overlay       { display: none !important; }
}