v3 : inertie à cinq crans — interface (L10)

L'inertie se lit en crans, « 3 / 5 · moyenne » (très basse, basse,
moyenne, haute, très haute ; fr, en, es). Le sélecteur offre les cinq
crans, l'actuel marqué ; le changement se vote au cran de l'article.
L'article dit le passé de son inertie (vote ou réglage de départ).

« Réglages de la formule », en lecture seule, depuis l'en-tête du doc et
depuis le vote d'un article (onglet « Réglages » du panneau, dans
l'URL) : W et sa source, C, B, la participation habituelle (médiane ou
référence, sur combien de propositions, quand), et les cinq crans : M,
G, part exigée, voix pour exigées à la participation de la version
regardée (ou habituelle depuis l'en-tête).

Composants à part (InertiaPicker, FormulaSettings), branchés par
quelques lignes dans VoteView. La formule dépliée ne fait plus déborder
le panneau. e2e : C4 (cran de l'article dans la formule), C20 (réglages
et cinq crans), M1 (réglages lisibles sur mobile).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/src/lib/components/DocPanel.svelte

@@ -3,6 +3,7 @@
   import { t } from '$lib/i18n/index.svelte';
   import { relationOf, titleOf } from '$lib/labels';
   import type { Lang } from '$lib/types';
+  import FormulaSettings from './FormulaSettings.svelte';
   import Icon from './Icon.svelte';
   import ProposeView from './ProposeView.svelte';
   import VoteView from './VoteView.svelte';
@@ -27,21 +28,30 @@
         ['vote', t('panel.vote'), !!voteId],
         ['proposals', `${t('panel.proposals')}${versions.length > 1 ? ` · ${versions.length}` : ''}`, !!unit],
         ['propose', t('panel.propose'), true],
+        // Reached from the head of the document or from a vote; shown while it is open.
+        ['settings', t('panel.settings'), panel.tab === 'settings'],
       ] as const
     ).filter(([, , show]) => show),
   );
   let body: HTMLElement | undefined = $state();
+  let tablist: HTMLElement | undefined = $state();
 
   $effect(() => {
     void panel.tab;
     void panel.proposalId;
     body?.scrollTo({ top: 0 });
   });
+
+  // On a narrow sheet the tabs scroll: the open one stays in sight.
+  $effect(() => {
+    void panel.tab;
+    tablist?.querySelector<HTMLElement>('[aria-selected="true"]')?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+  });
 </script>
 
 <aside class="panel card" aria-label={t('panel.vote')}>
   <div class="bar">
-    <div class="tabs" role="tablist">
+    <div class="tabs" role="tablist" bind:this={tablist}>
       {#each tabs as [key, label] (key)}
         <button role="tab" type="button" aria-selected={panel.tab === key} class:on={panel.tab === key} onclick={() => onchange({ ...panel, tab: key, prefill: null })}>{label}</button>
       {/each}
@@ -57,6 +67,7 @@
         {lang}
         onopen={(id) => onchange({ ...panel, proposalId: id, tab: 'vote' })}
         onpropose={(prefill) => onchange({ ...panel, tab: 'propose', prefill, draftId: null })}
+        onsettings={() => onchange({ ...panel, proposalId: voteId, tab: 'settings' })}
       />
     {:else if panel.tab === 'proposals' && unit}
       <ul class="versions">
@@ -82,6 +93,8 @@
         prefill={panel.prefill ?? null}
         ondone={(r) => onchange(r.proposalId ? { unitId: doc.proposal(r.proposalId)?.unitId ?? panel.unitId, proposalId: r.proposalId, tab: 'vote' } : { ...panel, tab: 'proposals' })}
       />
+    {:else if panel.tab === 'settings'}
+      <FormulaSettings {doc} proposalId={voteId} />
     {/if}
   </div>
 </aside>