/* ===============================
   HEADER / NAVIGATION (2 lignes)
   ligne 1 : logo + bouton thème
   ligne 2 : menu centré
================================ */

.site-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  z-index: 1000;

  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 6px 18px rgba(2,3,6,.06);
}



/* grille 2 lignes */
.header-inner{
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "brand theme"
    "nav   nav";
  gap: .5rem 1rem;
  padding: .75rem 0;
  align-items: center;
}

/* marque */
.brand{
  grid-area: brand;
  display:flex;
  align-items:center;
  gap:.75rem;
  text-decoration:none;
  color: var(--ink);
}

.brand img{
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.brand .title{
  display:flex;
  flex-direction:column;
  line-height:1.15;
}

.brand .title strong{ font-size: 1rem; }
.brand .title span{ font-size: .9rem; color: var(--muted); }

/* Burger (mobile) */
.nav-toggle{
  display:none;
  border:1px solid var(--border);
  background: var(--surface);
  padding:.6rem .75rem;
  border-radius: 12px;
  cursor:pointer;
  color: var(--ink);
}

.nav-toggle .bars{
  width: 22px;
  height: 16px;
  position: relative;
  display:block;
}

.nav-toggle .bars::before,
.nav-toggle .bars::after,
.nav-toggle .bars span{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:2px;
  background: var(--ink);
  border-radius: 2px;
}

.nav-toggle .bars::before{ top:0; }
.nav-toggle .bars span{ top:7px; }
.nav-toggle .bars::after{ bottom:0; }

/* zone nav (ligne 2) */
.header-actions{
  grid-area: nav;
  display:flex;
  justify-content:center;
  align-items:center;
}

/* nav desktop */
.site-nav ul{
  display:flex;
  gap:.25rem;
  list-style:none;
  padding:0;
  margin:0;
  align-items:center;
  justify-content:center;
  flex-wrap: wrap; /* autorise 2 lignes si besoin */
}

.site-nav a{
  display:inline-flex;
  padding:.55rem .75rem;
  border-radius: 12px;
  text-decoration:none;
  color: var(--ink);
  white-space: nowrap;
}

.site-nav a[aria-current="page"]{
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
}

.site-nav a:hover{
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}

/* bouton thème (ligne 1 à droite) */
.theme-toggle{
  grid-area: theme;
  justify-self: end;

  display:inline-flex;
  align-items:center;
  gap:.4rem;

  height: 38px;
  padding: 0 .85rem;

  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);

  cursor:pointer;
  font-size: .9rem;
  font-weight: 600;
  white-space: nowrap;

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

.theme-toggle .icon{
  font-size: 1rem;
  line-height: 1;
}

.theme-toggle:hover{
  background: color-mix(in srgb, var(--ink) 6%, var(--surface));
}

.theme-toggle:active{
  transform: scale(.96);
}

/* petit écran : label caché */
@media (max-width: 520px){
  .theme-toggle .label{ display:none; }
}

/* mobile : burger + drawer */
@media (max-width: 920px){
  .header-inner{
    grid-template-columns: 1fr auto auto;
    grid-template-areas:
      "brand navbtn theme"
      "nav   nav   nav";
  }

  .nav-toggle{
    display:inline-flex;
    grid-area: navbtn;
  }

  .header-actions{
    justify-content: stretch;
  }

  .site-nav{
    display:none;
    width: 100%;
    border-top: 1px solid var(--border);
    padding-top: .5rem;
  }

  .site-nav[data-open="true"]{
    display:block;
  }

  .site-nav ul{
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: .25rem 0;
  }

  .site-nav a{
    padding: .85rem 1rem;
    white-space: normal;
  }
}

@media (max-width: 920px){
  :root{
    --header-h: 86px; /* header mobile (logo + boutons) */
  }
}