From a1a9a316ca65d921fb4ee0ed3dab24e700adac67 Mon Sep 17 00:00:00 2001
From: Pontoporeia <pontoporeia@happyngreen.fr>
Date: Mon, 8 Jun 2026 12:40:17 +0200
Subject: [PATCH] rework tfe.php layout: row1 author above title, row2
 meta+synopsis 2-col grid, row3 flex files

---
 TODO.md                       |   1 +
 app/public/assets/css/tfe.css | 118 +++++++++++++++++++---------------
 app/templates/public/tfe.php  |  24 ++++---
 3 files changed, 82 insertions(+), 61 deletions(-)

diff --git a/TODO.md b/TODO.md
index 44c4884..d56b38d 100644
--- a/TODO.md
+++ b/TODO.md
@@ -4,3 +4,4 @@
 - [x] Remove border-radius from aria-current nav links, drop a:focus-visible ring in header, consolidate border-bottom/padding in shared header.css
 - [x] Admin nav-logo: use grid layout with SVG + text horizontally aligned and vertically centered
 - [x] repertoire.css: .rep-entry → step-1, years col → step-3, col h2 → step-1
+- [x] Rework tfe.php layout: row1 author above title, row2 meta+synopsis 2-col grid, row3 flex files
diff --git a/app/public/assets/css/tfe.css b/app/public/assets/css/tfe.css
index 80ccf97..408e876 100644
--- a/app/public/assets/css/tfe.css
+++ b/app/public/assets/css/tfe.css
@@ -10,23 +10,77 @@
     padding: var(--space-l) var(--space-m) var(--space-xl);
 }
 
-/* Two-column article layout */
+/* Stacked article layout */
 .tfe-layout {
-    display: grid;
-    grid-template-columns: 1fr 1.4fr;
+    display: flex;
+    flex-direction: column;
     gap: var(--space-xl);
     width: 100%;
+}
+
+/* Row 1: Author above Title */
+.tfe-header-row {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3xs);
+}
+
+/* Row 2: Two columns — meta left, synopsis right */
+.tfe-content-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-xl);
     align-items: start;
 }
 
-/* Left column — article header */
-.tfe-left {
+/* Row 3: Files flex container */
+.tfe-files {
     display: flex;
-    flex-direction: column;
+    flex-wrap: wrap;
     gap: var(--space-m);
 }
 
-/* Author (p) — above title */
+.tfe-file-item {
+    flex: 1 1 300px;
+    min-width: 0;
+    overflow: hidden;
+    border-radius: var(--radius);
+}
+
+.tfe-file-item img {
+    width: 100%;
+    height: auto;
+    display: block;
+    border-radius: var(--radius);
+}
+
+.tfe-file-item embed,
+.tfe-file-item video {
+    width: 100%;
+    display: block;
+    border: none;
+}
+
+.tfe-file-item video {
+    max-height: 500px;
+}
+
+.tfe-file-item embed {
+    height: clamp(300px, 80vh, 700px);
+}
+
+.tfe-file-item figcaption {
+    font-size: var(--step--2);
+    color: var(--text-secondary);
+    margin: var(--space-3xs) 0 0;
+    font-style: italic;
+}
+
+.tfe-synopsis-empty {
+    /* placeholder to maintain grid column */
+}
+
+/* Author (p) — inline with title */
 .tfe-author {
     font-family: var(--font-display);
     font-size: var(--step-1);
@@ -88,50 +142,6 @@
     margin: 0;
 }
 
-/* Right column — aside (supplementary media) */
-.tfe-right {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-m);
-}
-
-/* Each file display unit — target <figure> directly inside <aside> */
-aside figure {
-    overflow: hidden;
-    margin: 0;
-    border-radius: var(--radius);
-}
-
-aside figure img {
-    width: 100%;
-    height: auto;
-    display: block;
-    border-radius: var(--radius);
-}
-
-aside figure embed,
-aside figure video {
-    width: 100%;
-    display: block;
-    border: none;
-}
-
-aside figure video {
-    max-height: 500px;
-}
-
-aside figure embed {
-    height: clamp(300px, 80vh, 700px);
-}
-
-/* figcaption under media — target <figcaption> inside <aside> */
-aside figcaption {
-    font-size: var(--step--2);
-    color: var(--text-secondary);
-    margin: var(--space-3xs) 0 0;
-    font-style: italic;
-}
-
 /* PDF fallback download link */
 .tfe-pdf-fallback {
     font-size: var(--step--1);
@@ -294,11 +304,15 @@ aside figcaption {
 
 /* Responsive */
 @media (max-width: 900px) {
-    .tfe-layout {
+    .tfe-content-row {
         grid-template-columns: 1fr;
         gap: var(--space-l);
     }
 
+    .tfe-file-item {
+        flex: 1 1 100%;
+    }
+
     .tfe-title {
         font-size: var(--step-2);
     }
diff --git a/app/templates/public/tfe.php b/app/templates/public/tfe.php
index 8873ded..ea9fdea 100644
--- a/app/templates/public/tfe.php
+++ b/app/templates/public/tfe.php
@@ -1,9 +1,8 @@
 <main class="tfe-main" id="main-content">
     <article class="tfe-layout">
 
-        <!-- LEFT: info — article header -->
-        <section class="tfe-left">
-            <!-- Author above title -->
+        <!-- ROW 1: Author above Title -->
+        <div class="tfe-header-row">
             <p class="tfe-author"><?= htmlspecialchars(
                 $data["authors"] ?? "Auteur inconnu",
             ) ?></p>
@@ -14,7 +13,10 @@
                     – <?= htmlspecialchars($data["subtitle"]) ?>
                 <?php endif; ?>
             </h1>
+        </div>
 
+        <!-- ROW 2: Two columns — meta left, synopsis right -->
+        <div class="tfe-content-row">
             <div class="tfe-meta">
                 <?php if (!empty($data["orientation"])): ?>
                 <p class="tfe-meta-item">
@@ -230,14 +232,16 @@
             </div>
 
             <?php if (!empty($data["synopsis"])): ?>
-            <p class="tfe-synopsis-text">
+            <div class="tfe-synopsis-text">
                 <?= nl2br(htmlspecialchars($data["synopsis"])) ?>
-            </p>
+            </div>
+            <?php else: ?>
+            <div class="tfe-synopsis-text tfe-synopsis-empty"></div>
             <?php endif; ?>
-        </section>
+        </div>
 
-        <!-- RIGHT: media — supplementary aside -->
-        <section class="tfe-right">
+        <!-- ROW 3: All files — flex container -->
+        <div class="tfe-files">
             <?php $_videoIndex = 0; ?>
             <?php if ($isInterdit): ?>
                 <p class="tfe-restricted">
@@ -336,6 +340,7 @@
                     $mediaUrl = $isPeerTube ? '' : ($isExternalUrl ? htmlspecialchars($filePath) : ('/media?path=' . urlencode($filePath)));
                     $fileName = htmlspecialchars($file["file_name"] ?? basename($filePath));
                     ?>
+                    <div class="tfe-file-item">
                         <?php if ($isPdf): ?>
                             <iframe src="<?= $mediaUrl ?>"
                                     width="100%" height="700px"
@@ -415,11 +420,12 @@
                         <?php if ($caption !== '' && !$isOther): ?>
                             <figcaption><?= htmlspecialchars($caption) ?></figcaption>
                         <?php endif; ?>
+                    </div>
                 <?php endforeach; ?>
             <?php else: ?>
                 <p class="tfe-no-files">Aucun fichier disponible pour ce TFE.</p>
             <?php endif; ?>
-        </section>
+        </div>
 
     </article>
 </main>