Improve À propos page layout: sticky TOC nav, bordered contact rows, credits dl grid

TODO.md

@@ -1,24 +1,10 @@
 # TODO
 
-## Completed
+## Done
-
+- [x] Improve À propos page layout
-- [x] Apply correct fonts site-wide
+  - [x] Replace two-column (prose + aside) with sticky-TOC-nav + main-content layout
-  - Registered `Combined` and all 4 weights of `BBBDMSans` via `@font-face` in `common.css`
+  - [x] Sticky left nav with section anchors (À propos, Contacts, Crédits + erg link)
-  - Added `--font-body` and `--font-display` CSS variables in `variables.css`
+  - [x] Contacts rendered as bordered rows instead of loose address blocks
-  - All font usages across `common.css`, `tfe.css`, `apropos.css` use `var(--font-body)` / `var(--font-display)`
+  - [x] Credits rendered as `<dl>` grid with label/value rows
-  - Code blocks keep `Courier New` monospace (intentional)
+  - [x] Section dividers (border-bottom) between sections
-
+  - [x] Responsive: TOC collapses to horizontal bar on mobile
-- [x] Répertoire: rename search.php → repertoire.php, 6-column layout (AP + Orientations split, Finalité du Master added), HTMX server-side intersection filter, faded entries disabled, URL-shareable state
-- [x] Match Accueil.png mockup
-  - Nav: brand → "Xamxam", add Répertoire left, Licences/À Propos right
-  - Search bar: full-width below nav (not inline)
-  - Section label: "Publication récente" replacing "DÉCOUVREZ LES TFE" label
-  - CSS: nav-left/nav-right layout, full-width search form
-
-- [x] Fix homepage card grid styling
-  - Added `gap: 1.25rem` and padding to `.cards-container` (was `gap: 0`, no padding)
-  - Added `border`, `border-radius: 8px`, hover shadow + lift to `.card`
-  - Added `border-radius` to `.home-body figure` and `.card__media--gradient`
-  - Fixed `.card__media--gradient` to use `aspect-ratio: 4/3` (was `height: 100%` which broke without explicit parent height)
-  - Added `border-top` separator between card media and caption
-  - Restyled `.home-latest-label` as uppercase section heading with border-bottom

public/apropos.php

@@ -44,46 +44,67 @@ $bodyClass = 'apropos-body';
     <main class="apropos-main" id="main-content">
         <div class="apropos-layout">
 
-            <!-- LEFT: main text (from DB, Markdown-rendered) -->
+            <!-- LEFT: sticky table of contents -->
-            <div class="prose">
+            <nav class="apropos-toc" aria-label="Sections de la page">
-                <?= $aboutHtml ?>
+                <p class="apropos-toc-label">Parties</p>
-            </div>
+                <ul>
+                    <li><a href="#apropos-intro">À propos</a></li>
+                    <?php if (!empty($apropos['contacts'])): ?>
+                    <li><a href="#apropos-contacts">Contacts</a></li>
+                    <?php endif; ?>
+                    <?php if (!empty($apropos['credits'])): ?>
+                    <li><a href="#apropos-credits">Crédits</a></li>
+                    <?php endif; ?>
+                </ul>
+                <div class="apropos-toc-erg">
+                    <a href="<?= htmlspecialchars($apropos['erg_url']) ?>" target="_blank" rel="noopener">
+                        Site de l'erg ↗
+                    </a>
+                </div>
+            </nav>
 
-            <!-- RIGHT: links, contacts, credits (data from config/apropos.php) -->
+            <!-- MIDDLE: main prose + sections -->
-            <aside class="apropos-aside">
+            <div class="apropos-content">
 
-                <section>
+                <!-- Intro text from DB -->
-                    <h2 class="apropos-section-title">
+                <section class="apropos-section" id="apropos-intro">
-                        <a href="<?= htmlspecialchars($apropos['erg_url']) ?>" target="_blank" rel="noopener">Site de l'erg</a>
+                    <div class="prose">
-                    </h2>
+                        <?= $aboutHtml ?>
+                    </div>
                 </section>
 
                 <?php if (!empty($apropos['contacts'])): ?>
-                <section>
+                <!-- Contacts section -->
+                <section class="apropos-section" id="apropos-contacts">
                     <h2 class="apropos-section-title">Contacts</h2>
-
+                    <div class="apropos-contacts-grid">
-                    <?php foreach ($apropos['contacts'] as $contact): ?>
+                        <?php foreach ($apropos['contacts'] as $contact): ?>
-                    <address>
+                        <address class="apropos-contact-card">
-                        <strong><?= htmlspecialchars($contact['name']) ?></strong>
+                            <strong><?= htmlspecialchars($contact['name']) ?></strong>
-                        <span><?= htmlspecialchars($contact['role']) ?></span>
+                            <span><?= htmlspecialchars($contact['role']) ?></span>
-                        <a href="mailto:<?= htmlspecialchars($contact['email']) ?>"><?= htmlspecialchars($contact['email']) ?></a>
+                            <a href="mailto:<?= htmlspecialchars($contact['email']) ?>"><?= htmlspecialchars($contact['email']) ?></a>
-                    </address>
+                        </address>
-                    <?php endforeach; ?>
+                        <?php endforeach; ?>
+                    </div>
                 </section>
                 <?php endif; ?>
 
                 <?php if (!empty($apropos['credits'])): ?>
-                <section>
+                <!-- Credits section -->
+                <section class="apropos-section" id="apropos-credits">
                     <h2 class="apropos-section-title">Crédits</h2>
-                    <?php foreach ($apropos['credits'] as $credit): ?>
+                    <dl class="apropos-credits-list">
-                    <p class="apropos-credits-text">
+                        <?php foreach ($apropos['credits'] as $credit): ?>
-                        <?= htmlspecialchars($credit['label']) ?> : <?= htmlspecialchars($credit['value']) ?>
+                        <div class="apropos-credit-row">
-                    </p>
+                            <dt><?= htmlspecialchars($credit['label']) ?></dt>
-                    <?php endforeach; ?>
+                            <dd><?= htmlspecialchars($credit['value']) ?></dd>
+                        </div>
+                        <?php endforeach; ?>
+                    </dl>
                 </section>
                 <?php endif; ?>
 
-            </aside>
+            </div>
 
         </div>
     </main>

public/assets/css/apropos.css

@@ -1,9 +1,13 @@
 /* ============================================================
-   À PROPOS PAGE (apropos.php) + LICENCE PAGE (licence.php)
+   À PROPOS PAGE (apropos.php)
    ============================================================ */
 
 @import url("./variables.css");
 
+/* ------------------------------------------------------------------ */
+/* Page shell                                                          */
+/* ------------------------------------------------------------------ */
+
 .apropos-body {
   display: flex;
   flex-direction: column;
@@ -13,38 +17,136 @@
 
 .apropos-main {
   flex: 1;
-  overflow-y: auto;
+  padding: 3rem 2rem 5rem;
-  padding: 2.5rem 1.5rem 4rem;
-}
-
-/* Two-column layout */
-.apropos-layout {
-  display: grid;
-  grid-template-columns: 1.4fr 1fr;
-  gap: 4rem;
-  max-width: 1200px;
-}
-
-/* Single-column layout — used by licence.php (no right column) */
-.apropos-single {
-  max-width: 720px;
 }
 
 /* ------------------------------------------------------------------ */
-/* Main prose column — Markdown-rendered content                       */
+/* Two-column layout: sticky TOC nav | content                        */
+/* ------------------------------------------------------------------ */
+
+.apropos-layout {
+  display: grid;
+  grid-template-columns: 180px 1fr;
+  gap: 4rem;
+  max-width: 860px;
+  margin: 0 auto;
+  align-items: start;
+}
+
+/* ------------------------------------------------------------------ */
+/* Left — sticky table of contents                                    */
+/* ------------------------------------------------------------------ */
+
+.apropos-toc {
+  position: sticky;
+  top: 2.5rem;
+}
+
+.apropos-toc-label {
+  font-family: var(--font-body);
+  font-size: 0.72rem;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--text-tertiary);
+  margin: 0 0 0.6rem 0;
+}
+
+.apropos-toc ul {
+  list-style: none;
+  margin: 0 0 1.5rem 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.apropos-toc ul a {
+  font-family: var(--font-body);
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+  text-decoration: none;
+  display: block;
+  padding: 0.2rem 0;
+  transition: color 0.15s;
+  border-left: 2px solid transparent;
+  padding-left: 0.6rem;
+}
+
+.apropos-toc ul a:hover {
+  color: var(--text-primary);
+  border-left-color: var(--accent-primary);
+}
+
+.apropos-toc-erg {
+  padding-top: 1rem;
+  border-top: 1px solid var(--border-primary);
+}
+
+.apropos-toc-erg a {
+  font-size: 0.8rem;
+  color: var(--accent-primary);
+  text-decoration: none;
+  transition: opacity 0.15s;
+}
+
+.apropos-toc-erg a:hover {
+  opacity: 0.75;
+}
+
+/* ------------------------------------------------------------------ */
+/* Right — main content area                                          */
+/* ------------------------------------------------------------------ */
+
+.apropos-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.apropos-section {
+  padding-bottom: 3.5rem;
+  border-bottom: 1px solid var(--border-primary);
+  margin-bottom: 3.5rem;
+}
+
+.apropos-section:last-child {
+  border-bottom: none;
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+
+/* ------------------------------------------------------------------ */
+/* Section titles                                                      */
+/* ------------------------------------------------------------------ */
+
+.apropos-section-title {
+  font-family: var(--font-display);
+  font-size: 2rem;
+  font-weight: 400;
+  color: var(--text-primary);
+  margin: 0 0 1.75rem 0;
+  line-height: 1.1;
+}
+
+/* ------------------------------------------------------------------ */
+/* Intro prose — Markdown-rendered content                            */
 /* ------------------------------------------------------------------ */
 
 .prose {
   font-family: var(--font-body);
-  font-size: 1.55rem;
+  font-size: 1.45rem;
-  line-height: 1.45;
+  line-height: 1.5;
   color: var(--text-primary);
   font-weight: 400;
-  margin: 0 0 2rem 0;
 }
 
 .prose p {
-  margin: 0 0 1.2em 0;
+  margin: 0 0 1em 0;
+}
+
+.prose p:last-child {
+  margin-bottom: 0;
 }
 
 .prose h1,
@@ -55,12 +157,13 @@
   margin: 1.5em 0 0.5em 0;
 }
 
-.prose h1 { font-size: 1.55rem; }
+.prose h1 { font-size: 2rem; }
-.prose h2 { font-size: 1.3rem; }
+.prose h2 { font-size: 1.5rem; }
-.prose h3 { font-size: 1.1rem; }
+.prose h3 { font-size: 1.2rem; }
 
 .prose a {
   color: var(--accent-primary);
+  text-decoration: underline;
   text-underline-offset: 2px;
 }
 
@@ -71,110 +174,163 @@
 }
 
 .prose li {
-  margin-bottom: .3em;
+  margin-bottom: 0.3em;
 }
 
 .prose strong { font-weight: 700; }
 .prose em { font-style: italic; }
 
 .prose code {
-  font-family: "Courier New", Courier, monospace; /* keep monospace for code */
+  font-family: "Courier New", Courier, monospace;
-  font-size: 0.9em;
+  font-size: 0.88em;
   background: var(--bg-tertiary);
-  padding: .1em .3em;
+  padding: 0.1em 0.3em;
   border-radius: 2px;
 }
 
 /* ------------------------------------------------------------------ */
-/* Right aside — links, contacts, credits                              */
+/* Contacts grid                                                       */
 /* ------------------------------------------------------------------ */
 
-.apropos-aside {
+.apropos-contacts-grid {
   display: flex;
   flex-direction: column;
-  gap: 2rem;
+  gap: 0;
 }
 
-.apropos-section-title {
+.apropos-contact-card {
-  font-family: var(--font-display);
+  font-style: normal;
-  font-size: 1.55rem;
+  padding: 1.1rem 0;
-  font-weight: 400;
+  border-bottom: 1px solid var(--border-primary);
-  color: var(--text-primary);
-  margin: 0 0 0.5rem 0;
-  line-height: 1.2;
 }
 
-.apropos-section-title a {
+.apropos-contact-card:first-child {
-  color: inherit;
+  border-top: 1px solid var(--border-primary);
-  text-decoration: underline;
-  text-underline-offset: 3px;
 }
 
-/* Contact entries — <address> elements */
+.apropos-contact-card strong {
-.apropos-aside address {
+  display: block;
-  margin-bottom: 1rem;
-  font-style: normal; /* override browser italic default for <address> */
-}
-
-.apropos-aside address strong {
-  font-weight: 700;
   font-size: 0.95rem;
+  font-weight: 600;
   color: var(--text-primary);
-  display: block;
+  margin-bottom: 0.2rem;
-  margin-bottom: 0.15rem;
 }
 
-.apropos-aside address span,
+.apropos-contact-card span {
-.apropos-aside address a {
+  display: block;
-  font-size: 0.9rem;
+  font-size: 0.85rem;
-  color: var(--text-primary);
+  color: var(--text-secondary);
   line-height: 1.4;
-  display: block;
+  margin-bottom: 0.25rem;
 }
 
-.apropos-aside address a {
+.apropos-contact-card a {
+  font-size: 0.85rem;
+  color: var(--accent-primary);
   text-decoration: underline;
   text-underline-offset: 2px;
+  transition: opacity 0.15s;
 }
 
-.apropos-credits-text {
+.apropos-contact-card a:hover {
+  opacity: 0.75;
+}
+
+/* ------------------------------------------------------------------ */
+/* Credits list                                                        */
+/* ------------------------------------------------------------------ */
+
+.apropos-credits-list {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.apropos-credit-row {
+  display: grid;
+  grid-template-columns: 1fr 1.6fr;
+  gap: 1rem;
+  padding: 1rem 0;
+  border-bottom: 1px solid var(--border-primary);
+  align-items: baseline;
+}
+
+.apropos-credit-row:first-child {
+  border-top: 1px solid var(--border-primary);
+}
+
+.apropos-credits-list dt {
+  font-size: 0.8rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--text-tertiary);
+}
+
+.apropos-credits-list dd {
   font-size: 0.9rem;
   color: var(--text-primary);
-  line-height: 1.6;
+  margin: 0;
+  line-height: 1.5;
 }
 
-/* Licences section (legacy) */
+/* ------------------------------------------------------------------ */
-.apropos-licences {
+/* Single-column layout — used by licence.php (no sidebar)            */
-  margin-top: 2rem;
+/* ------------------------------------------------------------------ */
+
+.apropos-single {
+  max-width: 720px;
 }
 
-.apropos-licences h2 {
+/* ------------------------------------------------------------------ */
-  font-family: var(--font-display);
+/* Responsive                                                          */
-  font-size: 1.55rem;
+/* ------------------------------------------------------------------ */
-  font-weight: 400;
-  margin: 0 0 0.75rem 0;
-}
 
-.apropos-licences p {
-  font-size: 0.9rem;
-  color: var(--text-primary);
-  line-height: 1.6;
-  margin: 0 0 0.75rem 0;
-}
-
-/* Responsive */
 @media (max-width: 900px) {
   .apropos-layout {
     grid-template-columns: 1fr;
     gap: 2rem;
   }
 
+  .apropos-toc {
+    position: static;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid var(--border-primary);
+  }
+
+  .apropos-toc-label {
+    margin: 0;
+  }
+
+  .apropos-toc ul {
+    flex-direction: row;
+    margin: 0;
+    gap: 0.75rem;
+  }
+
+  .apropos-toc ul a {
+    border-left: none;
+    padding-left: 0;
+  }
+
+  .apropos-toc-erg {
+    border-top: none;
+    padding-top: 0;
+    margin-left: auto;
+  }
+
   .prose {
     font-size: 1.2rem;
   }
 
   .apropos-section-title {
-    font-size: 1.2rem;
+    font-size: 1.6rem;
   }
 }
 
@@ -186,4 +342,9 @@
   .prose {
     font-size: 1rem;
   }
+
+  .apropos-credit-row {
+    grid-template-columns: 1fr;
+    gap: 0.25rem;
+  }
 }