html{scroll-behavior:smooth}
nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px clamp(24px,6vw,64px);
  border-bottom:1px solid var(--ligne);
  background:rgba(10,10,14,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.nav-brand{display:flex;align-items:center}
.nav-brand img{
  height:34px;width:auto;display:block;
  transition:opacity .2s;
}
@media (hover:hover){.nav-brand:hover img{opacity:.8}}
.lang{
  font-family:'MonVar';font-variation-settings:'wght' 600;font-size:12px;text-decoration:none;
  border:1px solid var(--ligne);border-radius:99px;padding:6px 12px;color:var(--gris);
  flex:0 0 auto;transition:border-color .2s;
}
@media (hover:hover){.lang:hover{border-color:rgba(255,255,255,.3)}}

/* La pastille de langue ne fait que 29px de haut et n'est qu'a 12px du lien voisin
   ("Retour aux EP" sur les pages EP) : au pouce, l'appui tombait souvent a cote.
   On etend la zone tactile a 44px sans changer l'apparence du bouton. */
.lang{position:relative}
.lang::after{
  content:"";position:absolute;left:-6px;right:-6px;top:50%;transform:translateY(-50%);
  height:44px;
}
/* Meme logique pour le lien de retour, qui ne fait que 16px de haut. */
.nav-back{position:relative}
.nav-back::after{
  content:"";position:absolute;left:-4px;right:-4px;top:50%;transform:translateY(-50%);
  height:44px;
}