feat(nav): barre par échelles S / M / XL, tiroir < 1280, fil d'échelle mobile

- NavEchelles : trois groupes (accroche pastille + titre, <ul> étiqueté,
  aria-current) ≥ 1280 ; groupe courant seul 768-1279 ; lu depuis utils/echelles.ts
- NavTiroir remplace le menu déroulant : tiroir à droite, voile, Échap, focus
  piégé et rendu, cibles 44 px ; bouton « Menu » masqué ≥ 1280
- FilEchelle < 768, dans le flux avant le conteneur de page
- Soutenir et À propos dans la barre ≥ 1280 ; Signaler quitte la barre
- barre de recherche d'en-tête retirée (/ garde sa recherche dans MobileSheet
  à 768 et 1000, vérifié au DOM)
- html lang="fr" (Lighthouse html-has-lang)
B10 M2-M4.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01EBu7CSLy7PJgL4HJaV5oHP

components/NavEchelles.vue

@@ -0,0 +1,148 @@
+<!--
+  NavEchelles — B10-M2
+  Barre des trois échelles S / M / XL, lue depuis utils/echelles.ts (source unique).
+  ≥ 1280 px : les trois groupes ; 768-1279 px : le seul groupe de la page courante ;
+  < 768 px : rien (FilEchelle + NavTiroir prennent le relais).
+  Chaque groupe = <ul> étiqueté par son accroche (pastille + titre de l'échelle).
+-->
+<template>
+  <nav class="nav-echelles" aria-label="Échelles">
+    <div
+      v-for="id in ORDRE_ECHELLES"
+      :key="id"
+      class="nav-echelles__grp"
+      :class="{ 'nav-echelles__grp--courant': courant?.echelle === id }"
+    >
+      <span :id="`nav-echelle-${id}`" class="nav-echelles__kick">
+        <span class="nav-echelles__pastille">{{ id }}</span>{{ ECHELLES[id].titre }}
+      </span>
+      <ul class="nav-echelles__tabs" :aria-labelledby="`nav-echelle-${id}`">
+        <li v-for="o in ECHELLES[id].onglets" :key="o.to">
+          <NuxtLink
+            :to="o.to"
+            class="nav-echelles__tab"
+            :class="{ 'nav-echelles__tab--actif': o.actif(route) }"
+            :aria-current="o.actif(route) ? 'page' : undefined"
+          >{{ o.libelle }}</NuxtLink>
+        </li>
+      </ul>
+    </div>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { ECHELLES, ORDRE_ECHELLES, echelleDeRoute } from '~/utils/echelles'
+
+const route = useRoute()
+const courant = computed(() => echelleDeRoute(route))
+</script>
+
+<style scoped>
+.nav-echelles {
+  display: none;
+  align-self: stretch;
+  flex: 1 1 auto;
+  min-width: 0;
+  gap: var(--space-lg);
+}
+
+.nav-echelles__grp {
+  position: relative;
+  display: none;
+  flex-direction: column;
+  justify-content: flex-end;
+  min-width: 0;
+}
+
+.nav-echelles__kick {
+  padding: 0 var(--space-xs);
+  font-size: 0.66rem;
+  font-weight: var(--fw-semibold);
+  letter-spacing: 0.04em;
+  line-height: 1.3;
+  white-space: nowrap;
+  color: color-mix(in srgb, var(--text) 78%, transparent);
+}
+
+.nav-echelles__grp--courant .nav-echelles__kick {
+  color: var(--text);
+}
+
+.nav-echelles__pastille {
+  display: inline-block;
+  margin-right: 5px;
+  padding: 0 5px;
+  border-radius: var(--radius-sm);
+  background: var(--accent);
+  color: var(--on-accent);
+  font-weight: var(--fw-bold);
+}
+
+.nav-echelles__tabs {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.nav-echelles__tab {
+  display: inline-block;
+  padding: 4px 9px 9px;
+  font-size: 0.8rem;
+  font-weight: var(--fw-medium);
+  white-space: nowrap;
+  text-decoration: none;
+  color: color-mix(in srgb, var(--text) 78%, transparent);
+  border-bottom: 2px solid transparent;
+  transition: color var(--dur-fast) var(--ease-out);
+}
+
+.nav-echelles__tab:hover {
+  color: var(--text);
+}
+
+.nav-echelles__tab:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: -2px;
+  border-radius: var(--radius-sm);
+}
+
+.nav-echelles__tab--actif {
+  color: var(--text);
+  font-weight: var(--fw-semibold);
+  border-bottom-color: var(--nav-primary-solid);
+}
+
+/* 768-1279 : le seul groupe courant, aligné à gauche après le logo */
+@media (min-width: 768px) {
+  .nav-echelles {
+    display: flex;
+    justify-content: flex-start;
+  }
+  .nav-echelles__grp--courant {
+    display: flex;
+  }
+}
+
+/* ≥ 1280 : les trois groupes, centrés, séparés par un filet */
+@media (min-width: 1280px) {
+  .nav-echelles {
+    justify-content: center;
+  }
+  .nav-echelles__grp {
+    display: flex;
+  }
+  .nav-echelles__grp + .nav-echelles__grp::before {
+    content: "";
+    position: absolute;
+    left: calc(var(--space-lg) / -2);
+    top: 10px;
+    bottom: 10px;
+    border-left: 1px solid var(--border);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .nav-echelles__tab { transition: none; }
+}
+</style>