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

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) -->
-            <div class="prose">
-                <?= $aboutHtml ?>
-            </div>
+            <!-- LEFT: sticky table of contents -->
+            <nav class="apropos-toc" aria-label="Sections de la page">
+                <p class="apropos-toc-label">Parties</p>
+                <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) -->
-            <aside class="apropos-aside">
+            <!-- MIDDLE: main prose + sections -->
+            <div class="apropos-content">
 
-                <section>
-                    <h2 class="apropos-section-title">
-                        <a href="<?= htmlspecialchars($apropos['erg_url']) ?>" target="_blank" rel="noopener">Site de l'erg</a>
-                    </h2>
+                <!-- Intro text from DB -->
+                <section class="apropos-section" id="apropos-intro">
+                    <div class="prose">
+                        <?= $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>
-
-                    <?php foreach ($apropos['contacts'] as $contact): ?>
-                    <address>
-                        <strong><?= htmlspecialchars($contact['name']) ?></strong>
-                        <span><?= htmlspecialchars($contact['role']) ?></span>
-                        <a href="mailto:<?= htmlspecialchars($contact['email']) ?>"><?= htmlspecialchars($contact['email']) ?></a>
-                    </address>
-                    <?php endforeach; ?>
+                    <div class="apropos-contacts-grid">
+                        <?php foreach ($apropos['contacts'] as $contact): ?>
+                        <address class="apropos-contact-card">
+                            <strong><?= htmlspecialchars($contact['name']) ?></strong>
+                            <span><?= htmlspecialchars($contact['role']) ?></span>
+                            <a href="mailto:<?= htmlspecialchars($contact['email']) ?>"><?= htmlspecialchars($contact['email']) ?></a>
+                        </address>
+                        <?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): ?>
-                    <p class="apropos-credits-text">
-                        <?= htmlspecialchars($credit['label']) ?> : <?= htmlspecialchars($credit['value']) ?>
-                    </p>
-                    <?php endforeach; ?>
+                    <dl class="apropos-credits-list">
+                        <?php foreach ($apropos['credits'] as $credit): ?>
+                        <div class="apropos-credit-row">
+                            <dt><?= htmlspecialchars($credit['label']) ?></dt>
+                            <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: 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;
+  padding: 3rem 2rem 5rem;
 }
 
 /* ------------------------------------------------------------------ */
-/* 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;
-  line-height: 1.45;
+  font-size: 1.45rem;
+  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 h2 { font-size: 1.3rem; }
-.prose h3 { font-size: 1.1rem; }
+.prose h1 { font-size: 2rem; }
+.prose h2 { font-size: 1.5rem; }
+.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-size: 0.9em;
+  font-family: "Courier New", Courier, monospace;
+  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 {
-  font-family: var(--font-display);
-  font-size: 1.55rem;
-  font-weight: 400;
-  color: var(--text-primary);
-  margin: 0 0 0.5rem 0;
-  line-height: 1.2;
+.apropos-contact-card {
+  font-style: normal;
+  padding: 1.1rem 0;
+  border-bottom: 1px solid var(--border-primary);
 }
 
-.apropos-section-title a {
-  color: inherit;
-  text-decoration: underline;
-  text-underline-offset: 3px;
+.apropos-contact-card:first-child {
+  border-top: 1px solid var(--border-primary);
 }
 
-/* Contact entries — <address> elements */
-.apropos-aside address {
-  margin-bottom: 1rem;
-  font-style: normal; /* override browser italic default for <address> */
-}
-
-.apropos-aside address strong {
-  font-weight: 700;
+.apropos-contact-card strong {
+  display: block;
   font-size: 0.95rem;
+  font-weight: 600;
   color: var(--text-primary);
-  display: block;
-  margin-bottom: 0.15rem;
+  margin-bottom: 0.2rem;
 }
 
-.apropos-aside address span,
-.apropos-aside address a {
-  font-size: 0.9rem;
-  color: var(--text-primary);
+.apropos-contact-card span {
+  display: block;
+  font-size: 0.85rem;
+  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 {
-  margin-top: 2rem;
+/* ------------------------------------------------------------------ */
+/* Single-column layout — used by licence.php (no sidebar)            */
+/* ------------------------------------------------------------------ */
+
+.apropos-single {
+  max-width: 720px;
 }
 
-.apropos-licences h2 {
-  font-family: var(--font-display);
-  font-size: 1.55rem;
-  font-weight: 400;
-  margin: 0 0 0.75rem 0;
-}
+/* ------------------------------------------------------------------ */
+/* Responsive                                                          */
+/* ------------------------------------------------------------------ */
 
-.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;
+  }
 }