Récapitulatif admin: sections → fieldsets, fichiers en table, marges + pas de thumbnails

TODO.md

@@ -1,5 +1,11 @@
 # Current tasks
 
+## Récapitulatif admin: fieldset + table fichiers
+- [x] Convert all sections to fieldsets with legends
+- [x] Convert files list to table (recap-files-table)
+- [x] Add bottom margins on fieldsets (admin-main--recap class)
+- [x] Remove image thumbnails from files table (emoji icon only)
+
 ## Mots-clés fieldset in contenus
 - [x] Create contenus-motscles-fragment.php (tags fragment mirroring langues)
 - [x] Add Mots-clés fieldset to contenus template (search + table + bulk actions)

app/public/assets/css/admin.css

@@ -2075,6 +2075,14 @@ th.admin-ap-col {
 
 /* ── Récapitulatif sections ───────────────────────────────── */
 
+.admin-main--recap > fieldset {
+  margin-bottom: var(--space-l);
+}
+
+.admin-main--recap > fieldset:last-of-type {
+  margin-bottom: 0;
+}
+
 .recap-synopsis,
 .recap-long-text {
   max-width: 70ch;

app/public/assets/css/form.css

@@ -1354,6 +1354,105 @@ legend {
   font-style: italic;
 }
 
+/* ── Recap files table ─────────────────────────────────────────── */
+
+.recap-files-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--step--1);
+}
+
+.recap-files-table thead th {
+  text-align: left;
+  font-weight: 600;
+  color: var(--text-secondary);
+  font-size: var(--step--2);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: var(--space-xs) var(--space-s);
+  border-bottom: 2px solid var(--border-primary);
+}
+
+.recap-files-table tbody td {
+  padding: var(--space-xs) var(--space-s);
+  border-bottom: 1px solid var(--border-secondary);
+  vertical-align: middle;
+}
+
+.recap-files-table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.recap-files-icon {
+  width: 1px;
+  white-space: nowrap;
+}
+
+.recap-files-icon-emoji {
+  font-size: 1.3rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.2rem;
+  height: 2.2rem;
+  background: var(--accent-muted);
+  border-radius: var(--radius);
+}
+
+.recap-files-thumb {
+  max-width: 80px;
+  max-height: 60px;
+  object-fit: cover;
+  border-radius: var(--radius);
+}
+
+.recap-files-name {
+  font-weight: 500;
+}
+
+.recap-files-name a {
+  color: var(--text-primary);
+  text-decoration: none;
+}
+
+.recap-files-name a:hover {
+  text-decoration: underline;
+  color: var(--accent);
+}
+
+.recap-files-peertube-id {
+  display: block;
+  font-size: var(--step--2);
+  color: var(--text-tertiary);
+  font-family: monospace;
+}
+
+.recap-files-label {
+  display: block;
+  font-size: var(--step--2);
+  color: var(--text-secondary);
+  font-style: italic;
+}
+
+.recap-files-type {
+  font-size: var(--step--2);
+  color: var(--text-tertiary);
+  white-space: nowrap;
+}
+
+.recap-files-size {
+  font-size: var(--step--2);
+  color: var(--text-tertiary);
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+.recap-files-date {
+  font-size: var(--step--2);
+  color: var(--text-tertiary);
+  white-space: nowrap;
+}
+
 /* ── File browser (relink) ──────────────────────────────────────── */
 
 .file-browser-trigger {

app/templates/admin/recapitulatif.php

@@ -1,4 +1,4 @@
-<main id="main-content">
+<main id="main-content" class="admin-main--recap">
     <?php if ($studentMode): ?>
     <!-- ═══════════════════ STUDENT MODE: Thank you page ═══════════════════ -->
     <div class="thanks-student-page">
@@ -36,8 +36,8 @@
 
     <?php elseif ($thesis): ?>
         <!-- ═══════════ Identité ═══════════ -->
-        <section>
+        <fieldset>
-            <h2>Identité</h2>
+            <legend>Identité</legend>
             <dl class="recap-dl">
                 <dt>Identifiant</dt><dd><?= htmlspecialchars($thesis['identifier']) ?></dd>
                 <dt>Titre</dt><dd><?= htmlspecialchars($thesis['title']) ?></dd>
@@ -55,17 +55,17 @@
                 <dt>Doctoral</dt><dd>Oui</dd>
                 <?php endif; ?>
             </dl>
-        </section>
+        </fieldset>
 
         <!-- ═══════════ Cadre académique ═══════════ -->
-        <section>
+        <fieldset>
-            <h2>Cadre académique</h2>
+            <legend>Cadre académique</legend>
             <dl class="recap-dl">
                 <dt>Orientation</dt><dd><?= htmlspecialchars($thesis['orientation'] ?? '–') ?></dd>
                 <dt>Atelier Pratique</dt><dd><?= htmlspecialchars($thesis['ap_program'] ?? '–') ?></dd>
                 <dt>Finalité</dt><dd><?= htmlspecialchars($thesis['finality_type'] ?? '–') ?></dd>
             </dl>
-        </section>
+        </fieldset>
 
         <!-- ═══════════ Jury ═══════════ -->
         <?php
@@ -77,8 +77,8 @@
             || $thesis['supervisors'];
         ?>
         <?php if ($hasJury): ?>
-        <section>
+        <fieldset>
-            <h2>Jury</h2>
+            <legend>Jury</legend>
             <dl class="recap-dl">
                 <?php if ($thesis['jury_president']): ?>
                 <dt>Président·e</dt><dd><?= htmlspecialchars($thesis['jury_president']) ?></dd>
@@ -102,12 +102,12 @@
                 <dt>Note du jury</dt><dd><?= htmlspecialchars($thesis['jury_points']) ?>/20</dd>
                 <?php endif; ?>
             </dl>
-        </section>
+        </fieldset>
         <?php endif; ?>
 
         <!-- ═══════════ Contenu ═══════════ -->
-        <section>
+        <fieldset>
-            <h2>Contenu</h2>
+            <legend>Contenu</legend>
             <dl class="recap-dl">
                 <dt>Synopsis</dt>
                 <dd class="recap-synopsis"><?= nl2br(htmlspecialchars($thesis['synopsis'] ?? '–')) ?></dd>
@@ -133,11 +133,11 @@
                 <dt>Lien BAIU</dt><dd><a href="<?= htmlspecialchars($thesis['baiu_link']) ?>" target="_blank" rel="noopener"><?= htmlspecialchars($thesis['baiu_link']) ?></a></dd>
                 <?php endif; ?>
             </dl>
-        </section>
+        </fieldset>
 
         <!-- ═══════════ Accès et licence ═══════════ -->
-        <section>
+        <fieldset>
-            <h2>Accès et licence</h2>
+            <legend>Accès et licence</legend>
             <dl class="recap-dl">
                 <dt>Degré d'ouverture</dt><dd><?= htmlspecialchars($thesis['access_type'] ?? '–') ?></dd>
 
@@ -154,11 +154,11 @@
                 <dt>Exemplaire BAIU</dt><dd><?= !empty($thesis['exemplaire_baiu']) ? 'Oui' : 'Non' ?></dd>
                 <dt>Exemplaire ERG</dt><dd><?= !empty($thesis['exemplaire_erg']) ? 'Oui' : 'Non' ?></dd>
             </dl>
-        </section>
+        </fieldset>
 
         <!-- ═══════════ Dates et publication ═══════════ -->
-        <section>
+        <fieldset>
-            <h2>Dates et publication</h2>
+            <legend>Dates et publication</legend>
             <dl class="recap-dl">
                 <?php if ($thesis['submitted_at']): ?>
                 <dt>Soumis le</dt><dd><?= date('d/m/Y à H:i', strtotime($thesis['submitted_at'])) ?></dd>
@@ -174,21 +174,31 @@
                 <dt>Note du jury ajoutée</dt><dd><?= date('d/m/Y', strtotime($thesis['jury_note_added'])) ?></dd>
                 <?php endif; ?>
             </dl>
-        </section>
+        </fieldset>
 
         <!-- ═══════════ Remarques ═══════════ -->
         <?php if (!empty($thesis['remarks'])): ?>
-        <section>
+        <fieldset>
-            <h2>Remarques</h2>
+            <legend>Remarques</legend>
             <p class="recap-long-text"><?= nl2br(htmlspecialchars($thesis['remarks'])) ?></p>
-        </section>
+        </fieldset>
         <?php endif; ?>
 
         <!-- ═══════════ Fichiers ═══════════ -->
         <?php if (!empty($files)): ?>
-        <section>
+        <fieldset>
-            <h2>Fichiers (<?= count($files) ?>)</h2>
+            <legend>Fichiers (<?= count($files) ?>)</legend>
-            <ul class="admin-file-list" role="list">
+            <table class="recap-files-table">
+                <thead>
+                    <tr>
+                        <th></th>
+                        <th>Nom</th>
+                        <th>Type</th>
+                        <th>Taille</th>
+                        <th>Date</th>
+                    </tr>
+                </thead>
+                <tbody>
                 <?php foreach ($files as $f): ?>
                 <?php
                     $mime     = $f['mime_type'] ?? '';
@@ -230,38 +240,27 @@
                         default => '📎',
                     };
                 ?>
-                <li class="admin-file-list-item">
+                    <tr>
-                    <figure class="admin-file-figure">
+                        <td class="recap-files-icon">
-                        <?php if ($isImage && !$isPeerTube): ?>
+                            <span class="recap-files-icon-emoji"><?= $typeIcon ?></span>
-                        <img src="<?= $mediaUrl ?>" alt="<?= $fileName ?>" class="admin-file-thumb" loading="lazy">
+                        </td>
-                        <?php else: ?>
+                        <td class="recap-files-name">
-                        <span class="admin-file-icon"><?= $typeIcon ?></span>
+                            <a href="<?= $mediaUrl ?>" target="_blank" rel="noopener"><?= $fileName ?></a>
-                        <?php endif; ?>
-                        <figcaption class="admin-file-caption">
-                            <div class="admin-file-name-row">
-                                <a href="<?= $mediaUrl ?>" target="_blank" rel="noopener" class="admin-file-name"><?= $fileName ?></a>
-                            </div>
                             <?php if ($isPeerTube): ?>
-                            <span class="admin-file-peertube-id">ID : <?= htmlspecialchars($_ptUuid) ?></span>
+                            <span class="recap-files-peertube-id">ID : <?= htmlspecialchars($_ptUuid) ?></span>
                             <?php endif; ?>
                             <?php if ($displayLabel): ?>
-                            <span class="admin-file-label"><?= htmlspecialchars($displayLabel) ?></span>
+                            <span class="recap-files-label"><?= htmlspecialchars($displayLabel) ?></span>
                             <?php endif; ?>
-                            <span class="admin-file-meta-row">
+                        </td>
-                                <span class="admin-file-meta"><?= htmlspecialchars($fileType) ?></span>
+                        <td class="recap-files-type"><?= htmlspecialchars($fileType) ?></td>
-                                <?php if (!empty($f['file_size']) && $f['file_size'] > 0): ?>
+                        <td class="recap-files-size"><?= !empty($f['file_size']) && $f['file_size'] > 0 ? formatFileSize($f['file_size']) : '–' ?></td>
-                                <span class="admin-file-meta"><?= formatFileSize($f['file_size']) ?></span>
+                        <td class="recap-files-date"><?= !empty($f['uploaded_at']) ? date('d/m/Y H:i', strtotime($f['uploaded_at'])) : '–' ?></td>
-                                <?php endif; ?>
+                    </tr>
-                                <?php if (!empty($f['uploaded_at'])): ?>
-                                <span class="admin-file-meta"><?= date('d/m/Y H:i', strtotime($f['uploaded_at'])) ?></span>
-                                <?php endif; ?>
-                            </span>
-                        </figcaption>
-                    </figure>
-                </li>
                 <?php endforeach; ?>
-            </ul>
+                </tbody>
-        </section>
+            </table>
+        </fieldset>
         <?php endif; ?>
 
         <div class="admin-action-bar">