Match Accueil.png mockup: nav layout, full-width search, section label

TODO.md

@@ -2,6 +2,12 @@
 
 ## Completed
 
+- [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`

public/assets/css/common.css

@@ -61,6 +61,22 @@ header nav {
   justify-content: space-between;
 }
 
+.nav-left {
+  display: flex;
+  align-items: center;
+  gap: 3rem;
+}
+
+.nav-left-links,
+.nav-right-links {
+  display: flex;
+  gap: 3rem;
+  align-items: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
 header nav > a {
   font-family: "police1", sans-serif;
   font-size: 1.1rem;
@@ -71,7 +87,7 @@ header nav > a {
   /* font-weight: 400; */
 }
 
-header nav ul {
+header nav > ul {
   display: flex;
   gap: 3rem;
   align-items: center;
@@ -109,15 +125,19 @@ header nav ul a[aria-current="page"] {
 /* ============================================================
    SEARCH BAR (shared)
    ============================================================ */
+.header-search-wrap {
+  padding: 0 0;
+}
+
 header form[role="search"] {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.25rem 1.5rem;
+  padding: 0.4rem 1.5rem;
   border: 1px solid var(--accent-primary);
-  border-radius: 8px;
+  border-radius: 0;
   background: var(--bg-primary);
-  flex-shrink: 0;
+  width: 100%;
   color: var(--accent-primary);
 }
 

public/assets/css/main.css

@@ -134,16 +134,16 @@
   overflow: hidden;
 }
 
-/* Latest-year label — section heading style */
-.home-latest-label {
+/* Section label */
+.home-section-label {
   font-style: normal;
   background: transparent;
-  color: var(--text-secondary);
+  color: var(--text-primary);
   font-size: 0.78rem;
   font-weight: 600;
   letter-spacing: 0.1em;
   text-transform: uppercase;
-  padding: 0.9rem 1.25rem 0.6rem;
+  padding: 1.1rem 1.25rem 0.8rem;
   border-bottom: 1px solid var(--border-primary);
   margin: 0;
 }

public/index.php

@@ -15,10 +15,8 @@ extract($vars);
         Année : <?= htmlspecialchars($year) ?>
         <a href="index.php" class="clear-filter"><span aria-hidden="true">✕</span> Réinitialiser</a>
     </p>
-    <?php elseif ($isDefaultView && !empty($latestYear)): ?>
-    <p class="filter-info home-latest-label" role="status">
-        Découvrez les TFE de <?= (int)$latestYear ?> — sélection aléatoire
-    </p>
+    <?php elseif ($isDefaultView): ?>
+    <p class="home-section-label" role="status">Publication récente</p>
     <?php endif; ?>
 
     <main class="home-main" id="main-content">

templates/header.php

@@ -35,15 +35,19 @@ $_thesisId     = $_GET['id'] ?? null;
     <?php else: ?>
 
     <nav aria-label="Navigation principale">
-        <a href="/index.php">Posterg</a>
-        <ul>
-            <li>
-                <a href="/search.php"
-                   <?= ($_navCurrent === 'repertoire') ? 'aria-current="page"' : '' ?>>Répertoire</a>
-            </li>
+        <div class="nav-left">
+            <a href="/index.php">Xamxam</a>
+            <ul class="nav-left-links">
+                <li>
+                    <a href="/search.php"
+                       <?= ($_navCurrent === 'repertoire') ? 'aria-current="page"' : '' ?>>Répertoire</a>
+                </li>
+            </ul>
+        </div>
+        <ul class="nav-right-links">
             <li>
                 <a href="/licence.php"
-                   <?= ($_navCurrent === 'licence') ? 'aria-current="page"' : '' ?>>Licence</a>
+                   <?= ($_navCurrent === 'licence') ? 'aria-current="page"' : '' ?>>Licences</a>
             </li>
             <li>
                 <a href="/apropos.php"
@@ -56,23 +60,25 @@ $_thesisId     = $_GET['id'] ?? null;
     // Search bar — public section only
     $searchBarValue = $searchBarValue ?? $_GET['query'] ?? '';
     ?>
-    <form method="GET" action="/search.php"
-          role="search" aria-label="Recherche">
-        <label for="site-search-input" class="sr-only">Recherche</label>
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
-             fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-             aria-hidden="true" focusable="false">
-            <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
-        </svg>
-        <input
-            id="site-search-input"
-            type="text"
-            name="query"
-            placeholder="Recherche..."
-            value="<?= htmlspecialchars($searchBarValue) ?>"
-            autocomplete="off"
-        >
-    </form>
+    <div class="header-search-wrap">
+        <form method="GET" action="/search.php"
+              role="search" aria-label="Recherche">
+            <label for="site-search-input" class="sr-only">Recherche</label>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+                 fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                 aria-hidden="true" focusable="false">
+                <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
+            </svg>
+            <input
+                id="site-search-input"
+                type="text"
+                name="query"
+                placeholder="Recherche..."
+                value="<?= htmlspecialchars($searchBarValue) ?>"
+                autocomplete="off"
+            >
+        </form>
+    </div>
 
     <?php endif; ?>