Redesign UI to match target design images

- Flat purple-gradient nav bar with POSTERG/RÉPERTOIRE/À PROPOS links
- Full-width search bar with icon, bottom-border only, below nav
- Home: white bg, media card grid (thumbnail + author/title label below)
- Répertoire: 4-column index (Années/Catégories/Étudiantes/Mots-clés)
- TFE: 2-column layout (large text left, media right)
- À Propos: 2-column, large monospace text, new apropos.php page
- Admin: dark theme (#1a1a1a), purple gradient nav, bottom-border inputs
- New shared partials: templates/nav.php, templates/search-bar.php
- Rewrote all CSS: common, main, search, tfe, apropos, admin

public/assets/common.css

@@ -1,104 +1,135 @@
 @font-face {
-  font-family: police1;
+  font-family: "police1";
   src: url("./fonts/Combinedd.otf");
 }
 
-/* Dark theme */
-/* UTILE POUR FORCER UN MODE LIGHT */
-/* @media (prefers-color-scheme: dark) { */
-/* :root, */
-/* ::backdrop { */
-/* --bg: #fff; */
-/* --accent-bg: #f5f7ff; */
-/* --text: #212121; */
-/* --text-light: #585858; */
-/* --border: #898ea4; */
-/* --accent: #0d47a1; */
-/* --code: #d81b60; */
-/* --preformatted: #444; */
-/* --marked: #ffdd33; */
-/* --disabled: #efefef; */
-/* } */
-/* } */
+/* ============================================================
+   SHARED VARIABLES & RESET
+   ============================================================ */
+:root {
+  --purple: #9557b5;
+  --purple-dark: #7b3fa0;
+  --purple-light: rgba(149, 87, 181, 0.12);
+  --black: #111;
+  --white: #fff;
+  --grey-light: #f5f5f5;
+  --border-color: #ddd;
+  --text-muted: #666;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
 
 body {
   margin: 0;
-}
-
-/* FORMULAIRE */
-form label {
-  font-family: police1;
-  font-size: 1rem;
-}
-form input,
-select,
-textarea {
-  border-color: #c104fc;
-  overflow: visible;
-  outline: none;
-  background-color: white;
-}
-
-form input:focus,
-select:focus {
-  border: 3px solid rgba(77, 168, 112, 1);
-}
-
-label {
-  margin-top: 2rem;
-}
-
-input {
-  /* font-family: police1; */
-  /* font-weight: bold; */
-  background-color: none;
-  color: rgb(193, 4, 252);
-  border: 1px solid rgb(193, 4, 252);
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, sans-serif;
+  background: var(--white);
+  color: var(--black);
 }
 
 a {
-  color: rgb(193, 4, 252);
+  color: inherit;
+  text-decoration: none;
 }
 
 a:hover {
   text-decoration: none;
 }
-a, a:visited {
-  color: rgb(193, 4, 252);
+
+/* ============================================================
+   NAV BAR (shared across all public pages)
+   ============================================================ */
+.site-nav {
+  background: linear-gradient(to bottom, var(--purple) 0%, rgba(149, 87, 181, 0.0) 100%);
+  padding: 0.55rem 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
 }
 
-input:active {
-  border-color: rgba(77, 168, 112, 1);
+.site-nav__logo {
+  font-family: "police1", sans-serif;
+  font-size: 0.95rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--white);
+  text-decoration: none;
+  font-weight: 400;
 }
 
-button,
-[role="button"],
-input[type="submit"],
-input[type="reset"],
-input[type="button"],
-label[type="button"] {
-  background-color: white;
-  margin-top: 2rem;
-  font-size: 16px;
-  border-radius: 10px;
-  padding: 1rem;
-  margin: 1rem;
-  a {
-    color: black;
-    text-decoration: none;
-  }
+.site-nav__links {
+  display: flex;
+  gap: 3rem;
+  align-items: center;
 }
 
-button {}
-
-/* For Google Chrome, Safari, and newer versions of Opera */
-::placeholder {
-  /* color: rgb(213, 73, 255); */
-  font-size: 0.8rem;
+.site-nav__link {
+  font-size: 0.85rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--white);
+  text-decoration: none;
+  font-weight: 400;
+  opacity: 0.92;
+  transition: opacity 0.15s;
 }
 
-/* For Mozilla Firefox */
-::-moz-placeholder {
-  /* color: rgb(213, 73, 255); */
-  font-size: 0.8rem;
+.site-nav__link:hover {
+  opacity: 1;
+}
+
+.site-nav__right {
+  font-size: 0.85rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--white);
+  text-decoration: none;
+  font-weight: 400;
+  opacity: 0.92;
+  transition: opacity 0.15s;
+}
+
+.site-nav__right:hover {
+  opacity: 1;
+}
+
+/* ============================================================
+   SEARCH BAR (shared)
+   ============================================================ */
+.site-search {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1.5rem;
+  border-bottom: 1px solid var(--border-color);
+  background: var(--white);
+  flex-shrink: 0;
+}
+
+.site-search__icon {
+  color: var(--text-muted);
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+}
+
+.site-search__input {
+  flex: 1;
+  border: none;
+  outline: none;
+  font-size: 0.95rem;
+  color: var(--black);
+  background: transparent;
+  padding: 0.15rem 0;
+  font-family: inherit;
+}
+
+.site-search__input::placeholder {
+  color: #aaa;
 }