
/* V145 : Header unifié du site "Apprendre l'albanais" */

.site-header{
  position:sticky;
  top:0;
  z-index:110;
  background:rgba(10,18,34,.94);
  border-bottom:1px solid rgba(71,92,128,.58);
  box-shadow:0 10px 28px rgba(0,0,0,.22);
  backdrop-filter:blur(16px) saturate(1.12);
  -webkit-backdrop-filter:blur(16px) saturate(1.12);
}
.header-inner{
  max-width:1480px!important;
  margin:0 auto!important;
  padding:.72rem 1.35rem!important;
  display:flex!important;
  align-items:center!important;
  gap:1rem!important;
  min-height:72px;
}
.logo{
  flex:0 0 auto;
  font-size:1.18rem;
}
.logo-mascot img{
  width:40px!important;
  height:40px!important;
}
.main-nav{
  margin-left:1.1rem;
  gap:.45rem!important;
  flex:1 1 auto;
  justify-content:flex-start;
}
.header-tools{
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.6rem;
  flex:0 0 auto;
}
.header-tools .site-switcher{
  position:static!important;
  display:block!important;
  padding:0!important;
  margin:0!important;
  background:none!important;
  border:0!important;
  width:auto!important;
}
.header-tools .site-switcher-inner{
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:3px;
  min-height:42px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(71,92,128,.72);
  border-radius:13px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.header-tools .site-switcher-option{
  min-height:34px;
  padding:.42rem .72rem!important;
  border-radius:10px!important;
  gap:.45rem!important;
  font-size:.78rem!important;
  font-weight:750!important;
  letter-spacing:-.01em;
  color:#a9b4c8;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.header-tools a.site-switcher-option:hover{
  color:#f4f7fb;
  background:rgba(255,255,255,.07);
  transform:translateY(-1px);
}
.header-tools .site-switcher-option.is-current{
  color:#062b29!important;
  background:linear-gradient(135deg,#46e1cf,#23c7b6)!important;
  box-shadow:0 4px 14px rgba(45,212,191,.2)!important;
}
.header-tools .site-switcher-flag{
  width:20px!important;
  height:14px!important;
}
.header-tools .site-switcher-check{
  font-size:.7rem;
  opacity:.8;
}
.header-tools .site-switcher-sep,
.header-tools .site-switcher-badge{
  display:none!important;
}
.header-actions{
  position:static!important;
  inset:auto!important;
  z-index:auto!important;
  margin:0!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  gap:.45rem!important;
}
.stat-hud{
  min-height:42px;
  border-radius:12px!important;
}
.lang-dropdown-toggle{
  min-height:42px;
  padding:.45rem .68rem!important;
  border-radius:12px!important;
  box-shadow:none!important;
  background:rgba(255,255,255,.035)!important;
}
.lang-dropdown-menu{
  top:calc(100% + .55rem)!important;
}

@media (max-width:1180px){
  .header-inner{gap:.6rem!important;padding-left:.85rem!important;padding-right:.85rem!important}
  .main-nav{margin-left:.25rem;gap:.12rem!important}
  .header-tools{gap:.35rem}
  .header-tools .site-switcher-option{padding:.4rem .48rem!important}
  .header-tools .site-switcher-label{
    max-width:100px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}
@media (max-width:900px){
  .header-inner{
    flex-wrap:wrap!important;
    min-height:0;
    padding:.55rem .75rem!important;
  }
  .logo{order:1}
  .nav-toggle{order:2!important;margin-left:auto!important}
  .main-nav{
    order:4!important;
    width:100%!important;
    margin:0!important;
  }
  .header-tools{
    order:3;
    width:100%;
    margin-left:0;
    padding-top:.5rem;
    border-top:1px solid rgba(71,92,128,.38);
    justify-content:space-between;
  }
  .header-tools .site-switcher{flex:1 1 auto}
  .header-tools .site-switcher-inner{
    width:100%;
    max-width:430px;
  }
  .header-tools .site-switcher-option{
    flex:1 1 0;
    justify-content:center;
  }
}
@media (max-width:560px){
  .header-inner{padding:.48rem .6rem!important}
  .logo{font-size:1rem!important}
  .logo-mascot img{width:34px!important;height:34px!important}
  .header-tools{gap:.35rem}
  .header-tools .site-switcher-inner{min-height:38px}
  .header-tools .site-switcher-option{
    min-height:30px;
    padding:.35rem .42rem!important;
    font-size:.7rem!important;
  }
  .stat-hud{display:none!important}
  .lang-dropdown-toggle{min-height:38px}
}
