From 975fbe1f4269b8ee7278c4dce32c644552c2cd07 Mon Sep 17 00:00:00 2001
From: Florian Cerizay <florian.cerizay@ign.fr>
Date: Tue, 27 Oct 2026 15:55:28 +0100
Subject: [PATCH] =?UTF-8?q?Formulaires,=20titre=20du=20mod=C3=A8le,=20band?=
 =?UTF-8?q?eau=20des=20probl=C3=A8mes,=20probl=C3=A8mes=20et=20corrections?=
 =?UTF-8?q?=20mis=20en=20forme?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- formulaires : champs en grille (form-grid), sections « Identification » et « Dossier du document » dans l'onglet « Modèle », panneaux dépliés sur fond clair, champs sur fond blanc, pas d'espace vide sous un champ sans message, messages (« Affichage : ») lisibles
- en-tête de la vue d'un modèle : son titre plutôt que son nom
- retirés : identifiant du modèle, « Fichier : … » en bas des vues, tuiles et types de fichiers du bandeau (seuls restent les problèmes), « Monter » et « Descendre » des colonnes
- carte d'un problème : gravité en pastille colorée, titre, emplacement, conseil encadré, code en étiquette ; fenêtre « Corrections proposées » : message du problème, une ligne par correction, « sûre » signalée, rappel de l'annulation
- tests adaptés

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 CHANGELOG.md                         |   1 +
 src/ui/App.vue                       |   6 +-
 src/ui/components/FileFrame.vue      |   2 -
 src/ui/components/FixMenu.vue        |  58 ++++++++++++--
 src/ui/components/ModelSummary.vue   | 111 +++++----------------------
 src/ui/components/ModelView.vue      |  19 ++---
 src/ui/components/ProblemItem.vue    | 102 ++++++++++++++++++------
 src/ui/components/TableView.vue      |  18 ++---
 src/ui/theme.css                     |  57 ++++++++++++++
 tests/e2e/002-us2-table.spec.ts      |   7 +-
 tests/e2e/004-us4-navigation.spec.ts |   2 -
 tests/e2e/012-us1-arbre.spec.ts      |   6 +-
 tests/e2e/arbre-fichiers.spec.ts     |   4 +-
 13 files changed, 236 insertions(+), 157 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3f755ed..19a9609 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@ et le versionnement sur [Semantic Versioning](http://semver.org/).
 
 ### Changed
 
+- Formulaires mis en forme : champs en grille, sections titrées dans l'onglet « Modèle », contenu des panneaux dépliés sur fond clair, messages sous les champs lisibles. Titre du modèle dans l'en-tête de sa vue. Bandeau du modèle réduit aux problèmes ; identifiant du modèle, chemin du fichier en bas de vue, tuiles et types de fichiers retirés. « Monter » et « Descendre » retirés des colonnes. Carte d'un problème et fenêtre des corrections proposées mises en forme (gravité en pastille, conseil encadré, correction « sûre » signalée).
 - Clés étrangères et conditions affichées comme du SQL (mots-clés en bleu gras, chaînes en vert), modifiables par un crayon. Badges colorés : présence des fichiers attendus (obligatoire en rouge, recommandé en orange, facultatif en vert), contraintes des colonnes (valeur obligatoire, colonne obligatoire, unique). « Monter » et « Descendre » retirés des fichiers attendus. Bouton « Équivalents » renommé « Appliquer aux colonnes / fichiers / listes semblables ».
 - Arborescence des fichiers attendus (arbre et vue du modèle) : à chaque niveau, les fichiers d'abord, puis les dossiers. Regex mises en valeur : encadrées en police à chasse fixe, variables de `variables.json` en bleu gras, variables facultatives en jaune. Accueil de l'éditeur en ligne : pleine largeur, sans les paragraphes de confidentialité et de commandes.
 - Vue d'un modèle en onglets « Modèle », « Fichiers », « Tables » (nouveau : modèles de table du modèle avec présence, nombre de colonnes et problèmes, tables non référencées) et « Listes de codes » ; l'onglet suit l'adresse (fichier de l'arbre, problème cliqué). Bandeau de synthèse en tuiles qui ouvrent l'onglet correspondant, types de fichiers au pluriel. Bouton « Listes de codes (N) » retiré. « Télécharger le JSON » (ou le CSV) à côté des onglets Vue / Source, et non plus dans le titre.
diff --git a/src/ui/App.vue b/src/ui/App.vue
index 601991c..fddcda9 100644
--- a/src/ui/App.vue
+++ b/src/ui/App.vue
@@ -25,7 +25,9 @@ const online = import.meta.env.MODE === 'pages'
 // Site en lecture seule produit par `vce site` (013) : instantané statique, champs en lecture seule.
 const site = isSite()
 const siteSource = site ? new SiteSource() : undefined
-const READ_ONLY = { VTextField: { readonly: true }, VTextarea: { readonly: true }, VSelect: { readonly: true }, VCombobox: { readonly: true }, VCheckbox: { readonly: true } }
+// Champs : pas d'espace réservé sous un champ sans message ; en lecture seule (013), non modifiables.
+const FIELDS = { VTextField: { hideDetails: 'auto' }, VTextarea: { hideDetails: 'auto' }, VSelect: { hideDetails: 'auto' }, VCombobox: { hideDetails: 'auto' } }
+const READ_ONLY = { VTextField: { hideDetails: 'auto', readonly: true }, VTextarea: { hideDetails: 'auto', readonly: true }, VSelect: { hideDetails: 'auto', readonly: true }, VCombobox: { hideDetails: 'auto', readonly: true }, VCheckbox: { readonly: true } }
 const showHome = ref(false)
 watch(() => store.session, () => (showHome.value = false))
 
@@ -119,7 +121,7 @@ const view = computed(() => VIEWS[kindOf(route.value.file)])
         <strong>Lecture seule</strong> — pour modifier cette configuration, ouvrez son dépôt avec <code>vce serve</code> ou l'éditeur en ligne.
         <span v-if="siteSource?.version" class="text-medium-emphasis"> Éditeur v{{ siteSource.version }}.</span>
       </v-alert>
-      <v-defaults-provider :defaults="store.readOnly ? READ_ONLY : undefined">
+      <v-defaults-provider :defaults="store.readOnly ? READ_ONLY : FIELDS">
       <v-container fluid>
         <v-alert v-if="store.error" type="error" class="mb-4">{{ store.error }}</v-alert>
         <v-progress-linear v-if="store.loading && !store.result" indeterminate aria-label="Chargement de la configuration" />
diff --git a/src/ui/components/FileFrame.vue b/src/ui/components/FileFrame.vue
index 4cbe93f..629635d 100644
--- a/src/ui/components/FileFrame.vue
+++ b/src/ui/components/FileFrame.vue
@@ -56,8 +56,6 @@ watch(tab, highlight)
     </div>
     <slot v-if="tab === 'view' || !source" />
     <SourceView v-else :file="source" />
-    <!-- Chemin du fichier : discret, en bas de la vue (et au survol du titre). -->
-    <p class="text-caption text-medium-emphasis mt-6" data-testid="frame-file-path">Fichier : <code>{{ file }}</code></p>
   </section>
 </template>
 
diff --git a/src/ui/components/FixMenu.vue b/src/ui/components/FixMenu.vue
index 37c6c14..dcc6a76 100644
--- a/src/ui/components/FixMenu.vue
+++ b/src/ui/components/FixMenu.vue
@@ -11,14 +11,62 @@ const fixes = computed(() => store.fixes(props.problem))
 </script>
 
 <template>
-  <v-menu v-if="fixes.length" location="bottom start">
+  <v-menu v-if="fixes.length" location="bottom end" max-width="30rem">
     <template #activator="{ props: menu }">
-      <v-btn v-bind="menu" :prepend-icon="mdiAutoFix" size="small" variant="tonal" color="primary" class="align-self-start mt-1" data-testid="fix">
+      <v-btn v-bind="menu" :prepend-icon="mdiAutoFix" size="small" variant="flat" color="primary" data-testid="fix">
         Corriger
       </v-btn>
     </template>
-    <v-list density="compact" max-width="28rem">
-      <v-list-item v-for="(fix, i) in fixes" :key="i" :title="fix.label" lines="three" data-testid="fix-option" @click="store.applyFix(fix)" />
-    </v-list>
+    <v-card class="fixes" data-testid="fix-menu">
+      <v-card-item>
+        <v-card-title class="text-subtitle-1 font-weight-bold">Corrections proposées</v-card-title>
+        <v-card-subtitle class="subtitle">{{ problem.message }}</v-card-subtitle>
+      </v-card-item>
+      <v-divider />
+      <v-list density="comfortable" class="py-0">
+        <v-list-item v-for="(fix, i) in fixes" :key="i" class="fix" data-testid="fix-option" @click="store.applyFix(fix)">
+          <template #prepend><v-icon :icon="mdiAutoFix" color="primary" aria-hidden="true" /></template>
+          <span class="label">{{ fix.label }}</span>
+          <template #append>
+            <span v-if="fix.safe" class="safe" title="Correction sans ambiguïté, applicable en groupe">sûre</span>
+          </template>
+        </v-list-item>
+      </v-list>
+      <v-divider />
+      <p class="note">Une seule étape, annulable (Ctrl+Z).</p>
+    </v-card>
   </v-menu>
 </template>
+
+<style scoped>
+.subtitle {
+  white-space: normal;
+  opacity: 1;
+  color: rgb(var(--v-theme-secondary));
+}
+.fix {
+  border-bottom: 1px solid rgb(var(--v-theme-divider));
+}
+.fix:last-child {
+  border-bottom: none;
+}
+.label {
+  white-space: normal;
+  line-height: 1.35;
+}
+.safe {
+  margin-left: 8px;
+  padding: 0 6px;
+  border-radius: 10px;
+  font-size: 0.72rem;
+  font-weight: 700;
+  color: #1e5631;
+  background: #e3f4e8;
+}
+.note {
+  margin: 0;
+  padding: 6px 16px 8px;
+  font-size: 0.8rem;
+  color: rgb(var(--v-theme-secondary));
+}
+</style>
diff --git a/src/ui/components/ModelSummary.vue b/src/ui/components/ModelSummary.vue
index e9348fa..2e99e97 100644
--- a/src/ui/components/ModelSummary.vue
+++ b/src/ui/components/ModelSummary.vue
@@ -1,118 +1,43 @@
 <script setup lang="ts">
-import { mdiAlertCircleOutline, mdiFileTreeOutline, mdiFormatListBulleted, mdiTable } from '@mdi/js'
+import { mdiAlertCircleOutline, mdiCheckCircleOutline } from '@mdi/js'
 import { computed } from 'vue'
-import { fileTypeLabel } from '@core/labels'
-import type { DocumentModel } from '@core/model/types'
 import { useProject } from '../stores/project'
 
-// Bandeau de synthèse d'un modèle (004 US4) : fichiers par type, tables, listes de codes,
-// problèmes ; chaque tuile ouvre l'onglet correspondant de la vue.
-const props = defineProps<{ name: string; doc: DocumentModel }>()
-const emit = defineEmits<{ select: [tab: 'files' | 'tables' | 'codes'] }>()
+// Problèmes d'un modèle (004 US4) : bandeau coloré selon l'état, lien vers le panneau filtré.
+const props = defineProps<{ name: string }>()
 const store = useProject()
-const loaded = computed(() => store.result!.project.models.get(props.name))
-const byType = computed(() => {
-  const counts = new Map<string, number>()
-  for (const f of props.doc.files) counts.set(f.type, (counts.get(f.type) ?? 0) + 1)
-  return [...counts].map(([type, n]) => ({ type, label: `${n} ${(n > 1 ? PLURALS[type] : undefined) ?? fileTypeLabel(type).replace(/^(?!PDF)./, (c) => c.toLowerCase())}` }))
-})
-// Libellés au pluriel des types de fichiers attendus.
-const PLURALS: Record<string, string> = { table: 'tables', directory: 'dossiers', metadata: 'fiches de métadonnées', pdf: 'PDF', multi_table: 'bases multi-tables' }
 const counts = computed(() => store.countsByModel.get(props.name) ?? { errors: 0, warnings: 0 })
 const plural = (n: number, word: string) => `${n} ${word}${n > 1 ? 's' : ''}`
-const tiles = computed(() => [
-  { tab: 'files' as const, icon: mdiFileTreeOutline, value: props.doc.files.length, label: props.doc.files.length > 1 ? 'fichiers attendus' : 'fichier attendu' },
-  { tab: 'tables' as const, icon: mdiTable, value: loaded.value?.tables.size ?? 0, label: (loaded.value?.tables.size ?? 0) > 1 ? 'modèles de table' : 'modèle de table' },
-  { tab: 'codes' as const, icon: mdiFormatListBulleted, value: props.doc.codes?.length ?? 0, label: (props.doc.codes?.length ?? 0) > 1 ? 'listes de codes' : 'liste de codes' },
-])
+const tone = computed(() => (counts.value.errors ? 'error' : counts.value.warnings ? 'warning' : 'ok'))
 </script>
 
 <template>
-  <div class="summary mb-4" data-testid="model-summary">
-    <button v-for="t in tiles" :key="t.tab" type="button" class="tile" :data-testid="`summary-${t.tab}`" @click="emit('select', t.tab)">
-      <v-icon :icon="t.icon" color="primary" aria-hidden="true" />
-      <span class="value">{{ t.value }}</span>
-      <span class="label">{{ t.label }}</span>
-    </button>
-    <div class="tile problems" :class="{ error: counts.errors, warning: !counts.errors && counts.warnings }" data-testid="summary-problems">
-      <v-icon :icon="mdiAlertCircleOutline" :color="counts.errors ? 'error' : counts.warnings ? 'warning' : 'success'" aria-hidden="true" />
-      <span class="value">{{ counts.errors + counts.warnings }}</span>
-      <span class="label">{{ counts.errors + counts.warnings ? `${plural(counts.errors, 'erreur')}, ${plural(counts.warnings, 'avertissement')}` : 'aucun problème' }}</span>
-      <v-btn v-if="counts.errors + counts.warnings" size="small" variant="text" color="primary" class="px-1" data-testid="show-model-problems"
-        @click="store.problemModel = name">Voir les problèmes</v-btn>
-    </div>
-    <div class="types" aria-label="Fichiers attendus par type">
-      <span v-for="t in byType" :key="t.type" class="type">{{ t.label }}</span>
-    </div>
+  <div class="summary mb-4" :class="tone" data-testid="model-summary">
+    <v-icon :icon="tone === 'ok' ? mdiCheckCircleOutline : mdiAlertCircleOutline" :color="tone === 'ok' ? 'success' : tone" aria-hidden="true" />
+    <span v-if="tone === 'ok'">Aucun problème</span>
+    <span v-else><strong>{{ plural(counts.errors, 'erreur') }}</strong>, {{ plural(counts.warnings, 'avertissement') }}</span>
+    <v-btn v-if="tone !== 'ok'" size="small" variant="text" color="primary" data-testid="show-model-problems" @click="store.problemModel = name">
+      Voir les problèmes
+    </v-btn>
   </div>
 </template>
 
 <style scoped>
 .summary {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
-  gap: 10px;
-}
-.tile {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  grid-template-rows: auto auto;
-  column-gap: 10px;
+  display: flex;
   align-items: center;
-  padding: 10px 14px;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 8px 12px;
   border: 1px solid rgb(var(--v-theme-divider));
-  border-left: 4px solid rgb(var(--v-theme-primary));
+  border-left: 4px solid rgb(var(--v-theme-success));
   border-radius: 6px;
   background: rgb(var(--v-theme-surface-light));
-  color: rgb(var(--v-theme-on-surface));
-  text-align: left;
-  font: inherit;
-}
-button.tile {
-  cursor: pointer;
-}
-button.tile:hover,
-button.tile:focus-visible {
-  background: rgba(var(--v-theme-primary), 0.1);
-}
-.tile .v-icon {
-  grid-row: span 2;
-}
-.value {
-  font-family: var(--v-font-heading);
-  font-size: 1.6rem;
-  font-weight: 600;
-  line-height: 1.1;
-}
-.label {
-  grid-column: 2;
-  color: rgb(var(--v-theme-secondary));
-  font-size: 0.875rem;
 }
-.problems {
-  border-left-color: rgb(var(--v-theme-success));
-}
-.problems.error {
+.summary.error {
   border-left-color: rgb(var(--v-theme-error));
 }
-.problems.warning {
+.summary.warning {
   border-left-color: rgb(var(--v-theme-warning));
 }
-.problems .v-btn {
-  grid-column: 2;
-  justify-self: start;
-}
-.types {
-  grid-column: 1 / -1;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-.type {
-  padding: 1px 8px;
-  border: 1px solid rgb(var(--v-theme-divider));
-  border-radius: 12px;
-  font-size: 0.8rem;
-  color: rgb(var(--v-theme-secondary));
-}
 </style>
diff --git a/src/ui/components/ModelView.vue b/src/ui/components/ModelView.vue
index f5c99f9..7a6c096 100644
--- a/src/ui/components/ModelView.vue
+++ b/src/ui/components/ModelView.vue
@@ -134,7 +134,7 @@ function newCode() {
 </script>
 
 <template>
-  <FileFrame :title="`Modèle ${name}`" :file="path ?? `${name}/`" :source="path">
+  <FileFrame :title="`Modèle ${doc?.title || name}`" :file="path ?? `${name}/`" :source="path">
     <template #chips>
       <v-chip v-if="doc?.abstract" size="small" color="secondary">abstrait</v-chip>
       <v-btn :prepend-icon="mdiFolderDownload" size="small" variant="tonal" data-testid="download-model" @click="store.download({ kind: 'model', model: name })">
@@ -154,7 +154,7 @@ function newCode() {
     <NotConformant v-else-if="!doc" />
 
     <template v-else>
-      <ModelSummary :name="name" :doc="doc" @select="(t: ModelTab) => (modelTab = t)" />
+      <ModelSummary :name="name" />
       <v-tabs v-model="modelTab" color="primary" class="model-tabs mb-4" data-testid="model-tabs">
         <v-tab value="model" data-testid="model-tab-model">Modèle</v-tab>
         <v-tab value="files" data-testid="model-tab-files">Fichiers ({{ doc.files.length }})</v-tab>
@@ -162,8 +162,9 @@ function newCode() {
         <v-tab value="codes" data-testid="model-tab-codes">Listes de codes ({{ doc.codes?.length ?? 0 }})</v-tab>
       </v-tabs>
 
-      <section v-if="modelTab === 'model'" data-pointer="">
-        <div class="d-flex flex-wrap ga-4">
+      <section v-if="modelTab === 'model'" data-pointer="" class="form-section">
+        <h3 class="form-heading">Identification</h3>
+        <div class="form-grid">
           <v-text-field label="Nom" :model-value="doc.name" density="compact" variant="outlined" class="field" data-testid="model-name"
             @update:model-value="(v: string) => setProp('/name', v, true)" />
           <v-text-field label="Titre" :model-value="doc.title" density="compact" variant="outlined" class="field"
@@ -171,7 +172,8 @@ function newCode() {
         </div>
         <v-textarea label="Description" :model-value="doc.description" density="compact" variant="outlined" rows="1" auto-grow
           @update:model-value="(v: string) => setProp('/description', v)" />
-        <div class="d-flex flex-wrap ga-4">
+        <h3 class="form-heading">Dossier du document</h3>
+        <div class="form-grid">
           <v-text-field label="Nom du dossier (expression régulière)" :model-value="doc.constraints?.folderName" density="compact" variant="outlined" class="field mono"
             :hint="store.regexHint(doc.constraints?.folderName, name)" persistent-hint data-testid="model-folderName"
             @update:model-value="(v: string) => setProp('/constraints/folderName', store.regexInput(v, name))">
@@ -180,7 +182,6 @@ function newCode() {
           <v-text-field label="Spécification des métadonnées" :model-value="doc.constraints?.metadataSpecification" density="compact" variant="outlined" class="field"
             data-testid="metadata-specification" @update:model-value="(v: string) => setProp('/constraints/metadataSpecification', v)" />
         </div>
-        <p v-if="doc.id" class="text-body-2">Identifiant : <code>{{ doc.id }}</code></p>
       </section>
 
       <template v-if="modelTab === 'files'">
@@ -204,13 +205,13 @@ function newCode() {
             </div>
           </v-expansion-panel-title>
           <v-expansion-panel-text>
-            <div class="d-flex flex-wrap ga-4">
+            <div class="form-grid">
               <v-text-field label="Nom" :model-value="f.name" density="compact" variant="outlined" class="field"
                 @update:model-value="(v: string) => setProp(pointer('files', i, 'name'), v, true)" />
               <v-text-field label="Titre" :model-value="f.title" density="compact" variant="outlined" class="field"
                 @update:model-value="(v: string) => setProp(pointer('files', i, 'title'), v)" />
             </div>
-            <div class="d-flex flex-wrap ga-4">
+            <div class="form-grid">
               <v-select label="Type" :items="FILE_TYPES" :model-value="f.type" density="compact" variant="outlined" class="field" data-testid="file-type"
                 @update:model-value="(v: string) => setProp(pointer('files', i, 'type'), v, true)" />
               <v-select label="Présence" :items="MANDATORY" :model-value="f.mandatory ?? 'WARN'" density="compact" variant="outlined" class="field" data-testid="file-mandatory"
@@ -316,7 +317,7 @@ function newCode() {
   min-width: 12rem;
 }
 .field {
-  min-width: 16rem;
+  min-width: 0;
   flex: 1 1 16rem;
 }
 .mono :deep(input) {
diff --git a/src/ui/components/ProblemItem.vue b/src/ui/components/ProblemItem.vue
index 695d585..a6c0973 100644
--- a/src/ui/components/ProblemItem.vue
+++ b/src/ui/components/ProblemItem.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { mdiAlertCircle, mdiAlert } from '@mdi/js'
+import { mdiAlert, mdiAlertCircle, mdiLightbulbOnOutline } from '@mdi/js'
 import { computed } from 'vue'
 import { describeLocation } from '@core/validation/location'
 import { CATALOG } from '@core/validation/messages'
@@ -23,16 +23,20 @@ const current = computed(() => route.value.file === props.problem.file && route.
   <div class="problem" :class="[problem.severity, { current }]">
     <a :href="href(problem.file, problem.pointer)" class="link" :data-testid="`problem-${problem.code}`">
       <span class="head">
-        <v-icon :icon="isError ? mdiAlertCircle : mdiAlert" size="small" :color="isError ? 'error' : 'warning'" aria-hidden="true" />
-        <span class="severity">{{ isError ? 'Erreur' : 'Avertissement' }}</span>
-        <strong>{{ entry.title }}</strong>
+        <span class="severity">
+          <v-icon :icon="isError ? mdiAlertCircle : mdiAlert" size="x-small" aria-hidden="true" />
+          {{ isError ? 'Erreur' : 'Avertissement' }}
+        </span>
+        <strong class="title">{{ entry.title }}</strong>
       </span>
       <span v-if="where" class="where">{{ where }}</span>
-      <span>{{ problem.message }}</span>
+      <span class="message">{{ problem.message }}</span>
     </a>
-    <span class="hint">{{ entry.hint }}</span>
-    <span class="code">{{ problem.code }}</span>
-    <slot />
+    <span class="hint"><v-icon :icon="mdiLightbulbOnOutline" size="small" aria-hidden="true" /><span>{{ entry.hint }}</span></span>
+    <div class="foot">
+      <span class="code">{{ problem.code }}</span>
+      <slot />
+    </div>
   </div>
 </template>
 
@@ -40,53 +44,101 @@ const current = computed(() => route.value.file === props.problem.file && route.
 .problem {
   display: flex;
   flex-direction: column;
-  gap: 2px;
-  padding: 6px 8px;
-  margin: 4px 0;
+  gap: 4px;
+  padding: 8px 10px;
+  margin: 6px 0;
+  border: 1px solid rgb(var(--v-theme-divider));
   border-left: 4px solid;
-  border-radius: 4px;
-  font-size: 0.85rem;
+  border-radius: 6px;
+  background: rgb(var(--v-theme-surface));
+  font-size: 0.875rem;
   word-break: break-word;
 }
 .problem.error {
-  border-color: rgb(var(--v-theme-error));
+  border-left-color: rgb(var(--v-theme-error));
 }
 .problem.warning {
-  border-color: rgb(var(--v-theme-warning));
+  border-left-color: rgb(var(--v-theme-warning));
 }
 .problem:hover,
 .problem.current,
 .problem:focus-within {
-  background: rgba(var(--v-theme-on-surface), 0.06);
+  box-shadow: 0 0 0 2px rgba(var(--v-theme-primary), 0.35);
 }
 .link {
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: 3px;
   color: inherit;
   text-decoration: none;
 }
 .head {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 8px;
   flex-wrap: wrap;
 }
 .severity {
-  font-size: 0.75rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 0 7px;
+  border-radius: 10px;
+  font-size: 0.72rem;
+  font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.03em;
 }
+.error .severity {
+  color: #8c1d18;
+  background: #fde7e5;
+}
+.warning .severity {
+  color: #7a4100;
+  background: #fff0d6;
+}
+.title {
+  font-size: 0.95rem;
+}
 .where {
-  font-weight: 500;
+  font-weight: 600;
+  color: rgb(var(--v-theme-secondary));
 }
 .hint {
-  font-style: italic;
-  opacity: 0.85;
+  display: flex;
+  gap: 6px;
+  padding: 6px 8px;
+  border-radius: 4px;
+  background: rgb(var(--v-theme-surface-light));
+  color: rgb(var(--v-theme-on-surface));
+}
+.hint .v-icon {
+  color: rgb(var(--v-theme-primary));
+  flex: none;
+}
+.foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
 }
 .code {
-  font-family: monospace;
-  font-size: 0.75rem;
-  opacity: 0.7;
+  padding: 0 6px;
+  border: 1px solid rgb(var(--v-theme-divider));
+  border-radius: 4px;
+  font-family: ui-monospace, Menlo, Consolas, monospace;
+  font-size: 0.72rem;
+  color: rgb(var(--v-theme-secondary));
+}
+</style>
+
+<style>
+.v-theme--dark .problem.error .severity {
+  color: #ffb4ab;
+  background: rgba(255, 180, 171, 0.14);
+}
+.v-theme--dark .problem.warning .severity {
+  color: #ffcc80;
+  background: rgba(255, 204, 128, 0.14);
 }
 </style>
diff --git a/src/ui/components/TableView.vue b/src/ui/components/TableView.vue
index b2e0df3..385ec08 100644
--- a/src/ui/components/TableView.vue
+++ b/src/ui/components/TableView.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { mdiArrowDown, mdiArrowUp, mdiDelete, mdiPencil, mdiPlus } from '@mdi/js'
+import { mdiDelete, mdiPencil, mdiPlus } from '@mdi/js'
 import { computed, ref, watch } from 'vue'
 import { setAt } from '@core/edit/pointer'
 import {
-  addColumn, addListItem, moveColumn, parseEnum, removeColumn, removeListItem, setConstraint, setListItem, setOrRemove, type TableList,
+  addColumn, addListItem, parseEnum, removeColumn, removeListItem, setConstraint, setListItem, setOrRemove, type TableList,
 } from '@core/edit/operations'
 import { columnTypeFamily } from '@core/labels'
 import { resolvePath } from '@core/model/paths'
@@ -98,7 +98,7 @@ const LISTS: { key: TableList; title: string; placeholder: string }[] = [
   <FileFrame :title="`Table ${table?.name || baseName(file)}`" :file="file" :source="file">
     <NotConformant v-if="!table" />
     <template v-else>
-      <div class="d-flex flex-wrap ga-4 mb-2" data-pointer="">
+      <div class="form-grid" data-pointer="">
         <v-text-field label="Nom" :model-value="table.name" density="compact" variant="outlined" class="field" data-testid="table-name"
           @update:model-value="(v: string) => setProp('/name', v, true)" />
         <v-text-field label="Titre" :model-value="table.title" density="compact" variant="outlined" class="field"
@@ -124,7 +124,7 @@ const LISTS: { key: TableList; title: string; placeholder: string }[] = [
             </div>
           </v-expansion-panel-title>
           <v-expansion-panel-text>
-            <div class="d-flex flex-wrap ga-4">
+            <div class="form-grid">
               <v-text-field label="Nom" :model-value="c.name" density="compact" variant="outlined" class="field" data-testid="column-name"
                 @update:model-value="(v: string) => setProp(pointer('columns', i, 'name'), v, true)" />
               <v-text-field label="Titre" :model-value="c.title" density="compact" variant="outlined" class="field"
@@ -134,7 +134,7 @@ const LISTS: { key: TableList; title: string; placeholder: string }[] = [
             </div>
             <v-textarea label="Description" :model-value="c.description" density="compact" variant="outlined" rows="1" auto-grow
               @update:model-value="(v: string) => setProp(pointer('columns', i, 'description'), v)" />
-            <div class="d-flex flex-wrap ga-4">
+            <div class="d-flex flex-wrap ga-4 checks">
               <v-checkbox label="Valeur obligatoire" :model-value="c.constraints?.required ?? false" density="compact" hide-details
                 @update:model-value="(v: boolean | null) => edit((t) => setConstraint(t, i, 'required', !!v))" />
               <v-checkbox label="Colonne obligatoire" :model-value="c.constraints?.presenceRequired ?? false" density="compact" hide-details
@@ -142,7 +142,7 @@ const LISTS: { key: TableList; title: string; placeholder: string }[] = [
               <v-checkbox label="Unique" :model-value="c.constraints?.unique ?? false" density="compact" hide-details
                 @update:model-value="(v: boolean | null) => edit((t) => setConstraint(t, i, 'unique', !!v))" />
             </div>
-            <div class="d-flex flex-wrap ga-4 mt-2">
+            <div class="form-grid">
               <v-text-field label="Longueur minimale" type="number" :model-value="c.constraints?.minLength" density="compact" variant="outlined" class="number"
                 @update:model-value="(v: string) => setNumber(i, 'minLength', v)" />
               <v-text-field label="Longueur maximale" type="number" :model-value="c.constraints?.maxLength" density="compact" variant="outlined" class="number"
@@ -156,8 +156,6 @@ const LISTS: { key: TableList; title: string; placeholder: string }[] = [
             <v-textarea label="Valeurs autorisées (une par ligne)" :model-value="(c.constraints?.enum ?? []).join('\n')" density="compact" variant="outlined" rows="1" auto-grow
               @update:model-value="(v: string) => edit((t) => setConstraint(t, i, 'enum', parseEnum(v, c.constraints?.enum)), pointer('columns', i, 'enum'))" />
             <div class="d-flex flex-wrap ga-2">
-              <v-btn v-if="!store.readOnly" :prepend-icon="mdiArrowUp" size="small" variant="text" :disabled="i === 0" @click="edit((t) => moveColumn(t, i, i - 1))">Monter</v-btn>
-              <v-btn v-if="!store.readOnly" :prepend-icon="mdiArrowDown" size="small" variant="text" :disabled="i === table.columns.length - 1" @click="edit((t) => moveColumn(t, i, i + 1))">Descendre</v-btn>
               <EquivalentsDialog :source="{ kind: 'column', file, pointer: pointer('columns', i) }" :label="`${table.name}.${c.name}`" />
               <v-spacer />
               <v-btn v-if="!store.readOnly" :prepend-icon="mdiDelete" size="small" variant="text" color="error" data-testid="remove-column" @click="edit((t) => removeColumn(t, i))">Supprimer la colonne</v-btn>
@@ -205,11 +203,11 @@ const LISTS: { key: TableList; title: string; placeholder: string }[] = [
   font-weight: 600;
 }
 .field {
-  min-width: 16rem;
+  min-width: 0;
   flex: 1 1 16rem;
 }
 .number {
-  max-width: 12rem;
+  min-width: 0;
 }
 .mono :deep(input) {
   font-family: monospace;
diff --git a/src/ui/theme.css b/src/ui/theme.css
index 594308d..3562e41 100644
--- a/src/ui/theme.css
+++ b/src/ui/theme.css
@@ -99,3 +99,60 @@ h3,
   color: #a5d6a7;
   background: rgba(165, 214, 167, 0.12);
 }
+
+/* Formulaires : champs en grille régulière, fond blanc, sections titrées ; contenu des panneaux
+   dépliés (fichier attendu, colonne) sur fond clair pour détacher les champs. */
+.form-grid {
+  display: grid;
+  align-items: start;
+  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+  gap: 14px 16px;
+  margin-bottom: 14px;
+}
+.form-grid > .v-input {
+  min-width: 0;
+}
+.form-section {
+  padding: 16px;
+  border: 1px solid rgb(var(--v-theme-divider));
+  border-radius: 8px;
+}
+.form-heading {
+  margin: 4px 0 12px;
+  font-size: 0.8rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: rgb(var(--v-theme-secondary));
+}
+.form-heading:not(:first-child) {
+  margin-top: 20px;
+}
+.v-main .v-field--variant-outlined {
+  background: rgb(var(--v-theme-surface));
+}
+.v-main .v-expansion-panel-text__wrapper {
+  padding: 16px;
+  background: rgb(var(--v-theme-surface-light));
+  border-top: 1px solid rgb(var(--v-theme-divider));
+}
+.v-main .v-textarea {
+  margin-bottom: 14px;
+}
+
+/* Message sous un champ (« Affichage : » d'une regex) : hauteur libre, lignes aérées. */
+.v-main .v-input__details {
+  min-height: 0;
+  padding-top: 6px;
+}
+.v-main .v-messages {
+  overflow: visible;
+  opacity: 1;
+}
+.v-main .v-messages__message {
+  line-height: 1.6;
+  color: rgb(var(--v-theme-secondary));
+}
+.v-main .checks {
+  margin-bottom: 8px;
+}
diff --git a/tests/e2e/002-us2-table.spec.ts b/tests/e2e/002-us2-table.spec.ts
index f5e5e30..c28f2e3 100644
--- a/tests/e2e/002-us2-table.spec.ts
+++ b/tests/e2e/002-us2-table.spec.ts
@@ -42,11 +42,10 @@ test('ajoute une colonne avec un nouvel id, puis la supprime', async ({ page })
   await expect(page.getByTestId('changed-count')).toHaveCount(0)
 })
 
-test('déplace une colonne en conservant les autres', async ({ page }) => {
+test('colonne : ni « Monter » ni « Descendre »', async ({ page }) => {
   await column(page, 'WKT').click()
-  await column(page, 'WKT').getByRole('button', { name: 'Monter' }).click()
-  const names = JSON.parse(await source(page)).columns.map((c: { name: string }) => c.name)
-  expect(names.slice(0, 3)).toEqual(['WKT', 'LIB_IDZONE', 'URLFIC'])
+  await expect(column(page, 'WKT').getByRole('button', { name: 'Monter' })).toHaveCount(0)
+  await expect(column(page, 'WKT').getByRole('button', { name: 'Descendre' })).toHaveCount(0)
 })
 
 test('un problème créé apparaît puis disparaît une fois corrigé', async ({ page }) => {
diff --git a/tests/e2e/004-us4-navigation.spec.ts b/tests/e2e/004-us4-navigation.spec.ts
index 8bae463..2b09820 100644
--- a/tests/e2e/004-us4-navigation.spec.ts
+++ b/tests/e2e/004-us4-navigation.spec.ts
@@ -33,8 +33,6 @@ test('arbre groupé par famille, ouverte par le filtre', async ({ page }) => {
 test('synthèse du modèle et lien vers ses problèmes', async ({ page }) => {
   await page.goto(`${server.url}#/cnig_PLU_2017/files.json`)
   const summary = page.getByTestId('model-summary')
-  await expect(summary).toContainText('fichiers attendus')
-  await expect(summary).toContainText('14 tables')
   await expect(summary).toContainText('1 erreur, 0 avertissement')
   await summary.getByTestId('show-model-problems').click()
   await expect(page.getByRole('combobox', { name: 'Modèle', exact: true })).toHaveValue('cnig_PLU_2017')
diff --git a/tests/e2e/012-us1-arbre.spec.ts b/tests/e2e/012-us1-arbre.spec.ts
index 5d03ee9..fcb71b7 100644
--- a/tests/e2e/012-us1-arbre.spec.ts
+++ b/tests/e2e/012-us1-arbre.spec.ts
@@ -95,7 +95,7 @@ test('vue du modèle : fichiers attendus rangés selon l\'arborescence', async (
   expect(Math.round(child!.x + child!.width)).toBeLessThanOrEqual(Math.round(folder!.x + folder!.width))
 })
 
-test('vue du modèle : onglets, bandeau qui ouvre l\'onglet, onglet choisi par l\'adresse, tables du modèle', async ({ page }) => {
+test('vue du modèle : onglets, onglet choisi par l\'adresse, tables du modèle', async ({ page }) => {
   await page.goto(`./#/${SUP}/files.json`)
   await expect(page.getByTestId('model-tab-model')).toHaveAttribute('aria-selected', 'true')
   await expect(page.getByTestId('model-name')).toBeVisible()
@@ -103,7 +103,7 @@ test('vue du modèle : onglets, bandeau qui ouvre l\'onglet, onglet choisi par l
   // Téléchargement du fichier à côté des onglets Vue / Source.
   await expect(page.getByTestId('download-file')).toHaveText('Télécharger le JSON')
 
-  await page.getByTestId('summary-tables').click()
+  await page.getByTestId('model-tab-tables').click()
   await expect(page.getByTestId('model-tab-tables')).toHaveAttribute('aria-selected', 'true')
   const gest = page.getByTestId('model-table-GESTIONNAIRE_SUP')
   await expect(gest).toContainText('6')
@@ -114,6 +114,6 @@ test('vue du modèle : onglets, bandeau qui ouvre l\'onglet, onglet choisi par l
   await page.goto(`./#/${SUP}/files.json?p=%2Ffiles%2F2`)
   await expect(page.getByTestId('model-tab-files')).toHaveAttribute('aria-selected', 'true')
   await expect(page.getByTestId('file-REGLEMENT')).toBeVisible()
-  await page.getByTestId('summary-codes').click()
+  await page.getByTestId('model-tab-codes').click()
   await expect(page.getByTestId('code-ListeValidegestSUP')).toBeVisible()
 })
diff --git a/tests/e2e/arbre-fichiers.spec.ts b/tests/e2e/arbre-fichiers.spec.ts
index b9894b1..34564e6 100644
--- a/tests/e2e/arbre-fichiers.spec.ts
+++ b/tests/e2e/arbre-fichiers.spec.ts
@@ -18,9 +18,9 @@ test('catégorie Fichiers rangée par dossier, qui ouvre le fichier attendu dans
   await expect(page.getByTestId('expected-cnig_PLU_2017-ZONE_URBA')).toBeVisible()
 })
 
-test('chemin du fichier en bas de la vue et au survol du titre', async ({ page }) => {
+test('chemin du fichier au survol du titre', async ({ page }) => {
   await page.goto('./#/cnig_PLU_2017/types/ZONE_URBA.json')
   const title = page.getByRole('heading', { name: 'Table ZONE_URBA' })
   await expect(title).toHaveAttribute('title', 'cnig_PLU_2017/types/ZONE_URBA.json')
-  await expect(page.getByTestId('frame-file-path')).toHaveText('Fichier : cnig_PLU_2017/types/ZONE_URBA.json')
+  await expect(page.getByTestId('frame-file-path')).toHaveCount(0)
 })