---
issueRef: "#177"
version: 5
updatedBy: {"kind":"agent","agent_id":"57695b92-24d0-4876-837c-76116e70a6ae"}
updatedAt: 1785321673419
---

## #177 — Cadrage UX (2026-07-29)

Statut : **cadrage exploitable, révision du lot #171 déjà livré** — même fichier/zone (`_CurrentStepPane`, branche générale reps-only, workout_execution_screen.dart L2851-2899). Le retour utilisateur porte sur le **résultat visuel** de la correction apportée pour #171 (suppression du scroll), pas sur une régression fonctionnelle : la rangée `[Passer l'étape] [···] [Étape suivante]` tient sur une ligne mais rend mal (trois éléments hétérogènes — deux boutons pleine largeur + un bouton icône carré — écrasés côte à côte).

### Diagnostic
Le défaut n'est pas l'absence de place, c'est la **hiérarchie plate** : `Passer l'étape` (contournement, cas rare) et `Étape suivante` (action attendue, cas fréquent) ont exactement le même poids visuel, et le menu `···` (encore plus secondaire : passer le passage/la séquence) est coincé entre les deux au lieu d'être clairement rattaché à l'action secondaire. Cette rangée plate contredit le principe déjà appliqué ailleurs dans ce lot UI (montre, #166) : *une seule action principale, mise en avant ; les actions de contournement reléguées, jamais au même niveau visuel*.

### Comportement attendu
Séparer en deux rangées, primaire au-dessus / secondaire en dessous — reprend la hiérarchie déjà utilisée par la montre (#166) : action attendue mise en avant, contournement discret en dessous.

```text
Pompes tempo

        10
   RÉPÉTITIONS

[      ✓  Étape suivante      ]   ← rangée 1 : pleine largeur, action principale

[  Passer l'étape  ]        [···]  ← rangée 2 : secondaire, inchangée
```

- **Rangée 1** (nouvelle) : `Étape suivante` seul, `FilledButton.icon`, **pleine largeur** (`Size.fromHeight(48)`), pas de partage de ligne avec un autre bouton. C'est l'action que l'utilisateur va faire dans l'immense majorité des cas (terminer ses répétitions) — elle mérite tout l'espace et toute l'attention.
- **Rangée 2** (existante, inchangée) : `Passer l'étape` (`Expanded`) + menu `···` (`Passer ce passage` / `Passer la séquence`), exactement le layout déjà en place pour les étapes **sans** reps (cas général sans le bouton `Étape suivante`, L2851-2884) — donc pas de nouveau composant, juste la suppression du 3ᵉ élément qui polluait cette rangée.
- Écart vertical entre les deux rangées : `SizedBox(height: 8)`, cohérent avec les autres espacements de ce fichier (cf. L2774, L2840).
- **Mutualisation** : ce becomes le layout standard des boutons de bas d'écran pour **toute** étape ayant une action de complétion explicite (reps sans chrono aujourd'hui ; potentiellement d'autres cas futurs) — une rangée pleine largeur pour l'action principale, une rangée dédiée aux actions de contournement en dessous. Le cas `hasRepsWithStopwatchScore` (L2775-2799, deux boutons `Expanded` côte à côte) reste **inchangé** : ce cas a déjà validé son propre layout à deux boutons de poids égal (pas de `···`), pas concerné par cette révision.

### Implémentation
Dans la branche générale (L2851-2899), remplacer le `Row` unique conditionnel par :

```dart
if (step.type == ExerciseStepType.reps) ...[
  FilledButton.icon(
    onPressed: onCompleteStep,
    style: FilledButton.styleFrom(minimumSize: const Size.fromHeight(48)),
    icon: const Icon(Icons.check),
    label: const Text('Étape suivante'),
  ),
  const SizedBox(height: 8),
],
Row(
  children: [
    Expanded(
      child: OutlinedButton(
        onPressed: onSkipStep,
        style: OutlinedButton.styleFrom(minimumSize: const Size.fromHeight(44)),
        child: const Text('Passer l’étape'),
      ),
    ),
    const SizedBox(width: 8),
    PopupMenuButton<_StepSkipAction>(/* inchangé */),
  ],
),
```

Aucune nouvelle donnée, aucun nouveau contrat — pur remaniement de présentation, réutilisation de composants et de styles déjà en place dans le fichier.