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 */
+/* Section label */
-.home-latest-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)): ?>
+    <?php elseif ($isDefaultView): ?>
-    <p class="filter-info home-latest-label" role="status">
+    <p class="home-section-label" role="status">Publication récente</p>
-        Découvrez les TFE de <?= (int)$latestYear ?> — sélection aléatoire
-    </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>
+        <div class="nav-left">
-        <ul>
+            <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,6 +60,7 @@ $_thesisId     = $_GET['id'] ?? null;
     // Search bar — public section only
     $searchBarValue = $searchBarValue ?? $_GET['query'] ?? '';
     ?>
+    <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>
@@ -73,6 +78,7 @@ $_thesisId     = $_GET['id'] ?? null;
                 autocomplete="off"
             >
         </form>
+    </div>
 
     <?php endif; ?>