.menu-toggle{display:none;width:46px;height:46px;border:1px solid var(--line);border-radius:50%;background:var(--paper);color:var(--ink);font-size:1.35rem;cursor:pointer}.navlinks{gap:18px}.navlinks>a:not(.button){display:flex}.nav-group{position:relative}.nav-group-toggle{display:flex;align-items:center;gap:5px;border:0;background:transparent;color:var(--ink);font:inherit;font-size:.9rem;cursor:pointer;padding:10px 0}.nav-group-toggle span{font-size:1rem;transition:transform .2s ease}.nav-submenu{display:none;position:absolute;top:100%;left:-18px;z-index:50;width:245px;padding:10px;background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}.nav-submenu a,.navlinks .nav-submenu a:not(.button){display:flex;padding:10px 12px;border-radius:10px;line-height:1.25}.nav-submenu a:hover,.nav-submenu a:focus{background:var(--sand)}.nav-group:hover .nav-submenu,.nav-group:focus-within .nav-submenu,.nav-group.open .nav-submenu{display:block}.nav-group.open .nav-group-toggle span{transform:rotate(180deg)}
@media(max-width:1100px) and (min-width:851px){.navlinks{gap:11px}.navlinks>a,.nav-group-toggle{font-size:.78rem}.brand span{display:none}}
@media(max-width:850px){.menu-toggle{display:grid;place-items:center}.nav{position:relative}.navlinks{display:none;position:absolute;top:74px;left:0;right:0;max-height:calc(100vh - 92px);overflow-y:auto;background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:14px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch;gap:4px}.navlinks.open{display:flex}.navlinks>a,.navlinks>a:not(.button){display:flex!important;padding:12px 14px;border-radius:12px}.nav-group-toggle{width:100%;justify-content:space-between;padding:12px 14px;font-weight:600}.nav-submenu{position:static;width:auto;margin:0 6px 8px;padding:5px;background:var(--sand);border:0;border-radius:12px;box-shadow:none}.nav-group:hover .nav-submenu:not(:focus-within){display:none}.nav-group.open .nav-submenu,.nav-group:focus-within .nav-submenu{display:block}.navlinks .button{margin-top:6px;justify-content:center}.brand span{font-size:.83rem}}

/* UX V2 — navigation clavier et mobile */
.menu-toggle:focus-visible,.nav-group-toggle:focus-visible,.navlinks>a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.navlinks a[aria-current="page"]{color:var(--sage-dark);font-weight:800}
@media(max-width:850px){
  .navlinks a[aria-current="page"]{background:var(--sand)}
  .navlinks{overscroll-behavior:contain}
}