From cca3d08f058f984a948c8637b3411c2060dcedb3 Mon Sep 17 00:00:00 2001
From: Pontoporeia <pontoporeia@happyngreen.fr>
Date: Mon, 22 Jun 2026 15:25:15 +0200
Subject: [PATCH] Replace apropos/licence/charte sticky nav with responsive
 details/summary TOC
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Convert .apropos-toc <nav> to <details class="toc" open> in all three templates
- Add caret-down icon to summary (visible only on mobile via media queries)
- Desktop (≥768px): sticky sidebar via CSS grid, force-open via pointer-events:none, hide caret
- Mobile (≤767px): single column, collapsible TOC with rotating caret, margin-top below search bar
- Rename .apropos-toc-link to .toc-sidebar-link
- Merge 900px and 600px breakpoints into single 600px mobile media query
- Rename apropos.css → content-page.css; update 3 controller references
---
 .../css/{apropos.css => content-page.css}     | 184 +++++++++++-------
 app/src/Controllers/AboutController.php       |   2 +-
 app/src/Controllers/CharteController.php      |   2 +-
 app/src/Controllers/LicenceController.php     |   2 +-
 app/templates/public/about.php                |  10 +-
 app/templates/public/charte.php               |   8 +-
 app/templates/public/licence.php              |   8 +-
 7 files changed, 132 insertions(+), 84 deletions(-)
 rename app/public/assets/css/{apropos.css => content-page.css} (76%)

diff --git a/app/public/assets/css/apropos.css b/app/public/assets/css/content-page.css
similarity index 76%
rename from app/public/assets/css/apropos.css
rename to app/public/assets/css/content-page.css
index fcb83a4..3ef455d 100644
--- a/app/public/assets/css/apropos.css
+++ b/app/public/assets/css/content-page.css
@@ -3,10 +3,7 @@
    Root class: .page-content
    ============================================================ */
 
-/* Keep the base flex layout (no html/body overrides) —
-   main scrolls internally so the body gradient stays at viewport bottom. */
-
-/* Override inherited padding on main-content (apropós, licence, charte) */
+/* Override inherited padding on main-content */
 #main-content {
     padding-top: 0;
 }
@@ -25,34 +22,69 @@
 }
 
 /* ------------------------------------------------------------------ */
-/* Left — sticky table of contents                                     */
+/* Table of contents — details/summary block                          */
 /* ------------------------------------------------------------------ */
 
-.apropos-toc {
-    position: sticky;
-    top: var(--space-l);
+.toc {
+    border: none;
+    border-radius: 0;
+    background: transparent;
+    overflow: visible;
 }
 
-.apropos-toc-label {
+.toc[open] {
+    padding-bottom: 0;
+}
+
+.toc > :not(summary) {
+    padding-left: 0;
+    padding-right: 0;
+}
+
+.toc summary {
     font-family: var(--font-display);
     font-size: var(--step-1);
     font-weight: 400;
     color: var(--text-primary);
-    margin: 0 0 var(--space-2xs) 0;
-    padding-bottom: var(--space-2xs);
+    padding: 0 0 var(--space-2xs) 0;
     border-bottom: 1px solid var(--text-primary);
+    display: flex;
+    align-items: center;
+    gap: var(--space-2xs);
+    background: transparent;
+    cursor: pointer;
+    list-style: none;
 }
 
-.apropos-toc ul {
+.toc summary::-webkit-details-marker {
+    display: none;
+}
+
+.toc summary:hover {
+    color: inherit;
+    background: transparent;
+}
+
+/* Caret icon inside summary — visible only on mobile */
+.toc-caret {
+    flex-shrink: 0;
+    transition: transform 0.2s ease;
+}
+
+.toc[open] > summary .toc-caret {
+    transform: rotate(180deg);
+}
+
+.toc ul {
     list-style: none;
-    margin: 0 0 var(--space-m) 0;
+    margin: var(--space-xs) 0 0 0;
     padding: 0;
     display: flex;
     flex-direction: column;
     gap: var(--space-3xs);
 }
 
-.apropos-toc ul a {
+.toc ul a {
     font-family: var(--font-body);
     font-size: var(--step-0);
     font-weight: 300;
@@ -63,42 +95,96 @@
     transition: color 0.15s;
 }
 
-.apropos-toc ul a:hover {
+.toc ul a:hover {
     color: var(--accent-primary);
 }
 
-.apropos-toc-link:first-of-type {
+/* Sidebar links (about page) */
+.toc-sidebar-link:first-of-type {
     padding-top: var(--space-s);
     border-top: 1px solid var(--border-primary);
 }
 
-.apropos-toc-link + .apropos-toc-link {
+.toc-sidebar-link + .toc-sidebar-link {
     padding-top: var(--space-xs);
 }
 
-.apropos-toc-link a {
+.toc-sidebar-link a {
     font-size: var(--step--2);
     color: var(--accent-primary);
     text-decoration: none;
     transition: opacity 0.15s;
 }
 
-.apropos-toc-link a:hover {
+.toc-sidebar-link a:hover {
     color: var(--accent-primary);
     opacity: 1;
 }
 
 /* ------------------------------------------------------------------ */
-/* Right — main content area                                          */
+/* Desktop: force-open TOC, hide caret, sticky sidebar                */
 /* ------------------------------------------------------------------ */
 
-.page-content > .content,
-.page-content > .content-section {
-    grid-column: 2;
-    min-width: 0;
-    max-width: 100%;
+@media (min-width: 768px) {
+    .toc {
+        position: sticky;
+        top: var(--space-l);
+        grid-column: 1;
+    }
+
+    .toc summary {
+        pointer-events: none;
+        list-style: none;
+    }
+
+    .toc summary::-webkit-details-marker {
+        display: none;
+    }
+
+    .toc-caret {
+        display: none;
+    }
+
+    .page-content > .content,
+    .page-content > .content-section {
+        grid-column: 2;
+        min-width: 0;
+        max-width: 100%;
+    }
 }
 
+/* ------------------------------------------------------------------ */
+/* Mobile: collapsible TOC                                            */
+/* ------------------------------------------------------------------ */
+
+@media (max-width: 767px) {
+    .page-content {
+        grid-template-columns: 1fr;
+        gap: var(--space-l);
+        padding: var(--space-m) var(--space-s) var(--space-xl);
+    }
+
+    .toc {
+        margin-top: var(--space-s);
+        position: static;
+        grid-column: 1;
+    }
+
+    .page-content > .content,
+    .page-content > .content-section {
+        grid-column: 1;
+    }
+
+    .toc summary {
+        cursor: pointer;
+        list-style: revert;
+    }
+}
+
+/* ------------------------------------------------------------------ */
+/* Main content area                                                   */
+/* ------------------------------------------------------------------ */
+
 /* Shared typography for about-page sections and charte/licence content */
 .content,
 .content-section {
@@ -337,51 +423,9 @@
 }
 
 /* ------------------------------------------------------------------ */
-/* Responsive                                                          */
+/* Responsive — small mobile                                          */
 /* ------------------------------------------------------------------ */
 
-@media (max-width: 900px) {
-    .page-content {
-        grid-template-columns: 1fr;
-        gap: var(--space-l);
-        padding: var(--space-m) var(--space-s) var(--space-xl);
-    }
-
-    .apropos-toc {
-        position: static;
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        gap: var(--space-s);
-        padding-bottom: var(--space-s);
-        border-bottom: 1px solid var(--border-primary);
-    }
-
-    .apropos-toc-label {
-        margin: 0;
-    }
-
-    .apropos-toc ul {
-        flex-direction: row;
-        margin: 0;
-        gap: var(--space-xs);
-    }
-
-    .apropos-toc-link {
-        border-top: none;
-        padding-top: 0;
-        margin-left: auto;
-    }
-
-    .content-section {
-        font-size: var(--step-0);
-    }
-
-    .content-section-title {
-        font-size: var(--step-2);
-    }
-}
-
 @media (max-width: 600px) {
     .page-content {
         padding: var(--space-m) var(--space-s) var(--space-xl);
@@ -391,6 +435,10 @@
         font-size: var(--step-0);
     }
 
+    .content-section-title {
+        font-size: var(--step-2);
+    }
+
     .apropos-credit-row {
         grid-template-columns: 1fr;
         gap: var(--space-3xs);
diff --git a/app/src/Controllers/AboutController.php b/app/src/Controllers/AboutController.php
index 64916bf..f954aed 100644
--- a/app/src/Controllers/AboutController.php
+++ b/app/src/Controllers/AboutController.php
@@ -55,7 +55,7 @@ class AboutController
             'sidebarLinks'    => $sidebarLinks,
             'pageTitle'       => 'À Propos – XAMXAM',
             'metaDescription' => "À propos de XAMXAM, le répertoire des mémoires de fin d'études de l'erg – École de Recherches Graphiques de Bruxelles.",
-            'extraCss'        => ['/assets/css/apropos.css'],
+            'extraCss'        => ['/assets/css/content-page.css'],
             'bodyClass'       => 'apropos-body',
         ];
     }
diff --git a/app/src/Controllers/CharteController.php b/app/src/Controllers/CharteController.php
index 3583d7b..0eb9277 100644
--- a/app/src/Controllers/CharteController.php
+++ b/app/src/Controllers/CharteController.php
@@ -49,7 +49,7 @@ class CharteController
             'pageTitle'        => $pageTitle . ' – XAMXAM',
             'metaDescription'  => "Charte d'utilisation de XAMXAM, le répertoire des TFE de l'erg.",
             'currentNav'       => 'charte',
-            'extraCss'         => ['/assets/css/apropos.css'],
+            'extraCss'         => ['/assets/css/content-page.css'],
             'bodyClass'        => 'apropos-body',
         ];
     }
diff --git a/app/src/Controllers/LicenceController.php b/app/src/Controllers/LicenceController.php
index a6854e1..3ab720a 100644
--- a/app/src/Controllers/LicenceController.php
+++ b/app/src/Controllers/LicenceController.php
@@ -49,7 +49,7 @@ class LicenceController
             'pageTitle'        => $pageTitle . ' – XAMXAM',
             'metaDescription'  => "Informations sur les licences d'utilisation des mémoires publiés sur XAMXAM, le répertoire des TFE de l'erg.",
             'currentNav'       => 'licence',
-            'extraCss'         => ['/assets/css/apropos.css'],
+            'extraCss'         => ['/assets/css/content-page.css'],
             'bodyClass'        => 'apropos-body',
         ];
     }
diff --git a/app/templates/public/about.php b/app/templates/public/about.php
index 6dd0ce8..15fc5d2 100644
--- a/app/templates/public/about.php
+++ b/app/templates/public/about.php
@@ -33,9 +33,9 @@ function renderEntries(array $entries): string
 } ?>
 <main class="page-content" id="main-content">
 
-    <!-- LEFT: sticky table of contents -->
-    <nav class="apropos-toc" aria-label="Sections de la page">
-        <p class="apropos-toc-label">PARTIES</p>
+    <!-- Table of contents: collapsible on mobile, force-open on desktop -->
+    <details class="toc" open>
+        <summary><?= icon('caret-down', 0, 'toc-caret') ?> PARTIES</summary>
         <ul>
             <li><a href="#apropos-intro">À propos</a></li>
             <?php if (!empty($contacts)): ?>
@@ -45,14 +45,14 @@ function renderEntries(array $entries): string
         </ul>
         <?php if (!empty($sidebarLinks)): ?>
         <?php foreach ($sidebarLinks as $sl): ?>
-        <div class="apropos-toc-link">
+        <div class="toc-sidebar-link">
             <a href="<?= htmlspecialchars($sl['url'] ?? '#') ?>" target="_blank" rel="noopener">
                 <?= htmlspecialchars($sl['label'] ?? 'Lien') ?> ↗
             </a>
         </div>
         <?php endforeach; ?>
         <?php endif; ?>
-    </nav>
+    </details>
 
     <!-- Intro text from DB -->
     <section class="content-section" id="apropos-intro">
diff --git a/app/templates/public/charte.php b/app/templates/public/charte.php
index 80e1975..d474b36 100644
--- a/app/templates/public/charte.php
+++ b/app/templates/public/charte.php
@@ -1,15 +1,15 @@
 <main class="page-content" id="main-content">
 
-    <!-- LEFT: sticky table of contents -->
+    <!-- Table of contents: collapsible on mobile, force-open on desktop -->
     <?php if (!empty($tocItems)): ?>
-    <nav class="apropos-toc" aria-label="Sections de la page">
-        <p class="apropos-toc-label">PARTIES</p>
+    <details class="toc" open>
+        <summary><?= icon('caret-down', 0, 'toc-caret') ?> PARTIES</summary>
         <ul>
             <?php foreach ($tocItems as $item): ?>
             <li><a href="<?= htmlspecialchars($item['href']) ?>"><?= htmlspecialchars($item['label']) ?></a></li>
             <?php endforeach; ?>
         </ul>
-    </nav>
+    </details>
     <?php endif; ?>
 
     <div class="content">
diff --git a/app/templates/public/licence.php b/app/templates/public/licence.php
index 80e1975..d474b36 100644
--- a/app/templates/public/licence.php
+++ b/app/templates/public/licence.php
@@ -1,15 +1,15 @@
 <main class="page-content" id="main-content">
 
-    <!-- LEFT: sticky table of contents -->
+    <!-- Table of contents: collapsible on mobile, force-open on desktop -->
     <?php if (!empty($tocItems)): ?>
-    <nav class="apropos-toc" aria-label="Sections de la page">
-        <p class="apropos-toc-label">PARTIES</p>
+    <details class="toc" open>
+        <summary><?= icon('caret-down', 0, 'toc-caret') ?> PARTIES</summary>
         <ul>
             <?php foreach ($tocItems as $item): ?>
             <li><a href="<?= htmlspecialchars($item['href']) ?>"><?= htmlspecialchars($item['label']) ?></a></li>
             <?php endforeach; ?>
         </ul>
-    </nav>
+    </details>
     <?php endif; ?>
 
     <div class="content">