Lot U : contrôles repris sans les affaiblir (C3, C4, C6, C19 à C21, C23 à C26, C34, M1) ; CONTROLES.md (C35 à C37) ; retouches vues aux captures (ligne d'ordre discrète, en-tête plus court sur téléphone, liste à poignées)

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

web/src/lib/components/DeepList.svelte

@@ -250,7 +250,7 @@
   .toggle {
     flex: 1 1 16rem;
     display: flex;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
     align-items: center;
     gap: 0.25rem 0.7rem;
     min-height: 3rem;
@@ -271,14 +271,18 @@
     color: var(--ink);
   }
   .count {
+    flex: none;
     font-size: 0.8rem;
     font-weight: 750;
     color: var(--water);
+    white-space: nowrap;
   }
   .waters {
     display: inline-flex;
+    flex-wrap: wrap;
     align-items: flex-end;
     gap: 3px;
+    min-width: 0;
   }
   .head .chevron {
     display: inline-flex;
@@ -296,7 +300,7 @@
     font-size: 0.84rem;
     padding: 0.3rem 0.7rem;
     min-height: 2.25rem;
-    margin-right: 0.6rem;
+    margin: 0 0.6rem 0 auto;
     border-radius: var(--r-pill);
   }
   .vote-section:hover {

web/src/lib/components/OrderLine.svelte

@@ -46,7 +46,7 @@
   <div class="bar">
     <span class="mark" aria-hidden="true"><Icon name="grip" size={16} /></span>
     <span class="name">{t('order.line')}</span>
-    <Crans level={unit.inertia} />
+    <Crans level={unit.inertia} short />
     {#if p?.seedMinimal}<span class="faint" title={t('doc.seed.long')}>{i18n.plural('doc.seed.votes', votes)}</span>
     {:else if p?.enteredAt}<span class="faint">{t('doc.adopted', { date: i18n.date(p.enteredAt) })}</span>{/if}
     {#if proposed.length && !reordering}
@@ -112,11 +112,24 @@
     min-height: 2rem;
     border-radius: var(--r-pill);
   }
+  /* Discreet as under an article: the gestures show when the line is pointed at. */
   .links {
     display: flex;
     flex-wrap: wrap;
     gap: 0.2rem;
     margin-left: auto;
+    opacity: 0;
+    transition: opacity 0.15s ease;
+  }
+  .order-line:hover .links,
+  .order-line:focus-within .links,
+  .order-line.unfolded .links {
+    opacity: 1;
+  }
+  @media (hover: none) {
+    .links {
+      opacity: 1;
+    }
   }
   .links button {
     border: 0;
@@ -141,7 +154,8 @@
     }
   }
   @media (prefers-reduced-motion: reduce) {
-    .order-line {
+    .order-line,
+    .links {
       transition: none;
     }
   }

web/src/lib/components/Reorder.svelte

@@ -175,8 +175,10 @@
         </span>
         <button type="button" class="item" data-id={id} aria-pressed={chosen === id} disabled={busy} onclick={() => pick(id)} onkeydown={(e) => key(e, id)}>
           <span class="n" aria-hidden="true">{i + 1}</span>
-          <span class="name">{name}</span>
-          {#if proposed(id)}<span class="tag">{t('order.edit.proposed')}</span>{/if}
+          <span class="what">
+            <span class="name">{name}</span>
+            {#if proposed(id)}<span class="tag">{t('order.edit.proposed')}</span>{/if}
+          </span>
         </button>
         <span class="arrows">
           <button type="button" class="arrow up" aria-label={t('order.edit.up', { title: name })} disabled={i === 0 || busy} onclick={() => shift(id, -1)}><Icon name="chevron" size={16} /></button>
@@ -252,9 +254,8 @@
   .item {
     flex: 1;
     display: flex;
-    flex-wrap: wrap;
     align-items: center;
-    gap: 0.3rem 0.6rem;
+    gap: 0.6rem;
     min-width: 0;
     min-height: 2.75rem;
     padding: 0.45rem 0.3rem;
@@ -276,6 +277,13 @@
   .dragging .n {
     color: inherit;
   }
+  .what {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.25rem 0.6rem;
+    min-width: 0;
+  }
   .name {
     font-family: var(--font-text);
     font-weight: 600;

web/src/lib/components/UnitBlock.svelte

@@ -9,6 +9,7 @@
   import { i18n, t } from '$lib/i18n/index.svelte';
   import { needOf } from '$lib/labels';
   import type { Proposal } from '$lib/types';
+  import Crans from './Crans.svelte';
   import Prose from './Prose.svelte';
   import WaterLevel from './WaterLevel.svelte';
 
@@ -69,7 +70,8 @@
       <span class="status faint">
         {#if seed}
           {@const need = needOf(seed)}
-          {t('tally.short', { for: seed.tally.for, against: seed.tally.against })}{#if need} · <span title={need.title}>{need.short}</span>{/if}
+          {t('tally.short', { for: seed.tally.for, against: seed.tally.against })}{#if need}{' · '}<span title={need.title}>{need.short}</span>{/if}
+          <span class="crans"><Crans level={seed.votedAtInertia} short /></span>
         {:else if seedMinimal}<span title={t('doc.seed.long')}>{i18n.plural('doc.seed.votes', votes)}</span>
         {:else if enteredAt}{t('doc.adopted', { date: i18n.date(enteredAt) })}{/if}
         {#if rivals > 0} · {i18n.plural('doc.others', rivals)}{/if}
@@ -124,6 +126,9 @@
   .replaced {
     background: var(--moss-wash);
   }
+  .crans {
+    margin-left: 0.6rem;
+  }
   .actions {
     display: flex;
     flex-wrap: wrap;

web/src/lib/i18n/en.ts

@@ -162,8 +162,8 @@ export const en: Messages = {
   'deep.version': 'version {n}',
   'deep.lead': 'leading: {label}',
   'deep.section.none': 'No section',
-  'deep.section.count.one': '{n} article proposed',
-  'deep.section.count.other': '{n} articles proposed',
+  'deep.section.count.one': '{n} article',
+  'deep.section.count.other': '{n} articles',
   'deep.unfold': 'Unfold all',
   'deep.fold': 'Fold all',
   'section.introduction': 'Introduction',

web/src/lib/i18n/es.ts

@@ -162,8 +162,8 @@ export const es: Messages = {
   'deep.version': 'versión {n}',
   'deep.lead': 'en cabeza: {label}',
   'deep.section.none': 'Sin sección',
-  'deep.section.count.one': '{n} artículo propuesto',
-  'deep.section.count.other': '{n} artículos propuestos',
+  'deep.section.count.one': '{n} artículo',
+  'deep.section.count.other': '{n} artículos',
   'deep.unfold': 'Desplegar todo',
   'deep.fold': 'Plegar todo',
   'section.introduction': 'Introducción',

web/src/lib/i18n/fr.ts

@@ -166,8 +166,8 @@ export const fr = {
   'deep.version': 'version {n}',
   'deep.lead': 'en tête : {label}',
   'deep.section.none': 'Sans section',
-  'deep.section.count.one': '{n} article proposé',
-  'deep.section.count.other': '{n} articles proposés',
+  'deep.section.count.one': '{n} article',
+  'deep.section.count.other': '{n} articles',
   'deep.unfold': 'Tout déplier',
   'deep.fold': 'Tout replier',
   'section.introduction': 'Introduction',

web/src/routes/g/[group]/docs/[doc]/+page.svelte

@@ -228,26 +228,25 @@
         · <button class="linkish" type="button" onclick={() => openPanel({ unitId: null, proposalId: null, tab: 'settings' })}>{t('settings.title')}</button>
       </p>
 
-      {#if canVote}
-        <div class="basket-row">
+      <!-- One line of tools — the basket, the language of the text —, then the readings. -->
+      <div class="tools">
+        {#if canVote}
           <button class="btn small basket-btn" type="button" onclick={() => openPanel({ unitId: null, proposalId: null, tab: 'basket' })}>
             {basket.size ? t('doc.basket.count', { n: basket.size }) : t('doc.basket')}
           </button>
           {#if view.vote.simulated}<span class="tag" title={t('vote.simulated.note')}>{t('vote.simulated.mark')}</span>{/if}
-        </div>
-      {/if}
-      <div class="controls">
-        <div class="seg views" role="radiogroup" aria-label={t('doc.view.label')}>
-          {#each VIEWS as v (v)}
-            <button type="button" role="radio" aria-checked={doc.mode === v} class:on={doc.mode === v} onclick={() => doc.setMode(v)}>{t(`doc.view.${v}`)}</button>
-          {/each}
-        </div>
-        <div class="seg small" role="radiogroup" aria-label={t('doc.lang.label')}>
+        {/if}
+        <div class="seg small langs" role="radiogroup" aria-label={t('doc.lang.label')}>
           {#each LANGS as l (l)}
             <button type="button" role="radio" aria-checked={lang === l} class:on={lang === l} onclick={() => { doc.original = l === source && i18n.lang !== source; if (l !== source) i18n.set(l); }}>{l.toUpperCase()}</button>
           {/each}
         </div>
       </div>
+      <div class="seg views" role="radiogroup" aria-label={t('doc.view.label')}>
+        {#each VIEWS as v (v)}
+          <button type="button" role="radio" aria-checked={doc.mode === v} class:on={doc.mode === v} onclick={() => doc.setMode(v)}>{t(`doc.view.${v}`)}</button>
+        {/each}
+      </div>
       {#if lang !== source}
         <p class="note faint">{t('doc.lang.translation')} <button class="linkish" type="button" onclick={() => (doc.original = true)}>{t('doc.lang.original')}</button></p>
       {/if}
@@ -402,22 +401,18 @@
     font-size: 0.85rem;
     font-weight: 700;
   }
-  .controls {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.6rem;
-    justify-content: space-between;
-    margin-top: 1.4rem;
-  }
-  .basket-row {
+  .tools {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 0.6rem;
     margin-top: 1.2rem;
   }
-  .basket-row + .controls {
-    margin-top: 0.8rem;
+  .langs {
+    margin-left: auto;
+  }
+  .views {
+    margin-top: 0.7rem;
   }
   .basket-btn {
     background: var(--water);
@@ -471,7 +466,8 @@
     margin-top: 2.2rem;
   }
   .lead {
-    margin-bottom: 1.4rem;
+    margin-bottom: 1.2rem;
+    font-size: 0.92rem;
     font-weight: 650;
     color: var(--ink-soft);
   }