/* =========================================================
   Nuxerya — header_css.css
   Header fixe, navigation premium, responsive mobile
========================================================= */

/* =========================================================
   Header layout
========================================================= */

.site-header,
.navbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:2000;

  height:var(--nav-h, 72px);
  padding:0;

  display:flex;
  align-items:center;

  background:transparent;
  border:0;
  box-shadow:none;

  overflow:visible;
  isolation:isolate;

  transform:translate3d(0, var(--overscroll-y, 0px), 0);
  will-change:transform;
  transition:transform .18s cubic-bezier(.2,.8,.2,1);
}

html.is-overscrolling .site-header,
html.is-overscrolling .navbar{
  transition:none;
}

/* Fond du header */
.site-header::after,
.navbar::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;

  background:
    radial-gradient(520px 160px at 18% 0%, rgba(26,81,166,.16), transparent 62%),
    radial-gradient(520px 180px at 86% 0%, rgba(106,51,216,.14), transparent 64%),
    linear-gradient(180deg, #070B14 0%, #070B14 100%);

  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

/* Ligne basse du header */
.site-header::before,
.navbar::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:2;

  height:1px;

  background:linear-gradient(
    90deg,
    transparent,
    rgba(88,241,211,.26),
    rgba(26,81,166,.22),
    rgba(106,51,216,.22),
    transparent
  );

  pointer-events:none;
}

.site-header__inner,
.navbar__inner{
  position:relative;
  z-index:1;

  width:min(1180px, 92%);
  height:100%;
  margin-inline:auto;

  display:grid;
  grid-template-columns:auto minmax(180px, 360px) auto;
  align-items:center;
  gap:0;
}

/* =========================================================
   Brand
========================================================= */

.site-header__brand,
.navbar .logo{
  min-width:max-content;

  display:inline-flex;
  align-items:center;
  gap:11px;

  color:var(--text-strong, #EEF3FA);
  text-decoration:none;
}

.site-header__mark{
  width:38px;
  height:38px;

  display:grid;
  place-items:center;

  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
}

.site-header__mark img,
.navbar .logo img.profile-pic{
  width:32px;
  height:32px;
  max-width:32px;
}

.site-header__brandText{
  display:grid;
  gap:1px;
}

.site-header__brandText strong{
  color:var(--text-strong, #EEF3FA);
  font-size:14px;
  font-weight:650;
  line-height:1;
  letter-spacing:-.02em;
}

.site-header__brandText small{
  color:rgba(168,177,195,.76);
  font-size:11px;
  font-weight:500;
  line-height:1.1;
}

/* =========================================================
   Promo banner
========================================================= */

.promo-banner{
  position:relative;
  isolation:isolate;
  overflow:hidden;

  justify-self:center;

  width:min(100%, 360px);
  height:34px;
  padding:0 14px 0 44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.085);

  display:flex;
  align-items:center;
  justify-content:flex-start;

  color:rgba(231,236,243,.76);
  background:rgba(255,255,255,.032);

  font-family:var(--font-body, Inter, system-ui, sans-serif);
  font-size:12px;
  font-weight:500;
  letter-spacing:.02em;
}

.promo-banner::before{
  content:"";
  position:absolute;
  left:16px;
  top:50%;
  z-index:3;

  width:7px;
  height:7px;
  border-radius:999px;

  background:var(--accent, #58F1D3);
  box-shadow:0 0 0 4px rgba(88,241,211,.08);

  transform:translateY(-50%);
}

.promo-banner::after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  z-index:2;

  width:62px;
  pointer-events:none;

  background:linear-gradient(
    90deg,
    rgba(11,17,30,1) 0%,
    rgba(11,17,30,.98) 48%,
    rgba(11,17,30,.72) 72%,
    rgba(11,17,30,0) 100%
  );
}

.promo-banner span{
  position:relative;
  z-index:1;

  width:max-content;
  max-width:none;

  overflow:visible;
  white-space:nowrap;
  text-overflow:clip;

  flex:0 0 auto;

  font-family:inherit;
  font-size:inherit;
  font-weight:inherit;
}

/* Compatibilité avec header_js existant */
.slide-in{
  transform:translateX(0);
  opacity:1;
}

.slide-out-left{
  transform:translateX(-100%);
  opacity:0;
}

.slide-in-right{
  transform:translateX(100%);
  opacity:0;
}

/* =========================================================
   Navigation desktop
========================================================= */

.site-header__nav,
.navbar nav{
  justify-self:end;
}

.site-header__nav ul,
.navbar nav ul{
  display:flex;
  align-items:center;
  gap:4px;

  list-style:none;
  margin:0;
  padding:0;
}

.site-header__nav li,
.navbar nav li{
  min-width:0;
}

.site-header__nav a,
.navbar nav a{
  position:relative;

  min-height:38px;
  padding:0 11px;
  border-radius:999px;
  border:1px solid transparent;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;

  color:rgba(231,236,243,.74);
  background:transparent;
  text-decoration:none;

  font-size:13px;
  font-weight:520;
  line-height:1;

  transition:
    color .18s ease,
    background .18s ease,
    border-color .18s ease,
    transform .18s ease;
}

.site-header__nav a::after,
.navbar nav a::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:4px;

  width:72%;
  height:1px;
  border-radius:999px;

  background:linear-gradient(
    90deg,
    transparent,
    rgba(88,241,211,.95),
    rgba(26,81,166,.95),
    rgba(106,51,216,.95),
    transparent
  );

  opacity:0;
  transform:translateX(-50%) scaleX(0);
  transform-origin:center;

  transition:
    transform .22s ease,
    opacity .22s ease;
}

.site-header__nav a:hover,
.navbar nav a:hover,
.site-header__nav a.active,
.navbar nav a.active,
.site-header__nav a.is-current,
.navbar nav a.is-current,
.site-header__nav a[aria-current="location"],
.navbar nav a[aria-current="location"]{
  color:var(--text-strong, #EEF3FA);
  background:transparent;
  border-color:transparent;
}

.site-header__nav a:hover::after,
.navbar nav a:hover::after,
.site-header__nav a.active::after,
.navbar nav a.active::after,
.site-header__nav a.is-current::after,
.navbar nav a.is-current::after,
.site-header__nav a[aria-current="location"]::after,
.navbar nav a[aria-current="location"]::after{
  opacity:1;
  transform:translateX(-50%) scaleX(1);
}

.site-header__nav a:active,
.navbar nav a:active{
  transform:translateY(1px);
}

.site-header__nav a:focus-visible,
.navbar nav a:focus-visible{
  outline:2px solid rgba(88,241,211,.42);
  outline-offset:3px;
}

/* =========================================================
   Toggle mobile
========================================================= */

.nav-toggle{
  display:none;

  width:42px;
  height:42px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);

  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;

  color:var(--text-strong, #EEF3FA);
  background:rgba(255,255,255,.035);

  cursor:pointer;

  transition:
    background .18s ease,
    border-color .18s ease,
    transform .18s ease;
}

.nav-toggle:hover{
  background:rgba(255,255,255,.055);
  border-color:rgba(88,241,211,.18);
}

.nav-toggle:active{
  transform:translateY(1px);
}

.nav-toggle:focus-visible{
  outline:2px solid rgba(88,241,211,.42);
  outline-offset:3px;
}

.nav-toggle span{
  display:block;

  width:18px;
  height:1.5px;
  border-radius:999px;

  background:currentColor;

  transition:
    transform .22s ease,
    opacity .18s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1){
  transform:translateY(6.5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2){
  opacity:0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3){
  transform:translateY(-6.5px) rotate(-45deg);
}

/* =========================================================
   Responsive
========================================================= */

@media (max-width: 1180px){
  .site-header__inner,
  .navbar__inner{
    grid-template-columns:auto 1fr auto;
    gap:14px;
  }

  .promo-banner{
    width:min(100%, 280px);
  }

  .site-header__nav a,
  .navbar nav a{
    padding-inline:9px;
    font-size:12.5px;
  }
}

@media (max-width: 980px){
  .site-header__inner,
  .navbar__inner{
    width:min(100% - 32px, 1180px);
    grid-template-columns:auto 1fr auto;
  }

  .promo-banner{
    justify-self:end;
    width:min(100%, 260px);
    margin-right:4px;
  }

  .nav-toggle{
    display:inline-flex;
    justify-self:end;
  }

  .site-header__nav,
  .navbar nav{
    position:fixed;
    top:calc(var(--nav-h, 72px) + 10px);
    left:16px;
    right:16px;

    max-height:calc(100vh - var(--nav-h, 72px) - 28px);
    padding:10px;
    border-radius:22px;
    border:1px solid rgba(255,255,255,.10);

    background:
      radial-gradient(420px 180px at 20% 0%, rgba(88,241,211,.055), transparent 62%),
      radial-gradient(420px 200px at 86% 0%, rgba(106,51,216,.10), transparent 62%),
      rgba(7,11,20,.94);

    box-shadow:0 24px 70px rgba(0,0,0,.38);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    overflow:auto;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transform:translate3d(0, -8px, 0) scale(.985);
    transform-origin:top center;

    transition:
      opacity .22s ease,
      visibility .22s ease,
      transform .22s cubic-bezier(.2,.8,.2,1);
  }

  .site-header__nav.open,
  .navbar nav.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;

    transform:translate3d(0, 0, 0) scale(1);
  }

  .site-header__nav ul,
  .navbar nav ul{
    display:grid;
    gap:4px;
  }

  .site-header__nav a,
  .navbar nav a{
    width:100%;
    min-height:46px;
    padding:0 14px;
    border-radius:16px;

    justify-content:flex-start;

    color:rgba(231,236,243,.84);
    font-size:14px;
  }

  .site-header__nav a::after,
  .navbar nav a::after{
    left:14px;
    right:auto;
    bottom:8px;

    width:42px;

    transform:scaleX(0);
    transform-origin:left;
  }

  .site-header__nav a:hover,
  .navbar nav a:hover,
  .site-header__nav a.active,
  .navbar nav a.active,
  .site-header__nav a.is-current,
  .navbar nav a.is-current,
  .site-header__nav a[aria-current="location"],
  .navbar nav a[aria-current="location"]{
    color:var(--text-strong, #EEF3FA);
    background:rgba(255,255,255,.045);
    border-color:rgba(255,255,255,.075);
  }

  .site-header__nav a:hover::after,
  .navbar nav a:hover::after,
  .site-header__nav a.active::after,
  .navbar nav a.active::after,
  .site-header__nav a.is-current::after,
  .navbar nav a.is-current::after,
  .site-header__nav a[aria-current="location"]::after,
  .navbar nav a[aria-current="location"]::after{
    transform:scaleX(1);
  }
}

@media (max-width: 680px){
  .site-header,
  .navbar{
    height:var(--nav-h, 68px);
  }

  .site-header__inner,
  .navbar__inner{
    width:min(100% - 28px, 1180px);
    gap:10px;
  }

  .site-header__brandText{
    display:none;
  }

  .promo-banner{
    justify-self:center;

    width:min(100%, 210px);
    height:32px;
    padding-left:38px;
    padding-right:11px;

    font-size:11px;
  }

  .promo-banner::before{
    left:14px;
    width:5px;
    height:5px;
  }

  .promo-banner::after{
    width:54px;
  }
}

@media (max-width: 430px){
  .promo-banner{
    display:none;
  }

  .site-header__inner,
  .navbar__inner{
    grid-template-columns:auto 1fr auto;
  }
}

@media (prefers-reduced-motion: reduce){
  .site-header,
  .navbar,
  .site-header *,
  .site-header *::before,
  .site-header *::after,
  .navbar *,
  .navbar *::before,
  .navbar *::after{
    transition:none !important;
    animation:none !important;
  }
}