/* V143 : Header unifié du silo Apprendre le français */

/* Une seule barre de navigation, plus de bandeau détaché au-dessus. */
.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;
}
.nav-group-top{
  border-radius:10px;
}
.nav-group-link{
  padding:.55rem .45rem!important;
}
.nav-group-toggle{
  width:28px!important;
  min-width:28px!important;
  height:34px!important;
  border-radius:8px!important;
}

/* Outils de droite : parcours, progression et langue d'interface. */
.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-badge{
  padding:.1rem .34rem!important;
  font-size:.55rem!important;
  margin-left:.05rem!important;
  color:#ffe08a!important;
  background:rgba(20,39,54,.42)!important;
}
.header-tools .site-switcher-sep{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;
}
.stat-hud-item{
  padding:.42rem .58rem!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;
}

/* État actif plus lisible dans la navigation principale. */
body[data-page="learn"] .nav-group[data-nav-group="learn"] > .nav-group-top,
body[data-page="discover"] .nav-group[data-nav-group="discover"] > .nav-group-top,
body[data-page="community"] .nav-group[data-nav-group="community"] > .nav-group-top,
body[data-page="about"] .nav-group[data-nav-group="about"] > .nav-group-top{
  background:rgba(45,212,191,.08);
}
body[data-page="learn"] .nav-group[data-nav-group="learn"] .nav-group-link,
body[data-page="discover"] .nav-group[data-nav-group="discover"] .nav-group-link,
body[data-page="community"] .nav-group[data-nav-group="community"] .nav-group-link,
body[data-page="about"] .nav-group[data-nav-group="about"] .nav-group-link{
  color:#e9fffb!important;
}

/* Tablettes : on garde le header compact sans casser la navigation. */
@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:86px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .stat-hud-label{display:none!important}
}

/* Navigation mobile : première ligne identité + menu,
   seconde ligne outils. */
@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:390px;
  }
  .header-tools .site-switcher-option{
    flex:1 1 0;
    justify-content:center;
  }
  .header-actions{
    flex:0 0 auto;
  }
}

@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;
  }
  .header-tools .site-switcher-badge{
    display:none!important;
  }
  .stat-hud{
    display:none!important;
  }
  .lang-dropdown-toggle{
    min-height:38px;
  }
}