/* La barre de navigation : le bandeau fixe, le menu déroulant des petits
   écrans et le sélecteur de langue. */

.nav{position:fixed;inset:1rem 0 auto 0;z-index:60}
.nav.is-scrolled .nav-inner{background:color-mix(in oklab,var(--paper) 92%,transparent);
  backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);
  box-shadow:var(--shadow-sm)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  width:min(100% - 2rem,1240px);margin-inline:auto;padding:.6rem .8rem;
  border-radius:999px;border:1px solid var(--line);transition:all .3s var(--ease);background:transparent}
.nav-logo{display:flex;align-items:center;gap:.6rem;font-family:var(--font-display);
  font-size:1.15rem;color:var(--bark);text-transform:uppercase}
/* Le logo CPE est un bandeau de 4,18:1 : il garde ses proportions et n'entre
   dans aucun cercle, sous peine d'être rogné. */
.nav-cpe{height:34px;width:auto;display:block;flex:0 0 auto}
.nav-wordmark{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.nav-wordmark b{font-size:.86rem;letter-spacing:.005em;font-weight:inherit;white-space:nowrap}
.nav-wordmark small{font-size:.66rem;font-family:var(--font-sans);font-weight:700;
  letter-spacing:.09em;color:var(--muted);text-transform:uppercase}
/* En dessous de 1120px la barre est déjà juste : on ne creuse l'écart entre le
   logo CPE et le nom que lorsqu'il reste de la place. */
@media (min-width:1120px){
  .nav-logo{gap:1.1rem}
}
@media (max-width:520px){
  .nav-cpe{height:24px}
  .nav-wordmark{display:none}
}
.nav-links{display:flex;gap:1.4rem;font-weight:600;font-size:.9rem}
.nav-links a{position:relative;padding:.3rem 0;color:var(--ink)}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:2px;
  background:var(--clay);transition:right .3s var(--ease)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{right:0}
.nav-links a[aria-current="page"]{color:var(--moss-deep)}
.nav-actions{display:flex;align-items:center;gap:.6rem}
/* Bouton du menu mobile. Les trois traits se croisent en X à l'ouverture, la
   pastille virant à l'orange. */
/* colonne flex avec un gap fixe plutôt que des marges : l'écart entre deux
   traits vaut alors exactement hauteur + gap, ce dont dépend la croix */
.burger{display:none;width:44px;height:44px;border-radius:50%;
  background:color-mix(in oklab,var(--teal) 12%,var(--paper));
  border:1px solid color-mix(in oklab,var(--teal) 28%,transparent);
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  box-shadow:var(--shadow-sm);
  transition:background .25s var(--ease),border-color .25s var(--ease)}
.burger span{display:block;width:19px;height:3px;border-radius:2px;background:var(--teal-deep);
  transition:.3s var(--ease)}
.burger span:nth-child(2){width:13px}
.burger span:nth-child(3){width:16px}
.burger:hover{background:color-mix(in oklab,var(--teal) 20%,var(--paper))}
.burger.is-open{background:color-mix(in oklab,var(--clay) 22%,var(--paper));
  border-color:color-mix(in oklab,var(--clay) 45%,transparent)}
/* à l'ouverture les trois traits se rejoignent : même longueur, puis croix */
.burger.is-open span{background:#7a4508;width:19px}
.burger.is-open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* Menu mobile */
.drawer{position:fixed;inset:0;background:var(--cream);z-index:58;
  transform:translateY(-100%);transition:transform .5s var(--ease);padding:6.4rem 1.6rem 2rem;display:flex;
  overflow-y:auto}
.drawer.is-open{transform:translateY(0)}
/* empêche le contenu de la page de transparaître à travers le menu */
body.nav-open{overflow:hidden}
body.nav-open main,body.nav-open footer{visibility:hidden}
.drawer-nav{display:flex;flex-direction:column;gap:.75rem;font-family:var(--font-display);
  font-size:1.45rem;text-transform:uppercase;color:var(--bark);width:100%}
/* chaque entrée du menu mobile est précédée de son icône, dans une pastille
   qui s'allume sur la page courante */
.drawer-nav a{display:flex;align-items:center;gap:.85rem}
.drawer-ico{flex:0 0 auto;width:42px;height:42px;padding:9px;border-radius:14px;
  background:color-mix(in oklab,var(--teal) 12%,var(--paper));color:var(--teal-deep);
  border:1px solid color-mix(in oklab,var(--teal) 26%,transparent);
  transition:background .2s,color .2s,border-color .2s}
.drawer-nav a[aria-current="page"]{color:var(--clay)}
.drawer-nav a[aria-current="page"] .drawer-ico{background:color-mix(in oklab,var(--clay) 20%,var(--paper));
  color:#7a4508;border-color:color-mix(in oklab,var(--clay) 42%,transparent)}
.drawer-nav .langsw{align-self:flex-start;margin-top:.2rem}
.drawer-nav .btn{align-self:flex-start;font-family:var(--font-sans);font-size:.88rem;padding:.55rem 1.1rem;margin-top:.35rem}
@media (max-width:400px){
  .drawer{padding:6.1rem 1.3rem 1.6rem}
  .drawer-nav{font-size:1.25rem;gap:.6rem}

}

@media (max-width:960px){
  .nav-links{display:none}
  .burger{display:flex}
  .nav-actions .btn{display:none}

}

/* sélecteur de langue dans la nav */
.langsw{
  display:inline-flex;align-items:center;gap:.1rem;padding:.28rem;
  border:1px solid var(--line);border-radius:999px;background:var(--paper);
}
.langsw span{
  font-size:.7rem;font-weight:800;letter-spacing:.06em;color:var(--muted);
  padding:.28rem .55rem;border-radius:999px;transition:.25s var(--ease)
}
.langsw span.is-active{background:var(--teal-deep);color:var(--paper)}
.langsw:hover{border-color:color-mix(in oklab,var(--olive) 60%,transparent)}

@media (min-width:1400px){
  .nav-inner{width:min(100% - 6rem,var(--container))}
}