From 6657c4fbbe6d67add78aa64a553bd4993c71762f Mon Sep 17 00:00:00 2001
From: Pontoporeia <pontoporeia@happyngreen.fr>
Date: Sun, 29 Mar 2026 15:50:41 +0200
Subject: [PATCH] refactor(nav): replace div+BEM classes with semantic ul/li in
 public nav
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

templates/nav.php:
- Replace <div class="site-nav__links"> with <ul role="list"> + <li> children
- Move À Propos link inside the list (was a loose sibling <a>)
- Remove .site-nav__link and .site-nav__link--active classes from all <a> elements
- Active state now driven solely by aria-current="page" (already present)

public/assets/common.css:
- Remove .site-nav__links, .site-nav__link, .site-nav__link:hover, .site-nav__link--active rules
- Add .site-nav ul (flex, gap, list-style reset), .site-nav ul a, .site-nav ul a:hover
- Active indicator: .site-nav ul a[aria-current="page"] — self-documenting, screen-reader-announced

Fixes TODO section I (nav semantic HTML audit). All three BEM nav-link classes deleted;
zero references remain in the codebase.
---
 TODO.md                  |  2 +-
 public/assets/common.css | 11 +++++++----
 templates/nav.php        | 25 ++++++++++++++-----------
 3 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/TODO.md b/TODO.md
index 00ea28e..04e22aa 100644
--- a/TODO.md
+++ b/TODO.md
@@ -566,7 +566,7 @@ The design does **not** need to change - only the vocabulary of the markup.
 
 ### I - `templates/nav.php` & `templates/search-bar.php`
 
-- [ ] **`<div class="site-nav__links">`** wraps the centre nav links purely for flex grouping.
+- [x] **`<div class="site-nav__links">`** wraps the centre nav links purely for flex grouping.
       Replace with `<ul>` + `<li>` children (links inside a nav belong in a list - standard
       pattern). The `<a>` elements stay; CSS targets `nav ul` / `nav li` / `nav a` directly,
       removing `.site-nav__links`, `.site-nav__link`, `.site-nav__right` classes entirely.
diff --git a/public/assets/common.css b/public/assets/common.css
index fa11f97..7b48f7d 100644
--- a/public/assets/common.css
+++ b/public/assets/common.css
@@ -69,13 +69,16 @@ a:hover {
   font-weight: 400;
 }
 
-.site-nav__links {
+.site-nav ul {
   display: flex;
   gap: 3rem;
   align-items: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
 }
 
-.site-nav__link {
+.site-nav ul a {
   font-size: 0.85rem;
   letter-spacing: 0.12em;
   text-transform: uppercase;
@@ -85,11 +88,11 @@ a:hover {
   transition: opacity 0.15s;
 }
 
-.site-nav__link:hover {
+.site-nav ul a:hover {
   opacity: 1;
 }
 
-.site-nav__link--active {
+.site-nav ul a[aria-current="page"] {
   opacity: 1;
   border-bottom: 1px solid rgba(255, 255, 255, 0.6);
   padding-bottom: 1px;
diff --git a/templates/nav.php b/templates/nav.php
index 63fe42b..414211a 100644
--- a/templates/nav.php
+++ b/templates/nav.php
@@ -6,15 +6,18 @@ $_navCurrent = $currentNav ?? '';
 ?>
 <nav class="site-nav" aria-label="Navigation principale">
     <a class="site-nav__logo" href="/index.php">Posterg</a>
-    <div class="site-nav__links">
-        <a class="site-nav__link <?= ($_navCurrent === 'repertoire') ? 'site-nav__link--active' : '' ?>"
-           href="/search.php"
-           <?= ($_navCurrent === 'repertoire') ? 'aria-current="page"' : '' ?>>Répertoire</a>
-        <a class="site-nav__link <?= ($_navCurrent === 'licence') ? 'site-nav__link--active' : '' ?>"
-           href="/licence.php"
-           <?= ($_navCurrent === 'licence') ? 'aria-current="page"' : '' ?>>Licence</a>
-    </div>
-    <a class="site-nav__link <?= ($_navCurrent === 'apropos') ? 'site-nav__link--active' : '' ?>"
-       href="/apropos.php"
-       <?= ($_navCurrent === 'apropos') ? 'aria-current="page"' : '' ?>>À Propos</a>
+    <ul role="list">
+        <li>
+            <a href="/search.php"
+               <?= ($_navCurrent === 'repertoire') ? 'aria-current="page"' : '' ?>>Répertoire</a>
+        </li>
+        <li>
+            <a href="/licence.php"
+               <?= ($_navCurrent === 'licence') ? 'aria-current="page"' : '' ?>>Licence</a>
+        </li>
+        <li>
+            <a href="/apropos.php"
+               <?= ($_navCurrent === 'apropos') ? 'aria-current="page"' : '' ?>>À Propos</a>
+        </li>
+    </ul>
 </nav>