/* V153 - niveaux compacts dans le menu Apprendre */
#nav-panel-learn{
  width:min(430px,calc(100vw - 24px))!important;
  max-height:min(78vh,640px)!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
}
#nav-panel-learn .nav-levels-v152{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:.22rem!important;
  margin:.15rem .75rem .55rem 3.85rem!important;
  padding:.35rem 0 .55rem!important;
  border-bottom:1px solid rgba(93,117,158,.20)!important;
}
#nav-panel-learn .nav-level-link{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:.65rem!important;
  min-height:36px!important;
  padding:.38rem .58rem!important;
  border-radius:8px!important;
  color:var(--text-muted,#9aa8bf)!important;
  text-decoration:none!important;
  white-space:normal!important;
  background:transparent!important;
  transition:background .15s ease,color .15s ease,transform .15s ease!important;
}
#nav-panel-learn .nav-level-link:hover{
  color:var(--text,#f4f7fb)!important;
  background:rgba(45,212,191,.08)!important;
  transform:translateX(3px);
}
#nav-panel-learn .nav-level-main{
  display:flex!important;
  flex-direction:column!important;
  min-width:0!important;
  gap:1px!important;
}
#nav-panel-learn .nav-level-main strong{
  font-size:.78rem!important;
  line-height:1.15!important;
  font-weight:800!important;
}
#nav-panel-learn .nav-level-desc{
  font-size:.63rem!important;
  line-height:1.2!important;
  opacity:.75!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  max-width:180px!important;
}
#nav-panel-learn .nav-level-cefr{
  flex:0 0 auto!important;
  min-width:44px!important;
  padding:.16rem .32rem!important;
  border:1px solid rgba(45,212,191,.25)!important;
  border-radius:999px!important;
  color:var(--accent-teal,#2dd4bf)!important;
  background:rgba(45,212,191,.06)!important;
  font-size:.61rem!important;
  font-weight:850!important;
  text-align:center!important;
}
#nav-panel-learn .nav-level-link:hover .nav-level-cefr{
  border-color:rgba(45,212,191,.5)!important;
  background:rgba(45,212,191,.13)!important;
}
@media(max-width:700px){
  #nav-panel-learn .nav-levels-v152{
    margin-left:2.65rem!important;
    margin-right:.5rem!important;
  }
}