/* Modern Header — complements utilistheme.css */
:root{
  --hdr-h: 64px;
  --hdr-bg: hsla(0,0%,100%,.72);
  --hdr-blur: blur(10px);
  --hdr-ring: rgba(17,24,39,.06);
  --hdr-shadow: 0 10px 30px -20px rgba(0,0,0,.35);
  --grad-1: #6366f1;
  --grad-2: #0ea5e9;
}

.site-header{
  position: sticky; top: 0; z-index: 50;
  background: var(--hdr-bg);
  backdrop-filter: var(--hdr-blur);
  -webkit-backdrop-filter: var(--hdr-blur);
  border-bottom: 1px solid var(--border);
}

.site-header__inner{
  display:grid; grid-template-columns: auto 1fr auto; align-items:center;
  gap: 1rem; min-height: var(--hdr-h);
}

.brand{ display:flex; align-items:center; gap:.75rem; color:inherit; text-decoration:none; }
.brand__logo{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  color:#fff; font-weight:700;
  background: linear-gradient(135deg, var(--grad-1), var(--grad-2));
  box-shadow: 0 8px 18px -10px rgba(99,102,241,.6);
}
.brand__meta{ display:flex; flex-direction:column; line-height:1.05; }
.brand__title{ font-size:1rem; }
.brand__sub{ font-size:.75rem; color:var(--muted); }

/* Nav */
.nav{ display:flex; align-items:center; gap:.75rem; justify-content:flex-start; }
.nav__link{
  position:relative; padding:.45rem .7rem; border-radius:10px; text-decoration:none;
  color:inherit; border:1px solid transparent;
}
.nav__link:hover{ background: var(--hdr-ring); }
.nav__link.is-active{
  border-color: var(--hdr-ring);
  background: linear-gradient(135deg, rgba(99,102,241,.1), rgba(14,165,233,.08));
}

/* Userbar */
.userbar{ display:flex; align-items:center; gap:.5rem; }
.btn-login{
  padding:.5rem .8rem; border:1px solid var(--border); border-radius:12px; text-decoration:none; background:#fff;
}
.btn-login:hover{ background:#f9fafb; }

.user-dropdown{ position:relative; }
.user-btn{
  display:flex; align-items:center; gap:.5rem; background:#fff; border:1px solid var(--border);
  border-radius:12px; padding:.4rem .6rem; cursor:pointer;
}
.user-btn:hover{ background:#f9fafb; }
.user-avatar{
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:700;
  background: linear-gradient(135deg, var(--grad-2), var(--grad-1));
}
.user-name{ font-size:.9rem; color:var(--text); }
.caret{ opacity:.7; }

.menu{
  position:absolute; right:0; top: calc(100% + 8px);
  width: 220px; background:#fff; border:1px solid var(--border); border-radius:14px;
  box-shadow: var(--hdr-shadow); padding:.35rem; list-style:none; margin:0;
}
.menu a{
  display:block; padding:.6rem .7rem; border-radius:10px; text-decoration:none; color:inherit;
}
.menu a:hover{ background:#f3f4f6; }
.sep{ border:none; border-top:1px solid var(--border); margin:.25rem .35rem; }

/* --- MOBILE --- */
@media (max-width: 860px){
  .site-header__inner{ position: relative; }

  /* Burger visible */
  .nav-toggle{ display:inline-flex; }

  /* Nav: ancré au header, caché par défaut */
  .nav{
    position: absolute;       /* au lieu de fixed */
    left: 0; right: 0;
    top: var(--hdr-h);         /* s’ouvre sous la barre */
    background: rgba(255,255,255,.98);
    backdrop-filter: var(--hdr-blur);
    -webkit-backdrop-filter: var(--hdr-blur);
    border-bottom: 1px solid var(--border);

    /* Layout vertical */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .25rem;
    padding: .75rem 1rem;

    /* ÉTAT FERMÉ (vraiment caché) */
    transform: translateY(-16px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    /* Anim */
    transition:
      transform .2s ease,
      opacity .15s ease,
      visibility 0s linear .2s; /* cache la visibilité après l’anim */
    z-index: 60;
  }

  /* ÉTAT OUVERT */
  .nav.is-open{
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
      transform .2s ease,
      opacity .15s ease;
  }
}


/* Subtle gradient strip */
.site-header::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background: linear-gradient(90deg, var(--grad-1), var(--grad-2));
  opacity:.7;
}


/* --- Force desktop vs mobile pour le burger --- */
.site-header .nav-toggle { 
  display: none !important;           /* par défaut : caché (desktop) */
}

@media (max-width: 860px) {
  .site-header .nav-toggle {
    display: inline-flex !important;  /* mobile : visible */
  }
}

@media (min-width: 861px) {
  .site-header .nav-toggle {
    display: none !important;         /* desktop : re-caché au cas où */
  }
}